/* Sallyport — the shared half of the site's CSS.
 *
 * Every page used to carry its own complete copy of this: tokens, base, the nav,
 * the buttons, the hero, the section rhythm, the CTA band and the footer, about
 * 770 lines of it, repeated eight times. Editing a shared rule meant editing it
 * eight times, and three times in one afternoon a copy was missed — the dead
 * `.bars` and `.add-claims` rules on three pages are what that looks like when
 * it is harmless, and the blog's wrong-depth menu is what it looks like when it
 * is not.
 *
 * What is here: every top-level rule that was byte-identical across at least
 * eight of the nine pages, in the order they all had them. What stays inline in
 * each page: that page's own sections. A page's inline <style> comes after this
 * file, so a page can still override anything here, which is what the couple of
 * "(this page only)" blocks do.
 *
 * scripts/css_shared.py guards the split: it reports a rule that is in here AND
 * inline in a page (the inline copy silently wins, on that page only), a rule
 * that is inline in many pages and so wants to be in here, and a page that
 * orders the shared rules differently — which is the one thing that would make a
 * single shared file unable to reproduce every page's cascade.
 *
 * Served no-cache like the pages themselves (see .htaccess): nothing here is
 * content-hashed, so a redeploy has to be visible immediately.
 */

:root{
  color-scheme: light;
  --paper:   #FFFFFF;
  --wash:    #FAFAF8;
  --ink:     #1E2126;
  --ink-2:   #3A3E45;
  --muted:   #6F737B;
  --faint:   #A9ACB3;
  --hairline:#E8E6E2;
  --hairline-2:#D9D6D0;
  --ok:      #30A46C;
  --bad:     #D64545;
  --warn:    #DFA400;
  --r:#E5484D; --o:#F5871F; --y:#DFA400; --g:#30A46C; --t:#12A594; --b:#3E63DD; --p:#8E4EC6; --m:#D6409F;
  /* Six discrete bands, cool-forward: magenta, purple, blue, teal, green, yellow.
     Hard stops on purpose — the bar is stripes, not a blend. Keep this order in
     sync with the COLORS arrays in each page's sprinkle script and the spectrum
     cells in templates/email-layout.html. */
  --spectrum: linear-gradient(90deg,
    var(--m) 0 16.67%, var(--p) 16.67% 33.33%, var(--b) 33.33% 50%,
    var(--t) 50% 66.67%, var(--g) 66.67% 83.33%, var(--y) 83.33% 100%);
  --display: "Bricolage Grotesque", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Spline Sans Mono", "SFMono-Regular", Consolas, monospace;
  --wrap:    1120px;
}
/* Dark twin — neutral ink, same spectrum. The viewer's OS decides by
   default; the toggle in the nav stamps data-theme to override either way. */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0F1013; --wash:#16171B;
    --ink:#ECECE8; --ink-2:#C4C4BF;
    --muted:#8E9095; --faint:#67696F;
    --hairline:#26272C; --hairline-2:#3A3C42;
    --ok:#4CBF8C; --bad:#E56E5E; --warn:#E0B45C;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0F1013; --wash:#16171B;
  --ink:#ECECE8; --ink-2:#C4C4BF;
  --muted:#8E9095; --faint:#67696F;
  --hairline:#26272C; --hairline-2:#3A3C42;
  --ok:#4CBF8C; --bad:#E56E5E; --warn:#E0B45C;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:rgba(62,99,221,.18); }
a{ color:inherit; }
/* The UA sheet gives [hidden] display:none at the lowest possible specificity, so
   ANY rule that sets display beats it — .btn{display:inline-block} on a hidden
   button, or tr's own display:table-row. Two pages had already patched that
   locally with `.logtable tr[hidden]`; this is the same fix, once. */
[hidden]{ display:none !important; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--b);
  outline-offset:3px;
  border-radius:2px;
}
.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }
/* ---------- sprenkels ---------- */

.spr{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.spr i{ position:absolute; border-radius:50%; animation:twinkle ease-in-out infinite; }
.spr .plus{ border-radius:0; background:none !important; width:10px !important; height:10px !important; }
.spr .plus::before, .spr .plus::after{ content:""; position:absolute; background:currentColor; }
.spr .plus::before{ left:4.25px; top:0; width:1.5px; height:10px; }
.spr .plus::after{ top:4.25px; left:0; height:1.5px; width:10px; }
@keyframes twinkle{
  0%,100%{ opacity:.2; transform:scale(.85); }
  50%{ opacity:.85; transform:scale(1.1); }
}
@media (max-width:760px){ .spr{ display:none; } }
/* A quieter hero for the two pages whose readers are being asked to trust
   restraint (/governed/ and /demo_employees/) — the same specks, dimmed. */
.hero-quiet .spr i{ opacity:.55; }
/* ---------- announcement banner ----------
   Above the sticky nav and NOT sticky itself, so it is the first thing read and
   then gets out of the way. Rendered by src/banner.php, which also carries the
   dismiss script — it has to run before first paint or a reader who closed the
   bar watches it flash on every page. */
.banner{ background:var(--ink); color:var(--paper); }
/* Centred, with the close button pulled out of the flow and parked in the right
   gutter — left in it, the group's centre would sit half a button to the left of
   the page's. The symmetric 40px padding is what reserves that gutter. */
.banner-in{
    position:relative;
    display:flex; align-items:center; justify-content:center; gap:14px;
    padding:11px 40px; min-height:44px;
  }
.banner-eyebrow{
    flex:none;
    font-family:var(--mono); font-size:9.5px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink); background:var(--paper);
    border-radius:999px; padding:4px 10px;
  }
.banner p{
    flex:0 1 auto; min-width:0; text-align:center;
    font-size:14.5px; line-height:1.4; text-wrap:pretty;
    color:color-mix(in srgb, var(--paper) 88%, transparent);
  }
.banner a{
    margin-left:8px; font-weight:600; color:var(--paper);
    text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb, var(--paper) 45%, transparent);
  }
.banner a:hover{ text-decoration-color:var(--paper); }
.banner-x{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%;
    border:0; cursor:pointer; background:transparent; line-height:1;
    font-size:19px; color:color-mix(in srgb, var(--paper) 55%, transparent);
    display:grid; place-items:center;
    transition:background .18s, color .18s;
  }
.banner-x:hover{ background:color-mix(in srgb, var(--paper) 14%, transparent); color:var(--paper); }
.banner-x:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }
@media (max-width:560px){
    .banner-in{ gap:11px; padding-inline:32px; }
    .banner-eyebrow{ display:none; }
    .banner p{ font-size:13.5px; }
  }

/* ---------- nav ----------
   `body > nav`, not `nav`: the footer's link columns are a <nav class="foot-nav">
   too, and a bare element selector made it sticky, gave it a blurred background
   and drew a hairline under it in the middle of the footer. Only the bar at the
   top of the document is meant to be any of those things. */

body > nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{ display:flex; align-items:center; gap:24px; padding:16px 0; }
/* The logo, inlined by src/brand.php. It used to be a CSS approximation here --
   a bordered arch (.gate) with a --spectrum underline, next to "Sallyport" set
   in --display -- drawn that way because there was no logo file to load. There
   is now, and the two are the same idea: the mark IS the spectrum bar bent into
   an arch, in the same --m/--p/--b/--t/--g/--y order the ribbon uses.

   Only the ink follows the theme. `currentColor` on the wordmark and on the
   circle at the centre of the arch picks up --ink, which is redeclared for both
   the OS setting and the data-theme override, so one file covers every case.
   The six arch colours are fixed in both themes -- that is what makes them a
   logo and not a palette. */
.mark{
  display:flex; align-items:center;
  color:var(--ink); text-decoration:none;
}
.mark svg{
  display:block; height:26px; width:auto;
}
@media (max-width:520px){
  .mark svg{ height:22px; }
}
/* The minimal bar carries three things across a 400px screen minus the 24px
   gutters. Logo + toggle + CTA is 294px of the 352 available at default sizes,
   so only the CTA's padding needs trimming to keep it off the edge. */
@media (max-width:430px){
  .nav-minimal .nav-links{ gap:10px; }
  .nav-minimal .nav-links .btn{ padding:9px 12px; font-size:13px; }
  .nav-minimal .nav-links .theme-btn{ width:34px; height:34px; }
}
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:22px; }
/* ---------- the minimal bar ----------
   The splash page carries the same <nav> as every other page — same height, same
   hairline, same sticky behaviour — with only the logo, the theme toggle and the
   CTA in it (src/nav.php, $nav_minimal). That is the whole point: it used to be a
   separate `.splash-top` with different padding and no border, so the logo
   visibly jumped when you clicked through.

   The only thing it has to override is the phone breakpoint below, which turns
   .nav-links into a drop panel behind a burger. There is no burger here and
   nothing to fold away, so the two controls stay inline at every width. */
.nav-minimal .nav-links{ gap:16px; }
.nav-links a:not(.btn){
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s;
}
.nav-links a:not(.btn):hover{ color:var(--ink); }
/* The nav is shared by both audience cuts and carries the cross-page links, so the
   page you are on has to be obvious. Spectrum underline — the site's own signature. */

.nav-links a.active{ color:var(--ink); position:relative; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px;
  height:2px; border-radius:2px; background:var(--spectrum);
}
/* ---------- the "How it works" foldout ----------
   One group, two children. The panel opens on hover AND on focus-within, so it
   works with no script at all and with a keyboard; the click toggle in nav.php
   exists for touch at tablet width, where :hover is a lie.

   Below 860px it is not a floating panel — .nav-links is already a drop-down, so
   the group renders inline inside it as an ordinary accordion row. */
.nav-group{ position:relative; display:flex; align-items:center; }
.nav-groupbtn{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  background:none; border:0; padding:0; font-family:var(--sans);
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s;
}
.nav-groupbtn svg{
  width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s;
}
.nav-groupbtn:hover, .nav-group:focus-within .nav-groupbtn{ color:var(--ink); }
.nav-group[data-open="1"] .nav-groupbtn svg{ transform:rotate(180deg); }
/* The parent wears the child's underline: on either page, "How it works" is where
   you are. Same spectrum rule as .nav-links a.active. */
.nav-groupbtn.active{ color:var(--ink); position:relative; }
.nav-groupbtn.active::after{
  content:""; position:absolute; left:0; right:13px; bottom:-7px;
  height:2px; border-radius:2px; background:var(--spectrum);
}
.nav-drop{
  display:none; position:absolute; left:-18px; top:calc(100% + 17px); z-index:2;
  min-width:320px; padding:8px;
  background:var(--paper); border:1px solid var(--hairline-2); border-radius:12px;
  box-shadow:0 30px 60px -28px rgba(30,33,38,.45);
}
/* A gap between the item and the panel would close it as the pointer crosses. */
.nav-drop::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group[data-open="1"] .nav-drop{ display:block; }
.nav-drop a{
  display:block; padding:12px 14px; border-radius:8px; text-decoration:none;
  transition:background .15s;
}
.nav-drop a:hover{ background:var(--wash); }
.nav-drop a b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.nav-drop a span{ display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--muted); }
.nav-drop a[aria-current] b::after{ content:" ·"; color:var(--g); }
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:6px; border:1px solid transparent;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.btn-ink{
  background:var(--ink); color:var(--paper);
  box-shadow:0 8px 24px -10px rgba(30,33,38,.5);
}
.btn-ink:hover{ transform:translateY(-1px); box-shadow:0 14px 32px -10px rgba(30,33,38,.55); }
.btn-ghost{ border-color:var(--hairline-2); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:var(--wash); }
.btn-sm{ padding:10px 16px; font-size:13.5px; }
.theme-btn{
  width:38px; height:38px; border-radius:50%; cursor:pointer; flex:none;
  border:1px solid var(--hairline-2); background:transparent; color:var(--muted);
  display:grid; place-items:center; font-size:15px; line-height:1;
  transition:color .2s, border-color .2s;
}
.theme-btn:hover{ color:var(--ink); border-color:var(--ink); }
.theme-btn .sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{ display:block; }
  :root:not([data-theme="light"]) .theme-btn .moon{ display:none; }
}
:root[data-theme="dark"] .theme-btn .sun{ display:block; }
:root[data-theme="dark"] .theme-btn .moon{ display:none; }
:root[data-theme="light"] .theme-btn .sun{ display:none; }
:root[data-theme="light"] .theme-btn .moon{ display:block; }
/* ---------- the mobile menu ----------
   Below 860px the six links used to be `display:none` with nothing in their
   place, so a phone could not get from one page to another at all — the footer's
   link columns were the only way out, and only from the very bottom.

   The same .nav-links element becomes the panel rather than a second copy of the
   menu: one list in the markup, so a link can never be added to one and not the
   other. It drops out of `body > nav` (which is sticky, and therefore already a
   containing block) rather than out of .nav-in, so it spans the full width
   instead of sitting inside the wrap's 24px gutter; it carries that gutter as
   its own padding instead.

   The theme toggle and the CTA ride along inside it, which is why the bar keeps
   nothing but the mark and the burger at that width — three controls plus a
   wordmark do not fit across 400px minus the gutter. */
.nav-burger{ display:none; }
@media (max-width:860px){
  .nav-burger{
    display:grid; place-items:center; margin-left:auto; flex:none;
    width:38px; height:38px; border-radius:9px; cursor:pointer;
    border:1px solid var(--hairline-2); background:transparent; color:var(--ink);
    transition:border-color .2s;
  }
  .nav-burger svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .nav-burger .i-x{ display:none; }
  /* The bar is translucent over a blur, so with an opaque panel hanging off it
     you could see the page through the bar and not through the menu. Solid while
     open. */
  nav[data-nav="open"]{ background:var(--paper); }
  nav[data-nav="open"] .nav-burger{ border-color:var(--ink); }
  nav[data-nav="open"] .nav-burger .i-x{ display:block; }
  nav[data-nav="open"] .nav-burger .i-bars{ display:none; }
  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:4px 24px 18px;
    background:var(--paper);
    border-bottom:1px solid var(--hairline);
    box-shadow:0 20px 40px -26px rgba(0,0,0,.5);
  }
  nav[data-nav="open"] .nav-links{ display:flex; }
  .nav-minimal .nav-links{
    display:flex; position:static; flex-direction:row; align-items:center;
    gap:12px; margin-left:auto; padding:0;
    background:none; border:0; box-shadow:none;
  }
  /* The two controls keep their BAR styling here, not the drop-panel styling
     the rules below give them: the round icon toggle rather than a labelled
     "Theme" row, and a CTA that does not stack. They fit — the reason the other
     pages hide these behind a burger is the six links, which this bar has not
     got. */
  .nav-minimal .nav-links .theme-btn{
    margin-top:0; width:38px; height:38px; border-radius:50%;
    display:grid; place-items:center; padding:0; font-size:15px;
  }
  .nav-minimal .nav-links .theme-btn::after{ content:none; }
  .nav-minimal .nav-links .btn{ margin-top:0; white-space:nowrap; }
  .nav-links > a:not(.btn){ display:block; padding:14px 0; font-size:16px; }
  .nav-links > a:not(.btn) + a:not(.btn),
  .nav-links > a:not(.btn) + .nav-group,
  .nav-links > .nav-group + a:not(.btn){ border-top:1px solid var(--hairline); }
  /* Inline accordion: no floating panel inside a panel. */
  .nav-group{ display:block; }
  .nav-groupbtn{ width:100%; padding:14px 0; font-size:16px; }
  .nav-groupbtn svg{ margin-left:auto; width:15px; height:15px; }
  .nav-groupbtn.active::after{ right:auto; width:26px; bottom:9px; }
  .nav-drop{
    position:static; min-width:0; padding:0 0 8px 14px;
    border:0; border-radius:0; box-shadow:none; background:none;
  }
  .nav-drop::before{ display:none; }
  /* Hover must NOT open it here — a tap registers as a hover on touch and the
     panel would spring open under the finger on the way past. */
  .nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop{ display:none; }
  .nav-group[data-open="1"] .nav-drop{ display:block; }
  .nav-drop a{ padding:11px 12px; }
  /* The spectrum underline is a full-width rule between rows down here, so it
     shortens to a marker rather than reading as a divider. */
  .nav-links a.active::after{ right:auto; width:26px; bottom:9px; }
  .nav-links .theme-btn{
    margin-top:16px; width:auto; height:auto; border-radius:9px;
    display:flex; align-items:center; gap:12px;
    padding:12px 15px; font-size:15px;
  }
  .nav-links .theme-btn::after{
    content:"Theme"; font-family:var(--sans); font-weight:500; font-size:15px;
  }
  .nav-links .btn{ margin-top:12px; text-align:center; }
}
/* ---------- hero ---------- */

header.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--hairline); }
#specks{ position:absolute; inset:0; z-index:0; }
.hero-in{ position:relative; z-index:2; padding:108px 0 96px; text-align:center; }
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.hero h1{
  font-family:var(--display); font-optical-sizing:auto;
  font-size:clamp(52px, 9.5vw, 116px);
  line-height:.98; font-weight:700; letter-spacing:-.035em;
  text-wrap:balance;
  margin:28px 0 0;
}
.hero h1 .line{ display:block; }
.hero h1 .enh{ display:inline-block; font-weight:800; position:relative; }
.hero h1 .enh .rib{
  display:block; height:9px; border-radius:5px; margin-top:12px;
  background:var(--spectrum);
}
.hero .lede{
  max-width:620px; margin:32px auto 0;
  font-size:19px; color:var(--muted); text-wrap:pretty;
}
.hero .lede strong{ color:var(--ink); font-weight:600; }
.hero-cta{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.chips{
  margin-top:46px; display:flex; gap:10px 24px; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted);
}
.chips span::before{ content:"◆"; font-size:8px; margin-right:8px; vertical-align:2px; }
.chips span:nth-child(1)::before{ color:var(--g); }
.chips span:nth-child(2)::before{ color:var(--b); }
.chips span:nth-child(3)::before{ color:var(--p); }
.chips span:nth-child(4)::before{ color:var(--o); }
/* ---------- marquee ---------- */

.marquee{
  border-bottom:1px solid var(--hairline);
  background:var(--wash);
  overflow:hidden; padding:18px 0;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; gap:52px; width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--display); font-size:18px; font-weight:600; color:var(--ink-2);
  white-space:nowrap; align-items:baseline;
}
.marquee-track .amp{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; }
@keyframes slide{ to{ transform:translateX(-50%); } }
/* ---------- sections ---------- */

section{ padding:110px 0; position:relative; }
.sec-head{ max-width:640px; }
.sec-head.centered{ margin-inline:auto; text-align:center; }
h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(32px, 4.4vw, 50px); line-height:1.05; text-wrap:balance;
  margin-top:18px;
}
h2 .ul{
  background:var(--spectrum) no-repeat left bottom / 100% 4px;
  padding-bottom:6px;
}
.sec-lede{ margin-top:18px; color:var(--muted); font-size:18px; max-width:56ch; }
.centered .sec-lede{ margin-inline:auto; }
.phase-eyebrow b{ color:var(--ink); font-weight:600; }
/* ---------- invoice ---------- */

.invoice-wrap{
  margin-top:64px; position:relative;
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
}
@media (max-width:900px){ .invoice-wrap{ grid-template-columns:1fr; } }
.invoice{
  position:relative; z-index:1;
  background:linear-gradient(178deg, #F6F8FB, #E8ECF2);
  color:#242932;
  border-radius:4px;
  padding:38px 40px 34px;
  box-shadow:0 30px 60px -24px rgba(36,41,50,.3), 0 0 0 1px #DDE2EA;
  transform:rotate(-1.2deg);
  font-family:var(--mono); font-size:13.5px;
}
.invoice h3{ font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.01em; }
.invoice .inv-meta{ color:#7E8794; font-size:11.5px; margin-top:4px; letter-spacing:.06em; }
.invoice table{ width:100%; border-collapse:collapse; margin-top:26px; font-variant-numeric:tabular-nums; }
.invoice td{ padding:9px 0; border-bottom:1px dotted #C0C9D5; vertical-align:top; font-weight:500; color:#1D222B; }
.invoice td:last-child{ text-align:right; white-space:nowrap; padding-left:18px; }
.invoice .sub{ display:block; color:#7E8794; font-size:11px; margin-top:2px; font-weight:400; }
.invoice tr.total td{
  border-bottom:none; border-top:2px solid #242932;
  padding-top:14px; font-weight:600; font-size:15px;
}
.stamp{
  position:absolute; font-family:var(--mono); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; border:3px solid currentColor; border-radius:6px;
  padding:8px 18px; opacity:.85; mix-blend-mode:multiply;
}
.stamp-declined{
  color:#B23A2C; font-size:26px;
  top:44%; left:50%; transform:translate(-50%,-50%) rotate(-11deg);
}
.stamp-enhance{
  color:#2F7D57; font-size:13px;
  bottom:4px; right:20px; transform:rotate(4deg);
}
.invoice-copy{ position:relative; z-index:1; }
.invoice-copy .big-claims{ display:grid; gap:26px; margin-top:38px; }
.claim{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline; }
.claim .n{
  font-family:var(--display); font-size:44px; font-weight:800; letter-spacing:-.03em;
  color:var(--ink); line-height:1; min-width:120px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.claim .n u{
  text-decoration:none;
  background:var(--spectrum) no-repeat left bottom / 100% 3px;
  padding-bottom:5px;
}
.claim p{ color:var(--muted); font-size:15.5px; }
.claim p strong{ color:var(--ink); }
/* ---------- second hero + pillars ---------- */

.pillars-sec{ background:var(--wash); border-block:1px solid var(--hairline); }
.hero2{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(34px, 5.4vw, 64px); line-height:1.12; text-wrap:balance;
  margin-top:18px; text-align:center;
}
.hero2 .sp{ color:var(--muted); font-weight:650; }
.hero2 a{
  text-decoration:none; font-weight:800; white-space:nowrap;
  padding-bottom:6px; transition:opacity .2s;
}
.hero2 a:hover{ opacity:.75; }
.hero2 a.w1{ background:linear-gradient(90deg, var(--t), var(--g)) no-repeat left bottom / 100% 5px; }
.hero2 a.w2{ background:linear-gradient(90deg, var(--b), var(--p)) no-repeat left bottom / 100% 5px; }
.hero2 a.w3{ background:linear-gradient(90deg, var(--m), var(--o)) no-repeat left bottom / 100% 5px; }
.pillars{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }
.pillar{
  background:var(--paper); padding:38px 34px 42px;
  position:relative; overflow:hidden;
  text-decoration:none; display:block;
  transition:background .25s;
}
.pillar::after{
  content:""; position:absolute; left:34px; right:34px; top:0; height:3px; border-radius:0 0 2px 2px;
  background:var(--spectrum);
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.pillar:hover::after{ transform:scaleX(1); }
.pillar .p-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.pillar .p-eyebrow::before{ content:"●"; font-size:8px; margin-right:8px; vertical-align:2px; }
.pillar:nth-child(1) .p-eyebrow::before{ color:var(--t); }
.pillar:nth-child(2) .p-eyebrow::before{ color:var(--b); }
.pillar:nth-child(3) .p-eyebrow::before{ color:var(--m); }
.pillar h3{
  font-family:var(--display); font-size:24px; font-weight:700; margin-top:14px; letter-spacing:-.02em;
  color:var(--ink);
}
.pillar p{ margin-top:12px; color:var(--muted); font-size:15.5px; }
.pillar .keep{ margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.04em; }
.pillar .keep b{ color:var(--ink); font-weight:500; }
.pillar .see{ margin-top:14px; font-size:13.5px; font-weight:600; color:var(--ink); }
/* ---------- shared demo card ---------- */

.democard{
  margin-top:60px; max-width:820px; margin-inline:auto;
  background:var(--paper); border:1px solid var(--hairline); border-radius:12px;
  box-shadow:0 30px 70px -34px rgba(30,33,38,.3);
  overflow:hidden;
}
.democard-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.06em;
}
.democard-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.c-g{ color:var(--g); }
.c-b{ color:var(--b); }
.c-r{ color:var(--r); }
.demo-note{
  text-align:center; margin-top:22px; color:var(--faint); font-size:13.5px; max-width:54ch; margin-inline:auto;
}
.demo-note b{ color:var(--muted); font-weight:600; }
/* ---------- democratize demo ---------- */

.conn-body{ padding:10px 0; }
.conn-row{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--hairline);
}
.conn-row:last-of-type{ border-bottom:none; }
.conn-id{ display:flex; align-items:center; gap:10px; min-width:150px; padding-top:2px; }
.conn-id .cdot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--hairline-2); transition:background .3s, box-shadow .3s; }
.conn-row.on .cdot.dg{ background:var(--g); box-shadow:0 0 8px rgba(48,164,108,.5); }
.conn-row.on .cdot.db{ background:var(--b); box-shadow:0 0 8px rgba(62,99,221,.5); }
.conn-row.on .cdot.dr{ background:var(--r); box-shadow:0 0 8px rgba(229,72,77,.5); }
.conn-id .cname{ font-family:var(--display); font-weight:700; font-size:16.5px; }
.conn-status{ flex:1; font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--muted); min-height:24px; }
.conn-status .ln{ display:block; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; }
.conn-status .ln.show{ opacity:1; transform:none; }
.conn-status .ok{ color:var(--ok); }
.conn-status .idle{ color:var(--faint); }
.toggle{
  flex:none; width:46px; height:26px; border-radius:999px; border:1px solid var(--hairline-2);
  background:var(--wash); position:relative; cursor:pointer; transition:background .25s, border-color .25s;
  margin-top:2px;
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--paper); border:1px solid var(--hairline-2);
  transition:left .25s cubic-bezier(.2,.7,.2,1), border-color .25s;
}
.conn-row.on .toggle{ background:var(--ink); border-color:var(--ink); }
.conn-row.on .toggle::after{ left:22px; border-color:var(--ink); }
.conn-sum{
  padding:16px 24px; border-top:1px solid var(--hairline); background:var(--wash);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.conn-sum .hl{ color:var(--ink); font-weight:500; }
.conn-sum .rib{ flex:1; min-width:60px; height:2px; border-radius:1px; background:var(--spectrum); opacity:0; transition:opacity .5s; }
.conn-sum .rib.show{ opacity:1; }
/* ---------- comply demo (chat) ---------- */

.law-chips{
  margin-top:24px; display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted);
}
.law-chips span::before{ content:"◆"; font-size:8px; margin-right:8px; vertical-align:2px; }
.law-chips span:nth-child(1)::before{ color:var(--b); }
.law-chips span:nth-child(2)::before{ color:var(--p); }
.law-chips span:nth-child(3)::before{ color:var(--t); }
.law-chips span:nth-child(4)::before{ color:var(--m); }
.persona-tabs{ display:flex; gap:10px; justify-content:center; margin-top:48px; }
.persona{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--paper); border:1px solid var(--hairline-2); border-radius:999px;
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted);
  padding:9px 18px 9px 10px; transition:all .2s;
}
.persona .avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
  background:var(--wash); color:var(--muted); border:1px solid var(--hairline);
}
.persona.active{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.persona.active .avatar{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.persona-tabs + .democard{ margin-top:26px; }
.chat-body{ padding:26px 24px 30px; display:flex; flex-direction:column; gap:18px; min-height:320px; }
.msg{ max-width:78%; padding:14px 18px; border-radius:12px; font-size:15.5px; line-height:1.55; }
.msg.user{ align-self:flex-end; background:var(--ink); color:var(--paper); border-bottom-right-radius:3px; }
.msg.sally{ align-self:flex-start; background:var(--wash); border:1px solid var(--hairline); border-bottom-left-radius:3px; }
.msg .who{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:8px;
}
.msg.user .who{ color:color-mix(in srgb, var(--paper) 60%, transparent); }
.msg.sally .who{ color:var(--muted); }
.msg table{ border-collapse:collapse; margin-top:10px; font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; width:100%; }
.msg td{ padding:6px 14px 6px 0; border-bottom:1px solid var(--hairline); color:var(--muted); }
.msg td:first-child{ color:var(--ink); }
.msg td:last-child{ text-align:right; padding-right:0; }
.msg .refusal{ color:var(--bad); font-weight:600; }
.verdict{
  align-self:flex-start; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  padding:5px 12px; border-radius:4px; text-transform:uppercase;
}
.verdict.ok{ color:var(--ok); background:rgba(48,164,108,.09); border:1px solid rgba(48,164,108,.35); }
.verdict.no{ color:var(--bad); background:rgba(214,69,69,.08); border:1px solid rgba(214,69,69,.32); }
.audit{
  border-top:1px solid var(--hairline); background:var(--wash);
  padding:18px 24px; font-family:var(--mono); font-size:12px; line-height:2;
  color:var(--faint); overflow-x:auto; white-space:nowrap;
}
.audit .a-label{ color:var(--muted); letter-spacing:.16em; font-size:10.5px; }
.audit .ok{ color:var(--ok); }
.audit .no{ color:var(--bad); }
.audit .hl{ color:var(--ink); }
.audit .cg{ color:var(--g); }
.audit .cb{ color:var(--b); }
/* ---------- playbooks demo ---------- */

.wf-title{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:20px 24px 6px;
}
.wf-title .wf-name{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.wf-title .wf-sched{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--hairline-2); border-radius:999px; padding:4px 11px;
}
.wf-replay{
  margin-left:auto; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:none; border:1px solid var(--hairline-2); border-radius:999px; padding:5px 12px;
  transition:color .2s, border-color .2s;
}
.wf-replay:hover{ color:var(--ink); border-color:var(--ink); }
.wf-steps{ padding:14px 24px 8px; }
.wf-step{
  display:grid; grid-template-columns:26px 1fr auto; gap:0 14px; align-items:start;
  position:relative; padding-bottom:22px;
}
.wf-step::before{
  content:""; position:absolute; left:12.5px; top:20px; bottom:2px; width:1px; background:var(--hairline);
}
.wf-step:last-child::before{ display:none; }
.wf-dot{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--wash); border:1px solid var(--hairline-2);
  font-size:11px; color:var(--paper); transition:all .3s;
}
.wf-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--hairline-2); transition:all .3s; }
.wf-step.active .wf-dot::after{ background:var(--c, var(--ink)); animation:pulse 1s ease-in-out infinite; }
.wf-step.done .wf-dot{ background:var(--c, var(--ink)); border-color:var(--c, var(--ink)); }
.wf-step.done .wf-dot::after{ content:"✓"; width:auto; height:auto; border-radius:0; background:none; color:var(--paper); font-size:12px; font-weight:700; }
.wf-step.waiting .wf-dot{ border-color:var(--warn); }
.wf-step.waiting .wf-dot::after{ background:var(--warn); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(.8); opacity:.6; } 50%{ transform:scale(1.25); opacity:1; } }
.wf-what{ font-size:15px; padding-top:2px; color:var(--faint); transition:color .3s; }
.wf-step.active .wf-what, .wf-step.done .wf-what, .wf-step.waiting .wf-what{ color:var(--ink); }
.wf-what .wf-tool{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; display:block; color:var(--faint); margin-bottom:2px; }
.wf-what .wf-tool b{ font-weight:500; }
.wf-result{
  font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:16px; text-align:right;
  opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; white-space:nowrap;
}
.wf-step.done .wf-result, .wf-step.waiting .wf-result{ opacity:1; transform:none; }
.wf-result .ok{ color:var(--ok); }
.wf-result .warn{ color:var(--warn); }
.wf-finish{
  margin:4px 24px 22px; padding:14px 18px; border-radius:8px;
  background:var(--wash); border:1px solid var(--hairline);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted);
  opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s;
  position:relative; overflow:hidden;
}
.wf-finish::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--spectrum);
}
.wf-finish.show{ opacity:1; transform:none; }
.wf-finish .hl{ color:var(--ink); font-weight:500; }
/* ---------- owner demo ---------- */

.ask-tabs{ display:flex; gap:10px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.ask{
  cursor:pointer; background:var(--paper); border:1px solid var(--hairline-2); border-radius:999px;
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted);
  padding:10px 18px; transition:all .2s;
}
.ask.active{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
/* ---------- first afternoon ---------- */

.day-sec{ padding:80px 0; border-top:1px solid var(--hairline); }
.day-strip{
  margin-top:48px; border:1px solid var(--hairline); border-radius:12px; background:var(--paper);
  padding:30px 30px 26px; overflow-x:auto;
}
.day-line{ display:flex; min-width:680px; position:relative; }
.day-line::before{
  content:""; position:absolute; top:5px; left:6px; right:6px; height:1px; background:var(--hairline-2);
}
.day-step{ flex:1; position:relative; padding-right:14px; }
.day-dot{
  width:11px; height:11px; border-radius:50%; background:var(--c, var(--ink));
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--hairline-2);
  position:relative; z-index:1; margin-bottom:12px;
}
.day-step .t{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); display:block; }
.day-step .l{ font-size:13.5px; color:var(--ink); font-weight:600; line-height:1.4; margin-top:3px; display:block; }
.day-step .s{ font-size:12px; color:var(--faint); display:block; }
/* ---------- shadow AI ---------- */

.risk-sec{ border-top:1px solid var(--hairline); }
.risk-grid{
  margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:920px; margin-inline:auto;
}
@media (max-width:860px){ .risk-grid{ grid-template-columns:1fr; } }
.risk-card{ border:1px solid var(--hairline); border-radius:12px; background:var(--paper); overflow:hidden; display:flex; flex-direction:column; }
.risk-card.rc-bad{ border-color:rgba(214,69,69,.4); }
.risk-card.rc-ok{ border-color:rgba(48,164,108,.4); }
.risk-head{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 18px; border-bottom:1px solid var(--hairline);
}
.rc-bad .risk-head{ color:var(--bad); background:rgba(214,69,69,.05); }
.rc-ok .risk-head{ color:var(--ok); background:rgba(48,164,108,.05); }
.risk-body{ padding:20px 20px 16px; flex:1; }
.risk-msg{
  background:var(--wash); border:1px solid var(--hairline); border-radius:10px;
  padding:12px 15px; font-size:13.5px; color:var(--ink-2); line-height:1.55;
}
.risk-msg .rm-to{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.risk-foot{ padding:0 20px 20px; font-family:var(--mono); font-size:12px; line-height:2.1; }
.risk-foot .x{ color:var(--bad); }
.risk-foot .v{ color:var(--ok); }
.risk-foot span b{ font-weight:500; color:var(--muted); }
.risk-line{ text-align:center; margin-top:36px; font-size:16.5px; color:var(--ink); font-weight:600; }
/* ---------- ROI calculator ---------- */

.calc{
  margin:56px auto 10px; max-width:860px;
  background:var(--paper); border:1px solid var(--hairline); border-radius:12px;
  padding:32px 34px 26px;
}
.calc-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
@media (max-width:820px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-rows{ display:grid; gap:22px; }
.calc-row label{ display:flex; justify-content:space-between; align-items:baseline; font-size:14.5px; font-weight:600; margin-bottom:8px; }
.calc-row label .v{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--muted); }
.calc-row input[type=range]{ width:100%; accent-color:var(--ink); }
.calc-out{ text-align:center; }
.calc-out .big{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(34px, 4.5vw, 46px); line-height:1.1;
  background:var(--spectrum) no-repeat left bottom / 100% 4px; padding-bottom:8px;
  display:inline-block; font-variant-numeric:tabular-nums;
}
.calc-out .sub{ margin-top:12px; color:var(--muted); font-size:14.5px; }
.calc-out .sub b{ color:var(--ink); }
.calc-note{ margin-top:20px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint); }
/* ---------- onboarding tasklist ---------- */

.ob-chat{ padding:22px 24px 8px; display:flex; flex-direction:column; gap:14px; }
.ob-headrow{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 24px 6px;
}
.ob-headrow .ob-name{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; }
.ob-chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--hairline-2); border-radius:999px; padding:4px 11px;
}
.ob-count{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:auto; }
.ob-count .hl{ color:var(--ink); font-weight:500; }
.ob-bar{ height:4px; border-radius:2px; background:var(--hairline); overflow:hidden; margin:10px 24px 4px; }
.ob-bar i{ display:block; height:100%; width:0; background:var(--spectrum); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.ob-list{ padding:10px 24px 22px; }
.ob-item{
  display:grid; grid-template-columns:24px 1fr auto; gap:0 14px; align-items:start;
  padding:11px 0; border-bottom:1px solid var(--hairline);
}
.ob-item:last-child{ border-bottom:none; }
.ob-box{
  width:20px; height:20px; border-radius:6px; margin-top:2px;
  border:1.5px solid var(--hairline-2); display:grid; place-items:center;
  color:var(--paper); font-size:11.5px; font-weight:700; transition:all .3s;
}
.ob-item.done .ob-box{ background:var(--c, var(--ink)); border-color:var(--c, var(--ink)); }
.ob-item.done .ob-box::after{ content:"✓"; }
.ob-item.doing .ob-box{ border-color:var(--warn); }
.ob-item.doing .ob-box::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--warn);
  animation:pulse 1s ease-in-out infinite;
}
.ob-what{ font-size:15px; color:var(--faint); transition:color .3s; }
.ob-item.done .ob-what, .ob-item.doing .ob-what{ color:var(--ink); }
.ob-what .ob-tool{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; display:block; color:var(--faint); margin-bottom:1px; }
.ob-what .ob-tool b{ font-weight:500; }
.ob-res{
  font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:14px; text-align:right; white-space:nowrap;
  opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s;
}
.ob-item.done .ob-res, .ob-item.doing .ob-res{ opacity:1; transform:none; }
.ob-res .ok{ color:var(--ok); }
.ob-res .warn{ color:var(--warn); }
.ob-res .idle{ color:var(--faint); }
.ob-item.todo .ob-res{ opacity:1; transform:none; }
/* ---------- cases carousel ---------- */

.cases-sec{ background:var(--wash); border-block:1px solid var(--hairline); }
.car-shell{ margin-top:56px; position:relative; }
.car-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 18px;
  scrollbar-width:none;
}
.car-track::-webkit-scrollbar{ display:none; }
.case{
  flex:0 0 300px; scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--hairline); border-radius:12px;
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 16px 40px -28px rgba(30,33,38,.35);
}
.case-head{ display:flex; align-items:center; gap:10px; }
.case-head .avatar{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
  background:var(--ink); color:var(--paper);
}
.case-head .who{ font-size:13px; font-weight:600; }
.case-head .who span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:400; }
.case-q{ font-size:15px; line-height:1.5; color:var(--ink); flex:1; }
.case-q::before{ content:"“"; }
.case-q::after{ content:"”"; }
.case-v{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:4px; align-self:flex-start;
}
.case-v.ok{ color:var(--ok); background:rgba(48,164,108,.09); border:1px solid rgba(48,164,108,.35); }
.case-v.no{ color:var(--bad); background:rgba(214,69,69,.08); border:1px solid rgba(214,69,69,.32); }
.case-v.wf{ color:var(--b); background:rgba(62,99,221,.08); border:1px solid rgba(62,99,221,.3); }
.case-v.ap{ color:var(--warn); background:rgba(223,164,0,.1); border:1px solid rgba(223,164,0,.4); }
.case-foot{ font-family:var(--mono); font-size:11px; color:var(--faint); line-height:1.7; }
.case-foot b{ color:var(--muted); font-weight:500; }
.car-nav{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.car-btn{
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:var(--paper); border:1px solid var(--hairline-2); color:var(--ink);
  font-size:16px; transition:border-color .2s, transform .15s;
}
.car-btn:hover{ border-color:var(--ink); transform:translateY(-1px); }
/* ---------- pricing ---------- */

.price-grid{
  margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
/* Four tiles at 24px gaps with a 52px price do not fit a laptop; drop to two
   before the existing single-column rule, which must stay last to win. */

@media (max-width:1180px){ .price-grid{ grid-template-columns:repeat(2,1fr); max-width:860px; margin-inline:auto; } }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.plan{
  background:var(--paper); border:1px solid var(--hairline); border-radius:12px;
  padding:34px 30px 30px; display:flex; flex-direction:column; gap:0;
  position:relative; overflow:hidden;
}
.plan.hot{ border-color:var(--ink); box-shadow:0 30px 60px -34px rgba(30,33,38,.4); }
/* The spectrum cap on the "most chosen" card. It used to carry its own
   `border-radius:12px 12px 0 0`, which cannot work: a browser scales a radius
   down when it would overlap on that axis, so on a 3px-high bar 12px became
   about 3px — square ends against a 12px card corner, poking out past the arc.
   The card clips it instead (overflow above), which is the only thing that
   follows the curve exactly, at any radius, forever. The box-shadow is painted
   outside the element and is not affected. */
.plan.hot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--spectrum);
}
.plan .p-name{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.plan .p-tag{
  position:absolute; top:22px; right:22px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--ink); border-radius:999px; padding:3px 9px;
}
.plan .p-price{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  /* Fluid: a fourth tile is ~260px of content, where a fixed 52px broke
     "EUR 1.200 / month" and "Let's talk / annual" across lines. */
  font-size:clamp(34px,3.1vw,52px); line-height:1.05; margin-top:18px; font-variant-numeric:tabular-nums;
}
.plan .p-price small{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--faint); letter-spacing:0; white-space:nowrap; }
.plan ul{ list-style:none; margin-top:24px; display:grid; gap:10px; flex:1; align-content:start; font-size:15px; color:var(--muted); }
.plan ul .big{ color:var(--ink); font-weight:600; }
.plan li::before{ content:"◆"; font-size:8px; margin-right:10px; vertical-align:2px; }
.plan:nth-child(1) li:nth-child(1)::before{ color:var(--g); }
.plan:nth-child(1) li:nth-child(2)::before{ color:var(--t); }
.plan:nth-child(1) li:nth-child(3)::before{ color:var(--b); }
.plan:nth-child(2) li:nth-child(1)::before{ color:var(--b); }
.plan:nth-child(2) li:nth-child(2)::before{ color:var(--p); }
.plan:nth-child(2) li:nth-child(3)::before{ color:var(--m); }
.plan:nth-child(3) li:nth-child(1)::before{ color:var(--o); }
.plan:nth-child(3) li:nth-child(2)::before{ color:var(--r); }
.plan:nth-child(3) li:nth-child(3)::before{ color:var(--y); }
.plan:nth-child(4) li:nth-child(1)::before{ color:var(--p); }
.plan:nth-child(4) li:nth-child(2)::before{ color:var(--g); }
.plan:nth-child(4) li:nth-child(3)::before{ color:var(--t); }
.plan .btn{ margin-top:28px; text-align:center; }
.price-all{
  margin-top:26px; text-align:center; font-size:14.5px; color:var(--muted);
}
.price-all b{ color:var(--ink); font-weight:600; }
.price-sales{
  margin-top:34px; max-width:720px; margin-inline:auto;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center;
  background:var(--wash); border:1px solid var(--hairline); border-radius:12px;
  padding:22px 28px;
}
.price-sales .q{ font-family:var(--display); font-weight:700; font-size:18px; }
.price-sales .a{ color:var(--muted); font-size:14.5px; }
/* ---------- testimonial ---------- */

.testimonial-sec{ text-align:center; }
.testimonial-sec .wrap{ position:relative; }
.t-quote{
  font-family:var(--display); font-weight:650; letter-spacing:-.02em;
  font-size:clamp(24px, 3.4vw, 38px); line-height:1.25;
  max-width:24ch; margin:0 auto; text-wrap:balance;
  position:relative; z-index:1;
}
.t-quote .ul{ background:var(--spectrum) no-repeat left bottom / 100% 4px; padding-bottom:5px; }
.t-attrib{ margin-top:30px; display:flex; align-items:center; justify-content:center; gap:14px; position:relative; z-index:1; }
.t-attrib .avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; font-weight:500;
}
.t-attrib .who{ text-align:left; font-size:14px; line-height:1.4; }
.t-attrib .who b{ display:block; font-weight:600; }
.t-attrib .who span{ color:var(--muted); }
/* ---------- CTA ---------- */

.cta-sec{
  background:var(--ink); color:var(--paper);
  text-align:center; position:relative; overflow:hidden; padding:120px 0;
}
.cta-sec .eyebrow{ color:color-mix(in srgb, var(--paper) 55%, transparent); }
.cta-sec h2{ font-size:clamp(38px, 5.6vw, 68px); color:var(--paper); }
.cta-sec h2 .enh{ display:inline-block; }
.cta-sec h2 .rib{
  display:block; height:5px; border-radius:3px; margin-top:8px;
  background:var(--spectrum);
}
.cta-sec .sec-lede{ color:color-mix(in srgb, var(--paper) 65%, transparent); margin-inline:auto; text-align:center; }
.cta-sec .hero-cta{ margin-top:36px; }
.btn-paper{ background:var(--paper); color:var(--ink); }
.btn-paper:hover{ transform:translateY(-1px); box-shadow:0 14px 32px -12px rgba(0,0,0,.5); }
.btn-ghost-dark{ border-color:color-mix(in srgb, var(--paper) 30%, transparent); color:var(--paper); }
.btn-ghost-dark:hover{ background:color-mix(in srgb, var(--paper) 8%, transparent); }
footer{ border-top:1px solid var(--hairline); background:var(--paper); }
footer .f-mark{ display:block; color:var(--muted); }
footer .f-mark svg{ display:block; height:22px; width:auto; }
/* ---------- footer ---------- */

.foot-in{
  padding:44px 0 40px;
  display:block; font-size:13.5px; color:var(--faint);
}
.foot-top{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.foot-top .f-line{ color:var(--muted); max-width:62ch; }
.foot-nav{
  margin-top:34px; display:grid; grid-template-columns:repeat(3, minmax(0,220px));
  gap:26px 46px;
}
@media (max-width:640px){ .foot-nav{ grid-template-columns:1fr 1fr; } }
.foot-col{ display:flex; flex-direction:column; gap:9px; }
.foot-col b{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); font-weight:500; margin-bottom:3px;
}
.foot-col a{ color:var(--muted); text-decoration:none; font-size:14px; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center;
}
footer .spacer{ flex:1; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .conn-status .ln{ opacity:1; transform:none; }
}
.trust-link{
  margin-top:52px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:24px 26px; border:1px solid var(--hairline-2); border-radius:14px;
  background:var(--paper); text-decoration:none; transition:border-color .2s;
}
.trust-link:hover{ border-color:var(--ink); }
.trust-link .tl-txt{ flex:1 1 380px; color:var(--muted); font-size:15.5px; line-height:1.6; }
.trust-link .tl-txt b{ color:var(--ink); }
.trust-link .tl-cta{
  font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap;
}
/* Scoped to .foot-bottom. As `footer .foot-in a` this outranked
   `.foot-col a{ color:var(--muted) }` — 0,1,2 against 0,1,1 — so every link in
   the three footer columns rendered at --faint (#A9ACB3, 2.3:1 on white) rather
   than the --muted the rule right above plainly intends. The bottom line is
   --faint text and its links should follow it; the columns are navigation. */
footer .foot-bottom a{ color:inherit; }
/* ---------- anchor offset ----------
   The nav is position:sticky at top:0 (71px), so an anchor jump lands the section
   heading underneath it. Both navs on this page are in-page links, so give every
   jump target a matching scroll-margin. */

section[id], header[id]{ scroll-margin-top:92px; }   /* 71px nav + air */

/* ---------- the log table, and the three-up bridge ----------
   Both were inline in four pages, and /playbooks carried the MARKUP for both
   without ever carrying the CSS: its playbooks catalogue rendered as a bare
   <table> and its "not a back door" section as three unstyled paragraphs. Four
   copies, one of them missing, is the argument for one copy here. */
.gate-claim{
  margin-top:40px; padding:24px 26px; border-left:3px solid var(--ink);
  background:var(--wash); color:var(--muted); font-size:16.5px; line-height:1.65;
}
.gate-claim b{ color:var(--ink); }
.logwrap{ overflow-x:auto; }
.logtable{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:12.5px; white-space:nowrap;
}
.logtable th{
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--hairline);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:500;
}
.logtable td{
  padding:12px 16px; border-bottom:1px solid var(--hairline); color:var(--muted);
}
.logtable tr:last-child td{ border-bottom:0; }
.logtable .lt-t{ color:var(--faint); }
.logtable .lt-f{ color:var(--faint); margin-left:8px; }
/* The exceptions table's first column is a person, so it reads as ink rather
   than as another muted cell. Used by /governed/#exceptions and by
   /demo_employees/ scene 03. */
.exc-table td.l{ color:var(--ink); }
.logtable .lt-p{ color:var(--p); }
.logtable b{ font-weight:500; }
.logtable .c-g{ color:var(--g); }
.logtable .c-b{ color:var(--b); }
.logtable .c-r{ color:var(--r); }
.lv{
  padding:2px 9px; border-radius:999px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid currentColor;
}
.lv.ok{ color:var(--g); }
.lv.no{ color:var(--r); }
.lv.ap{ color:var(--warn); }
/* ---------- the bridge to the other page ---------- */

.bridge-row{
  margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.bridge-item b{ display:block; font-size:16px; font-weight:600; }
.bridge-item b::before{
  content:""; display:block; width:22px; height:3px; border-radius:2px;
  background:var(--ink); margin-bottom:14px;
}
.bridge-item:nth-child(1) b::before{ background:var(--b); }
.bridge-item:nth-child(2) b::before{ background:var(--warn); }
.bridge-item:nth-child(3) b::before{ background:var(--g); }
.bridge-item p{ margin-top:10px; color:var(--muted); font-size:15px; line-height:1.62; }

/* ---------- big claims, outside the invoice column ----------
   `.invoice-copy .big-claims` lays these out as a narrow stacked column. Used
   ANYWHERE ELSE — /governed's #additive, /playbooks's #case — the same markup
   inherited no grid and no gap at all: rows jammed together, each paragraph at
   the full 1120px measure with its number stranded in a 120px right-aligned
   gutter. This is the fallback that was missing, so the next page to reuse the
   markup gets it too. */
.big-claims:not(.invoice-copy .big-claims){
    margin-top:52px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
@media (max-width:860px){
  .big-claims:not(.invoice-copy .big-claims){ grid-template-columns:1fr; }
}
.big-claims:not(.invoice-copy .big-claims) .claim{
    display:block; padding:30px 26px 28px;
    border:1px solid var(--hairline-2); border-radius:12px; background:var(--paper);
  }
.big-claims:not(.invoice-copy .big-claims) .claim .n{
    display:block; min-width:0; text-align:left;
    font-size:52px; margin-bottom:16px;
  }
.big-claims:not(.invoice-copy .big-claims) .claim p{ line-height:1.6; }

/* ---------- the playbooks catalogue (/playbooks) ---------- */
.wf-table td.l{ white-space:nowrap; }
.wf-table .ai-chip{ margin-left:9px; }