/* ============================================================================
   spetic.css — the ONLY file this site adds on top of the shared kit.

   site.css, mk.css, sections.css, crops.css, products.css, blog.css and
   studio.css are consumed byte for byte, so a fix upstream lands here without
   a merge. Everything below is a rule the reference page carried inline on
   its own document and therefore never reached a stylesheet, plus the two
   accounting-specific artifacts (journal, tax return line) the kit has no
   name for. See docs/DESIGN-KIT.md for how this file fits the rest of the
   marketing branch.
   ============================================================================ */

/* ------------------------------- the hero ----------------------------------
   Lifted from the reference homepage's document-level <style>, then adapted
   for Spetic: the product signal stays in the app preview, not in a green
   marketing headline. One h1, three controlled rows, one quiet rhythm. */
.hero.hero-v2 { padding-top: clamp(28px, 3.2vw, 42px) }
.hero-v2 .hero-fold, .hero-v2 .hero-copy { max-width: 1320px }
.hero-v2 .display {
  width: fit-content; max-width: calc(100vw - (2 * var(--sp5)));
  font-size: clamp(3.65rem, calc(5vw - .15rem), 5.35rem);
  font-weight: 400; line-height: .95; letter-spacing: 0;
}
.hero-v2 .display .row { display: block; white-space: nowrap }
.hero-v2 .display .lbl { color: var(--marketing-hero-muted) }
.hero-v2 .display .val { color: var(--marketing-hero-ink); font-weight: 600 }
.hero-v2 .display .val.live { color: var(--marketing-hero-ink) }
.hero-v2 .hero-lead {
  max-width: 720px; margin: clamp(18px, 2vw, 26px) auto 0;
  color: var(--ink-muted); font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.55;
}
.hero-v2 .hero-stage { max-width: 1320px; margin-top: clamp(18px, 2vw, 28px) }
.hero-v2 .stage-hero {
  background-image: linear-gradient(180deg, var(--plate-hi) 0%, var(--plate-mid) 55%, var(--plate-lo) 100%);
  background-position: center;
  background-size: auto;
}
.hero-v2 .stage-hero::before { display: block }
.hero-v2 .stage-hero .sp-platform-shell { --sp-app-green: var(--ink-muted) }
.hero-v2 .stage-hero .mk-dot.live,
.hero-v2 .stage-hero .mk-dot.entry,
.hero-v2 .stage-hero .mk-mini-row i,
.hero-v2 .stage-hero .mk-caret {
  background: var(--ink-muted);
}
.hero-v2 .stage-hero .mk-term .ok,
.hero-v2 .stage-hero .mk-outcome > svg,
.hero-v2 .stage-hero .fx-journal-foot b {
  color: var(--ink-muted);
}
@media (min-width: 921px) and (max-width: 1199px) {
  .hero-v2 .display { font-size: clamp(3.7rem, 6vw, 4.6rem) }
}
@media (max-width: 920px) {
  .hero-v2 .display {
    font-size: clamp(2.48rem, 6.4vw, 3.42rem);
    line-height: .98; letter-spacing: 0;
  }
}
@media (max-width: 560px) {
  .hero-v2 .display {
    width: min(100%, 11.5ch); max-width: calc(100vw - (2 * var(--sp3)));
    font-size: clamp(2rem, 9.3vw, 2.52rem);
  }
  .hero-v2 .display .row { white-space: normal }
}
/* Public platform counters in one compact row. */
.hero-metrics { display: flex; justify-content: center; margin-top: clamp(20px, 2.2vw, 30px) }
.hero-metrics .cell {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp1);
  padding-inline: clamp(16px, 3vw, 40px);
}
.hero-metrics .cell + .cell { border-left: 1px solid var(--line) }
.hero-metrics .num {
  font-family: var(--mono); font-size: var(--t-title); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink);
}
.hero-metrics .metric-label { font-size: var(--t-small); color: var(--ink-muted) }
/* Two direct actions, centred as one compact decision row. */
.hero-band {
  display: flex; align-items: center; justify-content: center; gap: var(--sp3);
  width: 100%; margin-inline: auto; margin-top: clamp(18px, 2vw, 24px);
}
.hero-band .door { flex: 0 0 auto; display: flex }
.hero-band .btn { min-width: 184px; justify-content: center }
@media (max-width: 639.98px) {
  .hero-metrics { align-items: stretch; width: 100%; margin-top: var(--sp5) }
  .hero-metrics .cell { flex: 1 1 0; min-width: 0; padding: 0 var(--sp2) }
  .hero-metrics .cell + .cell { border-left: 1px solid var(--line) }
  .hero-metrics .num { font-size: clamp(13px, 3.7vw, 16px) }
  .hero-metrics .metric-label { font-size: 11px }
  .hero-band { flex-direction: column; gap: var(--sp2); margin-top: var(--sp5) }
  .hero-v2 .hero-lead { margin-top: var(--sp4); font-size: .98rem }
}

/* Inner-page heroes need breathing room after their CTA row. The base design
   kit ends page heroes at the exact bottom of their content so dense product
   pages can pull the next proof block into view; long legal/resource titles
   make that feel like the buttons are touching the next section. */
.page-hero { padding-bottom: clamp(52px, 6vw, 96px) }
.page-hero .cta-row {
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 40px);
}
.page-hero .cta-row .btn { min-width: 0 }
@media (max-width: 720px) {
  .nav-cta { display: none }
  .announce { overflow: hidden }
  .announce a { min-width: 0; overflow: hidden; text-overflow: ellipsis }
}
@media (max-width: 560px) {
  .page-hero { padding-bottom: clamp(44px, 12vw, 72px) }
  .page-hero.center .cta-row { margin-inline: auto }
  .page-hero .cta-row { width: min(100%, 360px) }
  .page-hero .cta-row .btn {
    width: 100%;
    min-height: var(--ctl-h);
    height: auto;
    padding-block: 10px;
    white-space: normal;
    text-align: center;
  }
}

/* ---------------------- faithful platform previews -----------------------
   These surfaces mirror the actual application shell. The marketing frame
   still provides the paper texture and generous crop, while the UI inside it
   uses the product's sidebar, cards, tables, filters and status language. */
.sp-platform-shell,
.sp-product-surface {
  --sp-app-bg: color-mix(in srgb, var(--bg) 96%, var(--s2));
  --sp-app-card: var(--s1);
  --sp-app-muted: color-mix(in srgb, var(--s2) 76%, var(--bg));
  --sp-app-line: var(--line-2);
  --sp-app-green: var(--green-text);
  color: var(--ink); font-family: var(--sans);
}
.sp-platform-shell * , .sp-product-surface * { box-sizing: border-box }
.sp-platform-shell svg, .sp-product-surface svg { width: 1em; height: 1em; stroke-width: 1.7 }
.sp-platform-shell {
  display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  border-radius: inherit; background: var(--sp-app-bg); text-align: left;
}
.sp-platform-sidebar {
  display: flex; width: 21%; min-width: 142px; flex-direction: column; padding: 10px;
  border-right: 1px solid var(--sp-app-line); background: var(--sp-app-card);
}
.sp-platform-brand { display: flex; height: 36px; align-items: center; gap: 8px; padding-inline: 8px }
.sp-platform-brand img { width: 15px; height: 15px }
.sp-platform-brand strong { font-family: var(--mono); font-size: 13px; letter-spacing: -.02em }
.sp-platform-search {
  display: flex; min-height: 31px; align-items: center; gap: 7px; margin-block: 9px 12px; padding: 0 9px;
  border: 1px solid var(--sp-app-line); border-radius: 9px; color: var(--ink-muted); font-size: 10px;
}
.sp-platform-search svg { font-size: 12px }
.sp-platform-search span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-platform-search kbd { font-family: var(--mono); font-size: 8px; font-weight: 400 }
.sp-platform-sidebar nav { min-height: 0; flex: 1; overflow: hidden }
.sp-platform-sidebar nav > small { display: block; margin: 0 8px 6px; color: var(--ink-faint); font-size: 8px; font-weight: 600 }
.sp-platform-nav-group { margin-bottom: 2px }
.sp-platform-nav-item {
  display: flex; min-height: 28px; align-items: center; gap: 7px; padding: 0 8px;
  border-radius: 8px; color: var(--ink-muted); font-size: 9.5px;
}
.sp-platform-nav-item svg { flex: 0 0 auto; font-size: 12px }
.sp-platform-nav-item b { min-width: 0; flex: 1; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.sp-platform-nav-item i { font-style: normal }
.sp-platform-nav-item.is-active { background: var(--sp-app-muted); color: var(--ink) }
.sp-platform-nav-children { display: grid; gap: 1px; margin: 2px 0 3px 21px; padding-left: 11px; border-left: 1px solid var(--sp-app-line) }
.sp-platform-nav-children span { padding-block: 3px; color: var(--ink-faint); font-size: 8.5px }
.sp-platform-period { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-muted) }
.sp-platform-period span, .sp-platform-period b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-platform-period span { color: var(--ink-faint); font-size: 8px }
.sp-platform-period b { font-size: 8.5px; font-weight: 550 }
.sp-platform-account { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 6px }
.sp-platform-account > span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--sp-app-muted); font-family: var(--mono); font-size: 8px }
.sp-platform-account div { display: grid; min-width: 0; gap: 1px }
.sp-platform-account b, .sp-platform-account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-platform-account b { font-size: 8.5px; font-weight: 550 }
.sp-platform-account small { color: var(--ink-faint); font-size: 7.5px }
.sp-platform-main { min-width: 0; flex: 1; overflow: hidden; padding: 24px 28px; background: var(--sp-app-bg) }
.sp-platform-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px }
.sp-platform-page-head small { color: var(--ink-faint); font-size: 8px }
.sp-platform-page-head h3 { margin: 4px 0 2px; font-size: 18px; font-weight: 650; letter-spacing: -.035em }
.sp-platform-page-head p { margin: 0; color: var(--ink-muted); font-size: 8.5px }
.sp-platform-primary { display: inline-flex; min-height: 29px; align-items: center; gap: 6px; padding: 0 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 8.5px; font-weight: 600; white-space: nowrap }
.sp-platform-primary svg { font-size: 11px }
.sp-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px }
.sp-dashboard-metrics article { display: grid; min-width: 0; gap: 6px; padding: 12px; border: 1px solid var(--sp-app-line); border-radius: 11px; background: var(--sp-app-card) }
.sp-dashboard-metrics span, .sp-dashboard-metrics small { overflow: hidden; color: var(--ink-faint); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap }
.sp-dashboard-metrics b { overflow: hidden; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap }
.sp-dashboard-metrics small { color: var(--sp-app-green) }
.sp-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(180px, .8fr); gap: 9px }
.sp-dashboard-card { min-width: 0; overflow: hidden; border: 1px solid var(--sp-app-line); border-radius: 11px; background: var(--sp-app-card) }
.sp-dashboard-card > header { display: flex; min-height: 43px; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 10px 12px 7px }
.sp-dashboard-card > header div { display: grid; gap: 2px }
.sp-dashboard-card > header b { font-size: 9px; font-weight: 600 }
.sp-dashboard-card > header small { color: var(--ink-faint); font-size: 7.5px }
.sp-dashboard-card > header > span { padding: 3px 7px; border-radius: 999px; background: var(--sp-app-muted); color: var(--ink-muted); font-size: 7px }
.sp-dashboard-card > header > strong { font-family: var(--mono); font-size: 10px }
.sp-dashboard-activity { min-height: 188px }
.sp-platform-shell .sp-dashboard-chart { display: block; width: calc(100% - 24px); height: 102px; margin-inline: 12px; overflow: visible }
.sp-dashboard-chart .grid { fill: none; stroke: var(--line); stroke-width: 1 }
.sp-dashboard-chart .income-fill { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: none }
.sp-dashboard-chart .income, .sp-dashboard-chart .expense { fill: none; stroke: var(--ink); stroke-width: 2.3; vector-effect: non-scaling-stroke }
.sp-dashboard-chart .expense { stroke: var(--ink-faint); stroke-dasharray: 4 4 }
.sp-dashboard-activity footer { display: flex; gap: 12px; padding: 2px 12px 9px; color: var(--ink-muted); font-size: 7px }
.sp-dashboard-activity footer span { display: flex; align-items: center; gap: 4px }
.sp-dashboard-activity footer i { width: 10px; height: 2px; background: var(--ink) }
.sp-dashboard-activity footer i.is-expense { background: var(--ink-faint) }
.sp-dashboard-controls { min-height: 188px }
.sp-control-row { display: flex; min-height: 32px; align-items: center; gap: 7px; margin: 0 9px 5px; padding: 0 8px; border: 1px solid var(--sp-app-line); border-radius: 8px }
.sp-control-row > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: var(--sp-app-muted) }
.sp-control-row svg { font-size: 10px }
.sp-control-row b { min-width: 0; flex: 1; overflow: hidden; font-size: 7.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.sp-control-row em { min-width: 18px; padding: 3px 5px; border-radius: 999px; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 7px; font-style: normal; text-align: center }
.sp-control-row em.is-neutral { background: var(--sp-app-muted); color: var(--ink-muted) }
.sp-dashboard-receivables, .sp-dashboard-documents { min-height: 123px }
.sp-aging-bars { display: grid; gap: 7px; padding: 1px 12px 11px }
.sp-aging-bars span { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: center; gap: 7px; color: var(--ink-muted); font-size: 7px }
.sp-aging-bars b { font-weight: 500 }
.sp-aging-bars i { height: 4px; overflow: hidden; border-radius: 999px; background: var(--sp-app-muted) }
.sp-aging-bars i::after { content: ""; display: block; width: var(--bar); height: 100%; border-radius: inherit; background: var(--ink) }
.sp-aging-bars em { font-family: var(--mono); font-style: normal; text-align: right }
.sp-document-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; border-top: 1px solid var(--line) }
.sp-document-row > span { display: grid; place-items: center; color: var(--ink-muted) }
.sp-document-row b { overflow: hidden; font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.sp-document-row em { color: var(--sp-app-green); font-size: 6.5px; font-style: normal }

/* Copilot crop: the same simple chat workspace as the protected product. */
.sp-copilot-preview { position: relative; display: flex; flex-direction: column; padding: 0 }
.sp-copilot-head { display: flex; min-height: 53px; align-items: center; gap: 9px; padding: 0 15px; border-bottom: 1px solid var(--sp-app-line); background: color-mix(in srgb, var(--sp-app-card) 92%, transparent) }
.sp-copilot-head > span, .sp-copilot-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--ink); color: var(--bg) }
.sp-copilot-head > span svg, .sp-copilot-avatar svg { font-size: 13px }
.sp-copilot-head > div { display: grid; min-width: 0; gap: 2px }
.sp-copilot-head b { font-size: 9px; font-weight: 600 }
.sp-copilot-head small { color: var(--ink-faint); font-size: 7px }
.sp-copilot-head em { margin-left: auto; padding: 6px 9px; border: 1px solid var(--sp-app-line); border-radius: 8px; font-size: 7px; font-style: normal }
.sp-copilot-feed { width: min(88%, 570px); margin: auto; padding: 18px 0 66px }
.sp-copilot-user { width: fit-content; max-width: 76%; margin-left: auto; padding: 9px 11px; border-radius: 10px 10px 3px 10px; background: var(--sp-app-muted); font-size: 8px }
.sp-copilot-answer { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px }
.sp-copilot-avatar { width: 24px; height: 24px; border-radius: 8px }
.sp-copilot-answer > div { min-width: 0; flex: 1 }
.sp-copilot-answer > div > b { font-size: 10px; font-weight: 650 }
.sp-copilot-answer p { margin: 5px 0 10px; color: var(--ink-muted); font-size: 8px; line-height: 1.5 }
.sp-copilot-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
.sp-copilot-sources > span { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 5px; align-items: center; padding: 7px; border: 1px solid var(--sp-app-line); border-radius: 8px; background: var(--sp-app-card) }
.sp-copilot-sources svg { grid-row: span 2; color: var(--ink-muted); font-size: 12px }
.sp-copilot-sources b { overflow: hidden; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap }
.sp-copilot-sources small { color: var(--ink-faint); font-size: 6.5px }
.sp-copilot-decision { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; border: 1px solid var(--sp-app-line); border-radius: 8px; background: var(--sp-app-card) }
.sp-copilot-decision > span { font-family: var(--mono); color: var(--ink-faint); font-size: 7px }
.sp-copilot-decision div { display: grid; min-width: 0; gap: 2px }
.sp-copilot-decision b { overflow: hidden; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap }
.sp-copilot-decision small { overflow: hidden; color: var(--ink-faint); font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap }
.sp-copilot-decision em { padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, #c78b2a 15%, transparent); color: #9b681d; font-size: 6.5px; font-style: normal }
[data-theme="dark"] .sp-copilot-decision em { color: #e1b76f }
.sp-copilot-composer { position: absolute; right: 9%; bottom: 23px; left: 9%; display: flex; min-height: 39px; align-items: center; padding: 0 6px 0 12px; border: 1px solid var(--sp-app-line); border-radius: 11px; background: var(--sp-app-card); box-shadow: 0 8px 25px rgba(0,0,0,.08); color: var(--ink-faint); font-size: 7.5px }
.sp-copilot-composer span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-copilot-composer i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--ink); color: var(--bg); font-style: normal }
.sp-copilot-note { position: absolute; right: 10%; bottom: 7px; left: 10%; overflow: hidden; color: var(--ink-faint); font-size: 6px; text-align: center; text-overflow: ellipsis; white-space: nowrap }

/* Shared product crops for sales, banking, fiscal controls and imports. */
.sp-product-surface { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; border-radius: inherit; background: var(--sp-app-bg); text-align: left }
.sp-surface-bar { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--sp-app-line); background: var(--sp-app-card); color: var(--ink-faint); font-size: 7.5px }
.sp-surface-brand { display: flex; align-items: center; gap: 6px; color: var(--ink) }
.sp-surface-brand img { width: 12px; height: 12px }
.sp-surface-brand strong { font-family: var(--mono); font-size: 8.5px; font-weight: 600 }
.sp-surface-heading { display: flex; min-height: 65px; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 17px 10px }
.sp-surface-heading small { color: var(--ink-faint); font-size: 7px }
.sp-surface-heading h3 { margin: 3px 0 0; font-size: 16px; font-weight: 650; letter-spacing: -.035em }
.sp-surface-heading > em { padding: 7px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 7px; font-style: normal; font-weight: 600; white-space: nowrap }
.sp-surface-metrics, .sp-bank-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 17px 10px }
.sp-surface-metrics article, .sp-bank-summary article { display: grid; min-width: 0; gap: 4px; padding: 10px; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card) }
.sp-surface-metrics span, .sp-surface-metrics small, .sp-bank-summary span { overflow: hidden; color: var(--ink-faint); font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap }
.sp-surface-metrics b, .sp-bank-summary b { overflow: hidden; font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap }
.sp-surface-metrics small { color: var(--sp-app-green) }
.sp-surface-toolbar { display: flex; min-height: 32px; align-items: center; gap: 6px; margin: 0 17px 8px }
.sp-surface-toolbar > span { display: flex; min-width: 0; flex: 1; align-items: center; gap: 6px; padding: 0 9px; align-self: stretch; border: 1px solid var(--sp-app-line); border-radius: 8px; background: var(--sp-app-card); color: var(--ink-faint); font-size: 7px }
.sp-surface-toolbar > span svg { flex: 0 0 auto; font-size: 10px }
.sp-surface-toolbar > em { padding: 6px 8px; border: 1px solid var(--sp-app-line); border-radius: 999px; background: var(--sp-app-card); color: var(--ink-muted); font-size: 6.5px; font-style: normal; white-space: nowrap }
.sp-surface-table { min-height: 0; flex: 1; margin: 0 17px; overflow: hidden; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card) }
.sp-surface-table > div { display: grid; min-height: 31px; align-items: center; gap: 8px; padding: 0 10px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 7px }
.sp-surface-table > div:first-child { border-top: 0 }
.sp-sales-table > div { grid-template-columns: minmax(100px, 1.05fr) minmax(80px, 1fr) 72px 58px }
.sp-bank-table > div { grid-template-columns: 46px minmax(115px, 1fr) 76px 62px }
.sp-surface-table .is-head { min-height: 25px; background: var(--sp-app-muted); color: var(--ink-faint); font-size: 6.5px }
.sp-surface-table div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-surface-table div > span:has(svg) { display: flex; align-items: center; gap: 6px }
.sp-surface-table div > span svg { flex: 0 0 auto; font-size: 10px }
.sp-surface-table b { overflow: hidden; color: var(--ink); font-size: 7px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap }
.sp-surface-table strong { font-family: var(--mono); color: var(--ink); font-size: 7px; font-weight: 550; text-align: right }
.sp-surface-table em { width: fit-content; max-width: 100%; overflow: hidden; padding: 4px 6px; border-radius: 999px; background: var(--sp-app-muted); color: var(--ink-muted); font-size: 6px; font-style: normal; text-overflow: ellipsis; white-space: nowrap }
.sp-surface-table em.is-good { background: color-mix(in srgb, #2e9d68 13%, transparent); color: var(--sp-app-green) }
.sp-surface-table em.is-warn { background: color-mix(in srgb, #c78b2a 14%, transparent); color: #9b681d }
[data-theme="dark"] .sp-surface-table em.is-warn { color: #e1b76f }
.sp-surface-footer { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 0 17px; border-top: 1px solid var(--sp-app-line); color: var(--ink-faint); font-size: 6.5px }
.sp-surface-footer span { display: flex; align-items: center; gap: 5px }
.sp-surface-footer b { color: var(--ink-muted); font-weight: 500; text-align: right }
.sp-surface-footer svg { font-size: 10px }

.sp-surface-tabs { display: flex; min-height: 32px; align-items: center; gap: 4px; margin: 0 17px 9px; padding: 3px; border-radius: 9px; background: var(--sp-app-muted) }
.sp-surface-tabs span, .sp-surface-tabs b { padding: 6px 8px; border-radius: 7px; font-size: 6.5px; font-weight: 500; white-space: nowrap }
.sp-surface-tabs b { background: var(--sp-app-card); box-shadow: 0 1px 3px rgba(0,0,0,.08) }
.sp-tax-period { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 17px 9px; padding: 9px 11px; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card) }
.sp-tax-period > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 7px }
.sp-tax-period small { grid-column: 1 / -1; color: var(--ink-faint); font-size: 6px }
.sp-tax-period b { font-size: 8px }
.sp-tax-period span { color: var(--ink-muted); font-size: 6.5px }
.sp-tax-period em { display: flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; background: color-mix(in srgb, #c78b2a 14%, transparent); color: #9b681d; font-size: 6px; font-style: normal }
[data-theme="dark"] .sp-tax-period em { color: #e1b76f }
.sp-tax-layout { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(0, 1.35fr) minmax(120px, .65fr); gap: 8px; margin: 0 17px }
.sp-tax-checks { overflow: hidden; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card) }
.sp-tax-checks > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) 64px 58px; min-height: 33px; align-items: center; gap: 7px; padding: 0 9px; border-top: 1px solid var(--line) }
.sp-tax-checks > div:first-child { border-top: 0 }
.sp-tax-checks span { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: color-mix(in srgb, #2e9d68 12%, transparent); color: var(--sp-app-green) }
.sp-tax-checks svg { font-size: 9px }
.sp-tax-checks b, .sp-tax-checks strong, .sp-tax-checks em { overflow: hidden; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap }
.sp-tax-checks b { font-weight: 500 }
.sp-tax-checks strong { font-family: var(--mono); font-weight: 550; text-align: right }
.sp-tax-checks em { color: var(--ink-faint); font-style: normal; text-align: right }
.sp-tax-layout aside { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 11px; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card); text-align: center }
.sp-tax-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: var(--sp-app-muted) }
.sp-tax-icon svg { font-size: 13px }
.sp-tax-layout aside > small { margin-top: 7px; color: var(--ink-faint); font-size: 6px }
.sp-tax-layout aside > b { margin-top: 2px; font-family: var(--mono); font-size: 11px }
.sp-tax-layout aside p { margin: 5px 0 7px; color: var(--ink-muted); font-size: 6.5px; line-height: 1.4 }
.sp-tax-layout aside > div { display: flex; align-items: center; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 5.7px }

.sp-import-surface .sp-surface-heading { min-height: 58px }
.sp-import-drop { display: flex; min-height: 120px; flex-direction: column; align-items: center; justify-content: center; margin: 0 17px 9px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 10px; background: color-mix(in srgb, var(--sp-app-card) 65%, transparent); text-align: center }
.sp-import-drop > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--sp-app-muted) }
.sp-import-drop svg { font-size: 14px }
.sp-import-drop b { margin-top: 6px; font-size: 8px }
.sp-import-drop p { max-width: 320px; margin: 4px auto 7px; color: var(--ink-muted); font-size: 6.5px; line-height: 1.45 }
.sp-import-drop em { padding: 6px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 6px; font-style: normal }
.sp-import-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 17px 9px }
.sp-import-sources article { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card) }
.sp-import-sources article > span { display: grid; width: 25px; height: 25px; grid-row: span 2; place-items: center; border-radius: 7px; background: var(--sp-app-muted) }
.sp-import-sources svg { font-size: 12px }
.sp-import-sources div { display: grid; min-width: 0; gap: 2px }
.sp-import-sources b, .sp-import-sources small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sp-import-sources b { font-size: 6.5px }
.sp-import-sources small { color: var(--ink-faint); font-size: 5.7px }
.sp-import-sources em { grid-column: 2; color: var(--ink-muted); font-size: 5.7px; font-style: normal }
.sp-import-queue { min-height: 0; flex: 1; margin: 0 17px 12px; overflow: hidden; border: 1px solid var(--sp-app-line); border-radius: 9px; background: var(--sp-app-card) }
.sp-import-queue > header { display: flex; min-height: 25px; align-items: center; justify-content: space-between; padding: 0 9px; background: var(--sp-app-muted) }
.sp-import-queue > header b, .sp-import-queue > header span { font-size: 6px }
.sp-import-queue > header span { color: var(--ink-faint) }
.sp-import-queue > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 33px; align-items: center; gap: 7px; padding: 0 9px; border-top: 1px solid var(--line) }
.sp-import-queue > div > span { display: grid; place-items: center; color: var(--ink-muted) }
.sp-import-queue > div div { display: grid; min-width: 0; gap: 2px }
.sp-import-queue > div b, .sp-import-queue > div small { overflow: hidden; font-size: 6.2px; text-overflow: ellipsis; white-space: nowrap }
.sp-import-queue > div small { color: var(--ink-faint); font-size: 5.7px }
.sp-import-queue em { padding: 4px 6px; border-radius: 999px; background: color-mix(in srgb, #c78b2a 14%, transparent); color: #9b681d; font-size: 5.7px; font-style: normal }
.sp-import-queue em.is-good { background: color-mix(in srgb, #2e9d68 13%, transparent); color: var(--sp-app-green) }

/* Product heroes have a shallower frame than the home tour. Compress only
   their preview chrome so at least two real records remain visible. */
.product-hero-frame .sp-surface-bar { min-height: 29px; padding-inline: 11px }
.product-hero-frame .sp-surface-heading { min-height: 48px; padding: 9px 12px 6px }
.product-hero-frame .sp-surface-heading h3 { font-size: 13px }
.product-hero-frame .sp-surface-metrics,
.product-hero-frame .sp-bank-summary { gap: 5px; padding: 0 12px 6px }
.product-hero-frame .sp-surface-metrics article,
.product-hero-frame .sp-bank-summary article { gap: 2px; padding: 7px }
.product-hero-frame .sp-surface-toolbar { min-height: 26px; margin: 0 12px 5px }
.product-hero-frame .sp-surface-table { margin-inline: 12px }
.product-hero-frame .sp-surface-table > div { min-height: 25px; padding-inline: 8px }
.product-hero-frame .sp-surface-footer { min-height: 25px; margin-top: 5px; padding-inline: 12px }
.product-hero-frame .sp-tax-period { margin-bottom: 6px; padding-block: 6px }
.product-hero-frame .sp-tax-layout { margin-inline: 12px }

.home-feature-grid .card { min-height: 330px }
.home-feature-grid .card p { max-width: 35ch }

@media (max-width: 920px) {
  .sp-platform-main { padding: 19px 20px }
  .sp-dashboard-metrics article { padding: 9px }
  .sp-dashboard-metrics b { font-size: 10px }
  .sp-dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(145px, .8fr) }
}
@media (max-width: 640px) {
  .sp-platform-sidebar { display: none }
  .sp-platform-main { padding: 16px }
  .sp-platform-page-head p { max-width: 24ch }
  .sp-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sp-dashboard-grid { grid-template-columns: minmax(0, 1fr) }
  .sp-dashboard-controls, .sp-dashboard-receivables, .sp-dashboard-documents { display: none }
  .sp-dashboard-activity { min-height: 205px }
  .sp-copilot-feed { width: 92% }
  .sp-copilot-sources { grid-template-columns: minmax(0, 1fr) }
  .sp-copilot-sources > span:nth-child(n+3) { display: none }
  .sp-copilot-decision { grid-template-columns: 18px minmax(0, 1fr) }
  .sp-copilot-decision em { display: none }
  .sp-surface-bar { min-height: 32px }
  .sp-surface-heading { min-height: 58px; padding: 11px 12px 8px }
  .sp-surface-heading h3 { font-size: 13px }
  .sp-surface-metrics, .sp-bank-summary { padding-inline: 12px }
  .sp-surface-toolbar { margin-inline: 12px }
  .sp-surface-toolbar > em:nth-last-child(n+2) { display: none }
  .sp-surface-table { margin-inline: 12px }
  .sp-sales-table > div { grid-template-columns: minmax(100px, 1fr) 66px 53px }
  .sp-sales-table > div > span:nth-child(2) { display: none }
  .sp-bank-table > div { grid-template-columns: minmax(110px, 1fr) 72px 54px }
  .sp-bank-table > div > span:first-child { display: none }
  .sp-surface-footer { padding-inline: 12px }
  .sp-surface-footer span { display: none }
  .sp-surface-tabs, .sp-tax-period, .sp-tax-layout, .sp-import-drop, .sp-import-sources, .sp-import-queue { margin-inline: 12px }
  .sp-surface-tabs span:nth-child(n+3) { display: none }
  .sp-tax-layout { grid-template-columns: minmax(0, 1fr) }
  .sp-tax-layout aside { display: none }
  .sp-tax-checks > div { grid-template-columns: 18px minmax(0, 1fr) 62px }
  .sp-tax-checks em { display: none }
  .sp-import-sources { grid-template-columns: minmax(0, 1fr) }
  .sp-import-sources article:nth-child(n+2) { display: none }
  .home-feature-grid .card { min-height: 0 }
}

/* The one rule the reference shipped from its bundler rather than from the
   kit: a terminal pane that ends on an action instead of a caret. */
.mk-term-action { display: flex; padding: 0 16px 16px }

/* ------------------------------- the lockup --------------------------------
   Nothing here. The lockup is an inline SVG in currentColor, so .logotype and
   .footer-mark in site.css already fit it: the mark takes the ink of whatever
   surface it lands on, in either theme, with no filter and no second asset.
   This block used to hold four rules undoing a raster's opacity. */

/* --------------------------- accounting artifacts --------------------------
   Two artifacts this product needs that the shared kit does not name: a
   balanced journal entry, and a tax return line with its provenance. Both sit
   inside .mk-plate and borrow the kit's surfaces, hairlines and mono, so they
   read as the same software as every other crop on the page. */
.fx-journal { display: flex; width: 100%; height: 100%; flex-direction: column; background: var(--s1) }
.fx-journal-rows { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden }
.fx-journal-row {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 96px 96px;
  gap: var(--sp3); min-height: var(--row-h-xs); padding-inline: var(--sp4);
}
.fx-journal-row + .fx-journal-row { border-top: 1px solid var(--line) }
.fx-journal-row.is-head { font-size: 12px; font-weight: 510; color: var(--ink-faint) }
.fx-journal-row .acct { min-width: 0; overflow: hidden; font-size: 13.5px; color: var(--ink); text-overflow: ellipsis; white-space: nowrap }
.fx-journal-row .src { min-width: 0; overflow: hidden; font-family: var(--mono); font-size: 12.5px; color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap }
.fx-journal-row .amt { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink) }
.fx-journal-row .amt.is-empty { color: var(--line-2) }
.fx-journal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp3);
  min-height: var(--row-h-xs); padding-inline: var(--sp4);
  border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-muted);
}
.fx-journal-foot b { color: var(--green-text); font-weight: 500 }
@media (max-width: 560px) {
  .fx-journal-row { grid-template-columns: minmax(0, 1fr) 84px 84px; padding-inline: var(--sp3) }
  .fx-journal-row .src { display: none }
}

/* The tax line: a computed value, the sources it was computed from, and the
   state of the difference between them. */
.fx-return { display: flex; width: 100%; height: 100%; flex-direction: column; background: var(--s1) }
.fx-return-rows { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden }
.fx-return-row {
  display: grid; align-items: center;
  grid-template-columns: 68px minmax(0, 1.5fr) 104px minmax(0, 116px);
  gap: var(--sp3); min-height: var(--row-h-xs); padding-inline: var(--sp4);
}
.fx-return-row + .fx-return-row { border-top: 1px solid var(--line) }
.fx-return-row.is-head { font-size: 12px; font-weight: 510; color: var(--ink-faint) }
.fx-return-row .ln { font-family: var(--mono); font-size: 12px; color: var(--ink-faint) }
.fx-return-row .nm { min-width: 0; overflow: hidden; font-size: 13.5px; color: var(--ink); text-overflow: ellipsis; white-space: nowrap }
.fx-return-row .vl { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink) }
.fx-return-row .sr { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap }
@media (max-width: 620px) {
  .fx-return-row { grid-template-columns: 52px minmax(0, 1fr) 92px; padding-inline: var(--sp3) }
  .fx-return-row .sr { display: none }
}

/* ------------------------ resource and developer pages ------------------- */
.spetic-template-cover,
.spetic-editorial-cover {
  position: relative; display: flex; min-height: 13rem; flex-direction: column;
  justify-content: space-between; overflow: hidden; padding: var(--sp4);
  border-bottom: 1px solid var(--line); background: #eee9df; color: #11141a;
  font-family: var(--mono); isolation: isolate;
}
.spetic-template-cover::before,
.spetic-editorial-cover::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: repeating-linear-gradient(125deg, transparent 0 14px, rgba(18,20,24,.06) 14px 15px);
}
.spetic-template-cover span,
.spetic-editorial-cover span { color: rgba(17,20,26,.48); font-size: var(--t-small) }
.spetic-template-cover strong,
.spetic-editorial-cover strong { max-width: 12ch; font-size: clamp(1.35rem, 3cqw, 2.05rem); letter-spacing: -.035em; line-height: 1.05 }
.spetic-template-cover small,
.spetic-editorial-cover small { color: rgba(17,20,26,.48); text-transform: lowercase }
.spetic-template-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line) }
.spetic-template-flow > div { display: flex; min-height: 13rem; flex-direction: column; padding: var(--sp4) }
.spetic-template-flow > div + div { border-left: 1px solid var(--line) }
.spetic-template-flow span { margin-bottom: auto; font-family: var(--mono); color: var(--ink-faint) }
.spetic-template-flow b { margin-bottom: var(--sp2); font-size: var(--t-title); font-weight: 550 }
.spetic-template-flow p { margin: 0; color: var(--ink-muted); line-height: 1.55 }

.spetic-editorial-cover { height: 100%; min-height: 28rem; border: 0; border-radius: calc(var(--r-xl) - 10px) }
.spetic-editorial-cover strong { max-width: 10ch; font-size: clamp(2rem, 4vw, 4rem) }
.spetic-editorial-cover.compact { min-height: 13rem; border-radius: 0 }
.spetic-editorial-cover.compact strong { font-size: clamp(1.2rem, 2.4vw, 1.8rem) }
.spetic-editorial-cover.tone-2 { background: #d9ddd8 }
.spetic-editorial-cover.tone-3 { background: #dcd6cc }
.spetic-archive-index { display: grid; width: 68px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); font-family: var(--mono); color: var(--ink-faint) }

.spetic-article-head { max-width: 62rem }
.spetic-article-head .display { max-width: 16ch }
.spetic-article-head .lead { max-width: 50ch }
.spetic-article-layout { display: grid; grid-template-columns: 14rem minmax(0, 44rem); justify-content: center; gap: clamp(2rem, 7vw, 7rem); padding-block: var(--band) }
.spetic-article-layout aside { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; height: fit-content; flex-direction: column; gap: var(--sp2) }
.spetic-article-layout aside a { color: var(--ink-muted); font-size: var(--t-small); line-height: 1.4 }
.spetic-article-layout aside a:hover { color: var(--ink) }
.spetic-article-body section { scroll-margin-top: calc(var(--nav-h) + 32px) }
.spetic-article-body section + section { margin-top: var(--sp7); padding-top: var(--sp7); border-top: 1px solid var(--line) }
.spetic-article-body h2 { margin: 0 0 var(--sp4); font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.03em }
.spetic-article-body p { margin: 0 0 var(--sp4); color: var(--ink-muted); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.75 }

.spetic-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp4) }
.spetic-brand-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--s1) }
.spetic-brand-grid article > h3, .spetic-brand-grid article > p { margin-inline: var(--sp4) }
.spetic-brand-grid article > h3 { margin-block: var(--sp4) var(--sp2) }
.spetic-brand-grid article > p { margin-block: 0 var(--sp4); color: var(--ink-muted); line-height: 1.55 }
.spetic-brand-swatch { display: grid; min-height: 14rem; place-items: center; border-bottom: 1px solid var(--line) }
.spetic-brand-swatch.light { background: #f5f3ee; color: #11141a }
.spetic-brand-swatch.dark { background: #11141a; color: #f5f3ee }
.spetic-brand-swatch svg { width: 58%; max-height: 5rem }
.spetic-brand-swatch.mark svg { width: 4.5rem }
.spetic-contact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line) }
.spetic-contact-strip > div { display: flex; min-height: 9rem; flex-direction: column; justify-content: space-between; padding: var(--sp4) }
.spetic-contact-strip > div + div { border-left: 1px solid var(--line) }
.spetic-contact-strip a, .spetic-contact-strip strong { font-size: var(--t-title); font-weight: 500 }

.spetic-dev-demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr); gap: clamp(2rem, 7vw, 7rem); align-items: center }
.spetic-dev-copy p { max-width: 40ch; color: var(--ink-muted); line-height: 1.6 }
.spetic-code { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: #11141a; color: #f5f3ee; box-shadow: 0 30px 80px rgba(0,0,0,.18) }
.spetic-code > div { display: flex; justify-content: space-between; gap: var(--sp3); padding: var(--sp3) var(--sp4); border-bottom: 1px solid rgba(255,255,255,.1); font-family: var(--mono); font-size: var(--t-small); color: rgba(255,255,255,.56) }
.spetic-code > div b { color: #fff; font-weight: 500 }
.spetic-code pre { min-height: 18rem; margin: 0; padding: clamp(24px, 4vw, 46px); overflow: auto; font-family: var(--mono); font-size: var(--t-body); line-height: 1.75 }

@media (max-width: 820px) {
  .spetic-template-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .spetic-template-flow > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line) }
  .spetic-template-flow > div:nth-child(4) { border-top: 1px solid var(--line) }
  .spetic-brand-grid { grid-template-columns: minmax(0, 1fr) }
  .spetic-contact-strip { grid-template-columns: minmax(0, 1fr) }
  .spetic-contact-strip > div + div { border-top: 1px solid var(--line); border-left: 0 }
  .spetic-article-layout { grid-template-columns: minmax(0, 1fr) }
  .spetic-article-layout aside { position: static }
  .spetic-dev-demo { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
  .spetic-template-flow { grid-template-columns: minmax(0, 1fr) }
  .spetic-template-flow > div + div { border-top: 1px solid var(--line); border-left: 0 }
  .spetic-code pre { min-height: 14rem; font-size: 12px }
}
/* Each audience tells a different operational story: mandate ledger for
   consultants, monthly operating console for PME, organization matrix for
   multi-company teams. */
.solution-consulting .solution-highlights { grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) !important }
.solution-consulting .solution-highlights > :first-child { grid-row:span 2 }
.solution-consulting .solution-highlights > :first-child .tex { min-height:100% }
.solution-operations .solution-highlights { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)) !important }
.solution-operations .solution-highlights > :nth-child(1) { grid-column:span 7 }
.solution-operations .solution-highlights > :nth-child(2) { grid-column:span 5 }
.solution-operations .solution-highlights > :nth-child(3) { grid-column:3/span 8 }
.solution-portfolio .solution-highlights { grid-template-columns:repeat(3,minmax(260px,1fr)) !important; overflow-x:auto; scroll-snap-type:x mandatory }
.solution-portfolio .solution-highlights > * { scroll-snap-align:start }
.solution-process-consulting .hairlist { max-width:900px; margin-left:auto }
.solution-process-operations .hairlist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line-2) }
.solution-process-operations .hairitem { align-items:flex-start; border-top:0; border-left:1px solid var(--line-2); padding:var(--sp5) }
.solution-process-operations .hairitem:first-child { border-left:0 }
.solution-process-portfolio .hairlist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp4) }
.solution-process-portfolio .hairitem { min-height:220px; align-items:flex-end; border:1px solid var(--line-2); padding:var(--sp5); background:var(--s1) }
@media(max-width:760px){.solution-consulting .solution-highlights,.solution-operations .solution-highlights,.solution-process-operations .hairlist,.solution-process-portfolio .hairlist{grid-template-columns:minmax(0,1fr)!important}.solution-consulting .solution-highlights>*{grid-row:auto}.solution-operations .solution-highlights>*{grid-column:auto!important}.solution-process-operations .hairitem{border-left:0;border-top:1px solid var(--line-2)}}

/* ----------------------- editorial composition system --------------------
   The inner pages no longer repeat one generic card/list stack. The visual
   cadence borrows the useful principles of product-led AI sites — a concrete
   task, large proof points, and clear entry paths — while keeping Spetic's
   accounting language, paper surfaces and human confirmation model. */
.signal-band {
  position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden; border-block:1px solid var(--line-2);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;
}
.signal-band-cell { display:flex; min-height:260px; flex-direction:column; padding:clamp(24px,4vw,52px); background:color-mix(in srgb,var(--bg) 88%,transparent) }
.signal-band-cell + .signal-band-cell { border-left:1px solid var(--line-2) }
.signal-band-cell strong { margin-bottom:auto; font-size:clamp(3rem,6vw,5.8rem); font-weight:450; letter-spacing:-.06em; line-height:.9; color:var(--ink) }
.signal-band-cell > span { margin-top:var(--sp5); font-size:var(--t-title); font-weight:550; letter-spacing:-.02em }
.signal-band-cell p { max-width:31ch; margin:var(--sp2) 0 0; color:var(--ink-muted); line-height:1.55 }

.scenario-showcase { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); align-items:center; gap:clamp(36px,7vw,96px) }
.scenario-copy { display:flex; flex-direction:column; align-items:flex-start }
.scenario-copy .h2 { margin:var(--sp2) 0 var(--sp4); max-width:13ch }
.scenario-copy .sub { margin:0 0 var(--sp5); max-width:42ch }
.scenario-console { overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:var(--r-xl); background:#111419; color:#f4f5f6; box-shadow:0 32px 90px rgba(9,12,16,.2) }
.scenario-console-bar { display:flex; min-height:52px; align-items:center; justify-content:space-between; gap:var(--sp3); padding-inline:var(--sp4); border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--mono); font-size:var(--t-meta); color:rgba(255,255,255,.52) }
.scenario-console-bar span { display:flex; align-items:center; gap:8px; color:#fff }
.scenario-console-bar i { width:8px; height:8px; border-radius:50%; background:#48bb78; box-shadow:0 0 0 4px rgba(72,187,120,.12) }
.scenario-request { display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--sp3); padding:var(--sp4); border-bottom:1px solid rgba(255,255,255,.1) }
.scenario-request span,.scenario-result-head,.scenario-audit { font-family:var(--mono); font-size:var(--t-meta); color:rgba(255,255,255,.46) }
.scenario-request p { margin:0; color:rgba(255,255,255,.9); line-height:1.55 }
.scenario-result { padding:var(--sp4) }
.scenario-result-head { display:flex; justify-content:space-between; gap:var(--sp3); padding-bottom:var(--sp3) }
.scenario-result-head code { color:rgba(255,255,255,.52) }
.scenario-step { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:var(--sp3); min-height:48px; border-top:1px solid rgba(255,255,255,.08); font-size:var(--t-small) }
.scenario-step i { width:7px; height:7px; border-radius:50%; background:#48bb78 }
.scenario-step.is-review i { background:#d6a744 }
.scenario-step.is-blocked i { background:#d46a6a }
.scenario-step b { min-width:0; overflow:hidden; font-weight:500; text-overflow:ellipsis; white-space:nowrap }
.scenario-step span { color:rgba(255,255,255,.55); text-align:right }
.scenario-audit { display:grid; grid-template-columns:auto 1fr auto auto; gap:var(--sp3); padding:var(--sp3) var(--sp4); border-top:1px solid rgba(255,255,255,.1) }
.scenario-audit b { color:rgba(255,255,255,.75); font-weight:500 }

.content-index { border-block:1px solid var(--line-2) }
.content-index article { display:grid; grid-template-columns:clamp(76px,10vw,156px) minmax(0,1fr); gap:var(--sp5); align-items:start; min-height:176px; padding-block:var(--sp5) }
.content-index article + article { border-top:1px solid var(--line-2) }
.content-index article > span { font-family:var(--mono); font-size:clamp(2.2rem,5vw,4.8rem); letter-spacing:-.055em; color:var(--ink-faint); line-height:1 }
.content-index h3 { margin:0 0 var(--sp2); font-size:var(--t-title); font-weight:550; letter-spacing:-.02em }
.content-index p { max-width:58ch; margin:0; color:var(--ink-muted); line-height:1.65 }

.legal-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line-2) }
.legal-summary-grid article { min-height:250px; padding:var(--sp5) }
.legal-summary-grid article + article { border-left:1px solid var(--line-2) }
.legal-summary-grid span,.legal-responsibilities span { font-family:var(--mono); font-size:var(--t-meta); color:var(--ink-faint) }
.legal-summary-grid h3,.legal-responsibilities h3 { margin:var(--sp7) 0 var(--sp2); font-size:var(--t-title); font-weight:550; letter-spacing:-.02em }
.legal-summary-grid p,.legal-responsibilities p { margin:0; color:var(--ink-muted); line-height:1.65 }
.legal-responsibilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp4) }
.legal-responsibilities article { min-height:260px; padding:var(--sp5); border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--s1) }
.legal-detail { background:var(--s0) }
.legal-detail-layout { display:grid; grid-template-columns:minmax(190px,.32fr) minmax(0,.68fr); gap:clamp(32px,5vw,76px); align-items:start }
.legal-toc { position:sticky; top:100px; display:grid; gap:12px; padding:var(--sp4); border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--s1) }
.legal-toc a { color:var(--ink-muted); text-decoration:none; font-size:var(--t-small); line-height:1.35 }
.legal-toc a:hover { color:var(--ink) }
.legal-body { display:grid; gap:var(--sp5) }
.legal-body section { scroll-margin-top:120px; padding:clamp(24px,3vw,36px); border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--s1) }
.legal-section-num { font-family:var(--mono); font-size:var(--t-meta); color:var(--ink-faint) }
.legal-body h2 { max-width:18ch; margin:var(--sp2) 0 var(--sp3); font-size:clamp(1.55rem,2.4vw,2.2rem); line-height:1.05; letter-spacing:-.035em }
.legal-body p { max-width:76ch; margin:0; color:var(--ink-muted); line-height:1.75 }
.legal-body p + p { margin-top:1rem }
.content-page-legal .page-hero { padding-bottom: clamp(72px, 8vw, 124px) }
.content-page-legal .page-hero .wrap > div { max-width:72rem }
.content-page-legal .page-hero .display { max-width:14ch }
.content-page-legal .page-hero .lead { max-width:58ch }
.content-page-legal .content-overview { background:var(--s2) }
.content-page-legal .closer { text-align:left }
.content-page-legal .closer .reveal { align-items:flex-start }

.choice-block > .h2 { max-width:18ch; margin:0 0 var(--sp6) }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp4) }
.choice-card { display:flex; min-height:440px; flex-direction:column; padding:clamp(24px,4vw,48px); border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--s1) }
.choice-card .eyebrow { margin:0 0 var(--sp5) }
.choice-card h3 { max-width:13ch; margin:0 0 var(--sp3); font-size:clamp(1.7rem,3vw,2.7rem); font-weight:520; letter-spacing:-.04em; line-height:1.04 }
.choice-card > p:not(.eyebrow) { max-width:42ch; margin:0; color:var(--ink-muted); line-height:1.6 }
.choice-card ul { display:flex; flex-direction:column; gap:var(--sp2); margin:var(--sp6) 0; padding:0; list-style:none }
.choice-card li { display:flex; align-items:center; gap:10px; color:var(--ink-muted); font-size:var(--t-small) }
.choice-card li span { color:var(--green-text) }
.choice-card .btn { width:100%; margin-top:auto; justify-content:center }

.content-scenario { border-block:1px solid var(--line-2) }
.content-signals { padding-top:0 }
.content-page-resource .content-process .hairlist { max-width:940px; margin-inline:auto }
.content-page-company .content-overview .cardgrid { grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr))!important }

@media(max-width:900px){
  .signal-band,.legal-summary-grid,.legal-responsibilities,.legal-detail-layout { grid-template-columns:minmax(0,1fr) }
  .legal-toc { position:relative; top:auto }
  .signal-band-cell { min-height:210px }
  .signal-band-cell + .signal-band-cell,.legal-summary-grid article + article { border-top:1px solid var(--line-2); border-left:0 }
  .scenario-showcase { grid-template-columns:minmax(0,1fr) }
  .scenario-copy .h2 { max-width:18ch }
  .choice-card { min-height:390px }
  .content-page-company .content-overview .cardgrid { grid-template-columns:minmax(0,1fr)!important }
}
@media(max-width:640px){
  .choice-grid { grid-template-columns:minmax(0,1fr) }
  .choice-card { min-height:0 }
  .content-index article { grid-template-columns:58px minmax(0,1fr); gap:var(--sp3) }
  .scenario-request { grid-template-columns:minmax(0,1fr) }
  .scenario-request span { display:none }
  .scenario-step { grid-template-columns:10px minmax(0,1fr) }
  .scenario-step span { grid-column:2; text-align:left }
  .scenario-audit { grid-template-columns:auto 1fr }
}
.integration-compatibility { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp2); margin:var(--sp4) 0 0; font-family:var(--mono); font-size:var(--t-meta); color:var(--ink-faint) }
.integration-compatibility span { margin-right:var(--sp2) }
.integration-compatibility b { padding:5px 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink-muted); font-weight:500 }