:root{
    --forest: #17513A;
    --forest-deep: #0E3527;
    --mint: #35A873;
    --mint-bright: #4FCB90;
    --cream: #F7F5EE;
    --paper: #FFFFFF;
    --ink: #16201B;
    --ink-soft: #4B584F;
    --gold: #C6A85C;
    --rule: #DDE3D9;
    --radius: 14px;
    /* Spectral is a working serif built for screen reading, not a decorative
       one — sober, slightly narrow, low contrast. It reads as document rather
       than boutique, which is the register this service needs. Public Sans
       (the US government design system's face) carries the same official,
       unshowy tone in the body, and Plex Mono marks the evidence labels. */
    --serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --sans: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;
  }
  *{ box-sizing:border-box; }
  html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
  }
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased;
    /* `hidden` on one axis forces the other to `auto`, which turns body into a
       scroll container and throws off anchor landings on mobile Safari.
       `clip` suppresses the sideways overflow without that side effect; the
       `hidden` above it is the fallback for browsers that lack `clip`. */
    overflow-x:hidden; overflow-x:clip;
    -webkit-tap-highlight-color:rgba(53,168,115,.15);
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  /* Announcement bar */
  .announce{
    background:var(--forest-deep); color:var(--cream);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    /* A single-line strip does not need the body's 1.55 leading — that alone
       was 18.6px of the old 36.6px bar. 1.3 plus 6px of padding brings it to
       27px, slim enough to read as a strip above the header rather than as a
       second band competing with it. The phone rules below restate their own
       leading and padding, so this only moves the desktop bar. */
    line-height:1.3; text-align:center; padding:6px 12px;
  }
  .announce .hl{ color:var(--mint-bright); }
  .mailto{ color:var(--forest); font-weight:600; }
  /* short version on phones, full sentence on desktop */
  .a-short{ display:none; }

  /* Header */
  header{
    position:sticky; top:0; z-index:50; background:var(--cream);
    border-bottom:1px solid var(--rule);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
  /* 600, not 800: with a real face behind it the heavier cut reads as loud,
     and this brand's whole promise is discretion. Slight negative tracking
     because serif wordmarks set at display size letterspace loose by default. */
  .logo{ display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:600; letter-spacing:-.015em; font-size:1.55rem; color:var(--forest-deep); }
  .logo .mark{ width:32px; height:36px; flex:none; }
  .navlinks{ display:flex; align-items:center; gap:30px; font-size:14px; font-weight:500; color:var(--ink-soft); margin-left:auto; margin-right:60px; }
  .navlinks a:hover{ color:var(--forest-deep); }
  .navcta{ display:flex; align-items:center; gap:16px; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 22px; border-radius:999px; font-weight:600; font-size:14px;
    border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{ background:var(--mint); color:#fff; box-shadow:0 6px 16px rgba(53,168,115,.28); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(53,168,115,.36); }
  .btn-ghost{ color:var(--forest-deep); border-color:var(--rule); background:transparent; }
  .btn-ghost:hover{ border-color:var(--forest); }

  /* Mobile menu */
  .navtoggle{
    display:none; background:transparent; border:1px solid var(--rule); border-radius:10px;
    padding:8px 10px; cursor:pointer; color:var(--forest-deep); line-height:0;
  }
  .navtoggle svg{ width:22px; height:22px; }
  @media (max-width:860px){
    .navtoggle{ display:inline-flex; align-items:center; justify-content:center; }
    .navlinks{
      display:none; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:stretch; gap:0; margin:0;
      background:var(--cream); border-bottom:1px solid var(--rule); padding:8px 0;
      box-shadow:0 14px 30px -18px rgba(23,81,58,.4);
    }
    .navlinks.open{ display:flex; }
    .navlinks a{ padding:13px 24px; }
    .navlinks a:hover{ background:rgba(53,168,115,.08); }
    .nav{ position:relative; flex-wrap:wrap; }
    .navcta .btn{ padding:10px 16px; font-size:14px; }
  }
  @media (max-width:520px){
    .logo{ font-size:1.25rem; gap:9px; }
    .logo .mark{ width:26px; height:29px; }
    .navcta .btn{ padding:9px 13px; font-size:13px; }
  }

  /* The header row is logo + CTA + hamburger, and it needs 370px to stay on
     one line. Below that the CTA and toggle drop under the brand name and the
     header doubles from 45px to 89px — right at the top of the page, on the
     most common Android width. Same long/short swap the announce bar uses,
     plus tighter spacing, keeps it on one row down to 320px. */
  .b-short{ display:none; }
  @media (max-width:400px){
    .b-long{ display:none; }
    .b-short{ display:inline; }
    .navcta{ gap:12px; }
    .navcta .btn{ padding:9px 12px; }
  }

  /* Wherever the hamburger nav takes over, the header is brand + toggle only.
     Drops the scan CTA out of the bar; the ghost "Home" link on the legal and
     scan pages stays, since that one is navigation rather than a call to
     action. */
  @media (max-width:860px){
    .navcta .btn-primary{ display:none; }
  }
  @media (max-width:340px){
    .logo{ font-size:1.15rem; }
  }

  /* Hero */
  .hero{ padding:76px 0 60px; position:relative; overflow:hidden; }
  /* Top-aligned, not centred: the video's top edge lines up with the first
     line of the h1. The offset is the eyebrow's own height plus its 22px
     margin, so the video starts where the headline starts rather than where
     the column starts. The eyebrow is one line (33px) once the column reaches
     556px — a 1164px viewport — and two lines (51px) below that, hence the
     two values. */
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
  .hero-grid > .card{ margin-top:73px; }
  @media (min-width:1164px){ .hero-grid > .card{ margin-top:55px; } }
  @media (max-width:940px){
    .hero-grid{ grid-template-columns:1fr; }
    /* stacked, so there is no headline to align to */
    .hero-grid > .card{ margin-top:0; }
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
    /* .04em, not .1em: Plex Mono is wider than the monospace fallback this
       used before the webfonts were wired up, and at .1em the 66-character
       label no longer fits the hero column on one line. .05em clears the
       565px column by a single pixel, so this takes the next step down. */
    letter-spacing:.04em; text-transform:uppercase; color:var(--forest); background:rgba(53,168,115,.1);
    border:1px solid rgba(53,168,115,.3); padding:6px 12px; border-radius:999px; margin-bottom:22px;
  }
  .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--mint); }
  h1{
    font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.6vw,38px);
    line-height:1.18; letter-spacing:-.01em; margin:0 0 22px; color:var(--forest-deep);
    text-wrap:balance;
  }
  h1 em{ font-style:italic; color:var(--mint); }
  .hero p.lead{ font-size:18px; color:var(--ink-soft); max-width:520px; margin:0 0 28px; }
  /* Hero lead, phones only.
     On desktop the four paragraphs sit beside the video and share its height.
     On a phone the video stacks above them, so the same copy becomes an
     uninterrupted run of text between the headline and the first button.
     Two pieces carry no fact the rest of the hero doesn't already state — the
     "clear, private way to stay informed" line, and the "where women share
     dating experiences" clause, which the first paragraph has already
     explained. Hiding them leaves three tighter paragraphs on a phone and
     changes nothing above 640. */
  @media (max-width:640px){
    .desk-only{ display:none; }
  }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
  /* A wrapping flex row packs each line independently, so the four items came
     out 237/224 on the first row and 209/218 on the second — the second
     column's icons landed 28px apart instead of on one axis, and between 941
     and 1050 the row broke 1/2/1. A fixed two-column grid puts the fourth
     item under the second one and holds that at every width. Capped at 520
     so the columns stay a readable measure apart once the hero goes
     full-width, rather than drifting to opposite edges. */
  .trustrow{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:22px; row-gap:14px; max-width:520px;
    font-size:14px; color:var(--ink-soft);
  }
  /* flex-start + 3px, not center: 3px is exactly the offset centring gives a
     16px icon in a 21.7px line box, so single-line items look identical —
     but where a label runs to two lines the icon stays pinned to the first
     one instead of floating to the middle and breaking the row's axis. */
  .trustrow .item{ display:flex; align-items:flex-start; gap:7px; }
  .trustrow svg{ width:16px; height:16px; color:var(--mint); flex:none; margin-top:3px; }
  /* Once the hero splits into two columns at 941px the trust block only gets
     ~475px until about 1050px — 21px short of what the longest label needs
     beside its icon. Half a point off the type and a tighter column gap keeps
     it on one line rather than wrapping just in that band. */
  @media (min-width:941px) and (max-width:1080px){
    .trustrow{ font-size:13px; column-gap:16px; }
  }

  /* ---------- Hero explainer video ----------
     Three states carried on .vplayer: is-idle (poster + play), is-playing
     (native controls, sound prompt until used), is-ended (replay). The states
     drive visibility here rather than inline styles in the script, so the
     look stays in one place. */
  .vplayer{ position:relative; line-height:0; border-radius:20px; overflow:hidden; background:var(--forest-deep); }
  .vplayer video{ display:block; width:100%; height:auto; border-radius:20px; }

  /* Big centre button: play when idle, replay when finished. */
  .v-big{
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:linear-gradient(180deg, rgba(14,53,39,.10) 0%, rgba(14,53,39,.55) 100%);
    border:0; cursor:pointer; padding:0; color:var(--cream);
    font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em;
    transition:background .2s ease;
  }
  .v-big:hover{ background:linear-gradient(180deg, rgba(14,53,39,.18) 0%, rgba(14,53,39,.62) 100%); }
  .v-ico{
    width:74px; height:74px; border-radius:50%; background:var(--mint);
    display:flex; align-items:center; justify-content:center; flex:none;
    box-shadow:0 10px 30px -8px rgba(14,53,39,.65);
    transition:transform .18s ease, background .18s ease;
  }
  .v-big:hover .v-ico{ transform:scale(1.06); background:var(--mint-bright); }
  .v-ico svg{ width:34px; height:34px; color:#fff; }
  /* the play triangle is visually left-heavy; nudge it onto the optical centre */
  .v-ico .i-play{ margin-left:4px; }
  .v-ico .i-replay{ display:none; width:30px; height:30px; }
  .v-lbl{ text-shadow:0 1px 12px rgba(14,53,39,.6); }

  /* Sound prompt — only meaningful while playing muted */
  .v-sound{
    position:absolute; left:14px; bottom:56px; z-index:2;
    display:none; align-items:center; gap:8px;
    padding:9px 14px; border-radius:999px; border:1px solid rgba(247,245,238,.28);
    background:rgba(14,53,39,.82); color:var(--cream); cursor:pointer;
    font-family:var(--sans); font-size:13px; font-weight:600; line-height:1;
    backdrop-filter:blur(4px);
  }
  .v-sound:hover{ background:rgba(14,53,39,.94); border-color:rgba(247,245,238,.5); }
  .v-sound svg{ width:16px; height:16px; flex:none; }

  .vplayer.is-playing .v-big{ display:none; }
  .vplayer.is-playing .v-sound{ display:flex; }
  /* once they have chosen, stop nagging */
  .vplayer.sound-on .v-sound{ display:none; }
  .vplayer.is-ended .v-big{ display:flex; }
  .vplayer.is-ended .v-sound{ display:none; }
  .vplayer.is-ended .i-play{ display:none; }
  .vplayer.is-ended .i-replay{ display:block; }

  /* Same 44px comfortable-tap minimum the buttons elsewhere keep to — padding
     alone left this at 34px. */
  @media (max-width:860px){
    .v-sound{ min-height:44px; padding:0 15px; }
  }
  @media (max-width:640px){
    .v-ico{ width:64px; height:64px; }
    .v-ico svg{ width:29px; height:29px; }
    .v-lbl{ font-size:14px; }
    /* 13px floor, and clear of the native control bar on a short screen */
    .v-sound{ font-size:13px; left:10px; bottom:50px; }
  }
  @media (prefers-reduced-motion: reduce){
    .v-big, .v-ico{ transition:none; }
    .v-big:hover .v-ico{ transform:none; }
  }

  /* Case review card */
  .card{
    background:var(--paper); border:1px solid var(--rule); border-radius:20px;
    padding:30px; box-shadow:0 20px 50px -20px rgba(23,81,58,.25);
  }
  .card h3{ font-family:var(--serif); font-size:22px; margin:0 0 6px; color:var(--forest-deep); }
  .card p.sub{ color:var(--ink-soft); font-size:14px; margin:0 0 20px; }
  .platform-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .chip{
    padding:9px 16px; border-radius:999px; border:1.5px solid var(--rule); font-size:14px;
    font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
  }
  .chip.active{ background:var(--forest-deep); border-color:var(--forest-deep); color:#fff; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .field input, .field select, .field textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--rule);
    font-size:14px; font-family:var(--sans); background:var(--cream); color:var(--ink);
    resize:vertical;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--mint); outline-offset:1px; }
  .field input.invalid, .field textarea.invalid{ border-color:#D9544C; background:#FDF3F2; }
  .field .err{ display:none; font-size:12px; color:#B33B33; margin-top:5px; }
  .field.showerr .err{ display:block; }
  .formstatus{
    display:none; margin-top:14px; padding:12px 14px; border-radius:10px; font-size:14px;
    background:rgba(53,168,115,.12); border:1px solid rgba(53,168,115,.35); color:var(--forest);
  }
  .formstatus.show{ display:block; }
  /* Failure has to look different from success — the same green panel carrying
     "something went wrong" still reads as sent at a glance. */
  .formstatus.error{ background:rgba(217,84,76,.1); border-color:rgba(217,84,76,.4); color:#B33B33; }
  /* Honeypot: a real field hidden from people that bots fill in. Positioned
     off-screen rather than display:none, which some bots check for. */
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .formrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px){ .formrow{ grid-template-columns:1fr; gap:0; } }
  .card .btn-primary{ width:100%; padding:14px; font-size:16px; }
  .card .microcopy{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:12px; }

  /* Gauge signature element */
  .gauge-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px; }
  .gauge-label{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

  /* Alternating section bands — white / grey down the page.
     Sections with padding-top:0 share the band of the section above them. */
  .band-w{ background:var(--paper); }
  .band-g{ background:var(--cream); }

  /* Cards take the opposite tone to the band they sit on, otherwise white
     cards disappear into a white band and only their hairline border shows. */
  .band-w .step,
  .band-w .signal,
  .band-w .tcard,
  .band-w .plan,
  .band-w .card{ background:var(--cream); }

  /* ...and form fields flip back to white so they stay legible on a cream card */
  .band-w .card .field input,
  .band-w .card .field select,
  .band-w .card .field textarea{ background:var(--paper); }


  /* Section shared */
  section.block{ padding:84px 0; }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
  .section-head .eyebrow{ margin-bottom:16px; }
  .section-head h2{ font-family:var(--serif); font-size:clamp(22px,3vw,28px); color:var(--forest-deep); margin:0 0 14px; }
  .section-head p{ color:var(--ink-soft); font-size:16px; margin:0; }

  /* How it works */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step; }
  @media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
  /* flex column + margin-top:auto on the tag keeps every tag on the same
     baseline regardless of how long each step's paragraph runs */
  .step{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:30px 26px; position:relative; display:flex; flex-direction:column; }
  .step .num{ font-family:var(--serif); font-size:38px; color:var(--mint); font-weight:600; line-height:1; margin-bottom:14px; }
  .step h3{ font-family:var(--serif); font-size:18px; margin:0 0 10px; color:var(--forest-deep); }
  .step p{ color:var(--ink-soft); font-size:14px; margin:0 0 18px; }
  .step .tag{ display:inline-block; align-self:flex-start; margin-top:auto; font-size:12px; font-family:var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--forest); background:rgba(53,168,115,.1); padding:5px 10px; border-radius:6px; }

  /* Quote */
  .quote-block{ background:var(--forest-deep); border-radius:24px; padding:52px 44px; color:var(--cream); position:relative; overflow:hidden; }
  .quote-block::before{ content:'"'; position:absolute; top:-30px; left:20px; font-family:var(--serif); font-size:11rem; color:rgba(255,255,255,.06); }
  .quote-block p{ font-family:var(--serif); font-size:22px; line-height:1.5; max-width:760px; margin:0 0 22px; position:relative; }
  .quote-block .who{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--mint-bright); }
  .quote-block .who .name{ font-weight:700; color:#fff; }

  /* Pricing plan */
  .plan-wrap{ display:flex; justify-content:center; }
  .plan{
    background:var(--paper); border:1px solid var(--rule); border-radius:20px;
    padding:36px 32px; width:100%; max-width:430px; text-align:center;
    box-shadow:0 20px 50px -24px rgba(23,81,58,.28);
  }
  .plan h3{ font-family:var(--serif); font-size:22px; margin:0 0 6px; color:var(--forest-deep); }
  .plan .plan-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 24px; }
  .plan .price{ display:flex; align-items:baseline; justify-content:center; gap:9px; }
  .plan .price .amount{ font-family:var(--serif); font-size:54px; font-weight:600; color:var(--forest-deep); line-height:1; }
  .plan .price .term{ font-size:16px; color:var(--ink-soft); font-weight:600; }
  .plan .billnote{
    font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-soft); margin:12px 0 0;
  }
  .plan ul{
    list-style:none; margin:26px 0; padding:26px 0 0; border-top:1px solid var(--rule);
    display:flex; flex-direction:column; gap:13px; text-align:left;
  }
  .plan li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--ink); }
  .plan li svg{ width:18px; height:18px; color:var(--mint); flex:none; margin-top:3px; }
  .plan .btn-primary{ width:100%; padding:15px; font-size:16px; }
  .plan .guarantee{ font-size:12px; color:var(--ink-soft); margin:14px 0 0; }

  /* a heading for a second block inside an existing section */
  .subhead{
    text-align:center; max-width:640px; margin:64px auto 34px;
    padding-top:44px; border-top:1px solid var(--rule);
  }
  .subhead h3{ font-family:var(--serif); font-size:clamp(22px,3vw,28px); color:var(--forest-deep); margin:0 0 14px; }
  .subhead p{ color:var(--ink-soft); font-size:16px; margin:0; }
  @media (max-width:640px){
    .subhead{ margin:44px auto 26px; padding-top:34px; }
  }

  /* Recognition grid — 'does this sound like you' cards */
  .signals{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:760px){ .signals{ grid-template-columns:1fr; } }
  .signal{
    display:flex; gap:15px; background:var(--paper); border:1px solid var(--rule);
    border-radius:var(--radius); padding:22px 24px;
  }
  .signal .sicon{
    width:26px; height:26px; border-radius:50%; background:rgba(53,168,115,.14);
    display:flex; align-items:center; justify-content:center; flex:none;
    color:var(--forest); margin-top:3px;
  }
  .signal .sicon svg{ width:14px; height:14px; }
  .signal h3{ font-family:var(--serif); font-size:16px; margin:0 0 6px; color:var(--forest-deep); line-height:1.3; }
  .signal p{ color:var(--ink-soft); font-size:14px; margin:0; }

  .signal-cta{
    display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
    margin-top:22px; padding:22px 26px; border-radius:var(--radius);
    background:rgba(53,168,115,.09); border:1px solid rgba(53,168,115,.3);
  }
  .signal-cta p{ margin:0; font-size:16px; color:var(--forest-deep); font-weight:600; max-width:54ch; }
  .signal-cta .btn{ flex:none; }
  @media (max-width:640px){
    .signal{ padding:19px 20px; }
    .signal-cta{ flex-direction:column; align-items:stretch; text-align:center; gap:16px; padding:20px; }
    .signal-cta .btn{ width:100%; }
  }

  /* Testimonials grid */
  .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px){ .tgrid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:620px){ .tgrid{ grid-template-columns:1fr; } }
  .tcard{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:22px; }
  .tcard p{ font-size:14px; color:var(--ink); margin:0 0 16px; }
  .tcard .meta{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft); }
  .tcard .badge{ background:rgba(53,168,115,.12); color:var(--forest); padding:3px 9px; border-radius:6px; font-weight:600; font-size:12px; }

  /* FAQ */
  .faq-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; align-items:start; }
  /* single column must stay narrow, or the measure balloons past 110 characters */
  @media (max-width:860px){ .faq-list{ grid-template-columns:1fr; gap:0; max-width:600px; margin:0 auto; } }
  .faq-item{ border-bottom:1px solid var(--rule); padding:22px 0; }
  /* a real button so the keyboard can reach it — styled to look like the old div */
  .faq-q{
    display:flex; justify-content:space-between; align-items:center; width:100%;
    background:none; border:0; padding:0; margin:0; text-align:left; cursor:pointer;
    font-family:var(--serif); font-weight:600; font-size:16px; color:var(--forest-deep);
    line-height:1.4;
  }
  .faq-q:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:4px; }
  .faq-q .plus{ font-size:22px; color:var(--mint); transition:transform .2s ease; flex:none; margin-left:16px; line-height:1; }
  .faq-item.open .plus{ transform:rotate(45deg); }
  /* animates to the answer's real height — a fixed max-height clipped longer answers */
  .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; color:var(--ink-soft); font-size:16px; }
  .faq-a > *{ overflow:hidden; min-height:0; margin:0; }
  .faq-item.open .faq-a{ grid-template-rows:1fr; margin-top:12px; }

  /* CTA banner */
  .cta-banner{
    background:linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
    border-radius:24px; padding:56px 44px; text-align:center; color:#fff;
  }
  .cta-banner h2{ font-family:var(--serif); font-size:clamp(22px,3vw,28px); margin:0 0 14px; }
  .cta-banner p{ color:rgba(255,255,255,.8); margin:0 0 28px; }
  .cta-banner .btn-primary{ background:var(--mint-bright); color:var(--forest-deep); font-size:16px; padding:14px 30px; }

  /* Footer */
  footer{ background:var(--forest-deep); color:rgba(255,255,255,.75); padding:38px 0; margin-top:20px; }
  footer .logo{ color:#fff; }
  /* one horizontal band: brand left, disclaimer centre, links right */
  .fbar{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
  .fbrand{ display:flex; flex-direction:column; gap:10px; flex:none; }
  .fcopy{ font-size:12px; color:rgba(255,255,255,.45); white-space:nowrap; }
  /* the centre column takes the room freed up by the shorter link list */
  .fbar .disclosure{
    flex:1; min-width:0; max-width:560px; margin:0; text-align:center;
    font-size:12px; line-height:1.7; color:rgba(255,255,255,.45);
  }
  .fright{ display:flex; flex-direction:column; align-items:flex-end; gap:11px; flex:none; }
  .flinks{ display:flex; gap:28px; font-size:14px; white-space:nowrap; }
  .flinks a{ color:rgba(255,255,255,.82); }
  .flinks a:hover{ color:var(--mint-bright); }
  .fregion{ font-size:12px; color:rgba(255,255,255,.45); white-space:nowrap; }

  @media (max-width:940px){
    .fbar{ flex-direction:column; text-align:center; gap:22px; }
    .fbrand, .fright{ align-items:center; }
    .fbar .disclosure{ max-width:52ch; }  /* keep the line length readable when stacked */
    .flinks{ flex-wrap:wrap; justify-content:center; gap:6px 22px; }
    .flinks a{ padding:9px 4px; }
  }

  ::selection{ background:var(--mint); color:#fff; }
  :focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

  /* Landing on a section put its eyebrow 5px under the sticky header: the
     section's own 84px top padding minus the 78px header. 16px lifts that to
     the same ~21px of breathing room #contact gets above. */
  section[id]{ scroll-margin-top:16px; }

  /* ---------- Mobile ---------- */
  @media (max-width:860px){
    /* 16px minimum stops iOS Safari auto-zooming the page on field focus */
    .field input, .field select, .field textarea{ font-size:16px; padding:13px 14px; }
    /* Comfortable tap targets */
    .btn{ min-height:44px; }
    .flinks{ gap:4px 24px; }
    .flinks a{ display:block; padding:9px 4px; }
    /* 44px is the minimum comfortable tap target — the button reset had left these at 30px */
    .faq-q{ padding:12px 0; }
    /* inline links are text-height by default — give this one a real tap area */
    .mailto{ display:inline-block; padding:14px 0; }
    .faq-item{ padding:14px 0; }
    /* No-JS fallback only. The script at the bottom of the page takes over
       anchor scrolling on mobile — it measures the real header (45px, or ~89px
       when the logo and CTA wrap on narrow phones) and lands the section's
       eyebrow label 8px under it. These values assume the 45px header and the
       section's own 52px top padding: 45 + 8 - 52 = 1. */
    section[id]{ scroll-margin-top:1px; }
  }

  @media (max-width:640px){
    .wrap{ padding:0 18px; }
    .hero{ padding:38px 0 44px; }
    .hero-grid{ gap:34px; }
    section.block{ padding:52px 0; }
    .section-head{ margin-bottom:34px; }
    .card{ padding:22px; border-radius:16px; }
    .quote-block{ padding:32px 24px; border-radius:18px; }
    .quote-block p{ font-size:18px; margin-bottom:18px; }
    .quote-block::before{ font-size:7rem; top:-18px; left:10px; }
    .cta-banner{ padding:38px 24px; border-radius:18px; }
    .step{ padding:24px 20px; }
    .plan{ padding:28px 22px; border-radius:16px; }
    .plan .price .amount{ font-size:54px; }
    .plan ul{ margin:22px 0; padding-top:22px; gap:12px; }
    /* Long uppercase eyebrow wraps to 3 cramped lines in a pill otherwise */
    .eyebrow{ letter-spacing:.05em; padding:7px 14px; line-height:1.5; }
    .hero p.lead{ font-size:16px; }
    /* Full-width CTAs are far easier to hit with a thumb */
    .hero-ctas{ gap:10px; }
    .hero-ctas .btn{ width:100%; }
    /* 10px side padding, not 12: the longer confidentiality line needs every
       pixel of the column it can get to stay on one row at 360px. Leading is
       left to the 1.3 set on the base rule, same as the desktop bar. */
    .announce{ font-size:12px; letter-spacing:.01em; padding:6px 10px; }
  }

  /* The full sentence needs a 909px viewport to stay on one line; below that
     it wrapped to two rows and doubled the bar's height. Hand over to the
     short version there rather than at 640px. */
  @media (max-width:910px){
    .a-long{ display:none; }
    .a-short{ display:inline; }
  }

  /* ---------- How It Works, compacted for phones ----------
     Stacked, the big serif numeral takes a row to itself (38px + 14px) in
     every card. Pairing it with the heading and running the body text in the
     column beside it reads as a numbered list and gives back ~40px a card.
     Delete this block to restore the stacked layout. */
  @media (max-width:640px){
    .steps{ gap:16px; }
    .step{
      display:grid; grid-template-columns:auto 1fr;
      column-gap:14px; align-items:baseline;
      padding:20px;
    }
    .step .num{ grid-column:1; grid-row:1; font-size:30px; margin:0; }
    .step h3{ grid-column:2; grid-row:1; margin:0; }
    .step p{ grid-column:2; grid-row:2; margin:8px 0 0; }
    .step .tag{ grid-column:2; grid-row:3; margin:12px 0 0; justify-self:start; }
  }

  @media (max-width:560px){
    /* 2x2 instead of a 4-item stack keeps the trust row compact */
    .trustrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
  }

  @media (max-width:359px){
    .trustrow{ grid-template-columns:1fr; gap:9px; }
  }

  /* ---------- Mobile legibility & tap targets ----------
     12px is fine on a desktop monitor but reads as fine print on a phone,
     and several of these carry trust copy (confidentiality, turnaround,
     guarantee) that people need to actually read. 13px across the board on
     small screens; the mono/uppercase labels keep their reduced tracking so
     they don't start wrapping at the larger size. */
  @media (max-width:640px){
    /* 12px, below the 13px floor the rest of the phone type keeps to. The
       string is 49 characters set in a fixed-width face, so it costs about
       29.6px of column per 1px of type, so the 340px of clear width at 360px
       buys 11.5 with nothing to spare — and nothing to spare loses the line
       to any sub-pixel difference in how a real device rasterises the face.
       11 leaves about 15px of slack instead. It is under the 13px floor the
       rest of the phone type keeps to, but it is set in caps: the cap height
       at 11px still runs taller than a 13px lowercase x-height, so it reads
       no smaller than the body copy does. */
    .announce{ font-size:11px; letter-spacing:normal; }
    /* 66 uppercase characters in a bordered pill. At 13px it holds two lines
       only down to a 356px viewport, so 360px cleared it by 4px and any
       narrower phone dropped to a third, cramped line. 11px moves that
       threshold to 313px — 47px of margin at 360 instead of 4. */
    .eyebrow{ font-size:11px; }
    .gauge-label{ font-size:13px; }
    .step .tag{ font-size:13px; }
    .plan .billnote{ font-size:13px; }
    .plan .guarantee{ font-size:13px; }
    .card .microcopy{ font-size:13px; }
    .field label{ font-size:13px; }
    .field .err{ font-size:13px; }
    .tcard .meta{ font-size:13px; }
    .tcard .badge{ font-size:13px; }
    .fcopy{ font-size:13px; }
    .fbar .disclosure{ font-size:13px; }
    .fregion{ font-size:13px; }
  }

  /* IBM Plex Mono runs about 9% wider than the monospace fallback the site
     used before the webfonts were wired up, which pushed the announce bar to
     two lines and the eyebrow to three at 320px. Half a point back buys the
     line return without touching either string. Must sit after the 13px block
     above, or that rule wins on source order. */
  @media (max-width:359px){
    /* 8px sides here rather than a smaller face — at 320px the column is
       worth more to this line than another half point of type is */
    .announce{ font-size:10px; padding:6px 8px; }
    /* 12px held two lines only to 315px, 5px clear of a 320px phone. 10.5
       with the tracking dropped moves that to 285px. */
    .eyebrow{ font-size:10.5px; letter-spacing:normal; }
  }

  /* The logo lockup and the footer links were 31px and 40px tall — both under
     the 44px comfortable-tap minimum. */
  @media (max-width:860px){
    .logo{ min-height:44px; }
    .flinks a{ padding:12px 4px; }
    /* icon-only button — no text to give it height, so set it explicitly */
    .navtoggle{ min-height:44px; min-width:44px; }
  }

  /* ---------- Legal pages (privacy.html, terms.html) ---------- */
  .legal{ padding:40px 0 76px; }
  .legal .wrap{ max-width:760px; }
  .legal .backlink{
    display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
    color:var(--ink-soft); margin-bottom:24px;
  }
  .legal .backlink:hover{ color:var(--forest-deep); }
  .legal .backlink svg{ width:16px; height:16px; }
  .legal h1{
    font-family:var(--serif); font-size:clamp(28px,4vw,38px); color:var(--forest-deep);
    margin:0 0 10px; line-height:1.15;
  }
  .legal .updated{
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 8px;
  }
  .legal .summary{
    background:var(--paper); border:1px solid var(--rule); border-radius:14px;
    padding:20px 22px; margin:26px 0 34px; font-size:16px; color:var(--ink-soft);
  }
  .legal .summary strong{ color:var(--ink); font-weight:600; }
  .legal .summary p + p{ margin-top:11px; }
  .legal section{ margin-bottom:32px; }
  .legal h2{
    font-family:var(--serif); font-size:18px; color:var(--forest-deep);
    margin:0 0 12px; display:flex; align-items:baseline; gap:11px;
  }
  .legal h2 span{
    font-family:var(--mono); font-size:12px; color:var(--mint); font-weight:600; flex:none;
  }
  .legal h3{ font-family:var(--sans); font-size:16px; color:var(--ink); margin:18px 0 7px; font-weight:600; }
  .legal p{ color:var(--ink-soft); font-size:16px; margin:0 0 12px; }
  .legal p:last-child{ margin-bottom:0; }
  .legal ul{ margin:0 0 12px; padding-left:20px; color:var(--ink-soft); font-size:16px; }
  .legal li{ margin-bottom:7px; }
  .legal strong{ color:var(--ink); font-weight:600; }
  .legal .caps{ text-transform:uppercase; font-size:14px; letter-spacing:.02em; }
  .legal .todo{
    background:#FFF8E5; border:1px solid #E8D9A8; border-radius:10px;
    padding:13px 15px; margin:0 0 14px; font-size:14px; color:#6B571C;
  }
  .legal .todo b{ color:#5A4813; }
  @media (max-width:640px){
    .legal{ padding:24px 0 52px; }
    .legal .summary{ padding:17px 18px; }
    /* same 13px mobile floor as the rest of the site */
    .legal .updated{ font-size:13px; }
    .legal h2 span{ font-size:13px; }
    .legal .caps{ font-size:15px; }
  }

  /* Legal-page tap targets. The back link and the inline support@ addresses
     are text-height by default; the vertical padding is transparent, so it
     buys a real tap area without moving anything on the page. */
  @media (max-width:860px){
    .legal .backlink{ padding:12px 0; }
    .legal a[href^="mailto:"]{ display:inline-block; padding:12px 0; }
  }