/* website-v2 — assets/v2.css
   The layer on top of the prototype's site.css (IJ-844, from Prashant's draft on PR #250).
   The site map of 13 October 2026: landing, four features, pricing, contact, support, resources.
   Light copy, the live pieces as the way to show the product, seamless embeds, motion on scroll. */

:root { --wrap: 1200px; --sec: clamp(56px, 8vw, 112px); }
body.v2 { font-size: 1.0625rem; }
.v2 h1, .v2 .h1 { max-width: 16ch; }
.v2 h2, .v2 .h2 { max-width: 20ch; font-size: clamp(1.875rem, 3.6vw, 3.25rem); }
.v2 .sec { border-top: 0; }
.v2 .cta { margin-top: 28px; }
.v2 .link { font-weight: 500; }
.v2 .eyebrow { font: 600 .75rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 16px; }
.v2 .note { font-size: .8125rem; color: var(--ink3); margin: 12px 0 0; }

/* ---------- header: sticky glass bar, one action ---------- */
.v2 .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.v2 .bar { min-height: 72px; }
.v2 .nav > ul { gap: 4px; }
.v2 .nav .menu { min-width: 280px; padding: 10px; }
.v2 .menu a { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 10px 12px; }
.v2 .menu a small { display: block; color: var(--ink3); font-size: .8125rem; font-weight: 400; line-height: 1.3; }
.v2 .menu .mk { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--paper2); font: 600 .6875rem/1 var(--sans); letter-spacing: .04em; color: var(--ink2); }
.v2 .menu a:hover .mk { background: var(--ink); color: var(--paper); }

/* ---------- hero ---------- */
.v2 .hero .cta { margin-top: 30px; gap: 14px 20px; }
.v2 .hero { position: relative; z-index: 0; }

/* ---------- client logos ---------- */
.v2 .clients { padding-block: 28px 8px; }
.v2 .clients p { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 20px; text-align: center; }
.v2 .clients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px clamp(24px, 4vw, 56px); }
.v2 .clients img { height: 26px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .3s var(--ease), filter .3s var(--ease); }
.v2 .clients li:hover img { filter: none; opacity: 1; }
@media (max-width: 700px) { .v2 .clients img { height: 20px; max-width: 100px; } }

/* ---------- three promises, three steps ---------- */
.v2 .steps { gap: 32px; margin-top: 0; }
.v2 .step .n { font: 500 .8125rem/1 var(--sans); letter-spacing: .18em; color: var(--ink3); margin-bottom: 14px; }
.v2 .step .st { font-size: 1.375rem; }
.v2 .step img { width: 100%; height: auto; border-radius: calc(var(--r) - 6px); border: 1px solid var(--line2); margin-bottom: 16px; background: var(--paper2); }
@media (max-width: 800px) { .v2 .steps { grid-template-columns: 1fr; } }

/* ---------- store logos ---------- */
.stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.stores li { border: 1px solid var(--line2); border-radius: 14px; min-height: 84px; display: grid; place-items: center; padding: 16px; background: var(--card); }
.stores img { height: 26px; width: auto; max-width: 110px; object-fit: contain; }
.stores .own { font: 500 .9375rem/1.2 var(--sans); color: var(--ink2); text-align: center; }

/* ---------- a lazy frame for an embed (the Try On demo, a video) ---------- */
.frame { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper2); aspect-ratio: 16 / 10; }
.frame iframe, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--paper2); }

/* ---------- plans, light ---------- */
.v2 .plans { margin-top: 0; }
.v2 .plan { gap: 14px; padding: 28px 24px 24px; }
.v2 .plan h3 { font-size: 1.375rem; }
.v2 .plan .price { font: 500 clamp(2rem, 3vw, 2.5rem)/1 var(--serif); letter-spacing: -.02em; }
.v2 .plan .price small { font: 400 .875rem/1.2 var(--sans); color: var(--ink3); margin-left: 6px; letter-spacing: 0; }
.v2 .plan .per { font-size: .875rem; color: var(--ink3); margin: -6px 0 0; }
.v2 .plan ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line2); display: grid; gap: 8px; font-size: .9375rem; color: var(--ink2); }
.v2 .plan ul li b { color: var(--ink); font-weight: 500; }
.v2 .plan .btn { margin-top: auto; }
.v2 .plan .rec { font: 600 .625rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 10px; }
.ladder { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.ladder button { font: 600 .75rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; min-height: 40px; cursor: pointer; color: var(--ink2); }
.ladder button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- lists of links (support, resources) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tiles a { display: flex; flex-direction: column; gap: 10px; min-height: 180px; padding: 24px; border: 1px solid var(--line2); border-radius: var(--r); text-decoration: none; background: var(--card); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.tiles a:hover { border-color: var(--line); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .3); transform: translateY(-2px); }
.tiles .ct { font-size: 1.375rem; margin: 0; }
.tiles .cb { margin: 0; color: var(--ink2); font-size: 1rem; }
.tiles .go { margin-top: auto; font: 500 .9375rem/1.2 var(--sans); }
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; }
.posts li { border-top: 1px solid var(--line); padding-top: 16px; }
.posts .k { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); display: block; margin-bottom: 8px; }
.posts a { font: 500 1.125rem/1.3 var(--serif); text-decoration: none; }
.posts a:hover { text-decoration: underline; }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.events li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line2); }
.events .when { font: 500 .9375rem/1.3 var(--sans); color: var(--ink2); }
.events .what { font: 500 1.125rem/1.3 var(--serif); }
.events .what small { display: block; font: 400 .9375rem/1.4 var(--sans); color: var(--ink2); margin-top: 2px; }
@media (max-width: 700px) { .events li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- contact: the one form ---------- */
.v2 .form { margin-top: 0; }
.contact-aside { display: grid; gap: 22px; align-content: start; }
.contact-aside .ct { font-size: 1.25rem; margin: 0 0 6px; }
.contact-aside p { margin: 0; color: var(--ink2); font-size: 1rem; }
.contact-aside a { color: var(--ink); }

/* keep the footer's small headings under the v2 h2 scale */
.v2 .site-footer h2 { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 16px; max-width: none; }
.v2 [hidden] { display: none !important; }

/* =================== landing v2b: slow motion, the ring stays, the words arrive =================== */

/* words: each word fades and lifts as the page scrolls to it (progress set by v2.js in --p, 0 to 1) */
.w { display: inline-block; opacity: calc(.12 + .88 * var(--w, 0)); transform: translateY(calc((1 - var(--w, 0)) * .18em)); filter: blur(calc((1 - var(--w, 0)) * 3px)); transition: opacity .35s linear, transform .35s linear, filter .35s linear; will-change: opacity, transform; }
html:not(.js) .w { opacity: 1; transform: none; filter: none; }

/* the story: the piece is pinned on the right, the chapters pass on the left */
.story { position: relative; }

/* marquees: the clients, the stores */
@keyframes marq { to { transform: translateX(-50%); } }
.v2 .clients { padding-block: clamp(56px, 7vw, 96px) 0; }
.v2 .clients p { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 14px; text-align: center; }

/* parallax pictures */
.px { will-change: transform; }

/* calmer rhythm for the rest */
.v2 .big { font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.18; letter-spacing: -.015em; max-width: 24ch; font-family: var(--serif); font-weight: 400; }
.v2 .big em { font-style: italic; font-weight: 300; }

/* v2b fixes: the phone pin is the canvas only; the wipe takes longer */
.v2 .clients, .v2 #stores { overflow-x: clip; }

/* =================== v2c: Dasha's review of 14 Oct =================== */
/* words: no blur anywhere but the one statement; elsewhere a plain fade */
.w { filter: none; transform: translateY(calc((1 - var(--w, 0)) * .12em)); }

/* =================== v2d: the ring big and central; shy markers; pinned plates; a marquee you can drag =================== */
/* shy markers: hidden, then the dots run to the marker and it pops; shown while the visitor idles */
@keyframes lead-run { from { stroke-dashoffset: 60; opacity: 0; } 20% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes seed-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes spot-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* =================== v2e: glass markers, one at a time; plates with the words on the left =================== */
/* a marker in dark glass; its options beside it, in glass too, with the library's own icons */
.v2 .spot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.v2 .spot i { inset: 8px; background: rgba(28, 28, 30, .42); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v2 .spot i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.v2 .spot::before, .v2 .spot::after { border-color: rgba(28, 28, 30, .45); }
.v2 .spot.is-open i { background: rgba(28, 28, 30, .78); border-color: #fff; }
.v2 .spot.is-open i::after { background: #fff; }
.v2 .lead { stroke: rgba(28, 28, 30, .72); stroke-width: 2.5; stroke-dasharray: 0.1 6; }
.v2 .lead-seed { fill: rgba(28, 28, 30, .72); }
.v2 .pop { background: rgba(28, 28, 30, .62); border: 1px solid rgba(255, 255, 255, .28); color: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 999px; padding: 8px 10px; }
.v2 .pop.pop--card { border-radius: 22px; }
.v2 .pop .pop-name { color: rgba(255, 255, 255, .7); }
.v2 .chip3d { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; }
.v2 .chip3d i { border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.v2 .chip3d i img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.v2 .chip3d[aria-checked="true"] { border-color: #fff; }
.v2 .chip3d--geo i { background: rgba(255, 255, 255, .12); color: #fff; }
/* one marker at a time: in the scripted hero only the open marker and its lead show; the options come with it */
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* no stray seed dots on any piece, no "live" dot under it */
.hero3d .lead-seed:not(.is-open) { opacity: 0 !important; }
/* the reference build's hotspot configurator lives inside the stage: let its layers show over the canvas */
.hero3d .ring-stage { overflow: visible; }
.hero3d .ring-stage > * { pointer-events: auto; }
/* =================== v2f: bigger pieces, the ground under them, beats in the middle, air after the CAD =================== */
/* the CAD story: the file as it comes sits on the grey of a CAD program; as the piece lies down and takes its materials,
   the grey gives way to the page's white — out of the CAD program, into the viewer */
#customers { background-color: #62666d; transition: background-color 1.8s var(--ease); }
#customers[data-ch="1"] { background-color: var(--paper); }
/* =================== v2g: the plates as a wheel; a darker CAD grey with a grid; the piece stays after the words =================== */
/* the CAD story: a darker grey with the fine grid of a CAD viewport; both go as the piece comes out on the white */
#customers { position: relative; background-color: #35383d; }
#customers::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity 1.4s var(--ease);
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); }
#customers[data-ch="1"]::before { opacity: 0; }
#customers > .wrap { position: relative; z-index: 1; }
/* =================== v2j: the scroll ring in place of the browser's bar; air above Trusted by =================== */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* =================== v2k: more air around Trusted by =================== */
.v2 .clients { padding-block: clamp(72px, 9vw, 128px) clamp(24px, 3vw, 48px); }
.v2 .clients p { margin: 0 0 clamp(32px, 4vw, 56px); }
/* the loading brilliant in the middle of the hero's box, the words under it; the thin track is gone */
.v2 .ldb { top: 50%; bottom: auto; transform: translate(-50%, -50%); gap: 14px; width: auto; }
.v2 .ldb-track { display: none; }
.v2 .ldb-gem { width: 180px; height: 180px; display: block; margin: -30px 0 -26px; }
.v2 .ldb-gem svg { width: 100%; height: 100%; display: block; }
.v2 .ldb-gem path { fill: none; stroke-width: .5; stroke-linejoin: bevel; stroke-miterlimit: 10; }
.v2 .ldb-gem-lines path { stroke: rgba(0, 0, 0, .18); }
.v2 .ldb-gem-ink path { stroke: var(--ink); }
.v2 .ldb-gem-fill { transform-box: view-box; transform-origin: 50% 100%; transform: scaleY(var(--lp, 0)); transition: transform .35s linear; }
.v2 .ldb-t { color: var(--ink3); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
/* =================== v2m: a smaller hero, a smaller loading mark, Trusted by up, a hint on the piece =================== */
.v2 .ldb-gem { width: 120px; height: 120px; margin: -18px 0 -16px; }
.v2 .clients { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 112px); }
/* =================== v2o: the feature switcher (one screen) in place of the bento grid =================== */
@keyframes fsw-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* =================== v2p: a white hero; a glow behind the piece in the colour of its stone =================== */
.hero3d .ring { position: relative; }
.hero3d .ring .gem-glow { position: absolute; inset: -6%; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(var(--gem, 150, 170, 195), .42) 0, rgba(var(--gem, 150, 170, 195), .14) 45%, rgba(var(--gem, 150, 170, 195), 0) 72%); transition: opacity 1.4s var(--ease), background 1.6s var(--ease); }
.hero3d .ring.ring--live .gem-glow { opacity: 1; }
.hero3d .ring .ring-stage, .hero3d .ring .ring-poster, .hero3d .ring .spots, .hero3d .ring .ldb { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero3d .ring .gem-glow { transition: none; } }

/* =================== v2q: the configurator story (Dasha, 17 Oct 2026) =================== */