and also
last of its type - so at 0,2,1 it beat .pressbar .eyebrow and collapsed the
gap above the logos to zero. */
/* the headline gets a wider lane than the body copy so it holds two lines;
paragraphs keep their own measure and are unaffected */
.hero .narrow{max-width:940px}
.hero h1{font-size:clamp(28px,4.6vw,50px);margin-bottom:32px}
.pill{display:inline-block;background:rgba(255,194,74,.15);border:1px solid rgba(255,194,74,.45);
color:#FFD91C;font-family:Archivo,sans-serif;font-weight:800;font-size:12.5px;
letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:3px;margin-bottom:18px}
.player{max-width:760px;margin:34px auto 0}
/* ---------- split rows ---------- */
.split{display:grid;gap:30px;align-items:start;margin-bottom:40px}
.split:not(.flip){gap:40px}
.split:last-child{margin-bottom:0}
@media(min-width:900px){
.split{grid-template-columns:1fr 1fr;gap:56px}
.split.flip .txt{order:2}.split.flip .img{order:1}
/* Body copy in two-column rows began at the wrap's edge while single-column
copy begins inside .narrow - a 156px jump between step 2 and step 3 of the
same list. Insetting the row by exactly the amount .narrow is inset puts
all body copy on one left edge, mirrored for flipped rows so the text is
always inset from its own outer edge. */
.split:not(.flip){padding-left:calc((100% - 760px) / 2)}
/* the app video is 370px in a 508px column, so an even split left a 138px
dead gap before the copy; sizing the column to the video pulls the
features left and widens their column, which drops line counts */
#inside .split{grid-template-columns:420px 1fr}
/* The video's surround is repainted to --mist in the source, so it matches
this section exactly and the clip's rectangular edge disappears. That means
no frame chrome here: a black background, a radius or a box-shadow would
each draw a rectangle around the phone rather than around the phone's
silhouette. Sized up and nudged right off the column edge. */
#inside .phoneframe{background:none;border-radius:0;box-shadow:none;
max-width:370px;margin-left:56px}
}
.split img{border-radius:10px;box-shadow:var(--shadow);width:100%;height:auto}
/* sized so the polaroid finishes close to where the copy does - a taller
image leaves the left column looking stranded above the next heading */
.split .polaroid{max-width:380px;margin:0 auto;border-radius:0;box-shadow:none;
filter:drop-shadow(0 14px 30px rgba(42,10,77,.22))}
/* ---------- credibility ---------- */
.logos{width:100%;max-width:1011px;margin:0 auto 30px;opacity:.78}
.stars{margin:0 auto 6px;height:32px;width:auto}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:30px}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:#fff;padding:20px 16px;text-align:center}
.stat b{display:block;font-family:Archivo,sans-serif;font-weight:900;
font-size:clamp(25px,3.2vw,33px);color:var(--navy);line-height:1.05}
.stat span{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;
letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px}
/* ---------- marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);margin:8px 0}
.mrow{display:flex;gap:14px;width:max-content;will-change:transform}
.mrow img{width:260px;height:195px;object-fit:cover;border-radius:8px;flex:none}
@media(max-width:640px){.mrow img{width:170px;height:128px}}
.marquee.run .mrow.a{animation:slideL 62s linear infinite}
.marquee.run .mrow.b{animation:slideR 62s linear infinite}
.marquee:hover .mrow,.marquee:focus-within .mrow{animation-play-state:paused}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* ---------- pieces / graphics ---------- */
/* Both graphics are HTML, not SVG: they are mostly labels, and SVG text
scales with the drawing - as SVG the wheel's labels rendered near 6px on a
phone. As HTML the type stays put and the layout reflows. Only the ring and
spokes are SVG, where there is no text to shrink. */
.pz,.wn{display:flex;align-items:center;gap:10px;border-radius:12px;
padding:13px 17px;font-size:15.5px;font-weight:600;line-height:1.25;list-style:none}
.ci{width:22px;height:22px;flex:none}
/* --- A: scattered. Six unrelated products, each its own colour, tilted and
spaced apart so the group reads as strewn rather than arranged. --- */
.scatter-wrap{max-width:720px;margin:26px auto 22px;
background:linear-gradient(180deg,#FBFCFE,#F4F7FB);
border:1px solid var(--line);border-radius:16px;padding:22px 14px}
.scatter{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 18px;margin:0;padding:0}
.pz{border:1.5px solid transparent;box-shadow:0 3px 10px rgba(42,10,77,.07)}
.p1{background:#FCEAEA;color:#9C322C;border-color:#F3D2D2}
.p2{background:#E9F1FC;color:#28568F;border-color:#CFE0F5}
.p3{background:#F1EBFB;color:#553C94;border-color:#DFD3F3}
.p4{background:#FDF1E0;color:#8A5417;border-color:#F5E0C2}
.p5{background:#E3F3F0;color:#1C6459;border-color:#C7E6E0}
.p6{background:#EAF4E7;color:#396F31;border-color:#D2E8CD}
.p1 .ci{stroke:#9C322C}.p2 .ci{stroke:#28568F}.p3 .ci{stroke:#553C94}
.p4 .ci{stroke:#8A5417}.p5 .ci{stroke:#1C6459}.p6 .ci{stroke:#396F31}
@media(min-width:760px){
/* The narrower panel wraps the six into 3 + 3, which is the tighter,
more contained arrangement we want. Tilts stay under 4deg and vertical
drift stays small: a rotated 200px card grows ~7px taller at each corner,
and that is what was colliding the two rows. */
.scatter-wrap{padding:32px 28px}
.scatter{gap:34px 30px}
.p1{transform:rotate(-4deg) translate(8px,5px)}
.p2{transform:rotate(3deg) translate(0,9px)}
.p3{transform:rotate(-3deg) translate(-6px,-3px)}
.p4{transform:rotate(4deg) translate(10px,3px)}
.p5{transform:rotate(-4deg) translate(0,15px)}
.p6{transform:rotate(4deg) translate(-8px,6px)}
}
.wheel-sub{max-width:660px;margin:14px auto 0;color:var(--body);text-wrap:balance}
/* --- B: the wheel. Same cards, one coordinated palette, locked on a ring. --- */
.wheel-wrap{max-width:880px;margin:30px auto 10px}
.wheel{position:relative}
.wnodes{margin:0;padding:0}
.wn{border:1.6px solid transparent;box-shadow:0 3px 12px rgba(42,10,77,.10);
font-weight:700;justify-content:center;text-align:center}
.n1{background:#EFE7FB;color:#5B2E9D;border-color:#DECFF3}
.n2{background:#E4F3EC;color:#1F6B4F;border-color:#C7E5D6}
.n3{background:#FCE7F1;color:#A5155F;border-color:#F5CFE0}
.n4{background:#FFF6D6;color:#8A6A00;border-color:#F7E9AC}
.n5{background:#F6E9FA;color:#7A2A8F;border-color:#EBD3F2}
.n6{background:#E9ECFA;color:#3B3E8F;border-color:#D2D7F1}
.n1 .ci{stroke:#5B2E9D}.n2 .ci{stroke:#1F6B4F}.n3 .ci{stroke:#A5155F}
.n4 .ci{stroke:#8A6A00}.n5 .ci{stroke:#7A2A8F}.n6 .ci{stroke:#3B3E8F}
.hub{display:flex;flex-direction:column;align-items:center;justify-content:center;
background:var(--navy);color:#fff;border-radius:50%;text-align:center;line-height:1}
.hub img{width:52px;height:auto;margin-bottom:8px}
.hub b{font-family:Archivo,sans-serif;font-weight:900;font-size:17px;letter-spacing:.01em;line-height:1}
.hub i{font-family:Archivo,sans-serif;font-style:normal;font-weight:700;font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:#FFD91C;margin-top:2px;line-height:1}
/* mobile: hub on top, plain stack. A ring of six cards at 375px would crush
the labels, so the decoration is dropped rather than shrunk. */
.wlines{display:none}
.hub{width:158px;height:158px;margin:0 auto 22px}
.wnodes{display:grid;gap:12px}
@media(min-width:760px){
.wheel{height:560px}
/* the ring is what makes the six look bound together, so it carries the
hub's navy rather than the faint page line colour */
.wlines{display:block;position:absolute;left:50%;top:50%;width:560px;height:560px;
margin:-280px 0 0 -280px;fill:none}
.wlines circle{stroke:var(--navy);stroke-opacity:.34;stroke-width:5}
.wlines line{stroke:var(--navy);stroke-opacity:.15;stroke-width:2}
.hub{position:absolute;left:50%;top:50%;width:172px;height:172px;
margin:-86px 0 0 -86px;z-index:2}
.hub img{width:64px}
.wnodes{display:block}
.wn{position:absolute;width:252px;transform:translate(-50%,-50%);z-index:1;
justify-content:center}
.n1{left:50%;top:calc(50% - 250px)}
.n2{left:calc(50% + 218px);top:calc(50% - 125px)}
.n3{left:calc(50% + 218px);top:calc(50% + 125px)}
.n4{left:50%;top:calc(50% + 250px)}
.n5{left:calc(50% - 218px);top:calc(50% + 125px)}
.n6{left:calc(50% - 218px);top:calc(50% - 125px)}
}
/* Deliberately not headline type any more: with six coloured cards directly
beneath, bold 27px here fought them for attention. Larger than body copy,
but set in the body face at normal weight. */
.pieces-list{font-size:clamp(18px,2vw,21px);line-height:1.45;
color:var(--body);text-align:center;max-width:760px;margin:0 auto 4px}
.gfx{display:grid;gap:20px;margin-top:32px}
.gfx{max-width:560px;margin-left:auto;margin-right:auto}
.gfx:has(.ph+.ph){max-width:none}
@media(min-width:820px){.gfx:has(.ph+.ph){grid-template-columns:1fr 1fr}}
/* the covers grid is 650px native - capping there keeps it crisp rather
than upscaling it 11% to fill the old Fit Father width */
img.covers{max-width:520px;width:100%;margin:26px auto 30px}
.ph{background:var(--mist-2);border:2px dashed #B9C6D4;border-radius:10px;aspect-ratio:4/3;
display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
font-family:Archivo,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:#7E8FA3;line-height:1.7}
/* .ph is a flex container, so loose text nodes and inline tags each became
their own flex item and
did nothing. The content is wrapped in a single
span so it centres as one block and the line breaks work. */
.ph > span{display:block}
.ph i{font-style:normal;opacity:.7}
.band.navy .ph,.band.deep .ph{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#93A8C4}
/* ---------- feature list ---------- */
.feat{margin:0;padding:0;list-style:none;max-width:var(--measure)}
.feat li{margin-bottom:18px;font-size:18.5px}
.feat b{font-family:Archivo,sans-serif;font-weight:800;color:var(--ink);display:block;font-size:19px}
.band.navy .feat b,.band.deep .feat b{color:#fff}
.phoneframe{max-width:300px;margin:0 auto;border-radius:22px;overflow:hidden;
box-shadow:0 18px 50px rgba(42,10,77,.28);background:#000}
.phoneframe video,.phoneframe img{width:100%;height:auto;display:block}
/* app1.png is already a complete phone mockup - it carries its own bezel and
its corners are fully transparent, so the frame's black background was
filling them and reading as black blotches around the phone. Strip the
frame here and use drop-shadow, which follows the alpha channel, so the
shadow hugs the phone's silhouette instead of a rectangle.
The two videos are raw screen recordings and still need the real frame. */
.phoneframe.mockup{background:none;border-radius:0;overflow:visible;box-shadow:none}
.phoneframe.mockup img{filter:drop-shadow(0 16px 36px rgba(42,10,77,.30))}
/* ---------- roadmap ---------- */
/* The phone mockup is naturally very tall; trimmed a little so the copy
column and the image column finish closer together. */
.step .mockup{max-width:240px}
.step{display:grid;gap:26px;align-items:center;margin-bottom:56px}
.step:last-child{margin-bottom:0}
@media(min-width:900px){
.step{grid-template-columns:1fr 1fr;gap:56px}
.step.flip .txt{order:2}.step.flip .img{order:1}
.step:not(.flip){padding-left:calc((100% - 760px) / 2)}
.step.flip{padding-left:calc((100% - 760px) / 2)}
/* The frames are centred inside their column by margin:0 auto, which leaves
the video sitting well inside the column edge. Align them to the column on
desktop so the media shares the page's left line rather than floating. */
.step.flip .phoneframe{margin-left:0}
/* The coach video is 270px in a 433px column, so an equal split left a wide
dead gap before the copy. Size the column to the video instead; the image
keeps its left line, the copy moves in. */
.step.flip{grid-template-columns:300px 1fr}
}
.stepno{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
border-radius:50%;background:var(--red);color:#fff;font-family:Archivo,sans-serif;
font-weight:900;font-size:20px;flex:none}
.step h3,.narrow>h3{display:flex;align-items:center;gap:14px}
.progression{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.progression figure{margin:0;text-align:center}
.progression img{width:100%;border-radius:8px;box-shadow:var(--shadow)}
.progression figcaption{font-family:Archivo,sans-serif;font-weight:800;font-size:13px;
letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-top:10px}
.caption{text-align:center;font-size:16px;color:var(--muted);margin-top:14px}
/* Step 3 spans the full width and centres: it is the section's payoff, so it
breaks the two-column rhythm deliberately rather than being a third row. */
/* The progression images are the section's left rail: the heading and the
intro align to their left edge rather than centring, so the eye has one
line to start from. Everything below the images stays centred. */
.laststep .progression{max-width:720px;margin-left:auto;margin-right:auto}
.laststep h3{justify-content:flex-start;text-align:left;margin-bottom:18px;
margin-left:calc((100% - 720px) / 2)}
.laststep p.intro{text-align:left;margin-left:calc((100% - 720px) / 2);margin-right:0;max-width:720px}
.laststep .caption{max-width:720px;margin-left:auto;margin-right:auto}
.laststep u{text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:900px){
.laststep h3,.laststep p.intro{margin-left:0}
.laststep h3{justify-content:center;text-align:center}
.laststep p.intro{text-align:center;margin-right:auto}
}
/* ---------- quotes: horizontal scroller ---------- */
/* Eight full-height cards stacked was a very long section right before the
offer. Scrolling horizontally keeps the section short while leaving every
testimonial reachable. Native scroll-snap does the work - touch swipe on
mobile, arrows on desktop, and the scroller is focusable so arrow keys
work too. A partial card is always visible at the right edge; without that
peek nobody knows there is more. */
.qscroll{position:relative;margin-top:30px}
.quotes{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;padding:4px 4px 10px;
scrollbar-width:none;-ms-overflow-style:none;
cursor:grab}
.quotes.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
/* the browser's native image drag starts a ghost-image drag and kills the
swipe, so it is disabled on the cards */
.q img{-webkit-user-drag:none;user-drag:none}
.quotes::-webkit-scrollbar{display:none}
.quotes:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:12px}
.q{flex:0 0 86%;scroll-snap-align:start;
/* blockquote carries a UA margin of 19px/40px, which was adding 80px
between every card on top of the gap */
margin:0;
background:#fff;border:1px solid var(--line);border-radius:10px;
box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
/* With one card visible, stretching it to the tallest card's height leaves a
pocket of dead space inside it. Let cards take their natural height there;
from two-up onwards equal heights look right again. */
@media(max-width:699px){.quotes{align-items:flex-start}}
/* A quarter of the next card has to be visibly sliced by the container edge.
The previous math (100% - gaps) / n filled the row exactly and left an 8px
sliver, which is invisible - so the section read as a finished grid and
nobody scrolled. --peek is that reserved strip. */
@media(min-width:700px) {.q{flex-basis:calc((100% - 12px - 72px) / 2)}}
@media(min-width:1040px){.q{flex-basis:calc((100% - 24px - 78px) / 3)}}
.q img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.q .qt{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.q p{margin:0 0 12px;font-size:17.5px;color:var(--ink);max-width:none;flex:1}
.q cite{font-style:normal;font-family:Archivo,sans-serif;font-weight:800;color:var(--red);
font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.qnav{position:absolute;top:38%;transform:translateY(-50%);z-index:2;
width:52px;height:52px;border-radius:50%;border:0;
/* Gold, not navy: the arrows sit on top of member photos, and a dark
circle disappears into a dark photo while a saturated warm one never
does. It is also the page's existing "act on this" colour - the Best
Value badge and the hub lockup. Glyph is navy: white on this gold is
1.6:1 and unreadable, navy is 7.8:1. */
background:#FFD91C;color:#1A1126;font-size:30px;line-height:1;cursor:pointer;
box-shadow:0 6px 18px rgba(42,10,77,.34);display:none;align-items:center;justify-content:center}
.qnav:hover{background:#F0C900;transform:translateY(-50%) scale(1.06)}
.qnav:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.qbar{position:relative;width:min(320px,60%);height:6px;margin:18px auto 0;
border-radius:99px;background:rgba(42,10,77,.12);cursor:pointer;touch-action:none}
.qthumb{position:absolute;top:0;left:0;height:100%;border-radius:99px;
background:var(--navy);transition:background .15s}
.qbar:hover .qthumb,.qbar.dragging .qthumb{background:var(--red)}
.qbar.hide{display:none}
.qhint{text-align:center;font-size:14.5px;color:var(--muted);margin:10px auto 0;max-width:none}
.qhint b{color:var(--body)}
/* the verb has to match the gesture: there is no dragging on a phone and no
swiping on a desktop mouse */
.qhint .ht{display:none}
@media(hover:none),(max-width:699px){.qhint .hp{display:none}.qhint .ht{display:inline}}
.qhint.hide{display:none}
.qnav.prev{left:8px}
.qnav.next{right:8px}
/* Arrows are for pointer users; on touch the swipe is the affordance and a
floating button just covers the card. The 700-1039px band used to get no
arrows and no peek at all, which was the worst case on the page. */
@media(min-width:700px){.qnav{display:flex}}
/* ---------- pricing ---------- */
.plans{display:grid;gap:20px;max-width:900px;margin:0 auto}
@media(min-width:820px){.plans{grid-template-columns:1fr 1fr;align-items:stretch}}
.plan{background:#fff;border-radius:12px;padding:30px 28px;border:3px solid transparent;
box-shadow:0 16px 40px rgba(0,0,0,.24);position:relative;display:flex;flex-direction:column}
.plan.best{border-color:#FFD91C}
/* the band behind this card is --navy, so a --navy tag disappeared into it.
A step lighter separates the pill without competing with the gold one. */
.plan .tag.start{background:#2E5C99;color:#fff}
.plan .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#FFD91C;
color:#2E0A1C;font-family:Archivo,sans-serif;font-weight:800;font-size:12px;letter-spacing:.13em;
text-transform:uppercase;padding:6px 16px;border-radius:3px;white-space:nowrap}
.phead{text-align:center;padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.pline{font-size:16px;color:var(--body);margin:6px 0 16px;max-width:none}
.pguar{text-align:center;font-size:13.5px;color:var(--muted);margin:12px 0 0;max-width:none}
.plan .plabel{font-family:Archivo,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.plan .price{font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(34px,4.8vw,46px);
color:var(--ink);letter-spacing:-.03em;line-height:1.08;margin-bottom:8px}
.plan .price small{display:block;font-size:17px;font-weight:700;color:var(--muted);letter-spacing:0;margin-top:8px}
.plan p{color:var(--body);font-size:17.5px;max-width:none}
.plan .save{background:#FCEFF6;border-radius:6px;padding:14px 16px;font-size:16.5px;color:#4A4325;margin:16px 0}
.plan .save b{color:#2E0A1C}
.allin{max-width:600px;margin:26px auto 0;padding:0;list-style:none;text-align:left}
.allin li{position:relative;padding-left:34px;margin-bottom:13px;font-size:18.5px;color:var(--body)}
.allin li::before{content:"";position:absolute;left:0;top:7px;width:21px;height:21px;
border-radius:50%;background:var(--green)}
.allin li::after{content:"";position:absolute;left:7px;top:11px;width:6px;height:11px;
border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
/* feature list inside each plan card */
.pfeat{list-style:none;margin:18px 0 0;padding:0;flex:1}
.pfeat li{position:relative;padding-left:29px;margin-bottom:10px;font-size:16.5px;color:var(--body)}
.pfeat li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;
border-radius:50%;background:var(--green)}
.pfeat li::after{content:"";position:absolute;left:6px;top:9.5px;width:5px;height:9px;
border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.pfeat li b{color:var(--ink)}
.plan .renew{font-size:16px;margin-top:4px}
.btn.wide{display:block;width:100%;text-align:center;margin-top:22px;font-size:16.5px;padding:17px 18px}
.included{max-width:640px;margin:34px auto 0;padding:0;list-style:none}
.included li{position:relative;padding-left:34px;margin-bottom:12px;font-size:17.5px;color:#E4D8F0}
.included li::before{content:"";position:absolute;left:0;top:8px;width:20px;height:20px;
border-radius:50%;background:var(--green)}
.included li::after{content:"";position:absolute;left:6.5px;top:12px;width:6px;height:10px;
border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
/* --- light cards sitting inside dark bands: stop inheriting white text --- */
.band.navy .plan strong,.band.deep .plan strong,
.band.navy .plan,.band.deep .plan{color:var(--body)}
.band.navy .plan .price,.band.deep .plan .price{color:var(--ink)}
.band.navy .plan strong,.band.deep .plan strong{color:var(--ink)}
.rescue h3{color:#fff}
/* ---------- guarantee ---------- */
.gtee{display:grid;gap:34px;align-items:center}
@media(min-width:900px){
.gtee{grid-template-columns:340px 1fr;gap:52px}
.gtee.flip{grid-template-columns:1fr 340px}
}
.gtee .portrait{border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.gcopy p{color:#DCCDEC}
@media(min-width:900px){
/* pull the promise in off the section edge so it does not start hard against
the page margin while the portrait floats free on the other side */
.gtee.flip .gcopy{padding-left:76px}
}
.seal{width:150px;margin:-70px auto 0;position:relative;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}
.sig{width:230px;margin-top:14px}
.band.deep .sig,.band.navy .sig{filter:brightness(0) invert(1);opacity:.92}
/* ---------- two-column qualifier ---------- */
.fork{display:grid;gap:20px;margin-top:34px}
@media(min-width:880px){
/* narrower and centred - the two columns were running the full page width,
which stretched short list items into sparse lines */
.fork{grid-template-columns:1fr 1fr;max-width:920px;margin-left:auto;margin-right:auto}
}
.col{border-radius:10px;padding:28px 26px;border:2px solid}
.col.no{background:#FCEFF6;border-color:#E7BDB8}
.col.yes{background:#F0F8F2;border-color:#A9D6B8}
.col h3{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:21px}
.col .mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
border-radius:50%;color:#fff;font-size:18px;font-weight:900;flex:none}
.col.no .mark{background:var(--red)}
.col.yes .mark{background:var(--green)}
.col ul{list-style:none;margin:0;padding:0}
.col li{margin-bottom:18px;font-size:17.5px}
.col li:last-child{margin-bottom:0}
.col b{font-family:Archivo,sans-serif;font-weight:800;color:var(--ink);display:block;font-size:18px}
.rescue-plain{margin-top:44px}
.rescue-plain h3{margin-bottom:12px;font-size:clamp(20px,2.5vw,26px);color:var(--ink)}
.rescue-plain p{margin:0 auto;color:var(--body)}
/* ---------- faq ---------- */
.faq{max-width:980px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
font-family:Archivo,sans-serif;font-weight:700;font-size:19.5px;color:var(--ink);line-height:1.32}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:18px;font-size:30px;
font-weight:700;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
.faq .ans{padding:0 8px 24px 0}
.faq .ans p{font-size:18px;margin-bottom:0;max-width:none}
/* ---------- close ---------- */
.band.close{background:var(--mist-2)}
.band.close .lede{color:var(--ink)}
.big-eyebrow{font-size:15px;letter-spacing:.2em;margin-bottom:20px}
.band.close .ps{background:#fff;margin-top:44px}
/* The gold eyebrow and the pale micro copy were both tuned for a navy ground.
On this light section gold measured 1.99:1 and the micro 3.52:1, so both
are re-set to the light-section colours. */
.band.close .eyebrow.gold{color:var(--red)}
.band.close .micro{color:#54637A}
.closing{width:100%;border-radius:12px;box-shadow:var(--shadow);margin-bottom:40px}
/* The portrait fills the left column edge to edge. It used to be a small
rounded image floating inside the panel with 96px of dead white beneath -
a box inside a box. */
.ps{background:var(--mist);border-left:5px solid var(--red);border-radius:0 8px 8px 0;
margin-top:38px;display:grid;gap:0;align-items:stretch;overflow:hidden}
@media(min-width:700px){.ps{grid-template-columns:230px 1fr}}
.ps .psimg{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
border-radius:0;box-shadow:none}
.ps .pstext{padding:28px 30px}
@media(max-width:699px){.ps .psimg{height:240px}}
.ps p{font-size:18.5px}
.ps p:last-child{margin-bottom:0}
/* ---------- mobile bar ---------- */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy-deep);
border-top:1px solid rgba(255,255,255,.14);
padding:11px 16px calc(11px + env(safe-area-inset-bottom));
display:flex;align-items:center;gap:14px;transform:translateY(120%);transition:transform .25s ease}
.mobar.show{transform:translateY(0)}
.mobar .p{font-family:Archivo,sans-serif;font-weight:800;color:#fff;font-size:15px;line-height:1.25;flex:1}
.mobar .p span{display:block;color:#B49CD2;font-size:12.5px;font-weight:600}
.mobar .btn{padding:14px 20px;font-size:15.5px;box-shadow:0 3px 0 var(--green-dark);flex:none}
@media(min-width:960px){.mobar{display:none}}
/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:#8FA3BE;padding:44px 0 96px;font-size:15.5px}
footer a{color:#CBB6E2}
footer .flogo{height:38px;width:auto;margin-bottom:16px}
footer p{max-width:84ch;font-size:14.5px;line-height:1.6;color:#7D93B0}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
.marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
.mrow{width:auto;flex-wrap:wrap;justify-content:center}
}
/* ---------- her story: centred, narrow, one held moment ----------
Every other section on this page is a left-right split. Setting hers
centred marks it as the story rather than another argument, and a narrow
column is wider than an image column - so the two photographs get to be
nearly 50% bigger than they were tucked beside the copy. */
.storyblock{max-width:760px;margin:52px auto 0;text-align:center}
.storyblock h2{margin-bottom:22px}
/* heading and photographs centre; the prose stays left-aligned inside a
centred measure. Centred body copy is hard to read at this length - the
eye loses the start of each line. */
/* left edge has to line up with the split's text column above, so the
measure is left-aligned inside the block rather than centred in it */
.storyblock > p{max-width:700px;margin-left:0;margin-right:auto;text-align:left}
/* her own words carry the action colour so they lift out of the paragraph */
.storyblock .qt{color:var(--red);font-style:italic}
.storyblock .storyclose{max-width:700px;margin:26px auto 22px 0;text-align:left;color:var(--ink)}
.thennow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:34px auto 30px;max-width:700px}
.thennow span{display:block}
.thennow img{width:100%;aspect-ratio:1;object-fit:cover;
border-radius:12px;box-shadow:var(--shadow)}
.thennow b{display:block;margin-top:12px;font-family:Archivo,sans-serif;font-weight:800;
font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);text-align:center}
.thennow i{display:block;margin-top:3px;font-style:normal;font-size:14px;
line-height:1.35;color:var(--muted);text-align:center}
@media(max-width:560px){.thennow{gap:12px}.thennow i{font-size:12.5px}}
/* The paired photos are half the height of the copy beside them, so left at
the top of the column they leave a void underneath. Centred, they sit
against the middle of her story instead. */
.split.midimg > .img{align-self:center}
/* the underline in the lede needs room, or it cuts the descenders */
.lede u{text-decoration-thickness:2px;text-underline-offset:5px;
text-decoration-color:var(--red)}
/* p carries a 64ch measure, so inside a 760px column the paragraphs sat left
of the heading above them. Centre the measure rather than widen it - the
line length is right, its position was not. */
.readerblock > p{margin-left:auto;margin-right:auto}
.readerblock .lede{max-width:none}
.readerblock .big{max-width:none;font-size:22px}
/* Four attempts, set as a list rather than a sentence. Countable beats
listed: seeing them stacked is what makes "I have tried" feel earned,
and it breaks the longest run of unbroken text on the page. */
.tried{list-style:none;margin:14px 0 20px;padding:0;
max-width:var(--measure);margin-left:auto;margin-right:auto;
display:grid;gap:10px}
.tried li{position:relative;padding-left:32px;line-height:1.45}
.tried li::before{content:"\2715";position:absolute;left:5px;top:1px;
color:var(--red);font-weight:800;font-size:14px}
/* the progression is a group, not a row of columns - centre it under the copy */
.progression{justify-content:center}
/* the celebration photo needs air before the headline lands on it */
.closepic{border-radius:12px;margin:0 auto 40px;box-shadow:var(--shadow)}
/* .lede is capped at 30ch for headline-style lines; the close's centred lede
is a sentence, so it needs room or it breaks in the wrong places */
.band.close .lede{max-width:620px;text-wrap:balance}