*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ══ IDENTITY KEPT FROM site/www/index.html ══════════════════════════════════
   Palette, both faces, the italic-teal emphasis move and the fixed grain overlay
   are carried across unchanged. Only the COMPOSITION is new. */
:root{
  --ink:#14263A;--ink-mid:#22384a;--ink-deep:#101f2d;
  --ground:#f2f5f7;--sunk:#e7edf1;--white:#ffffff;
  --petrol:#135A5F;--petrol-lt:#56A3A9;--petrol-pale:#E5F0F1;
  --amber:#c7880a;--amber-lt:#e0a93b;--amber-pale:#fbf1dd;
  --mid:#35485C;--quiet:#45566A;
  /* Hairlines were borrowed from a system built for 25-year-olds. Raised for an
     audience of 45-70 reading about their 80-plus parents: .10 computed 1.21:1
     and .17 computed 1.39:1, which is under the perceptual floor even for a
     decorative separator. .18 and .30 are still hairlines, just visible ones. */
  --hairline:#D6DEE5;--hairline-md:#DDE4EA;
  --rule-dk:rgba(244,239,230,.26);

  /* Two tints that exist ONLY because this variation puts type on a dark ground.
     --petrol-hero is the brand teal re-lit so the italic still reads teal at 4.01:1
     over the hero scrim; --ground-soft is the secondary voice on navy at 9.69:1. */
  --petrol-hero:#B4DEE1;
  --ground-soft:#c8d2cd;
  --foot-txt:#c9d2d9;

  --sh-sm:0 1px 3px rgba(22,40,58,.06),0 3px 14px rgba(22,40,58,.05);
  --sh-md:0 6px 26px rgba(22,40,58,.10),0 2px 6px rgba(22,40,58,.06);
  --sh-lg:0 30px 70px rgba(22,40,58,.16),0 8px 24px rgba(22,40,58,.09);
  --sh-btn:0 1px 2px rgba(22,40,58,.12),0 8px 20px rgba(22,40,58,.10);
  --ease-out:cubic-bezier(0.22,1,0.30,1);
}

/* 124px, not 104px. 104 was tuned to the ~82px desktop header; below the bar's
   collapse width the bar wraps to two rows and an in-page jump landed under it. */
html{scroll-behavior:smooth;scroll-padding-top:124px;}
body{
  font-family:'DM Sans',sans-serif;
  font-size:1.125rem;           /* 17px floor for a 45-70 audience */
  line-height:1.62;
  background:var(--ground);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:where(h1,h2,h3,.dsp){font-optical-sizing:auto;}
img{max-width:100%;display:block;}

/* Fixed grain overlay, lifted from the live site. Multiply at .035 does not move
   any measured contrast ratio in this file by more than ~0.02. */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ══ FOCUS + SKIP ═══════════════════════════════════════════════════════════
   The cream override belongs to the BAR, whose own rgba(16,31,45,.80) pill is
   always dark. It must NOT reach the wordmark: the wordmark is fixed over the
   page itself, so once the cream sections scroll under it a cream ring computed
   1.00:1 on --ground and 1.13:1 on --white. The wordmark gets a two-tone ring
   instead, which survives both grounds: teal 3.22:1 on the navy hero, 4.07:1 on
   cream, 4.59:1 on white, with a near-white halo inside it. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--petrol);outline-offset:3px;border-radius:8px;
}
.on-dark a:focus-visible,.on-dark button:focus-visible,
.bar a:focus-visible,.bar button:focus-visible{outline-color:var(--ground);}
.mark:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:10px;
  box-shadow:0 0 0 6px rgba(255,253,249,.92);}
.skip{position:absolute;left:-999px;top:0;z-index:9999;background:var(--ink);color:#fff;
  padding:.85rem 1.25rem;border-radius:0 0 10px 0;text-decoration:none;font-weight:600;}
.skip:focus{left:0;}

/* Visually hidden but reachable: the promises section's heading, and the
   new-tab cue on the six links that open a second tab. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ══ FLOATING NAV, TOP RIGHT ONLY ═══════════════════════════════════════════
   Modelled on the competitor: a small rounded bar in the top right, three plain
   links plus one filled action. The wordmark sits outside it, top left.
   Bar ground rgba(16,31,45,.80) composited over the brightest possible photo
   pixel (pure white) = #3f4b57, luminance .0691. Cream link text on that
   = 7.70:1, so the bar never depends on the photo being dark. */
.head{position:fixed;top:0;left:0;right:0;z-index:400;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:clamp(16px,2.2vw,26px) clamp(18px,4vw,40px);pointer-events:none;}
.head > *{pointer-events:auto;}

/* The wordmark is the one element that sits on the PAGE rather than on a pill,
   so its colour has to track whatever section is behind it. A one-way "past the
   hero, go navy" latch was wrong: the page then scrolls two navy sections and a
   navy-deep footer under a navy wordmark (1.00:1, 2.00:1 and 1.11:1 computed).
   The script below probes what is actually behind the mark and adds .on-light,
   so the flip is bidirectional and the mark never disappears.
   nowrap keeps "Guardian Sarah" on one line at 375, where the header has no
   slack; the .5rem/.35rem padding takes the target from 40px to ~48px and the
   matching negative margin keeps the optical left edge where it was. */
/* The mark was pure text on the page with nothing behind it, and .head is
   position:fixed — so every paragraph that scrolled under it collided with it.
   On a phone that happens at EVERY section boundary: "Guardian Sarah" was
   painting directly over "Local Support / Hand-delivered and supported..." and
   over "hear a full check-in". The light/dark latch below kept the mark legible
   the whole time, which is exactly why no contrast check ever caught it —
   both layers were readable, just stacked. It needs a ground, not a colour.
   Same translucent treatment .bar already uses, so the two header elements now
   read as a pair instead of one pill and one floating word. */
.mark{font-family:'Fraunces',serif;font-size:1.32rem;font-weight:600;letter-spacing:-.012em;
  text-decoration:none;color:var(--white);line-height:1.5;
  padding:.5rem .6rem;margin:-.25rem -.5rem;white-space:nowrap;
  background:rgba(16,31,45,.96);border-radius:12px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .25s ease,background-color .25s ease;}
.mark span{color:var(--petrol-hero);transition:color .25s ease;}
.head.on-light .mark{color:var(--ink);background:rgba(247,244,238,.97);}
.head.on-light .mark span{color:var(--petrol);}

/* Who each section is talking to. On desktop the For Communities split-column
   layout carried that on its own; stacked on a phone the reader hit "...without
   adding a task to your shift" with nothing saying "you" had become the
   director. A label, not a badge: the pill-shaped eyebrow was rejected on
   2026-08-03 for reading AI-generated and that ban still holds. */
.eyebrow{font-family:'DM Sans',system-ui,sans-serif;font-size:1.125rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--petrol);
  margin:0 0 1rem;}

.bar{display:flex;align-items:center;gap:.3rem;
  background:rgba(16,31,45,.80);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(244,239,230,.16);
  border-radius:999px;padding:.32rem .32rem .32rem .5rem;
  box-shadow:0 10px 30px rgba(16,31,45,.28);}
.bar-links{display:flex;align-items:center;gap:.1rem;list-style:none;}
.bar-links a{display:flex;align-items:center;min-height:44px;padding:0 .95rem;
  font-size:1.125rem;font-weight:500;color:var(--ground);text-decoration:none;
  border-radius:999px;transition:background .2s ease,color .2s ease;white-space:nowrap;}
.bar-links a:hover{background:rgba(244,239,230,.14);color:var(--white);}
.bar-cta{display:flex;align-items:center;min-height:44px;padding:0 1.35rem;
  font-size:1.125rem;font-weight:600;color:var(--ink);background:var(--white);
  border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:background .2s ease,box-shadow .2s ease;}
.bar-cta:hover{background:var(--ground);box-shadow:0 8px 22px rgba(16,31,45,.3);}
.bar-toggle{display:none;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;
  background:transparent;border:none;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:1.125rem;font-weight:500;color:var(--ground);}
.bar-toggle:hover{background:rgba(244,239,230,.14);}
.bar-toggle svg{width:22px;height:22px;}

/* ══ HERO: TWO SCREENS, ONE DAY ═════════════════════════════════════════════
   RECOMPOSED 2026-08-14 (founder, from the five-concept review). The full-bleed
   photograph is GONE and with it roughly 140 lines of contrast machinery — a
   vertical scrim ramp, a second horizontal scrim, a masked plateau behind the
   copy, and a desktop-only depth-of-field blur. Every one of those existed for
   one reason: white type was standing on a photograph, so its legibility
   depended on which pixel happened to land under which glyph. On a flat
   --ink-deep ground that whole class of problem does not exist. Contrast is now
   a token pair, not a computation:
     #fffdf9 on #0E1B27 -> 16.9:1      --ground #F2F5F7 on #0E1B27 -> 15.6:1
     --petrol-hero #B4DEE1 on #0E1B27 -> 11.4:1
   Do not reintroduce a photograph behind live text. If a photograph comes back,
   it goes in its own band with type beside it, never over it.

   WHY TWO PHONES. Every competitor in this category sells "peace of mind" as a
   feeling and shows no product at all — five of six show zero UI, and not one
   shows the family's side. The single thing we own that none of them do is that
   both halves of the product are visible in one frame: what the parent touches,
   and what the adult child reads afterwards. That is the hero. It is also the
   image that survives being screenshotted into a text message, which is how this
   page is actually going to be shared. */
/* FULL-BLEED BAND, CONTAINED CONTENT. These are two different jobs and they were
   on one element: .hero carried the navy AND max-width:1560px + margin-inline:auto,
   so on any window wider than 1560px the navy simply STOPPED and the body's light
   --ground showed through as a gutter down both sides. At 1920 that was 180px of
   pale edge framing the hero like a mistake. Reported 2026-08-18 from a 1918px window.
   The cap is now expressed as padding instead of width: the element spans the full
   viewport (so the background does too), and max() keeps the CONTENT inside 1560px
   by growing the side padding once the window passes it. Below 1560 the max() picks
   the clamp and nothing about the old layout changes.
   Do NOT put max-width back on this element — put it on an inner wrapper if the
   markup ever needs one. A background and a measure are not the same box. */
.hero{position:relative;background:var(--ink-deep);
  padding-block:150px clamp(56px,7vh,92px);
  padding-inline:max(clamp(18px,5vw,40px), (100% - 1560px) / 2);
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);}
@media(max-width:1023px){
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center;
    padding-top:128px;gap:clamp(32px,6vw,48px);}
}
/* 100%, not 94vw. 94vw is measured against the VIEWPORT and ignores the hero's
   own side padding, so at 390px it resolved to 366px inside a 351px box and every
   line of copy sat flush against the screen edge with no margin at all. */
.hero-copy{position:relative;width:100%;max-width:min(660px,100%);}
@media(max-width:1023px){.hero-copy{margin-inline:auto;}}

/* The wedge was REMOVED 2026-08-18 (founder call): 17 words of framing before
   the headline told a stranger what the product was. Its source was the VOC
   corpus — the top-voted reply asking for "one good phone call a day where you
   actually talk instead of just confirming she's alive" — and that positioning
   is not abandoned, it moves below the fold where a reader who is still there
   has already agreed to read. If it ever comes back above the fold it comes
   back SHORT: the h1 already carries the worry, so a second sentence of worry
   is the thing that made the hero read as a pitch. */

/* H1 speaks to the adult child; .hero-sub speaks to the parent. Founder call
   2026-08-14: both audiences, two lines, in that order — the child is the buyer
   and the one who lands here, the parent is who it is for. If the H1 is ever
   reworded, check <title>, meta description and the og:/twitter: pair in the
   same edit; all four are second person and have drifted apart before. */
.hero h1{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2.35rem,5.4vw,3.85rem);line-height:1.06;letter-spacing:-.022em;
  color:var(--white);margin-bottom:1.35rem;text-wrap:balance;}
.hero h1 em{font-style:italic;font-weight:300;color:var(--petrol-hero);}
.hero-sub{margin:0 0 2.1rem;font-size:clamp(1.125rem,1.55vw,1.19rem);
  line-height:1.6;color:var(--ground);}
@media(max-width:1023px){.hero-sub{margin-inline:auto;max-width:52ch;}}
.hero-note{margin:1.35rem 0 0;font-size:1.125rem;line-height:1.55;color:var(--ground);}
.hero-note a{color:var(--petrol-hero);text-decoration:underline;text-underline-offset:3px;}
.hero-note a:hover{color:var(--white);}
@media(max-width:1023px){.hero-note{margin-inline:auto;}.hero .store-row{justify-content:center;}}

.pill{display:inline-flex;align-items:center;justify-content:center;
  width:min(420px,100%);min-height:60px;padding:.9rem 2rem;
  font-family:'DM Sans',sans-serif;font-size:1.125rem;font-weight:600;
  color:var(--ink);background:var(--white);border:none;border-radius:999px;
  text-decoration:none;cursor:pointer;box-shadow:0 14px 40px rgba(16,31,45,.42);
  transition:background .22s ease,box-shadow .22s ease,transform .14s var(--ease-out);}
.pill:hover{background:var(--ground);box-shadow:0 20px 52px rgba(16,31,45,.5);transform:translateY(-2px);}
.pill:active{transform:translateY(-2px) scale(.98);}

/* Two-door fork — the lobby splits within the first screen (two-door plan, 2026-08-10) */
.fork{background:var(--white);border-bottom:1px solid var(--hairline);padding:clamp(28px,4vw,44px) 5%;}
.fork-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.fork-card{display:block;background:var(--ground);border:1px solid var(--hairline-md);border-radius:18px;padding:1.5rem 1.7rem;text-decoration:none;transition:transform .15s var(--ease-out),box-shadow .2s,border-color .2s;}
.fork-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--petrol);}
/* Sentence case, no letterspaced caps: a letterspaced-caps label above a headline is the
   generated-page tell the founder called out, and the type floor here is 15px. */
.fork-kicker{display:block;font-size:1.125rem;font-weight:600;color:var(--petrol);margin-bottom:.35rem;}
.fork-h{font-family:'Fraunces',serif;font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.25;margin-bottom:.4rem;}
.fork-card p{font-size:1.125rem;color:var(--mid);line-height:1.55;margin:0;}
.fork-card .go{display:inline-block;margin-top:.7rem;font-size:1.125rem;font-weight:600;color:var(--petrol);}
@media(max-width:639px){.fork-grid{grid-template-columns:1fr;}}

/* ══ THE DEVICES ════════════════════════════════════════════════════════════
   Photorealistic iPhone product photos (2026-08-30, founder call), replacing
   the hand-drawn CSS mockup that lived here before: the founder wanted a real
   iPhone photo with the actual app screenshots composited in, not a drawing of
   one. Generated with Runway (nano-banana-pro) from the shipped senior-app and
   family-app home screens, background-removed and cropped to the phone itself
   so it composites onto the navy ground with no visible seam.
   Traded away with the CSS version: infinite crispness, zero image weight, and
   site/copy-guardrails.test.mjs's automatic check that the drawn tile colours
   matched senior-app/src/theme.ts — there is no CSS left for it to check. */
/* The pair rotates, so the stage needs slack on both sides or a corner clips the
   hero's edge. Padding, not margin — margin would be eaten by the grid gap. */
.hero-stage{display:flex;align-items:flex-end;justify-content:center;
  padding:16px 38px 16px 28px;}
.dev{flex:none;position:relative;
  filter:drop-shadow(0 46px 80px rgba(8,16,24,.55)) drop-shadow(0 8px 20px rgba(8,16,24,.35));}
.dev img{display:block;width:100%;height:100%;}
/* Senior device leads: larger, lower, front. The family device is the answer to
   it, so it sits behind and higher — read order is her phone, then yours.
   Each aspect-ratio is the shipped photo's own pixel ratio (hero-iphone-senior.webp
   is 590x1400, hero-iphone-family.webp is 629x1400) so the box never letterboxes
   or stretches the image; if either file is regenerated at a different crop,
   update its ratio here in the same commit. */
.dev-senior{height:min(60svh,600px);aspect-ratio:590/1400;
  transform:rotate(-3deg);transform-origin:bottom center;z-index:1;}
/* Smaller rotation on the family device than the senior one — past about 3
   degrees a photo starts to look tilted rather than posed. The negative margin
   overlaps the pair so they read as one object. */
.dev-family{height:min(53svh,530px);aspect-ratio:629/1400;
  margin-bottom:clamp(20px,4svh,48px);margin-left:-5%;
  transform:rotate(2.5deg);transform-origin:bottom center;}
/* Below 1024 the pair sits under the copy and must fit the VIEWPORT WIDTH, which
   height-sizing does not guarantee: at 390x844 the two devices derived a combined
   width of about 420px and pushed the whole document sideways — every line of
   hero copy ran off the right edge. So the stage is capped in vw here and the
   devices take their height from that cap, not from svh. */
@media(max-width:1023px){
  .dev-senior{height:auto;width:min(43vw,200px);}
  .dev-family{height:auto;width:min(38vw,178px);margin-bottom:clamp(12px,3vw,28px);}
}
@media(prefers-reduced-motion:reduce){.dev{transform:none;}}

/* ── The same device, standing in a section ─────────────────────────────────
   Two appearances further down the page reuse the hero's markup verbatim (see
   the clone script at the end of <body>). Two things change: the hero's extra
   rotation comes off, and it sheds the hero's deep drop shadow, which was tuned
   for a navy ground and reads as grime on white.
   It does not stand fully straight any more — the pose is inside the photograph
   now, so transform:none only removes what CSS added on top of it. These two
   sections read as product imagery rather than a screen to be read; if either
   ever needs to be legible again, it needs a straight-on photo of its own, not
   a CSS change. */
.dev-slot{margin-top:2.6rem;}
.dev-slot .dev{transform:none;margin:0;height:520px;
  filter:drop-shadow(0 22px 40px rgba(20,38,58,.34)) drop-shadow(0 3px 8px rgba(20,38,58,.08));}
.dev-slot-wide{max-width:300px;}
/* The families section is one column, so a block-level device left the right
   half of the band empty. Floated, the four points run beside it and the section
   reads as one object rather than a screenshot with a list under it. Float
   rather than a grid because the list has to wrap PAST the device and then use
   the full width again — that is what float does and grid does not. */
@media(min-width:1024px){
  #families .dev-slot{float:right;margin:0 0 1.5rem 3.5rem;}
  #families .fam-links{clear:both;}
}
@media(max-width:1023px){
  .dev-slot{display:flex;justify-content:center;}
  .dev-slot-wide{max-width:none;}
  /* Size by WIDTH only here and let aspect-ratio (set on .dev-senior/.dev-family,
     which stay on the cloned element) derive the height — setting both dimensions
     explicitly is what broke this the last time (see git history). */
  .dev-slot .dev{height:auto;width:min(64vw,250px);}
}

/* ══ SHARED SECTION FURNITURE ═══════════════════════════════════════════════ */
section{padding:clamp(72px,9vw,132px) clamp(18px,5vw,40px);position:relative;}
.wrap{max-width:1180px;margin:0 auto;}
.narrow{max-width:820px;margin:0 auto;}
h2.dsp{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2rem,3.9vw,3.25rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--ink);text-wrap:balance;}
h2.dsp em{font-style:italic;font-weight:300;color:var(--petrol);}
h3.sub{font-family:'DM Sans',sans-serif;font-size:1.19rem;font-weight:600;
  color:var(--ink);letter-spacing:-.005em;margin-bottom:.4rem;}
.lede{font-size:clamp(1.125rem,1.5vw,1.19rem);color:var(--mid);margin-top:1.35rem;max-width:56ch;}
.body{color:var(--mid);}
.ground-white{background:var(--white);}
.ground-cream{background:var(--ground);}
/* #reading — the article list above the FAQ. Deliberately typographic rather than a card grid:
   these are things to read, and a row of cards reads as more product. */
.reading-list{list-style:none;margin:0;padding:0;}
.reading-list li{padding:1.05rem 0;border-bottom:1px solid var(--hairline);font-size:1.15rem;
  line-height:1.5;color:var(--mid);}
.reading-list li:first-child{border-top:1px solid var(--hairline);}
.reading-list a{color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--petrol);}
.reading-list a:hover{color:var(--petrol);}
.reading-more{margin:1.5rem 0 0;font-size:1.1rem;}
/* inline-block + padding, not just a coloured span: measured 22px tall on a phone,
   under the 24px WCAG 2.5.8 (AA) target minimum. It was the only link on the page
   below the floor — the footer links sit exactly at 24. */
.reading-more a{color:var(--petrol);font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;}
.on-dark{background:var(--ink);color:var(--ground);}
.on-dark h2.dsp{color:var(--ground);}
.on-dark h2.dsp em{color:var(--petrol-hero);}
/* How-it-works ran on-dark added 2026-08-13 so navy appears in the middle of the page, not
   only top and bottom (founder). --ground-soft is the existing 9.69:1-on-navy token, already
   used in .closing and .honest — reused here rather than inventing a new pair. */
.on-dark .step{border-top-color:var(--petrol-hero);}
.on-dark .step .n{color:var(--petrol-hero);}
.on-dark .step p{color:var(--ground-soft);}
.on-dark .price-note{color:var(--ground-soft);}
.on-dark .price-note a{color:var(--petrol-hero);}

.act{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.8rem 1.75rem;border-radius:999px;
  font-family:'DM Sans',sans-serif;font-size:1.125rem;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;
  transition:background .22s ease,box-shadow .22s ease,color .22s ease,border-color .22s ease,transform .14s var(--ease-out);}
.act-teal{background:var(--petrol);color:#fff;box-shadow:var(--sh-btn);}
.act-teal:hover{background:var(--petrol);box-shadow:0 16px 36px rgba(47,130,102,.34);transform:translateY(-2px);}
/* The border is the ONLY thing that makes "Ask your community" read as a button
   rather than as stray navy text beside the filled teal one, so it has to clear
   the 3:1 non-text floor on its own. .17 computed 1.39:1 on cream; .52 computes
   3.16:1. (.42 was tried first and lands at 2.44:1, still short.) */
.act-line{background:transparent;color:var(--ink);border:1.5px solid rgba(22,40,58,.52);}
.act-line:hover{border-color:var(--ink);background:var(--white);}
.act-cream{background:var(--white);color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.24);}
.act-cream:hover{background:var(--ground);transform:translateY(-2px);}
/* .34 computed 2.79:1 on navy, under the 3:1 non-text floor. .38 computes 3.14:1. */
.act-ghost{background:transparent;color:var(--ground);border:1.5px solid rgba(244,239,230,.38);}
.act-ghost:hover{background:rgba(244,239,230,.1);border-color:var(--ground);}
.act-text{display:inline-flex;align-items:center;min-height:44px;
  font-size:1.125rem;font-weight:600;color:var(--petrol);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1.5px;}
/* Hover used to swap --petrol for --petrol, which computes 4.07:1 on cream — the link
   was compliant at rest (6.57:1) and dropped UNDER the 4.5:1 text floor the moment you
   pointed at it, which is backwards. --petrol is the same #135A5F as --petrol, so
   hover now holds 6.57:1 and the underline carries the state change instead of colour. */
.act-text:hover{color:var(--petrol);text-decoration-thickness:2.5px;}
.acts{display:flex;flex-wrap:wrap;gap:.85rem 1.1rem;align-items:center;margin-top:2.1rem;}

.ic{width:26px;height:26px;flex:none;}

/* ══ PROMISES ROW ═══════════════════════════════════════════════════════════
   This sits exactly where the competitor puts its star rating, review count and
   press strip. Guardian Sarah has no customers, so the slot carries the four
   TRUST BLOCKS FROM THE LIVE PAGE instead, verbatim. Two columns of two as
   cards, collapsing to one column below 640px. */
/* Badge strip: the live page's four hero badges, off the photograph and onto
   solid cream. #35485C on #f4efe6 = 7.31:1. Wraps to two columns on a phone
   rather than shrinking, because nothing here goes below 17px. */
.badges{background:var(--ground);border-bottom:1px solid var(--hairline);
  padding:clamp(20px,2.4vw,30px) clamp(18px,5vw,40px);}
.badges ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,3.4vw,52px);}
.badges li{position:relative;font-size:18px;font-weight:500;color:var(--mid);
  padding-left:26px;line-height:1.45;}
.badges li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:8px;
  border-left:2px solid var(--petrol);border-bottom:2px solid var(--petrol);
  transform:rotate(-45deg);}
@media(max-width:560px){
  .badges ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;justify-items:start;}
}
/* 2x2 CARDS (2026-08-14). Was four bare columns on --ground: at 1180px each
   promise got ~265px, so "Not Medical" — the longest and the only legally load
   bearing one — ran to eleven lines while "She's An AI" ran to four. Four
   uneven columns of small type reads as fine print, which is the one thing a
   disclaimer block must not do. Two columns of two gives every promise the same
   card and roughly the same depth.
   The section ground drops to --sunk so the white cards have something to sit
   on; the band above it is --ground and the one below is white, so the page
   steps sunk -> white rather than repeating a ground on a ground.
   CONTRAST: body copy is --quiet #45566A. On --ground that is 6.87:1; on the
   white card it is 7.52:1. Moving the text onto white RAISES it. */
.promises{background:var(--sunk);padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px);}
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px);
  max-width:980px;margin-inline:auto;}
.promise{display:flex;flex-direction:column;gap:1rem;
  background:var(--white);border:1px solid var(--hairline);border-radius:16px;
  padding:clamp(22px,2.6vw,32px);}
/* The icon becomes a 46px petrol-pale tile rather than a loose 26px glyph.
   box-sizing is border-box globally, so 46 - 2*10 padding leaves the glyph at
   its original 26px — the mark is unchanged, only the plate under it is new. */
.promise .ic{width:46px;height:46px;padding:10px;border-radius:12px;
  background:var(--petrol-pale);color:var(--petrol);}
/* These four were <b>, i.e. invisible to a heading list, while every structurally
   equivalent sub-item on the page is an h3. They are h3.sub now, under a
   visually-hidden h2, so the four compliance promises are navigable. */
.promise .sub{margin-bottom:.15rem;}
.promise p{font-size:1.125rem;line-height:1.55;color:var(--quiet);margin-top:.15rem;}

/* ══ FOR COMMUNITIES ════════════════════════════════════════════════════════
   Two columns at 1024+, the heading column sticky. Single stacked column below
   1024. The list is hairline-ruled rather than three identical icon cards. */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2.5rem,5vw,5rem);align-items:start;}
.split-head{position:sticky;top:118px;}
.ruled{list-style:none;}
.ruled li{padding:1.65rem 0;border-top:1px solid var(--hairline);}
.ruled li:first-child{border-top:none;padding-top:0;}
.ruled li:last-child{padding-bottom:0;}
.ruled p{font-size:1.125rem;color:var(--mid);max-width:64ch;}
.tick{display:block;width:34px;height:2px;background:var(--petrol);margin-bottom:1rem;border-radius:2px;}
.aside{margin-top:2.4rem;padding:1.6rem 1.75rem;background:var(--amber-pale);
  border-left:3px solid var(--amber);border-radius:0 12px 12px 0;}
.aside .sub{margin-bottom:.35rem;}
.aside p{font-size:1.125rem;color:var(--mid);}

/* ══ WHAT A VISIT SOUNDS LIKE ═══════════════════════════════════════════════
   Where the competitor runs named testimonials. We have no customers to quote,
   so this is Sarah's own script, labelled as written rather than recorded.
   Single centred column at every width. */
.visit-lines{list-style:none;margin-top:2.6rem;}
.visit-lines li{padding:1.8rem 0;border-top:1px solid var(--rule-dk);}
.visit-lines li:first-child{border-top:none;}
.who{display:block;font-size:1.125rem;font-weight:500;color:var(--petrol-hero);margin-bottom:.55rem;}
.said{font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.19rem,2.3vw,1.7rem);line-height:1.42;color:var(--ground);}
.honest{margin-top:2.4rem;font-size:1.125rem;line-height:1.62;color:var(--ground-soft);max-width:60ch;}
.honest a{color:var(--petrol-hero);text-decoration:underline;text-underline-offset:3px;}
.honest a:hover{color:var(--white);}

/* ══ FOR FAMILIES ═══════════════════════════════════════════════════════════
   Was a text column plus a portrait commission plate at 940+. The two
   "PHOTOGRAPH TO COMMISSION" plates and their art-direction captions are cut
   rather than published to guardiansarah.com as grey boxes; they come back the
   day the frames are shot. With the plate gone the column is capped at a
   readable measure instead of running the full 1180px wrap. */
.fam{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;max-width:860px;}
.fam-links{display:flex;flex-wrap:wrap;gap:.85rem 1.1rem;align-items:center;margin-top:2.1rem;}

/* ══ HOW IT WORKS ═══════════════════════════════════════════════════════════
   Three columns at 900+, stacked below. The numerals stay because the sequence
   is genuinely ordered: delivery, then visits, then recaps. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.6vw,3.4rem);margin-top:3.2rem;}
.step{border-top:2px solid var(--ink);padding-top:1.35rem;}
.step .n{font-family:'Fraunces',serif;font-weight:300;font-size:2.6rem;line-height:1;
  color:var(--petrol);display:block;margin-bottom:.9rem;}
.step p{font-size:1.125rem;color:var(--mid);}
.store-row-compact{margin-top:1.1rem;flex-wrap:wrap;}
.store-row-compact .store-btn{min-height:48px;padding:7px 16px 7px 14px;}
.store-row-compact .store-btn svg{width:22px;height:22px;}
.store-row-compact .store-btn span{font-size:15px;}
.store-row-compact .store-btn small{font-size:12px;}

/* ══ FAQ ════════════════════════════════════════════════════════════════════ */
.faq-item{border-top:1px solid var(--hairline-md);}
.faq-item:last-of-type{border-bottom:1px solid var(--hairline-md);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;min-height:44px;padding:1.4rem 0;
  font-size:clamp(1.125rem,1.7vw,1.28rem);font-weight:600;color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--petrol);}
.chev{width:24px;height:24px;flex:none;color:var(--petrol);transition:transform .28s var(--ease-out);}
.faq-item[open] .chev{transform:rotate(180deg);}
.faq-item .ans{padding:0 0 1.6rem;max-width:66ch;font-size:1.125rem;color:var(--mid);}
.faq-item .ans a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;}

/* ══ CLOSING ════════════════════════════════════════════════════════════════ */
.close-in{text-align:center;max-width:760px;margin:0 auto;}
.close-in .lede{margin-left:auto;margin-right:auto;color:var(--ground-soft);}
.close-in .acts{justify-content:center;}
.area{display:flex;align-items:flex-start;justify-content:center;gap:.7rem;
  margin-top:2.6rem;font-size:1.125rem;line-height:1.55;color:var(--ground-soft);
  max-width:62ch;margin-left:auto;margin-right:auto;text-align:left;}
.area svg{color:var(--petrol-hero);width:22px;height:22px;flex:none;margin-top:.15rem;}

/* ══ FOOTER ═════════════════════════════════════════════════════════════════
   Four columns at 900+, two at 600-899, one below 600. */
footer{background:var(--ink-deep);color:var(--foot-txt);padding:clamp(64px,7vw,96px) clamp(18px,5vw,40px) 2.6rem;}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2.6rem 2.2rem;}
.foot-mark{font-family:'Fraunces',serif;font-size:1.42rem;font-weight:600;color:var(--ground);display:block;margin-bottom:.9rem;}
.foot-mark span{color:var(--petrol-hero);}
.foot-blurb{font-size:1.125rem;line-height:1.6;color:var(--foot-txt);max-width:38ch;}
/* Was missing entirely: the one <a> in this blurb ("two people who answer their
   own email") fell through to the browser default link blue, #0000ee on
   #101f2d = 1.77:1. Reuses --foot-txt, the same passing token the two
   neighbouring footer rules already use — 10.91:1. */
.foot-blurb a{color:var(--foot-txt);text-decoration:underline;text-underline-offset:3px;}
.foot-blurb a:hover{color:var(--ground);}
.foot-h{font-size:1.125rem;font-weight:600;color:var(--ground);margin-bottom:.9rem;}
.foot-list{list-style:none;display:flex;flex-direction:column;gap:.15rem;}
.foot-list a{display:inline-flex;align-items:center;min-height:44px;
  font-size:1.125rem;color:var(--foot-txt);text-decoration:none;}
.foot-list a:hover{color:var(--ground);text-decoration:underline;text-underline-offset:3px;}
.foot-rule{border:none;border-top:1px solid var(--rule-dk);margin:2.8rem 0 1.8rem;}
/* Carries the not-a-medical-device disclaimer, so it is running prose and holds
   the 17px floor like the rest of the body copy. */
.foot-legal{font-size:1.125rem;line-height:1.6;color:var(--foot-txt);max-width:88ch;}
.foot-legal a{color:var(--foot-txt);text-decoration:underline;text-underline-offset:3px;}
.foot-legal a:hover{color:var(--ground);}
.foot-end{margin-top:1.4rem;font-size:1.125rem;color:var(--foot-txt);}

/* ══ REVEAL ═════════════════════════════════════════════════════════════════ */
.js .r{opacity:0;transform:translateY(16px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);}
.js .r.in{opacity:1;transform:none;}
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.js .hero-copy > *{animation:rise .85s var(--ease-out) both;}
.js .hero-copy > *:nth-child(2){animation-delay:.09s;}
.js .hero-copy > *:nth-child(3){animation-delay:.17s;}
.js .hero-copy > *:nth-child(4){animation-delay:.24s;}
/* Four children, in order: h1, .hero-sub, .store-row, .hero-note. It was five
   until the wedge came out on 2026-08-18. A child with no matching delay
   animates at 0s and lands BEFORE the ones above it, so this list and the
   markup have to be counted together every time a line is added or removed. */
/* The devices arrive last, after the copy has settled. They are the payoff, and
   leading with them makes the headline feel like a caption. */
.js .hero-stage{animation:rise .95s var(--ease-out) .38s both;}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════════ */
@media(max-width:1023px){
  .split{grid-template-columns:1fr;gap:2.6rem;}
  .split-head{position:static;}
}
@media(max-width:899px){
  .steps{grid-template-columns:1fr;gap:2.2rem;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
/* Below 1024px the floating bar collapses: the three plain links move into a
   panel under the bar, leaving a Menu button and the one filled action. The
   bar stays top right, so the composition does not change shape. Raised from
   960px because every label in the bar went from 16px to the page's 17px floor,
   which widens the uncollapsed bar by roughly 6%; 1024 restores the slack. */
@media(max-width:1023px){
  .bar{flex-wrap:wrap;justify-content:flex-end;padding:.32rem;}
  .bar-toggle{display:inline-flex;}
  .bar-links{display:flex;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:.1rem;padding:0 .25rem;border-top:1px solid transparent;margin-top:0;
    display:none;}
  /* display:none, not max-height:0. A zero-height list still has its links'
     max-content WIDTH, so the closed bar was as wide as "For your family" and
     showed an empty pill beside Menu on every phone. */
  .bar-links.open{display:flex;border-top-color:rgba(244,239,230,.18);margin-top:.4rem;padding:.5rem .25rem .25rem;}
  .bar-links a{justify-content:flex-start;padding:0 1rem;}
  /* Open, the 999px pill became a tall translucent oval with the headline
     showing through it. A solid rounded panel instead. */
  .bar:has(.bar-links.open){border-radius:22px;background:rgba(16,31,45,.97);}
}
@media(max-width:639px){
  .foot-grid{grid-template-columns:1fr;gap:2rem;}
  .promise-grid{grid-template-columns:1fr;gap:14px;}
  /* THE HERO ON A PHONE. Both devices stay — the pair IS the concept, and a
     phone showing one phone is every competitor's page. They shrink and sit
     shoulder to shoulder instead. */
  .hero{padding-top:132px;overflow-x:clip;}
  /* Two rotated phones plus 66px of side padding measured 389px at 375: a
     sideways scroll on every phone. Less padding, and clip what rotation adds. */
  .hero-stage{gap:0;padding-inline:4px;}
  .pill{width:100%;}
  .area{flex-direction:column;align-items:flex-start;}
}
/* SHORT WINDOWS. Founder-reported 2026-08-16: on a browser under ~760px tall — a
   laptop with toolbars showing, or a window that isn't maximised — the hero's
   fixed 150px top pad plus its up-to-92px bottom pad plus five stacked margins
   added up to ~723px of chrome-and-copy, so the fold sliced the hero-note
   mid-sentence with a hard dark edge and no hint anything followed. Runs at
   EVERY width, deliberately last in source order, so it also wins on a short
   phone in landscape where the width query above would otherwise lose the
   cascade. Horizontal padding (the clamp() values) is untouched — only the
   rhythm that stacks vertically shrinks. */
@media(max-height:760px){
  .hero{padding-top:112px;padding-bottom:clamp(32px,5vh,56px);}
  .hero h1{margin-bottom:1rem;}
  .hero-sub{margin-bottom:1.5rem;}
  .hero-note{margin-top:1rem;}
}
/* THE SMALL-SCREEN HEADER, AND 320px REFLOW.
   .head is space-between with no slack: .bar-cta cannot shrink below its own
   nowrap label, so at 375 it squeezed the wordmark to ~96px and broke the brand
   in half onto two lines. Under 480px the filled action moves into the same
   collapsed panel as the links, leaving the bar carrying only Menu. Nothing is
   lost: the hero's full-width .pill already carries the primary action above
   the fold, and the footer says it again. That takes the header's min-content
   from ~370px to ~295px, so 320px (400% zoom on a 1280 desktop) reflows instead
   of clipping.
   480 rather than the 430 first proposed: at 431 the wordmark plus a two-row
   bar measures ~429px against 431 available, which is inside the error bar of
   any width estimate. 480 puts real slack under the first width where the CTA
   comes back, and the tighter CTA padding below 640 keeps that slack honest. */
@media(max-width:640px){
  .bar-cta{padding:0 1rem;}
}
@media(max-width:480px){
  .bar-cta{display:none;order:4;width:100%;justify-content:center;margin-top:.35rem;}
  .bar-links.open ~ .bar-cta{display:flex;}
}
@media(max-width:400px){
  .mark{font-size:1.19rem;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js .r{opacity:1!important;transform:none!important;}
  .js .hero-copy > *{animation:none!important;}
  .pill:hover,.pill:active,.act:hover,.act-teal:hover,.act-cream:hover{transform:none;}
  .faq-item[open] .chev{transition:none;}
}

/* ── STORE BUTTONS ──────────────────────────────────────────────────────────
   Replaced the waitlist form 2026-08-13. Two real store buttons, sitting on the hero
   photograph, so they carry their own solid ground rather than relying on the scrim.
   Deliberately NOT Apple's and Google's official badge images: those are fixed-size
   raster assets that go soft on a 3x display and cannot inherit the type scale. These
   are live text at 19px on a 56px target, which is what an older adult actually needs.
   Both stores permit a text-and-logo lockup of this shape.
   56px is above the 44px WCAG 2.5.5 floor on purpose — the two buttons sit side by side
   and a mis-tap sends someone to the wrong store entirely. */
.store-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.store-btn{display:inline-flex;align-items:center;gap:11px;min-height:56px;padding:9px 20px 9px 17px;
  background:var(--ink);color:var(--white);border:1.5px solid var(--ink);border-radius:11px;
  text-decoration:none;transition:transform .18s ease,background .18s ease;}
.store-btn:hover{background:var(--ink-deep,#0d1b2a);transform:translateY(-1px);}
/* Not-yet-live state. Reads as a real button so the hero still looks shipped, but it does
   not invite a click it cannot honour: no pointer cursor, no lift on hover. */
.store-btn:focus-visible{outline:3px solid var(--white);outline-offset:3px;}
.store-btn svg{width:26px;height:26px;flex:none;}
.store-btn span{display:flex;flex-direction:column;line-height:1.14;font-weight:600;font-size:19px;letter-spacing:-.01em;}
.store-btn small{font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.82;}
@media (max-width:400px){.store-row{flex-direction:column;}.store-btn{justify-content:center;}}
@media print{.store-row{display:none;}}

/* ── PRICE BAND ─────────────────────────────────────────────────────────────
   Two halves, side by side above 700px: the trial and then what follows it, in that
   order, because the trial removes the risk and the price creates it. The wording rules
   for this block are on the HTML element itself — read them before editing the copy;
   guard-nonnegotiables.mjs enforces the important half and will block the commit. */
.price-band{display:grid;gap:22px;margin-top:52px;padding:28px;background:var(--white);
  border:1px solid var(--hairline);border-radius:16px;}
@media (min-width:700px){.price-band{grid-template-columns:1fr 1fr;gap:34px;}}
.price-band .sub{font-family:'Fraunces',serif;font-weight:400;font-size:26px;color:var(--ink);letter-spacing:-.015em;}
.price-band p{margin-top:8px;font-size:18px;line-height:1.55;color:var(--mid);}
.price-note{margin-top:16px;font-size:17px;color:var(--quiet,var(--mid));text-align:center;}
.price-note a{color:var(--petrol);}
/* Phones: the mark and the Menu pill floated as two islands over the page, and
   every paragraph scrolled through the gap between them. A full-width band gives
   the header one solid ground; it follows .on-light like the mark does. */
@media(max-width:639px){
  .head{background:var(--ink-deep);padding:10px 16px;align-items:flex-start;
    box-shadow:0 1px 0 rgba(244,239,230,.10);transition:background-color .25s ease;}
  .head.on-light{background:var(--ground);box-shadow:0 1px 0 rgba(20,38,58,.10);}
  .bar{box-shadow:none;}
  .mark,.head.on-light .mark{background:none;margin-top:6px;}
}

.icss-1{margin-top:2.6rem;}
.icss-2{text-align:center;}
.icss-3{margin-bottom:1.6rem;}
.icss-4{margin-bottom:.6rem;}
.icss-5{margin:0 0 2.4rem;font-size:1.125rem;color:var(--mid);}
.icss-6{background:var(--ink-deep);}
.icss-7{margin-top:1rem;}