/* SigmaClose app styles, on top of brand/tokens.css (Sigma). Square corners, 2px outlines, no shadows. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 20px; }
main { max-width: 1200px; margin: 0 auto; padding: var(--space-6); }
@media (max-width: 640px) { main { padding: var(--space-4); } }
a { color: inherit; }

.topbar { background: var(--band); color: var(--on-band); display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); }
@media (max-width: 640px) { .topbar { padding: var(--space-3) var(--space-4); } }
/* Nameplate on the black band (Sigma rules: type 62% of height, word padding 28%, letter-spacing .04em). */
.plate { --h: 40px; display: inline-flex; align-items: stretch; height: var(--h); font: 800 calc(var(--h) * .62)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.plate img { display: block; width: var(--h); height: var(--h); }
.plate i { font-style: normal; display: flex; align-items: center; padding: 0 calc(var(--h) * .28); }
.plate-brand { background: var(--white); color: var(--black); }
.plate-product { background: var(--signal); color: var(--black); }
.hazard-stripe { height: 10px; background: repeating-linear-gradient(-45deg, var(--signal) 0 14px, var(--black) 14px 28px); }

.heading { font-family: var(--font-display); font-size: 26px; line-height: 28px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin: var(--space-8) 0 var(--space-3); }
.muted { color: var(--ink-muted); }
.loss { color: var(--loss); }
.notice { border: 2px solid var(--line); padding: var(--space-3) var(--space-4); }

.panel { border: 2px solid var(--line); background: var(--surface); padding: var(--space-4); margin-bottom: var(--space-4); }
.warn-panel { padding-top: 0; }
.warn-panel .hazard-stripe { margin: 0 calc(-1 * var(--space-4)) var(--space-3); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 var(--space-4); border: 2px solid var(--line); font: 800 17px/20px var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: var(--surface); color: var(--ink); }
.btn-primary { background: var(--button); color: var(--on-button); border-color: var(--button); }
.btn-signal { background: var(--signal); color: var(--on-signal); border-color: var(--black); }
.btn:focus-visible { outline: 3px solid var(--signal-text); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.actions form { margin: 0; }
/* "Ask your agent" row (templates/_ask.html): a quiet line under whatever might be confusing. */
.ask-agent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.ask-lead { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.ask-lead .ms { font-size: 20px; }
.ask-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn-small { min-height: 36px; padding: 0 var(--space-3); font-size: 14px; line-height: 16px; }
.btn-small .ms { font-size: 18px; margin-right: 6px; }

.companies, .months { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); border: 2px solid var(--line); padding: var(--space-2) var(--space-3); min-height: 46px; }
.badge { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; background: var(--black); color: var(--white); padding: 4px 6px; }
.badge-act { background: var(--signal); color: var(--on-signal); }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-1); vertical-align: middle; }
.dot-0 { background: var(--chip-blue); } .dot-1 { background: var(--chip-red); } .dot-2 { background: var(--chip-green); }
.dot-3 { background: var(--chip-violet); } .dot-4 { background: var(--chip-orange); } .dot-5 { background: var(--chip-teal); }

/* Statement table: band header, consolidated column on yellow, account column pinned on phones. */
.table-frame { overflow-x: auto; border: 2px solid var(--line); }
.statement { border-collapse: collapse; width: 100%; min-width: 720px; }
.statement th, .statement td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.statement thead th { background: var(--band); color: var(--on-band); text-align: right; white-space: nowrap; }
.statement thead th.acct { text-align: left; }
.statement thead th.consolidated { background: var(--signal); color: var(--on-signal); }
.statement .acct { text-align: left; position: sticky; left: 0; background: var(--surface); min-width: 200px; }
.statement thead .acct { background: var(--band); }
@media (max-width: 640px) { .statement .acct { min-width: 140px; max-width: 160px; } }
.statement .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement td.consolidated { background: var(--signal-pale); }
.statement td.zero, .statement td.elim { color: var(--ink-muted); }
.statement tr.subtotal td { background: var(--surface-sunk); font-weight: 700; border-bottom: 2px solid var(--line); }
.statement tr.subtotal td.consolidated { background: var(--signal-pale); }
.statement tr.grand td { background: var(--band); color: var(--on-band); font: 800 22px/26px var(--font-display); letter-spacing: .03em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.statement tr.grand td.consolidated { background: var(--signal); color: var(--on-signal); }
.plain { border-collapse: collapse; width: 100%; }
.plain td { padding: var(--space-2); border-bottom: 1px solid var(--rule); }
.topnav a { color: var(--on-band); text-decoration: none; font: 800 17px/20px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }

.site-footer { max-width: 1200px; margin: var(--space-8) auto 0; padding: var(--space-4) var(--space-6) var(--space-8); border-top: 2px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--ink-muted); }
.site-footer a { color: var(--ink); }
@media (max-width: 640px) { .site-footer { padding: var(--space-4); } }
.legal { max-width: 720px; }
.legal p, .legal li { font-size: 16px; line-height: 24px; }
.legal a { color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--signal); }
.landing { max-width: 820px; padding: var(--space-8) 0; }
.display { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 800; text-transform: uppercase; margin: 0 0 var(--space-6); }
@media (max-width: 640px) { .display { font-size: 34px; line-height: 36px; } }
.lede { font-size: 18px; line-height: 28px; }

/* Statement on a phone (Sigma StatementPhone): below ~480px, one column of figures at a time,
   with 46px tabs for Consolidated and each company. Without the tabs (no JS) the wide table still scrolls. */
.col-tabs { display: none; }
@media (max-width: 480px) {
  .col-tabs { display: flex; overflow-x: auto; gap: 0; border: 2px solid var(--line); border-bottom: 0; }
  .col-tabs button { flex: 0 0 auto; min-height: 46px; padding: 0 var(--space-3); border: 0; border-right: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
  .col-tabs button[aria-selected="true"] { background: var(--signal); color: var(--on-signal); }
  .col-tabs button:focus-visible { outline: 3px solid var(--signal-text); outline-offset: -3px; }
  .phone-cols .statement { min-width: 0; }
  .phone-cols .statement .num { display: none; }
  .phone-cols .statement .num.on { display: table-cell; }
  .phone-cols .statement .acct { min-width: 0; max-width: none; position: static; }
}

/* Reports page: report tabs (active one on yellow), view toggle, month pickers. */
.report-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: end; justify-content: space-between; margin-top: var(--space-6); }
.report-tabs { display: flex; border: 2px solid var(--line); }
.report-tabs a { min-height: 46px; display: flex; align-items: center; padding: 0 var(--space-4); font: 800 17px/20px var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--surface); }
.report-tabs a + a { border-left: 2px solid var(--line); }
.report-tabs a.on { background: var(--signal); color: var(--on-signal); }
.report-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin: 0; }
.seg { display: flex; border: 2px solid var(--line); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { min-height: 42px; display: flex; align-items: center; padding: 0 var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.seg input:checked + span { background: var(--button); color: var(--on-button); }
.seg input:focus-visible + span { outline: 3px solid var(--signal-text); outline-offset: -3px; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field select { min-height: 46px; border: 2px solid var(--line); border-radius: 0; background-color: var(--surface); color: var(--ink); font: 400 16px/20px var(--font-sans); padding-left: var(--space-3); } /* arrow and right padding come from brand/tokens.css */
.report-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); }
.report-title .heading { margin-bottom: 0; }
.report-title p { margin: var(--space-1) 0 0; width: 100%; order: 2; }
.exports { margin-top: 0; }
@media (max-width: 640px) { .report-tabs { width: 100%; } .report-tabs a { flex: 1; justify-content: center; padding: 0 var(--space-2); font-size: 15px; } }
.topnav { display: flex; gap: var(--space-4); align-items: center; }
.topnav a.on { color: var(--signal); box-shadow: inset 0 -3px 0 var(--signal); padding-bottom: 4px; }
.warn-list { margin: 0; padding-left: 18px; } .warn-list li { margin: 2px 0; }

.topnav form { margin: 0; }
.signout button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--on-band); font: 800 17px/20px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.group-pick select { min-height: 36px; border: 2px solid var(--on-band); background-color: var(--band); padding-left: 8px; color: var(--on-band); font: 600 12px/16px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; }

/* Icons: Material Symbols Sharp, 600, 24px, beside a label. */
.ms { font-family: 'Material Symbols Sharp'; font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; display: inline-block; width: 22px; height: 22px; overflow: hidden; }
.btn .ms { margin-right: 8px; }
.btn { gap: 0; }

/* Empty state (Sigma EmptyState). */
.empty-state { border: 2px solid var(--line); background: var(--surface); display: grid; grid-template-columns: auto 1fr; max-width: 640px; }
.empty-state .sq { background: var(--signal); color: var(--black); width: 72px; display: grid; place-items: center; }
.empty-state .sq .ms { font-size: 32px; width: 32px; height: 32px; }
.empty-state .bd { padding: var(--space-4) 18px; }
.empty-state .heading { margin: 0 0 6px; }
.empty-state p { margin: 0 0 14px; color: var(--ink-muted); max-width: 52ch; }

/* Headline tiles (Sigma StatTile): first on band with a yellow figure, one on signal, the rest plain. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 2px solid var(--line); background: var(--surface); }
.tile { padding: var(--space-4) 18px; box-shadow: 2px 0 0 var(--line), 0 2px 0 var(--line); }
.tile-band { background: var(--band); color: var(--on-band); }
.tile-signal { background: var(--signal); color: var(--on-signal); }
.tile-label { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.tile-figure { font: 800 44px/48px var(--font-display); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.tile-band .tile-figure { color: var(--signal); }
.tile-change { font: 600 14px/20px var(--font-sans); }
.tile-change.gain { color: var(--gain); } .tile-change.loss { color: var(--loss); }
.tile-band .tile-change.gain { color: var(--gain-on-band); }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr 1fr; } .tile-band { grid-column: 1 / -1; } .tile-figure { font-size: 34px; line-height: 38px; } }

/* Company rows: name takes the space, badges never break mid-word. */
.chip-name { flex: 1 1 auto; }
.badge { white-space: nowrap; }
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  .plate { --h: 32px; }
  .topnav { gap: var(--space-3); }
  .topnav a, .signout button { font-size: 15px; }
  .companies { flex-direction: column; }
  .chip { width: 100%; flex-wrap: wrap; }
}
.tile-band .tile-change.loss { color: #FF6B52; } /* Sigma's dark-mode loss value: readable on band */
@media (max-width: 480px) {
  .tile-signal { grid-column: 1 / -1; }
  .plain, .plain tbody, .plain tr, .plain td { display: block; width: 100%; }
  .plain tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .plain td { border: 0; padding: 2px 0; }
}

/* Contact form (messages go to the support inbox) */
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0; }
.contact-form input[type=email], .contact-form textarea { border: 2px solid var(--line); border-radius: 0; background-color: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); padding: var(--space-2) var(--space-3); width: 100%; box-sizing: border-box; }
.contact-form input[type=email] { min-height: 46px; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--signal-text); outline-offset: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Sign-up: name your group */
.welcome { max-width: 640px; }
.lede-welcome { font-size: 16px; line-height: 24px; }
.welcome-form .field input[type=text] { max-width: none; }
.welcome-steps { padding-left: 22px; max-width: 60ch; }
.welcome-steps li { margin: var(--space-2) 0; line-height: 24px; }
/* Report pack */
.pack-period { margin-bottom: var(--space-4); max-width: 280px; }
.lede-pack { max-width: 68ch; font-size: 16px; line-height: 24px; }
.pack-form { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: var(--space-4); align-items: start; }
.pack-form .pack-notes, .pack-form .actions { grid-column: 1 / -1; }
.pack-form textarea { border: 2px solid var(--line); border-radius: 0; background-color: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); padding: var(--space-2) var(--space-3); width: 100%; box-sizing: border-box; resize: vertical; }
.pack-form textarea:focus-visible { outline: 3px solid var(--signal-text); outline-offset: 2px; }
.pack-checks { border: 0; padding: 0; margin: 0; }
.pack-checks label { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.pack-checks input { width: 18px; height: 18px; accent-color: var(--black); }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-bottom: var(--space-3); }
.brand-logo { max-height: 64px; max-width: 260px; background: #fff; border: 2px solid var(--line); padding: var(--space-2); }
.brand-color { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 14px/20px var(--font-mono); }
.swatch { width: 32px; height: 32px; border: 2px solid var(--line); display: inline-block; }
.brand-remove { margin-top: var(--space-3); }
@media (max-width: 640px) { .pack-form { grid-template-columns: 1fr; } }
/* Fields, code blocks, destructive buttons (Sigma Field / Button). */
.field input[type=text], .field input[type=email] { min-height: 46px; border: 2px solid var(--line); border-radius: 0; background-color: var(--surface); color: var(--ink); font: 400 16px/20px var(--font-sans); padding: 0 var(--space-3); width: 100%; max-width: 420px; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--signal-text); outline-offset: 2px; }
.field .help { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.key-form, .invite-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.key-form .field, .invite-form .field { flex: 1 1 240px; }
.key-form .btn, .invite-form .btn { margin-bottom: 22px; }
.btn-destructive { color: var(--loss); border-color: var(--loss); background: var(--surface); }
.code-block { font: 500 13px/20px var(--font-mono); background: var(--surface-sunk); border: 2px solid var(--line); padding: var(--space-3); white-space: pre-wrap; word-break: break-all; margin: var(--space-2) 0 var(--space-3); }
.plain td form { margin: 0; }
.team select { min-height: 40px; border: 2px solid var(--line); border-radius: 0; background-color: var(--surface); color: var(--ink); font: 400 15px/20px var(--font-sans); padding-left: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .topnav { flex-wrap: wrap; gap: var(--space-2) var(--space-3); } }
.consent { max-width: 640px; }
.consent-dest { font-size: 18px; line-height: 26px; }
.consent-list { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); }
.consent-list li { display: flex; gap: var(--space-2); align-items: center; padding: 4px 0; }
.consent .label { margin: var(--space-4) 0 0; }

/* Eliminations: account pairs */
.lede-small { max-width: 68ch; font-size: 16px; line-height: 24px; }
.pair-card { max-width: 820px; }
.pair-head { margin-bottom: var(--space-3); }
.pair-sides { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pair-side { display: flex; flex-direction: column; border: 2px solid var(--line); padding: var(--space-2) var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.pair-side .muted { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.pair-link { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pair-why { margin: var(--space-3) 0; padding-left: 20px; color: var(--ink-muted); max-width: 68ch; }
.pair-why li { margin: 2px 0; }
.pair-card form { margin: 0; }
.pairs td { vertical-align: top; }
.pairs .pair-sides { margin-bottom: var(--space-2); }
.pair-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.pair-form .field { flex: 1 1 280px; min-width: 0; }
.pair-form select { width: 100%; }
@media (max-width: 640px) { .pair-sides { flex-direction: column; align-items: stretch; } .pair-link { text-align: center; } }

/* ---------- Marketing pages (templates/marketing/) ---------- */
/* Header: sticky, nameplate left, one key button and the hamburger right at every width. */
.mk-top { position: sticky; top: 0; z-index: 30; }
.mk-actions { display: flex; align-items: center; gap: var(--space-3); }
.btn-sm { min-height: 40px; font-size: 15px; padding: 0 var(--space-3); }
.mk-top .btn-signal { border-color: var(--signal); }
.btn-ghost { background: transparent; color: var(--on-band); border-color: var(--on-band); }
@media (max-width: 420px) { .mk-key { display: none; } }

.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-btn { position: relative; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--on-band); color: var(--on-band); cursor: pointer; }
.menu-btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.menu-btn .ms { font-size: 26px; width: 26px; height: 26px; }
.menu .ms-close, .menu[open] .ms-open { display: none; }
.menu[open] .ms-close { display: inline-block; }
.menu[open] .menu-btn { background: var(--signal); color: var(--black); border-color: var(--signal); }
/* The dimmed page behind the open menu. */
.menu[open]::before { content: ""; position: fixed; inset: 0; background: rgba(11, 11, 12, .55); z-index: 1; }
.menu-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; width: min(380px, 100vw); overflow-y: auto; background: var(--black); color: var(--white); border-left: 2px solid var(--signal); padding: 84px var(--space-6) var(--space-8); }
@media (max-width: 480px) { .menu-panel { padding: 72px var(--space-4) var(--space-8); border-left: 0; } }
.menu-account { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.menu-account .btn { width: 100%; }
.menu-group { margin: var(--space-6) 0 var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links a { display: flex; align-items: center; min-height: 46px; color: var(--white); text-decoration: none; font: 800 20px/24px var(--font-display); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #2A2A2E; }
.menu-links a:hover, .menu-links a[aria-current="page"] { color: var(--signal); }
.menu-links a:focus-visible, .menu-legal a:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.menu-legal { list-style: none; display: flex; gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; }
.menu-legal a { color: #B0B0B6; display: inline-flex; min-height: 46px; align-items: center; }
body.mk:has(.menu[open]) { overflow: hidden; }

/* Page furniture */
body.mk main { padding-top: 0; }
.eyebrow { display: inline-block; margin: 0 0 var(--space-4); background: var(--black); color: var(--signal); font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; }
.eyebrow a { color: inherit; text-decoration: none; }
.mk-updated { margin: calc(-1 * var(--space-3)) 0 var(--space-4); font: 500 13px/18px var(--font-mono); color: var(--ink-muted); }
.mk-section { margin-top: var(--space-12); }
.mk-section > .heading:first-child { margin-top: 0; }
.mk-section p:where(:not([class])), .mk-article p:where(:not([class])), .mk-article li:where(:not([class])) { font-size: 16px; line-height: 26px; }
.mk-article { max-width: 860px; }
.mk-article a, .mk-section p a { text-decoration-thickness: 2px; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.mk-head { padding: var(--space-12) 0 0; }
.mk-head .lede { max-width: 68ch; }
.lede-small { font-size: 17px; line-height: 27px; max-width: 68ch; margin: 0; }
.more { display: inline-flex; align-items: center; gap: 6px; font: 800 17px/20px var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--signal); padding-bottom: 2px; }
.more .ms { font-size: 20px; width: 20px; height: 20px; }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 760px) { .mk-two { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Hero: copy left, example statement right; stacked on narrow screens. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-12) 0 var(--space-6); }
.hero .display { font-size: 60px; line-height: 58px; }
.hero .lede { margin: 0; }
@media (max-width: 1140px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-demo { max-width: 720px; } }
@media (max-width: 640px) { .hero { padding-top: var(--space-8); } .hero .display { font-size: 40px; line-height: 40px; } }
.proof { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.proof li { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.proof .ms { color: var(--ink); background: var(--signal); width: 26px; height: 26px; font-size: 18px; display: grid; place-items: center; }

/* Example statement: a real statement table, sized for a figure. */
.demo { margin: 0; }
.demo .statement { min-width: 560px; }
.demo-table th, .demo-table td { font-size: 14px; }
.demo figcaption { margin-top: var(--space-2); font-size: 13px; line-height: 18px; }
.mk-step .demo, .mk-section .demo { margin: var(--space-4) 0; }
.mk-section .table-frame { margin: var(--space-4) 0; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--line); }
.steps li { padding: var(--space-6); }
.steps li + li { border-left: 2px solid var(--line); }
.steps h3, .features h3, .guide-steps h3 { font: 700 18px/24px var(--font-sans); margin: var(--space-3) 0 var(--space-2); }
.steps p, .features p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.step-n { display: inline-grid; place-items: center; width: 46px; height: 46px; background: var(--signal); color: var(--black); font: 800 28px/1 var(--font-display); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps li + li { border-left: 0; border-top: 2px solid var(--line); } }

/* Feature grid: Sigma EmptyState-style tiles, yellow square for the icon. */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.features li { display: grid; grid-template-columns: 56px 1fr; border: 2px solid var(--line); background: var(--surface); }
.features .sq { background: var(--signal); color: var(--black); display: grid; place-items: start center; padding-top: var(--space-4); }
.features li > div { padding: var(--space-4); }
.features h3 { margin-top: 0; }

/* Trust: black band with a yellow headline, next to a plain panel. */
.trust { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3); }
.trust-band { background: var(--black); color: var(--white); padding: var(--space-6); border: 2px solid var(--black); }
.trust-band .heading { color: var(--signal); margin-top: 0; }
.trust-cent { border: 2px solid var(--line); padding: var(--space-6); background: var(--signal-pale); }
.trust-cent .heading { margin-top: 0; }
.trust p { margin: 0; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; } }

/* Coming-soon app tiles */
.apps { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; border: 2px solid var(--line); padding: var(--space-6); }
.apps .heading { margin-top: 0; }
.app-tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.app-tile { display: flex; align-items: center; gap: var(--space-3); min-width: 190px; min-height: 64px; padding: var(--space-3) var(--space-4); background: var(--black); color: var(--white); border: 2px solid var(--black); }
.app-tile > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.app-tile b { font: 800 22px/24px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.app-tile .badge { background: var(--signal); color: var(--black); }
.os-mark { width: 30px; height: 30px; flex: none; }
@media (max-width: 760px) { .apps { grid-template-columns: 1fr; padding: var(--space-4); } .app-tile { flex: 1 1 160px; } }

.price-panel { max-width: 760px; padding: var(--space-6); }
.price-panel .heading { margin-top: 0; }

/* FAQ accordion: <details>, no script. */
.faq-list { border-top: 2px solid var(--line); }
.faq-item { border-bottom: 2px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 800 28px/1 var(--font-display); flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--surface-sunk); }
.faq-item[open] summary::after { content: "–"; background: var(--signal); color: var(--black); }
.faq-item summary:focus-visible { outline: 3px solid var(--signal-text); outline-offset: 2px; }
.faq-item h3 { margin: 0; font: 600 17px/24px var(--font-sans); }
.faq-item p { margin: 0 0 var(--space-4); max-width: 72ch; font-size: 16px; line-height: 26px; }
.faq-item a { text-decoration-thickness: 2px; text-decoration-color: var(--signal); }

.cta-band { border: 2px solid var(--line); padding: var(--space-6); background: var(--signal); color: var(--black); }
.cta-band .heading { margin-top: 0; }
.cta-band p { max-width: 64ch; }
.cta-band .btn-signal { background: var(--black); color: var(--signal); border-color: var(--black); }
.cta-band .btn:not(.btn-signal) { background: var(--white); color: var(--black); border-color: var(--black); }
.cta-band a:not(.btn) { color: var(--black); text-decoration-color: var(--black); }

/* How it works: numbered steps down the page. */
.mk-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-12); }
.mk-step .heading { margin-top: 6px; }
@media (max-width: 480px) { .mk-step { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Pricing */
.price-card { border: 2px solid var(--line); max-width: 560px; margin-top: var(--space-8); }
.price-card-head { background: var(--black); color: var(--white); padding: var(--space-6); }
.price-card-head p { margin: 0; }
.price-figure { font: 800 44px/48px var(--font-display); text-transform: uppercase; color: var(--signal); margin: 6px 0 4px !important; }
.price-list { list-style: none; margin: 0; padding: var(--space-4) var(--space-6) 0; }
.price-list li { display: flex; gap: var(--space-2); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.price-list .ms { color: var(--gain); }
.price-card .actions { padding: 0 var(--space-6) var(--space-6); }

/* Guides */
.guide-steps { padding-left: 22px; }
.guide-steps li { margin-bottom: var(--space-4); }
.guide-steps li::marker { font: 800 20px var(--font-display); }
.guide-steps h3 { margin-top: 0; }
.guide-steps p { margin: 0; }
.pair-list { padding-left: 20px; }
.pair-list li { margin-bottom: var(--space-3); }
.guide-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.guide-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-4); border: 2px solid var(--line); padding: var(--space-4) var(--space-6); text-decoration: none; color: var(--ink); }
.guide-list a:hover { background: var(--signal-pale); }
.guide-list a:focus-visible { outline: 3px solid var(--signal-text); outline-offset: 2px; }
.guide-list h2 { margin: 0; font: 800 24px/28px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.guide-list p { grid-column: 1; margin: var(--space-1) 0 0; color: var(--ink-muted); }
.guide-list .ms { grid-row: 1 / span 2; grid-column: 2; }

/* Footer */
.mk-footer { margin-top: var(--space-12); background: var(--black); color: var(--white); border-top: 10px solid var(--signal); }
.mk-footer-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-6); display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--space-6); }
.mk-footer ul { list-style: none; margin: 0; padding: 0; }
.mk-footer li a { display: inline-flex; min-height: 32px; align-items: center; color: var(--white); text-decoration: none; }
.mk-footer li a:hover { color: var(--signal); }
.mk-footer a:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.mk-footer .muted { color: #B0B0B6; }
.mk-footer-name { font: 800 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--signal); margin: 0 0 var(--space-3); }
.mk-footer-head { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--signal); margin: 0 0 var(--space-2); }
.mk-footer-apps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.mk-footer-apps > span:not(.badge) { display: inline-flex; align-items: center; gap: 6px; }
.mk-footer-apps .os-mark { width: 18px; height: 18px; }
.mk-footer-apps .badge { background: var(--signal); color: var(--black); }
.mk-footer-legal { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); font-size: 13px; }
@media (max-width: 900px) { .mk-footer-inner { grid-template-columns: 1fr 1fr; } .mk-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .mk-footer-inner, .mk-footer-legal { padding-left: var(--space-4); padding-right: var(--space-4); } }
@media (max-width: 480px) { .demo .phone-cols .statement { min-width: 0; } }
.hero-copy, .hero-demo { min-width: 0; }

/* Contact page: "Support by AcornReply" (Self-Hosted Support Modal playbook, cross-brand mark in AcornReply's indigo). */
.powered-by a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; color: var(--ink-muted); text-decoration: none; font-size: 13px; }
.powered-by b { color: #4F46E5; font-weight: 800; }
[data-theme="dark"] .powered-by b { color: #A5B4FC; }