/* ==========================================================================
   DESIGN SYSTEM
   Marketing Intelligence + Analytics + Growth platform
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* color */
  --ink:        #12141A;
  --ink-soft:   #1B1E26;
  --paper:      #EDEBE2;
  --paper-soft: #E4E1D5;
  --cream:      #F3F1E9;
  --pine:       #1F4B3F;
  --pine-bright:#2C6B58;
  --amber:      #C98A2C;
  --brick:      #8B3A2B;
  --line-dark:  rgba(243,241,233,0.14);
  --line-light: #D8D4C7;
  --ink-70:     rgba(18,20,26,0.70);
  --ink-50:     rgba(18,20,26,0.50);
  --cream-70:   rgba(243,241,233,0.70);
  --cream-50:   rgba(243,241,233,0.50);

  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.45rem + 0.7vw, 2.05rem);
  --step-3:  clamp(2.1rem, 1.85rem + 1.2vw, 2.9rem);
  --step-4:  clamp(2.7rem, 2.2rem + 2.3vw, 4.2rem);

  /* layout */
  --container: 1240px;
  --gutter: 24px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:500; line-height:1.1; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* section surfaces */
.surface-ink{   background:var(--ink);   color:var(--cream); }
.surface-paper{ background:var(--paper); color:var(--ink); }
.surface-paper .hairline{ border-color:var(--line-light); }
.surface-paper .label{ color:var(--ink-50); }
.surface-paper .metric-value{ color:var(--ink); }

section{ padding-block:96px; }
@media (max-width:780px){ section{ padding-block:64px; } }

.hairline{ border-top:1px solid var(--line-dark); }

/* --------------------------------------------------------------------------
   TYPE UTILITIES
   -------------------------------------------------------------------------- */
.label{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--cream-50);
  letter-spacing:0;
}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:var(--step-3); max-width:640px; }
.section-head .dek{
  font-size:var(--step-0);
  color:var(--cream-70);
  max-width:340px;
  font-family:var(--font-body);
}
.surface-paper .section-head .dek{ color:var(--ink-70); }

.measure{ max-width:62ch; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  font-family:var(--font-body);
  font-size:0.95rem;
  font-weight:500;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary{ background:var(--amber); color:var(--ink); }
.btn-primary:hover{ background:#DA9A3C; }
.btn-outline{ border-color:var(--line-dark); color:var(--cream); }
.btn-outline:hover{ border-color:var(--cream-50); }
.surface-paper .btn-outline{ border-color:var(--line-light); color:var(--ink); }
.surface-paper .btn-outline:hover{ border-color:var(--ink-50); }
.btn-ghost{ padding:13px 4px; color:var(--cream-70); border-bottom:1px solid var(--line-dark); border-radius:0; }
.btn-ghost:hover{ color:var(--cream); border-color:var(--cream-50); }
.btn-sm{ padding:9px 16px; font-size:0.85rem; }

/* --------------------------------------------------------------------------
   HEADER / MEGA MENU
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(18,20,26,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.header-inner{
  display:flex; align-items:center; gap:36px;
  height:72px;
}
.logo{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  color:var(--cream);
  margin-right:auto;
}
.logo em{ font-style:normal; color:var(--amber); }

.primary-nav{ display:flex; align-items:center; gap:4px; }
.primary-nav > li{ position:relative; list-style:none; }
.primary-nav a.nav-link, .primary-nav button.nav-link{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  color:var(--cream-70);
  font-family:var(--font-body); font-size:0.95rem;
  padding:12px 14px;
  transition:color .15s var(--ease);
}
.primary-nav .nav-link:hover, .primary-nav .nav-link[aria-expanded="true"]{ color:var(--cream); }
.primary-nav .caret{ width:8px; height:8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.7; }

.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:min(760px, 86vw);
  background:var(--ink-soft);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-md);
  padding:28px;
  display:none;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:28px;
  box-shadow:0 24px 48px rgba(0,0,0,0.35);
}
.primary-nav li:hover .mega,
.primary-nav li .mega.is-open{ display:grid; }
.mega-col .mega-heading{ font-family:var(--font-mono); font-size:0.72rem; color:var(--cream-50); margin-bottom:12px; display:block; }
.mega-col a{ display:block; padding:7px 0; color:var(--cream-70); font-size:0.92rem; border-bottom:1px solid transparent; }
.mega-col a:hover{ color:var(--cream); }
.mega-feature{ background:var(--ink); border:1px solid var(--line-dark); border-radius:var(--radius-sm); padding:18px; }
.mega-feature .label{ margin-bottom:8px; display:block; }
.mega-feature p{ font-size:0.88rem; color:var(--cream-70); margin-top:6px; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center;
  background:none; border:1px solid var(--line-dark); border-radius:var(--radius-sm);
  color:var(--cream-70); cursor:pointer;
}
.icon-btn:hover{ color:var(--cream); border-color:var(--cream-50); }

.nav-toggle{ display:none; background:none; border:1px solid var(--line-dark); border-radius:var(--radius-sm); color:var(--cream); width:40px; height:40px; }

@media (max-width: 980px){
  .primary-nav{
    display:none;
    position:fixed; inset:72px 0 0 0; z-index:99;
    background:var(--ink); overflow-y:auto;
    flex-direction:column; align-items:stretch;
    padding:8px var(--gutter) 32px;
  }
  .primary-nav.is-open{ display:flex; }
  .primary-nav > li{ border-bottom:1px solid var(--line-dark); }
  .primary-nav .nav-link{ width:100%; justify-content:space-between; padding:16px 4px; }
  .mega{
    position:static; transform:none; width:100%;
    grid-template-columns:1fr; display:none;
    box-shadow:none; border:none; border-top:1px solid var(--line-dark);
    border-radius:0; padding:8px 4px 20px;
  }
  .mega.is-open{ display:grid; }
  .mega-feature{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{ padding-top:88px; padding-bottom:88px; position:relative; overflow:hidden; }
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{
  font-size:var(--step-4);
  max-width:15ch;
}
.hero h1 .accent{ color:var(--amber); font-style:italic; }
.hero .dek{ font-size:var(--step-1); color:var(--cream-70); max-width:44ch; margin-top:24px; font-family:var(--font-body); }
.hero-cta-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

/* signal panel — the one recurring signature motif */
.signal-panel{
  border:1px solid var(--line-dark);
  border-radius:var(--radius-md);
  background:var(--ink-soft);
  overflow:hidden;
}
.signal-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line-dark);
}
.signal-dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); display:inline-block; margin-right:8px; animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

.signal-rows{ padding:6px 20px; }
.signal-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line-dark);
}
.signal-row:last-child{ border-bottom:none; }
.signal-row .k{ font-size:0.92rem; color:var(--cream-70); }
.signal-row .v{ font-family:var(--font-mono); font-size:1.05rem; }
.v.up{ color:var(--pine-bright); }
.v.down{ color:var(--brick); }
.v.flag{ color:var(--amber); }

.signal-interp{ padding:18px 20px; background:var(--ink); border-top:1px solid var(--line-dark); }
.signal-interp .label{ margin-bottom:8px; display:block; }
.signal-interp p{ font-size:0.92rem; color:var(--cream-70); line-height:1.6; }
.signal-interp strong{ color:var(--cream); font-weight:500; }

/* --------------------------------------------------------------------------
   METRIC STRIP
   -------------------------------------------------------------------------- */
.metric-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-dark); border-radius:var(--radius-md);
  overflow:hidden;
}
@media (max-width:780px){ .metric-strip{ grid-template-columns:repeat(2,1fr); } }
.metric{ padding:26px 24px; border-right:1px solid var(--line-dark); }
.metric:nth-child(4n){ border-right:none; }
@media (max-width:780px){ .metric:nth-child(2n){ border-right:none; } .metric{ border-bottom:1px solid var(--line-dark);} }
.metric .label{ margin-bottom:10px; display:block; }
.metric-value{ font-family:var(--font-mono); font-size:var(--step-2); color:var(--cream); }
.metric-delta{ font-family:var(--font-mono); font-size:0.85rem; margin-top:4px; }

/* --------------------------------------------------------------------------
   EVENT STREAM
   -------------------------------------------------------------------------- */
.event-stream{ border:1px solid var(--line-dark); border-radius:var(--radius-md); background:var(--ink-soft); }
.event-row{
  display:grid; grid-template-columns:110px 1fr auto;
  gap:20px; align-items:center;
  padding:15px 22px;
  border-bottom:1px solid var(--line-dark);
  font-size:0.9rem;
}
.event-row:last-child{ border-bottom:none; }
.event-time{ font-family:var(--font-mono); color:var(--cream-50); }
.event-name{ font-family:var(--font-mono); color:var(--cream); }
.event-tag{ font-size:0.78rem; color:var(--cream-50); }

/* --------------------------------------------------------------------------
   TWO-UP / ASYMMETRIC LAYOUT BLOCKS
   -------------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.split.reverse{ grid-template-columns:1.1fr 0.9fr; }
.split.reverse > *:first-child{ order:2; }
@media (max-width:900px){ .split, .split.reverse{ grid-template-columns:1fr; } .split.reverse > *:first-child{ order:0; } }

.checklist{ margin-top:28px; display:flex; flex-direction:column; gap:0; }
.checklist li{ list-style:none; padding:14px 0; border-bottom:1px solid var(--line-dark); display:flex; gap:14px; font-size:0.95rem; color:var(--cream-70); }
.checklist li span.idx{ font-family:var(--font-mono); color:var(--cream-50); flex-shrink:0; }

/* --------------------------------------------------------------------------
   CARD GRIDS — tools / insights / industries (deliberately varied, not uniform 3-up)
   -------------------------------------------------------------------------- */
.tool-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-dark); }
.tool-row{
  display:grid; grid-template-columns:2fr 3fr auto;
  gap:24px; align-items:center;
  padding:24px 4px;
  border-bottom:1px solid var(--line-dark);
  transition:background .15s var(--ease);
}
.tool-row:hover{ background:rgba(243,241,233,0.03); }
.surface-paper .tool-row:hover{ background:rgba(18,20,26,0.03); }
.tool-row h3{ font-size:1.15rem; font-weight:500; }
.tool-row p{ font-size:0.9rem; color:var(--cream-70); }
.surface-paper .tool-row p{ color:var(--ink-70); }
@media (max-width:780px){ .tool-row{ grid-template-columns:1fr; gap:8px; } }

.insight-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.insight-card{ background:var(--paper); padding:28px; display:flex; flex-direction:column; gap:14px; }
.insight-card.feature{ grid-row:span 2; }
.insight-card .kicker{ font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-50); }
.insight-card h3{ font-size:1.2rem; }
.insight-card.feature h3{ font-size:var(--step-2); }
.insight-card p{ font-size:0.9rem; color:var(--ink-70); }
@media (max-width:900px){ .insight-grid{ grid-template-columns:1fr; } .insight-card.feature{ grid-row:auto; } }

.industry-row{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line-dark); }
.industry-chip{
  padding:16px 26px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  font-size:0.95rem; color:var(--cream-70); flex:1; min-width:180px;
  transition:color .15s var(--ease), background .15s var(--ease);
}
.industry-chip:hover{ color:var(--cream); background:rgba(243,241,233,0.03); }

/* --------------------------------------------------------------------------
   BENCHMARK TABLE
   -------------------------------------------------------------------------- */
.bench-table{ width:100%; border-collapse:collapse; }
.bench-table th{ text-align:left; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-50); font-weight:400; padding:12px 16px; border-bottom:1px solid var(--line-light); }
.bench-table td{ padding:16px; border-bottom:1px solid var(--line-light); font-size:0.92rem; }
.bench-table td.num{ font-family:var(--font-mono); }
.bench-table tr:last-child td{ border-bottom:none; }
.cmp-check{ color:var(--pine-bright); font-weight:600; }
.cmp-x{ color:var(--ink-50); }
.surface-ink .cmp-x{ color:var(--cream-50); }
.cmp-dash{ color:var(--ink-50); }
.surface-ink .cmp-dash{ color:var(--cream-50); }
.cmp-text{ font-size:0.85rem; }

/* --------------------------------------------------------------------------
   NEWSLETTER / FINAL CTA
   -------------------------------------------------------------------------- */
.cta-band{ text-align:left; }
.cta-band h2{ font-size:var(--step-3); max-width:20ch; }
.inline-form{ display:flex; gap:0; margin-top:28px; max-width:460px; border:1px solid var(--line-dark); border-radius:var(--radius-sm); overflow:hidden; }
.inline-form input{ flex:1; background:transparent; border:none; padding:14px 16px; color:var(--cream); font-family:var(--font-body); font-size:0.95rem; }
.inline-form input::placeholder{ color:var(--cream-50); }
.inline-form input:focus{ outline:none; }
.inline-form button{ background:var(--amber); color:var(--ink); border:none; padding:14px 20px; font-weight:500; cursor:pointer; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line-dark); padding-block:64px 32px; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px; padding-bottom:56px; }
@media (max-width:900px){ .footer-top{ grid-template-columns:repeat(2,1fr); } }
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ color:var(--cream-50); font-size:0.88rem; max-width:34ch; }
.footer-col .mega-heading{ font-family:var(--font-mono); font-size:0.72rem; color:var(--cream-50); display:block; margin-bottom:14px; }
.footer-col a{ display:block; padding:6px 0; font-size:0.88rem; color:var(--cream-70); }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-dark); flex-wrap:wrap; gap:16px; }
.footer-bottom p{ font-size:0.82rem; color:var(--cream-50); }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ font-size:0.82rem; color:var(--cream-50); }
.footer-legal a:hover{ color:var(--cream-70); }

/* ==========================================================================
   AUTH SHELL — login / register / forgot-password / reset-password / verify
   ========================================================================== */
.auth-shell{ min-height:100vh; display:grid; place-items:center; padding:40px 20px; background:var(--ink); }
.auth-card{ width:100%; max-width:420px; border:1px solid var(--line-dark); border-radius:var(--radius-md); background:var(--ink-soft); padding:40px 36px; }
.auth-card .logo{ margin-bottom:20px; display:block; font-size:1.2rem; }
.auth-head{ margin-bottom:28px; }
.auth-head h1{ font-size:var(--step-2); }
.auth-head p{ color:var(--cream-70); font-size:0.92rem; margin-top:8px; font-family:var(--font-body); }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.85rem; color:var(--cream-70); margin-bottom:8px; }
.field input, .field select{
  width:100%; background:var(--ink); border:1px solid var(--line-dark); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--cream); font-family:var(--font-body); font-size:0.95rem;
  transition:border-color .15s var(--ease);
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--amber); }
.field-hint{ font-size:0.78rem; color:var(--cream-50); margin-top:6px; }
.field-error{ font-size:0.78rem; color:#E8998A; margin-top:6px; }
.field.has-error input{ border-color:var(--brick); }

.btn-block{ width:100%; justify-content:center; }
.auth-foot{ margin-top:24px; text-align:center; font-size:0.88rem; color:var(--cream-70); }
.auth-foot a{ color:var(--amber); }
.auth-back{ display:inline-block; margin-bottom:20px; font-size:0.85rem; color:var(--cream-50); }
.auth-back:hover{ color:var(--cream-70); }

.alert{ padding:13px 16px; border-radius:var(--radius-sm); font-size:0.88rem; margin-bottom:22px; border:1px solid; line-height:1.5; }
.alert-error{ background:rgba(139,58,43,0.14); border-color:var(--brick); color:#EFC0B5; }
.alert-success{ background:rgba(31,75,63,0.16); border-color:var(--pine-bright); color:#AEDBC9; }

.otp-inputs{ display:flex; gap:10px; justify-content:center; margin-bottom:18px; }
.otp-inputs input{ width:44px; height:54px; text-align:center; font-size:1.3rem; font-family:var(--font-mono); padding:0; }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:0.85rem; color:var(--cream-70); margin-bottom:24px; }
.checkbox-row input{ margin-top:3px; flex-shrink:0; }

/* ==========================================================================
   APPLICATION SHELL — /app
   ========================================================================== */
.app-shell{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; background:var(--ink); }
.app-sidebar{
  background:var(--ink-soft); border-right:1px solid var(--line-dark);
  padding:18px 12px 24px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar .logo{ padding:8px 8px 22px; font-size:1.05rem; display:block; }
.app-nav-group{ margin-bottom:22px; }
.app-nav-label{ font-family:var(--font-mono); font-size:0.68rem; color:var(--cream-50); padding:0 10px 8px; display:block; }
.app-nav-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--cream-70); font-size:0.89rem; transition:background .15s var(--ease), color .15s var(--ease);
}
.app-nav-link:hover{ background:rgba(243,241,233,0.05); color:var(--cream); }
.app-nav-link.active{ background:rgba(201,138,44,0.12); color:var(--amber); }
.app-nav-link .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; flex-shrink:0; }

.app-main{ display:flex; flex-direction:column; min-width:0; }
.app-topbar{
  height:64px; border-bottom:1px solid var(--line-dark); display:flex; align-items:center;
  justify-content:space-between; padding:0 28px; position:sticky; top:0; background:var(--ink); z-index:10;
}
.app-greeting{ font-family:var(--font-display); font-size:1.15rem; }
.app-topbar-actions{ display:flex; align-items:center; gap:10px; }
.app-content{ padding:32px 28px 64px; max-width:1180px; }

.kpi-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark); border-radius:var(--radius-md); overflow:hidden; margin-bottom:40px;
}
.kpi-card{ background:var(--ink-soft); padding:22px 24px; }
.kpi-card .label{ margin-bottom:10px; display:block; }
.kpi-value{ font-family:var(--font-mono); font-size:var(--step-2); }
.kpi-note{ font-size:0.8rem; color:var(--cream-50); margin-top:6px; }

.panel{ border:1px solid var(--line-dark); border-radius:var(--radius-md); background:var(--ink-soft); padding:24px; margin-bottom:28px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel-head h2{ font-size:1.05rem; font-family:var(--font-body); font-weight:500; }

.empty-state{ border:1px dashed var(--line-dark); border-radius:var(--radius-md); padding:48px 24px; text-align:center; color:var(--cream-70); }
.empty-state h3{ font-size:1.02rem; color:var(--cream); margin-bottom:8px; font-family:var(--font-body); font-weight:500; }
.empty-state p{ font-size:0.88rem; max-width:36ch; margin-inline:auto; }
.empty-state .btn{ margin-top:18px; }

.mobile-app-toggle{ display:none; }
.app-sidebar-overlay{ display:none; }

/* ==========================================================================
   CONTENT PAGES — about / blog / case-studies / terms / contact / privacy
   Shared by simple editorial pages that don't need the full hero-grid/split
   system above. Deliberately plain: a small hero, a body column, plain cards.
   ========================================================================== */
.eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--amber);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;
}
.surface-paper .eyebrow{ color:var(--brick); }
.lead{ font-size:var(--step-1); color:var(--cream-70); max-width:56ch; margin-top:16px; font-family:var(--font-body); }
.surface-paper .lead{ color:var(--ink-70); }

.text-center{ text-align:center; }

.section-dark{ background:var(--ink-soft); padding-block:72px; }
.section-dark h2{ color:var(--cream); }

.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
@media (max-width:900px){ .cards-grid{ grid-template-columns:1fr; } }
.card{ background:var(--ink); display:flex; flex-direction:column; transition:background .15s var(--ease); }
.card:hover{ background:var(--ink-soft); }
.card-img{ aspect-ratio:16/9; background:var(--ink-soft); overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding:22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-meta{ font-family:var(--font-mono); font-size:0.75rem; color:var(--cream-50); }
.card-body h3{ font-size:1.1rem; }
.card-body p{ font-size:0.9rem; color:var(--cream-70); }

/* Simple stacked forms — contact page */
.form-card{ max-width:560px; margin-inline:auto; border:1px solid var(--line-dark); border-radius:var(--radius-md); background:var(--ink-soft); padding:36px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:0.85rem; color:var(--cream-70); margin-bottom:8px; }
.form-control{
  width:100%; background:var(--ink); border:1px solid var(--line-dark); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--cream); font-family:var(--font-body); font-size:0.95rem;
  transition:border-color .15s var(--ease);
}
.form-control:focus{ outline:none; border-color:var(--amber); }
textarea.form-control{ resize:vertical; min-height:120px; }

@media (max-width:900px){
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{
    position:fixed; left:0; top:0; width:264px; transform:translateX(-100%);
    z-index:200; transition:transform .2s var(--ease);
  }
  .app-sidebar.is-open{ transform:translateX(0); }
  .app-sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:150;
  }
  .app-sidebar-overlay.is-open{ display:block; }
  .mobile-app-toggle{ display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-dark); border-radius:var(--radius-sm); background:none; color:var(--cream); }
  .kpi-grid{ grid-template-columns:1fr; }
  .app-content{ padding:24px 18px 48px; }
}