/* ══════════════════════════════════════════════════════════════════════════ css/embryo-grading-guide.css — THE EMBRYO GRADING GUIDE (fw-eg) /embryo-grading-guide, 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 a GRADE DECODER: day tabs, type the grade or pick it (stage chips, letter chips; or cells, fragmentation and sizes for day 3), beside the grade taken apart with a DRAWING of the embryo §2 the six stages drawn in a row, then the two letters and the groups §3 day 3 in three drawings §4 what a grade cannot tell you beside a photograph §5 six questions to ask your embryologist §6 questions beside a second photograph §7 "Please read" THE DRAWING (every svg in the page uses these shape classes): .z the shell, .pv the space inside it (day 3), .in the cell mass, .cav the fluid cavity, .te the outer layer cells, .icm the inner cell mass, .bl a day 3 cell with its .nu nucleus, .frag a fragment. Colours from root tokens. PALETTE: lavender carries this page (text --pu-ink, fills --pu-dd); pink is the embryo's cells and the action. No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-eg-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-eg{display:block;position:relative;background:var(--wh)} .fw-eg em{font-family:var(--ff);font-style:normal} .fw-eg-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-eg-sec{position:relative;padding:var(--sec) 0} .fw-eg-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-eg-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(16px, 2.6vh, 28px)} .fw-eg-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-eg-head--row > div{display:flex;flex-direction:column;gap:8px;max-width:760px} .fw-eg-head--row > .fw-eg-sub{flex:1 1 320px;max-width:560px;text-align:right} .fw-eg-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(--pu-ink)} .fw-eg-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-eg-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-eg-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-eg-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-eg-src{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--g5)} .fw-eg-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-eg-chip{padding:3px 10px;border-radius:999px;background:var(--pu-dd);color:var(--wh);font-size:10.5px;letter-spacing:.06em} .fw-js .fw-eg.is-live .fw-eg-chip{display:none} .fw-eg-l{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g6)} .fw-eg-l > b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--pu-dd);color:var(--wh);font-size:11.5px;letter-spacing:0} .fw-eg-l small{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--g5)} .fw-eg-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;background:var(--pu-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-eg-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)} .fw-eg-btn--pk:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-eg-btn .bi-arrow-right{transition:transform .25s var(--ease)} .fw-eg-btn:hover .bi-arrow-right{transform:translateX(4px)} .fw-eg-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-eg-link:hover{color:var(--pk-dd)} .fw-eg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fw-eg-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-eg-drift 27s ease-in-out infinite} .fw-eg-spot--u{top:6%;right:-4%;width:clamp(220px, 24vw, 400px);background:var(--pu-t)} .fw-eg-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-eg-drift{50%{transform:translate(26px, -20px) scale(1.06)}} @keyframes fw-eg-float{50%{transform:translateY(-5px)}} @keyframes fw-eg-in{from{opacity:0;transform:scale(.94)}} .fw-eg-pic{margin:0} .fw-eg-pic img{display:block;width:100%;object-fit:cover} /* the drawing */ .fw-eg svg .z{fill:none;stroke:color-mix(in srgb, var(--pu) 40%, var(--wh));stroke-width:9} .fw-eg svg .z.is-thin{stroke-width:3.5} .fw-eg svg .z.is-empty{stroke-width:3;stroke-dasharray:7 6;opacity:.8} .fw-eg svg .pv{fill:var(--pu-wash)} .fw-eg svg .in{fill:color-mix(in srgb, var(--pk) 22%, var(--wh))} .fw-eg svg .cav{fill:color-mix(in srgb, var(--bl) 7%, var(--wh))} .fw-eg svg .te{fill:color-mix(in srgb, var(--pk) 42%, var(--wh));stroke:var(--wh);stroke-width:1} .fw-eg svg .icm{fill:var(--pk-d);stroke:var(--wh);stroke-width:1.5} .fw-eg svg .bl{fill:color-mix(in srgb, var(--pk) 18%, var(--wh));stroke:color-mix(in srgb, var(--pk) 45%, var(--wh));stroke-width:1.5} .fw-eg svg .nu{fill:color-mix(in srgb, var(--pk) 55%, var(--wh))} .fw-eg svg .frag{fill:color-mix(in srgb, var(--pu) 65%, var(--wh));stroke:var(--wh);stroke-width:1} /* ══════════════════════════════════════════════════════════════ 01 · THE DECODER ══════════════════════════════════════════════════════════════ */ .fw-eg .fw-eg-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-eg-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-eg .fw-eg-h1{margin:0;font-size:clamp(34px, 5.8vh, 56px);letter-spacing:-.03em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--pu-dd) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent} .fw-eg-lead{margin:8px 0 0;max-width:660px;font-size:clamp(15.5px, 2.1vh, 18px);line-height:1.55;color:var(--g6);text-wrap:pretty} .fw-eg-lead b{color:var(--pk-dd)} .fw-eg-title__side{display:grid;justify-items:end;gap:12px} .fw-eg-title__art{display:flex} .fw-eg-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 var(--pu-t2), 0 0 0 3px var(--wh);animation:fw-eg-float 6s ease-in-out infinite} .fw-eg-title__art img + img{margin-left:-12px} .fw-eg-title__art img:nth-child(2){animation-delay:-2s} .fw-eg-title__art img:nth-child(3){animation-delay:-4s} .fw-eg-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-eg-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-eg-trust .bi{color:var(--pu-ink);font-size:14px} .fw-eg-board{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);gap:var(--gap);align-items:stretch;margin-top:clamp(18px, 3vh, 30px)} /* the picker */ .fw-eg-pick{display:flex;flex-direction:column;gap:18px;min-width:0} .fw-eg-tabs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px} .fw-eg-tabs button{display:grid;grid-template-columns:44px minmax(0, 1fr);align-items:center;gap:12px;padding:10px 14px;border-radius:16px;text-align:left;background:var(--pu-wash);box-shadow:inset 0 0 0 1.5px var(--pu-l2);transition:background .2s var(--ease), box-shadow .2s var(--ease)} .fw-eg-tabs img{width:44px;aspect-ratio:1;object-fit:contain} .fw-eg-tabs span{display:grid;gap:1px} .fw-eg-tabs b{font-size:15.5px;font-weight:700;color:var(--ink)} .fw-eg-tabs small{font-size:12.5px;color:var(--g6)} .fw-eg-tabs button:hover{box-shadow:inset 0 0 0 1.5px var(--pu)} .fw-eg-tabs button[aria-pressed="true"]{background:var(--wh);box-shadow:inset 0 0 0 2px var(--pu-dd), 0 10px 22px var(--pu-t2)} .fw-eg-panel{display:grid;gap:16px} .fw-eg-panel[hidden]{display:none} .fw-eg-code{display:grid;gap:8px;margin:0} .fw-eg-code__box{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px} .fw-eg-code input{width:170px;height:58px;padding:0 16px;border:0;outline:0;border-radius:14px 14px 0 0;background:var(--pu-wash);box-shadow:inset 0 -2px 0 var(--pu-l2);font-family:var(--ff);font-size:34px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:box-shadow .2s var(--ease), background .2s var(--ease)} .fw-eg-code input:focus{background:var(--wh);box-shadow:inset 0 -3px 0 var(--pk-d)} .fw-eg-code input[aria-invalid="true"]{background:var(--co-l);box-shadow:inset 0 -3px 0 var(--co)} .fw-eg-code small{font-size:13px;color:var(--g6)} .fw-eg-code small.is-bad{color:var(--co-ink);font-weight:600} .fw-eg-group{position:relative;display:grid;gap:9px;padding-top:14px} .fw-eg-group::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-chips{display:flex;flex-wrap:wrap;gap:8px} .fw-eg-chips button{min-width:52px;height:46px;padding:0 16px;border-radius:14px;font-size:18px;font-weight:700;color:var(--ink);background:var(--pu-wash);box-shadow:inset 0 0 0 1.5px var(--pu-l2);transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)} .fw-eg-chips button:hover{box-shadow:inset 0 0 0 1.5px var(--pu);transform:translateY(-1px)} .fw-eg-chips button[aria-pressed="true"]{background:var(--pu-dd);color:var(--wh);box-shadow:0 8px 18px var(--pu-t2)} .fw-eg-chips--exp{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:6px} .fw-eg-chips--exp button{display:grid;justify-items:center;gap:1px;height:auto;min-width:0;padding:8px 4px} .fw-eg-chips--exp b{font-size:20px;line-height:1} .fw-eg-chips--exp small{font-size:11px;font-weight:600;line-height:1.2;opacity:.85} .fw-eg-chips--wide button{font-size:14.5px;font-weight:600;height:42px} .fw-eg-letters{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 20px} .fw-eg-letters[hidden]{display:none} .fw-eg-early{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:var(--go-l);color:var(--go-ink);font-size:14px;font-weight:600} .fw-eg-early[hidden]{display:none} .fw-eg-step{display:inline-flex;align-items:center;gap:12px} .fw-eg-step button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--ink);background:var(--pu-wash);box-shadow:inset 0 0 0 1.5px var(--pu-l2);transition:background .2s var(--ease), color .2s var(--ease)} .fw-eg-step button:hover:not(:disabled){background:var(--pu-dd);color:var(--wh);box-shadow:none} .fw-eg-step button:disabled{opacity:.3} .fw-eg-step output{min-width:56px;text-align:center;font-size:38px;font-weight:700;line-height:1;color:var(--pu-dd);font-variant-numeric:tabular-nums} .fw-eg-step > span{font-size:14px;font-weight:600;color:var(--g6)} .fw-eg-where{position:relative;display:grid;grid-template-columns:48px minmax(0, 1fr);align-items:center;gap:14px;margin-top:auto;padding-top:14px} .fw-eg-where::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-where img{width:48px;aspect-ratio:1;object-fit:contain} .fw-eg-where p{margin:0;font-size:14px;line-height:1.55;color:var(--g6)} .fw-eg-where b{display:block;font-size:14.5px;color:var(--ink)} .fw-eg-where em{font-weight:700;color:var(--pu-ink);white-space:nowrap} .fw-eg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:12.5px;color:var(--g5)} .fw-eg-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-eg-foot button[hidden]{display:none} /* the reading */ .fw-eg-read{--st:var(--mt-ink);--st-l:var(--mt-l);position:relative;display:flex;flex-direction:column;gap:14px;min-width:0} .fw-eg-read::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-eg-read.is-excellent{--st:var(--mt-ink);--st-l:var(--mt-l)} .fw-eg-read.is-fair,.fw-eg-read.is-early{--st:var(--go-ink);--st-l:var(--go-l)} .fw-eg-read.is-lower{--st:var(--co-ink);--st-l:var(--co-l)} .fw-eg-hero{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px} .fw-eg-grade{margin:0;padding-right:.04em;font-size:clamp(56px, 9vh, 92px);font-weight:700;line-height:.95;letter-spacing:-.03em;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-eg-grade.is-long{font-size:clamp(38px, 5.6vh, 56px);letter-spacing:-.02em} .fw-eg-group-pill{margin:0;padding:6px 16px;border-radius:999px;background:var(--st-l);color:var(--st);font-size:15px;font-weight:700} .fw-eg-read__grid{display:grid;grid-template-columns:minmax(180px, .8fr) minmax(0, 1.2fr);align-items:center;gap:22px} .fw-eg-art{margin:0;display:grid;justify-items:center;gap:6px} .fw-eg-art svg{display:block;width:100%;max-width:260px;height:auto;overflow:visible;filter:drop-shadow(0 14px 26px var(--pu-t2))} .fw-eg-art g.is-new{animation:fw-eg-in .45s var(--ease-pop)} .fw-eg-art figcaption{font-size:11.5px;color:var(--g5)} .fw-eg-parts{margin:0;padding:0;list-style:none} .fw-eg-parts li{position:relative;display:grid;grid-template-columns:44px minmax(0, 1fr);gap:14px;align-items:start;padding:12px 0} .fw-eg-parts li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-part__k{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--pu-l);color:var(--pu-dd);font-size:18px;font-weight:700} .fw-eg-parts li:first-child .fw-eg-part__k{background:var(--pu-dd);color:var(--wh)} .fw-eg-parts p{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--g6)} .fw-eg-next{position:relative;display:grid;gap:12px;margin-top:auto;padding-top:14px} .fw-eg-next::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-next p{margin:0;font-size:15.5px;font-weight:600;line-height:1.5;color:var(--ink);text-wrap:pretty} .fw-eg-next .fw-eg-btn{justify-self:start} /* ══════════════════════════════════════════════════════════════ 02 · THE DAY 5 GRADE — six stages, then the letters ══════════════════════════════════════════════════════════════ */ .fw-eg-stages{background:linear-gradient(180deg, var(--pu-wash), var(--wh))} .fw-eg-strip{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:clamp(12px, 1.8vw, 28px);margin:0;padding:0;list-style:none} .fw-eg-strip li{display:grid;align-content:start;gap:6px} .fw-eg-strip svg{display:block;width:100%;max-width:170px;height:auto;margin:0 auto 6px;overflow:visible;transition:transform .35s var(--ease-pop)} .fw-eg-strip li:hover svg{transform:translateY(-4px) scale(1.03)} .fw-eg-strip__n{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--ff);font-size:16px;font-weight:700;color:var(--ink)} .fw-eg-strip__n b{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--pu-dd);color:var(--wh);font-size:13px} .fw-eg-strip p:last-child{margin:0;font-size:13.5px;line-height:1.5;color:var(--g6)} .fw-eg-abc{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin-top:clamp(24px, 4vh, 40px)} .fw-eg-abc__col{position:relative;min-width:0} .fw-eg-abc__col + .fw-eg-abc__col::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-eg-abc__h{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:2px 10px;margin:0 0 8px;font-family:var(--ff);font-size:17px;font-weight:700;color:var(--ink)} .fw-eg-abc__h small{grid-column:2;font-size:13px;font-weight:500;color:var(--g6)} .fw-eg-dot{width:14px;height:14px;border-radius:50%} .fw-eg-dot.is-icm{background:var(--pk-d)} .fw-eg-dot.is-te{background:color-mix(in srgb, var(--pk) 42%, var(--wh))} .fw-eg-dot.is-star{background:var(--go)} .fw-eg-abc ul{margin:0;padding:0;list-style:none} .fw-eg-abc li{position:relative;display:grid;grid-template-columns:92px minmax(0, 1fr);align-items:center;gap:12px;padding:11px 0} .fw-eg-abc li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-abc li b{font-size:18px;font-weight:700;color:var(--pu-dd)} .fw-eg-abc li span{font-size:14.5px;line-height:1.45;color:var(--g7)} .fw-eg-abc__groups li b{font-size:15px;color:var(--ink)} .fw-eg-abc__groups li span{display:inline-flex;justify-self:start;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700} .fw-eg-abc__groups .is-excellent span,.fw-eg-abc__groups .is-good span{background:var(--mt-l);color:var(--mt-ink)} .fw-eg-abc__groups .is-fair span{background:var(--go-l);color:var(--go-ink)} .fw-eg-abc__groups .is-lower span{background:var(--co-l);color:var(--co-ink)} /* ══════════════════════════════════════════════════════════════ 03 · DAY 3 — three drawings ══════════════════════════════════════════════════════════════ */ .fw-eg-d3__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin:0;padding:0;list-style:none} .fw-eg-d3__list li{position:relative;display:grid;grid-template-columns:132px minmax(0, 1fr);align-items:center;gap:18px} .fw-eg-d3__list li + li::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-eg-d3__list svg{display:block;width:132px;height:auto;overflow:visible;transition:transform .35s var(--ease-pop)} .fw-eg-d3__list li:hover svg{transform:rotate(-8deg) scale(1.03)} .fw-eg-d3__list p{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · WHAT A GRADE CANNOT TELL YOU ══════════════════════════════════════════════════════════════ */ .fw-eg-cannot{background:linear-gradient(180deg, var(--pu-wash), var(--wh))} .fw-eg-split{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:var(--gap);align-items:stretch} .fw-eg-split > div{display:flex;flex-direction:column;justify-content:center;min-width:0} .fw-eg-split .fw-eg-pic{position:relative;min-height:360px} .fw-eg-split .fw-eg-pic img{position:absolute;inset:0;height:100%} .fw-eg-cannot__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;gap:0 clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} .fw-eg-cannot__list li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:14px;align-items:start;padding:16px 0} .fw-eg-cannot__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-cannot__list img{width:52px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-eg-cannot__list li:hover img{transform:translateY(-3px) rotate(-5deg)} .fw-eg-cannot__list p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · QUESTIONS TO ASK YOUR EMBRYOLOGIST ══════════════════════════════════════════════════════════════ */ .fw-eg-asks__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:var(--gap);align-items:stretch} .fw-eg-asks__intro{display:grid;gap:10px;justify-items:start;align-content:center} .fw-eg-asks__intro > img{width:clamp(72px, 10vh, 92px);aspect-ratio:1;object-fit:contain;animation:fw-eg-float 6s ease-in-out infinite} .fw-eg-asks__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;gap:0 clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} .fw-eg-asks__list li{position:relative;display:grid;grid-template-columns:40px minmax(0, 1fr);align-items:center;gap:14px;min-height:84px;padding:12px 0} .fw-eg-asks__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-asks__list span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pu-l);color:var(--pu-dd);font-size:15px;font-weight:700;transition:background .2s var(--ease), color .2s var(--ease)} .fw-eg-asks__list li:hover span{background:var(--pu-dd);color:var(--wh)} .fw-eg-asks__list p{margin:0;font-size:15.5px;font-weight:600;line-height:1.45;color:var(--ink)} /* ══════════════════════════════════════════════════════════════ 06 · QUESTIONS AND THE CLOSE ══════════════════════════════════════════════════════════════ */ .fw-eg-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-eg-faq__grid{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:var(--gap);align-items:start} .fw-eg-faq__side{display:grid;gap:20px} .fw-eg-faq__side .fw-eg-head{margin:0} .fw-eg-pic--couple img{aspect-ratio:16/9} .fw-eg-faq__close{display:grid;gap:8px} .fw-eg-faq__close .fw-eg-h3{font-size:clamp(20px, 2.9vh, 25px);line-height:1.25;text-wrap:balance} .fw-eg-faq__close p{margin:0;font-size:15px;line-height:1.6;color:var(--g6)} .fw-eg-close__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px} .fw-eg-qa details{position:relative} .fw-eg-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-eg-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-eg-qa summary::-webkit-details-marker{display:none} .fw-eg-qa summary:hover,.fw-eg-qa details[open] summary{color:var(--pu-ink)} .fw-eg-qa summary .bi{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--pu-l);color:var(--pu-ink);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-eg-qa details[open] summary .bi{transform:rotate(45deg);background:var(--pu-dd);color:var(--wh)} .fw-eg-qa p{margin:0 48px 16px 0;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · PLEASE READ ══════════════════════════════════════════════════════════════ */ .fw-eg-disc{background:color-mix(in srgb, var(--dk) 3%, var(--wh))} .fw-eg-disc__grid{display:grid;grid-template-columns:minmax(0, .55fr) minmax(0, 1.45fr);gap:clamp(24px, 4vw, 64px);align-items:start} .fw-eg-disc__head{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px} .fw-eg-disc__ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--pu-dd);color:var(--wh);font-size:21px} .fw-eg-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-eg-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-eg-disc__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--g6)} .fw-eg-disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pu)} /* ══════════════════════════════════════════════════════════════ 08 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-eg-strip{grid-template-columns:repeat(3, minmax(0, 1fr));row-gap:28px} .fw-eg-abc{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-eg-abc__groups{grid-column:1 / -1} .fw-eg-abc__groups::before{display:none} .fw-eg-d3__list li{grid-template-columns:100px minmax(0, 1fr)} .fw-eg-d3__list svg{width:100px} } @media (max-width:1024px){ .fw-eg-title,.fw-eg-board,.fw-eg-split,.fw-eg-asks__grid,.fw-eg-faq__grid,.fw-eg-disc__grid,.fw-eg-d3__list,.fw-eg-abc{grid-template-columns:minmax(0, 1fr)} .fw-eg-title__side{justify-items:start} .fw-eg-trust{justify-content:flex-start} .fw-eg-read{padding-top:20px} .fw-eg-read::before,.fw-eg-abc__col + .fw-eg-abc__col::before,.fw-eg-d3__list li + li::before{left:0;right:0;top:calc(var(--gap) / -2);bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-eg-read::before{top:0} .fw-eg-head--row{align-items:flex-start} .fw-eg-head--row > .fw-eg-sub{text-align:left} .fw-eg-split .fw-eg-pic{min-height:0} .fw-eg-split .fw-eg-pic img{position:static;height:auto;aspect-ratio:16/9} .fw-eg-spot{filter:blur(50px)} .fw-eg-faq__side{display:contents} .fw-eg-faq__side .fw-eg-head{order:1} .fw-eg-qa{order:2} .fw-eg-pic--couple{order:3} .fw-eg-faq__close{order:4} } @media (max-width:640px){ .fw-eg-page{--pad:14px} .fw-eg .fw-eg-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-eg-title__art{display:none} .fw-eg-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-eg-tabs button{grid-template-columns:34px minmax(0, 1fr);gap:8px;padding:8px 10px} .fw-eg-tabs img{width:34px} .fw-eg-tabs b{font-size:14px} .fw-eg-tabs small{font-size:11px} .fw-eg-chips--exp{grid-template-columns:repeat(3, minmax(0, 1fr))} .fw-eg-letters{grid-template-columns:minmax(0, 1fr)} .fw-eg-read__grid{grid-template-columns:minmax(0, 1fr)} .fw-eg-art svg{max-width:220px} .fw-eg-strip{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-eg-cannot__list,.fw-eg-asks__list,.fw-eg-disc__list{grid-template-columns:minmax(0, 1fr)} .fw-eg-cannot__list,.fw-eg-asks__list{grid-auto-rows:auto} .fw-eg-abc li{grid-template-columns:80px minmax(0, 1fr)} .fw-eg-qa p{margin-right:0} } @media (prefers-reduced-motion:reduce){ .fw-eg-spot,.fw-eg-title__art img,.fw-eg-asks__intro > img,.fw-eg-art g.is-new{animation:none} }