/* Aorka marketing site — shared styles
 * v8 design: Hanken Grotesk headlines + Newsreader body
 * Neutral off-white, restrained blue accent, engineering-paper dot grid */

:root {
    --bg:           #f5f5f3;
    --bg-deep:      #ebebe7;
    --ink:          #16181b;
    --ink-2:        #4a4e54;
    --ink-3:        #777b81;
    --ink-4:        #aaaeb3;
    --rule:         rgba(22, 24, 27, 0.09);
    --rule-strong:  rgba(22, 24, 27, 0.20);
    --blue:         #1a6df5;
    --safe:         #1f6b48;
    --warn:         #a85a18;
    --block:        #8c1d1d;

    --display: 'Hanken Grotesk', system-ui, sans-serif;
    --sans:    'Hanken Grotesk', system-ui, sans-serif;
    --serif:   'Newsreader', 'Iowan Old Style', Georgia, serif;
    --mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
    position: relative;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ============ HERO DOT BAND ============ */
.hero-dots {
    position: absolute;
    top: 80px; left: 0; right: 0;
    height: 880px;
    background-image:
        radial-gradient(circle, rgba(22, 24, 27, 0.16) 1px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 95%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 95%);
    pointer-events: none;
    z-index: 0;
}
nav, main, footer { position: relative; z-index: 1; }

/* ============ GRID ============ */
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns:
        [margin-start] 96px
        [content-start] minmax(0, 1fr) [content-end]
        40px [margin-end];
    column-gap: 32px;
}
.wrap > .marginal { grid-column: margin-start / content-start; }
.wrap > .content  { grid-column: content-start / content-end; }
.wrap > .full     { grid-column: margin-start / margin-end; }

@media (max-width: 960px) {
    .wrap { grid-template-columns: 1fr; padding: 0 24px; column-gap: 0; }
    .wrap > .marginal, .wrap > .content, .wrap > .full { grid-column: 1; }
}

/* ============ MARGINALIA ============ */
.marginal {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding-top: 8px;
}
.marginal .num { color: var(--ink); font-weight: 500; }
@media (max-width: 960px) {
    .marginal { margin-bottom: 12px; padding-top: 0; font-size: 11px; }
}

/* ============ NAV ============ */
nav { border-bottom: 1px solid var(--rule); }
nav .inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
}
.brand {
    font-family: var(--display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.brand .dot { color: var(--blue); }
.nav-links { display: flex; gap: 28px; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 760px) {
    .nav-links a:not(.nav-cta) { display: none; }
    nav .inner { padding: 18px 24px; }
}

/* ============ HERO ============ */
.hero { padding: 112px 0 96px; }

.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0 0 36px;
}
.eyebrow .pulse {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--blue);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 2px;
    animation: pulse 2.6s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

h1 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0 0 32px;
    max-width: 20ch;
    color: var(--ink);
}

.lede {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink);
    max-width: 38em;
    margin: 0 0 44px;
    font-variation-settings: "opsz" 24;
}
.lede strong { font-weight: 500; }

.cta-row {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    margin-bottom: 96px;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background: var(--ink);
    color: var(--bg);
}
.btn-primary:hover { background: var(--blue); }
.btn-primary svg { width: 14px; height: 14px; }
.btn-secondary {
    color: var(--ink);
    padding-left: 6px;
}
.btn-secondary:hover { color: var(--blue); }
.btn-secondary .underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
}

/* ============ LIVE STRIP ============ */
.live-strip {
    border-top: 1px solid var(--ink);
    padding-top: 22px;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 880px;
}
.live-strip .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    line-height: 1.5;
    max-width: 90px;
}
.stat .num {
    display: block;
    font-family: var(--display);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 8px;
    font-feature-settings: "tnum" 1;
}
.stat .desc {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
}
@media (max-width: 720px) {
    .live-strip { grid-template-columns: 1fr; gap: 20px; }
    .live-strip .label { max-width: none; }
}

/* ============ SECTIONS ============ */
section { padding: 96px 0; }
.section-deep { background: var(--bg-deep); }

h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 28px;
    max-width: 26ch;
    color: var(--ink);
}

.lead-prose {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink);
    max-width: 36em;
    margin: 0 0 56px;
}
.lead-prose strong { font-weight: 500; }

/* ============ STEPS ============ */
.essay-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
}
.step .step-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}
.step .step-num .n { color: var(--ink); font-weight: 500; }
.step .step-head {
    font-family: var(--display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--ink);
}
.step .step-body {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
}
@media (max-width: 880px) {
    .essay-steps { grid-template-columns: 1fr; gap: 36px; }
}

/* ============ CONVERSATION ============ */
.conv {
    max-width: 720px;
    font-family: var(--serif);
    font-size: 17.5px;
    line-height: 1.65;
}
.conv-turn {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.conv-turn:last-of-type { border-bottom: 1px solid var(--ink); }
.conv-who {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    line-height: 1.5;
    font-weight: 500;
    padding-top: 4px;
}
.conv-who.aorka { color: var(--blue); }
.conv-text { color: var(--ink); }
.conv-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 22px;
    letter-spacing: 0.04em;
}
.conv-embed {
    max-width: 760px;
    margin: 0;
}
.conv-embed iframe {
    width: 100%;
    height: 640px;
    border: 0;
    display: block;
    background: transparent;
}
@media (max-width: 640px) {
    .conv-embed iframe { height: 580px; }
}
@media (max-width: 640px) {
    .conv-turn { grid-template-columns: 1fr; gap: 4px; }
    .conv-who { padding-top: 0; }
}

/* ============ DEMO CALLOUT ============ */
.demo-cta {
    margin-top: 56px;
    max-width: 720px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    padding: 28px 32px 30px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    background-image:
        radial-gradient(circle, rgba(22, 24, 27, 0.20) 1px, transparent 1.6px);
    background-size: 16px 16px;
    background-position: 10px 10px;
}
.demo-cta-text { max-width: 38ch; }
.demo-cta-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin: 0 0 12px;
}
.demo-cta-eyebrow .pulse {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--blue);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
    animation: pulse 2.6s infinite;
}
.demo-cta-head {
    font-family: var(--display);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.018em;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--ink);
}
.demo-cta-body {
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}
.demo-cta-action {
    align-self: end;
    white-space: nowrap;
}
.demo-cta-action .play-icon {
    width: 11px; height: 11px;
}
@media (max-width: 720px) {
    .demo-cta {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 24px 26px;
    }
    .demo-cta-action { align-self: start; }
}

/* ============ SAFETY / ORCHESTRATION SCORE ============ */
.safety-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 1000px) {
    .safety-grid { grid-template-columns: 1fr; gap: 40px; }
}

.score-wrap {
    background-color: var(--bg);
    background-image:
        radial-gradient(circle, rgba(22, 24, 27, 0.20) 1px, transparent 1.6px);
    background-size: 16px 16px;
    background-position: 8px 8px;
    border: 1px solid var(--rule-strong);
    padding: 28px 28px 24px;
}
.score-title {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin: 0 0 20px;
    display: flex; justify-content: space-between;
}
.score-title .meta { color: var(--ink-4); }

svg.score { display: block; width: 100%; height: auto; }

.score-legend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}
.legend-row {
    display: flex; gap: 10px; align-items: flex-start;
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-2);
}
.legend-row .dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.legend-row.safe  .dot { background: var(--safe); }
.legend-row.warn  .dot { background: var(--warn); }
.legend-row.block .dot { background: var(--block); }
.legend-row strong { color: var(--ink); font-weight: 500; }

/* ============ TEAMS ============ */
.teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    border-top: 1px solid var(--ink);
    padding-top: 48px;
}
.team-head {
    font-family: var(--display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.018em;
    margin: 0 0 16px;
    color: var(--ink);
}
.team-body {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 38ch;
}
@media (max-width: 880px) {
    .teams { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ CLOSING ============ */
.closing { padding: 128px 0; }
.closing h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    max-width: 22ch;
    margin-bottom: 28px;
}
.closing .lead-prose { margin-bottom: 40px; }

form.signup {
    display: flex; gap: 0;
    max-width: 460px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg);
}
form.signup input {
    flex: 1;
    padding: 13px 22px;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    outline: none;
}
form.signup input::placeholder { color: var(--ink-4); }
form.signup button {
    padding: 11px 22px;
    margin: 4px;
    background: var(--ink);
    color: var(--bg);
    border: 0;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}
form.signup button:hover { background: var(--blue); }
.closing-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 18px;
    letter-spacing: 0.04em;
}

/* ============ FOOTER ============ */
footer {
    border-top: 1px solid var(--rule);
    padding: 48px 0 36px;
    font-size: 13px;
    color: var(--ink-2);
}
.foot-row {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.foot-brand-block .tagline {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink-2);
    margin-top: 10px;
    max-width: 32ch;
    line-height: 1.5;
}
.foot-links {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px 36px;
}
.foot-links a:hover { color: var(--blue); }
.foot-meta {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
}
@media (max-width: 640px) {
    .foot-links { grid-template-columns: repeat(2, auto); }
}

/* ============ FEATURES PAGE ============ */

/* Tighter hero for features page (no live-strip, has a TOC instead) */
.hero-features { padding: 96px 0 72px; }
.hero-features .lede { margin-bottom: 56px; }

/* Inline mono marker, used in prose for things like Get-* / Restart-* / sa */
.m {
    font-family: var(--mono);
    font-size: 0.92em;
    color: var(--ink-2);
}

/* Table of contents in the hero */
.toc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 32px;
    border-top: 1px solid var(--ink);
    padding-top: 22px;
    max-width: 720px;
}
.toc a {
    display: flex;
    align-items: baseline;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    transition: color 0.15s, padding-left 0.15s;
}
.toc a:hover { color: var(--blue); padding-left: 4px; }
.toc a span {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    font-weight: 500;
}
.toc a:hover span { color: var(--blue); }
@media (max-width: 720px) {
    .toc { grid-template-columns: 1fr; }
}

/* Each feature section in the body of /features */
.feature h2 { margin-bottom: 28px; }
.feature .lead-prose { margin-bottom: 28px; max-width: 38em; }
.feature .lead-prose + .lead-prose { margin-bottom: 44px; }

/* Em-dash bullet list — replaces the old card-checkmark bullets */
.feat-list {
    list-style: none;
    margin: 0 0 48px;
    padding: 0;
    max-width: 38em;
}
.feat-list li {
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink);
    padding: 14px 0 14px 28px;
    text-indent: -28px;
    border-bottom: 1px solid var(--rule);
}
.feat-list li:first-child { border-top: 1px solid var(--rule); }
.feat-list li > .m:first-child {
    color: var(--ink-3);
    font-family: var(--serif);
    font-size: 17px;
    margin-right: 10px;
}
.feat-list li strong { font-weight: 500; color: var(--ink); }

/* Tighter conversation block used as inline transcript on Chat section */
.conv-tight {
    margin-top: 8px;
    max-width: 720px;
    font-size: 16.5px;
}
.conv-tight code {
    font-family: var(--mono);
    font-size: 0.9em;
    color: var(--ink-2);
    background: rgba(22, 24, 27, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Small inline aside note */
.aside {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-3);
    margin: 0;
    max-width: 38em;
    padding-left: 16px;
    border-left: 1px solid var(--rule-strong);
}
.aside a {
    color: var(--ink-2);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
}
.aside a:hover { color: var(--blue); }

/* Knowledge-base sample list (Section 02) — typographic, no cards */
.kb-sample {
    margin: 8px 0 0;
    max-width: 760px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    padding: 22px 24px 18px;
}
.kb-head {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}
.kb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kb-list li {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 16px;
    align-items: baseline;
    padding: 11px 0;
    border-top: 1px solid var(--rule);
    font-size: 14.5px;
    line-height: 1.5;
}
.kb-list li:last-child { border-bottom: 1px solid var(--rule); }
.kb-kind {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 3px;
}
.kb-body {
    font-family: var(--serif);
    color: var(--ink);
}
.kb-body code {
    font-family: var(--mono);
    font-size: 0.88em;
    color: var(--ink-2);
}
.kb-meta {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-top: 3px;
}
.kb-meta em {
    color: var(--warn);
    font-style: normal;
}
.kb-list li:last-child .kb-meta em { color: var(--block); }
@media (max-width: 720px) {
    .kb-list li { grid-template-columns: 1fr; gap: 4px; }
    .kb-meta { padding-top: 0; }
}

/* Script table (Section 04) — typographic, hairline rules */
.script-table {
    margin: 8px 0 0;
    max-width: 760px;
    font-size: 14.5px;
}
.script-row {
    display: grid;
    grid-template-columns: 200px 70px 70px 1fr;
    gap: 20px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid var(--rule);
}
.script-row:last-child { border-bottom: 1px solid var(--rule); }
.script-row.script-head {
    border-top: 1px solid var(--ink);
    padding-top: 10px;
    padding-bottom: 10px;
}
.script-row.script-head span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.s-name {
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink);
}
.s-rate {
    font-family: var(--mono);
    font-size: 13.5px;
    font-feature-settings: "tnum" 1;
}
.s-rate-good { color: var(--safe); }
.s-rate-warn { color: var(--warn); }
.s-runs {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    font-feature-settings: "tnum" 1;
}
.s-desc {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.45;
}
@media (max-width: 720px) {
    .script-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
    .script-row .s-desc { grid-column: 1 / -1; padding-top: 2px; }
    .script-row .s-runs { display: none; }
    .script-row.script-head .s-runs { display: none; }
}

/* Code snippet block (Section 08) */
.code-snippet {
    margin: 8px 0 0;
    max-width: 560px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
}
.code-head {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg-deep);
}
.code-snippet pre {
    margin: 0;
    padding: 18px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
    overflow-x: auto;
}
.code-snippet .ck { color: var(--blue); }
.code-snippet .cs { color: var(--safe); }

/* Features-page closing — lighter than the homepage signup form */
.closing-features { padding: 96px 0 128px; }
.closing-features h2 { margin-bottom: 16px; }
.closing-features .lead-prose { margin-bottom: 32px; }

/* Inline link in serif prose */
.link-inline {
    color: var(--ink);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
    transition: color 0.15s;
}
.link-inline:hover { color: var(--blue); }

/* ============ PRICING PAGE ============ */

.price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    max-width: 1000px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.price-card {
    padding: 24px 28px 32px;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
}
.price-card:last-child { border-right: 0; }
.price-card-feat { background: var(--bg-deep); }

.price-rec {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
    min-height: 12px;
    line-height: 1;
}
.price-tier {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 6px;
    font-weight: 500;
}
.price-desc {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-2);
    margin: 0 0 24px;
    line-height: 1.5;
    min-height: 2.6em;
}
.price-num {
    font-family: var(--display);
    font-weight: 500;
    font-size: 44px;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1;
    font-feature-settings: "tnum" 1;
}
.price-num .unit {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    font-weight: 400;
}
.price-extra {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin: 0 0 24px;
    min-height: 13px;
}
.price-feat {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    flex: 1;
    border-top: 1px solid var(--rule);
}
.price-feat li {
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
    padding: 10px 0 10px 22px;
    text-indent: -22px;
    border-bottom: 1px solid var(--rule);
}
.price-feat li .m {
    color: var(--ink-3);
    margin-right: 8px;
    font-family: var(--serif);
    font-size: 1em;
}
.price-card .btn { align-self: flex-start; }

@media (max-width: 880px) {
    .price-grid { grid-template-columns: 1fr; }
    .price-card {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }
    .price-card:last-child { border-bottom: 0; }
    .price-rec, .price-extra { min-height: 0; }
    .price-desc { min-height: 0; margin-bottom: 18px; }
}

/* "Every plan includes" — typographic 3-column list, no pills */
.include-grid {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 32px;
    max-width: 820px;
    border-top: 1px solid var(--ink);
}
.include-grid li {
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--ink);
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
@media (max-width: 880px) {
    .include-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 540px) {
    .include-grid { grid-template-columns: 1fr; }
}

/* ============ SECURITY PAGE ============ */
.doc-meta {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 18px;
}

.sub-h {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    margin: 32px 0 4px;
    letter-spacing: -0.005em;
}

.threat-quote {
    margin: 22px 0 36px;
    padding: 16px 22px 16px 22px;
    border-left: 2px solid var(--ink-2);
    background: rgba(22, 24, 27, 0.025);
}
.section-deep .threat-quote {
    background: rgba(22, 24, 27, 0.04);
    border-left-color: var(--ink-2);
}
.threat-quote .threat-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 6px;
}
.threat-quote p:not(.threat-label) {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
}

.layer-matrix {
    margin: 28px 0 32px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.layer-row {
    display: grid;
    grid-template-columns: 132px 1fr;
    column-gap: 28px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.layer-row:last-child { border-bottom: 0; }

.layer-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 2px;
}
.layer-tag.tag-mitigated { color: var(--safe); }
.layer-tag.tag-absent { color: var(--ink-4); }
.layer-tag.tag-present { color: var(--warn); }

.layer-text {
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink);
}
.layer-text strong {
    font-weight: 500;
    color: var(--ink);
    display: inline;
    margin-right: 4px;
}

@media (max-width: 720px) {
    .layer-row {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
    .layer-tag { padding-top: 0; }
}

.compare-wrap {
    margin: 28px 0 0;
    overflow-x: auto;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.compare-table th,
.compare-table td {
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink);
    text-align: left;
    vertical-align: top;
    padding: 14px 18px 14px 0;
    border-bottom: 1px solid var(--rule);
}
.compare-table th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 400;
    padding-bottom: 12px;
    padding-top: 12px;
    border-bottom: 1px solid var(--rule-strong);
}
.compare-table th.col-aorka { color: var(--blue); }
.compare-table td:first-child,
.compare-table th:first-child { padding-right: 24px; }
.compare-table td:last-child,
.compare-table th:last-child { padding-right: 0; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td strong { font-weight: 500; color: var(--ink); }

@media (max-width: 720px) {
    .compare-table th,
    .compare-table td {
        font-size: 14px;
        padding: 12px 14px 12px 0;
    }
}

/* ============ DOCS PAGE ============ */
.doc-list {
    margin: 28px 0 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.doc-entry {
    display: block;
    position: relative;
    padding: 22px 36px 22px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s ease;
}
.doc-entry:last-child { border-bottom: 0; }
.doc-entry:hover { background: rgba(22, 24, 27, 0.025); }
.section-deep .doc-entry:hover { background: rgba(22, 24, 27, 0.04); }

.doc-head {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    column-gap: 22px;
    align-items: baseline;
    margin-bottom: 6px;
}
.doc-code {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.doc-title {
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.doc-entry:hover .doc-title { color: var(--blue); }
.doc-rev {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.doc-status { color: var(--ink-3); }

.doc-desc {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
    padding-left: 94px;
    max-width: 620px;
}

.doc-entry::after {
    content: "\2192";
    position: absolute;
    right: 0;
    top: 24px;
    font-family: var(--sans);
    font-size: 18px;
    color: var(--ink-4);
    transition: transform 0.2s ease, color 0.2s ease;
}
.doc-entry:hover::after {
    color: var(--blue);
    transform: translateX(4px);
}

.doc-entry-passive {
    cursor: default;
}
.doc-entry-passive:hover { background: transparent; }
.section-deep .doc-entry-passive:hover { background: transparent; }
.doc-entry-passive:hover .doc-title { color: var(--ink); }
.doc-entry-passive::after { display: none; }

@media (max-width: 720px) {
    .doc-head {
        grid-template-columns: 1fr auto;
        column-gap: 14px;
        row-gap: 2px;
    }
    .doc-code {
        grid-column: 1 / -1;
        font-size: 10.5px;
        margin-bottom: 2px;
    }
    .doc-title { font-size: 17px; }
    .doc-desc { padding-left: 0; font-size: 15.5px; }
    .doc-entry { padding-right: 28px; }
    .doc-entry::after { top: 20px; font-size: 16px; }
}

/* ============ DOC SUB-META (under lede) ============ */
.doc-sub {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin: 28px 0 0;
}

/* ============ FAQ Q&A ============ */
.qa-list {
    margin: 24px 0 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.qa {
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
}
.qa:last-child { border-bottom: 0; }
.qa-q {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18.5px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 10px;
}
.qa-a {
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 640px;
}
.qa-a strong { font-weight: 500; color: var(--ink); }
.qa-a em { font-style: italic; }

/* ============ NUMBERED LIST (privacy concept clusters) ============ */
.numbered-list {
    list-style: none;
    margin: 22px 0 26px;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.numbered-list li {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 22px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.numbered-list li .n {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    color: var(--ink-3);
}
.numbered-list li > div {
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.numbered-list li > div strong {
    font-weight: 500;
    color: var(--ink);
    margin-right: 4px;
}

@media (max-width: 720px) {
    .numbered-list li {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
}

/* ============ CONTROL MAPPING TABLE (compliance) ============ */
.ctrl-wrap {
    margin: 28px 0 0;
    overflow-x: auto;
}
.ctrl-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.ctrl-table th,
.ctrl-table td {
    text-align: left;
    vertical-align: top;
    padding: 16px 18px 16px 0;
    border-bottom: 1px solid var(--rule);
}
.ctrl-table th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-strong);
}
.ctrl-table th.col-aorka { color: var(--blue); }
.ctrl-table th:first-child,
.ctrl-table td:first-child {
    width: 26%;
    padding-right: 24px;
}
.ctrl-table th:last-child,
.ctrl-table td:last-child { padding-right: 0; }
.ctrl-table tbody tr:last-child td { border-bottom: 0; }

.ctrl-table td:first-child strong {
    display: block;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
}
.ctrl-table .ctrl-ref {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
}
.ctrl-table td:last-child {
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

@media (max-width: 720px) {
    .ctrl-table th:first-child,
    .ctrl-table td:first-child { width: 36%; padding-right: 16px; }
    .ctrl-table th,
    .ctrl-table td { padding: 14px 14px 14px 0; }
    .ctrl-table td:last-child { font-size: 14.5px; }
    .ctrl-table td:first-child strong { font-size: 14px; }
}

/* ============ ENTRY ANIMATION ============ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: fadeUp 0.8s ease-out forwards; }
.reveal.d1 { animation-delay: 0.05s; }
.reveal.d2 { animation-delay: 0.16s; }
.reveal.d3 { animation-delay: 0.30s; }
.reveal.d4 { animation-delay: 0.46s; }
.reveal.d5 { animation-delay: 0.66s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; }
}