/* ══════════════════════════════════════════════════════════════════════════ css/ivf-success-tips.css — /ivf-success-tips (prefix fw-st) What really helps IVF. Its heart is "Small changes that may help": the four areas as 3D clay icon tabs, each opening its tips in two columns, every tip with an evidence meter (three dots) and its source. Around it: getting ready step by step on one dashed line of 3D icons, "Myth or fact?" as a rail of beliefs beside the chosen answer under a lightbulb, an infographic of what is and is not in your hands around "Your chances", and the next step as three linked moves beside the questions. House rules kept: bright grounds with soft brand light; no max-width; colour only from :root; structure from space and fade rules, no boxed cards; photographs whole and square-cornered, no shadow; icon discs, chips and buttons round; 28px / 14px gutters; type in vh, released at 1024px and below. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-st-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 9%, transparent); --fade-x:linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent); --sec:clamp(34px, 6vh, 72px); --gap:clamp(24px, 4vw, 76px); --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1); --ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l); background:var(--wh); -webkit-text-size-adjust:100% } .fw-st-ac--pk{--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l)} .fw-st-ac--bl{--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)} .fw-st-ac--mt{--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)} .fw-st-ac--pu{--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)} .fw-st{display:block;position:relative} .fw-st-page em{font-family:var(--ff);font-style:normal} .fw-st .fw-ico{stroke-width:1.6} .fw-st-sec{position:relative;padding:var(--sec) var(--pad)} .fw-st-sec + .fw-st-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)} .fw-st-head{display:grid;gap:8px;margin-bottom:clamp(18px, 3vh, 30px)} .fw-st-head--row{grid-template-columns:auto minmax(0, 1fr);align-items:end;column-gap:clamp(20px, 3vw, 48px)} .fw-st-head--row > :last-child{justify-self:end;text-align:right} .fw-st-h2{margin:0;font-family:var(--ff);font-size:clamp(25px, 4vh, 40px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--ink);text-wrap:balance} .fw-st-h3{margin:0;font-family:var(--ff);font-size:clamp(17px, 2.5vh, 20px);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink)} .fw-st-sub{margin:0;font-size:clamp(15px, 2vh, 17px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-st-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mt-ink)} .fw-st-kicker .fw-ico{width:18px;height:18px} .fw-st-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:clamp(46px, 5.8vh, 54px);padding:0 26px;border:0;border-radius:100px;cursor:pointer; font-family:var(--ff);font-size:15px;font-weight:600;white-space:nowrap;color:var(--wh);background:linear-gradient(100deg, var(--pk), var(--pk-d) 45%, var(--pk-dd));box-shadow:var(--pk-glow); transition:box-shadow .3s, transform .25s var(--ease), background .25s } .fw-st-btn i{font-size:14px} .fw-st-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)} .fw-st-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--line)} .fw-st-btn--ghost:hover{color:var(--mt-ink);background:var(--mt-wash);box-shadow:inset 0 0 0 1.5px var(--mt)} .fw-st-act{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(18px, 3vh, 28px)} .fw-st-tick{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;font-size:12px;color:var(--wh);background:var(--ac)} .fw-st img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)} .fw-st img.lazy-loaded, .fw-st img.lazy-error{opacity:1} .fw-st-anim [data-st-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft)} .fw-st-anim [data-st-reveal].is-in{opacity:1;transform:none} /* The evidence meter: three dots, filled to the level. */ .fw-st-dots{display:inline-flex;gap:3px} .fw-st-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line)} .fw-st-dots i.is-on{background:var(--mt)} /* ══════════════════════════════════════════════════════════════ 01 · WHAT REALLY HELPS ══════════════════════════════════════════════════════════════ */ .fw-st-mast__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center} .fw-st .fw-st-h1{margin:clamp(8px, 1.6vh, 16px) 0 0;font-size:clamp(34px, 6vh, 60px);line-height:1.04;letter-spacing:-.035em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--mt-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance} .fw-st-lede{margin:clamp(10px, 1.8vh, 16px) 0 0;font-size:clamp(16px, 2.2vh, 19px);line-height:1.55;color:var(--g6);text-wrap:pretty} .fw-st-lede b{font-weight:600;color:var(--pk-dd)} .fw-st-trust{position:relative;display:flex;flex-wrap:wrap;gap:8px 20px;margin:clamp(20px, 3.4vh, 32px) 0 0;padding:clamp(14px, 2.2vh, 18px) 0 0;list-style:none} .fw-st-trust::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, var(--line), transparent)} .fw-st-trust li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--g7)} .fw-st-trust .bi{font-size:15px;color:var(--mt-d)} .fw-st-mast__fig{justify-self:end;margin:0;background:var(--g1)} .fw-st-mast__fig img{display:block;height:clamp(250px, 46vh, 470px);width:auto;max-width:100%;aspect-ratio:1600 / 1067} /* ══════════════════════════════════════════════════════════════ 02 · SMALL CHANGES THAT MAY HELP Four 3D icon tabs in a row (no boxes; the chosen one rests on a soft disc of its accent with a bar beneath), then the area's tips in two columns: number, evidence meter, title, words, source. ══════════════════════════════════════════════════════════════ */ .fw-st-tips{background:linear-gradient(180deg, var(--wh), var(--mt-wash) 55%, var(--wh))} .fw-st-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none} .fw-st-legend li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--g6)} .fw-st-tabs{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(8px, 1.4vw, 20px);margin-bottom:clamp(20px, 3.4vh, 32px);padding-bottom:12px} .fw-st-tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fade-x)} .fw-st-tab{position:relative;display:flex;align-items:center;gap:14px;padding:6px 10px;border:0;background:none;cursor:pointer;font-family:var(--ff);text-align:left;color:inherit} .fw-st-tab img{position:relative;z-index:1;width:clamp(60px, 8.4vh, 78px);aspect-ratio:1;object-fit:contain;filter:saturate(.7) opacity(.85);transition:transform .35s var(--ease), filter .3s} .fw-st-tab::before{content:"";position:absolute;left:10px;top:50%;width:clamp(60px, 8.4vh, 78px);aspect-ratio:1;border-radius:50%;background:var(--ac-l);opacity:0;transform:translateY(-50%) scale(.7);transition:opacity .35s var(--ease), transform .35s var(--ease)} .fw-st-tab span{display:grid;gap:2px} .fw-st-tab b{font-size:clamp(15px, 2.1vh, 17px);font-weight:700;color:var(--g7);transition:color .25s} .fw-st-tab small{font-size:12.5px;color:var(--g5)} .fw-st-tab::after{content:"";position:absolute;left:10px;right:30%;bottom:-13px;height:3px;border-radius:3px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .fw-st-tab:hover img{transform:translateY(-2px);filter:none} .fw-st-tab.is-on::before{opacity:1;transform:translateY(-50%)} .fw-st-tab.is-on img{transform:scale(1.05);filter:none} .fw-st-tab.is-on b{color:var(--ink)} .fw-st-tab.is-on::after{transform:none} .fw-st-tab:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:12px} .fw-st-tips.is-live .fw-st-panel{display:none} .fw-st-tips.is-live .fw-st-panel.is-on{display:block;animation:fw-st-in .5s var(--ease-soft)} @keyframes fw-st-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .fw-st-panel + .fw-st-panel{margin-top:clamp(26px, 4vh, 40px)} .fw-st-panel__lede{margin:0 0 clamp(10px, 1.6vh, 14px);font-size:15px;font-weight:600;color:var(--ac-ink)} .fw-st-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(24px, 3.4vw, 60px);margin:0;padding:0;list-style:none} .fw-st-list > li{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:start;gap:16px;padding:clamp(14px, 2.2vh, 20px) 0} .fw-st-list > li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg, var(--line), transparent)} .fw-st-list__n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:13.5px;font-weight:700;color:var(--ac-ink);background:var(--ac-l)} .fw-st-meter{display:inline-flex;align-items:center;gap:8px;margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-ink)} .fw-st-list__text{margin:5px 0 0;font-size:15px;line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-st-source{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:13px;color:var(--g5)} .fw-st-source a{color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bl-ring)} .fw-st-small{display:flex;align-items:flex-start;gap:8px;margin:clamp(18px, 3vh, 26px) 0 0;font-size:13px;line-height:1.5;color:var(--g5)} /* ══════════════════════════════════════════════════════════════ 03 · GETTING READY, STEP BY STEP Four 3D icons on one dashed line, numbered, each with when, a title and three ticked points. ══════════════════════════════════════════════════════════════ */ .fw-st-line{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(18px, 2.4vw, 40px);margin:0;padding:0;list-style:none;--art:clamp(84px, 11vh, 104px)} .fw-st-line::before{content:"";position:absolute;left:calc(var(--art) / 2);right:12%;top:calc(var(--art) / 2);height:2px;background:repeating-linear-gradient(90deg, var(--mt) 0 8px, transparent 8px 14px);opacity:.5} .fw-st-line > li{position:relative;display:grid;justify-items:start;gap:6px} .fw-st-line__art{position:relative;display:grid;place-items:center;width:var(--art);height:var(--art);margin-bottom:8px;border-radius:50%;background:var(--wh);box-shadow:0 0 0 6px var(--mt-wash), 0 16px 30px -22px var(--dk)} .fw-st-line__art img{width:76%;height:76%;object-fit:contain} .fw-st-line__art em{position:absolute;right:-2px;top:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd));box-shadow:0 0 0 3px var(--wh)} .fw-st-line__when{margin:0;padding:3px 12px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mt-ink);background:var(--mt-l)} .fw-st-line ul{display:grid;gap:6px;margin:6px 0 0;padding:0;list-style:none} .fw-st-line ul li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.45;color:var(--g7)} /* ══════════════════════════════════════════════════════════════ 04 · MYTH OR FACT? The beliefs as a rail on the left (a pink cross, the words, an arrow); the chosen one opens on the right under the lightbulb: the myth struck through, what the evidence says, its source. Without the script every answer shows under the rail. ══════════════════════════════════════════════════════════════ */ .fw-st-myths{background:linear-gradient(180deg, var(--wh), var(--pu-wash) 60%, var(--wh))} .fw-st-myths__title{display:flex;align-items:center;gap:clamp(12px, 1.6vw, 22px)} .fw-st-myths__title img{width:clamp(64px, 9vh, 86px);aspect-ratio:1;object-fit:contain} .fw-st-myths__grid{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);gap:clamp(24px, 3.6vw, 64px);align-items:stretch} .fw-st-mythrail{display:grid;align-content:start;gap:4px} .fw-st-mythtab{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:14px;padding:clamp(9px, 1.4vh, 12px) 16px clamp(9px, 1.4vh, 12px) 10px;border:0;border-radius:100px;cursor:pointer;font-family:var(--ff);text-align:left;color:inherit;background:none;transition:background .3s var(--ease)} .fw-st-mythtab__x{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:13px;color:var(--pk-ink);background:var(--pk-l);transition:background .25s, color .25s} .fw-st-mythtab__t{font-size:clamp(15px, 2.1vh, 16.5px);font-weight:600;line-height:1.35;color:var(--g7);transition:color .25s} .fw-st-mythtab__go{font-size:13px;color:var(--pu-ink);opacity:0;transform:translateX(-4px);transition:opacity .25s, transform .25s var(--ease)} .fw-st-mythtab:hover{background:color-mix(in srgb, var(--pu-l) 55%, transparent)} .fw-st-mythtab.is-on{background:linear-gradient(90deg, var(--pu-l), transparent 95%)} .fw-st-mythtab.is-on .fw-st-mythtab__x{color:var(--wh);background:var(--pk)} .fw-st-mythtab.is-on .fw-st-mythtab__t{color:var(--ink)} .fw-st-mythtab.is-on .fw-st-mythtab__go{opacity:1;transform:none} .fw-st-mythtab:focus-visible{outline:2px solid var(--pu);outline-offset:2px} .fw-st-factbox{position:relative;display:grid;align-content:center;padding-left:clamp(20px, 3vw, 48px)} .fw-st-factbox::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent)} .fw-st-myths.is-live .fw-st-fact{display:none} .fw-st-myths.is-live .fw-st-fact.is-on{display:grid;animation:fw-st-in .5s var(--ease-soft)} .fw-st-fact{display:grid;justify-items:start;gap:12px} .fw-st-fact + .fw-st-fact{margin-top:28px} .fw-st-fact__art{width:clamp(80px, 11vh, 104px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.06))} .fw-st-fact__myth{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:15px;color:var(--g5)} .fw-st-fact__myth s{text-decoration-color:var(--pk);text-decoration-thickness:2px} .fw-st-fact__text{margin:0;font-size:clamp(17px, 2.5vh, 21px);font-weight:600;line-height:1.5;color:var(--ink);text-wrap:pretty} .fw-st-chip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 12px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .fw-st-chip--myth{color:var(--pk-ink);background:var(--pk-l)} .fw-st-chip--fact{color:var(--mt-ink);background:var(--mt-l)} /* ══════════════════════════════════════════════════════════════ 05 · WHAT YOU CAN CHANGE, AND WHAT YOU CANNOT An infographic: what is in your hands on the left, what is not on the right (each a link to the tool that explains it), joined by dashed lines to "Your chances" in a ring at the centre. ══════════════════════════════════════════════════════════════ */ .fw-st-hands{background:linear-gradient(180deg, var(--wh), var(--mt-wash) 50%, var(--wh))} .fw-st-hands__grid{display:grid;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);align-items:center;gap:clamp(16px, 2.4vw, 40px)} .fw-st-side__label{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 14px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .fw-st-side--can .fw-st-side__label{color:var(--mt-ink);background:var(--mt-l)} .fw-st-side--cannot .fw-st-side__label{color:var(--pu-ink);background:var(--pu-l)} .fw-st-side ul{display:grid;gap:4px;margin:0;padding:0;list-style:none} .fw-st-side li{position:relative} .fw-st-side--cannot li > a,.fw-st-side--cannot li > span{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px;padding:clamp(8px, 1.3vh, 11px) 12px;border-radius:100px;font-size:13.5px;line-height:1.45;color:var(--g6);text-decoration:none} .fw-st-side li span{display:block} .fw-st-side--can li{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px;padding:clamp(8px, 1.3vh, 11px) 12px;font-size:13.5px;line-height:1.45;color:var(--g6)} .fw-st-side img{width:clamp(48px, 6.6vh, 60px);aspect-ratio:1;object-fit:contain} .fw-st-side b{display:block;font-size:15.5px;font-weight:700;color:var(--ink)} .fw-st-side em{display:flex;align-items:center;gap:6px;margin-top:4px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--pu-ink)} .fw-st-side em .bi{font-size:11px;transition:transform .25s var(--ease)} .fw-st-side--cannot a:hover{color:var(--g6);background:linear-gradient(90deg, transparent, var(--pu-l))} .fw-st-side--cannot a:hover em .bi{transform:translateX(3px)} .fw-st-side--cannot{text-align:left} /* The dashed lines run from each side's edge into the ring. */ .fw-st-side ul li::after{content:"";position:absolute;top:50%;width:clamp(16px, 2.4vw, 40px);height:2px;background:repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px)} .fw-st-side--can ul li::after{right:calc(clamp(16px, 2.4vw, 40px) * -1)} .fw-st-side--cannot ul li::after{left:calc(clamp(16px, 2.4vw, 40px) * -1)} .fw-st-core{display:grid;place-items:center} .fw-st-core__ring{position:relative;display:grid;place-items:center;align-content:center;gap:2px;width:clamp(190px, 26vh, 240px);aspect-ratio:1;border-radius:50%;text-align:center;background:var(--wh);box-shadow:0 0 0 10px var(--mt-wash), 0 0 0 11px var(--mt-l), 0 0 0 22px var(--pu-wash), 0 0 0 23px var(--pu-l), 0 30px 60px -40px var(--dk)} .fw-st-core__ring img{width:42%;aspect-ratio:1;object-fit:contain;margin-bottom:4px} .fw-st-core__ring b{font-size:clamp(17px, 2.4vh, 20px);font-weight:700;color:var(--ink)} .fw-st-core__ring small{font-size:12px;color:var(--g5)} /* ══════════════════════════════════════════════════════════════ 06 · YOUR NEXT STEP, AND QUESTIONS Three linked moves (learn, check, talk) on one dashed line beside the numbered questions; both columns end together. ══════════════════════════════════════════════════════════════ */ .fw-st-end{ position:relative;padding:clamp(40px, 7vh, 84px) var(--pad);overflow:hidden; background: radial-gradient(40% 80% at 0% 100%, color-mix(in srgb, var(--mt) 11%, transparent), transparent 70%), radial-gradient(40% 80% at 100% 0%, color-mix(in srgb, var(--pk) 8%, transparent), transparent 70%), var(--g0) } .fw-st-end::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)} /* Both columns end level: the questions set the height (it changes as one opens), the steps spread to fill it and the buttons sit on the last line. */ .fw-st-end__grid{display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:var(--gap);align-items:stretch} .fw-st-end__say{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .fw-st-end__say .fw-st-next{flex:1 1 auto;align-self:stretch;align-content:space-between} .fw-st-end .fw-st-h2{font-size:clamp(26px, 4.2vh, 40px)} .fw-st-end .fw-st-act{margin-top:clamp(10px, 1.8vh, 16px)} .fw-st-next{position:relative;display:grid;gap:clamp(12px, 2vh, 18px);margin:clamp(10px, 1.8vh, 16px) 0 0;padding:0;list-style:none;--art:clamp(64px, 8.6vh, 78px)} .fw-st-next::before{content:"";position:absolute;left:calc(var(--art) / 2 - 1px);top:calc(var(--art) / 2);bottom:calc(var(--art) / 2);width:2px;background:repeating-linear-gradient(180deg, var(--mt) 0 6px, transparent 6px 11px);opacity:.55} .fw-st-next li{position:relative;display:grid;grid-template-columns:var(--art) minmax(0, 1fr);align-items:center;gap:18px} .fw-st-next__art{position:relative;display:grid;place-items:center;width:var(--art);height:var(--art);border-radius:50%;color:var(--pk-ink);background:var(--wh);box-shadow:0 0 0 6px var(--mt-wash), 0 14px 28px -20px var(--dk)} .fw-st-next__art img{width:74%;height:74%;object-fit:contain} .fw-st-next__art .fw-ico{width:40%;height:40%} .fw-st-next__art em{position:absolute;right:-3px;top:-3px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11.5px;font-weight:700;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd));box-shadow:0 0 0 3px var(--wh)} .fw-st-next li > span:last-child{font-size:14.5px;line-height:1.5;color:var(--g6)} .fw-st-next b{display:block;font-size:18px;font-weight:700;color:var(--ink)} .fw-st-next a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--bl-ink);text-decoration:none} .fw-st-next a .bi{font-size:12px} .fw-st-next a:hover{color:var(--pk-dd)} .fw-st-end__faq .fw-st-head{margin-bottom:clamp(10px, 1.8vh, 16px)} .fw-st-qs{display:grid} .fw-st-q{position:relative} .fw-st-q + .fw-st-q::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)} .fw-st-q summary{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:14px;padding:clamp(12px, 2vh, 17px) 6px;cursor:pointer;list-style:none} .fw-st-q summary::-webkit-details-marker{display:none} .fw-st-q__n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--mt-ink);background:var(--mt-l);transition:background .25s, color .25s} .fw-st-q__t{font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink);transition:color .2s} .fw-st-q summary > i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:13px;color:var(--g6);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease), color .25s, background .25s} .fw-st-q summary:hover .fw-st-q__t,.fw-st-q[open] .fw-st-q__t{color:var(--mt-ink)} .fw-st-q p{margin:0;padding:0 48px clamp(14px, 2.2vh, 20px) calc(36px + 14px + 6px);font-size:15px;line-height:1.7;color:var(--g6)} .fw-st-q[open] .fw-st-q__n{color:var(--wh);background:var(--mt)} .fw-st-q[open] summary > i{transform:rotate(45deg);color:var(--wh);background:var(--mt);box-shadow:none} /* ══════════════════════════════════════════════════════════════ 07 · RELEASED HEIGHTS, AND THE PHONE ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px){ .fw-st-mast__grid,.fw-st-end__grid,.fw-st-myths__grid,.fw-st-hands__grid{grid-template-columns:minmax(0, 1fr)} .fw-st-factbox{padding-left:0} .fw-st-factbox::before{display:none} .fw-st-side ul li::after{display:none} .fw-st-core{order:-1} .fw-st-mast__fig{justify-self:stretch} .fw-st-mast__fig img{width:100%;height:auto} .fw-st-head--row{grid-template-columns:minmax(0, 1fr)} .fw-st-head--row > :last-child{justify-self:start;text-align:left} .fw-st-line{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:30px} .fw-st-line::before{display:none} .fw-st-tabs{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:14px} } @media (max-width: 768px){ .fw-st-page{--pad:14px} .fw-st .fw-st-h1{font-size:clamp(32px, 9vw, 42px)} .fw-st-tabs{display:flex;overflow-x:auto;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 16px;scroll-snap-type:x mandatory;scrollbar-width:none} .fw-st-tabs::-webkit-scrollbar{display:none} .fw-st-tabs::after{left:var(--pad);right:var(--pad)} .fw-st-tab{flex:0 0 auto;scroll-snap-align:start} .fw-st-list{grid-template-columns:minmax(0, 1fr)} .fw-st-line{grid-template-columns:minmax(0, 1fr)} .fw-st-myths__title img{width:56px} .fw-st-side--cannot li > a,.fw-st-side--can li{padding-inline:4px} .fw-st-end .fw-st-act{width:100%} .fw-st-end .fw-st-act .fw-st-btn{width:100%} .fw-st-q p{padding:0 6px clamp(14px, 2.2vh, 20px)} } @media (prefers-reduced-motion: reduce){ .fw-st *,.fw-st *::before,.fw-st *::after{transition:none !important;animation:none !important} .fw-st-anim [data-st-reveal]{opacity:1;transform:none} }