/* Skip link */
.skip {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus { position:fixed; left:16px; top:16px; width:auto; height:auto; background:#0f2733; color:#eaf4ff; padding:8px 12px; border-radius:8px; z-index:999; }

/* Shared */
.site-header .container,
.site-footer .container { width: min(1120px, 92vw); margin: 0 auto; }
.logo-img { height: 50px; width: 90px; display:inline-block; }
.brand { display:flex; align-items:center; gap:10px; color:#eaf4ff; text-decoration:none; font-weight:800; }
.brand-name { letter-spacing:.2px; }

/* ===== Bigger, visible logo ===== */
:root{
  /* Tweak these to taste */
  --header-height: 112px;                    /* taller header */
  --logo-height: clamp(44px, 5vw, 68px);     /* larger logo, responsive */
}

.site-header.simple{
  min-height: var(--header-height);
  background: rgba(10,24,32,.48);            /* visible even at top */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
:root {
  --header-height: 72px; /* or any value you prefer */
}
/* Make the logo render the same in all browsers */
.elementor-widget-theme-site-logo img,
.custom-logo-link img,
.custom-logo {
  height: 44px;     /* desktop visual size */
  width: auto;      /* keep aspect ratio */
  display: block;   /* avoids baseline/line-height quirks */
}
@media (max-width: 767px) {
  .elementor-widget-theme-site-logo img,
  .custom-logo-link img,
  .custom-logo { height: 36px; }
}

/* Optional: remove extra inline spacing around the link wrapper */
.custom-logo-link { line-height: 0; }
/* Bigger logo + taller header (no HTML changes) */
#cw-site-header .cw-logo img {
  height: 56px !important;   /* desktop logo size */
  width: auto !important;
  display: block;
}

#cw-site-header .cw-header-bar {
  min-height: 92px !important;   /* header height on desktop */
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* If you have the sticky shrink-on-scroll script, keep a bit of shrink */
body.cw-scrolled #cw-site-header .cw-header-bar {
  min-height: 76px !important;
}

/* Mobile sizes */
@media (max-width: 1100px) {
  #cw-site-header .cw-logo img { height: 44px !important; }
  #cw-site-header .cw-header-bar {
    min-height: 72px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Optional: subtle background behind logo (enable if you like) */
/*
#cw-site-header .cw-logo {
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(23,211,198,.12);
  box-shadow: 0 0 0 1px rgba(23,211,198,.2) inset;
}
*/

.site-header.simple .container{
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 22px 0;                           /* vertical breathing room */
}

/* Brand with contrast badge behind the logo */
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#eaf4ff; font-weight:800; }
.logo-badge{
  display:inline-grid; place-items:center;
  height: calc(var(--logo-height) + 18px);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(14,47,60,.9);             /* contrast plate */
  border: 1px solid #2a5568;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.logo-img{
  max-height: var(--logo-height); /* uses your responsive variable */
  width: auto;                    /* keeps aspect ratio */
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.55)); /* helps thin logos */
}
/* If your logo is dark-on-transparent, add class="logo-img logo-dark" in HTML */
.logo-img.logo-dark{
  filter: invert(1) brightness(1.2) drop-shadow(0 0 8px rgba(0,0,0,.45));
}

/* Optional: slightly larger brand text */
.brand-name{ font-size: clamp(20rem, 1.2vw, 1.25rem); letter-spacing:.2px; }

/* Ensure page background is dark (removes white bars) */
html, body{ margin:0; min-height:100%; background:#0a1820; color-scheme:dark; }
#hero{ scroll-margin-top: calc(var(--header-height) + 10px); }

:root {
  --logo-height: 100px; /* increase from default */
  --logo-width: 100px
}
.logo-img {
  height: var(--logo-height);
  width: 30px;
}


/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10, 24, 32, .55);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.site-header .container {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px;
  align-items: center; padding: 12px 0;
}

.nav { display:flex; gap:16px; justify-self:center; }
.nav a { color:#cfe8f7; text-decoration:none; padding:8px 6px; border-radius:8px; }
.nav a:hover { background:#0e2f3c; border:1px solid #2a5568; }
.nav a.active { color:#2ec4b6; text-shadow:0 0 12px rgba(46,196,182,.4); }

/* Buttons inside header/footer */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height: 46px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(46,196,182,.55);
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn.small { height: 38px; padding: 0 12px; border-radius: 10px; }
.btn.primary { background:#2ec4b6; color:#052226; }
.btn.ghost { background: transparent; color:#cfe8f7; border-color:#2a5568; }
.btn.block { display:block; text-align:center; }
.btn:hover { filter: brightness(1.08); }

/* Mobile menu */
.menu { display:none; width:40px; height:40px; background:transparent; border:1px solid #2a5568; border-radius:10px; cursor:pointer; position:relative; }
.menu span{position:absolute; left:9px; right:9px; height:2px; background:#cfe8f7; transition:transform .18s ease, top .18s ease, opacity .18s ease;}
.menu span:nth-child(1){ top:12px; }
.menu span:nth-child(2){ top:19px; }
.menu span:nth-child(3){ top:26px; }
.menu.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.menu.open span:nth-child(2){ opacity:0; }
.menu.open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

.mobile-nav {
  display:none; overflow:hidden;
  max-height:0; transition:max-height .25s ease;
  background: rgba(10,24,32,.9); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-nav.open { display:block; max-height:340px; }
.mobile-nav a { display:block; padding:12px 16px; color:#eaf4ff; text-decoration:none; border-top:1px solid rgba(255,255,255,.06); }
.mobile-nav .btn.block { margin:10px 16px; }

@media (max-width: 900px){
  .nav { display:none; }
  #header-cta { display:none; }
  .menu { display:block; justify-self:end; }
}

/* Base Reset */
/* HERO SECTION */
/* ===== HERO (dynamic) ===== */
.hero {
  --bg1: #0a1820; --bg2: #0b1c25;
  --ring: rgba(46,196,182,.18); --ring2: rgba(127,209,255,.12);
  --text: #eaf4ff; --muted: #a8c3d3;
  --line: #1d3f50; --accent: #2ec4b6;

  color: var(--text);
  background:
    radial-gradient(900px 400px at 20% 0%, var(--ring), transparent),
    radial-gradient(900px 400px at 80% 10%, var(--ring2), transparent),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  border-bottom: 1px solid #0e2a35;
  padding: clamp(36px, 8vw, 96px) 0;
}

.hero .container {
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
}
@media (max-width: 980px) { .hero .container { grid-template-columns: 1fr; } }

/* Left */
.flag-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0e2f3c;
  border: 1px solid #2a5568;
  color: #cfe8f7;
  font-weight: 700;
  margin-bottom: 10px;
}

.hero-title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.15;
  letter-spacing: .2px;
}
.hero-title #hero-rotator {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(46,196,182,.25);
  border-bottom: 3px solid rgba(46,196,182,.5);
}

.hero-sub { color: var(--muted); margin: 0 0 16px; max-width: 52ch; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(46,196,182,.55);
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--accent); color: #052226; }
.btn.ghost   { background: transparent; color: #cfe8f7; border-color: #2a5568; }
.btn:hover   { filter: brightness(1.08); }
.btn.tiny    { height: 34px; padding: 0 10px; border-radius: 10px; font-size: .92rem; }

.hero-actions { display: flex; gap: 10px; margin-bottom: 10px; }

.hero-badges { display: flex; gap: 8px; padding: 0; margin: 6px 0 0; list-style: none; }
.hero-badges li {
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid #2a5568; background: #0e2f3c; color: #cfe8f7;
  font-size: .9rem;
}

/* Right: live “Inbox Scanner” */
.hero-right { display: grid; justify-items: center; }
.scanner {
  width: min(540px, 100%);
  background: linear-gradient(180deg, #0f2733, #123242);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  padding: 12px;
}
.scn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.scn-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7fd1ff; box-shadow: 0 0 0 6px rgba(127,209,255,.08);
}
.scn-head .dot.new { animation: blink 2.2s infinite; }
.scn-title { color: #cfe8f7; font-weight: 700; margin-left: auto; }

.scn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.scn-item {
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #1c4759;
  background: #0e2f3c;
  cursor: pointer;
}
.scn-item .from { font-weight: 700; color: #eaf4ff; }
.scn-item .from span { color: #a8c3d3; font-weight: 400; margin-left: 6px; }
.scn-item .subj { color: #cfe8f7; margin-top: 2px; }

/* Active highlight + tooltip */
.scn-item.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(46,196,182,.5), 0 0 24px rgba(46,196,182,.18);
  background: #0f3542;
}
.scn-item::after {
  content: attr(data-tip);
  position: absolute; left: 12px; bottom: calc(100% + 10px);
  width: min(320px, 90vw);
  background: #0b2531; color: #e9f7ff;
  border: 1px solid #1f4f60; border-radius: 10px;
  padding: 10px 12px; font-size: .95rem; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px);
  pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.scn-item.is-on::after { opacity: 1; transform: translateY(0); }

.scn-foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.tip-hint { color: var(--muted); margin-left: auto; font-size: .92rem; }

@keyframes blink { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.25)} }

/* (If you still have sticky header, offset section anchors) */
html { scroll-behavior: smooth; }
#cw-demo2, #cw-scenarios, #faq { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
  .scn-head .dot.new, .scn-item::after, .btn { animation: none; transition: none; }
}
/* SECOND SECTION */

/* ============ Section 2 styles (scoped to #cw-demo2) ============ */
#cw-demo2 {
  /* Colors and typography */
  --bg: #0b1c25;
  --panel: #0f2733;
  --panel-2: #123242;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;   /* teal */
  --accent2: #7fd1ff;  /* light blue */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;

  /* Spacing “breathing room” tokens */
  --section-padding: clamp(40px, 7vw, 84px);
  --wrap-gap: clamp(28px, 4vw, 64px);            /* space between left and right columns */
  --card-padding: clamp(18px, 3.2vw, 24px);      /* padding inside the email card */
  --dots-mb: 14px;                               /* space under dots/score row */
  --list-gap: 12px;                              /* gap between checklist items */
  --list-mb: clamp(16px, 2.4vw, 28px);           /* space under checklist before CTAs */
  --actions-mt: clamp(24px, 3vw, 36px);          /* space above CTA buttons */
  --action-gap: 14px;                            /* gap between the two CTA buttons */
  --btn-height: 48px;                            /* taller buttons */
  --btn-px: 18px;                                /* wider buttons */
  --btn-radius: 12px;                            /* softer corners */
  --footer-pt: 16px;                             /* footer spacing inside card */
  --footer-mt: 16px;
}

#cw-demo2.cw2-section {
  font-family: var(--font);
  background: linear-gradient(180deg, #0a1820, var(--bg));
  color: var(--text);
  padding: var(--section-padding) 0;
  border-top: 1px solid #0e2a35;
}

#cw-demo2 .cw2-wrap {
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--wrap-gap);
  align-items: start;
}
@media (max-width: 900px) {
  #cw-demo2 .cw2-wrap { grid-template-columns: 1fr; }
}

/* Card */
#cw-demo2 .cw2-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--card-padding);
  overflow: visible; /* let tooltips show */
}
#cw-demo2 .cw2-header { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
#cw-demo2 .cw2-brand { display: flex; align-items: center; gap: 12px; }
#cw-demo2 .cw2-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 700;
  background: #0c3546; color: #cbe8ff; border: 1px solid var(--line);
}
#cw-demo2 .cw2-who strong { display: block; font-weight: 700; }
#cw-demo2 .cw2-m { color: var(--muted); font-size: .95rem; }
#cw-demo2 .cw2-subj { margin-top: 10px; color: #d9eefc; font-weight: 600; }
#cw-demo2 .cw2-body p { margin: 10px 0; }
#cw-demo2 .cw2-footer {
  display: flex; align-items: center; gap: 10px;
  padding-top: var(--footer-pt);
  margin-top: var(--footer-mt);
  border-top: 1px dashed var(--line);
}

/* Hotspots */
#cw-demo2 .cw2-spot {
  display: inline;
  background: none; border: 0; padding: 0 2px;
  color: #cde9ff;
  text-decoration: underline dotted var(--accent2);
  text-underline-offset: 3px;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  font: inherit;
}
#cw-demo2 .cw2-spot.linkish { color: #65c3ff; }
#cw-demo2 .cw2-spot:hover { filter: brightness(1.08); }
#cw-demo2 .cw2-spot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tooltip after a hotspot is found */
#cw-demo2 .cw2-spot.found {
  background: rgba(46,196,182,.15);
  box-shadow: 0 0 0 1px rgba(46,196,182,.6) inset;
}
#cw-demo2 .cw2-spot.found::after {
  content: attr(data-tip);
  position: absolute;
  left: 0; top: calc(100% + 10px);
  width: min(280px, 80vw);
  background: #0b2531;
  color: #e9f7ff;
  border: 1px solid #1f4f60;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: var(--shadow);
  z-index: 5;
  white-space: normal;
}

/* Right panel */
#cw-demo2 .cw2-panel h3 { margin: 0 0 6px; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }
#cw-demo2 .cw2-panel .sub { margin: 0 0 12px; color: var(--muted); }
#cw-demo2 .cw2-dots { display: flex; align-items: center; gap: 8px; margin-bottom: var(--dots-mb); }
#cw-demo2 .cw2-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #2d5465; background: transparent; }
#cw-demo2 .cw2-dot.done { background: var(--accent); border-color: var(--accent); }
#cw-demo2 .cw2-score { margin-left: 6px; color: var(--muted); font-size: .95rem; }

#cw-demo2 .cw2-list { list-style: none; padding: 0; margin: 8px 0 var(--list-mb); display: grid; gap: var(--list-gap); }
#cw-demo2 .cw2-item { display: flex; align-items: center; gap: 10px; color: #c6dbe7; }
#cw-demo2 .cw2-ico {
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid #2d5465; display: grid; place-items: center; font-weight: 800;
}
#cw-demo2 .cw2-item.done { color: #eafcf7; }
#cw-demo2 .cw2-item.done .cw2-ico { background: var(--accent); border-color: var(--accent); }
#cw-demo2 .cw2-item.done .cw2-ico::after { content: "✓"; color: #06252a; font-size: 12px; }

/* Buttons */
#cw-demo2 .cw2-actions { display: flex; gap: var(--action-gap); align-items: center; margin-top: var(--actions-mt); }
#cw-demo2 .cw2-btn {
  --bg: #183746; --br: #265a6e; --fg: #eaf4ff;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-height);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid var(--br); background: var(--bg); color: var(--fg);
  text-decoration: none; font-weight: 600; cursor: pointer;
}
#cw-demo2 .cw2-btn:hover { filter: brightness(1.08); }
#cw-demo2 .cw2-btn.primary { --bg: var(--accent); --br: rgba(46,196,182,.6); --fg: #052226; color: #052226; }
#cw-demo2 .cw2-btn.ghost { background: transparent; color: #cfe8f7; }

/* Ensure link-buttons don’t turn blue/purple */
#cw-demo2 a.cw2-btn,
#cw-demo2 a.cw2-btn:visited { color: var(--fg); text-decoration: none; }
#cw-demo2 a.cw2-btn.primary,
#cw-demo2 a.cw2-btn.primary:visited { color: #052226; }

#cw-demo2 .cw2-safe { font-size: .9rem; color: var(--muted); }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  #cw-demo2 .cw2-spot, #cw-demo2 .cw2-btn { transition: none; }
}

/* Section 2 (Micro Demo) – tooltip behavior like training */
#cw-demo2 .cw2-card { overflow: visible; } /* let tips overflow the card */
#cw-demo2 .cw2-body p { margin: 14px 0; }  /* a bit more line space */

/* Default state: hidden tooltip that won't block clicks */
#cw-demo2 .cw2-spot.found::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px); /* show ABOVE the hotspot */
  width: min(320px, 90vw);
  background: #0b2531;
  color: #e9f7ff;
  border: 1px solid #1f4f60;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 5;
  white-space: normal;
  pointer-events: none;       /* don’t block clicks on other hotspots */
  opacity: 0;                 /* hidden by default */
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Visible briefly after click */
#cw-demo2 .cw2-spot.found.show-tip::after {
  opacity: 1;
  transform: translateY(0);
}

/* ================= Section 2 (Micro Demo) – full CSS ================= */
/* Scoped to #cw-demo2 only */

#cw-demo2 {
  /* Theme */
  --bg: #0b1c25;
  --panel: #0f2733;
  --panel-2: #123242;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;   /* teal */
  --accent2: #7fd1ff;  /* light blue */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;

  --section-padding: clamp(40px, 7vw, 84px);
  --wrap-gap: clamp(28px, 4vw, 64px);
  --card-padding: clamp(18px, 3.2vw, 24px);
}

#cw-demo2 {
  background: linear-gradient(180deg, #0a1820, var(--bg));
  color: var(--text);
  padding: var(--section-padding) 0;
  border-top: 1px solid #0e2a35;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

#cw-demo2 .cw2-wrap {
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--wrap-gap);
  align-items: start;
}
@media (max-width: 900px) { #cw-demo2 .cw2-wrap { grid-template-columns: 1fr; } }

/* Left: email card */
#cw-demo2 .cw2-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--card-padding);
  overflow: visible; /* important: tooltips can overflow the card */
}

#cw-demo2 .cw2-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#cw-demo2 .cw2-brand { display: flex; align-items: center; gap: 12px; }
#cw-demo2 .cw2-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; background: #0c3546; color: #cbe8ff; border: 1px solid var(--line);
}
#cw-demo2 .cw2-who strong { display: block; font-weight: 700; }
#cw-demo2 .cw2-m { color: var(--muted); font-size: .95rem; }
#cw-demo2 .cw2-subj { margin-top: 10px; color: #d9eefc; font-weight: 600; }

#cw-demo2 .cw2-body p { margin: 14px 0; line-height: 1.5; }

#cw-demo2 .cw2-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px;
}
#cw-demo2 .cw2-safe { font-size: .9rem; color: var(--muted); }

/* Hotspots */
#cw-demo2 .cw2-spot {
  display: inline;
  background: none; border: 0; padding: 0 2px;
  color: #cde9ff; font: inherit; cursor: pointer;
  position: relative; border-radius: 6px;
  text-decoration: underline dotted var(--accent2); text-underline-offset: 3px;
}
#cw-demo2 .cw2-spot.linkish { color: #65c3ff; }
#cw-demo2 .cw2-spot:hover { filter: brightness(1.08); }
#cw-demo2 .cw2-spot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#cw-demo2 .cw2-spot.found {
  background: rgba(46,196,182,.15);
  box-shadow: 0 0 0 1px rgba(46,196,182,.6) inset;
}

/* Tooltip ABOVE, non-blocking, fades briefly when .show-tip is present */
#cw-demo2 .cw2-spot.found::after {
  /* force above even if older CSS had top: ... */
  top: auto !important;
  bottom: calc(100% + 10px) !important;

  content: attr(data-tip);
  position: absolute;
  left: 0;
  width: min(320px, 90vw);
  background: #0b2531;
  color: #e9f7ff;
  border: 1px solid #1f4f60;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: var(--shadow);
  z-index: 5;
  white-space: normal;

  pointer-events: none;      /* critical: don’t block other clicks */
  opacity: 0;                /* hidden by default */
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
#cw-demo2 .cw2-spot.found.show-tip::after {
  opacity: 1;
  transform: translateY(0);
}

/* Right: score + guidance */
#cw-demo2 .cw2-panel h3 { margin: 0 0 6px; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }
#cw-demo2 .cw2-panel .sub { margin: 0 0 12px; color: var(--muted); }

#cw-demo2 .cw2-dots { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#cw-demo2 .cw2-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #2d5465; background: transparent; }
#cw-demo2 .cw2-dot.done { background: var(--accent); border-color: var(--accent); }
#cw-demo2 .cw2-score { margin-left: 6px; color: var(--muted); font-size: .95rem; }

#cw-demo2 .cw2-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
#cw-demo2 .cw2-item { display: flex; align-items: center; gap: 10px; color: #c6dbe7; }
#cw-demo2 .cw2-ico {
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid #2d5465; display: grid; place-items: center; font-weight: 800; font-size: 12px;
}
#cw-demo2 .cw2-item.done { color: #eafcf7; }
#cw-demo2 .cw2-item.done .cw2-ico { background: var(--accent); border-color: var(--accent); }
#cw-demo2 .cw2-item.done .cw2-ico::after { content: "✓"; color: #06252a; }

/* Buttons */
#cw-demo2 .btn {
  --bg: #183746; --br: #265a6e; --fg: #eaf4ff;
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--br); background: var(--bg); color: var(--fg);
  text-decoration: none; font-weight: 700; cursor: pointer;
}
#cw-demo2 .btn:hover { filter: brightness(1.08); }
#cw-demo2 .btn.primary { --bg: var(--accent); --br: rgba(46,196,182,.6); --fg: #052226; color: #052226; }
#cw-demo2 .btn.ghost { background: transparent; color: #cfe8f7; border-color: #2a5568; }
#cw-demo2 .btn.reset { height: 34px; padding: 0 10px; font-size: .9rem; background: transparent; color: #b9d1df; border-color: #2a5568; }
#cw-demo2 .btn.reset:hover { color: #eaf4ff; border-color: #3b6f86; }

@media (prefers-reduced-motion: reduce) {
  #cw-demo2 .cw2-spot::after, #cw-demo2 .btn { transition: none; }
}
/* ============ Section 3 styles (scoped to #cw-scenarios) ============ */
#cw-scenarios {
  --bg: #0b1c25;
  --panel: #0f2733;
  --panel-2: #123242;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;
  --accent2: #7fd1ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;

  --section-padding: clamp(40px, 7vw, 84px);
  --grid-gap: clamp(16px, 2.4vw, 24px);
  --card-pad: clamp(16px, 2.6vw, 22px);
  --card-radius: 16px;
  --btn-h: 44px;
  --btn-r: 12px;
}

#cw-scenarios.cw3-section {
  background: linear-gradient(180deg, var(--bg), #0a1820);
  color: var(--text);
  padding: var(--section-padding) 0;
  border-top: 1px solid #0e2a35;
}

#cw-scenarios .cw3-wrap {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

#cw-scenarios .cw3-head { margin-bottom: clamp(18px, 3vw, 28px); }
#cw-scenarios .cw3-head h2 { margin: 0 0 6px 0; font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.8rem); }
#cw-scenarios .cw3-head .sub { margin: 0; color: var(--muted); }

#cw-scenarios .cw3-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { #cw-scenarios .cw3-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { #cw-scenarios .cw3-grid { grid-template-columns: 1fr; } }

#cw-scenarios .cw3-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: var(--card-pad);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* whole card clickable (JS enhances) */
  outline: none;
}
#cw-scenarios .cw3-card:hover {
  transform: translateY(-2px);
  transition: transform .16s ease, box-shadow .16s ease;
}
#cw-scenarios .cw3-card:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 60%, transparent), var(--shadow);
}

#cw-scenarios .cw3-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  color: #bdefff; background: #0c3546; border: 1px solid var(--line);
}
#cw-scenarios .cw3-card h3 { margin: 6px 0 0; font-size: 1.05rem; }
#cw-scenarios .cw3-card p { margin: 0; color: #d5e9f5; }
#cw-scenarios .cw3-points { margin: 6px 0 0; padding-left: 18px; color: #c7dbe7; }
#cw-scenarios .cw3-points li { margin: 4px 0; }

#cw-scenarios .cw3-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; color: var(--muted);
}
#cw-scenarios .cw3-meta .sep {
  width: 4px; height: 4px; border-radius: 999px; background: #2b5668; display: inline-block;
}
#cw-scenarios .tag {
  font-size: .82rem; padding: 4px 8px; border-radius: 999px;
  border: 1px solid #2b5668; background: #0e2f3c; color: #cfe8f7;
}
#cw-scenarios .tag-begin { border-color: #2c6f66; background: #0c3530; color: #cbfff5; }
#cw-scenarios .tag-int   { border-color: #2b5668; background: #0c3546; color: #cbe8ff; }
#cw-scenarios .tag-adv   { border-color: #6f2c3f; background: #3a0e1a; color: #ffd6e3; }

#cw-scenarios .cw3-btn {
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h); padding: 0 14px; border-radius: var(--btn-r);
  border: 1px solid rgba(46,196,182,.55);
  background: var(--accent); color: #052226; font-weight: 700;
  text-decoration: none;
}
#cw-scenarios .cw3-btn:hover { filter: brightness(1.08); }
#cw-scenarios .cw3-btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  #cw-scenarios .cw3-card:hover, #cw-scenarios .cw3-btn:active { transform: none; }
}





/* ================== Training Page (training.html) ================== */
/* Scoped to #cw-training (steps/lesson) and #cwt-picker (scenario picker) */

#cw-training,
#cwt-picker {
  /* Theme */
  --bg: #0b1c25;
  --panel: #0f2733;
  --panel-2: #123242;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;   /* teal */
  --accent2: #7fd1ff;  /* light blue */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;

  /* Spacing */
  --section-ptb: clamp(44px, 7vw, 92px);
  --wrap-gap: clamp(24px, 3vw, 40px);
  --head-mb: clamp(24px, 3vw, 40px);
  --card-pad: clamp(16px, 2.8vw, 22px);
  --btn-h: 46px;
  --btn-r: 12px;
  --btn-px: 16px;
}

/* Back link */
.cwt-back {
  display: inline-block;
  margin: 10px 4vw 0;
  color: #a8c3d3;
  text-decoration: none;
}
.cwt-back:hover { color: #d6ecf9; }

/* Section shells */
#cw-training.cwt-section,
#cwt-picker {
  background: linear-gradient(180deg, #0a1820, var(--bg));
  color: var(--text);
  padding: var(--section-ptb) 0;
  font-family: var(--font);
  border-top: 1px solid #0e2a35;
}

#cw-training .cwt-wrap,
#cwt-picker .cwt-wrap {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

#cw-training .cwt-head { margin-bottom: var(--head-mb); }
#cw-training .cwt-head h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
#cw-training .cwt-head .sub { color: var(--muted); margin: 6px 0 0; }

/* Steps indicator */
#cw-training .cwt-steps {
  display: flex; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0;
}
#cw-training .cwt-steps .step {
  padding: 6px 10px; border: 1px solid #254c5e; border-radius: 999px; color: #cfe8f7;
  font-size: .92rem; opacity: .75;
}
#cw-training .cwt-steps .step.is-active { border-color: var(--accent); background: var(--accent); color: #052226; opacity: 1; }

/* Content grid (steps) */
#cw-training .cwt-content { display: grid; gap: var(--wrap-gap); }
#cw-training .cwt-step.is-hidden { display: none; }

/* Card */
#cw-training .cwt-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--card-pad);
  overflow: visible; /* allow tooltips to overflow */
}

/* Simulated message */
#cw-training .cwt-message-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#cw-training .cwt-avatar {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: #0c3546; color: #cbe8ff; border: 1px solid var(--line); font-weight: 700;
}
#cw-training .cwt-meta { color: var(--muted); font-size: .95rem; }
#cw-training .cwt-subject { margin-top: 8px; font-weight: 600; color: #d9eefc; }
#cw-training .cwt-body p { margin: 14px 0; line-height: 1.5; }

/* Hotspots in message */
#cw-training .cwt-spot {
  display: inline; background: none; border: 0; padding: 0 2px;
  color: #cde9ff; font: inherit; cursor: pointer; position: relative; border-radius: 6px;
  text-decoration: underline dotted var(--accent2); text-underline-offset: 3px;
}
#cw-training .cwt-spot.linkish { color: #65c3ff; }
#cw-training .cwt-spot:hover { filter: brightness(1.08); }
#cw-training .cwt-spot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cw-training .cwt-spot.found { background: rgba(46,196,182,.15); box-shadow: 0 0 0 1px rgba(46,196,182,.6) inset; }

/* Tooltip ABOVE, non-blocking, visible only when .show-tip is present */
#cw-training .cwt-spot.found::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(320px, 90vw);
  background: #0b2531; color: #e9f7ff; border: 1px solid #1f4f60;
  border-radius: 10px; padding: 10px 12px; font-size: .95rem; line-height: 1.35; box-shadow: var(--shadow);
  z-index: 5; white-space: normal; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease;
}
#cw-training .cwt-spot.found.show-tip::after { opacity: 1; transform: translateY(0); }

/* Step 1: progress */
#cw-training .cwt-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
#cw-training .dots { display: flex; gap: 8px; }
#cw-training .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #2d5465; background: transparent; }
#cw-training .dot.done { background: var(--accent); border-color: var(--accent); }
#cw-training .score { color: var(--muted); }

/* Step 1: Quick Check link row (hidden until .show is added by JS) */
#cw-training .quick-check {
  margin: 8px 0 4px; display: none; align-items: center; gap: 8px; flex-wrap: wrap; color: #cfe8f7;
}
#cw-training .quick-check.show { display: inline-flex; }
#cw-training .quick-check a { color: #bdefff; text-decoration: underline; text-underline-offset: 3px; }

/* Step 2: quiz */
#cw-training .cwt-quiz { display: grid; gap: 14px; }
#cw-training .cwt-q { padding: 12px; border: 1px solid #244656; border-radius: 12px; background: #0e2f3c; }
#cw-training .cwt-q h4 { margin: 0 0 8px; font-size: 1rem; color: #eaf4ff; }
#cw-training .cwt-q label {
  display: block; margin: 6px 0; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer; color: #cfe8f7;
}
/* Answer highlighting */
#cw-training .cwt-q label.is-answer { border-color: rgba(46,196,182,.7); background: rgba(46,196,182,.12); }
#cw-training .cwt-q label.is-correct { border-color: rgba(46,196,182,.9); background: rgba(46,196,182,.25); }
#cw-training .cwt-q label.is-wrong { border-color: rgba(255,119,87,.85); background: rgba(255,119,87,.18); }
#cw-training .cwt-quiz-result { margin-top: 8px; color: #cfe8f7; }

/* Step 3: tips */
#cw-training .cwt-tips { margin: 8px 0 0; padding-left: 18px; color: #cfe8f7; }
#cw-training .cwt-tips li { margin: 6px 0; }

/* Actions */
#cw-training .cwt-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
#cw-training .cwt-btn {
  display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h);
  padding: 0 var(--btn-px); border-radius: var(--btn-r); font-weight: 700; cursor: pointer;
  border: 1px solid rgba(46,196,182,.55); background: var(--panel); color: #cfe8f7; text-decoration: none;
}
#cw-training .cwt-btn.primary { background: var(--accent); color: #052226; }
#cw-training .cwt-btn[disabled] { opacity: .6; cursor: not-allowed; }
#cw-training .cwt-btn.ghost[disabled] { opacity: .5; pointer-events: none; }

/* External link checker (Step 3 panel) */
#cw-training .ext-check {
  margin-top: 12px; background: linear-gradient(180deg, #0f2733, #123242);
  border: 1px solid #1d3f50; border-radius: 12px; padding: 12px;
}
#cw-training .ext-sub { margin: 4px 0 10px; color: #a8c3d3; }
#cw-training .ext-row { display: grid; gap: 10px; }
#cw-training #ext-input {
  height: 42px; border-radius: 10px; border: 1px solid #244656;
  background: #0e2f3c; color: #eaf4ff; padding: 0 12px; outline: none;
}
#cw-training #ext-input::placeholder { color: #98b6c7; }
#cw-training .ext-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#cw-training .btn.ext {
  height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(46,196,182,.55); background: #183746; color: #eaf4ff;
}
#cw-training .btn.ext:hover { filter: brightness(1.08); }
#cw-training .ext-note { color: #a8c3d3; }
#cw-training .ext-more { margin-top: 8px; color: #cfe8f7; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#cw-training .ext-more a { color: #bdefff; text-decoration: underline; text-underline-offset: 3px; }
#cw-training .ext-more .sep { opacity: .6; }

/* Scenario picker */
#cwt-picker .cwt-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { #cwt-picker .cwt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { #cwt-picker .cwt-grid { grid-template-columns: 1fr; } }
#cwt-picker .cwt-pick {
  display: block; padding: 14px; border-radius: 12px; border: 1px solid #254c5e;
  background: #0f2733; color: #eaf4ff; text-decoration: none; text-align: center; font-weight: 700; box-shadow: var(--shadow);
}
#cwt-picker .cwt-pick:hover { filter: brightness(1.08); }

/* Utilities */
.is-hidden { display: none !important; }
.h4 { font-size: 1.1rem; margin: 0 0 8px; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce) {
  #cw-training .cwt-spot::after, #cw-training .cwt-btn, #cw-training .btn.ext { transition: none; }
}


/* =============== Section 4: How It Works =============== */
#how {
  /* Theme tokens (tweak these) */
  --bg: #0b1c25;
  --panel: #0f2733;
  --panel-2: #123242;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;   /* teal */

  --section-ptb: clamp(44px, 7vw, 92px);
  --container-w: min(1120px, 92vw);
  --gap: clamp(18px, 2.6vw, 28px);
  --card-pad: clamp(16px, 2.6vw, 22px);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

#how.how {
  background: linear-gradient(180deg, var(--bg), #0a1820);
  color: var(--text);
  padding: var(--section-ptb) 0;
  border-top: 1px solid #0e2a35;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

#how .container {
  width: var(--container-w);
  margin: 0 auto;
}

#how .head { margin-bottom: clamp(20px, 3vw, 36px); }
#how .head h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.8rem); }
#how .head .sub { margin: 0; color: var(--muted); }

#how .steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { #how .steps { grid-template-columns: 1fr; } }

#how .step {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--card-pad);
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 160px;
  transition: transform .16s ease, box-shadow .16s ease;
}
#how .step:hover { transform: translateY(-2px); }

#how .icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  color: #bdefff; background: #0c3546; border: 1px solid var(--line);
}

#how h3 { margin: 4px 0 0; font-size: 1.05rem; }
#how p { margin: 0; color: #cfe8f7; }

#how .actions {
  margin-top: clamp(22px, 3vw, 34px);
  display: flex; gap: 12px; align-items: center;
}

/* Buttons (scoped) */
#how .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 16px; border-radius: 12px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(46,196,182,.55);
  background: #183746; color: #eaf4ff;
}
#how .btn.primary { background: var(--accent); color: #052226; }
#how .btn.ghost { background: transparent; color: #cfe8f7; border-color: #2a5568; }
#how .btn:hover { filter: brightness(1.08); }
#how .btn:active { transform: translateY(1px); }


/* Section 5: Privacy & Safety — clean flat rows (no tall lines) */
#privacy {
  --bg: #0b1c25;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;

  --section-ptb: clamp(44px, 7vw, 92px);
  --container-w: min(1120px, 92vw);
  --row-gap: clamp(14px, 2.2vw, 22px);
  --col-gap: clamp(18px, 2.6vw, 28px);
}

#privacy.privacy-lines {
  background: linear-gradient(180deg, var(--bg), #0a1820);
  color: var(--text);
  padding: var(--section-ptb) 0;
  border-top: 1px solid #0e2a35;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

#privacy .container {
  width: var(--container-w);
  margin: 0 auto;
}

/* Header */
#privacy .head { margin-bottom: clamp(16px, 2.4vw, 28px); }
#privacy .head h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.8rem); }
#privacy .head .sub { margin: 0; color: var(--muted); }

/* Quick badges under the subhead */
#privacy .badges {
  margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
#privacy .badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #2a5568;
  background: #0e2f3c;
  color: #cfe8f7;
  font-size: .9rem;
}

/* Grid list (two columns on desktop) */
#privacy .list {
  list-style: none;
  padding: 0;
  margin: clamp(16px, 2.6vw, 24px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--row-gap) var(--col-gap);
}
@media (max-width: 900px) { #privacy .list { grid-template-columns: 1fr; } }

/* Item row: icon + content, with gentle hover (no box borders) */
#privacy .item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  column-gap: var(--col-gap);
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  transition: background .18s ease;
}
#privacy .item:hover {
  background: rgba(13, 52, 70, .22); /* very soft, keeps it "flat" */
}

/* Icon bubble */
#privacy .icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: #0c3546; border: 1px solid #1d3f50; color: #bdefff;
}

/* Content */
#privacy h3 { margin: 0 0 4px; font-size: 1.05rem; }
#privacy p  { margin: 0; color: #cfe8f7; }
#privacy .points {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #c7dbe7;
  list-style: disc;
}
#privacy .points li { margin: 4px 0; }

/* “More about …” details */
#privacy .more {
  margin-top: clamp(18px, 2.2vw, 24px);
  border: 1px solid #244656;
  border-radius: 12px;
  padding: 10px 12px;
  background: #0e2f3c;
}
#privacy .more > summary {
  cursor: pointer; color: #eaf4ff; font-weight: 600; list-style: none;
}
#privacy .more > summary::-webkit-details-marker { display: none; }
#privacy .more .more-body { margin-top: 8px; color: #cfe8f7; }
#privacy .more .more-body ul { margin: 0; padding-left: 18px; }

/* Actions (keep subtle; avoid another big "Start" button here) */
#privacy .actions {
  margin-top: clamp(20px, 3vw, 32px);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
#privacy .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 14px; border-radius: 12px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid #2a5568; background: transparent; color: #cfe8f7;
}
#privacy .btn:hover { filter: brightness(1.08); }
#privacy .link { color: #bdefff; text-decoration: underline; text-underline-offset: 3px; }

/* Fix: remove bullets and indent from the badges row */
#privacy .badges {
  list-style: none;    /* no bullets */
  margin: 10px 0 0;
  padding-left: 0;     /* remove left indent */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Belt-and-suspenders for browsers that still render markers */
#privacy .badges li { list-style: none; }
#privacy .badges li::marker { content: ""; }

/* =============== Section 6: FAQ =============== */
#faq {
  --bg: #0b1c25;
  --panel: #0f2733;
  --panel-2: #123242;
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --line: #1d3f50;
  --accent: #2ec4b6;

  --section-ptb: clamp(44px, 7vw, 92px);
  --container-w: min(1120px, 92vw);
  --gap: clamp(14px, 2.2vw, 22px);
  --pad: clamp(14px, 2.4vw, 20px);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

#faq.faq {
  background: linear-gradient(180deg, var(--bg), #0a1820);
  color: var(--text);
  padding: var(--section-ptb) 0;
  border-top: 1px solid #0e2a35;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

#faq .container { width: var(--container-w); margin: 0 auto; }
#faq .head { margin-bottom: clamp(20px, 3vw, 36px); }
#faq .head h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.8rem); }
#faq .head .sub { margin: 0; color: var(--muted); }

/* Search */
#faq .search { margin-top: 12px; }
#faq .search input[type="search"] {
  width: min(520px, 100%);
  height: 42px;
  border-radius: 10px;
  border: 1px solid #244656;
  background: #0e2f3c;
  color: #eaf4ff;
  padding: 0 12px;
  outline: none;
}
#faq .search input[type="search"]::placeholder { color: #98b6c7; }

/* Grid */
#faq .grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) { #faq .grid { grid-template-columns: 1fr; } }

#faq .item {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
}

/* Question row */
#faq .item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  color: #eaf4ff;
  font-weight: 700;
}
#faq .item > summary::-webkit-details-marker { display: none; }

/* Chevron */
#faq .item > summary::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid #cfe8f7;
  border-bottom: 2px solid #cfe8f7;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
#faq .item[open] > summary::after { transform: rotate(45deg); }

/* Answer */
#faq .answer { margin-top: 8px; color: #cfe8f7; line-height: 1.5; }
#faq .answer p { margin: 0; }

/* Actions */
#faq .actions {
  margin-top: clamp(22px, 3vw, 34px);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
#faq .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 16px; border-radius: 12px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(46,196,182,.55);
}
#faq .btn.primary { background: var(--accent); color: #052226; }
#faq .btn.ghost   { background: transparent; color: #cfe8f7; border-color: #2a5568; }
#faq .btn:hover   { filter: brightness(1.08); }

/* No results helper (used by search JS) */
#faq .no-results {
  margin-top: 10px;
  color: #cfe8f7;
  opacity: .85;
}


/* =============== Section 7: Final CTA Band =============== */
#cta {
  --bg: #08202a;         /* base */
  --glow: rgba(46,196,182,.18);
  --text: #eaf4ff;
  --muted: #a8c3d3;
  --accent: #2ec4b6;

  --ptb: clamp(28px, 6vw, 56px);
  --container: min(1120px, 92vw);
  --btn-h: 46px; --btn-r: 12px; --btn-px: 16px;
}

#cta.cta {
  background:
    radial-gradient(1200px 500px at 15% 0%, var(--glow), transparent),
    radial-gradient(900px 400px at 85% 20%, rgba(127,209,255,.12), transparent),
    var(--bg);
  color: var(--text);
  padding: var(--ptb) 0;
  border-top: 1px solid #0e2a35;
  text-align: center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

#cta .container { width: var(--container); margin: 0 auto; }

#cta .copy h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.9rem); }
#cta .copy .sub { margin: 0; color: #cfe8f7; opacity: .95; }

#cta .actions {
  margin-top: clamp(16px, 3vw, 24px);
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
}

#cta .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--btn-r);
  font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(46,196,182,.55);
}
#cta .btn.primary { background: var(--accent); color: #052226; }
#cta .btn.ghost   { background: transparent; color: #cfe8f7; border-color: #2a5568; }
#cta .btn:hover   { filter: brightness(1.08); }

#cta .badges {
  margin: clamp(12px, 2.5vw, 18px) 0 0;
  padding: 0; list-style: none;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
#cta .badge {
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid #2a5568; background: #0e2f3c; color: #cfe8f7; font-size: .9rem;
}

/* Hide all badges by default */
.badges, .badge { display: none !important; }

/* Show badges ONLY in these sections (keep what matches your hero) */
#cta .badges { display: flex !important; }
#cta .badge  { display: inline-flex !important; }

/* If your hero has one of these, badges will show there; keep the correct one and delete the rest */
#hero .badges,
.hero .badges,
#home-hero .badges,
header.hero .badges { display: flex !important; }

#hero .badge,
.hero .badge,
#home-hero .badge,
header.hero .badge { display: inline-flex !important; }


/* ===== Simulation Lab (lab.html) — Section 1: Your Path & Progress ===== */
#lab { background: #0a1820; color: #eaf4ff; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif; }
#lab .container { width: min(1120px, 92vw); margin: 0 auto; }

/* Section wrapper */
#lab .path {
  padding: clamp(44px, 7vw, 92px) 0;
  background: linear-gradient(180deg, #0a1820, #0b1c25);
  border-top: 1px solid #0e2a35;
}
#lab .path .head { margin-bottom: clamp(18px, 3vw, 28px); }
#lab .path .head h1 { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + 1.2vw, 2rem); }
#lab .path .head .sub { margin: 0; color: #a8c3d3; }

/* Grid */
#lab .path .row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}
@media (max-width: 980px) { #lab .path .row { grid-template-columns: 1fr; } }

/* Cards */
#lab .path .card {
  background: linear-gradient(180deg, #0f2733 0%, #123242 100%);
  border: 1px solid #1d3f50;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: clamp(16px, 2.6vw, 22px);
}

/* Ring */
#lab .ring { position: relative; width: 180px; height: 180px; margin: 4px auto 8px; }
#lab .ring .ring-gfx {
  --val: 0deg;
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(farthest-side, #0a1820 70%, transparent 71%),
    conic-gradient(#2ec4b6 0 var(--val), #123242 var(--val) 360deg);
  transition: background .4s ease;
}
#lab .ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: #eafcf7; }
#lab .ring-card .muted { text-align: center; color: #a8c3d3; }

/* Stats */
#lab .stats { display: grid; gap: 10px; align-content: start; }
#lab .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#lab .stat .label { color: #a8c3d3; }
#lab .stat .value { font-weight: 700; }

/* Buttons / links */
#lab .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 16px; border-radius: 12px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(46,196,182,.55);
}
#lab .btn.primary { background: #2ec4b6; color: #052226; }
#lab .btn.ghost   { background: transparent; color: #cfe8f7; border-color: #2a5568; }
#lab .btn.danger  { background: transparent; color: #ffd6e3; border-color: #6f2c3f; }
#lab .btn:hover   { filter: brightness(1.08); }
#lab .tiny { font-size: .9rem; }
#lab .muted { color: #a8c3d3; }

#lab .ctas { display: grid; gap: 10px; align-content: start; }
#lab .controls { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Training • Scenario picker heading spacing and separation */
#cwt-picker #cwt-pick-title {
  margin: 0;                 /* reset any odd margins */
  line-height: 1.15;
  letter-spacing: .2px;
}

/* Optional: a small accent bar under the heading (remove this block if you don't want it) */
#cwt-picker #cwt-pick-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: #2ec4b6;       /* matches your accent */
  border-radius: 3px;
  margin-top: 10px;
  opacity: .85;
}

/* Force extra space between the heading and the grid */
#cwt-picker #cwt-pick-title + .cwt-grid {
  margin-top: clamp(28px, 2.5vw, 52px);
}

/* A bit more vertical breathing room between grid rows */
#cwt-picker .cwt-grid {
  row-gap: clamp(18px, 1.8vw, 32px);
}


.site-footer {
  background: linear-gradient(180deg, #0b1c25, #081821);
  border-top: 1px solid #0e2a35;
  color: #eaf4ff;
  margin-top: clamp(28px, 6vw, 56px);
}
.site-footer .grid {
  display: grid; gap: 16px; padding: 24px 0;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
@media (max-width: 900px){ .site-footer .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .site-footer .grid { grid-template-columns: 1fr; } }

.site-footer h4 { margin: 0 0 8px; font-size: 1.05rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: #cfe8f7; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .muted { color: #a8c3d3; }

.social { display:flex; gap:10px; }
.social .ico {
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:10px; background:#0e2f3c; border:1px solid #2a5568; color:#bdefff; text-decoration:none;
}
.social .ico:hover { filter: brightness(1.1); }

.site-footer .bar { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer .bar-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 0; color: #cfe8f7;
}
.site-footer .to-top { color: #bdefff; text-decoration: none; }
.site-footer .to-top:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Global fixes: remove white gaps, set dark page background ===== */
html, body {
  margin: 0;
  min-height: 100%;
  background: #0a1820;         /* dark page background everywhere */
  color-scheme: dark;           /* nicer native controls */
}
* { box-sizing: border-box; }
img { max-width: 100%; display: block; } /* avoid inline-image white gaps */

/* If you use sections with no background, keep them transparent */
section { background: transparent; }

/* ===== Header (always tinted, then stronger on scroll) ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,24,32,.40);      /* tint even at top to avoid white showing */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(10,24,32,.58);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.site-header .container {
  width: min(1120px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px;
  align-items: center; padding: 12px 0;
}

/* Brand + logo (prevent double text crowding) */
.brand { display: flex; align-items: center; gap: 10px; color: #eaf4ff; text-decoration: none; font-weight: 800; }
.logo-img { height: 26px; width: auto; object-fit: contain; }
.brand-name { letter-spacing: .2px; }

/* Desktop nav */
.nav { display: flex; gap: 16px; justify-self: center; }
.nav a { color:#cfe8f7; text-decoration:none; padding:8px 6px; border-radius:8px; }
.nav a:hover { background:#0e2f3c; border:1px solid #2a5568; }
.nav a.active { color:#2ec4b6; text-shadow:0 0 12px rgba(46,196,182,.4); }

/* Buttons in header/footer */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height: 46px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(46,196,182,.55);
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn.small { height: 38px; padding: 0 12px; border-radius: 10px; }
.btn.primary { background:#2ec4b6; color:#052226; }
.btn.ghost { background: transparent; color:#cfe8f7; border-color:#2a5568; }
.btn:hover { filter: brightness(1.08); }

/* Mobile menu */
.menu { display:none; width:40px; height:40px; background:transparent; border:1px solid #2a5568; border-radius:10px; position:relative; cursor:pointer; }
.menu span{position:absolute; left:9px; right:9px; height:2px; background:#cfe8f7; transition:transform .18s ease, top .18s ease, opacity .18s ease;}
.menu span:nth-child(1){ top:12px; }
.menu span:nth-child(2){ top:19px; }
.menu span:nth-child(3){ top:26px; }
.menu.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.menu.open span:nth-child(2){ opacity:0; }
.menu.open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

.mobile-nav {
  display:none; overflow:hidden;
  max-height:0; transition:max-height .25s ease;
  background: rgba(10,24,32,.92); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-nav.open { display:block; max-height:340px; }
.mobile-nav a { display:block; padding:12px 16px; color:#eaf4ff; text-decoration:none; border-top:1px solid rgba(255,255,255,.06); }
.mobile-nav .btn.block { display:block; margin:10px 16px; text-align:center; }

@media (max-width: 900px){
  .nav { display:none; }
  #header-cta { display:none; }
  .menu { display:block; justify-self:end; }
}

/* ===== Footer ===== */
.site-footer {
  background: linear-gradient(180deg, #0b1c25, #081821);
  border-top: 1px solid #0e2a35;
  color: #eaf4ff;
  margin-top: clamp(28px, 6vw, 56px);
}
.site-footer .container { width: min(1120px, 92vw); margin: 0 auto; }
.site-footer .grid { display: grid; gap: 16px; padding: 24px 0; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
@media (max-width: 900px){ .site-footer .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .site-footer .grid { grid-template-columns: 1fr; } }
.site-footer h4 { margin: 0 0 8px; font-size: 1.05rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: #cfe8f7; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .muted { color: #a8c3d3; }

.social { display:flex; gap:10px; }
.social .ico { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#0e2f3c; border:1px solid #2a5568; color:#bdefff; text-decoration:none; }
.social .ico:hover { filter: brightness(1.1); }

.site-footer .bar { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer .bar-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 0; color: #cfe8f7; }

/* ===== Optional: offset for sticky header if anchors jump under it ===== */
#hero, #cw-demo2, #cw-scenarios, #privacy, #faq { scroll-margin-top: 80px; }

/* Bigger logo + taller header — matches your classes */
:root{
  --headerH: 92px;   /* desktop header height */
  --headerH-m: 72px; /* mobile header height */
  --logoH: 56px;     /* desktop logo height */
  --logoH-m: 44px;   /* mobile logo height */
}

/* Header container height/padding */
header.site-header .container{
  min-height: var(--headerH) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Logo size (your <img class="logo-img">) */
header.site-header .logo-img{
  height: var(--logoH) !important;
  width: auto !important;
  max-height: none !important;
  display: block;            /* avoids baseline gaps */
}

/* Optional: remove extra inline spacing around the logo link */
header.site-header .brand{ line-height: 0; display: inline-flex; align-items: center; }

/* Mobile sizes */
@media (max-width: 1100px){
  header.site-header .container{
    min-height: var(--headerH-m) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  header.site-header .logo-img{
    height: var(--logoH-m) !important;
  }
}

/* Optional (if you want a soft background behind the logo, uncomment)
header.site-header .brand{
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(23,211,198,.12);
  box-shadow: 0 0 0 1px rgba(23,211,198,.18) inset;
}
*/