/* ============================================================
   Apostillum — Pricing v4
   Premium legal "instrument" register. Built on the product's
   own tokens (base.html) + the app-icon identity: a stamp
   (warm-black rounded square) carrying a single seal of colour.
   The accent is used SCARCELY — that is the point.
   ============================================================ */

:root {
    /* surfaces & ink (from the product) */
    --paper:   #F5F2ED;   /* base paper */
    --paper-2: #EFEBE3;   /* recessed paper (toggles, wells) */
    --paper-hi:#FAF8F3;   /* lifted paper (hover) */
    --ink:     #1A1814;   /* primary ink */
    --ink-card:#15130F;   /* the stamp — warm near-black */
    --mid:     #7A7570;
    --soft:    #908B84;
    --faint:   #B6B0A8;
    --rule:    #D4CFC8;
    --rule-2:  #E3DFD8;   /* hairline, lighter */

    /* the seal colour — the only colour on the page */
    --verify:  #3D5C35;   /* deep forest (text-weight green) */
    --green:   #8BCA7A;   /* the icon's living dot */
    --amber:   #B98A34;   /* "sealing…" / testnet, from the app */

    /* accent is theme-driven (Tweaks). default = the living dot */
    --accent:      var(--green);
    --accent-deep: var(--verify);

    --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --mono:  'DM Mono', ui-monospace, SFMono-Regular, monospace;

    /* type scale — lifted a step for confidence */
    --t-xs:   13px;
    --t-sm:   15px;
    --t-md:   17px;
    --t-lg:   20px;
    --t-xl:   25px;
    --t-2xl:  32px;
    --t-3xl:  42px;
    --t-4xl:  62px;   /* price figures */
    --t-5xl:  clamp(40px, 5.4vw, 76px); /* page headline */

    --t-label:    11px;
    --t-label-sm:  9px;

    --lh-display: 1.08;
    --lh-tight:   1.32;
    --lh-body:    1.62;

    --track-display: -0.02em;
    --track-h2:      -0.015em;
    --track-label:    0.16em;
    --track-label-lg: 0.22em;

    --w-regular: 400;
    --w-medium:  500;
}

* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html { font-feature-settings: "kern" 1, "liga" 1, "onum" 1; scroll-behavior: smooth; }

body {
    font-family: var(--serif);
    font-size: var(--t-md);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* paper grain — restrained */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.14;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

.num-tabular { font-feature-settings: "lnum" 1, "tnum" 1; }

/* ============================================================
   THE STAMP — the brand mark, drawn from the app icon.
   A warm-black rounded square carrying the living dot.
   ============================================================ */
.stamp {
    display: inline-grid;
    place-items: center;
    background: var(--ink-card);
    border-radius: 5px;
    flex-shrink: 0;
}
.stamp::before {
    content: '';
    width: 42%;
    height: 42%;
    border-radius: 50%;
    background: var(--accent);
}
.stamp--sm { width: 22px; height: 22px; border-radius: 5px; }
.stamp--md { width: 30px; height: 30px; border-radius: 7px; }
/* nav logo — enlarged */
.nav-brand .stamp--sm { width: 28px; height: 28px; border-radius: 6px; }
.nav-brand .wordmark { font-size: 26px; }

/* ============================================================
   NAV — masthead register
   ============================================================ */
.site-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-bottom: 1px solid var(--rule);
    position: relative;
    z-index: 2;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}
.nav-brand .wordmark {
    font-family: var(--serif);
    font-size: 23px;
    font-weight: var(--w-medium);
    letter-spacing: 0.01em;
    color: var(--ink);
    line-height: 1;
}
.nav-context {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-deep);
    padding-left: 12px;
    margin-left: 2px;
    border-left: 1px solid var(--rule);
    line-height: 1;
}
.nav-spacer { flex: 1; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 26px;
}
.nav-link {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mid);
    text-decoration: none;
    transition: color .18s;
}
.nav-link:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.btn-ghost {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mid);
    text-decoration: none;
    border: 1px solid var(--rule);
    padding: 10px 16px;
    transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-solid {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    text-decoration: none;
    border: 1px solid var(--ink);
    padding: 10px 18px;
    transition: opacity .2s;
}
.btn-solid:hover { opacity: .82; }
@media (max-width: 920px) {
    .nav-links { display: none; }
}
@media (max-width: 540px) {
    .site-nav { padding: 16px 20px; }
    .btn-ghost { display: none; }
}

/* ============================================================
   MAIN
   ============================================================ */
.page {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 96px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
.page > .price-head   { order: 1; }
.page > .billing      { order: 2; }
.page > .tiers        { order: 3; }
.page > .thesis       { order: 4; }
.page > .guarantees   { order: 5; }
.page > .argument     { order: 6; }
.page > .math         { order: 7; }
.page > .charter-note { order: 8; }
.page > .authorities  { order: 9; }

/* argument-first (Tweak) */
body[data-argpos="above"] .page > .argument { order: 2; margin-top: 0; margin-bottom: 0; }
body[data-argpos="above"] .page > .math     { order: 3; }
body[data-argpos="above"] .page > .billing  { order: 4; margin-top: 48px; }
body[data-argpos="above"] .page > .tiers    { order: 5; }
body[data-argpos="above"] .page > .thesis   { order: 6; }
body[data-argpos="above"] .page > .guarantees { order: 7; }

/* ── THESIS — the disinterested-notary hook, high on the page ── */
.thesis { margin-top: 64px; text-align: center; }
.thesis-eyebrow {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 16px;
}
.thesis-line {
    font-family: var(--serif);
    font-weight: var(--w-regular);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-h2);
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto 18px;
    text-wrap: balance;
}
.thesis-line em { font-style: italic; color: var(--mid); }
.thesis-sub {
    font-family: var(--serif);
    font-size: var(--t-lg);
    line-height: var(--lh-tight);
    color: var(--mid);
    max-width: 700px;
    margin: 0 auto 36px;
    text-wrap: pretty;
}
.thesis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 40px;
    max-width: 940px;
    margin: 0 auto 38px;
    text-align: left;
}
.thesis-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.thesis-item .stamp { width: 18px; height: 18px; border-radius: 4px; margin-top: 4px; }
.thesis-item p {
    font-family: var(--serif);
    font-size: var(--t-sm);
    line-height: var(--lh-tight);
    color: var(--ink);
    margin: 0;
    text-wrap: pretty;
}
.thesis-item strong { font-weight: var(--w-medium); }
.thesis-kicker {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-xl);
    line-height: var(--lh-tight);
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    text-wrap: balance;
}
.thesis-kicker strong { font-style: normal; font-weight: var(--w-medium); }
.thesis-foot {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-xs);
    line-height: var(--lh-body);
    color: var(--soft);
    max-width: 720px;
    margin: 22px auto 0;
    text-wrap: pretty;
}
@media (max-width: 760px) { .thesis-grid { grid-template-columns: 1fr; max-width: 440px; } }

/* ── Sources & authorities (endnotes, lawyer-familiar) ── */
.authorities {
    margin-top: 72px;
    border-top: 1px solid var(--rule);
    padding-top: 40px;
}
.auth-eyebrow {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 12px;
}
.auth-title {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: var(--w-regular);
    color: var(--ink);
    letter-spacing: var(--track-h2);
    margin-bottom: 10px;
}
.auth-note {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-sm);
    line-height: var(--lh-tight);
    color: var(--mid);
    max-width: 740px;
    margin-bottom: 30px;
    text-wrap: pretty;
}
.auth-list {
    list-style: decimal;
    padding-left: 24px;
    max-width: 880px;
    margin: 0;
    columns: 2;
    column-gap: 48px;
}
.auth-list li {
    font-family: var(--serif);
    font-size: var(--t-sm);
    color: var(--ink);
    line-height: var(--lh-body);
    margin-bottom: 16px;
    padding-left: 6px;
    break-inside: avoid;
}
.auth-list li::marker {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    color: var(--soft);
}
.auth-list strong { font-weight: var(--w-medium); }
.auth-list em { font-style: italic; }
.auth-src {
    display: block;
    margin-top: 2px;
}
.auth-src a {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: 0.04em;
    color: var(--accent-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: border-color .18s;
}
.auth-src a:hover { border-color: var(--accent-deep); }
@media (max-width: 720px) { .auth-list { columns: 1; } }

/* ════════ DESIGN EXPERIMENTS — toggled from the Tweaks panel ════════ */

/* 1. Rhythm bands — value zones on a darker cream, bled to the container edge */
body[data-rhythm="on"] .thesis,
body[data-rhythm="on"] .guarantees {
    background: var(--paper-2);
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 40px;
    padding-right: 40px;
}
body[data-rhythm="on"] .thesis {
    padding-top: 58px;
    padding-bottom: 60px;
}
body[data-rhythm="on"] .guarantees {
    border-top-color: var(--rule-2);
    border-bottom-color: var(--rule-2);
}
@media (max-width: 640px) {
    body[data-rhythm="on"] .thesis,
    body[data-rhythm="on"] .guarantees {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 2. Hero ghost wordmark */
body[data-hero="on"] .price-head { position: relative; }
body[data-hero="on"] .price-head::before {
    content: "Apostillum";
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--serif);
    font-weight: var(--w-medium);
    font-size: clamp(110px, 21vw, 340px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(26, 24, 20, 0.08);
    text-shadow: none;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
body[data-hero="on"] .price-head > * { position: relative; z-index: 1; }

/* 3. Asymmetric (left-set) thesis */
body[data-thesisalign="left"] .thesis { text-align: left; }
body[data-thesisalign="left"] .thesis-line,
body[data-thesisalign="left"] .thesis-sub,
body[data-thesisalign="left"] .thesis-kicker,
body[data-thesisalign="left"] .thesis-foot { margin-left: 0; margin-right: 0; }
body[data-thesisalign="left"] .thesis-grid { margin-left: 0; }

/* 4. Roomier comparison */
body[data-compare="roomy"] .compare-col { padding: 40px 34px; }
body[data-compare="roomy"] .compare-row-body { line-height: 1.8; }
body[data-compare="roomy"] .compare-row-label { margin-top: 24px; }

/* ════════ AUTH PAGES (shared) — login, signup, reset, verify, pending ════════ */
.auth-shell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 20px; position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 440px; }
.auth-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-mark .stamp { width: 22px; height: 22px; border-radius: 5px; }
.auth-mark span { font-family: var(--mono); font-size: var(--t-label-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--soft); }
.auth-card h1 { font-family: var(--serif); font-weight: var(--w-regular); font-size: var(--t-2xl); letter-spacing: var(--track-h2); color: var(--ink); margin-bottom: 8px; }
.auth-card .lede { font-family: var(--serif); font-style: italic; font-size: var(--t-lg); color: var(--mid); margin-bottom: 32px; }
.auth-card p.body { font-family: var(--serif); font-size: var(--t-md); line-height: var(--lh-body); color: var(--ink); margin-bottom: 18px; }
.auth-card p.body strong { font-weight: var(--w-medium); }
.fg { margin-bottom: 22px; }
.fg label { display: block; font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mid); margin-bottom: 8px; }
.fg .opt { color: var(--soft); text-transform: none; letter-spacing: 0; }
.fg input { width: 100%; padding: 14px 16px; border: 1px solid var(--rule); font-family: var(--serif); font-size: var(--t-md); color: var(--ink); background: var(--paper); transition: border-color .2s, background .2s; }
.fg input::placeholder { color: var(--soft); }
.fg input:focus { outline: none; border-color: var(--accent-deep); background: var(--paper-hi); }
.field-help, .form-hint { font-family: var(--serif); font-style: italic; font-size: var(--t-xs); color: var(--soft); margin-top: 6px; line-height: var(--lh-tight); }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 14px; top: 14px; background: none; border: none; font-family: var(--mono); font-size: var(--t-label-sm); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--soft); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); }
.strength-bar { height: 3px; background: var(--rule); margin-top: 8px; overflow: hidden; }
.strength-fill { height: 100%; width: 0%; transition: width .3s, background .3s; }
.btn-submit { display: block; width: 100%; padding: 15px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); cursor: pointer; transition: opacity .2s; }
.btn-submit:hover { opacity: .82; }
.auth-foot { text-align: center; margin-top: 18px; font-family: var(--serif); font-size: var(--t-sm); color: var(--mid); }
.auth-foot a { font-style: italic; color: var(--accent-deep); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-divider { width: 40px; height: 1px; background: var(--rule); margin: 28px auto; }
.fcheck { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 26px; }
.logo-cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.logo-box { width: 22px; height: 22px; border-radius: 5px; background: var(--ink-card); display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; margin-top: 1px; }
.logo-box::after { content: ''; width: 42%; height: 42%; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .22s cubic-bezier(.22,1,.36,1); }
.logo-cb:checked + .logo-box::after { transform: scale(1); }
.logo-cb:focus-visible + .logo-box { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.fcheck-text { font-family: var(--serif); font-size: var(--t-sm); color: var(--mid); }
.fcheck a { color: var(--accent-deep); text-decoration: underline; }
.flash { padding: 14px 18px; font-family: var(--serif); font-size: var(--t-sm); margin-bottom: 20px; border-left: 3px solid var(--rule); }
.flash-error { border-left-color: var(--error); color: var(--error); }
.flash-success { border-left-color: var(--accent-deep); color: var(--accent-deep); }
@media (max-width: 640px) { .page { padding: 40px 20px 72px; } }

/* ── HEADER ─────────────────────────────────────────── */
.price-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 40px;
}
.head-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}
.head-ornament .rule { width: 40px; height: 1px; background: var(--rule); }
.head-ornament .label {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label-lg);
    text-transform: uppercase;
    color: var(--soft);
}
.price-head h1 {
    font-family: var(--serif);
    font-weight: var(--w-regular);
    font-size: var(--t-5xl);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    color: var(--ink);
    margin-bottom: 18px;
    text-wrap: balance;
}
.price-head .lede {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-lg);
    line-height: var(--lh-tight);
    color: var(--mid);
    max-width: 660px;
    margin: 0 auto;
    text-wrap: pretty;
}

/* ── BILLING TOGGLE ─────────────────────────────────── */
.billing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 44px;
}
.billing-pills {
    display: inline-flex;
    position: relative;
    border: 1px solid var(--rule);
    background: var(--paper-2);
}
.billing-slide {
    position: absolute;
    top: -1px; bottom: -1px; left: -1px;
    width: calc(50% + 1px);
    border: 1px solid var(--ink);
    background: var(--paper-hi);
    transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 0;
}
.billing-slide.annual { transform: translateX(100%); }
.billing-btn {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    padding: 11px 26px;
    background: transparent;
    border: none;
    color: var(--soft);
    cursor: pointer;
    transition: color .3s;
}
.billing-btn.active { color: var(--ink); }
.save-badge {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-deep);
    opacity: 0;
    transition: opacity .2s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.save-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 1.5px;
    background: var(--accent);
}
.save-badge.visible { opacity: 1; }

/* ============================================================
   TIERS
   ============================================================ */
.tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(10, auto) 1fr auto;
    border: 1px solid var(--rule);
    background: var(--rule);
    gap: 1px;
}
.tier {
    display: grid;
    grid-row: span 12;
    grid-template-rows: subgrid;
    min-width: 0;                 /* keep the four 1fr columns truly equal */
    padding: 44px 30px 34px;
    background: var(--paper);
    position: relative;
    transition: background .25s;
}
.tier:hover { background: var(--paper-hi); }
.tier > *:not(.tier-ink) { position: relative; z-index: 2; }

/* The ink fill — the "Charter" highlight, as a real element so it paints
   reliably. Crossfades + drifts between tiers so it appears to follow the
   cursor with a slow, eased lag. Sits below content (z2), above card bg. */
.tier-ink {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ink-card);
    opacity: 0;
    transform: translateX(var(--from, 16px));
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.22,1,.36,1),
                transform .72s cubic-bezier(.22,1,.36,1);
}
body[data-featured="inverted"] .tier.is-active .tier-ink {
    opacity: 1;
    transform: translateX(0);
}

/* slow colour wash to match the fill */
.tier-name, .tier-headline, .tier-desc,
.price-amount, .price-period, .price-annual, .price-savings,
.tier-section-label, .tier-features li, .tier-foot,
.tier-features li::before, .seal-text {
    transition: color .5s cubic-bezier(.22,1,.36,1),
                background-color .5s cubic-bezier(.22,1,.36,1),
                border-color .5s cubic-bezier(.22,1,.36,1);
}

/* ACTIVE (inked) tier — colours follow whichever tier the fill is on */
.tier.is-active .tier-name { color: var(--accent); }
.tier.is-active .tier-headline { color: #F4EFE6; }
.tier.is-active .tier-desc { color: #ABA499; }
.tier.is-active .price-amount { color: #FBF8F1; }
.tier.is-active .price-period,
.tier.is-active .price-annual { color: #9A938A; }
.tier.is-active .price-savings { color: var(--accent); }
.tier.is-active .tier-section-label { color: #7E776D; }
.tier.is-active .tier-features li { color: #DBD5CA; }
.tier.is-active .tier-divider { background: rgba(255,255,255,0.12); }
.tier.is-active .tier-foot { color: #9A938A; border-color: rgba(255,255,255,0.12); }

/* featured seal — top ribbon with the witness counter */
.tier-seal {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    margin-top: -4px;
}
.tier-seal .seal-text {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
}
.tier-seal-spacer { height: 22px; margin-bottom: 22px; margin-top: -4px; } /* aligns non-featured */

.tier-name {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 10px;
}
.tier-headline {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: var(--w-medium);
    color: var(--ink);
    line-height: var(--lh-tight);
    margin-bottom: 12px;
    text-wrap: balance;
}
.tier-desc {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-sm);
    color: var(--mid);
    line-height: var(--lh-tight);
    margin-bottom: 26px;
    text-wrap: pretty;
}

.tier-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 7px;
    margin-bottom: 4px;
}
.price-amount {
    font-family: var(--serif);
    font-size: clamp(38px, 4.6vw, var(--t-4xl));   /* scales to fit the equal column; caps at original 62px */
    font-weight: var(--w-medium);
    color: var(--ink);
    letter-spacing: var(--track-display);
    line-height: 1;
}
.price-period {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--mid);
}
.price-annual {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-xs);
    color: var(--mid);
    min-height: 20px;
    margin-bottom: 6px;
}
.price-savings {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-deep);
    min-height: 16px;
    margin-bottom: 24px;
    transition: color .2s;
}
.price-savings.nudge { color: var(--mid); }

/* CTA */
.tier-cta {
    display: block;
    width: 100%;
    padding: 14px;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--t-label);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 28px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--mid);
}
.tier-cta:hover { border-color: var(--ink); color: var(--ink); }
/* primary CTA = the active (inked) tier */
.tier.is-active .tier-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink-card);
}
.tier.is-active .tier-cta:hover {
    background: #9BD68B;
    border-color: #9BD68B;
    color: var(--ink-card);
}

.tier-divider {
    width: 100%;
    height: 1px;
    background: var(--rule);
    margin-bottom: 22px;
}
.tier-section-label {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 16px;
}
.tier-features { list-style: none; }
.tier-features li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 11px;
    font-family: var(--serif);
    font-size: var(--t-sm);
    color: var(--ink);
    line-height: var(--lh-tight);
}

/* ── FEATURE MARKER — driven by [data-marker] ─────────── */
/* default: STAMP (a tiny square seal, not a dot) */
.tier-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ink);
    opacity: .82;
}
.tier.is-active .tier-features li::before { background: var(--accent); opacity: 1; }

/* TICK */
body[data-marker="tick"] .tier-features li::before {
    width: 9px; height: 5px;
    border: 0; border-radius: 0;
    border-left: 1.6px solid var(--ink);
    border-bottom: 1.6px solid var(--ink);
    background: transparent;
    transform: rotate(-45deg);
    top: 5px; left: 1px;
    opacity: .75;
}
body[data-marker="tick"] .tier.is-active .tier-features li::before {
    border-color: var(--accent); opacity: 1;
}

/* DOT (the classic — kept for comparison) */
body[data-marker="dot"] .tier-features li::before {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 1;
    top: 7px;
}

.tier-foot {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-xs);
    line-height: var(--lh-tight);
    color: var(--mid);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.tier-foot:empty { display: none; }

/* ── Featured = BORDERED variant (Tweak) ─────────────── */
body[data-featured="bordered"] .tier--featured {
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--accent-deep);
}
body[data-featured="bordered"] .tier--featured:hover { background: var(--paper-hi); }
body[data-featured="bordered"] .tier--featured .tier-headline,
body[data-featured="bordered"] .tier--featured .price-amount { color: var(--ink); }
body[data-featured="bordered"] .tier--featured .tier-desc,
body[data-featured="bordered"] .tier--featured .price-period,
body[data-featured="bordered"] .tier--featured .price-annual,
body[data-featured="bordered"] .tier--featured .tier-foot { color: var(--mid); }
body[data-featured="bordered"] .tier--featured .tier-section-label { color: var(--soft); }
body[data-featured="bordered"] .tier--featured .tier-features li { color: var(--ink); }
body[data-featured="bordered"] .tier--featured .tier-divider,
body[data-featured="bordered"] .tier--featured .tier-foot { background: var(--rule); border-color: var(--rule); }
body[data-featured="bordered"] .tier--featured .tier-foot { background: transparent; }
body[data-featured="bordered"] .tier--featured .tier-cta {
    background: var(--ink); border-color: var(--ink); color: var(--paper);
}
body[data-featured="bordered"] .tier--featured .tier-cta:hover { opacity: .82; }

@media (max-width: 860px) {
    .tiers {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        max-width: 460px;
        margin: 0 auto;
    }
    .tier { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
    .tier--featured { order: -1; }
    .tier-features { flex: 1; }
}

/* ============================================================
   GUARANTEES — "In every tier" (reassurance, right under tiers)
   ============================================================ */
.guarantees {
    margin-top: 64px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 44px 0;
}
.guarantees-head {
    text-align: center;
    margin-bottom: 36px;
}
.guarantees-eyebrow {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 12px;
}
.guarantees-title {
    font-family: var(--serif);
    font-size: var(--t-2xl);
    font-weight: var(--w-regular);
    letter-spacing: var(--track-h2);
    color: var(--ink);
    line-height: var(--lh-tight);
}
.guarantees-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 40px;
    max-width: 1040px;
    margin: 0 auto;
}
.guarantee {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
}
.guarantee .stamp { width: 18px; height: 18px; border-radius: 4px; margin-top: 4px; }
.guarantee p {
    font-family: var(--serif);
    font-size: var(--t-sm);
    line-height: var(--lh-tight);
    color: var(--ink);
    margin: 0;
    text-wrap: pretty;
}
.guarantee p strong { font-weight: var(--w-medium); }
@media (max-width: 760px) { .guarantees-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ARGUMENT — Rule 11 three-column comparison
   ============================================================ */
.argument { margin-top: 80px; }
.argument-head { text-align: center; max-width: 940px; margin: 0 auto 36px; }
.argument-eyebrow {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 14px;
}
.argument-title {
    font-family: var(--serif);
    font-size: var(--t-2xl);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-h2);
    color: var(--ink);
    margin-bottom: 10px;
    text-wrap: balance;
}
.argument-title em { color: var(--mid); }
.argument-sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-md);
    color: var(--mid);
}

.compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, auto);
    border: 1px solid var(--rule);
    background: var(--rule);
    gap: 1px;
}
.compare-col {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    min-width: 0;                 /* equal columns, content wraps to fit */
    padding: 30px 26px;
    background: var(--paper);
}
.compare-col--sealed {
    background: var(--ink-card);
    color: #DBD5CA;
}
.compare-col-tag {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.compare-col--sealed .compare-col-tag { color: var(--accent); }
.compare-col-headline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: var(--w-regular);
    font-size: var(--t-lg);
    line-height: var(--lh-tight);
    color: var(--ink);
    margin-bottom: 22px;
}
.compare-col--sealed .compare-col-headline { color: #F4EFE6; }
.compare-row-label {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 6px;
    margin-top: 18px;
}
.compare-col--sealed .compare-row-label { color: #847D73; }
.compare-row-body {
    font-family: var(--serif);
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    color: var(--ink);
}
.compare-col--sealed .compare-row-body { color: #CFC9BE; }
.compare-row-body em { font-style: italic; color: var(--mid); }
.compare-col--sealed .compare-row-body em { color: var(--accent); font-style: normal; }
.compare-foot {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-xs);
    color: var(--soft);
    line-height: var(--lh-body);
    margin: 18px auto 0;
    text-align: center;
    max-width: 920px;
    text-wrap: pretty;
}
@media (max-width: 900px) {
    .compare { grid-template-columns: 1fr; grid-template-rows: none; max-width: 460px; margin: 0 auto; }
    .compare-col { grid-row: auto; grid-template-rows: none; display: block; }
    .compare-col--sealed { order: -1; }
}

/* ── Forensic-audit band — the cost none of the three columns shows ── */
.audit {
    margin-top: 56px;
    border: 1px solid var(--rule);
    background: var(--ink-card);
    color: #CFC9BE;
    padding: 40px 36px;
}
.audit-eyebrow {
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.audit-title {
    font-family: var(--serif);
    font-size: var(--t-2xl);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-h2);
    color: #F4EFE6;
    margin-bottom: 8px;
    text-wrap: balance;
}
.audit-sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-md);
    line-height: var(--lh-tight);
    color: #ABA499;
    max-width: 720px;
    margin-bottom: 30px;
    text-wrap: pretty;
}
.audit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 26px;
}
.audit-stat { background: var(--ink-card); padding: 24px 22px; }
.audit-n {
    font-family: var(--serif);
    font-size: 30px;
    color: #FBF8F1;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 10px;
}
.audit-n--warn { color: #D8A94B; }
.audit-l {
    font-family: var(--serif);
    font-size: var(--t-sm);
    color: #ABA499;
    line-height: var(--lh-tight);
}
.audit-foot {
    font-family: var(--serif);
    font-size: var(--t-md);
    line-height: var(--lh-body);
    color: #CFC9BE;
    max-width: 800px;
    margin: 0;
    text-wrap: pretty;
}
.audit-foot em { color: var(--accent); font-style: normal; }
@media (max-width: 760px) { .audit-stats { grid-template-columns: 1fr; } }

/* ============================================================
   MATH aside
   ============================================================ */
.math {
    max-width: 760px;
    margin: 56px auto 0;
    padding: 32px 36px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    position: relative;
}
.math::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent-deep);
}
.math-eyebrow {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 14px;
}
.math-body {
    font-family: var(--serif);
    font-size: var(--t-md);
    line-height: var(--lh-body);
    color: var(--ink);
    margin-bottom: 14px;
    text-wrap: pretty;
}
.math-body em { font-style: italic; color: var(--ink); font-weight: var(--w-medium); }
.math-caption {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-sm);
    color: var(--mid);
    line-height: var(--lh-tight);
    margin: 0;
}

/* ============================================================
   CHARTER note
   ============================================================ */
.charter-note {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 28px 36px;
    border: 1px solid var(--rule);
    text-align: left;
}
.charter-note-line {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-xl);
    color: var(--ink);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-h2);
    margin-bottom: 14px;
    text-wrap: balance;
}
.charter-note-body {
    font-family: var(--serif);
    font-size: var(--t-sm);
    color: var(--mid);
    line-height: var(--lh-body);
    margin: 0;
    text-wrap: pretty;
}
.charter-note-body em { font-style: italic; color: var(--ink); }

/* (argument ordering handled via .page order rules above) */

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--rule);
    padding: 26px 40px;
    position: relative;
    z-index: 1;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: var(--t-label-sm);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--soft);
}
.footer-inner a { color: var(--soft); text-decoration: none; transition: color .18s; }
.footer-inner a:hover { color: var(--ink); }
.footer-sep { color: var(--rule); }