/* ==========================================================================
   NOVARUS V4  ·  the product is the hero
   2026-07-26. Loads after novarus.css and overrides it.

   Every value here is measured, not remembered. Sources are the Mobbin brain
   (613 marketing sections across 208 brands, plus computed CSS read off 15
   live premium sites): warm off-white over pure white, hero type big and
   TIGHT at weight 510 rather than 700, one accent only, pills for chrome and
   8-16px for panels, and no bounce easing anywhere on production chrome.
   ========================================================================== */

:root{
  /* warm paper beats pure white. measured: Cursor #F7F7F4, Lattice #F7F6F2,
     Vercel #FAFAFA, Notion #F6F5F4 */
  --paper:#F7F6F2;
  --paper-2:#EFEEE9;
  --canvas:#F7F6F2;

  /* near-black, warm, never #000 for large fields */
  --void:#0B0B0C;
  --void-2:#131315;
  --void-3:#1B1B1E;

  --ink:#1A1917;
  --ink-2:#4A4843;

  /* one accent. gold stays: it is the brand, and amber/orange is the hue
     family that actually leads the corpus at 22.6% */
  --gold:#111112;
  --gold-deep:#8A5D02;

  /* the two measured house curves. nothing in the corpus uses overshoot on
     production chrome, so the old spring is retired here. */
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --ease-expo:cubic-bezier(.165,.84,.44,1);
  --spring:cubic-bezier(.4,0,.2,1);
  --t:150ms;

  /* radii: pills for interactive chrome, 8-16 for panels, 2-6 for dense UI */
  --r-s:6px; --r:12px; --r-l:16px; --r-xl:20px; --r-pill:9999px;
}

body{ background:var(--paper); }

/* ---------------------------------------------------------------- TYPE --
   Inter Variable at 510. Linear ships exactly this: a non-stock axis value in
   a font everyone has, which reads as considered rather than default. The
   measured hero median across 15 premium sites is weight 400-510 and tracking
   -0.024em, NOT the 700-900 that a generic grotesk needs. */
h1,h2,h3,h4,.stmt,.calc__big{
  font-variation-settings:"wght" 510;
  font-weight:510;
  letter-spacing:-.024em;
}
.hero h1{
  font-size:clamp(2.9rem,6.4vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.028em;
  font-variation-settings:"wght" 510;
  font-weight:510;
}
.stmt{ font-weight:510; font-variation-settings:"wght" 510; letter-spacing:-.026em; }

/* the italic-emphasis move: one word set apart while the rest stays roman.
   the single most-copied premium signal in the corpus. */
.em-word{ color:var(--gold-deep); font-style:normal; }
.band--dark .em-word{ color:var(--gold); }

/* ------------------------------------------------------- DOCUMENT SPINE --
   The page is numbered like a spec document, Firecrawl style. This is the
   structural signal that separates it from the alternating-bands spine used
   on the last builds. */
.docnum{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
  margin-bottom:var(--s6);
}
.docnum::after{ content:""; flex:1; height:1px; background:var(--line); }
.docnum b{ color:var(--gold-deep); font-weight:500; }
.band--dark .docnum b{ color:var(--gold); }

/* --------------------------------------------------------- CENTERED HERO --
   A1 Centered Declaration. The confidence signal in the corpus is that the
   less sits in the hero, the bigger the brand reads: headline, one line of
   sub, ONE pill, microcopy. The product goes BELOW, full width. */
.hero{ min-height:auto; padding:clamp(120px,17vh,190px) 0 clamp(48px,7vh,84px); }
.hero__grid{ display:block; }
/* The measure has to live on the h1, not on this container. A ch unit
   resolves against the element's OWN font-size, so 19ch here computed against
   16px body text (about 155px) and broke the headline to one word per line. */
.hero__center{
  max-width:min(940px,100%); margin:0 auto; text-align:center;
  position:relative; z-index:2;
}
.hero__center h1{ max-width:17ch; margin-inline:auto; }
.hero__center .lede{
  max-width:44ch; margin:var(--s6) auto 0; text-align:center;
  font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--muted); line-height:1.55;
}
.hero__center .hero__cta{ justify-content:center; margin-top:var(--s8); }
/* the centre column is clamped to 19ch for the headline, so anything that is
   not the headline has to opt out of that measure explicitly */
.hero__micro{
  max-width:40ch; margin:var(--s4) auto 0;
  font-size:12.5px; color:var(--faint);
  font-family:var(--f-mono); letter-spacing:.04em;
}
.hero__center > .eyebrow-pill{ margin-inline:auto; }

/* the eyebrow is a bordered pill, per the measured convention */
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--s6);
  padding:6px 14px 6px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:rgba(255,255,255,.6);
  font-size:12.5px; color:var(--ink-2); letter-spacing:-.005em;
}
.eyebrow-pill b{ font-weight:600; color:var(--ink); }
.eyebrow-pill i{
  width:5px; height:5px; border-radius:50%; background:var(--gold); font-style:normal;
}
.eyebrow-pill svg{ width:12px; height:12px; opacity:.4; }

/* primary CTA = solid near-black pill, white text. brand colour is NOT the
   default primary in the corpus; it is reserved for consumer brands. */
.btn--dark{
  background:var(--void); color:#F7F6F2; border:0;
  border-radius:var(--r-pill); padding:0 26px; height:50px;
  font-size:15px; font-weight:550; letter-spacing:-.01em;
  transition:transform var(--t) var(--ease-ui), opacity var(--t) var(--ease-ui);
}
.btn--dark:hover{ opacity:.86; }
.btn--dark:active{ transform:scale(.985); }

/* ============================================================== CONSOLE ===
   THE SIGNATURE. A full-bleed near-black operations board where four lanes
   run at once: calls, quotes, follow ups and bookings. The movement is the
   concurrency, not a clock, and any row opens to show the real exchange
   underneath it. It answers "what does it actually do" by showing a shift's
   worth of work already done, rather than one chat window.
   ========================================================================== */
.console{
  position:relative; isolation:isolate;
  background:var(--void); color:#EDECE8;
  border-radius:clamp(16px,2vw,26px);
  border:1px solid rgba(255,255,255,.09);
  overflow:hidden;
  box-shadow:0 40px 120px -50px rgba(11,11,12,.6);
  cursor:crosshair;
}
/* dot grid, the texture for this build. replaces the grain used last time. */
.console::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
}

.console__bar{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px clamp(16px,2.4vw,26px);
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.02);
}
.console__mark{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; letter-spacing:-.015em;
}
.console__mark svg{ width:17px; height:17px; }
.console__live{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#8FE3AE;
}
.console__live i{
  width:5px; height:5px; border-radius:50%; background:#3FBF6E;
  animation:conPulse 2.4s var(--ease-ui) infinite;
}

.console__tally{
  margin-left:auto; display:flex; gap:clamp(12px,2vw,26px); flex-wrap:wrap;
}
.console__stat{ text-align:right; }
.console__stat b{
  display:block; font-family:var(--f-mono); font-size:15px; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; color:#F7F6F2;
}
.console__stat span{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:#6E6D69;
}

/* four lanes running at once */
.console__lanes{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.lane{ border-right:1px solid rgba(255,255,255,.07); min-width:0; }
.lane:last-child{ border-right:0; }
.lane__head{
  display:flex; align-items:center; gap:7px;
  padding:11px clamp(10px,1.3vw,16px);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#8B8A85;
}
.lane__head i{ width:5px; height:5px; border-radius:50%; background:var(--gold); }
.lane__head b{
  margin-left:auto; color:#F7F6F2; font-weight:400; font-variant-numeric:tabular-nums;
}
.lane__feed{
  display:flex; flex-direction:column; gap:7px;
  padding:11px clamp(8px,1.1vw,13px);
  height:clamp(280px,38vh,360px); overflow:hidden;
  justify-content:flex-end;
}

.ev{
  border:1px solid rgba(255,255,255,.09); border-radius:9px;
  background:rgba(255,255,255,.035); padding:9px 11px;
  text-align:left; width:100%; color:inherit; cursor:pointer;
  opacity:0; transform:translateY(10px);
  animation:evIn .5s var(--ease-expo) forwards;
  transition:background var(--t) var(--ease-ui), border-color var(--t) var(--ease-ui);
}
@keyframes evIn{ to{ opacity:1; transform:none; } }
.ev:hover{ background:rgba(255,255,255,.075); border-color:rgba(17,17,18,0.120); }
.ev__top{ display:flex; align-items:baseline; gap:7px; margin-bottom:3px; }
.ev__time{
  font-family:var(--f-mono); font-size:9.5px; color:#6E6D69;
  font-variant-numeric:tabular-nums; flex:none;
}
.ev__biz{
  font-size:11.5px; font-weight:550; color:#F7F6F2; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ev__what{ font-size:11.5px; color:#A5A39D; line-height:1.4; }
.ev__what b{ color:var(--gold); font-weight:500; }

/* the expanded transcript, the payoff for clicking a row */
.console__detail{
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.09);
  padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,26px);
  background:rgba(255,255,255,.02);
  display:grid; gap:9px;
}
.console__detail p{ margin:0; }
.console__dhead{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#6E6D69;
}
.console__dhead b{ color:var(--gold); font-weight:500; }
.tline{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; }
.tline__who{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#6E6D69; padding-top:.32em; width:52px; flex:none;
}
.tline__t{ color:#D8D6D0; }
.tline[data-who="ai"] .tline__t{ color:#F7F6F2; }
.tline[data-who="ai"] .tline__who{ color:var(--gold); }
.tline__t b{ color:var(--gold); font-weight:550; }

@media (max-width:1000px){
  .console__lanes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lane:nth-child(2){ border-right:0; }
  .lane:nth-child(1),.lane:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.07); }
  .lane__feed{ height:clamp(210px,26vh,260px); }
}
@media (max-width:620px){
  .console{ cursor:default; }
  .console__lanes{ grid-template-columns:1fr; }
  .lane{ border-right:0; border-bottom:1px solid rgba(255,255,255,.07); }
  .lane:last-child{ border-bottom:0; }
  .lane__feed{ height:190px; }
  .console__tally{ width:100%; margin-left:0; justify-content:space-between; }
  .console__stat{ text-align:left; }
}

/* full-bleed: the console breaks the container, which is the page's one
   deliberate container break */
.bleed{ padding-inline:clamp(12px,3vw,40px); }

/* ------------------------------------------------------------ COMPARISON --
   Naming the enemy. The cleanest version in the corpus is a two column panel
   with the right side tinted. */
.versus{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  background:var(--surface);
}
.versus__col{ padding:clamp(20px,3vw,34px); }
.versus__col + .versus__col{
  border-left:1px solid var(--line);
  background:linear-gradient(180deg, rgba(17,17,18,0.025), rgba(17,17,18,0.007));
}
.versus h3{ font-size:1.05rem; margin-bottom:var(--s5); letter-spacing:-.02em; }
.versus h3 span{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); display:block; margin-bottom:6px; font-weight:400;
}
.versus ul{ display:grid; gap:11px; }
.versus li{
  list-style:none; display:grid; grid-template-columns:16px 1fr; gap:11px;
  font-size:.95rem; color:var(--ink-2); line-height:1.5;
}
.versus li::before{
  content:"\00d7"; font-family:var(--f-mono); color:var(--faint);
  text-align:center; line-height:1.5;
}
.versus__col + .versus__col li::before{ content:"\2713"; color:var(--gold-deep); }
@media (max-width:720px){
  .versus{ grid-template-columns:1fr; }
  .versus__col + .versus__col{ border-left:0; border-top:1px solid var(--line); }
}

/* ------------------------------------------------------------- PLAN CARD --
   One product, one price. A single card reads more confident than three tiers
   when there is genuinely one thing being sold. */
.plan{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line);
  background:var(--surface);
}
.plan__main{ padding:clamp(24px,3.4vw,40px); }
.plan__side{
  padding:clamp(24px,3.4vw,40px);
  background:var(--void); color:#EDECE8; display:flex; flex-direction:column; justify-content:center;
}
.plan__price{
  font-family:var(--f-mono); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:500;
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; color:#F7F6F2;
}
.plan__price sub{ font-size:.3em; font-weight:400; color:#8B8A85; bottom:0; margin-left:4px; letter-spacing:.02em; }
.plan__note{ margin-top:var(--s4); font-size:.9rem; color:#A5A39D; line-height:1.55; }
.plan__list{ display:grid; gap:0; margin-top:var(--s5); }
.plan__list li{
  list-style:none; display:grid; grid-template-columns:auto 1fr; gap:12px;
  padding:11px 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--ink-2);
}
.plan__list li::before{
  content:"\2713"; color:var(--gold-deep); font-family:var(--f-mono); font-size:.85rem; padding-top:.15em;
}
@media (max-width:800px){ .plan{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------- RETIRE ----
   The v3 pieces this build replaces. Kept as overrides rather than deleted
   from novarus.css so the inner pages that still use them keep working. */
.hero .ambient{ opacity:.55; }
.grain{ opacity:.022; }

/* ---------------------------------------------------------------- DOCK ----
   Always up. The hide-on-scroll behaviour is gone from the script; this makes
   sure a stale attribute can never translate it off screen again. */
.dock[data-hide="true"],
.dock[data-hide]{ transform:translateX(-50%) !important; opacity:1 !important; }

/* ======================================================= BACKGROUND MOTION ==
   The field used to sit inside the hero, so all movement stopped as soon as
   you scrolled past it. It is now fixed behind the whole page. */
.ambient--page{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:1;
  mask-image:none; -webkit-mask-image:none;
}
.hero{ position:relative; z-index:1; }
main > section{ position:relative; z-index:1; }

/* A fixed layer cannot show through an opaque near-black band, so the dark
   sections carry their own drift. Two soft gold masses on long offset loops,
   translate only, which stays on the compositor. */
.band--dark::before{
  background:
    radial-gradient(46% 60% at 22% 18%, rgba(255,255,255,0.090), transparent 62%),
    radial-gradient(38% 52% at 84% 76%, rgba(255,255,255,0.056), transparent 64%);
  animation:aurora 26s var(--ease-ui) infinite alternate;
  will-change:transform;
}
@keyframes aurora{
  0%{   transform:translate3d(-3%, 2%, 0) scale(1.04); }
  50%{  transform:translate3d(4%, -3%, 0) scale(1.12); }
  100%{ transform:translate3d(-2%, 4%, 0) scale(1.06); }
}

/* the console is the one dark anchor on the page, so it gets a slow sweep of
   its own rather than sitting perfectly still */
.console::after{
  content:""; position:absolute; inset:-40% -10%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 40% at 50% 50%, rgba(17,17,18,0.035), transparent 70%);
  animation:sweep 19s linear infinite;
  will-change:transform;
}
@keyframes sweep{
  0%{   transform:translate3d(-28%, 6%, 0); }
  50%{  transform:translate3d(26%, -8%, 0); }
  100%{ transform:translate3d(-28%, 6%, 0); }
}

@media (prefers-reduced-motion:reduce){
  .band--dark::before,.console::after{ animation:none; }
}