/* =========================================================================
   Vonar AI — inner page components. Loads after home.css. Flat colour only.
   ========================================================================= */

/* ---------- Page hero ---------- */
.page-hero { position: relative; overflow: clip; padding: 136px 0 60px; border-bottom: 1px solid var(--line); background: var(--bg); }
.page-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.page-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 820px); }
.page-hero .kicker { margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.06em; line-height: .96; }
.page-hero h1 em { font-style: normal; color: var(--ink); }
.page-hero .lede { margin-top: 20px; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); max-width: 520px; text-wrap: pretty; }
.page-hero .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.page-hero .meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-3); font-size: 13px; }
.page-hero .meta span::before { content: "—"; margin-right: 8px; }
.page-hero.compact { padding-bottom: 44px; }
@media (max-width: 700px) { .page-hero { padding-top: 104px; padding-bottom: 44px; } }

/* ---------- Bands ---------- */
.band { padding: clamp(48px, 6vw, 88px) 0; position: relative; }
.band.alt { border-top: 1px solid var(--line); }
.band-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-bottom: clamp(22px, 3vw, 40px); align-items: start; }
.band-head .kicker { padding-top: 12px; grid-column: 1; grid-row: 1; margin: 0; }
.band-head h2 { grid-column: 2; grid-row: 1; }
.band-head h2 { font-size: clamp(30px, 4vw, 54px); }
.band-head p:not(.kicker) { margin-top: 16px; color: var(--ink-2); font-size: 15px; max-width: 52ch; grid-column: 2; }
@media (max-width: 960px) { .band-head { grid-template-columns: 1fr; gap: 10px; } .band-head .kicker { padding-top: 0; } .band-head h2, .band-head p:not(.kicker) { grid-column: 1; grid-row: auto; } }

/* ---------- Cards (hairline cells) ---------- */
.cards { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.card { background: transparent; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.card .icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); margin-bottom: 4px; }
.card .icon svg { width: 18px; height: 18px; color: var(--ink-2); }
.card h3 { font-size: 21px; }
.card p { color: var(--ink-2); font-size: 15px; max-width: 40ch; }
.card .grow { flex: 1; }
.card .btn { align-self: flex-start; margin-top: 10px; }
.card.accent { background: transparent; }
.card.accent h3::before { content: ""; display: block; width: 24px; height: 1px; background: var(--accent); margin-bottom: 14px; }
.card > .kicker { margin-bottom: 6px; }
.card.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: start; padding-block: 30px 32px; }
.card.lead .lead-copy { display: grid; gap: 12px; }
.card.lead .kicker { margin: 0; }
.card.lead h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; }
.card.lead p:not(.kicker) { max-width: 58ch; }
.card.lead .checks { margin-top: 32px; }
@media (max-width: 900px) { .card.lead { grid-template-columns: 1fr; } .card.lead .checks { margin-top: 0; } }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.checks li { position: relative; padding: 9px 0 9px 22px; color: var(--ink-2); font-size: 14.5px; border-top: 1px solid var(--line); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 1px; background: var(--accent); }
.tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tags li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 1000px) { .cards.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .cards.c2, .cards.c3 { grid-template-columns: 1fr; }
  .card:not(.lead) { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; padding: 20px 18px 22px; }
  .card:not(.lead) > * { grid-column: 1 / -1; }
  .card:not(.lead) > .icon { grid-column: 1; margin: 0; }
  .card:not(.lead) > .icon + h3 { grid-column: 2; }
  .card.lead { padding-block: 22px 24px; }
  .checks li { padding: 7px 0 7px 22px; font-size: 14px; }
  .checks li::before { top: 16px; }
}

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.split.form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split .kicker { margin-bottom: 18px; }
.split h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 18px; }
.split > div > p { color: var(--ink-2); font-size: 15px; max-width: 46ch; }
@media (max-width: 900px) { .split, .split.form { grid-template-columns: 1fr; } }

/* ---------- Jobs ---------- */
.job { border-top: 1px solid var(--line); padding: 28px 0; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 18px 32px; align-items: start; }
.job:last-child { border-bottom: 1px solid var(--line); }
.job .facts { display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: 10.5px; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; padding-top: 6px; grid-column: 1; grid-row: 1; }
.job > div { grid-column: 2; }
.job h3 { font-size: 22px; }
.job p { color: var(--ink-2); margin-top: 8px; font-size: 15px; max-width: 56ch; }
.job .tags { margin-top: 12px; }
.job .btn { white-space: nowrap; grid-column: 3; grid-row: 1; }
@media (max-width: 760px) { .job { grid-template-columns: 1fr; } .job .facts, .job > div, .job .btn { grid-column: 1; grid-row: auto; } .job .btn { justify-self: start; } }

/* ---------- Key / value rows ---------- */
.kv { display: grid; border-top: 1px solid var(--line); }
.kv > div { padding: 16px 0; display: grid; grid-template-columns: 160px 1fr auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); }
.kv .k { color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.kv .v { color: var(--ink); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.kv .v a { border-bottom: 1px solid var(--line-strong); }
.copy { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); padding: 6px 10px; transition: color .2s, border-color .2s; }
.copy:hover, .copy.done { color: var(--ink); border-color: var(--ink); }
@media (max-width: 600px) { .kv > div { grid-template-columns: 1fr auto; } .kv .k { grid-column: 1 / -1; } }

/* ---------- Big stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 24px 26px; }
.stat .big { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.stat h3 { font-size: 17px; margin: 18px 0 8px; }
.stat p { color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
table.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td { text-align: left; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.table th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.table td { color: var(--ink-2); }
.table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.sev { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; }
.sev.p1 { background: var(--b5); } .sev.p2 { background: var(--b4); } .sev.p3 { background: var(--b3); } .sev.p4 { background: var(--b2); }

/* ---------- Prose ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: 22px; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 8px; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.prose .updated { color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 28px; }

/* ---------- Forms ---------- */
.form-card { border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field .lbl { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field label b { color: var(--accent); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 2px; padding: 12px 14px;
  transition: border-color .2s; appearance: none; -webkit-appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a6b3' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px; }
.field select option { background: var(--bg-2); color: var(--ink); }
.field textarea { resize: vertical; min-height: 120px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); font-size: 13.5px; transition: background .2s, color .2s, border-color .2s; }
.chip input:checked + span { background: var(--ink); color: #050608; border-color: var(--ink); }
.chip input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 2px; }
.field .opt { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.field.invalid input, .field.invalid textarea { border-color: var(--b5); }
/* the optional detail folds away, so the form reads as five things to fill in */
.more { border-top: 1px solid var(--line); padding-top: 14px; }
.more summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); transform: rotate(-45deg); transition: transform .2s; margin-right: 2px; }
.more[open] summary::before { transform: rotate(45deg); }
.more[open] summary { margin-bottom: 18px; }
.more summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.form-actions .fine { color: var(--ink-3); font-size: 13px; }
.form-error { display: none; border: 1px solid var(--b5); color: var(--ink); padding: 12px 14px; font-size: 14px; }
.form-error.show { display: block; }
.success { text-align: center; padding: 24px 8px; display: grid; justify-items: center; gap: 14px; }
.success .mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.success .mark svg { width: 26px; height: 26px; }
.success h2 { font-size: 30px; }
.success p { color: var(--ink-2); max-width: 440px; }
.side { position: sticky; top: 96px; display: grid; border-top: 1px solid var(--line); }
.side .card { border-right: 0; padding: 24px 0; }
.side .card h3 { font-size: 16px; }
.side ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: n; }
.side ol li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--ink-2); font-size: 14px; }
.side ol li::before { counter-increment: n; content: "0" counter(n); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3); padding-top: 3px; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } }
@media (max-width: 900px) { .side { position: static; } }

/* ---------- Support ---------- */
.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-line .addr { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.03em; }

/* ---------- Not found ---------- */
.notfound { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 140px 0 80px; position: relative; overflow: clip; }
.notfound .code { font-family: var(--font-display); font-size: clamp(96px, 20vw, 220px); line-height: .9; font-weight: 600; letter-spacing: -0.07em; color: var(--ink); }
.notfound h1 { font-size: clamp(24px, 3vw, 34px); margin-top: 16px; }
.notfound p { color: var(--ink-2); margin-top: 12px; }
.notfound .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- The stack windows (stack-inner.js) ----------
   html.stack-on is set before first paint by the head script and dropped if the
   drawing cannot start, so these layouts never flash. The node sits right of the
   hero copy on desktop, in a band above it on phones and portrait tablets, and in
   a well above the text in the closing section and the 404 panel. */
html.stack-on .page-hero-canvas, html.stack-on .close-canvas { display: block; }
.close-canvas { display: none; }
html.stack-on .page-hero .wrap { grid-template-columns: minmax(0, 600px); }
html.stack-on .page-hero h1 { font-size: clamp(40px, 5.2vw, 76px); }
html.stack-on .close { padding-top: calc(clamp(80px, 10vw, 150px) + clamp(180px, 26svh, 280px)); }
html.stack-on .notfound { padding-top: clamp(300px, 36vh, 400px); }
@media (max-width: 1180px) { html.stack-on .page-hero .wrap { grid-template-columns: minmax(0, 480px); } }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 17/20) {
  html.stack-on .page-hero .wrap { grid-template-columns: minmax(0, 820px); }
  html.stack-on .page-hero { padding-top: calc(96px + clamp(170px, 28svh, 240px)); }
  html.stack-on .page-hero.compact { padding-top: calc(88px + 150px); }
  html.stack-on body[data-page="privacy"] .page-hero, html.stack-on body[data-page="terms"] .page-hero { padding-top: 120px; }
  html.stack-on body[data-page="privacy"] .page-hero-canvas, html.stack-on body[data-page="terms"] .page-hero-canvas { display: none; }
}

/* ---------- Field notes (reached only from the foot of the footer) ---------- */
.page-hero .kicker a { color: inherit; border-bottom: 1px solid transparent; }
.page-hero .kicker a:hover { border-bottom-color: currentColor; }
.prose.note h2 { font-size: 24px; margin-top: 44px; }
.prose.note h3 { font-size: 18px; margin: 28px 0 8px; }
.prose.note p, .prose.note li { font-size: 17px; line-height: 1.7; }
.prose.note ul { gap: 10px; }
.prose.note strong { color: var(--ink); font-weight: 600; }
.note-list { list-style: none; padding: 0; margin: 0; display: grid; }
.note-list li { border-top: 1px solid var(--line); }
.note-list li:last-child { border-bottom: 1px solid var(--line); }
.note-list a { display: grid; gap: 8px; padding: 22px 0; transition: background .2s; }
.note-list a:hover strong { color: var(--accent); }
.note-list .mono { color: var(--ink-3); }
.note-list strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); transition: color .2s; }
.note-list p { color: var(--ink-2); font-size: 15px; max-width: 64ch; }
.note-list .when { color: var(--ink-3); font-size: 13px; }
.note-list.index a { padding: 30px 0; }
.note-list.index strong { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.03em; }
.note-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.note-cta h2 { font-size: clamp(26px, 3vw, 40px); margin: 14px 0 12px; }
.note-cta p:not(.kicker) { color: var(--ink-2); font-size: 15px; }
.note-more h3 { font-size: 16px; margin-bottom: 8px; }
/* the way in: one quiet link at the very bottom of every footer */
.ftr .legal a, .ftr-bottom a { color: inherit; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.ftr .legal a:hover, .ftr-bottom a:hover { color: var(--ink); border-bottom-color: currentColor; }

/* ---------- Platform and partner pages ---------- */
.partner-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.partner-logo .logo { height: 34px; width: auto; filter: brightness(0) invert(1); }
.prose .fine-print { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }