/* =====================================================================
   ALBAN — DESIGN SYSTEM "B 黎明 / Dawn"
   main.css — component library. Depends on tokens.css (load it first).
   ---------------------------------------------------------------------
   TABLE OF CONTENTS
     01  Base / reset
     02  Aurora background
     03  Layout: container, skip link, sections, eyebrows
     04  Header / nav (sticky glass) + mobile drawer + theme toggle
     05  Buttons (.cta-pill / .btn-glass / .btn-arrow / .btn-ghost)
     06  Typography (hero/section headings, kicker, lead, gradient)
     07  Hero (+ hero-visual)
     08  Trust wall
     09  Cards (.table-card / .story-card / .principle)
     10  Spec table / price block / badge
     11  Breadcrumb
     12  Prose (article typography)
     13  Table of contents (.toc)
     14  Accordion (FAQ)
     15  Tabs + compare
     16  Forms (.form / fields / radio-card)
     17  Quote CTA section
     18  Footer
     19  Utilities (.serif/.jp/.mono/.reveal/.visually-hidden …)
     20  Accessibility (focus-visible, reduced-motion)
     21  Responsive (<=980px grids collapse, mobile nav)
   ===================================================================== */

/* =====================================================================
   01  BASE / RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh; /* avoid mobile address-bar jump */
}

a { color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease-standard); }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
:target { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
::selection { background: var(--accent-2); color: var(--void); }

/* =====================================================================
   02  AURORA BACKGROUND
   Image-free ambient light, fixed behind everything.
   ===================================================================== */
/* SUMI redesign: the ambient aurora is gone — the ground is flat sumi black.
   Texture (seigaiha) and the single gold accent carry the brand instead. */

/* =====================================================================
   03  LAYOUT: CONTAINER · SKIP LINK · SECTIONS · EYEBROWS
   ===================================================================== */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}
.wrap--narrow { max-width: var(--container-narrow); }

/* Skip link — visible only on focus */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: 999;
  transform: translateY(-200%);
  background: var(--accent-2);
  color: var(--on-accent);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Standard content section */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--lg { padding-block: var(--section-y-lg); }
.section--hairline-top { border-top: 1px solid var(--hairline); }
.section--hairline { border-block: 1px solid var(--hairline); }
.section--tint { background: var(--bg-elevated); }

/* eyebrow with leading rule (gold) */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-2);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-5);
}
.section-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent-2);
}

/* kicker pill (used in hero) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--tint-accent-weak);
  border: 1px solid var(--hairline);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-kicker);
  color: var(--accent);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-6);
}
.kicker .dot {
  width: 6px;
  height: 6px;
  background: var(--accent-2);
  border-radius: var(--r-circle);
  box-shadow: 0 0 12px var(--accent-2);
}

/* =====================================================================
   04  HEADER / NAV
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  border-bottom: 1px solid var(--hairline);
  /* blur lowered 40->14px (CWV: large-radius backdrop blur is a per-frame
     repaint cost on scroll); contain:paint limits the re-composite area. */
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  contain: paint;
}
/* Opaque fallback when backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: var(--surface-solid); }
}
.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
}

/* Brand / logo — real ALBAN GLOBAL <img> only (placeholder glyph + wordmark
   spans removed; see §22 for the image rules). */
.logo { display: flex; align-items: center; gap: var(--s-3); }

/* Desktop nav */
.nav-desktop { display: flex; }
.nav-desktop ul { display: flex; gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); align-items: center; }
.nav-desktop li { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-medium); }
.nav-desktop a:not(.cta-pill):hover { color: var(--accent-2); }
.nav-desktop a[aria-current="page"] { color: var(--accent-2); }

.lang {
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: 0.18em;
}
.lang:hover { color: var(--accent-2); }

/* Theme toggle button */
.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  color: var(--muted);
  transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.theme-toggle:hover { color: var(--accent-2); border-color: var(--hairline-strong); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Hamburger — hidden on desktop, shown <=980px */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  position: relative;
  flex-shrink: 0;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--heading);
  transform: translateX(-50%);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear;
}
.nav-toggle .bars { top: 50%; margin-top: -0.75px; }
.nav-toggle .bars::before { content: ""; top: -6px; }
.nav-toggle .bars::after { content: ""; top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* Mobile drawer + scrim */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(4, 5, 11, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-standard), visibility var(--dur-2);
}
.nav-scrim[data-open="true"] { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-drawer);
  height: 100dvh;
  width: min(86vw, 360px);
  background: var(--drawer-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-left: 1px solid var(--hairline);
  padding: var(--s-6) var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav-drawer { background: var(--surface-solid); }
}
.nav-drawer[data-open="true"] { transform: translateX(0); }
.nav-drawer .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-drawer .drawer-close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  color: var(--heading);
  font-size: 20px; line-height: 1;
}
.nav-drawer .drawer-close:hover { color: var(--accent-2); }
.nav-drawer ul { display: flex; flex-direction: column; gap: var(--s-1); }
.nav-drawer ul a {
  display: block;
  padding: var(--s-3) 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: var(--heading);
  border-bottom: 1px solid var(--hairline);
}
.nav-drawer ul a:hover, .nav-drawer ul a[aria-current="page"] { color: var(--accent-2); }
.nav-drawer .drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-4); }
.nav-drawer .drawer-foot .cta-pill { justify-content: center; text-align: center; }

/* Lock scroll when drawer open */
body.nav-open { overflow: hidden; }

/* =====================================================================
   05  BUTTONS
   ===================================================================== */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--heading);
  color: var(--bg);
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-standard);
}
.cta-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--void);
}
.cta-pill--lg { padding: 20px 44px; min-height: 60px; font-size: var(--fs-sm); letter-spacing: 0.08em; }

.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--tint-accent-weak);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  color: var(--heading);
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  transition: color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              background var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-out);
}
.btn-glass:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: var(--tint-gold-weak);
  transform: translateY(-1px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn-glass { background: var(--surface-2); }
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-2);
  transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.btn-arrow:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* neutral ghost button (forms / secondary) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.btn-ghost:hover { border-color: var(--accent-2); color: var(--accent-2); }

.btn-block { width: 100%; justify-content: center; }
[disabled], .is-disabled { opacity: 0.5; pointer-events: none; }

/* =====================================================================
   06  TYPOGRAPHY
   ===================================================================== */
.gradient {
  color: var(--heading); /* SUMI: emphasis is italic serif, not color */
  font-style: italic;
  font-weight: var(--fw-regular);
}

h1.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  color: var(--heading);
  margin-bottom: var(--s-6);
}

h2.std {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  color: var(--heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--s-7);
}
h3.std {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

.lead-text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text);
  max-width: 680px;
  font-weight: var(--fw-light);
}
.lead-text + .lead-text, .lead-text + .section-actions { margin-top: var(--s-6); }
.section-actions { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }

/* =====================================================================
   07  HERO
   ===================================================================== */
.hero {
  padding-block: clamp(4.5rem, 3rem + 8vw, 7.5rem);
  /* Was 88svh — trimmed so the left column doesn't float in dead space.
     clamp keeps a comfortable floor without forcing near-full-viewport. */
  min-height: clamp(0px, 80vh, 84svh);
  display: flex;
  align-items: center;
  position: relative;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
  width: 100%;
}
.hero-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text);
  max-width: 520px;
  margin-bottom: var(--s-8);
  font-weight: var(--fw-light);
}
.hero-cta { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }

/* Hero stage — shared layout base for the product hero. The orb/glyph hero was
   retired (every hero is now .hero-visual--media); its circle, radial fill and
   ::before ring used to live here and have been removed. Product-specific
   styling lives in §23, the colour halo in §26. */
.hero-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   08  TRUST WALL
   ===================================================================== */
.trust {
  padding-block: var(--s-6);
  border-block: 1px solid var(--hairline);
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .trust { background: var(--surface-solid); }
}
/* Grid so every cell shares a baseline and the wall reads as one band.
   auto-fit (not a hard 6) keeps 3/4/6-item walls centered without empty
   trailing columns; hairline rules replace the old free-floating divider. */
.trust-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  align-items: start;
  justify-content: center;
}
.trust-item {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  text-align: center;
  padding-inline: clamp(0.5rem, 0.2rem + 1vw, 1rem);
  border-left: 1px solid var(--hairline);
}
.trust-item:first-child { border-left: 0; }
.trust-item strong {
  color: var(--heading);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  font-size: var(--fs-sm);
  text-transform: none;
}
/* Second-line descriptor under the headline value (e.g. "Google Reviews").
   Lets the ★ + rating split into discrete, screen-reader-clean parts. */
.trust-sub {
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: 0.1em;
}
/* Rating numeral emphasis — mono + gold, ★ becomes a decorative icon in markup.
   Numeric value text is unchanged; this is presentation only. */
.trust-rating {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-weight: var(--fw-semibold);
}
.trust-rating .star { color: var(--accent-2); }
/* Grid mode retires the floating divider; cell separation is the border-left. */
.trust-divider { display: none; }

/* =====================================================================
   09  CARDS
   ===================================================================== */
.grid { display: grid; gap: var(--s-6); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid + .grid, .section-eyebrow + h2.std + .lead-text + .grid { margin-top: var(--s-8); }
.mt-grid { margin-top: var(--s-9); }

/* Glass placeholder visual (image-free). Fixed ratio pins the box before the
   image loads — kills CLS in tandem with the img width/height attributes. */
.preview {
  aspect-ratio: 11 / 9;
  border-radius: var(--r-md);
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-align: center;
  padding: var(--s-4);
}
.preview--wide { aspect-ratio: 16 / 10; }
.preview--video { aspect-ratio: 16 / 9; }

/* Product / table card */
.table-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-3) var(--ease-standard),
              transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-standard);
  display: flex;
  flex-direction: column;
  min-height: 540px;
  position: relative;
  overflow: hidden;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .table-card { background: var(--surface-solid); }
}
.table-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.table-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 60%;
  height: 1px;
  transform: translateX(-50%);
  background: var(--hairline-strong);
  opacity: 0.5;
}
.table-card .preview { margin-bottom: var(--s-7); }
.table-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--heading);
  font-weight: var(--fw-regular);
  margin-bottom: var(--s-1);
}
.table-card .jp { font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); color: var(--muted); margin-bottom: var(--s-4); }
.table-card p {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-body);
  margin-bottom: var(--s-5);
  font-weight: var(--fw-light);
  flex: 1;
}
.table-card .link {
  font-size: var(--fs-xs);
  color: var(--heading);
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.table-card .link::after { content: "→"; color: var(--accent-2); transition: transform var(--dur-2) var(--ease-out); }
.table-card .link:hover { color: var(--accent-2); }
.table-card .link:hover::after { transform: translateX(4px); }

/* Story / article card */
.story-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-standard);
  display: flex;
  flex-direction: column;
}
.story-card:hover { transform: translateY(-4px); border-color: var(--hairline-strong); }
.story-thumb {
  aspect-ratio: 3 / 2;
  background: var(--surface-solid);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4);
}
.story-body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.story-cat { font-size: 10px; letter-spacing: 0.25em; color: var(--accent-2); text-transform: uppercase; margin-bottom: var(--s-3); font-weight: var(--fw-semibold); }
.story-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--heading);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-3);
}
.story-card p { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; margin-bottom: var(--s-4); font-weight: var(--fw-light); flex: 1; }
.story-date { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* Principle / numbered feature card */
.principle {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .principle { background: var(--surface-solid); }
}
.principle .num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--accent-2);
  font-style: italic;
  display: block;
  margin-bottom: var(--s-2);
  font-weight: var(--fw-regular);
}
/* Match both h3 and h4 so the card looks identical whether markup uses the
   visually-correct heading level (h3, fixes the h2->h4 skip) or legacy h4. */
.principle :is(h3, h4) { font-size: var(--fs-sm); color: var(--heading); font-weight: var(--fw-semibold); margin-bottom: var(--s-2); letter-spacing: 0.02em; font-family: var(--font-body); line-height: 1.3; }
.principle p { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; font-weight: var(--fw-light); }

/* generic glass panel (split sections etc.) */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1rem + 3vw, 4rem);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel { background: var(--surface-solid); }
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
/* Top-align modifier — for specs/voice + featured-story rows where the two
   columns should share a top edge (eyebrows aligned) rather than centering. */
.split--top { align-items: start; }

/* =====================================================================
   10  SPEC TABLE · PRICE · BADGE
   ===================================================================== */
.badge {
  display: inline-block;
  font-size: 10px;
  background: rgba(232, 184, 96, 0.12);
  color: var(--accent-2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  font-weight: var(--fw-semibold);
}
.badge--blue { background: rgba(124, 161, 255, 0.14); color: var(--accent); }

.price {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--s-4);
}
.price strong { color: var(--accent-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.price--lg strong { font-size: var(--fs-xl); }

/* Spec table — monospace values, hairline rows */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.spec-table caption {
  text-align: left;
  color: var(--accent-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-4);
}
.spec-table th, .spec-table td {
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  color: var(--muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  width: 38%;
}
.spec-table td { color: var(--text); font-family: var(--font-mono); font-weight: var(--fw-regular); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* =====================================================================
   11  BREADCRUMB
   ===================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-6);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--hairline-strong); }
.breadcrumb a:hover { color: var(--accent-2); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* =====================================================================
   12  PROSE — article body typography
   ===================================================================== */
.prose {
  max-width: var(--container-narrow);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
}
.prose > * + * { margin-top: var(--s-5); }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  color: var(--heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin-top: var(--s-9);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--heading);
  line-height: var(--lh-snug);
  margin-top: var(--s-7);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.prose h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--heading); margin-top: var(--s-6); }
.prose p { color: var(--text); }
.prose a { color: var(--accent); border-bottom: 1px solid var(--hairline-strong); transition: border-color var(--dur-2), color var(--dur-2); }
.prose a:hover { color: var(--accent-2); border-color: var(--accent-2); }
.prose strong { color: var(--heading); font-weight: var(--fw-semibold); }
.prose ul, .prose ol { padding-left: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: calc(-1 * var(--s-5)); top: 0.7em; width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--accent-2); }
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--accent-2); font-family: var(--font-mono); }
.prose blockquote {
  border-left: 2px solid var(--accent-2);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--heading);
}
.prose figure { margin-block: var(--s-6); }
.prose figure img, .prose > img {
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  width: 100%;
}
.prose figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--muted); text-align: center; letter-spacing: 0.04em; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  padding: 0.15em 0.45em;
  border-radius: var(--r-xs);
  color: var(--accent);
}
.prose pre {
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-block: var(--s-6); }
.prose th, .prose td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline); text-align: left; }
.prose thead th { color: var(--accent-2); font-weight: var(--fw-semibold); letter-spacing: 0.04em; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: var(--s-8); }

/* =====================================================================
   13  TABLE OF CONTENTS
   ===================================================================== */
.toc {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toc { background: var(--surface-solid); }
}
.toc .toc-title { font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-2); font-weight: var(--fw-semibold); margin-bottom: var(--s-4); }
.toc ol { display: flex; flex-direction: column; gap: var(--s-3); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent-2); font-size: var(--fs-xs); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--accent-2); }
.toc ol ol { margin-top: var(--s-3); margin-left: var(--s-5); }
.toc--sticky { position: sticky; top: calc(var(--header-h) + var(--s-5)); }

/* =====================================================================
   14  ACCORDION (FAQ)
   ===================================================================== */
.accordion { border-top: 1px solid var(--hairline); }
.accordion-item { border-bottom: 1px solid var(--hairline); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--heading);
  transition: color var(--dur-2) var(--ease-standard);
}
.accordion-trigger:hover { color: var(--accent-2); }
.accordion-trigger .acc-icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.accordion-trigger .acc-icon::before,
.accordion-trigger .acc-icon::after {
  content: "";
  position: absolute;
  background: var(--accent-2);
  inset: 0; margin: auto;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2);
}
.accordion-trigger .acc-icon::before { width: 100%; height: 1.5px; }
.accordion-trigger .acc-icon::after { width: 1.5px; height: 100%; }
.accordion-trigger[aria-expanded="true"] .acc-icon::after { transform: scaleY(0); opacity: 0; }
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-3) var(--ease-in-out);
}
.accordion-panel[hidden] { display: block; } /* JS toggles via [hidden]; we animate instead */
/* No-JS, or if main.js fails to load: never trap FAQ answers at height 0.
   (With JS, the defer script swaps .no-js->.js and sets panel state before first paint.) */
.no-js .accordion-panel { max-height: none; overflow: visible; }
.accordion-panel .acc-body {
  padding-bottom: var(--s-6);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  max-width: var(--container-narrow);
}
.accordion-panel .acc-body > * + * { margin-top: var(--s-4); }

/* =====================================================================
   15  TABS + COMPARE
   ===================================================================== */
.tabs__list {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-7);
}
.tabs__tab {
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--accent-2); border-color: var(--accent-2); }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fade-in var(--dur-3) var(--ease-out); }

/* Compare table */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare th, .compare td {
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.compare thead th {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--heading);
  border-bottom: 1px solid var(--hairline-strong);
}
.compare tbody th {
  text-align: left;
  color: var(--muted);
  font-weight: var(--fw-medium);
}
.compare td { color: var(--text); font-family: var(--font-mono); }
.compare .yes { color: var(--accent-2); }
.compare .no { color: var(--muted); opacity: 0.5; }
.compare col.is-featured, .compare td.is-featured, .compare th.is-featured {
  background: rgba(124, 161, 255, 0.06);
}
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   16  FORMS
   ===================================================================== */
.form { display: flex; flex-direction: column; gap: var(--s-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label, .form-legend {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--fw-medium);
}
.field .hint { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-light); text-transform: none; letter-spacing: 0; }
.field .req { color: var(--accent-2); }

.input, .textarea, .select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  font-size: var(--fs-base);
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--hairline-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}
.textarea { min-height: 140px; resize: vertical; line-height: var(--lh-body); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-2) 50%), linear-gradient(135deg, var(--accent-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s-9);
}
.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--error); }
.field-error { font-size: var(--fs-xs); color: var(--error); letter-spacing: 0; text-transform: none; }

/* Radio / checkbox card group */
.radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card .rc-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--heading); }
.radio-card .rc-desc { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-light); }
.radio-card:hover { border-color: var(--hairline-strong); }
.radio-card:has(input:checked) {
  border-color: var(--accent-2);
  background: var(--tint-gold-weak);
}
.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Fallback for browsers without :has() — JS adds .is-checked */
.radio-card.is-checked { border-color: var(--accent-2); background: var(--tint-gold-weak); }

/* =====================================================================
   17  QUOTE CTA SECTION
   ===================================================================== */
.quote-cta {
  padding-block: var(--section-y-lg);
  text-align: center;
  position: relative;
  background: var(--bg-elevated);
}
.quote-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: var(--hairline-strong);
}
.quote-cta h2 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-light);
  color: var(--heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--s-6);
}
.quote-cta p {
  font-size: var(--fs-md);
  color: var(--text);
  max-width: 580px;
  margin: 0 auto var(--s-8);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
}

/* =====================================================================
   18  FOOTER
   ===================================================================== */
.site-footer {
  padding: var(--s-11) var(--gutter) var(--s-7);
  background: #04050B;
  border-top: 1px solid var(--hairline);
}
:root[data-theme="light"] .site-footer { background: #0F1730; }
.footer-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--s-8);
}
.footer-brand p { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); font-weight: var(--fw-light); max-width: 300px; margin-top: var(--s-5); }
.site-footer .footer-brand p { color-scheme: dark; }
.site-footer ul { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer ul li { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-light); }
.site-footer ul li.head { color: var(--accent-2); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); letter-spacing: var(--ls-kicker); text-transform: uppercase; margin-bottom: var(--s-2); }
.site-footer ul li a:hover { color: var(--accent-2); }
.footer-bottom {
  max-width: var(--container);
  margin: var(--s-9) auto 0;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--fs-2xs);
  letter-spacing: 0.05em;
}
/* Footer is always on a dark ground — keep its muted readable in light theme */
:root[data-theme="light"] .site-footer,
:root[data-theme="light"] .site-footer .footer-bottom { --muted: #9AA3BE; --heading: #E8EEFC; --accent-2: #E8B860; }

/* =====================================================================
   19  UTILITIES
   ===================================================================== */
.serif { font-family: var(--font-display); }
.jp { font-family: var(--font-jp); }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent-2); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--container-narrow); }
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-8); }
.flex { display: flex; gap: var(--s-4); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
/* margin-bottom scale — mirrors --s-N so inline margin-bottom styles can be
   replaced by a class (CSP-friendly, Gutenberg-portable). */
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.mb-8 { margin-bottom: var(--s-8); }

/* Display heading utility — the most common inline "font-size:var(--fs-3xl);
   line-height; weight:light" pattern, lifted into a class. Pair with .serif
   for the editorial display face. */
.display-xl {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  color: var(--heading);
}

/* Image-free media placeholder — a receptacle for empty/coming-soon slots and
   stub product visuals. NEVER an interior/room photo; this is the safe filler
   so no scene composite is ever reintroduced. */
.stub-media {
  aspect-ratio: 11 / 9;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.stub-media--wide { aspect-ratio: 16 / 10; }
.stub-media--app { aspect-ratio: 4 / 3; }
/* A product/app shot dropped into a stub slot fills it cleanly. */
.stub-media > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Alternate contact rail beside a quote form (tel / mail / JA site) — light
   row of links so a disabled submit is never a dead end. */
.contact-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.contact-fallback a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 2px;
  transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.contact-fallback a:hover { color: var(--accent-2); border-color: var(--accent-2); }

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reveal-on-scroll: start hidden, JS toggles .is-visible.
   Note: a `.no-js` fallback in §20 keeps content visible if JS fails. */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-5, 0.8s) var(--ease-out);
}
.reveal:not(.is-visible) { will-change: opacity, transform; } /* hint only while pending */
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =====================================================================
   20  ACCESSIBILITY
   ===================================================================== */
/* Visible focus ring for keyboard users only */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
/* Don't show the ring on mouse click for elements that handle :focus themselves */
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline-offset: 0; }

/* If JS never runs, reveal content (progressive enhancement) */
.no-js .reveal { opacity: 1; transform: none; }

/* Respect reduced motion: kill transitions, animations, smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .table-card:hover, .story-card:hover, .cta-pill:hover, .btn-glass:hover { transform: none; }
}

/* =====================================================================
   21  RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  /* Collapse all multi-column grids to a single column */
  .grid--3, .grid--2, .grid--4,
  .hero-inner, .split, .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-inner { gap: var(--s-7); }
  .form-row { grid-template-columns: 1fr; }

  /* Swap desktop nav for hamburger */
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }

  /* Hero visual goes first-or-after; keep it from dominating */
  .hero { min-height: auto; }
  .hero-visual { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* Two clean columns; drop the cell rule so wrapped rows don't show an
     orphan left-border. (.trust-divider stays display:none from §08.) */
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-left: 0; padding-inline: 0; }
  .hero-cta { gap: var(--s-4); }
  .hero-cta .btn-glass, .hero-cta .cta-pill { width: 100%; justify-content: center; }
}

/* Honor users who prefer more contrast */
@media (prefers-contrast: more) {
  :root { --hairline: rgba(124, 161, 255, 0.30); --muted: #9AA6C4; }
}


/* ============================================================
   §21  Real imagery in media slots (post-build image pass)
   ============================================================ */
.preview, .story-thumb { position: relative; overflow: hidden; }
.preview > img, .story-thumb > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* contain, not cover: every shot is a product cutout — never crop the table */
  object-fit: contain; display: block; border-radius: inherit; z-index: 0;
  background: var(--surface-solid);
}

/* ============================================================
   §22  Real ALBAN GLOBAL logo (the only brand mark — placeholder glyph
        and .mark/.reading wordmark spans are gone from markup + §04)
   ============================================================ */
.logo-img { display: block; width: auto; }
.site-header .logo-img { height: 40px; }
.nav-drawer .logo-img { height: 36px; }
.site-footer .logo-img { height: 54px; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-dark { display: none; }
  :root:not([data-theme="dark"]) .logo-light { display: block; }
}

/* ============================================================
   §23  Apple-style motion — hero entrance · parallax · scale reveals
   ============================================================ */
/* Home / product hero: cinematic product-only studio shot (replaces the glyph
   orb). Product-on-dark frame; never an interior/room composite. */
/* Home / product hero: a cinematic product-only studio shot, frameless — the
   table dissolves into the dark scene (no box, border or fixed ratio). Height
   follows the image's intrinsic ratio. Only base + product live here; the
   colour halo is the single ::before in §26. */
.hero-visual--media .hero-product {
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  /* Show the WHOLE table, centred. Feather only the photo's outer edges so it
     isn't a hard box — but keep the table fully opaque (the old lighten blend
     dimmed the dark top rail into the background and read as "cut off"). */
  -webkit-mask-image: radial-gradient(128% 122% at 50% 50%, #000 72%, transparent 99%);
          mask-image: radial-gradient(128% 122% at 50% 50%, #000 72%, transparent 99%);
}
.hero-visual--media .hero-meta { display: none; }  /* decorative label — hidden in the blended hero */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: none; } }
  .js .hero-visual--media { animation: hero-rise 0.6s var(--ease-out) 0.05s both; }
  /* Slow parallax drift while scrolling — fine pointer only. No scale (keeps the
     product crisp); the translate is fully compositor-driven. */
  @supports (animation-timeline: scroll()) {
    @media (pointer: fine) {
      .hero-visual--media .hero-product {
        animation: hero-parallax linear both;
        animation-timeline: scroll(root);
        animation-range: 0 75vh;
      }
      @keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(-6%); } }
    }
  }
}
/* Mobile: drop the mask for the cheapest first paint; product-on-dark already
   sits cleanly on the dark page. */
@media (max-width: 720px) {
  .hero-visual--media .hero-product { width: 100%; -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   §24  Lenis smooth scroll + whole-page media parallax
   ============================================================ */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-smooth iframe{pointer-events:none}

/* SUMI: in-card media parallax retired — large imagery stays still (baseline-ui),
   and the 1.08 upscale was cropping table edges inside overflow:hidden thumbs. */

/* ============================================================
   §25  Apple-style product showcases (full-bleed, stacked) + bento
   ============================================================ */
.showcase { padding-block: clamp(5rem, 3rem + 8vw, 9.5rem); text-align: center; position: relative; }
.showcase--tint { background: var(--bg-elevated); border-block: 1px solid var(--hairline); }
.showcase .wrap { max-width: 1080px; }
.showcase .badge { margin-bottom: var(--s-4); }
.showcase-title { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--heading); }
.showcase .jp { font-size: var(--fs-sm); letter-spacing: var(--ls-eyebrow); color: var(--muted); margin-top: var(--s-2); }
.showcase-lead { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text); max-width: 600px; margin: var(--s-5) auto 0; font-weight: var(--fw-light); }
.showcase-price { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-sm); }
.showcase-price strong { color: var(--accent-2); font-family: var(--font-mono); font-size: var(--fs-lg); margin-left: var(--s-2); }
.showcase-cta { display: flex; gap: var(--s-5); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--s-6); }
.showcase-media { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.showcase-media img { width: min(100%, 760px); margin-inline: auto; }

.bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 780px) { .bento { grid-template-columns: 1fr; } }
.bento-tile { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); text-align: center; min-height: 240px; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--hairline); border-radius: var(--r-xl); background: var(--surface); transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.bento-tile:hover { transform: translateY(-4px); border-color: var(--hairline-strong); }
.bento-tile h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-2xl); color: var(--heading); }
.bento-tile p { font-size: var(--fs-sm); color: var(--muted); max-width: 36ch; margin-inline: auto; }
.bento-tile .link { justify-content: center; }

/* ============================================================
   §26  Richer colour depth + 和 (Japanese) accents — SINGLE SOURCE.
   The old §27 and the duplicate body::before / hero base have been folded in:
   the aurora now lives once in §02, the hero base in §07 + §23. What remains
   here is the 和 layer and the hero colour halo.
   ============================================================ */
/* 朱 accent: vermilion kicker dot */
.kicker .dot { background: var(--shu-bright); }


/* 青海波 (seigaiha) — a quiet 和 texture on the trust band + footer. It sits
   above the section's own background (z-index:0) but below the content
   (z-index:1), so it stays visible even on near-black surfaces. */
.trust, .site-footer { position: relative; isolation: isolate; }
.trust::after, .site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/brand/seigaiha.png");
  background-size: 120px 60px; opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.trust > *, .site-footer > * { position: relative; z-index: 1; }

/* Colour halo behind the hero product — richness on first view (the only
   .hero-visual--media::before; merged from the old §26 + §27 halos). */
/* SUMI: the colour halo behind the hero product was removed (no glow affordances). */
/* Showcase products: show the whole table, centred; feather only the photo's
   outer edges so it isn't a hard box (no lighten blend — keep the table opaque). */
.showcase-media img {
  -webkit-mask-image: radial-gradient(128% 122% at 50% 50%, #000 72%, transparent 99%);
          mask-image: radial-gradient(128% 122% at 50% 50%, #000 72%, transparent 99%);
}

/* ============================================================
   §28  Journal (Riichi media) — tile-as-link + newsletter form
   ============================================================ */
a.bento-tile { text-decoration: none; color: inherit; }
a.bento-tile .link { margin-top: var(--s-2); }

.newsletter-form {
  display: flex; align-items: flex-end; gap: var(--s-4);
  max-width: 560px; margin-top: var(--s-6); flex-wrap: wrap;
}
.newsletter-form .field { flex: 1 1 280px; text-align: left; }
.newsletter-form .cta-pill { flex: 0 0 auto; }
@media (max-width: 560px) {
  .newsletter-form { align-items: stretch; }
  .newsletter-form .cta-pill { width: 100%; justify-content: center; }
}

/* The configurator hides model-incompatible finishes via the [hidden] attribute.
   .radio-card sets its own display, which overrides the UA [hidden] rule — so
   restore it explicitly (also keeps the no-JS default-hidden cards hidden). */
.radio-card[hidden] { display: none !important; }

/* Honeypot field — positioned off-screen rather than display:none (bots skip
   display:none). The label tells the rare no-CSS / AT user to leave it blank. */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   §29  WebGL aurora canvas — progressive enhancement over §02.
   Hidden by default; hero-shader.js shows it (and dims the CSS
   aurora) only when the shader runs in dark theme.
   ============================================================ */
.aurora-gl { display: none !important; } /* WebGL aurora retired — SUMI: flat ground, no ambient gradients */

/* ============================================================
   §30  Quote List — header pill · toast · list page (3-step)
   ============================================================ */
.quote-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--hairline-strong); border-radius: 999px; font-size: var(--fs-sm); color: var(--text); text-decoration: none; transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.quote-pill:hover { border-color: var(--accent-2); color: var(--heading); }
.qcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--shu); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; font-family: var(--font-mono); }
.qcount[hidden] { display: none; }
@media (max-width: 1280px) { .quote-pill .qp-label { display: none; } .quote-pill { padding: 7px 10px; } }

.ql-toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: var(--bg-elevated, #11162A); border: 1px solid var(--hairline-strong); border-left: 3px solid var(--shu); border-radius: 12px; box-shadow: var(--shadow-xl); animation: ql-in .3s var(--ease-out); max-width: min(92vw, 420px); }
.ql-toast.is-out { opacity: 0; transition: opacity .3s var(--ease-out); }
.ql-toast a { color: var(--accent-2); white-space: nowrap; }
@keyframes ql-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ql-toast { animation: none; } }

.ql-steps { display: flex; gap: var(--s-5); margin-block: var(--s-6); flex-wrap: wrap; }
.ql-steps .step { display: flex; gap: 9px; align-items: center; font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); }
.ql-steps .step .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; }
.ql-steps .step.is-active { color: var(--heading); }
.ql-steps .step.is-active .n { background: var(--shu); border-color: var(--shu); color: #fff; }

.ql-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-5); align-items: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--hairline); }
.ql-row .ql-name { color: var(--heading); font-weight: var(--fw-semibold); }
.ql-row .ql-config { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.ql-note { margin-top: var(--s-3); font-size: var(--fs-xs); }
.ql-qty { display: inline-flex; align-items: center; gap: 6px; }
.ql-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--heading); cursor: pointer; font-size: var(--fs-sm); }
.ql-qty button:hover { border-color: var(--accent-2); }
.ql-qty input { width: 44px; text-align: center; background: transparent; border: 1px solid var(--hairline); border-radius: 8px; color: var(--heading); padding: 5px 2px; font-family: var(--font-mono); }
.ql-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; }
.ql-remove:hover { color: var(--error, #E25563); }
.ql-empty { padding: var(--s-7) 0; text-align: center; color: var(--muted); }
.country-note { margin-top: var(--s-4); padding: var(--s-5); border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent-2); border-radius: 12px; background: var(--surface); }
.country-note h4 { color: var(--heading); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.country-note .ql-note-line { font-size: var(--fs-xs); color: var(--text); margin-top: 6px; line-height: var(--lh-body); }
.ql-payload { font-family: var(--font-mono); font-size: var(--fs-xs); min-height: 160px; }
@media (max-width: 720px) { .ql-row { grid-template-columns: 1fr; } .ql-qty { order: 2; } }
/* §30b — add-to-quote buttons reuse link classes; flash for empty-list gate */
button.btn-arrow, button.btn-glass { font: inherit; cursor: pointer; }
button.btn-arrow { background: none; border: 0; padding: 0; color: inherit; }
.ql-empty.is-flash { color: var(--shu-bright); transition: color .2s; }

/* ============================================================
   §31  SUMI baseline (ui-skills: baseline-ui / a11y / motion-perf)
   ============================================================ */
h1, h2, h3, .hero-title, .showcase-title { text-wrap: balance; }
p, .lead-text, .showcase-lead { text-wrap: pretty; }
.price strong, .spec-table td, .qcount, .trust-item strong { font-variant-numeric: tabular-nums; }
.ql-toast { bottom: calc(20px + env(safe-area-inset-bottom)); right: calc(20px + env(safe-area-inset-right)); }


/* ===== §33 · Contact Form 7 (estimate/contact) — SUMI styling ===== */
.wpcf7{max-width:660px}
.wpcf7 .form__items{margin-bottom:var(--s-5)}
.wpcf7 .form__item-header{margin-bottom:var(--s-2)}
.wpcf7 .form__item-header span{font-size:var(--fs-sm);color:var(--muted);letter-spacing:.02em}
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 input.wpcf7-form-control:not([type=radio]):not([type=checkbox]):not([type=submit]),
.wpcf7 textarea.wpcf7-form-control,
.wpcf7 select.wpcf7-form-control{
  width:100%;background:var(--surface-solid);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:.75rem 1rem;color:var(--heading);font-size:var(--fs-base);font-family:inherit;line-height:1.4}
.wpcf7 textarea.wpcf7-form-control{min-height:130px;resize:vertical}
.wpcf7 input.wpcf7-form-control:focus,.wpcf7 textarea.wpcf7-form-control:focus,.wpcf7 select.wpcf7-form-control:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.wpcf7 .wpcf7-radio .wpcf7-list-item,.wpcf7 .wpcf7-checkbox .wpcf7-list-item{display:inline-flex;align-items:center;gap:.4rem;margin:0 1.25rem .5rem 0;color:var(--text)}
.wpcf7 input.wpcf7-submit{
  background:var(--heading);color:var(--bg);border:none;border-radius:999px;
  padding:.85rem 2.2rem;font-weight:var(--fw-semibold);font-size:var(--fs-base);cursor:pointer;margin-top:var(--s-3)}
.wpcf7 input.wpcf7-submit:hover{opacity:.9}
.wpcf7 .wpcf7-response-output{margin:var(--s-4) 0 0;padding:.75rem 1rem;border-radius:var(--r-lg);font-size:var(--fs-sm)}
.wpcf7 .wpcf7-not-valid-tip{color:#e06a5a;font-size:var(--fs-xs);margin-top:.25rem}
.wpcf7-spinner{margin-left:.6rem}