/* Revitics Enterprises — public site.

   Register: precision instrument, not brochure. This company's product argues
   with insurers about money and its whole pitch is that the numbers can be
   checked, so the site should feel engineered — tight typography, tabular
   figures, hairline rules, restrained colour, and real data shapes rather than
   stock decoration. */

:root{
  /* Ink, not black. Pure #000 reads cheap on a screen and crushes the grain. */
  --ink:#0a1220; --ink-soft:#111c2e; --ink-line:#1d2b42;
  --paper:#fbfaf8;           /* warm off-white; pure white looks unfinished */
  --paper-2:#f3f1ed;
  --line:#e2ded7;
  --text:#141c28; --text-2:#4d5768; --text-3:#8b94a3;
  --inv:#f4f7fb; --inv-2:#93a5c0; 
  --inv-3:#63769a;
  --accent:#1f5fd0;          /* the one saturated colour, used sparingly */
  --accent-soft:#e8effc;
  --gold:#b0833c;            /* hairline luxury cue, never a fill */
  --money:#0d7a52; --money-soft:#e6f3ec;
  --warn:#9a5b12; --warn-soft:#fbf1e3;
  --r:14px; --r-sm:9px;
  --wide:1180px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -12px rgba(16,24,40,.14);
  font-size:16px;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  background:var(--paper);color:var(--text);line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 28px}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.028em;line-height:1.1;color:var(--text)}
h1{font-size:clamp(2.4rem,5.2vw,3.85rem);letter-spacing:-.038em;line-height:1.04}
h2{font-size:clamp(1.75rem,3vw,2.4rem);line-height:1.12}
h3{font-size:1.02rem;letter-spacing:-.012em;line-height:1.35}
.eyebrow{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--text-3);display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:64px;background:var(--line)}
.lede{color:var(--text-2);font-size:1.09rem;line-height:1.68;margin-top:18px;max-width:64ch}
.serif{font-family:"Instrument Serif","Iowan Old Style",Georgia,serif;font-weight:400;
  letter-spacing:-.01em;font-style:italic}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(251,250,248,.82);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:30px;height:72px}
.logo{text-decoration:none;color:var(--text);display:flex;flex-direction:column;line-height:1}
.logo b{font-size:1.24rem;font-weight:650;letter-spacing:-.03em}
.logo small{font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;margin-top:5px}
nav.main{display:flex;gap:26px;margin-left:auto;align-items:center}
nav.main a{color:var(--text-2);text-decoration:none;font-size:.9rem;font-weight:500;
  letter-spacing:-.005em;position:relative;padding:4px 0}
nav.main a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .28s cubic-bezier(.2,.7,.3,1)}
nav.main a:not(.btn):hover::after,nav.main a[aria-current]:not(.btn)::after{right:0}
nav.main a:hover,nav.main a[aria-current]{color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:550;font-size:.9rem;letter-spacing:-.008em;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid var(--ink);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{background:#16233a;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(10,18,32,.5)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn.lg{padding:14px 26px;font-size:.97rem}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:#fff;border-color:#cfc9c0;box-shadow:var(--shadow)}
/* `nav.main a` outranks `.btn` on specificity; without this the header's one
   call to action rendered dark grey on dark — a real contrast failure. */
nav.main a.btn,nav.main a.btn:hover{color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;font-size:1rem}

/* ---------- dark canvas ---------- */
.dark{position:relative;background:var(--ink);color:var(--inv);overflow:hidden;isolation:isolate}
.dark::before{/* soft directional light */
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:radial-gradient(60% 55% at 22% 8%,rgba(45,95,190,.34),transparent 70%),
             radial-gradient(45% 45% at 88% 0%,rgba(13,122,82,.20),transparent 72%);
  z-index:-2;pointer-events:none}
.dark::after{/* fine grain, so the gradient is not a flat wash */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lede{color:var(--inv-2)}
.dark .eyebrow{color:var(--inv-3)}
.dark .eyebrow::after{background:var(--ink-line)}
.dark .btn{background:#fff;color:var(--ink);border-color:#fff}
.dark .btn:hover{background:#e9eef6}
.dark .btn.ghost{background:transparent;color:#fff;border-color:#33456a}
.dark .btn.ghost:hover{background:rgba(255,255,255,.06);border-color:#4a5f8c}

.hero{padding:104px 0 96px}
.hero h1{max-width:16ch}
.hero .lede{max-width:56ch;font-size:1.16rem}
.cta{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap}
.hero-sub{padding:88px 0 76px}
.hero-sub h1{font-size:clamp(2rem,4vw,2.9rem);max-width:20ch}

/* ---------- proof strip ---------- */
.proof{border-top:1px solid var(--ink-line);margin-top:64px;padding-top:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.proof .item .k{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--inv-3);font-weight:600}
.proof .item .v{font-size:1.55rem;font-weight:600;letter-spacing:-.03em;color:#fff;margin-top:8px}
.proof .item p{color:var(--inv-3);font-size:.83rem;margin-top:5px;line-height:1.5}
.proof .item.verified .v{color:#4fd39a}

/* ---------- sections ---------- */
section{padding:96px 0}
section.tight{padding:72px 0}
section.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:60ch}
.grid{display:grid;gap:20px;margin-top:46px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d6d0c7}
.card .k{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;margin-bottom:12px;display:block}
.card h3{margin-bottom:9px}
.card p{color:var(--text-2);font-size:.94rem;line-height:1.62}
.card.stage{position:relative;overflow:hidden}
.card.stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.card.stage.on::before{background:var(--money)}
.dark .card{background:rgba(255,255,255,.035);border-color:var(--ink-line)}
.dark .card:hover{background:rgba(255,255,255,.06);border-color:#2c3f61;box-shadow:none}
.dark .card p{color:var(--inv-2)}
.dark .card .k{color:var(--inv-3)}

.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent 42%);margin:0 0 26px;
  opacity:.55}

.step{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{flex:0 0 34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--text-3);display:grid;place-items:center;
  font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:4px}
.step p{color:var(--text-2);font-size:.95rem}

.note{background:#fff;border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 24px;color:var(--text-2);
  font-size:.95rem;margin-top:34px;max-width:78ch}
.note strong{color:var(--text);font-weight:600}
.dark .note{background:rgba(255,255,255,.04);border-color:var(--ink-line);
  border-left-color:var(--gold);color:var(--inv-2)}
.dark .note strong{color:#fff}

/* ---------- careers ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 10px}
.filters input,.filters select{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:.92rem;font-family:inherit;color:var(--text);min-width:172px}
.filters input{flex:1;min-width:240px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.job{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;text-decoration:none;color:inherit;margin-top:14px;position:relative;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
.job:hover{transform:translateY(-2px);border-color:#d6d0c7;box-shadow:var(--shadow)}
.job h3{font-size:1.16rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.job .meta{color:var(--text-3);font-size:.85rem;margin-top:9px;display:flex;gap:9px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums}
.job .meta span:not(:last-child)::after{content:"·";margin-left:9px;color:#cfc9c0}
.job .go{position:absolute;right:26px;top:28px;color:var(--text-3);transition:transform .2s ease}
.job:hover .go{transform:translateX(4px);color:var(--accent)}
.pill{display:inline-block;border:1px solid var(--line);color:var(--text-2);border-radius:999px;
  padding:3px 11px;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pill.new{border-color:var(--money);color:var(--money);background:var(--money-soft)}
.pill.soon{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
dl.spec{display:grid;grid-template-columns:200px 1fr;gap:0;margin-top:26px;font-size:.95rem;
  border-top:1px solid var(--line)}
dl.spec dt{color:var(--text-3);font-weight:600;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:.82rem;letter-spacing:.03em;text-transform:uppercase}
dl.spec dd{padding:13px 0;border-bottom:1px solid var(--line);color:var(--text)}
.prose h3{margin:32px 0 10px}
.prose ul{margin:10px 0 0 4px;color:var(--text-2);list-style:none}
.prose li{margin:9px 0;padding-left:22px;position:relative}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:1px;
  background:var(--gold)}
.prose p{color:var(--text-2)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);
  padding:46px;text-align:center;color:var(--text-2);margin-top:22px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .card:hover,.job:hover,.btn:hover{transform:none}
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--inv-2);padding:76px 0 40px;font-size:.9rem}
footer h4{color:#fff;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  margin-bottom:16px;font-weight:600}
footer a{color:var(--inv-2);text-decoration:none;display:block;padding:5px 0;transition:color .18s}
footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:36px}
.foot-mark b{color:#fff;font-size:1.2rem;font-weight:650;letter-spacing:-.03em;display:block}
.foot-mark small{font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--inv-3);
  font-weight:600}
.foot-bottom{border-top:1px solid var(--ink-line);margin-top:52px;padding-top:26px;
  color:var(--inv-3);font-size:.82rem;line-height:1.7;max-width:92ch}

@media(max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .proof{grid-template-columns:repeat(2,1fr);gap:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  section{padding:64px 0}
  .hero{padding:72px 0 64px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 20px;
    border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;border-bottom:1px solid var(--line)}
  nav.main a.btn{margin-top:12px;justify-content:center;border-bottom:1px solid var(--ink)}
  .burger{display:block}
  dl.spec{grid-template-columns:1fr}
  dl.spec dt{border-bottom:0;padding-bottom:0}
}


/* ============================================================
   MOTION
   Slow, GPU-cheap, never busy. Everything below animates
   transform/opacity only — animating a gradient's colour stops
   repaints the whole layer every frame and turns a "premium"
   background into a hot laptop.
   ============================================================ */

/* --- drifting aurora behind dark canvases --- */
.dark .aurora{position:absolute;inset:-40% -20%;z-index:-3;pointer-events:none;
  filter:blur(70px);opacity:.75}
.dark .aurora i{position:absolute;display:block;border-radius:50%;
  will-change:transform;mix-blend-mode:screen}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-6%;top:2%;
  background:radial-gradient(circle,rgba(43,101,205,.55),transparent 66%);
  animation:drift-a 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-4%;top:-8%;
  background:radial-gradient(circle,rgba(16,132,92,.42),transparent 68%);
  animation:drift-b 44s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:38vw;height:38vw;left:38%;bottom:-18%;
  background:radial-gradient(circle,rgba(120,88,196,.32),transparent 70%);
  animation:drift-c 52s ease-in-out infinite alternate}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(9vw,6vh,0) scale(1.16)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1.08)}
  100%{transform:translate3d(-11vw,9vh,0) scale(.92)}}
@keyframes drift-c{0%{transform:translate3d(0,0,0) scale(.95)}
  100%{transform:translate3d(-7vw,-8vh,0) scale(1.2)}}

/* --- a hairline that sweeps, marking a section join --- */
.sweep{position:relative;height:1px;background:var(--ink-line);overflow:hidden}
.sweep::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%{left:-40%}55%,100%{left:110%}}

/* --- animated product graphics --- */
.figure{margin-top:56px;border:1px solid var(--ink-line);border-radius:var(--r);
  background:rgba(255,255,255,.03);padding:30px 28px;position:relative;overflow:hidden}
.figure .cap{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--inv-3);font-weight:600;margin-bottom:24px}
.figure svg{width:100%;height:auto;display:block;overflow:visible}
.figure.light{border-color:var(--line);background:#fff}
.figure.light .cap{color:var(--text-3)}

/* the connector draws itself when the figure reaches the viewport */
.draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.rv.in .draw{animation:draw 2.2s cubic-bezier(.3,.8,.3,1) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* a pulse travelling the claim's path, so the graphic reads as a flow */
.pulse{opacity:0}
.rv.in .pulse{animation:pulse-move 7s cubic-bezier(.5,0,.5,1) 1s infinite}
@keyframes pulse-move{
  0%{opacity:0;transform:translateX(0)}
  8%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(var(--travel,640px))}}

/* bars grow from the baseline when revealed */
.bar{transform-origin:50% 100%;transform:scaleY(0)}
.rv.in .bar{animation:grow 1.05s cubic-bezier(.2,.75,.25,1) forwards}
.rv.in .bar.d1{animation-delay:.12s}
.rv.in .bar.d2{animation-delay:.26s}
.rv.in .bar.d3{animation-delay:.40s}
@keyframes grow{to{transform:scaleY(1)}}

/* the gap between owed and paid breathes, gently */
.gap-band{opacity:0}
.rv.in .gap-band{animation:band 1s ease .6s forwards,breathe 6s ease-in-out 1.9s infinite}
@keyframes band{to{opacity:1}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.5}}

/* labels settle rather than snap */
.tick{opacity:0;transform:translateY(6px)}
.rv.in .tick{animation:tick .7s cubic-bezier(.2,.8,.3,1) .85s forwards}
.rv.in .tick.t2{animation-delay:1s}
.rv.in .tick.t3{animation-delay:1.15s}
@keyframes tick{to{opacity:1;transform:none}}

/* a slow shimmer across the ledger grid */
.grid-shimmer{animation:shimmer 9s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.2}50%{opacity:.46}}

/* --- logo lockup --- */
/* `.logo` sets flex-direction:column for the stacked wordmark. The lockup puts
   a mark beside it, so it has to say so explicitly — otherwise the SVG stretches
   to the column's full height and overflows the header. */
.logo-lock{display:flex;flex-direction:row;align-items:center;gap:12px;
  text-decoration:none;color:inherit}
.logo-lock .mark{width:30px;height:30px;flex:0 0 30px;color:var(--text)}
.dark .logo-lock .mark,footer .logo-lock .mark{color:#fff}
footer .logo-lock{margin-bottom:16px}

@media (prefers-reduced-motion:reduce){
  /* All of this is decoration. Someone who asked for stillness gets the
     finished state immediately, not a slower version of the animation. */
  .aurora i,.sweep::after,.grid-shimmer{animation:none!important}
  .draw{stroke-dashoffset:0!important;animation:none!important}
  .pulse{display:none}
  .bar{transform:none!important;animation:none!important}
  .gap-band,.tick{opacity:1!important;transform:none!important;animation:none!important}
}


/* ============================================================
   HERO — copy left, artifact right
   A hero with nothing but words in it is a press release. The
   panel is the product's actual argument at a glance: what was
   billed, what the contract required, what arrived, and the gap
   between the last two.
   ============================================================ */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-split .copy{min-width:0}

.artifact{position:relative;border-radius:18px;padding:26px 26px 22px;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(2px);animation:float 11s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.artifact .top{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.10)}
.artifact .top .id{font-size:.78rem;color:#fff;font-weight:600;letter-spacing:-.01em}
.artifact .top .payer{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--inv-3);font-weight:600}

.artifact .line{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.artifact .line:last-of-type{border-bottom:0}
.artifact .line .lbl{font-size:.83rem;color:var(--inv-2)}
.artifact .line .amt{font-size:1.02rem;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.artifact .line .track{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.07);
  overflow:hidden;max-width:132px}
.artifact .line .fill{display:block;height:100%;border-radius:3px;
  transform-origin:0 50%;transform:scaleX(0)}
.rv.in .artifact .fill{animation:fillbar 1.25s cubic-bezier(.2,.75,.25,1) forwards}
.rv.in .artifact .l2 .fill{animation-delay:.16s}
.rv.in .artifact .l3 .fill{animation-delay:.32s}
@keyframes fillbar{to{transform:scaleX(var(--w,1))}}

.artifact .gap{margin-top:16px;padding:15px 17px;border-radius:11px;
  background:linear-gradient(120deg,rgba(79,211,154,.16),rgba(79,211,154,.05));
  border:1px solid rgba(79,211,154,.28);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.artifact .gap .lbl{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:#7fe0b6;font-weight:650}
.artifact .gap .amt{font-size:1.32rem;font-weight:650;color:#4fd39a;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.artifact .foot{margin-top:14px;font-size:.72rem;color:var(--inv-3);line-height:1.55}

@media(max-width:1000px){
  .hero-split{grid-template-columns:1fr;gap:44px}
  .artifact{max-width:520px}
}
@media (prefers-reduced-motion:reduce){
  .artifact{animation:none}
  .artifact .fill{transform:scaleX(var(--w,1))!important;animation:none!important}
}


/* ============================================================
   POLICY PAGES
   Long-form legal reading. Measure is capped hard, headings are
   numbered so a clause can be cited in an email, and the table of
   contents sticks — nobody scrolls a privacy policy twice.
   ============================================================ */
.policy{display:grid;grid-template-columns:250px 1fr;gap:64px;align-items:start}
.toc{position:sticky;top:96px;font-size:.88rem}
.toc h4{font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);
  font-weight:650;margin-bottom:14px}
.toc a{display:block;color:var(--text-2);text-decoration:none;padding:6px 0 6px 12px;
  border-left:1px solid var(--line);line-height:1.4}
.toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.doc{max-width:70ch;min-width:0}
.doc section{padding:0;margin:0 0 40px;border:0}
.doc h2{font-size:1.28rem;letter-spacing:-.02em;margin-bottom:14px;scroll-margin-top:96px}
.doc h2 .n{color:var(--text-3);font-weight:600;margin-right:10px;font-variant-numeric:tabular-nums}
.doc h3{font-size:1rem;margin:22px 0 8px}
.doc p{color:var(--text-2);margin-bottom:14px}
.doc ul,.doc ol{color:var(--text-2);margin:0 0 16px 0;padding-left:0;list-style:none}
.doc li{margin:9px 0;padding-left:22px;position:relative}
.doc li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:1px;
  background:var(--gold)}
.doc ol{counter-reset:i}
.doc ol li{counter-increment:i}
.doc ol li::before{content:counter(i) ".";background:none;top:0;left:0;width:auto;height:auto;
  color:var(--text-3);font-variant-numeric:tabular-nums;font-size:.86rem}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.92rem}
.doc th{text-align:left;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);font-weight:650;padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.doc td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--text-2);
  vertical-align:top}
.doc td:first-child{color:var(--text);font-weight:550;width:34%}
.doc strong{color:var(--text);font-weight:600}
.doc code{font-size:.88em;background:var(--paper-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px}
.doc .meta{display:flex;gap:26px;flex-wrap:wrap;padding:16px 0 24px;margin-bottom:32px;
  border-bottom:1px solid var(--line);font-size:.85rem;color:var(--text-3)}
.doc .meta b{color:var(--text);font-weight:600;display:block;font-size:.92rem;margin-top:2px}

.draft{background:var(--warn-soft);border:1px solid #eddcc2;border-left:3px solid var(--warn);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;margin-bottom:34px;
  color:#6d4410;font-size:.92rem;line-height:1.6}
.draft strong{color:#4d2f08;font-weight:650}

.policy-index{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.policy-index a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,
  border-color .2s}
.policy-index a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#d6d0c7}
.policy-index b{display:block;font-size:1rem;letter-spacing:-.015em;margin-bottom:5px}
.policy-index span{color:var(--text-2);font-size:.9rem;line-height:1.55}

@media(max-width:920px){
  .policy{grid-template-columns:1fr;gap:34px}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:20px}
  .toc a{border-left:0;padding-left:0}
  .policy-index{grid-template-columns:1fr}
}

.jobcount{color:var(--text-3);font-size:.9rem;margin:0 0 18px;letter-spacing:.01em}
.jobcount:empty{display:none}

/* ---------- products menu ----------
   The trigger has to match `nav.main a` exactly — it sits beside real links and
   any difference in size or weight reads as a mistake. It is a <button>, so it
   inherits none of that and every property is restated here. */
.navitem{position:relative;display:flex;align-items:center}
.navlink{background:none;border:0;padding:4px 0;margin:0;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:500;letter-spacing:-.005em;
  color:var(--text-2);display:inline-flex;align-items:center;gap:6px;position:relative}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .28s cubic-bezier(.2,.7,.3,1)}
.navitem:hover .navlink::after,.navitem.open .navlink::after,
.navlink[data-current]::after{right:0}
.navlink:hover,.navitem.open .navlink,.navlink[data-current]{color:var(--text)}
.chev{width:10px;height:7px;transition:transform .22s ease;opacity:.7}
.navitem.open .chev{transform:rotate(180deg)}

.menu{position:absolute;top:calc(100% + 14px);left:-18px;width:340px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 60px -24px rgba(10,18,32,.34),0 2px 8px -2px rgba(10,18,32,.10);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.3,1),visibility .2s;
  z-index:70}
/* The gap between trigger and panel would drop the hover halfway across it. */
.menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navitem.open .menu{opacity:1;visibility:visible;transform:translateY(0)}
@media(hover:hover) and (pointer:fine){
  .navitem:hover .menu{opacity:1;visibility:visible;transform:translateY(0)}
}
.menu a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;
  transition:background .16s ease}
.menu a:hover,.menu a:focus-visible{background:var(--paper-2)}
.menu a::after{display:none}
.mi-name{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600;
  font-size:.93rem;letter-spacing:-.012em}
.mi-blurb{display:block;color:var(--text-3);font-size:.82rem;line-height:1.5;margin-top:4px}
.mi-tag{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650;
  color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.mi-all{border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;
  padding-top:14px}

@media(max-width:680px){
  /* Inline, not floating: a popover inside a stacked drawer has nowhere to go.

     Every selector here is scoped under `nav.main` on purpose. The stacked-nav
     rule `nav.main a` has the same specificity as a bare `.menu a`, so the tie
     went to whichever came last — and the menu links kept the drawer's dividers
     and radius, drawing a stray rounded box under each one. */
  nav.main .navitem{display:block}
  nav.main .navlink{display:flex;width:100%;justify-content:space-between;
    padding:13px 0;border-bottom:1px solid var(--line)}
  nav.main .menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
    padding:2px 0 8px 14px;display:none}
  nav.main .menu::before{display:none}
  nav.main .navitem.open .menu{display:block}
  nav.main .menu a{padding:11px 0;border:0;border-radius:0;background:none}
  nav.main .menu a.mi-all{border-top:1px solid var(--line);margin-top:2px;padding-top:13px}
  nav.main .mi-blurb{margin-top:2px}
}
/* Hover-to-open belongs to the desktop popover only; on the drawer the item is
   already inline and hovering it must not reopen what a tap just closed. */
@media(max-width:680px) and (hover:hover) and (pointer:fine){
  nav.main .navitem:hover .menu{display:none}
  nav.main .navitem.open:hover .menu{display:block}
}

/* Tick list — used where a card enumerates what something includes. The marker
   is a pseudo-element rather than a list-style image so it inherits colour. */
ul.ticks{list-style:none;padding:0;margin:14px 0 0}
ul.ticks li{position:relative;padding:7px 0 7px 26px;color:var(--text-2);font-size:.93rem;
  line-height:1.55}
ul.ticks li+li{border-top:1px solid var(--line)}
ul.ticks li::before{content:"";position:absolute;left:2px;top:14px;width:11px;height:6px;
  border-left:1.6px solid var(--money);border-bottom:1.6px solid var(--money);
  transform:rotate(-45deg)}

/* ---------- architecture ----------
   The diagrams are inline SVG using the same tokens as the rest of the page, so
   they follow the palette instead of being two flat images that drift from it.
   Every one scrolls inside its own container: an architecture diagram that
   forces the whole page to scroll sideways on a phone is worse than no diagram. */
.figure-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:30px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px 24px}
.dark .figure-wrap{background:rgba(255,255,255,.035);border-color:var(--ink-line)}
.figure-wrap svg{display:block;min-width:660px;width:100%;height:auto}
.figure-cap{color:var(--text-3);font-size:.83rem;line-height:1.55;margin-top:14px;max-width:74ch}
.dark .figure-cap{color:var(--inv-3)}

/* Layered stack: each band is a tier, read top to bottom. */
.tiers{margin-top:30px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#fff}
.tier{display:grid;grid-template-columns:190px 1fr;gap:0;border-bottom:1px solid var(--line)}
.tier:last-child{border-bottom:0}
.tier .name{padding:20px 22px;background:var(--paper-2);border-right:1px solid var(--line)}
.tier .name b{display:block;font-size:.95rem;letter-spacing:-.015em;color:var(--text)}
.tier .name span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);font-weight:650;margin-top:6px}
.tier .body{padding:20px 22px;color:var(--text-2);font-size:.93rem;line-height:1.62}
.tier .body code{font-size:.85em;background:var(--paper-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;color:var(--text)}

/* A boundary the reader is meant to remember: what may cross it, what may not. */
.boundary{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.boundary > div{padding:26px 24px}
.boundary .allow{border-right:1px solid var(--line)}
.boundary h3{font-size:1rem;display:flex;align-items:center;gap:9px}
.boundary .allow h3{color:var(--money)}
.boundary .deny h3{color:var(--warn)}
.boundary ul{list-style:none;padding:0;margin:14px 0 0}
.boundary li{padding:8px 0;color:var(--text-2);font-size:.92rem;line-height:1.55;
  border-top:1px solid var(--line)}
.boundary li:first-child{border-top:0}

@media(max-width:680px){
  .tier{grid-template-columns:1fr}
  .tier .name{border-right:0;border-bottom:1px solid var(--line)}
  .boundary{grid-template-columns:1fr}
  .boundary .allow{border-right:0;border-bottom:1px solid var(--line)}
  .figure-wrap{padding:18px 14px}
}

/* Inline code anywhere in prose — X12 segment names read as identifiers, not
   as emphasis. Previously only styled inside .tier, so the same segment names
   looked like plain text three sections earlier. */
code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:.87em;
  background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  color:var(--text)}
.dark code{background:rgba(255,255,255,.07);border-color:var(--ink-line);color:var(--inv)}