/* ============================================================
   Clockwork Outbound — Marketing Site Shared Stylesheet
   ============================================================
   Canonical design system for the six marketing pages (index,
   deliverability, pricing, about, privacy, terms). Sourced from
   index.html's inline styles (the richest baseline) and unified
   per docs/marketing-site/TEMPLATE.md.

   Google Fonts <link> tags stay in each page's <head>; this file
   only carries the --sans/--mono font-var tokens.

   Page-local <style> blocks keep: hero variants (.hero/.dhero/
   .phero/.ahero), and page-unique components (.cmd, .dtable,
   .gauge, .price-grid, .def, .legal, .prose). All pages use the
   canonical shared .btn/.btn-brass classes below; no page-local
   button overrides remain (the former about/privacy/terms hack
   that baked brass into bare .btn was removed 2026-07-20).
   See TEMPLATE.md for copy-paste blocks.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ck-bg:#0B0C0D; --ck-surface:#131517; --ck-surface-raised:#1A1C1F; --ck-surface-nested:#212427;
  --ck-chrome:#0E0F11;
  --ck-border:#23262B; --ck-divider:#1B1E22;
  --ck-text:#F5F5F6; --ck-text-secondary:#C6C6C9; --ck-text-muted:#8C8C90; --ck-text-disabled:#57585B;
  --ck-text-on-brass:#1F1403;
  --ck-brass:#E8A13C; --ck-brass-hot:#FFC24B; --ck-brass-deep:#C77F1F; --ck-brass-soft:#2A2113;
  /* No red/green traffic-light hues on the marketing site (client
     preference, 2026-07-24). Status colors fold into the brand instead:
     POSITIVE states reuse brass (the palette's only saturated hue), and
     CAUTIONARY states (warning / error / killed) drop to neutral muted
     grey. A gauge now reads as brand-accent-good vs quiet-threshold,
     never green-vs-red, so brass keeps the top of the hierarchy and no
     second hue competes with it. Soft fills track the same logic:
     brass-soft for positive, surface-nested for cautionary. */
  --ck-success:#E8A13C; --ck-success-soft:#2A2113;
  --ck-warning:#8C8C90; --ck-warning-soft:#212427; --ck-error:#8C8C90;
  --ck-killed:#8C8C90; --ck-killed-soft:#212427;
  --ck-info:#83A8D3;
  --ck-frame-surface:#0F1113; --ck-frame-stroke:#262A30; --ck-frame-header:#16181B;
  /* Radius scale (docs/design.md §11). Content cards = card (12px);
     instrument panels / email frames = frame (14px). */
  --ck-radius-tag:4px; --ck-radius-badge:6px; --ck-radius:8px;
  --ck-radius-card:12px; --ck-radius-frame:14px; --ck-radius-pill:9999px;
  /* Corner shape for that scale — see the universal rule in the reset. */
  --ck-corner:squircle;
  --ck-elev-1:0 1px 2px 0 rgba(0,0,0,.40), inset 0 1px 0 0 rgba(255,255,255,.03);
  --ck-elev-2:0 4px 12px -2px rgba(0,0,0,.55), inset 0 1px 0 0 rgba(255,255,255,.04);
  --ck-elev-3:0 12px 32px -6px rgba(0,0,0,.65), inset 0 1px 0 0 rgba(255,255,255,.05);
  --ck-elev-4:0 24px 64px -12px rgba(0,0,0,.72), inset 0 1px 0 0 rgba(255,255,255,.06);
  --ck-elev-frame:0 8px 28px -8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.03);
  --ck-focus-ring:#FFC24B;
  --ck-glow-hero:0 0 180px 50px rgba(232,161,60,.14);
  --ck-glow-cta:0 0 0 1px rgba(232,161,60,.40), 0 4px 14px -2px rgba(232,161,60,.30);
  --ck-glow-focus:0 0 0 1px rgba(11,12,13,1), 0 0 0 3px rgba(255,194,75,.80);
  --sans:"Recursive",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}

/* ---------- Reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
/* Corner shape. Every radius on the site is a superellipse (squircle),
   not a circular arc. corner-shape does not inherit, so it is applied
   through the universal selector rather than set once on :root; it is
   inert wherever border-radius is 0, so this only reshapes corners that
   were already rounded. It reaches the page-local <style> blocks too,
   which is the point: a page that adds a card gets the squircle without
   opting in. Browsers without CSS Borders L4 ignore the declaration and
   render the plain rounded corner, which is the correct fallback.
   Circles and the pill .btn/.start-input opt back out with
   corner-shape:round — a squircle at 50% / 9999px radius is a blob, not
   a circle. Page-local rules that set 50% or 9999px must do the same. */
*,*::before,*::after{corner-shape:var(--ck-corner)}
html{scroll-behavior:smooth}
body{background:var(--ck-bg);color:var(--ck-text-secondary);
  font:400 16px/1.55 var(--sans);letter-spacing:-0.006em;
  font-variation-settings:"MONO" 0,"CASL" 0,"slnt" 0,"CRSV" 0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ck-brass-deep);color:var(--ck-bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--ck-glow-focus);border-radius:6px}

/* scroll-reveal — driven by the shared js/reveal.js on every page. Elements
   start hidden (gated on html.js so no-JS users see everything) and rise in
   when they enter the viewport. --rd is a per-element stagger delay the
   script sets on siblings that reveal together; it defaults to 0 so an
   element that reveals alone has no delay. The easing is a soft
   decelerate (fast start, gentle settle) rather than plain ease-out, which
   reads as more deliberate for the longer .62s travel. */
html.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rd,0s);will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none;will-change:auto}
/* Page-hero copy (js/reveal.js tags it .rv-hero) rises a touch slower than
   body content, so a short 2-3 element hero reads as deliberate rather than
   snapping in. Pairs with the larger HERO_STEP stagger in reveal.js. */
html.js .reveal.rv-hero{transition-duration:.74s,.74s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none;transition-delay:0s}
}
/* Print / non-scrolling renderers never fire the IntersectionObserver, so
   reveal-gated content would stay invisible. Force it all visible on print. */
@media print{
  html.js .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- Layout ---------- */
/* .wrap is canonical (1440px). .wrap-wide is kept as an alias with
   identical values so existing markup keeps working untouched. */
/* position:relative so a .section-ic ghost mark can anchor to the wrap's
   top-right corner (see .section-ic). Harmless everywhere else. */
.wrap{max-width:1440px;margin:0 auto;padding:0 24px;position:relative}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 24px;position:relative}
@media(min-width:1024px){.wrap{padding:0 40px}.wrap-wide{padding:0 40px}}

/* ---------- Header / nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(11,12,13,.82);border-bottom:1px solid var(--ck-divider)}
@supports (backdrop-filter:blur(0)){header{backdrop-filter:blur(10px)}}
.nav{height:68px;display:flex;align-items:center;gap:20px}
/* Brand logo. Full lockup (mark + CLOCKWORK OUTBOUND) on desktop; under
   480px it swaps to the compact lockup (mark + CLOCKWORK), mirroring the
   old text wordmark's behaviour of dropping OUTBOUND on narrow screens.
   The <a> carries the aria-label, so the images are alt="" (decorative)
   to avoid the link being announced twice. */
.wordmark{display:flex;align-items:center;flex:none}
.wordmark img{display:block;width:auto;height:22px}
.wordmark .lg-compact{display:none}
@media(max-width:479px){.wordmark .lg-full{display:none}.wordmark .lg-compact{display:block;height:20px}}
.nav-links{display:none;gap:28px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{font:500 14.5px/1 var(--sans);color:var(--ck-text-secondary);padding:6px 2px}
.nav-links a:hover{color:var(--ck-text)}
.nav-links a.on{color:var(--ck-brass-hot)}
.nav .spacer{flex:1}
@media(min-width:900px){.nav-links{display:flex}}
/* Below 900px the centered nav row can't share the bar with the logo and CTA,
   so it wraps to a compact second row instead of vanishing (no hamburger, no JS). */
@media(max-width:899px){
  .nav{flex-wrap:wrap;height:auto;min-height:60px;padding-top:9px;padding-bottom:9px;row-gap:8px}
  .wordmark{order:0}
  .nav .spacer{order:1}
  .nav .btn{order:2}
  .nav-links{display:flex;position:static;left:auto;transform:none;order:3;flex-basis:100%;
    justify-content:center;flex-wrap:wrap;gap:10px 20px}
}
@media(max-width:479px){.nav{gap:12px}.nav .btn-sm{padding:0 13px;font-size:12px}.nav-links{gap:8px 16px}}

/* ---------- Section rhythm ---------- */
section{padding:80px 0}
@media(min-width:1024px){section{padding:112px 0}}
.band{background:var(--ck-surface)}
.bordered{border-top:1px solid var(--ck-divider);border-bottom:1px solid var(--ck-divider)}

/* ---------- Typography ---------- */
/* Eyebrows carry the brass. They were muted grey while their own icon was
   brass, which read as an accident. Brass here is a text accent, not a
   filled surface, so it does not spend the "one brass CTA per viewport"
   budget (that rule governs .btn-brass fills). */
.eyebrow{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ck-brass)}
.eyebrow-ic{display:inline-flex;align-items:center;gap:8px}
.eyebrow-ic svg{width:14px;height:14px;color:var(--ck-brass)}
/* The offer kicker above a closing heading is a plain .eyebrow, same as every
   other kicker on the site. There is deliberately no pill/chip container: see
   the "Eyebrow/kicker: bare mono uppercase text, no pill container" recipe in
   docs/design.md, and note that /start states this same offer as an eyebrow.
   A filled brass-soft chip would also put a second brass surface in the same
   viewport as the .btn-brass, which the text-accent carve-out above does not
   cover. Do not reintroduce one. */
.h2{font:600 clamp(1.9rem,2.2vw + 1rem,2.5rem)/1.12 var(--sans);letter-spacing:-0.025em;color:var(--ck-text);text-wrap:balance}
.h3{font:500 18px/1.4 var(--sans);letter-spacing:-0.01em;color:var(--ck-text);text-wrap:balance}
.lead{font:400 16px/1.6 var(--sans);color:var(--ck-text-secondary);max-width:70ch;text-wrap:pretty}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* .intro is the standard section kicker block (eyebrow + h2 + lead).
   The .section-ic ghost mark is NOT placed in here: .intro is capped at
   660px, so an icon anchored to it lands mid-page next to the text. It
   anchors to the section's .wrap instead (see .section-ic below). */
.intro{max-width:660px}
.intro .eyebrow{margin-bottom:18px}
.intro .h2{margin-bottom:18px}
.intro .lead{margin-bottom:0}
/* Centered variant, for sections whose body is a centered column (FAQ).
   A left-aligned heading over a centered column reads as misaligned. */
.intro.center{max-width:760px;margin-inline:auto;text-align:center}
.intro.center .eyebrow-ic{justify-content:center}
.intro.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;white-space:nowrap;
  border-radius:9999px;corner-shape:round;font:600 14.5px/1 var(--sans);letter-spacing:-0.003em;cursor:pointer;border:1px solid transparent;
  transition:background .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out,transform .16s ease-out}
.btn svg{width:15px;height:15px}
.btn-brass{background:var(--ck-brass);color:var(--ck-text-on-brass);box-shadow:var(--ck-glow-cta)}
.btn-brass:hover{background:var(--ck-brass-hot)}
.btn-brass:active{background:var(--ck-brass-deep)}
.btn-ghost{background:transparent;color:var(--ck-text);border-color:var(--ck-border);font-weight:500}
.btn-ghost:hover{background:var(--ck-surface-raised)}
.btn-lg{height:50px;padding:0 26px;font-size:15px}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-stack{flex-direction:column;gap:1px;height:auto;padding:9px 28px;line-height:1.15}
.btn-stack .l1{display:inline-flex;align-items:center;gap:7px;font:600 15px/1.15 var(--sans);letter-spacing:-0.003em}
.btn-stack .l1 svg{width:14px;height:14px}
.btn-stack .l2{font:400 11.5px/1.1 var(--sans);opacity:.72}

/* ---------- Callouts ---------- */
/* A highlighted note. The emphasis is a leading brass marker, not a
   border-left stripe (a banned side-stripe accent); full border all around. */
.plate{position:relative;margin-top:36px;background:var(--ck-surface-raised);border:1px solid var(--ck-border);
  border-radius:var(--ck-radius-card);padding:20px 28px 20px 48px;font:400 14px/1.65 var(--sans);color:var(--ck-text-muted);max-width:100%}
.plate::before{content:"";position:absolute;left:22px;top:23px;width:8px;height:8px;border-radius:2px;
  background:var(--ck-brass);box-shadow:0 0 10px -1px rgba(232,161,60,.65)}
.plate b{color:var(--ck-text-secondary);font-weight:500}
.plate .mono{font-size:13px;color:var(--ck-text-secondary)}

/* Base math/worked-number callout. pricing.html needs its own
   `.def .math` local rule to out-specificity `.def p`'s 76ch cap —
   see the comment above pricing.html's local <style>. */
.price-math{margin-top:22px;font:400 13px/1.7 var(--mono);color:var(--ck-text-muted);max-width:100%;padding:18px 24px;background:var(--ck-surface);border:1px solid var(--ck-border);border-radius:var(--ck-radius-card)}
.price-math b{color:var(--ck-text);font-weight:500;font-variant-numeric:tabular-nums}

/* Closing CTA: ONE pattern for every page that has one. The markup is always
     <section class="close"><div class="wrap"><div class="closing-panel reveal">
       p.eyebrow / h2.h2 / p.lead / a.btn.btn-brass.btn-lg.btn-stack
   and the heading and lead always carry the .h2/.lead utility classes. Do not
   re-declare .closing-panel or .close in a page's <style>: about.html
   and contact.html each did, which is how the five closing CTAs drifted into
   three vertical rhythms and two panel widths. Page-specific copy is fine;
   page-specific chrome is not.

   .close only extends the bottom of the standard section rhythm so the panel
   is not crowded against the footer. The top stays on the shared 80/112 grid. */
.close{padding-bottom:96px}
@media(min-width:1024px){.close{padding-bottom:120px}}
/* Capped and centered: a full-1440px CTA panel reads as a slab and pushes
   the button miles from the heading. 880px keeps it a deliberate object. */
.closing-panel{max-width:880px;margin-inline:auto;background:var(--ck-surface-raised);border:1px solid var(--ck-border);border-radius:18px;padding:56px 32px;text-align:center;box-shadow:var(--ck-elev-frame)}
@media(min-width:768px){.closing-panel{padding:72px 64px}}
.closing-panel .eyebrow{margin-bottom:22px}
.closing-panel .h2{margin-bottom:16px}
.closing-panel .lead{margin:0 auto 30px;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.start-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px;margin:0 auto}
.start-input{flex:1 1 220px;min-width:0;height:50px;padding:0 16px;border-radius:9999px;corner-shape:round;border:1px solid var(--ck-border);
  background:var(--ck-surface-nested);color:var(--ck-text);font:400 15px/1 var(--sans)}
.start-input::placeholder{color:var(--ck-text-muted)}
.start-input:focus-visible{outline:none;border-color:var(--ck-brass);box-shadow:var(--ck-glow-focus)}
.start-form .btn{flex:0 0 auto}
.start-hint{margin:14px auto 0;font:400 13px/1.5 var(--sans);color:var(--ck-text-muted)}
.start-note{margin:6px auto 0;max-width:44ch;font:400 13px/1.5 var(--sans);color:var(--ck-text-muted)}
.start-msg{margin:16px auto 0;max-width:46ch;font:500 14.5px/1.5 var(--sans)}
.start-ok{color:var(--ck-success)}
.start-err{color:var(--ck-error)}
.step-tags{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ck-text-muted)}

/* ---------- FAQ ---------- */
/* DECISION 2026-07-20: .faq was max-width:820px with no auto margins,
   left-stranded inside the wide container. Centered column now. */
/* Column is sized to the answer measure (~72ch) rather than an arbitrary
   900px, so the text fills its column edge to edge and the centered block
   reads as deliberately centered instead of slightly off. */
.faq{margin-top:40px;border-top:1px solid var(--ck-divider);max-width:720px;margin-inline:auto}
.qa{padding:22px 0;border-bottom:1px solid var(--ck-divider)}
.qa h3{font:500 17px/1.4 var(--sans);color:var(--ck-text);margin-bottom:9px}
.qa h3::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;corner-shape:round;background:var(--ck-brass);vertical-align:middle;margin-right:10px;margin-top:-2px}
.qa p{font:400 15px/1.6 var(--sans);color:var(--ck-text-muted);max-width:none}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--ck-divider);padding:52px 0 60px;background:var(--ck-chrome)}
.foot{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-start;justify-content:space-between}
/* Blurb under the wordmark. Replaced the old mono .fine print 2026-07-27: that
   line restated the vertical and then carried two compliance facts (US only,
   opt-out SLA) that the deliverability page and the privacy policy already own
   properly. This slot restates the offer instead, which is the one thing worth
   repeating to someone who scrolled the whole page. Sans, not mono: it is a
   sentence, not a data readout. */
.foot .blurb{margin-top:16px;font:400 13.5px/1.6 var(--sans);color:var(--ck-text-secondary);max-width:42ch}
.foot .cols{display:flex;flex-wrap:wrap;gap:24px 56px}
.foot a{font:400 13px/2 var(--sans);color:var(--ck-text-muted)}
.foot a:hover{color:var(--ck-text-secondary)}
/* Grid, not flex, since the strip carries three items and the middle one is
   the tagline. space-between would centre it between its neighbours rather
   than in the strip, and the two neighbours are never the same width. The
   1fr/auto/1fr track set puts it on the true centre line at any side width.
   Below the breakpoint the three stack left-aligned in source order. */
.foot-base{display:grid;gap:10px 24px;align-items:center;margin-top:44px;padding-top:22px;border-top:1px solid var(--ck-divider);font:400 11px/1.6 var(--mono);letter-spacing:.02em;color:var(--ck-text-muted)}
@media(min-width:760px){
  .foot-base{grid-template-columns:1fr auto 1fr}
  .foot-base > :last-child{text-align:right}
}
/* Tagline, centre slot of the bottom strip. Same mono, same 11px, same muted
   as everything else down here: it gets no colour lift at all. Its only
   distinction is dropping the strip's tracking to 0, so it reads as two words
   of speech rather than as another chrome label. It is a signature, not a
   headline, and nothing in the strip should pull the eye off the closing CTA
   above the footer. */
.foot-base .sig{letter-spacing:0}
.foot-base a{color:var(--ck-text-muted)}
.foot-base a:hover{color:var(--ck-text-secondary)}

/* ---------- Icon placement (new) ---------- */
/* Ghost mark, anchored to the TOP-RIGHT of the section's .wrap (which is
   position:relative), not to .intro. This fills the dead space to the
   right of the 660px intro column and gives each section a visual anchor
   at its corner. Large and low-opacity: texture, never a focal point. */
.section-ic{position:absolute;top:-6px;right:24px;width:128px;height:128px;color:var(--ck-brass);opacity:.13;pointer-events:none;z-index:0}
.section-ic svg{width:100%;height:100%;stroke:currentColor;fill:none}
/* right offset tracks .wrap's own padding so the mark lines up with the
   content edge (where cards and tables end), not the padding edge. */
@media(min-width:1024px){.section-ic{right:40px}}
@media(max-width:1023px){.section-ic{width:96px;height:96px;opacity:.1}}
@media(max-width:767px){.section-ic{display:none}}

/* Cards that use .card-ic-tr need position:relative on the card itself.
   No single shared card base class exists across pages yet (each page
   defines its own: .pcard, .mod, .step, .price-card, .pt, .gate...), so
   page agents adding this icon must add position:relative to their own
   card rule. See TEMPLATE.md. */
.card-ic-tr{position:absolute;top:18px;right:18px;width:26px;height:26px;color:var(--ck-brass);opacity:.6}
.card-ic-tr svg{width:100%;height:100%;stroke:currentColor;fill:none}

/* ---------- Subpage hero template (for new pages) ---------- */
/* Left-aligned copy + right visual slot, collapses to stacked on mobile.
   See TEMPLATE.md for the markup this pairs with. */
.subhero{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.subhero{grid-template-columns:1.1fr .9fr;gap:48px}}
.subhero-copy{position:relative}
.subhero-visual{position:relative}