/* ══════════════════════════════════════════════════════════════════════════
   css/fertility-age-test.css — THE FERTILITY AGE TEST  (fw-fg)
   /fertility-age-test, built 30 Sep 2026.

   NOT fw-fa: css/font-icons.css styles [class*="fa-"] as an icon
   (inline-block, and every ::before), so a prefix holding "fa-" turned
   <body> inline-block and the page 1135px wide on a phone. The same goes
   for "bi-" and "uil-".

   ITS OWN PAGE. Same tokens, gutters, masthead band, ambient light and
   no-cards rule as every page; its own devices:
     §1  a QUIZ, one question at a time (progress bar, dots, big answers),
         beside a live DIAL that puts your age and your fertility age on
         one arc, the chance within a year and when to see a specialist
     §2  eggs over a lifetime as SHRINKING EGGS on one line
     §3  the chance by age as a ROW per age, yours in pink
     §4  six lifestyle changes with 3D icons
     §5  tests beside a photograph
     §6  when to see a specialist: a three-step LADDER beside a photograph
     §7  questions and the close
     §8  "Please read"

   PALETTE: mint carries this page (areas and fills only; its text colour
   is --mt-ink, its button colour --mt-dd); pink marks you and the action;
   gold and coral finish the dial. Photographs are whole. No inline styles.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */
.fw-fg-page{
	--pad:28px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 10%, transparent);
	--fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
	--fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
	--sec:clamp(30px, 5vh, 56px);
	--gap:clamp(28px, 5vw, 80px);
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-pop:cubic-bezier(.34,1.56,.64,1);
	background:var(--wh);
}
.fw-fg{display:block;position:relative;background:var(--wh)}
.fw-fg em{font-family:var(--ff);font-style:normal}
.fw-fg-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.fw-fg-sec{position:relative;padding:var(--sec) 0}
.fw-fg-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)}
.fw-fg-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(16px, 2.6vh, 28px)}
.fw-fg-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap}
.fw-fg-head--row > div{display:flex;flex-direction:column;gap:8px}
.fw-fg-head--row > .fw-fg-sub{flex:1 1 320px;max-width:560px;text-align:right}
.fw-fg-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-ink)}
.fw-fg-eyebrow .fw-ico{width:16px;height:16px;flex:none}
.fw-fg-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.fw-fg-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.fw-fg-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-fg-src{margin:0;font-size:12.5px;color:var(--g5)}
.fw-fg-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-fg-chip{padding:3px 10px;border-radius:999px;background:var(--mt-dd);color:var(--wh);font-size:10.5px;letter-spacing:.06em}
.fw-js .fw-fg.is-live .fw-fg-chip{display:none}
.fw-fg-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;background:var(--mt-dd);color:var(--wh);font-size:14.5px;font-weight:600;transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)}
.fw-fg-btn:hover{background:var(--dk-d);color:var(--wh)}
.fw-fg-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)}
.fw-fg-btn--pk:hover{background:var(--pk-dd);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)}
.fw-fg-btn .bi-arrow-right{transition:transform .25s var(--ease)}
.fw-fg-btn:hover .bi-arrow-right{transform:translateX(4px)}
.fw-fg-link{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;font-size:14px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease), opacity .2s var(--ease)}
.fw-fg-link:hover{color:var(--pk-dd)}
.fw-fg-link:disabled{opacity:.3;pointer-events:none}
.fw-fg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fw-fg-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-fg-drift 27s ease-in-out infinite}
.fw-fg-spot--m{top:6%;right:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--mt) 14%, transparent)}
.fw-fg-spot--p{bottom:-8%;left:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--pk) 10%, transparent);animation-duration:31s}
@keyframes fw-fg-drift{50%{transform:translate(26px, -20px) scale(1.06)}}
@keyframes fw-fg-float{50%{transform:translateY(-5px)}}
@keyframes fw-fg-in{from{opacity:0;transform:translateX(18px)}}
.fw-fg-pic{margin:0}
.fw-fg-pic img{display:block;width:100%;object-fit:cover}
.fw-fg-bar__track{fill:var(--g1)}
.fw-fg-bar__fill{fill:color-mix(in srgb, var(--mt) 80%, var(--wh));transition:width .6s var(--ease)}

/* ══════════════════════════════════════════════════════════════
   01 · THE TEST — one question at a time, the result beside it
   ══════════════════════════════════════════════════════════════ */
.fw-fg .fw-fg-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)}
.fw-fg-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px}
.fw-fg .fw-fg-h1{margin:0;font-size:clamp(34px, 5.8vh, 56px);letter-spacing:-.03em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--mt-dd) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-fg-lead{margin:8px 0 0;max-width:640px;font-size:clamp(15.5px, 2.1vh, 18px);line-height:1.55;color:var(--g6);text-wrap:pretty}
.fw-fg-lead b{color:var(--pk-dd)}
.fw-fg-title__side{display:grid;justify-items:end;gap:12px}
.fw-fg-title__art{display:flex}
.fw-fg-title__art img{width:clamp(52px, 7vh, 64px);aspect-ratio:1;object-fit:contain;padding:6px;border-radius:50%;background:var(--wh);box-shadow:0 8px 22px color-mix(in srgb, var(--mt) 22%, transparent), 0 0 0 3px var(--wh);animation:fw-fg-float 6s ease-in-out infinite}
.fw-fg-title__art img + img{margin-left:-12px}
.fw-fg-title__art img:nth-child(2){animation-delay:-2s}
.fw-fg-title__art img:nth-child(3){animation-delay:-4s}
.fw-fg-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none}
.fw-fg-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)}
.fw-fg-trust .bi{color:var(--mt-ink);font-size:14px}
.fw-fg-board{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:var(--gap);align-items:stretch;margin-top:clamp(18px, 3vh, 30px)}

/* the quiz */
.fw-fg-quiz{position:relative;display:flex;flex-direction:column;gap:clamp(14px, 2.2vh, 22px);min-width:0}
.fw-fg-prog p{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;font-size:13px;color:var(--g5)}
.fw-fg-prog b{font-size:14px;color:var(--mt-ink)}
.fw-fg-prog svg{display:block;width:100%;height:8px}
.fw-fg-prog__track{fill:var(--g1)}
.fw-fg-prog__fill{fill:var(--mt-d);transition:width .45s var(--ease)}
.fw-fg-q{display:grid;gap:12px;align-content:start;min-width:0;margin:0;padding:0;border:0}
.fw-js .fw-fg-q{display:none}
.fw-js .fw-fg-q.is-on{display:grid;flex:1;animation:fw-fg-in .4s var(--ease)}
html:not(.fw-js) .fw-fg-q + .fw-fg-q{padding-top:18px;border-top:1px solid var(--line)}
.fw-fg-q__h{display:flex;align-items:center;gap:16px;float:none;width:100%;margin:0;padding:0;font-family:var(--ff);font-size:clamp(22px, 3.4vh, 30px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.fw-fg-q__h img{width:clamp(56px, 8vh, 72px);aspect-ratio:1;object-fit:contain;flex:none;animation:fw-fg-float 6s ease-in-out infinite}
.fw-fg-q__help{margin:0;font-size:15px;line-height:1.55;color:var(--g6)}
.fw-fg-opts{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;margin-top:4px}
.fw-fg-opts button{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 18px;border-radius:16px;text-align:left;font-size:15.5px;font-weight:600;color:var(--ink);background:var(--mt-wash);box-shadow:inset 0 0 0 1.5px var(--mt-l2);transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)}
.fw-fg-opts button .bi{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;color:transparent;box-shadow:inset 0 0 0 1.5px var(--g5);transition:background .2s var(--ease), color .2s var(--ease)}
.fw-fg-opts button:hover{box-shadow:inset 0 0 0 1.5px var(--mt-d);transform:translateY(-1px)}
.fw-fg-opts button[aria-pressed="true"]{background:var(--mt-dd);color:var(--wh);box-shadow:0 10px 22px color-mix(in srgb, var(--mt-dd) 24%, transparent)}
.fw-fg-opts button[aria-pressed="true"] .bi{background:var(--wh);color:var(--mt-dd);box-shadow:none}
.fw-fg-step{display:inline-flex;align-items:center;gap:12px}
.fw-fg-step button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:var(--ink);background:var(--mt-wash);box-shadow:inset 0 0 0 1.5px var(--mt-l2);transition:background .2s var(--ease), color .2s var(--ease)}
.fw-fg-step button:hover:not(:disabled){background:var(--mt-dd);color:var(--wh);box-shadow:none}
.fw-fg-step button:disabled{opacity:.3}
.fw-fg-step output{min-width:92px;text-align:center;font-size:34px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-fg-step output small{font-size:13px;font-weight:600;color:var(--g5)}
.fw-fg-step--big{gap:18px;margin-top:6px}
.fw-fg-step--big button{width:58px;height:58px;font-size:20px}
.fw-fg-step--big output{min-width:110px;font-size:clamp(56px, 9vh, 76px);letter-spacing:-.03em;line-height:1;color:var(--mt-dd)}
.fw-fg-step--big > span{font-size:15px;font-weight:600;color:var(--g5)}
.fw-fg-pair{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 36px;margin-top:4px}
.fw-fg-pair__l{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-fg-bmi{margin:0 0 10px;padding:5px 14px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:13.5px;font-weight:700}
.fw-fg-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:16px;position:relative}
.fw-fg-nav::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
html:not(.fw-js) .fw-fg-nav,html:not(.fw-js) .fw-fg-prog{display:none}
.fw-fg-sum{position:relative;display:grid;gap:10px;padding-top:14px}
.fw-fg-sum::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
html:not(.fw-js) .fw-fg-sum{display:none}
.fw-fg-sum ol{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:6px;margin:0;padding:0;list-style:none}
.fw-fg-sum button{display:grid;grid-template-columns:34px minmax(0, 1fr);align-items:center;gap:10px;width:100%;height:100%;padding:8px 10px;border-radius:14px;text-align:left;transition:background .2s var(--ease), box-shadow .2s var(--ease)}
.fw-fg-sum button:hover{background:var(--mt-wash)}
.fw-fg-sum button[aria-current="step"]{background:var(--mt-l);box-shadow:inset 0 0 0 1.5px var(--mt-d)}
.fw-fg-sum img{width:34px;aspect-ratio:1;object-fit:contain}
.fw-fg-sum span{display:grid;gap:1px;min-width:0}
.fw-fg-sum small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g5)}
.fw-fg-sum b{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
.fw-fg-sum button.is-done small{color:var(--mt-ink)}

/* the result */
.fw-fg-res{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.fw-fg-res::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)}
.fw-fg-dial{position:relative;width:min(100%, 340px);margin:0 auto}
.fw-fg-dial svg{display:block;width:100%;height:auto;overflow:visible}
.fw-fg-dial__track,.fw-fg-dial__fill{fill:none;stroke-width:16;stroke-linecap:round}
.fw-fg-dial__track{stroke:var(--g1)}
.fw-fg-dial__fill{stroke:url(#fw-fg-arc);transition:stroke-dasharray .7s var(--ease)}
.fw-fg-stop.is-a{stop-color:var(--mt-d)}
.fw-fg-stop.is-b{stop-color:var(--go)}
.fw-fg-stop.is-c{stop-color:var(--co)}
.fw-fg-dial__you{fill:var(--wh);stroke:var(--dk-d);stroke-width:3;transition:cx .6s var(--ease), cy .6s var(--ease)}
.fw-fg-dial__fa{fill:var(--pk-d);stroke:var(--wh);stroke-width:4;filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--pk) 40%, transparent));transition:cx .6s var(--ease), cy .6s var(--ease)}
.fw-fg-dial__t{fill:var(--g5);font-size:11px;font-weight:700;text-anchor:middle}
.fw-fg-dial figcaption{position:absolute;left:0;right:0;bottom:6%;display:flex;flex-direction:column;align-items:center;line-height:.9}
.fw-fg-dial figcaption b{padding:0 .06em;font-size:clamp(64px, 10vh, 92px);font-weight:700;letter-spacing:-.05em;background:linear-gradient(160deg, var(--pk) 10%, var(--pk-dd));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.fw-fg-dial figcaption span{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-fg-diff{margin:0;text-align:center;font-size:18px;font-weight:700;color:var(--ink)}
.fw-fg-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:-6px 0 0;font-size:13px;color:var(--g6)}
.fw-fg-keys > span{display:inline-flex;align-items:center;gap:7px}
.fw-fg-keys i{width:12px;height:12px;border-radius:50%}
.fw-fg-keys .is-you i{background:var(--wh);box-shadow:inset 0 0 0 3px var(--dk-d)}
.fw-fg-keys .is-fa i{background:var(--pk-d)}
.fw-fg-chance{position:relative;display:grid;gap:10px;padding-top:14px}
.fw-fg-chance::before,.fw-fg-see::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-fg-chance ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.fw-fg-chance li{display:grid;grid-template-columns:110px minmax(0, 1fr) 48px;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--g6)}
.fw-fg-chance li svg{display:block;width:100%;height:14px}
.fw-fg-chance li b{text-align:right;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-fg-chance .is-you .fw-fg-bar__fill{fill:var(--pk-d)}
.fw-fg-chance .is-you b{color:var(--pk-dd)}
.fw-fg-lowers{margin:0;font-size:14px;line-height:1.5;color:var(--g6)}
.fw-fg-lowers b{color:var(--ink)}
.fw-fg-see{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:10px 14px;padding-top:14px}
.fw-fg-see > .bi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mt-l);color:var(--mt-ink);font-size:20px}
.fw-fg-see.is-soon > .bi{background:var(--go-l);color:var(--go-ink)}
.fw-fg-see.is-now > .bi{background:var(--pk-l);color:var(--pk-dd)}
.fw-fg-see p{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);text-wrap:pretty}
.fw-fg-see .fw-fg-btn{grid-column:1 / -1;justify-self:start}
.fw-fg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:auto 0 0;font-size:12.5px;color:var(--g5)}
.fw-fg-foot button{padding:0;background:none;font-size:12.5px;font-weight:700;color:var(--co-ink);text-decoration:underline;text-underline-offset:2px}
.fw-fg-foot button[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════
   02 · EGGS OVER A LIFETIME — four eggs, each smaller
   ══════════════════════════════════════════════════════════════ */
.fw-fg-eggs{background:linear-gradient(180deg, var(--mt-wash), var(--wh))}
/* The line draws itself left to right when the section comes into view,
   each egg pops onto its node in turn and then floats; a light keeps
   travelling along the line. --ln is the line's height from the top. */
.fw-fg-life{--ln:150px;position:relative}
.fw-fg-life ol{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(18px, 3vw, 48px);margin:0;padding:0;list-style:none}
.fw-fg-life__track{position:absolute;left:0;right:0;top:calc(var(--ln) - 3px);height:6px;border-radius:999px;overflow:visible;background:linear-gradient(90deg, var(--mt-d), var(--go) 62%, var(--co));transform-origin:left center;transition:transform 1.4s var(--ease)}
.fw-fg-life__track::before{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;filter:blur(8px);opacity:.45}
.fw-fg-life__track i{position:absolute;top:-3px;left:0;width:90px;height:12px;border-radius:999px;background:radial-gradient(closest-side, var(--wh), transparent);animation:fw-fg-travel 5s var(--ease) 1.6s infinite}
.fw-fg-life__track::after{content:"";position:absolute;right:-2px;top:50%;width:12px;height:12px;border-top:3px solid var(--co);border-right:3px solid var(--co);transform:translateY(-50%) rotate(45deg)}
.fw-fg-life__track em{position:absolute;right:0;top:14px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--co-ink)}
@keyframes fw-fg-travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 90px);opacity:0}}
.fw-fg-life li{position:relative;display:grid;gap:4px;align-content:start}
.fw-fg-life__egg{position:relative;justify-self:start;display:flex;align-items:flex-end;justify-content:center;height:var(--ln);padding-bottom:22px;margin-bottom:30px}
.fw-fg-life__egg::before{content:"";position:absolute;left:50%;bottom:22px;width:150%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side, var(--fg-glow), transparent);transform:translate(-50%, 25%);animation:fw-fg-glow 4s ease-in-out infinite}
.fw-fg-life__egg::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 5px var(--fg-node), 0 0 0 0 var(--fg-ring);transform:translateX(-50%);animation:fw-fg-ping 2.6s ease-out infinite}
.fw-fg-life__egg img{position:relative;aspect-ratio:1;object-fit:contain;animation:fw-fg-float 5s ease-in-out infinite;transition:transform .35s var(--ease-pop)}
.fw-fg-life .is-e1{--fg-node:var(--mt-d);--fg-ring:var(--mt-ring);--fg-glow:var(--mt-t2)}
.fw-fg-life .is-e2{--fg-node:color-mix(in srgb, var(--mt-d) 45%, var(--go));--fg-ring:var(--mt-ring);--fg-glow:var(--mt-t)}
.fw-fg-life .is-e3{--fg-node:var(--go);--fg-ring:var(--go-ring);--fg-glow:var(--go-t2)}
.fw-fg-life .is-e4{--fg-node:var(--co);--fg-ring:var(--co-ring);--fg-glow:var(--co-t2)}
.fw-fg-life .is-e1 img{width:124px}
.fw-fg-life .is-e2 img{width:90px}
.fw-fg-life .is-e3 img{width:60px;opacity:.92}
.fw-fg-life .is-e4 img{width:36px;opacity:.8}
.fw-fg-life li:nth-child(2) img,.fw-fg-life li:nth-child(2) .fw-fg-life__egg::after{animation-delay:-1.2s}
.fw-fg-life li:nth-child(3) img,.fw-fg-life li:nth-child(3) .fw-fg-life__egg::after{animation-delay:-2.4s}
.fw-fg-life li:nth-child(4) img,.fw-fg-life li:nth-child(4) .fw-fg-life__egg::after{animation-delay:-3.6s}
.fw-fg-life li > *{transition:opacity .6s var(--ease), transform .7s var(--ease-pop)}
.fw-fg-life li:nth-child(2) > *{transition-delay:.25s}
.fw-fg-life li:nth-child(3) > *{transition-delay:.5s}
.fw-fg-life li:nth-child(4) > *{transition-delay:.75s}
.fw-js .fw-fg-life:not(.is-in) .fw-fg-life__track{transform:scaleX(0)}
.fw-js .fw-fg-life:not(.is-in) li > *{opacity:0;transform:translateY(18px)}
.fw-js .fw-fg-life:not(.is-in) .fw-fg-life__egg{transform:translateY(24px) scale(.6)}
@keyframes fw-fg-ping{0%{box-shadow:inset 0 0 0 5px var(--fg-node), 0 0 0 0 var(--fg-ring)}70%,100%{box-shadow:inset 0 0 0 5px var(--fg-node), 0 0 0 14px transparent}}
@keyframes fw-fg-glow{50%{opacity:.55}}
.fw-fg-life__when{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-ink)}
.fw-fg-life__n{margin:0;font-family:var(--ff);font-size:clamp(20px, 3vh, 26px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.fw-fg-life p:last-child{margin:0;font-size:14.5px;line-height:1.55;color:var(--g6)}

/* ══════════════════════════════════════════════════════════════
   03 · YOUR CHANCE BY AGE — a row per age
   ══════════════════════════════════════════════════════════════ */
.fw-fg-age__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:var(--gap);align-items:center}
.fw-fg-age .fw-fg-head{margin:0}
.fw-fg-rows{display:grid;margin:0;padding:0;list-style:none}
.fw-fg-row{position:relative;display:grid;grid-template-columns:72px minmax(0, 1fr) 96px 48px;align-items:center;gap:14px;padding:6px 0}
.fw-fg-row + .fw-fg-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-fg-row__age{font-size:14.5px;font-weight:700;color:var(--g7)}
.fw-fg-row svg{display:block;width:100%;height:40px}
.fw-fg-row b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-fg-row__tag{visibility:hidden;justify-self:start;padding:3px 10px;border-radius:999px;background:var(--pk-d);color:var(--wh);font-size:11.5px;font-weight:700;letter-spacing:.04em}
.fw-fg-row.is-you .fw-fg-bar__fill{fill:var(--pk-d);filter:drop-shadow(0 6px 12px color-mix(in srgb, var(--pk) 30%, transparent))}
.fw-fg-row.is-you b,.fw-fg-row.is-you .fw-fg-row__age{color:var(--pk-dd)}
.fw-fg-row.is-you .fw-fg-row__tag{visibility:visible}

/* ══════════════════════════════════════════════════════════════
   04 · WHAT YOU CAN CHANGE — six icons
   ══════════════════════════════════════════════════════════════ */
.fw-fg-tips{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:1fr;gap:0 clamp(22px, 3.4vw, 56px);margin:0;padding:0;list-style:none}
.fw-fg-tips li{position:relative;display:grid;grid-template-columns:64px minmax(0, 1fr);grid-template-rows:auto 1fr;gap:4px 16px;align-content:start;padding:18px 0}
.fw-fg-tips li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-fg-tips img{grid-row:1 / 3;width:64px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)}
.fw-fg-tips li:hover img{transform:translateY(-3px) rotate(-5deg)}
.fw-fg-tips .fw-fg-h3{align-self:end}
.fw-fg-tips p{margin:0;font-size:14.5px;line-height:1.55;color:var(--g6)}

/* ══════════════════════════════════════════════════════════════
   05–06 · TESTS AND WHEN TO SEE A SPECIALIST — beside photographs
   ══════════════════════════════════════════════════════════════ */
.fw-fg-split{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:var(--gap);align-items:stretch}
.fw-fg-split--flip{grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr)}
.fw-fg-split > div{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fw-fg-split .fw-fg-pic{position:relative;min-height:360px}
.fw-fg-split .fw-fg-pic img{position:absolute;inset:0;height:100%}
.fw-fg-tests{background:linear-gradient(180deg, var(--bl-wash), var(--wh))}
.fw-fg-testlist{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;gap:0 clamp(18px, 2.6vw, 40px);margin:0 0 16px;padding:0;list-style:none}
.fw-fg-testlist li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:14px;align-items:start;padding:16px 0}
.fw-fg-testlist li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-fg-testlist img{width:52px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)}
.fw-fg-testlist li:hover img{transform:translateY(-3px) rotate(-5deg)}
.fw-fg-testlist p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--g6)}
.fw-fg-ladder{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));align-items:end;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.fw-fg-ladder li{display:grid;align-content:start;gap:4px;padding:16px 16px 14px;border-radius:16px 16px 0 0}
.fw-fg-ladder .is-w1{min-height:120px;background:var(--mt-l)}
.fw-fg-ladder .is-w2{min-height:150px;background:var(--go-l)}
.fw-fg-ladder .is-w3{min-height:180px;background:var(--pk-l)}
.fw-fg-ladder b{font-family:var(--ff);font-size:clamp(20px, 2.9vh, 25px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.fw-fg-ladder span{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--g7)}
.fw-fg-sooner__h{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-fg-sooner{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:4px clamp(18px, 2.4vw, 32px);margin:0;padding:0;list-style:none}
.fw-fg-sooner li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:14.5px;line-height:1.5;color:var(--g7)}
.fw-fg-sooner .bi{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:var(--mt-l);color:var(--mt-ink);font-size:13px}

/* ══════════════════════════════════════════════════════════════
   07 · QUESTIONS AND THE CLOSE
   ══════════════════════════════════════════════════════════════ */
.fw-fg-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))}
.fw-fg-faq__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:var(--gap);align-items:start}
.fw-fg-faq__side{display:grid;gap:20px}
.fw-fg-faq__side .fw-fg-head{margin:0}
.fw-fg-faq__close{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:18px;align-items:start}
.fw-fg-faq__close > img{width:clamp(72px, 10vh, 92px);aspect-ratio:1;object-fit:contain;animation:fw-fg-float 6s ease-in-out infinite}
.fw-fg-faq__close > div{display:grid;gap:8px}
.fw-fg-faq__close .fw-fg-h3{font-size:clamp(20px, 2.9vh, 25px);line-height:1.25;text-wrap:balance}
.fw-fg-faq__close p{margin:0;font-size:15px;line-height:1.6;color:var(--g6)}
.fw-fg-close__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px}
.fw-fg-nums{display:grid;margin:0;padding:0;list-style:none}
.fw-fg-nums li{position:relative;display:grid;grid-template-columns:112px minmax(0, 1fr);align-items:baseline;gap:14px;padding:12px 0}
.fw-fg-nums li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-fg-nums b{font-size:clamp(19px, 2.7vh, 23px);font-weight:700;letter-spacing:-.01em;color:var(--pk-dd);white-space:nowrap}
.fw-fg-nums span{font-size:14px;line-height:1.5;color:var(--g6)}
.fw-fg-qa details{position:relative}
.fw-fg-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-fg-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;cursor:pointer;font-size:16.5px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)}
.fw-fg-qa summary::-webkit-details-marker{display:none}
.fw-fg-qa summary:hover,.fw-fg-qa details[open] summary{color:var(--mt-ink)}
.fw-fg-qa summary .bi{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--mt-l);color:var(--mt-ink);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)}
.fw-fg-qa details[open] summary .bi{transform:rotate(45deg);background:var(--mt-dd);color:var(--wh)}
.fw-fg-qa p{margin:0 48px 16px 0;font-size:15px;line-height:1.65;color:var(--g6)}

/* ══════════════════════════════════════════════════════════════
   08 · PLEASE READ
   ══════════════════════════════════════════════════════════════ */
.fw-fg-disc{background:color-mix(in srgb, var(--dk) 3%, var(--wh))}
.fw-fg-disc__grid{display:grid;grid-template-columns:minmax(0, .55fr) minmax(0, 1.45fr);gap:clamp(24px, 4vw, 64px);align-items:start}
.fw-fg-disc__head{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px}
.fw-fg-disc__ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mt-dd);color:var(--wh);font-size:21px}
.fw-fg-disc__h{margin:0;font-family:var(--ff);font-size:clamp(18px, 2.5vh, 22px);font-weight:600;line-height:1.3;color:var(--ink)}
.fw-fg-disc__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px clamp(20px, 3vw, 44px);margin:0;padding:0;list-style:none}
.fw-fg-disc__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--g6)}
.fw-fg-disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--mt-d)}

/* ══════════════════════════════════════════════════════════════
   09 · RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1200px){
	.fw-fg-tips{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-fg-sooner{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:1024px){
	.fw-fg-title,.fw-fg-board,.fw-fg-age__grid,.fw-fg-split,.fw-fg-split--flip,.fw-fg-faq__grid,.fw-fg-disc__grid{grid-template-columns:minmax(0, 1fr)}
	.fw-fg-title__side{justify-items:start}
	.fw-fg-trust{justify-content:flex-start}
	.fw-fg-res{padding-top:20px}
	.fw-fg-res::before{left:0;right:0;bottom:auto;width:auto;height:1px;background:var(--fade)}
	.fw-fg-life ol{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:28px}
	.fw-fg-life__track{display:none}
	.fw-fg-life__egg{margin-bottom:12px}
	.fw-fg-life__egg::after{display:none}
	.fw-fg-head--row{align-items:flex-start}
	.fw-fg-head--row > .fw-fg-sub{text-align:left}
	.fw-fg-split .fw-fg-pic{min-height:0}
	.fw-fg-split .fw-fg-pic img{position:static;height:auto;aspect-ratio:16/9}
	.fw-fg-split--flip .fw-fg-pic{order:-1}
	.fw-fg-spot{filter:blur(50px)}
	/* Stacked, the questions come before the last word. */
	.fw-fg-faq__side{display:contents}
	.fw-fg-faq__side .fw-fg-head{order:1}
	.fw-fg-qa{order:2}
	.fw-fg-faq__close{order:3}
	.fw-fg-nums{order:4}
}
@media (max-width:640px){
	.fw-fg-page{--pad:14px}
	.fw-fg .fw-fg-h1{font-size:clamp(30px, 8.6vw, 40px)}
	.fw-fg-title__art{display:none}
	.fw-fg-h2{font-size:clamp(24px, 6.6vw, 30px)}
	.fw-fg-q__h{font-size:22px;gap:12px}
	.fw-fg-q__h img{width:52px}
	.fw-fg-opts{grid-template-columns:minmax(0, 1fr)}
	.fw-fg-opts button{min-height:52px}
	.fw-fg-step{gap:8px}
	.fw-fg-step output{min-width:80px;font-size:28px}
	.fw-fg-step--big output{font-size:56px}
	.fw-fg-sum button{grid-template-columns:minmax(0, 1fr);padding:7px 8px}
	.fw-fg-sum img{display:none}
	.fw-fg-sum small{font-size:10px;letter-spacing:.03em}
	.fw-fg-sum b{font-size:12.5px}
	.fw-fg-nav .fw-fg-btn{padding:0 18px}
	.fw-fg-chance li{grid-template-columns:96px minmax(0, 1fr) 44px;gap:8px;font-size:13px}
	.fw-fg-life{--ln:118px}
	.fw-fg-life .is-e1 img{width:96px}
	.fw-fg-life .is-e2 img{width:74px}
	.fw-fg-row{grid-template-columns:58px minmax(0, 1fr) 82px;gap:8px}
	.fw-fg-row__tag{display:none}
	.fw-fg-row b{font-size:15px}
	.fw-fg-tips,.fw-fg-testlist,.fw-fg-disc__list{grid-template-columns:minmax(0, 1fr)}
	.fw-fg-tips,.fw-fg-testlist{grid-auto-rows:auto}
	.fw-fg-ladder li{padding:12px 10px}
	.fw-fg-ladder b{font-size:17px}
	.fw-fg-ladder span{font-size:13px}
	.fw-fg-faq__close{grid-template-columns:minmax(0, 1fr)}
	.fw-fg-faq__close > img{width:64px}
	.fw-fg-qa p{margin-right:0}
}
@media (prefers-reduced-motion:reduce){
	.fw-fg-spot,.fw-fg-title__art img,.fw-fg-q__h img,.fw-fg-faq__close > img,.fw-fg-life__egg img,.fw-fg-life__egg::before,.fw-fg-life__egg::after,.fw-fg-life__track i{animation:none}
	.fw-fg-life__track,.fw-fg-life li > *{transition:none}
	.fw-js .fw-fg-q.is-on{animation:none}
}