/* ==========================================================================
   FILE: /assets/css/main.css
   ACTION: Use this as the single global stylesheet for the Kwiker public UI.
   PURPOSE: Marketing pages, product pages, safety/help pages, legal center,
            responsive layout, accessibility states, and print styles.
   CMS NOTE: Keep these class names when converting each HTML section into
             CMS components or template partials. Content may be replaced by
             CMS fields without changing the layout classes.
   REQUIRED FONTS: Bricolage Grotesque 700/800 + Manrope 400/500/600/700.
   REQUIRED IMAGE: /assets/img/app-trips.png (replace later with an optimized
                   WebP/AVIF screenshot of the real app).
   ========================================================================== */

:root {
  /* Exact brand tokens */
  --bg: #EDEAE2;
  --bg-grain: #E7E3DA;
  --white: #FFFFFF;
  --ink: #16302C;
  --ink-soft: #4A5F5B;
  --ink-faint: #8A9A96;
  --teal: #0E7C6E;
  --teal-deep: #0A5C52;
  --teal-50: #E4F2EF;
  --teal-100: #CDE7E2;
  --coral: #FF7A59;
  --coral-soft: #FFE6DE;
  --sun: #FFC24B;
  --green: #1FA66A;
  --line: #E8EDEB;

  /* Fonts */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius scale */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Low-opacity layered shadows */
  --shadow-soft: 0 1px 2px rgba(22, 48, 44, .04), 0 10px 30px rgba(22, 48, 44, .06);
  --shadow-card: 0 2px 8px rgba(22, 48, 44, .05), 0 18px 50px rgba(22, 48, 44, .08);
  --shadow-phone: 0 20px 36px rgba(10, 92, 82, .12), 0 42px 90px rgba(22, 48, 44, .16);
  --shadow-header: 0 8px 24px rgba(22, 48, 44, .08);

  /* Layout */
  --content: 1200px;
  --reading: 760px;
  --header-height: 80px;
  --header-height-small: 66px;

  /* Interaction */
  --focus: 0 0 0 4px rgba(255, 122, 89, .25);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --duration-fast: 160ms;
  --duration: 220ms;
}

/* ==========================================================================
   1. RESET + DOCUMENT BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height-small) + var(--space-5));
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  box-shadow: var(--focus);
}

::selection {
  background: var(--coral-soft);
  color: var(--ink);
}

[hidden] {
  display: none !important;
}

.kw-skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 9999;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease);
}

.kw-skip-link:focus {
  transform: none;
}

.kw-container {
  width: min(calc(100% - 32px), var(--content));
  margin-inline: auto;
}

.kw-reading {
  width: min(calc(100% - 32px), var(--reading));
  margin-inline: auto;
}

/* `class="kw-container kw-reading"` is used on every legal hero and prose block. Both classes set
   width, and .kw-container is re-declared inside a @media (min-width:700px) block below — media rules
   win on cascade order, so on desktop the container's 1200px silently overrode the 760px reading
   width and kw-reading became a no-op. This combined selector has higher specificity, so the reading
   column stays a readable, centred measure at every width. */
.kw-container.kw-reading {
  width: min(calc(100% - 32px), var(--reading));
  margin-inline: auto;
}

@media (min-width:700px) {
  .kw-container.kw-reading {
    width: min(calc(100% - 48px), var(--reading));
  }
}

.kw-section {
  padding-block: clamp(var(--space-8), 8vw, var(--space-9));
}

.kw-section--white {
  background: var(--white);
}

.kw-section--sand {
  background: var(--bg);
}

.kw-section--grain {
  background: var(--bg-grain);
}

.kw-section--tint {
  background: var(--teal-50);
}

.kw-section__header {
  max-width: 760px;
  margin-block-end: clamp(var(--space-7), 5vw, var(--space-8));
}

.kw-section__header--split {
  display: grid;
  gap: var(--space-5);
}

.kw-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--teal);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.kw-eyebrow--light {
  color: #A9DDD5;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: .98;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.55rem);
  line-height: 1.02;
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.12;
}

h4 {
  font-size: 1.15rem;
  line-height: 1.25;
}

p {
  margin: 0;
}

.kw-lead {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.2vw, 1.22rem);
  line-height: 1.7;
}

.kw-muted {
  color: var(--ink-soft);
}

.kw-faint {
  color: var(--ink-faint);
}

.kw-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 30px;
  padding-inline: var(--space-3);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--teal-deep);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}

.kw-tag--coral {
  border-color: var(--coral-soft);
  background: var(--coral-soft);
  color: #A7432D;
}

.kw-tag--sun {
  border-color: #F5D78F;
  background: #FFF7DC;
  color: #775300;
}

.kw-tag--live {
  border-color: #BDE5D1;
  background: #E8F7EF;
  color: #0B7246;
}

.kw-tag--soon {
  border-color: #E3DDD1;
  background: #F3F0E9;
  color: var(--ink-soft);
}

/* ==========================================================================
   2. BUTTONS + LINKS
   ========================================================================== */

.kw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: transform var(--duration-fast) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.kw-button:hover {
  transform: translateY(-2px);
}

.kw-button:active {
  transform: translateY(0);
}

/* Primary CTA = the app's teal gradient (same ramp as the in-app header), with a teal-tinted shadow.
   Coral stays reserved for high-intent moments, exactly as in the app. */
.kw-button--primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: var(--white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 6px 16px -6px rgba(14, 124, 110, .45),
    0 2px 6px -2px rgba(22, 48, 44, .18);
}

.kw-button--primary:hover {
  background: linear-gradient(135deg, #10897A 0%, #0B6A5E 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .14) inset,
    0 12px 26px -8px rgba(14, 124, 110, .55),
    0 3px 8px -3px rgba(22, 48, 44, .2);
}

.kw-button--primary:active {
  background: linear-gradient(135deg, var(--teal-deep) 0%, #084C44 100%);
  box-shadow: 0 2px 6px -2px rgba(14, 124, 110, .4);
}

.kw-button--primary:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.kw-button--secondary {
  border-color: rgba(22, 48, 44, .18);
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
}

.kw-button--secondary:hover {
  border-color: var(--teal);
  background: var(--white);
  color: var(--teal-deep);
}

.kw-button--dark {
  background: var(--ink);
  color: var(--white);
}

.kw-button--dark:hover {
  background: var(--teal-deep);
}

.kw-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--teal-deep);
  font-weight: 700;
}

.kw-text-link::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease);
}

.kw-text-link:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   3. GLOBAL HEADER + MOBILE NAV
   ========================================================================== */

.kw-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(22, 48, 44, .08);
  background: rgba(237, 234, 226, .92);
  backdrop-filter: blur(14px) saturate(1.05);
  transition: min-height var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.kw-header.is-scrolled {
  min-height: var(--header-height-small);
  background: rgba(237, 234, 226, .97);
  box-shadow: var(--shadow-header);
}

.kw-header__inner {
  min-height: inherit;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.kw-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
}

/* The logo PNG already carries the teal tile and its rounded corners, so no background here —
   the radius only clips the bitmap to match, and `display:block` kills the inline baseline gap. */
.kw-brand__mark {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.kw-brand__word {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.035em;
}

.kw-nav {
  position: fixed;
  inset: var(--header-height-small) 0 0;
  z-index: 999;
  display: none;
  padding: var(--space-6) var(--space-4);
  background: var(--bg);
  overflow: auto;
}

.kw-nav.is-open {
  display: block;
}

.kw-nav__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.kw-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 700;
}

.kw-nav__list a:hover,
.kw-nav__list a[aria-current="page"] {
  background: var(--white);
  color: var(--ink);
}

.kw-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.kw-language {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(22, 48, 44, .16);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-weight: 700;
}

.kw-menu-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 48, 44, .16);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
}

.kw-menu-toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.kw-header__download {
  display: none;
  min-height: 46px;
  padding-inline: var(--space-4);
}

/* ==========================================================================
   4. HERO — PRODUCT-LED PHONE + REAL APP UI
   ========================================================================== */

.kw-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), 6vw, var(--space-8));
  background: linear-gradient(135deg, var(--teal-50) 0%, var(--bg) 54%, var(--white) 100%);
}

.kw-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -18%;
  inset-block-start: 10%;
  width: min(56vw, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(205, 231, 226, .5);
  filter: blur(70px);
  pointer-events: none;
}

.kw-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.kw-hero__copy {
  max-width: 650px;
}

.kw-hero__copy h1 {
  max-width: 10ch;
  margin-block-end: var(--space-5);
}

.kw-hero__copy .kw-lead {
  margin-block-end: var(--space-6);
}

.kw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.kw-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 600;
}

.kw-hero__proof span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.kw-hero__proof span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.kw-product-stage {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
}

.kw-phone {
  position: relative;
  z-index: 2;
  width: min(360px, 82vw);
  aspect-ratio: 790 / 1714;
  padding: 10px;
  border-radius: 42px;
  background: #0D1816;
  box-shadow: var(--shadow-phone);
}

.kw-phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block-start: 10px;
  inset-inline-start: 50%;
  width: 112px;
  height: 24px;
  border-radius: 0 0 15px 15px;
  background: #0D1816;
  transform: translateX(-50%);
}

.kw-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 33px;
  background: #F4F5F3;
}

.kw-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.kw-product-card {
  position: absolute;
  z-index: 4;
  width: min(250px, 64vw);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.kw-product-card strong {
  display: block;
  color: var(--ink);
  line-height: 1.35;
}

.kw-product-card small {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--ink-soft);
  line-height: 1.45;
}

.kw-product-card--route {
  inset-inline-start: 0;
  inset-block-start: 15%;
}

.kw-product-card--price {
  inset-inline-end: 0;
  inset-block-start: 45%;
  width: 170px;
  border-color: var(--coral-soft);
  background: var(--coral-soft);
}

.kw-product-card--status {
  inset-inline-start: 4%;
  inset-block-end: 9%;
  width: 210px;
}

.kw-product-card--driver {
  inset-inline-end: 2%;
  inset-block-end: 18%;
  width: 225px;
}

.kw-route-line {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.kw-route-line span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .92rem;
  font-weight: 600;
}

.kw-route-line i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}

.kw-route-line span:last-child i {
  background: var(--coral);
}

.kw-price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -.04em;
}

.kw-driver-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
}

.kw-driver-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-weight: 800;
}

.kw-rating {
  color: #7A5A00;
  font-weight: 700;
}

.kw-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--green);
  font-weight: 700;
}

.kw-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(31, 166, 106, .12);
}

/* ==========================================================================
   5. TRUST STRIP
   ========================================================================== */

.kw-trust-strip {
  position: relative;
  z-index: 3;
  margin-block-start: calc(var(--space-6) * -1);
}

.kw-trust-strip__list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-card);
}

.kw-trust-strip__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  font-size: .94rem;
  font-weight: 600;
}

.kw-icon {
  width: 22px;
  height: 22px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kw-trust-strip .kw-icon {
  color: #8CD7CC;
}

/* ==========================================================================
   6. EDITORIAL INTRO / MISSION
   ========================================================================== */

.kw-editorial {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.kw-editorial__figure {
  margin: 0;
}

.kw-editorial__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.kw-editorial__statement {
  max-width: 23ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.16;
}

.kw-editorial__body {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* ==========================================================================
   7. HOW IT WORKS — ALTERNATING PRODUCT ROWS
   ========================================================================== */

.kw-flow-list {
  display: grid;
  gap: var(--space-9);
}

.kw-flow {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.kw-flow__copy h3 {
  margin-block: var(--space-3) var(--space-5);
}

.kw-steps {
  list-style: none;
  padding: 0;
  display: grid;
}

.kw-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid rgba(22, 48, 44, .1);
}

.kw-step:last-child {
  border-block-end: 1px solid rgba(22, 48, 44, .1);
}

.kw-step__number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal-100);
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--teal-deep);
  font-size: .84rem;
  font-weight: 800;
}

.kw-step strong {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--ink);
}

.kw-step p {
  color: var(--ink-soft);
  font-size: .96rem;
}

.kw-product-panel {
  position: relative;
  min-height: 420px;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid rgba(22, 48, 44, .08);
  border-radius: var(--radius-lg);
  background: var(--teal-50);
  box-shadow: var(--shadow-soft);
}

.kw-product-panel--coral {
  background: var(--coral-soft);
}

.kw-product-panel--ink {
  background: var(--ink);
  color: var(--white);
}

.kw-search-ui {
  display: grid;
  gap: var(--space-3);
  max-width: 440px;
  margin-inline: auto;
}

.kw-search-ui__bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-faint);
  box-shadow: var(--shadow-soft);
}

.kw-search-ui__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kw-filter-chip {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 700;
}

.kw-trip-card {
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.kw-trip-card__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
}

.kw-trip-card__route {
  display: grid;
  gap: var(--space-3);
}

.kw-trip-card__route span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
}

.kw-trip-card__route i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}

.kw-trip-card__route span:last-child i {
  background: var(--coral);
}

.kw-trip-card__price {
  text-align: end;
}

.kw-trip-card__price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.kw-trip-card__price small {
  color: var(--ink-soft);
}

.kw-trip-card__footer {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-soft);
  font-size: .88rem;
}

.kw-provider-ui {
  display: grid;
  gap: var(--space-4);
  max-width: 440px;
  margin-inline: auto;
}

.kw-provider-ui__card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.kw-provider-ui__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.kw-provider-ui__metric {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.kw-provider-ui__metric div {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--teal-50);
}

.kw-provider-ui__metric strong {
  display: block;
  font-size: 1.2rem;
}

.kw-provider-ui__metric small {
  color: var(--ink-soft);
}

/* ==========================================================================
   8. FEATURE MOSAIC — NOT IDENTICAL THREE-CARD GRID
   ========================================================================== */

.kw-feature-mosaic {
  display: grid;
  gap: var(--space-4);
}

.kw-feature {
  position: relative;
  min-height: 230px;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid rgba(22, 48, 44, .08);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.kw-feature--large {
  min-height: 330px;
  background: var(--teal-50);
}

.kw-feature--dark {
  background: var(--ink);
  color: var(--white);
}

.kw-feature--coral {
  background: var(--coral-soft);
}

.kw-feature h3 {
  margin-block: var(--space-4) var(--space-3);
}

.kw-feature--dark h3 {
  color: var(--white);
}

.kw-feature p {
  max-width: 45ch;
  color: var(--ink-soft);
}

.kw-feature--dark p {
  color: rgba(255, 255, 255, .74);
}

.kw-feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--white);
  color: var(--teal);
  box-shadow: var(--shadow-soft);
}

.kw-feature__icon .kw-icon {
  width: 25px;
  height: 25px;
}

/* ==========================================================================
   9. SAFETY BAND
   ========================================================================== */

.kw-safety {
  background: var(--teal-deep);
  color: var(--white);
}

.kw-safety h2,
.kw-safety h3 {
  color: var(--white);
}

.kw-safety .kw-lead {
  color: rgba(255, 255, 255, .76);
}

.kw-safety__grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.kw-safety__intro {
  max-width: 610px;
}

.kw-safety__items {
  display: grid;
  gap: var(--space-3);
}

.kw-safety-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .07);
}

.kw-safety-item .kw-icon {
  color: #95DBD0;
}

.kw-safety-item p {
  margin-block-start: var(--space-1);
  color: rgba(255, 255, 255, .72);
  font-size: .94rem;
}

.kw-safety-note {
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--sun);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   10. COVERAGE + MAP
   ========================================================================== */

.kw-coverage {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.kw-map-card {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-lg);
  background: var(--teal-50);
  overflow: hidden;
}

.kw-map-card svg {
  width: min(520px, 94%);
}

.kw-coverage-list {
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.kw-coverage-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink-soft);
}

.kw-coverage-dot {
  width: 12px;
  height: 12px;
  flex: none;
  margin-block-start: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(14, 124, 110, .12);
}

.kw-coverage-dot--soon {
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(255, 122, 89, .14);
}

/* ==========================================================================
   11. ROADMAP
   ========================================================================== */

.kw-roadmap-list {
  display: grid;
  gap: var(--space-4);
}

.kw-roadmap-item {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid rgba(22, 48, 44, .09);
  border-radius: var(--radius-md);
  background: var(--white);
}

.kw-roadmap-item--live {
  border-color: var(--teal-100);
  background: var(--teal-50);
}

.kw-roadmap-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.kw-roadmap-item p {
  color: var(--ink-soft);
}

/* --- Focused roadmap: one live vertical, everything else unnamed -------------
   The section used to list four tiles, three of them unbuilt, so the one real
   product was outnumbered 3:1 by things that do not exist. Now the live vertical
   is the hero and the rest collapses into a single statement that names nothing.
   Nothing is blurred or hidden in CSS: the unreleased copy is simply not rendered,
   so there is nothing in the document to inspect. */

.kw-roadmap-live {
  padding: var(--space-6);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-md);
  background: var(--teal-50);
}

.kw-roadmap-live h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  letter-spacing: -.02em;
}

.kw-roadmap-live p {
  max-width: 56ch;
  color: var(--ink-soft);
}

.kw-roadmap-live__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}

.kw-roadmap-live__cta:hover { text-decoration: underline; }

/* The "more coming" statement. Deliberately quiet — it is context, not a product. */
.kw-roadmap-next {
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed rgba(22, 48, 44, .18);
  border-radius: var(--radius-md);
  background: transparent;
}

.kw-roadmap-next strong {
  display: block;
  margin-bottom: 6px;
  font-size: .95rem;
  letter-spacing: .01em;
}

.kw-roadmap-next p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* ==========================================================================
   12. DOWNLOAD CTA
   ========================================================================== */

.kw-download {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
}

.kw-download__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding: clamp(var(--space-6), 6vw, var(--space-8));
}

.kw-download h2 {
  color: var(--white);
}

.kw-download .kw-lead {
  color: rgba(255, 255, 255, .74);
}

/* Official store badges — Apple's / Google's own artwork, never restyled or distorted. Google's SVG
   bakes in its required clear space, so it renders taller to optically match Apple's button.
   Both badges are black-bodied (Google ships no white variant), so on the dark teal download band
   they'd vanish. We seat them on a light plate instead of altering the artwork — the badges stay
   pixel-identical to the official files and keep their clear space. */
.kw-store-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-start: var(--space-5);
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55);
}

.kw-store-badge {
  display: inline-flex;
  border-radius: 10px;
  transition: transform .18s ease, box-shadow .24s ease;
}

.kw-store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}

.kw-store-badge:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

/* Measured: BOTH badges fill their viewBox with no baked padding, so an equal CSS height gives equal
   visible buttons. Widths differ (162 vs 182) because Google's wordmark is longer — stretching either
   to match would distort the artwork, which both stores forbid. */
.kw-store-badge img {
  display: block;
  height: 54px;
  width: auto;
}

/* Google requires this attribution wherever its badge appears. Sits on the dark teal band. */
.kw-store-tm {
  margin-block-start: var(--space-3);
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
}

.kw-store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.kw-store-button {
  min-width: 180px;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  transition: background-color var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
}

.kw-store-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .14);
}

.kw-store-button small {
  color: rgba(255, 255, 255, .62);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kw-store-button strong {
  font-size: 1.05rem;
}

.kw-download__visual {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: end;
}

.kw-download__shot {
  max-width: 240px;
  padding: 7px;
  border-radius: 28px;
  background: #101716;
  transform: rotate(-4deg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}

.kw-download__shot img {
  border-radius: 22px;
}

.kw-qr {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink-soft);
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

/* Inside the Legal-center page hero the notice sits under the lead, so it needs top separation. */
.kw-page-hero__copy .kw-legal-notice {
  margin-block-start: var(--space-5);
  margin-block-end: 0;
}

/* Stretch the FAQ across the full content width (same measure as the roadmap cards). */
.kw-faq {
  width: 100%;
}

.kw-faq details {
  border-block-end: 1px solid rgba(22, 48, 44, .12);
}

.kw-faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 56px var(--space-5) 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}

.kw-faq summary::-webkit-details-marker {
  display: none;
}

.kw-faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: var(--space-2);
  inset-block-start: 50%;
  color: var(--teal);
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 500;
  transform: translateY(-50%);
  transition: transform var(--duration-fast) var(--ease);
}

.kw-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.kw-faq details p {
  max-width: 70ch;
  padding: 0 56px var(--space-5) 0;
  color: var(--ink-soft);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.kw-footer {
  padding-block: var(--space-8) var(--space-5);
  border-block-start: 1px solid rgba(22, 48, 44, .1);
  background: var(--bg);
}

.kw-footer__grid {
  display: grid;
  gap: var(--space-7);
}

.kw-footer__brand {
  max-width: 340px;
}

.kw-footer__brand p {
  margin-block-start: var(--space-4);
  color: var(--ink-soft);
}

.kw-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.kw-footer__column h3 {
  margin-block-end: var(--space-3);
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kw-footer__column ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.kw-footer__column a {
  color: var(--ink-soft);
  font-size: .94rem;
  font-weight: 600;
}

.kw-footer__column a:hover {
  color: var(--teal-deep);
}

.kw-footer__bottom {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgba(22, 48, 44, .1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-faint);
  font-size: .84rem;
}

/* ==========================================================================
   15. INTERNAL PAGE HERO
   ========================================================================== */

.kw-page-hero {
  padding-block: clamp(var(--space-8), 8vw, var(--space-9));
  background: var(--teal-50);
}

.kw-page-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

.kw-page-hero__copy {
  max-width: 780px;
}

.kw-page-hero h1 {
  margin-block-end: var(--space-5);
}

.kw-page-hero__aside {
  padding: var(--space-5);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .55);
}

.kw-page-hero__aside ul {
  padding-inline-start: 20px;
  color: var(--ink-soft);
}

/* ==========================================================================
   16. HELP / CONTACT UI
   ========================================================================== */

.kw-help-grid {
  display: grid;
  gap: var(--space-4);
}

.kw-help-card {
  padding: var(--space-5);
  border: 1px solid rgba(22, 48, 44, .09);
  border-radius: var(--radius-md);
  background: var(--white);
}

.kw-help-card h3 {
  margin-block: var(--space-4) var(--space-2);
}

.kw-help-card p {
  color: var(--ink-soft);
}

.kw-help-card .kw-text-link {
  margin-block-start: var(--space-4);
}

.kw-emergency-card {
  border-color: var(--coral);
  background: var(--coral-soft);
}

/* ==========================================================================
   17. LEGAL CENTER + LEGAL DOCUMENT LAYOUT
   ========================================================================== */

.kw-legal-index {
  display: grid;
  gap: var(--space-4);
}

.kw-legal-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid rgba(22, 48, 44, .1);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration) var(--ease);
}

.kw-legal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.kw-legal-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--ink-faint);
  font-size: .82rem;
}

.kw-legal-card p {
  color: var(--ink-soft);
}

.kw-legal-hero {
  padding-block: var(--space-8) var(--space-7);
  background: var(--teal-50);
}

.kw-legal-hero h1 {
  margin-block-end: var(--space-4);
}

.kw-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-5);
  color: var(--ink-soft);
  font-size: .9rem;
}

.kw-legal-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-7) var(--space-9);
}

.kw-legal-toc {
  border: 1px solid rgba(22, 48, 44, .1);
  border-radius: var(--radius-md);
  background: var(--white);
}

.kw-legal-toc summary {
  padding: var(--space-4);
  font-weight: 700;
  cursor: pointer;
}

.kw-legal-toc nav {
  padding: 0 var(--space-4) var(--space-4);
}

.kw-legal-toc ol {
  padding-inline-start: 22px;
  display: grid;
  gap: var(--space-2);
}

.kw-legal-toc a {
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 600;
}

.kw-legal-toc a:hover {
  color: var(--teal-deep);
}

.kw-legal-article {
  min-width: 0;
}

.kw-legal-notice {
  margin-block-end: var(--space-6);
  padding: var(--space-4);
  border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
  border-inline-start: 4px solid var(--coral);
  background: var(--coral-soft);
  color: var(--ink-soft);
}

.kw-legal-article section {
  scroll-margin-top: calc(var(--header-height-small) + var(--space-5));
}

.kw-legal-article section+section {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-7);
  border-block-start: 1px solid rgba(22, 48, 44, .1);
}

.kw-legal-article h2 {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  margin-block-end: var(--space-4);
}

.kw-legal-article h3 {
  margin-block: var(--space-5) var(--space-3);
  font-size: 1.18rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.01em;
}

.kw-legal-article p+p {
  margin-block-start: var(--space-3);
}

.kw-legal-article ul,
.kw-legal-article ol {
  margin-block: var(--space-3);
  padding-inline-start: 24px;
}

.kw-legal-article li+li {
  margin-block-start: var(--space-2);
}

.kw-legal-article a:not(.kw-button) {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kw-legal-article table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-size: .9rem;
  /* Wide data tables (3 columns) can't fit a phone. Scroll the TABLE, never the page. */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width:760px) {
  .kw-legal-article table {
    display: table;
  }
}

.kw-legal-article th,
.kw-legal-article td {
  padding: var(--space-3);
  border: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.kw-legal-article th {
  background: var(--teal-50);
}

.kw-placeholder {
  display: inline;
  padding: 1px 5px;
  border-radius: 5px;
  background: #FFF1B8;
  color: #634900;
  font-weight: 700;
  /* Placeholder tokens are long unbreakable words ([CONFIRM_..._WITH_COUNSEL], up to ~60 chars).
     Without this they cannot wrap and force horizontal page overflow on narrow screens. */
  overflow-wrap: anywhere;
}

.kw-related-policies {
  margin-block-start: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-grain);
}

.kw-related-policies li + li {
  margin-block-start: 0;
}

.kw-related-policies ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

/* inline-flex with no align-items left the label and its arrow off-centre inside the pill. */
.kw-related-policies a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--teal-deep);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.kw-back-to-top {
  position: fixed;
  inset-inline-end: var(--space-4);
  inset-block-end: var(--space-4);
  z-index: 20;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration) var(--ease);
}

.kw-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ==========================================================================
   18. REVEAL MOTION
   Content remains visible without JavaScript. JS adds .js to <html>.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   19. RESPONSIVE ENHANCEMENTS
   ========================================================================== */

@media (min-width:700px) {
  .kw-container {
    width: min(calc(100% - 48px), var(--content));
  }

  .kw-trust-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--space-6);
  }

  .kw-feature-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kw-feature--large {
    grid-row: span 2;
  }

  /* Two-column only for cards that actually HAVE an icon (roadmap.html): text left, icon tile pinned
     right. The old `minmax(240px,.8fr)` gave the icon a ~440px column, stranding it mid-card.
     Home's vision cards have no icon — their children are the header and the paragraph, so applying a
     2-col grid there would push the paragraph beside the title and crush it. :has() keeps them 1-col. */
  .kw-roadmap-item:has(> .kw-feature__icon) {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .kw-roadmap-item>.kw-feature__icon {
    justify-self: end;
  }

  .kw-help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kw-legal-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kw-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width:900px) {
  .kw-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .kw-nav {
    position: static;
    inset: auto;
    display: block;
    padding: 0;
    background: transparent;
    overflow: visible;
  }

  .kw-nav__list {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
  }

  .kw-nav__list a {
    min-height: 44px;
    padding-inline: 0;
    border-radius: 0;
    position: relative;
  }

  .kw-nav__list a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 2px;
    height: 2px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
  }

  .kw-nav__list a:hover,
  .kw-nav__list a[aria-current="page"] {
    background: transparent;
  }

  .kw-nav__list a:hover::after,
  .kw-nav__list a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .kw-menu-toggle {
    display: none;
  }

  .kw-header__download {
    display: inline-flex;
  }

  .kw-hero__grid {
    grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
    gap: var(--space-8);
    min-height: calc(100svh - var(--header-height) - 40px);
  }

  .kw-product-stage {
    min-height: 690px;
  }

  .kw-phone {
    width: 380px;
  }

  .kw-product-card--route {
    inset-inline-start: -2%;
  }

  .kw-product-card--price {
    inset-inline-end: -1%;
  }

  .kw-trust-strip__list {
    padding-inline: var(--space-7);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* Explicit placement, because auto-flow put the figure in the right column and pushed the
     statement down-left. Left column stacks eyebrow, illustration, body; the statement holds the
     right column on its own. */
  .kw-editorial > .kw-eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .kw-editorial__figure {
    grid-column: 1;
    grid-row: 2;
  }

  .kw-editorial__body {
    grid-column: 1;
    grid-row: 3;
  }

  .kw-editorial__statement {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    padding-inline-start: var(--space-5);
  }

  .kw-editorial {
    grid-template-columns: .85fr 1.15fr;
    gap: var(--space-8);
  }

  .kw-flow {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
    gap: var(--space-8);
  }

  .kw-flow--reverse .kw-flow__visual {
    order: -1;
  }

  .kw-feature-mosaic {
    grid-template-columns: 1.3fr .7fr .7fr;
    grid-template-rows: auto auto;
  }

  .kw-feature--large {
    grid-row: 1 / span 2;
  }

  .kw-feature--wide {
    grid-column: 2 / span 2;
  }

  .kw-safety__grid {
    grid-template-columns: .9fr 1.1fr;
    gap: var(--space-8);
  }

  .kw-safety__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kw-coverage {
    grid-template-columns: .9fr 1.1fr;
    gap: var(--space-8);
  }

  .kw-download__grid {
    grid-template-columns: 1fr .85fr;
  }

  .kw-footer__grid {
    grid-template-columns: 1fr 1.65fr;
  }

  .kw-page-hero__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .kw-help-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kw-legal-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kw-legal-layout {
    grid-template-columns: 270px minmax(0, var(--reading));
    justify-content: center;
    gap: var(--space-8);
  }

  .kw-legal-toc {
    position: sticky;
    inset-block-start: calc(var(--header-height-small) + var(--space-5));
  }

  .kw-legal-toc summary {
    display: none;
  }

  .kw-legal-toc nav {
    padding: var(--space-4);
  }
}

@media (max-width:520px) {
  .kw-product-stage {
    min-height: 590px;
  }

  .kw-phone {
    width: min(315px, 86vw);
  }

  .kw-product-card {
    padding: var(--space-3);
  }

  .kw-product-card--route {
    inset-inline-start: -4px;
    inset-block-start: 14%;
    width: 190px;
  }

  .kw-product-card--price {
    inset-inline-end: -4px;
    inset-block-start: 48%;
    width: 138px;
  }

  .kw-product-card--driver {
    inset-inline-end: -4px;
    inset-block-end: 14%;
    width: 180px;
  }

  .kw-product-card--status {
    display: none;
  }

  .kw-download__visual {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .kw-download__shot {
    max-width: 200px;
  }

  .kw-footer__columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .kw-button:hover,
  .kw-text-link:hover::after,
  .kw-legal-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   21. PRINT — LEGAL DOCUMENTS
   ========================================================================== */

@media print {
  :root {
    --bg: #FFFFFF;
  }

  body {
    background: #FFFFFF;
    color: #000;
    font-size: 11pt;
  }

  .kw-header,
  .kw-footer,
  .kw-legal-toc,
  .kw-back-to-top,
  .kw-button,
  .kw-related-policies {
    display: none !important;
  }

  .kw-legal-hero {
    padding: 0 0 24px;
    background: #FFFFFF;
  }

  .kw-legal-layout {
    display: block;
    padding: 0;
  }

  .kw-legal-article {
    width: 100%;
    max-width: none;
  }

  .kw-legal-article section+section {
    break-before: auto;
  }

  a {
    color: #000 !important;
    text-decoration: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}
/* ==========================================================================
   LEGAL CENTER — long-form prose, callouts, plain lists
   Used by /legal/*.html. Tokens only; no new colours introduced.
   ========================================================================== */

.kw-prose h2 {
  margin-block: var(--space-8) var(--space-4);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.kw-prose h2:first-child {
  margin-block-start: 0;
}

.kw-prose p {
  margin-block-end: var(--space-4);
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
}

.kw-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kw-callout {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-md);
  background: var(--teal-50);
  color: var(--ink);
}

.kw-callout strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.kw-callout p {
  margin: 0;
  color: var(--ink-soft);
}

.kw-callout--warn {
  border-color: #F5D78F;
  background: #FFF7DC;
}

.kw-list {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: var(--space-5);
  color: var(--ink-soft);
}

.kw-list li {
  padding-inline-start: var(--space-2);
}

/* ==========================================================================
   WORDPRESS CORE OVERRIDE GUARD
   WordPress prints its own baseline ("global styles") after the theme stylesheet, using
   :root :where(...) selectors that outrank plain element rules. It repaints every link blue +
   underlined and adds list indentation, which breaks the header/footer. functions.php dequeues it;
   these rules are the belt-and-braces in case a plugin re-adds it.
   ========================================================================== */

/* NOTE ON SPECIFICITY — read before editing.
   Core/plugin CSS loads AFTER the theme and styles links at 0,1,0
   (`:root :where(a:where(:not(.wp-element-button)))`), so anything of ours that also scores 0,1,0
   loses on load order. Component rules like `.kw-nav__list a` are 0,1,1 and already win on their own
   — so this guard must NOT set colour globally, or it overrides them all (it did: it stripped the
   white from the primary button and the teal from the Related chips).
   Therefore: kill the underline globally, and bump COLOUR only for the links that genuinely score
   0,1,0 and would otherwise be repainted blue — the buttons and unclassed links. */
:root a:not(.wp-element-button) {
  text-decoration: none;
}

/* Orphan links (no component rule of their own) would inherit core's blue. Declared FIRST so the
   component bumps below — which tie on specificity — win on order. */
:root a:not([class]) {
  color: inherit;
}

/* Colour bumps for links whose own rule scores 0,1,0 or 0,1,1 and can lose to core. Values mirror
   the component rules exactly; these only raise specificity, they change nothing by design. */
:root a.kw-button--primary {
  color: var(--white);
}

:root a.kw-button--secondary,
:root a.kw-button--ghost {
  color: var(--ink);
}

:root a.kw-brand {
  color: var(--ink);
}

:root .kw-nav__list a,
:root .kw-footer__column a,
:root .kw-legal-toc a {
  color: var(--ink-soft);
}

:root .kw-legal-article a:not(.kw-button),
:root .kw-related-policies a,
:root a.kw-text-link {
  color: var(--teal-deep);
}

:root .kw-prose a {
  color: var(--ink);
}

/* Links that are meant to LOOK like links keep the underline. Scoped to .kw-text-link rather than
   every anchor in the article — a blanket `.kw-legal-article a` rule outranked the Related pills and
   underlined them. */
:root .kw-prose a:not(.wp-element-button),
:root a.kw-text-link:not(.wp-element-button) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The Related items are pills, not underlined links — but they carry .kw-text-link, whose rule above
   scores 0,3,1 (the :not() counts). So this must OUT-SPECIFY it, not merely follow it: 0,4,1. */
:root .kw-related-policies a.kw-text-link:not(.wp-element-button) {
  text-decoration: none;
}

/* Plugin stylesheets (e.g. the Under Construction plugin's main.min.css) load AFTER the theme and
   reset lists with `ol, ul { margin: 0 0 1.5em 3em; }` — a LEFT MARGIN, not padding — which indents
   every nav and footer column. Kill that margin for all lists: our own components set the padding
   they need (.kw-list declares its own padding-inline-start, so bullets are unaffected). */
:root :where(ul),
:root :where(ol) {
  margin: 0;
}

/* Structural lists carry no indent or markers at all. */
:root :where(.kw-nav__list),
:root :where(.kw-footer__column ul),
:root :where(.kw-footer__links),
:root :where(.kw-legal-toc ol),
:root :where(.kw-related-policies ul),
:root :where(.kw-coverage-list),
:root :where(.kw-flow-list) {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}