/* ═══════════════════════════════════════════════
   DESIGN SYSTEM — HIGH CONTRAST SAFETY PALETTE
   ═══════════════════════════════════════════════ */
:root {
  /* Core palette */
  --bg:        #F2F0EB;   /* warm paper, not pure white */
  --bg-alt:    #E8E5DF;   /* cold industrial grey, slightly darker */
  --surface:   #EDEAE4;   /* card surface */
  --surface-2: #E2DED7;   /* inset / deeper surface */
  --border:    #C8C3BA;   /* visible rule */
  --border-lt: #D8D4CC;   /* subtle rule */

  /* Typography */
  --ink:       #121212;   /* deep carbon */
  --ink-mid:   #3A3832;   /* secondary text */
  --ink-muted: #7A7468;   /* muted / captions */

  /* Accent — warm amber/olive for safety brand */
  --accent:        #FF5F1F;   /* safety orange — brand accent */
  --accent-light:  #FF8050;   /* medium amber */
  --accent-bg:     rgba(255,95,31,0.08);
  --accent-border: rgba(255,95,31,0.3);

  /* Semantic */
  --danger:  #B02A1A;
  --success: #2A6B42;
  --warn:    #8B5E14;

  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Paper grain texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ─── NAV ─────────────────────────────────────── */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: stretch;
  height: 56px;
  transition: box-shadow 0.3s;
}
#site-nav.shadowed { box-shadow: 0 4px 20px rgba(18,18,18,0.1); }

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
}
.nav-logo .dot { color: var(--accent); font-size: 1.6rem; line-height: 1; margin-left: 1px; }

.nav-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  border-right: 1px solid var(--border-lt);
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
  user-select: none;
  position: relative;
  top: 2px;
}
.nav-tab:hover { color: var(--ink); background: var(--bg-alt); }
.nav-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  background: var(--surface);
  font-weight: 600;
}

.nav-cta {
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin-left: auto;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

/* Mobile hamburger */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-left: 1px solid var(--border);
  cursor: pointer;
  font-size: 1.2rem;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: var(--ink);
}
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  z-index: 499;
  flex-direction: column;
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-item {
  padding: 16px 28px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 1px solid var(--border-lt);
  transition: color 0.2s, background 0.2s;
}
.nav-mobile-item:hover, .nav-mobile-item.active { color: var(--ink); background: var(--bg-alt); }

/* ─── BUTTONS ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  font-size: 0.72rem;
  padding: 12px 28px;
}
.btn-primary:hover { background: var(--ink-mid); box-shadow: 0 4px 16px rgba(18,18,18,0.18); transform: translateY(-1px); }
.btn-primary.sm { padding: 9px 20px; font-size: 0.65rem; }
.btn-primary.lg { padding: 16px 40px; font-size: 0.8rem; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-size: 0.72rem;
  padding: 11px 26px;
}
.btn-outline:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.btn-outline.sm { padding: 8px 18px; font-size: 0.65rem; }

.btn-accent {
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  padding: 12px 28px;
}
.btn-accent:hover { background: var(--accent-light); box-shadow: 0 4px 16px rgba(255,95,31,0.25); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.65rem;
  padding: 8px 0;
  border: none;
  font-weight: 400;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--ink); }

/* ─── PAGE WRAPPER ────────────────────────────── */
.page { display: none; animation: fadeUp 0.4s ease both; }
.page.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── SHARED COMPONENTS ───────────────────────── */
.label-tag {
  display: inline-block;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  padding: 4px 12px;
  border-radius: 1px;
  background: var(--accent-bg);
}

.section-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.section-eyebrow::before { content:''; width:20px; height:1px; background:var(--ink-muted); }

.rule { height:1px; background:var(--border); margin:0; }
.rule-heavy { height:2px; background:var(--ink); margin:0; }

.input-field {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.input-field::placeholder { color: var(--ink-muted); }
.input-field:focus { border-color: var(--accent); }
.input-field.error { border-color: var(--danger); }

/* ══════════════════════════════════════════════
   PAGE 1: HOME
   ══════════════════════════════════════════════ */
#page-home {}

.home-hero {
  padding: 80px 64px 72px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.home-hero::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  background: repeating-linear-gradient(
    -60deg,
    transparent,
    transparent 18px,
    rgba(18,18,18,0.025) 18px,
    rgba(18,18,18,0.025) 19px
  );
  pointer-events: none;
}
.hero-left {}
.hero-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before { content:''; width:28px; height:1.5px; background:var(--accent); }

.hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 28px;
}
.hero-h1 .line-accent {
  color: var(--accent);
  display: block;
}
.hero-sub {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-mid);
  max-width: 500px;
  margin-bottom: 44px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}
.hero-stat {
  text-align: right;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-lt);
  width: 140px;
}
.hero-stat:last-child { border-bottom: none; }
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.stat-num span { color: var(--accent); font-size: 2rem; }
.stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* MARQUEE */
.marquee-strip {
  background: var(--ink);
  overflow: hidden;
  padding: 11px 0;
}
.marquee-inner {
  display: flex;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
}
.marquee-item {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: var(--bg-alt);
  padding: 0 28px;
}
.marquee-item .dot { color: var(--accent-light); margin-right: 28px; }

/* WHY GRID */
.home-why {
  padding: 80px 64px;
  border-bottom: 1px solid var(--border);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 52px;
  border: 1px solid var(--border);
  background: var(--border);
}
.why-card {
  background: var(--surface);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: background 0.25s;
}
.why-card:hover { background: var(--bg); }
.wc-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 6rem;
  color: var(--border);
  line-height: 1;
  position: absolute;
  top: 8px;
  right: 20px;
  letter-spacing: 0.03em;
  transition: color 0.25s;
  pointer-events: none;
  z-index: 0;
}
.why-card:hover .wc-num { color: rgba(255,95,31,0.12); }
.wc-icon { font-size: 1.8rem; margin-bottom: 16px; position: relative; z-index: 1; }
.wc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
  position: relative;
  z-index: 1;
  padding-right: 48px;
}
.wc-body { font-size: 0.83rem; color: var(--ink-mid); line-height: 1.65; position: relative; z-index: 1; }

/* TIERS */
.home-tiers {
  padding: 80px 64px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

/* CTA BANNER */
.home-cta {
  padding: 100px 64px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.home-cta h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: 0.03em;
  line-height: 0.92;
  margin-bottom: 20px;
}
.home-cta p { font-size: 0.92rem; color: var(--ink-mid); margin-bottom: 44px; }

/* ══════════════════════════════════════════════
   PAGE 2: CALCULATOR
   ══════════════════════════════════════════════ */
#page-calc {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 100px;
}

/* Progress bar under nav */
.calc-progress-rail {
  position: sticky;
  top: 58px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border);
  z-index: 400;
  margin: 0 -24px;
}
.calc-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
}

.calc-header { padding: 16px 0 20px; }
.calc-tier-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-tier-label::before { content:'◆'; font-size: 0.5rem; }
.calc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.calc-meta-txt { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-muted); }
.calc-meta-txt b { color: var(--ink); }

/* Step dots */
.step-dots { display: flex; gap: 4px; }
.sdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.3s;
}
.sdot.done { background: var(--ink-muted); }
.sdot.cur { background: var(--accent); }

/* Inline question progress bar */
.q-progress-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.q-progress-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.q-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}
.q-progress-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.q-progress-label span { color: var(--ink); }

/* SCREEN: Email/tier intro */
.screen { display: none; animation: fadeUp 0.4s ease both; }
.screen.active { display: block; }

.calc-intro { padding-top: 8px; }
.calc-intro h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}
.calc-intro h1 em { color: var(--accent); font-style: normal; display: block; }
.calc-intro p {
  font-size: 0.92rem;
  color: var(--ink-mid);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 44px;
}

.email-row { display: flex; gap: 12px; max-width: 480px; }
.privacy { font-size: 0.62rem; color: var(--ink-muted); margin-top: 10px; }

/* QUESTION */
.q-cat-band {
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.q-cat-band::after { content:''; flex:1; height:1px; background:var(--border); }

/* q-counter hidden — progress bar above already shows position */
.q-counter { display: none; }

.q-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2.8vw, 1.55rem);
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 20px;
}

.opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.opt-row {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.opt-row::before {
  content:'';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s;
}
.opt-row:hover { border-color: var(--ink-muted); transform: translateX(3px); background: var(--bg); }
.opt-row:hover::before { transform: scaleY(0.5); }
.opt-row.sel { border-color: var(--ink); background: var(--bg); transform: translateX(3px); }
.opt-row.sel::before { transform: scaleY(1); }

.opt-key {
  width: 26px; height: 26px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.opt-row.sel .opt-key { border-color: var(--accent); background: var(--accent); color: #fff; }

.opt-txt { font-size: 0.88rem; line-height: 1.42; color: var(--ink-mid); flex: 1; }
.opt-row.sel .opt-txt { color: var(--ink); }

/* opt-score dots removed — they revealed correct answer to users */
.opt-score { display: none; }

.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* RESULTS */
.results-hero { padding: 40px 0 56px; text-align: center; }
.score-ring-wrap { width: 180px; height: 180px; margin: 0 auto 24px; position: relative; }
.score-ring-wrap svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 10; }
.ring-fill { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 502; stroke-dashoffset: 502; transition: stroke-dashoffset 1.8s cubic-bezier(0.4,0,0.2,1); }
.score-center { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align: center; }
.sc-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; line-height: 1; letter-spacing: 0.03em; }
.sc-denom { font-size: 0.62rem; color: var(--ink-muted); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 2px; }
.score-tier { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: 0.12em; margin-bottom: 10px; }
.score-desc { font-size: 0.88rem; color: var(--ink-mid); max-width: 460px; margin: 0 auto; line-height: 1.65; }

.breakdown-section { margin-bottom: 48px; }
.sec-head {
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.sec-head > span:first-child {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.25;
}
.sec-head > span:nth-child(2) {
  font-size: 0.85rem !important;
  font-weight: 400;
  letter-spacing: 0 !important;
  text-transform: none;
  color: var(--ink-muted) !important;
  line-height: 1.45;
}
.domain-row {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.dr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dr-name { font-size: 0.8rem; font-weight: 500; }
.dr-score { font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 0.05em; }
.dr-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.dr-fill { height: 100%; transition: width 1.3s 0.3s ease; width: 0%; }

.refs-section { margin-bottom: 48px; }
.ref-item {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.ref-q { font-size: 0.8rem; font-weight: 500; margin-bottom: 4px; }
.ref-ans { font-size: 0.72rem; color: var(--danger); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.ref-ans::before { content:'↓'; }
.ref-ch { font-size: 0.7rem; color: var(--accent); font-weight: 600; }

.results-cta { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding-top:8px; }

/* ══════════════════════════════════════════════
   PAGE 3: CABINET
   ══════════════════════════════════════════════ */
#page-cabinet {
  max-width: 920px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}
.cab-header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cab-header h1 { font-family:'Bebas Neue',sans-serif;font-size:3.5rem;letter-spacing:0.04em;line-height:1; }
.cab-header p { font-size:0.82rem;color:var(--ink-muted);margin-top:6px; }

.empty-state {
  text-align:center; padding:80px 24px;
  border: 1.5px dashed var(--border);
  border-radius: 3px;
}
.empty-icon { font-size:3rem;margin-bottom:20px; }
.empty-state h2 { font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:10px; }
.empty-state p { font-size:0.83rem;color:var(--ink-muted);margin-bottom:28px;max-width:380px;margin-left:auto;margin-right:auto;line-height:1.6; }

.dash-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--border);background:var(--border);margin-bottom:32px; }
.ds-cell { background:var(--surface);padding:20px; }
.ds-val { font-family:'Bebas Neue',sans-serif;font-size:2.2rem;line-height:1;letter-spacing:0.03em;margin-bottom:4px; }
.ds-lbl { font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-muted); }

.cab-score-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:28px;
}
.csc-head {
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.csc-title { font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:0.08em; }
.csc-date { font-size:0.65rem;color:var(--ink-muted);letter-spacing:0.1em; }
.csc-body { padding:24px; }
.csc-summary { display:flex;align-items:center;gap:28px;margin-bottom:28px;flex-wrap:wrap; }
.csc-big { font-family:'Bebas Neue',sans-serif;font-size:5rem;line-height:1;letter-spacing:0.03em; }
.csc-denom { font-size:0.65rem;color:var(--ink-muted);letter-spacing:0.15em;text-transform:uppercase;margin-top:4px; }
.csc-tier h3 { font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:0.1em;margin-bottom:5px; }
.csc-tier p { font-size:0.8rem;color:var(--ink-mid);line-height:1.55;max-width:340px; }

.cab-domain-row {
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--border-lt);
}
.cab-domain-row:last-child{border-bottom:none;}
.cdn-name { font-size:0.78rem;color:var(--ink);min-width:160px; }
.cdn-rail { flex:1;height:3px;background:var(--border);border-radius:2px; }
.cdn-fill { height:100%;border-radius:2px;transition:width 1.1s ease;width:0%; }
.cdn-pct { font-family:'Bebas Neue',sans-serif;font-size:0.88rem;min-width:36px;text-align:right; }

.checklist-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:3px;
  padding:24px;
  margin-bottom:28px;
}
.cl-title { font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:0.08em;margin-bottom:18px; }
.cl-item {
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border-lt);
  cursor:pointer;
}
.cl-item:last-child{border-bottom:none;}
.cl-box {
  width:18px;height:18px;
  border:1.5px solid var(--border);
  border-radius:2px;
  flex-shrink:0; margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,border-color 0.2s;
}
.cl-item.checked .cl-box { background:var(--ink);border-color:var(--ink);color:var(--bg);font-size:0.65rem; }
.cl-item.checked .cl-text { color:var(--ink-muted);text-decoration:line-through; }
.cl-text { font-size:0.81rem;line-height:1.4;color:var(--ink-mid); }
.cl-ch { font-size:0.63rem;color:var(--accent);font-weight:600;margin-top:2px; }

/* ══════════════════════════════════════════════
   PAGE 4: INTEL HUB
   ══════════════════════════════════════════════ */
#page-intel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}
.intel-header {
  margin-bottom: 52px;
  padding-bottom: 32px;
  border-bottom: 1.5px solid var(--ink);
}
.intel-header h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,7vw,5.5rem);
  letter-spacing:0.03em;
  line-height:0.92;
  margin-bottom:14px;
}
.intel-header h1 span { color:var(--accent); }
.intel-header p { font-size:0.9rem;color:var(--ink-mid);max-width:540px;line-height:1.65; }

.search-bar { display:flex;gap:10px;margin-bottom:24px; }
.filter-bar { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:44px; }
.f-btn {
  font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-muted);border:1.5px solid var(--border);background:transparent;
  padding:7px 16px;border-radius:1px;cursor:pointer;
  transition:color 0.2s,border-color 0.2s,background 0.2s;
  font-family:'DM Sans',sans-serif;
}
.f-btn:hover { color:var(--ink);border-color:var(--ink-muted); }
.f-btn.active { color:var(--ink);border-color:var(--ink);background:var(--ink);color:var(--bg); }

/* Featured */
.featured-grid { display:grid;grid-template-columns:2fr 1fr;gap:1px;border:1px solid var(--border);background:var(--border);margin-bottom:44px; }
.feat-card {
  background:var(--surface);
  cursor:pointer;
  transition:background 0.2s;
  position:relative;
}
.feat-card:hover { background:var(--bg); }
.feat-visual {
  height:180px;
  background:var(--bg-alt);
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.feat-visual::before {
  content:'';position:absolute;inset:0;
  background: repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(18,18,18,0.03) 14px,rgba(18,18,18,0.03) 15px);
}
.feat-body { padding:24px; }
.feat-cat { font-size:0.55rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:8px; }
.feat-title { font-family:'Playfair Display',serif;font-size:1.1rem;line-height:1.3;margin-bottom:8px; }
.feat-expt { font-size:0.78rem;color:var(--ink-muted);line-height:1.55;margin-bottom:14px; }
.feat-meta { font-size:0.62rem;color:var(--ink-muted); }
.feat-side { display:flex;flex-direction:column; }
.feat-side-card {
  background:var(--surface);
  cursor:pointer;
  padding:20px;
  border-bottom:1px solid var(--border);
  flex:1;
  transition:background 0.2s;
}
.feat-side-card:hover { background:var(--bg); }
.feat-side-card:last-child { border-bottom:none; }

/* Article grid */
.intel-sec-head {
  font-size:0.58rem;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--ink-muted);padding-bottom:12px;
  border-bottom:1.5px solid var(--ink);margin-bottom:22px;
}
.articles-grid { display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--border);background:var(--border);margin-bottom:52px; }
.art-card {
  background:var(--surface);
  padding:22px;
  cursor:pointer;
  transition:background 0.2s;
}
.art-card:hover { background:var(--bg); }
.art-card.hidden { display:none; }
.art-cat { font-size:0.55rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:8px; }
.art-title { font-family:'Playfair Display',serif;font-size:0.95rem;line-height:1.35;margin-bottom:8px; }
.art-expt { font-size:0.74rem;color:var(--ink-muted);line-height:1.55;margin-bottom:14px; }
.art-foot { display:flex;justify-content:space-between;align-items:center;font-size:0.62rem; }
.art-ch { color:var(--accent);font-weight:700;letter-spacing:0.05em; }
.art-time { color:var(--ink-muted); }

/* Newsletter */
.nl-banner {
  background:var(--ink);
  border-radius:3px;
  padding:44px 40px;
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
}
.nl-text { flex:1;min-width:220px; }
.nl-text h3 { font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.08em;color:var(--bg);margin-bottom:6px; }
.nl-text p { font-size:0.8rem;color:rgba(242,240,235,0.55);line-height:1.55; }
.nl-form { display:flex;gap:10px;flex:1;min-width:260px; }
.nl-input {
  flex:1;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  border-radius:2px;padding:12px 16px;
  color:#fff;font-family:'DM Sans',sans-serif;font-size:0.85rem;outline:none;
  transition:border-color 0.2s;
}
.nl-input::placeholder { color:rgba(255,255,255,0.35); }
.nl-input:focus { border-color:var(--accent-light); }

/* MODAL */
.modal-bg {
  display:none;position:fixed;inset:0;
  background:rgba(18,18,18,0.7);
  z-index:800;align-items:center;justify-content:center;padding:24px;
}
.modal-bg.open { display:flex; }
.modal-box {
  background:var(--bg);
  border:1.5px solid var(--ink);
  border-radius:3px;
  max-width:680px;width:100%;
  max-height:84vh;overflow-y:auto;
  animation:fadeUp 0.3s ease both;
}
.modal-head {
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  padding:18px 26px;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;
}
.modal-cat-lbl { font-size:0.55rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);font-weight:600; }
.modal-close { background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--ink-muted);transition:color 0.2s; }
.modal-close:hover { color:var(--ink); }
.modal-body { padding:32px; }
.modal-title { font-family:'Playfair Display',serif;font-size:1.6rem;line-height:1.25;margin-bottom:24px; }
.modal-content { font-size:0.875rem;color:var(--ink-mid);line-height:1.75; }
.modal-content p { margin-bottom:16px; }
.modal-content strong { color:var(--ink); }
.modal-content h4 { font-family:'Playfair Display',serif;font-size:1rem;color:var(--ink);margin:24px 0 10px; }

/* ─── FOOTER ──────────────────────────────────── */
#site-footer {
  background: var(--ink);
  padding: 44px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-logo { font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:0.1em;color:var(--bg); }
.footer-logo .dot { color:var(--accent-light); font-size:1.5rem; line-height:1; }
.footer-tag { font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(242,240,235,0.4);margin-top:4px; }
.footer-nav { display:flex;gap:24px;flex-wrap:wrap; }
.f-link {
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(242,240,235,0.4);cursor:pointer;
  transition:color 0.2s;
  background:none;border:none;font-family:'DM Sans',sans-serif;
}
.f-link:hover { color:var(--bg); }
.footer-legal { font-size:0.62rem;color:rgba(242,240,235,0.3);letter-spacing:0.08em; }

/* ─── RESPONSIVE ──────────────────────────────── */
@media(max-width:900px) {
  .home-hero { padding:60px 24px 56px;grid-template-columns:1fr; }
  .hero-right { display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:0;border-top:1px solid var(--border);padding-top:28px;margin-top:0; }
  .hero-stat { width:50%;text-align:left;border-right:1px solid var(--border-lt); }
  .hero-stat:nth-child(2n) { border-right:none;padding-left:20px; }
  .why-grid { grid-template-columns:1fr; }
  .home-why, .home-tiers, .home-cta { padding:60px 24px; }
  .featured-grid { grid-template-columns:1fr; }
  .articles-grid .art-card { width: 50%; }
  #site-footer { padding:36px 24px; flex-direction:column;align-items:flex-start; }
}
@media(max-width:600px) {
  /* Tabs always visible — compress them on small screens */
  .nav-logo { padding:0 14px; font-size:0.58rem; }
  .nav-tab  { padding:0 12px; font-size:0.6rem; letter-spacing:0.12em; }
  .nav-cta  { display:none; }
  .nav-burger { display:none; }
  .calc-intro h1 { font-size:3.5rem; }
  .email-row { flex-direction:column; }
  .q-nav { flex-direction:column-reverse; }
  .q-nav .btn-ghost, .q-nav .btn-primary { width:100%;justify-content:center;text-align:center; }
  .dash-stats { grid-template-columns:1fr 1fr; }
  .articles-grid .art-card { grid-template-columns:1fr; }
  .nl-banner { flex-direction:column; }
  .nl-form { flex-direction:column; }
}

/* ══════════════════════════════════════════════
   AUTH — Cabinet login / register
   ══════════════════════════════════════════════ */

.auth-card {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 44px 48px;
  max-width: 520px;
  margin: 0 auto 48px;
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.auth-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  color: var(--ink);
}
.auth-subtext {
  font-size: 0.83rem;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 400px;
}
.auth-error {
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 10px;
  padding: 9px 14px;
  background: rgba(176,42,26,0.06);
  border-radius: var(--radius);
  border-left: 2px solid var(--danger);
  line-height: 1.5;
}
.auth-success {
  font-size: 0.78rem;
  color: var(--success);
  margin-top: 10px;
  padding: 11px 16px;
  background: rgba(42,107,66,0.07);
  border-radius: var(--radius);
  border-left: 2px solid var(--success);
  line-height: 1.55;
  margin-bottom: 14px;
}
.auth-skip {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-lt);
  margin-top: 24px;
}

/* USER BAR — shown when signed in */
.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}
.user-bar-email {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
}
.user-bar-badge {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--success);
  font-weight: 600;
  margin-top: 2px;
}

@media(max-width:600px) {
  .auth-card { padding: 32px 24px; }
}

/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════
   PRIORITY READING PLAN — results screen
   ══════════════════════════════════════════════ */

.ref-item {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ref-item.ref-critical { border-left: 3px solid var(--danger); }
.ref-item.ref-recommended { border-left: 3px solid var(--accent); }
.ref-domain {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex-shrink: 0;
  min-width: 140px;
}
.ref-ch { font-size: 0.82rem; font-weight: 500; color: var(--ink); flex: 1; }
.ref-badge {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ref-critical   .ref-badge { background: rgba(176,42,26,0.08); color: var(--danger); }
.ref-recommended .ref-badge { background: var(--accent-bg); color: var(--accent); }

@media(max-width:900px) {
  .yt-grid       { grid-template-columns: 1fr 1fr; }
  .home-youtube  { padding: 60px 24px; }
}
@media(max-width:600px) {
  .yt-grid { grid-template-columns: 1fr; }
  .ref-item { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ══════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════ */

.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }
.lang-chevron { font-size: 0.6rem; opacity: 0.6; }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(18,18,18,0.12);
  z-index: 600;
  min-width: 150px;
  overflow: hidden;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-mid);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  border-bottom: 1px solid var(--border-lt);
}
.lang-option:last-child { border-bottom: none; }
.lang-option:hover { background: var(--bg-alt); color: var(--ink); }
.lang-option.active { color: var(--accent); font-weight: 600; }
.lang-option.active::after {
  content: '✓';
  margin-left: auto;
  font-size: 0.7rem;
}

@media(max-width:600px) {
  .lang-switcher { padding: 0 10px; }
  .lang-toggle   { padding: 4px 7px; font-size: 0.62rem; }
}

/* ══════════════════════════════════════════════
   LIBRARY PAGE
   ══════════════════════════════════════════════ */

.lib-header {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}
.lib-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.lib-header p {
  font-size: 0.88rem;
  color: var(--ink-mid);
  max-width: 540px;
  line-height: 1.65;
}

.lib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lib-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s;
}
.lib-item:hover { border-color: var(--ink-muted); }

.lib-featured {
  border-color: var(--accent-border);
  background: var(--accent-bg);
}
.lib-featured:hover { border-color: var(--accent); }

.lib-item-body {
  padding: 24px 24px 20px;
  flex: 1;
}

.lib-item-tag {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.lib-coming-soon .lib-item-tag { color: var(--ink-muted); }

.lib-item-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 10px;
}

.lib-item-desc {
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 16px;
}

.lib-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lib-meta-pill {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.lib-featured .lib-meta-pill {
  background: rgba(255,95,31,0.06);
  border-color: var(--accent-border);
  color: var(--accent);
}

.lib-item-action {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-lt);
}
.lib-featured .lib-item-action { border-top-color: var(--accent-border); }

.lib-lock-btn,
.lib-download-btn {
  width: 100%;
  justify-content: center;
}

.lib-soon-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 2px;
}

.lib-coming-soon { opacity: 0.65; }

@media(max-width: 640px) {
  .lib-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   CHECKLIST PROGRESS BAR
   ══════════════════════════════════════════════ */

.cl-progress {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.cl-progress-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.cl-progress-label {
  position: absolute;
  top: 8px;
  right: 0;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 500;
}
.cl-item.checked .cl-text { color: var(--ink-muted); text-decoration: line-through; }
.cl-ch { cursor: default; }
.cl-linked .cl-ch {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cl-linked .cl-ch:hover { opacity: 0.75; }

/* ══════════════════════════════════════════════
   CABINET — SOFT AUTH SYNC BANNER
   ══════════════════════════════════════════════ */

.auth-card--soft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.auth-card--soft .auth-heading {
  font-size: 0.82rem;
  font-family: inherit;
  font-weight: 600;
  margin: 0;
}
.auth-card--soft .auth-subtext { display: none; }
.auth-card--soft .auth-skip    { display: none; }
.auth-card--soft .label-tag    { display: none; }
.auth-card--soft .auth-success { margin: 0; font-size: 0.75rem; }
.auth-card--soft #btn-send-magic-link {
  width: auto;
  padding: 8px 18px;
  font-size: 0.75rem;
}
.auth-card--soft input.input-field {
  max-width: 240px;
  padding: 8px 12px;
  font-size: 0.78rem;
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════
   INTEL HUB — PERSONALISED PRIORITY ARTICLES
   ══════════════════════════════════════════════ */

.intel-personal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-bottom: 24px;
}
.intel-personal-banner strong { color: var(--ink); }

.art-card--priority {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  order: -1; /* float priority cards to top */
}
.art-card--priority:hover { border-color: var(--accent); }
.art-priority-tag {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
/* art-card responsive widths handled in base rule and media queries above */
.art-card {
  width: calc(33.333% - 1px);
  box-sizing: border-box;
}
@media(max-width:900px) { .art-card { width: calc(50% - 1px); } }
@media(max-width:600px) { .art-card { width: 100%; } }

/* ══════════════════════════════════════════════
   MODAL — NEXT ARTICLE LINK
   ══════════════════════════════════════════════ */

.modal-next {
  margin-top: 24px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.modal-next:hover { border-color: var(--accent); background: var(--accent-bg); }
.modal-next-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.modal-next-title {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════
   RESULTS — SHARE SCORE BUTTON ALIGNMENT
   ══════════════════════════════════════════════ */

.results-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 8px;
}

a.art-card, a.feat-card, a.feat-side-card { text-decoration:none; color:inherit; display:block; }

/* Results value-first email capture */
.results-save{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--radius);padding:22px 20px;margin-bottom:18px}
.results-save .rs-title{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:1.15rem;margin-bottom:6px}
.results-save .rs-sub{font-size:.85rem;color:var(--ink-mid);margin-bottom:14px;line-height:1.5}
.calc-start-row{display:flex;justify-content:center;margin:8px 0 4px}


/* ─── D1 — Concerns picker ────────────────────────────────────────── */
.concerns { padding: 56px 24px; background: var(--bg-alt); }
.concerns-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.concerns-h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: .04em; margin: 6px 0 8px; color: var(--ink); }
.concerns-sub { color: var(--ink-mid); margin: 0 auto 28px; max-width: 640px; }
.concerns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.concerns-card { text-align: left; padding: 18px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font: inherit; color: inherit; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.concerns-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.concerns-card-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.1rem; margin-bottom: 6px; color: var(--ink); }
.concerns-card-body { font-size: .86rem; color: var(--ink-mid); line-height: 1.5; }

/* ─── D1 — Ungated quick-start band ───────────────────────────────── */
.quickstart { padding: 38px 24px; background: var(--bg); border-top: 1px solid var(--border-lt); border-bottom: 1px solid var(--border-lt); }
.quickstart-inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quickstart-h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.2rem; margin: 0; color: var(--ink); }
.quickstart-body { color: var(--ink-mid); margin: 0 0 8px; font-size: .92rem; }
@media (max-width: 600px) { .quickstart-inner { padding: 0 8px; } }


/* ─── D3 — Gap map + Build-my-kit CTA on results ─────────────────── */
#gapMap { margin-top: 24px; }
.gap-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--bg); }
.gap-row.gap-weak { border-left: 3px solid var(--accent); }
.gap-row.gap-ok   { opacity: .9; }
.gap-row-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 8px; gap: 10px; }
.gap-domain { font-family:'Bebas Neue',sans-serif; letter-spacing:.04em; font-size:.95rem; color: var(--ink); }
.gap-pct { font-family:'Bebas Neue',sans-serif; letter-spacing:.04em; font-size:1rem; color: var(--accent); }
.gap-links { display:flex; flex-direction:column; gap:4px; }
.gap-link { font-size: .86rem; color: var(--ink-mid); text-decoration: none; padding: 2px 0; }
.gap-link:hover { color: var(--accent); text-decoration: underline; }

.kit-cta-band { margin-top: 28px; padding: 22px 18px; background: var(--accent-bg, #fff5ee); border: 1px solid var(--accent-border, rgba(255,95,31,0.25)); border-radius: var(--radius); text-align: center; }
.kit-cta-title { font-family:'Bebas Neue',sans-serif; letter-spacing:.04em; font-size:1.15rem; color: var(--ink); margin-bottom: 6px; }
.kit-cta-body { color: var(--ink-mid); margin: 0 0 14px; font-size: .92rem; }


/* ─── S5 — Kit Constructor (#page-kit-builder) ────────────────────── */
.kb-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 24px 80px; }
.kb-header { text-align: center; margin-bottom: 36px; }
.kb-h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: .04em; margin: 0 0 12px; color: var(--ink); }
.kb-empathy { color: var(--ink-mid); max-width: 680px; margin: 0 auto; line-height: 1.6; font-size: 1rem; }
.kb-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .kb-grid { grid-template-columns: 1fr; } .kb-intake { position: static !important; } }
.kb-section-head { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: 1.1rem; margin: 0 0 18px; color: var(--ink); }
.kb-intake { padding: 20px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); position: sticky; top: 80px; }
.kb-field { margin-bottom: 14px; }
.kb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-field label { display: block; font-size: .8rem; color: var(--ink-mid); margin-bottom: 4px; font-weight: 500; }
.kb-field input, .kb-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); font: inherit; color: var(--ink); box-sizing: border-box; }
.kb-field input:focus, .kb-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.kb-conditions { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; max-height: 200px; overflow-y: auto; }
.kb-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink); cursor: pointer; padding: 2px 0; }
.kb-check input { width: auto; }
.kb-priority-card { background: var(--accent-bg, rgba(255,95,31,.07)); border: 1px solid var(--accent-border, rgba(255,95,31,.25)); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.kb-priority-tag { font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: .72rem; color: var(--accent); margin-bottom: 6px; }
.kb-priority-name { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }
.kb-priority-rationale { color: var(--ink-mid); font-size: .92rem; line-height: 1.6; margin: 0; }
.kb-totals { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; font-size: .85rem; color: var(--ink-mid); }
.kb-totals strong { color: var(--ink); font-family: 'Bebas Neue', sans-serif; letter-spacing: .03em; }
.kb-cat-group { margin-bottom: 36px; }
.kb-cat-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  margin: 0 0 14px;
}
.kb-cat-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.kb-cat-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.kb-item {
  padding: 14px 0 14px 12px;
  border-bottom: 1px solid var(--border-lt);
  border-left: 3px solid transparent;
  margin-left: -12px;
  padding-left: 15px;
}
.kb-item:last-child { border-bottom: none; }
.kb-tier-critical { border-left-color: var(--accent); }
.kb-tier-important { border-left-color: #FFB74D; }
.kb-tier-nice-to-have { border-left-color: var(--border); }
.kb-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.kb-item-name { font-weight: 600; color: var(--ink); font-size: .95rem; }
.kb-item-q { font-family: 'Bebas Neue', sans-serif; letter-spacing: .03em; color: var(--accent); font-size: .9rem; white-space: nowrap; }
.kb-tier-badge {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.kb-tier-critical .kb-tier-badge { background: var(--accent); color: #fff; }
.kb-tier-important .kb-tier-badge { background: #FFB74D; color: #4a2d00; }
.kb-tier-nice-to-have .kb-tier-badge { background: var(--border); color: var(--ink-muted); }
.kb-item-rat { font-size: .82rem; color: var(--ink-mid); line-height: 1.5; }
.kb-item-legal { font-size: .76rem; color: var(--ink-mid); margin-top: 4px; padding: 4px 8px; background: rgba(0,0,0,.04); border-radius: 3px; display: inline-block; }
.kb-methodology-link { font-size: .86rem; color: var(--ink-muted); margin-top: 16px; }
.kb-save { margin-top: 40px; padding: 24px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.kb-save-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: .05em; font-size: 1.2rem; margin: 0 0 6px; color: var(--ink); }
.kb-save-sub { color: var(--ink-mid); font-size: .9rem; margin: 0 0 16px; }
.kb-test-cta { margin-top: 24px; padding: 18px 22px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.kb-test-cta h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.1rem; margin: 0 0 6px; color: var(--ink); }
.kb-test-cta p { color: var(--ink-mid); margin: 0 0 12px; font-size: .9rem; }
.kb-survey { margin-top: 28px; padding: 18px; text-align: center; background: var(--bg-alt); border: 1px solid var(--border-lt); border-radius: var(--radius); }
.kb-survey-q { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1rem; margin: 0 0 12px; color: var(--ink); }
.kb-survey-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kb-survey-buttons .selected { background: var(--accent); color: #fff; }
.kb-survey-thanks { color: var(--ink-mid); margin-top: 12px; font-size: .88rem; }
.kb-legal-reminder { margin-top: 24px; font-size: .76rem; color: var(--ink-muted); text-align: center; font-style: italic; }


/* S8 — highlight kit items from a deep-linked Intel article */
.kb-item-highlight { background: rgba(255,95,31,0.06); padding-left: 8px; border-left: 3px solid var(--accent); }
.kb-article-banner { padding: 10px 14px; margin-bottom: 14px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); font-size: .88rem; color: var(--ink-mid); }
.kb-article-banner a { color: var(--accent); margin-left: 8px; }


/* ───────────────────────────────────────────────────────────────────
   Kit Constructor — guided wizard (S5 patch)
   ─────────────────────────────────────────────────────────────────── */
#kit-wizard { max-width: 1200px; margin: 0 auto; padding: 40px 24px 100px; }
.kw-shell { background: var(--bg); border-radius: var(--radius); }
.kw-progress-wrap { margin-bottom: 28px; }
.kw-progress-track { height: 4px; background: var(--border-lt); border-radius: 2px; overflow: hidden; }
.kw-progress-fill { height: 100%; background: var(--accent); width: 16.66%; transition: width .4s cubic-bezier(.22,.61,.36,1); }
.kw-progress-label { font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: .76rem; color: var(--ink-muted); margin-top: 8px; }

.kw-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .kw-grid { grid-template-columns: 1fr; gap: 18px; } }

.kw-step-area { position: relative; min-height: 380px; }
.kw-step { padding: 8px 0; animation: kwFade .25s ease both; }
.kw-step[hidden] { display: none; }
@keyframes kwFade { from { opacity:0; transform: translateX(8px); } to { opacity:1; transform: translateX(0); } }

.kw-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: .04em; margin: 0 0 8px; color: var(--ink); }
.kw-sub { color: var(--ink-mid); font-size: .98rem; margin: 0 0 18px; line-height: 1.55; }
.kw-empathy { color: var(--ink-mid); font-size: .9rem; margin: 0 0 24px; padding: 12px 16px; background: var(--bg-alt); border-left: 3px solid var(--accent); border-radius: 4px; line-height: 1.6; }

.kw-q { margin-bottom: 18px; position: relative; }
.kw-q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .kw-q-row { grid-template-columns: 1fr; } }
.kw-q-label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.kw-q input[type="text"], .kw-q input[type="number"], .kw-q select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); font: inherit; color: var(--ink); box-sizing: border-box; min-height: 44px; }
.kw-q input:focus, .kw-q select:focus, .kw-tip:focus, .kw-radio:focus, .kw-step-btn:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.kw-tip { width: 22px; height: 22px; line-height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-alt); color: var(--ink-mid); font-weight: 700; font-size: .78rem; cursor: pointer; padding: 0; }
.kw-tip:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.kw-tip-pop { position: absolute; z-index: 50; max-width: 340px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 6px; font-size: .9rem; line-height: 1.55; color: var(--ink-mid); }
.kw-tip-head { display: flex; justify-content: space-between; align-items: center; font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: .78rem; color: var(--accent); margin-bottom: 6px; }
.kw-tip-head button { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--ink-muted); padding: 0 4px; }
.kw-tip-body { margin: 0; }

.kw-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.kw-stepper input { width: 60px; text-align: center; border: none; padding: 10px 4px; font: inherit; color: var(--ink); background: var(--bg); min-height: 44px; -moz-appearance: textfield; }
.kw-stepper input::-webkit-outer-spin-button, .kw-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kw-step-btn { width: 44px; height: 44px; border: none; background: var(--bg-alt); color: var(--ink); font-size: 1.2rem; font-weight: 700; cursor: pointer; padding: 0; }
.kw-step-btn:hover { background: var(--accent); color: #fff; }

.kw-section { margin-bottom: 22px; }
.kw-section-head { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.kw-bucket-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.kw-bucket { padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--border-lt); border-radius: 4px; }
.kw-bucket label { display: block; font-size: .82rem; color: var(--ink-mid); margin-bottom: 6px; }

.kw-radio-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.kw-radio { padding: 12px 22px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink); border-radius: 4px; cursor: pointer; font: inherit; min-height: 44px; }
.kw-radio:hover { border-color: var(--accent); }
.kw-radio-selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.kw-checks { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; }
.kw-checks label { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink); cursor: pointer; padding: 4px 0; min-height: 32px; }

.kw-review { display: flex; flex-direction: column; gap: 12px; }
.kw-review-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--bg-alt); border: 1px solid var(--border-lt); border-radius: 4px; }
.kw-review-row > div { flex: 1; }
.kw-review-group { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: .82rem; color: var(--accent); margin-bottom: 3px; }
.kw-review-val { color: var(--ink); font-size: .92rem; }
.kw-review-edit { font-size: .82rem; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }

.kw-nav { display: flex; gap: 10px; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-lt); }
.kw-nav-spacer { flex: 1; }
.kw-nav button { min-height: 44px; min-width: 100px; }

/* Preview pane (desktop) */
.kw-preview { padding: 18px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); position: sticky; top: 90px; max-height: 70vh; overflow-y: auto; }
.kw-preview-head { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: .9rem; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-lt); }
.kw-preview-count { color: var(--accent); font-size: .8rem; }
.kw-preview-empty { font-size: .85rem; color: var(--ink-muted); margin: 0; }
.kw-prev-item { padding: 6px 0; border-bottom: 1px solid var(--border-lt); font-size: .82rem; color: var(--ink); }
.kw-prev-item:last-child { border-bottom: none; }
.kw-prev-name { display: block; font-weight: 600; color: var(--ink); }
.kw-prev-q { font-size: .75rem; color: var(--accent); font-family: 'Bebas Neue', sans-serif; letter-spacing: .03em; }
.kw-prev-more { padding-top: 8px; font-size: .8rem; color: var(--ink-muted); font-style: italic; }

/* Mobile drawer */
.kw-drawer-toggle { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; padding: 14px 18px; background: var(--accent); color: #fff; border: none; font: inherit; cursor: pointer; text-align: left; box-shadow: 0 -2px 12px rgba(0,0,0,.18); min-height: 56px; }
.kw-drawer-count { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; opacity: .9; float: right; }
@media (max-width: 860px) {
  .kw-preview { display: none; }
  .kw-drawer-toggle { display: block; }
  .kw-drawer-open .kw-preview { display: block; position: fixed; left: 0; right: 0; bottom: 56px; max-height: 50vh; z-index: 39; border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
  #kit-wizard { padding-bottom: 80px; }
}

/* Dashboard rebuild row */
.kb-rebuild-row { max-width: 1200px; margin: 0 auto; padding: 20px 24px 0; text-align: right; }


/* ─── GDPR Cookie consent banner ──────────────────────────────────── */
#consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 18px; pointer-events: none; }
#consent-banner .consent-card { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -6px 24px rgba(0,0,0,.15); padding: 22px 24px; }
.consent-intro { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: 0 0 18px; }
.consent-buttons-primary { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-buttons-primary button { flex: 1 1 calc(33% - 8px); min-width: 130px; min-height: 44px; }
@media (max-width: 600px) { .consent-buttons-primary { flex-direction: column; } .consent-buttons-primary button { flex: 1; width: 100%; } }
.consent-detail { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-lt); }
.consent-row { padding: 12px 0; border-bottom: 1px solid var(--border-lt); }
.consent-row:last-of-type { border-bottom: none; }
.consent-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.consent-row-head strong { color: var(--ink); font-size: .95rem; }
.consent-row-body { color: var(--ink-mid); font-size: .85rem; line-height: 1.55; margin: 4px 0 0; }
.consent-buttons-secondary { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.consent-buttons-secondary button { flex: 1 1 calc(33% - 8px); min-width: 110px; min-height: 40px; }
.consent-mid-session { color: var(--accent); font-size: .82rem; margin-top: 12px; text-align: center; }
.consent-toggle { display: inline-flex; align-items: center; gap: 8px; }
.consent-toggle input { width: 38px; height: 22px; appearance: none; -webkit-appearance: none; background: var(--border); border-radius: 11px; position: relative; cursor: pointer; transition: background .2s; outline-offset: 2px; }
.consent-toggle input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; }
.consent-toggle input:checked { background: var(--accent); }
.consent-toggle input:checked::before { transform: translateX(16px); }
.consent-toggle input:focus { outline: 2px solid var(--accent); }
.consent-toggle-locked { font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: .78rem; color: var(--ink-muted); padding: 2px 8px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 11px; }
.consent-toggle-slider { display: none; }


/* ─── Fix S5 button visibility on light surfaces ──────────────────── */
/* Test cross-ref CTA — light surface, dark outline button (was inheriting .f-link) */
.kb-test-cta .btn-outline { color: var(--ink); border: 1.5px solid var(--ink); background: transparent; padding: 10px 22px; min-height: 44px; }
.kb-test-cta .btn-outline:hover { background: var(--ink); color: var(--bg); }
/* Survey buttons — needed visible default, not just on hover */
.kb-survey-buttons button { padding: 10px 22px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink); font-size: 0.78rem; letter-spacing: 0.05em; border-radius: 4px; font-family: 'DM Sans', sans-serif; min-height: 44px; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.kb-survey-buttons button:hover { border-color: var(--accent); color: var(--accent); }
.kb-survey-buttons button.selected { background: var(--accent); color: #fff; border-color: var(--accent); }


/* ─── Nav CTA group — orange safety boxes (Constructor + Take Assessment) ───
   Both buttons live on the right side of the top nav and share styling. */
.nav-tab[data-page="kit-builder"] {
  background: var(--accent);
  color: #fff;
  padding: 9px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  margin-left: 14px;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.nav-tab[data-page="kit-builder"]:hover {
  background: #d94e0f;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 95, 31, 0.25);
}
.nav-tab[data-page="kit-builder"].active {
  background: #d94e0f;
}

/* Take Assessment — replace ink-black with safety-orange to match Constructor */
.nav-cta .btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
}
.nav-cta .btn-primary:hover {
  background: #d94e0f;
  box-shadow: 0 4px 14px rgba(255, 95, 31, 0.25);
  transform: translateY(-1px);
}


/* ─── Nav CTA group — flex spacing for paired orange CTAs ─────────── */
.nav-cta { gap: 14px; }
.nav-cta .nav-tab[data-page="kit-builder"] { margin-left: 0; }

/* Make the Create-your-list visual height match the Take Assessment button */
.nav-cta .nav-tab[data-page="kit-builder"] {
  padding: 9px 20px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   SFL HERO — clean rebuild 2026-05-29 (full restore)
   New namespace (sfl-*), zero overlap with legacy classes.
   The HOME hero block in index.html uses these classes;
   the old .home-hero/.hero-* rules in this file are no longer
   referenced by markup but kept for safety (no conflict — different selectors).
   ═══════════════════════════════════════════════════════════════════ */

.sfl-hero {
  padding: 56px 32px 64px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.sfl-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.sfl-hero-tag {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 14px;
  background: rgba(255,95,31,0.08);
  border: 1px solid rgba(255,95,31,0.3);
  border-radius: 100px;
  margin: 0 0 22px;
}
.sfl-hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  font-weight: 400;
}
.sfl-hero-h1-line2 {
  color: var(--accent);
}
.sfl-hero-lead {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 26px;
  max-width: 720px;
}
.sfl-hero-stat {
  padding: 16px 20px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin: 0 0 32px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 720px;
}
.sfl-hero-stat strong { color: var(--ink); font-weight: 700; }
.sfl-hero-src {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--ink-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}
.sfl-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sfl-cta-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 22px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .15s, transform .15s, box-shadow .15s, border-color .15s, color .15s;
  min-width: 220px;
}
.sfl-cta-btn:hover { transform: translateY(-2px); }
.sfl-cta-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.sfl-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sfl-cta-primary:hover {
  background: #d94e0f;
  border-color: #d94e0f;
  box-shadow: 0 8px 20px rgba(255,95,31,0.28);
}
.sfl-cta-secondary {
  background: #fff;
  color: var(--ink);
}
.sfl-cta-secondary:hover {
  border-color: var(--accent);
  background: #fffaf6;
  box-shadow: 0 8px 20px rgba(18,18,18,0.10);
}
.sfl-cta-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.sfl-cta-meta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .sfl-hero { padding: 40px 20px 48px; }
  .sfl-hero-h1 { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .sfl-hero-lead { font-size: 1.02rem; }
  .sfl-hero-stat { font-size: 0.92rem; padding: 14px 16px; }
  .sfl-hero-cta { flex-direction: column; gap: 10px; }
  .sfl-cta-btn { width: 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTERACTIVE LAYERS 2026-05-29
   1. Inline tease question (.sfl-tease)
   2. Counter numbers (.sfl-num) — JS-driven
   3. Hover micro-interactions on existing cards
   ═══════════════════════════════════════════════════════════════════ */

/* --- 1. Tease question --- */
.sfl-tease {
  padding: 48px 32px 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sfl-tease-inner {
  max-width: 880px;
  margin: 0 auto;
}
.sfl-tease-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.sfl-tease-q {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 800px;
}
.sfl-tease-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 20px;
}
.sfl-tease-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.sfl-tease-opt:hover:not(:disabled) {
  border-color: var(--accent);
  background: #fffaf6;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,95,31,0.10);
}
.sfl-tease-opt:disabled {
  cursor: default;
  opacity: 0.6;
}
.sfl-tease-opt.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  opacity: 1;
}
.sfl-tease-opt.selected .sfl-tease-opt-letter {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.sfl-tease-opt-letter {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--bg-alt);
  border-radius: 50%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin-top: 1px;
}
.sfl-tease-opt-text {
  font-size: 1rem;
  line-height: 1.45;
  color: inherit;
}
.sfl-tease-feedback {
  padding: 18px 22px;
  background: #fff;
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin-top: 8px;
  animation: feedback-in .35s ease-out;
}
@keyframes feedback-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sfl-tease-feedback-text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 14px;
}
.sfl-tease-feedback-text strong {
  color: var(--ink);
  font-weight: 700;
}
.sfl-tease-cta {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  padding: 8px 16px;
  background: rgba(255,95,31,0.08);
  border: 1px solid rgba(255,95,31,0.4);
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sfl-tease-cta:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 640px) {
  .sfl-tease { padding: 36px 20px 44px; }
  .sfl-tease-q { font-size: 1.25rem; }
  .sfl-tease-opt { padding: 14px 16px; gap: 12px; }
}

/* --- 2. Counter numbers (no visual change — just hold spot for JS) --- */
.sfl-num {
  display: inline-block;
  min-width: 1ch;
}

/* --- 3. Hover micro-interactions polish --- */
.concern-card,
.feat-card,
.feat-side-card,
.ix-item,
.bx-item,
.p-scenarios a {
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.concern-card:hover,
.feat-card:hover,
.feat-side-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(18,18,18,0.08);
  border-color: var(--accent);
}
.ix-item:hover,
.bx-item:hover {
  background: var(--bg-alt);
  border-color: var(--accent);
}


/* Auto-advance hides Next button — option click moves to next question after 320ms */
#sc-q #btnNext { display: none !important; }


/* ═══════════════════════════════════════════════
   RESULTS PAGE — Priority callout + ref links
   ═══════════════════════════════════════════════ */
.priority-callout {
  background: linear-gradient(135deg, #FF5F1F 0%, #E54400 100%);
  color: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(255,95,31,0.25);
  position: relative;
  overflow: hidden;
}
.priority-callout::before {
  content: ""; position: absolute; top: -40%; right: -20%;
  width: 60%; height: 180%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.priority-callout .pc-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  opacity: 0.85;
  margin-bottom: 12px;
}
.priority-callout .pc-headline {
  font-family: 'Playfair Display', serif;
  font-size: 1.65rem;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 18px;
}
.priority-callout .pc-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.priority-callout .pc-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.priority-callout .pc-arrow {
  font-size: 1.15rem;
  transition: transform 0.18s ease;
}
.priority-callout .pc-cta:hover .pc-arrow { transform: translateX(3px); }

/* Reading plan items — now <a> links */
.ref-item.ref-linked {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ref-item.ref-linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border-color: var(--accent);
}
.ref-item .ref-arrow {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  margin-left: 6px;
  transition: transform 0.16s ease;
}
.ref-item.ref-linked:hover .ref-arrow { transform: translateX(3px); }

/* Strengthen email-save card — promoted position right after callout */
.results-save {
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(255,95,31,0.10);
}

@media (max-width: 640px) {
  .priority-callout { padding: 22px 20px; margin-bottom: 24px; }
  .priority-callout .pc-headline { font-size: 1.3rem; }
}


/* Email-save card — 7-day plan value prop */
.results-save .rs-eyebrow {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.results-save .rs-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 600;
  margin: 4px 0 10px;
  color: var(--ink);
}
.results-save .rs-sub {
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin-bottom: 14px;
  line-height: 1.55;
}
.results-save .rs-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.results-save .rs-bullets li {
  font-size: 0.9rem;
  color: var(--ink);
  padding: 6px 0 6px 26px;
  position: relative;
  line-height: 1.5;
}
.results-save .rs-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

/* Reading plan — domain color stripes */
.ref-item { position: relative; }
.ref-item::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 3px; border-radius: 2px;
  background: var(--ink-muted);
}
.ref-domain-0::before { background: #7B61FF; }
.ref-domain-1::before { background: #2196F3; }
.ref-domain-2::before { background: #B02A1A; }
.ref-domain-3::before { background: #7B61FF; }
.ref-domain-4::before { background: #FF5F1F; }


/* Kit dashboard email-save card — promoted to top, value-first */
.kb-save-top {
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(255,95,31,0.10);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 36px;
}
.kb-save-top .kb-save-eyebrow {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.kb-save-top .kb-save-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 600;
  margin: 4px 0 10px;
  color: var(--ink);
}
.kb-save-top .kb-save-sub {
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin-bottom: 14px;
  line-height: 1.55;
}
.kb-save-top .kb-save-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.kb-save-top .kb-save-bullets li {
  font-size: 0.9rem;
  color: var(--ink);
  padding: 6px 0 6px 26px;
  position: relative;
  line-height: 1.5;
}
.kb-save-top .kb-save-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}
.kb-save-top .kb-save-privacy {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 10px;
}


/* Cabinet — Kit List block */
.cab-kit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 22px;
}
.cab-kit-card .csc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.cab-kit-card .csc-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.cab-kit-card .csc-date {
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.cab-kit-empty {
  text-align: center;
  padding: 22px 0;
}
.cab-kit-empty p {
  color: var(--ink-mid);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.cab-kit-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.cab-kit-stat {
  background: var(--surface);
  padding: 14px 10px;
  text-align: center;
}
.cab-kit-stat .cks-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.cab-kit-stat .cks-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}
.cab-kit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .cab-kit-stats { grid-template-columns: 1fr 1fr; }
}


/* Cabinet kit list — interactive checklist */
.cab-kit-help { font-size: 0.85rem; color: var(--ink-muted); margin: 14px 0 12px; }
.cab-kit-checklist { margin-bottom: 18px; }
.ckl-progress { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; }
.ckl-progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ckl-progress-fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.ckl-progress-label { font-size: 0.85rem; color: var(--ink-mid); }
.ckl-progress-label strong { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; color: var(--ink); }
.ckl-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 12px 0 12px 8px; border-bottom: 1px solid var(--border-lt); border-left: 3px solid transparent; cursor: pointer; transition: background 0.15s; }
.ckl-item:hover { background: var(--bg-alt); }
.ckl-tier-critical { border-left-color: var(--accent); }
.ckl-tier-important { border-left-color: #FFB74D; }
.ckl-tier-nice-to-have { border-left-color: var(--border); }
.ckl-box { width: 24px; height: 24px; border: 2px solid var(--ink-muted); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1rem; margin-top: 1px; transition: background 0.15s, border-color 0.15s; }
.ckl-item.checked .ckl-box { background: var(--success); border-color: var(--success); }
.ckl-item.checked .ckl-name { text-decoration: line-through; color: var(--ink-muted); }
.ckl-name { font-size: 0.95rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.ckl-q { font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; color: var(--accent); letter-spacing: 0.03em; margin-left: 6px; }
.ckl-meta { display: flex; gap: 8px; }
.ckl-tier-badge { display: inline-block; font-family: 'Bebas Neue', sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 3px; }
.ckl-tier-critical .ckl-tier-badge { background: var(--accent); color: #fff; }
.ckl-tier-important .ckl-tier-badge { background: #FFB74D; color: #4a2d00; }
.ckl-tier-nice-to-have .ckl-tier-badge { background: var(--border); color: var(--ink-muted); }

/* Kit Builder — extra polish on critical section + category pill */
.kb-critical-block .kb-cat-title { color: var(--accent); }
.kb-critical-block { border-left: 4px solid var(--accent); padding-left: 14px; margin-left: -18px; }
.kb-item-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.kb-cat-pill { display: inline-block; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-muted); background: var(--bg-alt); padding: 2px 8px; border-radius: 3px; }


/* Cabinet tabs */
.cab-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  margin-top: 8px;
}
.cab-tab {
  background: none;
  border: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 12px 22px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.cab-tab:hover { color: var(--ink); }
.cab-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.cab-tab-panel { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 540px) {
  .cab-tab { padding: 10px 14px; font-size: 0.9rem; letter-spacing: 0.06em; }
}


/* Unified section head — used on homepage + cabinet-style sections */
.section-head-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.section-head-stack .section-eyebrow {
  margin-bottom: 0;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}

/* Override how-we-work's old direct h2 sizing inside head-stack */
.how-we-work .section-head-stack + .how-we-work-body,
.how-we-work .section-head-stack + p.how-we-work-body {
  margin-top: 0;
}


/* Homepage major-section spacing — fixes cramped why-now + how-we-work */
.why-now, .how-we-work {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  position: relative;
}
.why-now {
  border-top: 1px solid var(--border-lt);
}
.how-we-work {
  border-top: 1px solid var(--border-lt);
  padding-bottom: 72px;
}

/* Stronger eyebrow — was almost invisible against giant Playfair H2 */
.why-now .section-eyebrow,
.how-we-work .section-eyebrow {
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  font-weight: 600;
}
.why-now .section-eyebrow::before,
.how-we-work .section-eyebrow::before {
  background: var(--accent);
  width: 28px;
  height: 1.5px;
}

/* Tighten gap between eyebrow and section title */
.why-now .section-head-stack,
.how-we-work .section-head-stack {
  gap: 14px;
  margin-bottom: 28px;
}

/* Body text below heading */
.why-now-body p,
.how-we-work-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-mid);
  margin-bottom: 14px;
}
.why-now-source {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 18px !important;
}


/* Intel Hub — 2-section layout (override default .articles-grid flex behaviour) */
.articles-grid:has(.art-grid-inner) {
  display: block;
  border: none;
  background: transparent;
}
.art-section-head {
  width: 100%;
  padding-top: 20px;
  margin-top: 28px;
  margin-bottom: 16px;
  border-top: 1px solid var(--border);
}
.art-section-head:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.art-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: 0;
}
.art-section-sub {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0;
}
.art-grid-inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 36px;
}
.art-grid-inner .art-card {
  width: auto;
  background: var(--surface);
}
.art-card--priority {
  border-left: 3px solid var(--accent);
}
@media (max-width: 640px) {
  .art-grid-inner { grid-template-columns: 1fr; }
}


/* Kit Print — button row */
.kb-print-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.kb-print-hint {
  font-size: 0.78rem;
  color: var(--ink-muted);
  max-width: 340px;
}

/* Print-only stylesheet — generate a clean shopping list */
@media print {
  /* Hide everything that isn't kit content */
  nav, .nav-bar, .nav-tabs, .nav-cta, .nav-mobile-drawer,
  .kb-intake, .kb-save, .kb-save-top, #kb-save-row,
  .kb-survey, .kb-test-cta, .kb-explore, .kb-rebuild-row,
  .no-print, footer, .ia-footer,
  #cookie-consent, .consent-banner {
    display: none !important;
  }
  body { background: white !important; color: black !important; font-size: 11pt; }
  .kb-grid { display: block !important; }
  .kb-results { margin: 0; padding: 0; }
  .kb-section-head { font-size: 18pt; border-bottom: 2px solid black; padding-bottom: 4px; margin-bottom: 14px; }
  .kb-priority-card { border: 1px solid black; padding: 10px; margin-bottom: 14px; page-break-inside: avoid; }
  .kb-cat-group { page-break-inside: avoid; margin-bottom: 14px; }
  .kb-cat-head { border-bottom: 1px solid black; padding-bottom: 4px; margin-bottom: 8px; }
  .kb-cat-title { font-size: 14pt; }
  .kb-item { padding: 6px 0; border-bottom: 1px dotted #888; page-break-inside: avoid; }
  .kb-item-name { font-weight: 700; }
  .kb-tier-badge {
    background: transparent !important;
    color: black !important;
    border: 1px solid black;
    padding: 1px 6px;
    font-size: 9pt;
  }
  .kb-totals { border: 1px solid black; padding: 8px; margin-bottom: 14px; }
  .kb-totals strong { color: black; }
  a[href]::after { content: ""; }  /* don't print URLs after links */

  /* Page setup */
  @page { margin: 1.5cm; }

  /* Add a print-only header */
  .kb-results::before {
    content: "Systems Fail Lab — My Kit List";
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16pt;
    letter-spacing: 0.06em;
    border-bottom: 2px solid black;
    padding-bottom: 6px;
    margin-bottom: 14px;
  }
}


/* Intake — 5-domain preview block */
.calc-domains-preview {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 28px 0;
  max-width: 520px;
}
.calc-domains-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 12px;
}
.calc-domains-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.calc-domains-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.calc-dom-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  flex-shrink: 0;
}


/* Cabinet empty-state — optional sign-in line below CTAs */
.cab-empty-signin {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-lt);
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-align: center;
}
.cab-empty-signin .f-link {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-left: 6px;
  text-decoration: underline;
}
.cab-empty-signin .f-link:hover { color: #d94e0f; }


/* Wizard generate — loading overlay */
.kw-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(242,240,235,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: kwFadeIn 0.18s ease;
}
.kw-loading-overlay[hidden] { display: none !important; }
.kw-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.kw-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  animation: kwSpin 0.9s linear infinite;
}
.kw-loading-msg {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--ink);
}
@keyframes kwSpin { to { transform: rotate(360deg); } }
@keyframes kwFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Button loading state — for kb-save / results-save / btn-subscribe */
.btn-loading {
  pointer-events: none;
  opacity: 0.7;
}
.btn-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: kwSpin 0.7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}


/* Cabinet kit checklist — category groups */
.ckl-cat-group {
  margin-bottom: 28px;
}
.ckl-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  margin: 0 0 12px;
}
.ckl-cat-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
}
.ckl-cat-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.ckl-critical-block .ckl-cat-title { color: var(--accent); }
.ckl-critical-block { border-left: 4px solid var(--accent); padding-left: 14px; margin-left: -18px; }


/* Print stylesheet — Resilience Score results + Cabinet full report */
@media print {
  /* When printing results screen */
  body.page-calc-active .nav-bar,
  body.page-calc-active .nav-tabs,
  body.page-calc-active .nav-cta,
  body.page-calc-active .nav-mobile-drawer,
  #page-calc .calc-progress-rail,
  #page-calc .calc-header,
  #page-calc .priority-callout,
  #page-calc .results-save,
  #page-calc .results-cta,
  #page-calc .kit-cta-band,
  #page-calc .no-print {
    display: none !important;
  }

  #page-calc .results-hero { text-align: left; }
  #page-calc .score-ring-wrap svg { width: 120px; height: 120px; }
  #page-calc .score-tier { font-size: 18pt; }
  #page-calc .score-desc { font-size: 11pt; color: black; }
  #page-calc .breakdown-section { page-break-inside: avoid; margin-bottom: 18px; }
  #page-calc .sec-head .section-title,
  #page-calc .sec-head > span:first-child { font-size: 16pt; border-bottom: 2px solid black; padding-bottom: 4px; }
  #page-calc .ref-item { page-break-inside: avoid; border: 1px solid #999 !important; }
  #page-calc .domain-row { page-break-inside: avoid; }

  /* When printing Cabinet */
  #page-cabinet nav, #page-cabinet .nav-bar, #page-cabinet .cab-tabs,
  #page-cabinet #cab-auth-panel,
  #page-cabinet #btn-cab-kit-edit, #page-cabinet #btn-cab-kit-rebuild,
  #page-cabinet .no-print {
    display: none !important;
  }
  #page-cabinet .cab-tab-panel { display: block !important; page-break-before: always; }
  #page-cabinet .cab-tab-panel:first-of-type { page-break-before: auto; }
  #page-cabinet .ckl-item { page-break-inside: avoid; border: 1px solid #999 !important; }
  #page-cabinet .ckl-cat-group { page-break-inside: avoid; }

  /* Common print rules — link URL hiding done in kit print block above */
  body { background: white !important; color: black !important; }
}


/* Global focus-visible ring — accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Buttons should have visible focus on Tab, not on click */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none;
}
/* Skip-to-content link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 10000;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }


/* Homepage — Latest briefings widget */
.home-briefings {
  background: var(--bg-alt);
  padding: 56px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-briefings-inner { max-width: 1100px; margin: 0 auto; }
.home-briefings-head { margin-bottom: 28px; }
.home-briefings-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.home-briefings-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}
.home-briefings-sub {
  color: var(--ink-mid);
  max-width: 580px;
  margin: 0;
  font-size: 0.95rem;
}
.home-briefings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .home-briefings-grid { grid-template-columns: 1fr; } }
.home-briefing-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.home-briefing-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.hb-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.hb-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 8px;
}
.hb-sum {
  font-size: 0.85rem;
  color: var(--ink-mid);
  line-height: 1.5;
  margin-bottom: 14px;
}
.hb-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hb-cta span { transition: transform 0.16s ease; }
.home-briefing-card:hover .hb-cta span { transform: translateX(4px); }
.home-briefings-foot { margin-top: 22px; text-align: center; }
.home-briefings-foot a {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.92rem;
}
.home-briefings-foot a:hover { color: var(--accent); }

/* Make Eurobarometer link in hero stat visible */
.sfl-hero-src {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.sfl-hero-src:hover { color: var(--accent); }


/* Concerns picker — icon styling */
.concerns-card-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  color: var(--accent);
}
.concerns-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.concerns-card { padding-top: 22px; }
.concerns-card:hover .concerns-card-icon {
  color: var(--ink);
  transform: scale(1.08);
  transition: transform 0.16s ease, color 0.16s ease;
}


/* Kit Builder — low-budget toggle */
.kb-budget-toggle {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-radius: 6px;
}
.kb-budget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink-mid);
}
.kb-budget-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.kb-budget-row strong { color: var(--ink); }


/* Dark mode — toggle via [data-theme="dark"] on <html> */
:root[data-theme="dark"] {
  --bg:        #1A1916;
  --bg-alt:    #25231F;
  --surface:   #2B2924;
  --border:    #3A3631;
  --border-lt: #2F2C28;
  --ink:       #F2F0EB;
  --ink-mid:   #C8C3BA;
  --ink-muted: #8E887E;
  --accent-bg: rgba(255,95,31,0.14);
  --accent-border: rgba(255,95,31,0.36);
  --danger:    #E55A4A;
  --success:   #5AAF85;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] img,
:root[data-theme="dark"] .sfl-num { filter: brightness(0.95); }
:root[data-theme="dark"] .home-briefing-card,
:root[data-theme="dark"] .ref-item,
:root[data-theme="dark"] .results-save,
:root[data-theme="dark"] .kb-save-top { background: var(--surface); }
:root[data-theme="dark"] .nav-bar,
:root[data-theme="dark"] .nav-tabs,
:root[data-theme="dark"] header.nav-bar { background: var(--bg); }
:root[data-theme="dark"] .auth-card { background: var(--surface); border-color: var(--border); }

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 1rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { color: var(--ink); background: var(--bg-alt); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }


/* Local trust strip in How-we-work section */
.local-trust-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 14px;
  background: var(--bg-alt);
  border-radius: 20px;
  font-size: 0.85rem;
}
.local-flag { font-size: 1.1rem; }
.local-text a { color: var(--accent); text-decoration: underline; }

/* Homepage — local resources section */
.home-local {
  background: var(--ink);
  color: var(--bg);
  padding: 56px 24px;
}
.home-local-inner { max-width: 1100px; margin: 0 auto; }
.home-local-head { margin-bottom: 28px; }
.home-local-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.home-local-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--bg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-local-sub {
  color: var(--bg);
  opacity: 0.75;
  margin: 0 0 24px;
  max-width: 640px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.home-local-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 16px;
}
@media (max-width: 860px) { .home-local-grid { grid-template-columns: 1fr; } }
.home-local-card {
  background: var(--ink);
  padding: 22px 24px;
}
.home-local-card-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.home-local-card-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bg);
  margin-bottom: 6px;
  line-height: 1.3;
}
.home-local-card-value a {
  color: var(--bg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.home-local-card-value a:hover { color: var(--accent); }
.home-local-card-desc {
  font-size: 0.82rem;
  color: var(--bg);
  opacity: 0.65;
  line-height: 1.5;
}
.home-local-footer {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--bg);
  opacity: 0.7;
}
.home-local-switcher {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  padding: 0;
}


/* Kit Builder — currency selector */
.kb-budget-toggle {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.kb-currency-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--ink-mid);
}
.kb-currency-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.kb-currency-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Quick-start banner on Kit Builder dashboard (Session 2 / Option B) ── */
.kb-quick-banner {
  display: flex; align-items: center; gap: 16px;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: var(--radius); padding: 18px 22px; margin: 0 0 18px 0;
}
.kb-quick-banner-text { flex: 1; }
.kb-quick-banner-eyebrow {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em;
  font-size: .72rem; color: var(--accent); margin-bottom: 4px;
}
.kb-quick-banner-title {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 1.08rem; color: var(--ink); margin-bottom: 4px;
}
.kb-quick-banner-title span { color: var(--accent); }
.kb-quick-banner-sub {
  font-size: .88rem; color: var(--ink-mid); line-height: 1.5;
}
.kb-quick-banner .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .kb-quick-banner { flex-direction: column; align-items: flex-start; }
  .kb-quick-banner .btn { width: 100%; }
}

/* ── Region-aware visibility (Phase B Option 3) ── */
/* Hide region-specific elements that don't match the current region. */
html[data-region="us"] .home-briefing-card[data-region="eu"],
html[data-region="us"] .hb-foot-eu,
html[data-region="us"] [data-region-eu] { display: none !important; }
html[data-region="eu"] .home-briefing-card[data-region="us"],
html[data-region="eu"] .hb-foot-us,
html[data-region="eu"] [data-region-us] { display: none !important; }

/* ── Region switcher in nav (Phase F) ── */
.region-switcher {
  display: inline-flex; gap: 2px; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--border-lt);
  border-radius: 6px; padding: 2px; margin-left: 6px;
}
.region-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 4px 8px; font-size: 1rem; line-height: 1;
  border-radius: 4px; transition: background .15s;
  opacity: 0.45;
}
.region-btn:hover { opacity: 0.8; background: var(--surface); }
html[data-region="us"] .region-btn[data-region-set="US"],
html[data-region="eu"] .region-btn[data-region-set="EU"] {
  opacity: 1; background: var(--accent-bg);
}
@media (max-width: 640px) {
  .region-switcher { margin-left: 0; }
  .region-btn { padding: 3px 6px; font-size: 0.95rem; }
}

/* ── Skip link for keyboard a11y (Phase L) ── */
.skip-link {
  position: absolute; left: -9999px; top: -40px;
  background: var(--accent); color: #fff;
  padding: 12px 20px; border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  z-index: 9999; text-decoration: none;
}
.skip-link:focus {
  left: 50%; top: 12px; transform: translateX(-50%);
}

/* ── Increase touch targets for filter chips on mobile (Phase L) ── */
@media (max-width: 760px) {
  .bx-chip { min-height: 44px; padding: 10px 18px; }
  .f-btn { min-height: 44px; padding: 10px 18px; }
  .region-btn { min-width: 44px; min-height: 44px; padding: 8px 12px; }
  .lang-toggle { min-height: 44px; }
  .nav-tab { min-height: 44px; }
}

/* ── Region links on static pages (Phase M unify) ── */
.ia-region {
  background: transparent !important;
  color: var(--ink-muted) !important;
  padding: 6px 8px !important;
  font-size: 1rem !important;
  border-radius: 4px;
  text-decoration: none !important;
  opacity: 0.6;
  transition: opacity .15s, background .15s;
}
.ia-region:hover {
  opacity: 1;
  background: var(--bg-alt) !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-region="us"] .ia-region[href*="/us/"],
html[data-region="eu"] .ia-region[href*="/eu/"] {
  opacity: 1;
  background: var(--accent-bg) !important;
}

/* ════════════════════════════════════════════════════════════════════
   SESSION A1 — Diagnosis-first frame styles
   ════════════════════════════════════════════════════════════════════ */

/* Nav logo tagline */
.nav-tagline {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-transform: none;
  line-height: 1.1;
}
@media (max-width: 720px) {
  .nav-tagline { display: none; }
}

/* Hero microcopy under CTAs */
.sfl-hero-micro {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.5;
}

/* CTA hierarchy emphasis — primary stronger */
.sfl-cta-btn.sfl-cta-primary {
  flex: 0 0 auto;
  min-width: 280px;
}
.sfl-cta-btn.sfl-cta-secondary {
  opacity: 0.88;
}
.sfl-cta-btn.sfl-cta-secondary:hover {
  opacity: 1;
}

/* Cabinet nav-tab hidden by default; revealed when html.sfl-has-data */
html:not(.sfl-has-data) .nav-tab[data-page="cabinet"],
html:not(.sfl-has-data) .nav-mobile-item[data-page="cabinet"],
html:not(.sfl-has-data) .f-link[data-page="cabinet"] {
  display: none !important;
}

/* "Not for / For" positioning block */
.sfl-notfor {
  background: var(--bg-alt);
  padding: 48px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sfl-notfor-inner {
  max-width: 980px;
  margin: 0 auto;
}
.sfl-notfor-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
  text-align: center;
}
.sfl-notfor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .sfl-notfor-grid { grid-template-columns: 1fr; gap: 16px; }
}
.sfl-notfor-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.sfl-notfor-for {
  border-left: 3px solid #2D8A60;
}
.sfl-notfor-not {
  border-left: 3px solid #C0392B;
  opacity: 0.92;
}
.sfl-notfor-h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  color: var(--ink);
}
.sfl-notfor-for .sfl-notfor-h3 { color: #2D8A60; }
.sfl-notfor-not .sfl-notfor-h3 { color: #C0392B; }
.sfl-notfor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
}
.sfl-notfor-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--ink-mid);
}
.sfl-notfor-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #2D8A60;
  font-weight: 700;
}
.sfl-notfor-list-x li::before {
  content: '✕';
  color: #C0392B;
}

/* ════════════════════════════════════════════════════════════════════
   SESSION A2 — Sample preview + trust checklist
   ════════════════════════════════════════════════════════════════════ */

/* Sample result preview */
.sfl-preview {
  background: var(--bg);
  padding: 48px 24px;
  border-bottom: 1px solid var(--border);
}
.sfl-preview-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.sfl-preview-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
  text-align: center;
}
.sfl-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) {
  .sfl-preview-grid { grid-template-columns: 1fr; gap: 20px; }
}
.sfl-preview-h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
  color: var(--ink);
}
.sfl-preview-items {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
}
.sfl-preview-items li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--ink-mid);
}
.sfl-preview-items li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
}
.sfl-preview-mock {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sfl-preview-mock-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 14px;
}
.sfl-preview-mock-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.sfl-preview-mock-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1;
}
.sfl-preview-mock-score span {
  font-size: 1.1rem;
  color: var(--ink-muted);
}
.sfl-preview-mock-bars {
  margin-bottom: 16px;
}
.sfl-preview-mock-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-mid);
}
.sfl-preview-mock-bar {
  height: 8px;
  background: var(--border-lt);
  border-radius: 4px;
  overflow: hidden;
}
.sfl-preview-mock-bar > div {
  height: 100%;
  border-radius: 4px;
}
.sfl-preview-mock-action {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
}
.sfl-preview-mock-action-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sfl-preview-mock-action-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.4;
}

/* How-we-work checklist (Trust block) */
.how-we-work-checklist {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
}
.how-we-work-checklist li {
  position: relative;
  padding: 8px 0 8px 32px;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--border-lt);
}
.how-we-work-checklist li:last-child { border-bottom: none; }
.how-we-work-checklist li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 9px;
  color: #2D8A60;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Session B — Intake expectation block */
.calc-expectation {
  margin: 20px 0 0;
  padding: 14px 18px;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-mid);
}
.calc-expectation strong {
  color: var(--ink);
}
.calc-expectation em {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}

/* Quiz opt-row keyboard focus state */
.opt-row:focus,
.opt-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.opt-row[role="radio"] {
  cursor: pointer;
}

/* Domain recommendation block (Intel Hub recommendation engine) */
.domain-rec-block {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 24px 0 32px;
}
.domain-rec-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.domain-rec-domain {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: var(--ink);
}
.domain-rec-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.domain-rec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.domain-rec-item {
  display: grid;
  grid-template-columns: 28px 1fr 22px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, background .15s, transform .15s;
  font-family: 'DM Sans', sans-serif;
}
.domain-rec-item:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: translateX(2px);
}
.domain-rec-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--accent);
  text-align: center;
  line-height: 1;
}
.domain-rec-title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}
.domain-rec-arrow {
  font-size: 1.2rem;
  color: var(--ink-muted);
  text-align: right;
}
.domain-rec-item:hover .domain-rec-arrow {
  color: var(--accent);
}

/* Session C1.2 — Medical YMYL disclaimer */
.medical-ymyl-disclaimer {
  background: rgba(192,57,43,0.06);
  border-left: 3px solid #C0392B;
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 0 0 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-mid);
}
.medical-ymyl-disclaimer strong {
  color: #C0392B;
  display: block;
  margin-bottom: 4px;
}
:root[data-theme="dark"] .medical-ymyl-disclaimer {
  background: rgba(192,57,43,0.12);
  color: var(--ink);
}

/* Session A3 — How it works 5-step block */
.how-it-works {
  background: var(--bg);
  padding: 56px 24px;
  border-bottom: 1px solid var(--border);
}
.hiw-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.hiw-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
  text-align: center;
}
.hiw-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  max-width: 740px;
  margin: 0 auto 36px;
}
@media (min-width: 720px) {
  .hiw-heading { font-size: 1.8rem; }
}
.hiw-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .hiw-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
}
.hiw-step {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  transition: border-color .15s, transform .15s;
}
@media (min-width: 720px) {
  .hiw-step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.hiw-step:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.hiw-step-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  text-align: center;
}
@media (min-width: 720px) {
  .hiw-step-num {
    font-size: 2.8rem;
    text-align: left;
  }
}
.hiw-step-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 6px;
}
.hiw-step-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0;
}

/* E1-3: First-visit region picker modal */
.sfl-region-picker {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sfl-region-picker[hidden] { display: none; }
.sfl-region-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.sfl-region-picker-modal {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 28px 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: sflRegionPickerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sflRegionPickerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sfl-region-picker-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.sfl-region-picker-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 12px;
}
.sfl-region-picker-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 24px;
}
.sfl-region-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .sfl-region-picker-grid { grid-template-columns: 1fr; }
}
.sfl-region-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 18px;
  background: var(--bg-alt);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, transform .15s, background .15s;
}
.sfl-region-picker-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: translateY(-2px);
}
.sfl-region-pick-flag {
  font-size: 2.4rem;
  line-height: 1;
}
.sfl-region-pick-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.sfl-region-pick-meta {
  font-size: 0.74rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.sfl-region-picker-skip {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  padding: 10px;
  cursor: pointer;
  text-decoration: underline;
}
.sfl-region-picker-skip:hover { color: var(--ink); }

/* E2-6: Result page phased reveal — visual divider */
.results-phase-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 20px;
  padding: 14px 18px;
  background: linear-gradient(to right, rgba(45,138,96,0.08), rgba(255,95,31,0.08));
  border-radius: 6px;
  border-left: 3px solid #2D8A60;
  border-right: 3px solid var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.results-phase-tag-free {
  color: #2D8A60;
}
.results-phase-tag-gated {
  color: var(--accent);
  text-align: right;
}
@media (max-width: 600px) {
  .results-phase-divider {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .results-phase-tag-gated { text-align: center; }
}

/* E1-50: Reduced motion respect for ticker animation */
@media (prefers-reduced-motion: reduce) {
  .marquee-inner {
    animation: none !important;
    transform: none !important;
  }
  .marquee-strip {
    overflow-x: auto;
    overflow-y: hidden;
  }
  /* Disable scroll counter animation too */
  .sfl-num {
    transition: none !important;
  }
  /* Disable region picker entry animation */
  .sfl-region-picker-modal {
    animation: none !important;
  }
}

/* E1-47: Cookie consent — equal button weight для Reject all і Accept all */
.consent-equal {
  flex: 1;
  min-width: 0;
}
#consent-reject.consent-equal {
  background: var(--bg-alt) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
}
#consent-reject.consent-equal:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* 5.2 Cabinet post-Score welcome banner */
.cab-welcome-banner {
  background: linear-gradient(135deg, rgba(45,138,96,0.1), rgba(255,95,31,0.08));
  border: 1px solid rgba(45,138,96,0.4);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 24px;
  animation: cabWelcomeIn 0.4s ease;
}
@keyframes cabWelcomeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cab-welcome-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.cab-welcome-icon {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  background: #2D8A60;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cab-welcome-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  color: var(--ink);
}
.cab-welcome-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-mid);
  margin: 0;
}
.cab-welcome-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
}
.cab-welcome-close:hover { color: var(--ink); }

/* F9 — Article changelog block */
.ia-changelog {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--bg-alt);
  border-left: 3px solid var(--ink-muted);
  border-radius: 0 4px 4px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-mid);
}
.ia-changelog-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ia-changelog-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.ia-changelog-list li {
  padding: 4px 0;
  line-height: 1.55;
}
.ia-changelog-list strong {
  color: var(--ink);
  font-weight: 600;
}
.ia-changelog-note {
  margin: 0;
  font-size: 0.78rem;
  font-style: italic;
}
.briefing-changelog {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--bg-alt);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-mid);
}
.briefing-changelog-note { margin: 0; }

/* F10 — Pillar guide FAQ block */
.p-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 36px;
}
.p-faq-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color .15s;
}
.p-faq-item[open] {
  border-color: var(--accent);
  background: var(--bg);
}
.p-faq-q {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 28px;
}
.p-faq-q::-webkit-details-marker { display: none; }
.p-faq-q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 400;
  transition: transform .15s;
}
.p-faq-item[open] .p-faq-q::after {
  content: '−';
}
.p-faq-a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-mid);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-lt);
}

/* E1-56 / E2-31 — Social proof block */
.sfl-social-proof {
  padding: 48px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sfl-social-proof-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.sfl-social-proof-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.sfl-social-proof-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0 0 28px;
}
.sfl-sp-source-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
  font-weight: 600;
}
.sfl-sp-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
}
.sfl-sp-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* E2-25 / 6.2 — Briefing → Cabinet save toast */
.cab-briefing-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  background: #2D8A60;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  animation: cabToastIn 0.3s ease, cabToastOut 0.3s ease 4s forwards;
  max-width: 320px;
}
@keyframes cabToastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cabToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}
@media (max-width: 600px) {
  .cab-briefing-toast {
    top: auto;
    bottom: 20px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* 6.2 — Cabinet saved briefing actions block */
.cab-bact-block {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 24px;
}
.cab-bact-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-lt);
}
.cab-bact-title-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--ink);
}
.cab-bact-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.cab-bact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cab-bact-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-mid);
}
.cab-bact-item::before {
  content: '✓';
  color: #2D8A60;
  font-weight: 700;
  margin-right: 8px;
}
.cab-bact-title {
  flex: 1;
}
.cab-bact-date {
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin-left: 10px;
}
.cab-bact-link {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  margin-top: 4px;
}
.cab-bact-link:hover { text-decoration: underline; }

/* Scenario page dual CTA (E2-23 extension) */
.kb-cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 600px) {
  .kb-cta-pair { grid-template-columns: 1fr; }
}
.kb-cta-pair .kb-cta-btn {
  display: block;
  text-align: center;
}
.kb-cta-pair .kb-cta-primary {
  background: var(--accent);
  color: #fff;
}
.kb-cta-pair .kb-cta-primary:hover {
  background: #d94e15;
}
.kb-cta-pair .kb-cta-secondary {
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.kb-cta-pair .kb-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* V6 #5 — Mobile responsive audit for late-added components */

/* Cabinet briefing actions block — mobile stack */
@media (max-width: 600px) {
  .cab-bact-block { padding: 14px 16px; }
  .cab-bact-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cab-bact-meta { font-size: 0.66rem; }
  .cab-bact-item { font-size: 0.82rem; padding: 6px 10px; }
  .cab-bact-date { font-size: 0.68rem; }
}

/* Cabinet welcome banner — mobile compact */
@media (max-width: 600px) {
  .cab-welcome-banner { padding: 14px 16px; margin-bottom: 16px; }
  .cab-welcome-inner { grid-template-columns: auto 1fr; gap: 12px; }
  .cab-welcome-close { position: absolute; top: 8px; right: 12px; padding: 2px 6px; }
  .cab-welcome-banner { position: relative; }
  .cab-welcome-icon { width: 36px; height: 36px; font-size: 1.3rem; }
  .cab-welcome-title { font-size: 1rem; }
  .cab-welcome-body { font-size: 0.82rem; }
}

/* Domain recommendation block — mobile */
@media (max-width: 600px) {
  .domain-rec-block { padding: 16px 18px; margin: 18px 0 24px; }
  .domain-rec-domain { font-size: 1.3rem; }
  .domain-rec-sub { font-size: 0.82rem; }
  .domain-rec-item { padding: 10px 12px; grid-template-columns: 24px 1fr 18px; gap: 10px; }
  .domain-rec-num { font-size: 1.2rem; }
  .domain-rec-title { font-size: 0.86rem; }
}

/* How it works steps — mobile (already 1-col, but tighter padding) */
@media (max-width: 600px) {
  .hiw-heading { font-size: 1.25rem; margin-bottom: 24px; }
  .hiw-step { padding: 16px 14px; gap: 12px; }
  .hiw-step-label { font-size: 1.05rem; }
  .hiw-step-body { font-size: 0.8rem; }
}

/* Sample preview mockup — mobile */
@media (max-width: 600px) {
  .sfl-preview { padding: 36px 18px; }
  .sfl-preview-mock { padding: 16px 18px; }
  .sfl-preview-mock-score { font-size: 2rem; }
  .sfl-preview-mock-row { grid-template-columns: 90px 1fr; gap: 8px; font-size: 0.72rem; }
  .sfl-preview-items li { padding-left: 24px; font-size: 0.88rem; }
}

/* How we work checklist — mobile */
@media (max-width: 600px) {
  .how-we-work-checklist { font-size: 0.88rem; }
  .how-we-work-checklist li { padding: 7px 0 7px 28px; }
}

/* Social proof — mobile */
@media (max-width: 600px) {
  .sfl-social-proof { padding: 36px 18px; }
  .sfl-social-proof-body { font-size: 0.92rem; }
  .sfl-sp-tag { font-size: 0.72rem; padding: 5px 10px; }
}

/* Result page phase divider — mobile */
@media (max-width: 600px) {
  .results-phase-divider { padding: 12px 14px; font-size: 0.66rem; margin: 28px 0 16px; }
}

/* Region picker modal — mobile (already covered with 480px, ensure works on tiny phones) */
@media (max-width: 380px) {
  .sfl-region-picker-modal { padding: 24px 20px; }
  .sfl-region-picker-title { font-size: 1.5rem; }
  .sfl-region-picker-sub { font-size: 0.82rem; margin-bottom: 18px; }
  .sfl-region-picker-btn { padding: 18px 14px; }
}

/* Briefing→Cabinet toast — mobile bottom positioning already in core CSS; confirm visibility */
@media (max-width: 600px) {
  .cab-briefing-toast { font-size: 0.84rem; padding: 10px 16px; }
}

/* Medical YMYL disclaimer — mobile */
@media (max-width: 600px) {
  .medical-ymyl-disclaimer { padding: 12px 14px; font-size: 0.82rem; }
}

/* /tools/* page CTAs (article-specific) — already responsive but verify */
@media (max-width: 600px) {
  .ia-cta-row {
    grid-template-columns: 1fr;
  }
}

/* V6 paid acquisition: above-fold newsletter capture */
.sfl-nl-hero {
  background: linear-gradient(135deg, rgba(255,95,31,0.06), rgba(255,95,31,0.12));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 24px;
}
.sfl-nl-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 820px) {
  .sfl-nl-hero-inner { grid-template-columns: 1fr; gap: 20px; }
}
.sfl-nl-hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.sfl-nl-hero-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.sfl-nl-hero-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sfl-nl-hero-form input {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.sfl-nl-hero-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.sfl-nl-hero-btn {
  padding: 14px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.sfl-nl-hero-btn:hover {
  background: #d94e15;
  transform: translateY(-1px);
}
.sfl-nl-hero-trust {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 4px;
}
.sfl-nl-hero-success {
  padding: 12px 16px;
  background: #2D8A60;
  color: #fff;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-top: 8px;
}
.sfl-nl-hero-error {
  padding: 12px 16px;
  background: #C0392B;
  color: #fff;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .sfl-nl-hero { padding: 28px 18px; }
  .sfl-nl-hero-body { font-size: 0.95rem; }
  .sfl-nl-hero-btn { font-size: 0.88rem; padding: 13px 16px; }
}

/* === Inline mid-article CTA (intel + briefings) === */
.ia-inline-cta, .bf-inline-cta { margin: 36px 0; padding: 0; border: 0; background: transparent; }
.ia-inline-cta a, .bf-inline-cta a {
  display: block; padding: 20px 22px;
  background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 6px; text-decoration: none; color: var(--ink);
  transition: background .15s, transform .15s;
}
.ia-inline-cta a:hover, .bf-inline-cta a:hover { background: var(--bg); transform: translateX(2px); }
.ia-inline-cta strong, .bf-inline-cta strong {
  display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.02rem;
  color: var(--accent); margin-bottom: 4px;
}
.ia-inline-cta span, .bf-inline-cta span {
  display: block; font-size: 0.88rem; color: var(--ink-mid); line-height: 1.5;
}
@media (max-width:600px) {
  .ia-inline-cta a, .bf-inline-cta a { padding: 16px 18px; }
  .ia-inline-cta strong, .bf-inline-cta strong { font-size: 0.96rem; }
}