/* ============================================================
   Attn: To Detail — shared design system  (Signal Room register)
   Dark-led, sharp white Helvetica, teal as a signal.
   ============================================================ */
:root{
  --ink:#08090A;
  --ink-1:#0B0E0F;
  --ink-2:#101315;
  --panel:#0E1113;
  --line:rgba(255,255,255,0.09);
  --line-2:rgba(255,255,255,0.16);
  --white:#F5F7F7;
  --soft:#AEB6B8;
  --mute:#7E888D;
  --faint:#707A7F;
  --teal:#0FB5C4;
  --teal-2:#36D6E2;
  --teal-dim:rgba(15,181,196,0.16);

  /* surfaces + veils (themeable; dark = Signal Room) */
  --deep:#0A0D0E;
  --deep-2:#0C1011;
  --deep-3:#080A0B;
  --side:#080B0C;
  --chip:#1B2225;
  --nav-veil:rgba(8,9,10,0.74);
  --menu-veil:rgba(8,9,10,0.97);
  --chip-veil:rgba(14,17,19,0.82);
  --hover-fill:rgba(255,255,255,0.06);
  --fill-1:rgba(255,255,255,0.07);
  --fill-2:rgba(255,255,255,0.09);
  --shade-70:rgba(0,0,0,0.8);
  --shade-80:rgba(0,0,0,0.9);
  --shade-90:rgba(0,0,0,0.95);
  --photo-fade-0:rgba(8,9,10,0);
  --photo-fade:rgba(8,9,10,0.5);
  --on-teal-soft:#EAFEFF;

  /* light sections (used on pricing / insights / reading-dense pages) */
  --paper:#FFFFFF;
  --paper-2:#F4F6F6;
  --ink-on-paper:#0C1011;
  --soft-on-paper:#5B6568;
  --line-on-paper:#E4E8E9;

  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --maxw:1200px;
  --pad:clamp(22px,5vw,72px);
}

/* ============================================================
   LIGHT THEME — "Cinematic White Studio" register.
   Token values flip: --ink becomes the TRUE WHITE canvas,
   --white becomes the ink type. Teal stays the only accent.
   ============================================================ */
[data-theme="light"]{
  --ink:#FFFFFF;
  --ink-1:#FAFCFC;
  --ink-2:#F4F6F6;
  --panel:#FFFFFF;
  --line:rgba(10,14,15,0.10);
  --line-2:rgba(10,14,15,0.18);
  --white:#0C1011;
  --soft:#465358;
  --mute:#5F6A6E;
  --faint:#8A9499;
  --teal:#0A7E87;
  --teal-2:#0FB5C4;
  --teal-dim:rgba(15,181,196,0.14);

  --deep:#FFFFFF;
  --deep-2:#FFFFFF;
  --deep-3:#F6F8F8;
  --side:#F8FAFA;
  --chip:#E8EDEE;
  --nav-veil:rgba(255,255,255,0.78);
  --menu-veil:rgba(255,255,255,0.97);
  --chip-veil:rgba(255,255,255,0.86);
  --hover-fill:rgba(10,14,15,0.05);
  --fill-1:rgba(10,14,15,0.08);
  --fill-2:rgba(10,14,15,0.10);
  --shade-70:rgba(13,21,22,0.16);
  --shade-80:rgba(13,21,22,0.20);
  --shade-90:rgba(13,21,22,0.24);
  --photo-fade-0:rgba(255,255,255,0);
  --photo-fade:rgba(255,255,255,0);
  --on-teal-soft:#073C42;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--sans);line-height:1.5;overflow-x:hidden;
}
::selection{background:var(--teal);color:var(--ink);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::-webkit-scrollbar{width:0;height:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.035em;line-height:0.98;text-wrap:balance;}
h1{font-size:clamp(46px,7.2vw,112px);}
h2{font-size:clamp(34px,4.8vw,72px);}
h3{font-size:clamp(22px,2.3vw,32px);letter-spacing:-0.025em;}
p{margin:0;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal);}
.eyebrow.soft{color:var(--mute);}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);}
.lede{font-size:clamp(18px,1.55vw,22px);line-height:1.55;color:var(--soft);max-width:60ch;text-wrap:pretty;}
.body{font-size:16px;line-height:1.62;color:var(--soft);max-width:58ch;text-wrap:pretty;}
.accent{color:var(--teal);}

section{position:relative;padding:clamp(74px,12vh,150px) 0;}
.divide{border-top:1px solid var(--line);}

/* ---------- logo: Attn:To [Detail] cursor ---------- */
.logo{display:inline-flex;align-items:center;gap:0;font-weight:700;letter-spacing:-0.03em;font-size:19px;color:var(--white);white-space:nowrap;}
.logo .lg-colon{color:var(--teal);font-weight:800;padding:0 2px;}
.logo .lg-to{color:var(--mute);font-weight:500;margin-right:9px;}
.logo .lg-detail{position:relative;padding:3px 9px;}
.logo .lg-detail::before,.logo .lg-detail::after{content:'';position:absolute;width:8px;height:8px;}
.logo .lg-detail::before{top:0;left:0;border-top:2px solid var(--teal);border-left:2px solid var(--teal);}
.logo .lg-detail::after{bottom:0;right:0;border-bottom:2px solid var(--teal);border-right:2px solid var(--teal);}
.logo .lg-cursor{margin-left:8px;display:inline-block;color:var(--teal);}
.logo .lg-cursor svg{display:block;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 var(--pad);
  transition:background .4s ease,border-color .4s ease,height .35s ease;
  border-bottom:1px solid transparent;}
.nav.scrolled{background:var(--nav-veil);backdrop-filter:saturate(1.1) blur(16px);-webkit-backdrop-filter:saturate(1.1) blur(16px);border-bottom-color:var(--line);height:60px;}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);}
.nav-links a:not(.nav-cta){font-size:14px;color:var(--soft);letter-spacing:-0.01em;transition:color .2s ease;position:relative;}
.nav-links a:not(.nav-cta):hover{color:var(--white);}
.nav-links a.active{color:var(--white);}
.nav-cta{font-size:14px;font-weight:600;color:var(--ink);background:var(--white);padding:11px 18px;border-radius:9px;transition:transform .25s ease,background .25s ease;}
.nav-cta:hover{background:var(--teal-2);}
.nav-burger{display:none;background:none;border:0;color:var(--white);cursor:pointer;padding:8px;}
@media (max-width:860px){
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;
    background:var(--menu-veil);backdrop-filter:blur(18px);
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);}
  .nav-links.open{transform:none;}
  .nav-links a:not(.nav-cta){font-size:24px;}
  .nav-burger{display:block;z-index:61;}
}

/* ---------- theme switch (dark / light / system) ---------- */
.theme-seg{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px;background:transparent;}
.theme-seg button{appearance:none;background:none;border:0;color:var(--mute);width:30px;height:26px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s ease,color .25s ease;}
.theme-seg button:hover{color:var(--white);}
.theme-seg button.on{background:var(--hover-fill);color:var(--white);}
.theme-seg svg{width:14px;height:14px;display:block;}
@media (max-width:860px){.theme-seg{order:9;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);
  font-weight:600;font-size:15px;padding:15px 26px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:transform .25s ease,background .25s ease;}
.btn:hover{background:var(--teal-2);}
.btn .arr{transition:transform .3s ease;}
.btn:hover .arr{transform:translateX(4px);}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--line-2);}
.btn.ghost:hover{background:var(--hover-fill);border-color:var(--white);}
.btn.sm{padding:11px 18px;font-size:14px;border-radius:9px;}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(56px,8vh,90px) 0 48px;background:var(--ink-1);}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;}
.footer h4,.footer .fh{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);font-weight:400;margin:0 0 16px;}
.footer-col a{display:block;font-size:15px;color:var(--soft);padding:6px 0;transition:color .2s ease;}
.footer-col a:hover{color:var(--white);}
.footer-lead .body{margin-top:16px;font-size:15px;}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;
  margin-top:clamp(40px,6vh,64px);padding-top:26px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute);}
.footer-bottom .socials{display:flex;gap:18px;}
.footer-bottom .socials a:hover{color:var(--white);}
@media (max-width:760px){.footer-top{grid-template-columns:1fr 1fr;gap:28px;}.footer-lead{grid-column:1 / -1;}}

/* ---------- reveal ---------- */
/* Gated on .reveal-ready (added by JS): if JS never runs, content stays visible. */
.rv{opacity:1;transform:none;}
.reveal-ready .rv{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1);}
.reveal-ready .rv.in{opacity:1;transform:none;}
.reveal-ready .rv.d1{transition-delay:.08s;}
.reveal-ready .rv.d2{transition-delay:.16s;}
.reveal-ready .rv.d3{transition-delay:.24s;}

/* ---------- shared bits ---------- */
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-dim);flex:none;}
.dot.pulse{animation:dotpulse 2.4s ease-in-out infinite;}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 3px var(--teal-dim);}50%{box-shadow:0 0 0 7px rgba(15,181,196,0.05);}}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,64px);align-items:start;}
.sec-num{font-family:var(--mono);font-size:13px;color:var(--teal);letter-spacing:0.1em;padding-top:10px;}
@media (max-width:780px){.sec-head{grid-template-columns:1fr;gap:12px;}.sec-num{padding-top:0;}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .reveal-ready .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .dot.pulse{animation:none;}
}