/* ---------------------------------------------------------------
   Please Help
   Palette taken verbatim from the supplied brand sheet:
   navy #0B2D5C · blue #74A7E3 · grey #D1D5DB.
   Poppins picks up the soft geometric roundness of the wordmark;
   Inter carries body copy because this audience is older and
   legibility at size beats novelty.

   Accessibility is a product requirement, not a nicety: 18px base,
   48px minimum targets, semantic landmarks, and a single committed
   light theme because a consistent high-contrast light ground reads
   better for age-related sight loss than an inverted one.
--------------------------------------------------------------- */
:root{
  --navy:#0B2D5C;
  --navy-deep:#071F42;
  --navy-soft:#12386E;
  --blue:#74A7E3;
  --blue-mid:#4F86C8;
  /* Links and small text need 4.5:1; --blue-mid is 3.57:1 on --paper and 3.77:1 on
     white, so it fails as body-text colour while remaining fine for icons and for
     large headings, which only need 3:1. Measured: #3569A8 gives 5.62 on white,
     5.33 on --paper, 4.97 on --blue-wash. */
  --link:#3569A8;
  --blue-wash:#EAF2FB;
  --blue-line:#CBDDF3;
  --grey:#D1D5DB;
  --white:#fff;
  --paper:#F7F9FC;
  --grey-100:#EDF1F6;
  --grey-200:#DCE3EC;
  --grey-600:#5A6675;
  --text:#12202F;
  --text-soft:#41505F;
  --amber-wash:#FDF4E3;
  --amber-line:#F0DCB4;
  --amber-ink:#7A5410;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(11,45,92,.06),0 1px 1px rgba(11,45,92,.04);
  --shadow-md:0 6px 20px rgba(11,45,92,.08);
  --shadow-lg:0 18px 44px rgba(11,45,92,.14);
  --font-display:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gut:clamp(20px,5vw,64px);
  --head-h:70px;
}
@media (min-width:560px){:root{--head-h:90px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--font-body);font-size:18px;line-height:1.7;
  color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
@media (min-width:700px){body{font-size:19px}}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--link);text-underline-offset:3px}
/* border-radius here is (0,1,1) and was beating .btn{border-radius:999px} at (0,1,0),
   so every pill button squared off the moment a keyboard user focused it. Scoped to
   elements that are NOT buttons. */
a:not(.btn):focus-visible,button:not(.btn):focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
figure{margin:0}   /* browser default is 1em 40px, which was insetting the band image */
ul,ol{margin:0;padding:0}   /* ol was keeping the browser default 40px padding-left, which pushed the steps grid off the container edge */

.wrap{padding-inline:var(--gut);margin-inline:auto;max-width:1280px}
.prose{max-width:68ch}
section{padding-block:clamp(60px,8vw,110px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:14px 20px;z-index:100}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--grey-200);
}
.head-in{display:flex;align-items:center;gap:16px;min-height:var(--head-h);flex-wrap:nowrap}
/* flex-shrink:0 is the point of this rule. The logo is a fixed-proportion lockup and
   was being squeezed from 189px to 159px at 1080px to make room for the nav — a 16%
   distortion of the brand mark. It now holds its size and the nav breaks to the menu
   button instead, which is the correct thing to give way. */
.brand{display:flex;align-items:center;margin-right:auto;flex:0 0 auto;text-decoration:none}
.brand img{height:40px;width:auto;max-width:none}
@media (min-width:560px){.brand img{height:50px}}

.head-nav{display:flex;gap:4px;align-items:center}
.nav-link{
  display:none;align-items:center;min-height:48px;padding:0 11px;
  color:var(--text-soft);text-decoration:none;font-weight:500;font-size:17px;border-radius:var(--radius-sm);
  white-space:nowrap;
}
.nav-link:hover{color:var(--navy);background:var(--grey-100)}

.btn{
  display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:18px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
@media (min-width:560px){.btn{display:inline-flex;width:auto}}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--navy-soft);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--grey-200)}
.btn-ghost:hover{border-color:var(--navy);background:var(--grey-100)}
.btn-onnavy{background:#fff;color:var(--navy)}
.btn-onnavy:hover{background:var(--paper);transform:translateY(-1px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.36)}
.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-sm{display:inline-flex;width:auto;min-height:48px;padding:0 18px;font-size:16.5px}

.menu-btn{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px;
  border-radius:999px;background:#fff;color:var(--navy);border:2px solid var(--grey-200);
  font-family:var(--font-display);font-weight:600;font-size:16.5px;cursor:pointer;
}
.menu-btn:hover{border-color:var(--navy);background:var(--grey-100)}
.menu-btn .bars{display:grid;gap:3.5px;width:18px}
.menu-btn .bars i{display:block;height:2.5px;background:currentColor;border-radius:2px}

/* dvh, never vh: on iOS the address bar makes 100vh taller than the screen
   and the close row lands under the chrome where it cannot be reached. */
.menu-panel{
  display:none;position:fixed;inset:0 0 auto 0;top:var(--head-h);
  max-height:calc(100dvh - var(--head-h));overflow-y:auto;
  background:#fff;border-top:1px solid var(--grey-200);
  box-shadow:var(--shadow-lg);z-index:60;padding:12px var(--gut) 28px;
}
.menu-panel[data-open="true"]{display:block}
.menu-panel ul{list-style:none;display:grid;gap:2px;margin-bottom:18px}
.panel-link{
  display:flex;align-items:center;min-height:60px;padding:0 8px;
  border-bottom:1px solid var(--grey-100);color:var(--navy);text-decoration:none;
  font-family:var(--font-display);font-weight:500;font-size:1.18rem;
}
.panel-link:hover{color:var(--link)}
.menu-close{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;
  margin-top:10px;border-radius:999px;cursor:pointer;background:var(--grey-100);
  border:0;color:var(--text-soft);font-family:var(--font-display);font-weight:600;font-size:16.5px;
}
.menu-close:hover{background:var(--grey-200);color:var(--navy)}
.menu-scrim{display:none;position:fixed;inset:0;background:rgba(11,45,92,.45);z-index:55}
.menu-scrim[data-open="true"]{display:block}

/* Scoped to .head-nav (0,2,0) so it outranks .btn/.btn-sm at (0,1,0),
   which are defined later and would otherwise win on source order. */
.head-nav .nav-cta{display:none}

/* BREAKPOINTS ARE MEASURED, NOT PICKED. With the logo at its true 189px and the
   container gutter at 54px a side, the five links plus the CTA need 1043px; below
   that the header used to solve the squeeze by crushing the logo instead. 1080
   leaves ~37px of slack, so it holds. Re-measure if a link is ever added: the
   symptom of getting this wrong is a shrinking logo, not a wrapped nav. */
@media (min-width:820px){
  /* Tablets and small laptops get the primary action without opening the menu —
     it is a long way from 820px to 1080px to be offered nothing but a hamburger. */
  .head-nav .nav-cta{display:inline-flex}
}
@media (min-width:1080px){
  .nav-link{display:inline-flex}
  .menu-btn,.menu-panel,.menu-scrim{display:none!important}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(170deg,var(--blue-wash),var(--white) 62%);padding-block:clamp(40px,6vw,76px) clamp(56px,7vw,88px)}
.hero-grid{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media (min-width:940px){.hero-grid{grid-template-columns:1.05fr 1fr}}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--link);
  background:#fff;border:1px solid var(--blue-line);padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.hero h1{font-size:clamp(2.05rem,5.4vw,4rem);font-weight:600;margin-bottom:22px;color:var(--navy)}
.hero h1 em{font-style:normal;color:var(--blue-mid)}
.hero-lede{font-size:clamp(1.1rem,1.9vw,1.35rem);color:var(--text-soft);max-width:56ch;margin-bottom:30px}
.hero-cta{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
@media (min-width:560px){.hero-cta{flex-direction:row;flex-wrap:wrap;gap:14px}}
.hero-note{font-size:17px;color:var(--grey-600);display:flex;align-items:flex-start;gap:10px}
.hero-note svg{width:20px;height:20px;flex:0 0 20px;color:var(--blue-mid);margin-top:5px}
.hero-figure{position:relative}
.hero-figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;aspect-ratio:1474/1067}
/* Mobile first: the badge sits under the photo. Only once there is room does
   it overlap the corner, where it reads as a caption rather than a blockage. */
.hero-badge{
  position:static;margin-top:14px;background:#fff;border:1px solid var(--grey-200);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:14px 18px;
  display:flex;align-items:center;gap:12px;
}
@media (min-width:700px){
  .hero-badge{position:absolute;left:auto;right:12px;bottom:-18px;margin-top:0;max-width:72%}
}
@media (min-width:940px){
  .hero-badge{right:-16px}
}
.hero-badge img{width:42px;height:42px;flex:0 0 42px;border-radius:0;box-shadow:none;aspect-ratio:auto}
.hero-badge span{font-family:var(--font-display);font-weight:500;font-size:15.5px;line-height:1.35;color:var(--navy)}

/* ---------- generic section heads ---------- */
.sec-head{margin-bottom:46px}
.sec-head h2{font-size:clamp(1.85rem,4.2vw,3rem);font-weight:600;margin-bottom:14px}
/* Full width, no measure cap — applies to every section intro on the page. */
.sec-head p{font-size:1.13rem;color:var(--text-soft)}
.on-navy .sec-head h2{color:#fff}
.on-navy .sec-head p{color:#B7C9E0}

/* ---------- honesty ---------- */
.honest{background:var(--navy);color:#fff}
/* Full width, no measure cap — runs the width of the panel. */
.honest .lede{color:#B7C9E0;font-size:1.14rem;margin-bottom:38px}
/* 330px, not 258px: with six cards a 258px floor fits four across and leaves a
   two-card orphan row. 330 forces 3+3 at full width and still collapses to 2 and
   then 1 as the viewport narrows. Re-check this if a seventh card is ever added. */
.honest-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));list-style:none}
.honest-grid li{background:var(--navy-soft);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:26px}
/* Icon sits top-centre, on its own row above the heading. Text stays
   left-aligned — these are older readers and centred body copy is harder work. */
.honest-ico{display:flex;justify-content:center;margin-bottom:16px}
.honest-ico svg{width:40px;height:40px;color:var(--blue)}
/* The negation slash is drawn twice: once thick in the CARD colour to knock a
   clean gap through whatever it crosses, then the slash itself on top. That is
   what makes it read as a designed cut rather than a line scribbled over. */
.honest-ico .ico-cut{stroke:var(--navy-soft);stroke-width:4.5}
.honest-ico .ico-slash{stroke:currentColor;stroke-width:1.7}
.honest-grid strong{display:block;font-family:var(--font-display);font-size:1.12rem;font-weight:600;margin-bottom:8px;color:#fff}
.honest-grid span{color:#B7C9E0;font-size:17px;line-height:1.6}
/* Full width, and lifted onto the light brand blue so it reads as the answer
   to the four cards above rather than a fifth card.
   Text is NAVY, not white: white on #74A7E3 is only 2.5:1, which fails WCAG AA
   outright. Navy on the same blue is 5.4:1 and passes comfortably — and this
   is a page read by people with age-related sight loss. */
/* White text on the light blue, per Dom. Note this is ~2.5:1 — see the note
   in the handover; deepening the panel to --blue-mid would take it to 3.75:1. */
/* Was white on --blue (#74A7E3): 2.51:1, below WCAG AA, on a page whose whole
   audience is older readers and people with sight loss. Now the same light panel
   the pricing section already uses — navy on --blue-wash, measured 12.4:1 — and
   the terms link inside it goes from 1.50:1 (invisible) to legible. */
.honest-foot{
  margin-top:34px;padding:28px 30px;border-radius:var(--radius);
  background:var(--blue-wash);border:1px solid var(--blue-line);color:var(--text);
  font-size:1.12rem;
}
.honest-foot strong{color:var(--navy);font-weight:700}
.honest-foot a{color:var(--navy);font-weight:600;text-decoration:underline}

/* ---------- who ---------- */
.who{background:var(--paper)}
.who-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(322px,1fr));list-style:none}
.who-grid li{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
/* Photo runs edge to edge at the top of the card; the padding moves onto the
   text so the image is not floating inside a white border. */
.who-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.who-grid li > h3{margin:18px 22px 7px}
.who-grid li > p{margin:0 22px 22px}
.who-grid h3{font-size:1.08rem;font-weight:600;margin-bottom:7px;color:var(--navy)}
.who-grid p{font-size:16.5px;color:var(--text-soft);line-height:1.55}

/* ---------- steps ---------- */
/* Same card as .who-grid li — box, border, radius, padding, shadow — so the
   two sections read as one system rather than two treatments. */
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(322px,1fr));list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;background:#fff;border:1px solid var(--grey-200);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);
}
.steps li::before{
  content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--blue-wash);color:var(--navy);
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin-bottom:14px;
}
.steps h3{font-size:1.08rem;font-weight:600;margin-bottom:7px;color:var(--navy)}
.steps p{color:var(--text-soft);font-size:16.5px;line-height:1.55}

/* ---------- finder ---------- */
.finder{background:var(--navy-deep);color:#fff}
.finder-lay{display:grid;gap:clamp(32px,5vw,60px);grid-template-columns:1fr;align-items:start}
/* The mock is a short scrolling window, so it is deliberately NOT height-matched to
   the bullets. Centred against the taller column it reads as a phone sitting beside
   the list — the same treatment as the Card1 demo frames. */
@media (min-width:940px){
  .finder-lay{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:center}
}
.finder-points{list-style:none;display:grid;gap:22px;margin-bottom:32px}
.finder-points li{display:flex;gap:16px;align-items:flex-start}
.tick{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:rgba(116,167,227,.2);color:var(--blue);display:grid;place-items:center;margin-top:2px}
.tick svg{width:18px;height:18px}
.finder-points strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin-bottom:4px}
.finder-points span{color:#B7C9E0;font-size:17px;line-height:1.6}
.finder-photo img{border-radius:var(--radius);width:100%;object-fit:cover;aspect-ratio:3/2;box-shadow:var(--shadow-lg)}

/* ============================================================
   The phone mock — a faithful replica of the real scan page.
   Every value below was MEASURED off the live page with a computed-style
   probe, not chosen to look nice: card radius 20px, pill buttons at 999px,
   name 24px/800 centred, dt 12.5px uppercase, dd 17.9px, ground #E9EDEE.
   If tag.php's styling changes, re-measure and update these together —
   a mock that flatters the product is a misrepresentation.
   ============================================================ */
/* A short window onto a long page: the address bar is pinned and the page scrolls
   inside the frame, so the mock stays compact without hiding anything. */
/* Height is measured, not guessed. 880px is the point at which BOTH actions — Call
   and Share my location — are fully visible before the visitor scrolls; at 760px the
   Call button was sliced by the fade. Still half the 1742px a full replica needs.
   The vh clamp is deliberate and must stay: a frame taller than the viewport traps
   the page scroll inside the phone when the cursor is over it. */
.phone{background:#E9EDEE;color:var(--text);border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;position:relative;display:flex;flex-direction:column;height:min(84vh,880px)}
@media (max-width:939px){.phone{height:min(70vh,560px)}}
.phone-bar{flex:0 0 auto;background:#fff;padding:12px 18px;font-size:14px;color:var(--grey-600);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--grey-200)}
.phone-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--grey)}
/* The real page is separate white cards floating on a grey ground, not one slab. */
/* flex-column with flex:0 0 auto children, NOT grid. The cards carry overflow:hidden
   for their rounded corners, and overflow other than visible zeroes an element's
   automatic minimum size — so inside a definite-height grid the tracks crushed the
   cards (482px of content reporting as 127px) instead of overflowing, and the frame
   never scrolled. flex-shrink:0 is what makes the content keep its real height. */
.phone-screen{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}
.phone-screen > *{flex:0 0 auto}
/* Fade pinned to the FRAME, not the content — inside the scroller it would scroll
   away and stop signalling that there is more below. */
.phone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(to bottom,rgba(233,237,238,0),rgba(233,237,238,.96));pointer-events:none;border-radius:0 0 26px 26px}
.phone-brand{display:flex;justify-content:center;padding:6px 0 2px}
.phone-brand img{width:186px;height:auto;max-width:72%;display:block}
.phone-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(11,22,40,.05),0 8px 24px rgba(11,22,40,.07)}
.phone-type{background:var(--navy);color:#fff;padding:20px 22px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:18px}
.phone-photo-wrap{padding:18px 22px 14px}
.phone-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block}
.phone-name{font-family:var(--font-display);font-size:23px;font-weight:800;text-align:center;color:#0B1628;padding:2px 22px 14px}
.phone-contact{padding:18px 20px}
.phone-ctitle{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.35;color:#0B1628;margin-bottom:14px}
.phone-actions{display:grid;gap:11px}
.phone-btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;border-radius:999px;font-weight:600;font-family:var(--font-display);font-size:16px;text-align:center;line-height:1.3;padding:0 14px}
.phone-btn.call{background:#0B1628;color:#fff}
.phone-btn.loc{background:#fff;color:var(--navy);border:1px solid #D9DEDC}
.phone-btn.send{background:var(--navy);color:#fff;min-height:50px;font-size:16.5px;margin-top:14px}
.phone-msg-lead{color:var(--grey-600);font-size:13.5px;margin:16px 0 9px}
/* Inert stand-ins for the real inputs — the mock must not look interactive. */
.phone-field{display:block;border:1px solid #D9DEDC;border-radius:8px;padding:11px 14px;color:#98A2B3;font-size:14.5px;line-height:1.45;margin-bottom:10px}
.phone-field.tall{min-height:60px}
.phone-note{background:rgba(11,45,92,.07);color:#0A2447;border-radius:8px;padding:9px 11px;font-size:13px;line-height:1.45;margin-bottom:11px}
.phone-check{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;color:#0B1628}
.phone-tick{flex:0 0 16px;width:16px;height:16px;border-radius:3px;background:var(--navy);color:#fff;font-size:11px;line-height:16px;text-align:center;margin-top:2px}
.phone-details{padding:4px 20px 18px}
.phone-row{border-top:1px solid var(--grey-200);padding:13px 0}
.phone-row:first-child{border-top:0}
.phone-row dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#6B7775;font-weight:600;margin-bottom:4px}
.phone-row dd{margin:0;font-size:16.5px;line-height:1.45;color:#0B1628}
.phone-row dd.tel{color:var(--navy);font-weight:600}
.phone-cap{text-align:center;color:#8FA5C2;font-size:15px;margin-top:18px}
/* .btn is inline-flex above 560px, which margin:auto cannot centre — so this is a
   block-level flex sized to its content, with auto inline margins. Declared after
   .btn-sm so it wins the specificity tie on source order. */
.phone-cta{display:flex;width:fit-content;max-width:100%;margin:14px auto 0}
@media (max-width:559px){.phone-cta{width:100%}}

/* ---------- control ---------- */
.control-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));list-style:none}
.control-grid li{border:1px solid var(--grey-200);border-radius:var(--radius);padding:24px;background:#fff;box-shadow:var(--shadow-sm)}
.pill{display:inline-flex;align-items:center;font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.pill-always{background:var(--blue-wash);color:var(--navy)}
.pill-lost{background:var(--amber-wash);color:var(--amber-ink)}
.pill-hidden{background:var(--grey-100);color:var(--grey-600)}
.control-grid h3{font-size:1.08rem;font-weight:600;margin-bottom:8px;color:var(--navy)}
.control-grid p{font-size:16.5px;color:var(--text-soft);line-height:1.55}

/* ---------- bands ---------- */
.bands{background:var(--paper)}
.band-lay{display:grid;gap:clamp(24px,3vw,40px);align-items:stretch}
@media (min-width:940px){.band-lay{grid-template-columns:1fr 1fr}}
.band-figure{display:flex}
.band-figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;height:100%;object-fit:cover;object-position:center 46%;min-height:280px}
.band-list{list-style:none;display:grid;gap:16px}
.band-list li{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius);padding:22px 24px}
.band-list h3{font-size:1.14rem;font-weight:600;margin-bottom:7px;color:var(--navy)}
.band-list p{font-size:16.5px;color:var(--text-soft);line-height:1.55}

/* ---------- pricing ---------- */
.price{background:var(--white)}
.price-lay{display:grid;gap:20px;align-items:stretch}
@media (min-width:900px){.price-lay{grid-template-columns:1.05fr 1fr}}
/* Two plans side by side, equal width so neither is visually the "real" one —
   For Life is a calmer choice, not an upsell, so it gets no highlight ring. */
.price-two{display:grid;gap:20px;align-items:stretch;margin-bottom:20px}
@media (min-width:900px){.price-two{grid-template-columns:1fr 1fr}}
.price-card{
  background:var(--navy);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,40px);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
}
/* The renew/registered line sits on the floor of both cards so the two bodies
   line up even when one list is a bullet longer than the other. */
.price-card .price-renew{margin-top:auto}
.plan-name{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--blue);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.plan-flag{
  font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);background:var(--blue);
  padding:5px 11px;border-radius:999px;
}
.price-card-life{background:var(--navy-deep)}
/* Amber, not navy: this is a caveat and must read as one rather than blending
   into the brand furniture. Full width under both cards so it cannot be missed. */
.price-prelaunch{
  background:var(--amber-wash);border:1px solid var(--amber-line);
  border-radius:var(--radius);padding:20px 24px;margin-bottom:20px;
}
.price-prelaunch p{color:var(--amber-ink);font-size:17px;line-height:1.6;margin:0}
.price-prelaunch strong{font-family:var(--font-display);font-weight:600}
.price-fig{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.price-fig .amount{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);line-height:1;letter-spacing:-.02em}
.price-fig .unit{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--blue)}
.price-card .sub{color:#B7C9E0;font-size:1.05rem;margin-bottom:26px}
.price-inc{list-style:none;display:grid;gap:12px;margin-bottom:28px}
.price-inc li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:#E4ECF7}
.price-inc svg{width:20px;height:20px;flex:0 0 20px;color:var(--blue);margin-top:4px}
.price-renew{
  border-top:1px solid rgba(255,255,255,.16);padding-top:22px;
  font-size:17px;color:#B7C9E0;
}
.price-renew strong{color:#fff;font-family:var(--font-display);font-weight:600}
/* Now a full-width row beneath both plan cards rather than a side column, so it
   needs its own two-up at width or it becomes one very tall stripe. */
.price-side{display:grid;gap:20px;align-content:start}
@media (min-width:900px){.price-side{grid-template-columns:1fr 1fr}}
.price-note{
  background:var(--blue-wash);border:1px solid var(--blue-line);
  border-radius:var(--radius);padding:26px 28px;
}
.price-note h3{font-size:1.14rem;font-weight:600;color:var(--navy);margin-bottom:10px}
.price-note p{font-size:17px;color:var(--text-soft);line-height:1.6}
.price-extra{border:1px solid var(--grey-200);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm)}
.price-extra h3{font-size:1.14rem;font-weight:600;color:var(--navy);margin-bottom:10px}
.price-extra p{font-size:17px;color:var(--text-soft);line-height:1.6}

/* ---------- story ---------- */
.story{background:var(--blue-wash)}
/* Full width, no measure cap. */
/* Deliberately NOT full width. This is a personal quote, not a section intro —
   it reads better pulled in with air either side, and at a smaller size. */
.story blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.08rem,1.75vw,1.4rem);font-weight:500;line-height:1.5;color:var(--navy)}
.story-in{display:grid;gap:26px;align-items:center;max-width:880px;margin-inline:auto}
@media (min-width:820px){
  .story-in{grid-template-columns:auto 1fr;gap:36px;padding-inline:clamp(0px,3vw,48px)}
}
.story-mark{width:78px;height:78px}
.story cite{display:block;margin-top:20px;font-style:normal;font-family:var(--font-body);font-size:17px;color:var(--grey-600);font-weight:500}

/* ---------- cta ---------- */
.cta{background:var(--navy);color:#fff;text-align:center}
.cta h2{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:600;margin-bottom:18px}
.cta p{color:#B7C9E0;font-size:1.16rem;max-width:56ch;margin-inline:auto;margin-bottom:32px}
.cta-actions{display:flex;flex-direction:column;gap:12px}
@media (min-width:560px){.cta-actions{flex-direction:row;justify-content:center;gap:14px}}
.cta-small{color:#8FA5C2;font-size:16px;margin-top:22px}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:14px}
details{border:1px solid var(--grey-200);border-radius:var(--radius);background:#fff;overflow:hidden}
details[open]{border-color:var(--blue);box-shadow:var(--shadow-sm)}
summary{
  cursor:pointer;list-style:none;padding:22px 24px;min-height:48px;
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.7rem;color:var(--blue-mid);font-weight:400;line-height:1;flex:0 0 auto}
details[open] summary::after{content:"\2212"}
summary:hover{background:var(--grey-100)}
.faq-a{padding:0 24px 24px;color:var(--text-soft);font-size:17.5px}

/* Questions section centred on the page. The accordion rows keep their text
   left-aligned — a centred question with a + on the right reads as broken. */
#questions .sec-head{text-align:center}
#questions .sec-head p{margin-inline:auto}
#questions .faq-list{margin-inline:auto}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-deep);color:#8FA5C2;padding-block:56px 36px}
/* Columns, not one long line: the brand block, then grouped links. */
.foot-top{display:grid;gap:36px;margin-bottom:38px}
@media (min-width:760px){.foot-top{grid-template-columns:1.4fr 1fr 1fr;gap:48px}}
.foot-brand img{height:52px;width:auto;margin-bottom:18px}
.foot-brand p{color:#8FA5C2;font-size:17px;max-width:38ch}
.foot-col h4{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;margin-bottom:10px}
.foot-links{display:grid;gap:2px;list-style:none}
.foot-links a{color:#B7C9E0;text-decoration:none;font-size:17px;display:flex;min-height:44px;align-items:center}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-social{display:flex;gap:12px;margin-top:20px}
.foot-social a{
  display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:background .15s ease,border-color .15s ease;
}
.foot-social a:hover{background:var(--blue);border-color:var(--blue);color:var(--navy-deep)}
.foot-social svg{width:22px;height:22px}
.foot-handle{color:#8FA5C2;font-size:15.5px;margin-top:12px}
.foot-base{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:15.5px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.foot-base a{color:#B7C9E0}

/* ---------- legal / content pages ---------- */
.doc{padding-block:clamp(44px,6vw,76px)}
.doc-head{margin-bottom:36px}
.doc-head h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:600;color:var(--navy);margin-bottom:12px}
.doc-head .updated{color:var(--grey-600);font-size:16px}
/* Full width, matching the landing page's 1152px content column. It was 74ch (887px),
   which made the legal pages visibly narrower than the home page. Long-form text this
   wide is a long line, so the type size and leading below carry the readability rather
   than a measure cap. */
.doc-body{max-width:none}
.doc-body h2{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:600;color:var(--navy);margin:38px 0 12px}
.doc-body h3{font-size:1.1rem;font-weight:600;color:var(--navy);margin:26px 0 8px}
.doc-body p,.doc-body li{color:var(--text-soft);font-size:17.5px;line-height:1.7}
.doc-body ul{list-style:disc;padding-left:22px;margin:0 0 1.1em}
.doc-body li{margin-bottom:8px}
.doc-body strong{color:var(--text)}
.doc-body a{color:var(--link)}
.doc-toc{background:var(--blue-wash);border:1px solid var(--blue-line);border-radius:var(--radius);padding:22px 26px;margin-bottom:34px}
.doc-toc h2{margin:0 0 10px;font-size:1.05rem}
.doc-toc ul{list-style:none;padding:0;display:grid;gap:4px;margin:0}
.doc-toc a{display:inline-flex;min-height:40px;align-items:center;font-size:17px;text-decoration:none}
.doc-toc a:hover{text-decoration:underline}
.callout{background:var(--blue-wash);border:1px solid var(--blue-line);border-radius:var(--radius);padding:20px 24px;margin:24px 0}
.callout p{margin:0;color:var(--navy)}

/* ---------- cookie consent ---------- */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:#fff;border-top:3px solid var(--navy);
  box-shadow:0 -12px 44px rgba(11,45,92,.22);
  padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom));
}
.cc[hidden]{display:none}
/* Boxed to the same 1280 column as the rest of the site, so it reads as part
   of the page rather than a browser artefact stuck to the bottom. */
.cc-in{max-width:1280px;margin-inline:auto;display:grid;gap:18px}
@media (min-width:920px){.cc-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}}
.cc-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--navy);margin-bottom:6px;
}
.cc-title svg{width:22px;height:22px;flex:0 0 22px;color:var(--blue-mid)}
.cc p{margin:0;font-size:16.5px;color:var(--text-soft);line-height:1.6;max-width:78ch}
.cc a{color:var(--link)}
.cc-actions{display:grid;gap:12px}
@media (min-width:520px){.cc-actions{grid-auto-flow:column;gap:14px}}
.cc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 30px;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1;
  cursor:pointer;white-space:nowrap;appearance:none;-webkit-appearance:none;
  border:2px solid var(--grey-200);background:#fff;color:var(--navy);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.cc-btn:hover{border-color:var(--navy);background:var(--grey-100)}
.cc-btn.accept{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.cc-btn.accept:hover{background:var(--navy-soft);border-color:var(--navy-soft);transform:translateY(-1px)}

/* ---------- contact form ---------- */
/* Off-white ground so the white card reads as a distinct surface sitting on it.
   The section above (#questions) is plain white, so this also gives the bottom of
   the page a visible edge instead of running straight into the footer. */
#contact{background:var(--paper)}
/* align-items:stretch (the default) is what makes the two columns equal height —
   NOT a fixed height, which would break the moment the copy changed. Both children
   then fill the row set by whichever is naturally taller. */
.contact-lay{display:grid;gap:clamp(28px,4vw,52px);align-items:stretch}
@media (min-width:900px){.contact-lay{grid-template-columns:1fr 1fr}}
.contact-intro{display:flex;flex-direction:column}
.contact-intro h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;color:var(--navy);margin-bottom:14px}
/* p.contact-lede, not .contact-lede: the rule below it is `.contact-lay
   .contact-intro p` at (0,2,1), which outranks a two-class (0,2,0) selector and was
   pulling the lede back to inherit. Adding the element makes this (0,3,1). */
.contact-lay .contact-intro p.contact-lede{color:var(--text-soft);font-size:1.28rem;line-height:1.6;margin-bottom:22px}
/* Two-class: /contact renders this same block inside .doc-body, whose .doc-body p
   is (0,1,1) and would otherwise reset the copy to 17.5px on that page only. */
.contact-lay .contact-intro p{color:var(--text-soft);font-size:inherit;line-height:1.7}
/* The card is a raised white surface on the off-white ground. Column-flex with the
   form stretching means a short intro column cannot leave the card half-empty —
   the fields and the button distribute down its full height. */
.contact-card{
  background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;
}
.contact-card .contact-form{margin-block:0;flex:1 1 auto}
.contact-form{display:grid;gap:16px;margin-block:18px;align-content:start}
.cf-row{display:grid;gap:16px;align-items:end}
@media (min-width:620px){.cf-row{grid-template-columns:1fr 1fr}}
/* THE 52px-vs-69px BUG. .cf-label was a grid and .cf-opt became its OWN row, so the
   name label had three rows and the email label two. Both label boxes stretched to the
   row height, and the email input absorbed the 17px of spare space. Three things now
   make divergence impossible: the optional tag is inline so both labels are one line;
   align-content:start stops any row stretching; and .cf-row aligns to the END so even
   if a label DOES wrap at a narrow width the inputs still sit on the same baseline. */
.cf-label{display:grid;gap:7px;align-content:start;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--navy)}
/* The label text is now wrapped in .cf-labeltext. That matters: a direct child of a
   grid container is BLOCKIFIED, so `display:inline` on .cf-opt could never take effect
   while its parent was the grid — "(optional)" sat on its own line no matter what the
   rule said. Inside a plain block wrapper it is inline the way it reads. */
.cf-labeltext{display:block}
.cf-opt{font-family:var(--font-body);font-weight:400;color:var(--grey-600)}
.cf-input{
  width:100%;min-height:52px;padding:12px 15px;border:1px solid var(--grey-200);
  border-radius:var(--radius-sm);font-family:var(--font-body);font-size:17px;
  color:var(--text);background:#fff;
}
.cf-input:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--navy)}
textarea.cf-input{min-height:132px;line-height:1.55;resize:vertical}
.cf-note{color:var(--grey-600);font-size:15px;line-height:1.55;margin:0}
/* Honeypot. Off-screen rather than display:none — some bots skip display:none
   fields, and this one only works if a bot can see it and a human cannot. */
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-address{font-style:normal;color:var(--text-soft);font-size:16.5px;line-height:1.7;margin-top:6px}
.cf-address strong{color:var(--navy)}

/* Footer identity: three short lines rather than one long sentence — brand, then
   the trading address, then the small print. */
.foot-id{line-height:1.75}
.foot-id strong{font-family:var(--font-display);font-weight:600}
.foot-id-small{opacity:.82;font-size:.94em}


/* "Built by CREATE" — the canonical CREATE footer credit (_brain/reference/create-footer-credit.md).
   In-house product sites say "Built by" instead of "Site by" (Dom, 14 Sep 2026); mark, wordmark,
   size, spacing and baseline are the canonical form, unchanged.
   Kept LAST in this stylesheet on purpose: at equal specificity source order decides, and the
   footer's own `a:hover` would otherwise recolour the credit. */
.ftr-credit{display:inline-flex;align-items:baseline;gap:10px;color:inherit}
.foot-base .ftr-credit a{display:inline-flex;align-items:baseline;gap:8px;color:#79B949;padding-block:9px;transition:opacity .3s ease}
.foot-base .ftr-credit a:hover{color:#79B949;opacity:.72;text-decoration:none}
.ftr-credit .create-mark{height:23px;width:auto;flex:none;color:#79B949}
.ftr-credit b{font-family:"Barlow Condensed","Inter",sans-serif;font-weight:800;font-size:1.28rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#79B949}