/* ============================================================================
   Nrdvana portal — "Deep Dive" identity
   Bright ocean palette, Squidly-forward, rounded + friendly but credible.
   Mobile-first; larger layouts layer on via min-width queries.
   Type: Fredoka (display) · Nunito (body) · JetBrains Mono (data/CLI).
   ========================================================================== */

:root {
    --ink:        #12263A;   /* deep-sea navy — primary text + dark sections   */
    --ink-soft:   #26415C;
    --brand:      #2E7DF6;   /* Squidly blue — primary                         */
    --brand-deep: #1B5FD9;
    --aqua:       #34D2E8;   /* tentacle cyan — secondary tint / gradients     */
    --coral:      #FF6A5A;   /* the single warm accent — buy energy            */
    --coral-deep: #F0503F;
    --sun:        #FFD44D;   /* Squidly's smile — marker highlights            */
    --bg:         #EEF5FF;   /* cool paper ground (blue-biased neutral)         */
    --bg-2:       #E3EEFF;
    --surface:    #FFFFFF;
    --line:       #D6E4F7;
    --muted:      #5A7189;
    --good:       #129E6B;
    --warn:       #E08A00;
    --bad:        #E5484D;

    --maxw: 1120px;
    --r-sm: 10px;
    --r:    16px;
    --r-lg: 26px;
    --shadow:    0 18px 40px -22px rgba(18, 38, 58, .40);
    --shadow-sm: 0 8px 20px -14px rgba(18, 38, 58, .45);

    --display: "Fredoka", system-ui, sans-serif;
    --body:    "Nunito", system-ui, -apple-system, sans-serif;
    --mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; }
/* FocusOnNavigate programmatically focuses each page's h1 for screen readers —
   that must not paint a focus rectangle for mouse users. */
h1:focus { outline: none; }
a { color: var(--brand); }
img { max-width: 100%; display: block; }

.app { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }

/* ---- top nav (mobile-first; CSS-only hamburger) ------------------------- */

.topbar {
    position: sticky; top: 0; z-index: 40;
    padding: 12px 0;
    background: rgba(238, 245, 255, .82);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}
/* nav contents share the content column's width instead of spanning the page */
.topbar-inner {
    max-width: var(--maxw); margin: 0 auto; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 clamp(16px, 4vw, 40px);
}
.brand {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    text-decoration: none; color: var(--ink);
    display: inline-flex; align-items: center; gap: 10px;
}
.brand img { width: 34px; height: 34px; }

.nav-toggle { display: none; }
.nav-burger {
    display: inline-flex; flex-direction: column; gap: 5px;
    padding: 10px; margin: -10px; cursor: pointer; border-radius: 10px;
}
.nav-burger span { width: 24px; height: 3px; border-radius: 3px; background: var(--ink); transition: .2s; }

.topbar nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 4px;
    padding: 10px clamp(16px, 4vw, 40px) 18px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.nav-toggle:checked ~ nav { display: flex; }
.topbar nav a {
    text-decoration: none; color: var(--ink-soft); font-weight: 700;
    padding: 10px 4px; border-radius: 8px;
}
.topbar nav a.nav-cta {
    color: #fff; background: var(--brand); text-align: center; padding: 12px;
    margin-top: 4px;
}

@media (min-width: 860px) {
    .nav-burger { display: none; }
    .topbar nav {
        position: static; display: flex; flex-direction: row; align-items: center;
        gap: 26px; padding: 0; background: none; border: 0; box-shadow: none;
    }
    .topbar nav a { padding: 6px 2px; color: var(--ink-soft); }
    .topbar nav a:hover { color: var(--brand); }
    .topbar nav a.nav-cta { padding: 10px 18px; border-radius: 999px; margin: 0; }
    .topbar nav a.nav-cta:hover { background: var(--brand-deep); color: #fff; }
}

/* ---- shell ------------------------------------------------------------- */

.content { flex: 1; width: 100%; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* pages that are plain documents (manage / success) get breathing room */
.page { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px); }

section { position: relative; }
.section-pad { padding: clamp(48px, 8vw, 96px) 0; }

.eyebrow {
    font-family: var(--display); font-weight: 600;
    color: var(--brand); letter-spacing: .12em; text-transform: uppercase;
    font-size: 13px; margin: 0 0 14px;
}
.section-head { max-width: 40ch; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(26px, 4vw, 40px); text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 18px; margin: 12px 0 0; }

/* ---- buttons ----------------------------------------------------------- */

.btn {
    font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 10px 22px -10px rgba(255,106,90,.7); }
.btn-primary:hover { background: var(--coral-deep); }
.btn-blue { background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px rgba(46,125,246,.7); }
.btn-blue:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(18,38,58,.18); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-lg { padding: 16px 32px; font-size: 17px; }

/* ---- hero -------------------------------------------------------------- */

.hero { padding: clamp(28px, 6vw, 64px) 0 clamp(40px, 7vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } }

.hero h1 { font-size: clamp(34px, 6.4vw, 60px); font-weight: 700; text-wrap: balance; letter-spacing: -.01em; }
.hero .lede { color: var(--ink-soft); font-size: clamp(17px, 2.2vw, 20px); max-width: 40ch; margin: 20px 0 0; }
.mark { background: linear-gradient(180deg, transparent 62%, var(--sun) 62% 92%, transparent 92%); padding: 0 .06em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-trust { margin: 18px 0 0; color: var(--muted); font-weight: 700; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .dot { color: var(--aqua); }

/* Squidly + the .nrd -> data motif */
.hero-art { position: relative; display: grid; place-items: center; }
.hero-art .blob {
    position: absolute; inset: 6% 8%; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    background: radial-gradient(120% 120% at 30% 25%, var(--aqua), var(--brand) 70%);
    filter: blur(2px); opacity: .28;
}
.hero-art img.squidly { position: relative; width: min(300px, 74vw); filter: drop-shadow(0 24px 30px rgba(27,95,217,.35)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .hero-art img.squidly { animation: none; } }

.chip-nrd, .chip-out {
    position: absolute; font-family: var(--mono); font-weight: 700; font-size: 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 8px 12px; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.chip-nrd { top: 8%; left: -2%; transform: rotate(-6deg); color: var(--muted); }
.chip-out { bottom: 10%; right: -2%; transform: rotate(5deg); color: var(--brand); border-color: rgba(46,125,246,.4); white-space: normal; text-align: left; line-height: 1.6; min-width: 190px; }
@media (max-width: 480px) { .chip-nrd, .chip-out { display: none; } }

/* ---- logo / trust strip ------------------------------------------------ */

.formats-strip { background: var(--ink); color: #cfe0f5; }
.formats-strip .wrap { padding-top: 30px; padding-bottom: 30px; }
.formats-strip p { margin: 0 0 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; color: #7fa8d6; }
.format-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.format-chips .fmt {
    font-family: var(--mono); font-weight: 500; font-size: 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    color: #eaf2ff; padding: 8px 14px; border-radius: 999px;
}
.format-chips .fmt b { color: var(--aqua); font-weight: 700; }

/* ---- terminal showcase (dark) ----------------------------------------- */

.showcase { background: linear-gradient(180deg, var(--ink), #0C1B2B); color: #dbe8f7; }
.showcase .section-head h2 { color: #fff; }
.showcase .section-head p { color: #9db8d6; }
.terminal {
    background: #0A1622; border: 1px solid rgba(255,255,255,.1); border-radius: var(--r);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); overflow: hidden; max-width: 760px;
}
.terminal .bar { display: flex; gap: 7px; padding: 12px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.terminal .bar i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.terminal .bar i:nth-child(1) { background: #ff5f57; } .terminal .bar i:nth-child(2) { background: #febc2e; } .terminal .bar i:nth-child(3) { background: #28c840; }
.terminal pre { margin: 0; padding: 20px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.85; }
.terminal .cmd { color: #eaf2ff; } .terminal .cmd::before { content: "$ "; color: var(--aqua); }
.terminal .flag { color: var(--sun); }
.terminal .out { color: #86e0b5; }
.terminal .dim { color: #6e8bab; }

/* ---- feature cards ----------------------------------------------------- */

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 879px) { .grid.cols-4 { grid-template-columns: 1fr 1fr; } }

.feature {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 24px; box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature .ic {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--aqua), var(--brand)); color: #fff;
    margin-bottom: 16px;
}
.icon { display: block; }
.feature.pro .ic { background: linear-gradient(140deg, var(--sun), var(--coral)); }
.feature h3 { font-size: 20px; margin-bottom: 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 15.5px; }
.feature .badge { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-deep); background: #fff2f0; border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; }

/* ---- alternating soft band -------------------------------------------- */
.band { background: var(--bg-2); }

/* ---- trust ------------------------------------------------------------- */
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item .ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--brand); font-size: 20px; box-shadow: var(--shadow-sm); }
.trust-item h3 { font-size: 18px; margin-bottom: 4px; }
.trust-item p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---- pricing ----------------------------------------------------------- */

.trial-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
    background: linear-gradient(120deg, var(--brand), var(--aqua)); color: #fff;
    border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 30px; box-shadow: var(--shadow);
}
.trial-banner b { font-family: var(--display); font-weight: 600; font-size: 20px; }
.trial-banner p { margin: 0; opacity: .95; }
.trial-banner .btn { margin-left: auto; background: #fff; color: var(--brand-deep); }

/* stretch (the default) keeps every card the same height per row */
.plans { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plans-note { margin-top: 34px; }

.plan {
    position: relative; background: var(--surface); border: 1.5px solid var(--line);
    border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.plan.featured { border: 3px solid var(--brand); background: #F0F6FF; box-shadow: 0 24px 50px -26px rgba(46,125,246,.6); }
.plan .tag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
    background: var(--coral); color: #fff; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 8px 16px -8px rgba(255,106,90,.8);
}
.plan h3 { font-size: 24px; }
.plan .blurb { color: var(--muted); margin: 6px 0 18px; min-height: 44px; }
.plan .price { font-family: var(--display); font-weight: 700; font-size: 42px; line-height: 1; color: var(--ink); }
.plan .price span { font-family: var(--body); font-size: 16px; font-weight: 700; color: var(--muted); }
.plan .alt { color: var(--muted); font-size: 14px; margin: 6px 0 0; font-weight: 700; }
.plan .buys { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.plan ul li { position: relative; padding-left: 28px; font-size: 15px; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--good); font-weight: 900; }
.plan ul li.off { color: var(--muted); } .plan ul li.off::before { content: "—"; color: var(--line); }
.plan .spacer { flex: 1; }

/* ---- FAQ --------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
/* two columns of questions in wide mode, one in narrow */
@media (min-width: 860px) { .faq { grid-template-columns: 1fr 1fr; align-items: start; } }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 20px; box-shadow: var(--shadow-sm); }
.faq summary { font-family: var(--display); font-weight: 500; font-size: 18px; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 700; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--muted); }

/* ---- closing CTA ------------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--ink), var(--brand-deep)); color: #fff; text-align: center; }
.cta-band h2 { font-size: clamp(28px, 5vw, 44px); color: #fff; text-wrap: balance; }
.cta-band p { color: #bcd4f2; font-size: 18px; margin: 14px auto 28px; max-width: 46ch; }

/* ---- footer ------------------------------------------------------------ */
.foot { background: var(--ink); color: #9db8d6; }
.foot .wrap { padding: 44px clamp(16px,4vw,40px); }
.foot-top { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .foot-top { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot .brand { color: #fff; margin-bottom: 10px; }
.foot p { margin: 0; font-size: 14.5px; max-width: 38ch; }
.foot h4 { font-family: var(--display); font-weight: 600; color: #fff; font-size: 15px; margin: 0 0 12px; letter-spacing: .04em; }
.foot a { color: #bcd4f2; text-decoration: none; display: block; padding: 4px 0; font-size: 14.5px; }
.foot a:hover { color: #fff; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 20px; font-size: 12.5px; color: #6e8bab; }

/* ---- waves ------------------------------------------------------------- */
.wave { display: block; width: 100%; height: 40px; }

/* ============================================================================
   Functional pages (manage / success / buy internals) — restyled
   ========================================================================== */

.lede { color: var(--ink-soft); max-width: 58ch; font-size: 18px; margin: 0 0 6px; }
.lede-plain { color: var(--muted); max-width: 56ch; font-size: 17px; }
.note { color: var(--muted); font-size: 14px; margin-top: 18px; }
.note.error { color: var(--bad); font-weight: 700; }
.muted { color: var(--muted); }
code { font-family: var(--mono); background: #e7eefc; color: var(--ink); padding: .1em .35em; border-radius: 5px; font-size: .92em; }

.page h1 { font-size: clamp(28px, 5vw, 40px); margin-bottom: 10px; }
.page h2 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 28px 0 10px; }

.lookup { display: flex; gap: 10px; margin: 22px 0; flex-wrap: wrap; }
.key-input {
    flex: 1; min-width: 240px; padding: 14px 16px; border: 1.5px solid var(--line);
    border-radius: 12px; font-family: var(--mono); font-size: 15px; background: var(--surface);
    letter-spacing: .04em;
}
.key-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(46,125,246,.15); }

.license-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
@media (min-width: 620px) { .license-summary { grid-template-columns: repeat(4, 1fr); } }
.license-summary > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); }
.license-summary .muted { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.license-summary b { font-size: 18px; }
.license-summary b.mono { font-family: ui-monospace, Consolas, monospace; font-size: 14px; word-break: break-all; }

.license-key { background: var(--surface); border: 2px solid var(--brand); border-radius: var(--r); padding: 18px 20px; margin: 22px 0; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.license-key .muted { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.license-key code { background: none; padding: 0; font-size: clamp(18px, 5vw, 24px); font-weight: 700; letter-spacing: .08em; word-break: break-all; color: var(--brand-deep); }

.next-steps { max-width: 62ch; line-height: 2; padding-left: 22px; }
.next-steps code { font-size: 13.5px; }
/* long unbreakable commands/keys must wrap, not widen the page past the
   viewport (which visually deletes the outer margins on phones) */
.page code, .fdoc code { overflow-wrap: anywhere; }

.data-scroll { overflow-x: auto; }

table.ledger { width: 100%; border-collapse: collapse; min-width: 460px; margin-top: 6px; }
table.ledger th, table.ledger td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.ledger th { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
table.ledger tbody tr:last-child td { border-bottom: 0; }

/* support threads */
.thread { display: grid; gap: 14px; margin: 18px 0 8px; }
.msg { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.msg.staff { background: #EAF2FF; border-color: rgba(46,125,246,.35); }
.msg .who { font-family: var(--display); font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.msg .who .muted { font-family: var(--body); font-weight: 700; font-size: 12px; margin-left: 8px; }
.msg p { margin: 0; white-space: pre-wrap; }
.filelist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.filelist li::before { content: "📎 "; }
textarea.key-input { font-family: var(--body); letter-spacing: normal; resize: vertical; }

.auth-page { max-width: 440px; }
.auth-form { display: grid; gap: 16px; margin: 22px 0; }
.auth-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.auth-form .key-input { font-family: var(--body); letter-spacing: normal; }
.auth-form button { justify-self: start; }
.portal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.portal-head h1 { margin: 0; }

.status { display: inline-block; font-weight: 800; }
.status-active { color: var(--good); }
.status-pastdue { color: var(--warn); }
.status-canceled, .status-revoked { color: var(--bad); }

.btn-sm { font: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 9px; border: 1.5px solid var(--brand); color: var(--brand); background: #fff; cursor: pointer; }
.btn-sm:hover { background: var(--brand); color: #fff; }

/* ---- /features — the long-form product page (fdoc = features doc) ------- */
.fdoc { max-width: 880px; margin: 0 auto; padding: clamp(22px,5vw,56px) clamp(16px,4vw,40px) 40px; line-height: 1.65; }
.fdoc h1, .fdoc h2, .fdoc h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; }
.fdoc .doc-head { display: flex; gap: 16px; align-items: center; padding-bottom: 22px; border-bottom: 2px solid var(--line); margin-bottom: 26px; }
.fdoc .fmark { flex: none; width: 60px; height: 60px; }
.fdoc .doc-head h1 { font-size: clamp(30px,6vw,42px); font-weight: 700; }
.fdoc .tagline { margin: 4px 0 0; color: var(--ink-soft); font-size: clamp(15px,2.4vw,18px); font-weight: 700; }
.fdoc .lead { font-size: clamp(16px,2.4vw,18.5px); color: var(--ink-soft); margin: 0 0 8px; }
.fdoc section { margin-top: 38px; }
.fdoc h2 { font-size: clamp(21px,3.4vw,26px); margin-bottom: 10px; }
.fdoc h3 { font-size: 17px; margin-bottom: 6px; }
.fdoc .sub { color: var(--muted); margin: 0 0 14px; font-size: 15px; }
.fdoc .sub a { color: var(--brand-deep); }
.fdoc p { margin: 0 0 12px; }
.fdoc .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 16px; }
.fdoc .pill { font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.fdoc .pill.from { color: var(--muted); }
.fdoc .pill.to { color: var(--brand-deep); border-color: rgba(46,125,246,.45); background: #F5F9FF; }
.fdoc .arrow { color: var(--aqua); font-weight: 800; font-size: 20px; }
.fdoc table.grid9 { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; min-width: 560px; }
.fdoc table.grid9 thead th { background: #E3EEFF; text-align: left; font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding: 11px 14px; }
.fdoc table.grid9 td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.fdoc table.grid9 tbody tr:nth-child(even) { background: #FAFCFF; }
.fdoc table.plan-rows td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 700; }
.fdoc table.grid9 tr.hi { background: #F0F6FF !important; box-shadow: inset 3px 0 0 var(--brand); }
.fdoc .features { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .fdoc .features { grid-template-columns: 1fr 1fr; } }
.fdoc .feat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.fdoc .feat.pro { border-color: rgba(255,106,90,.5); background: #FFFCFB; }
.fdoc .feat ul { margin: 8px 0 0; padding-left: 18px; }
.fdoc .feat li { margin: 5px 0; font-size: 15px; color: var(--ink-soft); }
.fdoc .fbadge { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #C33B2C; background: #FFECE9; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.fdoc .fbadge.next { color: var(--brand-deep); background: #E3EEFF; }
.fdoc .two-up { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .fdoc .two-up { grid-template-columns: 1fr 1fr; } }
.fdoc .fpartner { background: linear-gradient(135deg, var(--ink), var(--brand-deep)); color: #fff; border-radius: 16px; padding: 24px 26px; }
.fdoc .fpartner h2 { color: #fff; }
.fdoc .fpartner p { color: #CFE0F5; }
.fdoc .fpartner strong { color: #fff; }
.fdoc .contact { margin: 14px 0 0 !important; font-size: 17px; font-weight: 800; }
.fdoc .fpartner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- home: the three run modes under the terminal ----------------------- */
.run-modes { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 720px) { .run-modes { grid-template-columns: repeat(3, 1fr); } }
.run-mode { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 18px; }
.run-mode h3 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.run-mode p { color: #B9CCE4; font-size: 14.5px; margin: 0; }

/* first/last name side-by-side in forms */
.name-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .name-row { grid-template-columns: 1fr 1fr; } }
.name-row label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* /formats sample blocks */
.fdoc pre.sample { font-family: var(--mono); font-size: 13px; line-height: 1.7; background: var(--ink); color: #CFE0F5; border-radius: 12px; padding: 14px 18px; overflow-x: auto; margin: 6px 0 10px; }
.fdoc h2 code { font-size: .85em; }
.fdoc h2 .fbadge { vertical-align: middle; margin-left: 8px; }

/* whole plan cards click through to checkout */
.plan.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.plan.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* /formats accordion sections */
.fdoc details.fsec { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px 8px; margin-top: 14px; box-shadow: var(--shadow-sm); }
.fdoc details.fsec summary { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.6vw, 22px); padding: 14px 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fdoc details.fsec summary::-webkit-details-marker { display: none; }
.fdoc details.fsec summary::after { content: "+"; color: var(--brand); font-weight: 700; font-size: 24px; line-height: 1; margin-left: auto; }
.fdoc details.fsec[open] summary::after { content: "–"; }
.fdoc details.fsec > p, .fdoc details.fsec > ul, .fdoc details.fsec > pre, .fdoc details.fsec > .data-scroll { margin-bottom: 14px; }

/* ---- home pricing teaser boxes ------------------------------------------ */
.teaser-plans { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 860px) { .teaser-plans { grid-template-columns: 1fr 1fr 1fr; } }
.price-box {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1.5px solid var(--line);
    border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm);
}
/* the badge floats, so every box's title sits at the same height */
.price-box h3 { font-size: 24px; }
.price-box .pb-blurb { margin: 6px 0 14px; color: var(--muted); }
.price-box .pb-price { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--ink); }
.price-box .pb-price span { font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--muted); }
.price-box .pb-alt { margin: 6px 0 0; font-weight: 700; color: var(--muted); font-size: 14px; }
.price-box .pb-buys { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.price-box .pb-tag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .05em;
    text-transform: uppercase; color: #fff; background: var(--brand);
    border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
/* Pro: bigger, thicker outline, highlighted */
.price-box.pro {
    border: 3px solid var(--brand); background: #F0F6FF;
    box-shadow: 0 24px 50px -26px rgba(46,125,246,.6);
    padding: 34px 28px;
}
@media (min-width: 860px) { .price-box.pro { transform: scale(1.05); z-index: 1; } }

/* /download */
.dl { margin-top: 34px; }
.dl h2 { font-size: clamp(20px, 3vw, 25px); margin-bottom: 8px; }
.dl p { max-width: 62ch; }
.dl .btn.dl-pending { opacity: .55; cursor: default; margin-top: 12px; }
.dl-soon { border-left: 4px solid var(--sun); }
.dl-cmd { font-family: var(--mono); font-size: 13px; line-height: 1.7; background: var(--ink); color: #CFE0F5; border-radius: 12px; padding: 14px 18px; overflow-x: auto; margin: 12px 0 8px; }
.muted-note { color: var(--muted); font-size: 14px; max-width: 62ch; }