/* RoomTag site. Tokens: claude.ai "HomeAI" design system (v8): white page, border-separated cards,
   Gothic A1 only, the sky family reserved for purchase actions (brand), product tags (brand-bright),
   sky text (brand-ink) and quiet fills (brand-tint). Layout: a 1200px frame, two-column hero,
   alternating section bands; no gradients, no resting shadows. */

:root {
  --surface-page: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-soft: #F6F8FA;
  --surface-band: #0B1520;
  --on-band: #F3F4F6;
  --on-band-muted: #A3ACB9;
  --border: #E5E7EB;
  --ink: #111827;
  --ink-muted: #5B6472;
  --brand: #0A74BC;
  --brand-hover: #08649F;
  --on-brand: #FFFFFF;
  --brand-bright: #44B0EE;
  --brand-ink: #075A93;
  --brand-tint: #E7F5FD;
  --success: #126B4B;
  --success-tint: #E3F5EC;
  --warning: #8A5A00;
  --warning-tint: #FDF3D7;
  --rug: #EFE9E1;
  --scene-wall: #EEF1F4;
  --scene-window: #DCEBF5;
  --scene-frame: #FFFFFF;
  --scene-art: #E7F5FD;
  --scene-floor: #E6DACA;
  --scene-board: #D9CBB8;

  --font: "Gothic A1", "Apple SD Gothic Neo", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 8px; --radius-md: 16px; --radius-full: 999px;

  --frame: 75rem;
  --margin: 20px;
  --section: clamp(4.5rem, 9vw, 7rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 48em) { :root { --margin: 32px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #0B1520; --surface-card: #111C2B; --surface-soft: #0F1925; --surface-band: #111C2B;
    --border: #1F2937; --ink: #F3F4F6; --ink-muted: #A3ACB9;
    --brand: #5CC0F5; --brand-hover: #7FCDF7; --on-brand: #0B1520; --brand-bright: #5CC0F5; --brand-ink: #5CC0F5; --brand-tint: #0D2C40;
    --success: #3FC98C; --success-tint: #0F2A20; --warning: #F0BE3D; --warning-tint: #2B230C; --rug: #26303D; --scene-wall: #1A2533; --scene-window: #22384A; --scene-frame: #2B3B4E; --scene-art: #0D2C40; --scene-floor: #2A2620; --scene-board: #36302A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-page: #0B1520; --surface-card: #111C2B; --surface-soft: #0F1925; --surface-band: #111C2B;
  --border: #1F2937; --ink: #F3F4F6; --ink-muted: #A3ACB9;
  --brand: #5CC0F5; --brand-hover: #7FCDF7; --on-brand: #0B1520; --brand-bright: #5CC0F5; --brand-ink: #5CC0F5; --brand-tint: #0D2C40;
  --success: #3FC98C; --success-tint: #0F2A20; --warning: #F0BE3D; --warning-tint: #2B230C; --rug: #26303D; --scene-wall: #1A2533; --scene-window: #22384A; --scene-frame: #2B3B4E; --scene-art: #0D2C40; --scene-floor: #2A2620; --scene-board: #36302A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: calc(var(--frame) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }

/* ---------- type scale (design system: display-lg 32, title 22, subtitle 17, body 15, caption 13; the web steps up the display) ---------- */
.display { font-size: clamp(1.875rem, 1.3rem + 3vw, 3.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--ink-muted); }
.caption { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-muted); }
.price { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-full); border: 1px solid transparent; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease), border-color 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn-buy { background: var(--brand); color: var(--on-brand); }
.btn-buy:hover { background: var(--brand-hover); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-quiet:hover { border-color: var(--ink-muted); }
.btn-small { min-height: 40px; padding: 0 var(--space-4); font-size: 0.9375rem; }
.link { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.reassure { margin-top: var(--space-3); font-size: 0.875rem; color: var(--ink-muted); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--surface-page); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.125rem; text-decoration: none; letter-spacing: -0.01em; }
.mark { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-bright); display: grid; place-items: center; }
.mark svg { width: 16px; height: 16px; fill: #0B1520; }
.nav-links { display: none; gap: var(--space-5); font-size: 0.9375rem; }
.nav-links a { text-decoration: none; color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink); }
@media (min-width: 56em) { .nav-links { display: flex; } }

/* ---------- section scaffold ---------- */
.section { padding-block: var(--section); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .lead { margin-top: var(--space-3); }
.soft { background: var(--surface-soft); }
.band { background: var(--surface-band); color: var(--on-band); }
.band .lead, .band .caption { color: var(--on-band-muted); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section); display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.hero .lead { margin-top: var(--space-5); max-width: 34rem; }
.hero .actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.promises { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 0.9375rem; }
.promises li { display: flex; align-items: center; gap: var(--space-2); }
.promises li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.hero { display: block; padding-bottom: var(--section); }
.hero-copy { display: grid; gap: var(--space-5); align-items: end; }
.hero-side .lead { margin-top: 0; }
@media (min-width: 64em) { .hero-copy { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; } }

/* ---------- room scene with product cards ---------- */
.scene { margin-top: clamp(2rem, 5vw, 3.5rem); }
.scene-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); overflow-x: auto; }
.scene-stage { position: relative; }
.scene-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--scene-wall); }
.s-wall { fill: var(--scene-wall); }
.s-window { fill: var(--scene-window); }
.s-frame-box { fill: none; stroke: var(--scene-frame); stroke-width: 10; }
.s-frame-line { stroke: var(--scene-frame); stroke-width: 6; }
.s-art { fill: var(--scene-art); stroke: var(--scene-frame); stroke-width: 6; }
.s-floor { fill: var(--scene-floor); }
.s-board { stroke: var(--scene-board); stroke-width: 2; }
.s-base { fill: var(--scene-frame); }
.s-shade { fill: #000; opacity: 0.12; }
.s-lamp-metal { fill: #3A3D42; }
.s-lamp-pole { stroke: #3A3D42; stroke-width: 6; stroke-linecap: round; }
.s-generic { fill: none; stroke: var(--ink-muted); stroke-width: 3; stroke-dasharray: 10 8; }
#s-sofa, #s-table, #s-rug, #s-lamp-shade { transition: fill 600ms var(--ease); }

.hot { position: absolute; z-index: 2; }
.hot-dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 50%; background: var(--brand-bright); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 21, 32, 0.25); cursor: pointer; transition: transform 160ms var(--ease); }
.hot-dot:hover, .hot-dot[aria-expanded="true"] { transform: scale(1.15); }
.hot.unmatched .hot-dot { background: var(--surface-card); border-color: var(--ink-muted); border-style: dashed; box-shadow: none; }
.pcard { position: absolute; bottom: 20px; left: 0; transform: translateX(-50%); width: 16rem; display: none; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: 10px 12px 10px 10px; background: var(--surface-card); border: 2px solid var(--brand-bright); border-radius: 14px; font-size: 0.875rem; line-height: 1.35; }
.hot[data-anchor="start"] .pcard { transform: translateX(-14%); }
.hot[data-anchor="end"] .pcard { transform: translateX(-86%); }
.hot.unmatched .pcard, .pcard.unmatched { border: 2px dashed var(--ink-muted); }
.scene-sheet { margin-top: var(--space-3); }
.scene-sheet .pcard { position: static; transform: none; display: grid; width: 100%; }
@media (min-width: 64em) { .scene-sheet { display: none; } }
.pcard-thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--surface-soft); display: grid; place-items: center; }
.pcard-thumb svg { width: 44px; height: 44px; }
.pcard-store { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
.pcard-name { font-weight: 600; }
.pcard-price { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pcard-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pcard-fit b { color: var(--success); font-weight: 700; }
@media (min-width: 64em) {
  .pcard { display: grid; }
  .hot-dot { cursor: default; }
}
.scene-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-top: var(--space-3); }
.scene-total { display: flex; gap: var(--space-3); align-items: baseline; font-size: 0.9375rem; }
.scene-total .price { font-size: 1.25rem; }

/* ---------- checked: plan view section ---------- */
.checked { display: grid; gap: var(--space-6); align-items: center; }
.checked .lead { margin-top: var(--space-3); max-width: 32rem; }
@media (min-width: 64em) { .checked { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); } }

/* ---------- interface fragments ---------- */
.ui { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }
.ui-head { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); background: var(--surface-soft); border: 1px solid var(--border); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.chip-on { background: var(--success-tint); border-color: transparent; color: var(--success); }
.chip-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-sky { background: var(--brand-tint); border-color: transparent; color: var(--brand-ink); }
.canvas-body { padding: var(--space-4); }
.style-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); overflow-x: auto; }
.style-tab { padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-card); font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease; }
.style-tab:hover { border-color: var(--ink-muted); }
.style-tab[aria-selected="true"] { background: var(--brand-bright); border-color: var(--brand-bright); color: #0B1520; font-weight: 600; }

.plan { position: relative; aspect-ratio: 142 / 120; background: var(--surface-soft); border-radius: var(--radius-sm); overflow: hidden; }
.plan .wall-label { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: var(--ink-muted); white-space: nowrap; }
.piece { position: absolute; border-radius: 6px; background: var(--surface-card); border: 1px solid var(--border); transition: left 600ms var(--ease), top 600ms var(--ease), width 600ms var(--ease), height 600ms var(--ease); }
.piece.rug { background: var(--rug); border-color: transparent; }
.piece.lamp { border-radius: 50%; }
.door { position: absolute; border: 1px dashed var(--ink-muted); border-left: 0; border-top: 0; border-radius: 0 0 100% 0; opacity: 0.8; }
.door span { position: absolute; top: 18px; left: 6px; font-size: 0.6875rem; color: var(--ink-muted); }
.tag { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--brand-bright); color: #0B1520; border: 2px solid #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; transition: transform 160ms var(--ease), left 600ms var(--ease), top 600ms var(--ease); }
.tag:hover, .tag[aria-expanded="true"] { transform: scale(1.15); }
.tag.unmatched { background: var(--surface-card); color: var(--ink); border: 2px dashed var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .tag:not(.unmatched)::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand-bright); animation: ping 2.4s var(--ease) infinite; opacity: 0; pointer-events: none; }
  @keyframes ping { 0% { transform: scale(0.7); opacity: 0.8; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
}
.tag-pop { position: absolute; z-index: 3; width: min(15rem, 78%); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-card); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(11, 21, 32, 0.14); font-size: 0.875rem; } /* floats: the one shadow on the page */
.tag-pop b { display: block; }
.tag-pop .caption { margin-top: 2px; }
.tag-pop .store-btn { margin-top: var(--space-2); }

.rows { margin-top: var(--space-3); }
.row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.row-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-bright); color: #0B1520; display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; }
.row-dot.unmatched { background: transparent; border: 2px dashed var(--ink-muted); color: var(--ink-muted); }
.row-name { font-weight: 600; font-size: 0.9375rem; }
.row-meta { font-size: 0.8125rem; color: var(--ink-muted); }
.row-price { font-weight: 700; text-align: right; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.total .price { font-size: 1.25rem; }
.canvas-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: center; padding: 0 var(--space-4) var(--space-4); }
.sample-note { font-size: 0.8125rem; color: var(--ink-muted); }

/* ---------- personas (tabs) ---------- */
.persona-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.persona-tab { padding: 10px 18px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-card); font-weight: 600; cursor: pointer; }
.persona-tab[aria-selected="true"] { background: var(--ink); color: var(--surface-page); border-color: var(--ink); }
.persona-panel { display: grid; gap: var(--space-4); }
@media (min-width: 56em) { .persona-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qa { padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.qa h3 { font-size: 1.0625rem; font-weight: 600; }
.qa p { margin-top: var(--space-2); color: var(--ink-muted); font-size: 0.9375rem; }

/* ---------- shop the room: three steps ---------- */
.steps3 { display: grid; gap: var(--space-4); }
@media (min-width: 64em) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.step-card { padding: var(--space-5); }
.step-card h3 { font-size: 1.125rem; font-weight: 600; }
.step-card > p { margin-top: var(--space-2); font-size: 0.9375rem; color: var(--ink-muted); }
.step-ui { margin-top: var(--space-4); }
.field { display: grid; gap: 6px; margin-top: var(--space-3); }
.field label, .field .label { font-size: 0.8125rem; font-weight: 600; }
.input { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card); }
.input span:last-child { color: var(--ink-muted); font-size: 0.875rem; }
.photo-slot { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1px dashed var(--ink-muted); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 0.875rem; text-align: center; padding: var(--space-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.store-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nomatch { margin-top: var(--space-3); padding: var(--space-3); border: 1px dashed var(--ink-muted); border-radius: var(--radius-sm); font-size: 0.875rem; }
.nomatch b { display: block; }
.notice { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--warning-tint); color: var(--warning); font-size: 0.875rem; }

/* ---------- fit check (band) ---------- */
.fit { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 64em) { .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); } }
.fit-card { padding: var(--space-5); color: var(--ink); }
.fit-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.fit-row .field { margin-top: 0; }
.fit-row .field-wide { flex: 1 1 10rem; }
.fit-row input, .fit-row select { min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card); font-size: 1.125rem; font-variant-numeric: tabular-nums; width: 100%; }
.fit-row select { font-size: 1rem; }
.meter { position: relative; height: 44px; margin-top: var(--space-5); border-radius: var(--radius-sm); background: var(--surface-soft); overflow: hidden; }
.meter-sofa { position: absolute; top: 6px; bottom: 6px; left: 6px; max-width: calc(100% - 12px); border-radius: 6px; background: var(--brand-bright); color: #0B1520; display: flex; align-items: center; padding-left: var(--space-3); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; overflow: hidden; transition: width 400ms var(--ease), background-color 200ms ease; }
.meter-sofa.over { background: var(--warning-tint); color: var(--warning); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.75rem; color: var(--ink-muted); }
.fit-result { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pill-good { background: var(--success-tint); color: var(--success); border-color: transparent; }
.pill-bad { background: var(--warning-tint); color: var(--warning); border-color: transparent; }

/* ---------- how it works ---------- */
.timeline { display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 56em) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline li { counter-increment: step; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.timeline li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; margin-bottom: var(--space-3); }
.timeline h3 { font-size: 1.0625rem; font-weight: 600; }
.timeline p { margin-top: var(--space-2); font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- promises band ---------- */
.promise-grid { display: grid; gap: var(--space-6) var(--space-5); }
@media (min-width: 48em) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .promise-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promise-grid .big { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.1; color: #5CC0F5; font-variant-numeric: tabular-nums; }
.promise-grid h3 { margin-top: var(--space-2); font-size: 1.0625rem; font-weight: 600; }
.promise-grid p { margin-top: var(--space-2); font-size: 0.9375rem; color: var(--on-band-muted); }

/* ---------- styles carousel ---------- */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16.5rem, 22rem); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.carousel > * { scroll-snap-align: start; }
.set-card { padding: var(--space-5); }
.set-card h3 { font-size: 1.125rem; font-weight: 600; }
.set-card .plan { margin-top: var(--space-3); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: var(--space-4); max-width: 52rem; }
@media (min-width: 48em) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-card { padding: var(--space-6) var(--space-5); }
.plan-card h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ink-muted); }
.plan-card .h2 { margin-top: var(--space-2); }
.plan-card ul { margin-top: var(--space-4); padding-left: 1.1rem; display: grid; gap: 6px; font-size: 0.9375rem; }
.plan-card .btn { margin-top: var(--space-5); }
.plan-card.featured { border-color: var(--brand-bright); border-width: 2px; }

/* ---------- faq ---------- */
.faq-list { max-width: 48rem; border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-soft); font-weight: 700; transition: transform 200ms var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: var(--space-5); color: var(--ink-muted); max-width: 62ch; }

@media (min-width: 64em) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .faq-wrap .section-head { position: sticky; top: 96px; }
  .faq-list { max-width: none; }
}

/* ---------- closing cta ---------- */
.closing { text-align: center; }
.closing .h2 { max-width: 32rem; margin-inline: auto; }
.closing .lead { margin: var(--space-3) auto 0; max-width: 34rem; }
.closing .actions { margin-top: var(--space-6); display: flex; justify-content: center; }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-6); border-top: 1px solid var(--border); font-size: 0.875rem; }
.foot-cols { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56em) { .foot-cols { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 56em) { .foot-brand { grid-column: auto; } }
.foot h3 { font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); margin-bottom: var(--space-3); }
.foot ul { display: grid; gap: var(--space-2); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot-brand p { margin-top: var(--space-3); color: var(--ink-muted); max-width: 22rem; }
.foot-legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--ink-muted); font-size: 0.8125rem; }

/* ---------- entrance motion (content visible without JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .piece, .tag, .meter-sofa { transition: none; } }