/* The landing in three parts (Dasha, 20 Oct): the piece between the four features on one screen, then the work made on iJewel3D
   (iJewel Design pieces, the jewellers' logos, the file's safety), then the call to action. One heading, one line and an action
   each; no paragraphs. The piece is as large as the window allows; the four features sit at the window's edges. */
:root { --ink: #191826; --ink2: #5e5c70; --ink3: #8a889a; --vio: #6E72F2; --link: #5053D0; --m: 48px;
  --glass: rgba(255, 255, 255, .5); --glass2: rgba(255, 255, 255, .74); --edge: rgba(255, 255, 255, .82); --shadow: 0 18px 50px rgba(40, 44, 120, .12), 0 2px 6px rgba(40, 44, 120, .06);
  --sans: 'Sora', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --core: max(300px, min(600px, calc(100svh - 392px)));  /* the piece's height: the window's height less the words above it */
  --core-w: min(calc(var(--core) * 1.32), 54vw, 780px);  /* and wider than high: a ring lies wider than it stands */
  --ease: cubic-bezier(.22, 1, .36, 1); }
/* every move on the page has the one easing (Dasha, 21 Oct: every animation super smooth); the moves are transform and opacity,
   a colour or a shadow at most, never a size or a place */
main *, main *::before, main *::after { transition-timing-function: var(--ease) !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: #eceef5; color: var(--ink); font: 400 16px/1.5 var(--sans); overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vio); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--vio); color: #fff; padding: 8px 12px; border-radius: 8px; }
.aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: 1px solid var(--edge); box-shadow: var(--shadow); }
em { font: italic 400 1.12em/1 var(--serif); letter-spacing: -.01em; color: var(--vio); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 14px; border: 0; background: var(--ink); color: #fff; text-decoration: none; font: 500 15px/1 var(--sans);
  box-shadow: 0 10px 30px rgba(25, 24, 38, .2); cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(25, 24, 38, .26); background: #2b2940; }
.btn.gl { background: var(--glass2); color: var(--ink); border: 1px solid var(--edge); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn.gl:hover { background: rgba(255, 255, 255, .92); }
.see { display: inline-flex; gap: 8px; font: 500 14px/1 var(--sans); color: var(--link); text-decoration: none; }
.see:hover { text-decoration: underline; text-underline-offset: 4px; }
h2 { margin: 0; font: 500 48px/1.05 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.sub { margin: 10px auto 0; max-width: 34em; color: var(--ink2); font-size: 18px; line-height: 1.45; }

/* 1. the hero: the words, then the piece between the four features */
.hero { max-width: 1440px; min-height: calc(100svh - 74px); margin: 0 auto; padding: clamp(28px, 6.5svh, 72px) var(--m) 14px; display: flex; flex-direction: column; text-align: center; }
h1, h2.h1 { margin: 0; font: 500 clamp(40px, min(4.6vw, 7.2svh), 64px)/1 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.js h1 .w { display: inline-block; opacity: 0; transform: translateY(.28em); animation: w-in .55s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + 60ms); }  /* the words come one by one, once */
@keyframes w-in { to { opacity: 1; transform: none; } }
.hero > h2 { font-size: clamp(32px, 3.4vw, 46px); }  /* the same size as the other screens' titles (Dasha, 30 Oct) */
.hero .sub { margin-top: clamp(10px, 1.6svh, 16px); font-size: clamp(16px, 2.2svh, 19px); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(16px, 3svh, 30px); }
.stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--core-w) minmax(0, 1fr); gap: 0 24px; align-items: center; margin-top: clamp(12px, 2.4svh, 26px); text-align: left; }
.side { display: flex; flex-direction: column; gap: 14px; }
.side.l { align-items: flex-start; } .side.r { align-items: flex-end; }

/* the four features, as cards with an icon (Dasha, 20 Oct: no pictures, nice icons). On hover the card lifts, its icon tile fills
   with our blue and turns a little, a light runs over it, and the piece gives a hint of the feature. A click puts the feature in
   the piece's place. */
.tw { position: relative; width: min(100%, 248px); }  /* a card and, once it is open, its link */
.side > .tile { width: min(100%, 248px); }  /* the card before the script wraps it: already its final width, so it does not paint large and then jump (Dasha, 22 Oct) */
.tile { -webkit-appearance: none; appearance: none; margin: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px 14px 14px 14px; border-radius: 22px; text-align: left; cursor: pointer;
  transition: transform .45s; }
.tile::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .92); box-shadow: 0 26px 54px -20px rgba(40, 44, 120, .38), 0 0 0 1px rgba(110, 114, 242, .2); opacity: 0; transition: opacity .4s; }  /* the hover's white and shadow fade in; the card itself is not repainted */
.tile:focus-visible, .tile.is-ghost { transform: translateY(-4px); }
.tile:focus-visible::before, .tile.is-ghost::before, .tile[aria-pressed="true"]::before { opacity: 1; }
.tile[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px var(--vio), var(--shadow); }
.tile .ic { position: relative; overflow: hidden; flex: none; width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; color: var(--vio);
  background: linear-gradient(145deg, rgba(110, 114, 242, .14), rgba(143, 147, 255, .2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: color .3s, box-shadow .3s, transform .45s var(--ease); }
.tile .ic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, #5a5ee8, #6E72F2 50%, #8f93ff); opacity: 0; transition: opacity .35s; }
.tile .ic::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; }
.tile .ic .xx { position: absolute; z-index: 1; width: 22px; height: 22px; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .35s, transform .45s; }  /* an open card's icon turns into a cross */
.tile[aria-pressed="true"] .ic svg:not(.xx) { opacity: 0; transform: rotate(90deg) scale(.6); }
.tile[aria-pressed="true"] .ic .xx { opacity: 1; transform: none; }
.tile .ic svg { position: relative; z-index: 1; width: 28px; height: 28px; transition: transform .45s, opacity .35s; }
.tile:focus-visible .ic, .tile.is-ghost .ic, .tile[aria-pressed="true"] .ic { color: #fff; box-shadow: 0 12px 24px -10px rgba(110, 114, 242, .7); }
.tile:focus-visible .ic::before, .tile.is-ghost .ic::before, .tile[aria-pressed="true"] .ic::before { opacity: 1; }
.tile.is-ghost .ic { transform: rotate(-6deg); }
.tile.is-ghost .ic svg { transform: scale(1.08); }
.tile.is-ghost .ic::after { opacity: 1; animation: ic-shine .8s ease-out; }
@keyframes ic-shine { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(475%) skewX(-18deg); } }
.tile .tx { min-width: 0; }
.tile b { display: block; font: 500 15.5px/1.2 var(--sans); letter-spacing: -.015em; }
.tile small { display: block; margin-top: 3px; font: 400 12.5px/1.25 var(--sans); color: var(--ink2); }
.tile .go { align-self: start; color: var(--ink3); font-size: 15px; transition: transform .3s, color .25s; }
.tile.is-ghost .go { color: var(--vio); transform: translate(2px, -2px); }
/* the hover look, only where a pointer can hover: on a phone a tap is not a hover (iOS Safari turns a first tap into a hover when
   :hover changes the card, so the card needed two taps, Dasha 22 Oct) */
@media (hover: hover) {
  .tile:hover { transform: translateY(-4px); }
  .tile:hover::before { opacity: 1; }
  .tile:hover .ic { color: #fff; box-shadow: 0 12px 24px -10px rgba(110, 114, 242, .7); transform: rotate(-6deg); }
  .tile:hover .ic::before { opacity: 1; }
  .tile:hover .ic svg { transform: scale(1.08); }
  .tile:hover .ic::after { opacity: 1; animation: ic-shine .8s ease-out; }
  .tile:hover .go { color: var(--vio); transform: translate(2px, -2px); }
}
.tile .tx b, .tile .tx small { transition: opacity .3s, transform .45s; }
.tile[aria-pressed="true"] .go, .tile[aria-pressed="true"] small { opacity: 0; }
/* an open card holds its feature's links where its line was (Dasha, 21 Oct: the links under the piece covered it) */
.tacts { position: absolute; left: 82px; top: calc(50% + 4px); z-index: 2; display: flex; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .35s, transform .45s, visibility 0s .35s; }
.tw.is-open .tacts { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.tacts a { font: 500 12.5px/1.2 var(--sans); color: var(--link); text-decoration: none; white-space: nowrap; }
.tacts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tacts a[hidden] { display: none; }

.core { position: relative; }
.pane { position: relative; width: var(--core-w); height: var(--core); }
.pane > .hero3d { position: absolute; inset: 0; transform: translateY(-5%); transition: opacity .45s, transform .6s var(--ease); }  /* the ring sits a little high in its box: its shadow is under it */
.pane > .hero3d > .ring { height: 100%; }
.mv-ring { position: relative; }
.pane > .hero3d--mv { top: -30%; transform: none; }  /* the viewer takes the air above the square too, so the ring shows larger over its own tabs (Dasha, 5 Nov: "proper size") */
.pane.is-alt > .hero3d.hero3d--mv { transform: scale(.97); }  /* above .pane.is-alt > .hero3d, which comes later */
@media (max-width: 860px) {  /* a phone: the ring in a frame, its square only (Dasha, 6 Nov): inside it a drag turns the ring any way, outside it the page scrolls */
  .pane > .hero3d--mv { top: 0; }  /* the frame's white wins over ring-embed.css's .hero3d .ring, which loads later */
  .hero3d > .ring.mv-ring { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 18px 40px -24px rgba(40, 44, 120, .35); }
}
.mv-box { position: absolute; inset: 0; }  /* the standard mini-viewer (Dasha, 5 Nov): the whole square is the viewer, on the page's own background, with no frame */
.mv-ring .mv-box { opacity: 0; transition: opacity .6s var(--ease); } .mv-ring.ring--live .mv-box { opacity: 1; }  /* hidden while it loads: the page's gem loader shows, not the viewer's white plate */
.hero > h2, .hero > .sub { position: relative; z-index: 3; }  /* the viewer's box reaches up behind the title: the words stay on top, to read and select */
.mv-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90%, 360px); margin: 0; text-align: center; font: 400 14px/1.45 var(--sans); color: var(--ink2); }
.mv-note a { color: var(--vio); }
/* the ring's line: what it is and how to turn it; it goes at the first touch (landing-ring.js, Dasha 6 Nov) */
.mv-pill { position: absolute; left: 50%; top: 23%; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 9px 15px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 12px 26px -14px rgba(40, 44, 120, .45);
  font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; pointer-events: none; transition: opacity .35s; }
.mv-pill svg { width: 18px; height: 18px; color: var(--vio); }
@media (max-width: 860px) { .mv-pill { top: 14px; } }  /* a phone: at the top of the frame. A computer: at the top of the ring's square, over the air above the ring (the box reaches 30% above the square) */
.mv-ring:not(.ring--live) .mv-pill { display: none; }
.mv-ring.is-told .mv-pill { opacity: 0; }
.pane.is-alt > .hero3d { opacity: 0; transform: translateY(-5%) scale(.97); pointer-events: none; }
.pane.is-site > .hero3d { z-index: 2; transform: translateY(-2%) scale(.6); }  /* small enough that the card at the bottom right never covers it */  /* on the store: the ring over the page, in its middle */

/* the light on the metal, in the live look only: four studio maps, each chip the map's own thumbnail from the library (Dasha,
   20 Oct: icons only, no word). The file's own light (env-metal-068) has no thumbnail there, so it has no chip: the piece starts on
   it, and a chip changes it. */
.light { position: absolute; left: 10px; top: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 6px; border-radius: 999px; border: 1px solid var(--edge);
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 30px -16px rgba(40, 44, 120, .4);
  opacity: 0; visibility: hidden; transform: translate(-6px, -50%); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.pane:not(.is-cad):not(.is-site):not(.is-alt):has(> .hero3d > .ring.ring--live) .light { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }  /* not before the piece is live (Dasha, 22 Oct) */
.light button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; position: relative; width: 34px; height: 34px; overflow: hidden; border: 0; border-radius: 999px; background: #e9eaf0; cursor: pointer; transition: transform .2s; }
.light button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(25, 24, 38, .1); }
.light button[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--vio), inset 0 0 0 3.5px #fff; }
.light button:hover { transform: scale(1.1); }
.light img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }  /* the library thumb is the ball with a thin clear edge */
.eyebrow { margin: 0 0 14px; font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vio); }

/* a feature in the piece's place: its links sit in its card; Escape, the card or this cross beside the piece's top right corner
   (outside it, so it covers nothing) brings the piece back. A phone has the card's own cross right under the piece. */
.px { -webkit-appearance: none; appearance: none; margin: 0; position: absolute; right: -52px; top: 0; z-index: 7; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--edge); border-radius: 999px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 24px -14px rgba(40, 44, 120, .45); color: var(--ink); cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(.85); transition: opacity .35s, transform .45s, visibility 0s .35s; }
.px:hover { background: #fff; }
.pane.is-alt .px { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }

/* the third look: the piece on a store's product page. The page is drawn under the ring (.site-bg) and its bar, the shop names
   and the product card over it (.site), so nothing pale lies on the ring (Dasha, 20 Oct: the ring on top, in the middle; the card
   see-through, at the bottom right) */
.site-bg, .site { position: absolute; inset: 0; pointer-events: none; border-radius: 22px; opacity: 0; transform: scale(.97); transition: opacity .5s, transform .5s; }
.site-bg { z-index: 1; border: 1px solid var(--edge); background: rgba(255, 255, 255, .42); box-shadow: var(--shadow); }
.site { z-index: 3; }
.pane.is-site .site, .pane.is-site .site-bg { opacity: 1; transform: none; }
.site-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 22px 22px 0 0; background: rgba(255, 255, 255, .8); border-bottom: 1px solid var(--edge); }
.site-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(25, 24, 38, .14); }
.site-bar span { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 5px 12px; border-radius: 999px; background: #fff; font: 400 11.5px/1 var(--sans); color: var(--ink2); }
.shop { position: absolute; right: 14px; bottom: 14px; width: clamp(150px, 26%, 196px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; text-align: left;
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 18px 40px -18px rgba(40, 44, 120, .35); }
.pane.is-site .shop { pointer-events: auto; }
.shop b { font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; }
.shop .pr { margin-top: -5px; font: 400 12px/1.2 var(--sans); color: var(--ink2); }
.shop .row > span { display: flex; justify-content: space-between; gap: 6px; font: 500 11px/1.2 var(--sans); color: var(--ink2); }
.shop .row > span i { font-style: normal; color: var(--ink); }
.shop .sw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.shop .sw button { -webkit-appearance: none; appearance: none; margin: 0; padding: 2px; width: 26px; height: 26px; border: 1.5px solid transparent; border-radius: 999px; background: #fff; cursor: pointer; transition: border-color .2s, transform .2s; }
.shop .sw button:hover { transform: scale(1.08); }
.shop .sw button[aria-checked="true"] { border-color: var(--vio); }
.shop .sw img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.shop .bag { margin-top: 2px; padding: 9px 12px; border-radius: 9px; background: var(--ink); color: #fff; font: 500 12px/1 var(--sans); text-align: center; }
.site-plats { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }
.site-plats img { height: 16px; width: auto; }

/* a feature in the piece's place; its actions take the foot of the box */
.alt { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .5s, transform .6s, visibility 0s .5s; }
.alt.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }  /* it comes in a moment after the piece starts to go: a cross-fade */
.alt .hero3d { height: 100%; }
/* the configurator ring and the band sat low, their lowest marker under the stage (Dasha, 21 Oct): each a little smaller and
   raised to the stage's middle, so every marker (head, shank, metal, stone; profile, width, metal) is in reach */
.alt[data-k="rc"] .hero3d { transform: translateY(-9%); }
.alt[data-k="wbb"] .hero3d { transform: translateY(-8%) scale(.88); }
/* Try On: the live demo in an app window the size of Batch Render's (Dasha, 22 Oct: wider, the same as Batch Render, and a thin,
   quiet edge instead of the thick white frame). The demo loads in it as soon as the card opens (no 'Allow camera' step; the demo's
   own Start asks for the camera); a calm loader holds the window until the demo is up. The demo is iJewel's own app: its look is its own. */
.phone { display: flex; flex-direction: column; width: min(100%, calc((var(--core) - 36px - 32px) * 16 / 9)); border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px -30px rgba(25, 24, 38, .4), 0 0 0 1px rgba(25, 24, 38, .06); }
.phone .vto-scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f4f8; }
.phone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s; }
.phone.is-up iframe { opacity: 1; }
.vto-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; transition: opacity .4s; pointer-events: none; }
.phone.is-up .vto-wait { opacity: 0; }
.vto-wait svg { width: 96px; height: 96px; display: block; }
.vto-wait path { fill: none; stroke-width: .5; stroke-linejoin: bevel; stroke-miterlimit: 10; }
.vto-wait .lines path { stroke: rgba(25, 24, 38, .16); }
.vto-wait .ink path { stroke: #191826; }
.vto-wait .fill { transform-box: view-box; transform-origin: 50% 100%; animation: vto-fill 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes vto-fill { 0% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); } }
.vto-wait span { margin-top: -10px; font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
/* Batch Render (Dasha, 22 Oct: show the video): the Batch Render film (/products/ijewel-batch-x/'s) plays in an editor window, from the start each
   time the card opens, only while the card is open and the piece is on the screen */
.bxw { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.bxw .app { display: flex; flex-direction: column; width: min(100%, calc((var(--core) - 36px - 32px) * 16 / 9)); border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px -30px rgba(25, 24, 38, .4), 0 0 0 1px rgba(25, 24, 38, .06); }
.bxw .bar, .phone .bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(25, 24, 38, .07); font: 400 12px/1 var(--sans); color: var(--ink2); }
.bxw .bar i, .phone .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(25, 24, 38, .12); }
.bxw .bar span, .phone .bar span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bxw video { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; background: #fff; }
.bxw q { display: block; max-width: calc(var(--core-w) - 24px); text-align: center; font: 400 13px/1.35 var(--sans); color: var(--ink2); quotes: none; }
.bxw q b { font-weight: 500; color: var(--ink); }

/* 2. made on iJewel3D: pieces from iJewel Design as a row of cards, four in view and the row's edges always on a card's edge, so
   no card shows cut (drag, scroll or the arrows move it by one card); the last card leads to iJewel Design. A click opens the
   piece live over the page, in a box of its own (Dasha, 20 Oct: on top, not inside the row), with iJewel Design's own mark while it
   loads. */
.sec { max-width: 1440px; margin: 0 auto; padding: 160px var(--m) 0; text-align: center; }  /* one rhythm below the hero (Dasha, 21 Oct: more air) */
.dz { --gap: 20px; --n: 4; --more: 210px; position: relative; margin-top: 44px; text-align: left; }
.dz-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; margin: -24px -18px -56px; padding: 24px 18px 56px; scroll-padding: 0 18px; scrollbar-width: none; cursor: grab; }  /* room for the lift and the shadow; 18 px at the sides is less than the gap, so the next card never peeks in */
.dz-track::-webkit-scrollbar { display: none; }
.dz-track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.dz-card { flex: 0 0 calc((100% - var(--n) * var(--gap)) / var(--n)); min-width: 0; scroll-snap-align: start; border-radius: 22px; }  /* a long name does not widen its card */
.dz-card { position: relative; display: flex; flex-direction: column; padding: 6px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 34px -22px rgba(40, 44, 120, .3); transition: transform .35s var(--ease), box-shadow .35s, background .25s; }
.dz-card:hover, .dz-card:focus-within { transform: translateY(-4px); background: rgba(255, 255, 255, .86); box-shadow: 0 22px 40px -22px rgba(40, 44, 120, .42); }
.dz-media { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 17px; background: #fff; cursor: pointer; }
.dz-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transition: transform .8s var(--ease); -webkit-user-drag: none; user-select: none; }  /* --z: the ring at about one size in every card */
.dz-card:hover .dz-media img { transform: scale(calc(var(--z, 1) * 1.06)); }
.dz-media .play { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 6px; border-radius: 999px; background: rgba(25, 24, 38, .82); color: #fff; font: 500 13px/1 var(--sans); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translate(-50%, -40%); transition: opacity .3s, transform .3s; }  /* "View live" in the card's middle */
.dz-media .play i { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, #6E72F2, #8f93ff); font-style: normal; font-size: 10px; }
.dz-card:hover .dz-media .play, .dz-media:focus-visible .play { opacity: 1; transform: translate(-50%, -50%); }
.dz-info { display: flex; align-items: center; gap: 10px; padding: 10px 8px 4px; }
.dz-info > span { min-width: 0; }
.dz-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14.5px/1.2 var(--sans); letter-spacing: -.01em; } .dz-info small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--sans); color: var(--ink2); }
.dz-info a { margin-left: auto; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink2); text-decoration: none; transition: background .2s, color .2s; }
.dz-info a:hover { background: rgba(110, 114, 242, .1); color: var(--vio); }
.dz-dots { display: none; }
/* a piece from iJewel Design, live, in a box over the page; iJewel Design's mark and a thin bar in its colours while it loads */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(226, 229, 240, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.lb.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb-box { position: relative; display: flex; flex-direction: column; width: min(960px, 100%); height: min(700px, calc(100svh - 48px)); overflow: hidden; border-radius: 28px; background: #fff;
  box-shadow: 0 40px 90px -30px rgba(40, 44, 120, .5), 0 0 0 1px rgba(25, 24, 38, .05); transform: translateY(16px) scale(.98); transition: transform .45s var(--ease); }
.lb.on .lb-box { transform: none; }
.lb-stage { position: relative; flex: 1; min-height: 0; }
.lb-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }  /* iJewel Design's own embed */
.lb-poster { position: absolute; inset: 8% 12%; width: 76%; height: 84%; object-fit: contain; opacity: .5; filter: blur(6px); transition: opacity .5s; pointer-events: none; }  /* under the pointer, the frame: a drag turns the piece, it never picks up this picture (Dasha, 22 Oct) */
.lb-load { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: grid; place-content: center; justify-items: center; background: rgba(255, 255, 255, .62); transition: opacity .5s, visibility 0s .5s; }
.lb-load .bar { position: relative; width: 150px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(176, 82, 255, .14); }
.lb-load .bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; border-radius: inherit; background: linear-gradient(90deg, #B052FF, #81C3FF); animation: lb-bar 1.2s ease-in-out infinite; }
@keyframes lb-bar { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.lb.is-live .lb-load { opacity: 0; visibility: hidden; }
.lb.is-live .lb-poster { opacity: 0; }
.lb-info { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 22px; border-top: 1px solid rgba(25, 24, 38, .06); text-align: left; }
.lb-info b { display: block; font: 500 16px/1.2 var(--sans); letter-spacing: -.01em; } .lb-info small { display: block; margin-top: 2px; font: 400 12.5px/1.2 var(--sans); color: var(--ink2); }
.lb-info a { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; font: 500 13.5px/1 var(--sans); white-space: nowrap; }
.lb-info a:hover { background: #2b2940; }
.lb-x { -webkit-appearance: none; appearance: none; margin: 0; position: absolute; right: 14px; top: 14px; z-index: 5; width: 40px; height: 40px; border: 1px solid rgba(25, 24, 38, .08); border-radius: 12px; background: rgba(255, 255, 255, .92); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.lb-x:hover { background: #fff; }
@media (max-width: 860px) { .lb { padding: 10px; } .lb-box { height: min(620px, calc(100svh - 20px)); border-radius: 22px; } .lb-info { padding: 12px 12px 12px 16px; } .lb-info a { padding: 0 12px; font-size: 12.5px; } }
.logos { position: relative; overflow: hidden; margin-top: 12px; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos .track { display: flex; align-items: center; gap: 56px; width: max-content; animation: logos-run 46s linear infinite; }
.logos:hover .track { animation-play-state: paused; }
@keyframes logos-run { to { transform: translateX(calc(-50% - 28px)); } }
.lg { flex: none; height: calc(22px * var(--k)); width: auto; aspect-ratio: var(--a); object-fit: cover; filter: grayscale(1) contrast(1.2); opacity: .7; mix-blend-mode: multiply; transition: opacity .2s, filter .2s; }
.lg:hover { opacity: 1; filter: none; }
/* the file's safety as one line (Dasha, 21 Oct: she doubts the section; one line stays, easy to drop) */
.safe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; max-width: 900px; margin: 0 auto; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--edge);
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 400 14px/1.4 var(--sans); color: var(--ink2); }
.safe .ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(110, 114, 242, .1); color: var(--vio); }
.safe b { font-weight: 500; color: var(--ink); }
.safe .see { font-size: 13.5px; }

/* 3. the call (Dasha, 25 Oct, after Passbase's "Have a complex use case?"): a calm last screen that does not repeat the first.
   The question, one line, the two ways in, then the brands as a still grey grid; two of our ring renders rest at the screen's
   edges, partly off it, and drift a little. */
.scr--end { position: relative; isolation: isolate; align-items: center; }
.cx { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 760px; margin: 0 auto; }
.cx h2 { font-size: clamp(40px, min(4.6vw, 7.4svh), 64px); line-height: 1.04; letter-spacing: -.045em; }
.cx .sub { margin-top: clamp(14px, 2svh, 20px); text-wrap: balance; }
.cx-note { margin: 12px auto 0; font: 400 12.5px/1.4 var(--sans); color: var(--ink3); opacity: .8; }  /* what the free account is (Dasha, 26 Oct) */
.cx .cta { margin-top: clamp(24px, 4svh, 36px); }
/* the brands: 3 by 2, grey and still (no hover colour: the grid is a quiet proof, not a row of links) */
.cx-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; width: min(100%, 580px); margin: clamp(40px, 7svh, 72px) 0 0; padding: 0; list-style: none; }
.cx-logos li { display: grid; place-items: center; height: 60px; }
.cx-logos img { height: calc(26px * var(--k)); width: auto; max-width: 100%; aspect-ratio: var(--a); object-fit: cover; filter: grayscale(1) contrast(1.2); opacity: .55; mix-blend-mode: multiply; }
@media (max-width: 560px) { .cx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; } }  /* a phone: two logos a row (Dasha, 29 Oct) */
/* the two rings: behind the words, cut by the screen's edge; the renders have a clear ground, so they sit on the dots. The left
   one is the first ring of the quiz's row of four (/site/assets/quiz/rings-four.webp, 1840 x 750; the ring at 46,61, 356 x 510), cut
   out by its box */
.cx-obj { position: absolute; z-index: -1; pointer-events: none; user-select: none; height: auto; animation: cx-drift 9s ease-in-out infinite alternate; }
.cx-obj--l { left: clamp(16px, 5vw, 110px); top: 15%; width: clamp(190px, 20vw, 300px); aspect-ratio: 356 / 510; overflow: hidden; rotate: -12deg; }  /* nearer the centre, whole (Dasha, 26 Oct) */
.cx-obj--l img { position: absolute; left: -12.92%; top: -11.96%; width: 516.85%; max-width: none; height: auto; }
.cx-obj--r { right: clamp(16px, 5vw, 110px); bottom: 9%; width: clamp(210px, 22vw, 330px); rotate: 12deg; animation-delay: -4.5s; }
@keyframes cx-drift { from { translate: 0 8px; } to { translate: 0 -10px; } }
/* a tablet: the rings smaller and further out, clear of the words; a phone has no room beside the words, so none */
@media (max-width: 1100px) { .cx-obj--l { top: 9%; left: 8px; width: 170px; } .cx-obj--r { bottom: 2%; right: 8px; width: 170px; } }
@media (max-width: 640px) { .cx-obj { display: none; } .cx .cta { flex-direction: column; width: min(100%, 320px); } }  /* the two buttons one over the other, one width */

.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* 4 screens (Dasha, 21 Oct): the hero, Made on iJewel3D, from CAD to your website, and the call with the brands; a scroll settles on the next one (html.snap,
   /site/assets/snap.css). The bar floats over each screen (snap.css fixes it), so a screen is the whole window and keeps the bar's height
   (--hdr) clear at its top. */
:root { --hdr: 74px; }
.hero { min-height: 100svh; padding-top: calc(var(--hdr) + clamp(40px, 5svh + 20px, 80px)); }  /* the title a little lower (Dasha, 22 Oct) */
.scr { display: flex; flex-direction: column; justify-content: center; max-width: 1440px; margin: 0 auto; padding: calc(var(--hdr) + clamp(14px, 2.6svh, 28px)) var(--m) clamp(10px, 1.8svh, 18px); text-align: center; }
.scr--made h2 { margin: 2px 0 0; font-size: clamp(30px, 5.2svh, 46px); }
.dz { flex: none; display: flex; flex-direction: column; margin-top: clamp(14px, 2.6svh, 26px); }  /* the cards keep their own height (Dasha, 21 Oct: landscape cards) */
/* two rows of four big cards (Dasha, 29 Oct: the two rows of five were small). A card is the poster itself, edge to edge, with
   the name over its foot on a dark fade; the ninth piece waits for a phone's row, where all nine scroll. */
.dz-track { flex: none; display: grid; grid-template-columns: repeat(4, 290px); grid-template-rows: auto auto; gap: 18px; justify-content: center; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }  /* one fixed size, whatever the window (Dasha, 29 Oct) */
@media (max-width: 1300px) { .dz-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dz-card { flex: none; min-height: 0; scroll-snap-align: none; padding: 0; overflow: hidden; }  /* the cards were the row's snap points; the page's are its screens */
.dz-card:nth-child(n + 9) { display: none; }
.dz-media { flex: none; aspect-ratio: 4 / 3; max-height: none; width: 100%; border-radius: 0; }  /* landscape cards, the same on every screen (Dasha, 29 Oct) */
.dz-media img { object-fit: cover; }  /* a poster on a coloured ground fills its card; --z brings the white ones to one size */
.dz-media .play { top: 44%; }
.dz-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 44px 10px 12px 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 13, 22, 0) 0%, rgba(14, 13, 22, .55) 55%, rgba(14, 13, 22, .78) 100%); }
.dz-info b { font-size: 15px; color: #fff; } .dz-info small { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.dz-info a { width: 34px; height: 34px; pointer-events: auto; color: rgba(255, 255, 255, .78); } .dz-info a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
/* the band builder in the piece's place (Dasha, 21 Oct: easier): bigger markers with a word under each (Profile, Width, Metal), the
   open one's options on a clean light card beside the band; one card at a time, and a click anywhere else closes it (xray.js) */
.alt[data-k="wbb"] .xr-spot { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.alt[data-k="wbb"] .xr-spot svg { width: 22px; height: 22px; } .alt[data-k="wbb"] .xr-spot svg.wide { width: 26px; height: 12px; }
.alt[data-k="wbb"] .xr-spot[data-cap]::before { content: attr(data-cap); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); display: block; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 4px 12px -6px rgba(40, 44, 120, .35); font: 500 11px/1.2 var(--sans); color: var(--ink); white-space: nowrap; pointer-events: none; }
.alt[data-k="wbb"] .xr-spot[data-cap=""]::before { display: none; }
.alt[data-k="wbb"] .xr-card { padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(25, 24, 38, .06); box-shadow: 0 24px 48px -22px rgba(40, 44, 120, .45); color: var(--ink); }
.alt[data-k="wbb"] .xr-card .xr-label { color: var(--ink); background: #fff; border: 1px solid rgba(25, 24, 38, .08); font-weight: 500; }
.alt[data-k="wbb"] .xr-chip, .alt[data-k="wbb"] .xr-tab { width: 42px; height: 42px; border-radius: 12px; color: var(--ink2); }
.alt[data-k="wbb"] .xr-chip--wide { width: 80px; height: 42px; }
.alt[data-k="wbb"] .xr-chip:hover, .alt[data-k="wbb"] .xr-tab:hover { background: rgba(110, 114, 242, .08); color: var(--ink); }
.alt[data-k="wbb"] .xr-chip[aria-checked="true"], .alt[data-k="wbb"] .xr-tab[aria-selected="true"] { background: rgba(110, 114, 242, .12); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--vio); }
.alt[data-k="wbb"] .xr-colh, .alt[data-k="wbb"] .xr-foot { color: var(--ink2); }
@media (max-width: 860px) {
  .dz-media { flex: none; aspect-ratio: 4 / 3; max-height: none; border-radius: 17px; } .dz-card { padding: 6px; } .dz-card:nth-child(n + 9) { display: flex; }
  .dz-info { position: static; padding: 10px 8px 4px; pointer-events: auto; background: none; } .dz-info b { color: inherit; } .dz-info small { color: var(--ink2); }
  .scr { padding-top: calc(var(--hdr) + 40px); }
}  /* a phone's screens run on; air between them */
@media (max-width: 640px) { :root { --hdr: 64px; } }
@media (max-width: 1180px) { :root { --m: 28px; --core-w: min(calc(var(--core) * 1.25), 50vw); } .tile { gap: 12px; } .tile .ic { width: 46px; height: 46px; border-radius: 15px; } .tile small { display: none; } .tw, .side > .tile { width: min(100%, 220px); }
  .tacts { left: 72px; top: calc(50% + 2px); } .tile[aria-pressed="true"] b { transform: translateY(-9px); } }
@media (max-width: 860px) {  /* a phone or a narrow window: the piece first, then the four features in a grid of two */
  /* a phone's first screen holds the words, the ring and all four cards (Dasha, 22 Oct: the site must work on a phone): the ring
     takes the height the window leaves, from 250 px up to the width */
  :root { --m: 16px; --core: min(calc(100vw - 32px), 420px, max(232px, calc(100svh - 434px))); --core-w: calc(100vw - 32px); }
  .hero { min-height: 0; padding-top: calc(var(--hdr) + 40px); }  /* the title clear of the header, a little lower (Dasha, 22 Oct); the ring gives up the same height, so the four cards still fit */
  .stage { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .core { grid-column: 1 / -1; order: -1; justify-self: center; margin-bottom: 4px; }
  .side { display: contents; }
  .tile { min-height: 48px; padding: 6px; gap: 10px; grid-template-columns: auto 1fr; border-radius: 16px; } .tile .ic { width: 36px; height: 36px; border-radius: 12px; } .tile .ic svg { width: 20px; height: 20px; }
  .tile b { font-size: 14px; } .tile small, .tile .go { display: none; }
  .light { left: 6px; padding: 6px 5px; gap: 6px; }  /* the lights keep their 34 px: a finger's target */
  .tacts { left: 52px; top: calc(50% + 1px); gap: 10px; } .tacts a { font-size: 12px; } .px { display: none; }
  .tw, .side > .tile { width: 100%; } .side > .tile { align-self: start; }  /* a grid item before it is wrapped: its own height, as in its wrapper */
  .tile[aria-pressed="true"] b { transform: translateY(-8px); }
  .pane.is-site > .hero3d { transform: translateY(-13%) scale(.56); }  /* a phone: the ring above the card */
  .shop { width: 136px; padding: 9px; gap: 6px; right: 8px; bottom: 8px; } .shop .pr, .shop .bag { display: none; } .shop b { font-size: 13px; } .shop .sw button { width: 24px; height: 24px; } .shop .row > span i { display: none; }
  h2 { font-size: 36px; }
  .sec { padding-top: 100px; }
  /* Made on iJewel3D on a phone (Dasha, 22 Oct: the cards must be easy to scroll there): one row that a thumb swipes, a card and
     the edge of the next in view so the row shows it goes on, each swipe stopping on a card's edge, dots for where you are */
  .dz { --gap: 12px; }
  .dz-track { display: flex; grid-template-columns: none; grid-template-rows: none; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: auto;
    margin: -14px calc(-1 * var(--m)) -30px; padding: 14px var(--m) 30px; scroll-padding: 0 var(--m); cursor: auto; }
  .dz-card { flex: 0 0 min(76%, 320px); scroll-snap-align: start; scroll-snap-stop: normal; }
  .dz-card:hover { transform: none; }  /* a tap is not a hover */
  .dz-info a { display: none; } .dz-info b { font-size: 15px; } .dz-info small { font-size: 12.5px; }
  .dz-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
  .dz-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(25, 24, 38, .16); transition: width .3s var(--ease), background .3s; }
  .dz-dots i.on { width: 18px; background: var(--vio); }
  /* a phone's smallest words at 12 px, and a finger's target behind the small links (22 Oct) */
  .site-bar span, .shop .row > span { font-size: 12px; }
  .tacts a { display: inline-block; padding: 4px 10px 14px; margin: -4px -10px -14px; }  /* a finger's target under the card's name, not over it: a tap on the name closes the card (22 Oct: it hit See more) */
  .lb-x { width: 44px; height: 44px; }
  .dz-media .play { opacity: 1; transform: translate(-50%, -50%); height: 32px; font-size: 12px; } .dz-media .play i { width: 22px; height: 22px; }
  .safe { margin-top: 84px; padding: 12px 16px; border-radius: 22px; font-size: 13px; }
  .safe .see { display: inline-block; padding: 15px 8px; margin: -15px -8px; }  /* Developer docs: a finger's target (it was 14 px tall) */
  .logos .track { gap: 36px; }
}
@media (max-width: 420px) { .site-plats { display: none; } }
/* the ghost cursor: while the visitor does nothing, it does the clicks for them (Dasha, 20 Oct). It never takes input. */
.ghost { position: fixed; left: 0; top: 0; z-index: 58; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); will-change: transform; }
.ghost.on { opacity: 1; }
.ghost svg { display: block; width: 22px; height: 22px; overflow: visible; transform-origin: 4px 3px; transition: transform .22s var(--ease); filter: drop-shadow(0 1px 1px rgba(25, 24, 38, .25)) drop-shadow(0 6px 10px rgba(25, 24, 38, .22)); }
.ghost.down svg { transform: scale(.84); }
.ghost .pill { position: absolute; left: 19px; top: 21px; padding: 5px 9px; border-radius: 999px; background: var(--vio); color: #fff; font: 500 11px/1 var(--sans); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(25, 24, 38, .12), 0 8px 18px -8px rgba(110, 114, 242, .8); transition: transform .22s var(--ease); }
.ghost.down .pill { transform: scale(.94); }
.ghost .rip { position: absolute; left: 4px; top: 3px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--vio); opacity: 0; transform: scale(.3); }
.ghost.click .rip { animation: ghost-rip .6s var(--ease); }
@keyframes ghost-rip { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.25); } }
.ghost.touch svg { display: none; }
.ghost.touch::before { content: ''; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 2px solid var(--vio);
  box-shadow: 0 6px 16px -4px rgba(25, 24, 38, .3); transition: transform .22s var(--ease); }
.ghost.touch.down::before { transform: scale(.82); }
.ghost.touch .pill { left: 16px; top: 12px; } .ghost.touch .rip { left: 0; top: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .cx-obj { animation: none; } .js h1 .w { animation: none; opacity: 1; transform: none; }
  .logos .track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .logos .track [aria-hidden] { display: none; }
  .pane > .hero3d, .alt, .site, .site-bg, .tile, .tile::before, .tile .ic, .tile .ic svg, .tacts, .px, .dz-card, .dz-media img, .lb, .lb-box, .tm-grid, .tm { transition: none; } .lb-load .bar i { animation: none; } .tile .ic::after { animation: none !important; } .ghost { display: none; }
}

/* the features (Dasha, 28 Oct: "the main things we give"; 29 Oct: Batch render, the configurators, engraving, Try On and
   embedding join): twelve cards in one grid, in the kit's features look (tools/sections/features.html): a white card, an icon in a soft blue tile, a title, one
   line and the page behind it; four in a row on a laptop, two on a tablet, one on a phone (the icon at the left there) */
.scr--words .scr-head, .scr--feat .scr-head { text-align: center; margin-bottom: clamp(20px, 3.4svh, 36px); }
.kick { margin: 0 0 12px; font: 500 16px/1.3 var(--sans); letter-spacing: -.01em; color: var(--link); }  /* the kit's kicker */
.ft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; }
/* the six services (Dasha, 29 Oct): the layout of the Yandex 360 page, in our glass. A frosted plate, the words at the top, a glass
   arrow at the bottom left, and in the corner a frosted disc with the service's line icon in our blue, cut by the card's own corner */
.scr--svc .scr-head { margin-bottom: clamp(40px, 5vw, 64px); }
.scr--svc { padding-bottom: clamp(48px, 7vw, 110px); }  /* more air before Made with iJewel3D (Dasha, 29 Oct) */
body.glass .scr--svc .scr-head h2, .scr--svc .scr-head h2 { font-size: clamp(32px, 3.4vw, 46px); }  /* a little smaller (Dasha, 29 Oct) */
.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; text-align: left; }
.sv-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 296px; padding: 32px 34px 30px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .07), 0 2px 4px rgba(25, 24, 38, .05), 0 28px 60px -22px rgba(40, 44, 120, .3); color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s; }
/* the cards read on the pale page (Dasha, 29 Oct: "the cards are hard to see, so is the shadow"): a denser plate, a hairline edge ring,
   a shadow that is actually there, and the kit figure's soft blue light behind the grid, so the glass has something to sit on */
.sv-grid { position: relative; isolation: isolate; }
.sv-grid::before { content: ''; position: absolute; z-index: -1; inset: 6% 6% -4% 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 114, 242, .22), rgba(140, 170, 255, .12) 60%, transparent); filter: blur(34px); }
.sv-card::before { content: ''; position: absolute; z-index: -2; inset: 0; background: radial-gradient(120% 90% at 100% 100%, rgba(110, 114, 242, .14), transparent 55%); pointer-events: none; }
.sv-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 2px 4px rgba(25, 24, 38, .05), 0 36px 70px -22px rgba(40, 44, 120, .42); }
.sv-card:focus-visible { outline: 2px solid #6E72F2; outline-offset: 4px; }
.sv-card h3 { margin: 0; font: 500 22px/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.sv-card p { margin: 10px 0 0; max-width: 22em; font: 400 15.5px/1.5 var(--sans); color: var(--ink2); }
.sv-go { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 28px; border-radius: 15px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .95); color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(25, 24, 38, .35); transition: transform .3s, background .3s, color .3s; }
.sv-go svg { width: 22px; height: 22px; }
.sv-card:hover .sv-go { transform: translateX(4px); background: var(--ink); color: #fff; border-color: var(--ink); }
.sv-bubble { position: absolute; z-index: -1; right: -48px; bottom: -70px; display: grid; place-items: center; width: 270px; height: 270px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f6f6fd 34%, #e7e8fb 62%, rgba(110, 114, 242, .38) 100%);
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 -34px 60px rgba(110, 114, 242, .22), inset 0 18px 36px rgba(255, 255, 255, 1), inset 6px 0 24px rgba(255, 255, 255, .6), 0 34px 70px -30px rgba(40, 44, 120, .5);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1); }  /* a sphere, bigger (Dasha, 29 Oct): a highlight at the top left, the shade and our blue gathering at the bottom right */
.sv-bubble::after { content: ''; position: absolute; left: 14%; top: 9%; width: 34%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.sv-bubble svg { width: 96px; height: 96px; margin: -26px 2px 0 0; color: var(--link); stroke: currentColor; stroke-width: 1.8; fill: none; }
.sv-bubble svg.is-24 { stroke-width: .9; }  /* the header's own icons (tools/header.py, a 24 grid), the same line weight as the 48 grid ones (Dasha, 29 Oct: the icons we have) */  /* the icon: a clean line in our blue, no fill; every filled dot in it is blue too (currentColor); a little right and down (Dasha, 29 Oct) */
.sv-card:hover .sv-bubble { transform: scale(1.04) rotate(-3deg); }
@media (max-width: 1100px) { .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .sv-card { min-height: 0; padding: 26px 26px 24px 26px; } .sv-card p { padding-right: 70px; } .sv-card .sv-go { margin-top: 22px; } .sv-bubble { width: 196px; height: 196px; right: -50px; bottom: -72px; } .sv-bubble svg { width: 70px; height: 70px; margin: -30px 10px 0 0; } }
@media (prefers-reduced-motion: reduce) { .sv-card, .sv-go, .sv-bubble { transition: none; } }
.ft-card { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 10px 16px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04), 0 14px 64px -38px rgba(40, 44, 120, .15); }
/* a picture on top of each card (Dasha, 30 Oct): the plate holds the feature's image once Dasha sends it (<img> inside .ft-pic); until
   then the card's line icon sits on a soft plate, so the layout is already the final one */
.ft-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 21 / 9; border-radius: 13px; overflow: hidden;  /* a low plate: the cards were huge (Dasha, 30 Oct) */
  background: radial-gradient(120% 100% at 80% 0%, #ffffff, #f1f2fd 50%, #e4e6fb); box-shadow: inset 0 0 0 1px rgba(110, 114, 242, .08); }
.ft-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
/* the whole card is the link (Dasha, 30 Oct): the button's ::after covers the card; on hover the card lifts, the picture grows a little and the button fills */
.ft-card { position: relative; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s; }
.ft-btn::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }  /* above the picture, the card's own corners (not the pill's: that left the card's corners unclickable), so a click anywhere on the card is a click on the link */
.ft-card:has(.ft-btn:focus-visible) { outline: 2px solid var(--vio); outline-offset: 2px; }
.ft-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(25, 24, 38, .07), 0 2px 4px rgba(25, 24, 38, .05), 0 30px 70px -30px rgba(40, 44, 120, .35); }
.ft-card:hover .ft-pic img { transform: scale(1.05); }
.ft-card:hover .ft-btn { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ft-card, .ft-pic img { transition: none; } .ft-card:hover { transform: none; } .ft-card:hover .ft-pic img { transform: none; } }
.ft-card h3 { margin: 14px 8px 0; font: 500 17px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ft-card p { margin: 6px 8px 14px; font: 400 14px/1.45 var(--sans); color: var(--ink2); }
.ft-btn { display: inline-flex; align-items: center; gap: 7px; margin: auto 8px 0; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(25, 24, 38, .14); background: #fff; color: var(--ink);
  font: 500 13px/1 var(--sans); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.ft-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ft-btn:focus-visible { outline: none; }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ft-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ft-pic { aspect-ratio: 21 / 9; } }
/* the Playground screen (Dasha, 30 Oct: a simple section about the editor, its film in a browser frame, a link to the page) */
.scr--pg .scr-head { text-align: center; margin-bottom: clamp(16px, 3svh, 28px); }
.scr--pg .sub { margin-top: 8px; }
.pg-frame { width: min(100%, 820px); margin: 0 auto; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--edge); box-shadow: var(--shadow); }  /* Dasha's picture of the editor (30 Oct), no film, no steps */
.pg-shot { display: block; width: 100%; height: auto; }
.scr--pg .cta { justify-content: center; margin-top: clamp(18px, 3.2svh, 30px); }
/* Visualize in seconds (Dasha, 4 Nov): the CAD and render picture from the old landing, after the feature ring */
.scr--viz .scr-head { text-align: center; margin-bottom: clamp(8px, 1.6svh, 16px); }
.scr--viz .scr-head h2 { font-size: clamp(32px, 3.4vw, 46px); }
.viz-ic { display: block; width: clamp(84px, 8vw, 120px); height: auto; margin: 0 auto clamp(10px, 1.6svh, 16px); }
.viz-fig { position: relative; width: min(100%, 1080px); margin: 0 auto; }
.viz-fig img { display: block; width: 100%; height: auto; }
.viz-fig figcaption span { position: absolute; bottom: 9%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(25, 24, 38, .1), 0 8px 20px -12px rgba(25, 24, 38, .3);
  font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.viz-fig figcaption span:first-child { left: 30%; }
.viz-fig figcaption span:last-child { left: 64%; }
@media (max-width: 560px) { .viz-fig figcaption span { padding: 6px 10px; font-size: 11.5px; bottom: 4%; } }
/* what people say (Dasha, 23 Oct: the testimonials of the live site) */
/* 29 Oct (Dasha): the words in one line, a wheel that turns right to left by itself; the one in the middle bright, the ones
   beside it dimmed. The script (at the end) clones the line on both sides so it never ends, and centres the card in turn. */
.tm-wheel { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--m)); padding: 24px 0 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tm-grid { --w: min(560px, 64vw); --gap: 20px; display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; transform: translateX(var(--x, 0px)); transition: transform .8s var(--ease); }
.tm-grid.is-jump { transition: none; }
.tm { flex: 0 0 var(--w); display: flex; flex-direction: column; gap: 16px; padding: 24px 26px; border-radius: 20px; text-align: left; cursor: pointer;
  opacity: .38; transform: scale(.94); transition: opacity .8s, transform .8s var(--ease), background .3s, box-shadow .3s; }
.tm.is-on { opacity: 1; transform: none; cursor: default; }
.tm:focus-visible { outline: 2px solid var(--vio); outline-offset: 2px; }
@media (max-width: 640px) { .tm-grid { --w: 80vw; --gap: 14px; } .tm { padding: 20px; } }
.tm blockquote { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--ink); }
.tm-by { display: flex; align-items: center; gap: 12px; margin: auto 0 0; }
.tm-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tm-in { display: grid; place-items: center; background: rgba(110, 114, 242, .12); color: #5053D0; font: 500 15px/1 var(--sans); }
.tm-by > span:not(.tm-av) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-by b { font: 500 14px/1.2 var(--sans); }
.tm-by small { font: 400 12.5px/1.3 var(--sans); color: var(--ink2); }
.tm-lg { margin-left: auto; max-height: 28px; width: auto; opacity: .8; }

/* Made on iJewel3D on a dark ground (Dasha, 28 Oct): a deep ink panel with a violet and a sky glow and faint dots, inset from
   the page by the header's and the footer's margin, with their 32 px corners (24 on a phone), so it reads as one more card of
   the light page. The heading and the line in white, the cards on dark glass. The box that opens a piece stays light. */
/* 29 Oct (Dasha): the dark ground is the whole screen, edge to edge with no corners, so the page passes into it on a straight
   line; inside, everything centred: the heading, the cards, then the way to iJewel Design under them */
.scr--made { max-width: none; padding: 0; margin: clamp(32px, 6svh, 72px) 0; }  /* light air on both sides of the dark ground (Dasha, 29 Oct) */
.mk { --m: clamp(20px, 3.4vw, 48px); position: relative; isolation: isolate; overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; margin: 0; padding: calc(var(--hdr) + clamp(20px, 3.6svh, 40px)) max(var(--m), calc((100% - 1344px) / 2)) clamp(28px, 4.4svh, 52px); color: #fff;
  background: radial-gradient(70% 62% at 84% -12%, rgba(110, 114, 242, .44), transparent 72%), radial-gradient(52% 56% at 4% 110%, rgba(95, 184, 255, .2), transparent 70%),
    linear-gradient(160deg, #15141f 0%, #1b1a29 50%, #221f33 100%);
  }
.mk::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1.1px, transparent 1.7px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 35%, #000, transparent); mask-image: radial-gradient(80% 75% at 50% 35%, #000, transparent); }
.mk h2 { color: #fff; } .mk h2 em { color: #aeb1ff; }
/* the head row (Dasha, 29 Oct): the heading at the left, the way to iJewel Design at the right, no line under the heading */
.mk-head { text-align: center; }
.mk-foot { display: flex; justify-content: center; margin-top: clamp(20px, 3.4svh, 36px); }
.mk-more { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font: 500 15px/1 var(--sans); color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: background .2s, border-color .2s; }
.mk-more:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }
.mk-more svg { flex: none; }
.mk :focus-visible { outline-color: #aeb1ff; }
.mk .dz-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mk .dz-card:hover, .mk .dz-card:focus-within { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .8); }
.mk .dz-info b { color: #fff; } .mk .dz-info small { color: rgba(255, 255, 255, .7); }
.mk .dz-info a { color: rgba(255, 255, 255, .72); } .mk .dz-info a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mk .dz-dots i { background: rgba(255, 255, 255, .24); } .mk .dz-dots i.on { background: #aeb1ff; }
/* the cards keep one size whatever the window (Dasha, 29 Oct) */

/* the questions (Dasha, 28 Oct; the kit's faq; 29 Oct: one centred column - the heading "FAQ" on top, the accordion under it,
   and at the end one line for the reader who did not find the answer, with the link to the docs) */
.scr--faq .scr-head { text-align: center; margin-bottom: clamp(24px, 3.6svh, 40px); }
/* the words and the questions are not screens of their own (Dasha, 29 Oct: less distance from CAD to the words, and from the words to the questions) */
html.snap .scr--words, html.snap .scr--faq { min-height: 0; padding-top: clamp(40px, 7svh, 72px); padding-bottom: clamp(24px, 4svh, 40px); }
.fq { width: 100%; max-width: 880px; margin: 0 auto; text-align: left; }
.fq-foot { margin: clamp(22px, 3svh, 32px) 0 0; text-align: center; font: 400 16px/1.5 var(--sans); color: var(--ink2); }
.fq-more { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font: 500 16px/1.5 var(--sans); color: var(--link); text-decoration: none; white-space: nowrap; }
.fq-more svg { width: 18px; height: 18px; transition: transform .3s; }
.fq-more:hover svg { transform: translateX(3px); }
.fq-list { display: grid; gap: 12px; }
.fq-qa { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04), 0 12px 48px -34px rgba(40, 44, 120, .15); }
.fq-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 22px; cursor: pointer; list-style: none;
  font: 500 18px/1.35 var(--sans); letter-spacing: -.015em; color: var(--ink); border-radius: 20px; }
.fq-qa summary::-webkit-details-marker { display: none; }
.fq-qa summary:focus-visible { outline: 2px solid var(--vio); outline-offset: 2px; }
.fq-qa .chev { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(110, 114, 242, .1); color: var(--link); transition: transform .3s; }
.fq-qa[open] .chev { transform: rotate(180deg); }
.fq-qa p { margin: -4px 22px 0; padding: 0 0 20px; max-width: 46em; font: 400 16px/1.6 var(--sans); color: var(--ink2); }
@media (max-width: 860px) {
  .fq-foot { font-size: 15.5px; } .fq-more { margin: 6px 0 0; }
  .fq-qa summary { min-height: 62px; padding: 14px 18px; font-size: 16.5px; } .fq-qa p { margin: -4px 18px 0; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .fq-qa .chev, .fq-more svg { transition: none; } }

/* every heading's highlight in colour only, in the heading's own font: no italic serif (Dasha, 26 Oct) */
main em { font: inherit; letter-spacing: inherit; color: var(--vio); }
/* the panel: one rounded card under the header, with its own faint dots (the quso reference) */
.cl { --E: cubic-bezier(.6, 0, .2, 1); --px: 0; --py: 0; --c1: 172px; --c2: 160px; --tg: 18px; --xr: 34px; --xb: 10px;  /* extra width for the Ring configurator and Batch Render cards: their names need air at the right (Dasha, 31 Oct); their thumbnails follow */ position: relative; height: calc(100svh - var(--hdr) - 26px); min-height: 700px; max-height: 1040px; margin: calc(var(--hdr) + 10px) 16px clamp(32px, 6svh, 72px); overflow: visible; text-align: center;
  border-radius: 30px; }  /* no edge and no colour of its own: the page's dots show through and the screen runs into the logo band with no line; nothing is clipped, so no shadow is cut (Dasha, 29 Oct) */
/* the words: in the middle, under the mark, on a soft white light so they read over the pieces */
/* no mark over the words, and the words a little higher (Dasha, 6 Nov) */
.cl-words { position: absolute; z-index: 5; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: min(860px, calc(100vw - 2 * var(--m))); pointer-events: none; }
.cl-words > * { pointer-events: auto; }
.cl-light { position: absolute; z-index: 0; left: 50%; top: 45%; width: min(1010px, 118vw); height: 560px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fff, #fff 70%, rgba(255, 255, 255, 0)); }  /* pure white behind the words, over the dots; it lies under every piece, so the devices sit on it, not under it (Dasha, 29 Oct) */
.cl-plats { display: none; }  /* a phone only: the store platforms' tiles in a row over the words, as the ones under the words on a laptop (Dasha, 29 Oct) */
.cl-words h1 { margin: 0; font: 500 clamp(38px, 4.6vw, 64px)/1.22 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
/* CAD and live: white, in the middle of a plate of our violet (Dasha, 29 Oct) */
.cl-words h1 em { display: inline-block; padding: .13em .22em .05em; border-radius: .24em; line-height: .95; background: linear-gradient(120deg, #6E72F2, #8e6cff); color: #fff; box-shadow: 0 10px 28px -12px rgba(110, 114, 242, .7); }
.cl-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: clamp(30px, 4.4svh, 44px); }
.cl-acts .btn { height: 52px; padding: 0 26px; font-size: 15.5px; }
.btn.wh { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(25, 24, 38, .1), 0 10px 28px rgba(60, 70, 140, .1); }
.btn.wh:hover { background: #fff; box-shadow: 0 0 0 1px rgba(110, 114, 242, .45), 0 14px 32px rgba(110, 114, 242, .16); }
.cl-note { margin: 16px 0 0; font: 400 13.5px/1.4 var(--sans); color: var(--ink2); }
/* the pieces: each in its place (in % of the panel), leaning a little (--rot), at a depth (--z: how much it follows the
   pointer and how big its shadow), floating slowly (--d, --dx, --dy). Every piece is whole: nothing runs off the panel */
.cl-field { position: absolute; z-index: 1; inset: 0; pointer-events: none; }  /* no layer of its own, so a piece with a z-index can sit over the words' light */
.cl-it { position: absolute; width: var(--wk, var(--w)); transform: translate3d(calc(var(--px) * var(--z) * 16px), calc(var(--py) * var(--z) * 12px), 0) rotate(var(--rot, 0deg)); transition: transform 1.2s var(--E); will-change: transform; pointer-events: auto; }
.cl-fl { animation: cl-float var(--d, 8s) ease-in-out infinite alternate; }
@keyframes cl-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx, 0px), var(--dy, -10px), 0); } }
/* a product's card: its icon, its name, two faint lines (the reference's small cards) */
.cl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; box-sizing: border-box; padding: 12px 14px 12px; border-radius: 14px; background: #fff; text-align: left;
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 calc(10px + var(--z) * 12px) calc(28px + var(--z) * 20px) -16px rgba(40, 44, 120, .4); }
.cl-card .hd { display: flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.cl-card .hd i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(110, 114, 242, .12); color: var(--vio); }
.cl-card .hd svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cl-card .ln { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(25, 24, 38, .08); } .cl-card .ln.s { width: 62%; }
/* a thumbnail beside a card; a phone and a tablet in a thin black frame */
.cl-thumb { display: block; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 10px 26px -14px rgba(40, 44, 120, .45); }
.cl-thumb img { display: block; width: 100%; height: auto; border-radius: 9px; object-fit: cover; aspect-ratio: 1; }
/* a thumbnail that shows one piece, then many of its variants, one after another (Dasha, 29 Oct): the pictures stacked, the
   script lights them in turn */
.cl-cycle { position: relative; } .cl-cycle img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); opacity: 0; transition: opacity .7s var(--E); } .cl-cycle img:first-child { position: static; width: 100%; height: auto; } .cl-cycle img.is-on { opacity: 1; }
.cl-dev { display: block; padding: 3px; border-radius: 24px; background: linear-gradient(180deg, #2a2936, #15141d); box-shadow: 0 0 0 1px rgba(25, 24, 38, .5), 0 calc(16px + var(--z) * 18px) calc(44px + var(--z) * 30px) calc(-20px - var(--z) * 8px) rgba(25, 24, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.cl-dev img, .cl-dev video { display: block; width: 100%; height: auto; max-height: none; border-radius: 21px; background: #f4f4f8; }
.cl-dev.is-tab { border-radius: 14px; } .cl-dev.is-tab img, .cl-dev.is-tab video { border-radius: 11px; aspect-ratio: 1180 / 758; object-fit: cover; }  /* Dasha's Playground recording (29 Oct, 1680 x 1080) */
.cl-dev.is-tel img, .cl-dev.is-tel video { aspect-ratio: 540 / 1168; object-fit: cover; object-position: top; }
.cl-dev .cl-film { display: none; }  /* a laptop: the stills (Dasha, 29 Oct); a phone: the film */
/* a store platform's tile at the bottom middle (the reference's social icons) */
.cl-tile { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 26%; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 14px 30px -14px rgba(40, 44, 120, .45); }
.cl-tile img { width: 58%; height: 58%; object-fit: contain; }
/* the small things from the product: a share link, a customer's question, an export done */
.cl-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 calc(10px + var(--z) * 12px) calc(28px + var(--z) * 20px) -16px rgba(40, 44, 120, .45); font: 500 13.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; text-align: left; }
.cl-chip .ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(110, 114, 242, .12); color: var(--vio); }
.cl-chip .ic svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cl-chip .ic.ok { background: rgba(39, 168, 91, .12); color: #27a85b; }
.cl-chip small { display: block; margin-top: 3px; font: 400 12px/1.2 var(--sans); color: var(--ink2); }
.cl-chip .btn-s { margin-left: 6px; padding: 7px 11px; border-radius: 9px; background: var(--ink); color: #fff; font: 500 12.5px/1 var(--sans); }
.cl-chip .av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff8fb1, #e8588a); color: #fff; display: grid; place-items: center; font: 600 12px/1 var(--sans); }
/* a small laptop (Dasha, 29 Oct: the pieces crowded the words and the share link ran under the buttons): the pieces a fifth
   smaller, the share link and the two outer platform tiles away, the words a little smaller with a tighter white light, and
   the section tall enough to hold it all (the page scrolls a little sooner) */
@media (max-width: 1440px) and (min-width: 1101px) {
  .cl { min-height: 760px; }
  .cl { --c1: 141px; --c2: 131px; --tg: 14px; --xr: 54px; --xb: 36px; } .cl-it:not(.is-auto):not(.is-card) { --wk: calc(var(--w) * .82); }
  .cl-it.is-auto, .cl-it.is-tile-x { display: none; }
  .cl-words h1 { font-size: clamp(34px, 3.9vw, 54px); }
  .cl-light { width: min(900px, 104vw); height: 490px; }
  .cl-acts { margin-top: clamp(24px, 3.4svh, 36px); }
  .cl-it.is-shop { right: 17% !important; } .cl-it.is-tel-m { right: 5% !important; } }
@media (max-width: 1100px) { .cl-it[data-m="0"] { display: none; } }
/* a tablet and a phone (Dasha, 29 Oct: on a tablet the pieces ran over each other and under the words' light, so a tablet takes
   the phone's composition): the two cards with their thumbnails up top, the words, and at the bottom the tablet standing straight
   at the right with the phone straight in front at the left, poking out past the tablet's left edge (her drawing) */
@media (max-width: 1100px) {
  .cl { min-height: 840px; max-height: 920px; margin: calc(var(--hdr) + 4px) 0 0; overflow: visible; }
  .cl-dev { padding: 2px; border-radius: 17px; } .cl-dev img, .cl-dev video { border-radius: 15px; } .cl-dev.is-tab { border-radius: 10px; } .cl-dev.is-tab img, .cl-dev.is-tab video { border-radius: 8px; }  /* the corners in step with the smaller devices */ .cl-words { top: 36%; } .cl-words h1 { font-size: clamp(31px, 8.4vw, 48px); }
  .cl-acts { flex-direction: column; align-items: stretch; width: min(320px, 80vw); margin-top: 40px; }  /* the buttons a little lower (Dasha, 29 Oct) */ .cl-acts .btn { justify-content: center; height: 48px; font-size: 15px; }
  .cl-it[data-m="0"] { display: none; } .cl-it:not(.is-auto) { --wk: var(--wm, calc(var(--w) * .6)); } .cl-chip { font-size: 12px; padding: 8px 10px; } .cl-chip small { font-size: 11px; }
  .cl-it[data-m="1"] { left: var(--ml, auto) !important; right: var(--mr, auto) !important; top: var(--mt) !important; --rot: 0deg !important; }  /* over the inline places of the big screen; the pieces stand straight (Dasha, 29 Oct) */
  .cl-it[data-m="1"] .cl-card { padding: 10px 12px; } .cl-it[data-m="1"] .cl-card .hd { font-size: 12.5px; }
  .cl-light { width: 100vw; height: 460px; top: 36%; } }  /* the white behind the words spans the phone's width */
@media (max-width: 860px) {
  .cl-it.is-card, .cl-it.is-thumb { display: none !important; }
  .cl-plats { display: flex; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .cl-plats li { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 12px 26px -16px rgba(40, 44, 120, .45); } .cl-plats img { width: 22px; height: 22px; object-fit: contain; }
  .cl-fl { animation: none; } .cl-it { transition: none; --px: 0; --py: 0; }  /* the devices stand still on a phone (Dasha, 29 Oct) */
  .cl-dev .cl-still { display: none; } .cl-dev .cl-film { display: block; }
  .cl { min-height: 780px; max-height: 860px; }
  .cl-words { top: 66px; transform: translate(-50%, 0); }  /* right under the news bar */
  .cl-light { top: 22%; height: 380px; }
  .cl-it.is-tab-m { --mt: 62% !important; } .cl-it.is-tel-m { --mt: 64% !important; } }  /* more air after the buttons (Dasha, 29 Oct) */
@media (min-width: 861px) and (max-width: 1100px) {
  .cl { min-height: 1040px; max-height: 1140px; margin-bottom: clamp(48px, 7svh, 90px); }
  .cl-words h1 { font-size: clamp(36px, 4.8vw, 54px); }
  .cl-acts { flex-direction: row; align-items: center; width: auto; margin-top: clamp(28px, 4svh, 40px); } .cl-acts .btn { height: 52px; font-size: 15.5px; }
  .cl-it[data-m="1"]:not(.is-auto) { --wk: calc(var(--wm) * 1.35); }
  .cl-it.is-tab-m { --ml: calc(50% - 236px) !important; } .cl-it.is-tel-m { --ml: calc(50% + 236px - 130px) !important; }
  .cl-it[data-m="1"] .cl-card { padding: 12px 14px; } .cl-it[data-m="1"] .cl-card .hd { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .cl-fl { animation: none; } .cl-it { transition: none; } }
/* the brands' logos under the screen, a still grid, larger than the landing's strip, on white with room round them
   (tools/rain-landing.py puts them there; Dasha, 26 Oct). Each logo's size evens out its shape: --a its width over height,
   --k its scale */
.dr-band { position: relative; padding: clamp(150px, 22svh, 210px) 0 clamp(150px, 20svh, 190px); }  /* the same air under the logos as over them (Dasha, 2 Nov) */  /* twice the air between the first screen and the logos (Dasha, 2 Nov: "lower them by two times") */
.dr-lead { margin: 0; text-align: center; font: 500 14px/1.4 var(--sans); letter-spacing: .02em; color: var(--ink2); }  /* a line before the logos (Dasha, 26 Oct) */
.dr-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 40px; max-width: 1344px; margin: 0 auto; padding: clamp(10px, 2svh, 22px) var(--m) 0; list-style: none; }
.dr-logos li { display: grid; place-items: center; height: 92px; }
.dr-logos img { height: calc(40px * var(--k)); width: auto; max-width: 100%; aspect-ratio: var(--a); object-fit: cover; filter: grayscale(1) contrast(1.2); opacity: .6; mix-blend-mode: multiply; transition: opacity .2s, filter .2s; }
.dr-logos img:hover { opacity: 1; filter: none; }
@media (max-width: 960px) { .dr-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 28px; } }
@media (max-width: 560px) { .dr-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .dr-logos li { height: 64px; } .dr-logos img { height: calc(26px * var(--k)); } }  /* a phone: two logos a row (Dasha, 29 Oct) */