/* ==========================================================================
   Kuchenly - marketing site stylesheet
   Phase 1: tokens + components extracted verbatim from index.html's inline
   styles. Values are unchanged; only their location has moved.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* Lets the accordion animate to an auto height instead of snapping. */
:root{
  interpolate-size:allow-keywords;

  /* -- Palette ------------------------------------------------------------ */
  --c-cream:#FAFAF8;        /* page ground                                   */
  --c-warm-grey:#F2F1EC;    /* alternating section band                      */
  --c-sage-pale:#EAF2EE;    /* tinted band / icon tiles                      */
  --c-mint:#D0E6DB;         /* on-dark accent text, selection                */
  --c-sage:#4E7260;         /* primary brand                                 */
  --c-sage-dark:#3E5C4D;    /* primary, pressed / hover                      */
  --c-ink:#18170F;          /* headings, device bezels                       */
  --c-sage-deep:#2F4A3C;    /* closing CTA band (owner pick 2026-09-05 over ink) */
  --c-body:#5A574E;         /* body copy                                     */
  --c-muted:#908D85;        /* fine print                                    */
  --c-bronze:#8A6E3E;       /* eyebrow labels, hairlines                     */
  --c-border:#E2DFD8;       /* hairline borders                              */
  --c-card:#FFFFFF;         /* raised card surface                           */

  /* -- Translucent surfaces ---------------------------------------------- */
  --c-header-bg:rgba(250,250,248,.82);
  --c-ghost-border:rgba(208,230,219,.4);
  --c-ghost-hover:rgba(208,230,219,.12);

  /* -- Ambient glows ------------------------------------------------------ */
  --glow-hero:radial-gradient(58% 52% at 56% 44%,rgba(78,114,96,.18),rgba(78,114,96,0) 70%);
  --glow-brand:radial-gradient(closest-side,rgba(78,114,96,.20),rgba(78,114,96,0));

  /* -- Typeface ----------------------------------------------------------- */
  --font-sans:Outfit,-apple-system,system-ui,sans-serif;

  /* -- Type scale --------------------------------------------------------- */
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:14px;
  --text-base:15px;
  --text-md:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:22px;
  --text-2-5xl:30px;
  --text-3xl:36px;
  --text-4xl:42px;
  --text-4-5xl:48px;
  --text-5xl:58px;
  /* Fluid display size for the hero heading (Architecture B). Caps at 72px so
     the 44-character headline still lands on 3 lines at 1440px. */
  --text-hero:clamp(2.5rem,4.75vw,4.5rem);
  --text-numeral:44px;      /* process-step numerals                         */

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --lh-none:1;
  --lh-hero:1.04;
  --lh-display:0.98;
  --lh-cta:1.08;
  --lh-tight:1.12;
  --lh-body:1.6;

  --track-hero:-0.02em;
  --track-display:-0.032em;
  --track-heading:-0.015em;
  --track-brand:-0.01em;
  --track-foot:0.08em;
  --track-badge:0.09em;
  --track-eyebrow:0.1em;
  --track-wide:0.16em;

  /* -- Space scale (name = px value) -------------------------------------- */
  --space-6:6px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-18:18px;
  --space-20:20px;
  --space-22:22px;
  --space-24:24px;
  --space-26:26px;
  --space-28:28px;
  --space-30:30px;
  --space-32:32px;
  --space-36:36px;
  --space-40:40px;
  --space-44:44px;
  --space-48:48px;
  --space-64:64px;
  --space-72:72px;
  --space-84:84px;
  --space-90:90px;
  --space-92:92px;
  --space-96:96px;
  --space-100:100px;

  /* -- Layout ------------------------------------------------------------- */
  --container-w:1200px;
  --container-narrow:820px;
  --gutter:24px;
  --header-h:72px;

  /* Measures (max-widths that exist to control line length) */
  --measure-head:620px;
  --measure-brand:560px;
  --measure-cta-block:660px;
  --measure-hero:22ch;
  --measure-lead:46ch;
  --measure-cta:44ch;
  --measure-foot:34ch;
  --measure-caption:30ch;

  /* -- Radii -------------------------------------------------------------- */
  --radius-sm:12px;         /* icon tile                                     */
  --radius-md:16px;         /* faq item                                      */
  --radius-lg:20px;         /* feature card                                  */
  --radius-shot:26px;       /* screenshot inside its frame                   */
  --radius-screen:31px;     /* hero phone screen                             */
  --radius-frame:34px;      /* screenshot frame                              */
  --radius-phone:40px;      /* hero phone bezel                              */
  --radius-pill:999px;

  /* -- Elevation ---------------------------------------------------------- */
  --shadow-btn:0 1px 2px rgba(24,23,15,.05);
  --shadow-btn-hover:0 8px 20px rgba(24,23,15,.12);
  --shadow-card-hover:0 12px 32px rgba(24,23,15,.10);
  --shadow-frame:0 16px 36px rgba(24,23,15,.16);
  --shadow-phone:0 22px 50px rgba(24,23,15,.22);

  /* -- Motion ------------------------------------------------------------- */
  /* Motion personality: PHYSICAL. Spring settle rather than clinical snap or
     theatrical slow-build, because the product is domestic and the brand line
     is "meal planning, made calm".

     Exactly THREE curves exist site-wide and nothing else may be used:
       --spring-snappy  entries and scroll reveals
       --spring-smooth  state changes (accordion, position shifts)
       --ease-snap      hover and press feedback
     The CSS keyword easings (ease / ease-in / ease-out / ease-in-out /
     linear) are off-limits, except `linear` on infinite ambient loops where
     constant speed is the correct behaviour. */

  --dur-press:.16s;
  --dur-fast:.18s;
  --dur-hover:.22s;
  --dur-mid:.32s;
  --dur-slow:.6s;
  --dur-entry:.42s;

  /* Cubic-bezier fallbacks first: a browser without linear() would otherwise
     treat the custom property as invalid and silently fall back to `ease`. */
  --spring-snappy:cubic-bezier(.16,1,.3,1);
  --spring-smooth:cubic-bezier(.65,0,.35,1);
  --ease-snap:cubic-bezier(.22,1,.36,1);
}

/* True spring physics where supported: these overshoot and settle, which
   cubic-bezier cannot do. Chrome 113+, Safari 17.2+, Firefox 112+. */
@supports (transition-timing-function:linear(0,1)){
  :root{
    /* mass 1, stiffness 400, damping 30 - ~2% overshoot, soft settle */
    --spring-snappy:linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%,
      0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26.0%,
      1.079 30.3%, 1.049 36.0%, 1.024 42.6%, 1.011 50.3%,
      1.004 59.2%, 1.001 69.3%, 1
    );
    /* mass 1, stiffness 200, damping 24 - gentler, ~4% overshoot */
    --spring-smooth:linear(
      0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%,
      0.25 9.9%, 0.601 16.5%, 0.815 21.0%, 0.929 25.2%,
      0.987 29.0%, 1.025 33.5%, 1.042 38.0%, 1.04 43.5%,
      1.027 50.0%, 1.013 57.5%, 1.005 67.0%, 1.001 79.0%, 1
    );
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--c-cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--c-mint);color:var(--c-ink);}
a{color:inherit;}

.page{
  font-family:var(--font-sans);
  color:var(--c-ink);
  background:var(--c-cream);
  line-height:var(--lh-body);
}

/* ==========================================================================
   3. Layout shells
   ========================================================================== */

.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--gutter);
}
.container--narrow{max-width:var(--container-narrow);}

.section{padding:var(--space-96) 0;}
.section--cream{background:var(--c-cream);}
.section--warm{background:var(--c-warm-grey);}
.section--sage{background:var(--c-sage-pale);}
.section--ink{background:var(--c-sage-deep);}

/* padding overrides - must follow .section */
.section--brand{padding:var(--space-90) 0;}
.section--cta{padding:var(--space-100) 0;}

/* ==========================================================================
   4. Reveal-on-scroll primitive
   The inline script flips inline opacity/transform once an element enters the
   viewport, so these are start states only.
   ========================================================================== */

/* Every scroll reveal uses the same distance and the same curve. Mixed
   distances are what make a page feel like several people animated it.
   Tuned twice on 2026-09-05 from the owner's walkthroughs. Pass one shortened
   the transition (0.6 s -> 0.42 s, 24 px -> 16 px rise) and that was not the
   problem. Pass two fixed the actual cause, in the markup and the observer
   rather than here: the page had 26 separate reveal targets, so in a phone's
   single column one flick chained six or seven fades back to back and nothing
   was ever simply present. Reveal targets are now the CONTAINER of a group
   (the bento grid, the steps list, the footer) and never its children, which
   halves the count, and the observer fires 15% of a viewport BELOW the fold so
   a block has finished fading before it reaches the reading zone. Do not add a
   reveal to a child of an element that already has one. */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-entry) var(--spring-snappy),
             transform var(--dur-entry) var(--spring-snappy);
}

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */

/* The nav is the first thing to arrive, ahead of the hero stagger. */
@keyframes nav-drop{
  from{opacity:0;transform:translateY(-16px);}
  to{opacity:1;transform:translateY(0);}
}

.site-header{
  animation:nav-drop var(--dur-entry) var(--spring-snappy) both;
  position:sticky;
  top:0;
  z-index:50;
  background:var(--c-header-bg);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--c-border);
}

.nav{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--gutter);
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:var(--space-30);
}

.nav-links{
  display:flex;
  gap:var(--space-26);
  font-size:var(--text-base);
  font-weight:var(--weight-medium);
  color:var(--c-body);
}

.nav-link{
  position:relative;
  text-decoration:none;
  color:var(--c-body);
  transition:color var(--dur-hover) var(--ease-snap);
}
/* Underline wipes in from the left rather than fading, so the hover reads as
   a physical stroke. scaleX keeps it off the layout thread. */
.nav-link::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background:var(--c-sage);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-hover) var(--ease-snap);
}
.nav-link--accent{color:var(--c-sage);}

.brand-link{
  display:flex;
  align-items:center;
  gap:var(--space-10);
  text-decoration:none;
}
.brand-link--inline{display:inline-flex;}

.brand-mark{display:block;}
.brand-word{height:26px;width:auto;display:block;}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  font-size:var(--btn-size);
  font-weight:var(--weight-medium);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--radius-pill);
  text-decoration:none;
}

/* sizes */
.btn--nav{--btn-pad-y:11px;--btn-pad-x:20px;--btn-size:var(--text-base);}
/* The hero carries the page only primary CTA, so it outsizes the in-page
   buttons and clears the 44px touch target on its own. */
.btn--hero{--btn-pad-y:16px;--btn-pad-x:30px;--btn-size:var(--text-lg);}
.btn--mid{--btn-pad-y:14px;--btn-pad-x:26px;--btn-size:var(--text-md);}
.btn--cta{--btn-pad-y:15px;--btn-pad-x:30px;--btn-size:var(--text-md);}
.btn--cta-alt{--btn-pad-y:15px;--btn-pad-x:26px;--btn-size:var(--text-md);}

/* variants */
.btn-sage{
  background:var(--c-sage);
  color:var(--c-cream);
  transition:background var(--dur-hover) var(--ease-snap),
             transform var(--dur-press) var(--ease-snap),
             box-shadow var(--dur-hover) var(--ease-snap);
}
.btn-outline{
  background:transparent;
  color:var(--c-sage);
  border:1px solid var(--c-sage);
  transition:background var(--dur-hover) var(--ease-snap),
             transform var(--dur-press) var(--ease-snap);
}
.btn-ghost{
  background:transparent;
  color:var(--c-cream);
  border:1px solid var(--c-ghost-border);
  transition:background var(--dur-hover) var(--ease-snap),
             transform var(--dur-press) var(--ease-snap);
}

.btn--raised{box-shadow:var(--shadow-btn);}

/* ---- Interaction layer --------------------------------------------------
   One lift offset (-3px) and one press scale (0.97) across every interactive
   element. Mixed offsets are the tell of a page animated piecemeal.
   Hover is gated behind a real pointer so a tap on touch never latches it. */

@media (hover:hover) and (pointer:fine){
  .btn-sage:hover{
    background:var(--c-sage-dark);
    transform:translateY(-3px);
    box-shadow:var(--shadow-btn-hover);
  }
  .btn-outline:hover{background:var(--c-sage-pale);transform:translateY(-3px);}
  .btn-ghost:hover{background:var(--c-ghost-hover);transform:translateY(-3px);}
  .lnk:hover{color:var(--c-sage);}
  .nav-link:hover{color:var(--c-sage);}
  .nav-link:hover::after{transform:scaleX(1);}
  .brand-link:hover{transform:scale(1.03);}
  .foot-link:hover{color:var(--c-sage);}
  .foot-link:hover .foot-link-text::after{transform:scaleX(1);}
}

/* Press feedback fires on every input type, including touch. */
.btn:active{transform:scale(.97);}

.brand-link{transition:transform var(--dur-hover) var(--ease-snap);}
.brand-link:active{transform:scale(.97);}

/* Focus must stay visible - the hover transforms must never hide it. */
:focus-visible{
  outline:2px solid var(--c-sage);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* ==========================================================================
   7. Links
   ========================================================================== */

.lnk{transition:color var(--dur-hover) var(--ease-snap);}

/* Inline prose links get the same wiping underline as the nav, so hover
   feedback reads the same everywhere on the page. */
.link-accent{
  position:relative;
  color:var(--c-sage);
  text-decoration:none;
  font-weight:var(--weight-medium);
}

/* ==========================================================================
   8. Section headings
   ========================================================================== */

.section-head{max-width:var(--measure-head);}
/* Scale variants. Adjacent sections must not share a heading size. */
.section-h2--lg{font-size:var(--text-4xl);}
.section-h2--sm{font-size:var(--text-2-5xl);}

.eyebrow{
  font-size:var(--text-2xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--c-bronze);
}
.eyebrow--mint{color:var(--c-mint);}

.section-h2{
  margin:var(--space-14) 0 0;
  font-size:var(--text-3xl);
  line-height:var(--lh-tight);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-heading);
  color:var(--c-ink);
}

.section-lead{
  margin:var(--space-14) 0 0;
  font-size:var(--text-lg);
  color:var(--c-body);
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

/* Architecture B - Asymmetric Split.
   The heading owns ~62% of the container and is the single focal point; the
   device shot is a supporting counterweight, deliberately pushed off the
   heading's baseline so the two halves never align. */

.hero{
  padding:var(--space-72) 0 var(--space-84);
  overflow:hidden;
  position:relative;
  /* Warm ambient wash so the ground is atmospheric, not a flat fill. */
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(138,110,62,.07) 0%, transparent 62%),
    var(--c-cream);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.62fr 1fr;
  gap:var(--space-64);
  align-items:center;
}

/* Eyebrow, not a pill badge: one less element competing with the heading. */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  color:var(--c-muted);
  font-size:var(--text-2xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
}
.hero-badge-dot{
  width:var(--space-6);
  height:var(--space-6);
  border-radius:var(--radius-pill);
  background:var(--c-sage);
  display:inline-block;
}

.hero-h1{
  margin:var(--space-24) 0 0;
  font-size:var(--text-hero);
  line-height:var(--lh-display);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-display);
  color:var(--c-ink);
  max-width:var(--measure-hero);
  text-wrap:balance;
}
.hero-h1-accent{color:var(--c-sage);}

.hero-lead{
  margin:var(--space-28) 0 0;
  font-size:var(--text-lg);
  line-height:var(--lh-body);
  color:var(--c-body);
  max-width:var(--measure-lead);
}

.hero-actions{
  display:flex;
  gap:var(--space-14);
  margin-top:var(--space-36);
  flex-wrap:wrap;
}

.hero-note{
  margin:var(--space-24) 0 0;
  font-size:var(--text-sm);
  color:var(--c-muted);
}
/* Availability micro-copy, deliberately quieter than the primary CTA so the
   hero still reads as having exactly one call to action. */
.hero-note .link-accent{
  font-weight:var(--weight-regular);
  color:var(--c-body);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--c-border);
}
.link-accent::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-hover) var(--ease-snap);
}
@media (hover:hover) and (pointer:fine){
  .link-accent:hover::after{transform:scaleX(1);}
}

.hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:560px;
  /* Vertical tension: the device sits below the heading's optical centre. */
  transform:translateY(var(--space-40));
}
.hero-glow{
  position:absolute;
  inset:-30px;
  background:var(--glow-hero);
}

/* -- Hero entry -----------------------------------------------------------
   Staggered rise, composited properties only (transform + opacity). The last
   element settles at 750ms, inside the 800ms budget. A static mount reads as
   a broken page, so this runs on load rather than on scroll. */

@keyframes hero-rise{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes hero-rise-visual{
  from{opacity:0;transform:translateY(var(--space-64));}
  to{opacity:1;transform:translateY(var(--space-40));}
}

/* Timing sheet - the whole entry sequence closes at 770ms:
     nav        0ms  + 420ms
     eyebrow   60ms  + 420ms
     heading  140ms  + 420ms
     lead     220ms  + 420ms
     CTA      300ms  + 420ms
     note     350ms  + 420ms  -> 770ms
     device   200ms  + 520ms  (longer, it travels further) */
.hero-badge,
.hero-h1,
.hero-lead,
.hero-actions,
.hero-note{
  animation:hero-rise var(--dur-entry) var(--spring-snappy) both;
}
.hero-badge{animation-delay:.06s;}
.hero-h1{animation-delay:.14s;}
.hero-lead{animation-delay:.22s;}
.hero-actions{animation-delay:.30s;}
.hero-note{animation-delay:.35s;}

.hero-visual{animation:hero-rise-visual .52s var(--spring-snappy) .2s both;}

/* Reduced-motion handling for the hero lives in section 19 with the rest. */

/* ==========================================================================
   10. Phone frames
   ========================================================================== */

.phone{
  position:relative;
  z-index:1;
  /* Supporting element, not a second focal point - deliberately smaller than
     the 296px it occupied when the split was even. */
  width:268px;
  height:536px;
  border-radius:var(--radius-phone);
  background:var(--c-ink);
  padding:var(--space-10);
  box-shadow:var(--shadow-phone);
}
.phone-screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:var(--radius-screen);
  overflow:hidden;
  background:var(--c-cream);
}
.phone-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
}

/* ==========================================================================
   11. Features - bento grid (Feature Architecture A)
   One cell dominates; the rest vary in span, tone and content type so the
   section never reads as six identical cards.
   ========================================================================== */

.bento{
  margin-top:var(--space-44);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(172px,auto);
  gap:var(--space-18);
}

.bento-cell{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:var(--space-30);
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-hover) var(--ease-snap),
             box-shadow var(--dur-hover) var(--ease-snap),
             border-color var(--dur-hover) var(--ease-snap),
             opacity var(--dur-entry) var(--spring-snappy);
}
@media (hover:hover) and (pointer:fine){
  .bento-cell:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-card-hover);
    border-color:var(--c-sage-pale);
  }
  /* The icon reacts to the whole cell, not to itself - the card is the
     hover target, the icon is the acknowledgement. */
  .bento-cell:hover .card-icon{transform:scale(1.06);}
}

/* The flagship feature: twice the width, twice the height, and the only cell
   carrying a spoken-example pull quote. */
.bento-cell--primary{
  grid-column:span 2;
  grid-row:span 2;
  padding:var(--space-44);
  justify-content:flex-start;
}

/* One accent cell breaks the run of white surfaces. */
.bento-cell--accent{
  background:var(--c-sage-pale);
  border-color:transparent;
}

.card-icon{
  display:flex;
  width:var(--space-48);
  height:var(--space-48);
  border-radius:var(--radius-sm);
  background:var(--c-sage-pale);
  align-items:center;
  justify-content:center;
  color:var(--c-sage);
  flex:0 0 auto;
  transition:transform var(--dur-hover) var(--ease-snap);
}
.card-icon--onsage{background:var(--c-card);}

.bento-title{
  margin:var(--space-18) 0 0;
  font-size:var(--text-xl);
  font-weight:var(--weight-medium);
  color:var(--c-ink);
}
.bento-cell--primary .bento-title{font-size:var(--text-2xl);}

.bento-text{
  margin:var(--space-8) 0 0;
  font-size:var(--text-md);
  color:var(--c-body);
}
.bento-cell--primary .bento-text{max-width:44ch;}

/* The one piece of evidence in the section: what a user actually says. */
/* A hairline turns the trailing space into a deliberate quote footer rather
   than a void left by the 2x2 span. */
.bento-quote{
  margin:auto 0 0;
  padding-top:var(--space-28);
  border-top:1px solid var(--c-border);
  font-size:var(--text-2xl);
  font-weight:var(--weight-light);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-brand);
  color:var(--c-sage);
  max-width:20ch;
}

/* ---- Ambient layer ------------------------------------------------------
   Three slow loops, all decorative. `linear` is deliberate here: constant
   speed is correct for a continuous loop, and it is the one place the
   keyword ban does not apply. */

@keyframes dot-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.82);}
}
/* The dot means "live on Google Play", so its pulse carries meaning. */
.hero-badge-dot{animation:dot-pulse 2.8s linear infinite;}

@keyframes glow-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(0,-14px,0) scale(1.05);}
}
.hero-glow{animation:glow-drift 11s linear infinite;}

@keyframes mark-float{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-8px,0);}
}
.statement-mark{animation:mark-float 7s linear infinite;}

/* ==========================================================================
   12. Visual break - brand statement
   Sits where social proof would go. There is no honest proof asset yet, so
   this holds the slot without claiming anything.
   ========================================================================== */

.statement{padding:var(--space-100) 0;}
.statement-inner{
  max-width:var(--measure-brand);
  text-align:center;
}
.statement-mark{position:relative;display:inline-block;}
.brand-glow{
  position:absolute;
  inset:-28px;
  background:var(--glow-brand);
}
.brand-icon{position:relative;display:block;}

.statement-line{
  margin:var(--space-30) 0 0;
  font-size:var(--text-2xl);
  font-weight:var(--weight-medium);
  letter-spacing:var(--track-brand);
  color:var(--c-ink);
}
.statement-meta{
  margin:var(--space-10) 0 0;
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--c-bronze);
}

/* ==========================================================================
   13. Process - numbered steps (Process Architecture A)
   Asymmetric split: intro and mid-page CTA on the left, a vertical step list
   on the right joined by a hairline. Not a three-column grid.
   ========================================================================== */

.how-split{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:var(--space-72);
  align-items:start;
}

.how-cta{margin-top:var(--space-36);}

.steps{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
/* The connector runs behind the numerals, stopping at the last one.
   Signature moment 1: it draws itself downward as the section arrives, so
   the process reads as a sequence rather than three separate items. */
.steps::before{
  content:'';
  position:absolute;
  left:23px;
  top:var(--space-12);
  bottom:var(--space-64);
  width:1px;
  background:var(--c-sage);
  opacity:.28;
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform var(--dur-slow) var(--spring-snappy) .18s;
}
.steps.is-drawn::before{transform:scaleY(1);}

.step{
  position:relative;
  padding-left:var(--space-72);
  padding-bottom:var(--space-48);
}
.step:last-child{padding-bottom:0;}

.step-num{
  position:absolute;
  left:0;
  top:0;
  width:var(--space-48);
  height:var(--space-48);
  border-radius:var(--radius-pill);
  background:var(--c-cream);
  border:1px solid var(--c-sage);
  color:var(--c-sage);
  font-size:var(--text-base);
  font-weight:var(--weight-medium);
  line-height:var(--lh-none);
  display:flex;
  align-items:center;
  justify-content:center;
}

.step-title{
  margin:var(--space-10) 0 0;
  font-size:var(--text-2xl);
  font-weight:var(--weight-semibold);
  color:var(--c-ink);
}
.step-text{
  margin:var(--space-8) 0 0;
  font-size:var(--text-md);
  color:var(--c-body);
  max-width:46ch;
}

/* ==========================================================================
   14. Results - stacked showcase (Feature Architecture B)
   Full-width rows that alternate side. The DOM keeps text first for screen
   readers; `order` does the visual flip.
   ========================================================================== */

.showcase{
  margin-top:var(--space-64);
  display:flex;
  flex-direction:column;
  gap:var(--space-72);
}

.showcase-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-64);
  align-items:center;
}
.showcase-row--flip .showcase-text{order:2;}
.showcase-row--flip .showcase-visual{order:1;}

.showcase-index{
  display:block;
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-wide);
  color:var(--c-bronze);
}
.showcase-title{
  margin:var(--space-14) 0 0;
  font-size:var(--text-3xl);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-heading);
  line-height:var(--lh-tight);
  color:var(--c-ink);
}
.showcase-body{
  margin:var(--space-16) 0 0;
  font-size:var(--text-lg);
  line-height:var(--lh-body);
  color:var(--c-body);
  max-width:42ch;
}

.showcase-visual{display:flex;justify-content:center;}

.shot-frame{
  display:inline-block;
  width:240px;
  border-radius:var(--radius-frame);
  background:var(--c-ink);
  padding:var(--space-8);
  box-shadow:var(--shadow-frame);
}
.shot-img{
  width:100%;
  height:auto;
  border-radius:var(--radius-shot);
  display:block;
}
/* A clip-path wipe was tried here and removed. The frame is near-black ink,
   so clipping the image to zero left a solid black phone-shaped block that
   read as a broken image, not as motion - and it stacked a second animation
   on a row that already fades and rises. The row's own reveal is enough.

   The cream fill matters: these images are lazy-loaded, so if decode lags the
   reveal the box would otherwise show as black. Cream reads as a screen that
   has not drawn yet rather than as a hole. */
.shot-img{background:var(--c-cream);}

.shot-frame{transition:transform var(--dur-hover) var(--ease-snap);}
@media (hover:hover) and (pointer:fine){
  .showcase-visual:hover .shot-frame{transform:translateY(-3px);}
}

/* ==========================================================================
   15. FAQ
   ========================================================================== */

.faq-list{
  margin-top:var(--space-36);
  border-top:1px solid var(--c-border);
}
.faq-item{
  border-bottom:1px solid var(--c-border);
  transition:background-color var(--dur-hover) var(--ease-snap);
}
@media (hover:hover) and (pointer:fine){
  .faq-item:hover{background-color:rgba(78,114,96,.035);}
  .faq-item:hover .faq-q{color:var(--c-sage);}
}

/* Smooth expand where ::details-content is supported (Chrome 131+). Older
   browsers keep today's instant open, which is no worse than before. */
@supports selector(::details-content){
  .faq-item::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size var(--dur-mid) var(--spring-smooth),
               content-visibility var(--dur-mid) allow-discrete;
  }
  .faq-item[open]::details-content{block-size:auto;}
}
.faq-q{
  position:relative;
  display:block;
  padding:var(--space-24) var(--space-48) var(--space-24) 0;
  font-size:var(--text-lg);
  font-weight:var(--weight-medium);
  color:var(--c-ink);
  cursor:pointer;
  list-style:none;
  transition:color var(--dur-fast) var(--ease-snap);
}
.faq-q::-webkit-details-marker{display:none;}

/* Chevron drawn in CSS so no icon asset or JS is needed. */
.faq-q::after{
  content:'';
  position:absolute;
  right:var(--space-8);
  top:50%;
  width:9px;
  height:9px;
  border-right:1.75px solid var(--c-sage);
  border-bottom:1.75px solid var(--c-sage);
  transform:translateY(-70%) rotate(45deg);
  transform-origin:center;
  transition:transform var(--dur-mid) var(--spring-snappy);
}
.faq-item[open] .faq-q::after{transform:translateY(-20%) rotate(225deg);}

.faq-a{
  margin:0;
  padding:0 var(--space-48) var(--space-28) 0;
  font-size:var(--text-md);
  line-height:var(--lh-body);
  color:var(--c-body);
  max-width:68ch;
}
.faq-more{
  margin:var(--space-36) 0 0;
  font-size:var(--text-md);
  color:var(--c-body);
}

/* ==========================================================================
   16. Dark CTA band
   ========================================================================== */

.cta-inner{
  max-width:var(--measure-cta-block);
  margin:0 auto;
  padding:0 var(--gutter);
  text-align:center;
}
.cta-h2{
  margin:var(--space-16) 0 0;
  font-size:var(--text-4-5xl);
  line-height:var(--lh-cta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-hero);
  color:var(--c-cream);
}
.cta-lead{
  margin:var(--space-16) auto 0;
  font-size:var(--text-lg);
  color:var(--c-mint);
  max-width:var(--measure-cta);
}
.cta-actions{
  margin-top:var(--space-30);
  display:flex;
  gap:var(--space-14);
  justify-content:center;
  flex-wrap:wrap;
}
.cta-note{
  margin:var(--space-24) 0 0;
  font-size:var(--text-sm);
  color:var(--c-muted);
}
/* The web app stays reachable here as micro-copy, so the banner keeps
   exactly one button. */
.cta-note-link{
  color:var(--c-mint);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(208,230,219,.35);
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.site-footer{
  background:var(--c-warm-grey);
  padding:var(--space-64) 0 var(--space-36);
}

.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--space-32);
}

.foot-blurb{
  margin:var(--space-16) 0 0;
  font-size:var(--text-base);
  color:var(--c-body);
  max-width:var(--measure-foot);
}

.foot-col{
  display:flex;
  flex-direction:column;
}
.foot-head{
  font-size:var(--text-2xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--track-foot);
  text-transform:uppercase;
  color:var(--c-muted);
}
/* Height rather than gap, so each link is its own 44px touch target.
   align-self keeps the box hugging its label, so the hover underline is the
   width of the text and not the width of the column. */
.foot-link{
  font-size:var(--text-base);
  color:var(--c-body);
  text-decoration:none;
  display:flex;
  align-items:center;
  align-self:flex-start;
  min-height:44px;
  transition:color var(--dur-hover) var(--ease-snap);
}
.foot-link-text{position:relative;}
.foot-link-text::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:1px;
  background:var(--c-sage);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-hover) var(--ease-snap);
}
.foot-head{margin-bottom:var(--space-8);}

.foot-bottom{
  margin-top:var(--space-40);
  padding-top:var(--gutter);
  border-top:1px solid var(--c-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-12);
}
.foot-meta{
  font-size:var(--text-sm);
  color:var(--c-muted);
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

/* The hero owns one full viewport, less the sticky header, so the whole
   composition lands above the fold at 1440x900. Desktop only: on a phone a
   forced viewport height would strand the CTA below the fold. */
@media (min-width:861px){
  .hero{
    min-height:calc(100dvh - var(--header-h));
    display:flex;
    align-items:center;
  }
  .hero > .hero-grid{width:100%;}
}

@media (max-width:860px){
  .nav-links{display:none;}
  .hero-grid{grid-template-columns:1fr;gap:var(--space-40);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  /* No vertical offset once the split has collapsed to one column. */
  .hero-visual{transform:none;min-height:0;}
  /* Keeps the eyebrow on one line at 390px instead of orphaning a word. */
  .hero-badge{font-size:11px;letter-spacing:.08em;}
  @keyframes hero-rise-visual{
    from{opacity:0;transform:translateY(var(--space-24));}
    to{opacity:1;transform:translateY(0);}
  }

  /* Bento collapses to a single column; the primary cell keeps its emphasis
     through padding and the pull quote rather than through span. */
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;}
  .bento-cell--primary{grid-column:span 1;grid-row:span 1;}
  .bento-cell--primary{padding:var(--space-30);}

  /* Process: intro stacks above the steps. */
  .how-split{grid-template-columns:1fr;gap:var(--space-48);}

  /* Showcase rows stack, and the flip is dropped so every row reads
     text-then-image in the same order. */
  .showcase{gap:var(--space-64);}
  .showcase-row{grid-template-columns:1fr;gap:var(--space-36);}
  .showcase-row--flip .showcase-text,
  .showcase-row--flip .showcase-visual{order:0;}

  /* Section rhythm tightens proportionally on small screens. */
  .section{padding:var(--space-64) 0;}
  .section--brand,
  .section--cta,
  .statement{padding:var(--space-72) 0;}
}

@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr;}
  .showcase-body,
  .step-text{max-width:none;}
}

/* ==========================================================================
   19. Reduced motion
   Everything above degrades to opacity-only, at a shorter duration. No
   translation, no scale, no clip-path wipe, no spring overshoot, no ambient
   loops. Content must be fully visible and fully usable.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  /* Ambient loops stop entirely (WCAG 2.2.2). */
  .hero-badge-dot,
  .hero-glow,
  .statement-mark,
  .site-header{animation:none;}

  /* Entry stagger becomes a plain fade. */
  .hero-badge,
  .hero-h1,
  .hero-lead,
  .hero-actions,
  .hero-note,
  .hero-visual{animation:none;}
  .hero-visual{transform:none;}

  /* Scroll reveals fade only - the inline script also short-circuits here. */
  [data-reveal]{
    transform:none;
    transition:opacity var(--dur-mid) var(--spring-snappy);
  }

  /* Signature moments resolve instantly. */
  .steps::before{transform:scaleY(1);transition:none;}
  .showcase-row .shot-img{clip-path:none;transition:none;}

  /* Hover and press keep their colour feedback but lose all movement. */
  .btn-sage:hover,
  .btn-outline:hover,
  .btn-ghost:hover,
  .bento-cell:hover,
  .brand-link:hover,
  .showcase-visual:hover .shot-frame,
  .btn:active,
  .brand-link:active{transform:none;}

  .nav-link::after,
  .link-accent::after,
  .foot-link-text::after{transition:none;}

  @supports selector(::details-content){
    .faq-item::details-content{transition:none;}
  }
}