/* «Мир Детства» — акварельная сказка.
   Бумага, размытые заливки, рваные края. Тени и блеск не используем. */

@font-face { font-family: "Cormorant Infant"; src: url("../fonts/CormorantInfant-VF.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-VF.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
    --paper:   #fbf6ee;
    --paper-2: #f4ece0;
    --ink:     #39364a;
    --ink-2:   #6b6679;
    --line:    #e2d7c7;
    --rose:    #e8a59d;
    --sky:     #9cc3da;
    --sage:    #a9c7a1;
    --honey:   #ecc77e;
    --lilac:   #b9a6d0;
    --coral:   #cf6f63;
    --coral-d: #b25a4f;
    --ok:      #4f8a5b;
    --bad:     #b0473d;
    --serif:   "Cormorant Infant", "Georgia", serif;
    --sans:    "Nunito", "Segoe UI", system-ui, sans-serif;
    --r:       18px;
}

* { box-sizing: border-box; }

html { background: var(--paper); overflow-x: clip; }

body {
    margin: 0;
    color: var(--ink);
    font: 17px/1.65 var(--sans);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
        var(--paper);
    overflow-x: clip;
}

/* атрибуты width/height — только для резерва места; пропорции держит CSS */
img { max-width: 100%; height: auto; }

a { color: var(--coral-d); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--coral); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 26px; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }

main { position: relative; z-index: 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- акварельные заливки ---------- */

.wash {
    position: absolute;
    border-radius: 50%;
    filter: url(#wc-wash);
    opacity: .55;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: multiply;
}
.wash-rose  { background: radial-gradient(circle at 40% 40%, var(--rose), transparent 70%); }
.wash-sky   { background: radial-gradient(circle at 50% 50%, var(--sky), transparent 70%); }
.wash-sage  { background: radial-gradient(circle at 50% 50%, var(--sage), transparent 70%); }
.wash-honey { background: radial-gradient(circle at 50% 50%, var(--honey), transparent 70%); }
.wash-lilac { background: radial-gradient(circle at 50% 50%, var(--lilac), transparent 70%); }

/* мазок под заголовком */
.stroke { position: relative; display: inline-block; }
.stroke::after {
    content: ""; position: absolute; left: -4%; right: -4%; bottom: .06em; height: .38em;
    background: var(--honey); opacity: .55; border-radius: 40%;
    filter: url(#wc-edge); z-index: -1;
}

/* ---------- шапка и подвал ---------- */

.top {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 1180px; margin: 0 auto; padding: 18px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand b { display: block; font: 700 28px/1 var(--serif); }
.brand small { display: block; font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a {
    padding: 8px 16px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.top nav a[aria-current="page"] { background: var(--paper-2); }
.top nav a.nav-cta { background: var(--coral); color: #fff; }
.top nav a.nav-cta:hover { background: var(--coral-d); }

.foot {
    position: relative; overflow: hidden;
    margin-top: 96px; padding: 56px 24px 40px; text-align: center; font-size: 15px;
}
.foot .wash { width: 900px; height: 340px; left: 50%; top: 10px; transform: translateX(-50%); opacity: .45; }
.foot p { margin: 0 0 .5em; }

/* ---------- кнопки ---------- */

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px; border: 0; border-radius: 999px;
    background: var(--coral); color: #fff; font: 700 17px/1 var(--sans);
    text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--coral-d); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- главная ---------- */

.hero { position: relative; padding: 40px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { font-size: 20px; color: var(--ink-2); max-width: 30em; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-art { position: relative; aspect-ratio: 1 / 1; }
.hero-art img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%);
            mask: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.hero-logo { aspect-ratio: 1042 / 1100; }
.hero-logo img { -webkit-mask: none; mask: none; object-fit: contain; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; }
.pillar { position: relative; padding: 28px 26px; }
.pillar .wash { inset: 0; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; opacity: .5; }
.pillar img { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 14px;
    -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 100%); mask: radial-gradient(closest-side, #000 70%, transparent 100%); }
.pillar p { color: var(--ink-2); margin: 0; }

.band { position: relative; padding: 72px 0; text-align: center; }
.band .wash { width: 80%; height: 100%; left: 10%; top: 0; }

/* ---------- лист бумаги (устав, форма) ---------- */

.sheet {
    position: relative; background: #fffdf9; border-radius: var(--r);
    padding: 48px clamp(22px, 5vw, 64px);
    box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line);
}
.page-title { position: relative; text-align: center; padding: 32px 0 36px; }
.page-title .wash { width: 520px; height: 220px; left: 50%; top: 0; transform: translateX(-50%); }
.page-title p { color: var(--ink-2); max-width: 36em; margin: 0 auto; }

/* устав */
.charter h2 { font-size: 30px; margin-top: 1.6em; }
.charter h3 { font-size: 22px; margin-top: 1.2em; }
.charter ol, .charter ul { padding-left: 1.3em; }
.charter li { margin-bottom: .4em; }
.toc { columns: 2; column-gap: 32px; padding: 0; list-style: none; margin: 0 0 32px; font-size: 15px; }
.toc a { text-decoration: none; }
.approved { text-align: right; font-size: 15px; color: var(--ink-2); margin: 0 0 24px; }
.draft-note { background: var(--paper-2); border-radius: 12px; padding: 14px 18px; font-size: 15px; color: var(--ink-2); }

/* ---------- форма ---------- */

.form { display: grid; gap: 20px; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.row-2 { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.field label i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date] {
    width: 100%; padding: 13px 15px; font: 17px var(--sans); color: var(--ink);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
}
.field textarea, .field select { width: 100%; padding: 13px 15px; font: 17px var(--sans); color: var(--ink);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; }
.field textarea { resize: vertical; line-height: 1.55; }
.field textarea:focus, .field select:focus,
.field input:focus { outline: 0; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(156,195,218,.35); }
.field .err { color: var(--bad); font-size: 14px; margin-top: 5px; }
.field.has-err input { border-color: var(--bad); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.field label.check { font-weight: 400; font-size: 15px; margin: 0; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--coral); flex: none; }
.small-check { font-size: 14px; margin-top: 6px; color: var(--ink-2); }
.small-check input { width: 16px; height: 16px; }
.hp { position: absolute; left: -9999px; }
.alert { padding: 14px 18px; border-radius: 12px; background: #f7e1dd; color: var(--bad); }
.alert-ok { background: #e3efe0; color: var(--ok); }

/* ---------- итог и проверка ---------- */

.result { text-align: center; }
.result .seal {
    width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; font: 700 52px/1 var(--serif); color: #fff;
}
.result .seal::before { content: ""; position: absolute; }
.seal-ok { background: var(--sage); }
.seal-wait { background: var(--honey); }
.seal-bad { background: var(--rose); }
.result .fio { font: 600 34px/1.2 var(--serif); margin: 8px 0 14px; }

/* ---------- телефоны ---------- */

@media (max-width: 860px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .hero-art { max-width: 460px; margin: 0 auto; order: -1; }
    .pillars { grid-template-columns: 1fr; }
    .row, .row-2 { grid-template-columns: 1fr; }
    .toc { columns: 1; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .top { flex-direction: column; align-items: flex-start; }
    .sheet { padding: 28px 18px; }
    .foot .wash { width: 600px; }
}

/* ---------- раздел «Знания» ---------- */

.crumbs { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.crumbs a { color: var(--ink-2); }
.crumbs .sep { opacity: .5; margin: 0 4px; }

.zgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.zgrid-4 { grid-template-columns: repeat(4, 1fr); }
.zcard { position: relative; display: block; padding: 22px 22px 24px; color: var(--ink); text-decoration: none; }
.zcard .wash { inset: 0; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; opacity: .45; }
.zcard img { width: 150px; height: 150px; object-fit: cover; display: block; margin-bottom: 12px;
    -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 100%); mask: radial-gradient(closest-side, #000 70%, transparent 100%); }
.zcard b { display: block; font: 600 25px/1.15 var(--serif); margin-bottom: 6px; }
.zcard span:last-child { color: var(--ink-2); font-size: 15px; }
.zcard:hover b { color: var(--coral-d); }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.article .sheet { padding: 40px clamp(20px, 4vw, 52px); }
.article h1 { font-size: clamp(34px, 4.6vw, 52px); }
.article .lead { font-size: 19px; color: var(--ink-2); }
.article h2 { font-size: 30px; margin-top: 1.4em; }
.article h3 { font-size: 23px; margin-top: 1.1em; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-bottom: .35em; }
.art-hero { float: right; width: 260px; margin: 0 0 12px 24px; shape-outside: circle(50%); }
.art-hero img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; clear: both; }
.fact { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; }
.fact small { display: block; color: var(--ink-2); font-size: 13px; }
.fact b { font: 600 22px/1.2 var(--serif); }
.md-img { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 8px auto; }
.tip { background: #eef4ea; border-radius: 14px; padding: 14px 18px; }
.tip::before { content: "Совет. "; font-weight: 700; color: var(--ok); }
.check-list { list-style: none; padding-left: 0 !important; }
.check-list li { padding-left: 30px; position: relative; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: var(--sage); }
.warn-list li::before { background: var(--rose); }
.disclaimer { margin-top: 28px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 8px 0 0; color: var(--ink-2); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.pager a { text-decoration: none; font-weight: 700; }

.side { position: sticky; top: 16px; font-size: 15px; }
.side h3 { font-size: 21px; margin-bottom: 10px; }
.side ul { list-style: none; padding: 0; margin: 0 0 22px; }
.side li { margin-bottom: 6px; }
.side .on { font-weight: 700; color: var(--ink); text-decoration: none; }

.strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 26px; }
.strip a { min-width: 40px; padding: 6px 0; text-align: center; border-radius: 999px; background: var(--paper-2);
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.strip a:hover { background: var(--honey); }
.strip a.on { background: var(--coral); color: #fff; }
.strip .t1 { box-shadow: inset 0 -3px 0 var(--rose); }
.strip .t2 { box-shadow: inset 0 -3px 0 var(--sage); }
.strip .t3 { box-shadow: inset 0 -3px 0 var(--sky); }

.tri { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; margin: 34px 0 10px; }
.tri img { width: 220px; height: 220px; object-fit: cover; -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 100%); mask: radial-gradient(closest-side, #000 70%, transparent 100%); }
.weeks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; padding: 0; list-style: none; }
.weeks-list a { text-decoration: none; color: var(--ink); }
.weeks-list b { font-family: var(--serif); font-size: 21px; }
.weeks-list span { display: block; font-size: 14px; color: var(--ink-2); }

@media (max-width: 960px) {
    .article { grid-template-columns: 1fr; }
    .side { position: static; }
    .zgrid, .zgrid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .zgrid, .zgrid-4, .facts { grid-template-columns: 1fr; }
    .art-hero { float: none; width: 220px; margin: 0 auto 12px; }
    .tri { grid-template-columns: 1fr; }
    .tri img { margin: 0 auto; }
}

/* ---------- филигрань, вензель, интерактив ---------- */

:root { --gold: #b8915c; --gold-2: #d6b98a; }

/* орнаменты из спрайта inc/ornaments.svg.php; линии прорисовываются, когда .orn получает .is-drawn */
.orn { display: block; overflow: visible; color: var(--gold); }
.orn-line { stroke: var(--gold); stroke-width: 1.7; }
.orn-thin { stroke-width: 1.05; }
.orn-leaf { fill: var(--sage); opacity: var(--leaf, 1); transition: opacity .9s ease .8s; }
.orn-dot { fill: var(--gold-2); }
.orn-heart { fill: var(--coral); opacity: var(--leaf, 1); transition: opacity .7s ease 1s; }
.orn-fill { fill: #284267; }
.orn-accent { fill: var(--coral-d); opacity: .92; }
.orn.js-draw { stroke-dasharray: 1; stroke-dashoffset: 1; --leaf: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.45, .05, .25, 1); }
.orn.js-draw.is-drawn { stroke-dashoffset: 0; --leaf: 1; }

.orn-rule { width: min(320px, 82%); height: auto; aspect-ratio: 320 / 44; margin: 10px auto 18px; }
.page-title .orn-rule { margin-top: -2px; }
.orn-sep { margin: 56px auto 0; }

.sheet { position: relative; }
.orn-corner { position: absolute; width: 62px; height: 62px; pointer-events: none; opacity: .9; }
.orn-corner.tl { left: 8px; top: 8px; }
.orn-corner.tr { right: 8px; top: 8px; transform: scaleX(-1); }
.orn-corner.bl { left: 8px; bottom: 8px; transform: scaleY(-1); }
.orn-corner.br { right: 8px; bottom: 8px; transform: scale(-1, -1); }

/* вензель в подвале */
.foot .monogram { display: block; width: 78px; height: 78px; margin: 0 auto 12px; transition: transform .6s ease; }
.foot .monogram:hover { transform: rotate(-6deg) scale(1.06); }

/* карточки и картинки: живое наведение */
.zcard, .pillar { transition: transform .35s ease; }
.zcard .wash, .pillar .wash { transition: transform .6s ease, opacity .6s ease; }
.zcard img, .pillar img { transition: transform .5s ease; }
.zcard:hover, .pillar:hover { transform: translateY(-4px); }
.zcard:hover .wash, .pillar:hover .wash { transform: scale(1.07) rotate(-2deg); opacity: .62; }
.zcard:hover img, .pillar:hover img { transform: scale(1.05) rotate(-2deg); }
.btn { transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(178, 90, 79, .7); }
.hero-logo { cursor: pointer; }
.hero-logo img { transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.hero-logo:hover img { transform: rotate(-2deg) scale(1.02); }
.hero .wash { transition: translate .9s ease-out; }

/* акварельные сердечки, всплывающие по клику на логотип */
.float-heart { position: fixed; width: 22px; height: 20px; pointer-events: none; z-index: 50;
    filter: url(#wc-edge); animation: heart-up 1.9s ease-out forwards; }
@keyframes heart-up {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0); }
    15%  { opacity: .95; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% - 150px)) scale(1.25) rotate(var(--rot)); }
}

/* подсказки у недель беременности */
.strip a[data-tip] { position: relative; }
.strip a[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    background: var(--ink); color: var(--paper); font: 600 12.5px/1.3 var(--sans); padding: 6px 10px; border-radius: 8px;
    white-space: nowrap; z-index: 5; pointer-events: none; }

/* частые вопросы: плавное раскрытие */
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font: 400 24px/1 var(--serif); transition: transform .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] p { animation: faq-open .35s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }

/* прогресс чтения статьи — тонкая акварельная полоса сверху */
.read-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 40; transform-origin: 0 50%;
    transform: scaleX(0); background: linear-gradient(90deg, var(--honey), var(--coral)); }

/* наверх — кнопка с вензелем */
.to-top { position: fixed; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; border: 0; z-index: 30;
    background: #fffdf9; box-shadow: 0 0 0 1px var(--line), 0 8px 22px -12px rgba(57, 54, 74, .5); cursor: pointer; padding: 6px;
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 100%; height: 100%; }
.to-top:hover { transform: translateY(-3px); }

@media (max-width: 560px) {
    .orn-corner { width: 44px; height: 44px; }
    .to-top { width: 46px; height: 46px; right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .orn.js-draw { transition: none; stroke-dashoffset: 0; --leaf: 1; }
    .zcard, .pillar, .zcard .wash, .zcard img, .pillar .wash, .pillar img, .hero-logo img, .hero .wash { transition: none; }
    .zcard:hover, .pillar:hover, .zcard:hover .wash, .zcard:hover img, .pillar:hover .wash, .pillar:hover img { transform: none; }
    .float-heart { display: none; }
}

/* ---------- инструменты (калькуляторы) ---------- */

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 999px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.seg input:checked + span { background: #fffdf9; box-shadow: 0 1px 4px rgba(57, 54, 74, .15); color: var(--coral-d); }
.seg input:focus-visible + span { outline: 2px solid var(--sky); }
.pair { display: flex; gap: 8px; align-items: center; }
.pair input { width: 90px !important; }
.calc-res { margin-top: 24px; }
.calc-res h2 { font-size: 28px; margin-top: 1em; }
.big-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 16px; }
.big-facts > div { background: var(--paper-2); border-radius: 14px; padding: 14px 16px; text-align: center; }
.big-facts small { display: block; color: var(--ink-2); font-size: 13px; }
.big-facts b { font: 700 25px/1.2 var(--serif); color: #284267; }
.tone-ok { background: #e3efe0 !important; } .tone-ok b { color: var(--ok) !important; }
.tone-warn { background: #f8ecd0 !important; } .tone-warn b { color: #8a6418 !important; }
.tone-bad { background: #f7e1dd !important; } .tone-bad b { color: var(--bad) !important; }
.progress { position: relative; height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 18px 0 6px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), var(--sage) 50%, var(--sky)); border-radius: 999px; }
.progress i { position: absolute; top: 0; bottom: 0; width: 2px; background: #fffdf9; }
.timeline { list-style: none; padding: 0 !important; margin: 10px 0 14px; border-left: 2px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 210px 1fr; gap: 12px; padding: 9px 0 9px 20px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%;
    background: #fffdf9; box-shadow: 0 0 0 2px var(--gold-2); }
.timeline li.past { opacity: .55; } .timeline li.past::before { background: var(--gold-2); }
.timeline li.now::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(207, 111, 99, .25); }
.timeline time { color: var(--ink-2); font-size: 14.5px; }
.timeline em { font-style: normal; font-weight: 700; color: var(--coral-d); margin-left: 6px; font-size: 13px; }
.vax .vx { display: inline-block; margin: 0 6px 6px 0; padding: 4px 11px; border-radius: 999px; background: #eef4ea; font-size: 14.5px; }
.vax .vx.risk { background: var(--paper-2); color: var(--ink-2); }
.who-chart { width: 100%; height: auto; display: block; margin: 6px 0; font: 12px var(--sans); }
.who-chart .g { stroke: var(--line); stroke-width: 1; }
.who-chart text { fill: var(--ink-2); }
.who-chart .band { fill: var(--sage); opacity: .22; }
.who-chart .c { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.who-chart .c50 { stroke: var(--ok); stroke-width: 2.2; }
.who-chart .c3, .who-chart .c97 { stroke: var(--coral); stroke-dasharray: 5 4; }
.who-chart .cl { font-size: 11px; }
.who-chart .pt { fill: var(--coral); stroke: #fff; stroke-width: 3; }
.timer { text-align: center; }
.timer-btn { width: min(280px, 80vw); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; margin: 6px auto 22px; display: grid;
    place-content: center; gap: 6px; background: radial-gradient(circle at 40% 35%, #f3c7bf, var(--coral)); color: #fff;
    font: 700 20px var(--sans); box-shadow: 0 14px 32px -16px rgba(178, 90, 79, .9); transition: transform .15s ease; }
.timer-btn b { font: 700 46px/1 var(--serif); }
.timer-btn:active { transform: scale(.97); }
.timer-btn.on { background: radial-gradient(circle at 40% 35%, #cfe3ee, #5f8fae); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(95, 143, 174, .12), 0 14px 32px -16px rgba(40, 66, 103, .9); } }
#t-table { margin-top: 10px; }
@media (max-width: 600px) {
    .big-facts { grid-template-columns: 1fr; }
    .timeline li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .timer-btn.on { animation: none; } }