/* CognitGo - shared design system  -  single source of truth
   Every public page links ONLY this file for styling.
   Fonts: Bricolage Grotesque (display) - Geist (body/UI) - Geist Mono (figures).
   Edit the look here once and every page updates. Do not add new fonts,
   colours or weights without a concrete page that fails without them. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
  --bg:        #FAFAFA;
  --bg-warm:   #F4F3EF;
  --ink:       #0A0A0A;
  --body:      #444444;
  --muted:     #777777;
  --line:      #E4E3DE;
  --coral:     #FF4A1C;
  --tint:      #FFE8E1;

  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --disp: "Bricolage Grotesque", "Geist", sans-serif;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 80px);
  --rail: 132px; /* margin label column on desktop */
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv01" 1;
}

::selection{ background: var(--coral); color:#fff; }

a{ color: inherit; text-decoration: none; }

/* ---------- shared primitives ---------- */
.wrap{ max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

.mono{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

.eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width: 26px; height:1px; background: var(--coral);
  display:inline-block;
}

.coral{ color: var(--coral); }
.tnum{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* numeric figure helper */
.fig{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  font-weight: 500;
}

/* buttons */
.btn{
  --bd: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  display:inline-flex; align-items:center; gap:.55em;
  padding: 13px 22px;
  border: 1px solid var(--bd);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn .arr{ transition: transform .2s ease; }
.btn:hover .arr{ transform: translateX(3px); }

.btn--solid{ background: var(--ink); color: #fff; }
.btn--solid:hover{ background: var(--coral); border-color: var(--coral); }
.btn--coral{ background: var(--coral); border-color: var(--coral); color:#fff; }
.btn--coral:hover{ background: var(--ink); border-color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color:#fff; }

/* inline text link with animated underline */
.tlink{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--coral);
  padding-bottom: 2px;
  transition: color .18s ease, gap .18s ease;
}
.tlink:hover{ color: var(--coral); gap:.7em; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-stuck{ border-bottom-color: var(--line); }
.nav__in{
  max-width: var(--wrap); margin:0 auto; padding-inline: var(--pad);
  height: 70px; display:flex; align-items:center; gap: 28px;
}
.brand{
  font-family: var(--disp);
  font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em;
}
.brand .dot{ color: var(--coral); }
.nav__products{
  display:flex; align-items:center; gap: 0;
  margin-left: 10px;
}
.nav__products a{
  font-family: var(--mono);
  font-size: .73rem; letter-spacing: .04em;
  color: var(--muted); padding: 6px 0;
  position: relative; transition: color .16s ease;
}
.nav__products .sep{ color: var(--line); padding-inline: 12px; user-select:none; }
.nav__products a:hover{ color: var(--ink); }
.nav__products a.is-active{ color: var(--ink); }
.nav__products a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--coral); border-radius:2px; }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap: 18px; }
.nav__right .login{ font-size:.92rem; color: var(--body); transition: color .16s; }
.nav__right .login:hover{ color: var(--ink); }
.nav__cta{
  font-family: var(--sans); font-size:.9rem; font-weight:500;
  background: var(--coral); color:#fff; padding: 10px 18px;
  border: 1px solid var(--coral);
  transition: background .18s ease, border-color .18s;
}
.nav__cta:hover{ background: var(--ink); border-color: var(--ink); }
.nav__menu{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; }

@media (max-width: 1000px){
  .nav__products, .nav__right{ display:none; }
  .nav__menu{ display:flex; }
}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ position: relative; }
.band{ border-top: 1px solid var(--line); }
.band--warm{ background: var(--bg-warm); }

.sec{
  display:grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 clamp(24px, 4vw, 56px);
  padding-block: clamp(72px, 9vw, 132px);
}
.sec__rail{
  position: sticky; top: 92px; align-self: start;
}
.sec__marker{
  font-family: var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform: uppercase; color: var(--muted);
  display:flex; flex-direction: column; gap: 6px;
}
.sec__marker b{ color: var(--coral); font-weight:600; }
.sec__marker .lbl{ color: var(--ink); font-weight:500; }
.sec__body{ min-width: 0; }

@media (max-width: 820px){
  .sec{ grid-template-columns: 1fr; gap: 0; }
  .sec__rail{ position: static; margin-bottom: 22px; }
  .sec__marker{ flex-direction: row; align-items: baseline; gap: 12px; }
}

/* headings */
.h-sec{
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(2rem, 4.3vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.lede{
  font-size: clamp(1.08rem, 1.4vw, 1.32rem);
  line-height: 1.55;
  color: var(--body);
  max-width: 64ch;
  margin: 0 0 8px;
}
.lede strong{ color: var(--ink); font-weight: 600; }
p.body{ color: var(--body); max-width: 64ch; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top: clamp(48px, 7vw, 96px); padding-bottom: 0; }
.hero__kicker{ margin-bottom: 30px; }
.hero h1{
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.hero h1 .b2{ color: var(--muted); }
.hero h1 .b2 em{ font-style: normal; color: var(--ink); }
.hero h1 .b2 .u{
  font-style: normal; color: var(--ink);
  background: linear-gradient(transparent 62%, var(--tint) 62%);
  padding: 0 .04em;
}
.hero__grid{
  display:grid; grid-template-columns: 1.55fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-top: clamp(34px, 4vw, 52px);
}
.hero__sub{
  font-size: clamp(1.06rem, 1.35vw, 1.26rem);
  line-height: 1.55; color: var(--body); margin: 0 0 30px;
  max-width: 52ch;
}
.hero__sub b{ color: var(--ink); font-weight:600; }
.hero__cta{ display:flex; flex-wrap: wrap; gap: 12px; }

.hero__stat{
  border: 1px solid var(--line);
  background: var(--bg-warm);
  padding: 26px 28px 24px;
}
.hero__stat .top{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.hero__stat .live{ display:inline-flex; align-items:center; gap:7px; color: var(--coral); }
.hero__stat .pulse{
  width:7px; height:7px; border-radius:50%; background: var(--coral);
  box-shadow: 0 0 0 0 var(--coral);
  animation: pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 55%, transparent); }
  70%{ box-shadow: 0 0 0 9px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
.hero__stat .num{
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(3rem, 5.2vw, 4.4rem); line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.hero__stat .cap{ margin-top: 12px; color: var(--body); font-size: .98rem; max-width: 26ch; }

/* hero ledger strip */
.hero__strip{
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: repeat(4, 1fr);
}
.hero__strip .cell{
  padding: 22px 18px;
  border-right: 1px solid var(--line);
}
.hero__strip .cell:last-child{ border-right: 0; }
.hero__strip .k{ font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.hero__strip .v{ margin-top: 8px; font-family: var(--mono); font-size: 1.5rem; font-weight:500; letter-spacing:-.02em; }
.hero__strip .v small{ font-size: .8rem; color: var(--muted); font-weight: 400; }

@media (max-width: 880px){
  .hero__grid{ grid-template-columns: 1fr; align-items: start; }
  .hero__strip{ grid-template-columns: repeat(2, 1fr); }
  .hero__strip .cell:nth-child(2){ border-right: 0; }
  .hero__strip .cell:nth-child(1), .hero__strip .cell:nth-child(2){ border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px){
  .hero__strip{ grid-template-columns: 1fr; }
  .hero__strip .cell{ border-right: 0; border-bottom: 1px solid var(--line); }
  .hero__strip .cell:last-child{ border-bottom: 0; }
}

/* ============================================================
   01 — THE PRODUCT  ·  numbered jobs + ledgers
   ============================================================ */
.jobs{ margin-top: 56px; border-top: 1px solid var(--line); }
.job{
  display:grid; grid-template-columns: 56px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.job__n{ font-family: var(--mono); font-size: 1rem; color: var(--coral); font-weight:500; padding-top: 3px; }
.job__h{
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 12px;
}
.job__h .lead{ color: var(--muted); }
.job p{ margin: 0; color: var(--body); max-width: 62ch; }

/* ledger blocks */
.ledgers{ margin-top: 64px; display:grid; gap: 24px; }
.ledger{
  border: 1px solid var(--line);
  background: #fff;
}
.band--warm .ledger{ background: #fff; }
.ledger__cap{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--muted); padding: 16px 24px; border-bottom: 1px solid var(--line);
  display:flex; gap: 10px; flex-wrap: wrap;
}
.ledger__cap .dot{ color: var(--line); }
.ledger__rows{ }
.lrow{
  display:grid; grid-template-columns: minmax(140px, 0.42fr) 1fr;
  gap: clamp(16px, 4vw, 48px);
  align-items: baseline;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}
.lrow:last-child{ border-bottom: 0; }
.lrow .num{
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: .95;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.lrow .lbl{ color: var(--body); font-size: 1.05rem; align-self: center; }
.lrow.is-key .num{ color: var(--coral); }
/* Matchback ledger: the widest figure ($129,951.57) needs a number column sized
   to its real content, or its end prints over the label. Width scales with the
   figure's own clamp and is shared by all four rows, so labels stay aligned and
   the block reads consistently. */
.ledger--matchback .lrow{ grid-template-columns: clamp(15.5rem, 28vw, 23rem) 1fr; }
.ledger__note{
  padding: 18px 24px; background: var(--bg-warm);
  color: var(--muted); font-size: .92rem; line-height: 1.5;
  border-top: 1px solid var(--line);
}
.band--warm .ledger__note{ background: #FAF9F6; }

@media (max-width: 560px){
  .lrow{ grid-template-columns: 1fr; gap: 6px; }
  .ledger--matchback .lrow{ grid-template-columns: 1fr; }
}

/* ============================================================
   02 — WHY IT WORKS  ·  pull quote
   ============================================================ */
.pquote{
  margin: 52px 0 36px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 40px 0 38px;
}
.pquote blockquote{
  margin:0;
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.08;
  letter-spacing: -.025em; text-wrap: balance;
  max-width: 22ch;
}
.pquote blockquote .a{ color: var(--coral); }
.twocol{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
  margin-bottom: 14px;
}
@media (max-width: 700px){ .twocol{ grid-template-columns: 1fr; gap: 18px; } }

/* ============================================================
   03 — FOUR OPTIONS
   ============================================================ */
.options{
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.opt{
  padding: 30px 30px 34px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  transition: background .2s ease;
}
.band--warm .opt{ background: var(--bg-warm); }
.opt:nth-child(2n){ border-right: 0; }
.opt:nth-child(n+3){ border-bottom: 0; }
.opt:hover{ background: #fff; }
.opt__top{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.opt__n{ font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.opt__name{
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(1.4rem, 2.3vw, 1.95rem); letter-spacing: -.02em;
  margin: 0 0 16px;
}
.opt__tags{
  display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.opt__tags span{
  font-family: var(--mono); font-size:.68rem; letter-spacing:.04em;
  color: var(--body); border: 1px solid var(--line);
  padding: 5px 9px; background: color-mix(in srgb, var(--bg) 60%, #fff);
}
.opt__prob{ color: var(--body); font-size: .98rem; margin: 0; }
.opt__prob b{ color: var(--ink); font-weight: 600; }

/* chosen option */
.opt--chosen{
  background: var(--ink) !important;
  color: #fff;
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid var(--line);
}
.opt--chosen .opt__n{ color: rgba(255,255,255,.55); }
.opt--chosen .opt__name{ color:#fff; }
.opt--chosen .opt__tags span{
  color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04);
}
.opt--chosen .opt__prob{ color: rgba(255,255,255,.82); }
.opt--chosen .opt__prob b{ color:#fff; }
.opt__badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background: var(--coral); color:#fff; padding: 6px 11px;
}
.opt--chosen .opt__top{ margin-bottom: 14px; }
.opt--chosen .benefits{
  list-style:none; margin: 0; padding: 0;
  columns: 2; column-gap: 40px;
}
.opt--chosen .benefits li{
  break-inside: avoid; padding: 9px 0 9px 22px; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.85); font-size: .98rem; line-height: 1.4;
}
.opt--chosen .benefits li::before{
  content: ""; position:absolute; left: 0; top: 16px;
  width: 9px; height: 9px; background: var(--coral);
}
@media (max-width: 700px){
  .options{ grid-template-columns: 1fr; }
  .opt{ border-right: 0; }
  .opt--chosen .benefits{ columns: 1; }
}

/* ============================================================
   05 — FAQ accordion
   ============================================================ */
.faq{ margin-top: 50px; border-top: 1px solid var(--line); }
.qa{ border-bottom: 1px solid var(--line); }
.qa__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items: baseline; gap: 20px;
  padding: 28px 0; font-family: var(--disp);
  font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -.02em; color: var(--ink); line-height: 1.15;
}
.qa__q .idx{ font-family: var(--mono); font-size:.8rem; color: var(--coral); flex: 0 0 auto; padding-top: .4em; }
.qa__q .sign{
  margin-left:auto; flex:0 0 auto; width: 26px; height: 26px;
  position: relative; align-self: center; transition: transform .3s ease;
}
.qa__q .sign::before, .qa__q .sign::after{
  content:""; position:absolute; background: var(--ink);
  left:50%; top:50%; translate:-50% -50%;
}
.qa__q .sign::before{ width: 16px; height: 1.6px; }
.qa__q .sign::after{ width: 1.6px; height: 16px; transition: opacity .25s ease, transform .3s ease; }
.qa.is-open .qa__q .sign::after{ opacity: 0; transform: rotate(90deg); }
.qa.is-open .qa__q{ color: var(--coral); }
.qa__a{
  overflow: hidden; max-height: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}
.qa__a-in{ padding: 0 0 30px 44px; color: var(--body); max-width: 70ch; }
.qa__a-in p{ margin: 0; }
@media (max-width: 560px){ .qa__a-in{ padding-left: 0; } }

/* ============================================================
   04 — operation links row
   ============================================================ */
.linkrow{ margin-top: 30px; display:flex; flex-wrap:wrap; gap: 28px; align-items:center; }

/* ============================================================
   06 — SAMPLE REPORT + form
   ============================================================ */
.sample{
  display:grid; grid-template-columns: 1fr 0.92fr;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 48px; align-items: start;
}
@media (max-width: 860px){ .sample{ grid-template-columns: 1fr; } }

.report{
  border: 1px solid var(--ink);
  background: #fff;
  box-shadow: 14px 14px 0 var(--tint);
}
.report__bar{
  display:flex; align-items:center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted);
}
.report__bar .tag{ color: var(--coral); border:1px solid var(--coral); padding: 3px 8px; }
.report__rows{ padding: 8px 22px; }
.report__row{
  display:flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.report__row:last-child{ border-bottom: 0; }
.report__row .l{ color: var(--body); font-size: 1rem; }
.report__row .v{ font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.report__row.total .v{ color: var(--coral); }
.report__cap{ padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-warm); color: var(--muted); font-size: .86rem; line-height: 1.5; }

.signup{ align-self: stretch; }
.signup p.body{ margin-top: 0; }
.form{
  margin-top: 26px; border: 1px solid var(--line); background: #fff; padding: 8px;
  display:flex; gap: 8px;
}
.form input{
  flex:1; min-width: 0; border: 0; background: transparent;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 12px 14px;
}
.form input::placeholder{ color: var(--muted); }
.form input:focus{ outline: none; }
.form.is-focus{ border-color: var(--ink); }
.form button{
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: var(--coral); color: #fff;
  font-family: var(--sans); font-weight: 500; font-size: .95rem;
  padding: 0 22px; transition: background .18s ease;
}
.form button:hover{ background: var(--ink); }
.form__msg{ margin-top: 12px; font-size: .9rem; min-height: 1.2em; }
.form__msg.err{ color: var(--coral); }
.form__msg.ok{ color: #1f8a5b; }
.form__msg .fig{ }
.signup__sec{ margin-top: 22px; font-size: .98rem; color: var(--muted); }
.signup__sec a{ color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color .18s; }
.signup__sec a:hover{ border-color: var(--coral); }

.success{
  margin-top: 26px; border: 1px solid #1f8a5b; background: #F2FBF6;
  padding: 22px 24px; display:none;
}
.success.show{ display:block; animation: rise .4s ease both; }
@keyframes rise{ from{ opacity:0; transform: translateY(8px);} to{opacity:1;transform:none;} }
.success h4{ margin:0 0 6px; font-family: var(--disp); font-size: 1.15rem; }
.success p{ margin:0; color: var(--body); font-size: .96rem; }

/* ============================================================
   CLOSE
   ============================================================ */
.close{
  background: var(--ink); color: #fff;
  padding-block: clamp(80px, 11vw, 150px);
}
.close__in{ max-width: var(--wrap); margin:0 auto; padding-inline: var(--pad); }
.close h2{
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.03em;
  margin: 0; max-width: 20ch; text-wrap: balance;
}
.close h2 .dim{ color: rgba(255,255,255,.5); }
.close__attr{
  margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); display:flex; gap: 10px; flex-wrap: wrap; align-items:center;
}
.close__attr .b{ color: var(--coral); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background: var(--bg-warm); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px); }
.foot__in{ max-width: var(--wrap); margin:0 auto; padding-inline: var(--pad); }
.foot__top{
  display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(28px, 4vw, 56px);
}
.foot__brand .b{ font-family: var(--disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.foot__brand .b .dot{ color: var(--coral); }
.foot__brand p{ margin: 14px 0 0; color: var(--muted); font-size: .98rem; max-width: 34ch; }
.foot__col h5{
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px; font-weight: 500;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction: column; gap: 11px; }
.foot__col a{ color: var(--body); font-size: .98rem; transition: color .16s ease; }
.foot__col a:hover{ color: var(--coral); }
.foot__bottom{
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line);
  display:flex; flex-wrap: wrap; gap: 8px 16px; align-items:center;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted);
}
.foot__bottom .sep{ color: var(--line); }
.foot__bottom a:hover{ color: var(--ink); }
@media (max-width: 760px){
  .foot__top{ grid-template-columns: 1fr 1fr; }
  .foot__brand{ grid-column: 1 / -1; }
}

/* ============================================================
   scroll reveal
   ============================================================ */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity: 1; transform: none; }
/* shown immediately, clock-independent (initial viewport) */
.reveal.now{ opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .pulse{ animation: none !important; }
}

/* ============================================================
   SITE-WIDE COMPONENTS  ·  added for the full 7-page build
   All reuse the existing tokens (colours, fonts, --line borders).
   No new fonts, no new colours.
   ============================================================ */

/* dark section (same ink panel as the close, used mid-page) */
.band--dark{ background: var(--ink); color:#fff; border-top: 1px solid var(--ink); }
.band--dark .h-sec{ color:#fff; }
.band--dark .lede{ color: rgba(255,255,255,.74); }
.band--dark .sec__marker .lbl{ color:#fff; }
.band--dark .eyebrow{ color: rgba(255,255,255,.55); }

/* generic labelled card grid (beliefs, principles, who-it's-for, stack, two products, frameworks…) */
.cardgrid{ margin-top: 52px; display:grid; gap: 0; border: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card{ padding: 30px 30px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.band--warm .card{ background:#fff; }
.card__n{ font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--coral); display:block; margin-bottom: 14px; }
.card__h{ font-family: var(--disp); font-weight:600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.12; letter-spacing:-.02em; margin: 0 0 12px; }
.card p{ margin: 0 0 12px; color: var(--body); font-size: .99rem; }
.card p:last-child{ margin-bottom: 0; }
.card .spec{ margin-top: 16px; border-top: 1px solid var(--line); }
.card .spec .r{ display:flex; justify-content:space-between; gap:14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size:.78rem; color: var(--body); }
.card .spec .r:last-child{ border-bottom:0; }
.card .spec .r b{ color: var(--ink); font-weight:600; }
.card--hot{ background: var(--ink) !important; color:#fff; }
.card--hot .card__h{ color:#fff; }
.card--hot p{ color: rgba(255,255,255,.82); }
.card--hot .card__n{ color: var(--coral); }
.cardgrid .card:last-child{ border-right:0; }

/* people (founders / leadership / BDC) */
.people{ margin-top: 40px; display:grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.person{ border:1px solid var(--line); background:#fff; padding: 26px 24px; }
.band--warm .person{ background:#fff; }
.person__av{ width: 84px; height: 84px; border-radius: 50%; background: var(--bg-warm); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-weight:600; color: var(--coral); margin-bottom: 16px; }
.person__av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.person__av.is-fit{ position:relative; overflow:hidden; clip-path: circle(50%); }
.person__av.is-fit::before{ content:""; position:absolute; inset:-25%; background:var(--ava) center/cover; filter:blur(7px) saturate(1.08); }
.person__av.is-fit img{ position:relative; z-index:1; object-fit:contain; }
.person__name{ font-family: var(--disp); font-weight:600; font-size: 1.18rem; letter-spacing:-.01em; }
.person__role{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-top: 4px; }
.person p{ margin: 12px 0 0; color: var(--body); font-size:.95rem; }

/* compare table (Controller does/doesn't · is / is-not) */
.compare{ margin-top: 44px; border:1px solid var(--line); display:grid; grid-template-columns: 1fr 1fr; }
.compare__h{ font-family: var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; padding: 16px 22px; border-bottom:1px solid var(--line); background: var(--bg-warm); }
.compare__h.b{ color: var(--coral); }
.compare__col{ border-right:1px solid var(--line); }
.compare__col:last-child{ border-right:0; }
.compare__row{ padding: 16px 22px; border-bottom:1px solid var(--line); color: var(--body); font-size:.98rem; }
.compare__col .compare__row:last-child{ border-bottom:0; }
@media (max-width:640px){ .compare{ grid-template-columns:1fr; } .compare__col{ border-right:0; } }

/* is / is-not callout (two stacked panels) */
.isnot{ margin-top: 40px; display:grid; grid-template-columns:1fr 1fr; gap: 18px; }
.isnot__p{ border:1px solid var(--line); background:#fff; padding: 24px 26px; }
.isnot__p .k{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--coral); margin-bottom: 10px; }
.isnot__p.no .k{ color: var(--muted); }
.isnot__p p{ margin:0; color: var(--body); }
@media (max-width:640px){ .isnot{ grid-template-columns:1fr; } }

/* distribution / threshold bars (ReserveIQ) */
.bars{ margin-top: 28px; display:flex; flex-direction:column; gap: 18px; }
.bar__top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom: 8px; }
.bar__lbl{ color: var(--body); font-size: .98rem; }
.bar__val{ font-family: var(--mono); font-weight:500; font-size:1.05rem; }
.bar__track{ height: 12px; background: var(--bg-warm); border:1px solid var(--line); position:relative; }
.bar__fill{ position:absolute; inset:0 auto 0 0; background: var(--coral); }

/* chat / Slack coaching mockup (BDC) */
.chat{ border:1px solid var(--ink); background:#fff; box-shadow: 14px 14px 0 var(--tint); }
.chat__bar{ display:flex; align-items:center; gap:12px; padding: 14px 20px; border-bottom:1px solid var(--line); font-family: var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }
.chat__sender{ display:flex; align-items:center; gap:10px; padding: 16px 20px 4px; }
.chat__av{ width:30px; height:30px; border-radius:6px; background: var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600; font-size:.85rem; }
.chat__who{ font-weight:600; font-size:.95rem; } .chat__who small{ color: var(--muted); font-weight:400; margin-left:6px; }
.chat__body{ padding: 8px 20px 22px; color: var(--body); font-size:.96rem; line-height:1.55; }
.chat__body p{ margin: 0 0 12px; } .chat__body strong{ color: var(--ink); }
.chat__body ul{ margin: 0 0 12px; padding-left: 18px; } .chat__body li{ margin-bottom: 8px; }
.chat__cap{ padding: 14px 20px; border-top:1px solid var(--line); background: var(--bg-warm); color: var(--muted); font-size:.84rem; }

/* transcript / dialogue (Results, BDC framework examples) */
.tscript{ margin-top: 28px; border:1px solid var(--line); background:#fff; }
.tscript__cap{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); padding: 14px 22px; border-bottom:1px solid var(--line); }
.line{ padding: 16px 22px; border-bottom:1px solid var(--line); }
.line:last-child{ border-bottom:0; }
.line .who{ font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:6px; }
.line.rep .who{ color: var(--coral); }
.line p{ margin:0; color: var(--ink); }
.line.note{ background: var(--bg-warm); } .line.note p{ color: var(--body); }

/* data table (ReserveIQ exec summary, breakdowns) */
.dtable{ width:100%; border-collapse:collapse; margin-top: 16px; font-size:.95rem; }
.dtable th, .dtable td{ text-align:left; padding: 12px 14px; border-bottom:1px solid var(--line); }
.dtable th{ font-family: var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); font-weight:500; }
.dtable td.n, .dtable th.n{ text-align:right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dtable tr.total td{ border-top: 2px solid var(--ink); border-bottom:0; font-weight:600; }
.dtable tr.total td.n{ color: var(--coral); }

/* timeline phases (ROboT conversion window) */
.timeline{ margin-top: 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns: repeat(4,1fr); }
.phase{ padding: 22px 18px 22px 0; border-right:1px solid var(--line); }
.phase:last-child{ border-right:0; }
.phase .d{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--coral); }
.phase .t{ margin-top: 8px; color: var(--ink); font-weight:500; }
@media (max-width:700px){ .timeline{ grid-template-columns: repeat(2,1fr); } }

/* Conversion-window rail timeline (Section 5, robot.html) — static, not interactive.
   Band (30–60) is the only coral; markers stay ink, track stays line. */
.cwrail{ position:relative; margin-top:40px; padding-top:2px; }
.cwrail__nums{ position:relative; height:16px; }
.cwrail__nums span{ position:absolute; top:0; transform:translateX(-50%);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink); }
.cwrail__nums span:first-child{ transform:translateX(0); }
.cwrail__nums span:last-child{ transform:translateX(-100%); }
.cwrail__track{ position:relative; height:14px; margin:6px 0 4px; }
.cwrail__line{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); transform:translateY(-50%); }
.cwrail__band{ position:absolute; left:33.333%; width:33.334%; top:50%; height:14px;
  transform:translateY(-50%); background:var(--tint); border-radius:7px; }
.cwrail__band::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:var(--coral); transform:translateY(-50%); }
.cwrail__dot{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
  background:var(--ink); transform:translate(-50%,-50%); z-index:2; }
.cwrail__labels{ position:relative; height:20px; margin-top:12px; }
.cwrail__labels span{ position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--sans); font-size:.85rem; color:var(--body); }
.cwrail__labels span:first-child{ transform:translateX(0); }
.cwrail__labels span:last-child{ transform:translateX(-100%); }
.cwrail__pillrow{ margin-top:16px; text-align:center; }
.cwrail__pill{ display:inline-block; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--line); background:#fff; padding:5px 12px; border-radius:999px; }
@media (max-width:560px){
  .cwrail__nums span{ font-size:.66rem; }
  .cwrail__labels span{ font-size:.72rem; }
}

/* embed placeholder (Contact scheduler) */
.embed{ margin-top: 40px; border: 1px dashed var(--line); background: var(--bg-warm); padding: clamp(40px,7vw,80px); text-align:center; color: var(--muted); }
.embed .mono{ color: var(--coral); }
.embed p{ max-width: 46ch; margin: 12px auto 0; }