/* Roomhero in the style of wallartviewer.com (v1.0, 22 Oct 2026). One dark look on purpose, as on that site:
   a charcoal page, near-black panels with tabs cut into their edges, Inter Light headings, outlined buttons
   with an offset shadow, lime for actions and sage for the featured card. Tokens keep the 3D engine's names. */
:root {
  --paper: #1E1E1C;      /* page */
  --panel: #131312;      /* the large rounded panels */
  --raised: #FFFFFF;     /* product-photo cards, QR cards */
  --ink: #F3F1EC;        /* headings and strong text */
  --muted: #ACA8A0;      /* body copy */
  --hair: #3A3936;       /* rules */
  --stage: #1B1B1B;      /* inner wells */
  --tape: #ECFE72;       /* lime: actions, dots, the scan line */
  --tape-ink: #141414;
  --sage: #C3D9C3;       /* featured card and the final panel's edge */
  --card-dark: #191919;
  /* No pink wash on cards (the user, 23 Oct 2026: « what is this weird ass pink gradient color? Keep the relevant colors
     that were chosen in » the main Roomhero site). Cards are flat, and the trade cards take the main site's material tints. */
  --card: linear-gradient(transparent, transparent);
  --band: #141414;
  --band-fg: #F3EFEF;
  --band-muted: #A6A2A2;
  --band-hair: #2E2C2C;
  --focus: #ECFE72;
  --good: #C3D9C3;
  --t-sofa: #26231F; --t-lamp: #1E2420; --t-oak: #28231C; --t-art: #232227;
  --f-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* The mono font is banned (the user, 23 Oct 2026: « i thought i had banned this font? »), so labels use the body font. */
  --f-mono: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mark: "Geist", "Inter", "Helvetica Neue", Arial, sans-serif;
  --wide: 100%;
  --max: 1320px;
  --r: 34px;
  --gut: clamp(8px, 1.8vw, 36px);
  /* Shades the wallartviewer.com layer uses for rules, chips and the footer, so both themes can set them */
  --line: #2C2A2A; --line-2: #383636; --chip: #2A2828; --hover: #1F1F1F; --faint: #6E6B6B;
  --foot: #7A7777; --foot-link: #9A9696; --edge: #444; --glow-in: #232222; --final-top: #1A1A1A;
  --inset: rgba(255,255,255,.035); --tick-bg: #3A3838; --underline: #555;
  --accent: var(--tape);  /* lime as text: nav links, big figures */
  --nav-link: var(--tape);
  --bullet: var(--tape);
  /* Palette A « Ink and Lime » (research/2026-10-23-roomhero-palette.md, 23 Oct 2026): the main action, slider and
     progress fills, and the slider thumb have their own tokens, so light mode can use ink where lime cannot be seen. */
  --cta: var(--tape); --cta-ink: #141414; --fill: var(--tape); --thumb: var(--tape); --mark: var(--tape);
  color-scheme: dark;
}
/* The light theme (v1.4, the user's « i want the normal mode too », 22 Oct 2026): a warm white page, white
   panels, ink text, and lime kept for fills only, since lime text cannot be read on white. It follows the
   device, and the nav's switch sets data-theme to override it. */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --paper: #EDECE8; --panel: #FFFFFF; --ink: #141414; --muted: #55534F; --hair: #D4D1CA; --stage: #F4F3EF;
  --card-dark: #F6F5F1; --band: #FFFFFF; --band-fg: #141414; --band-muted: #5E5C5C; --band-hair: #DCDAD5;
  --focus: #4B3FD8; --good: #2F6B3F; --t-sofa: #ECE7DF; --t-lamp: #E3EAE5; --t-oak: #EDE6DA; --t-art: #E9E6EC;
  --line: #E6E4DF; --line-2: #D4D2CC; --chip: #ECEAE5; --hover: #F2F1ED; --faint: #8A8783;
  --foot: #6E6B6B; --foot-link: #4A4848; --edge: #141414; --glow-in: #F1F0EC; --final-top: #F7F6F2;
  --inset: rgba(0,0,0,.06); --tick-bg: #E4E2DD; --underline: #B5B2AD;
  --accent: #4A6300; --nav-link: #141414; --bullet: #4A6300;
  --cta: #141414; --cta-ink: #ECFE72; --fill: #4A6300; --thumb: #141414; --mark: #ECFE72; --sage: #D6E6C6;
  color-scheme: light;
} }
:root[data-theme="light"] {
  --paper: #EDECE8; --panel: #FFFFFF; --ink: #141414; --muted: #55534F; --hair: #D4D1CA; --stage: #F4F3EF;
  --card-dark: #F6F5F1; --band: #FFFFFF; --band-fg: #141414; --band-muted: #5E5C5C; --band-hair: #DCDAD5;
  --focus: #4B3FD8; --good: #2F6B3F; --t-sofa: #ECE7DF; --t-lamp: #E3EAE5; --t-oak: #EDE6DA; --t-art: #E9E6EC;
  --line: #E6E4DF; --line-2: #D4D2CC; --chip: #ECEAE5; --hover: #F2F1ED; --faint: #8A8783;
  --foot: #6E6B6B; --foot-link: #4A4848; --edge: #141414; --glow-in: #F1F0EC; --final-top: #F7F6F2;
  --inset: rgba(0,0,0,.06); --tick-bg: #E4E2DD; --underline: #B5B2AD;
  --accent: #4A6300; --nav-link: #141414; --bullet: #4A6300;
  --cta: #141414; --cta-ink: #ECFE72; --fill: #4A6300; --thumb: #141414; --mark: #ECFE72; --sage: #D6E6C6;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
.mono { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.1rem + 3.1vw, 3.75rem); }
h3 { font-size: 1.3rem; font-stretch: 112%; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--muted); max-width: 34em; }
.lede strong { color: var(--ink); font-weight: 500; }
section { scroll-margin-top: 80px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reveal on scroll */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 800ms cubic-bezier(.2,.7,.1,1), transform 900ms cubic-bezier(.2,.7,.1,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 80ms; } .rv.d2 { transition-delay: 160ms; } .rv.d3 { transition-delay: 240ms; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 0.98rem/1 var(--f-body); font-stretch: 110%; letter-spacing: -0.005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-ghost { border-color: var(--hair); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-tape { background: var(--tape); color: var(--tape-ink); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .arrow { transition: transform 160ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* The big call to action: two lines, a plus in a disc, tape yellow. */
.cta-big { display: inline-flex; align-items: center; gap: 16px; padding: 12px 26px 12px 12px; border-radius: 999px; background: var(--cta); color: var(--cta-ink); text-decoration: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mark) 35%, transparent), 0 18px 40px -22px rgba(120,90,0,.55); transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease; }
.cta-big:hover { transform: translateY(-2px); box-shadow: 0 0 0 9px color-mix(in srgb, var(--mark) 35%, transparent), 0 24px 50px -24px rgba(120,90,0,.6); }
.cta-big .plus { width: 46px; height: 46px; border-radius: 50%; background: var(--cta-ink); color: var(--cta); display: grid; place-items: center; flex: none; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.cta-big:hover .plus { transform: rotate(90deg); }
.cta-big .plus svg { width: 20px; height: 20px; }
.cta-big b { display: block; font: 650 1.1rem/1.1 var(--f-display); font-stretch: 112%; letter-spacing: -0.02em; }
.cta-big small { display: block; font-size: 0.86rem; opacity: .78; margin-top: 3px; }

/* Navigation */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 240ms ease; }
.nav.scrolled { border-bottom-color: var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-stretch: var(--wide); font-weight: 650; font-size: 1.32rem; letter-spacing: -0.05em; }
.brand svg { width: 28px; height: 28px; flex: none; }
/* The logo, concept 1 Corner (DECISIONS « Logo », 23 Oct 2026): a lime tile with an ink mark in dark mode, an ink tile with a lime mark in light mode. */
.logo-tile { fill: #ECFE72; }
.logo-mark { fill: #141414; stroke: #141414; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .logo-tile { fill: #141414; } :root:not([data-theme="dark"]) .logo-mark { fill: #ECFE72; stroke: #ECFE72; } }
:root[data-theme="light"] .logo-tile { fill: #141414; }
:root[data-theme="light"] .logo-mark { fill: #ECFE72; stroke: #ECFE72; }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; }
.foot-brand svg { width: 24px; height: 24px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { text-decoration: none; font-size: 0.94rem; color: var(--muted); transition: color 160ms ease; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { min-height: 40px; padding: 0 18px; font-size: 0.9rem; }
.nav .nav-call { margin-left: 4px; }
@media (max-width: 1020px) { .nav-links li:not(.ind) { display: none; } }
@media (max-width: 560px) { .nav .wrap { gap: 12px; } .nav .nav-call { display: none; } .brand { font-size: 1.12rem; gap: 8px; } .nav .btn-primary { padding: 0 14px; } }

/* « By industry » menu. It opens on hover with a mouse and on a tap or a key elsewhere. */
.ind { position: relative; }
.ind-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.94rem; color: var(--muted); transition: color 160ms ease; }
.ind-btn:hover, .ind.open .ind-btn, .ind:has([aria-current]) .ind-btn { color: var(--ink); }
.ind-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.ind-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
.ind.open .ind-btn svg { transform: rotate(180deg); }
.ind-pop { position: absolute; top: calc(100% + 14px); left: -18px; width: 360px; padding: 8px; display: grid; gap: 2px; background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 18px 50px -18px rgb(0 0 0 / .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms; }
.ind-pop::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.ind.open .ind-pop { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 180ms ease; }
@media (hover: hover) { .ind:hover .ind-pop { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 180ms ease; } .ind:hover .ind-btn { color: var(--ink); } }
.ind-pop a { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.ind-pop a:hover, .ind-pop a:focus-visible, .ind-pop a[aria-current] { background: var(--stage); }
.ind-pop img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: var(--stage); padding: 4px; box-sizing: border-box; }
.ind-pop a:hover img, .ind-pop a[aria-current] img { background: var(--paper); }
.ind-pop b { display: block; font: 600 0.98rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.ind-pop small { display: block; font-size: 0.84rem; color: var(--muted); margin-top: 2px; }
.ind-pop .all { grid-template-columns: 1fr auto; margin-top: 4px; border-top: 1px solid var(--hair); border-radius: 0 0 12px 12px; padding: 12px 8px 8px; font-size: 0.88rem; color: var(--muted); }
.ind-pop .all svg { width: 16px; height: 16px; }
.ind-pop .all:hover { color: var(--ink); }
@media (max-width: 1020px) { .nav-links { margin-left: auto; } .ind-pop { left: auto; right: -120px; } }
.ind-btn, .nav .btn { white-space: nowrap; }
@media (max-width: 400px) { .nav .wrap { gap: 10px; } .brand { font-size: 1.02rem; } .nav .btn-primary { padding: 0 12px; } }
.nav .short { display: none; }
@media (max-width: 560px) { .nav .long { display: none; } .nav .short { display: inline; } .ind-btn { font-size: 0.88rem; } .ind-pop { position: fixed; top: calc(68px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; width: auto; } .ind-pop::before { display: none; } }

/* Hero */
.hero { padding-block: clamp(20px, 3vw, 44px) clamp(40px, 5vw, 80px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; padding-top: 8px; }
.hero-title { font-size: clamp(2.7rem, 0.9rem + 5.2vw, 6.1rem); line-height: 0.93; letter-spacing: -0.045em; font-weight: 500; }
.hero-title .line { display: block; }
.tape { position: relative; display: inline-block; margin-top: 0.12em; padding: 0.1em 0.28em 0.2em; background: var(--tape); color: var(--tape-ink); text-decoration: none; border-radius: 3px; transform: rotate(-1.6deg); transform-origin: 0 60%; transition: transform 240ms cubic-bezier(.2,.7,.2,1); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 24px -14px rgba(0,0,0,.45); cursor: pointer; }
.tape::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.2em; border-radius: 3px 3px 0 0; background:
  repeating-linear-gradient(90deg, rgba(19,19,18,.85) 0 1px, transparent 1px 0.1em) top left / 100% 45% no-repeat,
  repeating-linear-gradient(90deg, rgba(19,19,18,.9) 0 1.5px, transparent 1.5px 0.5em) top left / 100% 100% no-repeat; opacity: .8; }
.tape .ar { display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.12em; vertical-align: 0.42em; }
.tape:hover, .tape:focus-visible { transform: rotate(0deg) translateY(-2px); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hero-actions .see { color: var(--ink); font-weight: 600; font-stretch: 108%; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; }
.hero-actions .see svg { width: 18px; height: 18px; }
.hero-actions .see span { border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: border-color 160ms ease; }
.hero-actions .see:hover span { border-color: var(--ink); }
/* « See it in your room » sits under the hero phone (the user, 24 Oct 2026, thread 20ac9be3), at the foot of the stage just
   above « Drag to turn it » (the user, 25 Oct 2026, thread 35696e04). The phone's width is repeated so the link stays under it.
   It sits above the 3D canvas (z-index 4), or the canvas takes its clicks (thread d7724e3f). */
.stage-see { --pw: clamp(80px, 17.5cqw, 130px); position: absolute; z-index: 5; bottom: 0; right: max(0px, calc(1.5% + var(--pw) / 2 - 82px));
  color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; white-space: nowrap; }
.stage-see svg { width: 17px; height: 17px; flex: none; }
.stage-see span { border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: border-color 160ms ease; }
.stage-see:hover span { border-color: var(--ink); }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 0.92rem; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks svg { width: 16px; height: 16px; flex: none; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticks b { color: var(--ink); font-weight: 600; }

.stage-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.stage { position: relative; aspect-ratio: 1 / 0.86; width: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage.dragging { cursor: grabbing; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 400ms ease; pointer-events: none; }
.photo-card { position: absolute; left: 50%; top: 48%; width: 64%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background: var(--raised); border-radius: 18px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 60px -30px rgba(0,0,0,.35); transition: transform 1100ms cubic-bezier(.2,.7,.1,1), opacity 900ms ease 150ms, border-radius 900ms ease; pointer-events: none; }
.photo-card .dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 7px; }
.photo-card .dots i { width: 6px; height: 6px; border-radius: 50%; background: #CFCFC9; }
.photo-card .dots i:first-child { background: #131312; }
.photo-card .tag { position: absolute; left: 18px; top: 16px; color: #6A6A64; }
.stage.alive .photo-card { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-radius: 40px; }
.dims { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dims line { stroke: var(--ink); stroke-width: 1; opacity: .55; }
.dims .lbl rect { fill: var(--paper); }
.dims .lbl text { fill: var(--ink); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.02em; }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.picker { display: flex; gap: 8px; flex-wrap: wrap; }
.picker button { display: inline-flex; align-items: center; gap: 8px; font: 500 0.86rem/1 var(--f-body); font-stretch: 108%; color: var(--muted); background: transparent; border: 1px solid var(--hair); border-radius: 999px; min-height: 42px; padding: 0 14px 0 5px; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.picker button img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; background: var(--raised); padding: 3px; }
.picker button:hover { color: var(--ink); border-color: var(--ink); }
.picker button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage-note { color: var(--muted); }
.stage-note b { color: var(--ink); font-weight: 500; }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 22px; }
  .hero-copy { display: contents; }
  .hero-title { order: 1; }
  .stage-col { order: 2; }
  .hero-actions { order: 3; }
  .hero .lede { order: 4; }
  .ticks { order: 5; }
  .stage { aspect-ratio: 1 / 0.8; }
}
@media (max-width: 600px) { .picker button { padding: 0 10px 0 4px; font-size: 0.8rem; } .picker button img { width: 28px; height: 28px; } }

/* Platform strip under the hero */
.strip { border-block: 1px solid var(--hair); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-block: 22px; }
.strip p { color: var(--muted); font-size: 0.92rem; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 30px; font-family: var(--f-display); font-stretch: 115%; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.03em; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }

/* Section scaffolding */
.sec { padding-block: clamp(72px, 9vw, 136px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head p { color: var(--muted); max-width: 32em; }
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head.center p { max-width: 38em; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* Shopper journey: a phone that plays what a shopper does, from the product page to their room. */
.journey { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.journey-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: js; }
.journey-steps li { position: relative; padding: 20px 0 20px 64px; border-top: 1px solid var(--hair); opacity: .38; transition: opacity 400ms ease; counter-increment: js; }
.journey-steps li:last-child { border-bottom: 1px solid var(--hair); }
.journey-steps li::before { content: counter(js); position: absolute; left: 0; top: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.8rem; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.journey-steps li.on { opacity: 1; }
.journey-steps li.on::before { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); }
.journey-steps li .bar { position: absolute; left: 64px; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.journey-steps h3 { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.03em; }
.journey-steps p { color: var(--muted); margin-top: 8px; max-width: 30em; }
.journey-copy { display: grid; gap: 28px; min-width: 0; }
.journey-stage { position: relative; display: grid; place-items: center; background: radial-gradient(80% 70% at 50% 45%, var(--stage), transparent 70%); padding-block: 12px; }
.journey-ctrl { position: absolute; right: 0; bottom: 0; }
.journey-ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.journey-ctrl svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; } .journey-stage { order: -1; } }

/* Phone frame */
.phone { container-type: inline-size; position: relative; height: min(78vh, 680px); aspect-ratio: 9 / 19.5; border-radius: 46px; padding: 10px; background: #0B0B0B; box-shadow: 0 0 0 1.5px #3A3A37 inset, 0 50px 90px -40px rgba(0,0,0,.55); }
@media (max-width: 900px) { .phone { height: min(70vh, 600px); } }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: #F7F6F3; }
.phone .island { position: absolute; top: 3.4cqw; left: 50%; width: 30%; height: 8.6cqw; transform: translateX(-50%); background: #000; border-radius: 20px; z-index: 6; }
.phone .home { position: absolute; bottom: 2.4cqw; left: 50%; width: 36%; height: 4px; transform: translateX(-50%); background: rgba(0,0,0,.35); border-radius: 4px; z-index: 6; transition: background-color 300ms ease; }
.phone.in-ar .home { background: rgba(255,255,255,.85); }
/* The product page inside the phone: a store that is not ours, written as « yourstore.com ». */
.pp { position: absolute; inset: 0; color: #1B1A18; font-family: Georgia, "Times New Roman", serif; transition: opacity 400ms ease; }
.pp .safari { position: absolute; left: 0; right: 0; top: 0; height: 24cqw; background: #F7F6F3; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3cqw; }
.pp .safari span { font: 500 3.5cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #333; background: #E9E7E2; border-radius: 3cqw; padding: 2.2cqw 9cqw; }
.pp .scroller { position: absolute; left: 0; right: 0; top: 24cqw; transition: transform 1200ms cubic-bezier(.45,.05,.25,1); }
.pp .head { display: flex; align-items: center; justify-content: space-between; padding: 3cqw 5cqw 4cqw; font: 600 4cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.18em; }
.pp .head svg { width: 5.4cqw; height: 5.4cqw; stroke: #1B1A18; fill: none; stroke-width: 1.6; }
.pp .photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pp .dots { display: flex; justify-content: center; gap: 1.6cqw; padding: 3cqw 0; }
.pp .dots i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #CFCBC4; }
.pp .dots i:first-child { background: #1B1A18; }
.pp .info { padding: 0 5cqw; display: grid; gap: 2cqw; }
.pp h4 { margin: 0; font: 400 6.2cqw/1.1 Georgia, serif; letter-spacing: -0.01em; }
.pp .price { font: 500 4.4cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.pp .meta { font: 400 3.2cqw/1.3 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #6B6862; }
.pp .view { margin-top: 3cqw; display: flex; align-items: center; justify-content: center; gap: 2cqw; height: 12cqw; border: 1px solid #1B1A18; font: 600 3.5cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; position: relative; overflow: hidden; }
.pp .view svg { width: 4.4cqw; height: 4.4cqw; stroke: #1B1A18; fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.pp .view.pressed { background: #EDEAE4; }
.pp .cart { display: grid; place-items: center; height: 12cqw; background: #1B1A18; color: #fff; font: 600 3.5cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.finger { position: absolute; z-index: 7; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; background: rgba(255,255,255,.55); border: 1.5px solid rgba(0,0,0,.18); box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transition: left 900ms cubic-bezier(.45,.05,.25,1), top 900ms cubic-bezier(.45,.05,.25,1), opacity 300ms ease, transform 160ms ease; pointer-events: none; }
.finger.down { transform: scale(.82); }
/* The AR view inside the phone */
.ar-view { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; background: #2A2724; }
.ar-view.on { opacity: 1; }
.ar-view .cam { position: absolute; inset: 0; transform-origin: 50% 70%; transition: transform 6000ms cubic-bezier(.3,.1,.2,1); }
.ar-view .cam.push { transform: scale(1.09); }
.ar-view .cam > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-view .ui-top { position: absolute; top: 15cqw; left: 4.5cqw; right: 4.5cqw; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.ar-view .round { width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(40,40,40,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; }
.ar-view .round svg { width: 4.6cqw; height: 4.6cqw; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.ar-view .seg { display: flex; background: rgba(40,40,40,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 1cqw; font: 600 3.6cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #fff; }
.ar-view .seg span { padding: 2.3cqw 3.9cqw; border-radius: 999px; }
.ar-view .seg span.on { background: rgba(255,255,255,.92); color: #111; }
.ar-view .hint { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 3; color: #fff; font: 600 3.6cqw/1.2 -apple-system, "Helvetica Neue", Arial, sans-serif; text-align: center; background: rgba(20,20,20,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 2.6cqw 4.4cqw; white-space: nowrap; transition: opacity 400ms ease; }
.ar-view .reticle { position: absolute; left: 50%; top: 70%; width: 34cqw; height: 12cqw; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; z-index: 2; transition: opacity 400ms ease; animation: ret 1.4s ease-in-out infinite; }
@keyframes ret { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.ar-view .size { position: absolute; left: 50%; bottom: 12cqw; transform: translateX(-50%); z-index: 3; background: rgba(20,20,20,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border-radius: 999px; padding: 2.6cqw 4.4cqw; font-family: var(--f-mono); font-size: 3.1cqw; white-space: nowrap; transition: opacity 400ms ease; }
.off { opacity: 0 !important; }

/* How it works: three steps, two of them ours */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.s3 { background: var(--stage); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.s3 .vis { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; padding: 24px; }
.s3 .body { padding: 6px 28px 30px; display: grid; gap: 10px; }
.s3 .n { font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); }
.s3 h3 { font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.035em; }
.s3 p { color: var(--muted); }
.who-tag { display: inline-block; font-family: var(--f-mono); font-size: 0.7rem; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hair); color: var(--muted); justify-self: start; }
.who-tag.us { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); }
/* Step 1 visual: a pasted link and three photos */
.paste { width: 100%; max-width: 330px; display: grid; gap: 12px; }
/* The step 1 card fits its column at every width (M8, 23 Oct 2026): the grid track may shrink and the link text gives way first. */
.s3 .vis { grid-template-columns: minmax(0, 1fr); }
.paste, .paste .field, .paste .field span { min-width: 0; }
.paste .field { display: flex; align-items: center; gap: 10px; background: var(--raised); color: #131312; border-radius: 14px; padding: 12px 12px 12px 16px; box-shadow: 0 18px 40px -26px rgba(0,0,0,.4); font-size: 0.84rem; }
.paste .field span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #45453F; }
.paste .field .caret { display: inline-block; width: 1px; height: 1em; background: #131312; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.paste .field b { background: #131312; color: #fff; font-weight: 600; font-size: 0.78rem; border-radius: 999px; padding: 8px 12px; }
.paste .thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.paste .thumbs i { aspect-ratio: 1; border-radius: 12px; background: var(--raised) center / cover no-repeat; box-shadow: 0 10px 24px -18px rgba(0,0,0,.4); }
.paste .dimrow { display: flex; gap: 6px; justify-content: center; }
.paste .dimrow span { font-family: var(--f-mono); font-size: 0.72rem; background: var(--paper); border: 1px solid var(--hair); border-radius: 999px; padding: 6px 10px; }
/* Step 2 visual: the work we do, struck through one by one, then stamped */
.struck { width: 100%; max-width: 320px; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; position: relative; }
.struck li { position: relative; font-size: 0.9rem; color: var(--ink); padding-left: 22px; width: fit-content; }
.struck li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); transition: background-color 300ms ease, border-color 300ms ease; }
.struck li::after { content: ""; position: absolute; left: 20px; right: -4px; top: 55%; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 380ms cubic-bezier(.6,0,.2,1); }
.struck li.x { color: var(--muted); }
.struck li.x::before { background: var(--ink); border-color: var(--ink); }
.struck li.x::after { transform: scaleX(1); }
.stamp { position: absolute; right: -6px; bottom: -8px; transform: rotate(-8deg) scale(1.4); opacity: 0; background: var(--tape); color: var(--tape-ink); font: 700 1.05rem/1 var(--f-display); font-stretch: 118%; letter-spacing: -0.02em; padding: 10px 14px; border-radius: 6px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); transition: transform 360ms cubic-bezier(.2,1.4,.4,1), opacity 200ms ease; }
.stamp.on { opacity: 1; transform: rotate(-8deg) scale(1); }
/* Step 3 visual: a store admin's product media, with the model live */
.admin { width: 100%; max-width: 340px; background: var(--raised); color: #1D1D1B; border-radius: 16px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.45); overflow: hidden; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.admin .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #F1F1EF; border-bottom: 1px solid #E3E3DF; font-size: 0.72rem; color: #6A6A64; }
.admin .bar i { width: 8px; height: 8px; border-radius: 50%; background: #D5D5D0; }
.admin .bar span { margin-left: 8px; }
.admin .in { padding: 14px; display: grid; gap: 10px; }
.admin .lbl { font-size: 0.8rem; font-weight: 600; }
.admin .media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.admin .media i { aspect-ratio: 1; border-radius: 8px; background: #F4F3F0 center / 80% no-repeat; border: 1px solid #E6E5E1; position: relative; }
.admin .media i.m3d { border-color: #131312; background-color: #FFF8D6; }
.admin .media i.m3d::after { content: "3D"; position: absolute; right: 4px; bottom: 4px; font: 700 0.6rem/1 -apple-system, sans-serif; background: #131312; color: #fff; border-radius: 4px; padding: 2px 4px; }
.admin .live { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.78rem; border-top: 1px solid #ECECE8; padding-top: 10px; }
.admin .live b { display: inline-flex; align-items: center; gap: 6px; color: #1E7A4C; font-weight: 600; }
.admin .live b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1E7A4C; box-shadow: 0 0 0 3px rgba(30,122,76,.18); }
.admin .approve { background: #131312; color: #fff; border-radius: 8px; padding: 7px 10px; font-weight: 600; font-size: 0.74rem; }
.steps-foot { margin-top: clamp(22px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; border-top: 1px solid var(--hair); padding-top: 22px; }
.steps-foot p { color: var(--muted); }
.steps-foot p b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .steps3 { grid-template-columns: 1fr; } .s3 .vis { aspect-ratio: auto; min-height: 240px; } }

/* Try it band */
.band { background: var(--band); color: var(--band-fg); }
.band .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(72px, 9vw, 128px); }
.band h2 { color: var(--band-fg); }
.band p { color: var(--band-muted); max-width: 32em; }
.band .copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.band .picker button { color: var(--band-muted); border-color: var(--band-hair); }
.band .picker button:hover { color: var(--band-fg); border-color: var(--band-fg); }
.band .picker button[aria-selected="true"] { background: var(--tape); color: var(--tape-ink); border-color: var(--tape); }
.qr-card { justify-self: end; width: min(100%, 400px); background: #fff; color: #131312; border-radius: 26px; padding: 24px; display: grid; gap: 16px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); position: relative; }
.qr-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qr-card .top b { font: 600 1.05rem/1.2 var(--f-display); font-stretch: 112%; letter-spacing: -0.02em; }
.qr-card .top img { width: 64px; height: 52px; object-fit: contain; }
.qr-card .qr { aspect-ratio: 1; width: 100%; position: relative; }
.qr-card .qr svg { width: 100%; height: 100%; display: block; }
.qr-card .qr::after { content: ""; position: absolute; left: 4%; right: 4%; height: 2px; top: 6%; background: var(--tape); box-shadow: 0 0 12px 2px rgba(236,254,114,.7); animation: scanqr 2.6s ease-in-out infinite; }
@keyframes scanqr { 50% { top: 92%; } }
.qr-card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid #E2E2DC; padding-top: 14px; }
.qr-card .meta span { color: #5B5B56; }
.ar-open { display: none; }
@media (max-width: 860px) { .band .wrap { grid-template-columns: 1fr; } .qr-card { justify-self: start; } }
.is-phone .qr-card { display: none; }
.is-phone .ar-open { display: inline-flex; }

/* The usual way, and ours */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.vs { border-radius: var(--r); padding: clamp(24px, 3vw, 40px); display: grid; align-content: start; gap: 18px; min-width: 0; }
.vs.old { background: var(--stage); color: var(--muted); }
.vs.new { background: var(--raised); color: #131312; border: 1px solid var(--hair); position: relative; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
:root[data-theme="dark"] .vs.new, .vs.new { --muted: #5B5B56; }
.vs.new .flag { position: absolute; top: -14px; right: 24px; background: var(--tape); color: var(--tape-ink); font: 700 0.72rem/1 var(--f-mono); padding: 8px 12px; border-radius: 999px; }
.vs .k { font-family: var(--f-mono); font-size: 0.72rem; }
.vs h3 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem); font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.035em; }
.vs.old h3 { color: var(--muted); }
.vs ul { list-style: none; padding: 0; margin: 0; display: grid; }
.vs li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--hair); }
.vs.new li { border-top-color: #E6E6E0; }
.vs li svg { width: 20px; height: 20px; margin-top: 2px; }
.vs.old li svg { stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.vs.new li svg circle { fill: #131312; }
.vs.new li svg use { stroke: #ECFE72; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs li b { display: block; font-weight: 600; color: inherit; }
.vs.new li b { color: #131312; }
.vs li span { font-size: 0.92rem; }
@media (max-width: 860px) { .versus { grid-template-columns: 1fr; } }

/* Made for what you sell: one tinted card per trade, a live model in a white card */
.trades { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.trade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 48px); align-items: stretch; border-radius: 28px; padding: clamp(16px, 2vw, 22px); overflow: hidden; min-height: 460px; }
.trade:nth-child(even) .tcopy { order: 2; }
.tr-sofa { background: var(--t-sofa); } .tr-lamp { background: var(--t-lamp); } .tr-oak { background: var(--t-oak); } .tr-art { background: var(--t-art); }
.tcopy { position: relative; padding: clamp(18px, 3vw, 44px); display: flex; flex-direction: column; gap: 16px; min-width: 0; z-index: 1; }
.tcopy h3 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; }
.tcopy p { color: var(--muted); max-width: 30em; }
.tcopy ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.tcopy li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 0.97rem; }
.tcopy li::before { content: ""; width: 12px; height: 1px; background: var(--ink); margin-top: 0.8em; }
.tcopy .foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.tcopy .spec { color: var(--muted); }
.viewer { position: relative; background: var(--raised); border-radius: 20px; overflow: hidden; min-height: 380px; cursor: pointer; }
.viewer > img.cut { position: absolute; left: 50%; top: 52%; width: 82%; height: 74%; object-fit: contain; transform: translate(-50%, -50%); transition: opacity 500ms ease, transform 700ms cubic-bezier(.2,.7,.1,1); }
.viewer:hover > img.cut { transform: translate(-50%, -51.5%) scale(1.02); }
.viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; touch-action: pan-y; }
.viewer.live canvas { opacity: 1; }
.viewer.live > img.cut { opacity: 0; }
.viewer .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; border: 0; background: rgba(19,19,18,.86); color: #fff; display: grid; place-items: center; font: 700 1.2rem/1 var(--f-display); font-stretch: 118%; letter-spacing: -0.02em; cursor: pointer; box-shadow: 0 0 0 8px rgba(255,255,255,.55), 0 20px 40px -18px rgba(0,0,0,.6); transition: transform 200ms ease, opacity 300ms ease; }
.viewer .play span { display: inline-flex; align-items: center; gap: 4px; }
.viewer .play span::after { content: ""; border-left: 11px solid #ECFE72; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
.viewer:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.viewer.live .play, .viewer.loading .play { opacity: 0; pointer-events: none; }
.viewer .vnote { position: absolute; left: 14px; bottom: 12px; color: #6A6A64; pointer-events: none; font: 500 0.8rem/1 var(--f-body); }
.viewer .vdims { position: absolute; right: 14px; top: 12px; color: #131312; background: #F3F3F0; border-radius: 999px; padding: 6px 10px; }
.viewer.loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 2px solid #DDD; border-top-color: #131312; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .trade { grid-template-columns: 1fr; min-height: 0; } .trade:nth-child(even) .tcopy { order: 0; } .viewer { width: 100%; min-height: 0; aspect-ratio: 1 / 0.9; } }
/* Wall demo (art) */
.wallbox { position: relative; border-radius: 20px; overflow: hidden; min-height: 380px; background: #ddd; }
.wall { position: absolute; inset: 0; }
.wall > img { width: 100%; height: 100%; object-fit: cover; }
.art { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0.6em 1.4em -0.5em rgba(40,30,20,.45), 0 0.15em 0.3em rgba(40,30,20,.18); transition: width 500ms cubic-bezier(.2,.7,.1,1), height 500ms cubic-bezier(.2,.7,.1,1); }
/* The frame is real wood grain (v1.38, the user: « why is the frame so unrealistic looking? It has no texture »): Poly Haven's Oak Veneer 01 (CC0), grain along each side, mitred corners, light from above, and a shadow where the frame meets the art. */
.art { --gh: url(/assets/black-h.jpg); --gv: url(/assets/black-v.jpg); }
.art[data-frame="oak"] { --gh: url(/assets/oak-h.jpg); --gv: url(/assets/oak-v.jpg); }
.art .frame { position: absolute; inset: 0; padding: var(--fw, 2.2%); background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.26)), var(--gh) center / 200px auto, #1d1b19; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.art .frame::before, .art .frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--fw, 2.2%); background: var(--gv) center / auto 200px; }
.art .frame::before { left: 0; clip-path: polygon(0 0, 100% var(--fw), 100% calc(100% - var(--fw)), 0 100%); background-image: linear-gradient(to right, rgba(255,255,255,.1), rgba(0,0,0,.06)), var(--gv); }
.art .frame::after { right: 0; clip-path: polygon(0 var(--fw), 100% 0, 100% 100%, 0 calc(100% - var(--fw))); background-image: linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,.24)), var(--gv); }
.art .mat { position: relative; width: 100%; height: 100%; background: #FBFAF6; padding: var(--mw, 0); }
.art .mat::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 3px 5px -2px rgba(0,0,0,.45), inset 0 -1px 2px rgba(255,255,255,.12), inset 2px 0 3px -2px rgba(0,0,0,.3), inset -2px 0 3px -2px rgba(0,0,0,.2); }
.art .mat img { width: 100%; height: 100%; object-fit: cover; }
.wall-controls { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.wall-controls .group { display: flex; gap: 4px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 4px; }
.wall-controls button, .wall-controls label { font: 500 0.78rem/1 var(--f-body); color: #3A3A36; background: transparent; border: 0; border-radius: 999px; min-height: 34px; padding: 0 11px; cursor: pointer; display: inline-flex; align-items: center; }
.wall-controls button[aria-pressed="true"] { background: #131312; color: #fff; }
.wall-controls input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wall-size { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #131312; border-radius: 999px; padding: 7px 12px; }
@media (max-width: 860px) { .wallbox { aspect-ratio: 4 / 3.4; min-height: 0; } }

/* What it does for your shop: a grid of six */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.bx { background: var(--stage); border-radius: var(--r); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden; position: relative; }
.bx h3 { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); font-stretch: 116%; font-weight: 600; letter-spacing: -0.03em; }
.bx p { color: var(--muted); font-size: 0.97rem; max-width: 32em; }
.bx .art-vis { margin-top: auto; padding-top: 18px; }
.b-wide { grid-column: span 3; } .b-third { grid-column: span 2; }
@media (max-width: 1000px) { .bento { grid-template-columns: 1fr 1fr; } .b-wide, .b-third { grid-column: span 1; } .b-full-m { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .b-full-m { grid-column: span 1; } }
/* bento visuals */
.qa-vis { position: relative; height: 200px; }
.qa-vis img { position: absolute; left: 50%; bottom: 8px; height: 170px; transform: translateX(-50%); }
.qa-vis .bubble { position: absolute; font-size: 0.8rem; background: var(--raised); color: #131312; border-radius: 14px 14px 14px 4px; padding: 8px 11px; box-shadow: 0 10px 24px -16px rgba(0,0,0,.45); white-space: nowrap; }
.qa-vis .bubble s { color: #8A8A84; }
.qa-vis .bubble.a { left: 0; top: 10px; } .qa-vis .bubble.b { right: 0; top: 52px; border-radius: 14px 14px 4px 14px; } .qa-vis .bubble.c { left: 6%; bottom: 20px; }
.themes { display: grid; gap: 10px; }
.themes .tb { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-weight: 600; font-size: 0.86rem; transition: all 500ms ease; }
.themes .tb svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linejoin: round; }
.themes .t1 { background: #fff; color: #1B1A18; border: 1px solid #1B1A18; border-radius: 0; font-family: Georgia, serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; }
.themes .t2 { background: #2F4A3A; color: #F4EFE6; border-radius: 999px; }
.themes .t3 { background: #F2E3D5; color: #7A3E1D; border-radius: 10px; font-family: "Trebuchet MS", sans-serif; }
.catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.catalog i { aspect-ratio: 1; border-radius: 10px; background: var(--raised) center / 78% no-repeat; position: relative; opacity: .45; transition: opacity 400ms ease; }
.catalog i.ok { opacity: 1; }
.catalog i.ok::after { content: ""; position: absolute; right: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #131312 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4' stroke='%23FFD100' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.catalog-bar { margin-top: 12px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.catalog-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 400ms ease; }
.catalog-cap { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); }
.views-vis { margin-top: auto; padding-top: 14px; font-family: var(--f-display); font-stretch: var(--wide); font-weight: 400; letter-spacing: -0.05em; line-height: 0.9; font-size: clamp(3.2rem, 2rem + 3vw, 5rem); }
.views-vis small { display: block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0; color: var(--muted); margin-top: 10px; font-weight: 400; }
/* Four avatars wave hello above their own bubble (the user, 23 Oct 2026: « i want cute and welcoming avatar saying hi on top of their individual bubble »). */
.langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; padding-top: 28px !important; }
.langs .hi { display: grid; justify-items: center; gap: 10px; }
.langs .av-wrap { position: relative; width: clamp(58px, 6.4vw, 92px); aspect-ratio: 1; }
.langs .av { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 10px 22px -14px rgba(0,0,0,.5); transform-origin: 50% 90%; animation: hi 3.2s ease-in-out infinite; }
.langs .hi:nth-child(2) .av { animation-delay: .4s; } .langs .hi:nth-child(3) .av { animation-delay: .8s; } .langs .hi:nth-child(4) .av { animation-delay: 1.2s; }
/* v1.36: drawn in DiceBear's « Notionists » style by Zoish (CC0 1.0, dicebear.com/licenses, seen 23 Oct 2026). Each one waves in the drawing and gives a small hello nod. */
@keyframes hi { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-4px) rotate(-4deg); } 26% { transform: translateY(0) rotate(3deg); } 38% { transform: translateY(-2px) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .langs .av { animation: none; } }
.langs .bub { position: relative; background: var(--raised); color: #131312; border-radius: 14px; padding: 8px 14px; font-weight: 600; font-size: 0.92rem; white-space: nowrap; box-shadow: 0 10px 22px -18px rgba(0,0,0,.45); }
.langs .bub::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.files { display: flex; gap: 10px; flex-wrap: wrap; }
.files span { display: inline-flex; align-items: center; gap: 10px; background: var(--raised); color: #131312; border-radius: 12px; padding: 10px 14px 10px 10px; font-size: 0.86rem; box-shadow: 0 10px 22px -18px rgba(0,0,0,.45); }
.files span i { width: 34px; height: 40px; border-radius: 4px 10px 4px 4px; background: #131312; color: #ECFE72; font: 700 0.6rem/40px var(--f-mono); font-style: normal; text-align: center; }
.serp { background: var(--raised); color: #131312; border-radius: 14px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 16px 34px -24px rgba(0,0,0,.45); font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.serp .q { display: flex; align-items: center; gap: 8px; border: 1px solid #E3E3DF; border-radius: 999px; padding: 8px 12px; font-size: 0.8rem; color: #45453F; }
.serp .row { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; }
.serp .row i { aspect-ratio: 1; border-radius: 8px; background: #F4F3F0 center / 84% no-repeat; position: relative; }
.serp .row i.m::after { content: "3D"; position: absolute; left: 4px; bottom: 4px; font: 700 0.55rem/1 -apple-system, sans-serif; background: #131312; color: #fff; border-radius: 3px; padding: 2px 3px; }
.serp .row b { font-size: 0.82rem; color: #1A47B8; font-weight: 500; display: block; }
.serp .row span { font-size: 0.72rem; color: #6A6A64; }

/* Quality */
.checks { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.checks-intro { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.checks-intro .big { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 300; font-size: clamp(6rem, 3rem + 9vw, 12rem); line-height: 0.8; letter-spacing: -0.07em; }
.checks-intro p { color: var(--muted); max-width: 30em; }
.checks-intro h2 { font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem); }
.speclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); counter-reset: ck; }
.speclist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 20px; padding: 18px 0; border-bottom: 1px solid var(--hair); align-items: baseline; counter-increment: ck; }
.speclist li::before { content: counter(ck, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); }
.speclist b { font-weight: 600; font-stretch: 108%; letter-spacing: -0.01em; }
.speclist span { color: var(--muted); font-size: 0.94rem; }
.speclist li.more { display: none; }
.speclist.all li.more { display: grid; }
.spec-toggle { margin-top: 18px; }
@media (max-width: 860px) { .checks { grid-template-columns: 1fr; } .checks-intro { position: static; } .speclist li { grid-template-columns: 36px minmax(0, 1fr); } .speclist span { grid-column: 2; } }

/* Proof */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.fig { padding: 28px 28px 30px 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fig + .fig { padding-left: 28px; border-left: 1px solid var(--hair); }
.fig .num { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 300; font-size: clamp(3.4rem, 2rem + 4vw, 6.2rem); letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.fig .num span { font-size: 0.5em; letter-spacing: -0.02em; margin-left: 0.05em; }
.fig p { color: var(--ink); max-width: 24em; }
.fig .src { color: var(--muted); margin-top: auto; }
.fig .src a, .statement .src a { text-decoration-color: var(--hair); text-underline-offset: 3px; }
.statement { margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px 48px; align-items: end; }
.statement blockquote { margin: 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem); line-height: 1.15; letter-spacing: -0.025em; }
.statement .src { color: var(--muted); }
@media (max-width: 860px) { .figs { grid-template-columns: 1fr; } .fig + .fig { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); } .statement { grid-template-columns: 1fr; } }

/* Return calculator */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.calc-in { background: var(--stage); border-radius: var(--r); padding: clamp(22px, 3vw, 38px); display: grid; gap: 22px; min-width: 0; }
.slider { display: grid; gap: 8px; }
.slider .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slider label { font-weight: 600; font-stretch: 106%; }
.slider output { font-family: var(--f-mono); font-size: 0.86rem; background: var(--paper); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.slider .hint { color: var(--muted); font-size: 0.84rem; }
.slider .hint a { text-underline-offset: 3px; text-decoration-color: var(--hair); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--hair) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--hair) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--thumb); border: 2px solid var(--ink); margin-top: -10px; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--thumb); border: 2px solid var(--ink); }
.calc-out { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.calc-out .k { font-family: var(--f-mono); font-size: 0.75rem; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.calc-out .big { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 400; font-size: clamp(3rem, 2rem + 3.4vw, 5.4rem); letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.calc-out .big small { font-size: 0.32em; letter-spacing: -0.01em; margin-left: 6px; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.calc-out dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, var(--ink)); }
.calc-out dt, .calc-out dd { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, var(--ink)); margin: 0; }
.calc-out dt { color: color-mix(in srgb, var(--paper) 70%, var(--ink)); font-size: 0.94rem; }
.calc-out dd { font-family: var(--f-mono); font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.calc-out .btn { align-self: flex-start; margin-top: auto; }
.calc-out .fine { font-size: 0.8rem; color: color-mix(in srgb, var(--paper) 58%, var(--ink)); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.plan { border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 20px; min-width: 0; background: var(--paper); position: relative; }
.plan.lead { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan.lead .muted, .plan.lead li { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.plan .pop { position: absolute; top: -13px; left: 24px; background: var(--tape); color: var(--tape-ink); font: 700 0.7rem/1 var(--f-mono); padding: 7px 11px; border-radius: 999px; }
.plan .who { display: grid; gap: 6px; }
.plan .muted { color: var(--muted); font-size: 0.94rem; }
.plan .amount { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 400; font-size: clamp(3.4rem, 2.4rem + 2.6vw, 5rem); letter-spacing: -0.065em; line-height: 0.85; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.plan .amount small { font-family: var(--f-body); font-stretch: 100%; font-size: 0.95rem; font-weight: 400; letter-spacing: 0; opacity: .7; }
.plan .yearly { font-family: var(--f-mono); font-size: 0.72rem; opacity: .7; min-height: 1.2em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; border-top: 1px solid var(--hair); padding-top: 20px; font-size: 0.95rem; }
.plan.lead ul { border-top-color: color-mix(in srgb, var(--paper) 18%, var(--ink)); }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.plan li svg { width: 16px; height: 16px; margin-top: 4px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan .btn { align-self: stretch; justify-content: center; margin-top: auto; }
.plan.lead .btn-primary { background: var(--cta); color: var(--cta-ink); }
.billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--hair); }
.billing button { border: 0; background: transparent; color: var(--muted); font: 600 0.86rem/1 var(--f-body); border-radius: 999px; min-height: 38px; padding: 0 16px; cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.billing em { font-style: normal; font-family: var(--f-mono); font-size: 0.7rem; color: var(--good); margin-left: 6px; }
.billing button[aria-pressed="true"] em { color: var(--tape); }
.price-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.extras { margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.extra { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.extra .p { font-family: var(--f-display); font-stretch: var(--wide); font-size: 1.6rem; letter-spacing: -0.04em; font-weight: 500; }
.extra .p small { font-family: var(--f-body); font-stretch: 100%; font-size: 0.85rem; color: var(--muted); letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.extra p { color: var(--muted); font-size: 0.94rem; }
.call { margin-top: clamp(28px, 3vw, 44px); background: var(--stage); border-radius: var(--r); padding: clamp(20px, 2.4vw, 30px); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.call .who { display: flex; align-items: center; gap: 16px; }
.call .cal { width: 52px; height: 56px; border-radius: 10px; background: var(--raised); color: #131312; display: grid; grid-template-rows: 16px 1fr; overflow: hidden; text-align: center; box-shadow: 0 10px 22px -16px rgba(0,0,0,.45); flex: none; }
.call .cal span { background: #131312; color: #ECFE72; font: 700 0.6rem/16px var(--f-mono); }
.call .cal b { font: 600 1.35rem/38px var(--f-display); }
.call p { color: var(--muted); max-width: 36em; }
.call p b { color: var(--ink); }
.plans-note { margin-top: 18px; color: var(--muted); }
.extras.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans-note { margin: clamp(16px, 2vw, 24px) auto 0; max-width: 46em; text-align: center; color: var(--muted); }
@media (max-width: 1200px) { .extras.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; } .extras, .extras.four { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); }
.faq-side { display: grid; gap: 18px; align-content: start; }
.faq-side p { color: var(--muted); }
.qa { border-top: 1px solid var(--hair); }
.qa details { border-bottom: 1px solid var(--hair); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-family: var(--f-display); font-stretch: 110%; font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat; transition: transform 240ms ease; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 0 24px; color: var(--muted); max-width: 40em; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* Final call */
.final { background: var(--stage); }
.final .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: clamp(72px, 9vw, 140px); }
.final h2 { font-size: clamp(2.6rem, 1rem + 4.6vw, 5.4rem); line-height: 0.94; letter-spacing: -0.045em; }
.final-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.final-copy p { color: var(--muted); max-width: 30em; }
.final-copy img { width: min(100%, 460px); margin-top: 8px; }
.intake { background: var(--paper); border-radius: var(--r); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 14px; min-width: 0; box-shadow: 0 30px 70px -44px rgba(0,0,0,.45); }
.intake h3 { font-size: 1.35rem; font-stretch: 116%; font-weight: 600; letter-spacing: -0.03em; }
.field { display: grid; gap: 6px; font-size: 0.86rem; color: var(--muted); }
.field input, .dims-in label { background: var(--raised); border: 1px solid var(--hair); border-radius: 12px; color: #131312; }
.field input { min-height: 54px; padding: 0 14px; font: 400 1rem var(--f-body); width: 100%; min-width: 0; }
.field input:focus, .dims-in label:focus-within { border-color: var(--ink); outline: none; }
.field.big input { min-height: 60px; font-size: 1.05rem; }
.more-toggle { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--ink); font: 500 0.92rem var(--f-body); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; cursor: pointer; }
.more-box { display: grid; gap: 12px; }
.more-box[hidden] { display: none; }
.drop { position: relative; display: grid; gap: 4px; justify-items: start; padding: 18px; border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 14px; cursor: pointer; }
.drop:hover { border-color: var(--ink); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.drop-t { font-weight: 600; }
.drop .mono { color: var(--muted); }
.thumbs-in { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.thumbs-in img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
.dims-in { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.dims-in legend { font-size: 0.86rem; color: var(--muted); padding: 0; margin-bottom: 8px; }
.dims-in label { display: flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 50px; min-width: 0; }
.dims-in input { border: 0; background: transparent; color: #131312; font: 500 1.05rem var(--f-body); width: 100%; min-width: 0; outline: none; }
.dims-in .mono { color: #6A6A64; }
.intake .cta-big { justify-self: stretch; justify-content: flex-start; border: 0; cursor: pointer; text-align: left; font: inherit; }
.form-note { color: var(--muted); }
.form-note a { color: var(--ink); font-weight: 600; }
.intake .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.intake .field input[aria-invalid="true"], .intake .field input[aria-invalid="true"]:focus { border-color: #D4442E; box-shadow: 0 0 0 3px rgba(212, 68, 46, .18); }
.form-note.is-error { color: #B8341F; }
.cta-big[aria-busy="true"] { opacity: .6; cursor: progress; }
.reassure { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--muted); font-size: 0.88rem; }
.reassure li { display: flex; gap: 8px; align-items: center; }
.reassure svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 860px) { .final .wrap { grid-template-columns: 1fr; } }

footer { padding-block: 40px 28px; }
.mark-giant { position: relative; padding-top: 22px; }
.ruler { height: 22px; width: 100%; opacity: .75; background-repeat: repeat-x; background-position: 0 0;
  background-image: linear-gradient(90deg, var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--muted) 1px, transparent 1px);
  background-size: calc((100% - 1px) / 5) 100%, calc((100% - 1px) / 10) 62%, calc((100% - 1px) / 50) 36%; }
.ruler-labels { display: flex; justify-content: space-between; color: var(--muted); margin-top: 6px; }
.wordmark { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 650; letter-spacing: -0.075em; line-height: 0.78; font-size: min(calc((100vw - 48px) / 5.75), 244px); margin: 18px 0 0 -0.04em; padding-bottom: 0.18em; white-space: nowrap; }
.wordmark span { color: var(--tape); -webkit-text-stroke: 0; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 0.9rem; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--ink); }

/* A call to action that follows on phones once the hero is out of view */
.dock { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: none; transform: translateY(140%); transition: transform 400ms cubic-bezier(.2,.7,.1,1); }
.dock.show { transform: none; }
.dock a { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); }
.dock a b { font-weight: 600; font-size: 0.96rem; }
.dock a small { display: block; font-size: 0.78rem; opacity: .7; }
.dock a span.go { background: var(--tape); color: var(--tape-ink); border-radius: 999px; padding: 12px 16px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 760px) { .dock { display: block; } }

/* Dialogs */
dialog.sheet { border: 0; padding: 0; border-radius: 24px; background: #fff; color: #131312; width: min(92vw, 440px); box-shadow: 0 40px 120px -30px rgba(0,0,0,.6); }
dialog.sheet::backdrop { background: rgba(10,10,10,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet .in { padding: 28px; display: grid; gap: 18px; }
.sheet h3 { color: #131312; font-size: 1.5rem; font-stretch: 118%; font-weight: 500; letter-spacing: -0.035em; }
.sheet p { color: #5B5B56; font-size: 0.95rem; }
.sheet .qr svg { width: 100%; height: auto; display: block; }
.sheet .qr { background: #fff; border: 1px solid #E2E2DC; border-radius: 18px; padding: 14px; }
.sheet .qr-meta { margin-top: -6px; text-align: center; font-size: 0.85rem; color: #5B5B56; }
.sheet .book-mail { font-size: 0.88rem; }
.sheet .book-mail a { color: #131312; font-weight: 600; }
.sheet .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet .x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E2E2DC; background: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.sheet .x svg { width: 14px; height: 14px; stroke: #131312; stroke-width: 2; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.days button, .slots button { border: 1px solid #E2E2DC; background: #fff; border-radius: 12px; min-height: 56px; cursor: pointer; font: 500 0.86rem/1.2 var(--f-body); color: #131312; }
.days button small { display: block; color: #6A6A64; font-size: 0.72rem; }
.days button[aria-pressed="true"], .slots button[aria-pressed="true"] { background: #131312; color: #fff; border-color: #131312; }
.days button[aria-pressed="true"] small { color: #ECFE72; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 196px; overflow-y: auto; }
.slots button { min-height: 44px; }
/* The booking dialog lists up to three weeks of days, and real times in the visitor's zone (v1.43, prototypes/roomhero-booking). */
.book-pick { display: grid; gap: 18px; }
.book-pick[hidden] { display: none; }
.book-status:empty { display: none; }
.book-status a { color: #131312; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#book-turnstile:empty { display: none; }
.sheet .btn-primary { background: #131312; color: #fff; justify-content: center; }

/* Load-in */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise 900ms cubic-bezier(.2,.7,.1,1) both; }
.hero-copy > *:nth-child(2) { animation-delay: 90ms; }
.hero-copy > *:nth-child(3) { animation-delay: 180ms; }
.hero-copy > *:nth-child(4) { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* Industry pages: a shorter headline, the wall demo as the art page's hero, plain steps, two figures, one art plan. */
.hero-title.sm { font-size: clamp(2.4rem, 0.9rem + 3.6vw, 4.5rem); line-height: 0.98; letter-spacing: -0.04em; }
.picker:has(> button:only-child) { display: none; }
/* All tabs on one line (the user, 24 Oct 2026, thread ecae6759). The bar measures itself: full names when they fit,
   one-word names below 590 px, and the icon above the word below 360 px. */
.stage-bar { container-type: inline-size; width: 100%; }
.stage-bar .picker { flex-wrap: nowrap; }
.stage-bar .picker button { flex: 0 0 auto; white-space: nowrap; }
.picker .pk-s { display: none; }
@container (max-width: 589px) {
  .picker { gap: 6px; }
  .picker .pk-l { display: none; }
  .picker .pk-s { display: inline; }
  .picker button { padding: 0 12px 0 4px; gap: 6px; }
}
@container (max-width: 359px) {
  .picker { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .picker button { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 5px 2px 6px; border-radius: 16px; font-size: 0.74rem; }
  .picker button img { width: 28px; height: 28px; }
}
/* French tab names run longer (« Table à manger », « Fauteuil »), so French bars switch to one-word names below 640 px
   and to the icon above the word below 400 px (Astro port, 24 Oct 2026, after v1.49). */
@container (max-width: 639px) {
  :lang(fr) .picker { gap: 6px; }
  :lang(fr) .picker .pk-l { display: none; }
  :lang(fr) .picker .pk-s { display: inline; }
  :lang(fr) .picker button { padding: 0 12px 0 4px; gap: 6px; }
}
@container (max-width: 399px) {
  :lang(fr) .picker { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  :lang(fr) .picker button { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 5px 2px 6px; border-radius: 16px; font-size: 0.74rem; }
  :lang(fr) .picker button img { width: 28px; height: 28px; }
}
.tr-lounge { background: var(--t-sofa); }
.tmore { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.tmore:hover { border-color: var(--ink); }
.tmore .arrow { width: 15px; height: 15px; }
.hero-wall .wallbox { aspect-ratio: 4 / 3; min-height: 0; }
.steps-plain { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); counter-reset: st; }
.steps-plain li { border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(22px, 2.4vw, 34px); display: grid; gap: 12px; align-content: start; counter-increment: st; }
.steps-plain li::before { content: "Step " counter(st); font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); order: -1; }
.steps-plain h3 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); font-stretch: var(--wide); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.steps-plain p { color: var(--muted); }
@media (max-width: 900px) { .steps-plain { grid-template-columns: 1fr; } }
.figs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .figs.two { grid-template-columns: 1fr; } }
.art-plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(14px, 1.6vw, 22px); align-items: start; }
.art-plan .call { margin-top: 0; }
@media (max-width: 900px) { .art-plan { grid-template-columns: 1fr; } }

/* ===== wallartviewer.com layer (v1.0). Everything below restyles the shared components. ===== */
body { font-size: 16px; line-height: 1.6; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 300; letter-spacing: -0.015em; line-height: 1.16; color: var(--ink); }
h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; }
.lede { color: color-mix(in srgb, var(--ink) 88%, var(--paper)); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); letter-spacing: -0.02em; max-width: 31em; }
.lede strong { font-weight: 400; color: var(--ink); }
.mono { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0; }
.sec { padding-block: clamp(64px, 8vw, 128px); }
.sec-head h2 { max-width: 18em; }
.sec-head p { font-size: 1.02rem; }
.sec-head.center h2 { margin-inline: auto; }

/* The label line with its dot, as on the source page's labels and tabs */
.dotline { display: inline-flex; align-items: center; gap: 10px; font: 800 0.95rem/1.4 var(--f-body); letter-spacing: 0; color: var(--ink); }
.dotline::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fill); }
.sec-head.center .dotline { justify-self: center; }

/* Panels: near-black boxes on the charcoal page, with tabs cut into their edges */
.panel { position: relative; background: var(--panel); border-radius: var(--r); margin-inline: var(--gut); }
.panel.has-tab { margin-top: 64px; }
.tab { position: absolute; top: -46px; left: clamp(24px, 4vw, 56px); margin: 0; height: 46px; display: flex; align-items: center; padding: 0 22px; background: var(--panel); border-radius: 17px 17px 0 0; }
.tab span { display: inline-flex; align-items: center; gap: 10px; font: 800 0.92rem/1 var(--f-body); color: var(--ink); white-space: nowrap; }
.tab span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fill); }
.sec.panel { padding-block: clamp(56px, 7vw, 112px); }
.sec.panel + .sec.panel, .band.panel + .sec { margin-top: 0; }
.panel + .panel:not(.has-tab) { margin-top: clamp(24px, 3vw, 40px); }

/* Buttons: outlined with a solid offset edge underneath, and a north-east arrow */
.btn { min-height: 50px; padding: 0 20px; border-radius: 18px; font: 500 0.98rem/1 var(--f-body); letter-spacing: -0.01em; gap: 12px; }
.btn-primary, .btn-primary:hover { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 3px 0 0 var(--ink); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ink); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ink); }
.btn-ghost, .btn-ghost:hover { background: transparent; color: var(--ink); border: 1.5px solid var(--hair); box-shadow: 0 3px 0 0 var(--hair); }
.btn-ghost:hover { border-color: var(--muted); box-shadow: 0 3px 0 0 var(--muted); }
.btn-tape { background: var(--cta); color: var(--cta-ink); border-radius: 999px; font-weight: 500; }
.btn-tape:hover { background: color-mix(in srgb, var(--cta) 86%, var(--paper)); }
.btn-lg { min-height: 56px; padding: 0 24px; font-size: 1.04rem; }
.btn .arrow { width: 18px; height: 18px; }
.btn:hover .arrow { transform: translate(2px, -2px); }
.center-cta { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }

/* Nav: the original site's frosted glass bar (the user, 23 Oct 2026, « this was slighlty liquid glass [...] keep as is ») */
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { height: var(--nav-h); max-width: none; padding-left: max(var(--gut), 16px, env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), 16px, env(safe-area-inset-right, 0px)); }
.brand { font-family: var(--f-mark); font-weight: 500; font-size: 1.32rem; letter-spacing: -0.02em; color: var(--ink); }
.nav-links a, .ind-btn { color: var(--nav-link); font-size: 0.94rem; font-weight: 500; letter-spacing: -0.01em; }
.nav-links a:hover, .ind-btn:hover, .ind.open .ind-btn, .ind:has([aria-current]) .ind-btn { color: color-mix(in srgb, var(--nav-link) 70%, var(--ink)); }
.nav-call { color: var(--nav-link); text-decoration: none; font-size: 0.94rem; font-weight: 500; white-space: nowrap; }
.nav-call:hover { color: var(--ink); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 0.9rem; }
.nav .nav-cta .arrow { width: 15px; height: 15px; }
/* Liquid glass, slim (the user, 23 Oct 2026, « a more liquid glass menu tab like on the other roomhero website [...] as slim verticually ») */
:root { --nav-h: 60px; }
.nav { background: color-mix(in srgb, var(--paper) 58%, transparent); backdrop-filter: saturate(1.8) blur(22px); -webkit-backdrop-filter: saturate(1.8) blur(22px); border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 30px -24px rgba(0,0,0,.35); }
:root[data-theme="dark"] .nav { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -24px rgba(0,0,0,.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -24px rgba(0,0,0,.8); } }
.nav .btn { min-height: 36px; }
.nav .theme-btn { width: 34px; height: 34px; }
.nav-main .nav-links > li > a, .nav .dd-btn { padding-block: 7px; }
.ind-pop { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.ind-pop a { color: var(--ink); }
.ind-pop a:hover, .ind-pop a:focus-visible, .ind-pop a[aria-current] { background: var(--hover); }
.ind-pop img, .ind-pop a:hover img, .ind-pop a[aria-current] img { background: #F3F1EE; }
.ind-pop b { font-weight: 500; font-family: var(--f-body); }
.ind-pop .all { color: var(--nav-link); border-top-color: var(--line); }
@media (max-width: 560px) { .nav .nav-call { display: none; } .nav .nav-cta .arrow { display: none; } }

/* Hero: a panel with the copy on the left and the live model on the right */
.hero.panel { margin-top: 4px; padding-block: clamp(28px, 4vw, 64px) 0; border-radius: var(--r) var(--r) var(--r) 0; }
@media (min-width: 961px) { .hero .wrap { align-items: center; grid-template-columns: minmax(0, 6fr) minmax(0, 5.6fr); } }
/* v1.36, comment bd83e196 « a lot of unused space »: a closer model, a shorter stage, and a wider hero on large screens */
@media (min-width: 961px) { .hero .stage { aspect-ratio: 1 / 0.78; } }
@media (min-width: 1600px) { .hero .wrap { max-width: 1600px; } }
@media (max-width: 960px) { .dotline { order: 0; } .hero .wrap { gap: 20px; } }
.hero-copy { gap: 26px; }
.hero-title { font-size: clamp(2.6rem, 0.8rem + 5.6vw, 6.5rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; }
.hero-title.sm { font-size: clamp(2.3rem, 0.9rem + 3.8vw, 4.6rem); line-height: 1.12; letter-spacing: -0.02em; }
.tape { font-weight: 300; padding: 0.02em 0.22em 0.08em; border-radius: 0.16em; transform: rotate(-1.5deg); }
.tape::before { display: none; }
.ticks { gap: 10px 22px; color: color-mix(in srgb, var(--ink) 92%, var(--paper)); font-size: 0.92rem; }
.ticks li { gap: 9px; }
.ticks svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--tick-bg); stroke: var(--ink); stroke-width: 2.4; }
.ticks b { font-weight: 500; }
.hero-actions { gap: 14px 22px; }
.hero-actions .see { color: var(--ink); font-weight: 500; }
.hero-actions .see span { border-bottom-color: var(--underline); }
.stage { border-radius: 26px; }
.stage-col .stage-note, .stage-note { color: var(--muted); }
.picker button { border-color: var(--line-2); color: var(--muted); background: transparent; }
.picker button:hover { color: var(--ink); border-color: var(--muted); }
.picker button[aria-selected="true"], .band .picker button[aria-selected="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.dims .lbl rect { fill: var(--panel); }

/* The platform row sits at the foot of the hero, in grey, like a row of wordmarks */
.strip { border: 0; position: relative; margin-top: clamp(36px, 5vw, 72px); padding-bottom: 76px; }
.strip .wrap { justify-content: center; padding-block: 10px; }
.strip ul { gap: 10px clamp(28px, 5vw, 72px); justify-content: center; font-family: var(--f-mark); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--faint); }
.strip .tab-low { top: auto; bottom: -1px; left: clamp(24px, 4vw, 56px); height: 46px; background: var(--paper); border-radius: 17px 17px 0 0; }
.hero.panel { margin-bottom: 64px; }
@media (max-width: 760px) { .hero.panel { margin-bottom: 24px; border-radius: var(--r); } .strip { padding-bottom: 64px; } .strip ul { font-size: 0.92rem; } }

/* Statement and three feature cards */
.big-say { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); font-weight: 300; max-width: 24em; letter-spacing: -0.015em; margin-bottom: clamp(36px, 5vw, 72px); }
/* The statement sits tighter (the user, 23 Oct 2026, « this section takes too much vertical space, remove padding to right size it ») */
.statement-sec.sec { padding-block: clamp(36px, 4vw, 64px); }
.statement-sec .big-say { margin-bottom: clamp(24px, 2.6vw, 40px); }
.statement-sec .feat { min-height: 0; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.feat, .card, .s3, .bx, .vs, .calc-in, .call, .steps-plain li, .trade, .plan, .qa-card { background: var(--card), var(--card-dark); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--inset); }
.feat { position: relative; padding: clamp(26px, 2.6vw, 36px); padding-right: 76px; display: grid; gap: 14px; align-content: start; min-height: 220px; }
.feat h3 { font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem); }
.feat p { color: var(--muted); font-size: 0.95rem; }
.ico { position: absolute; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.7); }
.ico svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } .feat { min-height: 0; } }

/* Journey panel */
.journey-copy { gap: 22px; }
.journey-copy .sub { color: var(--muted); max-width: 32em; }
.journey-steps li { border-top-color: var(--line); opacity: .42; }
.journey-steps li:last-child { border-bottom-color: var(--line); }
.journey-steps li::before { font: 300 1.2rem/38px var(--f-display); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.journey-steps li.on::before { background: transparent; border-color: var(--accent); color: var(--accent); }
.journey-steps h3 { font-weight: 300; letter-spacing: -0.015em; }
.journey-steps li .bar { background: var(--fill); }
.journey-stage { background: radial-gradient(70% 60% at 50% 45%, var(--glow-in), transparent 70%); }
.journey-ctrl button { background: var(--panel); border-color: var(--line-2); }

/* Try band, inside a panel */
.band.panel { background: var(--panel); }
.band .wrap { padding-block: clamp(56px, 7vw, 104px); }
.qr-card { border-radius: 20px; }
.qr-card .top b { font-family: var(--f-body); font-weight: 600; }

/* Why choose: the heading takes the first cell of the grid */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: stretch; max-width: 1180px; }
.why-head { display: grid; gap: 18px; align-content: center; padding: 8px clamp(0px, 2vw, 24px) 24px 0; }
.why-head p { color: var(--muted); max-width: 30em; }
.card { padding: clamp(24px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
.card p { color: var(--muted); font-size: 0.95rem; max-width: 30em; }
@media (min-width: 901px) { .why-grid > .card:nth-of-type(odd) { transform: translateY(0); } .why-grid .why-head { grid-row: span 1; } }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }

/* Icon row above the trade cards */
.iconrow { list-style: none; padding: 0; margin: 0 0 clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; text-align: center; }
.iconrow li { display: grid; justify-items: center; gap: 12px; font-size: 0.8rem; color: var(--muted); }
.iconrow svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .iconrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .iconrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Trade cards */
.trade { border-radius: var(--r); }
.tcopy h3 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.12; }
.tcopy li::before { background: var(--bullet); height: 2px; }
.tcopy .spec { color: var(--muted); }
/* The page link gets its own line under the button (the user, 23 Oct 2026, « the placement is odd ») */
.tcopy .foot { flex-direction: column; align-items: flex-start; }
.viewer, .wallbox { border-radius: 24px; }
.viewer .play { background: var(--panel); color: var(--ink); }
.tmore { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tmore:hover { border-color: var(--accent); }

/* How it works: tall cards with circled numerals */
.steps3 { gap: clamp(14px, 1.8vw, 24px); }
.s3 { display: flex; flex-direction: column; }
.s3 .body { padding: clamp(24px, 2.4vw, 32px) clamp(24px, 2.4vw, 32px) 8px; gap: 12px; }
.s3 .n { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 300 2.2rem/1 var(--f-display); color: var(--ink); margin-bottom: 14px; }
.s3 h3 { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem); font-weight: 300; letter-spacing: -0.015em; }
.s3 .vis { margin-top: auto; padding: 18px 24px 26px; aspect-ratio: auto; min-height: 250px; }
.who-tag { justify-self: start; font-family: var(--f-body); font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border: 0; background: var(--chip); color: var(--ink); }
.who-tag.us { background: var(--tape); color: var(--tape-ink); }
.struck li { color: var(--ink); }
.struck li::after { background: var(--fill); }
.struck li.x::before { background: var(--fill); border-color: var(--fill); }
.stamp { border-radius: 10px; }
.paste .dimrow span { background: var(--panel); border-color: var(--line-2); color: var(--ink); }
.steps-foot { justify-content: center; }

/* Quality */
.checks-intro .big { font-weight: 200; color: var(--accent); letter-spacing: -0.04em; }
/* The big 14 carries its own label, so it never reads as « 14 handmade » (the user, 23 Oct 2026) */
.big-count { display: flex; align-items: flex-end; gap: 18px; }
.big-label { font-family: var(--f-mono); font-size: 0.86rem; color: var(--muted); max-width: 8em; line-height: 1.35; padding-bottom: 0.4em; }
.speclist, .speclist li { border-color: var(--line); }
.speclist b { font-weight: 500; }

/* Pricing panel: a white card and a sage card, after the source page */
#pricing .sec-head.center { justify-items: center; }
.price-row { justify-content: center; flex-direction: column; }
.billing { border: 0; padding: 0; gap: 14px; align-items: center; }
.billing button { position: relative; background: transparent !important; color: var(--muted); padding: 0 4px; min-height: 36px; font-weight: 500; }
.billing button[aria-pressed="true"] { color: var(--ink); }
.billing button[data-bill="m"]::after { content: ""; position: absolute; right: -38px; top: 50%; width: 30px; height: 18px; margin-top: -9px; border-radius: 999px; background: var(--sage); }
.billing button[data-bill="m"]::before { content: ""; position: absolute; right: -35px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--panel); z-index: 1; transition: transform 200ms ease; }
.billing button[data-bill="m"][aria-pressed="false"]::before { transform: translateX(12px); }
.billing button[data-bill="y"] { margin-left: 40px; }
.billing em { color: var(--good); }
.billing button[aria-pressed="true"] em { color: var(--good); }
.plans { max-width: 1120px; margin-inline: auto; gap: 16px; }
.plan { background: #F7F7F7; color: #141414; border: 0; border-radius: 14px; box-shadow: none; --muted: #5E5C5C; }
.plan.lead { background: var(--sage); color: #141414; box-shadow: 0 4px 0 0 var(--edge); }
.plan h3 { color: #141414; font-weight: 300; font-size: 1.6rem; }
.plan h3 b { font-weight: 700; }
.plan.lead .muted, .plan.lead li { color: #2C3A2C; }
.plan .muted { color: #5E5C5C; }
.plan .amount { font-family: var(--f-body); font-weight: 800; letter-spacing: -0.04em; color: #141414; }
.plan ul { border-top-color: #DADADA; }
.plan.lead ul { border-top-color: rgba(20,20,20,.15); }
.plan li svg { stroke: #2F6B3F; }
@media (min-width: 1001px) { .plan .who { min-height: 6.4em; align-content: start; } }
.plan .pop { background: #141414; color: var(--sage); font-family: var(--f-body); font-weight: 700; border-radius: 999px; }
.plan .btn, .plan .btn:hover, .plan.lead .btn-primary { align-self: center; background: #fff; color: #141414; border: 1px solid #DADADA; box-shadow: 0 3px 0 0 var(--edge); }
.extras { max-width: 1120px; margin-inline: auto; }
.extra { border-top-color: var(--line-2); }
.extra .p { font-family: var(--f-body); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.call { max-width: 1120px; margin-inline: auto; margin-top: clamp(24px, 3vw, 36px); }
.call .cal span { color: var(--accent); }

/* Benefits */
.bx h3 { font-weight: 300; font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.65rem); letter-spacing: -0.015em; }
.catalog i.ok::after { background-color: var(--panel); }
.catalog-bar { background: var(--line); }
.catalog-bar i { background: var(--fill); }
.views-vis { font-weight: 200; color: var(--accent); }
.files span i { color: var(--tape); }

/* Proof: the figures sit on light cards, where the source page shows quotes */
.figs { border: 0; gap: 16px; }
.fig, .fig + .fig { border: 0; padding: clamp(24px, 2.6vw, 36px); border-radius: 16px; background: #fff; color: #141414; }
.fig:nth-child(odd) { background: var(--sage); }
.fig .num { color: #141414; font-family: var(--f-body); font-weight: 300; }
.fig p { color: #141414; }
.fig .src, .fig .src a { color: #4A4848; }
.statement { border-top-color: var(--line); }
.statement blockquote { font-weight: 300; font-family: var(--f-display); }
@media (max-width: 860px) { .fig + .fig { border-top: 0; } }

/* Calculator */
input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--fill) var(--p, 50%), var(--line-2) var(--p, 50%)); }
input[type=range]::-moz-range-track { background: linear-gradient(90deg, var(--fill) var(--p, 50%), var(--line-2) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { background: var(--thumb); border-color: var(--panel); }
input[type=range]::-moz-range-thumb { background: var(--thumb); border-color: var(--panel); }
.slider output { background: var(--panel); border-color: var(--line-2); }
.calc-out { background: var(--sage); color: #141414; }
.calc-out .k, .calc-out dt, .calc-out .fine, .calc-out .big small { color: #3B4A3B; }
.calc-out dl, .calc-out dt, .calc-out dd { border-color: rgba(20,20,20,.14); }
.calc-out .big { font-family: var(--f-body); font-weight: 300; color: #141414; }
.calc-out .btn-tape { background: #fff; color: #141414; border-radius: 18px; border: 1px solid #DADADA; box-shadow: 0 3px 0 0 var(--edge); }

/* Questions */
.qa, .qa details { border-color: var(--line); }
.qa summary { font-weight: 400; font-size: 1.1rem; letter-spacing: -0.01em; }
.qa summary::after { background: linear-gradient(var(--accent), var(--accent)) center / 14px 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1.5px 14px no-repeat; }

/* Final panel with a sage edge above it, and the footer closing the same panel */
.final.panel { background: linear-gradient(180deg, var(--final-top) 0%, var(--panel) 60%); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -14px 4px 0 var(--sage); margin-top: clamp(64px, 8vw, 120px); }
.final .wrap { padding-block: clamp(56px, 7vw, 104px); align-items: center; }
.final h2 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; }
.final-copy img { border-radius: 20px !important; }
.intake { background: #F7F7F7; color: #141414; border-radius: 20px; --muted: #5E5C5C; --ink: #141414; --hair: #DADADA; box-shadow: 0 4px 0 0 var(--edge); }
.intake h3 { color: #141414; font-weight: 300; font-size: 1.6rem; }
.intake .cta-big { background: var(--cta); color: var(--cta-ink); border-radius: 18px; box-shadow: 0 3px 0 0 #141414; }
.intake .cta-big .plus { background: var(--cta-ink); color: var(--cta); }
.intake .more-toggle { color: #141414; }
footer { background: var(--panel); margin-inline: var(--gut); border-radius: 0 0 var(--r) var(--r); padding-block: 0 8px; margin-bottom: var(--gut); }
.foot-row { margin-top: 0; padding-block: 26px 22px; border-top: 1px solid var(--chip); color: var(--foot); font-size: 0.86rem; align-items: center; }
.foot-row a { color: var(--foot-link); }
.foot-row a:hover { color: var(--ink); }
.foot-brand { font-size: 1.15rem; color: var(--ink) !important; }
.foot-row .sep { display: inline-block; width: 1px; height: 0.9em; margin-inline: 14px; vertical-align: -0.1em; background: var(--line-2); }
.dock a { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); }
.dock a span.go { background: var(--cta); color: var(--cta-ink); }

/* Industry pages */
.steps-plain li { border: 0; }
.steps-plain li::before { content: counter(st); width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 300 1.8rem/1 var(--f-display); color: var(--ink); }
.steps-plain h3 { font-weight: 300; letter-spacing: -0.015em; }
.wall-controls button[aria-pressed="true"] { background: #141414; }
/* On phones the buttons sit under the photo, so they never cover the artwork (23 Oct 2026) */
@media (max-width: 600px) {
  .wallbox, .hero-wall .wallbox { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--chip); }
  .wall { position: relative; inset: auto; aspect-ratio: 4 / 3.4; }
  .wall-controls { position: static; padding: 10px; justify-content: center; }
  .wall-controls .group { background: var(--panel); }
  .wall-controls button, .wall-controls label { color: var(--ink); }
}
.hero-title { font-size: clamp(2.5rem, 0.9rem + 4.4vw, 5.4rem); }
.tape { background: transparent; color: var(--accent); padding: 0; transform: none; box-shadow: none; }
.tape:hover, .tape:focus-visible { transform: translateY(-2px); }
.why-grid > .card:first-of-type { align-self: center; }

/* Ported from Roomhero v2.3 to v2.5 (the user's comments of 22 Oct 2026): no caption under the picker,
   pieces that turn every 5 seconds with a drag hint, journey steps that play on hover, click or focus. */
.stage-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drag-hint { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 0.78rem; }
.drag-hint svg { width: 40px; height: 22px; overflow: visible; }
.drag-hint .arc { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drag-hint .tip { fill: var(--tape); stroke: var(--panel); stroke-width: 1.4; animation: drag-tip 2.4s ease-in-out infinite; }
@keyframes drag-tip { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.picker button { position: relative; overflow: hidden; }
.picker button.timing::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tape); transform-origin: left; animation: piece-time 5s linear both; }
@keyframes piece-time { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.phone.jsnap, .phone.jsnap * { transition: none !important; }
.journey-steps li { cursor: pointer; } .journey-steps li:focus-visible { outline: 2px solid var(--tape); outline-offset: 4px; }
/* Ported from Roomhero v2.5's last source fixes: the stamp keeps its own colours, and step 3 is simpler. */
.struck li.stamp { color: var(--tape-ink); padding-left: 14px; }
.struck li.stamp::before, .struck li.stamp::after { content: none; }
.admin { padding: 14px; display: grid; gap: 12px; }
.admin .media { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.admin .media i.m3d { grid-row: span 2; aspect-ratio: auto; background-size: 82%; border-width: 1.5px; }
.admin .media i.m3d::after { right: 8px; bottom: 8px; font-size: 0.72rem; padding: 3px 6px; }
.admin .live { border-top: 0; padding-top: 0; font-size: 0.86rem; }
/* Ported from Roomhero v2.6 (the user's comments of 22 Oct 2026): colour and « Add to cart » in the AR view,
   and done items in step 2 that stay easy to read. */
.ar-view .buy { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 9cqw; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; background: rgba(20,20,20,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 2cqw; transition: opacity 400ms ease; }
.ar-view .buy.off { pointer-events: none; }
.ar-view .swatches { display: flex; gap: 2.6cqw; padding-left: 1cqw; }
.ar-view .swatches button { width: 8.4cqw; height: 8.4cqw; border-radius: 50%; border: 0; padding: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 0 0 transparent; transition: box-shadow 200ms ease; }
.ar-view .swatches button.on { box-shadow: 0 0 0 0.8cqw rgba(20,20,20,.6), 0 0 0 1.5cqw #fff; }
.ar-view .add { background: #fff; color: #111; border-radius: 999px; padding: 3.4cqw 5.4cqw; font: 600 3.6cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: transform 160ms ease, background-color 200ms ease, color 200ms ease; }
.ar-view .add b { font-weight: inherit; } .ar-view .add b + b { display: none; }
.ar-view .add.press { transform: scale(.94); }
.ar-view .add.done { background: #141414; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .ar-view .add.done b:first-of-type { display: none; } .ar-view .add.done b + b { display: inline; }
.struck li::after { top: 58%; height: 2px; border-radius: 2px; }
.struck li.x { color: var(--ink); }

/* v1.4 (the user's artifact comments of 22 Oct 2026): « Properly design it as well as the entire transition for each
   model (in and out). I want it smooth and professional ». A real iPhone with a titanium edge, the Dynamic Island,
   a shop's product page and a frosted address bar. Pieces leave its screen and fly back into it. */
.stage { container-type: inline-size; }
/* The canvas sits above the phone, so a piece leaves from its screen and goes back into it. */
#hero-canvas { z-index: 4; } #hero-dims { z-index: 4; }
.stage .poster, .photo-card { display: none; }
.iphone { --pw: clamp(80px, 17.5cqw, 130px); position: absolute; z-index: 3; top: 3%; right: 1.5%; width: var(--pw); aspect-ratio: 71.5 / 149.6; border-radius: calc(var(--pw) * .165);
  background: linear-gradient(140deg, #9B9BA1 0%, #46464B 14%, #222226 42%, #2E2E33 70%, #8E8E95 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 1px rgba(0,0,0,.25), 0 30px 60px -22px rgba(0,0,0,.6), 0 12px 24px -14px rgba(0,0,0,.35);
  pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.iphone.ready { opacity: 1; transform: none; }
.iphone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%); }
.ip-key { position: absolute; width: 2px; border-radius: 2px; background: linear-gradient(90deg, #5A5A60, #9A9AA0); }
.ip-action { left: -1.5px; top: 17%; height: 5%; } .ip-up { left: -1.5px; top: 25.5%; height: 9%; } .ip-down { left: -1.5px; top: 36.5%; height: 9%; }
.ip-side { right: -1.5px; top: 29%; height: 14%; }
.ip-screen { position: absolute; inset: 2.5px; border: calc(var(--pw) * .032) solid #050505; border-radius: calc(var(--pw) * .165 - 2.5px); overflow: hidden; background: #FBFAF7; container-type: inline-size; color: #141414; font-family: var(--f-body); }
.ip-status { position: absolute; z-index: 2; top: 3.4cqw; left: 8.5cqw; right: 7cqw; display: flex; align-items: center; justify-content: space-between; font: 600 5.6cqw/1 var(--f-body); letter-spacing: -0.01em; }
.ip-status svg { width: 17cqw; height: auto; fill: #141414; stroke: #141414; }
.ip-island { position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 31cqw; height: 9.4cqw; transform: translateX(-50%); background: #000; border-radius: 999px; }
.ip-page { position: absolute; inset: 15cqw 0 0; padding: 0 6.5cqw; display: flex; flex-direction: column; gap: 2.6cqw; transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.8,.2,1); }
.iphone.swap .ip-page { opacity: 0; transform: translateY(5cqw); transition-duration: 200ms, 200ms; }
.ip-shop { display: flex; align-items: center; justify-content: space-between; padding: 2cqw 0 1cqw; font: 700 4.6cqw/1 var(--f-body); letter-spacing: .24em; }
.ip-shop svg { width: 6.4cqw; height: 6.4cqw; fill: none; stroke: #141414; stroke-width: 1.4; stroke-linejoin: round; }
.ip-photo { position: relative; aspect-ratio: 1; border-radius: 5cqw; background: radial-gradient(90% 80% at 50% 40%, #FFFFFF, #ECEAE4); overflow: hidden; }
.ip-photo img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; transition: opacity 260ms ease, transform 420ms cubic-bezier(.4,0,.2,1); }
.iphone.out .ip-photo img { opacity: 0; transform: scale(.82); }
.ip-dots { display: flex; justify-content: center; gap: 1.6cqw; }
.ip-dots i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #D3D0C9; } .ip-dots i:first-child { background: #141414; }
.ip-name { margin: 0; font: 600 6cqw/1.2 var(--f-body); letter-spacing: -0.01em; }
.ip-dims { margin: -1.4cqw 0 0; font: 400 4.4cqw/1.3 var(--f-mono); color: #6A6863; }
.ip-ar { position: relative; overflow: hidden; margin-top: 1.4cqw; height: 13cqw; border-radius: 999px; background: #141414; color: #fff; display: flex; align-items: center; justify-content: center; gap: 2cqw; font: 600 4.8cqw/1 var(--f-body); white-space: nowrap; transition: transform 160ms ease, background-color 160ms ease; }
.ip-ar svg { width: 5.6cqw; height: 5.6cqw; }
.ip-ar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; margin: -5cqw; border-radius: 50%; background: rgba(236,254,114,.55); transform: scale(0); opacity: 0; }
.iphone.press .ip-ar { transform: scale(.95); background: #2A2A2A; }
.iphone.press .ip-ar::after { animation: ip-ripple 600ms cubic-bezier(.2,.7,.2,1); }
/* « Add to cart », tapped when a piece flies back into the phone (v1.36). The bag in the shop bar counts the pieces added. */
.ip-bag { position: relative; display: flex; }
.ip-bag i { position: absolute; right: -2.6cqw; top: -2.6cqw; min-width: 6.4cqw; height: 6.4cqw; padding: 0 1.2cqw; border-radius: 999px; background: #141414; color: #fff; font: 700 4.2cqw/6.4cqw var(--f-body); font-style: normal; box-shadow: 0 0 0 .8cqw #FBFAF7; letter-spacing: 0; text-align: center; transform: scale(0); transition: transform 300ms cubic-bezier(.3,1.6,.5,1); }
.ip-bag i.on { transform: scale(1); }
.ip-bag i.pop { animation: ip-pop 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes ip-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.ip-cart { position: relative; overflow: hidden; height: 11.5cqw; border-radius: 999px; background: #fff; color: #141414; box-shadow: inset 0 0 0 .5cqw #141414; display: flex; align-items: center; justify-content: center; gap: 1.8cqw; font: 600 4.6cqw/1 var(--f-body); white-space: nowrap; transition: transform 160ms ease, background-color 200ms ease, color 200ms ease; }
.ip-cart svg { width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ip-cart b { font-weight: inherit; } .ip-cart b + b { display: none; }
.iphone.cart-press .ip-cart { transform: scale(.95); }
.iphone.added .ip-cart { background: #141414; color: #fff; } .iphone.added .ip-cart b:first-of-type { display: none; } .iphone.added .ip-cart b + b { display: inline; }
@keyframes ip-ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.ip-bar { position: absolute; left: 7cqw; right: 7cqw; bottom: 7.4cqw; height: 12.5cqw; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 1.8cqw;
  background: rgba(255,255,255,.62); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.9), 0 3cqw 8cqw -2cqw rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06); font: 500 4.6cqw/1 var(--f-body); color: #222; }
.ip-bar svg { width: 3.2cqw; height: auto; fill: #222; stroke: #222; }
.ip-home { position: absolute; left: 50%; bottom: 2.2cqw; width: 34cqw; height: 1.3cqw; transform: translateX(-50%); border-radius: 2px; background: #141414; }
/* The tap on « View in your room »: a soft fingertip that presses and lifts */
.gp-finger { position: absolute; z-index: 5; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255,255,255,.34); border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transform: scale(1.25); pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1); }
.gp-finger.on { opacity: 1; transform: scale(1); }
#hero-dims { transition: opacity 220ms ease; } #hero-dims.hide { opacity: 0; }
.gp-finger.down { transform: scale(.8); }
@media (max-width: 600px) { .iphone { top: 2%; right: 0; } .gp-finger { width: 24px; height: 24px; margin: -12px 0 0 -12px; } }

/* v1.4: the hero fits the first screen, so « Get your first model free » shows without scrolling (artifact comment of 22 Oct 2026). */
.hero.panel { margin-top: 2px; padding-block: clamp(26px, 3.4vw, 60px) 0; }
.hero-copy { gap: 22px; padding-top: 0; }
.hero-title { font-size: clamp(2.3rem, 0.8rem + 3.9vw, 5rem); line-height: 1.06; }
.hero .lede { font-size: clamp(1rem, 0.94rem + 0.28vw, 1.17rem); }
.strip { margin-top: clamp(18px, 2.6vw, 40px); padding-bottom: 64px; }
@media (min-width: 961px) and (max-height: 820px) { .hero-copy { gap: 18px; } .hero-title { font-size: clamp(2.3rem, 0.6rem + 3.6vw, 4.4rem); } .hero.panel { padding-top: 24px; } }
@media (max-width: 960px) {
  .hero.panel { padding-top: 22px; }
  .hero .wrap { gap: 18px; }
  .dotline { font-size: 0.84rem; }
  .hero-title { order: 1; font-size: clamp(2.2rem, 1.2rem + 4vw, 3.4rem); }
  .hero .lede { order: 2; }
  .hero-actions { order: 3; }
  .stage-col { order: 4; margin-top: 6px; }
  .ticks { order: 5; }
}

/* The theme switch in the nav */
.theme-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color 160ms ease, transform 300ms cubic-bezier(.2,.8,.2,1); }
.theme-btn:hover { border-color: var(--muted); }
.lang-btn { flex: none; height: 34px; padding: 0 9px; border-radius: 17px; border: 1px solid var(--line-2); color: var(--ink); display: grid; place-items: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; transition: border-color 160ms ease; }
.lang-btn:hover { border-color: var(--muted); }
.theme-btn:active { transform: rotate(-30deg); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .moon, :root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }
@media (max-width: 560px) { .theme-btn { width: 36px; height: 36px; } .nav .wrap { gap: 8px; } .ind { margin-left: auto; } }
@media (max-width: 400px) { .theme-btn { width: 34px; height: 34px; } .nav .wrap { gap: 6px; } .nav .btn-tape { padding: 0 12px; font-size: 0.84rem; } .brand { font-size: 1.08rem; gap: 6px; } .brand svg { width: 24px; height: 24px; } .ind-btn { font-size: 0.84rem; gap: 3px; } }
html.theme-fade, html.theme-fade * { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, fill 300ms ease !important; }

/* Light theme details: lime stays a fill, thin lime lines turn a deeper lime, and white cards get an edge. */
:root :is(.picker button.timing::after) { background: var(--fill); }
:root[data-theme="light"] :is(.plan:not(.lead), .fig:not(:nth-child(odd)), .qr-card) { box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .intake { box-shadow: 0 0 0 1px var(--line-2), 0 4px 0 0 var(--edge); }
:root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .ind-btn:hover { color: var(--muted); }
:root[data-theme="light"] .iphone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 1px rgba(0,0,0,.2), 0 26px 50px -24px rgba(0,0,0,.45), 0 10px 20px -14px rgba(0,0,0,.25); }
:root[data-theme="light"] .gp-finger { background: rgba(20,20,20,.14); border-color: rgba(255,255,255,.95); }

/* v1.5 (the user's artifact comments of 22 Oct 2026). « (literally) » is a tape measure again, as on the original
   site (« i like the idea of the measurer in the previous version. please keep it »), in both themes. */
.tape { background: var(--tape); color: var(--tape-ink); padding: 0.08em 0.24em 0.06em; border-radius: 0.1em; transform: rotate(-1.5deg); box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 12px 26px -14px rgba(0,0,0,.5); }
.tape::before { display: block; height: 0.17em; opacity: .75; }
.tape:hover, .tape:focus-visible { transform: rotate(0deg) translateY(-2px); }
/* « Compatible with » and a slow row of platform logos that fades at both ends, after wallartviewer.com's client row
   (« redesign, this needs to be looking better [...] And should show something like "compatible with" »). */
.strip .wrap.compat { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 28px; padding-block: 8px; }
.compat-label { flex: none; margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 0.86rem/1.2 var(--f-body); color: var(--muted); white-space: nowrap; }
.marquee { position: relative; flex: 1; min-width: 0; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.strip .marquee ul.logos { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; animation: logos 36s linear infinite; font: 600 1.12rem/1 var(--f-mark); letter-spacing: -0.02em; color: color-mix(in srgb, var(--ink) 46%, var(--panel)); }
.marquee:hover ul.logos { animation-play-state: paused; }
.marquee li { display: inline-flex; align-items: center; gap: 10px; padding-inline: clamp(24px, 3vw, 44px); white-space: nowrap; transition: color 200ms ease; }
.marquee li:hover { color: var(--ink); }
.marquee li svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
@keyframes logos { to { transform: translateX(-100%); } }
@media (max-width: 760px) { .strip .wrap.compat { flex-direction: column; align-items: stretch; gap: 14px; } .compat-label { justify-content: center; } .strip .marquee ul.logos { font-size: 1rem; animation-duration: 28s; } .marquee li svg { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .strip .marquee ul.logos { flex-wrap: wrap; justify-content: center; row-gap: 14px; } .marquee ul.logos[aria-hidden] { display: none; } }

/* Art page: frame styles after wallartviewer.com's frame carousel (the user's Notion note of 22 Oct 2026,
   « This goes to the art landing page »). Each card frames the same work in CSS. */
.fstyles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fs { background: var(--card), var(--card-dark); box-shadow: inset 0 0 0 1px var(--inset); border-radius: 24px; padding: clamp(18px, 2vw, 26px); display: grid; gap: 6px; align-content: start; }
.fs .pic { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 12px; border-radius: 16px; background: radial-gradient(80% 70% at 50% 40%, #F4F2EC, #E2DED5); }
.fs .in { position: relative; display: block; width: 58%; aspect-ratio: 1; padding: var(--fw, 7%); background: var(--fr, #1d1b19); box-shadow: 0 14px 22px -12px rgba(40,30,20,.55), 0 2px 4px rgba(40,30,20,.2); }
.fs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs b { font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.fs > span:last-child { color: var(--muted); font-size: 0.88rem; }
.f-black { --fr: linear-gradient(135deg, #2a2826, #121110); --fw: 5%; }
.f-white { --fr: linear-gradient(135deg, #FFFFFF, #E9E6DF); --fw: 6%; }
.f-oak { --fr: linear-gradient(135deg, #D9B98C, #B8925F 50%, #D7B585); --fw: 7%; }
.f-walnut { --fr: linear-gradient(135deg, #6B4A33, #4A3122 55%, #6E4C35); --fw: 7%; }
.f-brass { --fr: linear-gradient(135deg, #E8D08A, #B08B3E 50%, #E3C677); --fw: 2.6%; }
.f-float .in { --fr: linear-gradient(135deg, #D9B98C, #B8925F 50%, #D7B585); --fw: 9%; }
.f-float .in img { box-shadow: 0 0 0 4px #24201C, 0 6px 10px rgba(0,0,0,.45); }
.f-canvas .in { --fr: transparent; --fw: 0; box-shadow: 4px 4px 0 #6B6A2C, 0 16px 22px -12px rgba(40,30,20,.55); }
.f-mount .in { --fr: linear-gradient(135deg, #2a2826, #121110); --fw: 3%; }
.f-mount .in img { border: 6px solid #FBFAF6; box-sizing: border-box; }
@media (max-width: 900px) { .fstyles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Footer columns: every industry page and guide linked from every page (22 Oct 2026). */
.foot-cols { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 48px); padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px); border-top: 1px solid var(--chip); }
.foot-about { display: grid; gap: 12px; align-content: start; max-width: 26em; }
.foot-about p { color: var(--foot); font-size: 0.9rem; margin: 0; }
.foot-cols nav { display: grid; gap: 10px; align-content: start; font-size: 0.9rem; }
.foot-cols h2 { font: 600 0.8rem/1.2 var(--f-body); color: var(--ink); margin: 0 0 4px; letter-spacing: 0; }
.foot-cols a { color: var(--foot-link); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); }
.foot-cols a[aria-current="page"] { color: var(--ink); }
.foot-row { justify-content: space-between; }
@media (max-width: 860px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-about { grid-column: 1 / -1; } }

/* Industry pages, after the research of 22 Oct 2026 (research/2026-10-22-roomhero-site/04-industry-pages.md):
   one section per product type, what shoppers see on each screen, and related links. */
.types { list-style: none; padding: 0; margin: clamp(18px, 2.4vw, 32px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.ty { background: var(--card), var(--card-dark); box-shadow: inset 0 0 0 1px var(--inset); border-radius: var(--r); padding: clamp(24px, 2.6vw, 36px); display: grid; gap: 12px; align-content: start; scroll-margin-top: 96px; }
.ty .tico { width: 48px; height: 48px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; margin-bottom: 6px; }
.ty .tico svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ty h3 { font-weight: 300; font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.8rem); letter-spacing: -0.015em; }
.ty .q { margin: 0; color: var(--ink); font-size: 1.02rem; }
.ty p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.ty ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; font-size: 0.93rem; }
.ty li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.ty li::before { content: ""; width: 12px; height: 2px; background: var(--bullet); margin-top: 0.75em; }
.types-head { margin-top: clamp(56px, 7vw, 96px); }
.types-head h2 { font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.015em; }
.types-head p { color: var(--muted); max-width: 40em; margin-top: 10px; }
@media (max-width: 860px) { .types { grid-template-columns: 1fr; } }
.devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.dev { background: var(--card), var(--card-dark); box-shadow: inset 0 0 0 1px var(--inset); border-radius: var(--r); padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 12px; align-content: start; }
.dev h3 { font-weight: 300; font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem); letter-spacing: -0.015em; }
.dev p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.dico { width: 48px; height: 48px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; margin-bottom: 6px; }
.dico svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dev-foot { color: var(--muted); max-width: 44em; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; }
@media (max-width: 900px) { .devices { grid-template-columns: 1fr; } }
.related-sec h2 { font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.015em; margin-bottom: clamp(20px, 2.6vw, 32px); }
.related { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.related a { display: grid; gap: 8px; height: 100%; box-sizing: border-box; padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; background: var(--card), var(--card-dark); box-shadow: inset 0 0 0 1px var(--inset); text-decoration: none; color: var(--ink); transition: transform 200ms ease, box-shadow 200ms ease; }
.related a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2); }
.related .k { font: 500 0.78rem/1.2 var(--f-body); color: var(--muted); }
.related b { font-weight: 400; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.25; }
.related span.d { color: var(--muted); font-size: 0.88rem; }
.related svg { width: 18px; height: 18px; margin-top: auto; color: var(--accent); }
@media (max-width: 1000px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .related { grid-template-columns: 1fr; } }

/* The product type is the heading, the shopper's question the big line (research 04 §6.2). */
.tcopy h3.spec { font: 400 0.74rem/1.3 var(--f-mono); letter-spacing: 0; color: var(--muted); margin: 0; }
.tcopy .tq { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 0; max-width: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 0.88rem/1.4 var(--f-body); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 10px; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.crumbs span { color: var(--ink); font-weight: 600; }

/* The hub's « What shoppers ask, by trade » table (research 04 §6.6). It scrolls sideways on phones. */
.asks { overflow-x: auto; border-radius: var(--r); background: var(--card), var(--card-dark); box-shadow: inset 0 0 0 1px var(--inset); }
.asks table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.asks th, .asks td { text-align: left; vertical-align: top; padding: clamp(16px, 1.8vw, 24px); border-bottom: 1px solid var(--line); }
.asks tbody tr:last-child > * { border-bottom: 0; }
.asks thead th { font: 500 0.78rem/1.3 var(--f-body); color: var(--muted); }
.asks tbody th { font-weight: 400; font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap; }
.asks tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.asks td { color: var(--muted); }
.asks td:nth-child(2) { color: var(--ink); }
.ty ul a { color: var(--ink); }
/* The lighting page's honest note on lit lamps (research 04 §6.4). */
.lit { margin-top: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r); border: 1px dashed var(--line-2); display: grid; gap: 10px; }
.lit h3 { font-weight: 300; font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.65rem); letter-spacing: -0.015em; }
.lit p { color: var(--muted); margin: 0; max-width: 52em; }

/* Guides: one readable column, sources at the end (research 04 §6.1, 05-guides-draft.md). */
.guide { padding-block: clamp(28px, 3.4vw, 48px); }
/* « too much vertical padding » and « Keep exploring » « touching the section above » (the user, 24 Oct 2026). */
section.sec.related-sec { padding-top: clamp(36px, 4.4vw, 64px); padding-bottom: clamp(36px, 4.4vw, 64px); }
.related-sec + .final { margin-top: 0; }
.calc-tool + * { margin-top: clamp(28px, 3vw, 44px); }
.g-wrap { max-width: 760px; }
.g-head { display: grid; gap: 18px; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.g-lede { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--ink); margin: 0; }
.g-by { color: var(--muted); font-size: 0.8rem; margin: 0; display: flex; align-items: center; }
.g-by .sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); margin: 0 12px; }
.g-body { padding-top: clamp(12px, 2vw, 24px); font-size: 1.04rem; line-height: 1.7; color: var(--muted); }
.g-body h2 { font-weight: 300; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin: clamp(36px, 4vw, 52px) 0 14px; }
.g-body h3 { font-weight: 500; font-size: 1.15rem; color: var(--ink); margin: 28px 0 8px; }
.g-body p { margin: 0 0 16px; max-width: none; }
.g-body ul, .g-body ol { margin: 0 0 18px; padding-left: 1.3em; display: grid; gap: 8px; }
.g-body li::marker { color: var(--accent); }
.g-body a, .g-src a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.guide code { font: 0.88em var(--f-mono); background: var(--chip); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.g-faq, .g-src { margin-top: clamp(40px, 5vw, 64px); }
.g-faq h2, .g-src h2 { font-weight: 300; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); letter-spacing: -0.015em; margin-bottom: 14px; }
.g-src p { color: var(--muted); font-size: 0.92rem; }
.g-src ol { padding-left: 1.3em; display: grid; gap: 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.guide .hero-title { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem); line-height: 1.06; }
.bx a.inl { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; white-space: nowrap; }
.bx a.inl.brk { white-space: normal; }
.g-head > * { order: 0 !important; }
/* On phones the hub table becomes one card per trade, each cell with its column name. */
@media (max-width: 700px) {
  .asks table, .g-wrap .asks table { min-width: 0; }
  .asks table, .asks tbody { display: block; }
  .asks thead { display: none; }
  .asks tr, .asks th, .asks td { display: block; }
  .asks tbody tr { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .asks tbody tr:last-child { border-bottom: 0; }
  .asks th, .asks td { padding: 4px 0; border: 0; }
  .asks td::before { content: attr(data-label); display: block; font: 500 0.75rem/1.4 var(--f-body); color: var(--muted); margin-top: 10px; }
}

/* Trade cards in the main site's material tints: linen, sage, oak and a cool grey for art (23 Oct 2026). */
.trade.tr-sofa, .trade.tr-lounge { background: var(--t-sofa); } .trade.tr-lamp { background: var(--t-lamp); } .trade.tr-oak { background: var(--t-oak); } .trade.tr-art { background: var(--t-art); }

/* « Looks like your store » (v1.15, 23 Oct 2026): a product card and its QR code in three shops' looks, in turn */
.stores { display: grid; grid-template-columns: minmax(0, 1fr) 136px; gap: 12px; align-items: stretch; }
.st-card, .st-qr { background: var(--s-bg); color: var(--s-ink); border-radius: var(--s-r); padding: 14px; font-family: var(--s-font); box-shadow: 0 16px 34px -24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.05); transition: background-color 600ms ease, color 600ms ease, border-radius 600ms ease; }
.st-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.st-card img { width: 92px; height: 92px; object-fit: contain; background: var(--s-tint); border-radius: calc(var(--s-r) * 0.6); padding: 6px; transition: background-color 600ms ease, border-radius 600ms ease; }
.st-info { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.st-store { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; }
.st-name { font-size: 0.98rem; font-weight: 500; line-height: 1.2; }
.st-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; margin-top: 6px; background: var(--s-btn); color: var(--s-btn-ink); border: 1px solid var(--s-line); border-radius: var(--s-br); font-family: var(--s-btn-font, inherit); font-size: 0.74rem; font-weight: var(--s-btn-w, 600); letter-spacing: var(--s-ls); text-transform: var(--s-tt); white-space: nowrap; transition: all 600ms ease; }
.st-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.st-qr { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.st-code svg { display: block; width: 92px; height: 92px; color: var(--s-qr); transition: color 600ms ease; }
.st-code svg rect[fill="none"] { stroke-width: 1; }
.st-qr small { font-size: 0.64rem; line-height: 1.3; opacity: 0.75; }
.stores[data-s="1"] { --s-bg: #FFFFFF; --s-ink: #1B1A18; --s-tint: #F4F2EE; --s-r: 4px; --s-font: Georgia, "Times New Roman", serif; --s-btn: #1B1A18; --s-btn-ink: #FFFFFF; --s-line: #1B1A18; --s-br: 0px; --s-btn-font: var(--f-body); --s-btn-w: 500; --s-ls: 0.14em; --s-tt: uppercase; --s-qr: #1B1A18; }
.stores[data-s="2"] { --s-bg: #F4EFE6; --s-ink: #22362A; --s-tint: #E7E0D1; --s-r: 20px; --s-font: var(--f-body); --s-btn: #2F4A3A; --s-btn-ink: #F4EFE6; --s-line: #2F4A3A; --s-br: 999px; --s-ls: 0; --s-tt: none; --s-qr: #2F4A3A; }
.stores[data-s="3"] { --s-bg: #FBF3EC; --s-ink: #5A2E16; --s-tint: #F2E3D5; --s-r: 12px; --s-font: "Trebuchet MS", "Helvetica Neue", sans-serif; --s-btn: transparent; --s-btn-ink: #7A3E1D; --s-line: #7A3E1D; --s-br: 10px; --s-ls: 0.02em; --s-tt: none; --s-qr: #7A3E1D; }
@media (max-width: 600px) { .stores { grid-template-columns: 1fr; } .st-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; } .st-card img { width: 72px; height: 72px; } .st-qr { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 12px; padding: 12px; } .st-code svg { width: 64px; height: 64px; } .st-qr small { font-size: 0.74rem; } .st-btn { padding: 0 12px; font-size: 0.7rem; } }
/* The same stacked layout whenever the card's box is too narrow for the card and the code side by side, as at 700 to 1100 px (M10, 23 Oct 2026). */
.bx:has(> .stores) { container-type: inline-size; }
@container (max-width: 520px) { .stores { grid-template-columns: 1fr; } .st-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; } .st-card img { width: 72px; height: 72px; } .st-qr { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 12px; padding: 12px; } .st-code svg { width: 64px; height: 64px; } .st-qr small { font-size: 0.74rem; } .st-btn { padding: 0 12px; font-size: 0.7rem; } }
@container (max-width: 300px) { .st-card { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; } .st-card img { width: 52px; height: 52px; padding: 4px; } .st-btn { gap: 5px; padding: 0 9px; font-size: 0.66rem; letter-spacing: 0.03em; } .st-btn svg { display: none; } }

/* « Know every price up front »: a short receipt of prices that are decided */
.receipt { background: var(--raised); color: #131312; border-radius: 14px; padding: 6px 16px; box-shadow: 0 16px 34px -24px rgba(0,0,0,.45); font-size: 0.86rem; }
.receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed #DAD8D2; }
.receipt div:last-child { border-bottom: 0; }
.receipt span { color: #5B5B56; }
.receipt b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pricing, five plan sizes (DECISIONS.md « Pricing model, pick », 23 Oct 2026). */
#pricing .plans.five { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
#pricing .plans.five .plan { gap: 16px; padding: clamp(20px, 1.8vw, 28px); }
#pricing .plans.five .plan h3 { font-size: 1.3rem; }
#pricing .plans.five .amount { font-size: clamp(2.1rem, 1.2rem + 1.4vw, 2.8rem); flex-wrap: wrap; row-gap: 4px; white-space: nowrap; }
#pricing .plans.five ul { font-size: 0.9rem; }
#pricing .plans.five .yearly { margin-top: 10px; }
@media (max-width: 1200px) { #pricing .plans.five { display: flex; flex-wrap: wrap; justify-content: center; } #pricing .plans.five .plan { flex: 0 1 calc((100% - 2 * clamp(14px, 1.6vw, 22px)) / 3); } }
@media (max-width: 1000px) { #pricing .plans.five { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

/* About us (v1.17, 23 Oct 2026): the founder beside a short story, just before the final form, after Sayduck's and
   LEVAR's team blocks (research/2026-10-23-about-section.md). Her portrait arrived on 23 Oct (Q-1023-founder-photo). */
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-photo figcaption { z-index: 1; }
.about-photo figcaption a { color: inherit; }
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.about-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r); background: linear-gradient(160deg, var(--t-sofa), var(--t-lamp)); position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--inset); }
.about-mono { font: 200 clamp(4rem, 3rem + 4vw, 7rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--accent); }
.about-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 2px; background: var(--panel); color: var(--ink); border-radius: 16px; padding: 12px 16px; }
.about-photo figcaption b { font-weight: 500; }
.about-photo figcaption span { color: var(--muted); font-size: 0.88rem; }
.about-copy { display: grid; gap: 18px; justify-items: start; }
.about-copy h2 { font-weight: 300; }
.about-copy p { color: var(--muted); max-width: 34em; }
.about-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.about-team li:first-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .about-team { grid-template-columns: 1fr; } }
.about-team li { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.about-team b { font-weight: 500; color: var(--ink); }
.about-team span { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
/* « Win more clicks from Google », after Modelry's « Drive more organic traffic » (the user, 23 Oct 2026). The quote is Scott Washer's, as published on modelry.ai/3d-viewer. */
.seo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.seo-mock { background: var(--stage); border-radius: 24px; padding: clamp(18px, 3vw, 40px) 0 clamp(18px, 3vw, 40px) clamp(18px, 3vw, 40px); overflow: hidden; box-shadow: inset 0 0 0 1px var(--inset); }
.seo-win { position: relative; background: #FAFAF8; border-radius: 14px 0 0 14px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.35); color: #5F6368; overflow: hidden; }
.seo-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #ECEBE7; }
.seo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; } .seo-bar i:nth-child(2) { background: #FEBC2E; } .seo-bar i:nth-child(3) { background: #28C840; }
.seo-tab { margin-left: 12px; width: 38%; height: 18px; border-radius: 8px 8px 0 0; background: #FAFAF8; }
.seo-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px 10px; }
.seo-word { font: 600 1.5rem/1 var(--f-display); letter-spacing: -0.02em; color: #3C4043; }
.seo-field { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; border: 1px solid #DADCE0; border-radius: 10px; background: #fff; }
.seo-field b { width: 34%; height: 5px; border-radius: 3px; background: #C9CCD1; }
.seo-field svg { width: 18px; height: 18px; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; }
.seo-tabs { display: flex; gap: clamp(12px, 2vw, 26px); padding: 6px 20px 0; border-bottom: 1px solid #E3E3E0; font-size: 0.82rem; }
.seo-tabs span { padding: 8px 2px; } .seo-tabs .on { color: #1A73E8; box-shadow: inset 0 -3px 0 #1A73E8; }
.seo-lines { display: grid; gap: 7px; padding: 14px 20px; } .seo-lines b { height: 7px; border-radius: 4px; background: #DCE3EE; } .seo-lines b.blue { height: 12px; background: #A8C7FA; }
.seo-cards { display: grid; grid-template-columns: repeat(3, 172px); gap: 12px; padding: 4px 20px 6px; }
.seo-card { position: relative; display: grid; gap: 6px; padding: 10px 12px 14px; background: #fff; border: 1px solid #E3E3E0; border-radius: 12px; }
.seo-card img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-top: 18px; }
.seo-card b { height: 6px; border-radius: 3px; background: #DCE3EE; } .seo-card b:first-of-type { background: #A8C7FA; }
.seo-3d { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: #E8F0FE; color: #1A57C6; font: 600 0.66rem/1 var(--f-body); }
.seo-cursor { position: absolute; left: 47%; top: 62%; width: 22px; height: 22px; fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.seo-copy { display: grid; gap: 18px; justify-items: start; }
.seo-copy > p { color: var(--muted); max-width: 34em; margin: 0; }
.seo-copy > p a { color: var(--ink); }
.seo-quote { position: relative; margin: 8px 0 0; padding: clamp(20px, 2.4vw, 30px); border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; }
.seo-q { position: absolute; top: 20px; right: 22px; width: 30px; height: 22px; fill: var(--accent); opacity: .8; }
.seo-quote blockquote { margin: 0; } .seo-quote blockquote p { margin: 0; padding-right: 36px; color: var(--ink); font: 300 clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem)/1.45 var(--f-display); letter-spacing: -0.01em; }
.seo-quote figcaption { color: var(--muted); font-size: 0.9rem; } .seo-quote figcaption b { color: var(--ink); font-weight: 600; } .seo-quote figcaption a { color: inherit; white-space: nowrap; } .seo-quote blockquote p { hyphens: manual; }
@media (max-width: 960px) { .seo { grid-template-columns: 1fr; } .seo-mock { order: 2; } }
@media (max-width: 600px) { .seo-cards { grid-template-columns: repeat(3, 132px); } .seo-tabs span:nth-child(n+4) { display: none; } }
/* « About us » versions for the team's review (the user, 23 Oct 2026: « prepare 5 versions for the meet the team section »). Remove the switch once one is picked. */
.about-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.about-steps li { counter-increment: st; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.about-steps li::before { content: counter(st); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 600; }
.about-steps b, .about-points b { font-weight: 500; color: var(--ink); }
.about-steps span, .about-points span { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.about-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.about-quote p { margin: 0; color: var(--ink); font: 300 clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem)/1.35 var(--f-display); letter-spacing: -0.01em; }
.about-quote cite { display: block; margin-top: 8px; font-style: normal; color: var(--muted); font-size: 0.88rem; }
.about-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.about-points li { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.about-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.about-stats li { display: grid; gap: 6px; align-content: start; padding: 16px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.about-stats b { font: 300 clamp(2rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--ink); }
.about-stats span { color: var(--muted); font-size: 0.86rem; line-height: 1.3; }
.about-sign { color: var(--ink) !important; font-weight: 500; }
.about-team + .about-line, .about-points + p, .about-steps + .tmore { margin-top: 10px; }
@media (max-width: 1100px) { .about-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .about-points, .about-stats { grid-template-columns: 1fr 1fr; } .about-points li:last-child:nth-child(odd), .about-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

.about-copy .about-line { color: var(--ink); font: 300 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.25 var(--f-display); letter-spacing: -0.015em; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about-photo { max-width: 360px; } }
/* Two portraits side by side in « Our promise » (user, 24 Oct 2026, « ok for the pic, make it fit »). */
.about-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.about-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-pair .about-photo { max-width: none; }
.about-pair .about-photo figcaption { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 12px; }
.about-pair .about-photo figcaption span { font-size: 0.82rem; }
@media (max-width: 860px) { .about-duo { grid-template-columns: 1fr; } .about-pair { max-width: 560px; width: 100%; } }
@media (max-width: 400px) { .about-pair { gap: 8px; } .about-pair .about-photo figcaption { left: 6px; right: 6px; bottom: 6px; padding: 8px 9px; } .about-pair .about-photo figcaption b { font-size: 0.84rem; } .about-pair .about-photo figcaption span { font-size: 0.74rem; } }

/* Wall art size calculator (23 Oct 2026, research/2026-10-23-outranking/02-serp-map.md, opportunity 1). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc-tool { display: grid; gap: 20px; margin: clamp(16px, 2.4vw, 28px) 0; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r); background: var(--card), var(--card-dark); box-shadow: inset 0 0 0 1px var(--inset); }
.ct-in { display: grid; gap: 16px; min-width: 0; }
.calc-tool, .ct-out, .ct-seg { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ct-seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-seg legend { width: 100%; margin-bottom: 8px; color: var(--ink); font-weight: 500; }
.ct-seg label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--hair); color: var(--ink); cursor: pointer; }
.ct-seg label:has(input:checked) { background: var(--cta); color: var(--cta-ink); box-shadow: none; }
.ct-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ct-seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ct-num { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.ct-num input, .ct-num select { min-height: 44px; width: 9em; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--paper); color: var(--ink); font: 500 1rem var(--f-mono); }
.ct-num select { grid-column: 2 / 4; width: auto; font-family: var(--f-body); }
.ct-num .u { color: var(--muted); font-family: var(--f-mono); min-width: 2.4em; }
.ct-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
.ct-out .btn { white-space: normal; max-width: 100%; height: auto; padding-block: 12px; }
#ct-svg { width: 100%; height: auto; border-radius: 18px; background: var(--stage); }
.ct-wall { fill: var(--stage); } .ct-floor { stroke: var(--hair); stroke-width: 2; }
.ct-furn { fill: var(--hair); } .ct-art { fill: var(--sage); stroke: var(--ink); stroke-width: 1; }
.ct-person { fill: var(--faint); } .ct-lbl { fill: var(--ink); font: 500 11px var(--f-mono); }
.ct-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; width: 100%; margin: 0; }
.ct-res div { padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.ct-res dt { color: var(--muted); font-size: 0.86rem; } .ct-res dd { margin: 4px 0 0; color: var(--ink); font: 500 1.15rem var(--f-mono); }
@media (max-width: 560px) { .calc-tool { margin-inline: 0; } .ct-seg label { min-height: 36px; padding: 0 12px; font-size: 0.95rem; } .ct-num input { width: 100%; } .ct-num { grid-template-columns: 1fr auto; } .ct-num > span:first-child { grid-column: 1 / -1; } .ct-num select { grid-column: 1 / -1; } }
.g-wrap .asks { margin: clamp(12px, 2vw, 24px) 0; } .g-wrap .asks table { min-width: 600px; } .g-wrap .asks tbody th { white-space: normal; }
a.num { display: block; color: inherit; text-decoration: none; } a.num:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }

/* Main menu (v1.21, 23 Oct 2026, the user: « i want a proper, professional menu. this one page menu will not cut it to
   scale »). Product, Industries, Free tools, Guides, Pricing and About us (v1.25, « nobody clicks on "resource" »), each panel under the bar, after the menus of
   Threekit, Cylindo and Shopify. Below 1020 px a drawer holds the same links in folding groups. */
.nav-main { margin-left: auto; }
.nav-main .nav-links { margin-left: 0; gap: 4px; align-items: center; }
.nav-main .nav-links > li > a, .dd-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 999px; color: var(--nav-link); font-size: 0.94rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: background-color 160ms ease; }
.nav-main .nav-links > li > a:hover, .dd-btn:hover, .dd.open .dd-btn { background: var(--hover); }
.dd-btn:focus-visible, .nav-main .nav-links > li > a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dd-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd { position: static; }
.dd-pop { position: absolute; top: calc(100% - 6px); left: 50%; transform: translate(-50%, -6px); width: min(860px, calc(100vw - 32px)); padding: 14px; display: grid; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms; z-index: 60; }
.dd-pop::before { content: ""; position: absolute; inset: -6px 0 auto; height: 6px; }
.dd.open .dd-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms ease, transform 180ms ease; }
.dd:not(.open) .dd-pop { pointer-events: none; }
.dd-wide { grid-template-columns: 1fr 1fr minmax(0, 0.9fr); align-items: start; }
.dd-pop:not(.dd-feature-pop) .dd-col:only-of-type { grid-column: span 2; }
.dd-narrow { width: 380px; }
.dd-narrow { width: 360px; }
.dd-ind { width: min(720px, calc(100vw - 32px)); grid-template-columns: repeat(3, 1fr); }
.dd-col { display: grid; gap: 2px; }
.dd-h { font: 500 0.72rem/1 var(--f-mono); color: var(--muted); letter-spacing: 0.02em; padding: 10px 12px 6px; margin: 0; }
.dd-pop a { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); transition: background-color 140ms ease; }
.dd-pop a:hover, .dd-pop a:focus-visible, .dd-pop a[aria-current] { background: var(--hover); }
.dd-pop a b { font: 500 0.96rem/1.25 var(--f-body); letter-spacing: -0.01em; }
.dd-pop a small { color: var(--muted); font-size: 0.84rem; line-height: 1.35; }
.dd-pic { grid-template-columns: 1fr; text-align: left; }
/* Title above its line, with air between (the user, 23 Oct 2026, « title is touching description text, not proper layout ») */
.dd-pic { align-content: start; }
.dd-pic > span { display: grid; gap: 4px; }
.dd-pic > span b, .dd-pic > span small { display: block; }
.dd-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #F3F1EE; border-radius: 12px; padding: 10px; margin-bottom: 6px; }
.dd-ind .all { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 6px; padding-top: 14px; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.dd-ind .all svg, .dd-feature span svg { width: 15px; height: 15px; }
.dd-feature { background: var(--card-dark) !important; align-content: start; gap: 6px !important; padding: 16px !important; box-shadow: inset 0 0 0 1px var(--inset); }
.dd-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #F3F1EE; border-radius: 12px; padding: 8px; margin-bottom: 4px; }
.dd-feature span { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent); font-weight: 600; font-size: 0.88rem; }
/* The burger and the drawer */
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; place-items: center; align-content: center; gap: 5px; padding: 0; }
.burger span { display: block; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform 200ms ease; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.drawer { position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 0; z-index: 49; overflow-y: auto; background: var(--paper); padding: 8px max(16px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; gap: 0; }
.drawer[hidden] { display: none; }
html.drawer-open { overflow: hidden; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; font: 400 1.4rem/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 200ms ease; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer details div { display: grid; padding: 0 4px 14px; }
.drawer details a { padding: 10px 0; color: var(--muted); text-decoration: none; font-size: 1.02rem; }
.drawer details a:hover, .drawer details a[aria-current] { color: var(--ink); }
.drawer-price { display: block; padding: 18px 4px; border-bottom: 1px solid var(--line); font: 400 1.4rem/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.drawer-cta { justify-content: center; margin-top: 22px; min-height: 52px; }
@media (max-width: 1200px) {
  .nav-main { display: none; }
  .burger { display: grid; flex: none; }
  .nav .theme-btn, .nav .lang-btn { margin-left: auto; }
  .nav .lang-btn + .theme-btn { margin-left: 0; }
}
/* Size pages (tools/sizes.mjs): the drawing, the dashed neighbouring sizes, the key and the links to other sizes. */
.sz-svg[hidden] { display: none; }
.sz-svg { width: 100%; height: auto; border-radius: 18px; background: var(--stage); }
.sz-ghost { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sz-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 0.82rem; }
.sz-key span { display: inline-block; width: 14px; height: 10px; margin-left: 6px; } .sz-key span:first-child { margin-left: 0; }
.sz-key .k-art { background: var(--sage); box-shadow: inset 0 0 0 1px var(--ink); } .sz-key .k-ghost { border: 1px dashed var(--muted); box-sizing: border-box; }
.sz-scroll { overflow-x: auto; border-radius: 18px; background: var(--stage); }
.sz-all { display: block; width: 100%; min-width: 640px; height: auto; } .sz-all .ct-lbl { font-size: 19px; } .sz-all a:hover .ct-art { fill: var(--accent); }
.g-wrap .asks tbody th a { white-space: nowrap; }
.sz-more { margin-top: clamp(40px, 5vw, 64px); } .sz-more h2 { font-weight: 300; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); letter-spacing: -0.015em; margin-bottom: 14px; }
.sz-more p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sz-more a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--hair); color: var(--ink); text-decoration: none; font-family: var(--f-mono); font-size: 0.92rem; }
.sz-more a:hover { background: var(--chip); }
@media (max-width: 520px) { .langs { gap: 4px; } .langs .bub { padding: 7px 8px; font-size: 0.8rem; }  }
@media (max-width: 400px) { .langs .bub { padding: 6px 6px; font-size: 0.76rem; } }
/* v1.38, comments 3a8e0d61 and b4e96427: « padding above this section seems a bit high » and « this entire section should be viewable all at once on desktop ». The section fits in one 1440 × 900 screen. */
@media (min-width: 901px) {
  #how { padding-block: clamp(28px, 2.8vw, 44px); }
  #how .sec-head { margin-bottom: clamp(20px, 2.2vw, 30px); }
  #how .s3 .body { padding: 22px 26px 4px; gap: 8px; }
  #how .s3 .n { width: 50px; height: 50px; font-size: 1.6rem; margin-bottom: 4px; }
  #how .s3 .vis { min-height: 200px; padding: 10px 22px 20px; }
  #how .steps-foot { margin-top: 14px; padding-top: 12px; }
  #how .struck { gap: 3px; }
  #how .sec-head { gap: 14px; }
  #how .sec-head p { max-width: 62em; }
  #how .s3 .vis { padding: 6px 22px 14px; }
}
/* v1.39, the user's pick « let's do A » (thread c6110da6): three plans, a quote line, and what every plan includes said once (thread c9b9d56c « as it reads it's just very overwhelming of info »). */
#pricing .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pricing .plan ul { gap: 8px; }
.plan li span { text-wrap: pretty; }
.plans-quote { max-width: 1120px; margin: clamp(14px, 1.6vw, 20px) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px clamp(20px, 2.4vw, 30px); border-radius: 14px; background: #F7F7F7; color: #141414; }
.plans-quote p { margin: 0; color: #3E3C3C; } .plans-quote b { color: #141414; }
.plans-quote .btn { background: #fff; color: #141414; border: 1px solid #DADADA; box-shadow: 0 3px 0 0 var(--edge); }
.plans-all { max-width: 1120px; margin: clamp(18px, 2vw, 26px) auto 0; text-align: center; }
.plans-all > p { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
.plans-all ul { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: var(--muted); font-size: 0.95rem; }
.plans-all li { display: inline-flex; align-items: center; gap: 8px; }
.plans-all li svg { width: 16px; height: 16px; stroke: var(--good, #2F6B3F); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { #pricing .plans { grid-template-columns: 1fr; max-width: 480px; } .plans-quote { max-width: 480px; } .plans-all ul { flex-direction: column; align-items: flex-start; max-width: 480px; margin-inline: auto; } }

/* Responsive fixes from research/2026-10-23-responsive (v1.45). The bottom dock never covers the footer's last line on
   phones, and « Book a call » leaves the nav bar wherever the bar would run past the screen. */
@media (max-width: 760px) { footer { padding-bottom: 96px; } }
@media (max-width: 1320px) { .nav .nav-call { display: none; } }
/* Landscape phones keep the screen for the page: the nav bar already holds the same button as the dock (m2). */
@media (max-height: 480px) { .dock { display: none; } footer { padding-bottom: 8px; } }
.sz-scroll { max-width: 100%; min-width: 0; }
.calc-tool:has(.sz-scroll) { grid-template-columns: minmax(0, 1fr); }
/* The guide tables' 600 px minimum comes after the phone rule, so phones reset it here (M5). */
@media (max-width: 700px) { .g-wrap .asks table { min-width: 0; } }
/* Overflow sweep, 24 Oct 2026. Below 360 px the nav bar's pieces shrink so the burger, the theme button and the FR link
   stay on screen down to 320 px, and the large buttons may wrap on the narrowest phones (French labels run long). */
@media (max-width: 360px) {
  .nav .wrap { gap: 4px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .brand { font-size: 1rem; gap: 5px; min-width: 0; } .brand svg { width: 22px; height: 22px; }
  .nav .lang-btn { height: 30px; padding: 0 7px; }
  .nav .theme-btn { width: 32px; height: 32px; }
  .burger { width: 36px; height: 36px; }
  .nav .btn-tape { padding: 0 10px; font-size: 0.8rem; }
}
@media (max-width: 340px) { .btn-lg { white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; } }
/* At 320 px the wordmark touched the FR link (24 Oct 2026). A narrower « Free model » button frees the room for a gap. */
@media (max-width: 340px) { .nav .btn-tape { padding: 0 7px; } .nav .brand { margin-right: 6px; } }
/* Between 561 and 640 px the bar keeps its desktop gap of 28 px, which pushed the burger 3 px past the edge with the FR link. */
@media (min-width: 561px) and (max-width: 640px) { .nav .wrap { gap: 18px; } }
/* « Compatible with » stands as its own section between the hero and « Send us your product photos » (the user, 24 Oct 2026,
   thread 7fc798e0). The hero keeps only the tab that joins it to the next section. */
.strip.strip-tab { margin-top: 0; padding-bottom: 46px; }
.strip.compat-sec { margin: 0; padding: 0; }
.hero.panel:has(+ .compat-sec) { margin-bottom: clamp(12px, 2vw, 24px); }
.compat-sec + .statement-sec { padding-top: clamp(28px, 4vw, 56px); }
/* Industries keeps its title and lede but not the 3D stage and the logos, which the home page already shows (the user,
   24 Oct 2026, thread 02e3e13d). */
.hero.panel.solo { padding-bottom: clamp(32px, 4vw, 64px); border-radius: var(--r); margin-bottom: clamp(32px, 4vw, 56px); }
.hero.solo .wrap { grid-template-columns: minmax(0, 1fr); }
.hero.solo .hero-copy { max-width: 820px; }
/* The four trades share one card that changes from the sofa to the lamp, the table and the art, by itself or from its
   tabs (the user, 24 Oct 2026, thread 242d5816). The panels sit in one grid cell, so the card keeps the tallest height
   and never jumps. */
.tcard { display: grid; gap: 16px; }
.tc-tabs { justify-content: center; flex-wrap: nowrap; }
.tc-tabs button { position: relative; overflow: hidden; flex: 0 0 auto; white-space: nowrap; }
.tc-tabs .tc-time { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--fill, #ECFE72); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.tcard.auto .tc-tabs button[aria-selected="true"] .tc-time { animation: tc-time var(--tc-ms, 7000ms) linear forwards; }
.tcard.hold .tc-tabs .tc-time { animation-play-state: paused; }
@keyframes tc-time { to { transform: scaleX(1); } }
.tc-panels { display: grid; gap: 0; }
.tc-panels > .trade { grid-area: 1 / 1; transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s; }
.tc-panels > .trade[inert] { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms; }
.tc-panels > .trade .tcopy { order: 0 !important; }
@media (max-width: 480px) {
  .tc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 6px; }
  .tc-tabs button { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 5px 2px 6px; border-radius: 16px; font-size: 0.74rem; }
  .tc-tabs button img { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .tc-panels > .trade, .tc-panels > .trade[inert] { transition: none; transform: none; } }
/* « Why choose Roomhero? » as us against them (the user, 24 Oct 2026, thread 7995ec87). One grid, three columns: the point,
   most providers, and Roomhero on a raised dark column that runs the full height. Rows come in one after the other. */
.vs-table { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1.18fr); grid-template-rows: repeat(10, auto);
  max-width: 1080px; margin: clamp(28px, 4vw, 48px) auto 0; column-gap: 0; }
.vs-table > * { grid-row: var(--r, 1); }
.vs-us-bg { grid-column: 3; grid-row: 1 / -1; margin: -14px 0; border-radius: 28px; background: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.45), 0 0 0 1px var(--hair); position: relative; overflow: hidden; }
.vs-us-bg::before { content: ""; position: absolute; inset: -40% -60% auto auto; width: 120%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--tape) 34%, transparent), transparent 70%); opacity: .55; }
.vs-h { grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 22px clamp(14px, 2vw, 26px) 18px; font: 600 .8rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vs-h-them { grid-column: 2; }
.vs-h-us { grid-column: 3; position: relative; color: var(--panel); font: 600 1.35rem/1 var(--f-mark); letter-spacing: -0.02em; text-transform: none; }
.vs-h-us .logo { width: 30px; height: 30px; }
.vs-h-us .logo .logo-tile { fill: var(--tape); } .vs-h-us .logo .logo-mark { fill: var(--tape-ink); stroke: var(--tape-ink); }
.vs-k, .vs-them, .vs-us { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px clamp(14px, 2vw, 26px); border-top: 1px solid var(--hair); }
.vs-k { grid-column: 1; padding-left: 0; font: 600 1rem/1.3 var(--f-body); color: var(--ink); }
.vs-them { grid-column: 2; color: var(--muted); font-size: .98rem; }
.vs-them svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, transparent); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.vs-them span { position: relative; }
/* A real line-through, so the strike follows each line when a cell wraps (the user, 24 Oct 2026, thread 39ae4155). */
.vs-them span { text-decoration: line-through 1.5px; text-decoration-color: transparent; }
.vs-us { grid-column: 3; position: relative; color: var(--panel); font: 600 1.06rem/1.3 var(--f-body); border-top-color: color-mix(in srgb, var(--panel) 14%, transparent); }
.vs-us svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--tape); fill: none; stroke: var(--tape-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vs-foot { grid-column: 3; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px clamp(14px, 2vw, 26px) 26px; }
.vs-foot .btn-primary { background: var(--tape); color: var(--tape-ink); border-color: var(--tape); }
.vs-more { color: var(--panel); opacity: .75; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.vs-more:hover { opacity: 1; }
/* The entrance: each row's « them » is struck through, then Roomhero's answer arrives with its tick. */
.vs-table.rv { opacity: 1; transform: none; }
.vs-them, .vs-us, .vs-k { transition: opacity 500ms ease calc(var(--i, 0) * 110ms), transform 600ms cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms); }
.vs-table:not(.in) .vs-k, .vs-table:not(.in) .vs-them { opacity: 0; transform: translateY(10px); }
.vs-table:not(.in) .vs-us { opacity: 0; transform: translateX(-14px); }
.vs-us { transition-delay: calc(var(--i, 0) * 110ms + 240ms); }
.vs-them span { transition: text-decoration-color 420ms ease calc(var(--i, 0) * 110ms + 420ms); }
.vs-table.in .vs-them span { text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.vs-us svg { transition: transform 420ms cubic-bezier(.3,1.6,.5,1) calc(var(--i, 0) * 110ms + 380ms); }
.vs-table:not(.in) .vs-us svg { transform: scale(0); }
@media (prefers-reduced-motion: reduce) { .vs-table *, .vs-table *::after { transition: none !important; } .vs-table:not(.in) .vs-k, .vs-table:not(.in) .vs-them, .vs-table:not(.in) .vs-us { opacity: 1; transform: none; } .vs-table:not(.in) .vs-us svg { transform: none; } }
/* On phones each point becomes a small card: the point, what most providers do, then Roomhero's answer. */
@media (max-width: 720px) {
  .vs-table { display: flex; flex-direction: column; gap: 0; }
  .vs-us-bg, .vs-h-k, .vs-h-them { display: none; }
  .vs-h-us { padding: 0 0 14px; color: var(--ink); justify-content: center; }
  .vs-k { min-height: 0; padding: 18px 0 6px; border-top: 1px solid var(--hair); }
  .vs-them { min-height: 0; padding: 4px 0 10px; border: 0; }
  .vs-us { min-height: 0; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--ink); }
  .vs-foot { align-items: stretch; padding: 22px 0 0; }
  .vs-foot .btn-primary { justify-content: center; }
  .vs-more { color: var(--ink); text-align: center; }
}
:root[data-theme="dark"] .vs-us svg { background: var(--tape-ink); stroke: var(--tape); }
/* Step 3 shows the model live on the shop's own product page (the user, 24 Oct 2026, thread dee022b0): the photo turns
   into a 3D piece, « View in your room » appears beside « Add to cart », and the page goes live. */
.livepage { position: relative; width: 100%; max-width: 360px; background: #FBFAF7; color: #1D1D1B; border-radius: 16px; box-shadow: 0 26px 54px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06); overflow: visible; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.lp-bar { display: flex; align-items: center; gap: 5px; padding: 9px 11px; background: #EFEEEA; border-radius: 16px 16px 0 0; border-bottom: 1px solid #E2E1DC; }
.lp-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #D3D2CC; }
.lp-bar span { margin-left: 8px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 6px; padding: 4px 8px; font-size: .66rem; color: #6A6A64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-bar svg { width: 8px; height: 9px; flex: none; fill: #8A8A84; stroke: #8A8A84; }
.lp-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; padding: 12px; }
.lp-photo { position: relative; aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle at 50% 62%, #fff, #EEECE6 72%); display: grid; place-items: center; overflow: hidden; }
.lp-photo img { width: 84%; height: 84%; object-fit: contain; transform-origin: 50% 80%; }
.lp-3d { position: absolute; right: 7px; top: 7px; font: 700 .62rem/1 -apple-system, sans-serif; background: #131312; color: #fff; border-radius: 5px; padding: 3px 5px; }
.lp-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: center; }
.lp-name { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.lp-price { font-size: .76rem; color: #55554F; }
.lp-stars { display: flex; gap: 3px; margin-bottom: 2px; } .lp-stars i { height: 5px; flex: 1; border-radius: 3px; background: #E6E4DE; } .lp-stars i:last-child { flex: .5; }
.lp-ar, .lp-cart { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border-radius: 999px; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.lp-ar { background: #131312; color: #fff; position: relative; }
.lp-ar svg { width: 11px; height: 11px; flex: none; }
.lp-cart { background: #fff; color: #131312; box-shadow: inset 0 0 0 1.2px #131312; }
.lp-live { display: flex; justify-content: center; margin: 0 12px 12px; align-items: center; gap: 7px; white-space: nowrap; background: var(--tape); color: var(--tape-ink); font: 700 .74rem/1 var(--f-body); padding: 8px 13px; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(0,0,0,.45); }
.lp-live i { width: 7px; height: 7px; border-radius: 50%; background: #1E7A4C; box-shadow: 0 0 0 0 rgba(30,122,76,.5); }
/* The entrance, once the step is seen. */
.s3:not(.in) .livepage .lp-ar { opacity: 0; transform: scale(.8); }
.s3:not(.in) .livepage .lp-live { opacity: 0; transform: translateY(8px); }
.s3:not(.in) .livepage .lp-3d { opacity: 0; }
.livepage .lp-ar { transition: opacity 400ms ease 700ms, transform 500ms cubic-bezier(.3,1.5,.5,1) 700ms; }
.livepage .lp-live { transition: opacity 400ms ease 1200ms, transform 500ms cubic-bezier(.2,.7,.2,1) 1200ms; }
.livepage .lp-3d { transition: opacity 300ms ease 400ms; }
.lp-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.lp-photo img { transition: opacity 500ms ease; }
.lp-photo.live canvas { opacity: 1; } .lp-photo.live img { opacity: 0; }
.s3.in .livepage .lp-ar::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px var(--tape); opacity: 0; animation: lp-ring 2.4s ease-out 1.3s infinite; }
.s3.in .livepage .lp-live i { animation: lp-dot 1.8s ease-out 1.6s infinite; }
@keyframes lp-ring { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes lp-dot { 0% { box-shadow: 0 0 0 0 rgba(30,122,76,.5); } 100% { box-shadow: 0 0 0 7px rgba(30,122,76,0); } }
@media (prefers-reduced-motion: reduce) { .livepage *, .livepage *::after { animation: none !important; transition: none !important; } .s3:not(.in) .livepage .lp-ar, .s3:not(.in) .livepage .lp-live, .s3:not(.in) .livepage .lp-3d { opacity: 1; transform: none; } }
/* Pricing (the user, 24 Oct 2026): bigger Monthly and Yearly (thread 70aaa6cd), and a switch between furniture and art
   plans under it (thread 84e95b3f). */
#pricing .billing button { font-size: 1.05rem; min-height: 46px; padding: 0 8px; }
#pricing .billing button em { font-size: .8rem; }
#pricing .billing.off { visibility: hidden; }
.seg { display: flex; width: max-content; max-width: 100%; margin: 18px auto 0; padding: 5px; gap: 4px; border-radius: 999px; background: var(--chip, rgba(127,127,127,.12)); }
.seg button { border: 0; background: transparent; color: var(--muted); font: 600 .98rem/1 var(--f-body); min-height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg-panel { margin-top: clamp(18px, 2.4vw, 28px); width: 100%; }
.seg-panel[hidden] { display: none; }
#pricing .plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 860px; margin-inline: auto; }
.plans.two .amount small { white-space: nowrap; }
@media (max-width: 1000px) { #pricing .plans.two { grid-template-columns: 1fr; max-width: 480px; } }
@media (max-width: 420px) { .seg { width: 100%; } .seg button { flex: 1; padding: 0 10px; font-size: .86rem; min-width: 0; white-space: normal; line-height: 1.15; } }
/* « Our quality standards », a short band that links to the full list (the user, 24 Oct 2026, thread 3a088e27). */
/* Each plan card lists everything included behind « See everything included » (the user, 24 Oct 2026, thread a5298fd2). */
.plan .incl { border-top: 1px solid var(--hair); padding-top: 10px; }
.plan .incl summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font: 600 .86rem/1.2 var(--f-body); color: var(--ink); }
.plan .incl summary::-webkit-details-marker { display: none; }
.plan .incl summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; }
.plan .incl[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.plan .incl ul { margin-top: 10px; }
.plans-quote a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.plan .incl { margin-top: auto; } .plan .incl + .btn { margin-top: 0; }

/* The source of each figure, in brackets after its sentence (the user, 24 Oct 2026, thread 76ecee89) */
.fig p .fig-src { color: var(--muted); font-size: 0.82em; text-decoration: underline; text-underline-offset: 2px; display: inline-block; }

/* Retailers' public quotes on 3D (test for the user, 24 Oct 2026, thread 2dd0844d) */
.vx-feature { position: relative; max-width: 1120px; margin: 0 auto clamp(28px, 4vw, 44px); padding: clamp(24px, 3.4vw, 44px); border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 22px; }
.vx-feature blockquote, .vx-card blockquote { margin: 0; }
.vx-feature blockquote p { margin: 0; color: var(--ink); font: 300 clamp(1.25rem, 1rem + 0.9vw, 1.75rem)/1.4 var(--f-display); letter-spacing: -0.015em; }
.vx-q { width: 28px; fill: var(--accent); }
.vx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vx-chip { padding: 6px 12px; border-radius: 999px; background: #ECFE72; color: #141414; font-size: 0.8rem; font-weight: 600; }
.vx-wall { max-width: 1120px; margin: 0 auto; height: 460px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.vx-col.all { display: none; }
.vx-track { display: flex; flex-direction: column; animation: vx-up 34s linear infinite; }
.vx-col.c1 .vx-track { animation-duration: 42s; animation-delay: -12s; }
.vx-col.c2 .vx-track { animation-duration: 38s; animation-delay: -24s; }
.vx-col.all .vx-track { animation-duration: 90s; }
.vx-wall:hover .vx-track, .vx-wall:focus-within .vx-track { animation-play-state: paused; }
@keyframes vx-up { to { transform: translateY(-50%); } }
@media (max-width: 760px) { .vx-wall { grid-template-columns: 1fr; height: 420px; } .vx-col.all { display: block; } .vx-col.c0, .vx-col.c1, .vx-col.c2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .vx-track { animation: none; } .vx-track > [aria-hidden="true"] { display: none; } .vx-wall { height: auto; -webkit-mask-image: none; mask-image: none; } .vx-col.all { display: none !important; } .vx-col.c0, .vx-col.c1, .vx-col.c2 { display: block !important; } }
@media (prefers-reduced-motion: reduce) and (max-width: 760px) { .vx-wall { grid-template-columns: 1fr; } }
.vx-card { margin: 0 0 16px; padding: 22px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 16px; }
.vx-card blockquote p { margin: 0; color: var(--ink); font-size: 1.04rem; line-height: 1.55; }
.vx-who { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.vx-who > span:not(.vx-av) { display: grid; min-width: 0; flex: 1; }
.vx-who b { color: var(--ink); font-weight: 600; }
.vx-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ECFE72; color: #141414; font-weight: 600; font-size: 0.8rem; letter-spacing: .02em; }

/* Pricing spacing, tightened (the user, 24 Oct 2026, thread 041d815d: « why so much padding below and above this
   sentence? Review the padding spaces on this entire section »). */
#pricing { padding-block: clamp(48px, 5.5vw, 80px); }
#pricing .sec-head { margin-bottom: clamp(16px, 2vw, 24px); }
#pricing .price-row { gap: 8px; margin-bottom: clamp(14px, 1.6vw, 20px); }
#pricing .seg { margin-top: 0; }
#pricing .seg-panel { margin-top: clamp(16px, 2vw, 24px); }
#pricing .call { margin-top: clamp(16px, 2vw, 24px); }

/* Quality band, redone (24 Oct 2026, threads 6ba49ac4 and 45d5e1b5): the promise on the left, four measured checks on the right. */
.qx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1180px; }
.qx-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.qx-eyebrow { font: 600 .78rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qx-head h2 { font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem); max-width: 14em; }
.qx-head p { color: var(--muted); max-width: 30em; margin: 0; }
.qx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qx-card { padding: clamp(20px, 2.2vw, 28px); border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.qx-num { font-family: var(--f-display); font-stretch: var(--wide); font-weight: 300; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem); line-height: .9; letter-spacing: -0.05em; color: var(--ink); }
.qx-num small { font: 600 .9rem/1 var(--f-body); letter-spacing: 0; margin-left: 6px; color: var(--muted); }
.qx-card h3 { font-size: 1.12rem; font-weight: 600; margin: 4px 0 0; }
.qx-card p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }
@media (max-width: 900px) { .qx { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .qx-grid { grid-template-columns: 1fr; } }

/* The Google search mockup, made small enough for a benefit card (threads 79dbe3b7 and 35eec095, 24 Oct 2026). */
.bx-seo .seo-mock { margin-top: auto; padding: 14px 0 14px 14px; border-radius: 16px; }
.bx-seo .seo-win { font-size: 0.8rem; }
.bx-seo .seo-bar { padding: 8px 10px; gap: 5px; } .bx-seo .seo-bar i { width: 8px; height: 8px; }
.bx-seo .seo-head { gap: 10px; padding: 10px 12px 6px; } .bx-seo .seo-word { font-size: 1.05rem; } .bx-seo .seo-field { height: 28px; padding: 0 10px; } .bx-seo .seo-field svg { width: 14px; height: 14px; }
.bx-seo .seo-tabs { gap: 14px; padding: 2px 12px 0; font-size: 0.72rem; } .bx-seo .seo-tabs span { padding: 6px 2px; }
.bx-seo .seo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; }
.bx-seo .seo-card { padding: 6px 7px 9px; gap: 4px; border-radius: 9px; } .bx-seo .seo-card img { margin-top: 14px; } .bx-seo .seo-card b { height: 4px; }
.bx-seo .seo-3d { top: 5px; left: 5px; padding: 3px 5px; font-size: 0.55rem; }
.bx-seo .seo-cursor { width: 16px; height: 16px; top: 70%; }

/* « About us », layout B with the team line of D (the user, 24 Oct 2026, thread 2124ef8a): taller staggered photos and one line under them. */
.about-duo.about-b { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); align-items: start; }
.about-b .about-left { display: grid; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }
.about-b .about-pair { align-items: start; gap: 16px; }
.about-b .about-pair .about-photo { aspect-ratio: 3 / 4; }
.about-b .about-pair .about-photo:nth-child(2) { margin-top: clamp(40px, 14vw, 210px); }
.about-b .about-fact { margin: 0; color: var(--ink); font: 300 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.2 var(--f-display); letter-spacing: -.02em; padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--line); }
@media (max-width: 860px) { .about-duo.about-b { grid-template-columns: 1fr; } .about-b .about-pair .about-photo:nth-child(2) { margin-top: 40px; } }
.bx-seo .seo-mock { padding-right: 14px; }
.bx-seo .seo-win { border-radius: 12px; }
.bx-seo .seo-3d { font-size: 0.66rem; padding: 3px 6px; }
.bx-seo .seo-card img { aspect-ratio: 4 / 3; margin-top: 16px; }
@media (max-width: 1000px) { .bx-seo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: center; } .bx-seo > h3, .bx-seo > p { grid-column: 1; } .bx-seo .seo-mock { grid-column: 2; grid-row: 1 / span 2; margin: 0; } }
@media (max-width: 640px) { .bx-seo { display: flex; } }

/* One vertical rhythm for the home page (the user, 24 Oct 2026, thread 4453d79c: « Please review the vertical padding
   throughout the entire homepage. Make it properly balanced »). Every section break is one gap of 56 to 96 px on the 8 px
   grid, after the University of Maryland and PDS Health design systems (research/2026-10-24-spacing.md). Two plain
   sections in a row share that one gap instead of adding their paddings. */
.sec { padding-block: clamp(56px, 6.7vw, 96px); }
#how { padding-block: clamp(56px, 6.7vw, 96px); }
.sec:not(.panel) + .sec:not(.panel) { padding-top: 0; }
#journey.sec { padding-block: clamp(56px, 6.7vw, 96px); }

/* Drawn icons in the « What you sell » switch, in place of the emojis (the user, 24 Oct 2026, thread 8524b0d3: « i don't like the apple emojis. find better icons. Make them catchy »). */
.seg button { display: inline-flex; align-items: center; gap: 10px; }
.seg-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ECFE72; color: #141414; transition: transform 250ms cubic-bezier(.3, 1.5, .5, 1); }
.seg-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg button[aria-pressed="false"] .seg-ic { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.seg button:hover .seg-ic { transform: rotate(-8deg) scale(1.08); }
@media (max-width: 420px) { .seg button { gap: 6px; justify-content: center; } .seg-ic { width: 24px; height: 24px; } .seg-ic svg { width: 15px; height: 15px; } }
@media (prefers-reduced-motion: reduce) { .seg-ic { transition: none; } }
#for + #how { padding-top: 0; }
.final.panel { margin-top: 16px; }
@media (max-width: 1000px) { .bx-seo > h3 { align-self: end; } .bx-seo > p { align-self: start; } }