/* CatPhish design system — warm, editorial, case-file look.
   Light = paper + amber (default). Dark = charcoal variant of the same brand.
   Deliberately NOT the blue/navy "generic security SaaS" palette.
   Chart colors are CVD-validated per theme; don't swap them casually. */

:root, :root[data-theme="light"]{
  --bg:#F6F5F3;
  --bg-soft:#EFEDEA;
  --panel:#FFFFFF;
  --line:#E4E1DC;
  --line-strong:#D2CEC7;
  --ink:#1A1B1D;
  --dim:#63625F;
  --faint:#67655F;

  --primary:#B5590C;
  --primary-hover:#9A4A08;
  --primary-ink:#FFFFFF;
  --primary-wash:#FBE9D3;
  --purple:#7A3B33;
  --purple-hover:#652E27;
  --mint-bg:#DCE8D2;
  --mint-ink:#33591F;

  --red:#A32F2F;
  --amber:#8A5A0C;
  --teal:#276B5C;
  --red-wash:#F7E4E0;
  --amber-wash:#F3E6CC;
  --teal-wash:#E1EEE8;

  --chart-blue:#B5590C;
  --chart-teal:#276B5C;

  --navy-1:#241C10;
  --navy-2:#4A3A20;
  --shadow-sm:0 2px 8px rgba(36,28,16,0.08);
  --shadow:0 10px 30px rgba(36,28,16,0.10);
  --shadow-lg:0 18px 44px rgba(36,28,16,0.16);
  --ease:cubic-bezier(0.16,1,0.3,1);

  /* Geist stands in for Replit's proprietary ABC Diatype: the same
     neo-grotesque proportions, and it's Vercel's face, so it matches the
     other reference too. Display text is set at 400-500, never bold --
     the weight is what separates this look from a generic marketing page. */
  --font-display:'Geist','Inter',system-ui,sans-serif;

  /* Radii: 6px on controls, 10px on containers. Replit sits at 6px for
     buttons; anything pill-shaped reads as a different, softer brand. */
  --r-control:6px;
  --r-panel:10px;
}
:root[data-theme="dark"]{
  /* Neutral charcoal, matching the light palette's move off cream. A brown
     dark mode beside a near-neutral light mode is two different themes
     wearing the same accent. */
  --bg:#161616;
  --bg-soft:#1D1D1C;
  --panel:#212121;
  --line:#302F2E;
  --line-strong:#413F3D;
  --ink:#F2F1EF;
  --dim:#B4B2AE;
  --faint:#8F8D89;

  --primary:#E38A2E;
  --primary-hover:#EE9C46;
  --primary-ink:#1A1207;
  --primary-wash:rgba(227,138,46,0.16);
  --purple:#B97A6E;
  --purple-hover:#C88E82;
  --mint-bg:rgba(94,158,68,0.18);
  --mint-ink:#9CD680;

  --red:#D9705A;
  --amber:#D9A94E;
  --teal:#5FAE9A;
  --red-wash:rgba(217,112,90,0.16);
  --amber-wash:rgba(217,169,78,0.16);
  --teal-wash:rgba(95,174,154,0.16);

  --chart-blue:#E38A2E;
  --chart-teal:#5FAE9A;

  --navy-1:#1A1207;
  --navy-2:#3A2712;
  --shadow-sm:0 2px 10px rgba(0,0,0,0.32);
  --shadow:0 10px 34px rgba(0,0,0,0.46);
  --shadow-lg:0 22px 54px rgba(0,0,0,0.58);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  background-image:var(--bg-glow, none);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-feature-settings:"ss01" 1, "cv11" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  font-size:14px;
  line-height:1.62;
  letter-spacing:-0.006em;
  transition:background-color 0.25s var(--ease), color 0.25s var(--ease);
}
:root[data-theme="dark"] body{
  /* Amber, not the blue this was before the rebrand -- a cool glow behind
     a warm charcoal page is what makes a dark theme look assembled from
     two different designs. */
  --bg-glow:radial-gradient(1100px 480px at 50% -120px, rgba(227,138,46,0.07), transparent 60%);
}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
.page{padding:32px 0 72px;}
a{color:var(--primary);text-decoration:none;transition:color 0.15s var(--ease);}
a:hover{text-decoration:underline;}

/* focus rings: visible for keyboard users, silent for mouse clicks */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
:focus:not(:focus-visible){outline:none;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ------------------------------------------------------------------ type */
h1,h2,h3{
  font-family:var(--font-display);font-weight:450;line-height:1.1;margin:0;
  color:var(--ink);
  /* -0.04em at display sizes. Replit runs -0.06em on a 64px headline;
     that's too tight for anything smaller, so this is the compromise that
     holds up across h1 through h3 without a per-size override. */
  letter-spacing:-0.035em;
  font-optical-sizing:auto;
  /* Distributes words evenly across lines instead of filling each one and
     dumping the remainder alone on the last. Without it the hero reads
     "...actually from / your bank." and the privacy heading strands the
     word "data." by itself, which is the detail that makes a headline
     look unconsidered. */
  text-wrap:balance;
}

/* Paragraphs get `pretty` rather than `balance`: balance is capped at a
   few lines and is meant for short display text, while pretty only guards
   against the final-line orphan, which is the problem in body copy. */
p{text-wrap:pretty;}

/* Any figure the eye compares down a column -- risk scores, counters,
   case numbers -- needs fixed-width digits, or the numerals jitter
   sideways between rows and the column stops looking like a column. */
.num,.score,.chip,td,th,.mono{font-variant-numeric:tabular-nums;}
.microlabel{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--primary);
}
.mono{font-family:'IBM Plex Mono',monospace;font-feature-settings:"tnum" 1;}

/* ------------------------------------------------------- announcement bar */
/* A tinted strip rather than a full-saturation orange bar. At this weight
   the rest of the page is deliberately quiet, and a solid accent band was
   the single loudest element on screen -- it read as a cookie banner. */
.announce{
  background:var(--bg-soft);color:var(--dim);
  border-bottom:1px solid var(--line);
  font-size:12.5px;text-align:center;
  padding:9px 44px;position:relative;
}
.announce a{color:var(--primary);font-weight:500;}
.announce .dismiss{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:1px solid var(--line-strong);color:var(--faint);
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.announce .dismiss:hover{border-color:var(--dim);color:var(--dim);}

/* ---------------------------------------------------------------- navbar */
.navbar{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(36,28,16,0.06);
}
.nav-inner{
  max-width:1160px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);flex-shrink:0;}
.brand:hover{text-decoration:none;}
.brand-name{font-family:var(--font-display);font-weight:550;font-size:19px;letter-spacing:-0.03em;}
.brand-name .tld{color:var(--primary);}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nav-links a{
  font-size:13.5px;font-weight:450;color:var(--dim);
  padding:7px 11px;border-radius:var(--r-control);position:relative;
  transition:color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.nav-links a:hover{color:var(--primary);text-decoration:none;}
.nav-links a.active{color:var(--primary);}
.nav-links a.active::after{
  content:'';position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--primary);border-radius:2px;
  animation:navUnderline 0.25s var(--ease) backwards;
}
@keyframes navUnderline{from{transform:scaleX(0);opacity:0;}to{transform:scaleX(1);opacity:1;}}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.welcome{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;}
.welcome b{color:var(--primary);}

/* --------------------------------------------------------------- buttons */
.btn{
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;
  padding:9px 16px;border-radius:var(--r-control);cursor:pointer;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
  transition:border-color 0.18s var(--ease), color 0.18s var(--ease),
             background-color 0.18s var(--ease), transform 0.15s var(--ease),
             box-shadow 0.18s var(--ease);
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;
}
.btn:hover{border-color:var(--primary);color:var(--primary);text-decoration:none;
  transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(0.97);}
.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);
  color:var(--primary-ink);box-shadow:0 6px 18px -6px var(--primary);}
.btn.purple{background:var(--purple);color:#fff;border-color:var(--purple);}
.btn.purple:hover{background:var(--purple-hover);border-color:var(--purple-hover);color:#fff;}
.btn.outline{background:transparent;border-color:var(--primary);color:var(--primary);}
.btn.outline:hover{background:var(--primary-wash);}
.btn.pill{border-radius:999px;padding:9px 22px;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--dim);}
.btn.ghost:hover{color:var(--primary);border-color:transparent;transform:none;}
.btn:disabled{opacity:0.5;cursor:wait;transform:none !important;}
.theme-toggle{
  width:38px;height:38px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;font-size:15px;
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  cursor:pointer;color:var(--dim);
  transition:border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.3s var(--ease);
}
.theme-toggle:hover{border-color:var(--primary);color:var(--primary);transform:rotate(-14deg);}
.theme-toggle:active{transform:rotate(-14deg) scale(0.9);}

/* ---------------------------------------------------------------- panels */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  position:relative;
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
             transform 0.2s var(--ease);
}
.panel.lift{box-shadow:var(--shadow);}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.panel-title{
  font-family:var(--font-display);font-size:13.5px;font-weight:600;
  color:var(--ink);
}
.panel-body{padding:18px;}
.icon-chip{
  width:40px;height:40px;border-radius:10px;background:var(--primary-wash);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  color:var(--primary);flex-shrink:0;
}

/* --------------------------------------------------------------- verdict */
@keyframes stampIn{from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.stamp{
  font-size:12.5px;font-weight:700;letter-spacing:0.03em;
  padding:8px 16px;border-radius:999px;
  display:inline-block;white-space:nowrap;
  animation:stampIn 0.3s var(--ease);
}
.stamp.bad{background:var(--red-wash);color:var(--red);}
.stamp.warn{background:var(--amber-wash);color:var(--amber);}
.stamp.ok{background:var(--teal-wash);color:var(--teal);}

.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot.bad{background:var(--red);}
.dot.warn{background:var(--amber);}
.dot.ok{background:var(--teal);}
.dot.info{background:var(--faint);}

.chip{
  font-size:11.5px;font-weight:700;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
  transition:background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip.bad{background:var(--red-wash);color:var(--red);}
.chip.warn{background:var(--amber-wash);color:var(--amber);}
.chip.ok{background:var(--teal-wash);color:var(--teal);}
.badge-new{
  background:var(--mint-bg);color:var(--mint-ink);
  font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;
}

/* ----------------------------------------------------------------- forms */
input[type=text],input[type=email],input[type=password],textarea{
  width:100%;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:8px;
  font-family:'Inter',sans-serif;font-size:14px;
  padding:11px 14px;outline:none;
  transition:border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
textarea{font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash);}
label .field-label{
  display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink);
}
.form-error{color:var(--red);font-size:13px;min-height:18px;margin-top:8px;}

/* ---------------------------------------------------------------- tables */
table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--faint);text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line-strong);
}
table.data td{
  padding:10px 12px;border-bottom:1px solid var(--line);color:var(--dim);
  vertical-align:top;
}
table.data td:first-child{color:var(--ink);font-weight:600;}
table.data tbody tr{transition:background-color 0.15s var(--ease);}
table.data tbody tr:hover{background-color:var(--bg-soft);}
.table-scroll{overflow-x:auto;}

/* ------------------------------------------------------------ footer */
.footer{
  border-top:1px solid var(--line);background:var(--bg-soft);
  padding:30px 0 44px;margin-top:72px;
  font-size:13.5px;color:var(--faint);
}
.footer .footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.footer a{color:var(--dim);font-weight:600;}
.footer-copyright{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);
}

@media (max-width:720px){
  .nav-links a{padding:6px 8px;font-size:13.5px;}
  body{font-size:14px;}
  .nav-inner{flex-wrap:wrap;}
}