/* ============================================================
   VYSLID · головна v3.2. Атоми в манері Claude Console / claude.com:
   одна родина шрифту (Onest), радіуси 8/10/16/24/32, inset-кільця замість
   бордерів, тихі тіні, крапчасте полотно, жодних градієнтів і блобів.
   Без inline-стилів (CSP). Іконки: <use href="#i-…">.

   Spec 060, S12a: this file keeps the landing and /what compositions only. Tokens come from
   tokens.css (no :root here), the shared public chrome (resets, buttons, header, bands, page
   template, cards, CTA band, footer) from vy-site.css, and the looks shared with /app from
   vy-controls.css and vy-components.css. The @font-face, the marquee focus rule and the
   reduced-motion block stay here because tests read them from this file.
   ============================================================ */
/* Onest is a variable font (wght 100-900): one file per subset carries every weight, so each file is
   declared once with a weight range. The range stays 400-600, the weights this page declared before,
   so a bolder request still renders at 600. */
@font-face{font-family:"Onest";font-weight:400 600;font-display:swap;src:url(/assets/fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:400 600;font-display:swap;src:url(/assets/fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- картинка в іконці картки (атоми без розмітки прибрав S17, 01 §7.9) ---------- */
.icon-box img{width:28px;height:28px;object-fit:contain}

/* ---------- hero ---------- */
.hero{position:relative;padding:108px 0 48px;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;background-image:radial-gradient(circle,var(--atom-dot) 1px,transparent 1.4px);background-size:22px 22px;pointer-events:none}
.hero-grid-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(253,253,252,0) 35%,var(--paper) 100%)}
/* D25: text on the left, the video frame on the right (the V6 hero before UI-02); one column under 960px,
   where the 16:10 frame is capped by the viewport height so a phone held sideways sees it whole under the header (D26) */
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center}
.hero h1{font-size:var(--text-display);line-height:1.1;letter-spacing:-.02em;margin:14px 0 16px;max-width:16ch}
.hero h1 .acc{color:var(--accent)}
.hero .lede{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55;color:var(--text);max-width:50ch;margin-bottom:22px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero .note{margin-top:16px;font-size:var(--text-ui);color:var(--muted);text-wrap:balance}
.hero .note svg{display:inline-block;vertical-align:-3px;margin-right:8px;width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:1.7;stroke-linecap:round}
@media(max-width:960px){.hero{padding:92px 0 40px}.hero .wrap{grid-template-columns:1fr;gap:36px}.hero h1{max-width:none}.hero-video{max-width:calc((100svh - 96px) * 1.6)}}

/* ---------- hero: відео (D25). Поки <video> без src, видно лише постер із написом; атрибут src сам міняє постер на плеєр ---------- */
.hero-video{margin:0;border-radius:var(--r-lg);background:var(--dark);box-shadow:var(--sh-lg),inset 0 0 0 1px var(--dark-ring);overflow:hidden;position:relative;color:var(--dark-text)}
.hv-screen{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background-image:radial-gradient(circle,var(--atom-dot-inverse) 1.2px,transparent 1.6px);background-size:22px 22px}
.hv-screen::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(22,20,18,0) 30%,rgba(22,20,18,.85) 100%);pointer-events:none}
.hv-orn{position:absolute;width:300px;height:auto;right:-56px;bottom:-48px;color:rgba(240,239,236,.07);z-index:1}
.hv-tag{position:relative;z-index:2;font-size:var(--text-ui);font-weight:500;color:var(--dark-text);background:rgba(255,255,255,.08);padding:6px 12px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--dark-ring)}
.hero-video video{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#000}
.hero-video video:not([src]),.hero-video video[src]+.hv-screen{display:none}

/* поява при прокрутці (лише головна: клас .js ставить landing-v3.js) */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.dl1{transition-delay:.06s}.dl2{transition-delay:.12s}.dl3{transition-delay:.18s}

/* складові: стрічка в манері makeai (чорна смуга 54px, uppercase 14px, ✦, 30s), пункти клікабельні, пауза на ховері */
.marquee{background:var(--sunken);border-top:1px solid var(--ring);border-bottom:1px solid var(--ring);padding:16px 0;overflow:hidden;position:relative}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee.is-paused .marquee-track{animation-play-state:paused}
/* Фокус із клавіатури: анімація не просто спиняється, а СКИДАЄТЬСЯ. Пауза лишала
   зсунуту доріжку, і посилання, що вже поїхало ліворуч за overflow:hidden, ставало
   недосяжним: кільця фокуса не видно, а відʼємне переповнення не прокручується. */
.marquee:has(a:focus-visible) .marquee-track{animation:none;transform:none}
.marquee .set{display:flex}
.marquee .set a{display:inline-flex;align-items:center;font-size:var(--text-ui);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);line-height:22px;margin-right:48px;white-space:nowrap;transition:color .2s}
.marquee .set a::after{content:"";width:6px;height:6px;background:var(--accent);border-radius:1.5px;margin-left:48px}
.marquee .set a:hover{color:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero{padding-bottom:56px}

/* для кого */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* .who .q paints as the .vy-well recipe (vy-components.css); only its type is set here */
.who .q{font-size:var(--text-base);line-height:1.5}
.who .na{font-size:var(--text-sm);line-height:1.5;color:var(--muted)}
.try{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:var(--text-ui);font-weight:500;color:var(--accent);align-self:flex-start}
.try svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.try:hover svg{transform:translateX(2px)}
@media(pointer:coarse){.try{min-height:44px}}
@media(max-width:900px){.who{grid-template-columns:1fr}}

/* кроки */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{background:var(--surface);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1px var(--ring)}
.step .n{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);color:var(--muted)}
.step .n em{font-style:normal;font-size:var(--text-sm);font-weight:500;color:var(--ink);background:var(--sunken);padding:4px 8px;border-radius:6px}
.step h3{font-size:var(--text-lg)}
.step p{font-size:.90625rem;line-height:1.5;color:var(--text)}
.step .ex{margin-top:auto;padding-top:12px;border-top:1px solid var(--ring);font-size:var(--text-sm);color:var(--muted);line-height:1.45}
.step .ex b{color:var(--ink)}
.step.last{background:var(--accent-soft);box-shadow:none}
.step.last .n em{background:#fff;color:var(--accent-ink)}
.step.last .ex{border-top-color:rgba(122,46,42,.15)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* темний блок: документ-відповідь */
.showcase{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.showcase h2{font-size:clamp(1.75rem,3.2vw,2.625rem);line-height:1.12;letter-spacing:-.015em;margin:12px 0 14px;color:#fff}
.showcase .lead{color:var(--dark-muted);font-size:var(--text-lead);line-height:1.55;max-width:42ch}
.showcase .list{display:grid;gap:10px;margin-top:24px}
.showcase .list div{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-base);color:var(--dark-text)}
.showcase .list svg{flex:none;width:18px;height:18px;stroke:var(--dark-muted);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
/* .doc is the answer-card recipe .vy-doc (vy-components.css); the showcase sets only its context */
.doc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:var(--text-sm);color:var(--muted)}
.doc h4,.sec.dark .doc h4{font-size:1.1875rem;line-height:1.35;color:var(--ink);margin-bottom:12px}
.doc .a{font-size:var(--text-md);line-height:1.55;color:var(--text);margin-bottom:16px}
.doc .a b{color:var(--ink)}
.doc blockquote{margin:0 0 18px;padding:2px 0 2px 16px;border-left:2px solid var(--accent);font-size:.96875rem;line-height:1.55;color:var(--ink)}
.doc blockquote footer{margin-top:8px;font-size:var(--text-sm);color:var(--muted)}
/* The card is white inside the dark band, so the source link under the quote takes the paper ring back: the band's --dark-focus is near-white. */
.sec.dark .doc{--focus-color:var(--accent)}
.doc .src{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.doc .src li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-btn);background:var(--sunken)}
.doc .src li .k{font-size:var(--text-sm);color:var(--muted);min-width:118px}
.doc .src li b{font-size:var(--text-ui);color:var(--ink)}
@media(max-width:900px){.showcase{grid-template-columns:1fr}.doc{padding:22px 20px}.doc .src li{display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:1px;align-items:center}.doc .src li .icon-box{grid-row:1/3}.doc .src li .k{min-width:0}}

/* чесність */
.honest{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.honest .card .ex{font-size:.84375rem;line-height:1.5;color:var(--text);padding:10px 12px;background:var(--sunken);border-radius:var(--r-btn)}
.honest .card .ex b{color:var(--accent-ink)}
@media(max-width:900px){.honest{grid-template-columns:1fr}}

/* рівні */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.tier{background:var(--surface);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;position:relative;box-shadow:inset 0 0 0 1px var(--ring)}
.tier.rec{box-shadow:var(--sh-md),inset 0 0 0 1px var(--ring-2)}
.tier .rb{position:absolute;top:-12px;left:22px;background:var(--ink);color:#fff;border-radius:6px;padding:5px 9px;font-size:var(--text-xs);font-weight:500}
.tier .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tier .head b{font-size:var(--text-ui);font-weight:500;color:var(--muted)}
.tier .t{font-size:var(--text-2xl);font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px}
.tier p{font-size:var(--text-base);line-height:1.5;color:var(--text)}
.tier .depth{display:flex;gap:4px;margin:16px 0}
.tier .depth i{height:5px;flex:1;border-radius:3px;background:var(--sunken-2)}
.tier .depth i.on{background:var(--accent)}
.tier ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:7px;font-size:.90625rem;color:var(--text)}
.tier li{display:flex;gap:9px;align-items:flex-start}
.tier li svg{flex:none;width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.tier .btn{margin-top:auto;width:100%}
.tiers-note{margin-top:12px;display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring);font-size:.90625rem;color:var(--text);line-height:1.5}
.tiers-note b{color:var(--ink)}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}

/* faq */
.faq-list{max-width:720px;margin:0 auto}
.faq details{border-top:1px solid var(--ring-2)}
.faq details:last-child{border-bottom:1px solid var(--ring-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 2px;font-size:var(--text-lead);font-weight:500;line-height:1.35;color:var(--ink);transition:color .2s}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:22px;height:22px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:13px;height:1.5px}
.faq summary .pm::after{width:1.5px;height:13px;transition:transform .3s var(--ease)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details p{padding:0 40px 16px 2px;font-size:.96875rem;line-height:1.55;color:var(--text);max-width:64ch}

/* новини */
.news .box{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px;align-items:center}
.news h2{font-size:clamp(1.625rem,2.8vw,2.25rem);line-height:1.15;margin:12px 0 10px}
.news p{color:var(--text);font-size:var(--text-md);line-height:1.55;max-width:44ch}
.news .btn{margin-top:22px}
.news .stack{display:grid;gap:10px}
.news .item{background:var(--surface);border-radius:var(--r-card);padding:14px 16px;box-shadow:inset 0 0 0 1px var(--ring);display:flex;gap:12px;align-items:center;transition:box-shadow .25s var(--ease)}
.news .item:hover{box-shadow:var(--sh-md),inset 0 0 0 1px var(--ring-2)}
.news .item b{display:block;font-size:var(--text-base);font-weight:500;color:var(--ink);line-height:1.3}
.news .item small{color:var(--muted);font-size:var(--text-sm)}
@media(max-width:820px){.news .box{grid-template-columns:1fr}}

/* CTA: композер у темній смузі (смуга у vy-site.css) */
.composer{max-width:640px;margin:0 auto;background:var(--dark-2);border-radius:var(--r-card);padding:10px;box-shadow:inset 0 0 0 1px var(--dark-ring);text-align:left;transition:box-shadow .2s}
/* the band's focus colour (vy-site.css): a 2px ring at 15:1, where the 30% white one was 2.72:1 (01 §7.12) */
.composer:focus-within{box-shadow:inset 0 0 0 var(--focus-width) var(--focus-color)}
.composer textarea{width:100%;min-height:96px;resize:none;border:0;outline:0;background:transparent;color:#fff;font:400 var(--text-md)/1.5 var(--font);padding:8px 8px 6px;scrollbar-width:none}
.composer textarea::-webkit-scrollbar{display:none}
.composer textarea::placeholder{color:var(--dark-muted)}
.composer .row{display:flex;align-items:center;gap:12px;padding:6px 0 0 8px}
.composer .row small{color:var(--dark-muted);font-size:var(--text-sm)}
.composer .row .btn{margin-left:auto;padding:12px 22px;font-size:var(--text-ui)}
@media(pointer:coarse){.composer .row .btn{padding-block:14px}}
/* A large default font on a narrow phone (D26): the button takes its own line instead of leaving the box. */
@media(max-width:18em){.composer .row{flex-wrap:wrap}}
.cta .micro{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:var(--text-ui);color:var(--dark-muted)}
.cta .micro span{display:inline-flex;align-items:center;gap:7px}
.cta .micro svg{width:15px;height:15px;stroke:var(--dark-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ghost{position:relative;margin-top:40px;color:rgba(240,239,236,.05);line-height:0}
.ghost svg{width:100%;height:auto}
.ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,20,18,0) 30%,var(--dark) 95%)}
@media(max-width:560px){.composer textarea{min-height:120px}}

@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ---------- атмосфера: шлях кроків і приклад запиту (смуги й орнамент у vy-site.css) ---------- */
.steps{position:relative;padding-top:26px}
.steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:1px;background:var(--ring-3)}
.step{position:relative}
.step::before{content:"";position:absolute;top:-23px;left:50%;width:11px;height:11px;margin-left:-6px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:2px}
.step.last::before{background:var(--accent);box-shadow:none}
.who .q::before{content:"Приклад запиту";display:block;font-size:var(--text-xs);color:var(--muted);margin-bottom:4px}
.tier.rec::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
@media(max-width:900px){.steps::before{display:none}.step::before{display:none}.steps{padding-top:0}}
.step.last .icon-box{background:#fff;color:var(--accent)}
.step .icon-box.pic{width:60px;height:60px;border-radius:14px}
.step .icon-box.pic img{width:48px;height:48px}
.step.last .icon-box.pic{background:#fff}

/* ---------- hero: документ-відповідь замість реєстраційної картки ---------- */
/* темний блок: звіт перевірки */