/* Garden — shared base styles for every page. */
/* Fonts are self-hosted (SIL OFL, licenses in assets/fonts/) rather than
   loaded from Google Fonts: no extra origins before first paint, and no
   visitor IPs sent to Google. Both are variable fonts, subset to latin and
   latin-ext; the browser fetches latin-ext only for characters that need it
   (some country names in the phone picker). Newsreader (display), Figtree (body). */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url(../assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url(../assets/fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/fonts/newsreader-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#141311;--ink-2:#333230;--ink-3:#45443f;--muted:#6a6964;--muted-2:#8e8d88;
  --rule:#e4e5e1;--field:#d4d5d0;--green:#1e2a24;--green-dark:#141d18;
  --band:var(--green);--band-text:#b9c2bc;--band-soft:#e3efe7;
  --serif:"Newsreader",Georgia,serif;--sans:"Figtree",system-ui,sans-serif;
  --max:1200px;--gutter:28px;--section-pad:176px;
  /* Inset for desktop copy within the hero photo. */
  --edge:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
a{color:var(--ink)}a:hover{color:var(--green)}
input::placeholder{color:var(--muted-2)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.serif{font-family:var(--serif)}

/* type scale */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(48px,6vw,84px);line-height:.98;letter-spacing:-.025em;text-wrap:pretty}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4vw,56px);line-height:1.05;letter-spacing:-.02em;text-wrap:pretty}
.h2-sm{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.02em;text-wrap:pretty}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;text-wrap:pretty}
.h4{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:-.01em}
.lede{font-size:20px;line-height:1.5;color:var(--ink-3);max-width:480px;text-wrap:pretty}
.body-lg{font-size:18px;line-height:1.6;color:var(--ink-3);text-wrap:pretty}
.body{font-size:16px;line-height:1.6;color:var(--ink-3);text-wrap:pretty}
/* Eyebrows stay on --green. Both darker tokens were tried here and neither
   reads as green at 13px uppercase: --band goes near-black, --green-dark is
   close behind. The label needs to carry color more than it needs to match the
   dark bands elsewhere on the page. */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.accent{font-style:italic;color:var(--green)}

/* buttons */
.btn{display:inline-block;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:16px;border-radius:999px;padding:16px 26px;color:#fff;background:var(--green);transition:background .15s}
.btn:hover{background:var(--green-dark);color:#fff}
.btn-sm{padding:9px 16px;font-size:14px;font-weight:500;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-sm:hover{background:var(--ink);color:#fff}
.link-ul{text-decoration:none;color:var(--ink);padding:16px 8px;font-weight:500;font-size:16px;border-bottom:1px solid var(--ink)}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.is-scrolled{border-bottom-color:var(--rule)}
.site-header.is-stuck{box-shadow:0 1px 2px rgba(20,29,24,.12)}
/* Animate only menu content; the translucent header surface stays stationary. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .homepage .site-header>nav{animation:menu-dissolve 1.6s cubic-bezier(.22,1,.36,1) 2s backwards}
 .homepage .site-header:focus-within>nav,
 .homepage .site-header.menu-revealed>nav{animation:none}
}
@keyframes menu-dissolve{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.site-header nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.brand{text-decoration:none;font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px;color:var(--ink)}
.nav-links{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:500;flex-wrap:wrap;justify-content:flex-end}
.nav-links a:not(.btn){text-decoration:none;color:var(--ink-2)}

/* sections */
/* Section head stacks its intro under the heading and lets it run the full
   section width, so it wraps on the section's edges rather than stopping short
   of them. */
.section-head .body-lg{max-width:none}
.section .wrap{padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:64px;align-items:center}
.grid-2.tight{gap:48px;align-items:end}
/* Both users of this put a split list or a card grid in the right column, so
   the column is subdivided again. A 380px minimum let that second split fall
   to ~175px around 900-1100px; hold out for 500px before going two-up. */
.grid-2.wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr))}
.stack{display:flex;flex-direction:column}
.stack-12{gap:12px}.stack-16{gap:16px}.stack-18{gap:18px}.stack-20{gap:20px}.stack-22{gap:22px}.stack-28{gap:28px}.stack-56{gap:56px}
.photo{width:100%;object-fit:cover;border-radius:6px}
.photo-4x5{aspect-ratio:4/5}

/* The scroll cue occupies the existing space beneath the hero. */
.hero{position:relative}
.scroll-hint{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:2px 12px;color:var(--muted);font-size:12px;letter-spacing:.03em;text-decoration:none;white-space:nowrap;transition:opacity .4s ease,visibility 0s}
.scroll-hint.has-scrolled{animation:none}
.scroll-hint.is-dismissed{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
.scroll-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.scroll-hint{display:none}}
@media(min-width:1101px){.scroll-hint{bottom:16px}}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .scroll-hint{animation:scroll-hint-appear 1.6s cubic-bezier(.22,1,.36,1) 2s backwards}
 .scroll-hint svg{animation:scroll-hint-nudge 1.6s ease-in-out 3.6s 3}
}
@keyframes scroll-hint-appear{from{opacity:0}to{opacity:1}}
@keyframes scroll-hint-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* hero — headline sits in the photo's negative space, at her eye line */
/* Explicit height keeps the image at the full content width while leaving
   enough vertical space for the overlaid copy. */
.hero-media{position:relative;overflow:hidden;width:100%;height:min(56.25vw,720px,84vh);background:#8d8d8a}
@media(min-width:701px){.hero-media{height:min(calc(100vh - 72px - 48px),780px);min-height:540px}}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 28%}
/* Scrim carries the white copy. Stops are set so the dark coverage still holds
   at the right edge of the text block (~50% of the media), where her hair and
   the window blow out; the original 38%/66% stops dropped the lede's last
   lines under 4:1. */
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,19,17,.72) 0%,rgba(20,19,17,.56) 40%,rgba(20,19,17,0) 74%)}
.hero-copy{position:absolute;z-index:1;left:var(--edge);top:50%;transform:translateY(-50%);width:min(560px,44%);color:#fff;gap:28px}
.hero-copy .display{color:#fff}
.hero-copy .accent{color:#fff}
.hero-copy .lede{color:rgba(255,255,255,.9);max-width:480px;font-size:22px;line-height:1.5}
.hero-copy .link-ul{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.hero-copy .btn{background:#fff;color:var(--ink)}
.hero-copy .btn:hover{background:#e8e8e5;color:var(--ink)}
.hero-actions{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
/* Build the message in three beats before the navigation finishes arriving. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .hero-copy>h1{animation:hero-copy-arrive 1.2s cubic-bezier(.22,1,.36,1) .15s backwards}
 .hero-copy>.lede{animation:hero-copy-arrive 1.2s cubic-bezier(.22,1,.36,1) .55s backwards}
 .hero-copy>.hero-actions{animation:hero-copy-arrive 1.2s cubic-bezier(.22,1,.36,1) .95s backwards}
 .hero-copy:focus-within>*,.hero.hero-revealed .hero-copy>*{animation:none}
}
@keyframes hero-copy-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* The overlay holds as the window narrows rather than bailing to a stacked
   layout: the copy column takes a slightly larger share, moves closer to the
   edge, and the headline scales down, so it stays clear of her face. It only
   unwinds at 700px, where the photo genuinely can't host the copy. */
@media(max-width:1000px){
 /* copy runs to ~58% here rather than 50%, so the scrim has to reach further */
 .hero-media::after{background:linear-gradient(90deg,rgba(20,19,17,.78) 0%,rgba(20,19,17,.66) 46%,rgba(20,19,17,0) 88%)}
 .hero-copy{width:min(560px,50%);gap:20px}
 .hero-copy .display{font-size:clamp(32px,4.8vw,60px)}
 .hero-copy .lede{font-size:17px;max-width:none}
 .hero-actions{gap:14px}
}
@media(max-width:820px){
 /* narrowest overlay band: copy reaches ~58% and her hair is brightest here */
 .hero-media{height:min(66.67vw,720px,84vh)}
 .hero-media::after{background:linear-gradient(90deg,rgba(20,19,17,.84) 0%,rgba(20,19,17,.74) 54%,rgba(20,19,17,0) 96%)}
 .hero-copy{width:min(560px,54%)}
 .hero-copy .lede{font-size:16px}
}

/* Blend the cropped photo inside the rounded hero frame. */
@media(min-width:701px){
 :root{--hero-inset:56px;--col-left:calc(max((100vw - var(--max)) / 2, 0px) + var(--gutter));--frame-left:max(12px,calc(var(--col-left) - var(--hero-inset)))}
 .hero{padding-top:0}
 .hero .wrap{padding-bottom:48px;max-width:none;padding-left:var(--frame-left);padding-right:var(--frame-left)}
 .hero-copy{left:calc(var(--col-left) - var(--frame-left))}
 .hero-media{background:#243029;border-radius:24px}
 .hero-photo{object-position:88% 30%;left:5%;width:95%;mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.7) 52%,#000 66%,#000 92%,rgba(0,0,0,.6) 100%);-webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.7) 52%,#000 66%,#000 92%,rgba(0,0,0,.6) 100%)}
 .hero-media::after{display:none}
}

/* Center the hero itself; reserve room above it for the sticky menu. */
@media(min-width:1101px){
 .homepage{--desktop-hero-height:clamp(540px,calc(100svh - 158px),780px);padding-top:max(0px,calc((100svh - var(--desktop-hero-height))/2 - 79px))}
 .homepage .site-header{position:sticky;top:0;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:transparent}
 .hero{padding:0 0 max(79px,calc((100svh - var(--desktop-hero-height))/2))}
 .hero .wrap{width:100%;padding-bottom:0}
 .hero-media{height:var(--desktop-hero-height)}
}

/* Keep overlaid copy legible as the photo and text converge on tablets. */
@media(min-width:701px) and (max-width:1000px){
 .hero-media::after{display:block;background:linear-gradient(90deg,rgba(20,19,17,.6) 0%,rgba(20,19,17,.5) 58%,transparent 90%)}
}

/* worry — copy left, a bare iMessage thread floating right. */
.worry .wrap{padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
.worry .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:80px}
.worry .stack{max-width:560px}
.thread-col{display:flex;justify-content:center}
.thread{display:flex;flex-direction:column;width:min(100%,400px);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",var(--sans);}
.thread-day{margin:0;text-align:center;font-size:12px;font-weight:600;color:#8a8a8e;padding:22px 0 8px}
.thread-day:first-child{padding-top:0}
.thread-day span{font-weight:400}
.bubble{position:relative;max-width:82%;padding:10px 14px;border-radius:20px;font-size:17px;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.bubble+.bubble{margin-top:6px}
.bubble.me{align-self:flex-end;background:#0a84ff;color:#fff;border-bottom-right-radius:6px}
.bubble.them{align-self:flex-start;background:#e9e9eb;color:#141311;border-bottom-left-radius:6px;margin-top:32px}
.tapback{position:absolute;top:-24px;right:-22px;width:42px;height:44.4px;pointer-events:none}
.tapback svg{display:block;width:100%;height:100%}
.thread-status{margin:5px 6px 0 0;align-self:flex-end;font-size:12px;color:#8a8a8e}
/* Reserve the conversation's height while Tuesday's messages arrive once. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .thread-animated [data-thread-reveal]{opacity:0;transform:translateY(8px)}
 .thread-animated.is-playing [data-thread-reveal]{animation:thread-arrive .36s ease-out var(--message-delay,0ms) both}
}
@keyframes thread-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.worry .grid-2{gap:48px}}

/* Alternatives: open layout with content on the shared column. */
#alternatives .wrap{padding-top:72px;padding-bottom:72px}
#alternatives .grid-2{align-items:start}
@media(min-width:801px){#alternatives .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
#alternatives .rows{margin-top:8px}
#alternatives .row:last-child{border-bottom:1px solid var(--rule)}
#system .system-head-wrap{padding-top:var(--section-pad);padding-bottom:0}
#system .section-head{max-width:none}
#system .system-scene-wrap{padding-top:48px;padding-bottom:0}
#system .system-routine-wrap{padding-top:88px;padding-bottom:var(--section-pad)}
#system .routine-layout>.stack .h3{font-size:clamp(26px,2.4vw,32px)}
#system .routine-layout>.stack .body{max-width:440px;color:var(--ink-3)}
/* system — one wide scene, same frame bleed as the hero. Captions float freely
   over the photo as cards; hairline leaders (SVG, % coords) run from each card
   to a dot on its device. Move a card with left/top below and update the
   matching polyline's points and .note-dot left/top in the markup. */
.scene{position:relative;margin:0;width:100%;aspect-ratio:3/2;border-radius:24px;overflow:hidden;background:#e9ece7}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scene-leaders polyline{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
.scene-tablet-leaders{display:none;pointer-events:none}
.scene-tablet-leaders ellipse{fill:#fff}
.note-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.3)}
.scene-note{position:absolute;padding:20px 22px;border-radius:14px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 8px 30px rgba(20,26,22,.18);backdrop-filter:blur(6px)}
.note-hub{left:6%;top:64%;width:26%}
.note-sensor{left:56%;top:66%;width:28%}
.device-porthole{display:none}
.scene-note .h4{font-size:22px}
.scene-note .body{font-size:15px;line-height:1.5}
@media(min-width:701px){#system .system-scene-wrap{max-width:none;padding-left:var(--frame-left);padding-right:var(--frame-left)}}
/* Below 1000px the photo is too short to host the captions — they drop below
   the image onto the dark band. */
@media(max-width:1000px){
 .scene{aspect-ratio:auto;background:var(--band)}
 .scene>img{position:relative;aspect-ratio:3/2;display:block}
 .scene-leaders,.note-dot{display:none}
 .scene-notes{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;padding:40px 40px 48px;background:var(--band)}
 .scene-note{position:static;width:auto;padding:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:#fff}
 .scene-note .h4{color:#fff}
 .scene-note .body{color:rgba(255,255,255,.9)}
}
@media(min-width:701px) and (max-width:1000px){
 .scene-tablet-leaders{display:block;height:auto;aspect-ratio:3/2}
 .scene-notes{position:relative}
 .scene-notes::before,.scene-notes::after{content:"";position:absolute;top:0;height:24px;width:1.5px;background:#fff;transform:translateX(-50%)}
 .scene-notes::before{left:25%}
 .scene-notes::after{left:75%}
}
@media(min-width:701px) and (max-width:1100px){
 #system .routine-layout{grid-template-columns:1fr;gap:32px}
 #system .routine-layout>.stack .body{max-width:none}
}
@media(max-width:700px){
 #system .system-routine-wrap{padding-top:56px}
 .scene{border-radius:0;background:none;overflow:visible}
 .scene>img{display:none}
 .scene-notes{grid-template-columns:1fr;padding:0;gap:32px;background:none}
 .scene-note{gap:0;background:var(--band);border-radius:20px;overflow:hidden}
 .scene-note .h4{color:#fff;margin:28px 20px 12px}
 .scene-note .body{color:rgba(255,255,255,.9);margin:0 20px 32px}
 .device-porthole{display:block;position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;margin:0;background:#e9ece7}
 .device-porthole img{width:100%;height:100%;object-fit:cover}
 .porthole-hub img{object-position:50% 45%}
 .porthole-sensor img{object-position:50% 45%;transform:scale(1.4)}
}
@media(max-width:700px){#alternatives .wrap{padding-top:48px;padding-bottom:48px}}

/* phone bezel. Fixed padding: a percentage would resolve against the parent,
   so the bezel would thicken with the column. */
.phone{width:100%;max-width:260px;aspect-ratio:9/19.5;background:#2b2b2e;border-radius:15.5%/7.2%;padding:7px;position:relative;
  box-shadow:inset 0 0 0 1.5px #55565a,inset 0 0 0 3px #17171a,0 30px 60px -28px rgba(20,19,17,.45)}
.phone-screen{width:100%;height:100%;border-radius:13.5%/6.3%;overflow:hidden;background:#000;position:relative}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top}

/* lists with hairlines */
.rows{display:grid}
.row{display:grid;gap:24px;padding:22px 0;border-top:1px solid var(--rule)}
.row-alt{grid-template-columns:minmax(140px,200px) minmax(0,1fr)}
/* Lists that span the full content width cap their prose at a readable measure
   instead of letting it stretch to ~120 characters; the hairlines still run
   the full width. Capping the text rather than the grid track on purpose: a
   grid-template-columns override here would outrank the single-column mobile
   rule below and keep the row two-up on phones. */
.rows-wide .body{max-width:620px}
.row-alt .name{font-family:var(--serif);font-size:22px;text-decoration:line-through;text-decoration-color:rgba(30,42,36,.42);text-decoration-thickness:1px;color:var(--ink)}
#alternatives .row-alt .body{color:var(--ink-2)}
/* Numbered routine rows: editorial type and fine dividers. */
.routine-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:72px;align-items:start}
.routine-list{list-style:none;margin:0;padding:0;counter-reset:routine}
.routine-item{counter-increment:routine;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:24px 0;border-top:1px solid var(--rule)}
.routine-list>.routine-item:last-child{border-bottom:1px solid var(--rule)}
.routine-item::before{content:counter(routine,decimal-leading-zero);font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--green)}
.routine-copy{display:flex;flex-direction:column;gap:8px}
.routine-copy h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.routine-copy .body{font-size:16px;line-height:1.6;max-width:560px}
@media(max-width:1000px){.routine-layout{grid-template-columns:1fr;gap:32px}}

/* app */
/* Keep all three app screens together on tablet and desktop. */
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media(min-width:701px) and (max-width:1000px){.screens{gap:20px}}
@media(max-width:700px){.screens{grid-template-columns:1fr;gap:44px}}
/* Caption is capped to the phone's width and centred with it, so its left edge
   lines up with the screenshot instead of hanging off to the left. Both read
   one variable: the global mobile rule shrinks .phone to 220px, which would
   otherwise leave the caption wider than the screenshot it belongs to. */
.screens{--phone-w:260px}
.screens figure{margin:0;display:flex;flex-direction:column;gap:20px;align-items:center}
.screens .phone{max-width:var(--phone-w)}
.screens figcaption{display:flex;flex-direction:column;gap:6px;width:100%;max-width:var(--phone-w)}
.screens figcaption b{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em}
.screens figcaption span{font-size:15px;line-height:1.5;color:var(--ink-3)}

/* Tablet response: full-width introduction, then steps beside the photo. */
@media(min-width:701px) and (max-width:1000px){
 #response .grid-2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 32px;align-items:start}
 #response .grid-2>.stack{display:contents}
 #response .grid-2>.stack>.eyebrow,
 #response .grid-2>.stack>h2,
 #response .grid-2>.stack>.body-lg{grid-column:1/-1}
 #response .routine-list{grid-column:1;grid-row:4}
 #response .grid-2>img{grid-column:2;grid-row:4;align-self:start}
}

/* waitlist + footer */
.waitlist{background:var(--band);color:#fff}
.waitlist .grid-2{align-items:start}
.waitlist .h3{font-size:clamp(40px,4.5vw,64px);line-height:1.02}
.waitlist .body-lg{color:var(--band-soft)}
.waitlist-signup{display:grid;gap:32px;min-width:0}
/* The default green eyebrow sits at roughly 1.5:1 on the dark band — illegible
   and a WCAG failure. Lift it onto the band's light token. */
.waitlist .eyebrow{color:var(--band-soft)}
.card{background:#fff;color:var(--ink);border-radius:8px;padding:36px;display:flex;flex-direction:column;gap:18px}
.card label{font-size:14px;font-weight:600;color:var(--ink-2)}
.field{display:flex;gap:10px}
.card input{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--field);border-radius:6px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink);outline:none}
.card input:focus{border-color:var(--green)}
/* Country picker. The shell carries the border and the focus ring; the real
   <select> sits transparently on top of it at full size, so the visitor gets
   the native picker (and its mobile wheel) while the closed state shows a flag
   and dial code instead of the select's own full option label. Width is pinned
   because `.field` is a flex row and the number input should take the rest. */
.prefix-country{position:relative;flex:0 0 104px;display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 8px;border:1px solid var(--field);border-radius:6px;background:#fff;font-size:16px;color:var(--ink);cursor:pointer}
/* The caret is the only thing telling you this opens — the <select> that would
   normally draw one is transparent. Borders rather than a glyph so it inherits
   nothing from the emoji font next to it. */
.prefix-country::after{content:"";flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted)}
.prefix-country:focus-within{border-color:var(--green)}
.prefix-flag{font-size:18px;line-height:1}
.prefix-dial{font-variant-numeric:tabular-nums}
/* Full-bleed and invisible: the shell above is what you see, this is what you
   click and what a screen reader reads. `opacity:0` rather than a visibility
   or clip trick so the native dropdown still anchors to the right spot. */
.prefix-country select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit}
/* The open dropdown list inherits the page font but is drawn by the OS, so it
   needs a readable colour of its own on the dark-on-white card. */
.prefix-country option{color:var(--ink);background:#fff}
.card .btn{border-radius:6px;padding:16px;background:var(--band)}
.card .btn:hover{background:var(--green-dark)}
.fine{font-size:13px;color:var(--muted);line-height:1.5}
.site-footer{background:var(--band);color:var(--band-text)}
.site-footer .wrap{padding:48px var(--gutter) 32px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:40px;font-size:14px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px 56px}
.footer-intro{display:grid;gap:8px;max-width:320px}
.footer-contact-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.footer-intro a{color:#fff;font-weight:600;width:fit-content}
.footer-intro a:hover{text-decoration:underline}
.footer-links{display:flex;flex-direction:column;gap:12px;text-align:right}
.footer-links a{font-size:15px;font-weight:500;transition:color .2s ease}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.site-footer .logo{font-family:var(--serif);font-size:24px;color:#fff}
.footer-copyright{font-size:13px;color:var(--muted-2)}
.site-footer a{text-decoration:none;color:var(--band-text)}.site-footer a:hover{color:#fff}

/* Production integration: experiment, form feedback, keyboard and mobile layouts. */
html:not([data-waitlist-variant="email"]) [data-waitlist-field="email"],
html[data-waitlist-variant="email"] [data-waitlist-field="phone"]{display:none}
.nav-links a.btn{color:var(--ink)}.nav-links a.btn:hover{color:#fff}
.brand{flex-shrink:0}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card[data-submitting="true"] .btn:disabled{cursor:wait}
.form-status{font-size:14px;line-height:1.5}
.form-status:empty{display:none}
.form-status[data-status="error"]{color:#a12d25}
.form-status[data-status="success"]{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b68b35;outline-offset:4px}
.skip-link{position:fixed;top:8px;left:8px;z-index:20;padding:12px;background:#fff;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
@media(max-width:900px){
 .nav-links>a:not(.btn){display:none}
 .nav-links{gap:0;flex-wrap:nowrap}
}
/* ---- Mobile (≤700px) — from "Garden A - Mobile" design, Sept 2026 ---- */
@media(max-width:700px){
 /* Header, hero and sections share the mobile gutter. */
 :root{--gutter:20px;--section-pad:88px;--edge:20px}
 .section .wrap{padding-bottom:72px}
 .display{font-size:44px;line-height:1}
 .h2{font-size:34px}.h2-sm{font-size:30px}.h3{font-size:28px}.h4{font-size:24px}
 .lede{font-size:17px;max-width:none}.body-lg{font-size:16px}.body{font-size:15px;line-height:1.55}
 .grid-2,.grid-2.tight,.grid-2.wide{gap:28px;align-items:start}
 /* header: static (not sticky), brand + CTA only */
 .site-header{position:static;background:#fff;backdrop-filter:none}
 .site-header nav{gap:14px;padding-top:12px;padding-bottom:12px}
 .brand{font-size:26px}
 /* hero: too narrow to host the copy over the photo — unwind the overlay to
    photo first (4:3), copy below on white, full-width CTA */
 .hero{padding-top:16px}
 .hero .wrap{padding-bottom:48px}
 .hero-copy{padding:0}
 .hero-media{height:auto;overflow:visible;background:none;display:flex;flex-direction:column;gap:24px}
 .hero-media::after{display:none}
 .hero-photo{position:static;height:auto;aspect-ratio:4/3;border-radius:20px;object-position:80% 25%}
 .hero-copy{position:static;transform:none;left:auto;top:auto;width:auto;max-width:none;gap:24px}
 .hero-copy .display{color:var(--ink);font-size:44px}
 /* Accent and primary CTA take the header CTA's darker green (--band) rather
    than --green: on the stacked mobile hero they sit directly under the
    "Become a tester" pill, and the two greens read as a mismatch side by side. */
 .hero-copy .accent{color:var(--band)}
 .hero-copy .lede{color:var(--ink-3);font-size:17px;max-width:none}
 .hero-copy .link-ul{color:var(--ink);border-bottom-color:var(--ink)}
 .hero-copy .btn{background:var(--band);color:#fff}.hero-copy .btn:hover{background:var(--ink-2)}
 .hero-actions{flex-direction:column;align-items:center;gap:14px}
 .hero-actions .btn{width:100%;text-align:center}
 .hero-actions .link-ul{padding:4px 0;font-size:15px}
 /* worry: copy above the phone */
 .worry .wrap{padding-top:64px}
 .worry .grid-2{gap:32px;grid-template-columns:1fr}
 .worry .stack{max-width:none}
 .thread-col{order:2}
 .bubble{font-size:16px}
 .phone{max-width:220px}
 /* lists */
 .row-alt{grid-template-columns:1fr;gap:6px;padding:18px 0}
 .row-alt .name{font-size:20px}
 .routine-item{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:22px 0}
 .routine-item::before{font-size:18px}
 .routine-copy{gap:10px}
 .routine-copy h3{font-size:21px}
 .routine-copy .body{font-size:15px;line-height:1.55}
 /* emergency: eyebrow → heading → intro → photo → steps.
    The stack is dissolved with display:contents, so its children become grid
    items and need explicit order. Without the eyebrow rule it would default to
    0 and render below its own heading. */
 #response .grid-2>img{order:0;aspect-ratio:4/3}
 #response .grid-2>.stack{display:contents}
 #response .grid-2>.stack>.eyebrow{order:-2}
 #response .grid-2>.stack>h2{order:-1}
 #response .grid-2>.stack>.routine-list{order:1}
 /* waitlist + footer */
 .waitlist .h3{font-size:38px}
 .card{padding:24px;gap:16px}
 .prefix-country{flex:0 0 96px;gap:5px;padding:14px 6px}
 .site-footer .wrap{gap:32px;padding:40px var(--gutter) 32px}
 .footer-top{flex-direction:column;gap:28px}
 .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.scroll-hint{transition:none}}

/* Family testimonial continues the waitlist's dark band. */
#testimonial{background:var(--band);color:#fff}
#testimonial .wrap{padding-top:0}
.testimonial{margin:0;padding-top:calc(var(--section-pad) / 2);border-top:1px solid rgba(255,255,255,.14);align-items:center}
.testimonial-photo{object-position:50% 30%;height:auto}
.testimonial-quote{margin:0;text-indent:-.4em;color:#fff}
#testimonial .eyebrow{color:var(--band-soft)}
#testimonial .testimonial-name{font-weight:600;color:#fff}
@media(min-width:801px){.testimonial{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.testimonial-photo{max-width:400px}}
@media(min-width:701px) and (max-width:1100px){.testimonial{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:start}}
@media(max-width:700px){.testimonial-photo{width:200px;max-width:100%;aspect-ratio:4/3}}