/* ============================================================
   Slow Lune — système de design « noir & lune »
   Palette : noir bleuté · blanc lunaire · ivoire · argent · encre.
   Typographie : Fraunces (titres latins) + Inter (texte).
   ============================================================ */
:root {
  --color-night:    #1E1E24;
  --color-night-2:  #2A2A32;
  --color-moon:     #F0EDE6;
  --color-lavender: #B9BCC4;
  --color-lavender-soft: #E9E7EE;
  --color-mist:     #6F6F79;
  --color-ink:      #26262B;
  --color-line:     #E4E1DA;
  /* Accent lavande : très peu employé, réservé aux appartés et filets. */
  --color-accent:      #8A7BA8;
  --color-accent-ink:  #6B5F80;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --max-read-width: 680px;
  --max-page-width: 1240px;
  --radius: 8px;
  --radius-lg: 14px;
  --space-section: 120px;
  --shadow-soft: 0 10px 40px rgba(30, 30, 36, 0.08);
  --shadow-card: 0 6px 24px rgba(30, 30, 36, 0.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Typographie française : on coupe aux espaces et aux tirets, sans césure
     automatique (le dictionnaire de césure du navigateur ne couvre pas le
     français de façon fiable). `overflow-wrap: break-word` reste le filet de
     sécurité pour qu'un jeton trop long se replie au lieu de déborder d'une
     cellule .cmp ou du tiroir mobile. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.4; color: var(--color-night); letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 0.6em; }
h3 { font-size: 1.2rem; margin: 0 0 0.4em; }
p { margin: 0 0 1.1em; }
.container { max-width: var(--max-page-width); margin: 0 auto; padding: 0 24px; }
.read { max-width: var(--max-read-width); }
.eyebrow {
  font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-lavender); font-weight: 600; margin-bottom: 0.8em;
}
.muted { color: var(--color-mist); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.95em 1.6em; border-radius: 999px; font-weight: 600;
  font-size: 1rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-moon); color: var(--color-night); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--color-night); border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-lavender); }
.btn-on-dark { background: var(--color-moon); color: var(--color-night); }
.btn-on-dark.ghost { background: transparent; color: var(--color-moon); border-color: rgba(240,237,230,0.4); }
/* .btn-primary is a *moon* pill — it reads well only on dark surfaces. On white
   or pale-lavender sections it has almost no contrast, so the primary CTA on a
   light surface uses .btn-night instead. (btn-on-dark is the cream-on-dark
   counterpart; this is the missing dark-on-light one.) */
.btn-night { background: var(--color-night); color: var(--color-moon); box-shadow: var(--shadow-soft); }
.btn-night:hover { background: var(--color-night-2); }
.whatsapp-ico { width: 1.1em; height: 1.1em; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 243, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: baseline; gap: 0.5em; font-family: var(--font-display); border-radius: 8px; transition: opacity .18s ease; }
.brand:hover { opacity: .76; }
.brand:focus-visible { outline: 2px solid var(--color-night); outline-offset: 5px; }
.brand .ko { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; color: var(--color-night); letter-spacing: 0.02em; }
.brand .en { font-size: 0.95rem; color: var(--color-lavender); font-style: italic; }
.nav-links { display: flex; gap: 0.15em; align-items: center; }
/* Nav items used to be flat text whose :hover only nudged opacity .85 -> 1
   between two near-identical dark inks (#26262B -> #1E1E24) — visually a
   no-op, which is why hovering/clicking felt dead. Each item now gets a pill
   background, a growing underline, a pressed state and a keyboard focus ring.
   The current page is tagged aria-current="page" by main.js and stays lit. */
.nav-links > a:not(.btn) {
  position: relative;
  font-size: 0.95rem;
  color: var(--color-ink);
  padding: 0.52em 0.78em;
  border-radius: 9px;
  transition: color .18s ease, background-color .18s ease, transform .12s ease;
}
.nav-links > a:not(.btn)::after {
  content: "";
  position: absolute; left: 0.78em; right: 0.78em; bottom: 0.3em; height: 2px;
  border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
.nav-links > a:not(.btn):hover { color: var(--color-night); background: var(--color-lavender-soft); }
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links > a:not(.btn):active { transform: translateY(1px) scale(.985); background: #DEDBE4; }
.nav-links > a:not(.btn):focus-visible { outline: 2px solid var(--color-night); outline-offset: 2px; }
.nav-links > a:not(.btn)[aria-current="page"] { color: var(--color-night); font-weight: 700; background: var(--color-lavender-soft); }
.nav-links > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
/* The bar CTA is a dark pill on a light header. It used to be .btn-primary
   (a *moon* pill) which is near-invisible on paper — see the .btn-night note
   in the Buttons section. Sized down so it sits inside the 68px bar. */
.nav-cta { margin-left: 0.55em; padding: 0.6em 1.15em; font-size: 0.92rem; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; color: var(--color-night); line-height: 0;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.nav-toggle:hover { background: var(--color-lavender-soft); border-color: var(--color-line); }
.nav-toggle:active { transform: scale(.93); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-night); outline-offset: 2px; }
.nav-toggle[aria-expanded="true"] { background: var(--color-lavender-soft); border-color: var(--color-lavender); }
.nav-toggle svg { display: block; }
.nav-toggle line { transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .16s ease; transform-box: fill-box; transform-origin: center; }
.nav-toggle[aria-expanded="true"] line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] line:nth-child(2) { opacity: 0; transform: scaleX(.25); }
.nav-toggle[aria-expanded="true"] line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@keyframes navdrop { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, var(--color-night-2) 0%, var(--color-night) 55%);
  color: var(--color-moon);
  padding: clamp(64px, 9vw, 120px) 0;
}
.hero .container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.hero h1 { color: var(--color-moon); }
.hero .lead { color: rgba(240,237,230,0.78); font-size: 1.12rem; max-width: 30em; }
.hero .eyebrow { color: var(--color-lavender); }
.hero-actions { display: flex; gap: 0.8em; flex-wrap: wrap; margin-top: 1.6em; }

/* Moon phase animation (CSS, 22s loop) */
.moon-wrap { display: flex; justify-content: center; }
.moon-phase {
  width: clamp(160px, 22vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-moon); position: relative; overflow: hidden;
  box-shadow: 0 0 60px rgba(240,237,230,0.25), inset 0 0 30px rgba(30,30,36,0.08);
}
.moon-phase::after {
  content: ""; position: absolute; inset: -12%; border-radius: 50%;
  background: var(--color-night);
  transform: translateX(-58%);
  animation: moonphase 26s ease-in-out infinite;
}
@keyframes moonphase {
  0%, 100% { transform: translateX(-58%); }
  50%      { transform: translateX(58%); }
}
@media (prefers-reduced-motion: reduce) {
  .moon-phase::after { animation: none; transform: translateX(-20%); }
  html { scroll-behavior: auto; }
}

/* ---------- Sections ---------- */
section { padding: var(--space-section) 0; }
.section-tight { padding: 64px 0; }
.alt { background: linear-gradient(180deg, #fff 0%, var(--color-paper) 100%); }
.dark { background: var(--color-night); color: var(--color-moon); }
.dark h2, .dark h3 { color: var(--color-moon); }
.dark .muted { color: rgba(240,237,230,0.7); }

/* Brand manifesto */
.manifesto { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.3; color: var(--color-night); text-align: center; }

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 28px 16px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.stat .num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--color-night); }
.stat .lbl { font-size: 0.9rem; color: var(--color-mist); margin-top: 0.3em; }

/* ---------- Cards / grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-card);
}
.card h3 { margin-top: 0; }
.card .ico { margin-bottom: 0.7em; color: var(--color-lavender); display: inline-flex; }
.card .ico svg { width: 30px; height: 30px; }

/* ---------- Product grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product-card {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
/* NOTE: the class is .shot, NOT .hero — .hero is the homepage hero band, and
   reusing that name here made the product image inherit its dark radial
   background and 120px padding (visible as black bands around each photo). */
.product-card .thumb {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(158deg, #FFFFFF 0%, #FAF9F6 62%, #F1EFEA 100%);
  border-bottom: 1px solid var(--color-line);
}
/* absolutely positioned so the box is driven by the 1:1 container, never by the
   image's own box — contain guarantees a product is never cropped to fit */
.product-card .thumb .shot {
  position: absolute; inset: 16px;
  width: auto; height: auto; object-fit: contain;
}
.product-card .pbadge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3em 0.7em; border-radius: 999px;
  background: var(--color-night); color: #F0EDE6;
}
.product-card .gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 12px 0; }
.product-card .gal-btn {
  padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1/1;
  background: #fff; border: 1px solid var(--color-line); border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.product-card .gal-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-card .gal-btn:hover { border-color: var(--color-lavender); }
.product-card .gal-btn.active { border-color: var(--color-lavender); box-shadow: 0 0 0 2px rgba(185,188,196,.28); }
.product-card .body { padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 0.5em; flex: 1; }
.product-card .model { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.12em; color: var(--color-lavender); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-card .model .cat { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0; padding: 0.2em 0.6em; border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-mist); }
.product-card .name { font-weight: 600; color: var(--color-night); font-size: 1.05rem; }
.product-card .specs { font-size: 0.88rem; color: var(--color-mist); margin-top: auto; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.4em; }
.tag { font-size: 0.74rem; padding: 0.25em 0.7em; border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-night); }

/* ---------- Spec table ---------- */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 1em; }
.spec-table th, .spec-table td { text-align: left; padding: 0.7em 0.9em; border-bottom: 1px solid var(--color-line); font-size: 0.95rem; vertical-align: top; }
.spec-table th { width: 38%; color: var(--color-mist); font-weight: 600; }

/* ---------- Answer block (AIO/GEO) ---------- */
.answer-block {
  background: #fff; border: 1px solid var(--color-line); border-left: 3px solid var(--color-lavender);
  border-radius: var(--radius); padding: 22px 26px; margin: 1.4em 0; font-size: 1.02rem; line-height: 1.85;
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 1.1em 0; font-size: 1.05rem; font-weight: 600; color: var(--color-night); cursor: pointer; display: flex; justify-content: space-between; gap: 1em; font-family: var(--font-body); }
.faq-q .sign { color: var(--color-lavender); transition: transform .2s; }
.faq-item.open .faq-q .sign { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22,.61,.36,1); color: var(--color-mist); }
.faq-a > * { overflow: hidden; min-height: 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { padding-bottom: 1.1em; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field.full { grid-column: 1 / -1; }
label { font-size: 0.9rem; font-weight: 600; color: var(--color-night); }
input, textarea, select {
  font-family: var(--font-body); font-size: 1rem; padding: 0.8em 0.9em;
  border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; color: var(--color-ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-lavender); outline-offset: 1px; }
textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--color-mist); }
.form-status { margin-top: 14px; padding: 0.9em 1.1em; border-radius: var(--radius); font-size: 0.95rem; display: none; }
.form-status.ok { display: block; background: #EAF4EC; color: #1f6b39; border: 1px solid #bfe3c8; }
.form-status.err { display: block; background: #FBEDEA; color: #9b3b2a; border: 1px solid #f0c9bf; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--color-mist); margin-bottom: 1.4em; }
.breadcrumb a:hover { color: var(--color-night); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-night); color: rgba(240,237,230,0.8); padding: 64px 0 40px; }
.site-footer a { color: rgba(240,237,230,0.8); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-grid h4 { color: var(--color-moon); font-size: 0.95rem; margin-bottom: 1em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6em; font-size: 0.92rem; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(240,237,230,0.14); font-size: 0.82rem; color: rgba(240,237,230,0.6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.youth-note { font-size: 0.82rem; color: rgba(240,237,230,0.6); margin-top: 1em; }
.factory-note { font-size: 0.82rem; color: rgba(240,237,230,0.55); margin-top: 0.4em; }

/* ---------- Todo / unconfirmed box (spec: yellow dashed) ---------- */
.todo {
  border: 1px dashed #C9A227; background: #FFFDF7; color: #6b5a12;
  border-radius: var(--radius); padding: 14px 18px; font-size: 0.9rem; margin: 1em 0;
}

/* ---------- Admin ---------- */
.admin-shell { min-height: 100vh; background: var(--color-paper); }
.admin-header { background: var(--color-night); color: var(--color-moon); padding: 14px 0; }
.admin-header .container { display: flex; justify-content: space-between; align-items: center; }
.admin-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
.admin-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.7em 0.8em; border-bottom: 1px solid var(--color-line); }
.admin-table th { color: var(--color-mist); font-weight: 600; }
.badge { font-size: 0.72rem; padding: 0.2em 0.6em; border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-night); }
.login-wrap { max-width: 400px; margin: 8vh auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .moon-wrap { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
/* Nav collapses well before 640px: 6 links + CTA + brand overflow the bar
   somewhere around 860px, so the drawer breakpoint is its own query. */
@media (max-width: 880px) {
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--color-paper); border-bottom: 1px solid var(--color-line);
    padding: 12px 20px 16px; box-shadow: 0 18px 44px rgba(30,30,36,0.12);
  }
  .nav-links.open { display: flex; animation: navdrop .22s ease both; }
  .nav-links > a:not(.btn) { padding: 0.78em 0.9em; font-size: 1rem; }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links > a:not(.btn)[aria-current="page"]::after { display: none; }
  .nav-cta { margin: 0.7em 0 0; justify-content: center; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  :root { --space-section: 72px; }
  .grid-3, .product-grid, .stats, .grid-2, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  .product-grid { gap: 18px; }
}

/* ============================================================
   v2 — Conversion & marketing components
   (B2B inquiry-driven layer: trust bar, KPI, comparison,
    process timeline, pain/solution, proof, CTA band, sticky bar)
   ============================================================ */

/* ---------- Trust bar (under hero) ---------- */
.trust-bar { background: var(--color-night-2); color: var(--color-moon); border-top: 1px solid rgba(240,237,230,0.1); padding: 16px 0; }
.trust-bar .container { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: center; justify-content: center; }
.trust-item { display: flex; align-items: center; gap: 0.55em; font-size: 0.85rem; color: rgba(240,237,230,0.82); }
.trust-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-lavender); flex: none; }
.trust-item strong { color: var(--color-moon); }

/* ---------- KPI row (hero, on dark) ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2.1em; }
.kpi { padding: 18px 20px; border-radius: var(--radius); background: rgba(240,237,230,0.06); border: 1px solid rgba(240,237,230,0.14); }
.kpi .n { font-family: var(--font-display); font-size: 1.55rem; color: var(--color-moon); line-height: 1.15; }
.kpi .t { font-size: 0.8rem; color: rgba(240,237,230,0.66); margin-top: 0.25em; }

/* ---------- Certification badges ---------- */
.cert-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 1.3em; }
.cert { font-size: 0.74rem; letter-spacing: 0.06em; padding: 0.42em 0.85em; border-radius: 6px; background: #fff; border: 1px solid var(--color-line); color: var(--color-night); font-weight: 600; }
.dark .cert, .cta-band .cert { background: rgba(240,237,230,0.08); border-color: rgba(240,237,230,0.22); color: var(--color-moon); }

/* ---------- Section heading ---------- */
.sec-head { max-width: 46em; margin: 0 auto 2.6em; text-align: center; }
.sec-head h2 { margin-bottom: 0.45em; }
.sec-head p { color: var(--color-mist); margin: 0; }
.dark .sec-head p { color: rgba(240,237,230,0.72); }

/* ---------- Comparison table ---------- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
.cmp { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.92rem; }
.cmp th, .cmp td { padding: 0.95em 1.15em; text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.cmp thead th { background: var(--color-night); color: var(--color-moon); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; }
.cmp thead th:first-child { background: var(--color-night); }
.cmp tbody th { color: var(--color-mist); font-weight: 600; width: 23%; background: #FAF8F3; }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: none; }
.cmp .hl { background: var(--color-lavender-soft); }
.cmp .hl strong { color: var(--color-night); }
/* .hl marks a recommended column. In <tbody> it tints the cell, but in <thead>
   the cell is already night-on-moon — the ::hl tint would leave cream text on
   pale lavender, i.e. unreadable. Keep the header dark and mark the column
   with a lavender underline instead. */
.cmp thead th.hl { background: var(--color-night-2); color: var(--color-moon); box-shadow: inset 0 -3px 0 var(--color-lavender); }

/* ---------- Process timeline ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step { position: relative; }
.step .idx { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-night); color: var(--color-moon); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.85em; }
.step .day { font-size: 0.76rem; letter-spacing: 0.12em; color: var(--color-lavender); font-weight: 700; text-transform: uppercase; }
.step h3 { font-size: 1.02rem; margin: 0.25em 0 0.4em; }
.step p { font-size: 0.9rem; color: var(--color-mist); margin: 0; }
.step .out { font-size: 0.8rem; color: var(--color-mist); margin-top: 0.7em; border-top: 1px dashed var(--color-line); padding-top: 0.7em; }
.dark .step .idx { background: var(--color-moon); color: var(--color-night); }
.dark .step p, .dark .step .out { color: rgba(240,237,230,0.7); }
.dark .step .out { border-top-color: rgba(240,237,230,0.16); }

/* ---------- Pain / solution cards ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 26px; background: #fff; box-shadow: var(--shadow-card); }
.pain .q { font-weight: 700; color: var(--color-night); margin-bottom: 0.55em; display: flex; gap: 0.5em; }
.pain .q .mk { color: var(--color-lavender); flex: none; }
.pain .a { color: var(--color-mist); font-size: 0.93rem; }
.pain .a strong { color: var(--color-night); font-weight: 600; }

/* ---------- Proof / quote cards ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { background: #fff; border: 1px solid var(--color-line); border-left: 3px solid var(--color-lavender); border-radius: var(--radius); padding: 24px; }
.quote p { font-size: 0.95rem; color: var(--color-ink); margin-bottom: 0.9em; }
.quote .who { font-size: 0.81rem; color: var(--color-mist); }

/* ---------- CTA band ---------- */
.cta-band { background: radial-gradient(130% 170% at 50% 0%, var(--color-night-2), var(--color-night)); color: var(--color-moon); }
.cta-band h2 { color: var(--color-moon); }
.cta-actions { display: flex; gap: 0.8em; flex-wrap: wrap; justify-content: center; margin-top: 1.5em; }
.cta-sub { color: rgba(240,237,230,0.72); font-size: 0.9rem; margin-top: 1.1em; }

/* ---------- Check list ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.62em; }
.checks li { position: relative; padding-left: 1.65em; font-size: 0.95rem; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--color-lavender); font-weight: 700; }
.dark .checks li::before { color: var(--color-moon); }

/* ---------- Ribbon ---------- */
.ribbon { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; padding: 0.35em 0.95em; border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-night); margin-bottom: 1em; }
.dark .ribbon, .cta-band .ribbon { background: rgba(240,237,230,0.12); color: var(--color-moon); }

/* ---------- Accent inline number ---------- */
.hl-num { font-family: var(--font-display); color: var(--color-night); font-weight: 600; font-size: 1.06em; }

/* ---------- Product card CTA + hover ---------- */
.product-card .body .cta { margin-top: 0.9em; }
.product-card .body .cta .btn { width: 100%; justify-content: center; padding: 0.7em 1em; font-size: 0.92rem; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 2.2em; }
.filter-btn { font-family: var(--font-body); font-size: 0.88rem; padding: 0.55em 1.15em; border-radius: 999px; border: 1px solid var(--color-line); background: #fff; color: var(--color-ink); cursor: pointer; transition: all .15s ease; }
.filter-btn:hover { border-color: var(--color-lavender); }
.filter-btn.active { background: var(--color-night); color: var(--color-moon); border-color: var(--color-night); }
/* Les boutons sont la cible des liens profonds /produit/#dual|#simple|#succion.
   Sans marge de défilement, l'en-tête collant (84 px) recouvrirait la barre. */
.filter-bar .filter-btn { scroll-margin-top: 96px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; background: var(--color-night); padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(30,30,36,0.28); }
.sticky-cta .inner { display: flex; gap: 9px; max-width: var(--max-page-width); margin: 0 auto; }
.sticky-cta .btn { flex: 1; justify-content: center; padding: 0.78em 0.8em; font-size: 0.94rem; }

/* ---------- Anchor offset for sticky header ---------- */
.anchor { scroll-margin-top: 84px; }

/* ---------- Responsive for v2 ---------- */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 22px 26px; }
  .pain-grid, .quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; gap: 10px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .sticky-cta { display: block; }
  body { padding-bottom: 62px; }
}

/* ============================================================
   v3 — /sangpum/ catalogue conversion layer
   (single-column hero, deal-terms strip, sample-first band,
    anonymised case results, card CTA pair)
   ============================================================ */

/* ---------- Single-column catalogue hero ---------- */
/* .hero .container is a 2-col grid built for the homepage moon graphic;
   a catalogue hero has no graphic, so it goes full-width single column.
   Later in the file than .hero, so it wins on equal specificity. */
.hero-solo .container { display: block; max-width: 940px; }
.hero .breadcrumb { color: rgba(240,237,230,0.58); margin-bottom: 1.6em; }
.hero .breadcrumb a:hover { color: #fff; }
.hero .answer-block {
  background: rgba(240,237,230,0.06); border: 1px solid rgba(240,237,230,0.16);
  border-left: 3px solid var(--color-lavender); color: rgba(240,237,230,0.88);
}
.hero .lead { max-width: 46em; }
/* 4-up KPI variant — scoped so the homepage 3-up .kpi-row is untouched */
.kpi-row.k4 { grid-template-columns: repeat(4, 1fr); }
.kpi-row.k4 .kpi .n { font-size: 1.32rem; }

/* ---------- Deal-terms strip (what it takes to start) ---------- */
.terms {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-card);
}
.terms .t { padding: 26px 22px; border-right: 1px solid var(--color-line); }
.terms .t:last-child { border-right: none; }
.terms .t .k { font-size: 0.84rem; font-weight: 700; color: var(--color-night); margin-bottom: 0.4em; letter-spacing: 0.02em; }
.terms .t .n { font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.8rem); color: var(--color-night); line-height: 1.2; }
.terms .t .n small { font-size: 0.6em; font-weight: 500; color: var(--color-mist); margin-left: 0.2em; }
.terms .t .d { font-size: 0.82rem; color: var(--color-mist); margin-top: 0.55em; line-height: 1.7; }

/* ---------- Sample-first band ---------- */
.sample-band { background: linear-gradient(150deg, var(--color-lavender-soft), #F7F6F3 70%); border: 1px solid #E2DFE8; border-radius: var(--radius-lg); padding: 30px; }
.sample-band .k { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-lavender); font-weight: 700; }
.sample-band .big { font-family: var(--font-display); font-size: clamp(1.55rem, 2.9vw, 2.05rem); color: var(--color-night); line-height: 1.25; margin: 0.35em 0 0.2em; }
.sample-band .rows { margin: 1.1em 0 1.3em; }
.sample-band .row { display: flex; justify-content: space-between; gap: 1em; padding: 0.68em 0; border-bottom: 1px dashed #D5D2DC; font-size: 0.92rem; color: var(--color-mist); }
.sample-band .row:last-child { border-bottom: none; }
.sample-band .row .v { font-weight: 600; color: var(--color-night); white-space: nowrap; }

/* ---------- Anonymised case results ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); }
.case .mk { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-lavender); font-weight: 700; }
.case .big { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-night); line-height: 1.25; margin: 0.4em 0 0.3em; }
.case p { font-size: 0.9rem; color: var(--color-mist); margin: 0; }
.case .meta { margin-top: 0.9em; padding-top: 0.8em; border-top: 1px dashed var(--color-line); font-size: 0.8rem; color: var(--color-mist); }

/* ---------- Highlighted tag (sample availability on a product card) ---------- */
.tag-hl { background: var(--color-night); color: var(--color-moon); }

/* ---------- CTA pair inside a product card ---------- */
.product-card .body .cta-pair { display: grid; gap: 8px; margin-top: 0.9em; }.product-card .body .cta-pair .btn { width: 100%; justify-content: center; }
.product-card .body .cta-pair .btn-primary { padding: 0.66em 1em; font-size: 0.9rem; }
.product-card .body .cta-pair .btn-ghost { padding: 0.48em 1em; font-size: 0.85rem; border-color: #D5CFC8; }

/* ---------- Compact inline CTA bar (mid-page) ---------- */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1em 1.6em;
  background: #fff; border: 1px solid var(--color-line); border-left: 3px solid var(--color-lavender);
  border-radius: var(--radius); padding: 20px 26px; box-shadow: var(--shadow-card);
}
.inline-cta .txt { font-size: 0.98rem; color: var(--color-night); font-weight: 600; }
.inline-cta .txt small { display: block; font-weight: 400; color: var(--color-mist); font-size: 0.86rem; margin-top: 0.25em; }
.inline-cta .acts { display: flex; gap: 0.7em; flex-wrap: wrap; }

/* ---------- Responsive v3 ---------- */
@media (max-width: 900px) {
  .kpi-row.k4 { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: repeat(2, 1fr); }
  .terms .t:nth-child(2n) { border-right: none; }
  .terms .t:nth-child(-n+2) { border-bottom: 1px solid var(--color-line); }
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-row.k4 { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
  .terms .t { border-right: none; border-bottom: 1px solid var(--color-line); }
  .terms .t:last-child { border-bottom: none; }
}

/* ============================================================
   v4 — /gisul/ technical dossier layer
   (hero instrument readout, measured test-data table, 4-stage QC
    flow, third-party lab cards, noise reference chart)
   NOTE: .hero.tech is scoped so the homepage 2-col hero is untouched;
   .head / .bar are always nested (.readout, .db-item) because bare
   .head and .bar already match .sec-head / .trust-bar elsewhere.
   ============================================================ */

/* ---------- Hero instrument readout (right column of the tech hero) ---------- */
.hero.tech .container { align-items: start; }
.readout {
  background: rgba(240,237,230,0.05);
  border: 1px solid rgba(240,237,230,0.16);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.3);
}
.readout .cap { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-lavender); font-weight: 700; }
.readout .metric { padding: 0.74em 0; border-bottom: 1px dashed rgba(240,237,230,0.14); }
.readout .metric:last-of-type { border-bottom: none; padding-bottom: 0; }
.readout .metric .head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.readout .metric .k { font-size: 0.79rem; color: rgba(240,237,230,0.6); }
.readout .metric .v { font-family: var(--font-display); font-size: 1.06rem; color: var(--color-moon); white-space: nowrap; }
.readout .metric .bar { height: 4px; border-radius: 999px; background: rgba(240,237,230,0.14); margin-top: 0.55em; overflow: hidden; }
.readout .metric .bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--color-lavender), var(--color-moon)); }
.readout .foot { margin-top: 1.15em; padding-top: 1em; border-top: 1px solid rgba(240,237,230,0.14); font-size: 0.72rem; color: rgba(240,237,230,0.5); line-height: 1.7; }

/* ---------- Measured test-data table (quotable per-row facts) ---------- */
.cmp.wide { min-width: 1000px; }
.cmp.wide tbody th { width: 13%; }
.cmp .res { font-weight: 700; color: var(--color-night); }
.cmp .res .tick { color: #2E7D53; margin-right: 0.32em; }
.cmp .std { font-size: 0.85rem; color: var(--color-mist); }
.cmp td.num, .cmp th.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-cta { padding: 0.4em 0.9em; font-size: 0.8rem; white-space: nowrap; }

/* ---------- 4-stage QC flow ---------- */
.qc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.qc { background: rgba(240,237,230,0.05); border: 1px solid rgba(240,237,230,0.16); border-radius: var(--radius-lg); padding: 24px 22px; }
.qc .abbr { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.1em; color: var(--color-moon); }
.qc .stage { font-size: 0.75rem; letter-spacing: 0.05em; color: var(--color-lavender); margin-top: 0.2em; }
.qc p { font-size: 0.87rem; color: rgba(240,237,230,0.68); margin: 0.9em 0 0; }
.qc .pick { margin-top: 0.95em; padding-top: 0.85em; border-top: 1px dashed rgba(240,237,230,0.16); font-size: 0.79rem; color: rgba(240,237,230,0.88); }

/* ---------- Third-party inspection partners ---------- */
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lab { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); }
.lab .mark { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-night); color: var(--color-moon); font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.9em; }
.lab .name { font-weight: 700; color: var(--color-night); font-size: 1.06rem; }
.lab .role { font-size: 0.82rem; color: var(--color-lavender); margin-top: 0.15em; }
.lab p { font-size: 0.9rem; color: var(--color-mist); margin: 0.85em 0 0; }

/* ---------- Noise reference chart ---------- */
.db-chart { display: flex; flex-direction: column; gap: 15px; max-width: 740px; margin: 0 auto; }
.db-item { display: flex; flex-direction: column; gap: 6px; }
.db-item .head { display: flex; justify-content: space-between; gap: 1em; font-size: 0.86rem; }
.db-item .head .lbl { color: var(--color-ink); }
.db-item .head .val { color: var(--color-mist); white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-item .bar { height: 12px; border-radius: 999px; background: var(--color-lavender-soft); overflow: hidden; }
.db-item .bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: linear-gradient(90deg, #C6C4CC, var(--color-lavender)); }
.db-item.ref .bar i { background: repeating-linear-gradient(45deg, #E4E2E9 0 7px, #EFEDE8 7px 14px); }
.db-item.ref .head .lbl, .db-item.ref .head .val { color: var(--color-mist); }
.db-item.best .head .lbl { color: var(--color-night); font-weight: 600; }
.db-item.best .head .val { color: var(--color-night); font-weight: 700; }
.db-item.best .bar i { background: linear-gradient(90deg, #3A3A44, var(--color-lavender)); }

/* ---------- Stacked case cards (beside the sample band) ---------- */
.case-grid.stack { grid-template-columns: 1fr; }

/* ---------- Responsive v4 ---------- */
@media (max-width: 1024px) {
  .qc-flow { grid-template-columns: repeat(2, 1fr); }
  .lab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero.tech .container { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qc-flow { grid-template-columns: 1fr; }
  .db-item .head { font-size: 0.8rem; }
}

/* ============================================================
   v5 — /domae/ wholesale layer
   (hero deal-terms panel, cost-driver grid, two-tier exclusivity)
   NOTE: .hero.domae is a modifier on top of the shared .hero 2-col grid —
   the homepage hero and the /gisul/ .hero.tech hero are both untouched.
   ============================================================ */

/* ---------- Hero deal panel (right column of the wholesale hero) ---------- */
.hero.domae .container { align-items: start; }
.deal-card {
  background: rgba(240,237,230,0.05);
  border: 1px solid rgba(240,237,230,0.16);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.3);
}
.deal-card .cap { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-lavender); font-weight: 700; }
.deal-card .drow { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 0.76em 0; border-bottom: 1px dashed rgba(240,237,230,0.14); }
.deal-card .drow:last-of-type { border-bottom: none; padding-bottom: 0; }
.deal-card .drow .k { font-size: 0.79rem; color: rgba(240,237,230,0.6); }
.deal-card .drow .v { font-family: var(--font-display); font-size: 1.02rem; color: var(--color-moon); white-space: nowrap; text-align: right; }
.deal-card .foot { margin-top: 1.15em; padding-top: 1em; border-top: 1px solid rgba(240,237,230,0.14); font-size: 0.72rem; color: rgba(240,237,230,0.5); line-height: 1.7; }

/* ---------- Cost drivers (what actually determines your landed unit cost) ---------- */
.cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cost { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 24px 22px; background: #fff; box-shadow: var(--shadow-card); }
.cost .n { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-lavender); }
.cost .t { font-weight: 700; color: var(--color-night); margin: 0.45em 0 0.45em; font-size: 0.98rem; }
.cost p { font-size: 0.87rem; color: var(--color-mist); margin: 0; }

/* ---------- Two-tier exclusivity (regional protection) ---------- */
.excl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.excl { border: 1px solid #E2DFE8; border-radius: var(--radius-lg); padding: 28px 26px; background: linear-gradient(155deg, #fff 20%, var(--color-lavender-soft)); }
.excl .tier { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--color-lavender); }
.excl h3 { margin: 0.45em 0 0.6em; }
.excl p { font-size: 0.9rem; color: var(--color-mist); margin: 0 0 0.9em; }
.excl p:last-child { margin-bottom: 0; }

/* ---------- Responsive v5 ---------- */
@media (max-width: 1024px) {
  .cost-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero.domae .container { grid-template-columns: 1fr; }
  .excl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cost-grid { grid-template-columns: 1fr; }
  .deal-card .drow .v { font-size: 0.95rem; }
}

/* ============================================================
   v6 — /oem/ manufacturing-model layer
   (blueprint-textured hero, 3-up definition grid, full-custom stage
    timeline, customisable-vs-fixed spec columns)
   NOTE: .hero.oem is a modifier on the shared .hero 2-col grid — the
   homepage hero, /gisul/ .hero.tech and /domae/ .hero.domae are all
   untouched. Bare .head / .bar / .n / .k are always nested, because
   those names already match .sec-head / .trust-bar / .nav elsewhere.
   ============================================================ */

/* ---------- Hero (blueprint grid accent, bottom-right) ---------- */
.hero.oem .container { align-items: start; position: relative; z-index: 1; }
.hero.oem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(240,237,230,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,230,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(85% 90% at 84% 22%, #000 0%, transparent 70%);
  mask-image: radial-gradient(85% 90% at 84% 22%, #000 0%, transparent 70%);
}

/* ---------- 3-up definition grid (base .cost-grid is 4-up for /domae/) ---------- */
.cost-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.cost-grid.c3 .cost .n { font-size: 1.18rem; letter-spacing: 0.06em; }
.cost .mt { font-size: 0.8rem; color: var(--color-mist); margin-top: 0.75em; padding-top: 0.7em; border-top: 1px dashed var(--color-line); }
.cost .mt b { color: var(--color-night); font-weight: 600; }

/* ---------- 3-up step grid (base .steps is 4-up) ---------- */
.steps.w3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Full-custom stage timeline table ---------- */
.cmp.tl { min-width: 900px; }
.cmp.tl tbody th { width: 5%; text-align: center; font-family: var(--font-display); font-size: 1.08rem; color: var(--color-night); background: #FAF8F3; }
.cmp.tl .ph { font-weight: 600; color: var(--color-night); }
.cmp.tl .dur { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-night); font-weight: 600; }
.cmp.tl .out, .cmp.tl .who { color: var(--color-mist); font-size: 0.88rem; }

/* ---------- Customisable vs fixed spec columns ---------- */
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.spec-col { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 30px 28px; background: #fff; box-shadow: var(--shadow-card); }
.spec-col.locked { background: linear-gradient(155deg, #fff 34%, #F4F2EE); }
.spec-col .cap { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; }
.spec-col .cap.free { color: var(--color-lavender); }
.spec-col .cap.fix { color: var(--color-mist); }
.spec-col h3 { margin: 0.55em 0 1em; }
.spec-col .checks li { font-size: 0.93rem; color: var(--color-ink); }
.spec-col .checks li strong { color: var(--color-night); }
.spec-col.locked .checks li::before { content: "•"; color: var(--color-mist); }

/* ---------- Responsive v6 ---------- */
@media (max-width: 900px) {
  .hero.oem .container { grid-template-columns: 1fr; }
  .cost-grid.c3 { grid-template-columns: 1fr; }
  .spec-cols { grid-template-columns: 1fr; }
  .steps.w3 { grid-template-columns: repeat(2, 1fr); }
  .hero.oem::after { opacity: 0.6; }
}
@media (max-width: 640px) {
  .steps.w3 { grid-template-columns: 1fr; }
}

/* ============================================================
   v7 — /sogae/ brand-story layer
   (offset moon-glow hero, year timeline for the company history,
    full-width manifesto band)
   NOTE: .hero.sogae is a modifier on the shared .hero 2-col grid —
   the homepage hero, .hero.tech, .hero.domae and .hero.oem are all
   untouched. The .hero pseudo-element slots were only used by
   .hero.oem::after, so ::before is free here and ::after is
   re-declared under a different modifier class.
   ============================================================ */

/* ---------- Hero (offset moon glow, top-right) ---------- */
.hero.sogae .container { align-items: start; position: relative; z-index: 1; }
.hero.sogae::after {
  content: ""; position: absolute; right: -6%; top: -22%; width: 640px; height: 640px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 36%, rgba(240,237,230,0.15), rgba(240,237,230,0.05) 40%, transparent 66%);
}
.hero.sogae::before {
  content: ""; position: absolute; right: 7%; top: 6%; width: 290px; height: 290px;
  border-radius: 50%; border: 1px solid rgba(240,237,230,0.1); pointer-events: none;
}

/* ---------- Full-width manifesto band ---------- */
.brand-band { background: var(--color-night); color: var(--color-moon); text-align: center; padding: clamp(60px, 8vw, 104px) 0; }
.brand-band .m { font-family: var(--font-display); font-size: clamp(1.75rem, 4.1vw, 3rem); line-height: 1.32; color: var(--color-moon); max-width: 22em; margin: 0 auto; }
.brand-band .m .acc { color: var(--color-lavender); }
.brand-band .sub { color: rgba(240,237,230,0.68); font-size: 0.96rem; max-width: 42em; margin: 1.5em auto 0; }
.brand-band .sig { margin-top: 2.2em; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240,237,230,0.48); }

/* ---------- Year timeline (company history) ---------- */
.tl-y { margin-top: 2.6em; }
.tl-y .y { display: grid; grid-template-columns: 88px 1fr; gap: 26px; }
.tl-y .y .yr { font-family: var(--font-display); font-size: 1.44rem; color: var(--color-night); text-align: right; letter-spacing: 0.01em; }
.tl-y .y .bd { position: relative; border-left: 1px solid var(--color-line); padding: 0 0 30px 30px; }
.tl-y .y .bd::before {
  content: ""; position: absolute; left: -5.5px; top: 0.44em; width: 11px; height: 11px;
  border-radius: 50%; background: var(--color-moon); border: 1.5px solid var(--color-night-2);
}
.tl-y .y .tag { display: block; font-size: 0.69rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--color-lavender); margin-bottom: 0.35em; }
.tl-y .y h3 { font-size: 1.04rem; margin: 0 0 0.35em; }
.tl-y .y p { font-size: 0.92rem; color: var(--color-mist); margin: 0; }
.tl-y .y .chips { margin-top: 0.7em; display: flex; flex-wrap: wrap; gap: 7px; }
.tl-y .y .chips span { font-size: 0.73rem; font-weight: 600; color: var(--color-night); background: var(--color-lavender-soft); border-radius: 6px; padding: 0.3em 0.68em; }
.tl-y .y.now .yr { color: var(--color-lavender); }
.tl-y .y.now .bd::before { background: var(--color-night); border-color: var(--color-night); box-shadow: 0 0 0 4px var(--color-lavender-soft); }

/* ---------- Small print inside a comparison cell ---------- */
.cmp .sm { display: block; font-size: 0.78rem; color: var(--color-mist); font-weight: 400; margin-top: 0.25em; }

/* ---------- Responsive v7 ---------- */
@media (max-width: 900px) {
  .hero.sogae .container { grid-template-columns: 1fr; }
  .hero.sogae::after { right: -32%; top: -14%; opacity: 0.72; }
  .hero.sogae::before { display: none; }
}
@media (max-width: 640px) {
  .tl-y .y { grid-template-columns: 60px 1fr; gap: 16px; }
  .tl-y .y .yr { font-size: 1.14rem; }
  .tl-y .y .bd { padding-left: 22px; padding-bottom: 26px; }
  .brand-band .m { font-size: 1.52rem; }
}

/* ============================================================
   v8 — /jilmun/ FAQ-hub layer
   (dot-matrix hero, .quick-answers panel, .qa-grid first-answer
    cards, .jump-nav category chips, .faq-cat headers, .faq-src
    topic links)
   NOTE: .hero.faq is a modifier on the shared .hero 2-col grid.
   .hero::after is only used by .hero.oem / .hero.sogae, and each
   of those lives on its own page — ::after is free here.
   ============================================================ */

/* ---------- Hero: dot matrix ---------- */
.hero.faq .container { align-items: start; position: relative; z-index: 1; }
.hero.faq::after {
  content: ""; position: absolute; top: -16%; right: -10%; width: 62%; height: 132%;
  background-image: radial-gradient(circle, rgba(138,123,168,0.5) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 76% at 74% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(70% 76% at 74% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* ---------- Hero right column: instant-answer panel ---------- */
.quick-answers {
  background: rgba(240,237,230,0.05);
  border: 1px solid rgba(240,237,230,0.16);
  border-radius: 16px; padding: 26px 26px 22px;
  backdrop-filter: blur(2px);
}
.quick-answers .cap {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-lavender); font-weight: 700; margin: 0 0 1em;
}
.quick-answers .qa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.1em;
  padding: 0.68em 0; border-bottom: 1px dashed rgba(240,237,230,0.14);
}
.quick-answers .qa:last-of-type { border-bottom: none; padding-bottom: 0; }
.quick-answers .q { font-size: 0.83rem; color: rgba(240,237,230,0.64); flex: 0 1 auto; }
.quick-answers .a {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--color-moon);
  white-space: nowrap; text-align: right;
}
.quick-answers .foot {
  margin-top: 1.15em; padding-top: 1em; border-top: 1px solid rgba(240,237,230,0.14);
  font-size: 0.72rem; color: rgba(240,237,230,0.48); line-height: 1.7;
}

/* ---------- First-answer cards (.qa-grid) ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 0.5em; }
.qa-card {
  display: flex; flex-direction: column; gap: 0.42em;
  padding: 22px 22px 20px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--color-line);
  color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}
.qa-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(30,30,36,0.09); border-color: var(--color-lavender); }
.qa-card .ico { display: inline-flex; color: var(--color-lavender); margin-bottom: 0.35em; }
.qa-card .cat { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--color-mist); }
.qa-card strong { font-size: 1.02rem; color: var(--color-night); line-height: 1.5; }
.qa-card .sub { font-size: 0.86rem; color: var(--color-mist); margin: 0; }
.qa-card .more { margin-top: auto; padding-top: 0.7em; font-size: 0.8rem; font-weight: 700; color: var(--color-night); }

/* ---------- Category jump chips ---------- */
.jump-nav { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 2.1em; }
.jump-nav a {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.86rem; font-weight: 600; text-decoration: none;
  padding: 0.52em 1.05em; border-radius: 999px;
  background: #fff; border: 1px solid var(--color-line); color: var(--color-night);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.jump-nav a b {
  font-size: 0.72rem; font-weight: 700; color: var(--color-mist);
  background: var(--color-lavender-soft); border-radius: 999px; padding: 0.1em 0.5em;
  transition: background-color .18s ease, color .18s ease;
}
.jump-nav a:hover { background: var(--color-lavender-soft); border-color: var(--color-lavender); }
.jump-nav a:active { transform: translateY(1px) scale(.985); }
.jump-nav a:hover b { background: var(--color-night); color: var(--color-moon); }

/* ---------- Category header inside a FAQ section ---------- */
.faq-cat { display: flex; align-items: center; gap: 0.85em; margin: 0 0 0.4em; }
.faq-cat .ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--color-lavender-soft); color: var(--color-night);
}
.faq-cat h2 { margin: 0; font-size: 1.34rem; }
.faq-cat .cnt {
  margin-left: auto; flex: none; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--color-mist);
  border: 1px solid var(--color-line); border-radius: 999px; padding: 0.28em 0.75em;
  background: #fff;
}
.faq-lead { color: var(--color-mist); font-size: 0.95rem; margin: 0 0 1.5em; }
.faq-wrap { max-width: 56em; margin: 0 auto; }

/* Question wrapper: keeps each question a real <h3> for AI/GEO parsing
   without letting the heading's default margins break the accordion rhythm. */
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

/* ---------- Per-topic source link ---------- */
.faq-src {  margin: 1.6em 0 0; padding: 0.95em 1.2em;
  border-left: 3px solid var(--color-lavender);
  background: var(--color-lavender-soft); border-radius: 0 10px 10px 0;
  font-size: 0.88rem; color: var(--color-night);
}
.faq-src a { color: var(--color-night); font-weight: 700; text-decoration: underline; }

/* ---------- Dark variant of .qa-card (mid-page CTA row) ---------- */
.dark .qa-card { background: rgba(240,237,230,0.06); border-color: rgba(240,237,230,0.16); }
.dark .qa-card:hover { border-color: var(--color-lavender); box-shadow: none; }
.dark .qa-card strong { color: var(--color-moon); }
.dark .qa-card .cat { color: rgba(240,237,230,0.5); }
.dark .qa-card .sub { color: rgba(240,237,230,0.66); }
.dark .qa-card .more { color: var(--color-lavender); }

/* ---------- FAQ blocks inside a .dark section ---------- */
.dark .faq-item { border-bottom-color: rgba(240,237,230,0.14); }
.dark .faq-q { color: var(--color-moon); }
.dark .faq-a { color: rgba(240,237,230,0.72); }
.dark .faq-cat .ico { background: rgba(240,237,230,0.1); color: var(--color-lavender); }
.dark .faq-cat .cnt { background: rgba(240,237,230,0.08); border-color: rgba(240,237,230,0.2); color: rgba(240,237,230,0.6); }
.dark .faq-lead { color: rgba(240,237,230,0.72); }
.dark .faq-src { background: rgba(240,237,230,0.07); color: rgba(240,237,230,0.86); }
.dark .faq-src a { color: var(--color-moon); }

/* ---------- Responsive v8 ---------- */
@media (max-width: 1000px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero.faq .container { grid-template-columns: 1fr; }
  .hero.faq::after { top: -10%; right: -28%; width: 78%; height: 108%; opacity: 0.7; }
}
@media (max-width: 640px) {
  .qa-grid { grid-template-columns: 1fr; }
  .quick-answers { padding: 20px 18px 18px; }
  .quick-answers .qa { flex-wrap: wrap; gap: 0.2em; }
  .quick-answers .a { white-space: normal; text-align: left; }
  .faq-cat { flex-wrap: wrap; }
  .faq-cat .cnt { margin-left: 0; }
  .jump-nav { justify-content: flex-start; }
}

/* ============================================================
   v9 — /yeonrak/ inquiry-request layer
   (form-first hero, quick-start chips, channel cards,
    "what to prepare" grid, discreet-shipping panel,
    post-submission flow, terms table)
   ============================================================ */

/* ---------- Hero: contact (signal rings) ---------- */
/* The form lives in the hero's right column, so the first screen of a B2B
   inquiry page IS the form rather than a paragraph describing it. The KPI +
   channel strip is a third grid child spanning both columns (`.hero-foot`),
   which keeps the mobile order as copy -> form -> proof instead of pushing
   the form below a wall of stats. Modifier pattern, same as .hero.oem /
   .hero.sogae / .hero.faq — the homepage 2-col hero is untouched. */
.hero.contact .container { grid-template-columns: 0.92fr 1.08fr; align-items: start; }
.hero.contact::after {
  content: ""; position: absolute; pointer-events: none;
  top: 40%; right: -8%; width: 46%; aspect-ratio: 1;
  transform: translateY(-50%);
  background: repeating-radial-gradient(circle at 50% 50%,
      rgba(138,123,168,0.34) 0 1.5px, transparent 1.5px 44px);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 70%);
          mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 70%);
}
.hero.contact .hero-copy { position: relative; z-index: 1; }
.hero.contact .hero-foot { grid-column: 1 / -1; margin-top: 2.6em; position: relative; z-index: 1; }
.hero.contact .kpi-row { margin-top: 0; }
.hero-copy .answer-block { margin-top: 1.2em; }

/* ---------- Form card (sits on the dark hero) ---------- */
.form-card {
  position: relative; z-index: 2;
  background: var(--color-moon); color: var(--color-ink);
  border-radius: var(--radius-lg); padding: 30px 30px 26px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.34);
}
.form-card h2 { color: var(--color-night); font-size: 1.35rem; margin: 0 0 0.15em; }
.form-card .sub { font-size: 0.88rem; color: var(--color-mist); margin: 0 0 1.1em; }
.form-card label { color: var(--color-night); }
.form-card input, .form-card textarea, .form-card select { background: #fff; }
.form-card .btn[type="submit"] { width: 100%; justify-content: center; font-size: 1.02rem; padding: 1.05em 1.4em; }
.form-card .form-note { font-size: 0.8rem; }

/* ---------- Quick-start chips (prefill the message body) ---------- */
.quick-start { margin: 0 0 1.2em; }
.quick-start .lbl { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-mist); margin-bottom: 0.5em; }
.quick-start .row { display: flex; flex-wrap: wrap; gap: 7px; }
.quick-start button {
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 600;
  padding: 0.48em 0.9em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-line); background: #fff; color: var(--color-ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.quick-start button:hover { border-color: var(--color-lavender); background: var(--color-lavender-soft); }
.quick-start button:focus-visible { outline: 2px solid var(--color-night); outline-offset: 2px; }
.quick-start button[aria-pressed="true"] { background: var(--color-night); color: var(--color-moon); border-color: var(--color-night); }

/* ---------- Channel cards ---------- */
.chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.chan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); }
.chan .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-lavender-soft); color: var(--color-night); margin-bottom: 1em; }
.chan .ico svg { width: 22px; height: 22px; }
.chan .best { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-lavender); }
.chan h3 { margin: 0.35em 0 0.5em; }
.chan p { font-size: 0.92rem; color: var(--color-mist); }
.chan .act { margin-top: auto; padding-top: 1.1em; }
.chan .act .btn { width: 100%; justify-content: center; }
.chan.hi { background: linear-gradient(180deg, #fff 0%, var(--color-lavender-soft) 100%); border-color: var(--color-lavender); }

/* ---------- "What to prepare" grid ---------- */
.prep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prep { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-card); }
.prep .n { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-lavender); line-height: 1; }
.prep .t { font-weight: 700; color: var(--color-night); margin: 0.5em 0 0.35em; }
.prep .d { font-size: 0.88rem; color: var(--color-mist); margin: 0; }

/* ---------- Discreet shipping (dark section) ---------- */
.discreet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 2.2em; }
.disc { border: 1px solid rgba(240,237,230,0.18); border-radius: var(--radius-lg); padding: 24px 22px; background: rgba(240,237,230,0.05); }
.disc .ico { color: var(--color-moon); margin-bottom: 0.7em; display: inline-flex; }
.disc .ico svg { width: 22px; height: 22px; }
.disc .t { font-weight: 700; color: var(--color-moon); }
.disc .d { font-size: 0.86rem; color: rgba(240,237,230,0.7); margin: 0.35em 0 0; }

/* ---------- Post-submission flow (connected timeline) ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); }
.flow .fl { position: relative; padding: 0 14px; }
.flow .fl::before { content: ""; position: absolute; top: 19px; left: 0; right: 0; height: 2px; background: var(--color-line); }
.flow .fl:first-child::before { left: 50%; }
.flow .fl:last-child::before { right: 50%; }
.flow .fl .dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 0.9em; background: var(--color-night); color: var(--color-moon); font-family: var(--font-display); font-size: 1rem; }
.flow .fl .day { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-lavender); text-align: center; }
.flow .fl h3 { font-size: 0.96rem; text-align: center; margin: 0.3em 0 0.4em; }
.flow .fl p { font-size: 0.85rem; color: var(--color-mist); text-align: center; margin: 0; }
.flow-note { margin-top: 2em; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--color-lavender-soft); font-size: 0.92rem; }
.flow-note strong { color: var(--color-night); }

/* ---------- Responsive v9 ---------- */
@media (max-width: 1100px) {
  .prep-grid, .discreet-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .flow .fl::before { display: none; }
}
@media (max-width: 900px) {
  .hero.contact .container { grid-template-columns: 1fr; }
  .hero.contact::after { top: -4%; right: -30%; width: 74%; height: 66%; transform: none; opacity: 0.55; }
  .chan-grid { grid-template-columns: 1fr; }
  .hero.contact .hero-foot { margin-top: 2em; }
}
@media (max-width: 640px) {
  .form-card { padding: 24px 20px 20px; }
  .form-card .form-grid { grid-template-columns: 1fr; }
  .prep-grid, .discreet-grid, .flow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v10 — Legal notice pages (/gageon/ 개인정보처리방침, /yakgwan/ 이용약관)
   Deliberately sober: these pages carry E-E-A-T trust weight, not conversion.
   ========================================================================== */

/* ---- footer: legal link row + factory attribution link ---- */
.legal-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(240, 237, 230, 0.14);
  font-size: 0.85rem;
}
.legal-row a {
  color: rgba(240, 237, 230, 0.72); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.legal-row a:hover { color: #fff; border-bottom-color: rgba(185, 188, 196, 0.85); }
.legal-row a:focus-visible {
  outline: 2px solid var(--color-lavender); outline-offset: 3px;
  border-radius: 2px; color: #fff;
}
.legal-row a[aria-current="page"] { color: #fff; border-bottom-color: var(--color-lavender); }

/* The footer attribution to the manufacturing partner. It is a real link, so
   it needs a visible affordance the plain <span> did not have. */
.factory-note a {
  color: rgba(240, 237, 230, 0.78); text-decoration: none;
  border-bottom: 1px solid rgba(240, 237, 230, 0.32);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.factory-note a:hover { color: #fff; border-bottom-color: #fff; }
.factory-note a:focus-visible {
  outline: 2px solid var(--color-lavender); outline-offset: 3px; border-radius: 2px;
}

/* ---- legal hero band ---- */
.legal-hero {
  position: relative; overflow: hidden;
  background: var(--color-night); color: var(--color-moon);
  padding: 88px 0 60px;
}
.legal-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, rgba(185, 188, 196, 0.13) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(92% 108% at 88% 10%, #000 0%, transparent 74%);
  mask-image: radial-gradient(92% 108% at 88% 10%, #000 0%, transparent 74%);
}
.legal-hero .container { position: relative; z-index: 1; }
.legal-hero h1 { color: var(--color-moon); margin-bottom: 0; }
.legal-hero .eyebrow { color: var(--color-lavender); }
.legal-hero .breadcrumb, .legal-hero .breadcrumb a { color: rgba(240, 237, 230, 0.66); }
.legal-hero .breadcrumb a:hover { color: #fff; }
.legal-hero .lead { color: rgba(240, 237, 230, 0.78); }

.legal-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 1.3em; font-size: 0.85rem; color: rgba(240, 237, 230, 0.62);
}
.legal-meta .badge {
  background: rgba(185, 188, 196, 0.18); color: var(--color-moon);
  letter-spacing: 0.02em;
}
.legal-meta .dot { color: rgba(240, 237, 230, 0.3); }

/* 40–80 word answer block, same pattern as the rest of the site (AIO/GEO). */
.legal-summary {
  max-width: 48em; margin-top: 1.9em; padding: 18px 22px;
  background: rgba(240, 237, 230, 0.05);
  border: 1px solid rgba(185, 188, 196, 0.24);
  border-left: 3px solid var(--color-lavender);
  border-radius: var(--radius);
  font-size: 0.95rem; line-height: 1.85; color: rgba(240, 237, 230, 0.86);
}
.legal-summary strong { color: var(--color-moon); }
.legal-summary p { margin: 0; }
.legal-summary p + p { margin-top: 0.7em; }

.legal-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 28px;
}
.legal-facts .lf {
  border: 1px solid rgba(240, 237, 230, 0.14);
  border-radius: var(--radius); padding: 14px 16px;
  background: rgba(240, 237, 230, 0.03);
}
.legal-facts .lf-k {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-lavender); font-weight: 600;
}
.legal-facts .lf-v {
  margin-top: 0.4em; font-size: 0.95rem; font-weight: 600;
  color: var(--color-moon); line-height: 1.55;
}

/* ---- table of contents ---- */
.legal-toc {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px;
}
.legal-toc a {
  display: flex; align-items: baseline; gap: 0.7em;
  padding: 9px 13px; font-size: 0.92rem; text-decoration: none;
  color: var(--color-ink); background: #fff;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.legal-toc a:hover, .legal-toc a:focus-visible {
  border-color: var(--color-lavender); transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.legal-toc a:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; }
.legal-toc .n {
  color: var(--color-lavender); font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 1.5em;
}

/* ---- document body ---- */
.legal-wrap { max-width: 52em; }
.legal-sec {
  padding: 34px 0; border-bottom: 1px solid var(--color-line);
}
.legal-sec:last-of-type { border-bottom: 0; padding-bottom: 0; }
.legal-sec h2 { font-size: 1.3rem; margin-bottom: 0.45em; }
.legal-sec h3 { font-size: 1rem; margin: 1.6em 0 0.45em; color: var(--color-night); }
.legal-basis {
  font-size: 0.79rem; color: var(--color-mist); margin-bottom: 1.05em;
  letter-spacing: 0.01em;
}
.legal-sec p, .legal-sec li { line-height: 1.88; }
.legal-sec p { margin-bottom: 0.9em; }
.legal-sec ul, .legal-sec ol { padding-left: 1.2em; margin-bottom: 0.9em; }
.legal-sec li { margin-bottom: 0.35em; }
.legal-sec ul li::marker { color: var(--color-lavender); }

/* ---- FAQ block reused inside a legal section ----
   .legal-sec p (0,1,1) is defined after .faq-a p (0,1,1) and would otherwise
   win on source order, adding a bottom margin inside every answer. Restore the
   shared behaviour with a rule that outranks both. */
.legal-sec .faq-a p { margin: 0; padding-bottom: 1.1em; }

/* ---- policy tables ---- */
.policy-table-wrap { overflow-x: auto; margin: 1.1em 0 1.5em; }
.policy-table {
  width: 100%; border-collapse: collapse; font-size: 0.91rem;
}
.policy-table caption {
  caption-side: top; text-align: left;
  font-size: 0.82rem; color: var(--color-mist); padding-bottom: 0.65em;
}
.policy-table th, .policy-table td {
  text-align: left; vertical-align: top;
  padding: 0.8em 0.95em; line-height: 1.72;
  border-bottom: 1px solid var(--color-line);
}
.policy-table thead th {
  background: var(--color-paper); color: var(--color-night);
  font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--color-lavender-soft);
}
.policy-table tbody th { font-weight: 600; color: var(--color-night); }
.policy-table .nowrap { white-space: nowrap; }
.dark .policy-table th, .dark .policy-table td { border-bottom-color: rgba(240, 237, 230, 0.14); }
.dark .policy-table thead th { background: rgba(240, 237, 230, 0.06); color: var(--color-moon); }
.dark .policy-table tbody th { color: var(--color-moon); }

/* ---- callouts ---- */
.legal-callout {
  margin: 1.2em 0; padding: 16px 20px; font-size: 0.93rem; line-height: 1.8;
  background: var(--color-paper); border-radius: var(--radius);
  border-left: 3px solid var(--color-lavender);
}
.legal-callout strong { color: var(--color-night); }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout.is-flat { border-left-color: #C9A227; background: #FFFDF7; }

/* ---- revision history ---- */
.legal-history {
  width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1em;
}
.legal-history th, .legal-history td {
  text-align: left; padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--color-line);
}
.legal-history thead th { color: var(--color-mist); font-weight: 600; }
.legal-history .now { color: var(--color-night); font-weight: 600; }

/* ---- cross-links between the two legal documents ---- */
.legal-cross {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-top: 2.4em;
}
.legal-cross a {
  display: block; padding: 18px 20px; text-decoration: none;
  background: #fff; color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.legal-cross a:hover, .legal-cross a:focus-visible {
  transform: translateY(-2px); border-color: var(--color-lavender);
}
.legal-cross a:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; }
.legal-cross .lx-t { font-weight: 600; color: var(--color-night); }
.legal-cross .lx-d { font-size: 0.85rem; color: var(--color-mist); margin-top: 0.35em; line-height: 1.7; }

/* ---- section index (numbered anchor list inside the doc) ---- */
.legal-anchor-nav {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6em;
}
.legal-anchor-nav a {
  font-size: 0.84rem; text-decoration: none; color: var(--color-night);
  background: var(--color-paper); border: 1px solid var(--color-line);
  border-radius: 999px; padding: 0.35em 0.9em;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.legal-anchor-nav a:hover, .legal-anchor-nav a:focus-visible {
  border-color: var(--color-lavender); background: var(--color-lavender-soft);
}

@media (max-width: 1000px) {
  .legal-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .legal-toc, .legal-cross { grid-template-columns: 1fr; }
  .legal-hero { padding: 70px 0 48px; }
}
@media (max-width: 640px) {
  .legal-facts { grid-template-columns: 1fr; }
  .legal-hero { padding: 58px 0 40px; }
  .legal-sec { padding: 26px 0; }
  .policy-table { font-size: 0.86rem; }
  .policy-table th, .policy-table td { padding: 0.65em 0.7em; }
  .legal-cross a { padding: 16px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-toc a, .legal-cross a, .legal-row a, .factory-note a { transition: none; }
  .legal-toc a:hover, .legal-cross a:hover { transform: none; }
}

/* ============================================================
   v11 — /sangpum/ product-detail conversion layer
   (per-card buyer framing, exclusivity tiers, risk-reversal grid,
    factory-verification band, channel-fit guide)
   NOTE: this page reuses the v2/v4/v5/v9 components wherever the
   shape already existed (.cost-grid, .excl-grid, .pain-grid,
   .qc-flow, .lab-grid, .chan-grid) instead of cloning near-duplicate
   CSS. Every genuinely new class below is nested under .product-card
   or scoped to this page, because bare names like .pos / .deal / .fit
   / .dl would collide with the v5 .deal-card, .cost .mt and .tag
   regions — same trap that produced the .hero/.shot bug.
   ============================================================ */

/* ---------- Hero anchor jump (the buyer's first click) ---------- */
.hero-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.8em; }
.hero-jump a {
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  padding: 0.5em 1.05em; border-radius: 999px;
  border: 1px solid rgba(240,237,230,0.24); background: rgba(240,237,230,0.06);
  color: rgba(240,237,230,0.9); transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hero-jump a:hover { background: rgba(240,237,230,0.15); border-color: var(--color-lavender); color: #fff; }

/* ---------- Per-card buyer framing ---------- */
.product-card .mref { color: inherit; text-decoration: none; }
.product-card:hover .mref { color: var(--color-lavender); }
.product-card .pos {
  margin: 0.5em 0 0; padding: 0.72em 0.9em;
  font-size: 0.85rem; line-height: 1.74; color: var(--color-ink);
  background: var(--color-lavender-soft);
  border-left: 2px solid var(--color-lavender); border-radius: 0 6px 6px 0;
}
.product-card .pos .pos-k {
  display: block; margin-bottom: 0.32em;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--color-lavender);
}
.product-card .fit-row { margin-top: 6px; }
.product-card .tag-fit { background: #fff; border: 1px dashed #CBC9D2; color: var(--color-night); }

/* ---------- Deal row: the four numbers a B2B buyer filters on ---------- */
.product-card .deal-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 0.5em; }
.product-card .deal-row .dl {
  display: flex; flex-direction: column; gap: 0.08em;
  padding: 0.5em 0.68em; font-size: 0.82rem; font-weight: 600; color: var(--color-night);
  background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 8px;
}
.product-card .deal-row .dl b {
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--color-mist);
}

/* ---------- Exclusivity tiers (extends the v5 .excl component) ---------- */
.excl .checks { margin-top: 0.15em; }
.excl .checks li { font-size: 0.88rem; color: var(--color-ink); }
.excl .cap-note {
  margin-top: 1em; padding-top: 0.85em; border-top: 1px dashed #D5D2DC;
  font-size: 0.78rem; line-height: 1.7; color: var(--color-mist);
}

/* ---------- Risk-reversal grid (the worry, then the actual condition) ---------- */
.pain-grid.risk .pain { border-left: 3px solid var(--color-lavender); }
.pain-grid.risk .pain .q .mk { font-family: var(--font-display); font-size: 1.02rem; }

/* ---------- Verification band (dark: QC stages + what you can inspect) ---------- */
.verify-band .lab-grid { margin-top: 34px; }
.verify-band .lab {
  background: rgba(240,237,230,0.06); border-color: rgba(240,237,230,0.16); box-shadow: none;
}
.verify-band .lab .mark { background: var(--color-moon); color: var(--color-night); }
.verify-band .lab .name { color: var(--color-moon); }
.verify-band .lab p { color: rgba(240,237,230,0.68); }

/* ---------- Channel-fit guide (extends the v9 .chan-grid component) ---------- */
.chan-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.chan-grid.c4 .chan { padding: 24px 22px; }
.chan-grid.c4 .chan p { font-size: 0.88rem; }
.chan .picklist { margin: 0.85em 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chan .picklist li { font-size: 0.72rem; font-weight: 600; padding: 0.28em 0.65em; border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-night); }

/* ---------- Reorder-continuity points (two columns of .checks) ---------- */
.reorder-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 36px; margin-top: 1.6em; }

/* ---------- Responsive v11 ---------- */
@media (max-width: 1024px) {
  .chan-grid.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .reorder-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chan-grid.c4 { grid-template-columns: 1fr; }
  .hero-jump { gap: 6px; }
  .hero-jump a { font-size: 0.78rem; padding: 0.45em 0.9em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-jump a { transition: none; }
}

/* ---------- /sangpum/ hero accent (moon-glow arc + orbit ring) ----------
   .hero::after is claimed by .hero.oem / .hero.sogae / .hero.faq /
   .hero.contact, each of which lives on a different page, so the pseudo
   slots are free under the .sangpum modifier. Purely decorative and
   non-interactive, so it never intercepts the CTA clicks. */
.hero.sangpum .container { position: relative; z-index: 1; }
.hero.sangpum::after {
  content: ""; position: absolute; right: -10%; top: -34%; width: 740px; height: 740px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 40%, rgba(185,188,196,0.22), rgba(240,237,230,0.06) 42%, transparent 68%);
}
.hero.sangpum::before {
  content: ""; position: absolute; right: 5%; top: 1%; width: 330px; height: 330px;
  border-radius: 50%; border: 1px solid rgba(240,237,230,0.10); pointer-events: none;
}
@media (max-width: 900px) {
  .hero.sangpum::after { right: -36%; top: -18%; opacity: 0.7; }
  .hero.sangpum::before { display: none; }
}


/* ============================================================
   Slow Lune — surcouche additive
   Aucune règle ci-dessus n'est modifiée : ces sélecteurs ne font qu'ajouter
   la couche éditoriale propre au marché français (titres serif, contraste de
   l'accroche sur fond clair, gouttières de section).
   ============================================================ */
h1, h2, .manifesto, .hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
}
/* Le gris argent est lisible sur le noir lunaire mais trop clair sur ivoire :
   l'accroche bascule sur l'encre accentuée lorsqu'elle est posée sur fond clair. */
.sec-head .eyebrow { color: var(--color-accent-ink); }
.hero .eyebrow,
.cta-band .eyebrow,
.dark .eyebrow,
.dark .sec-head .eyebrow { color: var(--color-lavender); }
/* French copy runs longer than Korean: give the read column a touch more air. */
.read p { line-height: 1.85; }