/* ══════════════════════════════════════════════════════════════════════════ css/vaccine-scheduler.css — THE VACCINE SCHEDULER (fw-vx) /vaccine-scheduler, built 30 Sep 2026. NOT fw-vs: that is /our-vision. ITS OWN PAGE. Same tokens, gutters, masthead band, ambient light and no-cards rule as every page; its own devices: §1 one STRIP (three situations and one date) above a TIMELINE across the page: a row per vaccine over before / pregnancy / after birth, windows as bars (solid mint for everyone, soft for "if needed", hatched coral where a live vaccine must wait, dots for the baby) and a pink TODAY line through every row §2 your dates as a two-column list to tick off, with the calendar §3 why it protects two beside a photograph §4 safe during pregnancy, or wait: two lists §5 before fertility treatment: three numbered steps §6 questions beside a second photograph §7 "Please read" PALETTE: mint carries this page (text --mt-ink, fills --mt-dd); pink is today and the action; coral marks "not during pregnancy". No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-vx-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); --name:250px; --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-vx{display:block;position:relative;background:var(--wh)} .fw-vx em{font-family:var(--ff);font-style:normal} .fw-vx-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-vx-sec{position:relative;padding:var(--sec) 0} .fw-vx-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-vx-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(16px, 2.6vh, 28px)} .fw-vx-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-vx-head--row > div:first-child{display:flex;flex-direction:column;gap:8px;max-width:760px} .fw-vx-head--row > .fw-vx-sub{flex:1 1 320px;max-width:540px;text-align:right} .fw-vx-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-vx-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-vx-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-vx-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-vx-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-vx-chip{padding:3px 10px;border-radius:999px;background:var(--mt-dd);color:var(--wh);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .fw-js .fw-vx.is-live .fw-vx-chip{display:none} .fw-vx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .fw-vx-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-vx-btn:hover{background:var(--dk-d);color:var(--wh)} .fw-vx-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)} .fw-vx-btn--pk:hover{background:var(--pk-dd);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-vx-btn .bi-arrow-right{transition:transform .25s var(--ease)} .fw-vx-btn:hover .bi-arrow-right{transform:translateX(4px)} .fw-vx-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-vx-link:hover{color:var(--pk-dd)} .fw-vx-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fw-vx-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-vx-drift 27s ease-in-out infinite} .fw-vx-spot--m{top:6%;right:-4%;width:clamp(220px, 24vw, 400px);background:var(--mt-t)} .fw-vx-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-vx-drift{50%{transform:translate(26px, -20px) scale(1.06)}} @keyframes fw-vx-float{50%{transform:translateY(-5px)}} @keyframes fw-vx-grow{from{transform:scaleX(0)}} .fw-vx-pic{margin:0} .fw-vx-pic img{display:block;width:100%;object-fit:cover} /* ══════════════════════════════════════════════════════════════ 01 · THE SCHEDULER — the strip, then the timeline ══════════════════════════════════════════════════════════════ */ .fw-vx .fw-vx-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-vx-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-vx .fw-vx-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-vx-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-vx-lead b{color:var(--pk-dd)} .fw-vx-title__side{display:grid;justify-items:end;gap:12px} .fw-vx-title__art{display:flex} .fw-vx-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(--mt-ring), 0 0 0 3px var(--wh);animation:fw-vx-float 6s ease-in-out infinite} .fw-vx-title__art img + img{margin-left:-12px} .fw-vx-title__art img:nth-child(2){animation-delay:-2s} .fw-vx-title__art img:nth-child(3){animation-delay:-4s} .fw-vx-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-vx-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-vx-trust .bi{color:var(--mt-ink);font-size:14px} /* the strip */ .fw-vx-strip{position:relative;display:grid;grid-template-columns:minmax(0, 1.5fr) auto minmax(0, 1fr);align-items:center;gap:clamp(18px, 3vw, 44px);margin-top:clamp(18px, 3vh, 28px);padding:clamp(14px, 2.2vh, 20px) 0} .fw-vx-strip::before,.fw-vx-strip::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fade)} .fw-vx-strip::before{top:0} .fw-vx-strip::after{bottom:0} .fw-vx-stages{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px} .fw-vx-stages button{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border-radius:16px;text-align:left;font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink);background:var(--mt-wash);box-shadow:inset 0 0 0 1.5px var(--mt-l2);transition:background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease)} .fw-vx-stages img{width:36px;aspect-ratio:1;object-fit:contain;flex:none} .fw-vx-stages button:hover{box-shadow:inset 0 0 0 1.5px var(--mt-d)} .fw-vx-stages button[aria-pressed="true"]{background:var(--wh);box-shadow:inset 0 0 0 2px var(--mt-dd), 0 10px 22px var(--mt-ring)} /* The date: a field that opens the house month calendar under it (the pregnancy tracker's grammar), never the browser's own date input. */ .fw-vx-date{position:relative;display:grid;min-width:260px} .fw-vx-field{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 18px 0 7px;border-radius:999px;background:var(--wh);text-align:left;box-shadow:inset 0 0 0 1.5px var(--line), 0 14px 28px -20px var(--dk);transition:box-shadow .25s var(--ease), transform .25s var(--ease)} .fw-vx-field:hover{box-shadow:inset 0 0 0 1.5px var(--mt-d), 0 14px 28px -18px var(--mt-d);transform:translateY(-1px)} .fw-vx-field[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--mt-ink), 0 14px 28px -18px var(--mt-ink)} .fw-vx-field__ico{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--pk-d);color:var(--wh);box-shadow:var(--pk-glow-sm)} .fw-vx-field__ico .fw-ico{width:19px;height:19px} .fw-vx-field__txt{display:grid;flex:1;line-height:1.2} .fw-vx-field__txt small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)} .fw-vx-field__txt b{font-size:17px;font-weight:700;color:var(--pk-dd)} .fw-vx-field .bi{font-size:14px;color:var(--g5);transition:transform .3s var(--ease)} .fw-vx-field[aria-expanded="true"] .bi{transform:rotate(180deg)} .fw-vx-picker{position:absolute;top:68px;left:50%;z-index:30;width:360px;margin-left:-180px;padding:16px 16px 12px;border-radius:22px;background:var(--wh);animation:fw-vx-in .3s var(--ease);box-shadow:0 30px 60px -24px color-mix(in srgb, var(--dk) 45%, transparent), 0 0 0 1px var(--line)} .fw-vx-picker::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;background:var(--wh);transform:rotate(45deg);box-shadow:-1px -1px 0 var(--line)} .fw-vx-picker[hidden]{display:none} @keyframes fw-vx-in{from{opacity:0;transform:translateY(8px)}} .fw-vx-picker__head{display:grid;grid-template-columns:38px minmax(0, 1fr) 38px;align-items:center;margin-bottom:6px} .fw-vx-picker__head p{margin:0;text-align:center;font-size:15px;font-weight:700;color:var(--ink)} .fw-vx-picker__head button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s var(--ease), color .2s var(--ease)} .fw-vx-picker__head button:hover:not(:disabled){background:var(--mt-dd);color:var(--wh);box-shadow:none} .fw-vx-picker__head button:disabled{opacity:.3} .fw-vx-picker__dow,.fw-vx-picker__grid{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:4px} .fw-vx-picker__dow span{padding:4px 0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g5)} .fw-vx-picker__grid button{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease-pop)} .fw-vx-picker__grid button:hover:not(:disabled){background:var(--mt-l);color:var(--mt-ink);transform:scale(1.08)} .fw-vx-picker__grid button.is-today{box-shadow:inset 0 0 0 2px var(--ink)} .fw-vx-picker__grid button.is-pick{background:var(--pk-d);color:var(--wh);box-shadow:var(--pk-glow)} .fw-vx-picker__grid button:disabled{color:var(--g4);opacity:.45;cursor:default} .fw-vx-now{display:grid;gap:8px;justify-items:start} .fw-vx-now__pill{margin:0;padding:8px 16px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:16px;font-weight:700} .fw-vx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:12.5px;color:var(--g5)} .fw-vx-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-vx-foot button[hidden]{display:none} /* the timeline */ .fw-vx-tl{position:relative;margin:clamp(18px, 3vh, 28px) 0 0} .fw-vx-defs{position:absolute;width:0;height:0} .fw-vx-hatch__bg{fill:var(--co-l)} .fw-vx-hatch__ln{stroke:color-mix(in srgb, var(--co) 55%, var(--wh));stroke-width:3} .fw-vx-tl__head,.fw-vx-tl__rows li{display:grid;grid-template-columns:var(--name) minmax(0, 1fr);gap:16px;align-items:center} .fw-vx-tl__head svg{display:block;width:100%;height:54px;overflow:visible} .fw-vx-zone.is-before{fill:var(--bl-wash)} .fw-vx-zone.is-preg{fill:var(--mt-l)} .fw-vx-zone.is-after{fill:var(--pk-l)} .fw-vx-zone__t{fill:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-anchor:middle} .fw-vx-tick{fill:var(--g5);font-size:11.5px;font-weight:700;text-anchor:middle} .fw-vx-tl__rows{margin:6px 0 0;padding:0;list-style:none} .fw-vx-tl__rows li{position:relative;min-height:48px} .fw-vx-tl__rows li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-vx-tl__name{display:flex;align-items:center;gap:10px;margin:0;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-vx-tl__name img{width:32px;aspect-ratio:1;object-fit:contain;flex:none} .fw-vx-tl__rows svg{display:block;width:100%;height:48px;overflow:visible} .fw-vx-tl__base{stroke:var(--g1);stroke-width:2} .fw-vx-tl__grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4} .fw-vx-win{transform-box:fill-box;transform-origin:left center;animation:fw-vx-grow .8s var(--ease) both} .fw-vx-win.is-go{fill:var(--mt-d)} .fw-vx-win.is-maybe{fill:color-mix(in srgb, var(--mt) 38%, var(--wh));stroke:var(--mt-d);stroke-width:1.5;stroke-dasharray:5 4} .fw-vx-win.is-no{fill:url(#fw-vx-hatch)} .fw-vx-win.is-dose{fill:var(--pk-d);stroke:var(--wh);stroke-width:3;transform-origin:center} .fw-vx-tl__rows li:nth-child(2) .fw-vx-win{animation-delay:.06s} .fw-vx-tl__rows li:nth-child(3) .fw-vx-win{animation-delay:.12s} .fw-vx-tl__rows li:nth-child(4) .fw-vx-win{animation-delay:.18s} .fw-vx-tl__rows li:nth-child(5) .fw-vx-win{animation-delay:.24s} .fw-vx-tl__rows li:nth-child(6) .fw-vx-win{animation-delay:.3s} .fw-vx-tl__rows li:nth-child(7) .fw-vx-win{animation-delay:.36s} .fw-vx-tl__today{position:absolute;top:62px;left:calc(var(--name) + 16px);width:calc(100% - var(--name) - 16px);height:calc(100% - 62px - 58px);overflow:visible;pointer-events:none} .fw-vx-tl__today[hidden]{display:none} .fw-vx-tl__today line{stroke:var(--pk-d);stroke-width:2.5} .fw-vx-tl__today rect{fill:var(--pk-d);transform-box:fill-box;transform:translate(-50%, 6px)} .fw-vx-tl__today text{fill:var(--wh);font-size:12px;font-weight:700;text-anchor:middle} .fw-vx-tl figcaption{display:flex;flex-wrap:wrap;gap:6px 22px;margin:40px 0 0 calc(var(--name) + 16px);font-size:12.5px;color:var(--g6)} .fw-vx-tl figcaption span{display:inline-flex;align-items:center;gap:7px} .fw-vx-tl figcaption i{width:22px;height:10px;border-radius:5px} .fw-vx-tl figcaption .is-go i{background:var(--mt-d)} .fw-vx-tl figcaption .is-maybe i{background:color-mix(in srgb, var(--mt) 38%, var(--wh));box-shadow:inset 0 0 0 1.5px var(--mt-d)} .fw-vx-tl figcaption .is-no i{background:repeating-linear-gradient(45deg, var(--co-l) 0 3px, color-mix(in srgb, var(--co) 55%, var(--wh)) 3px 5px)} .fw-vx-tl figcaption .is-dose i{width:12px;height:12px;border-radius:50%;background:var(--pk-d)} /* ══════════════════════════════════════════════════════════════ 02 · YOUR DATES ══════════════════════════════════════════════════════════════ */ .fw-vx-dates{background:linear-gradient(180deg, var(--mt-wash), var(--wh))} .fw-vx-cal{display:grid;justify-items:end;gap:8px;max-width:520px} .fw-vx-calnote{display:grid;gap:4px;padding-top:10px;position:relative} .fw-vx-calnote[hidden]{display:none} .fw-vx-calnote p{margin:0;font-size:13px;line-height:1.55;color:var(--g6)} .fw-vx-calnote .fw-vx-calnote__ok{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--mt-ink)} .fw-vx-calnote__link{font-weight:700;color:var(--bl-d);text-decoration:underline;text-underline-offset:3px} .fw-vx-calnote__link:hover{color:var(--pk-dd)} .fw-vx-note{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:12px 16px;border-radius:14px;background:var(--go-l);color:var(--go-ink);font-size:14.5px;font-weight:600} .fw-vx-note[hidden]{display:none} .fw-vx-items{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 var(--gap);margin:0;padding:0;list-style:none} .fw-vx-items li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr) auto;align-items:center;gap:16px;padding:16px 0;transition:opacity .3s var(--ease)} .fw-vx-items li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-vx-items img{width:52px;aspect-ratio:1;object-fit:contain} .fw-vx-items p{margin:0;font-size:14px;line-height:1.5;color:var(--g6)} .fw-vx-item__top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px} .fw-vx-item__top b{font-size:16px;color:var(--ink)} .fw-vx-item__chip{padding:2px 10px;border-radius:999px;background:var(--g1);color:var(--g7);font-size:12px;font-weight:700} .fw-vx-items .is-now .fw-vx-item__chip{background:var(--pk-l);color:var(--pk-dd)} .fw-vx-items .is-go.is-now .fw-vx-item__chip{background:var(--pk-d);color:var(--wh)} .fw-vx-item__when{font-size:14.5px;font-weight:700;color:var(--mt-ink)} .fw-vx-items .fw-vx-item__when{color:var(--mt-ink)} .fw-vx-item__done{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--g7);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-vx-item__done .bi{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:transparent;box-shadow:inset 0 0 0 1.5px var(--g5)} .fw-vx-item__done:hover{box-shadow:inset 0 0 0 1.5px var(--mt-d)} .fw-vx-item__done[aria-pressed="true"]{background:var(--mt-dd);color:var(--wh);box-shadow:none} .fw-vx-item__done[aria-pressed="true"] .bi{background:var(--wh);color:var(--mt-dd);box-shadow:none} .fw-vx-items li.is-done > img,.fw-vx-items li.is-done > div{opacity:.5} .fw-vx-items li.is-done .fw-vx-item__top b{text-decoration:line-through;text-decoration-thickness:1.5px} .fw-vx-items__empty{grid-column:1 / -1;padding:16px 0;font-size:15px;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 03 · WHY IT PROTECTS TWO ══════════════════════════════════════════════════════════════ */ .fw-vx-split{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:var(--gap);align-items:stretch} .fw-vx-split > div{display:flex;flex-direction:column;justify-content:center;min-width:0} .fw-vx-split .fw-vx-pic{position:relative;min-height:340px} .fw-vx-split .fw-vx-pic img{position:absolute;inset:0;height:100%} .fw-vx-why__list{margin:0;padding:0;list-style:none} .fw-vx-why__list li{position:relative;display:grid;grid-template-columns:60px minmax(0, 1fr);gap:16px;align-items:center;padding:16px 0} .fw-vx-why__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-vx-why__list img{width:60px;aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-vx-why__list li:hover img{transform:translateY(-3px) rotate(-5deg)} .fw-vx-why__list p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · SAFE NOW, OR WAIT ══════════════════════════════════════════════════════════════ */ .fw-vx-safe{background:linear-gradient(180deg, var(--mt-wash), var(--wh))} .fw-vx-safe__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gap)} .fw-vx-list{position:relative;min-width:0} .fw-vx-list + .fw-vx-list::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-vx-list__h{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-family:var(--ff);font-size:19px;font-weight:700;color:var(--ink)} .fw-vx-list__h img{width:48px;aspect-ratio:1;object-fit:contain} .fw-vx-list ul{margin:0;padding:0;list-style:none} .fw-vx-list li{position:relative;display:grid;grid-template-columns:28px minmax(0, 1fr);grid-template-areas:"i b" "i s";align-items:center;gap:0 12px;padding:12px 0} .fw-vx-list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-vx-list li .bi{grid-area:i;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px} .fw-vx-list.is-yes li .bi{background:var(--mt-l);color:var(--mt-ink)} .fw-vx-list.is-no li .bi{background:var(--co-l);color:var(--co-ink)} .fw-vx-list li b{grid-area:b;font-size:16px;color:var(--ink)} .fw-vx-list li span{grid-area:s;font-size:14px;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · BEFORE FERTILITY TREATMENT — three steps ══════════════════════════════════════════════════════════════ */ .fw-vx-ivf__list{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin:0;padding:0;list-style:none} .fw-vx-ivf__list::before{content:"";position:absolute;left:18px;right:18px;top:18px;height:2px;background:linear-gradient(90deg, var(--mt-d), var(--mt-l2));opacity:.6} .fw-vx-ivf__list li{position:relative;display:grid;align-content:start;gap:8px} .fw-vx-ivf__n{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--mt-dd);color:var(--wh);font-size:15px;font-weight:700;box-shadow:0 0 0 6px var(--wh)} .fw-vx-ivf__list img{width:64px;aspect-ratio:1;object-fit:contain;margin-top:6px} .fw-vx-ivf__list p{margin:0;font-size:15px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 06 · QUESTIONS AND THE CLOSE ══════════════════════════════════════════════════════════════ */ .fw-vx-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-vx-faq__grid{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:var(--gap);align-items:start} .fw-vx-faq__side{display:grid;gap:20px} .fw-vx-faq__side .fw-vx-head{margin:0} .fw-vx-pic--baby img{aspect-ratio:3/2} .fw-vx-faq__close{display:grid;gap:8px} .fw-vx-faq__close .fw-vx-h3{font-size:clamp(20px, 2.9vh, 25px);line-height:1.25;text-wrap:balance} .fw-vx-faq__close p{margin:0;font-size:15px;line-height:1.6;color:var(--g6)} .fw-vx-close__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px} .fw-vx-qa details{position:relative} .fw-vx-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-vx-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-vx-qa summary::-webkit-details-marker{display:none} .fw-vx-qa summary:hover,.fw-vx-qa details[open] summary{color:var(--mt-ink)} .fw-vx-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-vx-qa details[open] summary .bi{transform:rotate(45deg);background:var(--mt-dd);color:var(--wh)} .fw-vx-qa p{margin:0 48px 16px 0;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · PLEASE READ ══════════════════════════════════════════════════════════════ */ .fw-vx-disc{background:color-mix(in srgb, var(--dk) 3%, var(--wh))} .fw-vx-disc__grid{display:grid;grid-template-columns:minmax(0, .55fr) minmax(0, 1.45fr);gap:clamp(24px, 4vw, 64px);align-items:start} .fw-vx-disc__head{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px} .fw-vx-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-vx-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-vx-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-vx-disc__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--g6)} .fw-vx-disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--mt-d)} /* ══════════════════════════════════════════════════════════════ 08 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-vx-strip{grid-template-columns:minmax(0, 1fr) auto} .fw-vx-now{grid-column:1 / -1} .fw-vx-page{--name:200px} } @media (max-width:1024px){ .fw-vx-title,.fw-vx-split,.fw-vx-faq__grid,.fw-vx-disc__grid,.fw-vx-safe__grid,.fw-vx-items{grid-template-columns:minmax(0, 1fr)} .fw-vx-title__side{justify-items:start} .fw-vx-trust{justify-content:flex-start} .fw-vx-list + .fw-vx-list::before{left:0;right:0;top:calc(var(--gap) / -2);bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-vx-head--row{align-items:flex-start} .fw-vx-head--row > .fw-vx-sub{text-align:left} .fw-vx-cal{justify-items:start} .fw-vx-split .fw-vx-pic{min-height:0} .fw-vx-split .fw-vx-pic img{position:static;height:auto;aspect-ratio:16/9} .fw-vx-spot{filter:blur(50px)} .fw-vx-faq__side{display:contents} .fw-vx-faq__side .fw-vx-head{order:1} .fw-vx-qa{order:2} .fw-vx-pic--baby{order:3} .fw-vx-faq__close{order:4} } @media (max-width:640px){ .fw-vx-page{--pad:14px;--name:96px} .fw-vx .fw-vx-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-vx-title__art{display:none} .fw-vx-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-vx-strip{grid-template-columns:minmax(0, 1fr)} .fw-vx-stages button{flex-direction:column;justify-content:center;gap:4px;min-height:74px;padding:8px 6px;text-align:center;font-size:12.5px} .fw-vx-stages img{width:30px} .fw-vx-date{min-width:0} .fw-vx-picker{position:relative;top:auto;left:auto;width:auto;margin:10px 0 0} .fw-vx-tl__head,.fw-vx-tl__rows li{gap:8px} .fw-vx-tl__name{gap:0;font-size:11.5px} .fw-vx-tl__name img{display:none} .fw-vx-zone__t{font-size:9px;letter-spacing:.02em} .fw-vx-tick{font-size:9px} .fw-vx-tick:nth-of-type(n+3):nth-of-type(-n+5){display:none} .fw-vx-tl__today{left:calc(var(--name) + 8px);width:calc(100% - var(--name) - 8px)} .fw-vx-tl figcaption{margin-left:0} .fw-vx-items li{grid-template-columns:40px minmax(0, 1fr);gap:10px 12px} .fw-vx-items img{width:40px} .fw-vx-item__done{grid-column:2;justify-self:start} .fw-vx-ivf__list,.fw-vx-disc__list{grid-template-columns:minmax(0, 1fr)} .fw-vx-ivf__list::before{display:none} .fw-vx-pic--baby img{aspect-ratio:4/3} .fw-vx-qa p{margin-right:0} } @media (prefers-reduced-motion:reduce){ .fw-vx-spot,.fw-vx-title__art img,.fw-vx-win{animation:none} }