/* Vervo — публичный сайт. Стиль В3 «Сетка» (нео-брутализм, гротеск Geologica). */

:root{
  --bg:#f3f0e8; --bg2:#eae5da; --surface:#ffffff; --surfaceAlt:#faf7f1;
  --ink:#111111; --dim:#555050; --muted:#8a8480;
  --line:rgba(17,17,17,0.16); --lineSoft:rgba(17,17,17,0.10);
  --acc:#f4531a; --accDeep:#d6410e; --accSoft:rgba(244,83,26,0.10);
  --ok:#157f56; --okSoft:rgba(21,127,86,0.12); --blue:#2747e0; --blueSoft:rgba(39,71,224,0.10);
  --warn:#b8740f;
  --r:8px; --rSm:5px;
  --sh:4px 4px 0 #111111; --shHeavy:6px 6px 0 #111111;
  --shAcc:6px 6px 0 #f4531a; --shBlue:6px 6px 0 #2747e0;
  --disp:'Geologica',system-ui,-apple-system,sans-serif;
  --font:'Geologica',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
}

*{ box-sizing:border-box; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.55; font-weight:400;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='rgba(17,17,17,0.05)' stroke-width='1'/%3E%3C/svg%3E");
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.disp{ font-family:var(--disp); }

/* ── kicker / eyebrow ─────────────────────────────────────── */
.eyebrow{
  font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--acc);
}
.eyebrow.muted{ color:var(--muted); }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:16px; line-height:1;
  padding:14px 20px; border:2px solid var(--ink); border-radius:var(--rSm);
  background:var(--surface); color:var(--ink); box-shadow:3px 3px 0 #111;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #111; }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #111; }
.btn-acc{ background:var(--acc); color:#fff; }
.btn-ink{ background:var(--ink); color:#fff; box-shadow:4px 4px 0 var(--acc); }
.btn-ink:hover{ box-shadow:6px 6px 0 var(--acc); }
.btn-ghost{ background:transparent; box-shadow:none; }
.btn-ghost:hover{ background:var(--surfaceAlt); box-shadow:none; transform:none; }
.btn-sm{ font-size:14px; padding:10px 15px; }
.btn svg{ width:18px; height:18px; }

/* ── site header ──────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:2px solid var(--ink);
}
.site-head .bar{
  display:flex; align-items:center; gap:18px;
  height:66px; max-width:var(--maxw); margin:0 auto; padding:0 28px;
}
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img{ width:34px; height:34px; border-radius:7px; }
.brand .word{ font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.5px; }
.brand .word b{ color:var(--acc); font-weight:700; }
/* outlined «vervo.» wordmark (font-independent) — sized to the icon's inner glyph */
.brand-wordmark{ display:block; width:auto; height:19px; color:var(--ink); flex:none; }
.foot-brand .brand-wordmark{ height:19px; margin-top:14px; }
.auth-left .brand-wordmark{ height:22px; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav a{
  font-size:15px; font-weight:600; color:var(--dim);
  padding:8px 15px; border-radius:var(--rSm); border:2px solid transparent;
}
.nav a:hover{ color:var(--ink); background:var(--surfaceAlt); }
.nav a.active{ color:#fff; background:var(--ink); border-color:var(--ink); }
.head-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.head-login{ font-size:15px; font-weight:600; color:var(--dim); padding:8px 12px; }
.head-login:hover{ color:var(--ink); }

/* ── sections ─────────────────────────────────────────────── */
section{ position:relative; }
.sec{ padding:84px 0; }
.sec-tight{ padding:56px 0; }
.sec-head{ max-width:760px; }
.sec-head h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-1.4px;
  font-size:clamp(30px,4vw,46px); line-height:1.05; margin:14px 0 0;
}
.sec-head p{ font-size:18px; color:var(--dim); margin:16px 0 0; max-width:620px; }

/* ── card primitive ───────────────────────────────────────── */
.card{
  background:var(--surface); border:2px solid var(--ink);
  border-radius:var(--r); box-shadow:var(--sh);
}

/* ── feature grid ─────────────────────────────────────────── */
.grid-feat{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px;
}
.feat{ padding:26px 24px; display:flex; flex-direction:column; }
.feat .ic{
  width:50px; height:50px; border-radius:var(--rSm); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--accSoft); color:var(--acc); box-shadow:2px 2px 0 #111;
}
.feat .ic svg{ width:24px; height:24px; }
.feat h3{ font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.4px; margin:18px 0 0; }
.feat p{ font-size:15.5px; color:var(--dim); margin:9px 0 0; line-height:1.5; }
.feat .tag{
  margin-top:16px; align-self:flex-start; font-family:var(--disp); font-size:11px;
  font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:var(--rSm); padding:4px 9px;
}

/* ── facts bar ────────────────────────────────────────────── */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:2px solid var(--ink); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); background:var(--surface);
}
.fact{ padding:22px 24px; border-right:2px solid var(--ink); }
.fact:last-child{ border-right:none; }
.fact .n{ font-family:var(--disp); font-weight:800; font-size:30px; letter-spacing:-1px; }
.fact .n .u{ font-size:16px; color:var(--muted); font-weight:600; }
.fact .l{ font-size:14px; color:var(--dim); margin-top:4px; line-height:1.4; }

/* ── alternating detail rows ──────────────────────────────── */
.detail{
  display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
  margin-top:30px;
}
.detail.flip .detail-media{ order:-1; }
.detail-copy h3{
  font-family:var(--disp); font-weight:800; letter-spacing:-.8px;
  font-size:clamp(24px,2.6vw,32px); line-height:1.1; margin:14px 0 0;
}
.detail-copy p{ font-size:17px; color:var(--dim); margin:14px 0 0; }
.detail-copy ul{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:11px; }
.detail-copy li{ display:flex; gap:11px; align-items:flex-start; font-size:16px; }
.detail-copy li .ck{
  flex-shrink:0; width:24px; height:24px; border-radius:6px; background:var(--ok); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.detail-copy li .ck svg{ width:15px; height:15px; }

/* ── hero (landing) ───────────────────────────────────────── */
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }

/* ── chat mock (core mechanic) ────────────────────────────── */
.chat{ padding:22px; background:var(--surfaceAlt); }
.chat .row{ display:flex; gap:10px; margin-bottom:13px; }
.chat .row.me{ justify-content:flex-end; }
.chat .avatar{
  width:30px; height:30px; border-radius:7px; background:var(--acc); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat .avatar svg{ width:16px; height:16px; }
.bubble{
  background:var(--surface); border:2px solid var(--ink); border-radius:var(--rSm);
  padding:12px 15px; font-size:15px; max-width:80%; box-shadow:3px 3px 0 #111;
}
.bubble .pre{ font-size:11px; color:var(--muted); font-weight:600; margin-bottom:4px; }
.bubble.me{ background:var(--ink); color:#fff; font-weight:500; box-shadow:3px 3px 0 var(--acc); }
.bubble.fb .head{
  display:flex; align-items:center; gap:7px; color:var(--warn); font-weight:700;
  font-size:14px; margin-bottom:7px;
}
.bubble.fb .head .dot{ width:8px; height:8px; border-radius:50%; background:var(--warn); }
.bubble.fb .ok{ display:inline-block; background:var(--ink); color:#fff; padding:3px 8px; border-radius:var(--rSm); font-weight:600; margin-top:4px; }
.bubble.fb .why{ color:var(--muted); margin-top:9px; font-size:13.5px; line-height:1.5; }
.chat .listen{
  display:inline-flex; align-items:center; gap:8px; margin:4px auto 0; padding:7px 14px;
  border-radius:var(--rSm); background:var(--accSoft); color:var(--acc); font-size:13px; font-weight:700;
}
.wave{ display:inline-flex; gap:3px; align-items:flex-end; height:15px; }
.wave i{ width:3px; border-radius:2px; background:currentColor; animation:wv 1s ease-in-out infinite; }
.wave i:nth-child(1){ height:45%; animation-delay:0s; }
.wave i:nth-child(2){ height:85%; animation-delay:.12s; }
.wave i:nth-child(3){ height:100%; animation-delay:.24s; }
.wave i:nth-child(4){ height:70%; animation-delay:.36s; }
.wave i:nth-child(5){ height:50%; animation-delay:.48s; }
@keyframes wv{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){ .wave i{ animation:none; } }

/* ── comparison ───────────────────────────────────────────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:40px;
  border:2px solid var(--ink); border-radius:var(--r); overflow:hidden; box-shadow:var(--shHeavy); }
.compare .col{ padding:30px 30px 34px; }
.compare .col.old{ background:var(--surfaceAlt); }
.compare .col.new{ background:var(--accSoft); border-left:2px solid var(--ink); }
.compare .col h4{ font-family:var(--disp); font-size:13px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; margin:0; }
.compare .col.old h4{ color:var(--muted); }
.compare .col.new h4{ color:var(--accDeep); }
.compare .col ul{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:14px; }
.compare .col li{ display:flex; gap:11px; font-size:16px; line-height:1.45; }
.compare .col li .mk{ flex-shrink:0; width:22px; height:22px; border-radius:6px; display:flex;
  align-items:center; justify-content:center; margin-top:1px; }
.compare .col.old .mk{ background:#fff; border:2px solid var(--line); color:var(--muted); }
.compare .col.new .mk{ background:var(--ok); color:#fff; }
.compare .col.old li{ color:var(--dim); }
.compare .col .mk svg{ width:13px; height:13px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.qa{ padding:22px 26px; }
.qa h4{ font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.3px; margin:0;
  display:flex; align-items:flex-start; gap:12px; }
.qa h4 .q{ color:var(--acc); font-weight:800; }
.qa p{ margin:11px 0 0 27px; color:var(--dim); font-size:16px; }

/* ── final CTA band ───────────────────────────────────────── */
.cta-band{ background:var(--ink); color:#fff; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.cta-band .wrap{ padding:74px 28px; text-align:center; }
.cta-band h2{ font-family:var(--disp); font-weight:800; letter-spacing:-1.4px;
  font-size:clamp(32px,4.4vw,52px); line-height:1.04; margin:0; }
.cta-band p{ font-size:19px; color:rgba(255,255,255,.66); margin:18px auto 0; max-width:560px; }
.cta-band .row{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.cta-band .btn{ border-color:#fff; }
.cta-band .btn-ghost{ background:transparent; color:#fff; box-shadow:none; }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.cta-band .fine{ font-size:14px; color:rgba(255,255,255,.5); margin-top:20px; }

/* ── footer ───────────────────────────────────────────────── */
.site-foot{ background:var(--surface); border-top:2px solid var(--ink); }
.site-foot .wrap{ padding:54px 28px 40px; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
.foot-brand .word{ font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:-.5px; margin-top:14px; }
.foot-brand .word b{ color:var(--acc); }
.foot-brand p{ color:var(--muted); font-size:15px; margin:10px 0 0; max-width:280px; }
.foot-col h5{ font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.foot-col a{ display:block; color:var(--dim); font-size:15px; padding:5px 0; }
.foot-col a:hover{ color:var(--acc); }
.foot-bot{ display:flex; align-items:center; gap:16px; margin-top:42px; padding-top:24px;
  border-top:1px solid var(--line); font-size:14px; color:var(--muted); flex-wrap:wrap; }
.foot-bot .sp{ flex:1; }

/* ── docs page layout ─────────────────────────────────────── */
.docs{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
.docs-toc{ position:sticky; top:90px; }
.docs-toc .card{ padding:10px; }
.docs-toc a{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--rSm);
  font-weight:600; font-size:15px; color:var(--dim); }
.docs-toc a:hover{ background:var(--surfaceAlt); color:var(--ink); }
.docs-toc a.active{ background:var(--ink); color:#fff; }
.docs-toc a .num{ font-family:var(--disp); font-size:12px; opacity:.7; }
.doc-block{ scroll-margin-top:90px; }
.doc-block + .doc-block{ margin-top:30px; }
.doc-block .card{ padding:40px 44px; }
.doc-block h2{ font-family:var(--disp); font-weight:800; letter-spacing:-.8px; font-size:30px; margin:0; }
.doc-block .meta{ font-size:14px; color:var(--muted); margin-top:8px; }
.doc-block h3{ font-family:var(--disp); font-weight:700; font-size:18px; margin:30px 0 0; letter-spacing:-.2px; }
.doc-block p{ font-size:16px; color:var(--dim); margin:11px 0 0; line-height:1.6; }
.doc-block ul{ margin:11px 0 0; padding-left:22px; color:var(--dim); font-size:16px; line-height:1.6; }
.doc-block li{ margin:5px 0; }
.doc-block .ph{ background:var(--accSoft); border-radius:3px; padding:1px 6px; color:var(--accDeep);
  font-weight:600; font-style:normal; }
.req-table{ margin-top:18px; border:2px solid var(--ink); border-radius:var(--r); overflow:hidden; }
.req-table .rr{ display:grid; grid-template-columns:230px 1fr; border-bottom:1px solid var(--line); }
.req-table .rr:last-child{ border-bottom:none; }
.req-table .rr .k{ padding:13px 18px; background:var(--surfaceAlt); font-weight:600; font-size:14.5px;
  border-right:1px solid var(--line); }
.req-table .rr .v{ padding:13px 18px; font-size:15px; color:var(--dim); }

/* ── pricing page ─────────────────────────────────────────── */
.cost-chips{ display:flex; gap:14px; flex-wrap:wrap; }
.cost-chip{ display:flex; align-items:center; gap:12px; padding:14px 18px; }
.cost-chip .ic{ color:var(--ink); display:flex; }
.cost-chip.voice .ic{ color:var(--acc); }
.cost-chip .ic svg{ width:22px; height:22px; }
.cost-chip .n{ font-family:var(--disp); font-weight:800; font-size:20px; }
.cost-chip .l{ font-size:13px; color:var(--muted); font-weight:600; }
.rails{ display:flex; align-items:center; gap:16px; margin:34px 0 26px; flex-wrap:wrap; }
.seg{ display:inline-flex; border:2px solid var(--ink); border-radius:var(--rSm); overflow:hidden; box-shadow:2px 2px 0 #111; }
.seg button{ font-family:var(--font); font-size:14px; font-weight:700; padding:10px 16px; border:none;
  border-right:2px solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap; }
.seg button:last-child{ border-right:none; }
.seg button.on{ background:var(--acc); color:#fff; }
.packs{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pack{ padding:26px 22px 24px; display:flex; flex-direction:column; position:relative; }
.pack.hl{ border-color:var(--acc); box-shadow:var(--shAcc); }
.pack .badge{ position:absolute; top:-13px; right:18px; font-family:var(--disp); font-size:11px;
  font-weight:700; letter-spacing:.4px; color:#fff; background:var(--acc); border:2px solid var(--ink);
  border-radius:var(--rSm); padding:4px 11px; }
.pack .big{ font-family:var(--disp); font-weight:800; font-size:28px; letter-spacing:-1px; margin:8px 0 0; }
.pack .price{ font-size:16px; color:var(--dim); font-weight:600; margin-top:2px; }
.pack .sub{ font-size:14.5px; color:var(--muted); line-height:1.5; margin:12px 0 0; flex:1; }
.pack .btn{ margin-top:20px; justify-content:center; width:100%; }

/* ── auth / login page ────────────────────────────────────── */
.auth-stage{ min-height:calc(100vh - 66px); display:flex; align-items:center; justify-content:center; padding:54px 28px; }
.auth-card{ width:100%; max-width:920px; display:grid; grid-template-columns:1.02fr .98fr;
  border:2px solid var(--ink); border-radius:var(--r); box-shadow:var(--shHeavy); overflow:hidden; background:var(--surface); }
/* left — dark value panel */
.auth-left{ background:var(--ink); color:#fff; padding:40px 38px; display:flex; flex-direction:column; gap:22px;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E"); }
.auth-left .word{ font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.5px; }
.auth-left .word b{ color:var(--acc); }
.auth-left h1{ font-family:var(--disp); font-weight:800; letter-spacing:-1.4px; font-size:clamp(28px,3vw,37px); line-height:1.05; margin:0; }
.auth-left .lede{ font-size:15.5px; color:rgba(255,255,255,.64); margin:14px 0 0; line-height:1.5; }
.auth-steps{ display:flex; flex-direction:column; gap:13px; }
.auth-step{ display:flex; gap:12px; align-items:flex-start; }
.auth-step .n{ font-family:var(--disp); font-weight:700; font-size:13px; color:var(--acc); flex-shrink:0; width:18px; }
.auth-step span:last-child{ font-size:14.5px; color:rgba(255,255,255,.85); line-height:1.45; }
.auth-gift{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; color:var(--ink); background:var(--acc); border-radius:var(--rSm); padding:10px 14px; }
.auth-gift svg{ width:16px; height:16px; }
/* right — login methods */
.auth-right{ padding:40px 38px; display:flex; flex-direction:column; }
.auth-right h2{ font-family:var(--disp); font-weight:800; letter-spacing:-.6px; font-size:25px; margin:6px 0 0; }
.auth-methods{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }
/* odd count -> the last button spans both columns so there's no empty cell */
.auth-methods .prov:last-child:nth-child(odd){ grid-column:1 / -1; }
.prov{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:14.5px; color:var(--ink);
  padding:11px 12px; border:2px solid var(--ink); border-radius:var(--rSm); background:var(--surface);
  box-shadow:3px 3px 0 #111; transition:transform .08s ease, box-shadow .08s ease; }
.prov:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #111; }
.prov:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #111; }
.prov .pico{ width:28px; height:28px; border-radius:6px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; border:2px solid var(--ink); font-family:var(--disp); font-weight:700; font-size:15px; }
.prov .pico svg{ width:16px; height:16px; }
.prov-google .pico{ background:#fff; color:#111; }
.prov-telegram .pico{ background:#2aabee; color:#fff; }
.prov-yandex .pico{ background:#fc3f1d; color:#fff; }
.prov-microsoft .pico{ background:#fff; padding:5px; }
.auth-or{ display:flex; align-items:center; gap:12px; margin:22px 0 16px; }
.auth-or span{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.auth-or .ln{ flex:1; height:2px; background:var(--line); }
.auth-email{ display:flex; flex-direction:column; gap:10px; }
.auth-email .field{ display:flex; gap:10px; }
.auth-email input{ flex:1; min-width:0; font-family:var(--font); font-size:15px; color:var(--ink);
  padding:12px 14px; border:2px solid var(--ink); border-radius:var(--rSm); background:var(--surfaceAlt); outline:none; }
.auth-email input:focus{ background:#fff; box-shadow:3px 3px 0 var(--acc); }
.auth-email input::placeholder{ color:var(--muted); }
.auth-email .hint{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.auth-email .hint svg{ width:14px; height:14px; color:var(--acc); flex-shrink:0; }
.auth-note{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:13px; color:var(--dim);
  line-height:1.5; background:var(--surfaceAlt); border:1px solid var(--line); border-radius:var(--rSm); padding:11px 13px; }
.auth-note .ck{ flex-shrink:0; color:var(--acc); margin-top:1px; }
.auth-note .ck svg{ width:16px; height:16px; }
.auth-fine{ margin-top:auto; padding-top:18px; font-size:12px; color:var(--muted); line-height:1.5; }
.auth-fine a{ color:var(--ink); text-decoration:underline; }
/* login notices + RU hint */
.auth-msg{ margin-top:16px; font-size:13px; line-height:1.5; border-radius:var(--rSm); padding:11px 13px; }
.auth-msg a{ text-decoration:underline; }
.auth-msg-err{ background:var(--accSoft); border:1px solid var(--acc); color:var(--accDeep); }
.auth-msg-hint{ background:var(--surfaceAlt); border:1px dashed var(--line); color:var(--dim); }
.auth-msg-hint b{ color:var(--ink); }
/* email "check your inbox" page (single-panel card) */
.auth-card-single{ grid-template-columns:1fr; max-width:440px; }
.auth-sent-sub{ font-size:15px; color:var(--dim); line-height:1.5; margin:14px 0 0; }
.auth-sent-sub b{ color:var(--ink); }
.auth-code-form{ display:flex; flex-direction:column; gap:11px; margin-top:20px; }
.auth-code-input{ width:100%; box-sizing:border-box; text-align:center; font-family:var(--disp);
  font-weight:800; font-size:30px; letter-spacing:.3em; padding:13px 0; color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--rSm); background:var(--surfaceAlt); }
.auth-code-input::placeholder{ color:var(--muted); }
.auth-code-input:focus{ outline:none; background:#fff; box-shadow:3px 3px 0 var(--acc); }
.auth-code-submit{ justify-content:center; width:100%; }
.auth-link-btn{ background:none; border:none; padding:0; cursor:pointer; font-family:var(--font);
  font-weight:700; font-size:14px; color:var(--acc); text-decoration:underline; }

/* ── helpers ──────────────────────────────────────────────── */
.divider{ height:2px; background:var(--ink); border:none; margin:0; }
.menu-toggle{ display:none; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:980px){
  .grid-feat{ grid-template-columns:repeat(2,1fr); }
  .packs{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr 1fr; gap:30px; }
  .detail{ grid-template-columns:1fr; gap:32px; }
  .detail.flip .detail-media{ order:0; }
  .docs{ grid-template-columns:1fr; gap:24px; }
  .docs-toc{ position:static; }
  .docs-toc .card{ display:flex; gap:8px; overflow-x:auto; }
  .docs-toc a{ white-space:nowrap; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  .sec{ padding:40px 0; }
  /* same single-row bar as desktop — logo only + docs in footer free the space */
  .site-head .bar{ padding:0 16px; gap:10px; }
  .brand .word{ display:none; }            /* logo only on mobile */
  .nav{ margin-left:2px; gap:2px; }
  .nav a{ padding:8px 11px; font-size:14px; }
  .nav a[href="/documents"]{ display:none; }   /* docs live in the footer on mobile */
  .head-login{ display:none; }
  /* hero stacks: chat mock goes full-width below the copy (not a sliver) */
  .hero-grid{ grid-template-columns:1fr; gap:26px; }
  /* login card — tighter so more fits on a small screen */
  .auth-left h1{ font-size:26px; letter-spacing:-.8px; }
  .auth-left .lede{ font-size:14px; margin-top:9px; }
  .auth-steps{ gap:9px; }
  .grid-feat{ grid-template-columns:1fr; gap:18px; }
  .facts{ grid-template-columns:1fr 1fr; }
  .fact:nth-child(2){ border-right:none; }
  .fact:nth-child(1),.fact:nth-child(2){ border-bottom:2px solid var(--ink); }
  .compare{ grid-template-columns:1fr; }
  .compare .col.new{ border-left:none; border-top:2px solid var(--ink); }
  .auth-card{ grid-template-columns:1fr; }
  .auth-left{ padding:22px; gap:13px; }
  .auth-right{ padding:22px; border-top:2px solid var(--ink); }
  .auth-gift{ margin-top:4px; }
  .auth-stage{ padding:34px 18px; min-height:0; }
  .packs{ grid-template-columns:1fr; }
  .req-table .rr{ grid-template-columns:1fr; }
  .req-table .rr .k{ border-right:none; border-bottom:1px solid var(--line); }
  .doc-block .card{ padding:26px 22px; }
}