/* home.css — the homepage (v2 with the hero laid out as headline ABOVE a 1240px video card). Loaded after /styles.css (shared tokens + footer).
   Everything here is theme-driven: four styles set on <html data-theme="…">, each
   redefining the tokens below. Structure/layout is shared by all four. */

/* =========================================================
   1. THEME TOKENS
========================================================= */
:root,
html[data-theme="ink"]{
  --bg:#0c0c0e; --fg:#f3f1ec; --fg-2:rgba(243,241,236,.62); --fg-3:rgba(243,241,236,.38);
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.22);
  --card:#141417; --card-2:#1c1c20; --accent:#e08e68;
  --hero-bg:#26262a; --hero-fg:#f3f1ec;
  --wire-bg:#0f0f12; --wire-block:#25252a; --wire-block-2:#303036; --wire-line:rgba(255,255,255,.08);
  --pill-bg:rgba(20,20,23,.72); --pill-active:rgba(255,255,255,.12);
  --tab-track:rgba(255,255,255,.05); --tab-fill:rgba(255,255,255,.14);
  --tile-bg:#efede8; --tile-line:rgba(255,255,255,0);
  --btn-bg:#f3f1ec; --btn-fg:#111;
  --display:var(--sans); --h1-weight:700; --giant-weight:700; --giant-ls:-.05em; --outline-alpha:.28;
  --radius:22px; --radius-s:12px; --logo-filter:none;
  --glass:none;
}
html[data-theme="paper"]{
  --bg:#f4f0e7; --fg:#23211d; --fg-2:#7d766a; --fg-3:#b3ac9f;
  --line:rgba(35,33,29,.14); --line-2:rgba(35,33,29,.28);
  --card:#fbf9f4; --card-2:#efeae0; --accent:#c9653f;
  --hero-bg:#dcd8cf; --hero-fg:#23211d;
  --wire-bg:#f1ede4; --wire-block:#dcd6c9; --wire-block-2:#cfc8b9; --wire-line:rgba(35,33,29,.1);
  --pill-bg:rgba(251,249,244,.78); --pill-active:rgba(35,33,29,.08);
  --tab-track:rgba(35,33,29,.04); --tab-fill:rgba(35,33,29,.11);
  --tile-bg:#ffffff; --tile-line:rgba(35,33,29,.08);
  --btn-bg:#23211d; --btn-fg:#f4f0e7;
  --display:"Fraunces",Georgia,serif; --h1-weight:500; --giant-weight:300; --giant-ls:-.03em; --outline-alpha:.35;
  --radius:18px; --radius-s:10px; --logo-filter:invert(1);
  --glass:none;
}
html[data-theme="mesh"]{
  --bg:#f5f2ec; --fg:#1d1b18; --fg-2:rgba(29,27,24,.62); --fg-3:rgba(29,27,24,.38);
  --line:rgba(29,27,24,.1); --line-2:rgba(29,27,24,.2);
  --card:rgba(255,255,255,.55); --card-2:rgba(255,255,255,.82); --accent:#e08e68;
  --hero-bg:#e5e2dc; --hero-fg:#1d1b18;
  --wire-bg:rgba(255,255,255,.5); --wire-block:rgba(29,27,24,.09); --wire-block-2:rgba(29,27,24,.15); --wire-line:rgba(29,27,24,.08);
  --pill-bg:rgba(255,255,255,.55); --pill-active:rgba(255,255,255,.95);
  --tab-track:rgba(29,27,24,.06); --tab-fill:rgba(29,27,24,.16);   /* dark tints: white-on-white barely showed on the translucent card */
  --tile-bg:rgba(255,255,255,.92); --tile-line:rgba(29,27,24,.07);
  --btn-bg:#1d1b18; --btn-fg:#fff;
  --display:var(--sans); --h1-weight:600; --giant-weight:600; --giant-ls:-.045em; --outline-alpha:.25;
  --radius:28px; --radius-s:14px; --logo-filter:invert(1);
  --glass:blur(18px) saturate(1.4);
}
html[data-theme="concrete"]{
  --bg:#d6d5d1; --fg:#141414; --fg-2:#55544f; --fg-3:#8a8983;
  --line:rgba(20,20,20,.35); --line-2:#141414;
  --card:#e2e1dd; --card-2:#cbcac5; --accent:#ff22c1;
  --hero-bg:#c4c3bf; --hero-fg:#141414;
  --wire-bg:#dcdbd7; --wire-block:#b9b8b3; --wire-block-2:#a5a49f; --wire-line:rgba(20,20,20,.3);
  --pill-bg:#e2e1dd; --pill-active:#141414;
  --tab-track:#cbcac5; --tab-fill:#ff22c1;
  --tile-bg:#ecebe7; --tile-line:rgba(20,20,20,.28);
  --btn-bg:#141414; --btn-fg:#d6d5d1;
  --display:var(--sans); --h1-weight:800; --giant-weight:800; --giant-ls:-.06em; --outline-alpha:1;
  --radius:0px; --radius-s:0px; --logo-filter:invert(1);
  --glass:none;
}

/* =========================================================
   2. BASE (overrides the dark defaults from styles.css)
========================================================= */
/* Geist Sans (Vercel, OFL) — self-hosted variable font, used for the hero title only */
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .5s,color .5s}
.page{background:var(--bg);transition:background-color .5s}           /* opaque so the footer drawer never bleeds through */
.page > *:not(.bg){position:relative;z-index:1}
.page > .v2nav{position:sticky;z-index:20}   /* the rule above would otherwise override the nav's sticky positioning AND flatten its z-index to 1, letting sections paint over it */
a{color:inherit}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:0 0 14px}
html[data-theme="concrete"] .eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.08em;color:var(--accent)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--fg);font:inherit;font-weight:600;font-size:15px;line-height:1;text-decoration:none;cursor:pointer;background:transparent;
  transition:background .2s,border-color .2s,transform .2s,color .2s}
.btn:hover{background:var(--pill-active)}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.ghost{border-color:var(--line-2)}
.btn.lg{padding:16px 28px;font-size:16.5px}
html[data-theme="concrete"] .btn{border-radius:0;border-width:1.5px;border-color:var(--fg)}
html[data-theme="concrete"] .btn.primary:hover{background:var(--accent);color:#fff}

/* =========================================================
   3. BACKGROUND LAYER (sticky 100vh painter inside .page)
========================================================= */
.bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.bg-inner{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--bg);transition:background-color .5s}
.bg-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:0;transition:opacity .8s;will-change:transform}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.bg-grain{position:absolute;inset:-50%;opacity:0;mix-blend-mode:overlay;transition:opacity .8s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-spot{position:absolute;inset:0;opacity:0;transition:opacity .8s;
  background:radial-gradient(640px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.075),transparent 62%)}

/* -- ink: deep black, two slow aurora blobs, cursor spotlight, light grain */
html[data-theme="ink"] .bg-blob{opacity:.6}
html[data-theme="ink"] .b1{width:60vw;height:60vw;left:-15vw;top:-20vh;background:radial-gradient(circle,#2b4f96 0%,transparent 65%);animation:drift-a 26s ease-in-out infinite alternate}
html[data-theme="ink"] .b2{width:50vw;height:50vw;right:-12vw;top:20vh;background:radial-gradient(circle,#7d3a28 0%,transparent 65%);animation:drift-b 31s ease-in-out infinite alternate}
html[data-theme="ink"] .b3{width:44vw;height:44vw;left:25vw;bottom:-25vh;background:radial-gradient(circle,#1f5a55 0%,transparent 65%);animation:drift-c 37s ease-in-out infinite alternate}
html[data-theme="ink"] .bg-grain{opacity:.07}
html[data-theme="ink"] .bg-spot{opacity:1}

/* -- paper: warm paper, drafting grid + floorplan line-work (canvas, parallax) */
html[data-theme="paper"] .bg-inner{
  background-image:linear-gradient(rgba(35,33,29,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(35,33,29,.06) 1px,transparent 1px);
  background-size:48px 48px;background-position:center top}
html[data-theme="paper"] .bg-canvas{opacity:1}
html[data-theme="paper"] .bg-grain{opacity:.05}

/* -- mesh: four pastel blobs, heavy blur, glass cards */
html[data-theme="mesh"] .bg-blob{opacity:.85;filter:blur(90px)}
html[data-theme="mesh"] .b1{width:55vw;height:55vw;left:-10vw;top:-15vh;background:radial-gradient(circle,#f0b08c 0%,transparent 62%);animation:drift-a 24s ease-in-out infinite alternate}
html[data-theme="mesh"] .b2{width:50vw;height:50vw;right:-10vw;top:5vh;background:radial-gradient(circle,#c8d6e8 0%,transparent 62%);animation:drift-b 29s ease-in-out infinite alternate}
html[data-theme="mesh"] .b3{width:48vw;height:48vw;left:20vw;bottom:-20vh;background:radial-gradient(circle,#c3d1b8 0%,transparent 62%);animation:drift-c 34s ease-in-out infinite alternate}
html[data-theme="mesh"] .b4{width:36vw;height:36vw;right:15vw;bottom:0;background:radial-gradient(circle,#ecd9b4 0%,transparent 62%);animation:drift-a 40s ease-in-out infinite alternate-reverse}
html[data-theme="mesh"] .bg-grain{opacity:.04}

/* -- concrete: flat cool grey, heavy grain, vignette */
html[data-theme="concrete"] .bg-grain{opacity:.16;mix-blend-mode:multiply}
html[data-theme="concrete"] .bg-inner::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(20,20,20,.12) 100%)}

@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(12vw,8vh) scale(1.15)}}
@keyframes drift-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-10vw,14vh) scale(.95)}}
@keyframes drift-c{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,-10vh) scale(1.2)}}
html[data-motion="off"] .bg-blob{animation:none!important}
@media (prefers-reduced-motion:reduce){.bg-blob{animation:none!important}}

/* =========================================================
   4. NAV
========================================================= */
.v2nav{position:sticky;top:0;z-index:20;padding:16px 30px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid transparent;transition:background .35s,padding .35s,backdrop-filter .35s}
.v2nav-inner{width:min(1240px,100%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;   /* same 1240px cap as the sections below */
  border-radius:999px;border:1px solid transparent;padding:0;transition:background .35s,border-color .35s,box-shadow .35s,padding .35s}
/* once the page has scrolled (.is-floating from home.js) the bar itself goes clear and the inner container becomes a
   floating rounded pill that stays pinned. Outer padding shrinks by exactly what the pill's padding adds, so the
   nav's height never changes and the content below doesn't jump at the threshold. */
.v2nav.is-floating{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:6px 30px;border-bottom-color:transparent!important}   /* the pill carries its own outline; no full-width rule under it */
.v2nav.is-floating .v2nav-inner{padding:10px 14px 10px 24px;background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-color:var(--line);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
html[data-theme="concrete"] .v2nav-inner,html[data-theme="concrete"] .v2nav.is-floating .v2nav-inner{border-radius:0}
.v2nav.is-scrolled{border-bottom-color:transparent}   /* v3: no bar border at any scroll position; the floating pill has its own outline */
.v2nav .brand img{display:block;width:80px;height:auto;filter:var(--logo-filter);transition:width .35s}
.v2nav.is-floating .brand img{width:70px}   /* slightly smaller inside the floating pill */
.v2nav .links{display:flex;gap:4px}
.v2nav .links a{padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--fg-2);text-decoration:none;transition:.2s}
.v2nav .links a:hover{color:var(--fg);background:var(--pill-active)}
.v2nav .cta{display:flex;gap:10px}
.v2nav .btn{font-size:14px;padding:9px 16px}

/* =========================================================
   5. HERO — headline block on the page background, then the demo video in a rounded card (max 1240px)
========================================================= */
.hero{position:relative;text-align:center;padding:clamp(48px,8vh,96px) 30px clamp(36px,5vh,56px);color:var(--fg)}
.hero-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero h1{font-family:"Geist",var(--display);font-weight:900;font-size:80px;line-height:1;letter-spacing:-.045em;margin:0}   /* Geist Ultra Black (900), fixed 80px on desktop */
.hero .sub{margin:26px auto 0;max-width:34em;font-size:clamp(16px,1.6vw,21px);line-height:1.5;color:var(--fg-2)}
.hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px}
/* the video card: same 1240px cap as the sections below, 16:9, rounded; "grey" mode shows the flat block instead */
.hero-media{position:relative;width:min(1240px,100%);margin:clamp(32px,5vh,56px) auto 0;aspect-ratio:16/9;border-radius:28px;overflow:hidden;
  background:var(--hero-bg);box-shadow:0 40px 100px -40px rgba(0,0,0,.6);transition:background-color .5s}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#1d1d20}
html:not([data-hero="video"]) .hero-video{display:none}
.hero-down{width:40px;height:40px;margin:clamp(24px,4vh,40px) auto 0;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--fg-2);animation:bob 2.4s ease-in-out infinite}
.hero-down svg{width:18px;height:18px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* =========================================================
   5b. FLOATING-FURNITURE BAND — ported from the live page; canvases are transparent so the theme background shows through
========================================================= */
.float-furni{position:relative;height:60vh;overflow:hidden;isolation:isolate;background:transparent;border-bottom:1px solid var(--line)}   /* beats styles.css's paper background so the theme shows through */
.float-furni .ff-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.float-furni .ff-far{z-index:1;filter:blur(3px);opacity:.92}   /* distant layer — GPU-composited CSS blur is the depth cue */
.float-furni .ff-near{z-index:2}                                /* near layer — sharp, on top; drag-to-move lives here */
.float-furni .ff-copy{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:min(680px,86vw);text-align:center;pointer-events:none;
  font-family:var(--sans);font-weight:500;font-size:clamp(18px,2.8vw,28px);line-height:1.35;letter-spacing:-.01em;color:var(--fg)}
.float-furni .ff-copy p{margin:0}
@media (prefers-reduced-motion:reduce){ .float-furni .ff-far{filter:blur(2px)} }

/* =========================================================
   6. CAPABILITIES — Plan / Build / Refine
========================================================= */
.caps{padding:clamp(40px,8vh,110px) 0 0}
.cap{position:relative;width:min(1240px,calc(100% - 2*clamp(20px,4vw,56px)));margin:0 auto;padding:clamp(60px,10vh,140px) 0 clamp(60px,10vh,120px)}
.cap + .cap{border-top:1px solid var(--line)}

/* giant section word — outlined, fills left→right as it scrolls into view (--fill set by home.js) */
.giant{position:relative;display:block;width:fit-content;margin:0 0 -.12em;font-family:var(--display);font-weight:var(--giant-weight);
  font-size:clamp(38px,calc(17vw - 50px),200px);line-height:.9;letter-spacing:var(--giant-ls);font-variation-settings:"opsz" 144;user-select:none}
.cap[data-align="right"] .giant{margin-left:auto}
.giant .g-outline{color:transparent;-webkit-text-stroke:1.5px var(--fg);opacity:var(--outline-alpha)}
.giant .g-fill{position:absolute;inset:0;color:var(--fg);clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0);transition:clip-path .15s linear}
html[data-theme="concrete"] .giant .g-outline{-webkit-text-stroke:2px var(--fg)}
html[data-theme="concrete"] .giant .g-fill{color:var(--accent)}

.cap-grid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:end;margin-top:clamp(18px,3vw,36px)}
.cap[data-align="right"] .cap-grid{grid-template-columns:1fr 300px}
.cap[data-align="right"] .cap-card{order:2}

.cap-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px;
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.cap-card h3{font-family:var(--display);font-weight:var(--h1-weight);font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;color:var(--fg);
  font-variation-settings:"opsz" 72}
.cap-card p:not(.eyebrow){font-size:15px;line-height:1.55;color:var(--fg-2);margin:0}
/* feature tabs: one row per slide (index · title). The active row's background is the progress indicator: a faint
   --tab-track tint, with a --tab-fill layer that the deck script slides in from the left as the clip plays (or as the
   placeholder clock runs for wireframe slides). The fill is clipped by the row's rounded shape. */
.cap-features{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.cap-features button{position:relative;isolation:isolate;display:flex;align-items:baseline;gap:12px;width:100%;margin:0;padding:14px;
  border:0;border-radius:var(--radius-s);background:transparent;color:var(--fg-2);font:inherit;text-align:left;cursor:pointer;
  transition:background-color .25s,color .25s}
.cap-features .cf-num{flex:none;font-size:12px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--fg-3);transition:color .25s}
.cap-features .cf-label{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.cap-features .cf-progress{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.cap-features .cf-progress i{position:absolute;inset:0;background:var(--tab-fill);transform:translateX(-100%)}
.cap-features button:not(.is-active):hover{color:var(--fg);background:var(--tab-track)}
.cap-features button.is-active{color:var(--fg);background:var(--tab-track)}
.cap-features button.is-active .cf-num{color:var(--accent)}
.cap-features button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html[data-theme="concrete"] .cap-features button{border-radius:0}
html[data-theme="concrete"] .cap-features button.is-active .cf-num{color:var(--fg)}   /* the accent is the fill colour here */
html[data-theme="mesh"] .cap-features button.is-active .cf-num{color:var(--fg)}   /* the orange accent washes out on the grey fill */

/* stacked slide deck */
.deck{outline:none;min-width:0}
.deck:focus-visible .deck-stack{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--radius)}
.deck-stack{position:relative;aspect-ratio:16/9;perspective:1400px;touch-action:pan-y}
.slide{position:absolute;inset:0;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.45);cursor:pointer;
  transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .55s ease;will-change:transform,opacity;
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.slide.is-active{cursor:default}
html[data-theme="concrete"] .slide{box-shadow:6px 6px 0 var(--fg);border:1.5px solid var(--fg)}
html[data-theme="concrete"] .slide:not(.is-active){box-shadow:none}

.deck-bar{display:flex;align-items:center;gap:18px;margin-top:22px;min-height:44px}
.deck-sub{flex:1;margin:0;font-size:clamp(15px,1.4vw,18px);color:var(--fg);transition:opacity .25s,transform .25s}
.deck-sub.is-out{opacity:0;transform:translateY(6px)}
.deck-dots{display:flex;gap:6px}
.deck-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--fg-3);cursor:pointer;transition:.25s}
.deck-dots button.is-active{background:var(--fg);width:22px;border-radius:999px}
html[data-theme="concrete"] .deck-dots button{border-radius:0}
.deck-arrows{display:flex;gap:8px}
.arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--fg);cursor:pointer;
  display:grid;place-items:center;transition:.2s}
.arrow:hover{background:var(--pill-active)}
.arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="concrete"] .arrow{border-radius:0;border:1.5px solid var(--fg)}

/* sticky pill nav (bottom of viewport while the three sections are on screen) */
.cap-nav{position:sticky;bottom:22px;z-index:6;display:flex;justify-content:center;padding:0 16px 8px;pointer-events:none}
.pills{pointer-events:auto;display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 20px 50px -20px rgba(0,0,0,.4)}
.pills a{padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--fg-2);text-decoration:none;transition:.25s}
.pills a:hover{color:var(--fg)}
.pills a.is-active{background:var(--pill-active);color:var(--fg)}
.pills .pill-cta{background:var(--btn-bg);color:var(--btn-fg);margin-left:6px}
.pills .pill-cta:hover{color:var(--btn-fg);filter:brightness(1.05)}
html[data-theme="concrete"] .pills,html[data-theme="concrete"] .pills a{border-radius:0}
html[data-theme="concrete"] .pills{border:1.5px solid var(--fg)}
html[data-theme="concrete"] .pills a.is-active{color:var(--bg)}

.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0f0f12}   /* real demo clips inside a slide */

/* =========================================================
   7. WIREFRAME PLACEHOLDERS (built by home.js from data-wire)
========================================================= */
.wire{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--wire-bg);color:var(--fg-3);font-size:11px}
.wire-top{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-bottom:1px solid var(--wire-line);flex:none}
.wire-top i{width:8px;height:8px;border-radius:50%;background:var(--wire-block-2)}
.wire-top .pill{margin-left:auto;margin-right:auto;width:36%;height:14px;border-radius:999px;background:var(--wire-block)}
.wire-body{position:relative;flex:1;display:flex;min-height:0}
.wire-rail{width:36px;border-right:1px solid var(--wire-line);display:flex;flex-direction:column;gap:10px;padding:12px 0;align-items:center;flex:none}
.wire-rail i{width:14px;height:14px;border-radius:4px;background:var(--wire-block)}
.wire-main{flex:1;position:relative;padding:14px;min-width:0}
.wire-tag{position:absolute;left:14px;bottom:12px;padding:5px 9px;border-radius:6px;background:var(--wire-block);color:var(--fg-2);font-size:11px;font-weight:500;
  letter-spacing:.02em;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.wb{background:var(--wire-block);border-radius:var(--radius-s)}   /* generic block */
.wl{border:1.5px solid var(--wire-block-2);border-radius:2px}       /* generic outline */
/* kinds */
.wire-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;height:100%}
.wire-grid .wb:nth-child(3n+1){aspect-ratio:auto}
.wire-plan{position:relative;height:100%}
.wire-plan .wl{position:absolute}
.wire-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:100%}
.wire-chat .bub{height:16px;border-radius:999px;background:var(--wire-block)}
.wire-chat .bub.me{align-self:flex-end;background:var(--wire-block-2)}
.wire-chat .composer{margin-top:10px;height:36px;border-radius:999px;border:1.5px solid var(--wire-block-2);display:flex;align-items:center;padding:0 12px;gap:8px}
.wire-chat .composer i{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--wire-block-2)}
.wire-mood{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100%}
.wire-mood .sw{display:flex;gap:8px;align-items:flex-start}
.wire-mood .sw i{width:26px;height:26px;border-radius:50%;background:var(--wire-block-2)}
.wire-swatch{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:100%}
.wire-swatch .wb{aspect-ratio:1;border-radius:6px}
.wire-swatch .wb:nth-child(4n){background:var(--wire-block-2)}
.wire-scene{position:relative;height:100%;overflow:hidden}
.wire-scene .floor{position:absolute;left:10%;right:10%;bottom:8%;height:55%;border:1.5px solid var(--wire-block-2);transform:perspective(500px) rotateX(58deg);transform-origin:bottom}
.wire-scene .box{position:absolute;background:var(--wire-block);border:1.5px solid var(--wire-block-2);border-radius:3px}
.wire-render{position:relative;height:100%}
.wire-render .img{position:absolute;inset:0;border-radius:var(--radius-s);background:linear-gradient(160deg,var(--wire-block-2),var(--wire-block) 60%,var(--wire-bg))}
.wire-render .sun{position:absolute;right:14%;top:12%;width:14%;aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--wire-block-2)}
.wire-walk{position:relative;height:100%;overflow:hidden}
.wire-walk .hz{position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--wire-block-2)}
.wire-walk .wall{position:absolute;top:18%;bottom:18%;width:22%;background:var(--wire-block);transform:skewY(-8deg)}
.wire-walk .wall.r{right:0;transform:skewY(8deg)}
.wire-walk .cross{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border:1.5px solid var(--fg-2);border-radius:50%}
.wire-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:100%}
.wire-board .col{display:flex;flex-direction:column;gap:8px}
.wire-board .col .wb{height:28%}
.wire-board .col .wb:first-child{height:12px;width:50%;border-radius:999px}

/* =========================================================
   8. TOOLS — two-column switcher
========================================================= */
.tools{width:min(1240px,calc(100% - 2*clamp(20px,4vw,56px)));margin:0 auto;padding:clamp(80px,14vh,180px) 0 clamp(80px,12vh,140px)}
.tools-head{text-align:center;max-width:760px;margin:0 auto clamp(34px,5vw,64px)}
.tools-head h2{font-family:var(--display);font-weight:var(--h1-weight);font-size:clamp(36px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em;margin:0;
  font-variation-settings:"opsz" 144}
.tools-head .sub{margin:18px auto 0;max-width:36em;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--fg-2)}
.tools-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:20px;align-items:stretch}   /* wide stage (~1.66:1 at 1440) so 16:9 clips lose little to object-fit:cover */
.tool-stage{position:relative;min-height:420px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);overflow:hidden;
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.tool-view{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.75,.2,1);pointer-events:none}
.tool-view.is-active{opacity:1;transform:none;pointer-events:auto}
.tool-list{display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);padding:8px;
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.tool{display:grid;grid-template-columns:1fr;align-items:center;gap:14px;text-align:left;padding:14px 18px;border:0;border-radius:calc(var(--radius) - 8px);
  background:transparent;color:var(--fg);font:inherit;cursor:pointer;position:relative;transition:background .25s}
.tool + .tool::before{content:"";position:absolute;left:18px;right:18px;top:0;border-top:1px solid var(--line)}
.tool b{display:block;font-family:var(--display);font-weight:var(--h1-weight);font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15;color:var(--fg-2);transition:color .25s;
  font-variation-settings:"opsz" 72}
.tool small{display:block;margin-top:5px;font-size:13.5px;color:var(--fg-3)}
.tool:hover b,.tool.is-active b{color:var(--fg)}
.tool.is-active{background:var(--card-2)}
.tool.is-active::before,.tool.is-active + .tool::before{opacity:0}
html[data-theme="concrete"] .tool{border-radius:0}
html[data-theme="concrete"] .tool.is-active{box-shadow:inset 4px 0 0 var(--accent)}
.tools-cta{display:flex;justify-content:center;margin-top:clamp(28px,4vw,44px)}

/* real tool previews (data-view on the tool): tile grids that fill the stage edge to edge.
   Furniture = the live homepage's transparent product shots on light cards (light in every theme so dark pieces read);
   materials = its swatch images, cropped by object-fit so the rounded corners baked into the PNGs never show. */
.tile-grid{position:absolute;inset:0;display:grid;gap:10px;padding:20px}
.tile-grid--furniture{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr)}
.tile-grid--materials{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}
.ft,.mt{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:var(--radius-s)}
.ft{background:var(--tile-bg);box-shadow:inset 0 0 0 1px var(--tile-line)}
.ft img{position:absolute;left:10%;top:7%;width:80%;height:76%;object-fit:contain;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.ft figcaption{position:absolute;left:8px;right:8px;bottom:7px;font-size:11px;line-height:1.2;color:#6f6a62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.ft figcaption b{font-weight:600;color:#23211d}
.ft figcaption b::after{content:" · ";font-weight:400;color:#9a948a}
.ft:hover img{transform:translateY(-7%) scale(1.06)}
.ft:hover figcaption{opacity:1;transform:none}
.mt{background:var(--card-2)}
.mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform .5s cubic-bezier(.2,.75,.2,1)}   /* overscan: wide tiles barely crop, so the baked-in corners would show */
.mt:hover img{transform:scale(1.24)}
/* video preview (data-view="video"): the clip fills the stage edge to edge (clipped by the stage's own rounded corners);
   object-fit:cover trims whatever the stage's shape doesn't match — kept small by the wide stage column above */
.tool-clip{position:absolute;inset:0}
.tool-clip video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#0f0f12}
/* 3D Studio preview (data-view="studio3d"; Figma "2D-to-3D", node 1941:2): a picker row of example models over a side-by-side
   input photo → generated 3D model. The design is on black, so this keeps its dark app look in every theme. Sizes are container
   units of the stage (design frame 1157×743: cqh ≈ px/7.43, cqw ≈ px/11.57) so the proportions hold at any stage size.
   All text is a fixed 12px (user's call; the scaled sizes bottomed out at 10px). */
.s3{position:absolute;inset:0;container-type:size;display:flex;flex-direction:column;padding:20px;background:#000;color:#f5f5f5;font-family:var(--sans)}   /* equal padding on every side */
.s3-picker{flex:none;display:flex;gap:1.4cqw}
.s3-thumb{display:block;margin:0;padding:0;border:0;background:none;cursor:pointer}
.s3-tile{position:relative;display:block;width:max(28px,10.8cqh);height:max(28px,10.8cqh);border-radius:1.6cqh;overflow:hidden;background:#737373;transition:background-color .25s,box-shadow .25s}
.s3-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .25s}
.s3-thumb.is-active{cursor:default}
.s3-thumb.is-active .s3-tile{background:#fbfaf8;box-shadow:inset 0 0 0 1.5px #b4dcbc}
.s3-thumb.is-active .s3-tile img{opacity:1}
.s3-thumb:not(.is-active):not(:disabled):hover .s3-tile img{opacity:.8}
.s3-thumb:disabled{cursor:default}
.s3-thumb:disabled .s3-tile{background:#1a1a1a;box-shadow:inset 0 0 0 1px #2c2c2c}   /* placeholder slot for a future example */
.s3-thumb:focus-visible{outline:2px solid #6fc579;outline-offset:3px;border-radius:1.6cqh}
.s3-compare{flex:1;min-height:0;display:grid;grid-template-columns:1fr 5cqw 1fr;margin-top:3.3cqh}
.s3-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:2.4cqh;overflow:hidden;background:#121212}
.s3-out{border:1px solid #1f1f1f}
.s3-head{flex:none;display:flex;align-items:center;gap:.9cqw;height:max(26px,calc(5.5cqh + 4px));padding:0 1.7cqw;background:#121212;border-bottom:1px solid #2c2c2c;
  font-size:12px;line-height:1;color:#acacac;white-space:nowrap}
.s3-out .s3-head{color:#f5f5f5}
.s3-dot{flex:none;width:max(5px,.8cqh);height:max(5px,.8cqh);border-radius:50%;background:#5b5b5b}
.s3-out .s3-dot{background:#6fc579}
.s3-body{position:relative;flex:1;min-height:0}
.s3-in .s3-body{background:#fbfaf8}
.s3-in .s3-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s3-out .s3-body{background:radial-gradient(70% 60% at 50% 55%,#262626 0%,#121212 72%)}   /* soft light behind the model so a black piece reads (the design's body is flat #121212) */
.s3-out canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.s3-out .s3-body{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}   /* drag to orbit (home.js); vertical touch swipes still scroll the page */
.s3-out .s3-body.is-dragging{cursor:grabbing}
.s3-arrow{align-self:center;justify-self:center;color:#5c5c5c;font-size:12px;line-height:1}
.s3-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;color:#6b6b6b;white-space:nowrap;pointer-events:none}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.tool-view.is-active .ft,.tool-view.is-active .mt{animation:tileIn .5s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i) * 22ms)}
html[data-motion="off"] .tool-view .ft,html[data-motion="off"] .tool-view .mt{animation:none}
@media (prefers-reduced-motion:reduce){ .tool-view .ft,.tool-view .mt{animation:none} }

/* =========================================================
   8b. COLLABORATE — the live page's "Create and collaborate in real time" card, rebuilt as four masonry tiles
   (no outer card) and driven by the theme tokens instead of the original's fixed black-on-black palette.
   Class names are suffixed because the homepage also loads /styles.css, whose .collab-*, .col-*, .mood-* rules would apply.
========================================================= */
.collab3{width:min(1240px,calc(100% - 2*clamp(20px,4vw,56px)));margin:0 auto;padding:clamp(40px,7vh,90px) 0 clamp(80px,12vh,140px)}
.collab3-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4.5vw,56px)}
.collab3-head h2{font-family:var(--display);font-weight:var(--h1-weight);font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.035em;margin:0;
  font-variation-settings:"opsz" 144}
.collab3-head .sub{margin:18px auto 0;max-width:34em;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--fg-2)}
.collab3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}   /* moodboard row, then comments / sharing / version control */
.collab3-tile{display:flex;flex-direction:column;min-width:0;margin:0;padding:22px 20px;box-sizing:border-box;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.collab3-tile h3{font-family:var(--display);font-weight:var(--h1-weight);font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;line-height:1.15;color:var(--fg);margin:0 0 16px;
  font-variation-settings:"opsz" 144}
/* moodboard tile: the collage bleeds to the tile's edges, so the tile clips and the title floats over a scrim */
.collab3-mood{grid-column:1/-1;position:relative;overflow:hidden;height:360px;padding:0}
.collab3-mood h3{position:absolute;top:22px;left:22px;margin:0;z-index:6}
/* the collage: eight cells of varied spans on a 12×6 grid, filling the tile edge to edge; home.js picks the images at random */
.mood3-stage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);gap:6px}
.mood3-cell{position:relative;overflow:hidden;border-radius:4px;background:var(--card-2);min-width:0;min-height:0}
.mood3-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mood3-cell:nth-child(1){grid-column:1/4;grid-row:3/7}      /* cols 1-3, rows 1-2 stay empty for the tile title */
.mood3-cell:nth-child(2){grid-column:4/7;grid-row:1/3}
.mood3-cell:nth-child(3){grid-column:4/7;grid-row:3/5}
.mood3-cell:nth-child(4){grid-column:4/7;grid-row:5/7}
.mood3-cell:nth-child(5){grid-column:7/10;grid-row:1/3}
.mood3-cell:nth-child(6){grid-column:7/10;grid-row:3/7}
.mood3-cell:nth-child(7){grid-column:10/13;grid-row:1/5}
.mood3-cell:nth-child(8){grid-column:10/13;grid-row:5/7}
.mcur3{position:absolute;will-change:transform;pointer-events:none;z-index:5}
.mcur3.c1{left:15%;top:56%}
.mcur3.c2{left:47%;top:18%}
.mcur3.c3{left:78%;top:62%}
.mcur3 svg{width:24px;height:24px;display:block;fill:var(--cc);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.mcur3 .mlabel3{position:absolute;left:17px;top:15px;background:var(--cc);color:#fff;font-weight:700;font-size:13.5px;
  padding:3px 11px;border-radius:7px;white-space:nowrap;box-shadow:0 1px 10px rgba(0,0,0,.25)}
/* shared bits: avatars keep the collaborators' identity colours in every theme */
.av3{flex:none;width:34px;height:34px;border-radius:7px;background:var(--cc);color:#fff;font-weight:700;font-size:17px;display:grid;place-items:center}
.av3.sm{width:29px;height:29px;border-radius:6px;font-size:14px}
.meta3{min-width:0}
.name3{font-weight:600;font-size:15px;color:var(--fg);line-height:1.2}
.sub3{font-size:13.5px;color:var(--fg-2);line-height:1.35;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmt3-item .sub3{white-space:normal;overflow:visible;text-overflow:clip}   /* comments wrap; emails stay on one line */
.fld3{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:6px 7px 6px 13px}
.fld3 span{font-size:13.5px;color:var(--fg-2)}
.send3{flex:none;width:30px;height:30px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:600}
.cmt3-panel,.shr3-panel{background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 16px 16px;margin-top:auto}
.cmt3-item{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.cmt3-panel .fld3{margin-top:13px}
.shr3-panel{padding:16px}
.shr3-panel .fld3{margin-bottom:6px}
.shr3-person{display:flex;align-items:center;gap:12px;padding:12px 0}
.shr3-person .meta3{flex:1}
.shr3-person .sub3{font-size:12.5px}
.role3{flex:none;background:var(--tab-track);border:1px solid var(--line);color:var(--fg-2);font-size:11.5px;border-radius:4px;padding:5px 10px}
.ver3-list{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.ver3-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:6px;padding:0 15px;height:50px;
  font-weight:500;font-size:14px;color:var(--fg)}
.ver3-row .ver3-time{color:var(--fg-3)}
.ver3-row.is-current{background:var(--accent);border-color:var(--accent);color:#fff}   /* the version being viewed */
.ver3-row.is-current .ver3-time{color:rgba(255,255,255,.85)}
html[data-theme="concrete"] .collab3-tile,html[data-theme="concrete"] .fld3,html[data-theme="concrete"] .av3,
html[data-theme="concrete"] .role3,html[data-theme="concrete"] .ver3-row,html[data-theme="concrete"] .cmt3-panel,html[data-theme="concrete"] .shr3-panel{border-radius:0}

/* The draft Style panel is hidden. Nothing is deleted: its markup and script still run (themes, the T shortcut and the
   saved preference all work), and adding ?panel=1 to the URL brings the panel back. Delete this block to show it always. */
html:not([data-panel="show"]) .stylepanel{display:none}   /* hide only; the panel keeps its own layout when shown */

/* =========================================================
   9. STYLE PANEL (draft tooling — remove before launch)
========================================================= */
.stylepanel{position:fixed;left:18px;bottom:18px;z-index:60;font-family:var(--sans);color:#f3f1ec;
  background:rgba(14,14,16,.86);border:1px solid rgba(255,255,255,.14);border-radius:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);width:232px;overflow:hidden}
.sp-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 14px;background:transparent;border:0;color:inherit;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.sp-toggle::after{content:"–";font-size:14px;opacity:.6}
.stylepanel.is-collapsed .sp-toggle::after{content:"+"}
.stylepanel.is-collapsed .sp-body{display:none}
.sp-body{padding:2px 12px 12px;border-top:1px solid rgba(255,255,255,.1)}
.sp-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.sp-row button{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:transparent;
  color:inherit;font:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:.2s}
.sp-row button:hover{background:rgba(255,255,255,.06)}
.sp-row button.is-active{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.sp-row button i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex:none}
.sp-row button[data-theme="ink"] i{background:linear-gradient(135deg,#0c0c0e,#2b4f96)}
.sp-row button[data-theme="paper"] i{background:linear-gradient(135deg,#f4f0e7,#c9653f)}
.sp-row button[data-theme="mesh"] i{background:linear-gradient(135deg,#f0b08c,#c8d6e8,#c3d1b8)}
.sp-row button[data-theme="concrete"] i{background:linear-gradient(135deg,#d6d5d1 50%,#ff22c1 50%)}
.sp-opts{grid-template-columns:1fr 1fr}
.sp-opts label{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;user-select:none}
.sp-opts input{accent-color:#e08e68}
.sp-hint{margin:10px 0 0;font-size:11.5px;color:rgba(255,255,255,.5)}
.sp-hint kbd{font:inherit;padding:1px 5px;border:1px solid rgba(255,255,255,.25);border-radius:4px}

/* =========================================================
   10. RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .cap-grid,.cap[data-align="right"] .cap-grid{grid-template-columns:260px 1fr}
}
@media (max-width:880px){
  .v2nav .links{display:none}
  .giant{font-size:clamp(22px,calc(24vw - 50px),100px)}
  .cap-grid,.cap[data-align="right"] .cap-grid{grid-template-columns:1fr;gap:18px;align-items:start}
  .cap[data-align="right"] .cap-card{order:0}
  .cap-card{padding:20px}
  .deck-stack{aspect-ratio:16/9}   /* same as desktop: the demo clips are 16:9, so nothing is cropped */
  .deck-bar{flex-wrap:wrap;gap:12px}
  .deck-sub{flex-basis:100%;font-size:15px}
  .deck-dots{margin-right:auto}
  .cap-nav{bottom:14px}
  .pills a{padding:10px 14px;font-size:13.5px}
  .tools-grid{grid-template-columns:1fr}
  .collab3-grid{grid-template-columns:1fr}
  .collab3-mood{height:auto;padding:22px 20px}
  .collab3-mood h3{position:static;margin:0 0 14px}
  .mood3-stage{position:relative;inset:auto;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:6px;height:260px}   /* back in flow so the tile has height under the title */
  .mood3-cell:nth-child(n+5){display:none}
  .mood3-cell:nth-child(1){grid-column:1/2;grid-row:1/2}
  .mood3-cell:nth-child(2){grid-column:2/3;grid-row:1/2}
  .mood3-cell:nth-child(3){grid-column:1/2;grid-row:2/3}
  .mood3-cell:nth-child(4){grid-column:2/3;grid-row:2/3}
  /* the collage is a 2×2 grid here, so the cursors stay — smaller, and placed so their name labels stay inside the tile */
  .mcur3.c1{left:10%;top:55%}
  .mcur3.c2{left:38%;top:14%}
  .mcur3.c3{left:56%;top:64%}
  .mcur3 svg{width:20px;height:20px}
  .mcur3 .mlabel3{left:14px;top:12px;font-size:11px;padding:2px 8px;border-radius:6px}
  /* Safari leaves a stretched grid item whose children are all absolutely positioned at zero height, so the preview
     vanished on iOS. Give it a real height (the section's own width × 10/16) and stop it stretching. */
  .tool-stage{min-height:0;align-self:start;aspect-ratio:16/10;height:calc((100vw - 2*clamp(20px,4vw,56px))*0.625)}
  .tool-list{flex-direction:row;overflow-x:auto;gap:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .tool{flex:0 0 78%;scroll-snap-align:start;grid-template-columns:1fr;background:var(--card-2)}
  .tool + .tool::before{display:none}
  .tile-grid{gap:6px;padding:12px}
  .s3{padding:12px}
  .tile-grid--furniture{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
  .tile-grid--furniture .ft:nth-child(n+13){display:none}   /* 12 pieces on the 16:10 phone stage */
  .tile-grid--materials{grid-template-rows:repeat(3,1fr)}
  .tile-grid--materials .mt:nth-child(n+13){display:none}
  .stylepanel{left:12px;bottom:12px;width:206px}
}
@media (max-width:440px){
  .hero h1{font-size:clamp(40px,12vw,56px)}   /* phones: scale down from the fixed 80px */
  .hero-media{border-radius:20px}
  .hero .hero-cta .btn{width:100%;justify-content:center}
  .giant{font-size:clamp(14px,calc(26vw - 50px),60px)}
  .arrow{width:38px;height:38px}
}