:root {
  --ink: #103e48;
  --teal: #078c98;
  --blue: #137fb0;
  --muted: #60777d;
  --line: #dce8e9;
  --muted: #405e66;
  --teal: #087581
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #0e3542
}
a {
  color: inherit;
  text-decoration: none
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent
}
a:focus-visible,
summary:focus-visible {
  outline: #078c98 solid 3px;
  outline-offset: 5px
}
.wrap {
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 1100px
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line)
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -1.2px;
  font-weight: 700
}
.brand img {
  object-fit: contain
}
.nav nav {
  display: flex;
  gap: 30px
}
.nav nav a:hover {
  text-decoration: underline
}
.nav-button {
  border: 1px solid var(--line);
  font-weight: 700
}
.nav-button span {
  margin-left: 19px
}
.hero {
  display: grid;
  grid-template-columns: 1fr 1.03fr;
  align-items: center;
  gap: 48px
}
.eyebrow {
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--teal);
  display: flex;
  gap: 8px;
  align-items: center
}
.eyebrow > span {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: var(--teal)
}
h1 {
  letter-spacing: -3.5px
}
h1 span {
  color: var(--teal)
}
.lead {
  color: var(--muted);
  margin: 0
}
.button {
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
  font-weight: 700
}
.button:hover {
  background: var(--teal)
}
.reassurance {
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: var(--muted)
}
.product-scene {
  box-shadow: 0 22px 50px #103e480b;
  position: relative
}
.scene-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700
}
.little-logo {
  color: var(--teal);
  font-size: 24px
}
.scene-status {
  font-weight: 400;
  border-radius: 4px;
  padding: 5px 8px;
  margin-left: auto;
  color: var(--muted)
}
.scene-body {
  display: grid;
  grid-template-columns: 1.1fr .75fr;
  gap: 20px;
  align-items: center
}
.flyer {
  box-shadow: 0 5px 17px #143d4710;
  text-align: center;
  transform: rotate(-2deg)
}
.edit-heading {
  font-weight: 700;
  margin-bottom: 23px
}
.edit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 21px
}
.edit-item b {
  display: block
}
.edit-item small {
  display: block;
  color: var(--muted);
  margin-top: 5px
}
.edit-icon {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--teal)
}
.save-illustration {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 8px
}
.mock-note {
  display: block;
  color: var(--muted);
  margin-top: 9px
}
.delivery {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line)
}
.mail-icon {
  color: var(--teal);
  border-radius: 8px
}
.delivery b {
  display: block
}
.delivery div > span {
  color: var(--muted);
  display: block;
  margin-top: 5px
}
.delivery-check {
  color: var(--teal);
  margin-left: auto
}
.benefit-strip {
  background: var(--ink)
}
.benefit-strip > div {
  display: flex;
  justify-content: space-between
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 45px
}
h2 {
  line-height: 1.2;
  letter-spacing: -1.5px;
  margin: 17px 0 0
}
.section-top > p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0
}
.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px
}
.steps article {
  border-top: 1px solid var(--line);
  padding-top: 23px
}
.step {
  font-size: 11px;
  color: var(--teal);
  font-weight: 700
}
.features h3,
.steps h3 {
  font-size: 17px;
  letter-spacing: -.3px;
  margin-top: 21px
}
.features p,
.steps p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
  max-width: 290px
}
.section-note {
  line-height: 1.7;
  color: var(--muted);
  margin-top: 35px
}
.features {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 27px
}
.feature-icon {
  display: flex;
  width: 39px;
  height: 39px;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--teal);
  font-size: 21px
}
.features h3 {
  line-height: 1.4;
  font-size: 15px;
  margin-bottom: 10px
}
.features p {
  font-size: 13px
}
.details-section {
  padding-bottom: 70px
}
.details-section h2 {
  font-size: 29px;
  margin-bottom: 25px
}
details {
  border-top: 1px solid var(--line)
}
summary {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 60px;
  padding: 21px 25px 21px 0;
  list-style: none;
  position: relative
}
summary:after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 18px;
  color: var(--teal)
}
details[open] summary:after {
  content: '−'
}
details p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 23px;
  max-width: 700px
}
footer {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
  padding-bottom: 25px;
  gap: 20px;
  max-width: 1100px
}
footer > span {
  font-size: 11px;
  color: var(--muted)
}
footer small {
  color: var(--muted)
}
@media(max-width:1000px) {
  .hero {
    gap: 30px
  }
  h1 {
    font-size: 53px
  }
  .scene-body {
    gap: 12px
  }
  .features {
    grid-template-columns: 1fr 1fr;
    gap: 35px
  }
}
@media(max-width:740px) {
  .wrap {
    padding-left: 23px;
    padding-right: 23px
  }
  .nav {
    height: 81px
  }
  .brand {
    font-size: 21px
  }
  .brand img {
    width: 39px;
    height: 39px
  }
  .nav nav {
    display: none
  }
  .nav-button {
    padding: 12px;
    font-size: 11px
  }
  .nav-button span {
    margin-left: 8px
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 42px;
    padding-bottom: 44px;
    min-height: 0
  }
  h1 {
    font-size: 48px;
    letter-spacing: -2.4px;
    line-height: 1.08;
    margin: 21px 0
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px
  }
  .lead {
    font-size: 14px;
    line-height: 1.8
  }
  .button {
    padding: 15px 16px;
    gap: 18px;
    font-size: 11px
  }
  .reassurance {
    gap: 14px;
    font-size: 10px;
    margin-top: 19px
  }
  .preview-note {
    margin-top: 18px;
    font-size: 9px
  }
  .product-scene {
    padding: 15px
  }
  .scene-body {
    grid-template-columns: 1.05fr .8fr;
    gap: 13px
  }
  .flyer {
    padding: 14px 12px
  }
  .flyer h2 {
    font-size: 25px
  }
  .flyer h2 span {
    font-size: 20px
  }
  .edit-item {
    gap: 6px;
    margin-bottom: 16px
  }
  .edit-icon {
    padding: 7px;
    font-size: 15px
  }
  .edit-heading {
    font-size: 12px;
    margin-bottom: 19px
  }
  .edit-item b {
    font-size: 9px
  }
  .edit-item small {
    font-size: 8px
  }
  .save-illustration {
    font-size: 9px;
    padding: 12px 8px
  }
  .delivery {
    padding: 12px;
    gap: 8px
  }
  .delivery b {
    font-size: 10px
  }
  .delivery div > span {
    font-size: 8px
  }
  .benefit-strip > div {
    font-size: 10px;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 20px
  }
  .section {
    padding-top: 61px;
    padding-bottom: 57px
  }
  .section-top {
    display: block;
    margin-bottom: 33px
  }
  .section-top > p {
    font-size: 13px;
    margin-top: 20px
  }
  h2 {
    font-size: 31px;
    letter-spacing: -1px
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 26px
  }
  .steps article {
    padding-top: 19px
  }
  .steps h3 {
    margin-top: 12px;
    margin-bottom: 9px
  }
  .steps p {
    max-width: none;
    font-size: 13px
  }
  .features {
    grid-template-columns: 1fr;
    gap: 27px
  }
  .features article {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 15px
  }
  .feature-icon {
    grid-row: 1/3
  }
  .features h3 {
    margin: 0 0 6px
  }
  .features p {
    max-width: none
  }
  .details-section h2 {
    font-size: 26px
  }
  .details-section summary {
    font-size: 13px
  }
  footer {
    flex-wrap: wrap;
    gap: 13px
  }
  footer small {
    width: 100%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}
@media(max-width:350px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px
  }
  h1 {
    font-size: 42px
  }
  .brand {
    font-size: 19px
  }
  .brand img {
    width: 31px
  }
  .nav-button {
    font-size: 10px;
    padding: 10px
  }
  .scene-body {
    gap: 9px
  }
  .edit-icon {
    display: none
  }
  .save-illustration {
    font-size: 8px
  }
  .reassurance {
    font-size: 9px
  }
}
.nav {
  height: 83px;
  border-bottom: 0
}
.brand {
  font-size: 22px;
  letter-spacing: -.8px
}
.brand img {
  width: 33px;
  height: 33px
}
.nav nav {
  font-size: 12px;
  gap: 26px
}
.nav-button {
  border-radius: 30px;
  background: #f1f8f8;
  border: 0;
  padding: 11px 17px
}
.hero {
  background: radial-gradient(ellipse at 78% 28%,#c9f2e9 0,transparent 44%),linear-gradient(110deg,#f5fafc,#effafb 55%,#e9f8fa);
  max-width: 1160px;
  border: 1px solid #edf5f5;
  border-radius: 22px;
  padding: 64px 65px 62px;
  min-height: 590px;
  gap: 62px;
  grid-template-columns: 1fr .95fr
}
.eyebrow {
  letter-spacing: 1.9px
}
.eyebrow > span {
  display: none
}
h1 {
  font-size: 51px;
  letter-spacing: -2px;
  line-height: 1.02;
  margin: 18px 0 21px
}
h1 span {
  color: var(--ink)
}
.lead {
  font-size: 15px;
  line-height: 1.7;
  max-width: 375px
}
.button {
  background: linear-gradient(110deg,#147fa2,#0a969c);
  padding: 12px 17px;
  border-radius: 7px;
  gap: 15px
}
.reassurance {
  margin-top: 29px;
  gap: 9px;
  align-items: stretch
}
.reassurance span {
  background: #ffffffb3;
  border: 1px solid #e8f0f0;
  border-radius: 9px;
  line-height: 1.5;
  padding: 10px 12px;
  color: #36545d
}
.preview-note {
  margin-top: 16px
}
.product-scene {
  background: #fff;
  border: 0;
  box-shadow: 0 15px 45px #29635a17;
  padding: 20px;
  border-radius: 20px;
  transform: rotate(1deg)
}
.scene-top {
  margin-bottom: 15px
}
.scene-body {
  gap: 16px;
  grid-template-columns: 1.1fr .7fr
}
.scene-status {
  background: 0 0
}
.flyer {
  transform: none;
  box-shadow: none
}
.edit-icon {
  font-size: 14px;
  padding: 7px
}
.save-illustration {
  background: linear-gradient(110deg,#147fa2,#0a969c);
  padding: 12px 9px;
  border-radius: 6px
}
.delivery {
  border: 0;
  background: #f0f9f8;
  padding: 11px;
  margin-top: 18px;
  border-radius: 9px
}
.mail-icon {
  background: #fff;
  padding: 7px;
  font-size: 17px
}
.benefit-strip {
  background: 0 0;
  color: #4c747b
}
.benefit-strip > div {
  padding-top: 22px;
  padding-bottom: 21px;
  max-width: 1000px
}
.section {
  padding-top: 68px;
  padding-bottom: 68px
}
h2 {
  font-size: 32px;
  letter-spacing: -1px
}
.section-top > p {
  font-size: 14px
}
.features-section {
  background: #f4faf9
}
.steps h3 {
  font-size: 16px;
  margin-top: 17px
}
.steps p {
  font-size: 13px;
  max-width: 275px
}
.details-section {
  max-width: 850px
}
footer .brand {
  font-size: 18px;
  min-height: 44px
}
footer .brand img {
  width: 29px;
  height: 29px
}
@media(max-width:1000px) {
  .hero {
    margin-left: 20px;
    margin-right: 20px;
    padding: 50px 38px;
    gap: 30px
  }
  h1 {
    font-size: 44px
  }
}
@media(max-width:740px) {
  .nav {
    height: 76px
  }
  .brand {
    font-size: 20px
  }
  .brand img {
    width: 30px;
    height: 30px
  }
  .nav-button {
    font-size: 10px;
    padding: 10px 13px
  }
  .hero {
    margin: 0 12px;
    border-radius: 17px;
    padding: 34px 24px 31px;
    min-height: 0;
    gap: 30px;
    grid-template-columns: 1fr;
    background: radial-gradient(ellipse at 80% 59%,#c9f2e9,transparent 58%),linear-gradient(110deg,#f5fafc,#edfafa)
  }
  h1 {
    font-size: 43px;
    letter-spacing: -1.5px;
    margin: 18px 0
  }
  .lead {
    font-size: 13px
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.5px
  }
  .button {
    font-size: 10px;
    padding: 12px 14px
  }
  .reassurance {
    margin-top: 21px;
    gap: 8px
  }
  .reassurance span {
    font-size: 9px;
    padding: 9px
  }
  .preview-note {
    font-size: 8px;
    margin-top: 12px
  }
  .product-scene {
    padding: 15px;
    border-radius: 16px;
    transform: rotate(1deg)
  }
  .scene-body {
    gap: 11px;
    grid-template-columns: 1.1fr .7fr
  }
  .flyer {
    padding: 13px 10px
  }
  .edit-item {
    gap: 5px
  }
  .edit-heading {
    font-size: 10px
  }
  .edit-item b {
    font-size: 8px
  }
  .edit-item small {
    font-size: 7px
  }
  .edit-icon {
    font-size: 13px;
    padding: 6px
  }
  .save-illustration {
    font-size: 8px;
    padding: 11px 7px
  }
  .delivery {
    padding: 10px;
    gap: 7px
  }
  .delivery b {
    font-size: 9px
  }
  .delivery div > span {
    font-size: 7px
  }
  .benefit-strip > div {
    font-size: 9px;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 18px
  }
  .section {
    padding-top: 49px;
    padding-bottom: 49px
  }
  h2 {
    font-size: 29px
  }
  .section-top > p {
    font-size: 13px
  }
}
@media(max-width:350px) {
  .hero {
    padding-left: 18px;
    padding-right: 18px
  }
  h1 {
    font-size: 37px
  }
  .brand {
    font-size: 18px
  }
  .reassurance span {
    font-size: 8px
  }
  .button {
    font-size: 9px;
    gap: 10px
  }
  .edit-icon {
    display: none
  }
}
.hero h1 {
  font-size: 49px;
  line-height: 1.07;
  letter-spacing: -1.8px
}
.hero-copy .eyebrow {
  letter-spacing: 1.6px
}
.steps article {
  position: relative
}
.steps .step {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf7f5
}
.scene-top .little-logo {
  font-size: 23px
}
.scene-body .edit-heading {
  line-height: 1.4
}
.section-top h2 {
  margin-top: 15px
}
@media(max-width:1000px) {
  .hero h1 {
    font-size: 42px
  }
}
@media(max-width:740px) {
  .hero h1 {
    font-size: 39px;
    line-height: 1.08;
    letter-spacing: -1.3px
  }
  .hero-copy .eyebrow {
    font-size: 7px;
    letter-spacing: 1.1px
  }
  .steps p {
    max-width: none
  }
}
@media(max-width:350px) {
  .hero h1 {
    font-size: 33px
  }
}
.flyer {
  aspect-ratio: 1080/1364;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 13px 12px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid #dcebea;
  box-shadow: 0 4px 12px #164d4d0b;
  position: relative
}
.flyer:before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #e6f1ef;
  pointer-events: none
}
.flyer h2 {
  font-family: Georgia,serif;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.4px;
  color: #164a56;
  margin: 0
}
.flyer h2 span {
  font-weight: 400;
  font-size: 17px;
  display: inline-block;
  margin-top: 4px;
  color: #357d80
}
.scene-body {
  align-items: center
}
@media(max-width:740px) {
  .flyer {
    padding: 11px 9px;
    gap: 5px
  }
  .flyer h2 {
    font-size: 17px
  }
  .flyer h2 span {
    font-size: 14px;
    margin-top: 3px
  }
}
@media(max-width:350px) {
  .flyer h2 {
    font-size: 14px
  }
  .flyer h2 span {
    font-size: 12px
  }
  .flyer {
    padding: 10px 8px
  }
}
.eyebrow,
.hero-copy .eyebrow {
  color: #337b72;
  font-size: 11px;
  letter-spacing: 1.2px
}
.mock-note,
.preview-note,
footer small {
  color: #405e66;
  font-size: 12px;
  line-height: 1.6
}
.nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px
}
.button,
.nav-button {
  min-height: 44px;
  min-width: 44px;
  font-size: 13px
}
.reassurance span {
  font-size: 12px
}
.scene-top {
  font-size: 13px
}
.scene-status {
  font-size: 12px
}
.edit-heading {
  max-width: 140px;
  font-size: 13px
}
.edit-item b {
  font-size: 12px
}
.edit-item small {
  font-size: 11px
}
.save-illustration {
  font-size: 12px;
  min-height: 44px;
  align-items: center
}
.delivery b {
  font-size: 12px
}
.delivery div > span {
  font-size: 11px;
  color: #405e66
}
.benefit-strip > div,
.section-note {
  font-size: 12px;
  color: #405e66
}

.steps .step {
  color: #08707a
}
@media(max-width:740px) {
  .eyebrow,
  .hero-copy .eyebrow {
    font-size: 10px;
    letter-spacing: 1px
  }
  .button,
  .nav-button {
    font-size: 12px
  }
  .reassurance {
    flex-wrap: wrap
  }
  .reassurance span {
    font-size: 11px
  }
  .scene-top {
    font-size: 12px
  }
  .scene-status {
    font-size: 11px
  }
  .edit-heading {
    font-size: 12px
  }
  .edit-item b {
    font-size: 11px
  }
  .edit-item small,
  .mock-note {
    font-size: 10px
  }
  .delivery b {
    font-size: 11px
  }
  .delivery div > span {
    font-size: 10px
  }
  .benefit-strip>div,
  .preview-note,
  .save-illustration {
    font-size: 11px
  }
}
.nav .brand {
  min-height: 44px
}
.brand img.logo-img{width:auto;height:44px}
footer .brand img.logo-img{height:34px}
@media(max-width:1000px){.brand img.logo-img{width:auto;height:34px}}

.scene-body{grid-template-columns:1fr !important;gap:14px !important}
.flyer-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flyer-pair img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 6px 18px #143d4720}
.scene-body .edit-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center}
.scene-body .edit-heading{grid-column:1/-1}
.scene-body .edit-item{margin-bottom:0}
.scene-body .mock-note{grid-column:1/-1}
@media(max-width:600px){.scene-body .edit-panel{grid-template-columns:1fr 1fr}.scene-body .save-illustration{grid-column:1/-1}}


.product-scene{position:relative;overflow:hidden}
.nav{justify-content:space-between}

/* ---------- Motion & interaction ---------- */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* Scroll progress bar (scroll-driven where supported, JS fallback sets --p) */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;pointer-events:none;background:linear-gradient(90deg,#147fa2,#0a969c,#2ec4b6);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline:scroll()){
  .scroll-progress{animation:progress linear both;animation-timeline:scroll(root)}
  @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

@keyframes shimmer{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}

/* Hero entrance (pure CSS so it runs before JS) */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scene-in{from{opacity:0;transform:translateY(28px) rotate(3deg) scale(.97)}to{opacity:1;transform:rotate(1deg)}}
.hero-copy > *{animation:rise .8s var(--ease-out) both}
.hero-copy > :nth-child(2){animation-delay:.08s}
.hero-copy > :nth-child(3){animation-delay:.16s}
.hero-copy > :nth-child(4){animation-delay:.24s}
.hero-copy > :nth-child(5){animation-delay:.32s}
.reassurance span{display:inline-block;animation:rise .7s var(--ease-out) both}
.reassurance span:nth-child(1){animation-delay:.34s}
.reassurance span:nth-child(2){animation-delay:.44s}
.product-scene{animation:scene-in 1s .15s var(--ease-out) both}
.hero{background-size:140% 140%;animation:hero-bg 16s ease-in-out infinite alternate}
@keyframes hero-bg{from{background-position:0 0}to{background-position:100% 60%}}
h1 > span{background:linear-gradient(90deg,var(--ink),#0a8f9a 45%,var(--ink) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ink-sweep 6s 1s ease-in-out infinite alternate}
@keyframes ink-sweep{from{background-position:100% 0}to{background-position:0 0}}

/* Product scene: 3D tilt + glare (JS sets --rx/--ry/--gx/--gy) */
.hero{perspective:1200px}
.product-scene.tilt-ready{animation:none;transform:rotate(1deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
.product-scene.is-tilting{transition:transform .08s linear,box-shadow .3s}
.product-scene.is-tilting{box-shadow:0 30px 70px #29635a2b}
.product-scene:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff59,transparent 45%)}
.product-scene.is-tilting:before{opacity:1}
.flyer-pair picture{display:block}
.flyer-pair img{transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-out)}
.flyer-pair picture:first-child img:hover{transform:translateY(-6px) rotate(-1.5deg)}
.flyer-pair picture:last-child img:hover{transform:translateY(-6px) rotate(1.5deg)}
.flyer-pair img:hover{box-shadow:0 16px 30px #143d4733}
.scene-status:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ec4b6;margin-right:6px;vertical-align:1px;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #2ec4b680}70%,100%{box-shadow:0 0 0 7px #2ec4b600}}

/* Editor bits */
.edit-item{border-radius:9px;transition:transform .3s var(--ease-out),background .3s}
.edit-item:hover{transform:translateX(3px);background:#f1f9f9}
.edit-icon{transition:transform .4s var(--ease-spring)}
.edit-item:hover .edit-icon{transform:rotate(-8deg) scale(1.1)}
button.save-illustration{width:100%;border:0;font:inherit;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s var(--ease-out),box-shadow .3s,filter .3s}
button.save-illustration:hover{filter:brightness(1.08);box-shadow:0 6px 16px #0a969c40;transform:translateY(-1px)}
button.save-illustration:active{transform:scale(.97)}
button.save-illustration:focus-visible{outline:#078c98 solid 3px;outline-offset:3px}
.save-illustration span{display:inline-block;transition:transform .4s var(--ease-spring)}
.save-illustration.saved span{animation:pop .6s var(--ease-spring)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.8) rotate(-10deg)}100%{transform:scale(1)}}
.ripple{position:absolute;border-radius:50%;background:#ffffff66;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.delivery{transition:background .4s,transform .4s var(--ease-out)}
.delivery.arrived{animation:arrive .9s var(--ease-out)}
.delivery.arrived .mail-icon{animation:fly .9s var(--ease-out)}
.delivery.arrived .delivery-check{animation:pop .6s .45s var(--ease-spring) both}
@keyframes arrive{0%{background:#f0f9f8}35%{background:#d8f3ef;transform:scale(1.02)}100%{background:#f0f9f8;transform:none}}
@keyframes fly{0%{transform:none}30%{transform:translate(10px,-10px) rotate(-12deg)}55%{transform:translate(-4px,2px) rotate(4deg)}100%{transform:none}}

/* Nav */
.nav-button{transition:background .3s,transform .3s var(--ease-out)}
.nav-button span{display:inline-block;transition:transform .35s var(--ease-spring)}
.nav-button:hover{background:#e2f2f2}
.nav-button:hover span{transform:translate(3px,-3px)}
.brand img{transition:transform .4s var(--ease-spring)}
.brand:hover img{transform:scale(1.03)}

/* Benefit strip */
.benefit-strip span{position:relative;padding-left:16px}
.benefit-strip span:before{content:'';position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:#0a969c;opacity:.7}

/* Cards */
.steps article,.features article{transition:transform .4s var(--ease-out)}
.steps article:hover,.features article:hover{transform:translateY(-4px)}
.steps article:after{content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;background:linear-gradient(90deg,#147fa2,#0a969c);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.steps article:hover:after{transform:scaleX(1)}
.steps .step{transition:transform .4s var(--ease-spring),background .3s,color .3s}
.steps article:hover .step{transform:scale(1.15);background:#0a969c;color:#fff}
.feature-icon{transition:transform .45s var(--ease-spring),box-shadow .3s,border-color .3s}
.features article:hover .feature-icon{transform:translateY(-3px) rotate(-6deg);border-color:#9fd6d3;box-shadow:0 8px 18px #0a969c26}

/* Scroll reveal (class only added by JS, so content stays visible without it) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.steps article.reveal.in:after{animation:draw 1s calc(var(--d,0s) + .2s) var(--ease-out)}
@keyframes draw{from{transform:scaleX(0)}50%{transform:scaleX(1)}to{transform:scaleX(0)}}

/* FAQ */
summary{transition:color .25s}
summary:hover{color:var(--teal)}
summary:after{transition:transform .35s var(--ease-spring);content:'+' !important}
details[open] summary:after{transform:rotate(45deg)}
details[open] p{animation:rise .45s var(--ease-out)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;transition:height .4s var(--ease-out),content-visibility .4s allow-discrete}
  details[open]::details-content{height:auto}
}

/* Below-the-fold sections render lazily */
.features-section,.details-section{content-visibility:auto;contain-intrinsic-size:auto 600px}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .scroll-progress{display:none}
}

/* Mobile: hide the product preview card */
@media(max-width:740px){.product-scene{display:none}}
p.eyebrow{margin:0}

/* Hero CTAs */
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;animation:rise .7s .5s var(--ease-out) both}
.hero-actions .button,.contact-form .button{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:12px 20px;border:0;border-radius:8px;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;background:linear-gradient(110deg,#147fa2,#0a969c);transition:transform .25s var(--ease-out),box-shadow .3s,filter .3s}
.hero-actions .button:hover,.contact-form .button:hover{transform:translateY(-2px);box-shadow:0 10px 22px #0a969c40;filter:brightness(1.06)}
.hero-actions .button span,.contact-form .button span{transition:transform .35s var(--ease-spring)}
.hero-actions .button:hover span,.contact-form .button:hover span{transform:translateX(4px)}
.hero-actions .text-link{display:inline-flex;align-items:center;min-height:46px;padding:12px 18px;border-radius:8px;border:1px solid #d6e8e8;background:#ffffffb3;font-size:14px;font-weight:700;transition:background .3s,border-color .3s}
.hero-actions .text-link:hover{background:#fff;border-color:#9fd6d3}

/* Contact form */
.contact-section{background:linear-gradient(110deg,#f5fafc,#e9f8fa)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.contact-lead{color:var(--muted);font-size:15px;line-height:1.7;margin:18px 0 0;max-width:340px}
.contact-form{display:grid;gap:14px;background:#fff;padding:28px;border-radius:18px;box-shadow:0 15px 45px #29635a14}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.contact-form label small{font-weight:400;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;font:inherit;font-size:15px;font-weight:400;color:var(--ink);padding:11px 12px;border:1px solid #d6e5e6;border-radius:8px;background:#fbfefe;transition:border-color .2s,box-shadow .2s}
.contact-form textarea{resize:vertical;min-height:110px}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-color:#0a969c;box-shadow:0 0 0 3px #0a969c2e}
.contact-form .button{justify-self:start}
.contact-form .button[disabled]{opacity:.65;cursor:wait;transform:none}
.form-status{margin:0;font-size:14px;line-height:1.5;min-height:1.5em}
.form-status.ok{color:#08707a;font-weight:700}
.form-status.err{color:#b3261e}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:740px){
  .contact-grid{grid-template-columns:1fr;gap:26px}
  .field-row{grid-template-columns:1fr}
  .contact-form{padding:20px}
  .hero-actions .button,.hero-actions .text-link{font-size:13px}
}
.hero .lead{max-width:460px}

/* Language switch */
.nav-right{display:flex;align-items:center;gap:14px}
.lang-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:13px;font-weight:700;color:#08707a;transition:color .2s}
.lang-link:hover{color:var(--ink);text-decoration:underline}

/* Right-to-left (Hebrew) */
[dir=rtl] body{font-family:Arial,"Noto Sans Hebrew",Helvetica,sans-serif}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .hero h1{letter-spacing:0}
[dir=rtl] .eyebrow,[dir=rtl] .hero-copy .eyebrow{letter-spacing:0;font-size:13px}
[dir=rtl] .nav-button span{margin-left:0;margin-right:19px}
[dir=rtl] .nav-button:hover span{transform:translate(-3px,-3px)}
[dir=rtl] .product-scene{transform:rotate(-1deg)}
[dir=rtl] .product-scene.tilt-ready{transform:rotate(-1deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
[dir=rtl] .product-scene{animation-name:scene-in-rtl}
@keyframes scene-in-rtl{from{opacity:0;transform:translateY(28px) rotate(-3deg) scale(.97)}to{opacity:1;transform:rotate(-1deg)}}
[dir=rtl] .delivery-check{margin-left:0;margin-right:auto}
[dir=rtl] .edit-item:hover{transform:translateX(-3px)}
[dir=rtl] .benefit-strip span{padding-left:0;padding-right:16px}
[dir=rtl] .benefit-strip span:before{left:auto;right:0}
[dir=rtl] .steps article:after{transform-origin:100% 50%}
[dir=rtl] summary{padding:21px 0 21px 25px}
[dir=rtl] summary:after{right:auto;left:0}
[dir=rtl] .hero-actions .button:hover span,[dir=rtl] .contact-form .button:hover span{transform:translateX(-4px)}
[dir=rtl] .scroll-progress{transform-origin:100% 50%}
[dir=rtl] .hp{left:auto;right:-9999px}
[dir=rtl] .contact-form input[type=email],[dir=rtl] .contact-form input[type=tel]{direction:ltr;text-align:right}
@media(max-width:740px){.nav-right{gap:6px}.lang-link{font-size:12px}}