/* Kedmark marketing site, v2 restyle. Colours come only from /assets/kedmark-tokens.css. */
@font-face { font-family: "Domine"; src: url("/assets/fonts/domine-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --serif: "Domine", Georgia, serif;
  --sans: "Source Sans 3", Arial, sans-serif;
  --fg: var(--km-text);
  --fg2: var(--km-text-secondary);
  --acc: var(--km-accent);
  --acc-fg: var(--km-accent-contrast);
  --hair: var(--km-hairline);
  --card: var(--km-surface);
  --tint: var(--molten-12);
  --ring: var(--km-accent);
  --gutter: 1rem;
  --max: 74rem;
  --r-lg: 1.5rem;
  --r-md: 1rem;
  --r-sm: .625rem;
  --lift: 0 1px 0 var(--km-hairline), 0 18px 40px -24px color-mix(in srgb, var(--km-ink) 45%, transparent);
  color-scheme: light;
  font-family: var(--sans);
  font-synthesis: none;
  scroll-behavior: smooth;
  accent-color: var(--km-accent);
}
@media (min-width: 48rem) { :root { --gutter: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--km-bg); color: var(--km-text); }
body { margin: 0; min-width: 20rem; background: var(--km-bg); color: var(--fg); font-size: 1.0625rem; line-height: 1.6; -webkit-text-size-adjust: 100%; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--fg); text-wrap: balance; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }

/* Focus: every interactive element, 3px ring */
:where(a, button, input, select, textarea, label, [tabindex]):focus-visible,
a:focus-visible, button:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
input:focus-visible + label { outline: 3px solid var(--ring); outline-offset: 3px; }

/* Dark grounds re-map the local roles to the ink-side tokens */
.on-dark, .band-verdigris, .plan-featured, .site-footer {
  --fg: var(--km-paper);
  --fg2: var(--km-mist);
  --acc: var(--km-brass-bright);
  --acc-fg: var(--km-ink);
  --hair: color-mix(in srgb, var(--km-paper) 16%, transparent);
  --tint: color-mix(in srgb, var(--km-paper) 8%, transparent);
  --ring: var(--km-brass-bright);
  color: var(--fg);
}

/* Layout shell */
.site-shell { width: 100%; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band-surface { background: var(--km-surface); border-block: 1px solid var(--km-hairline); }
.band-verdigris { background: var(--km-verdigris); }
.section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; letter-spacing: -.01em; max-width: 20ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.btn-primary { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--km-ink) 22%, transparent); }
.btn-primary:hover { background: color-mix(in srgb, var(--acc) 86%, var(--fg)); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-outline:hover { background: var(--fg); color: var(--card); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-lg { min-height: 56px; padding: .9rem 2rem; font-size: 1.125rem; }
.btn-sm { min-height: 44px; padding: .55rem 1.1rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--km-bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--km-hairline); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 4.25rem; }
.brand { gap: .6rem; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; text-decoration: none; color: var(--km-text); }
.brand-plate { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--km-brass-bright); color: var(--km-ink); flex: none; }
.brand-plate svg { width: 1.6rem; height: 1.6rem; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav-link { padding-inline: .7rem; font-weight: 600; text-decoration: none; color: var(--km-text); border-radius: 999px; justify-content: center; }
.nav-link:hover { color: var(--km-accent); }
@media (max-width: 23.9rem) { .nav-hide-xs { display: none; } .brand { font-size: 1.15rem; } }

/* Hero */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: auto -10% -40% 35%; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--km-brass-bright) 20%, transparent), transparent); pointer-events: none; }
.hero-inner { position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.hero h1 { font-size: clamp(2.6rem, 7.2vw, 5rem); line-height: 1.02; letter-spacing: -.02em; max-width: 12ch; }
.h1-line { display: block; }
.h1-line + .h1-line { margin-top: .12em; }
.hero-support { margin-top: 1.5rem; max-width: 32ch; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; color: var(--fg2); }
.hero-actions { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: stretch; gap: .75rem; max-width: 20rem; }
@media (min-width: 30rem) { .hero-actions { align-items: flex-start; } .hero-actions .btn { min-width: 13rem; } }

.hero-stage { position: relative; justify-self: center; width: min(100%, 22rem); padding: 1.5rem 0 1rem 1.5rem; }
.phone { position: relative; z-index: 1; width: 100%; border-radius: 2.25rem; padding: .6rem; background: var(--km-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--km-paper) 14%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--km-ink) 80%, transparent); transform: rotate(-2deg); }
.phone-top { position: absolute; top: .6rem; left: 50%; translate: -50% 0; z-index: 2; }
.phone-notch { display: block; width: 5.5rem; height: 1.3rem; border-radius: 0 0 .9rem .9rem; background: var(--km-ink); }
.chat-head { display: flex; align-items: center; gap: .7rem; padding: 2rem 1rem .85rem; background: var(--km-verdigris); border-radius: 1.75rem 1.75rem 0 0; }
.chat-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--km-brass-bright); flex: none; }
.chat-id { display: grid; gap: .35rem; flex: 1; }
.sc-bar { display: block; height: .5rem; border-radius: 99px; background: currentColor; opacity: .55; }
.sc-bar.faint { opacity: .3; }
.chat-head .sc-bar { color: var(--km-paper); }
.w35 { width: 35%; } .w45 { width: 45%; } .w60 { width: 60%; } .w70 { width: 70%; }
.chat-body { display: flex; flex-direction: column; gap: .8rem; padding: 1.25rem 1rem 1.5rem; min-height: 19rem; justify-content: flex-end; background: var(--km-paper); background-image: radial-gradient(color-mix(in srgb, var(--km-ink) 7%, transparent) 1px, transparent 1px); background-size: 14px 14px; border-radius: 0 0 1.75rem 1.75rem; color: var(--km-ink); }
.chat-in { align-self: flex-start; display: grid; gap: .4rem; width: 62%; padding: .8rem .9rem; border-radius: .2rem 1rem 1rem 1rem; background: #FFFFFF; color: var(--km-slate); box-shadow: 0 1px 0 var(--km-rule); }
.reminder-message { align-self: flex-end; max-width: 85%; padding: .8rem 1rem .9rem; border-radius: 1rem .2rem 1rem 1rem; background: var(--molten-12); color: var(--km-ink); font-size: 1.05rem; line-height: 1.4; box-shadow: 0 1px 0 var(--km-rule); border: 1px solid var(--km-rule); }
.hero .mock-button { align-self: stretch; }
.mock-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1rem; border-radius: 999px; background: var(--km-verdigris); color: var(--km-paper); font-weight: 600; font-size: .98rem; }
.stage-card { position: absolute; z-index: 0; border-radius: 1.25rem; }
.stage-card-back { top: 0; left: 0; width: 72%; display: grid; gap: .7rem; padding: 1rem; background: color-mix(in srgb, var(--km-paper) 10%, transparent); border: 1px solid color-mix(in srgb, var(--km-paper) 18%, transparent); transform: rotate(-8deg) translate(-8%, 4%); color: var(--km-paper); }
.sc-row { display: flex; align-items: center; gap: .6rem; }
.sc-dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: color-mix(in srgb, var(--km-paper) 25%, transparent); flex: none; }
.sc-row .sc-bar { flex: none; opacity: .35; }
.sc-tick { margin-left: auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--km-brass-bright); color: var(--km-ink); display: grid; place-items: center; }
.sc-tick svg { width: .95rem; height: .95rem; }

/* Comparison */
.lane-toggle { display: block; }
.lane-toggle > legend { float: left; width: 100%; }
.lane-toggle > legend + * { clear: both; }
.lane-controls { display: none; }
.lane-toggle input[type="radio"], .tab-list input[type="radio"], .filter input[type="radio"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lane-pair { clear: both; display: grid; gap: 1rem; }
@media (min-width: 40.01rem) { .lane-pair { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.lane { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg); display: grid; gap: 0; }
.lane-before { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--km-text-secondary) 45%, transparent); color: var(--km-text-secondary); }
.lane-with { background: var(--km-verdigris); --fg: var(--km-paper); --fg2: var(--km-mist); color: var(--km-paper); box-shadow: var(--lift); }
.lane-stop { position: relative; padding: .9rem 0 .9rem 2rem; font-size: 1.15rem; line-height: 1.35; font-weight: 600; }
.lane-stop::before { content: ""; position: absolute; left: .3rem; top: 1.2rem; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid currentColor; }
.lane-stop:not(:last-child)::after { content: ""; position: absolute; left: .58rem; top: 2.05rem; bottom: -.4rem; width: 2px; background: currentColor; opacity: .25; }
.lane-with .lane-stop::before { background: var(--km-brass-bright); border-color: var(--km-brass-bright); }
.lane-before .lane-stop { font-weight: 400; }
.lane-time { font-family: var(--serif); font-size: .95rem; font-weight: 700; opacity: .8; }
.lane-with .lane-time { color: var(--km-brass-bright); opacity: 1; }
.lane-art { height: 4.5rem; position: relative; margin-bottom: .75rem; }
.lane-art i { position: absolute; display: block; height: 1.1rem; border-radius: .5rem; }
.lane-art-before i { background: color-mix(in srgb, var(--km-text-secondary) 22%, transparent); }
.lane-art-before i:nth-child(1) { width: 40%; top: 0; left: 0; transform: rotate(-6deg); }
.lane-art-before i:nth-child(2) { width: 28%; top: 1.2rem; left: 38%; transform: rotate(5deg); }
.lane-art-before i:nth-child(3) { width: 34%; top: 2.6rem; left: 8%; transform: rotate(3deg); }
.lane-art-before i:nth-child(4) { width: 22%; top: 2.1rem; left: 55%; transform: rotate(-9deg); }
.lane-art-with i { left: 0; height: .9rem; background: color-mix(in srgb, var(--km-paper) 22%, transparent); }
.lane-art-with i:nth-child(1) { top: .2rem; width: 55%; background: var(--km-brass-bright); }
.lane-art-with i:nth-child(2) { top: 1.6rem; width: 45%; }
.lane-art-with i:nth-child(3) { top: 3rem; width: 35%; }
.lane-toggle label, .filter label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid var(--km-hairline); border-radius: 999px; background: var(--km-surface); color: var(--km-text); font-weight: 600; cursor: pointer; }
.lane-toggle:has(input#before:checked) label[for="before"],
.lane-toggle:has(input#with:checked) label[for="with"],
.filter:has(input#all-plans:checked) label[for="all-plans"],
.filter:has(input#on-free:checked) label[for="on-free"] { background: var(--km-text); color: var(--km-bg); border-color: var(--km-text); }

/* Steps */
.tab-list { position: relative; display: flex; gap: clamp(.5rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.tab-list::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 50%; height: 2px; background: var(--km-hairline); }
.tab-list .tab { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; min-height: 44px; border-radius: 50%; border: 2px solid var(--km-hairline); background: var(--km-surface); font-family: var(--serif); font-weight: 700; font-size: 1.15rem; cursor: pointer; color: var(--km-text); }
.tab-list .tab:hover { border-color: var(--km-accent); }
.steps:has(#step-1:checked) label[for="step-1"],
.steps:has(#step-2:checked) label[for="step-2"],
.steps:has(#step-3:checked) label[for="step-3"],
.steps:has(#step-4:checked) label[for="step-4"] { background: var(--km-accent); border-color: var(--km-accent); color: var(--km-accent-contrast); }
.steps .tab-panel { display: none; }
.steps:has(#step-1:checked) .tab-panel[data-step="1"],
.steps:has(#step-2:checked) .tab-panel[data-step="2"],
.steps:has(#step-3:checked) .tab-panel[data-step="3"],
.steps:has(#step-4:checked) .tab-panel[data-step="4"] { display: grid; }
.tab-panel { gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-lg); background: var(--km-bg); border: 1px solid var(--km-hairline); }
@media (min-width: 48rem) { .tab-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.tab-panel h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.step-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 12rem; padding: 1.5rem; border-radius: var(--r-md); background: var(--km-surface); border: 1px solid var(--km-hairline); }
.message-bubble { padding: .9rem 1.2rem; border-radius: .25rem 1.1rem 1.1rem 1.1rem; background: var(--molten-12); font-size: 1.3rem; font-weight: 600; align-self: flex-start; margin-left: 10%; border: 1px solid var(--km-hairline); }
.parsed-time { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border-radius: 999px; border: 2px solid var(--km-accent); color: var(--km-accent); font-family: var(--serif); font-size: 1.4rem; font-weight: 700; }
.parsed-time svg { width: 1.5rem; height: 1.5rem; }
.time-slots { display: flex; gap: .6rem; }
.time-slots i { width: 4.5rem; height: 2.4rem; border-radius: .6rem; border: 1.5px solid var(--km-hairline); background: var(--km-bg); }
.time-slots i:nth-child(2) { background: var(--km-accent); border-color: var(--km-accent); }
.pack-dots { display: grid; grid-template-columns: repeat(5, 1.4rem); gap: .55rem; }
.pack-dots i, .meter-dots i { display: block; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--km-accent); }
.pack-dots i:nth-child(n+6) { background: var(--km-accent); }
.pack-count { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--km-text); }

/* Feature cards */
.feature-grid { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .feature-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.feature-card { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg); background: var(--km-surface); border: 1px solid var(--km-hairline); box-shadow: var(--lift); min-width: 0; }
.feature-card h2 { display: flex; align-items: center; gap: .85rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; }
.icon-plate { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: var(--molten-12); color: var(--km-accent); flex: none; }
.icon-plate svg { width: 1.5rem; height: 1.5rem; }
.icon-plate-lg { width: 3.5rem; height: 3.5rem; border-radius: 1rem; }
.icon-plate-lg svg { width: 1.85rem; height: 1.85rem; }
.pill-row { display: grid; gap: .55rem; }
.pill-row li { display: flex; align-items: center; gap: .65rem; color: var(--km-text); line-height: 1.35; }
.pill-row li > svg { width: 1.25rem; height: 1.25rem; padding: .15rem; border-radius: 50%; background: var(--km-accent); color: var(--km-accent-contrast); flex: none; }
.plan-chip, .tile-chip { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--km-accent); color: var(--km-accent); font-size: .8rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.feature-card .visual { margin-top: auto; padding: 1.25rem; border-radius: var(--r-md); background: var(--km-bg); border: 1px solid var(--km-hairline); min-height: 9.5rem; }
.mock-content { display: contents; }
.spot-mock .mock-content { display: grid; gap: .7rem; justify-items: start; }
.class-seats { display: flex; gap: .4rem; }
.class-seats i { width: 1.6rem; height: 1.6rem; border-radius: .45rem; background: var(--km-verdigris); }
.class-seats i.open { background: transparent; border: 2px dashed var(--km-accent); }
.spot-label { font-weight: 700; color: var(--km-accent); font-size: .95rem; }
.spot-mock p { padding: .7rem .95rem; border-radius: .2rem 1rem 1rem 1rem; background: var(--km-surface); border: 1px solid var(--km-hairline); max-width: 26ch; }
.meter .mock-content { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
.meter .meter-view-anchor { position: absolute; }
.meter .example-label { grid-column: 1 / -1; font-size: .85rem; color: var(--km-text-secondary); }
.meter .pack-title { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }
.meter .pack-count { font-size: 1.15rem; color: var(--km-accent); }
.meter .meter-dots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.meter .meter-dots i { width: 1.15rem; height: 1.15rem; }
.meter .meter-dots i:nth-child(-n+2) { background: var(--km-accent); }
.meter .renewal-message { justify-self: start; display: inline-flex; align-items: center; padding: .4rem .8rem; border-radius: 999px; background: var(--km-verdigris); color: var(--km-paper); font-weight: 600; font-size: .95rem; }
.program-mock .mock-content { display: grid; gap: .6rem; }
.prog-week { justify-self: start; font-weight: 700; font-size: .9rem; color: var(--km-accent); }
.prog-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: .75rem; background: var(--km-surface); border: 1px solid var(--km-hairline); }
.prog-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--molten-12); color: var(--km-accent); flex: none; }
.prog-icon svg { width: 1.2rem; height: 1.2rem; }
.prog-name { font-weight: 600; }
.prog-sets { margin-left: auto; font-family: var(--serif); font-weight: 700; }
.prog-ghost { display: grid; gap: .5rem; }
.prog-ghost i { height: 2.6rem; border-radius: .75rem; border: 1px dashed var(--km-hairline); }
.chart .mock-content { display: grid; gap: .6rem; }
.chart .example-label { font-size: .85rem; color: var(--km-text-secondary); }
.chart-bars { display: flex; align-items: flex-end; gap: .6rem; height: 6rem; border-bottom: 1.5px solid var(--km-hairline); }
.chart-bars i { flex: 1; border-radius: .4rem .4rem 0 0; background: var(--km-verdigris); }
.chart-bars i:nth-child(1) { height: 35%; } .chart-bars i:nth-child(2) { height: 48%; } .chart-bars i:nth-child(3) { height: 42%; }
.chart-bars i:nth-child(4) { height: 62%; } .chart-bars i:nth-child(5) { height: 74%; } .chart-bars i:nth-child(6) { height: 92%; background: var(--km-accent); }
.chart-caption { font-size: .9rem; color: var(--km-text-secondary); }

/* Everything included */
.wall-head { display: grid; gap: 1rem; margin-bottom: 2rem; }
.wall-head .section-title { margin-bottom: 0; }
@media (min-width: 60rem) { .wall-head { grid-template-columns: 1fr auto; align-items: end; } }
.wall-controls { display: grid; gap: .5rem; }
.filter { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--km-bg); border: 1px solid var(--km-hairline); justify-self: start; }
.filter label { border-color: transparent; background: transparent; }
.filter-note { color: var(--km-text-secondary); font-size: .95rem; }
.wall .filter-note[data-filter-note="free"],
.wall:has(#on-free:checked) .filter-note[data-filter-note="all"] { display: none; }
.wall:has(#on-free:checked) .filter-note[data-filter-note="free"] { display: block; }
.wall-group { display: grid; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--km-hairline); }
@media (min-width: 60rem) { .wall-group { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; } }
.wall-group h3 { font-size: 1.25rem; line-height: 1.3; padding-top: .55rem; }
.tile-grid { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: .6rem .85rem; border-radius: .85rem; background: var(--km-bg); border: 1px solid var(--km-hairline); color: var(--km-text); line-height: 1.3; min-width: 0; transition: color .15s, opacity .15s; }
.tile > svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--km-accent); }
.tile .tile-chip { margin-left: auto; }
.wall:has(#on-free:checked) .tile:not([data-plan="Free"]) { color: var(--km-text-secondary); background: transparent; border-style: dashed; border-color: var(--mist-line); }
.wall:has(#on-free:checked) .tile:not([data-plan="Free"]) > svg { color: var(--km-text-secondary); }
.voice-frame { margin-top: 2rem; display: grid; gap: 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-lg); background: var(--molten-12); border: 1px solid var(--km-hairline); overflow: hidden; }
@media (min-width: 48rem) { .voice-frame { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 3.5rem; } }
.voice-phone { justify-self: center; width: min(100%, 17rem); padding: .5rem; border-radius: 2rem; background: var(--km-ink); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--km-ink) 70%, transparent); }
.voice-phone img { border-radius: 1.55rem; width: 100%; aspect-ratio: 585 / 900; object-fit: cover; object-position: top; }
.voice-frame figcaption { display: grid; gap: .75rem; justify-items: start; }
.voice-frame h3 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.1; }
.voice-frame p { font-size: 1.2rem; color: var(--km-text-secondary); }

/* Free strip */
.free-inner { display: grid; gap: 1.75rem; }
@media (min-width: 60rem) { .free-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 3rem; } }
.free-strip h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.1; max-width: 16ch; }
.free-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 36rem) { .free-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.free-list li { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border-radius: .85rem; background: var(--tint); border: 1px solid var(--hair); font-weight: 600; min-width: 0; }
.free-list svg { width: 1.2rem; height: 1.2rem; color: var(--km-brass-bright); flex: none; }

/* Pricing */
.pricing .section-title { margin-inline: auto; text-align: center; }
.plan-grid { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 52rem) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.plan-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--km-surface); border: 1px solid var(--km-hairline); color: var(--fg); min-width: 0; }
.plan-icon { width: 2rem; height: 2rem; color: var(--acc); margin-bottom: .5rem; }
.plan-card h3 { font-size: 1.6rem; line-height: 1.2; }
.plan-for { color: var(--fg2); font-weight: 600; }
.price-row { display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem; }
.price { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.25rem); line-height: 1; letter-spacing: -.02em; color: var(--fg); }
.per { color: var(--fg2); font-size: 1.05rem; }
.plan-note { color: var(--fg2); font-size: .98rem; }
.plan-line { font-weight: 600; margin-top: .9rem; }
.plan-line + .plan-line { margin-top: 0; }
.plan-note + .plan-line { padding-top: .9rem; border-top: 1px solid var(--hair); }
.plan-list { display: grid; gap: .45rem; margin: .6rem 0 1.5rem; }
.plan-list li { position: relative; padding-left: 1.7rem; line-height: 1.4; }
.plan-list li::before { content: ""; position: absolute; left: .35rem; top: .5em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--fg2); }
.plan-list li[data-tick]::before { left: 0; top: .1em; width: 1.15rem; height: 1.15rem; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; }
.plan-card > .btn { margin-top: auto; }
.plan-fine { color: var(--fg2); font-size: .92rem; text-align: center; margin-top: .6rem; }
.plan-card[data-plan="Studio"] .plan-fine { margin-top: auto; text-align: left; }
.plan-featured { background: var(--km-verdigris); border-color: var(--km-verdigris); box-shadow: 0 0 0 2px var(--km-brass-bright), 0 30px 60px -30px color-mix(in srgb, var(--km-ink) 70%, transparent); }
.plan-featured .price { color: var(--km-brass-bright); }
@media (min-width: 52rem) { .plan-featured { transform: translateY(-.75rem); } }
.plan-seal { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; color: var(--km-brass-bright); }
.studio-plus { background: var(--km-bg); border-style: solid; display: grid; gap: 1.5rem; }
@media (min-width: 52rem) {
  .studio-plus { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr); align-items: start; gap: 2.5rem; margin-top: .75rem; }
}
.sp-main { display: grid; gap: .35rem; justify-items: start; }
.studio-plus .price { font-size: clamp(1.7rem, 3vw, 2.1rem); margin-top: .5rem; }
.sp-detail { display: grid; gap: .6rem; }
.sp-detail p { position: relative; padding-left: 1.2rem; line-height: 1.45; }
.sp-detail p::before { content: ""; position: absolute; left: 0; top: .55em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--km-accent); }
.sp-action { display: grid; gap: .5rem; align-self: center; }
.sp-action .plan-fine { text-align: left; margin: 0; }
.closing { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Talk */
.talk-inner { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 48rem) { .talk-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; } }
.talk h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; }
.talk-copy p { margin-top: .4rem; color: var(--km-text-secondary); font-size: 1.15rem; }
.talk-action { display: grid; gap: .4rem; justify-items: start; }
@media (min-width: 48rem) { .talk-action { justify-items: end; } }
.talk-email { color: var(--km-text-secondary); font-size: .98rem; }

/* Footer */
.site-footer { background: var(--km-ink); border-top: 1px solid var(--km-rule-dark); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: 2rem; }
.footer-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .55rem; background: var(--km-brass-bright); color: var(--km-ink); }
.footer-mark svg { width: 1.8rem; height: 1.8rem; }
.footer-links { display: flex; gap: .25rem; }
.footer-links a { padding-inline: .6rem; color: var(--km-paper); font-weight: 600; text-decoration: underline; text-decoration-color: var(--km-brass-bright); text-underline-offset: .25em; justify-content: center; }
.footer-links a:hover { color: var(--km-brass-bright); }
.site-footer p { color: var(--km-mist); font-size: .95rem; }
@media (min-width: 48rem) { .site-footer p { margin-left: auto; } }

/* Phone-only lane toggle */
@media (max-width: 40rem) {
  .lane-controls { display: flex; gap: .25rem; padding: .3rem; margin-bottom: 1rem; border-radius: 999px; background: var(--km-surface); border: 1px solid var(--km-hairline); }
  .lane-controls label { flex: 1; border-color: transparent; background: transparent; }
  .comparison:has(#before:checked) [data-lane="with"],
  .comparison:has(#with:checked) [data-lane="before"] { display: none; }
}

/* One orchestrated moment: the hero reminder arrives */
@media (prefers-reduced-motion: no-preference) {
  .reminder-message { animation: km-arrive .6s .25s cubic-bezier(.2,.8,.2,1) both; }
  .hero .mock-button { animation: km-arrive .6s .55s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes km-arrive { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.section-title { font-family: var(--serif); font-weight: 700; color: var(--km-text); text-wrap: balance; }
.meter .plan-chip { justify-self: start; }
.voice-frame .icon-plate { background: var(--km-surface); }
.nav-link { white-space: nowrap; }
@media (max-width: 29.9rem) { .nav-hide-xs { display: none; } }
.meter .mock-content { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; }
.meter .example-label, .meter .pack-title, .meter .meter-dots { flex: 1 0 100%; }
.meter .renewal-message, .meter .plan-chip { margin-top: 0; }

/* ---- Fix round 2 (12:00): real chat, collapsible wall on phones, consistent markers ---- */
summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }

/* Hero chat built from existing page text */
.hero-stage { padding: 2rem 0 1rem 0; }
.chat-head { justify-content: space-between; padding-top: 2.1rem; }
.chat-wa { width: 1.4rem; height: 1.4rem; color: var(--km-paper); opacity: .8; }
.chat-body { min-height: 0; gap: .65rem; }
.chat-in, .chat-out { font-size: .98rem; line-height: 1.4; }
.chat-in { width: auto; max-width: 75%; display: block; color: var(--km-ink); font-weight: 600; padding: .65rem .9rem; }
.chat-out-prev { align-self: flex-end; max-width: 80%; padding: .65rem .9rem; border-radius: 1rem .2rem 1rem 1rem; background: var(--molten-12); border: 1px solid var(--km-rule); color: var(--km-slate); }
.stage-chip { position: absolute; z-index: 2; top: .25rem; left: -.75rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; background: var(--km-brass-bright); color: var(--km-ink); font-family: var(--serif); font-weight: 700; font-size: 1.05rem; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--km-ink) 70%, transparent); transform: rotate(-4deg); }
.stage-chip svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 30rem) { .stage-chip { left: 0; top: .5rem; } }

/* Comparison cards: icon instead of placeholder bars */
.lane-art { height: auto; margin-bottom: .75rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .85rem; }
.lane-art svg { width: 1.6rem; height: 1.6rem; }
.lane-art-before { background: color-mix(in srgb, var(--km-text-secondary) 14%, transparent); color: var(--km-text-secondary); }
.lane-art-with { background: color-mix(in srgb, var(--km-paper) 12%, transparent); color: var(--km-brass-bright); }

/* Everything included: details per group */
.wall-group { display: block; padding-block: 0; }
.wall-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; cursor: default; }
.wall-details > summary::-webkit-details-marker { display: none; }
.wall-details > summary h3 { padding-top: 0; }
.wall-chev { display: none; width: 1.4rem; height: 1.4rem; color: var(--km-accent); flex: none; transition: transform .2s; }
.wall-details { padding-block: 1.5rem; }
@media (min-width: 60rem) {
  .wall-group { display: block; }
  .wall-details { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .wall-details > summary { min-height: 3.25rem; }
}
@media (min-width: 768.02px) and (max-width: 59.99rem) { .wall-details > summary { margin-bottom: 1rem; } }
@media (max-width: 768px) {
  .wall-details { padding-block: 0; }
  .wall-details > summary { cursor: pointer; min-height: 3.5rem; padding-block: .5rem; }
  .wall-chev { display: block; }
  .wall-details[open] .wall-chev { transform: rotate(180deg); }
  .wall-details[open] > summary { margin-bottom: .75rem; }
  .wall-details[open] { padding-bottom: 1.25rem; }
}

/* Markers: tick = included feature, gauge = allowance or limit */
.plan-list li::before, .sp-detail p::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.15rem; height: 1.15rem; border-radius: 0; background: var(--acc); -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }
.plan-list li, .sp-detail p { padding-left: 1.7rem; }
[data-tick] { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-limit] { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17a8 8 0 1 1 16 0M12 17l4-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.plan-list li[data-tick]::before { left: 0; top: .12em; width: 1.15rem; height: 1.15rem; }
/* Hero: realistic phone showing the Kedmark app (draft ready, sent from WhatsApp) */
.hero-stage .phone { max-width: 290px; aspect-ratio: 9 / 19; margin-inline: auto; display: flex; flex-direction: column; }
.app-screen { flex: 1; display: flex; flex-direction: column; gap: .8rem; padding: 2.4rem 1rem 1.2rem; border-radius: 1.75rem; background: var(--km-paper); color: var(--km-ink); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: .55rem; padding-bottom: .7rem; border-bottom: 1px solid var(--km-rule); }
.app-logo { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .5rem; background: var(--km-brass-bright); color: var(--km-ink); font-family: var(--serif); font-weight: 700; }
.app-name { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.app-label { margin: .3rem 0 0; font-size: .85rem; font-weight: 700; color: var(--km-slate); text-transform: none; }
.draft-card { display: grid; gap: .7rem; padding: .9rem; border-radius: 1rem; background: #FFFFFF; border: 1px solid var(--km-rule); box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--km-ink) 40%, transparent); }
.draft-card .reminder-message, .draft-text { font-size: .98rem; line-height: 1.4; color: var(--km-ink); margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.draft-card .mock-button { justify-self: stretch; text-align: center; }
.mock-button-ghost { background: transparent !important; color: var(--km-verdigris) !important; border: 1.5px solid var(--km-verdigris) !important; }
.draft-card-2 { opacity: .85; }
/* Comparison: label each lane on desktop (phones use the Before / With Kedmark toggle) */
.lane-art { display: flex; align-items: center; gap: .75rem; width: auto !important; }
.lane-art svg { flex: none; }
.lane-name { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.lane-before .lane-name { color: var(--km-slate); }
.lane-with .lane-name { color: var(--km-paper); }
@media (max-width: 48rem) { .desk-only { display: none; } }
/* Steps: show all four steps at once as a clear flow (no hidden tabs) */
.steps .tab-list { display: none !important; }
.steps .steps-panels { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
.steps .tab-panel { display: flex !important; flex-direction: column; gap: 1rem; position: relative; padding: 1.4rem 1.2rem 1.3rem; border-radius: 1.25rem; background: #FFFFFF; border: 1px solid var(--km-rule); counter-increment: step; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.steps .tab-panel::before { content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--km-verdigris); color: var(--km-paper); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.steps .tab-panel:not(:last-child)::after { content: "→"; position: absolute; right: -.85rem; top: 1.9rem; z-index: 1; color: var(--km-brass); font-size: 1.3rem; font-weight: 700; }
.steps .tab-panel h3 { margin: 0; font-size: 1.3rem; }
.steps .step-visual { min-height: 7.5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .7rem; padding: 1rem; border-radius: 1rem; background: var(--km-paper); border: 1px solid var(--km-rule); margin: 0; width: 100%; box-sizing: border-box; }
.steps .step-visual .message-bubble { margin: 0; font-size: 1rem; }
.steps .time-slots { display: none !important; }
@media (max-width: 60rem) { .steps .steps-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps .tab-panel::after { display: none; } }
@media (max-width: 30rem) { .steps .steps-panels { grid-template-columns: 1fr; } }
.app-tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: .7rem; border-top: 1px solid var(--km-rule); }
.app-tabs span { display: grid; justify-items: center; gap: .2rem; font-size: .72rem; font-weight: 600; color: var(--km-slate); }
.app-tabs span.on { color: var(--km-verdigris); }
.app-tabs svg { width: 1.3rem; height: 1.3rem; }
.app-tabs { justify-content: space-between; padding-inline: .1rem; }
.app-tabs span { font-size: .62rem; gap: .25rem; color: var(--km-slate); }
.app-tabs span.on { color: var(--km-brass); }
.app-tabs svg { width: 1.15rem; height: 1.15rem; fill: none; }

/* Feature map: the 8 parts at the top */
.feature-map { padding-block: clamp(3rem, 7vw, 5rem); }
.map-head { display: grid; gap: .5rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); max-width: 40rem; }
.map-sub { color: var(--fg2); font-size: 1.125rem; }
.map-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; }
@media (max-width: 64rem) { .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .map-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; } }
.map-card a { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--r-md); background: var(--km-surface); border: 1px solid var(--km-hairline); box-shadow: var(--lift); color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.map-card a:hover, .map-card a:focus-visible { transform: translateY(-2px); border-color: var(--km-accent); }
.map-card a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.map-top { display: flex; align-items: center; justify-content: space-between; }
.map-num { font-family: var(--serif); font-size: .9rem; color: var(--fg2); letter-spacing: .04em; }
.map-card h3 { font-size: 1.2rem; line-height: 1.25; }
.map-items { display: grid; gap: .3rem; font-size: .95rem; color: var(--fg2); flex: 1; }
.map-items li { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.map-items li::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--km-accent); flex: none; transform: translateY(-.15rem); }
.map-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--km-accent); font-size: .95rem; padding-top: .5rem; border-top: 1px solid var(--km-hairline); }
.map-more svg { width: 1rem; height: 1rem; }
@media (max-width: 30rem) {
  .map-card a { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: .9rem; row-gap: .35rem; padding: 1rem; }
  .map-top { grid-row: span 3; align-self: start; }
  .map-num { display: none; }
  .map-card h3, .map-items, .map-more { grid-column: 2; }
  .map-items { font-size: .9rem; }
}
.wall-group { scroll-margin-top: 5rem; }

/* Voice screen: a real phone shape, full 9:19.5 screen */
.voice-phone { position: relative; width: min(100%, 16.5rem); padding: .6rem; border-radius: 2.75rem; background: var(--km-ink); }
.voice-phone::before { content: ""; position: absolute; top: 1.15rem; left: 50%; translate: -50% 0; width: 4.75rem; height: 1.25rem; border-radius: 1rem; background: var(--km-ink); z-index: 2; }
.voice-phone::after { content: ""; position: absolute; right: -3px; top: 7rem; width: 3px; height: 3.5rem; border-radius: 0 3px 3px 0; background: var(--km-ink); }
.voice-phone img { aspect-ratio: 585 / 1266; border-radius: 2.2rem; object-fit: cover; object-position: top; }
@media (min-width: 48rem) { .voice-frame { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }
.map-head, .map-card a { text-align: left; justify-items: start; }
.map-head .section-title { margin: 0; }
.voice-phone img { box-sizing: border-box; padding-top: 2.1rem; background: #fbfaf7; }
.map-card a { align-items: stretch; }
.map-more { align-self: stretch; }
@media (max-width: 30rem) { .map-card a { align-items: start; } }
.voice-phone img { aspect-ratio: auto; height: auto; object-fit: fill; }
@media (max-width: 30rem) { .map-more { justify-self: stretch; } }

/* Feature map v2: all features, plan on each */
.map-card .map-in { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.25rem; border-radius: var(--r-md); background: var(--km-surface); border: 1px solid var(--km-hairline); box-shadow: var(--lift); text-align: left; }
.map-grid { align-items: stretch; }
.map-items { gap: .45rem; }
.map-items li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: nowrap; color: var(--km-text); font-size: .95rem; line-height: 1.3; padding-block: .15rem; }
.map-items li::before { display: none; }
.map-feat { min-width: 0; }
.pchip { flex: none; display: inline-flex; align-items: center; padding: .08rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; }
.pchip-free { background: color-mix(in srgb, var(--km-verdigris) 12%, transparent); color: var(--km-verdigris); }
.pchip-pro { border: 1px solid var(--km-brass); color: var(--km-brass); }
.pchip-studio { background: var(--km-ink); color: var(--km-paper); }
.plan-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .75rem; font-size: .95rem; color: var(--fg2); }
.plan-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.feature-map .voice-frame { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 30rem) { .map-card .map-in { padding: 1rem; } .map-num { display: inline; } .map-top { grid-row: auto; } }
.map-items { align-content: start; flex: 0 0 auto; }
.map-top { width: 100%; }
html { scroll-padding-top: 5.5rem; }

/* 8 parts as collapsible groups (original Everything included design) */
.feature-map .wall { margin-top: .5rem; }
.wall-details > summary { cursor: pointer; display: flex; align-items: center; gap: .85rem; justify-content: flex-start; }
.wall-details > summary .icon-plate { width: 2.5rem; height: 2.5rem; border-radius: .75rem; }
.wall-details > summary .icon-plate svg { width: 1.3rem; height: 1.3rem; }
.wall-details > summary h3 { flex: 1; min-width: 0; font-size: 1.2rem; }
.wall-count { flex: none; min-width: 1.75rem; height: 1.75rem; padding-inline: .45rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--molten-12); color: var(--km-accent); font-size: .85rem; font-weight: 700; }
.wall-chev { display: block; }
.wall-details[open] .wall-chev { transform: rotate(180deg); }
.wall-details:not([open]) { padding-bottom: 1.5rem; }
@media (min-width: 60rem) {
  .wall-details { grid-template-columns: 18rem minmax(0, 1fr); }
  .wall-details > summary { align-self: start; }
  .wall-details:not([open]) { display: block; }
}
.hero-trial { margin-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--km-brass-bright); }

/* Buyer-review visual fixes */
@media (max-width: 48rem) { .lane-name.desk-only { display: inline; font-size: 1.05rem; } }
.lane-art { padding-inline: .75rem; }
.plan-card[data-plan="Studio"] .btn-block { margin-top: auto; }
.plan-card[data-plan="Studio"] .plan-fine { margin-top: .6rem; text-align: center; }
.sp-lead { font-weight: 600; color: var(--km-text); }
@media (min-width: 60rem) { .wall-details:not([open]) > summary { max-width: 18rem; } }
.sp-detail p.sp-lead::before { content: none; display: none; } .sp-detail p.sp-lead { padding-left: 0; }
.voice-phone img { padding-bottom: 1.1rem; }
.pricing-sub { text-align: center; color: var(--fg2); font-size: 1.05rem; margin: -1rem auto 2rem; max-width: 40rem; }

/* Spotlight cards: trainer card and pitch page */
.voice-band { padding-top: 0; }
.feature-map .wall { margin-bottom: 0; }
.tcard-mock .mock-content, .pitch-mock .mock-content { display: grid; gap: .6rem; }
.tcard { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av name qr" "av tags qr" "av cert qr" "cta cta cta"; column-gap: .8rem; row-gap: .2rem; align-items: center; padding: .9rem; border-radius: .9rem; background: var(--km-surface); border: 1px solid var(--km-hairline); }
.tcard-avatar { grid-area: av; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--km-verdigris); color: var(--km-paper); font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }
.tcard-name { grid-area: name; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--km-text); }
.tcard-tags { grid-area: tags; font-size: .85rem; color: var(--fg2); }
.tcard-cert { grid-area: cert; font-size: .78rem; font-weight: 600; color: var(--km-accent); }
.tcard-qr { grid-area: qr; width: 2.6rem; height: 2.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--km-hairline); border-radius: .35rem; }
.tcard-qr i { background: var(--km-ink); border-radius: 1px; }
.tcard-qr i:nth-child(2), .tcard-qr i:nth-child(4), .tcard-qr i:nth-child(8) { background: transparent; }
.tcard-cta, .pitch-cta { grid-area: cta; margin-top: .6rem; justify-self: start; padding: .45rem 1rem; border-radius: 999px; background: var(--km-verdigris); color: var(--km-paper); font-weight: 700; font-size: .85rem; }
.pitch { display: grid; gap: .55rem; padding: .9rem; border-radius: .9rem; background: linear-gradient(160deg, var(--km-verdigris), #13615a); color: var(--km-paper); }
.pitch-head { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }
.pitch-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pitch-chips span { font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(255,255,255,.14); }
.pitch-cta { margin-top: 0; background: var(--km-brass-bright); color: var(--km-ink); }
.pitch-stats { display: flex; gap: 1rem; font-size: .8rem; opacity: .9; }
.pitch-stats b { font-family: var(--serif); font-size: 1rem; }
.tcard-mock .example-label, .pitch-mock .example-label { font-size: .85rem; color: var(--km-text-secondary); }
.pitch-cta { grid-area: auto; justify-self: start; }
.pitch { grid-template-columns: minmax(0,1fr); }
svg.tcard-qr { grid-area: qr; width: 3.25rem; height: 3.25rem; padding: 0; border: 1px solid var(--km-hairline); border-radius: .3rem; background: #fff; }