/* ============================================================
   vy-site.css: the V6 public chrome (spec 060, slice S12a). Loaded by the public pages only
   (<body class="vy-site">), after tokens.css and the shared vy-base / vy-controls /
   vy-components sheets, and before landing-v3.css. Never linked from /app or /admin: the hard
   resets below (p margin, link underline, the bare button, block svg) and the smooth scroll
   with scroll-padding-top (critic C1) would move app layout.

   What lives here: the V6 hard resets, the public buttons, tags and pictogram plates, the
   floating header pill and burger, section bands, the page and article template of /what/*,
   cards, the dark CTA band and the footer. S12b: the server pages (news, policies, FAQ,
   coverage, 404) use the same .page/.art template and the same chrome markup
   (src/server/public-site-chrome.mjs); only what /what has no twin for sits in their section. What stays in landing-v3.css: the landing
   compositions (hero, marquee, steps rail, who, showcase, honest, tiers, FAQ, news, the CTA
   composer, the video) and the facts tests pin in that file.

   Values come from tokens.css only; this file defines none. Owner edits: colours, radii,
   shadows -> tokens.css; buttons and tags read the same knobs as the app (--btn-radius,
   --btn-outline-line, --chip-h, --chip-radius); only the public sizes (17/34 pill) are V6's own.
   Looks shared with /app are aliases in the recipes, never copies here: .eyebrow, .icon-box,
   .card and .doc paint come from vy-components.css, prose links from .vy-link in
   vy-controls.css. The rules keep V6's one-rule-per-line form and its order, so the extraction
   from landing-v3.css reads line for line.
   ============================================================ */

/* ---------- V6 hard resets (public only) ---------- */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset)}
body{font:var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans);overflow-x:clip;overflow-wrap:break-word}
a{text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{margin:0}
p{margin:0}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The ring itself is the vy-base outline; V6 rounds it on elements that set no radius of their
   own. Zero specificity, so every component radius wins whatever the file order. */
:where(:focus-visible){border-radius:var(--radius-xs)}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:10px 14px;box-shadow:var(--edge-2);border-radius:var(--radius-md);z-index:100}
.skip:focus{left:12px}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- атоми: кнопки, мітки, піктограми ---------- */
.eyebrow.on-dark{color:var(--dark-muted)}
/* кнопки: рецепт makeai.in.ua (пігулка, 17/34, 15px/400, бордер 1px, hover -2px + тінь) у кольорах Vyslid.
   The focus ring is the one vy-base outline (the 45%-alpha button ring was 2.34:1, 01 §7.12).
   The /pricing plan and business CTAs join by class, because pricing-page.test.mjs pins their class attributes (S13). */
.btn,.ld-plan-cta,.ld-biz-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 34px;border-radius:var(--btn-radius);font:var(--btn-weight) var(--text-base)/1 var(--font-sans);color:var(--ink);background:transparent;border:1px solid var(--btn-outline-line);white-space:nowrap;transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s,border-color .2s}
.btn:hover,.ld-plan-cta:hover,.ld-biz-cta:hover{transform:translateY(var(--lift));background:var(--press-wash);box-shadow:var(--shadow-lift)}
.btn:active,.ld-plan-cta:active,.ld-biz-cta:active{transform:translateY(0)}
.btn-accent,.ld-plan-featured .ld-plan-cta,.ld-biz-cta{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.btn-accent:hover,.ld-plan-featured .ld-plan-cta:hover,.ld-biz-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-lift-accent)}
.btn-white{background:var(--dark-heading);border-color:var(--dark-heading);color:var(--ink)}
.btn-white:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn-lg{padding:17px 34px;font-size:var(--text-base)}
.btn .arr{width:16px;height:16px;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(2px)}
.icon-box svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-box.sm svg{width:18px;height:18px}
.tag,.ln-cover-tag,.art .ln-tags li{display:inline-flex;align-items:center;height:var(--chip-h);padding:0 10px;border-radius:var(--chip-radius);font-size:var(--text-sm);font-weight:var(--weight-strong);color:var(--text);background:var(--sunken)}
.tag.prev{background:var(--accent-soft);color:var(--accent-ink)}
.chip-ok{display:inline-flex;align-items:center;gap:7px;height:var(--chip-h);padding:0 10px 0 8px;border-radius:var(--chip-radius);font-size:var(--text-sm);font-weight:var(--weight-strong);color:var(--ok);background:var(--ok-soft);white-space:nowrap}
.chip-ok svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dotted{background-image:radial-gradient(circle,var(--atom-dot) 1px,transparent 1.4px);background-size:22px 22px}
.dotted-dark{background-image:radial-gradient(circle,var(--atom-dot-inverse) 1.2px,transparent 1.6px);background-size:22px 22px}

/* ---------- шапка: плаваюча пігулка (the two V6 header layers, merged; 01 §7.5) ---------- */
.header{position:fixed;left:0;right:0;top:0;z-index:50;padding:12px 16px 0;transition:border-color .2s}
.header .bar{max-width:var(--container);margin:0 auto;height:var(--header-h);padding:0 8px 0 22px;display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-radius:var(--radius-pill);box-shadow:var(--shadow-pill),var(--edge)}
.header.is-stuck .bar{background:var(--glass-stuck);box-shadow:var(--shadow-pill-stuck),var(--edge-2)}
.lockup{display:flex;align-items:center;color:var(--ink);transition:color .2s}
.lockup:hover{color:var(--accent)}
.lockup svg{width:84px;height:auto}
.hdr-tag{margin-left:10px;height:24px;padding:0 9px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--text-xs);font-weight:var(--weight-strong);display:inline-flex;align-items:center;white-space:nowrap}
.nav{display:flex;gap:4px;margin:0 auto}
.nav a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--text-ui);color:var(--text);transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current="page"]{background:var(--hover-wash);color:var(--ink)}
.header .signin{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--text-ui);color:var(--text)}
.header .signin:hover{background:var(--hover-wash);color:var(--ink)}
.header .btn{padding:11px 24px;font-size:var(--text-ui)}
.burger{display:none}
.burger summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm)}
.burger summary::-webkit-details-marker{display:none}
.burger summary svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round}
.burger .menu{position:absolute;left:12px;right:12px;top:80px;background:var(--panel);border-radius:var(--r-card);padding:8px;display:grid;gap:2px;box-shadow:var(--sh-lg),var(--edge);max-height:calc(100dvh - 96px);overflow-y:auto}
/* Menu rows only: the «Зареєструватися» pill keeps its button look (it read ink on oxblood, 1.99:1, 01 §7.1). */
.burger .menu a:not(.btn){padding:12px;border-radius:var(--r-sm);font-size:var(--text-md);color:var(--ink)}
.burger .menu a:not(.btn):hover,.burger .menu a[aria-current="page"]{background:var(--sunken)}
.burger .menu .btn{margin-top:6px;justify-content:center}
/* Six nav items (D15 adds «Тарифи») need about 1000px of bar; below 1080px the header folds into
   the burger instead of squeezing the logo and wrapping «Як це працює». In em (67.5em = 1080px at
   the default 16px), so a larger default font (D26) folds it sooner, as the nav grows with the text. */
@media(max-width:67.5em){.nav,.header .signin{display:none}.header .btn-accent{margin-left:auto}.burger{display:block}.header{padding:8px 8px 0}.header .bar{padding-left:16px}.hdr-tag{display:none}}
/* D26: touch targets are 44 px on touch screens; a mouse keeps the V6 sizes. */
@media(pointer:coarse){.header .btn{padding-block:14px}.nav a,.header .signin{height:44px}}
/* A large default font on a narrow phone (D26; em follows that setting): the pill leaves the bar, it stays in the menu. */
@media(max-width:16em){.header .bar>.btn{display:none}.burger{margin-left:auto}}
/* D26: on a short screen (a phone held sideways, the keyboard up) the header scrolls away with the page instead of
   keeping a fifth of the height. Absolute, not static: the pages already pad for the fixed header. */
@media(max-height:500px){html{scroll-padding-top:0}.header{position:absolute}}

/* ---------- секції ---------- */
.sec{padding:64px 0;position:relative;overflow:hidden}
.sec.alt{background:var(--sunken)}
.sec.dark{background:var(--dark);color:var(--dark-text)}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:var(--dark-heading)}
.sec.dark .lead{color:var(--dark-muted)}
.sec>.wrap{position:relative}
.sec-head{max-width:620px;margin-bottom:28px}
.sec-head h2{font-size:var(--text-3xl);line-height:1.15;letter-spacing:-.015em;margin:10px 0 8px}
.sec-head .lead{font-size:var(--text-lead);line-height:1.55;color:var(--text)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec.dotted-fade{background-image:linear-gradient(180deg,var(--paper) 0%,rgba(253,253,252,0) 28%,rgba(253,253,252,0) 72%,var(--paper) 100%),radial-gradient(circle,var(--atom-dot) 1px,transparent 1.4px);background-size:100% 100%,22px 22px}
.sec.alt.dotted-fade{background-color:var(--sunken);background-image:linear-gradient(180deg,var(--sunken) 0%,rgba(245,244,241,0) 28%,rgba(245,244,241,0) 72%,var(--sunken) 100%),radial-gradient(circle,var(--atom-dot) 1px,transparent 1.4px)}
.sec.news.dotted-fade{background-color:var(--paper)}
.sec[data-n]::before{content:attr(data-n);position:absolute;right:var(--pad);top:28px;font-size:112px;font-weight:var(--weight-strong);letter-spacing:-.05em;line-height:1;color:rgba(21,19,15,.045);pointer-events:none;font-variant-numeric:tabular-nums}
.sec.dark[data-n]::before{color:rgba(240,239,236,.055)}
.orn{position:absolute;pointer-events:none;color:rgba(21,19,15,.05);width:360px;height:auto;z-index:0;top:50%;transform:translateY(-50%);right:-48px}
.orn-l{right:auto;left:-64px}
.sec.dark .orn{color:rgba(240,239,236,.06)}
@media(max-width:900px){.sec[data-n]::before{font-size:72px;top:18px}}
@media(max-width:1280px){.orn{display:none}}

/* ---------- сторінки-пояснення /what/… ---------- */
.page{padding:104px 0 56px}
.page .crumbs,.ln-crumbs{font-size:var(--text-ui);color:var(--muted);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.page .crumbs a:hover,.ln-crumbs a:hover{color:var(--accent)}
@media(pointer:coarse){.page .crumbs a,.ln-crumbs a{padding-block:11px;margin-block:-11px}}
.page h1{font-size:var(--text-h1);line-height:1.12;letter-spacing:-.02em;margin:10px 0 14px;max-width:20ch}
.page .lead{font-size:var(--text-lg);line-height:1.55;color:var(--text);max-width:60ch}
.art{max-width:760px}
.art h2{font-size:var(--text-xl);line-height:1.3;margin:40px 0 12px}
.art p{margin-bottom:12px;line-height:1.6}
.art ul{padding-left:20px;margin:0 0 12px}
.art li{margin-bottom:6px}
.art .ex{margin:18px 0;padding:18px 20px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--edge)}
.art .ex blockquote{margin:0 0 10px;padding-left:14px;border-left:2px solid var(--accent);color:var(--ink)}
.art .ex footer{font-size:var(--text-sm);color:var(--muted)}
/* The action row under an article is a plain row, not the dark CTA band it shares a class with:
   the band painted a dark box behind the buttons and hid «На головну» (1.01:1, 01 §7.2). */
.ln-post-actions,.art .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;padding:0;background:none;color:inherit;overflow:visible;--focus-color:var(--accent)}
.art .cta::before,.art .cta::after{content:none}
.more,.ln-related{margin-top:48px}
.more h2,.ln-related>h2{font-size:var(--text-xl);margin-bottom:18px}
.more .cards-3 .card h3{font-size:var(--text-md);margin:0}
.more .card{padding:18px 20px;flex-direction:row;align-items:center;gap:12px}

/* ---------- картки (paint: .vy-card in vy-components.css) ---------- */
.cards-3,.ln-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.card,.ln-item{display:flex;flex-direction:column;gap:10px;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card:hover,.ln-item:hover{box-shadow:var(--sh-md),var(--edge-2);transform:translateY(var(--lift))}
.card h3{font-size:var(--text-lg);line-height:1.3;margin-top:4px}
.card p{font-size:var(--text-base);line-height:1.55;color:var(--text)}
.card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
@media(max-width:900px){.cards-3,.ln-list{grid-template-columns:1fr}}

/* ---------- піктограми (прозорі webp на світлій плашці) ---------- */
.icon-box.pic{width:72px;height:72px;border-radius:var(--radius-lg);background:var(--sunken);padding:0}
.icon-box.pic img{width:56px;height:56px;object-fit:contain;display:block}
.icon-box.pic.sm{width:52px;height:52px;border-radius:var(--radius-icon)}
.icon-box.pic.sm img{width:40px;height:40px}
.icon-box.pic.lg{width:96px;height:96px;border-radius:20px;background:var(--accent-soft)}
.icon-box.pic.lg img{width:72px;height:72px}
.card .icon-box.pic{margin-bottom:2px}

/* ---------- серверні сторінки: новини, політики, довідка, охоплення, 404 (S12b) ----------
   Розмітка: main.page > .wrap > article.art, як у /what. Картки новин фарбує рецепт картки
   (vy-components.css), розкладку дають .cards-3 і .card вище; тут лише те, чого /what не має. */
.art h3{font-size:var(--text-lg);line-height:1.35;margin:28px 0 10px}
.ln-doc-meta,.ln-count,.ln-byline{font-size:var(--text-ui);color:var(--muted)}
.ln-count{margin:24px 0 16px}
.ln-note{max-width:80ch;margin-top:24px;font-size:var(--text-ui);line-height:var(--leading-normal);color:var(--muted)}
/* The two notes that carry a state (policy review, coverage status) wear the note recipe as a block,
   so their inline links stay in the sentence. */
.ln-note.vy-note{display:block;color:var(--text)}
.art .ln-note-top{margin:0 0 8px}
.ln-list{list-style:none;padding:0;margin:0}
/* The grid stretches each li; the card inside must fill it, or a longer title leaves its neighbours short. */
.ln-list>li{display:grid}
.ln-list .ln-item h2{font-size:var(--text-lg);line-height:1.3;margin:0}
.ln-item time{font-size:var(--text-sm);color:var(--muted)}
.ln-item p{font-size:var(--text-base);line-height:1.55;color:var(--text);margin:0}
.ln-more{margin-top:auto;font-size:var(--text-ui);font-weight:var(--weight-strong);color:var(--accent)}
.ln-cover{position:relative;margin:24px 0;border-radius:var(--r-card);overflow:hidden;background:var(--sunken)}
.ln-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ln-item .ln-cover{margin:0 0 4px;border-radius:var(--radius-md)}
.ln-cover-ph{aspect-ratio:16/9;display:grid;place-items:center;background-image:radial-gradient(circle,var(--atom-dot) 1px,transparent 1.4px);background-size:22px 22px}
.ln-cover-mark{width:30%;max-width:140px;height:auto;aspect-ratio:566/339;color:var(--faint)}
/* The placeholder's tag is the .tag chip above, lifted onto the plate. */
.ln-cover-tag{position:absolute;top:12px;left:12px;background:var(--panel)}
.art .ln-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:24px 0 12px}
.art .ln-tags li{margin:0}
.ln-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.ln-page-of{font-size:var(--text-ui);color:var(--muted)}
.ln-page-link.is-off{color:var(--muted);border-color:var(--ring);cursor:default;pointer-events:none}
.ln-plain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);margin-top:16px}
.art .ln-plain-point h3{font-size:var(--text-md);margin:0 0 6px}
.art .ln-plain-point p{margin:0;font-size:var(--text-base)}
@media(pointer:coarse){.ln-doc-links a{display:inline-flex;align-items:center;min-height:44px}}
.ln-doc-faq{margin-top:8px}
.ln-notfound .eyebrow{margin-top:20px}
@media(max-width:900px){.ln-plain-grid{grid-template-columns:1fr}}

/* ---------- CTA: темна смуга (the composer inside it is in landing-v3.css) ---------- */
.cta{background:var(--dark);color:var(--dark-text);padding:72px 0 48px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--atom-dot-inverse) 1.2px,transparent 1.6px);background-size:22px 22px;pointer-events:none}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 35%,rgba(22,20,18,0) 0%,var(--dark) 100%);pointer-events:none}
.cta .wrap{position:relative;z-index:1}
.cta .inner{max-width:720px;margin:0 auto;text-align:center}
.cta h2{font-size:clamp(1.875rem,3.6vw,2.875rem);line-height:1.1;letter-spacing:-.02em;margin:14px 0 14px;color:var(--dark-heading)}
.cta .lead{color:var(--dark-muted);font-size:var(--text-lead);line-height:1.55;max-width:46ch;margin:0 auto 28px}
/* Always-dark bands draw the focus ring in the band colour: oxblood is 1.97:1 on --dark (01 §7.12). */
.sec.dark,.cta{--focus-color:var(--dark-focus)}

/* ---------- футер ---------- */
.footer{padding:40px 0 24px;font-size:var(--text-ui);color:var(--text);overflow-wrap:anywhere}
.footer .cols{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:24px;margin-bottom:28px}
.footer h5{font-size:var(--text-sm);font-weight:var(--weight-strong);color:var(--muted);margin:0 0 14px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer a:hover{color:var(--accent)}
.footer .brand p{max-width:32ch;margin-top:14px;line-height:1.55}
.footer .lockup svg{width:96px}
.footer .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.footer .legal{border-top:1px solid var(--ring);padding-top:20px;display:grid;gap:6px;font-size:var(--text-sm);color:var(--muted);line-height:1.55}
.footer .legal p{max-width:80ch}
/* Рядок продавця (звіт fop-details-2026-09-27, блок Б): ФОП, скринька і посилання на реквізити, оферту, політику. */
.footer .legal .seller{max-width:none;color:var(--text)}
.footer .seller a{text-decoration:underline;text-decoration-color:var(--ring-2);text-underline-offset:3px}
@media(pointer:coarse){.footer .seller a{display:inline-block;padding-block:11px;margin-block:-11px}}
@media(pointer:coarse){.footer ul{gap:0}.footer ul a{display:flex;align-items:center;min-height:44px}}
@media(max-width:900px){.footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.footer .brand{grid-column:1/-1}}

/* ---------- друк (D22, S18) ----------
   A fixed header repeats over the text on every printed page, so on paper it is a flat, static
   lockup at the top of the first one; the menu, the header buttons, the action rows, the dark CTA
   band and the marquee carry nothing to read and are left off. */
@media print{.header{position:static;padding:0}.header .bar{padding:0 var(--pad);background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.burger,.header .nav,.header .signin,.header .btn,.ln-post-actions,.cta,.marquee{display:none!important}.page{padding-top:24px}}