/* ============================================================
   KAMBA — Landing page styles (Direction C · Evolution)
   Page-specific layout on top of styles.css + tokens.css.
   ============================================================ */

.dot { color: var(--wood); margin: 0 8px; }
.dot-sage { width: 11px; height: 11px; border-radius: 50%; background: var(--sage); display: inline-block; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wood-deep); margin: 0 0 14px; }

/* ---- Hero ---- */
.hero { text-align: center; padding-top: var(--sp-20); padding-bottom: var(--sp-10); }
.hero__title { font-size: var(--fs-display-xl); line-height: var(--lh-tight); margin: 22px 0; }
.hero__sub { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--ink-soft); max-width: 560px; margin: 0 auto 32px; }
.hero__cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero__meta { display: flex; gap: 0; justify-content: center; margin-top: 26px; font-size: var(--fs-body-s); color: var(--muted); font-weight: 500; flex-wrap: wrap; }

/* ---- Plan preview ---- */
.plan-preview-wrap { max-width: 1000px; padding-top: 14px; padding-bottom: var(--sp-16); }
.plan-preview { overflow: hidden; box-shadow: 0 30px 70px -40px rgba(45,45,45,.4); }
.plan-preview__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-hair); background: var(--surface-warm); }
.plan-preview__title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-body-s); }
.plan-preview__body { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.elevation-pane { padding: 34px; border-right: 1px solid var(--border-hair); background: var(--surface-warm); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.elevation { position: relative; }
.elevation__caption { margin-top: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--wood-deep); }
.cutlist-pane { padding: 26px 30px; }

/* Frame elevation drawing */
.frame { width: var(--frame-w); height: var(--frame-h); border: 2.5px solid var(--ink-soft); border-radius: 4px; background: #fff; display: flex; flex-direction: column; justify-content: space-evenly; padding: 9px 0; }
.frame--lg { border-width: 2px; }
.frame .shelf { height: 2px; background: var(--sage); margin: 0 6px; }
.dim { position: absolute; font-size: 11px; font-weight: 600; color: var(--wood-deep); }
.dim--top { top: -22px; left: 0; right: 0; text-align: center; }
.dim--side { top: 0; bottom: 0; left: -28px; display: flex; align-items: center; }
.dim--side span { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Cut list table */
.cutlist { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); }
.cutlist th { font-weight: 600; color: var(--muted); font-size: 12.5px; text-align: left; padding: 6px 0; border-bottom: 1.5px solid var(--border-soft); }
.cutlist td { padding: 7px 0; border-bottom: 1px solid #F4F1EA; color: var(--ink-soft); }
.cutlist td:first-child { color: var(--ink); }
.cutlist .num { text-align: right; font-weight: 600; }
.chip-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---- Stat band ---- */
.stat-band { margin-top: 22px; background: rgba(139,168,136,.10); border: 1px solid #CFE0CC; border-radius: var(--r-lg); padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stat-band__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stat-band__num { font-size: 32px; color: var(--kamba-green); line-height: 1; }
.stat-band__label { font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 500; }

/* ---- Furniture type cards ---- */
/* Layout: a row of equal-weight LIVE cards (real render + "Design this") over a row
   of equal coming-soon cards. No hero, no carousel — the archetypes tile responsively
   (a11y). Generic for N live / M soon: promoting a type just adds a card to a grid. */
.type-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.type-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 22px; }
.type-card { overflow: hidden; position: relative; }
.type-card__flag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.type-card--live { border: 1.5px solid var(--sage); }
.type-card--featured { display: flex; flex-direction: column; }
.type-card--featured .type-card__body { padding-top: 20px; }

/* Media slots */
.type-card__media { aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 14px;
  background: repeating-linear-gradient(135deg, var(--sand), var(--sand) 11px, #F1ECE2 11px, #F1ECE2 22px); }
/* Live cards — real furniture render (geometry from shared/furniture-renderer.js). Both live
   previews are height-driven (svg inline height:220px) and centred, so the two media slots share
   one height regardless of each unit's aspect ratio → symmetric treatment, no card taller. */
.type-card__media--render { align-items: center; justify-content: center; padding: 24px 22px;
  background: radial-gradient(120% 95% at 50% 20%, #FBF7EF 0%, var(--sand) 100%); }
.type-card--featured .type-card__media--render { aspect-ratio: auto; min-height: 268px; }
.type-card__render { display: flex; align-items: center; justify-content: center; width: 100%; }
.type-card__render svg { display: block; }
/* Coming-soon card — sober line illustration per type on a soft sand tile */
.type-card__media--soon { aspect-ratio: 16 / 10; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #F3EEE3, #EBE3D3); }
.type-card__media--soon .type-card__flag { top: 10px; left: 10px; }
.type-card__icon { width: 48px; height: 48px; display: block; opacity: 0.92; }
.type-card__icon svg { width: 100%; height: 100%; display: block; }

.type-card__body { padding: 22px; }
.type-card__cta { display: inline-block; margin-top: 12px; }
.type-card__title--soon { color: var(--ink-soft); }
.type-card__text--soon { color: var(--muted); }

/* "Notify me" per coming-soon type → POST /api/waitlist (source: type-*) */
.type-notify { margin-top: 14px; }
.type-notify__btn { appearance: none; border: 1px solid var(--border-control); background: var(--surface);
  color: var(--kamba-green); font: 600 13.5px/1 var(--font-sans); padding: 9px 15px; border-radius: var(--r-pill);
  cursor: pointer; transition: background var(--transition), border-color var(--transition); }
.type-notify__btn:hover { background: var(--sage-tint); border-color: var(--sage-dark); }
.type-notify__form { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.type-notify__form[hidden] { display: none; }
.type-notify__input { width: 100%; padding: 10px 12px; font: 15px var(--font-sans); color: var(--ink);
  background: var(--surface-warm); border: 1px solid var(--border-control); border-radius: var(--r-md); }
.type-notify__input:focus { outline: 3px solid var(--sage-dark); outline-offset: 1px; border-color: var(--sage-dark); }
.type-notify__submit { appearance: none; border: 0; background: var(--kamba-green); color: var(--on-green);
  font: 600 14px var(--font-sans); padding: 10px 14px; border-radius: var(--r-md); cursor: pointer; }
.type-notify__submit:hover { filter: brightness(1.06); }
.type-notify__feedback { font-size: 13px; line-height: 1.4; margin: 2px 0 0; }
.type-notify__feedback[hidden] { display: none; }
.type-notify__feedback.is-ok { color: var(--kamba-green); font-weight: 600; }
.type-notify__feedback.is-err { color: var(--error); }
/* M3 (mobile lot #2) — kill iOS focus-zoom on the landing "Notify me" input
   (was 15px). Mobile only; desktop density preserved above this breakpoint. */
@media (max-width: 768px) {
  .type-notify__input { font-size: 16px; }
}

/* Responsive: the auto-fit grids collapse to 1 column as they run out of width; keep the
   live media a touch shorter on phones. */
@media (max-width: 860px) {
  .type-card--featured .type-card__media--render { min-height: 232px; }
  .type-card__render svg { max-height: 200px; }
}
@media (max-width: 520px) {
  .type-soon-grid { grid-template-columns: 1fr; }
}

/* ---- Why ---- */
.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.why__title { font-size: 40px; line-height: 1.12; margin: 0 0 16px; }
.why__cards { gap: 16px; }
.why__word { font-size: 26px; color: var(--kamba-green); margin-bottom: 8px; }
.why__lead { font-weight: 600; font-size: 15px; margin-bottom: 5px; }

/* ---- Pricing card ---- */
.price-card { max-width: 460px; margin: 0 auto; background: var(--bg); border: 1.5px solid var(--sage); border-radius: var(--r-xl); padding: 40px; position: relative; box-shadow: var(--shadow-pop); }
.price-card__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--kamba-green); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; padding: 6px 16px; border-radius: var(--r-pill); }
.price-card__head { text-align: center; margin-bottom: 24px; }
.price-card__plan { font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }
.price-card__amount { font-size: 62px; line-height: 1; color: var(--ink); }
.price-card__unit { font-size: var(--fs-body-s); color: var(--muted); margin-top: 8px; }
.price-card__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-card__list li { display: flex; gap: 11px; align-items: center; font-size: 15px; }
.tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sage-tint-strong); color: var(--kamba-green); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.price-card__note { text-align: center; font-size: var(--fs-meta); color: var(--muted); margin: 14px 0 0; }
/* Pre-launch pending note is an <a> to /start (funnel → waitlist); render it like the
   block note with a subtle link affordance so it doesn't fall back to default-link blue. */
a.price-card__note--link { display: block; text-decoration: underline; text-underline-offset: 2px; }
a.price-card__note--link:hover { color: var(--kamba-green); }

/* ---- Final CTA band ---- */
.cta-band { background: var(--kamba-green); border-radius: var(--r-2xl); padding: 64px 40px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.04) 39px, rgba(255,255,255,.04) 40px); }
.cta-band__inner { position: relative; }
.cta-band__title { font-size: 44px; line-height: 1.08; margin: 0 0 16px; }
.cta-band__sub { font-size: var(--fs-body-l); line-height: var(--lh-body); color: #D8E0D2; max-width: 460px; margin: 0 auto 28px; }

/* ---- Anchor scroll offset (sticky header) ---- */
.section[id], .hero[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ============================================================
   Mobile nav — implementation (not in the export, which just
   hides .nav at 860px and defers the menu button to the build).
   Accessible disclosure: a hamburger button toggles the panel.
   ============================================================ */
.nav-toggle { display: none; }
/* Start CTA lives inline in the header on desktop; on mobile it moves into the
   hamburger panel (see below) so the bar stays a compact logo + menu button. */
.nav__cta { display: none; }

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
  .site-header__inner { flex-wrap: wrap; }
  /* Standalone CTA would wrap to its own row (tall bar); show it inside the menu instead. */
  .header__cta { display: none; }
  .nav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 8px; border-radius: var(--r-sm); font-size: var(--fs-body); min-height: 44px; display: flex; align-items: center; }
  .nav a:not(.nav__cta):hover { background: var(--alt); }
  .nav__cta { display: flex; justify-content: center; margin-top: 8px; }
}

/* ---- FAQ (S4a #68) ----
   Native <details>/<summary> accordion: keyboard-accessible by default, answers in
   the DOM even when collapsed (crawlable). On-brand D1: hair-divided rows, custom
   chevron, calm wood/ink palette. */
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--border-soft); }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-q {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 4px; font-size: var(--fs-body-l); font-weight: 600; color: var(--ink);
  line-height: var(--lh-tight); transition: color .15s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--kamba-green); }
.faq-q:focus-visible { outline: 2px solid var(--kamba-green); outline-offset: 3px; border-radius: var(--r-sm); }
/* Custom chevron (replaces the default disclosure triangle) */
.faq-q::before {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px;
  border-right: 2px solid var(--wood-deep); border-bottom: 2px solid var(--wood-deep);
  transform: rotate(-45deg); transition: transform .18s ease; transform-origin: 60% 60%;
}
.faq-item[open] > .faq-q::before { transform: rotate(45deg); }
.faq-item[open] > .faq-q { color: var(--kamba-green); }
.faq-a { padding: 0 4px 24px 28px; }
.faq-a p { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
@media (max-width: 430px) {
  .faq-q { font-size: var(--fs-body); padding: 18px 2px; }
  .faq-a { padding-left: 24px; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .plan-preview__body { grid-template-columns: 1fr; }
  .elevation-pane { border-right: none; border-bottom: 1px solid var(--border-hair); }
  .why { grid-template-columns: 1fr; gap: 32px; }
  .why__cards { grid-template-columns: 1fr 1fr; }
  .hero__title { font-size: var(--fs-display-xl); }
  .cta-band__title { font-size: 30px; }
  .stat-band { flex-direction: column; align-items: flex-start; }
}

/* ---- German long-compound overflow guard (i18n #50) ----
   At ≤860 the 2-column card grids size their tracks to min-content, so German
   compounds (Materialverschwendung, Strukturprüfung, Montageanleitung) blow the
   tracks past the viewport. Lang-gated to [lang="de"] so EN/FR render byte-identical:
   let the tracks shrink below min-content (minmax(0,1fr)) and break/hyphenate the
   over-long words inside the cards. */
@media (max-width: 860px) {
  html[lang="de"] .grid-4,
  html[lang="de"] .why__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[lang="de"] .card-title,
  html[lang="de"] .card-text,
  html[lang="de"] .why__word,
  html[lang="de"] .why__lead { overflow-wrap: break-word; hyphens: auto; }
}

/* M9 (mobile lot #3) — below 520 the 4 "Why" cards + 4 "What you get" cards go
   single-column (were 2-up at ≤860). The German overflow guard above keeps its
   2-up minmax(0,1fr) tracks for BOTH .why__cards and .grid-4 at 521–860; here DE
   must also collapse to one column, and because that guard is [lang="de"]-scoped
   (higher specificity) the plain .grid-4 rule in styles.css can't override it for
   German — so re-assert both grids at [lang="de"] specificity here. EN/FR get
   .grid-4:1fr from styles.css and .why__cards:1fr below. */
@media (max-width: 520px) {
  .why__cards,
  html[lang="de"] .why__cards,
  html[lang="de"] .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Phone portrait finish (≤430) ---- */
@media (max-width: 430px) {
  /* Stat band: clean vertical stack, full-width CTA, tighter padding */
  .stat-band { padding: 22px 20px; gap: 18px; }
  .stat-band__stats { flex-direction: column; gap: 16px; }
  .stat-band .btn { width: 100%; }
  /* Hero CTAs stack full-width instead of wrapping awkwardly */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  /* Recover side padding on banded sections */
  .cta-band { padding: 44px 22px; }
  .price-card { padding: 30px 22px; }
}