/* ===== Brand tokens (from app src/lib/theme.ts) ===== */
:root {
  --primary: #747B5C;
  --primary-light: #A7AD92;
  --primary-strong: #656B50;
  --primary-dark: #3A412A;
  --bg: #F5F2E9;
  --surface: #FFFFFF;
  --surface-warm: #ECE7D8;
  --surface-deep: #E4E0D2;
  --sage: #747B5C;
  --sage-light: #A7AD92;
  --text: #2F3621;
  --text-secondary: #585D47;
  --text-muted: #9A9684;
  --border: #E4E0D2;
  --error: #B0322C;
  --success: #4F7A47;

  /* dramatic dark band */
  --dark: #1C1410;
  --dark-2: #2A1E16;
  --on-dark: #FBF7EC;
  --on-dark-muted: #C3B2A3;

  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-md: 0 4px 12px rgba(26, 20, 15, 0.09);
  --shadow-lg: 0 10px 30px rgba(26, 20, 15, 0.16);
  --shadow-xl: 0 24px 60px rgba(26, 20, 15, 0.28);
  --shadow-primary: 0 8px 18px rgba(101, 107, 80, 0.30);

  --maxw: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Buttons ===== */
.btn {
  font-family: inherit; font-weight: 800; font-size: 16px;
  border: none; border-radius: var(--radius-full);
  padding: 15px 26px; cursor: pointer; text-decoration: none;
  display: inline-block; text-align: center;
  transition: transform .1s ease, background-color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--primary-strong); color: #fff; box-shadow: var(--shadow-primary); }
.btn--primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn--primary[disabled] { opacity: .6; cursor: default; }
.btn--ghost { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary); padding: 11px 24px; font-size: 15px; }
.btn--ghost:hover { background: var(--surface-warm); }
.btn--ghost-light { color: var(--on-dark); border-color: rgba(244,235,224,.5); }
.btn--ghost-light:hover { background: rgba(244,235,224,.1); }

/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 30px;
  background: rgba(249,244,238,.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 6px 24px rgba(26,20,15,.12);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.topbar__logo { height: 48px; width: auto; display: block; }
.wordmark { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--primary-dark); text-decoration: none; }
.nav { display: flex; align-items: center; gap: 26px; flex: 1; margin-left: 32px; }
.nav__link { font-weight: 800; font-size: 15px; color: var(--primary); text-decoration: none; }
.nav__link:hover { color: var(--primary-dark); }
.nav__cta { font-weight: 800; font-size: 15px; color: var(--primary); text-decoration: none; margin-left: auto; }
.nav__cta:hover { color: var(--primary-dark); }
.nav-toggle { display: none; }
.nav-burger { display: none; }

@media (max-width: 640px) {
  .topbar { padding: 12px 18px; }
  .wordmark { font-size: 18px; }
  .topbar__logo { height: 38px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0;
  }
  .nav-burger span { display: block; width: 24px; height: 2.5px; background: var(--primary); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
    background: rgba(249,244,238,.98);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 10px 24px rgba(26,20,15,.16);
    border-top: 1px solid rgba(232,221,211,.6);
    padding: 6px 0; display: none;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav__link, .nav__cta { padding: 15px 22px; margin-left: 0; font-size: 16px; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; padding: 40px 20px 80px; }
.hero__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 80%;
  background: radial-gradient(60% 70% at 50% 0%, #FDE4D2 0%, rgba(253,228,210,0) 70%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 960px; margin: 0 auto; text-align: center; }
/* Hero line breaks apply on wider screens only; on mobile the text wraps naturally */
.hero-br { display: none; }
@media (min-width: 860px) { .hero-br { display: inline; } }

.hero__cards { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin: 14px 0 36px; }
.hcard { margin: 0; width: 158px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--surface); }
.hcard img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }
/* gentle opposing float (translate only -> no resampling, stays crisp) */
.hcard--photo { animation: heroFloatA 5.5s ease-in-out infinite; }
.hcard--art { animation: heroFloatB 5.5s ease-in-out 0.4s infinite; }
@keyframes heroFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes heroFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes fadeIn { to { opacity: 1; } }

.hero__title { font-size: 34px; line-height: 1.1; font-weight: 900; letter-spacing: -1px; margin-bottom: 18px; }
.hero__subtitle { font-size: 18px; color: var(--text-secondary); margin: 0 auto 30px; max-width: 640px; }

/* ===== Signup ===== */
.signup { width: 100%; max-width: 520px; margin: 0 auto; }
.signup__row { display: flex; flex-direction: column; gap: 10px; }
.signup__input { font-family: inherit; font-size: 16px; padding: 15px 18px; border: 1.5px solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: var(--text); width: 100%; }
.signup__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217,98,43,.15); }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup__note { font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.signup__note--light { color: var(--on-dark-muted); }
.signup__status { font-size: 14px; font-weight: 700; margin-top: 12px; min-height: 20px; }
.signup__status.is-error { color: var(--error); }
.signup__status.is-success { color: var(--success); }
.signup--center { margin: 0 auto; }

/* ===== Survey CTA ===== */
.survey { margin: 40px auto 0; max-width: 560px; padding: 30px 24px 28px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.survey__heading { font-size: 22px; font-weight: 900; letter-spacing: -.4px; margin-bottom: 10px; }
.survey__text { font-size: 15px; color: var(--text-secondary); margin: 0 auto 20px; max-width: 46ch; }
.survey--light { background: rgba(244,235,224,.06); border-color: rgba(244,235,224,.18); box-shadow: none; }
.survey--light .survey__heading { color: var(--on-dark); }
.survey--light .survey__text { color: var(--on-dark-muted); }

/* ===== Statement band (fades from cream into the dark section) ===== */
.statement { padding: 96px 24px 116px; text-align: center; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 52%, var(--dark) 100%); }
.statement__line { max-width: 1000px; margin: 0 auto; font-size: clamp(26px, 5vw, 52px); font-weight: 900; letter-spacing: -1.2px; line-height: 1.08; }
.statement__line .word { display: inline-block; }

/* ===== How it works (dark section begins here, full-bleed via <main>) ===== */
main { background: var(--dark); color: var(--on-dark); }
.how { max-width: var(--maxw); margin: 0 auto; padding: 64px 22px 40px; }
.how__title { text-align: center; color: var(--on-dark); font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -1px; margin-bottom: 30px; }

.feature {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
  padding: 56px 0;
}
.feature__media { display: flex; justify-content: center; }
.feature__num { display: inline-block; font-size: 14px; font-weight: 900; letter-spacing: 2px; color: var(--primary-light); margin-bottom: 8px; }
.feature__heading { font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.6px; margin-bottom: 12px; line-height: 1.12; color: var(--on-dark); }
.feature__body { font-size: 17px; color: var(--on-dark-muted); max-width: 46ch; }

/* ===== Stage (visual canvas) ===== */
.stage {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(160deg, var(--surface-warm), var(--surface-deep));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
}

/* 1. Photo stack (square frames = crisp, like the hero/book-preview) */
.photostack { position: relative; width: 250px; height: 250px; }
.photostack__card { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.photostack__card img { width: 100%; height: 100%; object-fit: cover; }
.photostack__card--1 { z-index: 3; } .photostack__card--2 { z-index: 2; } .photostack__card--3 { z-index: 1; }

/* 2. Cover mockup (rendered closed coil-bound book) on a cream card (#F5F2E9 so the
   image's cream background blends; transparent PNG also works). */
.stage--cover { background: #F5F2E9; }
.cover-mockup { display: block; width: auto; max-width: 100%; max-height: 90%; margin: 0 auto; animation: bookBob 5s ease-in-out infinite; }

/* 3. Styles (cards fill the tile) */
.stage--styles { aspect-ratio: auto; max-width: 560px; padding: 28px 24px; }
.styles { display: flex; gap: 16px; align-items: center; justify-content: center; width: 100%; }
.styles__opt { position: relative; margin: 0; flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); border: 3px solid transparent; }
.styles__opt img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.styles__opt figcaption { font-size: 14px; font-weight: 800; color: var(--text-secondary); padding: 10px 4px; text-align: center; }
.styles__opt.is-selected { border-color: var(--primary); }
.styles__tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }

/* 4. Book preview (3D page-flip from design handoff; scoped to .bookpreview) */
.bookpreview { --bpT: 9s; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 720 / 480; position: relative; }
.bookpreview .bp-fit { position: absolute; top: 0; left: 0; width: 720px; height: 480px; transform-origin: top left; transform: scale(var(--bps, 0.5)); }
.bookpreview .tile { position: relative; width: 720px; height: 480px; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #2A1E16 0%, #1C1410 100%); box-shadow: 0 40px 80px -28px rgba(0,0,0,.8); }
.bookpreview .glow { position: absolute; left: 50%; top: 46%; width: 660px; height: 520px; transform: translate(-50%,-50%); background: radial-gradient(closest-side, rgba(239,168,130,.42), rgba(217,98,43,.16) 45%, transparent 72%); filter: blur(6px); pointer-events: none; }
.bookpreview .vignette { position: absolute; inset: 0; pointer-events: none; border-radius: 20px; box-shadow: inset 0 0 120px 24px rgba(0,0,0,.55); }
.bookpreview .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1700px; perspective-origin: 50% 42%; }
.bookpreview .book-float { transform-style: preserve-3d; animation: bp-float 6s ease-in-out infinite; }
@keyframes bp-float { 0%,100%{ transform: translateY(2px) rotateZ(-.3deg);} 50%{ transform: translateY(-8px) rotateZ(.3deg);} }
.bookpreview .book-shift { transform-style: preserve-3d; animation: bp-shift var(--bpT) infinite; }
@keyframes bp-shift { 0%,7%{ transform: translateX(-150px);} 17%,82%{ transform: translateX(0);} 90%,100%{ transform: translateX(-150px);} }
.bookpreview .book { position: relative; width: 600px; height: 300px; transform-style: preserve-3d; transform: rotateX(7deg); }
.bookpreview .book-shadow { position: absolute; left: 50%; top: calc(100% - 6px); width: 520px; height: 60px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 70%); filter: blur(8px); animation: bp-shadow var(--bpT) infinite; }
@keyframes bp-shadow { 0%,7%{ width:320px; opacity:.5;} 17%,82%{ width:640px; opacity:.7;} 90%,100%{ width:320px; opacity:.5;} }
.bookpreview .leaf, .bookpreview .base { position: absolute; top: 0; left: 300px; width: 300px; height: 300px; transform-style: preserve-3d; }
.bookpreview .base { transform: translateZ(0); }
.bookpreview .leaf.l5 { transform: translateZ(3px); }
.bookpreview .leaf.l4 { transform: translateZ(6px); }
.bookpreview .leaf.l3 { transform: translateZ(9px); }
.bookpreview .leaf.l2 { transform: translateZ(12px); }
.bookpreview .leaf.l1 { transform: translateZ(15px); }
.bookpreview .leaf.cover { transform: translateZ(19px); }
.bookpreview .sheet { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; will-change: transform; }
.bookpreview .face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; border-radius: 3px 9px 9px 3px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset -6px 0 14px -10px rgba(0,0,0,.22); }
.bookpreview .face.front { display: block; }
.bookpreview .face.front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bookpreview .face.back { transform: rotateY(180deg); border-radius: 9px 3px 3px 9px; background: linear-gradient(90deg, rgba(0,0,0,.05), transparent 16%), #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 6px 0 14px -10px rgba(0,0,0,.2); }
.bookpreview .cover .face.front { background: #0e1a2c; }
.bookpreview .cover .face.back { background: #fff; }
.bookpreview .shade { position: absolute; inset: 0; border-radius: 3px 9px 9px 3px; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0) 55%); opacity: 0; pointer-events: none; backface-visibility: hidden; }
.bookpreview .coil { position: absolute; top: 0; left: 300px; height: 300px; width: auto; transform: translateX(-50%) translateZ(28px); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.bookpreview .cover .sheet { animation: bp-flipCover var(--bpT) infinite; }
@keyframes bp-flipCover { 0%,7%{ transform: rotateY(0deg);} 17%,82%{ transform: rotateY(-178deg); animation-timing-function: ease-in-out;} 88.5%{ transform: rotateY(-178deg); animation-timing-function: cubic-bezier(.5,0,.2,1);} 92%,100%{ transform: rotateY(0deg);} }
.bookpreview .l1 .sheet { animation: bp-flip1 var(--bpT) infinite; }
.bookpreview .l2 .sheet { animation: bp-flip2 var(--bpT) infinite; }
.bookpreview .l3 .sheet { animation: bp-flip3 var(--bpT) infinite; }
.bookpreview .l4 .sheet { animation: bp-flip4 var(--bpT) infinite; }
.bookpreview .l5 .sheet { animation: bp-flip5 var(--bpT) infinite; }
@keyframes bp-flip1 { 0%,17%{transform:rotateY(0);} 26%{transform:rotateY(-178deg); animation-timing-function:ease-in-out;} 87%{transform:rotateY(-178deg);} 90%,100%{transform:rotateY(0);} }
@keyframes bp-flip2 { 0%,30%{transform:rotateY(0);} 39%{transform:rotateY(-178deg); animation-timing-function:ease-in-out;} 85.5%{transform:rotateY(-178deg);} 88.5%,100%{transform:rotateY(0);} }
@keyframes bp-flip3 { 0%,43%{transform:rotateY(0);} 52%{transform:rotateY(-178deg); animation-timing-function:ease-in-out;} 84%{transform:rotateY(-178deg);} 87%,100%{transform:rotateY(0);} }
@keyframes bp-flip4 { 0%,56%{transform:rotateY(0);} 65%{transform:rotateY(-178deg); animation-timing-function:ease-in-out;} 82.5%{transform:rotateY(-178deg);} 85.5%,100%{transform:rotateY(0);} }
@keyframes bp-flip5 { 0%,69%{transform:rotateY(0);} 78%{transform:rotateY(-178deg); animation-timing-function:ease-in-out;} 81%{transform:rotateY(-178deg);} 84%,100%{transform:rotateY(0);} }
.bookpreview .cover .shade { animation: bp-shadeCover var(--bpT) infinite; }
.bookpreview .l1 .shade { animation: bp-shade1 var(--bpT) infinite; }
.bookpreview .l2 .shade { animation: bp-shade2 var(--bpT) infinite; }
.bookpreview .l3 .shade { animation: bp-shade3 var(--bpT) infinite; }
.bookpreview .l4 .shade { animation: bp-shade4 var(--bpT) infinite; }
.bookpreview .l5 .shade { animation: bp-shade5 var(--bpT) infinite; }
@keyframes bp-shadeCover { 0%,8%{opacity:0;} 12.5%{opacity:.4;} 17%,100%{opacity:0;} }
@keyframes bp-shade1 { 0%,18%{opacity:0;} 22%{opacity:.4;} 26%,100%{opacity:0;} }
@keyframes bp-shade2 { 0%,31%{opacity:0;} 35%{opacity:.4;} 39%,100%{opacity:0;} }
@keyframes bp-shade3 { 0%,44%{opacity:0;} 48%{opacity:.4;} 52%,100%{opacity:0;} }
@keyframes bp-shade4 { 0%,57%{opacity:0;} 61%{opacity:.4;} 65%,100%{opacity:0;} }
@keyframes bp-shade5 { 0%,70%{opacity:0;} 74%{opacity:.4;} 78%,100%{opacity:0;} }
@media (prefers-reduced-motion: reduce){
  .bookpreview .book-float, .bookpreview .book-shift, .bookpreview .book-shadow,
  .bookpreview .cover .sheet, .bookpreview .l1 .sheet, .bookpreview .l2 .sheet, .bookpreview .l3 .sheet, .bookpreview .l4 .sheet, .bookpreview .l5 .sheet,
  .bookpreview .shade { animation: none !important; }
  .bookpreview .book-shift { transform: translateX(0) !important; }
  .bookpreview .cover .sheet, .bookpreview .l1 .sheet, .bookpreview .l2 .sheet, .bookpreview .l3 .sheet { transform: rotateY(-178deg) !important; }
  .bookpreview .l4 .sheet, .bookpreview .l5 .sheet { transform: rotateY(0deg) !important; }
  .bookpreview .shade { opacity: 0 !important; }
}

/* ===== Delivery ===== */
.delivery { background: var(--dark); color: var(--on-dark); padding: 70px 22px 90px; }
.delivery__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.delivery .feature__body { color: var(--on-dark-muted); }
.delivery .feature__heading { color: var(--on-dark); }
/* Delivery truck (pure-CSS scene from design handoff; scoped to .dtruck) */
.dtruck { --dtT: 4.6s; --orange:#df7a26; --orange-dk:#c9661a; --window:#b9d6df; --headlight:#f4c531; --cream:#efe4d2; --tire:#1d140d; --tire2:#2c1f13;
  width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 760 / 440; position: relative; }
.dtruck__fit { position: absolute; top: 0; left: 0; width: 760px; height: 440px; transform-origin: top left; transform: scale(var(--dts, 0.5)); }
.dtruck .tile { position: relative; width: 760px; height: 440px; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset; }
.dtruck .sky { position: absolute; inset: 0 0 42% 0; background: linear-gradient(#2c1f15 0%, #3c2a1a 55%, #6a4326 100%); }
.dtruck .haze { position: absolute; left: 0; right: 0; top: 58%; height: 46px; transform: translateY(-50%); background: linear-gradient(#7a4e2b00, #8a572d66 45%, #7a4e2b00); filter: blur(2px); }
.dtruck .road { position: absolute; inset: 58% 0 0 0; background: linear-gradient(#6f4a29 0%, #5d3d23 40%, #4a3019 100%); }
.dtruck .road::after { content:""; position:absolute; inset:0; background: radial-gradient(2px 1px at 20% 40%, #00000022, transparent), radial-gradient(2px 1px at 70% 60%, #00000022, transparent), radial-gradient(2px 1px at 45% 80%, #ffffff10, transparent), radial-gradient(2px 1px at 85% 30%, #00000022, transparent); opacity:.7; }
.dtruck .lane { position:absolute; left:-40px; right:-40px; top:72%; height:7px; border-radius:6px; background:linear-gradient(90deg, var(--cream) 0 46px, transparent 46px 84px); background-size:84px 100%; opacity:.92; animation:dt-lane var(--dtT) infinite; filter:drop-shadow(0 1px 0 #00000040); }
@keyframes dt-lane { 0%,44%{ background-position-x:0; animation-timing-function:cubic-bezier(.5,0,.85,.45);} 60%{ background-position-x:-1008px;} 100%{ background-position-x:-1008px;} }
.dtruck .vignette { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px 10px rgba(0,0,0,.45); border-radius:20px; }
.dtruck .drive { position:absolute; inset:0; animation:dt-drive var(--dtT) infinite; will-change:transform; }
@keyframes dt-drive { 0%{ transform:translateX(-560px) scaleX(1); animation-timing-function:cubic-bezier(.16,.7,.25,1);} 16%{ transform:translateX(0) scaleX(1); animation-timing-function:linear;} 40%{ transform:translateX(0) scaleX(1); animation-timing-function:cubic-bezier(.5,0,.9,.35);} 46%{ transform:translateX(-26px) scaleX(.94); animation-timing-function:cubic-bezier(.5,0,1,.4);} 51%{ transform:translateX(8px) scaleX(1.05); animation-timing-function:cubic-bezier(.62,0,1,.45);} 62%{ transform:translateX(1420px) scaleX(1.14); animation-timing-function:linear;} 100%{ transform:translateX(1420px) scaleX(1.14);} }
.dtruck .bob { position:absolute; left:246px; top:172px; width:268px; height:150px; animation:dt-vib .11s infinite; transform-origin:50% 90%; }
@keyframes dt-vib { 0%{transform:translateY(0) rotate(0);} 25%{transform:translateY(-.7px) rotate(-.45deg);} 50%{transform:translateY(.4px) rotate(.4deg);} 75%{transform:translateY(-.3px) rotate(.5deg);} 100%{transform:translateY(0) rotate(0);} }
.dtruck .truck { position:absolute; inset:0; }
.dtruck .shadow { position:absolute; left:24px; top:138px; width:222px; height:22px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.dtruck .cargo { position:absolute; left:0; top:4px; width:150px; height:104px; background:linear-gradient(#e8843a, var(--orange)); border-radius:11px; box-shadow:inset 0 -7px 0 #00000018, inset 0 5px 0 #ffffff22; }
.dtruck .cargo::after { content:""; position:absolute; inset:9px; border-radius:6px; border:2px solid #00000016; }
.dtruck .stripe { position:absolute; left:0; top:62px; width:150px; height:26px; z-index:2; display:flex; align-items:center; justify-content:center; font-family:ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; font-weight:800; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; color:#5a3a1e; background:linear-gradient(#f4ecd9, #e6d6bd); box-shadow:0 1px 0 #0000001c, inset 0 1px 0 #ffffff80, inset 0 -1px 0 #0000000f; }
.dtruck .cab { position:absolute; left:144px; top:46px; width:120px; height:66px; background:linear-gradient(#d8732a, var(--orange-dk)); clip-path:polygon(0 0, 48% 0, 100% 42%, 100% 100%, 0 100%); }
.dtruck .windshield { position:absolute; left:206px; top:55px; width:46px; height:28px; background:linear-gradient(150deg, #e2f3f8, var(--window)); clip-path:polygon(0 0, 100% 60%, 100% 100%, 0 100%); box-shadow:inset 0 0 0 1px #ffffff55; }
.dtruck .headlight { position:absolute; left:250px; top:84px; width:11px; height:11px; border-radius:50%; background:var(--headlight); box-shadow:0 0 10px 2px #f4c53188; }
.dtruck .bumper { position:absolute; left:246px; top:99px; width:20px; height:13px; border-radius:3px; background:#3a2a1c; }
.dtruck .chassis { position:absolute; left:10px; top:108px; width:244px; height:10px; border-radius:5px; background:#2a1d12; }
.dtruck .wheel { position:absolute; top:104px; width:48px; height:48px; border-radius:50%; background:repeating-conic-gradient(var(--tire) 0 30deg, var(--tire2) 30deg 60deg); box-shadow:inset 0 0 0 5px #120c07, 0 2px 4px #00000050; animation:dt-spin .32s linear infinite; }
.dtruck .wheel.rear { left:40px; } .dtruck .wheel.front { left:190px; }
.dtruck .wheel .hub { position:absolute; inset:14px; border-radius:50%; background:radial-gradient(closest-side, #f2e7d4, #cbb89a); box-shadow:0 0 0 2px #00000030; }
.dtruck .wheel .hub::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#7c6a4e; }
@keyframes dt-spin { to { transform:rotate(360deg); } }
.dtruck .gust { position:absolute; left:178px; top:236px; width:150px; height:92px; transform-origin:100% 50%; animation:dt-gust var(--dtT) infinite; will-change:transform, opacity; }
.dtruck .gust b { position:absolute; right:4px; top:24px; width:100px; height:52px; border-radius:50%; background:radial-gradient(closest-side, #efe4d24d, #efe4d200); }
.dtruck .gust .curl { position:absolute; right:52px; top:22px; width:44px; height:48px; border:3px solid transparent; border-left-color:#efe4d29e; border-top-color:#efe4d29e; border-radius:50%; transform:rotate(26deg); }
.dtruck .gust i { position:absolute; height:3px; border-radius:3px; background:linear-gradient(90deg, #efe4d200, #efe4d2b3); }
.dtruck .gust i:nth-of-type(1){ top:22px; right:8px; width:82px; opacity:.9; }
.dtruck .gust i:nth-of-type(2){ top:40px; right:0; width:106px; height:4px; opacity:1; }
.dtruck .gust i:nth-of-type(3){ top:58px; right:12px; width:72px; opacity:.8; }
@keyframes dt-gust { 0%,50%{ opacity:0; transform:translateX(0) scaleX(.4);} 56%{ opacity:.95; transform:translateX(-12px) scaleX(1);} 64%{ opacity:.6; transform:translateX(-48px) scaleX(1.5);} 74%{ opacity:0; transform:translateX(-94px) scaleX(1.9);} 100%{ opacity:0;} }
@media (prefers-reduced-motion: reduce){ .dtruck .drive,.dtruck .bob,.dtruck .wheel,.dtruck .lane,.dtruck .gust{ animation:none !important; } .dtruck .drive{ transform:translateX(0); } }

/* ===== Closing ===== */
.closing { background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%); color: var(--on-dark); text-align: center; padding: 90px 22px; }
.closing__title { font-size: clamp(30px, 5vw, 52px); font-weight: 900; letter-spacing: -1.2px; margin-bottom: 14px; }
.closing__lede { font-size: 17px; color: var(--on-dark-muted); max-width: 44ch; margin: 0 auto 30px; }
.closing .signup__input { background: rgba(255,255,255,.96); border-color: transparent; }

/* ===== Footer ===== */
.footer { text-align: center; padding: 44px 20px 60px; color: var(--text-muted); background: var(--dark-2); }
.footer__brand { font-weight: 900; font-size: 18px; color: var(--on-dark); margin-bottom: 8px; }
.footer__meta { font-size: 13px; margin-bottom: 10px; color: var(--on-dark-muted); }
.footer__privacy { font-size: 12px; max-width: 440px; margin: 0 auto; line-height: 1.5; color: var(--text-muted); }
.footer__nav { font-size: 13px; margin-bottom: 10px; }
.footer__nav a { color: var(--on-dark-muted); text-decoration: none; }
.footer__nav a:hover { color: var(--on-dark); }

/* ===== About / Our story ===== */
.about { max-width: 720px; margin: 0 auto; padding: 64px 22px 12px; }
.about__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 800; color: var(--primary-light); text-align: center; margin-bottom: 14px; }
.about__title { font-size: clamp(30px, 5vw, 46px); font-weight: 900; letter-spacing: -1px; line-height: 1.1; text-align: center; margin-bottom: 18px; color: var(--on-dark); }
.about__title .word { display: inline-block; }
.about__lead { font-size: 20px; color: var(--on-dark-muted); text-align: center; max-width: 38ch; margin: 0 auto 44px; line-height: 1.45; }
.about__body p { font-size: 18px; color: var(--on-dark-muted); line-height: 1.7; margin-bottom: 22px; }
.about__quote { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: var(--on-dark); line-height: 1.32; text-align: center; margin: 40px 0; letter-spacing: -0.5px; }
.about__founder { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 36px; }
.about__founder-photo { width: 100%; max-width: 400px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.about__founder-photo img { width: 100%; height: auto; display: block; }
.about__sign { text-align: center; }
.about__sign .about__sign-name { font-weight: 900; font-size: 24px; color: var(--on-dark); margin: 0 0 6px; }
.about__sign .about__sign-role { font-size: 18px; color: var(--on-dark-muted); margin: 0; line-height: 1.5; }

/* ===== Desktop ===== */
@media (min-width: 760px) {
  .about__founder { flex-direction: row; align-items: center; gap: 40px; }
  .about__founder-photo { flex: 0 0 auto; width: 400px; }
  .about__sign { text-align: center; }
  .hero { padding: 56px 20px 100px; }
  .hero__title { font-size: 52px; }
  .hcard { width: 230px; }
  .signup__row { flex-direction: row; }
  .signup__input { flex: 1; }
  .signup__btn { white-space: nowrap; }

  .feature { grid-template-columns: 1fr 1fr; gap: 56px; padding: 84px 0; }
  .feature__text { padding-right: 10px; }
  .feature--reverse .feature__media { order: 2; }
  .feature--reverse .feature__text { order: 1; }
  .delivery__inner { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}
@media (min-width: 1000px) { .hero__title { font-size: 60px; } }

/* ===== Stage flourishes (JS toggles .is-in; defaults look complete without JS) ===== */
.photostack__card { transition: transform .8s cubic-bezier(.2,.8,.25,1); }
.stage.is-in .photostack__card--1 { transform: rotate(-8deg) translate(-30px, 12px); }
.stage.is-in .photostack__card--3 { transform: rotate(8deg) translate(32px, -12px); }
.book { animation: bookBob 4.5s ease-in-out infinite; }
@keyframes bookBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
.styles__opt { transition: transform .5s ease; }
.stage.is-in .styles__opt.is-selected { transform: scale(1.06); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hcard { opacity: 1 !important; }
}