/* Attn: Grace landing pages, shared brand system
Tokens from the official 2026 brand guidelines (ATTN-GRACE-BRAND-RULES.md section 6).
Type floor is 18px on purpose: the founders' acceptance test is that a 60-year-old
should not have to put their glasses on. */
/* Only the Regular display face is declared. Their Semibold woff2 is malformed on their
own CDN (Chrome: "Size of decompressed WOFF 2.0 is less than compressed size"), so
requesting it just fails on every load. Headings ask for 600 and the browser bolds the
Regular face, which is what was rendering anyway. Worth telling Liza. */
@font-face{font-family:"BentonMod";src:url("https://attngrace.com/cdn/shop/t/286/assets/BentonModDisp-Regular.woff2?v=106108856187133485231741695271") format("woff2");font-weight:400;font-display:swap}
/* Their BentonMod draws the no-break space (U+00A0) at 115 units where the space is 229,
so every bound pair in a heading read tight ("approvedmean?"). This one-glyph subset of
the same file, advance corrected to 229, serves U+00A0 only; the CDN face does the rest.
WOFF, not WOFF2: for a font this small the WOFF2 encoder's output is larger than its
input and Chrome's decoder refuses it. Also worth telling Liza. */
@font-face{font-family:"BentonMod";src:url("BentonMod-nbsp.woff") format("woff");unicode-range:U+00A0;font-weight:400;font-display:swap}
@font-face{font-family:"Acre";src:url("https://attngrace.com/cdn/shop/t/286/assets/acre-regular.woff2?v=68023163562011784371741695272") format("woff2");font-weight:400;font-display:swap}
:root{
/* type scale multiplier. Every font-size in this sheet is calc(size * var(--fs)),
so a page can grow or shrink all of its type in one line: twice-the-protection
runs 1.05 (Daniel, 17.09). Unitless line-heights and em letter-spacing follow. */
--fs:1;
--cream:#FAEEEA;
--cream-deep:#F6E1D8;
--paper:#FFFFFF;
--ink:#33312E;
--ink-soft:#6C645D;
--hair:#E6D5CD;
/* absorbency ramp, Light to Ultimate */
--pad-1:#FFDAB6; --pad-2:#FAC8A7; --pad-3:#FFA563; --pad-4:#F49957; --pad-5:#F38B3C;
--apricot:#FB9650; /* their CTA orange, taken off the first-order page */
--apricot-soft:#FCAA6B;
--periwinkle:#9FB0D6;
--bluegreen:#89C9B9;
--leaf:#DDDB1F;
--accent:var(--apricot);
--accent-soft:var(--apricot-soft);
--wrap:1265px; /* their own content width on the first-order page */
--measure:660px;
/* 8px is the radius they use for cards, images and the primary CTA. Pills stay 999px. */
--r:8px;
--r-lg:8px;
/* one soft lift, used on every raised surface so depth is consistent */
--lift:0 1px 2px rgba(51,49,46,.04), 0 10px 28px rgba(51,49,46,.055);
/* ⭐ their signature: a hard offset shadow in orange, no blur, on square-cornered
warm cards. Lifted from the review cards on /pages/first-order-2-packs. */
--sticker:4px 4px 0 0 #F88B50;
--card-warm:#FBF5EF;
--cta:#FB9650; /* their CTA orange */
--display-ink:#000000; /* their display type is pure black, not the soft ink */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--cream);color:var(--ink);
overflow-x:clip;
font-family:"Acre",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
/* their body is Acre 20px / 32.4px on the first-order page */
font-size:calc(20px * var(--fs,1));line-height:1.62;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Their display scale, measured on /pages/first-order-2-packs: H1 60/72 (1.2),
section H2 36/36 (1.0, set solid), sub-head 22.5/29.25. Pure black, not soft ink. */
h1,h2,h3,.display{font-family:"BentonMod",Georgia,"Times New Roman",serif;font-weight:600;
line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--display-ink)}
h1{font-size:calc(clamp(38px,6vw,60px) * var(--fs,1));line-height:1.2}
h2{font-size:calc(clamp(30px,4vw,36px) * var(--fs,1));line-height:1.02}
h3{font-size:calc(clamp(21px,2.4vw,22.5px) * var(--fs,1));line-height:1.3}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--measure);margin-left:auto;margin-right:auto}
section{padding:clamp(52px,7vw,88px) 0}
/* a small rule before each eyebrow gives the sections a shared beat, and is where
the cooler brand colours get used. Alex: the brand had gone very orange. */
.eyebrow{font-size:calc(18px * var(--fs,1));letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.eyebrow::before{content:"";display:inline-block;width:20px;height:2px;border-radius:2px;
background:var(--accent);vertical-align:middle;margin-right:11px;margin-top:-2px}
.eyebrow.cool::before{background:var(--periwinkle)}
.eyebrow.leafy::before{background:var(--bluegreen)}
/* the Figma frames drop the rule on some section eyebrows; nodash matches them */
.eyebrow.nodash::before{display:none}
.lede{font-size:calc(clamp(19px,2.1vw,23px) * var(--fs,1));line-height:1.55;color:var(--ink-soft)}
/* Alex, 01.09: no block should end on a single word. balance evens the short display
lines out; pretty keeps the last line of running copy from stranding one word. The
handful of lines the browser still cannot solve carry a hard space in the markup. */
h1,h2,h3,.display,.eyebrow,.lede,.nm,figcaption,.stat b,.not,blockquote{text-wrap:balance}
p,li,.use,.spec,.note-leaf,.better,.qa p,.foot p{text-wrap:pretty}
/* announce + header. The orange brand bar with a centred logo is lifted straight
from their own Replo landing page, so these read as Attn: Grace on sight. */
.announce{background:var(--ink);color:#FBF3EF;font-size:calc(18px * var(--fs,1));letter-spacing:.02em;text-align:center;padding:11px 16px}
.announce span{opacity:.62;padding:0 8px}
.brandbar{background:var(--apricot);padding:14px 24px;position:relative}
.brandbar .row{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:center;min-height:64px}
.brandbar .logo{height:80px;width:auto}
.brandbar .side{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
.brandbar .side .btn{background:var(--ink);color:#FFF7F3;padding:13px 22px;font-size:calc(18px * var(--fs,1))}
.masthead{background:var(--cream);border-bottom:1px solid var(--hair)}
.masthead .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;max-width:var(--wrap);margin:0 auto}
.logo{height:62px;width:auto}
.logo.sm{height:44px}
@media (max-width:700px){
.brandbar .logo{height:62px}
.brandbar .side{display:none}
}
/* buttons */
.btn{
display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
background:var(--ink);color:#FFF7F3;font-family:inherit;font-size:calc(18px * var(--fs,1));letter-spacing:.06em;
text-transform:uppercase;padding:19px 34px;border-radius:8px;transition:transform .12s ease,opacity .12s ease;
}
.btn:hover{opacity:.9;transform:translateY(-1px)}
/* their primary CTA: #FB9650 with WHITE label, not dark type on orange */
.btn.accent{background:var(--accent);color:#FFFFFF}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.wide{display:block;width:100%}
.cta-note{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin-top:12px}
/* hero */
.hero{padding-top:clamp(38px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:calc(clamp(34px,6vw,62px) * var(--fs,1))}
/* the pack was floating on flat cream. A soft light behind it gives it a surface. */
.hero-art{position:relative}
.hero-art::before{content:"";position:absolute;inset:-8% 0 -12%;border-radius:50%;
background:radial-gradient(58% 54% at 50% 50%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%)}
.hero-art img{position:relative;border-radius:var(--r-lg)}
.stars{color:var(--accent);letter-spacing:.14em;font-size:calc(18px * var(--fs,1))}
/* ⭐ their proof pill: an outlined rounded pill sitting ABOVE the headline, carrying
the stars and the review line. On their page it reads "4.8 stars | 10K+ reviews |
25M+ pads sold"; we run Alex's standardised review string instead. */
.rating-line{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:calc(18px * var(--fs,1));
color:var(--ink);margin:0 0 20px;border:1px solid var(--hair);border-radius:999px;
padding:9px 20px;background:var(--paper)}
/* trust marks above the fold, the way their own page does it */
.badges.mini{justify-content:flex-start;gap:8px;margin-top:20px}
.badges.mini .badge{padding:8px 14px;font-size:calc(18px * var(--fs,1));background:transparent;border-color:var(--hair)}
/* proof strip. Was a thin white band of four numbers reading as an afterthought. */
.strip{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:32px 0}
.strip .items{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.strip .items > div + div{border-left:1px solid var(--hair)}
.strip b{display:block;font-family:"BentonMod",serif;font-size:calc(clamp(24px,3vw,34px) * var(--fs,1));font-weight:600;letter-spacing:-.01em}
.strip span{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);line-height:1.35;display:block;margin-top:6px;letter-spacing:.01em}
/* cards */
.cards{display:grid;gap:22px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--lift)}
.card.tint{background:var(--cream-deep)}
.card .n{font-family:"BentonMod",serif;font-size:calc(18px * var(--fs,1));letter-spacing:.14em;color:var(--accent);margin-bottom:10px;display:block}
.card h3{margin-bottom:10px}
.card p{font-size:calc(18px * var(--fs,1));color:var(--ink-soft)}
.better{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);font-size:calc(18px * var(--fs,1))}
.better b{font-family:"BentonMod",serif;font-weight:600}
/* cross-section / layers */
.layers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.layer-list{list-style:none;margin:0;padding:0}
.layer-list li{padding:18px 0;border-bottom:1px solid var(--hair);display:flex;gap:16px;align-items:flex-start}
.layer-list li:last-child{border-bottom:0}
.swatch{width:26px;height:26px;border-radius:8px;flex:0 0 26px;margin-top:3px}
.layer-list b{display:block;font-family:"BentonMod",serif;font-size:calc(19px * var(--fs,1));font-weight:600}
.layer-list span{font-size:calc(18px * var(--fs,1));color:var(--ink-soft)}
/* absolutely nots. Their own page states these as things that are certified true,
with a check, rather than as a list of negatives with a cross. */
.nots{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:660px;margin:0 auto}
.not{background:var(--paper);border:1px solid var(--hair);border-radius:999px;padding:14px 22px;font-size:calc(18px * var(--fs,1));display:flex;align-items:center;gap:12px;line-height:1.3}
.not::before{
content:"";flex:0 0 22px;width:22px;height:22px;border-radius:50%;
background:#5FA97C url('data:image/svg+xml;utf8,') no-repeat center/13px 13px;
}
/* the labels are two or three words, so they stay two-up on a phone rather than
becoming 14 full-width rows of mostly empty space */
@media (max-width:620px){
.nots{gap:8px}
/* min-width:0 so a long label wraps inside its cell instead of pushing the pill
past the viewport (it did at 390 once the type grew 5%) */
.not{padding:10px 10px;font-size:calc(18px * var(--fs,1));gap:7px;min-width:0;line-height:1.25}
.not::before{flex:0 0 18px;width:18px;height:18px;background-size:11px 11px}
}
/* narrower than that, two-up leaves 160px per pill and half the labels wrap; one
column keeps every chip on a single line */
@media (max-width:420px){
.nots{grid-template-columns:1fr}
}
/* droplet absorbency rating, their pack device */
.drops{display:inline-flex;gap:5px;align-items:center}
.drop{display:inline-block;width:13px;height:17px;background-repeat:no-repeat;background-position:center;background-size:contain;
background-image:url('data:image/svg+xml;utf8,')}
.drop.on{background-image:url('data:image/svg+xml;utf8,')}
/* find your fit cards, modelled on their own absorbency cards */
.fit{display:grid;gap:14px}
.fit-card{display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:center;border-radius:var(--r);padding:20px 24px}
.fit-card img{border-radius:10px}
.fit-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fit-card .nm{font-family:"BentonMod",serif;font-size:calc(22px * var(--fs,1));font-weight:600}
.fit-card .use{font-size:calc(18px * var(--fs,1));margin:8px 0 8px}
.fit-card .spec{font-size:calc(18px * var(--fs,1));color:var(--ink-soft)}
.note-leaf{background:var(--leaf);border-radius:var(--r-lg);padding:20px 26px;font-size:calc(18px * var(--fs,1));line-height:1.45;margin-top:20px}
@media (max-width:620px){
.fit-card{grid-template-columns:60px 1fr;gap:14px;padding:16px 18px}
.fit-card .nm{font-size:calc(19px * var(--fs,1))}
}
/* founders */
.founders{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,56px);align-items:center}
.founders img{border-radius:var(--r-lg)}
.pullbox{border:1.5px solid var(--accent);border-radius:var(--r);padding:20px 24px;margin-top:22px;font-size:calc(18px * var(--fs,1));line-height:1.5;font-style:italic}
.stamp{display:inline-block;background:var(--paper);border:1px solid var(--hair);border-radius:999px;padding:9px 18px;font-size:calc(18px * var(--fs,1));margin-top:18px}
@media (max-width:820px){.founders{grid-template-columns:1fr}}
/* absorbency ladder */
.ladder{display:grid;gap:14px;margin-top:8px}
.rung{display:grid;grid-template-columns:132px 1fr 108px;gap:16px;align-items:center}
.rung .nm{font-family:"BentonMod",serif;font-size:calc(18.5px * var(--fs,1));font-weight:600}
.rung .track{display:block;background:#EFDFD7;border-radius:999px;height:28px;overflow:hidden}
.rung .fill{display:block;height:100%;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(51,49,46,.10)}
.rung .cap{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);text-align:right}
.rung.on .track{outline:2px solid var(--ink);outline-offset:2px}
/* crops their own cross-section asset down to just the photograph,
so nothing is re-cut or re-hosted: the file stays theirs, on their CDN */
/* crops the composite cross-section asset down to the photograph alone. The source
file also carries a chartreuse offset block and an empty circle; the old crop let
the chartreuse show at every width, and leaf is a logo-only colour. Region shown
is x 40-350, y 40-390 of the 677x437 source, which sits inside the photo edges:
the photo runs x 36-432 / y 30-397, the chartreuse block x 18-245 / y 180-410,
and the circle's left arc reaches x 355. */
.xsec{position:relative;overflow:hidden;aspect-ratio:310/350}
.xsec img{position:absolute;left:-12.90%;top:-11.43%;width:218.39%;max-width:none}
/* crops the back-of-pack shot down to the layer diagram, so its labels are
legible at column width instead of being a decorative thumbnail */
.packdiag{position:relative;overflow:hidden;aspect-ratio:119/82;border-radius:var(--r)}
.packdiag img{position:absolute;left:-26.05%;top:-70.7%;width:168.1%;max-width:none}
/* selector tool. Tap targets and type are deliberately large: the buyer is 65+. */
.tool{background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);box-shadow:var(--lift)}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.steps{font-size:calc(18px * var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* padding, not a bare text box: this is a real button and its hit area was one line of
text, 32px, the only standalone control on any page under the 44px minimum. */
.restart{background:none;border:0;padding:7px 6px;margin:-7px -6px;font:inherit;font-size:calc(18px * var(--fs,1));color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.qs{display:grid;gap:26px;margin:22px 0 6px}
.q[hidden]{display:none}
.q b{display:block;font-family:"BentonMod",serif;font-size:calc(19px * var(--fs,1));font-weight:600;margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{background:var(--cream);border:1.5px solid var(--hair);border-radius:999px;padding:14px 20px;font:inherit;font-size:calc(18px * var(--fs,1));line-height:1.25;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.opt:hover{border-color:var(--ink-soft)}
.opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* 20px, not 22: the longest leak option ("A surge or a gush: most or all of what’s in
my bladder") needed 537px against the 536px the tool leaves once its own padding hits
the 38px cap, so it alone wrapped to two lines above 1024. The selected state keeps its
1px inset, which offsets its heavier border. Page 2 is the only page with a fit finder. */
.opt[aria-checked="true"],.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--cream-deep);border-width:2px;padding:13px 19px}
.result{margin-top:26px;padding-top:26px;border-top:1px solid var(--hair);font-size:calc(18px * var(--fs,1))}
.result[hidden]{display:none}
.result b{font-family:"BentonMod",serif}
/* the day and night picks stack rather than sitting side by side: at this measure a
two-up split left about 200px for copy and wrapped every button onto three lines */
.recs{display:grid;gap:16px}
.rec{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center}
.rec img{border-radius:var(--r)}
.recs.pair .rec{background:var(--cream);border-radius:var(--r);padding:20px 22px}
.rec .btn{white-space:nowrap}
.rec .slot{font-size:calc(18px * var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px}
.rec .nm{font-family:"BentonMod",serif;font-size:calc(21px * var(--fs,1));font-weight:600;display:block}
.rec .spec{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin-top:4px}
/* where the pick sits on the range */
.minirange{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:22px 0 8px}
.minirange div{text-align:center}
.minirange .bar{height:12px;border-radius:999px;background:#EFDFD7;margin-bottom:7px}
.minirange .lb{font-size:calc(16px * var(--fs,1));color:var(--ink-soft);line-height:1.2}
.minirange .on .lb{color:var(--ink);font-weight:600}
.est{background:var(--cream);border-radius:var(--r);padding:18px 20px;margin-top:18px;font-size:calc(18px * var(--fs,1))}
.est .fine{display:block;margin-top:8px;font-size:calc(16px * var(--fs,1));color:var(--ink-soft)}
.alt{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin-top:16px}
@media (max-width:700px){
.minirange{grid-template-columns:repeat(3,1fr);gap:10px}
}
@media (max-width:620px){
/* stack the card and let the button wrap, or a long product name pushes the
page wider than the phone */
.rec{grid-template-columns:1fr;gap:14px}
.rec img{width:104px}
.rec .btn{white-space:normal;display:block;width:100%}
}
/* reviews */
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* ⭐ their review card, matched: warm off-white, SQUARE corners, and the hard orange
offset shadow. Measured at 400x430 with box-shadow 4px 4px 0 #F88B50 on their page. */
.review{background:var(--card-warm);border-radius:0;padding:26px;box-shadow:var(--sticker)}
.review h3{font-size:calc(19px * var(--fs,1));margin:10px 0 8px}
.review p{font-size:calc(18px * var(--fs,1));color:var(--ink-soft)}
.review .who{margin-top:14px;font-size:calc(18px * var(--fs,1));color:var(--ink-soft)}
/* ⭐ Clinicians' Choice band. On their page this is a full-bleed section in the
blue-green #89C9B9, not a grey footnote. Same colour, same job. */
.clinicians{background:var(--bluegreen);text-align:center}
.clinicians .eyebrow{color:#20423B}
.clinicians .eyebrow::before{background:#20423B}
.clinicians h2{max-width:20ch;margin:0 auto 14px}
.clinicians p{font-size:calc(20px * var(--fs,1));color:#20423B;max-width:52ch;margin:0 auto}
/* badges */
.badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.badge{border:1px solid var(--hair);border-radius:999px;padding:11px 22px;font-size:calc(18px * var(--fs,1));background:var(--paper)}
.swipe-hint{display:none}
/* offer */
.offer{background:var(--cream-deep)}
.buybox{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--lift);padding:clamp(26px,3.4vw,40px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,46px);align-items:center}
.plan{border:1.5px solid var(--hair);border-radius:var(--r);padding:20px;margin-bottom:14px}
.plan.best{border-color:#5FA97C;background:#F4F9F5}
.plan .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.plan b{font-family:"BentonMod",serif;font-size:calc(20px * var(--fs,1));font-weight:600}
.plan .price{font-family:"BentonMod",serif;font-size:calc(24px * var(--fs,1));font-weight:600;white-space:nowrap}
.plan small{display:block;color:var(--ink-soft);font-size:calc(18px * var(--fs,1));margin-top:6px}
.tag{display:inline-block;background:#5FA97C;color:#FFF;font-size:calc(18px * var(--fs,1));letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
/* faq */
/* The row's padding sits on the summary, not the details, so the tappable box is the
whole row: 45px on a phone, over the 44px minimum, where the bare text was only 33px.
14+45+14 is the 73px the row had when the padding was all on the details. */
.faq details{border-bottom:1px solid var(--hair);padding:14px 0}
.faq summary{font-family:"BentonMod",serif;font-size:calc(20px * var(--fs,1));font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;padding:6px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:calc(24px * var(--fs,1));line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:14px;color:var(--ink-soft);font-size:calc(18px * var(--fs,1))}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat b{display:block;font-family:"BentonMod",serif;font-size:calc(clamp(34px,4.4vw,50px) * var(--fs,1));font-weight:600;line-height:1}
.stat span{display:block;font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin-top:10px}
/* editorial (presell) */
.ed-masthead{border-bottom:1px solid var(--hair);background:var(--paper)}
.ed-masthead .row{display:flex;align-items:center;gap:14px;padding:14px 24px;max-width:820px;margin:0 auto}
.ed-label{font-size:calc(18px * var(--fs,1));letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
/* on a phone the two labels cannot share a line with the logo; let the second wrap
under, right-aligned, rather than stacking the first three lines deep */
@media (max-width:620px){
.ed-masthead .row{flex-wrap:wrap;row-gap:2px;padding:12px 20px}
.ed-label{white-space:nowrap;letter-spacing:.12em}
}
.ed-body{max-width:720px;margin:0 auto;padding:0 24px}
.ed-body h1{font-size:calc(clamp(32px,4.6vw,48px) * var(--fs,1));line-height:1.12;margin-bottom:18px}
.ed-body h2{font-size:calc(clamp(24px,3vw,32px) * var(--fs,1));margin:44px 0 14px}
.ed-body p{font-size:calc(19.5px * var(--fs,1));line-height:1.68}
.byline{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);border-bottom:1px solid var(--hair);padding-bottom:20px;margin-bottom:30px}
.pull{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:30px 0;font-family:"BentonMod",serif;font-size:calc(23px * var(--fs,1));line-height:1.35}
figure{margin:32px 0}
figure img{border-radius:var(--r)}
figcaption{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin-top:10px}
.quote-card{background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);margin:34px 0;box-shadow:var(--lift)}
.quote-card p{font-family:"BentonMod",serif;font-size:calc(21px * var(--fs,1));line-height:1.4}
.quote-card .who{font-family:"Acre",sans-serif;font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin-top:14px}
.disclosure{font-size:calc(16px * var(--fs,1));color:var(--ink-soft);margin-top:8px}
/* footer */
.foot{background:var(--ink);color:#EBDDD6;padding:52px 0 60px}
.foot a{color:#EBDDD6}
.foot .fine{font-size:calc(16px * var(--fs,1));line-height:1.6;opacity:.78;max-width:760px}
.foot .fine p{margin-bottom:.8em}
.foot-logo{height:46px;width:39px;margin-bottom:22px;filter:brightness(0) invert(1);opacity:.92}
/* reading progress. Sits under the sticky header stack, never over content. */
.readbar{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;pointer-events:none}
.readbar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
transition:transform .08s linear}
/* sections lift in once, and only for people who have not asked for less motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* how much is 3.1 cups, drawn from their published capacity and nothing else */
/* gap must clear the rim overhang: each rim extends 6px past its cup, so anything
under 12px makes neighbouring rims collide. 16px leaves 4px of air. */
.cups{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:26px 0 6px}
/* Clip liquid against the full-height inner bowl. Rounding the short liquid layer
itself cannot follow the bowl's curve at low levels. The outer cup stays unclipped
so its rim and handle remain visible. */
.cup{width:44px;height:52px;border-radius:0 0 16px 16px;border:2px solid var(--ink);border-top:0;position:relative;background:var(--paper)}
.cup-liquid{position:absolute;inset:0;overflow:hidden;border-radius:0 0 14px 14px}
.cup i{position:absolute;left:0;right:0;bottom:0;background:var(--pad-5);display:block}
.cup::after{content:"";position:absolute;top:0;left:-6px;right:-6px;height:2px;background:var(--ink);border-radius:2px}
.cup.part i{background:repeating-linear-gradient(45deg,var(--pad-5),var(--pad-5) 6px,var(--pad-4) 6px,var(--pad-4) 12px)}
/* sticky mobile cta.
No safe-area inset here on purpose: these pages set viewport-fit to its default, so
iOS already insets the viewport and bottom:0 sits above the home indicator. Adding
env(safe-area-inset-bottom) without viewport-fit=cover just resolves to 0. */
.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--hair);padding:12px 16px;display:none;z-index:40;box-shadow:0 -6px 20px rgba(51,49,46,.08)}
@media (max-width:900px){
.hero-grid,.layers,.buybox{grid-template-columns:1fr}
.strip .items,.reviews,.stats{grid-template-columns:repeat(2,1fr)}
/* The divider only makes sense in a single row. The grid goes two-up HERE, not at 620,
so cancel it here: otherwise items 3 and 4 open the second row carrying a rule with
nothing to the left of it. */
.strip .items > div + div{border-left:0}
.strip .items > div:nth-child(2n){border-left:1px solid var(--hair)}
.cards.c3,.cards.c2{grid-template-columns:1fr}
.rung{grid-template-columns:104px 1fr;grid-template-areas:"nm track" "cap cap";row-gap:6px}
.rung .nm{grid-area:nm}.rung .track{grid-area:track}
.rung .cap{grid-area:cap;text-align:left}
/* Clearance for the sticky CTA. The flat 78px it used to reserve was short at every type
size, so the bar sat over the last of the footer. The 22px term is the part of the bar
that is type, so this keeps up if the page's --fs changes again. */
body{padding-bottom:calc(76px + 22px * var(--fs,1))}
/* the sticky CTA is a mobile device only: most lander traffic is a phone */
.sticky.show{display:block}
}
/* ---- PHONE ----
Everything above is a desktop layout narrowed. On a phone the pages ran to
roughly 16 screens, mostly from full-bleed square product shots and a loose
vertical rhythm. Type stays at the 65+ floor; the space around it tightens. */
@media (max-width:620px){
section{padding:40px 0}
.wrap{padding:0 20px}
.announce{font-size:calc(18px * var(--fs,1));padding:9px 12px;line-height:1.35}
.announce span{padding:0 4px}
.brandbar{padding:10px 20px}
.brandbar .row{min-height:auto}
.brandbar .logo{height:56px}
/* a square pack shot at full bleed is 375px of one screen. Cap it. */
.hero-grid > .hero-art img,
.layers img:not(.packdiag img),
.founders img,
.buybox > div:first-child img{max-width:250px;margin-left:auto;margin-right:auto}
.hero-grid{gap:20px}
.hero{padding-top:28px}
.hero .lede{margin:14px 0 18px!important}
/* The pill only works while the stars and the line of text share a row. On a phone they
cannot: the text alone needs 308px of the 310 available, so the stars sat on their own
line and the badge became a 124px box three text-lines tall, the heaviest thing in the
hero. Below this width it reads as a plain line instead, flush with the copy under it. */
.rating-line{gap:10px;margin-bottom:16px;font-size:calc(18px * var(--fs,1));
border:0;background:none;padding:0;border-radius:0;align-items:flex-start;flex-wrap:nowrap}
/* and the text wraps BESIDE the stars rather than under them: as separate flex items
they broke to their own lines and the block ran three lines tall. */
.rating-line > span:last-child{flex:1 1 0;min-width:0}
/* Pills fill the row they land on. Short options still share a row and now divide it
evenly; anything that needs its own row takes the full width instead of stopping a
few pixels short of it, which is what made these groups read ragged. */
.opts .opt,
.badges .badge{flex:1 1 auto;justify-content:center}
.stars{letter-spacing:.06em}
.strip{padding:22px 0}
.strip .items{grid-template-columns:1fr 1fr;gap:20px}
/* the vertical rule only makes sense in a single row */
/* No rule on a phone. The 900px block sets one down the middle of the two-column grid
with :nth-child, which outranks this by specificity, so match it to turn it off. */
.strip .items > div + div,
.strip .items > div:nth-child(2n){border-left:0}
.badges.mini{justify-content:center;margin-top:16px}
.cards{gap:14px}
.card{padding:22px}
.layers{gap:24px}
.layer-list li{padding:14px 0}
.fit{gap:10px}
.fit-card{grid-template-columns:68px 1fr;gap:14px;padding:14px 16px}
.fit-card .use{margin:6px 0 6px;font-size:calc(18px * var(--fs,1))}
.fit-top{gap:8px}
.note-leaf{padding:16px 20px;font-size:calc(18px * var(--fs,1))}
/* four stacked review cards ran to 936px. On a phone they become one
thumb-swipeable row instead, which is how people read reviews anyway. */
/* padding on both axes so the 4px hard offset shadow is not clipped by the
scroller, including on the last card when scrolled fully right */
.reviews{display:flex;overflow-x:auto;overscroll-behavior-x:contain;gap:12px;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;padding-right:4px}
.reviews::-webkit-scrollbar{display:none}
.review{flex:0 0 80%;scroll-snap-align:start;padding:20px}
.review p{font-size:calc(18px * var(--fs,1))}
.swipe-hint{display:block;font-size:calc(18px * var(--fs,1));color:var(--ink-soft);text-align:center;margin-top:12px}
.badges{gap:8px}
.badge{padding:9px 16px;font-size:calc(18px * var(--fs,1))}
.buybox{padding:22px;gap:22px}
.founders{gap:22px}
.pullbox{padding:16px 18px;font-size:calc(18px * var(--fs,1))}
.faq summary{font-size:calc(18.5px * var(--fs,1))}
.foot{padding:38px 0 44px}
h2{font-size:calc(clamp(26px,7vw,32px) * var(--fs,1))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* --- why-they-choose. Shared with gruns.html, which still carries its own
inline copy; this one serves twice-the-protection.html. --- */
/* --- why-they-choose, to Frame 70 --------------------------------------- */
.whyhead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center;margin-bottom:clamp(26px,3.4vw,42px)}
.whyhead > *{min-width:0}
.whyhead h2{font-size:calc(clamp(30px,3.7vw,46px) * var(--fs,1));line-height:1.12}
/* the mark sits ON the band, the way their frame has it, and the band's copy
is ink rather than white so the mark and the words carry the same weight */
.clinband{background:var(--accent);border-radius:var(--r);padding:22px 26px;
display:flex;align-items:center;gap:22px}
.clinband p{margin:0;font-size:calc(18px * var(--fs,1));line-height:1.4;color:var(--ink)}
.cc{flex:0 0 132px;width:132px;height:43px;background-color:var(--ink);
-webkit-mask:url(icons/clinicians-choice.png) no-repeat center/contain;
mask:url(icons/clinicians-choice.png) no-repeat center/contain}
.whycards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.whycard{background:var(--paper);border-radius:var(--r);padding:clamp(22px,2.6vw,30px)}
.whycard h3{font-family:"Acre",sans-serif;font-size:calc(16.5px * var(--fs,1));font-weight:600;letter-spacing:.06em;
text-transform:uppercase;line-height:1.35;color:var(--ink);margin-bottom:12px}
.whycard p{font-size:calc(18px * var(--fs,1));color:var(--ink-soft);margin:0}
.fineprint{text-align:center;font-size:calc(16px * var(--fs,1));color:var(--ink-soft);margin:26px auto 0;max-width:76ch}
@media (max-width:900px){
.whyhead{grid-template-columns:1fr;gap:22px}
.whycards{grid-template-columns:1fr}
}
@media (max-width:520px){
/* stacking flips the main axis, so flex-basis would set the badge's HEIGHT.
Release it and let the 43px box stand. */
.clinband{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
.clinband .cc{flex:none}
}
/* ── the type floor ─────────────────────────────────────────────────────────────────
18px is the founders' own acceptance test: a 60-year-old should not have to reach
for her glasses. Most components hold it already; these are the ones that sat under
it. It applies at every width, not just on a phone: the test is about her eyes, not
her device.
This block is LAST in the file on purpose. A media query adds no specificity, so the
same rules written in the 620px block higher up lost to .fineprint and .whycard h3,
which are declared after it. The !important is likewise not a preference: page 2's
badge rows came out of Figma at 75% scale with their sizes written inline, and no
stylesheet rule outranks an inline style. */
.fineprint,
.whycard h3,
.foot .fine,
.est .fine,
/* the fit finder's range labels, which only exist once she has answered, so a
page-load scan never sees them */
.minirange .lb{font-size:calc(18px * var(--fs,1))}
/* Page 2's badge rows came out of Figma at 75% scale with their sizes written inline, at
14.1px and 14.9px, so only !important reaches them. */
.badges .badge > span{font-size:calc(18px * var(--fs,1))!important}
@media (max-width:620px){
/* .whyhead h2 is declared later than the phone block above AND is more specific, so it
beat the phone h2 rule outright and page 2's "Why Women Everywhere" kept its 30px
desktop floor on every phone. Same trap, same cure: restate it here, at the end. */
.whyhead h2{font-size:calc(clamp(26px,7vw,32px) * var(--fs,1));line-height:1.18}
/* Page 2's badge rows came out of Figma with a fixed height and white-space:nowrap on
the labels, so at 320px three of them were wider than the 280px content box and ran
to within 5px of both screen edges. Let them wrap and keep the gutter. */
.badges .badge{max-width:100%}
.badges .badge > span{white-space:normal!important}
}
/* Page 1's CTA label, "Shop Pads Built For Leaks", is the longest of the three and wraps
to two lines once the button is narrower than about 380px, which makes the bar 127px
rather than 95px. Reserve for the two-line case at these widths so the guard holds on
every page; the cost on the pages with a short label is a little extra scroll past the
footer, which nobody sees. */
@media (max-width:390px){
body{padding-bottom:calc(84px + 44px * var(--fs,1))}
}