/* The asset library (Dasha, 27 Oct: the first one said things twice and read as unfinished). The first screen is /products/ijewel-playground/'s
   (the words centred, a big film of the library at work under them), then the ring to try it on, the lights,
   what each plan includes, the designs, the way in (its art: the four rings, Dasha, 27 Oct). Each fact once. The header floats over the page; each section
   is as tall as what it holds. */
body.fxp { margin: 0; }
body.fxp .ijh { position: fixed; top: 0; left: 0; right: 0; margin: 14px auto 0; }
@media (max-width: 640px) { body.fxp .ijh { margin-top: 8px; } }
body.fxp > main { padding: 0; }
body.fxp .ijf { margin-top: 0; }
:root { --gl: rgba(255, 255, 255, .7); --gl2: rgba(255, 255, 255, .55); --gl-edge: rgba(255, 255, 255, .85);
  --gl-blur: blur(20px) saturate(1.4); --gl-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 18px 80px -36px rgba(40, 44, 120, .16);
  --rh: clamp(80px, 10vw, 140px); }  /* the air between sections; the shadows at half their first strength (Dasha, 27 Oct) */
@media (max-width: 640px) { :root { --rh: 64px; } }
/* every picture sits on glass (Dasha, 27 Oct, the header's language): a plate of frosted white, a second plate behind it, soft
   shadows, and a small glass label card over the picture */
.plate { --off: 16px; position: relative; padding: 12px; border-radius: 30px; background: var(--gl); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-edge);
  box-shadow: 0 12px 72px -34px rgba(40, 44, 120, .15), var(--gl-shadow); }
/* one plate only: the offset second plate behind it went (Dasha, 27 Oct) */
.lbl { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border: 1px solid var(--gl-edge); box-shadow: 0 8px 32px -18px rgba(25, 24, 38, .2);
  font: 500 13px/1.1 var(--sans); color: var(--ink); pointer-events: none; }
.lbl small { font: 400 12px/1.1 var(--sans); color: var(--ink2); }
html.snap main .snap-sec { min-height: 0; }  /* no full-screen sections, no blank bands (Dasha) */
html.snap .snap-sec[id] { scroll-margin-top: 0; }  /* site.css gives every id an 84 px scroll margin; each section has the header's room in its own padding */
/* one rhythm (Dasha, 27 Oct: the sections sat on each other): each section has the air over its heading and none under its
   content, so from the end of one section to the next heading is --rh on every boundary */
.sec { padding: var(--rh) 0 0; }
.wrap { width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1344px; margin: 0 auto; }
.sh { margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
body.glass .sh h2 { margin: 0 auto; max-width: none; font: 500 clamp(30px, 3vw, 44px)/1.05 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.sh p { margin: 12px auto 0; max-width: 36em; font: 400 17px/1.5 var(--sans); color: var(--ink); }

/* 1. the first screen, as /products/ijewel-playground/'s (Dasha, 27 Oct): the kicker, the heading on one line, the two buttons and the note,
   centred, and a big film on one glass plate under them. These are tools/sections/hero.html's rules (its stacked hero, in the
   same order, so the cascade gives the same sizes) and the parts of /site/assets/kit.css they stand on (this page does not load
   kit.css: body.glass.kit there is body.glass here). Measured against /products/ijewel-playground/ at 1400x900, 1280x720 and 390x844. */
.k-hero { --k-gut: clamp(16px, 4vw, 48px); --k-edge: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04); --k-lift: 0 18px 80px -40px rgba(40, 44, 120, .19); }
.k-hero > .k-in { width: calc(100% - 2 * var(--k-gut)); max-width: 1344px; margin: 0 auto; }
.k-hero .k-kicker { margin: 0 0 16px; font: 500 18px/1.3 var(--sans); letter-spacing: -.01em; color: #5053D0; }
.k-hero .k-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 36px; }
body.glass .k-hero .k-cta .btn { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.k-hero .k-note { margin: 14px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink3); }
.k-hero .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .k-hero .k-cta { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-left: auto; margin-right: auto; }
  body.glass .k-hero .k-cta .btn { justify-content: center; }
}
.k-fig { position: relative; isolation: isolate; margin: 0; }
.k-fig::after { content: ''; position: absolute; z-index: -2; inset: 8% 4% -2% 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 114, 242, .2), rgba(140, 170, 255, .1) 60%, transparent); filter: blur(28px); }
.k-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.glass .k-media > video { max-height: none; }  /* site.css caps a video's height */
/* tools/sections/hero.html */
.k-hero { min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; padding: 104px 0 56px; }
.k-hero > .k-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: clamp(40px, 4.5vw, 72px); align-items: center; }
body.glass .k-hero h1 { margin: 0; max-width: none; font: 500 clamp(44px, 4.4vw, 68px)/1.02 var(--sans); letter-spacing: -.05em; color: var(--ink); }
.k-hero h1 .ln { display: block; }
.k-hero-vis { min-width: 0; }
.k-hero .k-kicker { margin-bottom: 14px; font: 600 19px/1.3 var(--sans); letter-spacing: .01em; }
.k-hero--stack { min-height: 0; padding: clamp(136px, 16vh, 168px) 0 0; }  /* more air under the header (Dasha, 27 Oct) */
.k-hero--stack > .k-in { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; }
.k-hero--stack .k-hero-words { text-align: center; max-width: 820px; }
body.glass .k-hero--stack h1 { font-size: clamp(38px, 4vw, 58px); }
.k-hero--stack h1 .ln { display: inline; }
.k-hero.k-hero--stack .k-cta { justify-content: center; align-items: center; margin-top: 28px; }
.k-hero.k-hero--stack .k-note { margin-top: 12px; }
.k-hero--stack .k-hero-vis { width: 100%; max-width: 1180px; }
@media (min-width: 861px) and (max-height: 760px) { .k-hero--stack { padding-top: 116px; } body.glass .k-hero--stack h1 { font-size: clamp(34px, 3.6vw, 48px); } }
@media (max-width: 860px) {
  .k-hero { align-items: start; padding: 104px 0 56px; }
  .k-hero--stack { padding-top: 124px; }
  .k-hero > .k-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .k-hero-words { text-align: center; }
  body.glass .k-hero h1 { font-size: 40px; }
  .k-hero .k-cta { justify-content: center; margin-top: 30px; }
}
@media (min-width: 861px) and (max-height: 760px) { body.glass .k-hero h1 { font-size: clamp(40px, 3.9vw, 56px); } .k-hero .k-cta { margin-top: 26px; } }

/* 2. try it on a ring: the ring in the middle, the five cards around it (/products/asset-library/'s Build your scene) */
/* the only 3D on the page, and only on request (Dasha, 27 Oct): the poster, and a black Start 3D button in the middle of the card
   (the viewer is 820 KB of script and work the page does not need); the Live 3D tag shows once the ring is live */
.vw-3d { position: absolute; left: 50%; top: 50%; z-index: 4; display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--ink); color: #fff; font: 500 15px/1 var(--sans); white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%);
  box-shadow: 0 12px 28px -14px rgba(25, 24, 38, .5); transition: opacity .3s, transform .2s; }  /* black, plain, in the middle (Dasha, 26 Oct) */
.vw-3d:hover { background: #2b2940; }
.vw-3d:active { transform: translate(-50%, -50%) scale(.97); }
.vw-3d:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; }
.vw-3d.is-done { opacity: 0; pointer-events: none; }
.vw-3d.is-off { background: rgba(25, 24, 38, .06); color: var(--ink2); box-shadow: none; }
.vw-tag { opacity: 0; transition: opacity .6s; }
.vw:has(.ring--live) .vw-tag { opacity: 1; }
/* the piece in a white card on a glass plate (hero-ring.js draws it; the poster is a still of the same ring until it is live) */
.vw { position: relative; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 18px 80px -38px rgba(40, 44, 120, .19), 0 0 0 1px rgba(25, 24, 38, .05); }
.vw .hero3d { position: absolute; inset: 0; }
.vw .hero3d .ring { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
.vw .ring-poster { object-fit: contain; background: transparent; }
/* a ring that starts (on scroll, or Start 3D on a phone): the poster goes at once and the loading gem (loadbar.js: the oval's
   facets, filled with ink as the load goes) stands alone in the middle of the card until the ring is live; then the live ring
   fades in. The bar's track and words stay out. A ring that cannot start keeps its poster. (Dasha, 26 Oct) */
.vw .ldb { left: 50%; top: 50%; bottom: auto; width: auto; transform: translate(-50%, -50%); }
.vw .ldb-track, .vw .ldb-t { display: none; }
.vw .ldb-gem, .v2 .vw .ldb-gem { width: 150px; height: 150px; margin: 0; }
.vw.is-booting:not(:has(.ring--live)):not(:has(.ring--still)) .ldb { opacity: 1; }  /* from the first moment, before the bar's own start */
.vw.is-booting .ring-poster { opacity: 0; }
.vw:has(.ring--still) .ring-poster { opacity: 1; }
.vw .ring-stage { opacity: 0; transition: opacity .8s cubic-bezier(.22, 1, .36, 1); } .vw .ring--live .ring-stage { opacity: 1; }
.vw-tag { left: 14px; bottom: 14px; z-index: 3; font-size: 12px; color: var(--ink2); }
.bs-stage.plate { padding: 10px; }
.bs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: center; max-width: 1240px; margin: 0 auto; }
.bs-col { display: grid; gap: 16px; }
.bs .vw { aspect-ratio: 1 / 1; }
.bs-card { padding: 16px 16px 20px; border-radius: 20px; background: var(--gl); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border: 1px solid var(--gl-edge); box-shadow: var(--gl-shadow); }
.bs-card h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 16px/1.2 var(--sans); color: var(--ink); }
.bs-card h3 .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(110, 114, 242, .1); color: #5053D0; }
.bs-card h3 .ic svg { width: 18px; height: 18px; }
.bs-card h3 small { margin-left: auto; font: 400 12.5px/1.2 var(--sans); color: var(--ink2); white-space: nowrap; }
.bs-sw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bs-sw button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.bs-sw img, .bs-sw .none { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(25, 24, 38, .1); background: #fff; object-fit: cover; }
.bs-sw .none { background: linear-gradient(135deg, transparent 47%, rgba(25, 24, 38, .3) 47% 53%, transparent 53%), #f6f6f9; }
.bs-sw button[aria-checked="true"]::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #6E72F2; }
.bs-sw button:focus-visible { outline: 2px solid #6E72F2; outline-offset: 5px; }
.bs-sw button:hover img { transform: scale(1.06); } .bs-sw img { transition: transform .2s; }
/* a pick on its way (the file loads, then the ring takes it): a turning ring around the swatch. The card has no line under the
   swatches (Dasha, 27 Oct: the "Now: …" line went); the swatch's ring says which is on. */
.bs-sw button.is-loading::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(110, 114, 242, .18); border-top-color: #6E72F2; animation: pick-spin .9s linear infinite; pointer-events: none; }
@keyframes pick-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bs-sw button.is-loading::after { animation: none; border-color: #6E72F2; } }

/* 3. one ring, five lights: stills of the same ring under each light, a crossfade on a pick; no 3D (Dasha, 27 Oct) */
.lx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1120px; margin: 0 auto; }
.lx-words.sh { margin: 0; text-align: left; } .lx-words.sh h2 { margin: 0; } .lx-words.sh p { margin: 12px 0 0; }
.lx { max-width: none; margin: 0; }
.lx-pics { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .05); }
.lx-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }
.lx-pics img.is-on { opacity: 1; }
.lx .lbl { left: 26px; top: 26px; }
.lx-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lx-rg { display: contents; }  /* a group's lights are the radiogroup; the +75 chip after the HDR lights is a link to the whole library in Playground */
.lx-bar button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(25, 24, 38, .06), 0 8px 24px -16px rgba(25, 24, 38, .2);
  font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.lx-bar img { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(25, 24, 38, .08); }
.lx-bar button:hover { background: #fff; color: var(--ink); }
.lx-bar button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px #6E72F2, 0 8px 24px -14px rgba(40, 44, 120, .25); }
.lx-bar button:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
.lx-more { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px dashed rgba(25, 24, 38, .16);
  box-sizing: border-box; font: 400 14px/1 var(--sans); color: var(--ink2); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }  /* muted: no swatch; a link to the library in Playground (Dasha, 27 Oct) */
.lx-more:hover { background: #fff; color: var(--ink); border-color: rgba(25, 24, 38, .28); }
.lx-more:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
/* light for the gems: a second switcher under the HDR lights, over the same picture (Dasha, 27 Oct). Its stills are the same ring
   and camera under each gem light. Each group keeps its pick; the group whose still shows (.is-shown) has its pick in blue, the
   other's pick goes grey. The gem lights have names (Dasha, 27 Oct: Brilliant, Cool, Deep, Soft, Clear); the library id of each
   (Gem 20, 03, 06, 10, 01) is in its data-g and title; each chip shows the library's own thumbnail (tiles/env_gem_0NN_<hash>).
   No heading over the gem lights (Dasha, 27 Oct): the one line carries the block, so it is a little more present (16 px). */
.lx-gem { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(25, 24, 38, .08); }
.lx-words .lx-gem p { margin: 0; max-width: 30em; font: 400 16px/1.5 var(--sans); color: var(--ink2); }
.lx-gem .lx-bar { margin-top: 16px; }
.lx-bar:not(.is-shown) button[aria-checked="true"] { box-shadow: 0 0 0 1.5px rgba(25, 24, 38, .22), 0 8px 24px -16px rgba(25, 24, 38, .2); }
.lx .lbl i { font-style: normal; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { .lx-pics img { transition: none; } }

/* 4. in Playground: three steps, each a glass plate with a real Playground screen over its words (Dasha, 27 Oct). The screens are
   short films (/site/assets/kit.js: they load near the screen and play only while in view, muted, in a loop; reduced motion keeps the
   poster) */

/* 6. the way in, as /products/ijewel-playground/'s end (Dasha, 27 Oct): tools/sections/end.html and the parts of /site/assets/kit.css it stands on
   (.k-head, .k-h, .k-line, .k-cta, .k-note), as .lib-end* so nothing here meets the kit's names. A wide glass plate, one plate,
   a soft shadow, the words in the middle and a faint ring behind them on the right (the still of the lights above, cut to the
   ring's middle by object-fit, its white ground multiplied away; Playground's ring is a cut-out, this one is a 4:3 still). 120 px to the footer on a laptop, 72 on a phone, with the footer's own margin. */
.lib-end { --k-edge: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04); --k-lift: 0 18px 80px -40px rgba(40, 44, 120, .19);
  padding-bottom: calc(120px - clamp(24px, 4vw, 48px)); }
.lib-end-plate { position: relative; isolation: isolate; overflow: hidden; max-width: 1180px; box-sizing: border-box; margin: 0 auto; padding: clamp(72px, 8vw, 104px) 40px;
  border-radius: 28px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--k-edge), var(--k-lift); text-align: center; }
.lib-end-plate::before { content: ''; position: absolute; z-index: -2; top: -30%; right: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 114, 242, .14), rgba(140, 170, 255, .06) 60%, transparent); }  /* a soft light behind the ring */
/* the four rings (Dasha, 27 Oct: the photo of the removed "Four rings, one library." section is the end's art): the words on the
   left, the rings on the right at full strength, the photo running off the plate's right and bottom edges. The photo is a cut-out
   with a faint veil over its whole frame, so its left and top edges fade out (two masks, intersected) and no frame shows. Tried
   too: the rings behind centred words at .4 (they ran into the buttons). */
/* a centred composition: the words on top, the four rings across the bottom of the plate (Dasha, 27 Oct) */
.lib-end-plate { min-height: 0; padding: clamp(64px, 6vw, 88px) 40px calc(min(30vw, 360px) + 36px); text-align: center; display: block; }
/* the photo's faint veil (alpha about 16 over the whole frame) would show its rectangle: its top and sides fade out */
.lib-end-art { position: absolute; z-index: -1; left: 50%; bottom: -4%; width: 72%; height: auto; max-width: none; transform: translateX(-50%); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 26%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 4%, #000 26%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
.lib-end-head { position: relative; max-width: 920px; margin: 0 auto; }
body.glass .lib-end-h { margin: 0 auto; max-width: 20ch; font: 500 clamp(40px, 4.2vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.lib-end-line { margin: 20px auto 0; max-width: 32em; font: 400 20px/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.lib-end-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: 40px; }
body.glass .lib-end-cta .btn { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
body.glass .lib-end-cta .btn:not(.btn--primary) { background: rgba(255, 255, 255, .86); box-shadow: var(--k-edge), 0 8px 24px -14px rgba(25, 24, 38, .18); }
.lib-end-note { margin: 14px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink3); text-align: center; }
.lib-end .sr, .lx-more .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .lib-end { padding-bottom: calc(72px - clamp(24px, 4vw, 48px)); }
  .lib-end-plate { padding: 56px 20px 48px; border-radius: 24px; }
  /* a phone: the words centred on top, the four rings under them across the plate */
  .lib-end-plate { padding-bottom: calc(52vw + 24px); }
  .lib-end-art { bottom: -3vw; width: 116%; }
  body.glass .lib-end-h { font-size: 36px; }
  .lib-end-line { margin-top: 14px; font-size: 18px; }
}
@media (max-width: 640px) {
  .lib-end .lib-end-cta { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-left: auto; margin-right: auto; }
  body.glass .lib-end-cta .btn { justify-content: center; }
}

/* what each plan includes (Dasha, 27 Oct): one glass plate, a row for each kind of asset, a column for each group of plans. The
   markup is a list per plan (a heading and a <dl>); on a laptop the columns sit side by side on one grid (grid-auto-flow: column,
   every wrapper display: contents) with the labels in their own column, so each row lines up; on a phone each plan is its own card
   with its labels. The full library's column has a faint violet tint. */
.pl.plate { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(12, auto);  /* the heading, ten rows and the buttons */
  grid-auto-flow: column; gap: 0; max-width: 1180px; margin: 0 auto; padding: 12px 12px 16px; }
.pl-col, .pl-col dl, .pl-r { display: contents; }
.pl dl, .pl dd { margin: 0; }
.pl-col dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-hd, .pl-l, .pl dd { display: flex; align-items: center; min-height: 58px; padding: 10px 24px; box-sizing: border-box; border-top: 1px solid rgba(25, 24, 38, .07); }
.pl dd { justify-content: center; text-align: center; }
.pl-hd { flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; min-height: 112px; margin: 0; padding-top: 26px; border-top: 0; text-align: center;
  font: 600 26px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }  /* the plan names on one line, their notes under them (Dasha, 29 Oct) */
.pl-hd small { max-width: 22em; font: 400 14px/1.35 var(--sans); color: var(--ink2); text-wrap: balance; }
.pl-go { display: flex; justify-content: center; align-items: center; padding: 20px 24px 8px; border-top: 1px solid rgba(25, 24, 38, .07); }
.pl-go .btn { min-height: 46px; padding: 0 22px; font-size: 15px; width: 100%; max-width: 220px; justify-content: center; }
.pl-go .btn--line { background: rgba(255, 255, 255, .86); color: var(--ink); border: 1px solid rgba(25, 24, 38, .14); }
.pl-col--mid .pl-go .btn, .pl-col--all .pl-go .btn { background: var(--ink); color: #fff; border: 0; }  /* black (Dasha, 29 Oct) */
.pl-l { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font: 500 15px/1.3 var(--sans); color: var(--ink); }
.pl-l small { font: 400 12.5px/1.35 var(--sans); color: var(--ink2); }
.pl dd { font: 400 15px/1.3 var(--sans); color: var(--ink2); }
.pl dd b { font-weight: 500; color: var(--ink); }
.pl-t { font: 400 15px/1.3 var(--sans); color: var(--ink); }  /* not bold (Dasha, 29 Oct) */
.pl-ul { margin: 0; padding: 0 0 0 1.1em; text-align: left; font: 400 14px/1.45 var(--sans); color: var(--ink); } .pl-ul li { padding: 1px 0; }  /* the official plan comparison lists the free metals and gems by name (Dasha, 29 Oct) */
.pl dd:has(.pl-ul) { align-items: flex-start; justify-content: flex-start; padding: 14px 20px 14px 36px; }  /* a list sits at the left of its cell, every column alike (Dasha, 29 Oct) */
.pl-col--mid .pl-hd, .pl-col--mid dd, .pl-col--mid .pl-go { background: rgba(25, 24, 38, .025); }
.pl-col--all .pl-hd, .pl-col--all dd, .pl-col--all .pl-go { background: rgba(110, 114, 242, .06); }
.pl-col--all .pl-hd { border-radius: 18px 18px 0 0; }
.pl-col--all .pl-go { border-radius: 0 0 18px 18px; }
.pl-col--all dd { border-top-color: rgba(80, 83, 208, .1); }
.pl-col--all .pl-hd small { color: #5053D0; }
.pl-n { width: 22px; height: 22px; } .pl-n { color: var(--ink3); opacity: .7; }  /* a green ring-check for a full tier, a lock for a closed one; words for the limited tiers (Dasha, 29 Oct: no counts, the library grows every month) */
.pl-cta { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 32px); }
body.glass .pl-cta .btn { min-height: 50px; padding: 0 26px; background: rgba(255, 255, 255, .86); }
@media (max-width: 720px) {
  .pl.plate { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 12px; padding: 0;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pl-col { display: block; padding: 6px 16px 10px; border-radius: 22px; background: var(--gl); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
    border: 1px solid var(--gl-edge); box-shadow: var(--gl-shadow); }
  .pl-col.pl-lbls { display: none; }  /* each card has its own labels here */
  .pl-col--all { background: rgba(244, 244, 254, .9); }
  .pl-col dl { display: block; }
  .pl-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-top: 1px solid rgba(25, 24, 38, .07); }
  .pl-col dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font: 400 15px/1.3 var(--sans); color: var(--ink2); }
  .pl-hd { align-items: flex-start; min-height: 0; padding: 12px 0 14px; text-align: left; font-size: 21px; }
  .pl-col--all .pl-hd, .pl-col--all dd, .pl-col--all .pl-go { background: none; border-radius: 0; }
  .pl-go { padding: 14px 0 6px; }
  .pl dd { flex: none; min-height: 0; padding: 0; border: 0; }
  .pl dd b { font-size: 16px; }
}

@media (max-width: 1100px) {
  .bs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bs-stage { grid-column: 1 / -1; order: -1; width: min(100%, 520px); justify-self: center; }
  .bs-col { display: contents; }
}
@media (max-width: 860px) {
  body.glass .sh h2 { font-size: 30px; }
  .bs { gap: 12px; }
  .bs-card { padding: 14px 12px 16px; }
  .bs-card h3 { flex-wrap: wrap; gap: 8px; } .bs-card h3 small { margin-left: 0; width: 100%; }
  .bs-sw { gap: 8px; }
  .bs-sw button { width: 40px; height: 40px; }
  .plate { --off: 8px; padding: 8px; border-radius: 24px; }
  .lx-pics { border-radius: 16px; } .lx .lbl { left: 16px; top: 16px; }
  .lx-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .lx-bar { gap: 6px; margin-top: 18px; }
  .lx-gem { margin-top: 24px; padding-top: 20px; }
}
@media (max-width: 400px) { .bs-sw button { width: 36px; height: 36px; } .bs-sw { gap: 7px; } }

/* designs (below): this page does not load /site/assets/kit.css, so the kit's glass plate and picture that the cards stand on are here,
   with the two kit variables they use; the kicker is the page's small one, set above the section's heading */
.k-dzs { --k-edge: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04); --k-lift: 0 18px 80px -40px rgba(40, 44, 120, .19); }
.k-plate { position: relative; padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--k-edge), var(--k-lift); }
.k-media { position: relative; overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .05); }
.k-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-dzs .sh .k-kicker { margin: 0 auto 14px; font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #5053D0; }
@media (max-width: 860px) { .k-plate { padding: 6px; border-radius: 22px; } .k-media { border-radius: 16px; } }