/* ══════════════════════════════════════════════════════════════════════════ css/ivf-success-predictor.css — THE IVF SUCCESS PREDICTOR (fw-sp) /ivf-success-predictor, built 30 Sep 2026. ITS OWN PAGE. Same tokens, gutters, masthead band, ambient light and no-cards rule as every page; its own devices: §1 the ANSWER FIRST: a big percentage, 100 people with the likely ones filled, the chance within 1 to 3 cycles, beside the questions as chips and steppers §2 how it was worked out: a DIVERGING BAR per answer §3 success by age: a COLUMN per age band and donor eggs, yours in pink §4 what helps: a real lab photograph beside two lists §5 six questions to ask a clinic §6 questions beside a hopeful photograph §7 "Please read" PALETTE: blue carries the medicine and is this page's colour; pink is the hope and the action; mint raises, coral lowers. Photographs are square and whole. No inline styles. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-sp-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); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-sp{display:block;position:relative;background:var(--wh)} .fw-sp em{font-family:var(--ff);font-style:normal} .fw-sp-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-sp-sec{position:relative;padding:var(--sec) 0} .fw-sp-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-sp-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(16px, 2.6vh, 28px)} .fw-sp-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-sp-head--row > .fw-sp-sub{flex:1 1 320px;max-width:560px;text-align:right} .fw-sp-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(--bl-d)} .fw-sp-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-sp-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-sp-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-sp-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-sp-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-sp-chip{padding:3px 10px;border-radius:999px;background:var(--bl-d);color:var(--wh);font-size:10.5px;letter-spacing:.06em} .fw-js .fw-sp.is-live .fw-sp-chip{display:none} .fw-sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .fw-sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;background:var(--bl-d);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-sp-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)} .fw-sp-btn--pk:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-sp-btn .bi-arrow-right{transition:transform .25s var(--ease)} .fw-sp-btn:hover .bi-arrow-right{transform:translateX(4px)} .fw-sp-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)} .fw-sp-link:hover{color:var(--pk-dd)} .fw-sp-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fw-sp-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-sp-drift 27s ease-in-out infinite} .fw-sp-spot--b{top:4%;right:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--bl) 10%, transparent)} .fw-sp-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-sp-drift{50%{transform:translate(26px, -20px) scale(1.06)}} @keyframes fw-sp-float{50%{transform:translateY(-5px)}} .fw-sp-pic{margin:0} .fw-sp-pic img{display:block;width:100%;object-fit:cover} /* ══════════════════════════════════════════════════════════════ 01 · THE ESTIMATE — the answer first, the questions beside it ══════════════════════════════════════════════════════════════ */ .fw-sp .fw-sp-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-sp-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-sp .fw-sp-h1{margin:0;font-size:clamp(34px, 5.8vh, 56px);letter-spacing:-.03em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--bl-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent} .fw-sp-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-sp-lead b{color:var(--pk-dd)} .fw-sp-title__side{display:grid;justify-items:end;gap:12px} .fw-sp-title__art{display:flex} .fw-sp-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(--bl) 16%, transparent), 0 0 0 3px var(--wh);animation:fw-sp-float 6s ease-in-out infinite} .fw-sp-title__art img + img{margin-left:-12px} .fw-sp-title__art img:nth-child(2){animation-delay:-2s} .fw-sp-title__art img:nth-child(3){animation-delay:-4s} .fw-sp-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-sp-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-sp-trust .bi{color:var(--bl-d);font-size:14px} .fw-sp-board{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);gap:clamp(28px, 5vw, 80px);align-items:stretch;margin-top:clamp(18px, 3vh, 30px)} /* the answer */ .fw-sp-ans{display:flex;flex-direction:column;justify-content:space-between;gap:16px} .fw-sp-hero{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px} .fw-sp-big{display:flex;align-items:flex-start;margin:0;line-height:.9} .fw-sp-big b{font-size:clamp(84px, 13vh, 132px);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-sp-big span{margin-top:.35em;font-size:clamp(30px, 4.4vh, 44px);font-weight:700;color:var(--pk-dd)} .fw-sp-range{margin:0;display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--pk-l);color:var(--pk-dd);font-size:13.5px;font-weight:700} .fw-sp-say{margin:0;font-size:17px;line-height:1.55;color:var(--g7);text-wrap:pretty} .fw-sp-say b{color:var(--pk-dd)} .fw-sp-people{display:block;width:100%;height:auto} .fw-sp-people use{fill:var(--g2);transition:fill .35s var(--ease)} .fw-sp-people use.is-on{fill:var(--pk-d)} .fw-sp-cum{display:grid;gap:8px;padding-top:12px;position:relative} .fw-sp-cum::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-cum ol{display:grid;gap:8px;margin:0;padding:0;list-style:none} .fw-sp-cum li{display:grid;grid-template-columns:118px minmax(0, 1fr) 52px;align-items:center;gap:12px;font-size:14px;color:var(--g6)} .fw-sp-cum li svg{grid-column:2;grid-row:1;display:block;width:100%;height:14px} .fw-sp-cum li span{grid-column:1;grid-row:1;font-weight:600} .fw-sp-cum li b{grid-column:3;grid-row:1;text-align:right;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums} .fw-sp-cum__track{fill:var(--g1)} .fw-sp-cum__fill{fill:var(--bl);transition:width .6s var(--ease)} .fw-sp-cum li:nth-child(2) .fw-sp-cum__fill{fill:var(--bl-d)} .fw-sp-cum li:nth-child(3) .fw-sp-cum__fill{fill:var(--pk-d)} .fw-sp-avg{margin:0;font-size:14px;color:var(--g6)} .fw-sp-avg a{margin-left:6px;font-weight:700;color:var(--bl-d);text-decoration:underline;text-underline-offset:2px} /* the questions */ .fw-sp-ask{position:relative;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:4px clamp(18px, 2.4vw, 32px);margin:0} .fw-sp-ask::before{content:"";position:absolute;left:calc(clamp(28px, 5vw, 80px) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-sp-q{position:relative;display:grid;gap:9px;align-content:start;padding:12px 0} .fw-sp-q::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-q[data-sp-q="cause"],.fw-sp-q[data-sp-q="amh"]{grid-column:1 / -1} .fw-sp-q[hidden]{display:none} .fw-sp-q__l{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink)} .fw-sp-q__l img{width:30px;aspect-ratio:1;object-fit:contain} .fw-sp-q__l small{font-size:12px;font-weight:600;color:var(--g5)} .fw-sp-chips{display:flex;flex-wrap:wrap;gap:6px} .fw-sp-chips button{height:34px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)} .fw-sp-chips button:hover{box-shadow:inset 0 0 0 1.5px var(--bl)} .fw-sp-chips button[aria-pressed="true"]{background:var(--bl-d);color:var(--wh);box-shadow:none} .fw-sp-step{display:inline-flex;align-items:center;gap:10px} .fw-sp-step button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s var(--ease), color .2s var(--ease)} .fw-sp-step button:hover:not(:disabled){background:var(--bl);color:var(--wh);box-shadow:none} .fw-sp-step button:disabled{opacity:.3} .fw-sp-step output{min-width:56px;text-align:center;font-size:30px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .fw-sp-step--sm{gap:6px} .fw-sp-step--sm button{width:32px;height:32px;font-size:12px} .fw-sp-step--sm output{min-width:66px;font-size:18px} .fw-sp-step output small{font-size:12px;font-weight:600;color:var(--g5)} .fw-sp-pair{display:flex;flex-wrap:wrap;gap:8px 16px} .fw-sp-ask__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 0;font-size:12.5px;color:var(--g5)} .fw-sp-ask__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-sp-ask__foot button[hidden]{display:none} /* ══════════════════════════════════════════════════════════════ 02 · HOW WE WORKED IT OUT — a diverging bar per answer ══════════════════════════════════════════════════════════════ */ .fw-sp-how{background:linear-gradient(180deg, color-mix(in srgb, var(--bl) 4%, var(--wh)), var(--wh))} .fw-sp-how__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(28px, 5vw, 80px);align-items:center} .fw-sp-method{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:m} .fw-sp-method li{position:relative;display:grid;gap:2px;padding-left:50px;counter-increment:m;font-size:14.5px;line-height:1.55;color:var(--g6)} .fw-sp-method li::before{content:counter(m);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bl-d);color:var(--wh);font-size:15px;font-weight:700} .fw-sp-method b{font-size:16px;color:var(--ink)} .fw-sp-effects{margin:0} .fw-sp-effects__base{margin:0 0 12px;font-size:16px;color:var(--g7)} .fw-sp-effects__base b{font-size:20px;color:var(--bl-d)} .fw-sp-effects__axis,.fw-sp-effects__rows li{display:grid;grid-template-columns:200px minmax(0, 1fr) 76px;align-items:center;column-gap:14px} .fw-sp-effects__axis{padding-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g5)} .fw-sp-effects__axis span:nth-child(1){grid-column:2;grid-row:1;justify-self:start;color:var(--co-ink)} .fw-sp-effects__axis span:nth-child(2){grid-column:2;grid-row:1;justify-self:center} .fw-sp-effects__axis span:nth-child(3){grid-column:2;grid-row:1;justify-self:end;color:var(--mt-ink)} .fw-sp-effects__rows{margin:0;padding:0;list-style:none} .fw-sp-effects__rows li{position:relative;min-height:54px} .fw-sp-effects__rows li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-effects__l{display:grid;line-height:1.3} .fw-sp-effects__l b{font-size:14.5px;color:var(--ink)} .fw-sp-effects__l small{font-size:12.5px;color:var(--g5)} .fw-sp-effects__rows svg{display:block;width:100%;height:34px} .fw-sp-effects__rows line{stroke:var(--g2);stroke-width:2} .fw-sp-effects__rows rect{fill:var(--g3);transition:x .5s var(--ease), width .5s var(--ease)} .fw-sp-effects__rows li.is-down rect{fill:var(--co)} .fw-sp-effects__rows li.is-up rect{fill:var(--mt-d)} .fw-sp-effects__rows em{text-align:right;font-size:13px;white-space:nowrap;font-weight:700;color:var(--g5)} .fw-sp-effects__rows li.is-down em{color:var(--co-ink)} .fw-sp-effects__rows li.is-up em{color:var(--mt-ink)} .fw-sp-effects figcaption{margin-top:10px;font-size:12.5px;color:var(--g5)} /* ══════════════════════════════════════════════════════════════ 03 · SUCCESS BY AGE — the line, the donor line and you ══════════════════════════════════════════════════════════════ */ .fw-sp-age__grid{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);gap:clamp(28px, 5vw, 80px);align-items:center} .fw-sp-cols{margin:0;min-width:0} .fw-sp-cols__box{position:relative;height:clamp(280px, 42vh, 400px);margin:36px 0 0 40px} .fw-sp-cols__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .fw-sp-cols__grid{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5} .fw-sp-cols__yt{fill:var(--g5);font-size:11.5px;font-weight:600;text-anchor:end;transform:translateX(-10px)} .fw-sp-col__bar{fill:color-mix(in srgb, var(--bl) 70%, var(--wh));transition:fill .3s var(--ease)} .fw-sp-col.is-donor .fw-sp-col__bar{fill:color-mix(in srgb, var(--mt) 75%, var(--wh))} .fw-sp-col.is-you .fw-sp-col__bar{fill:var(--pk-d);filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--pk) 35%, transparent))} .fw-sp-col__v{fill:var(--ink);font-size:clamp(15px, 2.2vh, 19px);font-weight:700;text-anchor:middle} .fw-sp-col.is-you .fw-sp-col__v{fill:var(--pk-dd)} .fw-sp-col__you{visibility:hidden} .fw-sp-col__you rect{fill:var(--pk-d);transform-box:fill-box;transform:translate(-50%, -52px)} .fw-sp-col__you text{fill:var(--wh);font-size:12px;font-weight:700;letter-spacing:.04em;text-anchor:middle} .fw-sp-col.is-you .fw-sp-col__you{visibility:visible} .fw-sp-cols__x{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));margin:10px 0 0 40px;padding-top:10px;position:relative;font-size:12.5px;font-weight:700;color:var(--g6);text-align:center} .fw-sp-cols__x::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--line)} .fw-sp-cols figcaption{margin:12px 0 0 40px;font-size:12.5px;color:var(--g5)} .fw-sp-why{margin:0;padding:0;list-style:none} .fw-sp-why li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:16px;align-items:start;padding:16px 0} .fw-sp-why li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-why img{width:52px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-sp-why li:hover img{transform:translateY(-3px) rotate(-5deg)} .fw-sp-why p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · WHAT HELPS — a lab photograph beside two lists ══════════════════════════════════════════════════════════════ */ .fw-sp-help{background:linear-gradient(180deg, color-mix(in srgb, var(--mt) 4%, var(--wh)), var(--wh))} .fw-sp-help__grid{display:grid;grid-template-columns:minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1fr);gap:clamp(22px, 3.4vw, 56px);align-items:stretch} .fw-sp-help .fw-sp-pic{position:relative;min-height:320px} .fw-sp-help .fw-sp-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fw-sp-list{display:flex;flex-direction:column} .fw-sp-list ul{flex:1;display:flex;flex-direction:column;justify-content:space-between} .fw-sp-list__h{display:flex;align-items:center;gap:10px;min-height:28px;margin:0 0 6px;font-family:var(--ff);font-size:18px;font-weight:700;color:var(--ink)} .fw-sp-list__h::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mt-d)} .fw-sp-list.is-clinic .fw-sp-list__h::before{background:var(--bl-d)} .fw-sp-list ul{margin:0;padding:0;list-style:none} .fw-sp-list li{position:relative;display:grid;grid-template-columns:48px minmax(0, 1fr);gap:14px;align-items:start;padding:14px 0} .fw-sp-list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-list img{width:48px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-sp-list li:hover img{transform:translateY(-3px) rotate(-5deg)} .fw-sp-list h4{margin:0;font-family:var(--ff);font-size:16px;font-weight:600;color:var(--ink)} .fw-sp-list p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · ASK YOUR CLINIC — six questions ══════════════════════════════════════════════════════════════ */ .fw-sp-askc__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(28px, 5vw, 80px);align-items:stretch} .fw-sp-askc__intro{display:grid;gap:10px;justify-items:start;align-content:center} .fw-sp-askc__intro > img{width:clamp(72px, 10vh, 92px);aspect-ratio:1;object-fit:contain;animation:fw-sp-float 6s ease-in-out infinite} .fw-sp-quote{margin:8px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--pk)} .fw-sp-quote p{margin:0;font-size:clamp(18px, 2.6vh, 23px);font-weight:600;line-height:1.4;color:var(--pk-dd);text-wrap:balance} .fw-sp-asks{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;align-content:stretch;gap:0 clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} .fw-sp-asks li{position:relative;display:grid;grid-template-columns:40px minmax(0, 1fr);align-items:center;gap:14px;min-height:84px;padding:12px 0} .fw-sp-asks li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-asks span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bl-l);color:var(--bl-d);font-size:15px;font-weight:700;transition:background .2s var(--ease), color .2s var(--ease)} .fw-sp-asks li:hover span{background:var(--bl-d);color:var(--wh)} .fw-sp-asks p{margin:0;font-size:15.5px;font-weight:600;line-height:1.45;color:var(--ink)} /* ══════════════════════════════════════════════════════════════ 06 · QUESTIONS AND THE CLOSE ══════════════════════════════════════════════════════════════ */ .fw-sp-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-sp-faq__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(28px, 5vw, 80px);align-items:start} .fw-sp-faq__side{display:grid;gap:18px} .fw-sp-faq__side .fw-sp-head{margin:0} .fw-sp-pic--couple img{aspect-ratio:16/9} .fw-sp-faq__close{display:grid;gap:8px} .fw-sp-faq__close .fw-sp-h3{font-size:clamp(20px, 2.9vh, 25px);line-height:1.25;text-wrap:balance} .fw-sp-faq__close p{margin:0;font-size:15px;line-height:1.6;color:var(--g6)} .fw-sp-nums{display:grid;margin:6px 0 0;padding:0;list-style:none} .fw-sp-nums li{position:relative;display:grid;grid-template-columns:104px minmax(0, 1fr);align-items:baseline;gap:14px;padding:12px 0} .fw-sp-nums li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-nums b{font-size:clamp(19px, 2.7vh, 23px);font-weight:700;letter-spacing:-.01em;color:var(--pk-dd);white-space:nowrap} .fw-sp-nums span{font-size:14px;line-height:1.5;color:var(--g6)} .fw-sp-close__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px} .fw-sp-qa details{position:relative} .fw-sp-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-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-sp-qa summary::-webkit-details-marker{display:none} .fw-sp-qa summary:hover,.fw-sp-qa details[open] summary{color:var(--bl-d)} .fw-sp-qa summary .bi{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--bl-l);color:var(--bl-d);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-sp-qa details[open] summary .bi{transform:rotate(45deg);background:var(--bl-d);color:var(--wh)} .fw-sp-qa p{margin:0 48px 16px 0;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · PLEASE READ ══════════════════════════════════════════════════════════════ */ .fw-sp-disc{background:color-mix(in srgb, var(--dk) 3%, var(--wh))} .fw-sp-disc__grid{display:grid;grid-template-columns:minmax(0, .55fr) minmax(0, 1.45fr);gap:clamp(24px, 4vw, 64px);align-items:start} .fw-sp-disc__head{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px} .fw-sp-disc__ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bl-d);color:var(--wh);font-size:21px} .fw-sp-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-sp-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-sp-disc__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--g6)} .fw-sp-disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--bl)} /* ══════════════════════════════════════════════════════════════ 08 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-sp-help__grid{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-sp-help .fw-sp-pic{grid-column:1 / -1} .fw-sp-help .fw-sp-pic{min-height:0} .fw-sp-help .fw-sp-pic img{position:static;height:auto;aspect-ratio:21/9} } @media (max-width:1024px){ .fw-sp-title,.fw-sp-board,.fw-sp-how__grid,.fw-sp-age__grid,.fw-sp-askc__grid,.fw-sp-faq__grid,.fw-sp-disc__grid{grid-template-columns:minmax(0, 1fr)} .fw-sp-title__side{justify-items:start} .fw-sp-cols{order:2} .fw-sp-trust{justify-content:flex-start} /* Stacked, the questions come first and the answer follows them. */ .fw-sp-ask{order:-1} .fw-sp-ask::before{display:none} .fw-sp-ans{position:relative;padding-top:18px} .fw-sp-ans::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sp-head--row{align-items:flex-start} .fw-sp-head--row > .fw-sp-sub{text-align:left} .fw-sp-spot{filter:blur(50px)} /* Stacked, the questions come before the photograph and the last word. */ .fw-sp-faq__side{display:contents} .fw-sp-faq__side .fw-sp-head{order:1} .fw-sp-qa{order:2} .fw-sp-pic--couple{order:3} .fw-sp-faq__close{order:4} .fw-sp-nums{order:5} } @media (max-width:640px){ .fw-sp-page{--pad:14px} .fw-sp .fw-sp-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-sp-title__art{display:none} .fw-sp-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-sp-big b{font-size:96px} .fw-sp-ask{grid-template-columns:minmax(0, 1fr)} .fw-sp-cum li{grid-template-columns:104px minmax(0, 1fr) 46px;gap:8px;font-size:13px} .fw-sp-effects__axis,.fw-sp-effects__rows li{grid-template-columns:112px minmax(0, 1fr) 66px;column-gap:8px} .fw-sp-effects__axis span:nth-child(2){display:none} .fw-sp-effects__rows em{font-size:11.5px} .fw-sp-effects__l b{font-size:13px} .fw-sp-effects__axis span{font-size:9.5px} .fw-sp-cols__box{height:240px;margin-left:34px} .fw-sp-cols__x,.fw-sp-cols figcaption{margin-left:34px} .fw-sp-cols__x{font-size:10.5px} .fw-sp-col__v{font-size:13px} .fw-sp-help__grid,.fw-sp-asks,.fw-sp-disc__list{grid-template-columns:minmax(0, 1fr)} .fw-sp-help .fw-sp-pic img{aspect-ratio:16/10} .fw-sp-asks{grid-auto-rows:auto} .fw-sp-qa p{margin-right:0} } @media (prefers-reduced-motion:reduce){ .fw-sp-spot,.fw-sp-title__art img,.fw-sp-askc__intro > img{animation:none} }