/* ContaHub public landing (E1-27, v2). Composition from the Stitch design chosen by Germán;
   tokens are ROLES, never colours (technes-brand). The three theme blocks are always all three:
   :root (light) / [data-theme=dark] (explicit toggle wins) / prefers-color-scheme with the
   :not([data-theme=light]) guard. No inline styles anywhere: the CSP forbids them.

   Declared exceptions to the Technes system (see docs/proyectos/contahub-landing-diseno.md):
   - Radii 4/6/8 px (the mockup's), tokenised as --radius-*.
   - Hanken Grotesk for headings, self-hosted.
   - Role tokens the system lacks: --band, --grid-line, --hero-wash, --inverse*, --on-inverse*,
     --brand-hover, --warn-strong-soft, --on-warn-fill.
   Accent rule: --brand is FILL and RING; accent TEXT uses --brand-ink. */

@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); }

:root {
  --radius-control:4px; --radius-box:6px; --radius-card:8px; --radius-pill:9999px;
  --font-head:'Hanken Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --paper:#fcf8fa; --surface:#ffffff; --surface-sunken:#f6f3f5; --line:#e4e2e4;
  --ink:#1b1b1d; --ink-soft:#505f76;
  --brand:#1d4ed8; --brand-hover:#1e40af; --brand-ink:#0037b0; --brand-soft:#e5eeff; --on-brand:#ffffff;
  --band:#f8f9ff; --grid-line:#eef1fc; --hero-wash:#e3e9fa;
  --inverse:#131b2e; --inverse-2:#213145; --inverse-raised:#1e293b; --inverse-raised-hover:#273449;
  --inverse-edge:#131b2e; --inverse-border:rgba(255,255,255,.12);
  --on-inverse:#ffffff; --on-inverse-soft:#cbd5e1; --on-inverse-muted:#94a3b8;
  --good:#009668; --good-soft:#dcf7ec; --good-ink:#00674a;
  --warn:#f59e0b; --warn-soft:#fef3e0; --warn-ink:#7a4f00; --warn-strong-soft:#fde7b0; --on-warn-fill:#ffffff;
  --critical:#ba1a1a;
  --elev-1:0 4px 20px rgba(15,23,42,.05); --elev-2:0 10px 32px rgba(15,23,42,.12);
  --sun-display:none; --moon-display:block;
}
:root[data-theme="dark"] {
  --paper:#0a1526; --surface:#12203a; --surface-sunken:#0d1a2f; --line:#24344f;
  --ink:#f4f6fb; --ink-soft:#9fb0cc;
  --brand:#2563eb; --brand-hover:#1d4ed8; --brand-ink:#93c5fd; --brand-soft:#1b3157; --on-brand:#ffffff;
  --band:#0d1a2f; --grid-line:#13223d; --hero-wash:#132a52;
  --inverse:#060d1a; --inverse-2:#04080f; --inverse-raised:#12203a; --inverse-raised-hover:#182a48;
  --inverse-edge:#24344f; --inverse-border:rgba(255,255,255,.12);
  --on-inverse:#ffffff; --on-inverse-soft:#cbd5e1; --on-inverse-muted:#94a3b8;
  --good:#4edea3; --good-soft:#123527; --good-ink:#4edea3;
  --warn:#fbbf24; --warn-soft:#3a2a0c; --warn-ink:#fbbf24; --warn-strong-soft:#4a360f; --on-warn-fill:#0a1526;
  --critical:#f87171;
  --elev-1:0 4px 20px rgba(0,0,0,.45); --elev-2:0 10px 32px rgba(0,0,0,.65);
  --sun-display:block; --moon-display:none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper:#0a1526; --surface:#12203a; --surface-sunken:#0d1a2f; --line:#24344f;
  --ink:#f4f6fb; --ink-soft:#9fb0cc;
  --brand:#2563eb; --brand-hover:#1d4ed8; --brand-ink:#93c5fd; --brand-soft:#1b3157; --on-brand:#ffffff;
  --band:#0d1a2f; --grid-line:#13223d; --hero-wash:#132a52;
  --inverse:#060d1a; --inverse-2:#04080f; --inverse-raised:#12203a; --inverse-raised-hover:#182a48;
  --inverse-edge:#24344f; --inverse-border:rgba(255,255,255,.12);
  --on-inverse:#ffffff; --on-inverse-soft:#cbd5e1; --on-inverse-muted:#94a3b8;
  --good:#4edea3; --good-soft:#123527; --good-ink:#4edea3;
  --warn:#fbbf24; --warn-soft:#3a2a0c; --warn-ink:#fbbf24; --warn-strong-soft:#4a360f; --on-warn-fill:#0a1526;
  --critical:#f87171;
  --elev-1:0 4px 20px rgba(0,0,0,.45); --elev-2:0 10px 32px rgba(0,0,0,.65);
  --sun-display:block; --moon-display:none;
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/24px var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }
p { margin:0; }
h1,h2,h3 { margin:0; font-family:var(--font-head); color:var(--ink); }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.num { font-variant-numeric:tabular-nums; }
.ico { width:20px; height:20px; fill:currentColor; flex:none; }

:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.inverse :focus-visible, .footer :focus-visible { outline-color:#fff; }
.btn-warn:focus-visible { outline-color:var(--ink); }

.skip { position:absolute; left:16px; top:-60px; z-index:50; padding:10px 16px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-control); }
.skip:focus { top:8px; }

.wrap { width:100%; max-width:1280px; margin-inline:auto; padding-inline:32px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:0 24px; border:1px solid transparent; border-radius:var(--radius-control); font:600 16px/24px var(--font-body); text-decoration:none; cursor:pointer; transition:background-color .15s, border-color .15s, box-shadow .15s; }
.btn:active { transform:translateY(1px); }
.btn-lg { min-height:48px; }
.btn-block { width:100%; }
.btn-primary { background:var(--brand); color:var(--on-brand); }
.btn-primary:hover { background:var(--brand-hover); box-shadow:0 2px 8px rgba(29,78,216,.25); }
.btn-secondary { background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover { background:var(--band); border-color:var(--ink-soft); }
.btn-outline { background:var(--surface); color:var(--brand-ink); border-color:var(--line); padding:0 20px; font-size:15px; }
.btn-outline:hover { background:var(--brand-soft); }
.btn-navy { background:var(--inverse-raised); color:var(--on-inverse); border-color:var(--inverse-border); }
.btn-navy:hover { background:var(--inverse-raised-hover); }
.btn-warn { background:var(--warn-ink); color:var(--on-warn-fill); font-size:15px; }
.btn-warn:hover { filter:brightness(.92); }
.btn-row { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ---------- header ---------- */
.topbar { position:sticky; top:0; z-index:20; background:var(--band); border-bottom:1px solid var(--line); }
.topbar-in { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.wordmark { display:inline-flex; align-items:center; text-decoration:none; min-height:44px; }
.logo { height:42px; width:auto; display:block; }
.logo-on-dark { display:none; }
:root[data-theme="dark"] .logo-on-light { display:none; }
:root[data-theme="dark"] .logo-on-dark { display:block; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .logo-on-light { display:none; } :root:not([data-theme="light"]) .logo-on-dark { display:block; } }
.logo-footer { height:35px; width:auto; display:block; }
.brand-group { display:flex; align-items:center; gap:12px; }
.topnav { display:none; gap:52px; }
.topnav a { font:500 15px/24px var(--font-body); color:var(--ink-soft); text-decoration:none; padding:10px 0; }
.topnav a:hover { color:var(--ink); }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:44px; height:44px; display:inline-grid; place-items:center; border:1px solid transparent; border-radius:var(--radius-control); background:transparent; color:var(--ink-soft); cursor:pointer; }
.icon-btn:hover { background:var(--brand-soft); color:var(--ink); }
.ico-sun { display:var(--sun-display); } .ico-moon { display:var(--moon-display); }

.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill); font:500 12px/16px var(--font-mono); letter-spacing:.04em; white-space:nowrap; background:var(--band); color:var(--ink-soft); }
.pill-brand { background:var(--brand-soft); color:var(--brand-ink); }
.pill-good { background:var(--good-soft); color:var(--good-ink); }
.pill-warn { background:var(--warn-soft); color:var(--warn-ink); }
.pill-inverse { background:var(--inverse); color:var(--on-inverse); }
.pill-line { border:1px solid var(--line); }
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.tag-pill { display:none; background:var(--brand-soft); border:1px solid var(--line); }

/* ---------- section scaffolding ---------- */
.section { padding-block:64px; }
.sec-surface { background:var(--surface); }
.sec-band { background:var(--band); }
.eyebrow { font:600 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-ink); }
.sec-head { margin-bottom:32px; }
.sec-head.center { text-align:center; }
.sec-head h2 { font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.02em; margin-top:8px; text-wrap:balance; }
.sec-head.left h2 { text-wrap:wrap; }
.sec-head .lead { margin-top:12px; }
.sec-head.left h2 { max-width:800px; } .sec-head.left .lead { max-width:760px; }
.sec-head.center h2 { max-width:760px; margin-inline:auto; } .sec-head.center .lead { max-width:704px; margin-inline:auto; }
.lead { color:var(--ink-soft); font:400 16px/24px var(--font-body); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); }
.grid { display:grid; gap:16px; grid-template-columns:1fr; }

/* ---------- hero ---------- */
.hero { position:relative; background-color:var(--band); background-image:
  radial-gradient(ellipse 55% 45% at 50% 30%, var(--hero-wash), transparent 70%),
  linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
  linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:auto, 32px 32px, 32px 32px; padding:48px 0 64px; text-align:center; }
.hero-chip { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:4px 14px; background:var(--brand-soft); border:1px solid var(--line); border-radius:var(--radius-pill); font:500 12px/16px var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.hero-chip .dot { width:8px; height:8px; background:var(--good-ink); flex:none; }
.hero h1 { font-size:32px; line-height:40px; font-weight:700; letter-spacing:-.02em; margin:28px auto 0; max-width:920px; text-wrap:balance; }
.lead-hero { font:400 16px/24px var(--font-body); color:var(--ink-soft); max-width:660px; margin:28px auto 0; }
.hero .btn-row { margin-top:32px; flex-direction:column; align-items:stretch; gap:12px; }

/* ---------- console illustration ---------- */
.console { margin:48px auto 0; max-width:1024px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--elev-2); overflow:hidden; }
.console-bar { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; background:var(--brand-soft); border-bottom:1px solid var(--line); }
.console-bar .lights { display:none; gap:8px; }
.console-bar .lights i { width:12px; height:12px; border-radius:50%; display:block; }
.l-r { background:var(--critical); } .l-y { background:var(--warn); } .l-g { background:var(--good); }
.console-title { flex:1; min-width:0; font:400 12px/16px var(--font-mono); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-long { display:none; }
@media (max-width:767px) { .ecf-row { font-size:11px; gap:8px; padding:10px; } .ecf-row .pill { font-size:11px; padding:3px 8px; letter-spacing:0; } .ecf-row .pill .dot { display:none; } .console-main { padding:16px 12px; } .footer-brand > span[aria-hidden] { display:none; } }
.console-body { display:grid; grid-template-columns:1fr; }
.console-side { display:none; background:var(--band); border-right:1px solid var(--line); padding:16px; }
.side-label { font:600 11px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:8px 0 12px; }
.side-item { display:flex; align-items:center; gap:12px; min-height:36px; padding:0 12px; border-radius:var(--radius-control); font:500 14px/20px var(--font-body); color:var(--ink-soft); }
.side-item .ico { width:18px; height:18px; }
.side-item .tag { margin-left:auto; font:500 12px/16px var(--font-mono); }
.side-item.active { background:var(--brand-soft); color:var(--brand-ink); }
.side-item.active .tag { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-control); padding:2px 6px; }
.side-list { display:grid; gap:4px; }
.mini { margin-top:32px; padding:16px 14px; background:var(--brand-soft); border:1px solid var(--line); border-radius:var(--radius-card); font:500 12px/18px var(--font-mono); color:var(--ink-soft); }
.mini-head { display:flex; flex-direction:column; gap:2px; font:600 13px/18px var(--font-body); color:var(--ink); }
.mini-head span { font:400 12px/16px var(--font-mono); color:var(--ink-soft); }
.mini-row { display:flex; justify-content:space-between; gap:8px; margin-top:8px; }
.mini-row b { font-weight:500; color:var(--ink); }
.mini-row.net { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); color:var(--good-ink); }
.mini-row.net b { color:var(--good-ink); font-weight:600; }
.console-main { padding:20px 16px; min-width:0; }
.console-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:12px; }
.console-head h3 { font:600 18px/26px var(--font-head); letter-spacing:-.01em; }
.console-head p { font:400 14px/20px var(--font-body); color:var(--ink-soft); }
.chip-mono { font:500 12px/16px var(--font-mono); letter-spacing:.04em; background:var(--brand-soft); color:var(--brand-ink); padding:6px 12px; border-radius:var(--radius-control); }
.ecf-table { margin-top:20px; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; }
.ecf-row { display:grid; grid-template-columns:minmax(0,1fr) 88px 96px; gap:8px; align-items:center; padding:12px; border-top:1px solid var(--line); font:500 12px/16px var(--font-mono); color:var(--ink); }
.ecf-row.th { background:var(--band); border-top:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding-block:14px; }
.ecf-row .sub { display:block; font-weight:400; font-size:11px; color:var(--ink-soft); margin-top:2px; }
.ecf-row .c-sub, .ecf-row .c-itbis, .ecf-row .c-cli { display:none; }
.ecf-row .amt { text-align:right; font-variant-numeric:tabular-nums; }
.ecf-row .st { padding-left:8px; }
.ecf-row .st .pill { justify-content:center; }
.ecf-row.th .st { text-align:left; }
.entry { margin-top:16px; padding:16px; background:var(--brand-soft); border:1px solid var(--line); border-radius:var(--radius-card); }
.entry-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; font:600 14px/20px var(--font-body); color:var(--ink); }
.entry-head .l { display:flex; gap:8px; align-items:center; color:var(--brand-ink); }
.entry-head .l span { color:var(--ink); }
.entry-head .r { font:500 12px/16px var(--font-mono); letter-spacing:.04em; color:var(--ink-soft); }
.entry-cells { display:grid; gap:8px; margin-top:12px; grid-template-columns:1fr; }
.entry-cell { background:var(--surface); border-radius:var(--radius-box); padding:10px 12px; font:400 12px/16px var(--font-mono); color:var(--ink-soft); }
.entry-cell b { display:block; margin-top:4px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- deadline strip ---------- */
.deadline { background:var(--warn-soft); border-block:1px solid var(--warn-strong-soft); padding:24px 0; }
.deadline-in { display:grid; gap:12px 12px; grid-template-columns:40px 1fr; align-items:center; }
.banner-text { display:contents; }
.deadline .icon-box { grid-column:1; grid-row:1; }
.deadline .chip-warn { grid-column:2; grid-row:1; justify-self:start; }
.deadline h2, .deadline p.lead { grid-column:1 / -1; }
.deadline .btn { grid-column:1 / -1; }
.icon-box { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-box); background:var(--brand-soft); color:var(--brand-ink); flex:none; }
.icon-box .ico { width:22px; height:22px; }
.deadline .icon-box { background:var(--warn-strong-soft); color:var(--warn-ink); }
.chip-warn { display:inline-block; font:500 12px/16px var(--font-mono); letter-spacing:.04em; text-transform:uppercase; background:var(--warn-strong-soft); color:var(--warn-ink); padding:4px 8px; border-radius:var(--radius-control); }
.deadline h2 { font:600 17px/24px var(--font-head); letter-spacing:-.01em; margin-top:8px; }
.deadline p.lead { color:var(--warn-ink); font-size:14px; line-height:20px; margin-top:8px; }

/* ---------- features ---------- */
.feature { background:var(--band); padding:20px; }
.sec-band .feature { background:var(--surface); }
.feature .icon-box { margin-bottom:20px; }
.feature h3 { font:600 18px/26px var(--font-head); letter-spacing:-.01em; }
.feature p { margin-top:12px; color:var(--ink-soft); }

/* ---------- limits ---------- */
.limits { max-width:1024px; margin-inline:auto; }
.limit { padding:20px; border-top:6px solid var(--brand); }
.limit.theirs { border-top-color:var(--ink-soft); }
.limit-head { display:flex; align-items:center; gap:12px; }
.limit-head .circle { width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; }
.limit-head .circle .ico { width:20px; height:20px; }
.limit h3 { font:600 20px/28px var(--font-head); letter-spacing:-.01em; }
.limit ul { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px; }
.limit li { display:grid; grid-template-columns:20px 1fr; gap:12px; color:var(--ink-soft); }
.limit li .ico { color:var(--brand-ink); margin-top:2px; }
.theirs li .ico { color:var(--ink-soft); }
.limit li b { color:var(--ink); font-weight:600; }

/* ---------- plans ---------- */
.plans { max-width:896px; margin-inline:auto; gap:32px; }
.plan { position:relative; display:flex; flex-direction:column; padding:28px 20px; background:var(--band); }
.plan.featured { background:var(--surface); border:2px solid var(--brand); box-shadow:var(--elev-1); margin-top:16px; }
.ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }
.ribbon.pill { padding:5px 14px; letter-spacing:.06em; text-transform:uppercase; }
.plan-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.plan h3 { font:600 24px/32px var(--font-head); letter-spacing:-.01em; }
.plan .for { margin-top:16px; font:400 14px/20px var(--font-body); color:var(--ink-soft); min-height:40px; }
.price { margin-top:24px; display:flex; align-items:baseline; gap:8px; }
.price b { font:700 32px/40px var(--font-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.price span { font:400 14px/20px var(--font-body); color:var(--ink-soft); }
.plan hr { border:0; border-top:1px solid var(--line); margin:24px 0; width:100%; }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:14px; flex:1; align-content:start; }
.plan li { display:grid; grid-template-columns:18px 1fr; gap:10px; color:var(--ink-soft); font:400 15px/22px var(--font-body); }
.plan li .ico { width:18px; height:18px; color:var(--brand-ink); margin-top:2px; }
.plan li b { color:var(--ink); font-weight:600; }
.plan .btn { margin-top:8px; }
.mono-note { font:400 12px/16px var(--font-mono); letter-spacing:.02em; color:var(--ink-soft); }
.plans-note { text-align:center; margin:32px auto 0; max-width:760px; }

/* ---------- inverse bands ---------- */
.inverse { background:var(--inverse); color:var(--on-inverse); border-block:1px solid var(--inverse-edge); }
.inverse h2 { color:var(--on-inverse); font:600 24px/32px var(--font-head); letter-spacing:-.02em; text-wrap:balance; }
.inverse .lead { color:var(--on-inverse-soft); }
.contacts { padding-block:64px; }
.contacts .chip-inv { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:var(--inverse-raised); border:1px solid var(--inverse-border); border-radius:var(--radius-pill); font:600 12px/16px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--on-inverse-soft); }
.contacts .chip-inv .ico { width:18px; height:18px; }
.contacts h2 { margin-top:24px; max-width:820px; text-wrap:wrap; }
.contacts .lead { margin-top:24px; max-width:720px; }
.contacts .act { margin-top:32px; display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.mono-note.on-inv { color:var(--on-inverse-muted); }
.closing { padding-block:64px; text-align:center; }
.closing .lead { max-width:720px; margin:16px auto 0; }
.closing .btn-row { margin-top:32px; flex-direction:column; align-items:stretch; gap:12px; }

/* ---------- FAQ ---------- */
.faq { max-width:832px; margin-inline:auto; display:grid; gap:16px; }
.faq details { background:var(--band); border:1px solid var(--line); border-radius:var(--radius-card); }
.faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:16px; cursor:pointer; font:500 16px/24px var(--font-head); letter-spacing:-.01em; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ico { width:24px; height:24px; color:var(--ink-soft); transition:transform .15s; }
.faq details[open] summary .ico { transform:rotate(180deg); }
.faq summary:hover { background:var(--surface); border-radius:var(--radius-card); }
.faq .ans { padding:0 16px 20px; max-width:70ch; color:var(--ink-soft); }
@media (prefers-reduced-motion:reduce) { .faq summary .ico { transition:none; } }

/* ---------- footer ---------- */
.footer { background:var(--inverse-2); color:var(--on-inverse-soft); border-top:1px solid var(--inverse-edge); padding:24px 0; font:400 14px/20px var(--font-body); }
.footer-in { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.footer-brand { display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer-links { display:flex; flex-direction:column; align-items:center; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--on-inverse-soft); }
.footer-links a:hover { color:var(--on-inverse); text-decoration:underline; }
.footer-mark { font:400 12px/16px var(--font-mono); color:var(--on-inverse-muted); }
.footer-end { display:flex; flex-direction:column; align-items:center; gap:4px; }

/* ---------- 404 ---------- */
.notfound { padding:96px 0; text-align:center; background:var(--band); min-height:60vh; }
.notfound h1 { font:700 32px/40px var(--font-head); letter-spacing:-.02em; margin-top:12px; }
.notfound .lead { margin-top:12px; }
.notfound .btn-row { margin-top:32px; }

/* ---------- ≥ 400 ---------- */
@media (min-width:400px) { .tag-pill { display:inline-flex; } }

/* ---------- ≥ 640 (tablet) ---------- */
@media (min-width:640px) {
  .grid.cols-3, .grid.cols-2f { grid-template-columns:repeat(2,1fr); }
  .console-bar .lights { display:flex; }
  .t-long { display:inline; }
  .entry-cells { grid-template-columns:repeat(3,1fr); }
}

/* ---------- ≥ 768 ---------- */
@media (min-width:768px) {
  .ecf-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,.95fr) minmax(0,.8fr) minmax(0,.95fr) minmax(0,1.25fr); gap:10px; }
  .ecf-row .c-sub, .ecf-row .c-itbis, .ecf-row .c-cli { display:block; }
  .wrap { padding-inline:32px; }
  .section { padding-block:96px; }
  .sec-head { margin-bottom:48px; }
  .sec-head h2 { font-size:32px; line-height:40px; }
  .sec-head .lead { margin-top:16px; }
  .sec-head h2 { margin-top:12px; }
  .feature { padding:24px; }
  .limit { padding:32px; }
  .grid { gap:24px; }
  .limits.grid { gap:32px; }
  .plans.grid { grid-template-columns:repeat(2,1fr); }
  .plan { padding:32px; }
  .plan.featured { margin-top:0; }
  .faq summary { min-height:72px; padding:0 24px; font-size:18px; line-height:26px; }
  .faq .ans { padding:0 24px 24px; }
  .contacts { padding-block:80px; }
  .closing { padding-block:96px; }
  .inverse h2 { font-size:32px; line-height:40px; }
  .contacts .act { flex-direction:row; align-items:center; }
  .closing .btn-row { flex-direction:row; align-items:center; }
  .footer { padding:24px 0; }
  .footer-in { flex-direction:row; justify-content:space-between; align-items:center; text-align:left; flex-wrap:wrap; }
  .footer-brand { flex-direction:row; gap:12px; }
  .footer-links { flex-direction:row; gap:24px; }
  .footer-links a { min-height:44px; }
  .footer-end { width:100%; align-items:flex-end; }
}

/* ---------- ≥ 900: nav ---------- */
@media (min-width:900px) { .topnav { display:flex; } }

/* ---------- ≥ 1024 (desktop) ---------- */
@media (min-width:1024px) {
  .topbar-in { min-height:64px; }
  .hero { padding:80px 0 112px; }
  .hero h1 { font-size:48px; line-height:56px; letter-spacing:-.025em; }
  .lead-hero { font-size:18px; line-height:28px; }
  .hero .btn-row { flex-direction:row; align-items:center; gap:16px; margin-top:32px; }
  .console { margin-top:64px; }
  .console-body { grid-template-columns:256px 1fr; }
  .console-side { display:block; }
  .console-main { padding:24px; }
  .grid.cols-3 { grid-template-columns:repeat(3,1fr); }
  .deadline-in { grid-template-columns:40px 1fr auto; column-gap:32px; row-gap:0; }
  .deadline .icon-box { grid-row:1 / span 3; align-self:center; }
  .deadline .chip-warn { grid-column:2; grid-row:1; }
  .deadline h2, .deadline p.lead { grid-column:2; }
  .deadline .btn { grid-column:3; grid-row:1 / span 3; align-self:center; }
  .deadline h2 { font-size:20px; line-height:26px; }
  .limits.grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  .hero .btn-row .btn, .closing .btn-row .btn, .contacts .act .btn, .deadline .btn { width:100%; }
  .console-title { font-size:11px; }
  .console-bar { padding:8px 12px; }
  .ecf-row .c-sub, .ecf-row .c-itbis, .ecf-row .c-cli { display:none; }
}
.nb { white-space:nowrap; }