/* ==========================================================================
   Daily Audit — one design system, two themes.

   The point of this file is that light and dark are NOT two designs. Layout,
   spacing, radii, type scale, component shapes and motion are identical in
   both. Only colour changes. That is what stops the site feeling like two
   different products wearing the same name.

   Light is the default: it is what a first-time visitor sees, and it keeps
   the character of the original site — the paper background, the blue
   accent, the calm. Dark is the same site, one click away.

   Everything is plain CSS: no build step, no framework, nothing that can fail
   at deploy time on a free static host.
   ========================================================================== */

:root{
  /* ---- brand constants: identical in both themes ---- */
  --brand:     #3B82F6;
  --brand-2:   #06B6D4;

  --r:    24px;
  --r-sm: 14px;
  --r-xs: 9px;

  --sans:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Space Grotesk', system-ui, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .6s;
  --wrap: 1200px;
  --gut:  clamp(20px, 5vw, 48px);

  /* ---- light theme: the default the site opens in ---- */
  --bg:        #F7F7F5;          /* the paper from the original site */
  --bg-2:      #FFFFFF;
  --ink:       #0B0B0B;
  --muted:     #56554F;
  --muted-2:   #6E6C66;
  --line:      rgba(11,11,11,.11);
  --line-2:    rgba(11,11,11,.18);
  --accent:    #2A78D6;          /* the accent from the original site */
  --accent-2:  #0E7490;
  --accent-ink:#1C5CAB;
  --link:      #1C5CAB;
  --link-hi:   #144582;

  --ok:  #0CA30C;  --ok-ink:#0A7D0A;  --ok-bg:#EAF6EA;  --ok-line:rgba(12,163,12,.28);
  --bad: #D03B3B;  --bad-ink:#A82E2E; --bad-bg:#FBECEB; --bad-line:rgba(208,59,59,.28);
  --warn:#B57611;  --warn-bg:#FDF3DE;

  --card-bg:   #FFFFFF;
  --card-blur: none;
  --chip-bg:   rgba(11,11,11,.035);
  --chip-hi:   rgba(11,11,11,.07);
  --nav-bg:    rgba(247,247,245,.86);
  --code-bg:   #FBFBFA;
  --code-ink:  #333230;

  --shadow:    0 1px 2px rgba(11,11,11,.05), 0 8px 24px -14px rgba(11,11,11,.22);
  --glow:      0 0 0 1px rgba(42,120,214,.28), 0 18px 44px -20px rgba(42,120,214,.35);

  --grid-line: rgba(11,11,11,.055);
  --glow-1:    rgba(42,120,214,.10);
  --glow-2:    rgba(14,116,144,.06);
  --noise:     .02;
  --shot-ring: rgba(11,11,11,.12);
}

[data-theme="dark"]{
  --bg:        #07111F;
  --bg-2:      #0F172A;
  --ink:       #F8FAFC;
  --muted:     #94A3B8;
  --muted-2:   #7C8BA1;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.15);
  --accent:    #3B82F6;
  --accent-2:  #06B6D4;
  --accent-ink:#93C5FD;         /* accent tuned for text on this background */
  --link:      #93C5FD;
  --link-hi:   #BFDBFE;

  --ok:  #34D399;  --ok-ink:#6EE7B7;  --ok-bg:rgba(52,211,153,.13);  --ok-line:rgba(52,211,153,.26);
  --bad: #F87171;  --bad-ink:#FCA5A5; --bad-bg:rgba(248,113,113,.11);--bad-line:rgba(248,113,113,.24);
  --warn:#FBBF24;  --warn-bg:rgba(251,191,36,.07);

  --card-bg:   linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --card-blur: blur(16px);
  --chip-bg:   rgba(255,255,255,.04);
  --chip-hi:   rgba(255,255,255,.09);
  --nav-bg:    rgba(7,17,31,.78);
  --code-bg:   #050C16;
  --code-ink:  #CBD5E1;

  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.55);
  --glow:      0 0 0 1px rgba(59,130,246,.35), 0 18px 48px -18px rgba(59,130,246,.45);

  --grid-line: rgba(255,255,255,.08);
  --glow-1:    rgba(59,130,246,.20);
  --glow-2:    rgba(6,182,212,.11);
  --noise:     .035;
  --shot-ring: rgba(255,255,255,.10);
}

/* The same dark palette again, for a visitor whose system says dark and
   whose browser has no JavaScript to ask. makesite.py asserts these two
   blocks stay identical, so they cannot drift apart. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bg:        #07111F;
  --bg-2:      #0F172A;
  --ink:       #F8FAFC;
  --muted:     #94A3B8;
  --muted-2:   #7C8BA1;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.15);
  --accent:    #3B82F6;
  --accent-2:  #06B6D4;
  --accent-ink:#93C5FD;         /* accent tuned for text on this background */
  --link:      #93C5FD;
  --link-hi:   #BFDBFE;

  --ok:  #34D399;  --ok-ink:#6EE7B7;  --ok-bg:rgba(52,211,153,.13);  --ok-line:rgba(52,211,153,.26);
  --bad: #F87171;  --bad-ink:#FCA5A5; --bad-bg:rgba(248,113,113,.11);--bad-line:rgba(248,113,113,.24);
  --warn:#FBBF24;  --warn-bg:rgba(251,191,36,.07);

  --card-bg:   linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --card-blur: blur(16px);
  --chip-bg:   rgba(255,255,255,.04);
  --chip-hi:   rgba(255,255,255,.09);
  --nav-bg:    rgba(7,17,31,.78);
  --code-bg:   #050C16;
  --code-ink:  #CBD5E1;

  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.55);
  --glow:      0 0 0 1px rgba(59,130,246,.35), 0 18px 48px -18px rgba(59,130,246,.45);

  --grid-line: rgba(255,255,255,.08);
  --glow-1:    rgba(59,130,246,.20);
  --glow-2:    rgba(6,182,212,.11);
  --noise:     .035;
  --shot-ring: rgba(255,255,255,.10);
  }
}

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

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}
img{ max-width:100%; display:block }

/* ---------------------------------------------------------------- canvas */
.canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--bg);
}
.canvas::before{
  content:''; position:absolute; inset:-2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  animation:drift 40s linear infinite;
}
.canvas::after{
  content:''; position:absolute; inset:0; opacity:var(--noise);
  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)'/%3E%3C/svg%3E");
}
.glowfield{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%, var(--glow-1), transparent 62%),
    radial-gradient(760px 460px at 8% 12%,  var(--glow-2), transparent 60%);
}
@keyframes drift{ to{ background-position:64px 64px, 64px 64px } }

/* ---------------------------------------------------------------- layout */
.wrap{ width:min(var(--wrap),100%); margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding-block:clamp(64px, 9vw, 128px) }
.sec-sm{ padding-block:clamp(40px, 6vw, 72px) }

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-.022em; margin:0 0 .5em; line-height:1.1 }
h1{ font-size:clamp(2.1rem, 5.2vw, 3.9rem) }
h2{ font-size:clamp(1.65rem, 3.4vw, 2.6rem) }
h3{ font-size:clamp(1.1rem, 1.9vw, 1.35rem); letter-spacing:-.012em }
p{ margin:0 0 1.05em }
.lead{ font-size:clamp(1.02rem,1.7vw,1.2rem); color:var(--muted); max-width:62ch; line-height:1.7 }
.muted{ color:var(--muted) }
.tiny{ font-size:.83rem; color:var(--muted-2); line-height:1.6 }
.mono{ font-family:var(--mono); font-size:.9em }
a{ color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--link-hi) }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.73rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:linear-gradient(90deg,var(--accent),transparent) }

.gradient-text{
  background:linear-gradient(96deg, var(--ink) 20%, var(--accent) 70%, var(--accent-2) 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------------------------------------------------------------- pills */
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--chip-bg);
  font-size:.8rem; color:var(--muted); backdrop-filter:blur(10px);
}
.pill b{ color:var(--ink); font-weight:600 }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg) }

/* ---------------------------------------------------------------- buttons */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:12px; border:1px solid transparent;
  font-family:var(--sans); font-size:.95rem; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary{
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
  color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 12px 30px -14px var(--accent);
}
.btn-primary:hover{ transform:translateY(-2px); color:#fff }
.btn-ghost{ background:var(--chip-bg); border-color:var(--line-2); color:var(--ink); backdrop-filter:blur(10px) }
.btn-ghost:hover{ background:var(--chip-hi); border-color:var(--line-2); transform:translateY(-2px); color:var(--ink) }
.btn-lg{ padding:16px 32px; font-size:1rem; border-radius:14px }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.btn-primary::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{ animation:shine .85s var(--ease) }
@keyframes shine{ to{ transform:translateX(120%) } }

/* ---------------------------------------------------------------- cards */
.card{
  position:relative; background:var(--card-bg); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(22px,3vw,34px);
  backdrop-filter:var(--card-blur); box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.card-hover:hover{ transform:translateY(-8px); border-color:color-mix(in srgb, var(--accent) 45%, transparent); box-shadow:var(--glow) }
.card-lit::before{
  content:''; position:absolute; inset:0 0 auto; height:1px; border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity:.6;
}
.card-glow::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.card-glow:hover::after{ opacity:1 }

/* product screenshots read as light images; give them a frame in both themes */
.shot{ border-radius:var(--r-sm); border:1px solid var(--shot-ring); overflow:hidden }

/* ---------------------------------------------------------------- grids */
.grid{ display:grid; gap:clamp(14px,1.7vw,22px) }
.g-2{ grid-template-columns:repeat(2,1fr) }
.g-3{ grid-template-columns:repeat(3,1fr) }
.g-4{ grid-template-columns:repeat(4,1fr) }
.bento{ grid-template-columns:repeat(6,1fr) }
.sp-2{ grid-column:span 2 } .sp-3{ grid-column:span 3 } .sp-4{ grid-column:span 4 } .sp-6{ grid-column:span 6 }
@media(max-width:900px){
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr) }
  .bento{ grid-template-columns:repeat(2,1fr) }
  .sp-3,.sp-4,.sp-6{ grid-column:span 2 }
  .split{ grid-template-columns:1fr !important }
}
@media(max-width:560px){
  .g-2,.g-3,.g-4,.bento{ grid-template-columns:1fr }
  .sp-2,.sp-3,.sp-4,.sp-6{ grid-column:span 1 }
}
.split{ grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center }

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:60; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.stuck{ background:var(--nav-bg); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line) }
.nav-in{ display:flex; align-items:center; gap:18px; height:70px }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700;
  font-size:1.06rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em }
.brand:hover{ color:var(--ink) }
.brand svg{ display:block; flex:none }
.nav-links{ display:flex; gap:4px; margin-left:auto }
.nav-links a{
  padding:9px 14px; border-radius:9px; font-size:.92rem; font-weight:500;
  color:var(--muted); text-decoration:none; transition:color .25s, background .25s;
}
.nav-links a:hover,.nav-links a[aria-current]{ color:var(--ink); background:var(--chip-hi) }
.nav-cta{ margin-left:auto }
.nav-links + .nav-cta{ margin-left:0 }
@media(max-width:940px){ .nav-links{ display:none } .nav-cta{ margin-left:auto } }
@media(max-width:420px){ .nav-cta .btn{ padding:11px 16px; font-size:.88rem } }

/* theme toggle */
.theme-btn{
  width:38px; height:38px; flex:none; display:grid; place-items:center; cursor:pointer;
  border-radius:10px; border:1px solid var(--line-2); background:var(--chip-bg); color:var(--ink);
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.theme-btn:hover{ background:var(--chip-hi); transform:translateY(-1px) }
.theme-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.theme-btn svg{ width:18px; height:18px }
.theme-btn .i-sun{ display:none }
[data-theme="light"] .theme-btn .i-sun{ display:block }
[data-theme="light"] .theme-btn .i-moon{ display:none }

/* ---------------------------------------------------------------- bits */
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0; margin:0 }

.tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px;
  font-family:var(--mono); font-size:.71rem; letter-spacing:.05em; text-transform:uppercase }
.tag-ok  { background:var(--ok-bg);  color:var(--ok-ink);  border:1px solid var(--ok-line) }
.tag-no  { background:var(--bad-bg); color:var(--bad-ink); border:1px solid var(--bad-line) }
.tag-blue{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent-ink);
           border:1px solid color-mix(in srgb, var(--accent) 30%, transparent) }

.ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:19px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); margin-bottom:16px }

.step{ display:grid; grid-template-columns:44px 1fr; gap:20px; align-items:start; margin-bottom:8px }
.step-n{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent) }
.step h3{ margin-top:6px }

.stat{ text-align:center }
.stat b{ display:block; font-family:var(--display); font-size:clamp(2rem,3.4vw,2.6rem);
  font-weight:700; color:var(--accent-ink); line-height:1.1 }

pre{ background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:.84rem;
  color:var(--code-ink); line-height:1.65; margin:0 0 1em }
code{ font-family:var(--mono); font-size:.88em; color:var(--accent-ink) }
pre code{ color:inherit }
kbd{ font-family:var(--mono); font-size:.82em; padding:2px 7px; border-radius:6px;
  background:var(--chip-hi); border:1px solid var(--line-2); color:var(--ink) }

table{ width:100%; border-collapse:collapse; font-size:.93rem }
th,td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line) }
th{ font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted-2); font-weight:500 }
tr:last-child td{ border-bottom:0 }

.note{ border-left:3px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:color-mix(in srgb, var(--accent) 7%, transparent); padding:15px 19px; margin:0 0 1.2em }
.note-warn{ border-left-color:var(--warn); background:var(--warn-bg) }
.note strong{ color:var(--ink) }

.footer{ border-top:1px solid var(--line); padding-block:56px 40px; margin-top:40px }
.footer a{ color:var(--muted); text-decoration:none; display:block; padding:5px 0; font-size:.92rem }
.footer a:hover{ color:var(--ink) }
.footer h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500; margin-bottom:10px }

/* ---------------------------------------------------------------- motion */
html.js .reveal{ opacity:0; transform:translateY(22px) }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease) }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important }
  html.js .reveal{ opacity:1; transform:none }
}

@media print{
  .canvas,.glowfield,.nav,.btn,.theme-btn{ display:none }
  body{ background:#fff; color:#000 }
  .card{ border:1px solid #ccc; box-shadow:none; background:#fff }
}