/* ============================================================================
   AlertSnail — site.css
   Complete daylight-theme override for the Tailwind-based content pages.

   WHY THIS FILE EXISTS
   The content pages (about, checkout, blog, legal, scanner, start, status,
   live-digest) were generated on Tailwind's dark palette. The brand moved to
   the warm daylight system used by index.html. This file re-skins EVERY colour
   utility class those pages actually use — the class list was enumerated from
   the markup, not guessed.

   CRITICAL: this file MUST be the last stylesheet in <head>, after any
   page-level <style> block, because these rules use !important and tie-break
   by source order.

   Tokens are identical to marketing/index.html.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#FBFAF7; --surface:#FFFFFF; --surface-2:#FCFBF9;
  --ink:#14181F; --muted:#5A6472; --faint:#8A93A0;
  --line:#E6E3DC; --line-strong:#D6D2C8;
  --accent:#C8622F; --accent-hover:#B25526; --accent-soft:#FBF0E9;
  --ok:#2F7D62; --ok-soft:#EEF5F0;
  --warn:#B4531F; --warn-soft:#FBF0E9;
  --danger:#B4232A; --danger-soft:#FBEDEE;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(20,24,31,.05);
  --shadow-md:0 4px 16px -4px rgba(20,24,31,.09), 0 1px 3px rgba(20,24,31,.05);
}

/* ---------- base + fonts ---------- */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper) !important;
  color:var(--ink) !important;
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{letter-spacing:-.021em; font-weight:640; color:var(--ink) !important}
h1{line-height:1.14}
p,li{color:var(--muted)}
code,pre,kbd{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

/* ============ BACKGROUNDS ============ */
/* page + section dark backgrounds -> paper */
.bg-slate-950,.bg-slate-950\/80,.bg-slate-950\/95,.bg-slate-900,.bg-slate-900\/40{
  background-color:var(--paper) !important;
}
/* raised cards -> white surface */
.bg-slate-800,.bg-slate-800\/80,.bg-slate-700,
.bg-slate-900\/60,.bg-slate-900\/70,.bg-slate-900\/80,.bg-slate-900\/90,.bg-slate-900\/95{
  background-color:var(--surface) !important;
}

/* brand accents */
.bg-indigo-600,.bg-indigo-500,.bg-purple-600,.bg-pink-600{background-color:var(--accent) !important; color:#fff !important}
.bg-indigo-950,.bg-indigo-950\/30,.bg-indigo-950\/80,.bg-indigo-900\/50,
.bg-purple-900\/50,.bg-pink-900\/50{background-color:var(--accent-soft) !important}

/* semantic tones */
.bg-emerald-400,.bg-emerald-500{background-color:var(--ok) !important}
.bg-emerald-950,.bg-emerald-950\/30,.bg-emerald-950\/50,.bg-emerald-900\/40{background-color:var(--ok-soft) !important}
.bg-amber-950,.bg-amber-950\/40,.bg-amber-950\/60,.bg-orange-950\/40{background-color:var(--warn-soft) !important}
.bg-red-950\/40,.bg-rose-950\/40,.bg-rose-400{background-color:var(--danger-soft) !important}

/* gradients OFF — the loudest AI-slop tell */
.bg-gradient-to-b,.bg-gradient-to-r,.bg-gradient-to-br,.bg-gradient-to-t,
.bg-gradient-to-l,.bg-gradient-to-bl,.bg-gradient-to-tr,.bg-gradient-to-tl,
[class*="gradient"]{background-image:none !important}
.gradient-hero{background-image:none !important; background-color:var(--paper) !important}
.from-indigo-400,.from-indigo-500,.from-indigo-950\/60,.from-indigo-950\/70,
.via-purple-300,.to-pink-400,.to-purple-500,.to-emerald-400,.to-slate-950{
  --tw-gradient-from:transparent !important;
  --tw-gradient-to:transparent !important;
  --tw-gradient-via:transparent !important;
}

/* ============ TEXT ============ */
.text-white,.text-slate-100,.text-slate-200{color:var(--ink) !important}
.text-slate-300,.text-slate-400,.text-slate-500{color:var(--muted) !important}
.text-slate-600{color:var(--faint) !important}
.text-slate-700,.text-slate-800,.text-slate-900{color:var(--ink) !important}

.text-indigo-300,.text-indigo-400,.text-indigo-500,.text-purple-300,.text-pink-300{color:var(--accent) !important}
.text-indigo-300\/70{color:var(--accent) !important; opacity:.75}
.text-emerald-300,.text-emerald-400{color:var(--ok) !important}
.text-amber-100,.text-amber-200,.text-amber-300,.text-amber-400,.text-orange-400{color:var(--warn) !important}
.text-red-100,.text-red-200,.text-red-200\/90,.text-red-400,.text-rose-300{color:var(--danger) !important}
.text-black{color:var(--ink) !important}

/* gradient-clipped text -> flat accent (kills the glowing headline) */
.bg-clip-text,.text-transparent{
  background-image:none !important;
  -webkit-text-fill-color:var(--accent) !important;
  color:var(--accent) !important;
}

/* ============ BORDERS ============ */
.border-slate-800,.border-slate-800\/70,.border-slate-800\/80,
.border-slate-700,.border-slate-600,.border-slate-900{border-color:var(--line) !important}
.border-indigo-500,.border-indigo-500\/30,.border-indigo-500\/40,
.border-indigo-700\/60,.border-indigo-800\/60,
.border-purple-500\/40,.border-pink-500\/40{border-color:var(--line-strong) !important}
.border-emerald-500\/40,.border-emerald-500\/50,.border-emerald-800\/40,
.border-emerald-800\/50,.border-emerald-800\/60{border-color:#D6E7DF !important}
.border-amber-500\/30,.border-amber-700\/50,.border-amber-800\/50,
.border-amber-800\/60{border-color:#EFD9CB !important}
.border-red-500\/60,.border-rose-800\/50{border-color:#F0CDD0 !important}
.divide-slate-800{border-color:var(--line) !important}

/* ============ ELEVATION / BLUR / RADII ============ */
.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:var(--shadow-md) !important}
.shadow-indigo-500\/25,.shadow-indigo-500\/30{--tw-shadow-color:rgba(20,24,31,.10) !important}
[class*="backdrop-blur"]{backdrop-filter:none !important}
.rounded-2xl{border-radius:var(--radius) !important}
.rounded-xl{border-radius:10px !important}
.rounded-3xl{border-radius:18px !important}

/* ============ HEADER / FOOTER ============ */
header{background:rgba(251,250,247,.92) !important; border-bottom:1px solid var(--line) !important;
       position:sticky; top:0; z-index:40; backdrop-filter:saturate(160%) blur(8px)}
header a{color:var(--ink) !important}
header .text-slate-400,header .text-slate-300{color:var(--muted) !important}
footer{border-top:1px solid var(--line) !important; background:transparent !important; color:var(--muted) !important}
footer a{color:var(--muted) !important}
footer a:hover{color:var(--ink) !important}

/* logo pose in a header (replaces the old emoji mark) */
.brand-mark{height:30px; width:auto; display:inline-block; vertical-align:-8px; margin-right:9px}

/* ============ TABLES ============ */
table{border-color:var(--line) !important}
thead,thead.bg-slate-800\/80,thead.bg-slate-800{background:var(--surface-2) !important}
th{color:var(--ink) !important; border-color:var(--line) !important}
td{border-color:var(--line) !important; color:var(--muted) !important}
tbody tr:hover{background:var(--surface-2) !important}

/* ============ FORMS ============ */
input,select,textarea{
  background:var(--surface) !important; color:var(--ink) !important;
  border-color:var(--line-strong) !important;
}
input::placeholder,textarea::placeholder,
.placeholder-slate-500::placeholder,.placeholder-slate-600::placeholder{color:var(--faint) !important}
input:focus,select:focus,textarea:focus{border-color:var(--accent) !important; outline:none !important}

/* ============ MISC ============ */
.decoration-indigo-500\/40{text-decoration-color:var(--accent) !important}
.border-l-4,.border-l-2{border-left-width:1px !important}   /* remove decorative accent rails */

/* ============================================================================
   TYPE SCALE — the piece that made content pages feel "close but not matching".
   The landing page uses a clamp() scale with weight 640. Tailwind pages used
   fixed sizes with font-extrabold (800). This maps Tailwind's classes onto the
   landing page's exact rhythm.
   ========================================================================== */
.text-xs   {font-size:.75rem  !important; line-height:1.5  !important}
.text-sm   {font-size:.875rem !important; line-height:1.6  !important}
.text-base {font-size:1rem    !important; line-height:1.62 !important}
.text-lg   {font-size:1.125rem!important; line-height:1.55 !important}
.text-xl   {font-size:1.25rem !important; line-height:1.4  !important; letter-spacing:-.014em !important}
.text-2xl  {font-size:clamp(1.25rem,2vw,1.5rem)  !important; line-height:1.28 !important; letter-spacing:-.018em !important}
.text-3xl  {font-size:clamp(1.5rem,2.7vw,2.05rem)!important; line-height:1.2  !important; letter-spacing:-.021em !important}
.text-4xl  {font-size:clamp(1.9rem,3.6vw,2.75rem)!important; line-height:1.16 !important; letter-spacing:-.021em !important}
.text-5xl  {font-size:clamp(2.1rem,5vw,3.5rem)   !important; line-height:1.14 !important; letter-spacing:-.022em !important}

/* headings render at the landing page's 640, not Tailwind's 800 */
h1,h2,h3,h4,h5,
.font-extrabold,.font-bold{font-weight:640 !important}
.font-semibold,.font-medium{font-weight:560 !important}
h1{line-height:1.14 !important}
h2{line-height:1.2 !important}

/* paragraph rhythm matches .lede / content spacing */
p{line-height:1.7}
.max-w-4xl{max-width:56rem !important}
.max-w-3xl{max-width:48rem !important}

/* ============================================================================
   CUSTOM CLASSES defined inside page-level <style> blocks.
   Enumerated from the served HTML — these were the remaining dark artefacts
   (colours AND buttons). Each is overridden here with matching specificity so
   source order (this file is last) makes it win.
   ========================================================================== */

/* dark radial hero -> flat paper */
.gradient-hero{background:var(--paper) !important; background-image:none !important}

/* indigo glow shadow -> plain elevation */
.glow,.shadow-glow{box-shadow:var(--shadow-md) !important}

/* selected plan card: page uses #6366f1 + a dark indigo gradient with !important */
.plan-selected{
  border-color:var(--accent) !important;
  background:var(--surface) !important;
  background-image:none !important;
  box-shadow:var(--shadow-md) !important;
}

/* inline code chip: page uses #0f172a on #1e293b */
code.kbd,.kbd{
  background:var(--surface-2) !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}

/* status bars: page uses #1e293b track */
.bar-track,.bar-na{background:var(--line) !important}
.bar-ok{background:var(--ok) !important}

/* native form controls were forced dark by the page */
input,textarea,select{color-scheme:light !important}
input[type="range"]{accent-color:var(--accent) !important}

/* terminal caret: page uses indigo #818cf8 */
.caret::after{color:var(--accent) !important}

/* monospace helpers -> brand mono */
.addr-mono,.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace !important}

/* page-level body resets (tos/privacy set #fff on #000) */
body{background:var(--paper) !important; color:var(--ink) !important}

/* scan/shimmer panels that painted themselves dark */
[class*="shimmer"]{background:var(--surface-2) !important}
.log-line{color:var(--muted) !important}