/* ============================================================
   THE 10-K REPORT — MASTER GLOBAL STYLESHEET
   Aesthetic: dark corporate dashboard (Walter art reference)
   Palette:  Black/charcoal · white line · red #C20000 accents
   Loaded by every page. Edit colors here once; whole site updates.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
/* Big-header display face. Apple devices (incl. Lara's Mac & her family's)
   render the real "American Typewriter". Every other device (Windows, Android)
   gets Special Elite from Google — an old, ink-stamped typewriter look that
   keeps the vintage feel. Courier Prime is the deep fallback. */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

:root{
  color-scheme: dark;

  /* Brand */
  --red:#C20000;          /* primary brand red */
  --red-bright:#E11D2A;   /* hover / glow */
  --red-deep:#8f0000;

  /* Dark dashboard surfaces */
  --bg:#0d0d0f;           /* page background */
  --panel:#161619;        /* cards / panels */
  --panel-2:#1d1d22;      /* raised panels, inputs */
  --line:#2a2a30;         /* hairline borders */
  --line-soft:#202024;

  /* Text — all white, no grey writing (Lara's rule) */
  --ink:#ffffff;          /* headings / line-art white */
  --text:#ffffff;         /* body copy */
  --muted:#ffffff;        /* labels / fine print */

  --radius:12px;
  --radius-sm:8px;
  --maxw:1200px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --font:'Courier Prime','Courier New',Courier,monospace;  /* primary typeface — SEC-filing typewriter look */
  --mono:'Courier Prime','Courier New',Courier,monospace;  /* SEC-filing typewriter accents */
  --display:'American Typewriter','Special Elite','Courier Prime',serif;  /* big headers */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 400px at 85% -5%, rgba(194,0,0,.10), transparent 60%),
    radial-gradient(700px 500px at -5% 10%, rgba(255,255,255,.03), transparent 55%);
  background-attachment:fixed;
}
a{color:var(--red-bright);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;display:block}
/* Eagle Eyes #7/#13: the page may NEVER scroll sideways. `clip` keeps
   position:sticky working; `hidden` is the fallback for older browsers. */
html,body{overflow-x:hidden;overflow-x:clip}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{display:inline-block;color:var(--red-bright);font-weight:700;font-size:12px;
  letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;font-family:var(--mono)}
.ticker{font-family:var(--mono)}

/* ============================================================
   TOP NAVIGATION (universal shell)
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(13,13,15,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* faint red glow line across the very top edge */
.site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:radial-gradient(60% 100% at 50% 0,rgba(194,0,0,.9),rgba(194,0,0,0) 70%);
  pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:10px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:13px;font-weight:800;letter-spacing:.5px;
  color:#fff;font-size:21px;text-transform:uppercase;white-space:nowrap}
.brand:hover{color:#fff}
.brand .chip{width:60px;height:60px;display:inline-block;flex-shrink:0;
  border-radius:50%;border:2px solid #fff;background:#000;object-fit:cover}
.brand .wm-red{color:var(--red)}
.hero-yt{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;margin:0 auto 16px;width:fit-content;text-decoration:none}
.hero-yt-name{color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.hero-yt:hover{transform:translateY(-1px);transition:.15s}
/* ---- Clean underline tabs: flat, white, red underline on active/hover ---- */
.nav-links{display:flex;gap:0;align-items:center;flex-wrap:nowrap;
  row-gap:0;justify-content:flex-end;white-space:nowrap}
.nav-links a{
  font-family:'Montserrat',sans-serif;color:#e9e9ee;font-weight:800;font-size:11.5px;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  padding:8px 9px;line-height:1;position:relative;border-radius:8px;transition:.15s}
.nav-links a::before{content:"";position:absolute;left:14px;right:14px;bottom:2px;
  height:2.5px;background:var(--red);border-radius:2px;pointer-events:none;
  transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.nav-links a:hover{color:#fff}
.nav-links a:hover::before,.nav-links a.active::before{transform:scaleX(1)}
.nav-links a.active{color:#fff}
/* thin vertical divider before the language switcher */
.nav-div{width:1px;height:26px;background:var(--line);margin:0 8px;flex-shrink:0}
/* "See Walter on YouTube" stacked under the logo wordmark */
.brand-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;justify-content:center}
.brand-yt{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;
  font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding-left:53px;white-space:nowrap}
.brand-yt:hover{color:#fff;text-decoration:underline}
.brand-yt svg{display:block;flex-shrink:0}
.menu-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:#fff}
/* ---- Language switcher: globe + ENGLISH, dark outlined pill ---- */
.lang-select{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;letter-spacing:.05em;
  color:#fff;background-color:transparent;border:1.5px solid #3a3a42;border-radius:9px;
  padding:8px 26px 8px 30px;cursor:pointer;line-height:1;text-transform:uppercase;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat,no-repeat;background-position:left 11px center,right 11px center}
.lang-select:hover{border-color:#5a5a63;background-color:rgba(255,255,255,.04)}
.lang-select:focus{outline:2px solid var(--red);outline-offset:1px}
.lang-select option{color:#0a0a0a}
/* dropdown menu items keep their own look, no tab underline */
.dropdown-menu a::before{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  font-size:13.5px;padding:14px 26px;border-radius:var(--radius-sm);cursor:pointer;
  border:1.5px solid transparent;transition:.15s;text-align:center}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(194,0,0,.32)}
.btn-primary:hover{background:var(--red-bright);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--line)}
.btn-ghost:hover{background:#fff;color:var(--bg);border-color:#fff}
.btn-sm{padding:10px 18px;font-size:12px}

/* ============================================================
   HERO / DASHBOARD
   ============================================================ */
.hero{padding:30px 0 72px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-family:var(--display);font-size:clamp(40px,5.6vw,66px);line-height:1.02;margin:0 0 18px;
  font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:-.5px}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:9px;background:var(--red);z-index:-1}
.hero p.lead{font-size:18px;color:var(--text);max-width:540px;margin:0 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Centered hero — Walter dead center */
.hero-center{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-center h1{margin-bottom:6px}
.hero-art{position:relative;width:100%;max-width:560px;margin:20px auto 30px;
  background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero-art img{width:100%;display:block}
.hero-art-tag{position:absolute;top:12px;right:14px;z-index:2;font-size:11px;letter-spacing:1.5px;
  color:var(--muted);text-transform:uppercase;font-weight:700;font-family:var(--mono)}
.hero-center .lead{max-width:620px;margin-left:auto;margin-right:auto}
.hero-center .callout{font-size:16px;text-align:left;border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:var(--radius-sm);padding:14px 18px;
  background:var(--panel);margin-bottom:30px}
.hero-center .hero-actions{justify-content:center}
.hero-center .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:540px;width:100%;margin:34px auto 0}

/* Hero headline — clean serif, "Just the Facts" big / "Private or Public" smaller */
.hero-head{font-family:var(--display) !important;
  text-transform:none !important;letter-spacing:0 !important;font-weight:800;line-height:1.04;margin-bottom:6px}
.hero-head .sub{display:block;font-size:.46em;font-weight:700;margin-top:12px}
.hero-time{font-size:clamp(16px,2.1vw,20px);color:#fff;font-weight:700;max-width:600px;
  margin:16px auto 0;line-height:1.5}
.hero-time strong{color:var(--red-bright)}

/* Dashboard visual panel */
.dash{background:linear-gradient(180deg,var(--panel),#0f0f12);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dash-top .dot{display:flex;gap:6px}
.dash-top .dot span{width:11px;height:11px;border-radius:50%;background:var(--line)}
.dash-top .dot span:first-child{background:var(--red)}
.dash-top .tag{font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;font-weight:700;font-family:var(--mono)}
.dash-art{border-radius:var(--radius-sm);overflow:hidden;background:#000;border:1px solid var(--line)}
.dash-art img{width:100%;display:block}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.kpi{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 14px}
.kpi .v{font-size:22px;font-weight:700;color:#fff;line-height:1;font-family:var(--mono)}
.kpi .v .r{color:var(--red-bright)}
.kpi .v .g{color:#21D366}
.kpi .l{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:700;font-family:var(--mono)}
/* D03.17: customer benefits, not internal report specifications. */
.hero-center .benefit-cards{max-width:760px;gap:14px}
.benefit-card{min-height:164px;padding:20px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.benefit-card .kpi-icon{width:44px;height:44px;margin-bottom:13px;color:#fff;
  display:flex;align-items:center;justify-content:center}
.benefit-card .kpi-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.benefit-card .v{font-family:var(--sans);font-size:19px;line-height:1.15;font-weight:800;
  letter-spacing:0;text-transform:none}
.benefit-card .v .r{color:var(--red-bright)}
.benefit-card .l{font-family:var(--sans);font-size:13.5px;line-height:1.42;font-weight:500;
  letter-spacing:0;text-transform:none;color:#c8c8ce;margin-top:8px;overflow-wrap:normal}
/* Neon-yellow "pop" highlight on a standout stat box */
.kpi.pop{position:relative;border-color:#fff;box-shadow:0 0 0 1px #fff, 0 6px 18px rgba(255,255,255,.22)}
.kpi.pop::after{content:"";position:absolute;left:14px;right:14px;bottom:-4px;height:4px;border-radius:3px;background:var(--red);box-shadow:0 0 12px 2px rgba(194,0,0,.6)}

/* ============================================================
   TAGLINE BAR
   ============================================================ */
.tagbar{background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;padding:16px 0;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  font-size:clamp(11px,1.5vw,14px);color:#fff;font-family:var(--mono)}
.tagbar .r{color:var(--red-bright)}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:78px 0}
.section-head{text-align:center;max-width:740px;margin:0 auto 48px}
.section-head h2{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);font-weight:700;text-transform:uppercase;
  margin:0 0 14px;color:#fff;letter-spacing:-.3px}
.section-head h2 .r{color:var(--red-bright)}
.section-head p{color:var(--muted);font-size:17px;margin:0}
.alt{background:#0a0a0c;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* Feature / step cards */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 26px;transition:.18s}
.step:hover{border-color:var(--red);transform:translateY(-4px)}
.step-img{padding:0;overflow:hidden;display:flex}
.step-img:hover{transform:none;border-color:var(--line)}
.step-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}
.step .num{width:46px;height:46px;background:var(--red);color:#fff;font-weight:800;font-size:19px;
  border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  box-shadow:0 6px 16px rgba(194,0,0,.3)}
.step h3{margin:0 0 8px;text-transform:uppercase;font-size:17px;color:#fff;letter-spacing:.3px}
.step p{margin:0;color:var(--muted);font-size:15px}

/* Good/Bad/Ugly strip
   Jul-30 fix (Lara's screenshot): `.gbu div` also hit the inner title divs,
   wrapping "THE GOOD" etc. in a big empty bordered box — scoped to > div. */
.gbu{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gbu > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;border-top:4px solid var(--line)}
/* the official drum icons (Jul-30, Lara: "add the GOOD bad n Ugly icons") */
.gbu .ic{display:block;height:60px;width:auto;margin:0 0 14px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.gbu .good{border-top-color:#fff}
.gbu .bad{border-top-color:var(--red)}
.gbu .ugly{border-top-color:#fff}
.gbu .t{font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:1px;margin-bottom:10px;color:#fff}
.gbu .good .t{color:#fff}
.gbu .bad .t{color:var(--red-bright)}
.gbu p{margin:0;color:var(--muted);font-size:15px}

/* ============================================================
   REPORTS GRID / CARDS
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.card:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:var(--shadow)}
.card .thumb{background:#000;border-bottom:1px solid var(--line)}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* Featured Walter doodle cards — show the whole square art on white, no crop */
.card .thumb.feat{background:#fff;aspect-ratio:1/1;border-bottom:1px solid var(--line)}
.card .thumb.feat img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block}
/* Square report card (original logo-square format) */
.card .thumb.sq{background:#fff;border-bottom:none;display:flex;flex-direction:column;aspect-ratio:1/1;padding:0}
.card .thumb.sq img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block}
.sq .sq-bar{background:var(--red);color:#fff;font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:2px;text-align:center;padding:7px 0}
.sq .sq-face{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 16px 18px;text-align:center;gap:12px}
.sq .sq-logo{color:#0a0a0a;font-weight:900;line-height:1.04;letter-spacing:-.5px;
  font-family:Arial,Helvetica,sans-serif;font-size:clamp(20px,4vw,34px);text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;min-height:54px}
.sq .sq-rule{width:62%;height:2px;background:var(--red)}
.sq .sq-co{color:#0a0a0a;font-weight:700;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;font-family:var(--mono)}
.sq .sq-year{margin-top:2px;background:var(--red);color:#fff;font-family:var(--mono);font-weight:700;
  font-size:13px;letter-spacing:1.6px;text-transform:uppercase;padding:5px 14px;border-radius:4px}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card .ticker{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;font-family:var(--mono)}
.card h3{margin:5px 0;font-size:18px;text-transform:uppercase;font-weight:800;line-height:1.15;color:#fff}
.card .hook{color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(20px,2.3vw,25px);
  line-height:1.12;letter-spacing:.2px;margin:3px 0 16px;flex:1;
  -webkit-text-stroke:1.4px #E11D2A;text-stroke:1.4px #E11D2A;paint-order:stroke fill}
.card .buy{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.card .price{font-weight:700;font-size:20px;color:#fff;font-family:var(--mono)}
.card .price small{color:var(--muted);font-weight:600;font-size:12px;font-family:var(--mono)}

/* Eagle Eyes #15 — LOCKED: compact catalog, FOUR cards across max on desktop
   (never six), stepping down 3 → 2 → 1. Tighter padding + type, but company,
   ticker, hook and Get Report stay legible. */
.grid.catalog{grid-template-columns:repeat(4,1fr);gap:16px}
.grid.catalog .card .body{padding:13px 13px 15px}
.grid.catalog .card h3{font-size:15px}
.grid.catalog .card .ticker{font-size:10.5px;letter-spacing:1px}
.grid.catalog .card .hook{font-size:16.5px;-webkit-text-stroke:1px #E11D2A;text-stroke:1px #E11D2A;margin:3px 0 12px}
.grid.catalog .card .buy .btn{padding:9px 14px;font-size:11.5px}
@media(max-width:1100px){.grid.catalog{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid.catalog{grid-template-columns:repeat(2,1fr);gap:13px}}
@media(max-width:480px){.grid.catalog{grid-template-columns:1fr}}

/* Toolbar (search/filter) */
.toolbar{display:flex;gap:14px;justify-content:center;align-items:center;margin-bottom:36px;flex-wrap:wrap}
.toolbar input{background:var(--panel-2);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 18px;font-size:15px;width:min(440px,90vw);color:#fff;font-family:inherit}
.toolbar input::placeholder{color:var(--muted)}
.toolbar input:focus{outline:none;border-color:var(--red)}
.count{color:var(--muted);font-size:14px;font-weight:600;font-family:var(--mono)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:14px;overflow:hidden}
.faq summary{cursor:pointer;padding:20px 22px;font-weight:700;font-size:16px;color:#fff;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--red-bright);font-size:24px;font-weight:800;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:18px 22px;color:var(--muted);font-size:15px}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:linear-gradient(120deg,var(--red-deep),var(--red));text-align:center;padding:66px 0;
  border-top:1px solid rgba(255,255,255,.12)}
.cta-band h2{font-size:clamp(28px,3.6vw,42px);text-transform:uppercase;font-weight:800;margin:0 0 14px;color:#fff}
.cta-band p{margin:0 0 28px;font-size:18px;color:rgba(255,255,255,.92)}
.cta-band .btn-ghost{background:#fff;color:var(--red);border-color:#fff}
.cta-band .btn-ghost:hover{background:#000;color:#fff;border-color:#000}

/* ============================================================
   PROSE (about / text pages)
   ============================================================ */
.prose{max-width:780px;margin:0 auto;font-size:17px;color:var(--text)}
.prose h2{text-transform:uppercase;font-weight:800;margin-top:44px;font-size:26px;color:#fff}
.prose h2 .r{color:var(--red-bright)}
.prose .pull{border-left:4px solid var(--red);background:var(--panel);padding:18px 22px;
  margin:26px 0;font-weight:600;color:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* ============================================================
   FOOTER (universal shell)
   ============================================================ */
.site-footer{background:#08080a;border-top:1px solid var(--line);padding:54px 0 30px;margin-top:0}
.foot-grid{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;margin-bottom:34px}
.foot-brand{font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:18px;color:#fff;
  display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-brand .chip{width:52px;height:52px;display:inline-block;flex-shrink:0}
.foot-about{color:var(--muted);max-width:340px;font-size:14px}
.site-footer a{color:var(--muted);display:block;font-size:14px;margin:9px 0}
.site-footer a:hover{color:#fff}
.foot-col h4{text-transform:uppercase;font-size:12px;letter-spacing:1.4px;color:#fff;margin:0 0 12px;font-weight:800}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* Jul-30 Eagle Eye: disclaimer strengthened & READABLE — bigger type, roomier
   line spacing, visible underlined link. It must never look like hidden fine print. */
.disclaimer{max-width:860px;color:#fff;font-size:14px;line-height:1.8;margin-top:14px}
.disclaimer a{display:inline;color:#fff;text-decoration:underline;font-weight:700;font-size:inherit;margin:0}
.disclaimer a:hover{color:var(--red-bright)}
/* Watson's paw-print clues (Jul-30, Lara: "I like clues") — always tiny, always subtle */
.foot-paw{font-size:12px;opacity:.5;margin-left:10px}
.yt-paws{display:flex;gap:16px;justify-content:flex-end;padding:10px 6px 0;opacity:.45;font-size:13px}
.yt-paws span:nth-child(2){transform:rotate(-14deg) translateY(-3px);display:inline-block}
.yt-paws span:nth-child(3){transform:rotate(12deg);display:inline-block}
/* Jul-31 Eagle Eyes #8/#12/#22 — Whatson followed the evidence. Paw trails are
   decorative clues: subtle, sparse, never over copy, buttons, or card borders. */
.paw-trail{display:flex;opacity:.4;font-size:13px;pointer-events:none;user-select:none;line-height:1}
.paw-trail span{display:inline-block}
.paw-trail span:nth-child(even){transform:rotate(-14deg) translateY(-3px)}
.paw-trail span:nth-child(odd){transform:rotate(11deg)}
/* #8 — Three Kinds: trail leads the eye Public → Private → International */
.kinds-paws{justify-content:space-between;max-width:560px;margin:20px auto 0;padding:0 12px}
/* #12 — red CTA band: a few paws walking toward the Browse button (simpler than #8) */
.cta-paws{justify-content:center;gap:24px;margin:14px 0 18px;opacity:.35}
/* #22 — About rules: 2–3 quiet prints in the open space under the heading */
.rules-paws{justify-content:center;gap:28px;margin-top:8px;opacity:.3;font-size:12px}
@media(max-width:640px){
  .kinds-paws{max-width:280px;padding:0 6px}
  .kinds-paws span:nth-child(4),.kinds-paws span:nth-child(5){display:none}
  .cta-paws span:nth-child(4){display:none}
}
/* Jul-30: headings were sliding under the sticky nav on anchor jumps */
section,.cta-band{scroll-margin-top:96px}
/* Jul-30 phone fix: grid children may never force the page wider than the screen */
.hero-grid>*{min-width:0}
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi .l{overflow-wrap:anywhere}
/* Jul-30 phone fix: the underlined headline word may wrap on small screens
   instead of shoving the whole page sideways (about.html "Plays No Favorites.") */
@media(max-width:700px){.hero h1 .u{white-space:normal}}
/* Contact: readable clickable email with visible hover + keyboard-focus states */
.mail-link{display:inline-block;color:var(--red-bright);font-weight:800;font-size:clamp(18px,2.6vw,24px);
  text-decoration:none;word-break:break-word;border-bottom:2px solid transparent}
.mail-link:hover,.mail-link:focus-visible{color:#fff;border-bottom-color:var(--red-bright);outline:none}
.mail-link.sm{font-size:inherit;font-weight:700}
.foot-social{display:flex;gap:12px;margin-top:16px}
.foot-social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;color:#fff;margin:0;transition:.15s}
.foot-social a:hover{background:var(--red);border-color:var(--red);color:#fff}
.foot-social svg{width:18px;height:18px;fill:currentColor;display:block}
/* Eagle Eyes #25 — six-platform social row: icon + visible label pills.
   Overrides the old 36px icon-only boxes; wraps cleanly on narrow screens. */
.foot-social.social-row{flex-wrap:wrap;gap:10px}
.foot-social.social-row a{width:auto;height:auto;gap:8px;padding:8px 13px;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#e9e9ee;line-height:1}
.foot-social.social-row a:hover{color:#fff}
.foot-social.social-row svg{width:16px;height:16px;flex-shrink:0}

/* ============================================================
   WHAT'S NEW — WALTER'S LATEST SEC FILINGS  (Eagle Eyes #28)
   ============================================================ */
#whats-new{padding-top:34px;padding-bottom:40px}
.wn-state{max-width:640px;margin:6px auto 0;text-align:center;color:var(--muted)}
.wn-state p{margin:8px 0;font-size:14.5px;line-height:1.6}
.wn-state a{color:var(--red-bright);font-weight:700}
.wn-err p{color:#e9b4b4}
.wn-spin{display:inline-block;width:22px;height:22px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--red-bright);border-radius:50%;animation:wnspin .9s linear infinite}
@keyframes wnspin{to{transform:rotate(360deg)}}
.wn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:18px}
.wn-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.wn-card-top{display:flex;align-items:baseline;gap:10px;min-width:0}
.wn-co{font-weight:800;font-size:14.5px;letter-spacing:.01em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wn-tkr{flex-shrink:0;font-size:11.5px;font-weight:800;color:var(--red-bright);letter-spacing:.05em}
.wn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wn-form{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:5px;line-height:1.3}
.wn-date{font-size:12px;color:var(--muted)}
.wn-link{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#e9e9ee;border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:7px 11px;transition:border-color .15s,color .15s}
.wn-link:hover{color:#fff;border-color:var(--red-bright)}
.wn-disclosure{max-width:720px;margin:20px auto 0;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6}
.wn-stamp{margin:8px auto 0;text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.wn-stamp a{color:var(--muted);text-decoration:underline}
.wn-stamp a:hover{color:#fff}
@media(max-width:720px){
  .wn-grid{grid-template-columns:1fr}
  .wn-co{white-space:normal}
}

/* ============================================================
   FOLLOW ALONG — six-platform social cards  (Eagle Eyes #25)
   Black cards, white labels, red accents. Icon + visible text.
   ============================================================ */
.social-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:960px;margin:22px auto 0}
.social-card{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:16px 14px;color:#fff;font-weight:800;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1;transition:border-color .15s,transform .15s}
.social-card svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.social-card:hover{border-color:var(--red-bright);transform:translateY(-2px)}
.social-card:hover svg{fill:var(--red-bright)}
@media(max-width:720px){
  .social-cards{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Eagle Eyes #7/#13 — NAV SQUEEZE: the one-line header was wider than a laptop
   window (nowrap brand + 6 nowrap links + language pill), forcing the whole page
   to scroll sideways and clip sections at the left edge. Shrink it at laptop
   widths, then hand off to the hamburger earlier (900px instead of 720px). */
@media(max-width:1200px){
  .brand{font-size:18px;gap:10px}
  .brand .chip{width:48px;height:48px}
  .brand-yt{padding-left:41px;font-size:10px}
  .nav-links a{font-size:10.5px;padding:8px 6px;letter-spacing:.01em}
  .nav-links a::before{left:8px;right:8px}
  .nav-div{margin:0 4px}
  .lang-select{font-size:11px;padding:7px 22px 7px 26px}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .steps,.grid{grid-template-columns:repeat(2,1fr)}
  .gbu{grid-template-columns:1fr}
}
@media(max-width:899px){
  /* D03.20: full navigation remains visible on desktop and tablet-width desktop
     windows. The hamburger is reserved for the cellphone layout only. */
  /* Compact header: hamburger on the right, nav CLOSED by default */
  .menu-toggle{display:block;padding:4px 10px;line-height:1}
  .nav{flex-wrap:wrap;min-height:0;padding:8px 0;gap:0}
  .brand{font-size:17px;gap:9px}
  .brand .chip{width:44px;height:44px}
  .brand-sub{font-size:8.5px;letter-spacing:.1em}
  .brand-yt{padding-left:0}
  .nav-links{display:none;position:static;width:100%;background:none;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px 0 12px}
  .nav-links.open{display:flex}
  .nav-links a{font-size:14px;padding:11px 12px;text-align:center;white-space:normal}
  .nav-div{display:none}
  /* Language pill hides until the hamburger menu is open */
  .nav > .lang-select{display:none;margin:6px auto 0}
  .nav-links.open ~ .lang-select{display:block}
}
@media(max-width:720px){
  /* Announcement bar: compact, centered, wraps cleanly */
  .beta-bar{font-size:11px;padding:7px 12px;line-height:1.45;letter-spacing:.02em}
  /* Intro line: safe side padding, never clipped */
  .engine-hero-head{padding:0 16px}
  .grid,.steps,.kpis{grid-template-columns:1fr}
  .hero-center .benefit-cards{gap:10px;margin-top:26px}
  .benefit-card{min-height:0;padding:16px 18px;display:grid;grid-template-columns:42px minmax(0,1fr);
    column-gap:14px;align-items:center;text-align:left}
  .benefit-card .kpi-icon{width:38px;height:38px;margin:0}
  .benefit-card .v{font-size:18px}
  .benefit-card .l{font-size:14px;margin-top:4px}
}

/* ============================================================
   FREE · BETA  — pricing replaced with free-during-beta model
   ============================================================ */
.card .price.free{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--red);color:#fff;font-family:var(--mono);
  font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 20px;border-radius:999px;
  box-shadow:0 6px 0 -1px #fff, 0 14px 22px rgba(194,0,0,.34);
}
.card .price.free small{color:#15151a;background:#fff;padding:2px 7px;border-radius:4px;
  opacity:1;font-weight:800;font-size:12px;letter-spacing:.06em}
.card .price.free .was{text-decoration:line-through;text-decoration-thickness:2px;opacity:.7;font-weight:700;color:#fff;margin-right:3px}

/* Site-wide beta ribbon (sits under the header) */
.beta-bar{
  background:linear-gradient(90deg,var(--red-deep),var(--red));
  color:#fff;text-align:center;font-family:var(--mono);font-weight:700;
  font-size:13px;letter-spacing:.04em;padding:9px 16px;line-height:1.5;
}
.beta-bar strong{font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.beta-bar .quiet{opacity:.92;font-weight:400}
/* links inside the red ribbon were red-on-red (Lara Jul-30) — white + underline */
.beta-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.beta-bar a:hover{opacity:.8}
.beta-bar .free-pop{background:#fff;color:#15151a;padding:1px 10px 2px;
  border-radius:6px;font-weight:900;box-shadow:0 2px 0 rgba(0,0,0,.25)}

/* ============================================================
   EMAIL-GATE MODAL — report delivered by email only
   ============================================================ */
.eg-overlay{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
}
.eg-overlay.open{display:flex}
.eg-modal{
  width:100%;max-width:460px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);padding:30px 28px 26px;
  text-align:center;position:relative;
}
.eg-close{
  position:absolute;top:12px;right:14px;background:none;border:none;
  color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.7;
}
.eg-close:hover{opacity:1}
.eg-modal .eg-badge{
  display:inline-block;background:var(--red);color:#fff;font-family:var(--mono);
  font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;margin-bottom:14px;
}
.eg-modal h3{font-size:22px;margin:0 0 8px;color:#fff;line-height:1.25}
.eg-modal h3 .co{color:var(--red-bright)}
.eg-modal p{color:#fff;font-size:14.5px;line-height:1.55;margin:0 0 18px;opacity:.92}
.eg-form{display:flex;flex-direction:column;gap:11px}
.eg-form input[type=email]{
  width:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:#fff;font-size:16px;font-family:inherit;
}
.eg-form input[type=email]:focus{outline:none;border-color:var(--red-bright)}
.eg-form button{
  width:100%;padding:14px 16px;border:none;border-radius:10px;cursor:pointer;
  background:var(--red);color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(194,0,0,.34);transition:.15s;
}
.eg-form button:hover{background:var(--red-bright);transform:translateY(-1px)}
.eg-fine{font-size:12px;color:#fff;opacity:.7;margin-top:14px;line-height:1.5}
.eg-error{color:#ffb3b3;font-size:13px;min-height:16px;margin:0;text-align:left}
.eg-success{display:none}
.eg-success .eg-tick{font-size:42px;line-height:1;margin-bottom:8px}
.eg-modal.done .eg-form,.eg-modal.done .eg-ask{display:none}
.eg-modal.done .eg-success{display:block}

/* ============================================================
   HOMEPAGE EMAIL OPT-IN  — free lead-magnet (Red-Flag Checklist)
   ============================================================ */
.optin-band{
  background:linear-gradient(135deg,#161619,#0d0d0f);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:48px 0;
}
.optin-inner{
  display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.optin-copy{flex:1 1 420px;min-width:300px}
.optin-copy .kicker{color:var(--red-bright);font-size:18px;letter-spacing:.04em}
.optin-copy .kicker .big{font-weight:800;font-size:1.5em;text-transform:uppercase}
.optin-copy .limit{display:inline-block;margin-top:10px;color:#15151a;background:#fff;
  font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:5px}
.optin-copy h2{font-size:clamp(26px,3.4vw,38px);margin:6px 0 10px;color:#fff;line-height:1.15}
.optin-copy p{color:#fff;opacity:.92;font-size:15.5px;line-height:1.6;margin:0;max-width:520px}
.optin-form{flex:1 1 340px;min-width:290px;max-width:430px;display:flex;flex-direction:column;gap:11px}
.optin-form .row{display:flex;gap:10px;flex-wrap:wrap}
.optin-form input[type=email]{
  flex:1 1 200px;padding:15px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:#fff;font-size:16px;font-family:inherit;
}
.optin-form input[type=email]:focus{outline:none;border-color:var(--red-bright)}
.optin-form button{
  flex:0 0 auto;padding:15px 24px;border:none;border-radius:10px;cursor:pointer;
  background:var(--red);color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 8px 22px rgba(194,0,0,.34);transition:.15s;white-space:nowrap;
}
.optin-form button:hover{background:var(--red-bright);transform:translateY(-1px)}
.optin-msg{font-size:13.5px;color:#fff;opacity:.9;min-height:18px;margin:2px 0 0}
.optin-msg.err{color:#ffb3b3}
.optin-fine{font-size:12px;color:#fff;opacity:.65;margin:0}

/* ============================================================
   SIMPLIFIED NAV — Reports dropdown  (2026-07-19 redesign)
   ============================================================ */
.nav-item{position:relative;display:inline-flex;align-items:flex-end}
.has-dropdown > a::after{content:"\25BE";font-size:.72em;margin-left:6px;opacity:.85;vertical-align:middle}
.dropdown-menu{
  position:absolute;top:100%;left:0;min-width:220px;
  background:#fff;border:1px solid #e4e4e4;border-radius:10px;
  box-shadow:0 16px 38px rgba(0,0,0,.20);
  padding:7px;display:none;flex-direction:column;gap:2px;z-index:120}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{display:flex}
.dropdown-menu a{
  display:block;padding:10px 13px;border-radius:7px;
  font-size:13px;font-weight:600;text-transform:none;letter-spacing:normal;
  color:#15151a;background:none;box-shadow:none;transform:none}
.dropdown-menu a:hover{background:#f1f1f1;color:#0a0a0a}

/* Logo sub-line — "Home of The Truth Engine" */
.brand-sub{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#C20000;font-weight:800;margin-top:5px}

/* ============================================================
   TRUTH ENGINE HERO — the machine as the homepage centerpiece
   ============================================================ */
.engine-hero{
  background:radial-gradient(1100px 560px at 50% -10%,#180c0d 0%,#0b0708 42%,#050506 80%),#050506;
  color:#fff;padding:18px 0 30px;border-bottom:3px solid var(--red);position:relative}
.engine-hero .wrap{max-width:none;padding:0}
.engine-hero-head{text-align:center;max-width:760px;margin:0 auto 12px}
.engine-hero-head .eyebrow{display:inline-block;font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:5px 15px;border-radius:3px;
  font-weight:800;box-shadow:0 4px 18px rgba(194,0,0,.35);margin-bottom:16px}
.engine-hero-head h1{font-family:var(--display);font-size:clamp(40px,6vw,72px);line-height:1;
  margin:0 0 14px;color:#fff;letter-spacing:-.5px}
.engine-hero-head p{font-size:clamp(15px,2vw,19px);color:#e7e7ea;max-width:600px;margin:0 auto;line-height:1.5}
.engine-hero-head p strong{color:var(--red-bright)}
.engine-frame-wrap{width:100%;max-width:none;margin:0 auto;
  border-radius:0;overflow:hidden;border:0;
  box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 60px rgba(194,0,0,.10)}
.engine-frame{display:block;width:100%;height:1320px;border:0;background:#050506}
@media(min-width:980px){.engine-frame{height:1010px}} /* 2026-08-07: 3:2 DESK v4 machine needs less frame than the tall cell */
@media(max-width:720px){
  .engine-hero{padding:26px 0 30px}
  .engine-frame{height:920px} /* D03: was 1560 — huge blank gap when JS sizing failed */
  /* Reports submenu: CLOSED until "Reports" is tapped (no hover on touch) */
  .nav-item{display:block;width:100%;text-align:center}
  .dropdown-menu{position:static;min-width:0;
    background:transparent;border:0;box-shadow:none;padding:4px 0 2px;gap:6px;
    flex-wrap:wrap;flex-direction:row;justify-content:center}
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu{display:none}
  .has-dropdown.sub-open .dropdown-menu,
  .has-dropdown.sub-open:hover .dropdown-menu,
  .has-dropdown.sub-open:focus-within .dropdown-menu{display:flex}
  .dropdown-menu a{color:#fff;background:#C20000;font-size:11px;padding:9px 13px;
    border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.28)}
  .dropdown-menu a:hover{background:var(--red-bright);color:#fff}
}

/* ============================================================
   READABILITY PASS — Jul-31 (Lara: "bigger n brighter")
   Courier body copy up ~2px site-wide + a whisper of white glow
   to fatten the thin typewriter strokes on the dark background
   (same trick as the locked Evidence Readout fix).
   ONE block — all future size tuning happens right here.
   ============================================================ */
body{font-size:17px}
.section-head p{font-size:19px}
.step p,.gbu p,.faq .a{font-size:17px}
.foot-about,.site-footer a{font-size:16px}
.foot-bottom{font-size:15px}
.count,.disclaimer{font-size:15px}
.optin-fine{font-size:14px;opacity:.85}
.optin-msg{font-size:15px}
p,.faq .a,.foot-about,.foot-bottom,li{text-shadow:0 0 1px rgba(255,255,255,.45)}

/* Fix #2 (approved PATCH.md, queue #2): desktop keeps 2-col How-It-Works; phones collapse to 1 col */
@media(min-width:721px){ .steps-2col{grid-template-columns:repeat(2,1fr)} }
