/* Guard against the site's Tailwind preflight (output.css loads on every page): put the browser's defaults back inside
   the questionnaire's own header, main and bottom bar. Unlayered, so it beats @layer base; zero specificity, so every rule
   below still wins. Keep it first and keep it as it is. */
:where(header.bar, main.wiz, nav.nav, header.bar *:not(svg, svg *, img), main.wiz *:not(svg, svg *, img), nav.nav *:not(svg, svg *, img)){all:revert}
:where(header.bar, main.wiz, nav.nav) *::before, :where(header.bar, main.wiz, nav.nav) *::after{all:revert}
:where(header.bar, main.wiz, nav.nav) :is(svg, img){display:inline;vertical-align:baseline;max-width:none;border-style:none}
/* The revert above also undoes the browser's hiding of [hidden] (a presentational hint, below author rules), so put it back,
   as Tailwind's preflight does. Without it the reference shows the closed "Other" fields and the empty file list. */
[hidden]{display:none!important}

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/arimo-latin.woff2) format("woff2")}
/* Veedma Women design system (artifact UUjBAw5mbgc2C7Ct2smNKh) and the women's health questionnaire prototype (WIQ1, v21), whose form
   patterns this page copies: header, progress, option rows with markers, fields, errors under the field, the sticky Continue with its fade
   and "more below" line. Light only. Type roles: Newsreader 400/500 for what the brand says (titles, options, prices, buttons, card heads);
   Arimo 400/600 for fields, labels, hints, errors, links, the order summary and small print. The wordmark is the one exception. */
:root{
  color-scheme:light only;
  --surface-sage:#f5f8ef; --card-warm:#fcfcf8; --card-line:rgba(15,42,34,.07); --hairline:#dddcd8; --hairline-warm:#e2e1d8;
  --title-green:#102f29; --text:#0f2a22; --text-card:#2c3a34; --hint:#61625d; --source:#6e6e88; --bronze:#86672f;
  --green:#1f4d36; --chip-on:#1f4636; --gold-accent:#ab874a; --gold-border:#cfae6e; --on-green-soft:#e0f5ea;
  --chip:#f1f2ec; --chip-border:#d4d6cc; --line-btn:#a3a796; --field-border:#8c9184; --error:#9b2c3f; --focus:#43593c;
  --shadow-card:0 14px 32px rgba(40,60,45,.1); --shadow-button:0 10px 22px rgba(26,66,52,.22);
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Arimo", Arial, Helvetica, sans-serif;
  --col:34rem;
  --title:max(1.5rem,calc((min(100vw, var(--col)) - 2rem) * .08));
  --gold:radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --check:var(--tick) center/.74rem no-repeat,var(--gold);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem;scroll-padding-bottom:9rem}
body{margin:0;background:var(--surface-sage);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
body.legal{scroll-padding-bottom:12rem}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Header: the site lockup on the left, Back on the right where the home header has "Sign in" (as in WIQ1) */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface-sage);background:color-mix(in srgb,var(--surface-sage) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
.bar .in{width:min(100%,var(--col));margin-inline:auto;padding:.5rem 16px;min-height:calc(44px + 1rem);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.brand{display:inline-flex;align-items:center;min-height:44px;gap:.45rem;font-weight:700;font-size:1.1rem;color:var(--green);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.brand img{display:block;width:30px;height:30px;flex:none}
.brand em{font-family:var(--display);font-variation-settings:"opsz" 48;font-style:normal;font-weight:500;font-size:1.16em;letter-spacing:-.005em;color:var(--gold-accent)}
.backlink{display:inline-flex;align-items:center;min-height:44px;padding:0 .1rem;border:0;background:none;color:var(--green);font-family:var(--body);font-weight:600;font-size:1rem;cursor:pointer;white-space:nowrap}
.backlink[hidden]{display:none!important}

/* Column; the part name in the step-card capitals over the three parts as a segmented bar (done, current filling, to come) */
.wiz{width:min(100%,var(--col));margin-inline:auto;padding:.4rem 16px 9rem}
body.legal .wiz{padding-bottom:12rem}
.prog{margin-top:.9rem}
.prog[hidden]{display:none}
.prog-row{margin:0 0 .6rem}
.part-n{display:block;min-width:0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:.85rem;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.segs i{display:block;height:6px;border-radius:999px;background:var(--hairline-warm);overflow:hidden}
.segs i[hidden]{display:none}
.segs b{display:block;height:100%;width:0;border-radius:999px;background:var(--green);transition:width .25s}

/* Screen */
.screen{margin-top:1.5rem}
h1,h2{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;color:var(--title-green);margin:0;text-wrap:pretty}
h1:focus,h2:focus{outline:none}
.hl{font-style:italic;font-weight:500;color:var(--gold-accent);white-space:nowrap}
.title{font-size:var(--title);line-height:1.1;letter-spacing:-.015em}
.rule{width:65px;height:2px;background:var(--gold-border);margin:1.1rem 0 0}
.lead{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.18rem;line-height:1.25;color:var(--text);margin:1.2rem 0 0;text-wrap:pretty}
.q{font-size:max(1.125rem, calc((min(100vw, var(--col)) - 2rem) * .059));line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.hint{font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--hint);margin:.6rem 0 0}
.opts{display:flex;flex-direction:column;gap:.55rem;margin-top:1.15rem}

/* Answer options: the home page's symptom chips as full-width rows; the marker shows one answer (circle) before she taps; picked = chip-on with the gold check */
.opt{display:flex;align-items:center;gap:.6rem;width:100%;min-height:3.1rem;padding:.68rem 1.15rem;border:1px solid var(--chip-border);border-radius:1.55rem;background:var(--chip);color:var(--text);text-align:left;cursor:pointer;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.06rem;line-height:1.25;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,color .15s}
.opt:hover{border-color:#b9bdb0}
.opt .lab{min-width:0;flex:1;text-wrap:pretty}
.opt .ex{display:block;margin-top:.22rem;font-size:.94rem;line-height:1.3;color:var(--hint)}
.opt[aria-checked="true"]{background:var(--chip-on);border-color:var(--chip-on);color:#fff}
.opt[aria-checked="true"] .ex{color:var(--on-green-soft)}
.opt .mk{flex:none;width:1.3rem;height:1.3rem;border-radius:50%;border:1.5px solid var(--field-border);background:#fff}
.opt[aria-checked="true"] .mk{border:1.2px solid #ecd9a8;background:var(--check);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.opt.bad{border-color:var(--error)}
/* the write-in field under an answer that asks for it */
.otherbox{margin:.15rem 0 .25rem}
.otherbox[hidden]{display:none}
.otherbox .lbl{margin:.35rem 0 .45rem}
/* the two ways in on step 1, a size up from the questionnaire's rows; the marker and the name share the first row and the line under
   them runs the card's full width on one line (user, 2026-10-18), its size fitted to the card from the longest line (18.24em) */
.opt.big{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.75rem;row-gap:.35rem;align-items:center;min-height:5.6rem;padding:1rem;border-radius:22px;font-size:1.3rem;line-height:1.2}
.opt.big .lab{display:contents}
.opt.big .lt{grid-column:2}
.opt.big .ex{grid-column:1 / -1;margin-top:0;white-space:normal;font-size:min(1.02rem, calc((100vw - 66px) / 18.7));line-height:1.35}
.opt.big .mk{width:1.5rem;height:1.5rem}
.opts:has(.big){gap:1rem;margin-top:1.75rem}

.note{font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--hint);margin:.85rem 0 0}
.alt{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35rem;margin:1rem 0 0;font-family:var(--body);font-size:1rem;line-height:1.4;color:var(--text)}

/* Fields: Arimo, label above, hint between label and field (GOV.UK), one height for every one-line field */
.fw{margin:1.1rem 0 0;min-width:0;border:0;padding:0}
.lbl{display:block;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.35;color:var(--title-green);margin:0 0 .45rem}
.fh{font-family:var(--body);font-size:.95rem;line-height:1.45;color:var(--hint);margin:-.2rem 0 .5rem}
.field{display:block;width:100%;font-family:var(--body);font-size:1.0625rem;line-height:1.5;color:var(--text);background:#fff;border:1px solid var(--field-border);border-radius:14px;padding:.8rem .95rem;height:3.35rem}
select.field{-webkit-appearance:none;appearance:none;padding-right:2.6rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d36' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center/1.1rem no-repeat;cursor:pointer}
select.field.empty{color:var(--hint)}
.field:focus{outline:3px solid var(--focus);outline-offset:3px;border-color:var(--focus)}
.field.bad,.field.bad:focus{border-color:var(--error)}
.row2{display:grid;gap:.6rem;align-items:end}
/* top-aligned, so a message under State never moves the ZIP field */
/* City with State, ZIP with Country: the second column wider so long state names show whole; top-aligned, so a message under one field
   never moves its neighbour; under 360px City and State stack, since the state list needs the width */
.row2.cs{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);margin-top:.6rem;align-items:start}
.row2.cs .fw{margin-top:0}
@media (max-width:359px){.row2.cs:has(select){grid-template-columns:minmax(0,1fr);row-gap:.6rem}}
/* a field she cannot change (the country) */
.field[readonly]{background:var(--chip);border-color:var(--chip-border);color:var(--text-card);cursor:default}
.row2 .fw{margin-top:0}
.promo{margin-top:.6rem}
/* the address step's fields carry their labels inside (user, 2026-10-18: compact, as on the men's page), as floating labels so the name
   stays visible once she types: centred in an empty field, small at the top of the field when it has a value or the focus */
.fl{margin-top:.6rem}
.hint + .fl{margin-top:1.1rem}
.flw{position:relative}
.fl .field{height:3.5rem;padding:1.3rem .95rem .3rem}
.fl select.field{padding-right:2.6rem}
.fll{position:absolute;left:calc(.95rem + 1px);right:.95rem;top:50%;transform:translateY(-50%);font-family:var(--body);font-weight:400;font-size:1.0625rem;line-height:1.2;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:top .15s,font-size .15s,transform .15s}
.fl .field:focus + .fll,.fl input.field:not(:placeholder-shown) + .fll,.fl.has .fll{top:.5rem;transform:none;font-size:.78rem;font-weight:600;color:var(--title-green)}
.fl .field::placeholder{color:transparent}
.fl select + .fll{right:2.6rem}
@media (max-width:359px){.fll{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.fll{transition:none}}
/* a field with an icon inside on the left (date of birth) */
.ic{position:relative}
.ic svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--hint);pointer-events:none}
.ic .field{padding-left:3rem}
.field::placeholder{color:var(--hint);opacity:1}
.promo .fw{margin-top:.2rem}

.link{display:inline-flex;align-items:center;background:none;border:0;padding:.5rem 0;min-height:44px;color:var(--green);font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.3;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.link[hidden]{display:none}

/* Upload: the WIQ1 drop box (the box is the tap target), the chosen files with Remove */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;margin-top:1.4rem;min-height:10rem;padding:1.3rem 1rem;border:1.5px dashed var(--field-border);border-radius:14px;background:var(--card-warm);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.drop:hover,.drop.over{border-color:var(--green);background:#fff}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.drop.bad{border-color:var(--error)}
.drop svg{width:2.4rem;height:2.4rem;color:var(--gold-accent);margin-bottom:.25rem}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop-line{font-family:var(--body);font-size:1.0625rem;line-height:1.4;color:var(--text)}
.drop-line b{font-weight:600;color:var(--green)}
.drop-line .click,.drop-line .dd{display:none}
@media (hover:hover) and (pointer:fine){.drop-line .tap{display:none}.drop-line .click,.drop-line .dd{display:inline}}
.drop-stat{font-family:var(--body);font-size:.95rem;line-height:1.4;color:var(--hint)}
.files{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.files[hidden]{display:none}
.files li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.35rem;padding:0 .35rem 0 .95rem;border:1px solid var(--chip-border);border-radius:14px;background:#fff}
.fname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--body);font-weight:600;font-size:1rem;color:var(--text)}
.files .link{flex:none;padding:.5rem .7rem}
/* "See the tests we need": the lab panels page's dropdown, set as a closed option row; open, a warm card with the groups in bronze capitals */
.need{margin-top:1rem;border:1px solid var(--chip-border);border-radius:1.55rem;background:var(--chip)}
.need[open]{background:var(--card-warm);border-color:var(--chip-border);border-radius:22px;box-shadow:var(--shadow-card)}
.need summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:3.1rem;padding:.68rem 1.15rem;border-radius:1.55rem;cursor:pointer;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.06rem;line-height:1.25;color:var(--text);-webkit-tap-highlight-color:transparent}
.need summary::-webkit-details-marker{display:none}
.need summary svg{flex:none;width:1.2rem;height:1.2rem;color:var(--green)}
.need[open] summary svg{transform:rotate(180deg)}
.need summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.need dl{margin:0;padding:0 1.15rem 1.1rem}
.need dt{margin:.95rem 0 0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:.78rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.need dt:first-child{margin-top:.35rem}
.need dd{margin:.4rem 0 0;font-family:var(--body);font-size:.97rem;line-height:1.45;color:var(--text)}
.need-b{padding:0 1.15rem 1.15rem}
.need .one dd{margin-top:.25rem}
.need .one dt{line-height:1.35}
/* the upload step's two lines under the title each start a line; its two notes share one size, colour and icon edge */
.up-sub span{display:block;text-wrap:pretty}
/* centred under the order confirmation, a sentence that breaks splits into even lines */
.done-top .up-sub span{text-wrap:balance}
.up-notes{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.up-notes li{display:flex;align-items:flex-start;gap:.75rem;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--hint);text-wrap:pretty}
.up-notes svg,.women-auth .hint>svg{flex:none;width:22px;height:22px;margin-top:.05rem;color:var(--gold-accent)}
.up-alt{justify-content:center;text-align:center;margin-top:1.5rem}
/* the two badges close step 4 on the upload path (user, 2026-10-18) */
.seals{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:1.75rem}
.seals a{display:inline-flex;min-height:44px;align-items:center}
.seals img{display:block;height:48px;width:auto}
.seals img.hipaa{height:40px;opacity:.8}
.need .need-b dl{padding:0}

/* Cards: the referral notice, the panel card */
.card{background:var(--card-warm);border:1px solid var(--card-line);border-radius:26px;box-shadow:var(--shadow-card);padding:1.2rem 1.25rem}
.card-head{display:block;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--title-green)}
.invite p{margin:.4rem 0 0;font-family:var(--body);font-size:1.0625rem;line-height:1.5;color:var(--text-card)}
.invite{margin:0 0 1.4rem}
/* The panel (the live page's offer card, now with no card around it): its name and price, what is included, its tests, how to pay */
/* the panel sits on the page with no card around it (user, 2026-10-18): the frame took room the photos and the text need, so the panel runs
   the page's width between its gutters, with dividers between its parts */
.offer{margin-top:1.6rem}
.ohead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1rem}
.onm{min-width:0}
.bio{margin:.25rem 0 0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.3rem;line-height:1.25;color:var(--bronze);white-space:nowrap}
.oprice{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
/* the price in the near black of the text, "Included" in the brand green (user, 2026-10-18) */
/* the price a little smaller (user, 2026-10-18), at most 1.06 times the name, so on the narrowest phones it shrinks with it */
.oprice b{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:min(1.9rem, calc((min(100vw, var(--col)) - 144px) / 7.06 * 1.06));line-height:1;color:var(--text)}
.oprice span{margin-top:.48rem;font-family:var(--body);font-size:.9rem;color:var(--hint)}
.items{margin-top:0}
.pd.tests summary{font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.12rem;color:var(--title-green)}
.pd.tests .need-b{padding:0 0 1rem}
.pd.tests dl{margin:0;padding:0}
.pd.tests dt{margin:.95rem 0 0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:.78rem;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.pd.tests dt:first-child{margin-top:.2rem}
.pd.tests dd{margin:.25rem 0 0;font-family:var(--body);font-size:.97rem;line-height:1.45;color:var(--text)}
.pd.tests p{margin:.1rem 0 0;font-family:var(--body);font-size:.97rem;line-height:1.45;color:var(--hint)}
.thumb{display:block;flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--gold-border);background:#e6ece2}
/* the row photos larger (user, 2026-10-18, three times) */
.thumb.sm{width:72px;height:72px;border-radius:16px}
/* the panel name and its count a size up (user, 2026-10-18), the name on one line beside the price: it fits from "Complete panel" (6.92em, 2% spare)
   in the page's width less the gutters and the price's column */
.prod-n{margin:0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:min(1.8rem, calc((min(100vw, var(--col)) - 144px) / 7.06));line-height:1.15;color:var(--title-green);white-space:nowrap}
.items{margin-top:.6rem;border-top:1px solid var(--hairline-warm)}
.item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 0;border-bottom:1px solid var(--hairline-warm)}
.item-t{min-width:0}
/* the text fits the screen less 128px: the gutters (32), the photo (72), the gap (12), and 12px kept free
   on the right (user, 2026-10-18); titles fit from the longest (14.26em, 2% spare), lines from the longest line (16.67em, 2% spare), each at
   most its usual size */
.item-n{margin:0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:min(1.15rem, calc((min(100vw, var(--col)) - 128px) / 14.55));line-height:1.25;color:var(--title-green);white-space:nowrap}
/* "Included" on a green oval (user, 2026-10-18); the right padding less the tracking after the last letter, so the word sits centred */
/* the pill follows the row text when the screen narrows (user, 2026-10-18): its size is the title's times 0.557 (10.24px beside 18.4px), its
   padding and spacing in em, so the whole pill scales; never under 8px, which the narrowest phones (under 337px) would reach */
.inc{width:fit-content;margin:.55em 0 .47em;padding:.31em calc(.86em - .1em) .28em .86em;border-radius:999px;background:var(--green);font-family:var(--body);font-weight:600;font-size:max(8px, min(.64rem, calc((min(100vw, var(--col)) - 128px) / 26.15)));line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--on-green-soft)}
.item-l{margin:.1rem 0 0;font-family:var(--body);font-size:min(.95rem, calc((min(100vw, var(--col)) - 128px) / 17));line-height:1.45;color:var(--hint)}
.item-l .ln{display:block;white-space:nowrap}
.pd{border-bottom:1px solid var(--hairline-warm)}
.pd summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:3.1rem;cursor:pointer;font-family:var(--body);font-weight:600;font-size:1rem;color:var(--green);-webkit-tap-highlight-color:transparent}
.pd summary::-webkit-details-marker{display:none}
.pd summary svg{flex:none;width:1.2rem;height:1.2rem}
.pd[open] summary svg{transform:rotate(180deg)}
.pd summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pd dl{margin:0}
.pd dl div{display:flex;justify-content:space-between;gap:1rem;margin:0 0 .4rem;font-family:var(--body);font-size:1rem;line-height:1.4;color:var(--text)}
.pd dd{margin:0;font-variant-numeric:tabular-nums}
.pd s{color:var(--hint)}
.pay{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.pay li{display:flex;align-items:flex-start;gap:.6rem;font-family:var(--body);font-size:.95rem;line-height:1.45;color:var(--hint)}
.pay svg{flex:none;width:20px;height:20px;margin-top:.05rem;color:var(--gold-accent)}


/* the pop-up: a warm card over a dimmed page, centred text, the one green button and a Close link */
.pop{margin:auto;max-height:calc(100dvh - 32px);overflow-y:auto;border:0;padding:1.5rem 1.25rem .75rem;width:calc(100% - 32px);max-width:24rem;border-radius:22px;background:var(--card-warm);color:var(--text);box-shadow:0 24px 60px rgba(16,47,41,.28);text-align:center}
.pop::backdrop{background:rgba(16,47,41,.45)}
.pop.fallback{position:fixed;inset:0;margin:auto;height:fit-content;z-index:50;box-shadow:0 0 0 100vmax rgba(16,47,41,.45),0 24px 60px rgba(16,47,41,.28)}
.pop-t{margin:0;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--title-green);text-wrap:balance}
.pop-d{margin:.6rem 0 1.25rem;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--hint);text-wrap:balance}
.pop-x{display:flex;justify-content:center;width:100%;margin-top:.35rem}
body.modal-open{overflow:hidden}
/* Done: the gold check, larger */
/* the confirmation after Submit: centred top, a hairline, then the question */
.done-top{display:flex;flex-direction:column;align-items:center;text-align:center}
.done-top .done-ic{margin:0 0 1rem}
.done-top .title{text-wrap:balance}
.sep{border:0;border-top:1px solid var(--hairline);margin:1.6rem 0 1.4rem}
/* the question on one line at every width: its size is the question size, or smaller where the longest phone line needs it (16.0em, 3% spare) */
.q.one{white-space:nowrap;font-size:min(max(1.125rem, calc((min(100vw, var(--col)) - 2rem) * .059)), calc((min(100vw, var(--col)) - 2rem) / 16.5))}
.opt-sub{margin:.3rem 0 0;font-family:var(--body);font-size:.85rem;line-height:1.3;color:var(--hint)}
/* the heart in the gold circle: the check's circle with a green heart and pulse line instead of the tick */
.done-ic.hb{background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--green)}
.done-ic.hb svg{width:1.7rem;height:1.7rem}
.done-top > .hint{margin-top:.75rem;text-wrap:balance}
/* the note under the centred text: centred as a block, its lines left-aligned beside the gold "i" */
.up-notes.later{margin-top:1.4rem;align-items:center}
.up-notes.later li{max-width:22rem}
.up-notes .em{font-weight:600;color:var(--title-green)}
.go2{display:flex;justify-content:center;width:100%;margin-top:.35rem}
.cant{margin:1.1rem auto 0;max-width:24rem;text-align:center}
.cant summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-family:var(--body);font-weight:600;font-size:1rem;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.cant summary::-webkit-details-marker{display:none}
.cant summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cant p{margin:.2rem 0 0;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--hint);text-wrap:balance}
.cant .em{font-weight:600;color:var(--title-green)}
/* the email field inside "Wrong email?" keeps the form's left edge */
.chg .fw{text-align:left}
.chg .link{margin-top:.6rem}
.sent{text-wrap:balance;margin:1rem 0 0;text-align:center;font-family:var(--body);font-size:1rem;line-height:1.45;color:var(--green);font-weight:600}
.sent:empty{display:none}
/* her address in the sentence, set apart and free to break if it is long */
.done-top .em{font-weight:600;color:var(--title-green);overflow-wrap:anywhere}
body.two .wiz{padding-bottom:12rem}
.done-ic{display:block;width:3.1rem;height:3.1rem;margin:0 0 1.1rem;border-radius:50%;border:1.5px solid #ecd9a8;background:var(--tick) center/1.45rem no-repeat,var(--gold);box-shadow:0 2px 6px rgba(0,0,0,.18)}

.err{font-family:var(--body);color:var(--error);font-size:.95rem;line-height:1.4;margin:.75rem 0 0}
.err:empty{display:none}
.err.at{margin:.45rem 0 .1rem}

/* The one green button, full width, always reachable at the bottom; the bar fades in so what is under it shows through, and a line says what is left below */
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:3.4rem;padding:.7rem 1.6rem;border-radius:999px;background:linear-gradient(180deg,#27503f,#1a4234);color:#fff;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:400;font-size:1.42rem;line-height:1.2;border:0;cursor:pointer;box-shadow:var(--shadow-button);transition:filter .2s;white-space:nowrap}
.btn:hover{filter:brightness(1.1)}
@media (max-width:560px){.btn{font-size:1.32rem;padding-inline:1.1rem}}
@media (max-width:420px){.btn{font-size:1.25rem;padding-inline:.9rem}}
@media (max-width:370px){.btn{font-size:1.16rem;padding-inline:.7rem}}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;background:linear-gradient(to bottom,rgba(245,248,239,0) 0,rgba(245,248,239,.9) 1.4rem,var(--surface-sage) 2.4rem);padding:2.2rem 0 calc(.75rem + env(safe-area-inset-bottom,0px))}
.nav[hidden]{display:none}
.nav .in{pointer-events:auto;width:min(100%,var(--col));margin-inline:auto;padding-inline:16px}
.more{display:block;width:100%;margin:0 0 .5rem;padding:.25rem 0;border:0;background:none;text-align:left;font-family:var(--body);font-size:.95rem;line-height:1.3;color:var(--hint);cursor:pointer;position:relative}
.more::after{content:"";position:absolute;left:0;right:0;top:-.5rem;bottom:-.5rem}
.more[hidden]{display:none}
/* the legal line sits right above the button it describes, on the last screen only */
.consent{margin:0 0 .65rem;font-family:var(--body);font-size:.9rem;line-height:1.4;color:var(--hint)}
.consent[hidden]{display:none}
.consent a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media (prefers-reduced-motion:reduce){.segs b,.opt{transition:none}}

/* Computers and tablets, 768px and up; phones are untouched. As in WIQ1: text that stayed at phone size grows one step, and Continue
   sticks to the bottom of the window with the same fade and "more below" line while the content runs past it, then settles after it. */
@media (min-width:768px){
  /* the bar follows the content on computers, so the phones' room for it under the screen goes, on the two-action screens too */
  .wiz,body.legal .wiz,body.two .wiz{padding-bottom:0}
  .nav{position:sticky;bottom:0;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px))}
  .more{font-size:1.05rem}
  .part-n{font-size:.95rem}
  .lead{font-size:1.45rem}
  .hint{font-size:1.125rem}
  .opts{gap:.65rem}
  .opt{min-height:3.45rem;padding:.8rem 1.3rem;border-radius:1.75rem;font-size:1.22rem;gap:.7rem}
  .opt.plan{min-height:4.6rem;border-radius:24px}
  .opt .mk{width:1.45rem;height:1.45rem}
  .opt.big{min-height:6.4rem;padding:1.2rem 1.5rem;border-radius:24px;font-size:1.5rem;column-gap:1rem}
  .opt.big .ex{font-size:1.15rem}
  .opt-sub{font-size:.95rem}
  .opt.big .mk{width:1.65rem;height:1.65rem}
  .opt .ex{font-size:1.06rem}
  .thumb{width:72px;height:72px}
  .thumb.sm{width:80px;height:80px;border-radius:16px}
  .prod-n{font-size:2rem}
  .oprice b{font-size:2.15rem}
  .oprice span{font-size:1.05rem}
  .bio{font-size:1.45rem}
  .pd.tests summary{font-size:1.3rem}
  .pd.tests dd,.pd.tests p{font-size:1.06rem}
  .item-n{font-size:1.32rem}
  .inc{font-size:.735rem}
  .item-l,.pay li{font-size:1.06rem}
  .lbl{font-size:1.125rem}
  .fh{font-size:1.05rem}
  .note,.alt,.link{font-size:1.125rem}
  .field{font-size:1.1875rem;height:3.6rem}
  .fl .field{height:3.85rem;padding-top:1.45rem}
  .fll{font-size:1.1875rem}
  .fl .field:focus + .fll,.fl input.field:not(:placeholder-shown) + .fll,.fl.has .fll{top:.55rem;font-size:.85rem}
  .err{font-size:1.05rem}
  .drop{min-height:12rem}
  .drop-line{font-size:1.1875rem}
  .up-notes li{font-size:1.125rem}
  .cant summary,.cant p,.sent{font-size:1.125rem}
  .up-notes svg,.women-auth .hint>svg{width:24px;height:24px}
  .drop-stat{font-size:1.05rem}
  .fname{font-size:1.1rem}
  .need summary{min-height:3.45rem;padding:.8rem 1.3rem;font-size:1.22rem}
  .need dl{padding:0 1.3rem 1.2rem}
  .need-b{padding:0 1.3rem 1.3rem}
  .need dt{font-size:.85rem}
  .need dd{font-size:1.06rem}
  .card-head{font-size:1.5rem}
  .invite p{font-size:1.1875rem}
  .consent{font-size:1rem}
}

/* Keep enlarged text and browser autofill usable at the smallest viewport. */
.row2,.row2.cs{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
.fw,.flw,.item-t,.onm{min-width:0}
.btn{white-space:normal;height:auto;overflow-wrap:anywhere}
.em,.lab,.hint,.pop-d{overflow-wrap:anywhere}
button:disabled{cursor:wait;opacity:.7}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

.drop:focus-within{outline:3px solid var(--focus);outline-offset:3px}

.large-text .bar{position:static}
.large-text .bar .in{flex-wrap:wrap}
.large-text .brand{white-space:normal;min-width:0;max-width:100%}
.large-text .brand span{min-width:0}
.large-text .nav{position:static;padding-top:1rem}
.large-text .wiz,body.large-text.legal .wiz{padding-bottom:1rem}
.large-text .item .ln{white-space:normal}
.large-text .opt.big .ex{white-space:normal;font-size:1.02rem}
.large-text .ohead{flex-wrap:wrap}
.large-text .prod-n{white-space:normal;font-size:1.8rem}
.large-text .oprice b{font-size:1.9rem}
.large-text .bio{white-space:normal}
.large-text .item-n{white-space:normal;font-size:1.15rem}
.large-text .item-l{font-size:.95rem}
.large-text .inc{font-size:.64rem}
.large-text .q.one{white-space:normal;font-size:1.125rem}
.large-text .flw{display:flex;flex-direction:column}
.large-text .fl .flw .fll{position:static;white-space:normal;overflow:visible;transform:none;font-size:1rem;order:-1;margin-bottom:.45rem}
.large-text .fl .field{height:3.35rem;padding:.8rem .95rem}

.women-auth .done-top>form{width:100%;margin-top:1.4rem}
.women-auth .cant{width:100%}
.cant .err{color:var(--error);text-align:left}