/* ===================================================================
   Toutmark — Base styles + reusable components
   Builds on tokens.css. Marketing site + customer dashboard share most.
   =================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: var(--ff-sans); background: var(--c-bg); color: var(--c-text); line-height: var(--lh-base); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { max-width: 100%; display: block; }
a { color: var(--c-cyan-soft); text-decoration: none; transition: opacity var(--motion-fast) var(--ease-out); }
a:hover { opacity: 0.8; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
/* TWO TYPEFACES ON ONE LIST, AND NEITHER WAS DECLARED (Owner, 2026-09-16: "there
   are 2 different fonts if you look closely").
   The UA stylesheet gives b/strong `font-weight: bolder`, which is RELATIVE, not
   a value. Inside ordinary body text (400) it lands on 700 and looks right. But
   inside a parent already at 600 -- .tier ul li.bold on the plan cards, .v-cell
   in the comparison table -- `bolder` resolves to 900, and --ff-sans has no real
   900 face. The browser then falls back to another installed family to find one,
   so the same bulleted list rendered half in Segoe UI and half in something with
   serifs on it, with nothing in any stylesheet to explain why.
   Pinned to a weight every face in the stack actually ships. Emphasis is kept --
   this only stops it climbing to a weight that does not exist. */
b, strong { font-weight: 700; }

/* === Layout containers === */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--sp-6); }
.container-narrow { max-width: var(--container-narrow-w); margin: 0 auto; padding: 0 var(--sp-6); }

/* === Marketing-site header (sticky, blurred) === */
header.tm-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.tm-header .header-row {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tm-header .logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-extrabold); font-size: var(--fs-xl); color: var(--c-ink);
}
.tm-header .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-cyan); }
.tm-header .nav { display: flex; gap: 1.75rem; align-items: center; }
.tm-header .nav a { color: var(--c-ink); font-weight: var(--fw-medium); font-size: var(--fs-base); }
.tm-header .nav a.nav-cta {
  background: var(--c-ink); color: #fff !important;
  padding: 0.5rem 1.1rem; border-radius: var(--r-sm);
  font-weight: var(--fw-semibold); font-size: 0.92rem;
}
.tm-header .nav a.nav-cta:hover { background: var(--c-ink-soft); color: #fff !important; opacity: 1; }
.tm-header .nav a.nav-secondary {
  border: 1px solid var(--c-border); padding: 0.45rem 0.9rem; border-radius: var(--r-sm);
  font-size: 0.92rem;
}
.tm-header .nav a.nav-secondary:hover { border-color: var(--c-cyan); color: var(--c-cyan-soft); }
.tm-header .nav .nav-dd { position: relative; }
.tm-header .nav .nav-dd-trigger { cursor: pointer; user-select: none; }
.tm-header .nav .nav-dd-menu {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 0.5rem; display: none; flex-direction: column; gap: 0.1rem;
  margin-top: 0.5rem; z-index: 100;
}
.tm-header .nav .nav-dd:hover .nav-dd-menu,
.tm-header .nav .nav-dd:focus-within .nav-dd-menu { display: flex; }
.tm-header .nav .nav-dd-menu a {
  padding: 0.55rem 0.85rem; border-radius: var(--r-sm);
  font-size: 0.92rem; white-space: nowrap; color: var(--c-ink);
}
.tm-header .nav .nav-dd-menu a:hover { background: var(--c-bg-soft); color: var(--c-cyan-soft); }
@media (max-width: 720px) { .tm-header .nav { display: none; } }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.7rem 1.25rem; border-radius: var(--r-md);
  font-weight: var(--fw-semibold); font-size: var(--fs-base);
  transition: all var(--motion-fast) var(--ease-out);
  cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--c-ink); color: #fff; }
.btn-primary:hover { background: var(--c-ink-soft); color: #fff; opacity: 1; }
.btn-secondary { background: transparent; color: var(--c-ink); border: 1px solid var(--c-border); }
.btn-secondary:hover { border-color: var(--c-cyan); color: var(--c-cyan-soft); }
.btn-gradient {
  background: var(--grad-brand); color: var(--c-ink); font-weight: var(--fw-bold);
}
.btn-gradient:hover { opacity: 0.92; }
.btn-ghost { background: transparent; color: var(--c-text-mute); }
.btn-ghost:hover { color: var(--c-ink); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { opacity: 0.92; color: #fff; }
.btn-lg { padding: 0.95rem 1.75rem; font-size: var(--fs-md); }
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Form fields === */
.fg { display: flex; flex-direction: column; margin-bottom: var(--sp-5); }
.fg label { font-weight: var(--fw-semibold); font-size: var(--fs-base); margin-bottom: 0.45rem; color: var(--c-text-soft); }
.fg .label-aux { color: var(--c-text-mute); font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.fg input, .fg select, .fg textarea {
  padding: 0.8rem; border: 1px solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none; border-color: var(--c-cyan); box-shadow: var(--sh-focus);
}
.fg .help { font-size: var(--fs-sm); color: var(--c-text-mute); margin-top: 0.35rem; }
.fg .err { font-size: var(--fs-sm); color: var(--c-danger); margin-top: 0.35rem; }

/* Chip group: one pill per choice. The <label> is the whole chip; the <input>
   is hidden. There used to be a second rule set further down that also drew a
   box on the <span>, so every chip was a box inside a box and a picked one
   was ink inside a gradient (Owner, 2026-09-28: "the tone of voice cards look
   weird"). One set, here. */
.chip-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.chip label {
  display: inline-flex; align-items: center; padding: 0.5rem 1rem; border: 1px solid var(--c-border);
  border-radius: var(--r-pill); cursor: pointer; line-height: 1.2;
  font-size: 0.9rem; font-weight: var(--fw-medium); color: var(--c-text-soft); background: var(--c-bg);
  transition: all var(--motion-fast) var(--ease-out);
}
.chip label:hover { border-color: var(--c-cyan); color: var(--c-ink); }
.chip input:focus-visible + label { box-shadow: var(--sh-focus); }
.chip input:checked + label { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* === Cards === */
.card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); padding: var(--sp-6);
  transition: box-shadow var(--motion-base), transform var(--motion-base);
}
.card:hover { box-shadow: var(--sh-lg); }
.card-hi { background: var(--c-card-hi); }
.card-elev { box-shadow: var(--sh-md); }
.card-flat { border: none; box-shadow: none; }

/* === Badges === */
.badge {
  display: inline-block; padding: 0.18rem 0.55rem;
  border-radius: var(--r-pill); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-cyan { background: var(--c-cyan); color: var(--c-ink); }
.badge-violet { background: var(--c-violet); color: #fff; }
.badge-ink { background: var(--c-ink); color: #fff; }
.badge-soft { background: var(--c-bg-soft); color: var(--c-text-soft); border: 1px solid var(--c-border); }
.badge-ok { background: rgba(16, 185, 129, 0.15); color: #047857; }
.badge-warn { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.badge-danger { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

/* === Section eyebrows / titles === */
.eyebrow {
  display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-cyan-soft);
}
.eyebrow-c { display: block; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-cyan-soft); margin-bottom: 0.5rem; }
.section-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em; line-height: var(--lh-tight);
}
.section-title-c { text-align: center; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.section-sub {
  text-align: center; color: var(--c-text-mute); max-width: 38rem;
  margin: 0 auto var(--sp-12); font-size: 1.05rem;
}
.gradient-text {
  background: var(--grad-brand); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* === Hero === */
.hero {
  padding: var(--sp-16) 0 var(--sp-20);
  background: var(--grad-hero-bg);
}
.hero-eyebrow {
  display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-cyan-soft); margin-bottom: var(--sp-5);
}
.hero h1 {
  font-size: var(--fs-5xl); line-height: 1.05; font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em; margin-bottom: var(--sp-4); max-width: 22ch;
}
.hero-sub { font-size: 1.18rem; color: var(--c-text-mute); max-width: 42rem; margin-bottom: var(--sp-8); }

/* === Footer === */
footer.tm-footer { background: var(--c-ink); color: #cbd5e1; padding: var(--sp-16) 0 var(--sp-8); }
.tm-footer .fg2 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: var(--sp-12); }
.tm-footer .fb h4 { color: #fff; font-size: var(--fs-xl); font-weight: var(--fw-extrabold); margin-bottom: 0.5rem; }
.tm-footer .fb p { font-size: 0.9rem; line-height: 1.65; max-width: 22rem; }
.tm-footer .fc h5 { color: #fff; font-weight: var(--fw-bold); font-size: 0.95rem; margin-bottom: 1rem; }
.tm-footer .fc a { color: #cbd5e1; display: block; padding: 0.25rem 0; font-size: 0.92rem; }
.tm-footer .fc a:hover { color: var(--c-cyan); opacity: 1; }
.tm-footer .fbtm {
  border-top: 1px solid #1e293b; padding-top: var(--sp-6);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; font-size: 0.85rem; color: #94a3b8;
}
.tm-footer .fbtm a { color: #94a3b8; }
@media (max-width: 900px) {
  .tm-footer .fg2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tm-footer .fg2 { grid-template-columns: 1fr; gap: 2rem; }
  .tm-footer .fbtm { flex-direction: column; align-items: flex-start; }
}

/* === Utilities === */
.u-text-center { text-align: center; }
.u-text-mute { color: var(--c-text-mute); }
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-6 { gap: var(--sp-6); }
.u-row { display: flex; align-items: center; gap: var(--sp-3); }
.u-grid { display: grid; }
.u-hidden { display: none !important; }

/* === Spinner === */
.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--c-border); border-top-color: var(--c-cyan);
  border-radius: 50%; animation: tm-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* === Print rules for legal pages === */
@media print {
  header.tm-header, footer.tm-footer, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* =========================================================================
   DESIGN POLISH — added 2026-05-08
   Lifts marketing + auth + signup pages to match the dashboard polish.
   ========================================================================= */

/* Hero gradient text accent */
.hero-grad,
.brand-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Soft gradient backdrop on hero sections */
.hero-bg {
  background:
    radial-gradient(circle at 15% 20%, rgba(34,211,238,0.10), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(167,139,250,0.10), transparent 45%),
    var(--c-bg);
}

/* Card hover — universal lift */
.card {
  transition: box-shadow var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base);
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,238,0.25);
}

/* Plan cards on /pricing — give the recommended one a glow ring */
.plan-card.recommended,
.plan-opt input:checked + .plan-card {
  position: relative;
}
.plan-card.recommended::before,
.plan-opt input:checked + .plan-card::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.plan-card .rec-pill {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand);
  color: #fff;
  font-size: 0.72rem; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.25rem 0.7rem; border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(167,139,250,0.30);
}

/* Wizard step segments — gradient fill on completed */
.wiz-progress { display: flex; gap: 4px; margin-bottom: var(--sp-5); }
.wiz-progress .seg {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: var(--c-border);
  transition: background var(--motion-base);
}
.wiz-progress .seg.done { background: var(--grad-brand); }
.wiz-progress .seg.cur {
  background: linear-gradient(90deg, #22d3ee, #a78bfa 60%, var(--c-border) 60%);
  position: relative;
}

/* Inputs — focus glow */
input:not([type=checkbox]):not([type=radio]),
select, textarea {
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
input:focus:not([type=checkbox]):not([type=radio]),
select:focus, textarea:focus {
  border-color: var(--c-cyan);
  box-shadow: var(--sh-focus);
  outline: none;
}

/* Step shell on the wizard */
.wiz-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-2xl); padding: var(--sp-8);
  box-shadow: var(--sh-md);
}
.wiz-card h2 {
  font-size: 1.6rem; font-weight: var(--fw-extrabold);
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Gradient text is clipped to its LINE box, and a tight one is shorter than
     the font: on Windows (Segoe UI, 1.33 em from ascender to descender) the
     bottom of every descender -- the y in "Verify your", the g in
     "Connecting" -- was cut flat (Owner, 2026-09-27). Padding on the element
     did not help in Chrome 153; a line box the glyphs fit in does. Any page
     that tightens this heading's line-height takes the room back with
     margins (signup.html). */
  line-height: 1.35;
}
.wiz-step-meta {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--c-text-mute);
  margin-bottom: var(--sp-3);
}
.wiz-step-meta .step-num { font-weight: var(--fw-semibold); color: var(--c-text-soft); }
.wiz-actions {
  display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.wiz-actions .help-link { font-size: 0.85rem; color: var(--c-text-mute); }
.wiz-actions .help-link a { color: var(--c-cyan-soft); }

/* Alert block variants — subtle, modern */
.alert {
  padding: 0.85rem 1.1rem; border-radius: var(--r-md);
  font-size: 0.92rem; border: 1px solid;
  margin-bottom: var(--sp-3);
}
.alert-info  { background: rgba(59,130,246,0.06);  border-color: rgba(59,130,246,0.20); color: #1e3a8a; }
.alert-ok    { background: rgba(16,185,129,0.06);  border-color: rgba(16,185,129,0.22); color: #065f46; }
.alert-warn  { background: rgba(245,158,11,0.07);  border-color: rgba(245,158,11,0.22); color: #92400e; }
.alert-danger{ background: rgba(239,68,68,0.06);   border-color: rgba(239,68,68,0.22);  color: #991b1b; }

/* Checkbox + radio polish */
.consent-block,
.consent-row {
  display: block;
}
.consent-block {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.consent-row {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin-top: 0.6rem;
}
.consent-row input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--c-violet-soft);
}
.consent-row label { font-size: 0.92rem; line-height: 1.5; color: var(--c-text-soft); }

.yn-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.yn-opt {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.yn-opt:hover { border-color: var(--c-cyan); }
.yn-opt input[type="radio"] { accent-color: var(--c-violet-soft); }
.yn-opt:has(input:checked) {
  background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.08));
  border-color: var(--c-violet-soft);
}

/* =========================================================================
   PROMISE CARDS -- the Founding 25 offer and the first-deliverable guarantee.
   Owner, 2026-09-22: "can you design it to look better and not so like ai
   slop", then "anywhere there is still the old design for the founding
   customer or satisfaction 7 day thing, change it to look like the new one".
   One design wherever they appear -- homepage, pricing, audit, signup, the
   founding page and the customer dashboard: a kicker with a dot, one big
   figure, one sentence, a short checklist, one link. No emoji, no gradients,
   no pastel tints. A page adds placement, never its own version of these.
   ========================================================================= */
.promise-band { padding: var(--sp-12) 0; background: var(--c-bg-soft); border-top: 1px solid var(--c-border); }
.promise-band .label { text-align: center; font-size: 0.85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: 1.5rem; }
/* Subgrid lines two cards up row by row -- label, figure, sentence, list,
   link -- so a two-line sentence in one card doesn't knock its list lower than
   the other's. Where subgrid isn't supported the cards simply stack their rows. */
.promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.promise-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-2xl); padding: 1.75rem 1.75rem 1.5rem; text-align: left; }
.promise-grid > .promise-card { display: grid; grid-template-rows: auto auto auto 1fr auto; grid-row: span 5; row-gap: 0; }
@supports (grid-template-rows: subgrid) { .promise-grid > .promise-card { grid-template-rows: subgrid; } }
.promise-kicker { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-mute); }
.promise-kicker .dot, .promise-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cyan); flex: none; }
.promise-card[data-state="closed"] .promise-kicker .dot { background: var(--c-text-faint); }
.promise-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem; margin: 1.1rem 0 .6rem; }
.promise-figure .num { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.promise-figure .of { font-size: 1rem; font-weight: 600; color: var(--c-text-soft); }
.promise-lede { font-size: .98rem; line-height: 1.55; color: var(--c-text-soft); margin: 0 0 1.1rem; }
/* A card with no figure (a note in a dialog, the founder's direct line) keeps a
   breath between its kicker and its words. */
.promise-kicker + .promise-lede, .promise-kicker + .promise-list { margin-top: .6rem; }
.promise-list { list-style: none; margin: 0 0 1.4rem; padding: 1rem 0 0; border-top: 1px solid var(--c-border); display: grid; gap: .55rem; align-content: start; }
.promise-list li { position: relative; padding-left: 1.5rem; font-size: .92rem; line-height: 1.5; color: var(--c-text-soft); }
.promise-list li::before { content: ""; position: absolute; left: .15rem; top: .4em; width: .62rem; height: .34rem; border-left: 2px solid var(--c-cyan-soft); border-bottom: 2px solid var(--c-cyan-soft); transform: rotate(-45deg); }
.promise-card[data-state="closed"] .promise-list { display: none; }
.promise-list a, .promise-lede a { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; }
.promise-list a:hover, .promise-lede a:hover { color: var(--c-cyan-soft); text-decoration-color: var(--c-cyan-soft); opacity: 1; }
.promise-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; font-weight: 700; color: var(--c-ink); border-bottom: 1px solid var(--c-border-strong); padding-bottom: 2px; }
.promise-grid .promise-link { grid-row: 5; align-self: end; justify-self: start; }
.promise-link:hover { color: var(--c-cyan-soft); border-bottom-color: var(--c-cyan-soft); opacity: 1; }
/* A figure on its own, centred under a page heading (the founding page). */
.promise-figure.is-solo { justify-content: center; margin: var(--sp-5) 0 0; }
/* Compact: the same card inside a flow -- a signup step, a dialog, a dashboard page. */
.promise-card.is-compact { padding: 1.1rem 1.25rem 1.2rem; border-radius: var(--r-xl); }
.promise-card.is-compact .promise-figure { margin: .7rem 0 .4rem; }
.promise-card.is-compact .promise-figure .num { font-size: 2.1rem; }
.promise-card.is-compact .promise-lede { font-size: .92rem; margin-bottom: .8rem; }
.promise-card.is-compact .promise-list { padding-top: .75rem; margin-bottom: .9rem; }
.promise-card.is-compact > :last-child { margin-bottom: 0; }
/* Closed, a compact card ends at its sentence -- the perks and the link are gone. */
.promise-card.is-compact[data-state="closed"] .promise-lede { margin-bottom: 0; }
/* Dark: the same card on an ink background (the audit report's closing strip). */
.promise-card.is-dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.promise-card.is-dark .promise-kicker { color: #94a3b8; }
.promise-card.is-dark .promise-figure .num { color: #fff; }
.promise-card.is-dark .promise-figure .of, .promise-card.is-dark .promise-lede, .promise-card.is-dark .promise-list li { color: #cbd5e1; }
.promise-card.is-dark .promise-list { border-top-color: rgba(255,255,255,.12); }
.promise-card.is-dark .promise-list li::before { border-color: var(--c-cyan); }
.promise-card.is-dark .promise-link { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.promise-card.is-dark .promise-link:hover { color: var(--c-cyan); border-bottom-color: var(--c-cyan); }
/* Badge: the founder mark beside a name. */
.promise-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: var(--c-card); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-mute); line-height: 1.2; vertical-align: middle; white-space: nowrap; }
.promise-badge .dot { width: 6px; height: 6px; }
/* `hidden` loses to any display rule of ours, so say it here: a card waiting
   for a real count, and anything the live count hides once the cohort is full. */
.promise-card[hidden], [data-founding-closed-hide][hidden] { display: none !important; }
@media (max-width: 720px) {
  .promise-grid { grid-template-columns: 1fr; }
  .promise-band { padding: var(--sp-8) 0; }
  .promise-figure .num { font-size: 2.5rem; }
}

/* Universal smooth scroll */
html { scroll-behavior: smooth; }

/* Selection accent */
::selection { background: rgba(167,139,250,0.25); color: var(--c-ink); }