/* Customer Service Pro — design tokens, resets, base.
   Brand values carried forward from the codex build; extended for the
   3D/WebGL era with deeper surface steps and a full motion vocabulary. */

:root{
  /* Voltage */
  --mint:#3FCF8E; --mint-soft:#6FE1AA; --mint-bright:#8FF3C4; --mint-deep:#146E40;
  --mint-glow:rgba(63,207,142,.42); --mint-glow-2:rgba(63,207,142,.16); --mint-glow-3:rgba(63,207,142,.06);
  --mint-rim:rgba(63,207,142,.55);

  /* Surfaces — dark */
  --bg:#04120C; --bg-2:#06160F; --bg-3:#0A1F16; --bg-4:#0E2A1E;
  --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.07); --panel-3:rgba(255,255,255,.10);
  --hairline:rgba(255,255,255,.08); --hairline-2:rgba(255,255,255,.14); --hairline-3:rgba(255,255,255,.22);

  /* Ink */
  --ink:#F4FBF7; --ink-soft:#B7C5BD; --ink-faint:#6E847A; --ink-mute:#4A5C53;

  /* Status hues. These are the DARK-surface values; the light theme and the
     dark-band block below each restate them for their own ground. Never use a
     status colour without checking which surface it will land on. */
  --rose:#FF7A8A; --amber:#FFC56A; --violet:#9B8CFF;

  /* Type */
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;

  /* Measure */
  --frame:1320px; --frame-narrow:980px;
  --bezel:clamp(20px,4vw,56px); --gap:clamp(16px,2vw,32px);
  --r-card:22px; --r-lg:28px; --r-sm:12px; --r-pill:999px;

  /* Motion vocabulary — shared with the operator app */
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.2,.65,.25,1);
  --ease-out-strong:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.2,.7,.2,1);
  --ease-blink:cubic-bezier(.5,0,.5,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-spring-soft:cubic-bezier(.25,1.4,.35,1);

  --dur-fast:220ms; --dur:380ms; --dur-slow:640ms; --dur-cine:1100ms;

  /* Elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.30);
  --sh-2:0 8px 30px rgba(0,0,0,.36);
  --sh-3:0 24px 70px rgba(0,0,0,.46);
  --sh-glow:0 12px 48px var(--mint-glow-2);
}

html[data-theme="light"]{
  --bg:#F4F7F3; --bg-2:#EDF1EA; --bg-3:#E3E8DE; --bg-4:#D8DFD3;
  --panel:rgba(11,28,18,.04); --panel-2:rgba(11,28,18,.07); --panel-3:rgba(11,28,18,.11);
  --hairline:rgba(11,28,18,.10); --hairline-2:rgba(11,28,18,.16); --hairline-3:rgba(11,28,18,.24);
  --ink:#07140C; --ink-soft:#2E3D33; --ink-faint:#5C6E62; --ink-mute:#92A199;
  /* Status hues, darkened for the off-white page: the dark-surface values
     above measure 2.31:1 here (AA needs 4.5:1). These are 5.7:1, 4.6:1, 5.2:1. */
  --rose:#B23048; --amber:#9A6412; --violet:#5B4BC4;
  --mint:#1C8A4F; --mint-soft:#28A862; --mint-bright:#146E40;
  --mint-glow:rgba(28,138,79,.28); --mint-glow-2:rgba(28,138,79,.10); --mint-glow-3:rgba(28,138,79,.04);
  --mint-rim:rgba(28,138,79,.45);
  --sh-1:0 1px 2px rgba(11,28,18,.06);
  --sh-2:0 8px 30px rgba(11,28,18,.09);
  --sh-3:0 24px 70px rgba(11,28,18,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  font-feature-settings:"kern","liga","ss01";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; position:relative;
  min-height:100vh; min-height:100dvh;
}


/* Atmosphere — sits under the WebGL canvas, gives the void depth */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 72% -12%, rgba(63,207,142,.14) 0%, transparent 58%),
    radial-gradient(70% 55% at 6% 26%, rgba(63,207,142,.07) 0%, transparent 60%),
    linear-gradient(180deg,#06180F 0%,#04120C 55%,#020C08 100%);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(90% 70% at 72% -12%, rgba(28,138,79,.06) 0%, transparent 60%),
    linear-gradient(180deg,#F6F9F4 0%,#EEF2EB 100%);
}
/* Survey grid */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);
}
html[data-theme="light"] body::after{
  background-image:
    linear-gradient(rgba(11,28,18,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,28,18,.035) 1px,transparent 1px);
}

main,header,footer,section{position:relative;z-index:1}
a{color:var(--mint);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--mint-soft)}
button{font:inherit;color:inherit}
img,svg,video,canvas{display:block;max-width:100%}
::selection{background:var(--mint);color:#001A0B}
html[data-theme="light"] ::selection{background:var(--mint);color:#fff}
*:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}

.frame{width:min(100%,var(--frame));margin:0 auto;padding-inline:var(--bezel)}
.frame-narrow{width:min(100%,var(--frame-narrow));margin:0 auto;padding-inline:var(--bezel)}

.anchor-alias{display:block;position:relative;top:-96px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--mint);color:#001A0B;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip-link:focus{left:0}

/* ── Type utilities ───────────────────────────────────────────── */
.display{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 95,"wght" 500;letter-spacing:-.032em;line-height:.96;text-wrap:balance}
.display em{font-style:normal;color:var(--mint);font-variation-settings:"opsz" 96,"wdth" 110,"wght" 500}
.serif{font-family:var(--serif);font-variation-settings:"opsz" 36,"wght" 500,"SOFT" 30}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint-glow);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

/* Index row. All three cells share one type system — mixing mono 11/.18em
   with sans 12/.28em made the row read crooked at every size. */
.kicker{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:22px;row-gap:7px;padding-bottom:20px;margin-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--hairline)}
.kicker .no,.kicker .label,.kicker .meta{font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.kicker .no{color:var(--mint);white-space:nowrap}
.kicker .label{color:var(--ink)}
.kicker .meta{color:var(--ink-faint);text-align:right}
/* Letter-spacing leaves a trailing space after the last glyph, so the optical
   gap ran wider than the metric one. Pull it back. */
.kicker .no,.kicker .label{margin-right:-.16em}
@media(max-width:720px){.kicker{grid-template-columns:minmax(0,1fr);gap:8px}.kicker .no,.kicker .label,.kicker .meta{overflow-wrap:anywhere}.kicker .meta{text-align:left}}

.sec{padding-block:clamp(80px,11vw,160px)}
.sec-head{max-width:900px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{font-family:var(--display);font-variation-settings:"opsz" 72,"wdth" 96,"wght" 500;font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
.sec-head h2 em{font-style:normal;color:var(--mint)}
.sec-head h2 .light{color:var(--ink-faint)}
.sec-head .dek{font-size:clamp(15px,1.35vw,18px);line-height:1.65;color:var(--ink-soft);max-width:68ch;margin:0;text-wrap:pretty}

/* ── Surfaces ─────────────────────────────────────────────────── */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.016) 100%);
  border:1px solid var(--hairline); border-radius:var(--r-card);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
}
html[data-theme="light"] .glass{background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.45) 100%)}

/* The `hidden` attribute has to beat every display rule in this file.
   `[hidden]{display:none}` lives in the UA stylesheet, so ANY author rule
   that sets display wins over it -- including `.btn{display:inline-flex}`
   immediately below. The effect was not cosmetic: pricing.html ships its
   Start-with-<plan> buttons with `hidden`, and the catalog gate only removes
   that attribute once a LIVE Stripe key exists. Because .btn re-displayed
   them regardless, the buy buttons were reachable the whole time, sending
   visitors into a checkout for prices the catalog had not confirmed. */
[hidden]{display:none!important}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:500; letter-spacing:.005em;
  padding:11px 17px 11px 19px; border-radius:var(--r-pill);
  cursor:pointer; border:1px solid var(--hairline);
  background:var(--panel); color:var(--ink);
  transition:background var(--dur) var(--ease-drawer),border-color var(--dur) var(--ease-drawer),color var(--dur) var(--ease-drawer),box-shadow var(--dur) var(--ease-drawer),transform 120ms var(--ease-out);
  white-space:nowrap; will-change:transform;
}
.btn:hover{background:var(--panel-2);border-color:var(--hairline-2);color:var(--ink)}
.btn:active{transform:scale(.975)}
.btn.primary{
  background:var(--mint); color:#001A0B; border-color:var(--mint); font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 30px var(--mint-glow-2);
}
html[data-theme="light"] .btn.primary{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 30px var(--mint-glow-2)}
.btn.primary:hover{background:var(--mint-soft);border-color:var(--mint-soft);color:#001A0B;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 44px var(--mint-glow)}
html[data-theme="light"] .btn.primary:hover{color:#fff}
.btn .ico{
  width:20px;height:20px;display:inline-grid;place-items:center;border-radius:50%;
  background:rgba(0,26,11,.16);font-size:11px;
  transition:transform var(--dur) var(--ease-drawer),background var(--dur) var(--ease-drawer);
}
html[data-theme="light"] .btn.primary .ico{background:rgba(255,255,255,.22)}
.btn.primary:hover .ico{transform:translateX(3px)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel);border-color:var(--mint-rim)}
.btn.lg{font-size:15px;padding:14px 22px 14px 24px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.textlink{display:inline-flex;align-items:center;gap:7px;color:var(--mint);font-size:14px;font-weight:500}
.textlink span{transition:transform var(--dur) var(--ease-drawer);display:inline-block}
.textlink:hover span{transform:translateX(4px)}

/* ── Reveal (driven by motion.js) ─────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out-strong);transition-delay:var(--rd,0ms)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="scale"]{transform:translateY(26px) scale(.965)}
[data-reveal="scale"].in{transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="left"].in{transform:none}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="right"].in{transform:none}
/* Sideways reveals push their element 32px outside the frame until it
   scrolls in. There is no room for that on a phone -- it is the page's
   horizontal overflow -- so below the tablet breakpoint they rise
   instead, like every other reveal. */
@media(max-width:640px){[data-reveal="left"]:not(.in),[data-reveal="right"]:not(.in){transform:translateY(26px)}}

/* Word-by-word headline lift */
.hw{display:inline-block;opacity:0;transform:translateY(.5em) rotateX(-40deg);transform-origin:50% 100%;animation:hwIn 900ms var(--ease-out-strong) forwards;animation-delay:calc(var(--i,0)*68ms + 180ms)}
@keyframes hwIn{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hw{opacity:1;transform:none;animation:none}
}