/* kd_website site overrides for the v5 rebuild:
   - single-column hero (v5's hero workspace was removed; the movie is its own section)
   - nav Contact button + logged-in nav links
   - cookie-consent banner (carried over from kd_website), styled in v5's dark theme */

/* ===== Two-page hero (approved 2026-07-16 proposal) =====
   Page 1: full-screen centered pitch (bigger headline, new lead copy,
   "Apply for Pilot Access" CTA, roomier trust chips, "press play" strip).
   Page 2: "Inside the KleverDeck Workspace" — the kd movie window, untouched,
   as its own full-screen section. Both use v5's base 100vh scroll-snap. */
.hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero-copy { margin-inline: auto; text-align: center; }
.hero-copy .accent-line { margin-inline: auto; }
.hero-copy .lead { margin-inline: auto; max-width: 50rem; }
.hero-actions,
.hero-badges { justify-content: center; }

.hero-centered h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  margin-bottom: 0.25em;
}
.hero-centered .hero-slogan {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  margin: 0.6rem 0 1.1rem;
}
.hero-centered .accent-line { margin-bottom: 1.8rem; }
.hero-centered .lead {
  /* Wide enough that the second sentence renders on a single line on desktop */
  max-width: 53rem;
  font-size: 1.06rem;
}
.hero-centered .hero-actions { margin: 1.8rem 0 2rem; }
.hero-centered .hero-badges { gap: 1rem; flex-wrap: wrap; }

/* Larger, friendlier trust chips (sans-serif, roomier padding) */
.hero-centered .hero-badges li {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  gap: 0.6rem;
  padding: 0.78rem 1.5rem;
  border-radius: 12px;
  border-color: rgba(120, 140, 220, 0.28);
  background: rgba(8, 10, 26, 0.7);
}
.hero-centered .hero-badges svg { width: 18px; height: 18px; }

/* "Press play" strip beneath the chips — scrolls to the movie and starts it */
.hero-play-strip {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  /* Shrink-to-fit the caption and stay centered, instead of a fixed 660px
     box that leaves empty space after short text */
  width: fit-content;
  max-width: 100%;
  margin: 2.4rem auto 0;
  padding: 0.95rem 1.5rem;
  border: 1px solid rgba(120, 140, 220, 0.32);
  border-radius: 16px;
  background: rgba(9, 10, 28, 0.55);
  color: var(--text);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-play-strip:hover {
  border-color: rgba(45, 212, 255, 0.5);
  box-shadow: 0 0 26px rgba(45, 212, 255, 0.14);
  transform: translateY(-2px);
}
.play-ring { width: 52px; height: 52px; flex-shrink: 0; }

/* Movie band (page 2): centered head, window sized so head + movie share one screen */
#movieSection .section-head { max-width: none; text-align: center; }
/* No width cap: the intro line stays on one line on desktop (wraps naturally
   on narrower screens via the container) */
#movieSection .section-sub { max-width: none; margin-inline: auto; }
#movieSection .hero-workspace { width: min(1120px, 100%); margin-inline: auto; }

@media (min-width: 1101px) {
  /* Cap the movie's width by viewport height (fixed 1560:900 canvas) so the
     whole section — heading + window — fits its snapped screen. */
  #movieSection .hero-workspace {
    width: min(1120px, 100%, calc((100vh - 365px) * 1.7333));
  }

  /* Chromium cancels SMOOTH anchor scrolls inside a mandatory-snap container
     (the animation is re-snapped to the current section, so nav links never
     arrive and the target section sits misaligned below the previous one).
     Instant jumps land exactly on the section's snap point — each section then
     fills its own screen with no bleed. Wheel/trackpad snapping is unaffected. */
  html { scroll-behavior: auto; }

  /* The closing CTA shares its window with the footer: "Join the Movement"
     gives up exactly the footer's height (~95px) so both fit one screen and
     the page ends without an extra scroll step. */
  main > #pilot.section { min-height: calc(100vh - 95px); }
}

/* Short desktop windows: tighten the hero so page 1 still fits one screen */
@media (min-width: 1101px) and (max-height: 760px) {
  .hero-centered h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
  .hero-centered .hero-actions { margin: 1.2rem 0 1.4rem; }
  .hero-play-strip { margin-top: 1.5rem; }
}

/* Uniform page background: the alternating raised bands ("How It Works",
   "Target Sectors") are flattened to the base canvas so one background color
   runs through the whole page; the hairline separators stay for rhythm.
   The high-contrast accessible view keeps its own section tints. */
html:not(.kd-a11y) .section-alt { background: transparent; }

/* Ribbon atmosphere: ONE continuous glow layer behind the whole page.
   Static CSS radial-gradients only — no images, no blur filters, no
   animation, no JS. Two brand hues (magenta/violet), eased four-stop
   falloffs against the near-black canvas to avoid banding, opacity
   capped at 0.10, blobs anchored to the page edges so the reading
   column stays clean. Replaces the hero/CTA per-section glow divs.
   Excluded from the high-contrast accessible view. */
main { position: relative; }
html:not(.kd-a11y) .hero-glow { display: none; }
html:not(.kd-a11y) main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 950px 760px at 88% 2%,  rgba(226,58,217,0.10), rgba(226,58,217,0.05) 38%, rgba(226,58,217,0.02) 60%, transparent 78%),
    radial-gradient(ellipse 950px 760px at 6% 14%,  rgba(139,61,245,0.10), rgba(139,61,245,0.05) 38%, rgba(139,61,245,0.02) 60%, transparent 78%),
    radial-gradient(ellipse 950px 760px at 94% 34%, rgba(139,61,245,0.09), rgba(139,61,245,0.045) 38%, rgba(139,61,245,0.02) 60%, transparent 78%),
    radial-gradient(ellipse 950px 760px at 4% 52%,  rgba(226,58,217,0.09), rgba(226,58,217,0.045) 38%, rgba(226,58,217,0.02) 60%, transparent 78%),
    radial-gradient(ellipse 950px 760px at 92% 70%, rgba(226,58,217,0.09), rgba(226,58,217,0.045) 38%, rgba(226,58,217,0.02) 60%, transparent 78%),
    radial-gradient(ellipse 950px 760px at 8% 86%,  rgba(139,61,245,0.09), rgba(139,61,245,0.045) 38%, rgba(139,61,245,0.02) 60%, transparent 78%),
    radial-gradient(ellipse 1100px 800px at 50% 99%, rgba(139,61,245,0.08), rgba(226,58,217,0.04) 45%, transparent 75%);
}

/* --- Readability pass (review feedback): larger, brighter explanatory copy.
   Display headings keep their thin, elegant weights; body copy gains size,
   regular weight and a brighter secondary tone so it reads authoritative
   rather than fragile. Paragraph copy (lead, section intros) already sits
   at ~16px with 1.6 line-height and is unchanged. */
:root { --text-dim: #b9bfe6; }

body { font-weight: 400; }

.site-nav { gap: 1.3rem; }
.site-nav a:not(.btn) { font-size: 0.92rem; }

.card p,
.panel p { font-size: 0.95rem; line-height: 1.55; }
.check-list li { font-size: 0.93rem; }

.compare-table { font-size: 0.93rem; }

.footer-copy,
.footer-links a { font-size: 0.92rem; }

.hero-badges li { font-size: 0.7rem; }

/* Honeypot field (contact form anti-spam): parked off-screen, not display:none,
   so naive bots still "see" and fill it while humans never do. */
.modal-form .hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Capability boxes: icon and title share one line, so each box loses its
   icon row and the whole "Local-First AI Workspace" grid fits within a
   single window even on short laptop screens (e.g. scaled 1366x768). */
.cap-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
  align-content: start;
}
.cap-card .cap-icon { margin-bottom: 0; }
.cap-card h3 { margin: 0; }
.cap-card p { grid-column: 1 / -1; margin: 0.6rem 0 0; }

/* Short desktop windows (e.g. 125%-scaled 1366x768 laptops → ~650px of CSS
   viewport): compress the capabilities section's spacing so the full grid
   still fits inside its one snapped window. Taller screens are unaffected. */
@media (min-width: 1101px) and (max-height: 720px) {
  main > #capabilities.section { padding-bottom: 0.75rem; }
  #capabilities .section-head { margin-bottom: 0.9rem; }
  #capabilities .section-head h2 { font-size: 1.7rem; }
  .cap-grid { gap: 0.7rem; }
  .cap-card { padding: 0.85rem 1.1rem; }
  .cap-card p { margin-top: 0.45rem; }
}

/* Module title + subtitle removed from the movie (kept in the DOM, hidden,
   because v5's demo JS reads/sets them on tab switch). */
#wsTitle,
#wsDesc { display: none !important; }

/* The movie window is a FIXED size (kd sized its demos via the #cockpit chrome
   that v5's frame replaced). Give v5's stage a fixed height and make every kd
   demo fill it, so the window never grows with the chat and all four demos show
   at the right proportions. The stage matches the screenshots' 1410:776 aspect. */
.hero-workspace .ws-stage {
  --workspace-demo-ratio: 1410 / 776;
  --workspace-demo-min-height: 360px;
  position: relative;
  aspect-ratio: 1410 / 776;   /* matches the screenshots → they fill edge-to-edge, no bars, no crop */
  height: auto;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 900px) { .hero-workspace .ws-stage { aspect-ratio: auto; height: 320px; } }
.hero-workspace .ws-stage > .assistant-demo,
.hero-workspace .ws-stage > .datahub-screenshot-demo,
.hero-workspace .ws-stage > .analytics-hub-demo,
.hero-workspace .ws-stage > .settings-screenshot-demo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
}
/* Chat scrolls inside the fixed frame instead of resizing it. */
.hero-workspace .ws-stage .assistant-demo-messages { overflow-y: auto; }
/* Screenshots fill their frame (same aspect as the stage → no crop, not zoomed out). */
.hero-workspace .ws-stage .datahub-screenshot-frame img,
.hero-workspace .ws-stage .settings-shot img,
.hero-workspace .ws-stage .analytics-hub-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole app screenshot — never crop */
  object-position: center;
}

/* Nav: Contact reads like the other nav links, not a violet link-btn. */
.site-nav .nav-contact {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 400;
  white-space: nowrap;
}
.site-nav .nav-contact:hover { color: var(--text); text-decoration: none; }

/* Nav auth area: holds either "Sign In / Register" or the logged-in links. */
#navAuthArea { display: inline-flex; align-items: center; gap: 1.05rem; }
.nav-user-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav-user-link:hover { color: var(--text); }

/* Logged-in user menu: My Account / Dashboard / Log out under the name. */
.nav-user-menu { position: relative; display: inline-block; }
.nav-user-caret { font-size: 0.7em; opacity: 0.8; }
.nav-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 180px;
  padding: 6px;
  background: #0b0b19;
  border: 1px solid rgba(120, 140, 220, 0.22);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  z-index: 320;
}
/* Invisible bridge across the 10px gap between the name and the menu. Without
   it the pointer leaves the menu on the way down, the mouseleave fires, and the
   dropdown shuts before the cursor ever reaches "My Account". */
.nav-user-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-user-dropdown[hidden] { display: none; }
.nav-user-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-user-item:hover { background: rgba(120, 140, 220, 0.12); color: #fff; }

/* Mobile menu only (the same breakpoint that stacks .site-nav). Desktop keeps
   `right: 0`: there the "Hi, <name>" control sits at the header's right end,
   so a right-anchored panel stays on screen. In the stacked mobile menu the
   control is left-aligned and only as wide as its text (~73px), so `right: 0`
   pinned the panel's right edge to the control's right edge and the 180px
   panel grew LEFTWARD, 83px past the viewport edge at 390px. Anchor it to the
   control's LEFT edge instead; the cap keeps it inside on the narrowest phones. */
@media (max-width: 1100px) {
  /* In the stacked menu the dropdown joins normal FLOW beneath "Hi, <name>"
     instead of hovering absolutely over it. Absolute positioning was designed
     for the desktop header, where the panel overlays page content; inside a
     fixed, scrollable menu it does not add to the panel's layout height, so on
     a short viewport (measured 360x640: "Dashboard" and "Log out" landed at
     y=651/692 in a 640px window) the lower items fell past the panel's bottom
     and any scroll pushed the overlay out of the clip - the "it disappears
     when I scroll" report. In flow, the panel grows to contain it and the
     dropdown scrolls WITH the menu, anchored under its control. */
  .nav-user-menu { display: block; }
  .nav-user-dropdown {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: calc(100vw - 3rem);
    margin-top: 10px;
  }
  /* The hover bridge only exists for the desktop pointer gap. */
  .nav-user-dropdown::before { display: none; }

  /* The stacked menu's link rule `.site-nav a:not(.btn) { padding: 0.8rem 0;
     border-bottom: ... }` (specificity 0,2,1) out-ranks `.nav-user-item`
     (0,1,0), so the two <a> items lost their 12px side padding and gained a
     divider while the <button> "Log out" - exempt from a:not(.btn) - kept the
     intended 9px 12px. That is the visible mis-alignment: the links were
     stripped, not the button indented. Re-assert the item box for all three. */
  .site-nav .nav-user-dropdown .nav-user-item {
    padding: 9px 12px;
    border-bottom: 0;
    font-size: 0.88rem;
  }
}

/* ===== Cookie consent banner ===== */
/* Slim full-width consent bar pinned to the bottom edge (industry-standard
   layout): one-line text on the left, equal-effort action buttons inline on
   the right. The bar itself carries the surface; .cookie-inner only lays out. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  border-top: 1px solid rgba(120, 140, 220, 0.28);
  background: rgba(6, 8, 26, 0.96);
  box-shadow: 0 -14px 44px rgba(0, 0, 15, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cookie-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 0.9rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.85rem 1.3rem;
}
.cookie-text {
  margin: 0;
  flex: 1 1 340px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.cookie-text a { color: #9beeff; }
.cookie-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-btn {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 140, 220, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cookie-btn:hover { border-color: rgba(45, 212, 255, 0.5); }
.cookie-btn--primary {
  background: linear-gradient(135deg, #2dd4ff, #8b3df5);
  border-color: transparent;
  color: #04122b;
}
.cookie-btn--ghost { opacity: 0.82; }

@media (max-width: 640px) {
  .cookie-inner { flex-direction: column; align-items: stretch; }
  /* Same column-flip hazard as the footer: the desktop row basis
     `flex: 1 1 340px` on .cookie-text becomes a 340px HEIGHT here, so a
     two-line notice occupied half a phone screen. Content-sized on mobile. */
  .cookie-text { flex: 0 0 auto; }
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { flex: 1 1 auto; }
}

/* ===== Accessibility mode — high-contrast green/white theme =====
   Toggled by the header "Accessibility" button (assets/js/kd-a11y.js adds
   .kd-a11y to <html>; persisted in localStorage). The app-preview movie keeps
   its product look — it is a faithful product screenshot replica. */
.a11y-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(120, 140, 220, 0.35);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.a11y-toggle svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.a11y-toggle:hover { color: var(--text); border-color: rgba(120, 140, 220, 0.6); }

html.kd-a11y {
  --bg: #ffffff;
  --bg-raise: #f2f7f4;
  --bg-card: #ffffff;
  --bg-deep: #e9f3ed;
  --line: rgba(11, 107, 58, 0.45);
  --text: #0d1117;
  --text-dim: #274d38;
  --cyan: #0b6b3a;
  --blue: #0b6b3a;
  --violet: #0b6b3a;
  --magenta: #0b6b3a;
  --coral: #9a1b1b;
  --lavender: #0b6b3a;
  --grad: linear-gradient(100deg, #0e7c44, #0b6b3a);
  --grad-btn: linear-gradient(135deg, #0e7c44, #0b6b3a);
  --grad-line: linear-gradient(90deg, #0e7c44, #0b6b3a);
}
html.kd-a11y body { background: #ffffff; color: var(--text); }
html.kd-a11y .a11y-toggle { background: #0b6b3a; border-color: #0b6b3a; color: #fff; }

/* calm the decorative layers */
html.kd-a11y .hero-glow,
html.kd-a11y .hero-watermark,
html.kd-a11y .cta-watermark { display: none !important; }
html.kd-a11y .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* readable text everywhere — but NOT inside the presentation movie, which is
   theme-locked and must render identically in normal and accessibility views */
html.kd-a11y p:not(.kd-app-movie *), html.kd-a11y li:not(.kd-app-movie *), html.kd-a11y td:not(.kd-app-movie *) { color: #1a2b21; }
html.kd-a11y h1:not(.kd-app-movie *), html.kd-a11y h2:not(.kd-app-movie *), html.kd-a11y h3:not(.kd-app-movie *), html.kd-a11y h4:not(.kd-app-movie *), html.kd-a11y strong:not(.kd-app-movie *) { color: #0d1117; text-shadow: none !important; }
html.kd-a11y a:not(.kd-app-movie *) { color: #0b6b3a; text-decoration: underline; }
html.kd-a11y .site-nav a { color: #0d1117; text-decoration: none; }
html.kd-a11y .site-nav a:hover { color: #0b6b3a; text-decoration: underline; }
html.kd-a11y *:focus-visible { outline: 3px solid #0b6b3a !important; outline-offset: 2px; }

/* surfaces */
html.kd-a11y .site-header { background: #ffffff; border-bottom: 2px solid #0b6b3a; box-shadow: none; }
html.kd-a11y .panel, html.kd-a11y .card, html.kd-a11y .compare-card,
html.kd-a11y .feature-card, html.kd-a11y .sector-card, html.kd-a11y .step-card,
html.kd-a11y .cap-card, html.kd-a11y .pilot-box,
html.kd-a11y .modal-box, html.kd-a11y .cookie-banner {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(11, 107, 58, 0.5) !important;
  box-shadow: none !important;
}
html.kd-a11y .compare-table th, html.kd-a11y .compare-table td {
  background: #ffffff; color: #1a2b21; border-color: rgba(11, 107, 58, 0.35);
}
html.kd-a11y .compare-table .col-kd { color: #0b6b3a; font-weight: 700; }

/* controls */
html.kd-a11y .btn-primary, html.kd-a11y .cookie-btn--primary {
  background: #0b6b3a !important;
  background-image: none !important;
  border-color: #0b6b3a !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.kd-a11y .cookie-btn, html.kd-a11y .link-btn { color: #0b6b3a; border-color: rgba(11, 107, 58, 0.5); }
html.kd-a11y .hero-badges li { color: #0d1117; border-color: rgba(11, 107, 58, 0.5); background: #f2f7f4; }
html.kd-a11y .hero-play-strip {
  color: #0d1117;
  border: 1px solid #0b6b3a;
  background: #ffffff;
  box-shadow: none !important;
  transform: none !important;
}
html.kd-a11y .form-field input, html.kd-a11y .form-field select, html.kd-a11y .form-field textarea {
  background: #ffffff; color: #0d1117; border-color: rgba(11, 107, 58, 0.5);
}
html.kd-a11y .site-footer { background: #f2f7f4; border-top: 2px solid #0b6b3a; }
html.kd-a11y .footer-copy, html.kd-a11y .section-sub, html.kd-a11y .lead { color: #274d38; }

/* ===== Accessibility view — refinements (contrast-tested; disability view only) =====
   Every colour pair below is verified >= WCAG AA:
   ink #0d1117 on #fff = 18.9:1 · green #0b6b3a on #fff = 6.6:1 (text & UI) ·
   #fff on green = 6.6:1 · error #9a1b1b on #fff = 8.3:1. The presentation
   movie (.kd-app-movie / .km-*) is intentionally left untouched. */

/* Logo: solid-black mark silhouette + solid-black bold wordmark
   (the mark image and the gradient-clipped wordmark are invisible on white). */
html.kd-a11y .brand-mark { filter: brightness(0) !important; }
html.kd-a11y .brand-name,
html.kd-a11y .brand-name span,
html.kd-a11y .kpi strong {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #0d1117 !important;
  color: #0d1117 !important;
  font-weight: 700 !important;
}

/* Header stays solid white even after the scroll state kicks in. */
html.kd-a11y .site-header,
html.kd-a11y .site-header.scrolled {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 2px solid #0b6b3a !important;
  box-shadow: none !important;
}

/* Cookie consent banner: solid white card, ink text, underlined green link. */
html.kd-a11y .cookie-banner {
  border-top: 2px solid #0b6b3a !important;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.28) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.kd-a11y .cookie-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.kd-a11y .cookie-text { color: #1a2b21 !important; }
html.kd-a11y .cookie-text a { color: #0b6b3a !important; text-decoration: underline !important; }
html.kd-a11y .cookie-btn {
  background: #ffffff !important; color: #0b6b3a !important; border: 1px solid #0b6b3a !important; opacity: 1 !important;
}
html.kd-a11y .cookie-btn--primary {
  background: #0b6b3a !important; color: #ffffff !important; border-color: #0b6b3a !important;
}

/* Clear system sans-serif + comfortable line spacing in the accessibility view. */
html.kd-a11y body,
html.kd-a11y button,
html.kd-a11y input,
html.kd-a11y select,
html.kd-a11y textarea {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html.kd-a11y p:not(.kd-app-movie *),
html.kd-a11y li:not(.kd-app-movie *) { line-height: 1.65; }
html.kd-a11y .lead { line-height: 1.7; }
html.kd-a11y .form-error { color: #9a1b1b !important; }

/* Focus ring that reads on both light surfaces and green fills (offset gap
   sits on the white page behind every control). */
html.kd-a11y a:focus-visible,
html.kd-a11y button:focus-visible,
html.kd-a11y input:focus-visible,
html.kd-a11y select:focus-visible,
html.kd-a11y textarea:focus-visible,
html.kd-a11y summary:focus-visible,
html.kd-a11y [tabindex]:focus-visible {
  outline: 3px solid #0b6b3a !important;
  outline-offset: 3px !important;
}

/* Respect an OS-level reduced-motion request for the site's own decoration
   (the presentation movie is left as-is per design). */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-glow { animation: none !important; }
}

/* Accessibility view applies its colours instantly — no colour-transition flash
   on toggle (also keeps the view correct in reduced-motion contexts). */
html.kd-a11y .site-header,
html.kd-a11y .site-header.scrolled,
html.kd-a11y .cookie-inner,
html.kd-a11y .cookie-btn,
html.kd-a11y .btn-primary,
html.kd-a11y .a11y-toggle,
html.kd-a11y .brand-mark { transition: none !important; }

/* The presentation movie keeps its own (cyan) focus ring in accessibility view. */
html.kd-a11y .kd-app-movie .km-pp:focus-visible { outline: 3px solid #9beeff !important; outline-offset: 2px !important; }
html.kd-a11y .kd-app-movie .km-poster-btn:focus-visible { outline: 3px solid #b9ecff !important; outline-offset: 3px !important; }

/* ===== Hero single-CTA block (2026-07-20) =====
   The hero's "Apply for Pilot Access" button becomes a centered stack: a primary
   "Start Free Trial" CTA (opens account creation), an account-first reassurance
   note, and a quiet Business-pilot link beneath. Nav is intentionally untouched. */
.hero-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 1.6rem 0 0;
}
.hero-single .btn-primary { min-width: 260px; }
.hero-cta-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.hero-pilot-link {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.hero-pilot-link .link-btn { font-size: inherit; font-weight: 600; }
.hero-centered .hero-single + .hero-badges { margin-top: 1.5rem; }

/* Short desktop windows: keep hero page 1 on one snap-screen with the taller
   CTA stack. */
@media (min-width: 1101px) and (max-height: 820px) {
  .hero-single { margin-top: 1.2rem; }
  .hero-centered .hero-single + .hero-badges { margin-top: 1rem; }
  .hero-centered .hero-play-strip { margin-top: 1.1rem; padding: 0.7rem 1.2rem; }
}

/* Account-created success state: spacing for the "Download for Windows" CTA. */
.modal-success #authSuccessDownload { margin-top: 0.9rem; display: inline-block; }

/* ===== Register modal — "Start Your KleverDeck Pro Free Trial" (2026-07-21)
   Ported from the approved mockup, restyled with the site's own conventions:
   plain modal heading (one line, standard modal h3 style), and emphasis text
   in the site's bright-text bold treatment. */
.modal-sub-strong { color: var(--text); font-weight: 600; }

/* Trial-start info note (calendar icon + line, sits between password and consents). */
.modal-infonote {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(120, 140, 220, 0.28);
  border-radius: 10px;
  background: rgba(9, 10, 28, 0.55);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.modal-infonote svg { width: 20px; height: 20px; flex: none; color: #9fb0e8; }

/* Password field with an inline Show/Hide toggle. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 3.4rem; }

/* Edge draws its OWN reveal ("eye") control inside every password input, which
   sat right next to our Show button and read as a doubled control. Ours is the
   one that is styled, keyboard-reachable and labelled, so the native one goes.
   ::-ms-clear removes the matching "x" for the same reason. */
.pw-wrap input[type="password"]::-ms-reveal,
.pw-wrap input[type="password"]::-ms-clear { display: none; width: 0; height: 0; }
.pw-toggle {
  position: absolute;
  right: 0.85rem;
  /* No top:50% + translateY(-50%): the transform landed the text on a half-pixel
     and rendered it blurry. Full-height + flex centering keeps glyphs on the
     pixel grid (and gives a taller click target). */
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: #9beeff;
  transform: none !important;
  transition: none;
  text-shadow: none;
}

/* Trust line under the submit button. */
.modal-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
}
.modal-trust svg { width: 14px; height: 14px; flex: none; }

/* ---- Fit the register view on one screen without scrolling on common laptop
   heights. The register form is the tallest modal (5 inputs + info note + two
   consents + trust line); tighten its vertical rhythm. Scoped to #registerView
   / #registerForm so the shorter sign-in, pilot and contact modals keep their
   roomier spacing. */
/* Top part stays compact (heading, subtitle, Google, divider); the recovered
   space goes into the 2nd part — comfortable label-to-input gaps, roomier input
   height, and breathing room around the trial note, consents and submit. */
#authModalOverlay .modal-box:has(#registerView:not([hidden])) {
  padding-top: 1rem;
  padding-bottom: 1.3rem;
}
#registerView .modal-box h3,
#registerView > h3 { margin-bottom: 0.35rem; }
#registerView .modal-subtitle {
  font-size: 0.86rem;
  line-height: 1.45;
  margin-bottom: 0.55rem;
}
#registerView .form-divider { margin: 0.65rem 0; }
#registerForm .form-grid { gap: 0.85rem; }
#registerForm .form-field { margin-bottom: 0.65rem; gap: 0.4rem; }
#registerForm .form-field input,
#registerForm .form-field select { padding-top: 0.6rem; padding-bottom: 0.6rem; }
#registerForm .modal-infonote {
  padding: 0.62rem 0.9rem;
  margin: 0.15rem 0 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
}
#registerForm .modal-infonote svg { width: 18px; height: 18px; }
#registerForm .form-consent { margin-bottom: 0.6rem; }
#registerForm .modal-form .btn { margin-top: 0.45rem; }
#registerForm .modal-trust { margin-top: 0.75rem; font-size: 0.75rem; }

/* Accessibility view: high-contrast green/white theme for the new elements. */
html.kd-a11y .modal-sub-strong { color: #0d1117 !important; }
html.kd-a11y .modal-infonote {
  background: #ffffff !important;
  border-color: rgba(11, 107, 58, 0.5) !important;
  color: #1a2b21 !important;
}
html.kd-a11y .modal-infonote svg { color: #0b6b3a; }
html.kd-a11y .pw-toggle { color: #0b6b3a !important; }
html.kd-a11y .modal-trust { color: #274d38 !important; }

/* ===== Movie section: center the app window (2026-07-21) =====
   The earlier width cap on .hero-workspace (min(1120px, 100%, height-derived
   calc)) conflicted with kd-movie.js fit(), which sizes the mount from the
   .container and already fits BOTH width and height. When fit()'s window came
   out wider than the capped wrapper, it overflowed and its auto margins
   collapsed — leaving the app window ~90px right of the centered heading.
   Let the wrapper span the container and fit() be the only sizing authority;
   the mount's own margin:auto (set by fit()) then centers it exactly. */
#movieSection .hero-workspace { width: 100%; }

/* Accessibility view. */
html.kd-a11y .hero-cta-note,
html.kd-a11y .hero-pilot-link { color: #274d38 !important; }
/* ===== KD Editions section — ported from prototype F (2026-07-21) ===== */
.edition-status {
  display: inline-block;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 255, 0.45);
  background: rgba(45, 212, 255, 0.08);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9beeff;
  white-space: nowrap;
}
.edition-status--gated {
  border-color: rgba(139, 61, 245, 0.55);
  background: rgba(139, 61, 245, 0.1);
  color: #c9b2ff;
}

.edcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  max-width: 1180px;
  margin-inline: auto;
  align-items: stretch;
}
.edcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.4rem 1.25rem;
  border: 1px solid rgba(120, 140, 220, 0.28);
  border-radius: 16px;
  background: rgba(8, 10, 26, 0.6);
  overflow: hidden;
}
.edcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.edcard--pro::before { background: linear-gradient(90deg, #2dd4ff, #8b3df5); }
.edcard--biz::before { background: linear-gradient(90deg, #8b3df5, #e23ad9); }
/* Featured lift for the volume path. */
.edcard--pro {
  border-color: rgba(45, 212, 255, 0.45);
  box-shadow: 0 0 30px rgba(45, 212, 255, 0.09), 0 12px 36px rgba(0, 0, 20, 0.3);
}
.edcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}
.edcard-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fb0e8;
}
.edcard--biz .edcard-eyebrow { color: #b8a3e8; }
.edcard h3 { font-size: 1.3rem; margin: 0 0 0.4rem; }
.edcard-desc { font-size: 0.87rem; line-height: 1.45; color: var(--text-dim); margin: 0 0 0.7rem; }
.edcard-plus {
  margin: 0 0 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(120, 140, 220, 0.18);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.edcard-list { list-style: none; margin: 0 0 0.9rem; padding: 0; flex: 1 1 auto; }
.edcard-list li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
}
.edcard-list li::before {
  content: "✓";
  position: absolute;
  left: 0.15rem;
  font-weight: 700;
  color: #9beeff;
}
.edcard--biz .edcard-list li::before { color: #c9b2ff; }
.edcard-foot { margin-top: auto; }
.edcard-offer {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #9beeff;
}
.edcard--biz .edcard-offer { color: #c9b2ff; }
.edcard-offer span { font-weight: 400; color: var(--text-dim); font-size: 0.8rem; }
.edcard-cta { display: block; width: 100%; text-align: center; }
#editions .editions-footnote { margin-top: 0.9rem; }

/* Responsive: band 3x2 then stacked; cards stack. */
@media (max-width: 1100px) {
  .edshared-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.1rem; }
  .edshared-item:nth-child(4) { border-left: none; }
}
@media (max-width: 860px) {
  .edcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .edshared-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edshared-item + .edshared-item { border-left: none; }
}

/* Short desktop windows: compress so the whole section snaps to one screen. */
@media (min-width: 1101px) and (max-height: 820px) {
  main > #editions.section { padding-top: calc(var(--header-h) + 0.35rem); padding-bottom: 0.35rem; }
  #editions .section-head { margin-bottom: 0.5rem; }
  #editions .section-head .section-sub { margin-top: 0.3rem; }
  .edshared { padding: 1rem 1rem 0.6rem; margin-bottom: 0.7rem; }
  .edshared-item p { font-size: 0.7rem; }
  .edshared-item h3 { font-size: 0.78rem; }
  .edcard { padding: 0.85rem 1.15rem 0.9rem; }
  .edcard-desc { font-size: 0.82rem; margin-bottom: 0.5rem; }
  .edcard-list li { font-size: 0.81rem; margin-bottom: 0.3rem; }
  .edcard h3 { font-size: 1.15rem; }
  .edcard-cta { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  #editions .editions-footnote { margin-top: 0.6rem; font-size: 0.72rem; }
}

/* Accessibility view. */
html.kd-a11y .edshared,
html.kd-a11y .edcard {
  background: #ffffff !important;
  border-color: rgba(11, 107, 58, 0.5) !important;
  box-shadow: none !important;
}
html.kd-a11y .edcard::before { background: #0b6b3a !important; }
html.kd-a11y .edshared-label {
  background: #ffffff !important;
  border-color: #0b6b3a !important;
  color: #0b6b3a !important;
}
html.kd-a11y .edshared-ic { background: #f2f7f4 !important; border-color: rgba(11, 107, 58, 0.4) !important; color: #0b6b3a !important; }
html.kd-a11y .edshared-item p,
html.kd-a11y .edcard-desc,
html.kd-a11y .edcard-offer span { color: #274d38 !important; }
html.kd-a11y .edcard-eyebrow,
html.kd-a11y .edcard--biz .edcard-eyebrow,
html.kd-a11y .edcard-offer,
html.kd-a11y .edcard--biz .edcard-offer { color: #0b6b3a !important; }
html.kd-a11y .edcard-list li { color: #1a2b21 !important; }
html.kd-a11y .edcard-list li::before,
html.kd-a11y .edcard--biz .edcard-list li::before { color: #0b6b3a !important; }
html.kd-a11y .edcard-plus { color: #0d1117 !important; border-top-color: rgba(11, 107, 58, 0.3) !important; }

/* Tightest tier (≤760px viewport heights, e.g. 1366x768 laptops): the 820px
   tier above is not enough — reclaim ~85px so the section truly snaps to one
   screen at the smallest common desktop height. */
@media (min-width: 1101px) and (max-height: 760px) {
  #editions .section-head { margin-bottom: 0.45rem; }
  #editions .section-head .section-sub { font-size: 0.84rem; margin-top: 0.25rem; }
  #editions .eyebrow { margin-bottom: 0.5em; }

  .edshared { padding: 0.95rem 0.9rem 0.5rem; margin-bottom: 0.75rem; }
  .edshared-ic { width: 28px; height: 28px; margin-bottom: 0.3rem; }
  .edshared-ic svg { width: 15px; height: 15px; }
  .edshared-item h3 { font-size: 0.75rem; margin-bottom: 0.2rem; }
  .edshared-item p { font-size: 0.68rem; line-height: 1.32; }

  .edcard { padding: 0.75rem 1.05rem 0.85rem; }
  .edcard-top { margin-bottom: 0.25rem; }
  .edcard h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
  .edcard-desc { font-size: 0.79rem; line-height: 1.38; margin-bottom: 0.4rem; }
  .edcard-plus { padding-top: 0.4rem; margin-bottom: 0.25rem; font-size: 0.76rem; }
  .edcard-list { margin-bottom: 0.6rem; }
  .edcard-list li { font-size: 0.78rem; line-height: 1.32; margin-bottom: 0.24rem; }
  .edcard-offer { font-size: 0.8rem; margin-bottom: 0.4rem; }
  .edcard-offer span { font-size: 0.74rem; }
  .edcard-cta { padding-top: 0.52rem; padding-bottom: 0.52rem; font-size: 0.88rem; }

  #editions .editions-footnote { margin-top: 0.45rem; font-size: 0.68rem; }
}

/* Long editions heading: uses the site-standard h2 sizing (base clamp), same
   as every other section heading. The head runs full container width so the
   long line has room — at desktop widths the base clamp's vw scaling keeps it
   on a single line; the height tiers above reclaim the extra heading height
   through spacing, not font size. */
#editions .section-head { max-width: none; }

/* Narrow desktop (near the 1101px min-width) at tall-ish heights: the roomy
   base layout runs ~100px taller than at 1280px+ (cards wrap more), so it can
   spill past an ~850–920px window. Trim spacing there to keep it on one screen. */
@media (min-width: 1101px) and (max-width: 1320px) and (min-height: 821px) and (max-height: 950px) {
  main > #editions.section { padding-top: calc(var(--header-h) + 0.4rem); padding-bottom: 0.9rem; }
  #editions .section-head { margin-bottom: 0.95rem; }
  .edshared { margin-bottom: 0.75rem; padding-bottom: 0.55rem; }
  .edcard { padding-top: 0.85rem; padding-bottom: 0.9rem; }
}

/* ===== KD Editions v2 (2026-07-21, approved mockup): cards first, capability
   grid beneath. Site-native adjustments: gradient heading span uses the brand
   wordmark treatment; Business CTA stays ghost (funnel hierarchy); module
   tiles reuse the site's card surfaces and violet icon tone. */

/* Brand-gradient span in the heading (falls back to solid in a11y view). */
.grad-text {
  background: var(--grad-line);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* No subheading in v2 — heading sits directly above the cards. */
#editions .section-head { margin-bottom: 1.1rem; }

/* Card footer: terms left, CTA right, aligned to card bottom. */
.edcard-foot--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(120, 140, 220, 0.16);
}
.edcards--top .edcard-cta { display: inline-block; width: auto; min-width: 205px; flex: none; }
.edcard-micro {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-dim);
  max-width: 34ch;
}
.edcards--top .edcard-offer { margin-bottom: 0; }
/* "plus" line sits right under the Business title — no divider here in v2. */
.edcards--top .edcard-plus { border-top: none; padding-top: 0; color: #c9b2ff; }
.edcards--top .edcard-list { margin-bottom: 0.7rem; }

/* --- capability grid --- */
.edmods { max-width: 1180px; margin: 1.1rem auto 0; }
.edmods-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 0.8rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.edmods-line { flex: 0 0 64px; height: 2px; border-radius: 2px; }
.edmods-line--c { background: linear-gradient(90deg, transparent, #2dd4ff); }
.edmods-line--v { background: linear-gradient(90deg, #8b3df5, transparent); }
.edmods-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.edmod {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(120, 140, 220, 0.28);
  border-radius: 12px;
  background: rgba(8, 10, 26, 0.55);
}
.edmod-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(120, 140, 220, 0.35);
  background: rgba(9, 10, 28, 0.5);
  color: #b6a8ff;
}
.edmod-ic svg { width: 17px; height: 17px; }
.edmod-ic--biz { border-color: rgba(139, 61, 245, 0.5); color: #c9b2ff; }
.edmod--biz { border-color: rgba(139, 61, 245, 0.4); }
.edmod-txt { min-width: 0; }
.edmod-txt h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  margin: 0 0 0.25rem;
}
.edmod-txt p { font-size: 0.75rem; line-height: 1.42; color: var(--text-dim); margin: 0; }
.edmod-badge {
  flex: none;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 61, 245, 0.55);
  background: rgba(139, 61, 245, 0.12);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9b2ff;
}

/* Responsive: grid 2-col, then 1-col; card footers stack on narrow. */
@media (max-width: 1100px) {
  .edmods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .edcard-foot--row { flex-direction: column; align-items: stretch; }
  .edcard-micro { max-width: none; }
  .edcards--top .edcard-cta { width: 100%; }
}
@media (max-width: 640px) {
  .edmods-grid { grid-template-columns: minmax(0, 1fr); }
}

/* One-screen tiers. ≤820px height: moderate compression. */
@media (min-width: 1101px) and (max-height: 820px) {
  #editions .section-head { margin-bottom: 0.7rem; }
  .edcards--top .edcard { padding: 0.8rem 1.1rem 0.85rem; }
  .edcards--top .edcard h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
  .edcards--top .edcard-list { margin-bottom: 0.45rem; }
  .edcards--top .edcard-list li { font-size: 0.8rem; margin-bottom: 0.25rem; }
  .edcard-foot--row { padding-top: 0.45rem; }
  .edcard-micro { font-size: 0.68rem; }
  .edmods { margin-top: 0.75rem; }
  .edmods-label { font-size: 0.88rem; margin-bottom: 0.55rem; }
  .edmod { padding: 0.55rem 0.75rem; gap: 0.6rem; }
  .edmod-ic { width: 30px; height: 30px; }
  .edmod-ic svg { width: 14px; height: 14px; }
  .edmod-txt h3 { font-size: 0.8rem; margin-bottom: 0.15rem; }
  .edmod-txt p { font-size: 0.69rem; line-height: 1.35; }
  .edmods-grid { gap: 0.55rem; }
}
/* ≤760px height: tightest. */
@media (min-width: 1101px) and (max-height: 760px) {
  main > #editions.section { padding-top: calc(var(--header-h) + 0.3rem); padding-bottom: 0.3rem; }
  #editions .section-head { margin-bottom: 0.35rem; }
  .edcards--top { gap: 0.8rem; }
  .edcards--top .edcard { padding: 0.6rem 0.95rem 0.65rem; }
  .edcards--top .edcard h3 { font-size: 1rem; margin-bottom: 0.25rem; }
  .edcards--top .edcard-top { margin-bottom: 0.15rem; }
  .edcards--top .edcard-list li { font-size: 0.76rem; margin-bottom: 0.2rem; line-height: 1.3; }
  .edcards--top .edcard-plus { font-size: 0.74rem; margin-bottom: 0.2rem; }
  .edcards--top .edcard-offer { font-size: 0.78rem; }
  .edcard-micro { font-size: 0.64rem; margin-top: 0.15rem; }
  .edcards--top .edcard-cta { min-width: 180px; padding: 0.5rem 1rem; font-size: 0.86rem; }
  .edmods { margin-top: 0.6rem; }
  .edmods-label { font-size: 0.82rem; margin-bottom: 0.45rem; }
  .edmod { padding: 0.45rem 0.65rem; gap: 0.5rem; }
  .edmod-ic { width: 26px; height: 26px; }
  .edmod-ic svg { width: 12px; height: 12px; }
  .edmod-txt h3 { font-size: 0.75rem; margin-bottom: 0.1rem; }
  .edmod-txt p { font-size: 0.65rem; line-height: 1.3; }
  .edmods-grid { gap: 0.45rem; }
}

/* Accessibility view. */
html.kd-a11y .grad-text {
  background: none !important;
  -webkit-text-fill-color: #0d1117 !important;
  color: #0d1117 !important;
}
html.kd-a11y .edmod {
  background: #ffffff !important;
  border-color: rgba(11, 107, 58, 0.5) !important;
}
html.kd-a11y .edmod-ic,
html.kd-a11y .edmod-ic--biz {
  background: #f2f7f4 !important;
  border-color: rgba(11, 107, 58, 0.4) !important;
  color: #0b6b3a !important;
}
html.kd-a11y .edmod-txt p,
html.kd-a11y .edcard-micro { color: #274d38 !important; }
html.kd-a11y .edmod-badge {
  background: #f2f7f4 !important;
  border-color: #0b6b3a !important;
  color: #0b6b3a !important;
}
html.kd-a11y .edmods-line--c,
html.kd-a11y .edmods-line--v { background: #0b6b3a !important; }
html.kd-a11y .edcard-foot--row { border-top-color: rgba(11, 107, 58, 0.3) !important; }

/* ===== KD Editions v2 — institutional polish pass (2026-07-21) =====
   Pricing-table discipline: 4px spacing rhythm, price-row treatment, quiet
   surfaces with 1px hairlines and an inset top highlight, consistent control
   heights, restrained hover/focus micro-interactions. Overrides the block
   above (later in file wins at equal specificity). */

/* Cards: quieter elevation — layered surface, hairline border, inner top
   highlight; the loud glow is retired. Featured Pro = brighter border only. */
.edcards--top { gap: 1rem; }
.edcards--top .edcard {
  padding: 1.15rem 1.35rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 17, 40, 0.72), rgba(8, 10, 26, 0.62));
  border: 1px solid rgba(129, 146, 214, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 18, 0.32);
}
.edcards--top .edcard--pro { border-color: rgba(45, 212, 255, 0.42); }
.edcards--top .edcard--biz { border-color: rgba(139, 61, 245, 0.36); }
.edcard::before { height: 2px; }

/* Header row: baseline-aligned eyebrow + chip; chips quieted to outline-only. */
.edcards--top .edcard-top { margin-bottom: 0.35rem; }
.edcards--top .edition-status {
  padding: 0.2rem 0.6rem;
  background: transparent;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
}
.edcards--top .edcard h3 { letter-spacing: -0.01em; }

/* Check list: even rhythm, consistent glyph box, no ragged indents. */
.edcards--top .edcard-list li {
  padding-left: 1.55rem;
  margin-bottom: 0.42rem;
  line-height: 1.45;
}
.edcards--top .edcard-list li::before {
  left: 0.1rem;
  top: 0.05em;
  font-size: 0.9em;
  font-weight: 600;
}

/* Footer: hairline divider, price row, fixed-height CTA on a shared baseline. */
.edcard-foot--row {
  border-top: 1px solid rgba(129, 146, 214, 0.16);
  padding-top: 0.75rem;
  gap: 1.1rem;
}
.edcard-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  flex-wrap: wrap;
}
.edcard-price strong {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.01em;
}
.edcard--pro .edcard-price strong { color: #9beeff; }
.edcard--biz .edcard-price strong { color: #c9b2ff; }
.edcard-price-per { font-size: 0.78rem; color: var(--text-dim); }
.edcard-micro { margin-top: 0.3rem; }

/* Controls: consistent 42px height, calm shadows, visible focus. */
.edcards--top .edcard-cta {
  min-width: 200px;
  padding: 0.6rem 1.3rem;
  font-size: 0.92rem;
  border-radius: 12px;
}
.edcards--top .btn-primary.edcard-cta { box-shadow: 0 6px 18px rgba(99, 88, 255, 0.22); }
.edcards--top .btn-ghost.edcard-cta { border-color: rgba(139, 61, 245, 0.45); }
.edcards--top .btn-ghost.edcard-cta:hover { border-color: rgba(139, 61, 245, 0.75); background: rgba(139, 61, 245, 0.08); }
.edcards--top .edcard-cta:focus-visible { outline: 2px solid #9beeff; outline-offset: 3px; }

/* Capability grid: uniform quiet tiles, restrained hover lift. */
.edmods-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9fb0e8;
}
.edmods-line { flex: 0 0 84px; height: 1px; }
.edmods-line--c { background: linear-gradient(90deg, transparent, rgba(45, 212, 255, 0.55)); }
.edmods-line--v { background: linear-gradient(90deg, rgba(139, 61, 245, 0.55), transparent); }
.edmod {
  border-radius: 12px;
  border-color: rgba(129, 146, 214, 0.18);
  background: rgba(10, 12, 30, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.edmod:hover { border-color: rgba(129, 146, 214, 0.4); transform: translateY(-1px); }
.edmod--biz:hover { border-color: rgba(139, 61, 245, 0.6); }
.edmod-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.edmod-txt h3 { font-weight: 600; }

/* Height-tier adjustments for the new price row (one-screen guarantee holds). */
@media (min-width: 1101px) and (max-height: 820px) {
  .edcard-price strong { font-size: 1.1rem; }
  .edcard-price-per { font-size: 0.72rem; }
  .edcard-foot--row { padding-top: 0.55rem; }
}
@media (min-width: 1101px) and (max-height: 760px) {
  .edcard-price strong { font-size: 1rem; }
  .edcard-price-per { font-size: 0.68rem; }
  .edcard-foot--row { padding-top: 0.45rem; }
  .edcard-micro { margin-top: 0.2rem; }
}

/* Accessibility view. */
html.kd-a11y .edcards--top .edcard {
  background: #ffffff !important;
  box-shadow: none !important;
}
html.kd-a11y .edcard-price strong,
html.kd-a11y .edcard--pro .edcard-price strong,
html.kd-a11y .edcard--biz .edcard-price strong { color: #0b6b3a !important; }
html.kd-a11y .edcard-price-per { color: #274d38 !important; }
html.kd-a11y .edmod { box-shadow: none !important; transform: none !important; }

/* ===== KD Editions v2 — chromatic alignment to the site system (2026-07-21)
   Replaces the custom accents with the exact recipes the rest of the page
   uses: .card gradient-border surfaces with the violet glow, blue-dot bullets
   with dim text (site .check-list language), .cap-icon cyan→magenta tinted
   tiles, neutral mono chips (a11y-toggle pill motif), plain bright headings,
   emphasis in bright text — no colors the other sections don't use. */

/* Cards: the site's .card surface, verbatim recipe. No top accent bars. */
.edcards--top .edcard,
.edcards--top .edcard--pro,
.edcards--top .edcard--biz {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(160deg, rgba(139, 61, 245, 0.6), rgba(91, 124, 255, 0.25) 55%, rgba(139, 61, 245, 0.1)) border-box;
  box-shadow: 0 0 34px rgba(139, 61, 245, 0.1);
}
.edcard::before { display: none; }

/* Chips: the header's a11y-toggle pill tone — quiet, neutral, mono. */
.edcards--top .edition-status,
.edcards--top .edition-status--gated {
  border-color: rgba(120, 140, 220, 0.35);
  background: transparent;
  color: #9fb0e8;
}

/* Eyebrows: one tone (site eyebrow color) on both cards. */
.edcard-eyebrow,
.edcard--biz .edcard-eyebrow { color: #9fb0e8; }

/* Bullets: the site's list language — blue dot markers, dim text. */
.edcards--top .edcard-list li { color: var(--text-dim); }
.edcards--top .edcard-list li::before,
.edcards--top .edcard--biz .edcard-list li::before {
  content: "•";
  color: var(--blue);
  font-size: 1.15em;
  font-weight: 400;
  top: -0.08em;
}

/* "plus" line + price emphasis: bright text, like every other bold on the site. */
.edcards--top .edcard-plus { color: var(--text); }
.edcard-price strong,
.edcard--pro .edcard-price strong,
.edcard--biz .edcard-price strong { color: var(--text); }

/* Footer divider + ghost CTA revert to neutral site line/border tones. */
.edcard-foot--row { border-top-color: var(--line); }
.edcards--top .btn-ghost.edcard-cta { border-color: rgba(120, 140, 220, 0.32); }
.edcards--top .btn-ghost.edcard-cta:hover { border-color: rgba(91, 124, 255, 0.5); background: rgba(91, 124, 255, 0.1); }

/* Capability tiles: same .card recipe; icons on the .cap-icon tinted tile. */
.edmod,
.edmod--biz {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(160deg, rgba(139, 61, 245, 0.6), rgba(91, 124, 255, 0.25) 55%, rgba(139, 61, 245, 0.1)) border-box;
  box-shadow: 0 0 34px rgba(139, 61, 245, 0.06);
}
.edmod:hover,
.edmod--biz:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 12px 36px rgba(1, 1, 20, 0.6), 0 0 0 1px rgba(45, 212, 255, 0.45), 0 0 20px rgba(45, 212, 255, 0.18);
}
.edmod-ic,
.edmod-ic--biz {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(45, 212, 255, 0.14), rgba(226, 58, 217, 0.14));
  border: 1px solid var(--line);
  color: var(--lavender);
  box-shadow: none;
}
.edmod-txt p { color: var(--text-dim); }

/* Business badge: same neutral pill as the chips. */
.edmod-badge {
  border-color: rgba(120, 140, 220, 0.35);
  background: transparent;
  color: #9fb0e8;
}

/* Grid label rules: the site's accent-line gradient, as under the hero slogan. */
.edmods-line,
.edmods-line--c,
.edmods-line--v { height: 2px; background: var(--grad-line); border-radius: 999px; }

/* Accessibility view: gradient-border cards flatten to white/green like .card. */
html.kd-a11y .edcards--top .edcard,
html.kd-a11y .edmod {
  background: #ffffff !important;
  border: 1px solid rgba(11, 107, 58, 0.5) !important;
  box-shadow: none !important;
}
html.kd-a11y .edcards--top .edcard-list li::before { color: #0b6b3a !important; }
html.kd-a11y .edmods-line,
html.kd-a11y .edmods-line--c,
html.kd-a11y .edmods-line--v { background: #0b6b3a !important; }

/* ===== Edition cards — restore the approved Option-1 card design (2026-07-21)
   Per user selection: descriptions + four ✓ bullets (incl. never-locked and
   the 30% discount), cyan/violet accents, top accent bars, colored chips and
   offer lead-ins, full-width CTAs. Scoped to the two edition cards; the
   capability grid below keeps the site-aligned .card treatment. */
.edcards--top .edcard,
.edcards--top .edcard--pro,
.edcards--top .edcard--biz {
  border-radius: 16px;
  background: rgba(8, 10, 26, 0.6);
  box-shadow: 0 12px 36px rgba(0, 0, 20, 0.3);
  overflow: hidden;
}
.edcards--top .edcard { border: 1px solid rgba(120, 140, 220, 0.28); }
.edcards--top .edcard--pro {
  border: 1px solid rgba(45, 212, 255, 0.45);
  box-shadow: 0 0 34px rgba(45, 212, 255, 0.1), 0 14px 40px rgba(0, 0, 20, 0.35);
}
.edcards--top .edcard--biz { border: 1px solid rgba(139, 61, 245, 0.4); }
.edcards--top .edcard::before { display: block; height: 3px; }
.edcards--top .edcard--pro::before { background: linear-gradient(90deg, #2dd4ff, #8b3df5); }
.edcards--top .edcard--biz::before { background: linear-gradient(90deg, #8b3df5, #e23ad9); }

/* Chips + eyebrows back to per-edition tones. */
.edcards--top .edition-status {
  border-color: rgba(45, 212, 255, 0.45);
  background: rgba(45, 212, 255, 0.08);
  color: #9beeff;
}
.edcards--top .edition-status--gated {
  border-color: rgba(139, 61, 245, 0.55);
  background: rgba(139, 61, 245, 0.1);
  color: #c9b2ff;
}
.edcards--top .edcard--biz .edcard-eyebrow { color: #b8a3e8; }

/* Description paragraphs. */
.edcards--top .edcard-desc {
  display: block;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0 0 0.7rem;
}

/* ✓ bullets, bright text, per-edition check color. */
.edcards--top .edcard-list li { color: var(--text); }
.edcards--top .edcard-list li::before {
  content: "✓";
  color: #9beeff;
  font-size: 0.9em;
  font-weight: 600;
  top: 0.05em;
}
.edcards--top .edcard--biz .edcard-list li::before {
  content: "✓";
  color: #c9b2ff;
  font-size: 0.9em;
  font-weight: 600;
  top: 0.05em;
}

/* "plus" roll-up divider. */
.edcards--top .edcard-plus {
  border-top: 1px solid rgba(120, 140, 220, 0.18);
  padding-top: 0.55rem;
  color: var(--text);
}

/* Footer: colored offer line above a full-width CTA. */
.edcards--top .edcard-foot { display: block; margin-top: auto; border-top: none; padding-top: 0; }
.edcards--top .edcard-offer { margin: 0 0 0.55rem; color: #9beeff; }
.edcards--top .edcard--biz .edcard-offer { color: #c9b2ff; }
.edcards--top .edcard-cta { display: block; width: 100%; min-width: 0; text-align: center; }
.edcards--top .btn-ghost.edcard-cta { border-color: rgba(120, 140, 220, 0.32); }

/* Height tiers for the richer cards. */
@media (min-width: 1101px) and (max-height: 820px) {
  .edcards--top .edcard-desc { font-size: 0.8rem; margin-bottom: 0.45rem; }
  .edcards--top .edcard-offer { margin-bottom: 0.4rem; }
}
@media (min-width: 1101px) and (max-height: 760px) {
  /* At the smallest desktop heights the paragraphs are the one element that
     cannot fit alongside 4 bullets + the 9-tile grid; the bullets carry the
     message there. Descriptions return at ≥761px heights. */
  .edcards--top .edcard-desc { display: none; }
  .edcards--top .edcard-plus { padding-top: 0.35rem; }
  .edcards--top .edcard-offer { font-size: 0.76rem; margin-bottom: 0.3rem; }
  .edcards--top .edcard-cta { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* Micro-terms line between the offer and the full-width CTA (mockup text in
   the current card design). */
.edcards--top .edcard-micro {
  max-width: none;
  margin: 0.15rem 0 0.6rem;
}
@media (min-width: 1101px) and (max-height: 760px) {
  .edcards--top .edcard-micro { font-size: 0.66rem; margin-bottom: 0.4rem; }
}

/* Philosophy subline on one line at desktop widths: lift the section-head
   width cap (same treatment as #editions). Wraps naturally on narrow screens. */
#philosophy .section-head { max-width: 1120px; }

/* Align the edition cards + capability grid to the container's left edge, so
   they line up with the section heading and match every other section (whose
   grids span the full container rather than a centered 1180px max-width). */
.edcards,
.edmods { max-width: none; margin-inline: 0; }

/* Standardize the Business Pilot modal to match the register ("Start Your
   KleverDeck Pro Free Trial") modal: same inner padding as auth/contact modals,
   and the same tighter field rhythm. Placeholders added in the markup. */
#pilotModalOverlay .modal-box { padding: 1rem 2.4rem 1.3rem; }
#pilotForm .form-field { margin-bottom: 0.65rem; gap: 0.4rem; }
#pilotForm .form-field input,
#pilotForm .form-field select,
#pilotForm .form-field textarea { padding-top: 0.6rem; padding-bottom: 0.6rem; }
#pilotForm .form-consent { margin-bottom: 0.65rem; }

/* Standardize the Contact modal to match the register + pilot modals: same
   inner padding (1rem/1.3rem top/bottom) and the same tighter field rhythm.
   Placeholders switched to the shared "Enter your …" style in the markup. */
#contactModalOverlay .modal-box { padding: 1rem 2.4rem 1.3rem; }
#contactForm .form-field { margin-bottom: 0.65rem; gap: 0.4rem; }
#contactForm .form-field input,
#contactForm .form-field select,
#contactForm .form-field textarea { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* Auth modal: "Already have an account? Sign In" (and the sign-in view's
   "New to KleverDeck?") now render as their own paragraph after the subtitle.
   Drop the legacy negative top margin that assumed the switch was an inline
   span appended to the subtitle, so it reads as a clean next paragraph. */
#authModalOverlay .auth-switch { margin-top: 0; }

/* Contact section (replaces "Join the Movement"): intentionally carries no
   bespoke CSS — it reuses the .cta-section shell (dark bg, glows, K
   watermark) and the site-standard .eyebrow / .cta-slogan (h2) / .cta-copy
   so the eyebrow, heading and subline match every other section head. */

/* Final screen = contact section + footer sharing one viewport. Shave the
   section by exactly the footer's height (100px at desktop) so the footer
   rides up into the last screen instead of leaving dead space under the CTA
   plus a 100px micro-scroll. The exact match matters: with mandatory snap,
   any other reduction leaves the section's snap-start unreachable and shows
   a seam of the previous section at the top of the final screen. Keep this
   value in sync with .site-footer's rendered height. */
@media (min-width: 1101px) {
  #contact { min-height: calc(100vh - 100px); }
}