/* Account, pricing and checkout-return, in the cream/Pagella language.
 *
 * These three pages outlive the old marketing site. Their MARKUP is untouched
 * on purpose: account.html carries ~16 KB of Clerk and Stripe wiring that keys
 * off its ids and classes (acct-hidden, cb-copy, pending, hiddn, on), and the
 * cheapest way to break a live checkout is to rewrite the DOM around it. So
 * everything here restyles the existing class names rather than replacing them.
 *
 * Loaded AFTER v3-cream's style.css, which supplies the tokens, the reset, the
 * masthead and the footer. This file only has to cover what those pages add.
 *
 * Retire this file when Account and billing are rebuilt natively on the new
 * design; at that point they use style.css alone.
 */

/* ── Bridge ──────────────────────────────────────────────────────────────
 * The old page CSS is written against a different token vocabulary. Mapping
 * the names means every rule that is NOT explicitly restyled below still
 * lands in the cream palette and follows the theme toggle, instead of leaving
 * a stray slate-grey card in the middle of a cream page.
 */
:root {
    --bg-primary:      var(--paper);
    --bg-secondary:    var(--paper-2);
    --bg-card:         var(--card);
    --bg-card-hover:   var(--paper-2);
    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-2);
    --text-muted:      var(--muted);
    --border:          var(--rule);
    --border-light:    var(--rule);
    --accent-hover:    var(--accent-dark);
    --accent-glow:     rgba(37, 99, 235, 0.14);
    --green:           var(--clean-ink);
    /* The new design is flat. Keeping the names alive but zeroing them is what
       removes the old rounded-card look everywhere at once. */
    --radius:          0;
    --radius-sm:       0;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
}

/* ── Page shells ─────────────────────────────────────────────────────────── */
.pricing-content,
.account-content,
.succ-content {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 72px 32px 96px;
}
.succ-content { max-width: 620px; }

.pricing-content h1,
.account-content h1,
.succ-content h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 14px;
}
.pricing-content h1 { text-align: center; }

.pricing-sub,
.account-sub {
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 auto 40px;
    max-width: 640px;
}
.pricing-sub { text-align: center; }
.account-sub { margin-left: 0; }

/* ── Billing-cycle switch ────────────────────────────────────────────────
 * Was a rounded pill group. Now a single hairline row of uppercase serif
 * labels, the selected one inked in — the same switch idiom as the engine
 * tabs on the homepage.
 */
.cycle-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto 14px;
    border: 1px solid var(--rule);
    width: fit-content;
}
.cycle-toggle button {
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 22px 11px;
    cursor: pointer;
    background: transparent;
    color: var(--ink-2);
    border: 0;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
}
.cycle-toggle button + button { border-left: 1px solid var(--rule); }
.cycle-toggle button:hover { color: var(--accent); }
.cycle-toggle button.on { background: var(--ink); color: var(--paper); }
.cycle-note {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.8;
    margin-left: 7px;
}

/* ── Tier cards ──────────────────────────────────────────────────────────
 * Flat plates separated by hairlines, not floating rounded boxes. The
 * featured tier is marked with an ink top rule rather than a glow.
 */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--rule);
    margin-top: 40px;
}
.tier-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 34px 30px 30px;
    position: relative;
}
.tier-card + .tier-card { border-left: 1px solid var(--rule); }
/* Layout B (owner, 2026-10-10): the paid plans share the top row; Free and
 * Institutional sit side by side below them. A 6-column grid lets three
 * paid cards span 2 columns each and the two lower cards span 3. */
@media (min-width: 861px) {
    .tier-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .tier-card.paid { grid-column: span 2; }
    #freeCard, #instCard { grid-column: span 3; border-top: 1px solid var(--rule); }
    #freeCard { border-left: 0; }
}
.tier-card.featured {
    background: var(--card);
    border-color: transparent;
    box-shadow: none;
}
.tier-card.featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ink);
}
.featured-tag {
    position: static;
    transform: none;
    display: inline-block;
    align-self: flex-start;
    background: transparent;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0;
    border-radius: 0;
    margin-bottom: 10px;
}
.tier-name {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 6px;
}
.tier-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 26px;
}
.tier-price { margin-bottom: 6px; }
.amt {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.per {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-left: 4px;
}
.tier-bill-note {
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ink-2);
    min-height: 2.9em;
    margin-bottom: 22px;
}
/* A paid plan's commitment line sits under the price at reading size and
   weight, not as small print (2026-09-30). */
.tier-bill-note.tier-commit {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--ink);
    min-height: 0;
    margin: 8px 0 4px;
}

/* Feature list: hairline-separated rows, no bullets. The old check glyphs
   were the one decorative flourish on the page. */
.tier-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}
.tier-feats li {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    padding: 11px 0;
    border-top: 1px solid var(--rule);
}
.tier-feats li:last-child { border-bottom: 1px solid var(--rule); }

.tier-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 20px 13px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s, color 0.15s, border-color 0.15s;
}
.tier-cta:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translate(-2px, -2px);
}
.tier-cta.secondary { background: transparent; color: var(--ink); }
.tier-cta.secondary:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}
.tier-cta:disabled { opacity: 0.45; cursor: default; }

.pricing-foot {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    text-align: center;
    max-width: 700px;
    margin: 44px auto 0;
}

/* ── Account ─────────────────────────────────────────────────────────────── */
.acct-card {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 30px 32px;
}
.gate-box { max-width: 520px; margin: 40px auto; text-align: center; }

.org-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 30px;
}
.org-head h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.8rem;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
.org-id,
.org-role,
.k-id,
.k-label,
.k-count,
.hint,
.qs-note,
.sp-foot,
.fine {
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--muted);
}

/* Status chips: ink on a tinted ground, matching the catalog's Available /
   Gated chips rather than the old coloured pills. */
.badge {
    display: inline-block;
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 10px 3px;
    border: 1px solid var(--rule-dark);
    border-radius: 0;
    background: transparent;
    color: var(--ink-2);
}
.badge-ok    { color: var(--clean-ink); background: var(--clean-bg); border-color: transparent; }
.badge-warn  { color: var(--gated-ink); background: var(--gated-bg); border-color: transparent; }
.badge-dead  { color: var(--muted); }
.badge-tier  { color: var(--accent); border-color: var(--accent); }

.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    border: 1px solid var(--rule);
    margin: 26px 0;
}
.usage-grid > * { padding: 22px 24px; }
.usage-grid > * + * { border-left: 1px solid var(--rule); }
.u-bar {
    height: 2px;
    background: var(--rule);
    border-radius: 0;
    overflow: hidden;
    margin-top: 12px;
}
.u-bar > * { background: var(--accent); height: 100%; display: block; }

.sample-note,
.sub-note,
.qs-note {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    border-left: 2px solid var(--rule-dark);
    padding: 4px 0 4px 16px;
    margin: 20px 0;
    background: transparent;
    border-radius: 0;
}
.sub-note.pending { border-left-color: var(--gated-ink); }

.keys-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 36px 0 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.keys-head h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 0;
    margin-top: 18px;
}
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-2);
}
.table-wrap td {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-2);
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
}
.table-wrap tr:last-child td { border-bottom: 0; }

.btn-row-action + .btn-row-action { margin-top: 6px; }

.k-rows {
    font-size: 0.85em;
    color: var(--muted);
}

.u-held { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.k-portal {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--muted);
    margin: 10px 2px 0;
}

.empty-state {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--muted);
    text-align: center;
    padding: 40px 20px;
    border: 1px solid var(--rule);
    border-top: 0;
}

.secret-panel {
    border: 1px solid var(--ink);
    border-radius: 0;
    padding: 26px 28px;
    margin: 26px 0;
    background: var(--card);
}
.sp-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 14px;
}
.secret-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Key material and code stay on the dark plate — the one place on these pages
   where that is correct, because it is machine text being copied verbatim, and
   it matches the terminal plates on the marketing pages. */
.code-block {
    background: var(--plate);
    color: var(--plate-ink);
    border: 1px solid var(--rule);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.75;
    padding: 18px 20px;
    overflow-x: auto;
    position: relative;
}
.cb-lang {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--plate-mut);
}
.cb-copy {
    font-family: var(--serif);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    color: var(--plate-mut);
    border: 1px solid var(--plate-mut);
    border-radius: 0;
    padding: 5px 11px 4px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.cb-copy:hover { color: var(--plate-ink); border-color: var(--plate-ink); }

.create-form { margin: 26px 0; }
.cf-grid { display: grid; gap: 14px; }
.create-form input,
.create-form select {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule-dark);
    border-radius: 0;
    padding: 12px 14px;
    width: 100%;
}
.create-form input:focus,
.create-form select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Buttons shared by account + success ─────────────────────────────────── */
.btn-primary,
.btn-ghost,
.btn-row-action {
    font-family: var(--serif);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 12px 20px 11px;
    border: 1px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translate(-2px, -2px);
}
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-primary:disabled,
.btn-ghost:disabled { opacity: 0.45; cursor: default; transform: none; }

.btn-row-action {
    font-size: 11px;
    padding: 7px 13px 6px;
    background: transparent;
    color: var(--ink-2);
    border-color: var(--rule-dark);
}
.btn-row-action:hover { border-color: var(--accent); color: var(--accent); }
.btn-row-action.danger { color: var(--gated-ink); border-color: var(--gated-ink); }
.btn-row-action.danger:hover { background: var(--gated-bg); }

/* ── Errors, spinner, checkout return ────────────────────────────────────── */
.err-banner {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--gated-ink);
    background: var(--gated-bg);
    border: 0;
    border-left: 2px solid var(--gated-ink);
    border-radius: 0;
    padding: 14px 18px;
    margin: 18px 0;
}

/* The brand loader: the mark turning, same motion as the app's Spinner
   (1.8 s ease-in-out turn; it hides the mark's half-turn symmetry). */
.acct-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 56px auto;
    color: var(--ink-2);
    text-align: center;
}
.acct-loading p { margin: 0; font-size: 15px; }
.acct-loading .os-spin {
    display: inline-flex;
    color: var(--ink);
    transform-origin: 50% 50%;
    animation: os-spin 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.acct-loading.stopped .os-spin { display: none; }
@keyframes os-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .acct-loading .os-spin { animation-duration: 6s; animation-timing-function: linear; }
    .btn-primary:hover, .btn-ghost:hover, .tier-cta:hover { transform: none; }
}

.succ-card {
    border: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    padding: 46px 40px;
    text-align: center;
}
/* .succ-icon IS the <svg>, not a wrapper around one. The old stylesheet sized
   it; without a cap here the inline SVG scales to its container and fills the
   whole card. */
svg.succ-icon { width: 54px; height: 54px; display: inline-block; color: var(--clean-ink); margin-bottom: 18px; }
.dots { color: var(--muted); }
.fine { margin-top: 22px; }

.acct-hidden, .hiddn { display: none !important; }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .tier-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
    .tier-card + .tier-card { border-left: 0; border-top: 1px solid var(--rule); }
    .usage-grid { grid-template-columns: minmax(0, 1fr); }
    .usage-grid > * + * { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
    .pricing-content, .account-content, .succ-content { padding: 48px 20px 72px; }
    .acct-card { padding: 24px 20px; }
    .succ-card { padding: 34px 22px; }
    .cycle-toggle { flex-direction: column; width: 100%; }
    .cycle-toggle button + button { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ── Billing v2: commitment box, offers, subscription panel (2026-09-29) ──── */
.tier-renew-note {
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 12px 0 18px;
}
.tier-feats li.tier-where { color: var(--muted); font-style: italic; }

/* ── Pricing page, layout E (owner, 2026-10-14) ──────────────────────────
 * One personal-use line and one commitment line above the cards (they are
 * the same for every card on a term), a trading-day strip on each paid
 * card showing how many points a day its history has, check marks, the
 * recommended plan outlined, and a compare table under the cards. */
.use-note {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    margin: 4px 0 18px;
}
.term-note { max-width: 640px; margin: 0 auto; text-align: center; }
.term-note .term-line {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}
.term-note .term-renew {
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-top: 4px;
}
.day-strip { margin: -12px 0 22px; }
.day-strip .bar {
    display: grid;
    grid-template-columns: repeat(78, 1fr);
    gap: 1px;
    height: 20px;
}
.day-strip .bar i { background: var(--rule); }
.day-strip .bar i.on { background: var(--accent); }
.day-strip .ax {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
}
.day-strip .cap {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--ink-2);
    margin-top: 6px;
}
.pricing-content .tier-feats li:not(.tier-where) { position: relative; padding-left: 26px; }
.pricing-content .tier-feats li:not(.tier-where)::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
.pricing-content .tier-card.paid .tier-price { margin-bottom: 22px; }
.tier-card.recommended {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    box-shadow: 0 18px 40px -18px rgba(37, 99, 235, 0.45);
    z-index: 2;
}
.tier-card.recommended .tier-cta { background: var(--accent); border-color: var(--accent); }
.rec-badge {
    position: absolute;
    top: -1px;
    right: 24px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--accent);
    color: #fff;
}
.compare { max-width: 1100px; margin: 48px auto 10px; }
.compare h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 28px;
    text-align: center;
    margin: 0 0 18px;
}
.compare-scroll { overflow-x: auto; }
.compare-note {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 760px;
    margin: 18px auto 0;
    text-align: center;
}
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    text-align: center;
    font-weight: 400;
}
.compare tr.head th { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.compare tr:not(.head):not(.group) th { text-align: left; color: var(--ink-2); font-family: var(--serif); }
.compare td.yes { color: var(--accent); font-weight: 700; }
.compare tr.group th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding-top: 22px;
}
@media (max-width: 640px) {
    .compare table { font-size: 13px; }
    .compare th, .compare td { padding: 10px 6px; }
    .compare tr.head th { font-size: 16px; }
}

.offer-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    border: 1px solid var(--accent);
    padding: 14px 20px;
    margin: 26px auto 22px;
    max-width: 700px;
}

/* The commitment box: one box, no scrolling on a normal screen, unticked. */
.commit-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 18, 14, 0.46);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 5vh 16px;
}
.commit-box {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule-dark);
    width: min(720px, 100%);
    padding: 30px 34px 26px;
    font-family: var(--serif);
}
.commit-title { font-size: 26px; font-weight: 400; margin: 0 0 14px; }
.commit-items { list-style: none; margin: 0; padding: 0; }
.commit-items li {
    font-size: 15.5px;
    line-height: 1.6;
    padding: 8px 0;
    border-top: 1px solid var(--rule);
}
.commit-items li strong { font-weight: 600; }
.commit-code {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 14px 0 4px;
    font-size: 15px;
}
.commit-code label { display: flex; gap: 10px; align-items: center; }
.commit-code input {
    font: inherit;
    padding: 7px 10px;
    border: 1px solid var(--rule-dark);
    background: transparent;
    color: var(--ink);
    width: 12em;
    text-transform: uppercase;
}
.commit-code-on { color: var(--clean-ink); }
.commit-checks { margin: 18px 0 8px; border-top: 1px solid var(--rule-dark); padding-top: 14px; }
.commit-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
}
.commit-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.commit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.commit-foot { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 14px 0 0; }
.commit-notice {
    font-size: 15px;
    color: var(--gated-ink);
    background: var(--gated-bg);
    border-left: 2px solid var(--gated-ink);
    padding: 10px 14px;
    margin: 0 0 12px;
}
.commit-error { font-size: 15px; color: var(--gated-ink); margin: 10px 0 0; }
.commit-loading { font-size: 15px; color: var(--muted); }

/* Account: the Plan & billing card (ADR-0127; layout approved 2026-11-02 from
   plans/website_samples/account-plan.html) and its two-button confirmations. */
.plan-card { background: var(--card); border: 1px solid var(--rule); padding: 26px 30px 24px; margin: 0 0 30px; }
.pc-eyebrow { display: block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.pc-head h3 { font-family: var(--serif); letter-spacing: -.01em; line-height: 1.15; font-weight: 400; font-size: 32px; margin: 0; color: var(--ink);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.pc-term { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-dark); padding: 4px 9px 3px; position: relative; top: -6px; }
.pc-tag { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.pc-price { text-align: right; white-space: nowrap; }
.pc-price b { display: block; font-weight: 400; font-size: 32px; color: var(--ink); }
.pc-price span { color: var(--muted); font-size: 14px; }
.pc-rows { margin: 0; padding: 6px 0 4px; }
.pc-rows > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.pc-rows dt { color: var(--muted); font-size: 14px; padding-top: 2px; font-family: var(--serif); }
.pc-rows dd { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink); }
.pc-rows dd .btn-row-action { margin-left: 8px; vertical-align: baseline; }
.pc-rows dd a { color: var(--accent); }
.pc-rows dd.pc-save { color: var(--clean-ink); display: flex; flex-direction: column; gap: 8px; }
.pc-offer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-save .btn-row-action { border-color: var(--clean-ink); color: var(--clean-ink); }
.pc-warn { color: var(--gated-ink); }
.pc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pc-actions .pc-quiet { border-color: var(--rule-dark); color: var(--ink-2); margin-left: auto; }
.pc-picker { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 6px; }
.pc-group h4 { font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 14px 0 2px; }
.pc-note { font-family: var(--serif); font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.pc-option { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 16px; }
.pc-opt-price { color: var(--ink-2); white-space: nowrap; }
.pc-opt-note { color: var(--muted); font-size: 14px; white-space: nowrap; }
.pc-note.pc-off { color: var(--gated-ink); font-size: 15px; margin: 14px 0 4px; }
.pc-note.pc-off .btn-row-action { margin-left: 8px; }
.sub-line { font-family: var(--serif); font-size: 16px; line-height: 1.6; margin: 12px 0 0; }
.sub-line.warn { color: var(--gated-ink); }
.sub-msg { font-family: var(--serif); font-size: 15px; color: var(--clean-ink); margin-top: 12px; }
.sub-msg a { color: var(--accent); }
@media (max-width: 760px) {
    .plan-card { padding: 20px 18px; }
    .pc-head { flex-direction: column; }
    .pc-price { text-align: left; }
    .pc-rows > div { grid-template-columns: 1fr; gap: 2px; }
    .pc-actions .pc-quiet { margin-left: 0; }
    .pc-option { grid-template-columns: 1fr auto; }
    .pc-option > :last-child { grid-column: 1 / -1; justify-self: start; }
}
.confirm-text { font-size: 16px; line-height: 1.6; margin: 0 0 8px; }
/* Both answers equally prominent (wording draft D4): same size, same weight. */
.confirm-actions .btn-primary, .confirm-actions .btn-ghost { min-width: 12em; }

@media (max-width: 640px) {
    .commit-box { padding: 22px 18px 18px; }
    .commit-title { font-size: 22px; }
}