/* Topicweave look layer, on top of v3.css. Each choice is a data attribute on <html>, set by js/look.js.
   Settled in the look lab on 2026-10-01: dark default, lilac accent, Fraunces headlines, square corners,
   grid + soft glows, woven opening, charged hover, vivid finale, day-to-night section. */

/* ---------- accent (replaces saffron) ---------- */
/* --accent-text must reach 4.5:1 on its own background; --loom-accent is the fiber color. */
:root[data-accent="lilac"] { --saffron: #b9a6ff; --loom-accent: #9b87f5; }
:root[data-theme="light"][data-accent="lilac"] { --saffron: #5b45c9; --loom-accent: #7c63ec; }
:root[data-accent="sky"] { --saffron: #6cc4f2; --loom-accent: #38a8e8; }
:root[data-theme="light"][data-accent="sky"] { --saffron: #0a6a9e; --loom-accent: #1d8fd4; }
:root[data-accent="rose"] { --saffron: #f59ac0; --loom-accent: #e8669a; }
:root[data-theme="light"][data-accent="rose"] { --saffron: #a8285e; --loom-accent: #d94f88; }
/* the logo's yellow bar follows the accent */
:root[data-accent] .brand rect[fill="#F2A93B"] { fill: var(--loom-accent); }

/* ---------- headline serif ---------- */
:root[data-serif] .display, :root[data-serif] .h2, :root[data-serif] .h3, :root[data-serif] .h4,
:root[data-serif] .pkg__price, :root[data-serif] .result b, :root[data-serif] .stat b { font-family: var(--serif); }
:root[data-serif="instrument"] { --serif: "Instrument Serif", Georgia, serif; }
:root[data-serif="instrument"] .display, :root[data-serif="instrument"] .h2 { letter-spacing: -.02em; line-height: .95; }
:root[data-serif="instrument"] .h3, :root[data-serif="instrument"] .h4 { letter-spacing: -.01em; }
:root[data-serif="fraunces"] { --serif: "Fraunces", "Fraunces Fallback", Georgia, serif; }
:root[data-serif="fraunces"] .display, :root[data-serif="fraunces"] .h2, :root[data-serif="fraunces"] .h3 { font-weight: 350; letter-spacing: -.03em; font-variation-settings: "opsz" 120, "SOFT" 50; }
:root[data-serif="fraunces"] .h4 { font-weight: 400; letter-spacing: -.015em; }
:root[data-serif="newsreader"] { --serif: "Newsreader", Georgia, serif; }
:root[data-serif="dmserif"] { --serif: "DM Serif Display", Georgia, serif; }
:root[data-serif="dmserif"] .display, :root[data-serif="dmserif"] .h2, :root[data-serif="dmserif"] .h3 { letter-spacing: -.025em; line-height: 1; }
:root[data-serif="playfair"] { --serif: "Playfair Display", Georgia, serif; }
:root[data-serif="playfair"] .display, :root[data-serif="playfair"] .h2, :root[data-serif="playfair"] .h3 { font-weight: 450; letter-spacing: -.025em; line-height: 1.02; }
:root[data-serif="sourceserif"] { --serif: "Source Serif 4", Georgia, serif; }
:root[data-serif="sourceserif"] .display, :root[data-serif="sourceserif"] .h2, :root[data-serif="sourceserif"] .h3 { font-weight: 400; letter-spacing: -.03em; font-variation-settings: "opsz" 60; }
:root[data-serif="young"] { --serif: "Young Serif", Georgia, serif; }
:root[data-serif="young"] .display, :root[data-serif="young"] .h2, :root[data-serif="young"] .h3 { letter-spacing: -.035em; line-height: 1.02; }
:root[data-serif="cormorant"] { --serif: "Cormorant Garamond", Georgia, serif; }
:root[data-serif="cormorant"] .display, :root[data-serif="cormorant"] .h2, :root[data-serif="cormorant"] .h3 { font-weight: 500; letter-spacing: -.02em; line-height: .95; }
:root[data-serif="cormorant"] .h4 { font-weight: 600; }
:root[data-serif="gloock"] { --serif: "Gloock", Georgia, serif; }
:root[data-serif="gloock"] .display, :root[data-serif="gloock"] .h2, :root[data-serif="gloock"] .h3 { letter-spacing: -.02em; line-height: 1.02; }
:root[data-serif="newsreader"] .display, :root[data-serif="newsreader"] .h2, :root[data-serif="newsreader"] .h3 { font-weight: 400; letter-spacing: -.03em; font-variation-settings: "opsz" 72; }
:root[data-serif="newsreader"] .h4 { letter-spacing: -.01em; }

/* ---------- body weight ---------- */
:root[data-weight="light"] body, :root[data-weight="light"] .lede, :root[data-weight="light"] .input { font-weight: 300; }
:root[data-weight="regular"] body, :root[data-weight="regular"] .lede, :root[data-weight="regular"] .input { font-weight: 400; }
:root[data-weight] .lede { color: var(--mist); }
:root[data-weight] .h4, :root[data-weight] strong { font-weight: 500; }
:root[data-weight] .caption { font-weight: 500; }

/* ---------- background texture ---------- */
/* One fixed layer under the loom canvas. It drifts with scroll by transform only (never background-position). */
.lab-bg, .lab-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.lab-bg { display: none; inset: -96px 0 0; }
:root[data-bg="dots"] .lab-bg, :root[data-bg="grid"] .lab-bg { display: block; }
:root[data-bg="dots"] .lab-bg { background: radial-gradient(circle, rgba(var(--fg-rgb), .11) 1px, transparent 1.4px) 0 0 / 24px 24px; }
:root[data-bg="grid"] .lab-bg { background:
  linear-gradient(rgba(var(--fg-rgb), .032) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(90deg, rgba(var(--fg-rgb), .032) 1px, transparent 1px) 0 0 / 56px 56px; }
/* fade the texture out toward the edges so it reads as depth, not graph paper */
.lab-bg { -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); }

/* ---------- corners ---------- */
:root[data-corners="soft"] { --r-ctl: 8px; }
:root[data-corners="square"] { --r-ctl: 2px; }
:root[data-corners] .btn, :root[data-corners] .tag, :root[data-corners] .input, :root[data-corners] .theme,
:root[data-corners] .skip, :root[data-corners] .seg button, :root[data-corners] .entry, :root[data-corners] .pkg { border-radius: var(--r-ctl); }
:root[data-corners="square"] .btn { letter-spacing: .04em; }

/* ---------- nav ---------- */
:root[data-nav] .nav__in { padding-top: 10px; padding-bottom: 10px; }
:root[data-nav] .nav .btn { height: 36px; padding: 0 14px; font-size: 13px; }
:root[data-nav] .nav .theme { width: 34px; height: 34px; }
:root[data-nav] .brand svg { width: 24px; height: 24px; }
:root[data-nav="compact"] .nav::before { inset: 0 0 -24px; }
/* Stripe-style: a full-width bar; the shadow appears once the page has scrolled */
:root[data-nav="bar"] .nav::before { inset: 0; background: rgba(var(--bg-rgb), .95); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(var(--fg-rgb), 0); transition: box-shadow .3s var(--ease), background-color .3s; }
:root[data-nav="bar"].lab-scrolled .nav::before { box-shadow: 0 1px 0 rgba(var(--fg-rgb), .07), 0 6px 24px rgba(11, 27, 43, .07); }
:root[data-nav="bar"][data-theme="dark"].lab-scrolled .nav::before { box-shadow: 0 1px 0 rgba(var(--fg-rgb), .09), 0 6px 24px rgba(0, 0, 0, .4); }

/* ---------- soft gradient glow ---------- */
/* Big radial blobs: soft by construction, so no CSS blur filter (filters flash black on layered pages). */
.lab-glow { display: none; overflow: hidden; }
:root[data-glow="on"] .lab-glow { display: block; }
.lab-glow i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; transition: background-color 1.6s var(--ease); }
.lab-glow i:nth-child(1) { left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, var(--g1), transparent); }
.lab-glow i:nth-child(2) { right: -25vmax; top: 10vh; background: radial-gradient(closest-side, var(--g2), transparent); }
.lab-glow i:nth-child(3) { left: 10vw; bottom: -40vmax; background: radial-gradient(closest-side, var(--g3), transparent); }
:root { --g1: rgba(79, 123, 255, .2); --g2: rgba(239, 91, 63, .13); --g3: rgba(19, 158, 138, .15); }
:root[data-theme="light"] { --g1: rgba(47, 91, 234, .13); --g2: rgba(239, 91, 63, .1); --g3: rgba(19, 158, 138, .11); }
:root[data-theme="light"][data-accent="lilac"] { --g2: rgba(124, 99, 236, .14); }
:root[data-theme="light"][data-accent="sky"] { --g2: rgba(29, 143, 212, .10); }
:root[data-theme="light"][data-accent="rose"] { --g2: rgba(217, 79, 136, .09); }
@media (prefers-reduced-motion: reduce) { .lab-glow i { transition: none; } }

/* ---------- finale: a vivid, slowly breathing gradient behind the last section ---------- */
/* A fixed layer under the loom canvas, clipped by script to the last section's box, so the fibers (white there) draw on top. */
.lab-finale-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; overflow: hidden; background: #2b3fd6; clip-path: inset(100% 0 0 0); }
:root[data-finale="on"] .lab-finale-bg { display: block; }
.lab-finale-bg i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; animation: lab-breathe 11s ease-in-out infinite alternate; }
.lab-finale-bg i:nth-child(1) { left: -30vmax; top: -40vmax; background: radial-gradient(closest-side, #8b6cf0, rgba(139, 108, 240, 0)); }
.lab-finale-bg i:nth-child(2) { right: -35vmax; top: -20vmax; background: radial-gradient(closest-side, #ef5b3f, rgba(239, 91, 63, 0)); animation-duration: 13s; animation-delay: -6s; }
.lab-finale-bg i:nth-child(3) { left: -10vmax; bottom: -55vmax; background: radial-gradient(closest-side, #139e8a, rgba(19, 158, 138, 0)); animation-duration: 9s; animation-delay: -3s; }
.lab-finale-bg i:nth-child(4) { right: -20vmax; bottom: -50vmax; background: radial-gradient(closest-side, #4f7bff, rgba(79, 123, 255, 0)); animation-duration: 12s; animation-delay: -9s; }
@keyframes lab-breathe {
  0% { transform: translate3d(-10vw, 6vh, 0) scale(.85); opacity: .75; }
  35% { transform: translate3d(12vw, -8vh, 0) scale(1.18); opacity: 1; }
  70% { transform: translate3d(4vw, 12vh, 0) scale(.95); opacity: .85; }
  100% { transform: translate3d(-6vw, -10vh, 0) scale(1.1); opacity: 1; }
}
}
@media (prefers-reduced-motion: reduce) { .lab-finale-bg i { animation: none; } }
/* text in the finale reads white */
:root[data-finale="on"] .lab-finale { --bone: #fff; --mist: rgba(255, 255, 255, .9); --ash: rgba(255, 255, 255, .8); --saffron: #fff; --fg-rgb: 255, 255, 255; color: #fff; }
:root[data-finale="on"] .lab-finale .btn { background: #fff; color: #1b2a8f; }
:root[data-finale="on"] .lab-finale .btn:hover { background: rgba(255, 255, 255, .88); }

/* ---------- tags fill with brand color as they arrive ---------- */
/* Deep variants so white text keeps 4.5:1. The fill sweeps by transform, never by background-position. */
:root[data-tagfill="on"] span.tag { position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--ease); transition-delay: calc(var(--d, 0ms) + var(--k, 0) * 110ms + 250ms); }
:root[data-tagfill="on"] span.tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill, #2f5bea); transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease); transition-delay: calc(var(--d, 0ms) + var(--k, 0) * 110ms); }
:root[data-tagfill="on"] .is-in span.tag { color: #fff; }
:root[data-tagfill="on"] .is-in span.tag::before { transform: scaleX(1); }
:root[data-tagfill="on"] span.tag:nth-child(4n + 1) { --fill: #6a4fdc; --k: 0; }
:root[data-tagfill="on"] span.tag:nth-child(4n + 2) { --fill: #2f5bea; --k: 1; }
:root[data-tagfill="on"] span.tag:nth-child(4n + 3) { --fill: #0b7a6b; --k: 2; }
:root[data-tagfill="on"] span.tag:nth-child(4n + 4) { --fill: #c23a20; --k: 3; }

/* ---------- text entrance: words fade up in a quick cascade ---------- */
.tw { display: inline; }
/* the word wrapper must never pick up a parent's "x span" styling (e.g. .terms dt span, .stat span) */
.tfx .tw { margin: 0 !important; padding: 0 !important; max-width: none !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; }
:root[data-textfx="on"].js .tw { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .55s var(--ease), transform .7s var(--ease); transition-delay: calc(80ms + min(var(--j) * 14ms, 700ms)); }
/* each paragraph starts its own cascade when it actually scrolls into view (js/lab.js adds .tw-in) */
:root[data-textfx="on"].js .tfx.tw-in .tw { opacity: 1; transform: none; }
/* the word cascade replaces the block rise for text, so the two never stack */
:root[data-textfx="on"].js .rv.tfx, :root[data-textfx="on"].js .rv:has(> .tfx) { opacity: 1; transform: none; }
/* headlines and other reveal blocks also wait until they are really on screen (js/lab.js adds .in-view) */
:root[data-textfx="on"].js .is-in .split:not(.in-view) .w > span { transform: translateY(108%); }
:root[data-textfx="on"].js .is-in .rv:not(.in-view):not(.tfx):not(:has(> .tfx)) { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) { :root[data-textfx="on"].js .is-in .split:not(.in-view) .w > span, :root[data-textfx="on"].js .is-in .rv:not(.in-view) { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :root[data-textfx="on"].js .tw { opacity: 1; transform: none; transition: none; } }

/* ---------- glass: detail chips, stats, quotes and steps ---------- */
:root[data-glass="on"] { --glass: rgba(255, 255, 255, .58); --glass-line: rgba(11, 27, 43, .07); --glass-shadow: 0 10px 30px rgba(11, 27, 43, .06); }
:root[data-glass="on"][data-theme="dark"] { --glass: rgba(255, 255, 255, .05); --glass-line: rgba(255, 255, 255, .1); --glass-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
:root[data-glass="on"] .terms, :root[data-glass="on"] .stats--flow, :root[data-glass="on"] .stats:not(.stats--flow) .stat, :root[data-glass="on"] .pair > *, :root[data-glass="on"] .steps li {
  position: relative; padding: 18px 20px; border-radius: var(--r-ctl, 14px); background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
:root[data-glass="on"] .pair { gap: 14px; }
:root[data-glass="on"] .steps { gap: 12px; }

/* the vocabulary as one sheet: a header, then rows split by hairlines */
:root[data-glass="on"] .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
:root[data-glass="on"] [data-form^="ring"] .terms::before { content: "Example vocabulary · 6 of 42 terms, signed off by you"; grid-column: 1 / -1; padding: 14px 22px; font-size: 12px; font-weight: 500; color: var(--ash); border-bottom: 1px solid var(--glass-line); }
:root[data-glass="on"] .terms div { padding: 16px 22px 18px; border-bottom: 1px solid var(--glass-line); }
:root[data-glass="on"] .terms div:nth-child(odd) { border-right: 1px solid var(--glass-line); }
:root[data-glass="on"] .terms div:nth-last-child(-n + 2) { border-bottom: 0; }
:root[data-glass="on"] .terms dt { font-size: 11px; letter-spacing: .07em; }
:root[data-glass="on"] .terms dt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--thread); }
:root[data-glass="on"] .terms dd { margin-top: 6px; font-family: var(--serif, inherit); font-size: 23px; letter-spacing: -.015em; }
/* B320: Pricing hero "what you buy": two sentences, not vocabulary terms */
.terms--buy { margin-top: 28px; }
:root[data-glass="on"] .terms--buy dd { font-family: inherit; font-size: 16px; line-height: 1.45; letter-spacing: 0; color: var(--bone); }
@media (max-width: 767px) {
  :root[data-glass="on"] .terms--buy { grid-template-columns: 1fr; }
  :root[data-glass="on"] .terms--buy div:nth-child(odd) { border-right: 0; }
  :root[data-glass="on"] .terms--buy div:first-child { border-bottom: 1px solid var(--glass-line); }
}
:root[data-glass="on"] .terms div:nth-child(4n + 1) { --thread: var(--loom-accent, #9b87f5); }
:root[data-glass="on"] .terms div:nth-child(4n + 2) { --thread: #ef5b3f; }
:root[data-glass="on"] .terms div:nth-child(4n + 3) { --thread: #139e8a; }
:root[data-glass="on"] .terms div:nth-child(4n + 4) { --thread: #2f5bea; }

/* stats as cause and effect: you fill in 1 -> Topicweave builds 10 */
:root[data-glass="on"] .stats--flow { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; gap: 0; padding: 22px 26px; max-width: 560px; }
:root[data-glass="on"] .stats--flow::after { content: ""; order: 2; height: 14px; background: no-repeat center / 56px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14'%3E%3Cpath d='M1 7h52M47 2l6 5-6 5' fill='none' stroke='%237c63ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-glass="on"] .stats--flow .stat:first-child { order: 1; }
:root[data-glass="on"] .stats--flow .stat:last-child { order: 3; }
:root[data-glass="on"] .stats--flow .stat::before { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ash); }
:root[data-glass="on"] .stats--flow .stat:first-child::before { content: "You fill in"; }
:root[data-glass="on"] .stats--flow .stat:last-child::before { content: "Topicweave builds"; color: var(--saffron); }
:root[data-glass="on"] .stats--flow .stat b { font-size: clamp(48px, 4.6vw, 68px); }
:root[data-glass="on"] .stats--flow .stat:last-child b { color: var(--saffron); }
:root[data-glass="on"] .stats--flow .stat span { margin-top: 6px; font-size: 14px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  :root[data-glass="on"] .terms, :root[data-glass="on"] .stats, :root[data-glass="on"] .pair > *, :root[data-glass="on"] .steps li { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  :root[data-glass="on"] .pair > *, :root[data-glass="on"] .steps li { padding: 14px 16px; }
  :root[data-glass="on"] .terms div { padding: 14px 16px 16px; }
  :root[data-glass="on"] .terms dd { font-size: 19px; }
  :root[data-glass="on"] .stats--flow { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); padding: 18px; }
}

/* ---------- side rail: a thread instead of dots ---------- */
/* One vertical warp thread; each section is a short fiber crossing it. Scrolling fills the thread in the
   weave colors, the current section's fiber grows in the accent, and its name shows beside it. */
:root[data-rail="thread"] .rail { gap: 0; right: 26px; padding: 6px 0; }
:root[data-rail="thread"] .rail::before, :root[data-rail="thread"] .rail::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; }
:root[data-rail="thread"] .rail::before { background: rgba(var(--fg-rgb), .1); }
:root[data-rail="thread"] .rail::after { background: linear-gradient(var(--loom-accent, #9b87f5), #ef5b3f 40%, #139e8a 70%, #2f5bea); transform: scaleY(var(--rp, 0)); transform-origin: top; transition: transform .25s linear; }
:root[data-rail="thread"] .rail a { width: 22px; height: 18px; border-radius: 0; background: none; transform: none; display: grid; place-items: center; z-index: 1; }
:root[data-rail="thread"] .rail a::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background: rgba(var(--fg-rgb), .3); transform: rotate(-14deg); transition: width .35s var(--ease), background-color .3s, transform .35s var(--ease); }
:root[data-rail="thread"] .rail a:nth-child(2n)::before { transform: rotate(12deg); }
:root[data-rail="thread"] .rail a:hover::before { width: 16px; background: rgba(var(--fg-rgb), .6); }
:root[data-rail="thread"] .rail a[aria-current="true"]::before { width: 22px; height: 3px; transform: rotate(0deg); background: var(--loom-accent, #7c63ec); }

/* ---------- opening: page waits while the loom shows the blank logo ---------- */
/* B309: the page is built (and its headline rises) UNDER a plain cover while the woven logo plays above it; the cover
   lifts when the intro is done. Before, the page itself was invisible, so Lighthouse counted the intro as load time
   (LCP 3.4 s on phones, no score on some desktop runs). The threads ride above the cover until it has gone. */
:root[data-loom-intro="logo"]:not(.intro-done) .nav,
:root[data-loom-intro="logo"]:not(.intro-done) .rail { opacity: 0; pointer-events: none; }
:root[data-loom-intro="logo"]:not(.intro-done) .site { pointer-events: none; }
:root[data-loom-intro="logo"] body::before { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; background: var(--void);
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease) .15s, visibility 0s 1.05s; }
:root[data-loom-intro="logo"]:not(.intro-done) body::before { opacity: 1; visibility: visible; transition: none; }
:root[data-loom-intro="logo"]:not(.intro-done) canvas.loom { z-index: 3; }
:root[data-loom-intro="logo"] canvas.loom { transition: z-index 0s 1.05s; }
:root[data-loom-intro="logo"]:not(.intro-done) .lab-glow, :root[data-loom-intro="logo"]:not(.intro-done) .lab-bg { opacity: 0; }
.lab-glow, .lab-bg { transition: opacity 1.2s var(--ease); }

/* cards that show what Topicweave does carry a subtle brand gradient; the "generic" side stays plain */
:root[data-glass="on"] .pair > :last-child {
  background: linear-gradient(160deg, rgba(155, 135, 245, .2), rgba(255, 255, 255, .75) 72%); }
:root[data-glass="on"][data-theme="dark"] .pair > :last-child {
  background: linear-gradient(160deg, rgba(155, 135, 245, .22), rgba(255, 255, 255, .04) 72%); }
:root[data-glass="on"] .pair > :last-child .label { color: var(--saffron); }
:root[data-glass="on"] .pair > :first-child { background: rgba(var(--fg-rgb), .025); box-shadow: inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* quotes: regular weight and a calmer size so they don't break into one-word lines */
:root[data-glass="on"] .pair .quote { font-size: clamp(18px, 1.55vw, 21px); font-weight: 400; line-height: 1.45; letter-spacing: -.005em; }
:root[data-glass="on"] .pair .quote--generic { color: var(--ash); font-weight: 300; }

/* ---------- typing: generic AI vs your voice ---------- */
.pair .quote.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: currentColor; animation: lab-caret .9s steps(1) infinite; }
.pair > :last-child .quote.is-typing::after { background: var(--saffron); }
@keyframes lab-caret { 50% { opacity: 0; } }
.pair mark.buzz { background: none; color: inherit; text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px; transition: text-decoration-color .5s var(--ease), color .5s; }
.pair mark.buzz.is-on { text-decoration-color: #ef5b3f; color: #c23a20; }
:root[data-theme="dark"] .pair mark.buzz.is-on { color: #ff8a70; }
.pair .typed-note { display: block; margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ash); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pair .typed-note.is-on { opacity: 1; transform: none; }

/* ---------- last section: pinned while the tiers grow ---------- */
.tierlist { display: none; }
:root[data-finale="on"] .scene--pin { display: block; min-height: 300vh; padding: 0; }
:root[data-finale="on"] .scene--pin > .grid { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; align-content: center; padding-top: 80px; padding-bottom: 40px; }
:root[data-finale="on"] .tierlist { display: grid; gap: 10px; list-style: none; margin: 30px 0 0; padding: 0; max-width: 460px; }
.tierlist li { padding: 14px 18px; border-radius: var(--r-ctl, 12px); background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: -1px; opacity: .38;
  transition: opacity .6s var(--ease), background-color .5s var(--ease), outline-color .5s, box-shadow .5s; }
/* the tiers wait as faint dashed outlines so the layout is complete from the start; each lights up as its ring forms */
[data-step="1"] .tierlist li:nth-child(1), [data-step="2"] .tierlist li:nth-child(-n + 2), [data-step="3"] .tierlist li {
  background: rgba(255, 255, 255, .14); outline-color: transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tierlist b { font-family: var(--serif, inherit); font-weight: 400; font-size: 22px; letter-spacing: -.01em; }
.tierlist span { margin-left: 10px; font-size: 13px; font-weight: 500; opacity: .85; }
.tierlist p { margin: 4px 0 0; font-size: 14px; opacity: .85; }
/* one by one, the newest tier lit; the last stop shows all three */
[data-step="1"] .tierlist li:nth-child(1), [data-step="2"] .tierlist li:nth-child(-n + 2), [data-step="3"] .tierlist li { opacity: 1; }
[data-step="2"] .tierlist li:nth-child(1) { opacity: .55; }
[data-step="1"] .tierlist li:nth-child(1), [data-step="2"] .tierlist li:nth-child(2) { background: rgba(255, 255, 255, .22); }
@media (prefers-reduced-motion: reduce) { .tierlist li { transition: none; } }

/* the phone legibility scrim (paper colored) must not wash out the vivid finale */
:root[data-finale="on"] .lab-finale .scene__text::before { display: none; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  /* phone: keep the growing rings visible above the text */
  :root[data-finale="on"] .scene--pin > .grid { align-content: end; padding-bottom: 90px; }
  :root[data-finale="on"] .scene--pin .lede { display: none; }
  :root[data-finale="on"] .scene--pin .tierlist { margin-top: 16px; }
  :root[data-finale="on"] .scene--pin .tierlist li { padding: 10px 14px; }
  :root[data-finale="on"] .scene--pin .tierlist p { display: none; }
}

/* step number above its title as a small accent label (restored) */
:root[data-glass="on"] .steps li { grid-template-columns: 1fr; }
:root[data-glass="on"] .steps li::before { grid-column: 1; padding-top: 0; margin-bottom: 10px; font-size: 12px; letter-spacing: .08em; }
:root[data-glass="on"] .steps h3, :root[data-glass="on"] .steps p { grid-column: 1; }

/* ---------- a day: sunrise to crescent moon, scrolled sideways ---------- */
.lab-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; clip-path: inset(100% 0 0 0); }
.scene--sky { display: block; min-height: 400vh; padding: 0; }
.sky__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 96px 0 72px; }
.sky__head { grid-column: 1 / span 7; }
.sky__head .h2 { font-size: clamp(34px, 4.2vw, 60px); }
.sky__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; grid-row: 3; will-change: transform; transition: transform .35s var(--ease); }
.sky__track li { flex: none; width: min(420px, 80vw); padding: 18px 20px; border-radius: var(--r-ctl, 12px); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(11, 27, 43, .08); opacity: .45; transition: opacity .5s var(--ease), background-color .6s, color .6s; }
.sky__track li { transform: scale(.94); transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .6s, color .6s; }
.sky__track li.is-now { opacity: 1; transform: none; }
.sky__track li:not(.is-now) { opacity: .74; } /* B310: the cards that aren't "now" stay dimmed but readable (Lighthouse contrast); scale still marks the current one */
.sky__track p { font-size: 17px; }
.sky__track b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--saffron); }
.sky__track p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; }
/* dusk and night: text turns light */
.scene--sky.is-dark { --bone: #fff; --mist: rgba(255, 255, 255, .88); --ash: rgba(255, 255, 255, .75); --saffron: #c9bcff; --fg-rgb: 255, 255, 255; color: #fff; }
.scene--sky.is-dark .sky__track li { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.scene--sky .scene__text::before { display: none; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .sky__head { grid-column: 1 / -1; } .sky__pin { padding: 80px 0 90px; } }
@media (prefers-reduced-motion: reduce) { .sky__track { transform: none !important; flex-wrap: wrap; } .scene--sky { min-height: 0; } .sky__pin { position: static; height: auto; } }
.scene--sky > .scene__slot, .scene--pin > .scene__slot { display: none !important; }

/* tier cards carry their ring's color: Foundation lilac, Library coral, Full System blue */
.tierlist li:nth-child(1) { --tc: 155, 135, 245; }
.tierlist li:nth-child(2) { --tc: 239, 91, 63; }
.tierlist li:nth-child(3) { --tc: 79, 123, 255; }
.tierlist b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: 3px; border-radius: 0; /* B314: square, like the site's other markers */ background: rgb(var(--tc)); box-shadow: 0 0 0 3px rgba(var(--tc), .25); }
[data-step="1"] .tierlist li:nth-child(1), [data-step="2"] .tierlist li:nth-child(-n + 2), [data-step="3"] .tierlist li {
  background: linear-gradient(90deg, rgba(var(--tc), .38), rgba(var(--tc), .12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } /* B314: no side line; the square dot marks the tier */

/* the day section sets its own text colors by sky, whatever the site theme: ink on light skies, white on dark */
.scene--sky:not(.is-dark) { --bone: #0b1b2b; --mist: #3b4856; --ash: #5f6a75; --saffron: #5b45c9; --fg-rgb: 11, 27, 43; color: #0b1b2b; }
.scene--sky:not(.is-dark) .sky__track li { background: rgba(255, 255, 255, .9); /* B310: was .62; over the dusk sky the label read lilac-on-gray */ box-shadow: inset 0 0 0 1px rgba(11, 27, 43, .08); color: #0b1b2b; }

/* performance: offscreen layers stop animating */
.lab-finale-bg.is-off i { animation-play-state: paused; }
/* the day headline sits centered at the top */
.scene--sky .sky__head { grid-column: 1 / -1; text-align: center; max-width: 900px; justify-self: center; }
.scene--sky .sky__head .h2 { margin: 0 auto; }
.scene--sky.is-dark .sky__track li { background: rgba(20, 30, 70, .55); }

/* linked cards: a subtle lift and accent edge while their part of the shape is energized */
.is-linked { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s; cursor: default; }
:root[data-loom-hover] .steps li.is-linked:hover, :root[data-loom-hover] .terms > div.is-linked:hover {
  transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .55), 0 12px 32px rgba(91, 69, 201, .14); }
:root[data-loom-hover] .tierlist li.is-linked:hover { transform: translateY(-2px); box-shadow: inset 3px 0 0 rgb(var(--tc)), inset 0 0 0 1px rgba(255, 255, 255, .5); }
:root[data-loom-hover] .terms > div.is-linked:hover dd { color: var(--saffron); }

/* supercharged border: a band of brand-colored light racing around a linked card while it's active */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.is-linked { position: relative; }
.is-linked::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg 190deg, #9b87f5 245deg, #ef5b3f 285deg, #139e8a 318deg, #4f7bff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease); animation: lab-spin 2.2s linear infinite; animation-play-state: paused; }
:root[data-loom-hover] .is-linked:hover::after, .is-linked.is-lit::after { opacity: 1; animation-play-state: running; }
:root[data-loom-hover] .is-linked:hover, .is-linked.is-lit { box-shadow: 0 0 0 1px rgba(155, 135, 245, .25), 0 10px 34px rgba(124, 99, 236, .18), 0 0 26px rgba(239, 91, 63, .08); }
@keyframes lab-spin { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .is-linked::after { animation: none; background: linear-gradient(90deg, #9b87f5, #ef5b3f, #139e8a, #4f7bff); } }

/* footer: the finale's gradient flows on into it, unchanged */
:root[data-finale="on"] .foot { position: relative; background: none; /* no darkening: the vivid gradient runs right to the bottom */
  --bone: #fff; --soft: rgba(255, 255, 255, .88); --mist: rgba(255, 255, 255, .86); --ash: rgba(255, 255, 255, .72); --saffron: #fff; --fg-rgb: 255, 255, 255; color: #fff; }
:root[data-finale="on"] .foot .brand rect[fill="#F2A93B"] { fill: var(--loom-accent, #9b87f5); }
:root[data-finale="on"] .foot a { color: inherit; }
:root[data-finale="on"] .foot .inline { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }

/* serif headlines have deeper descenders (g, y, p): give the word reveal box more room at the bottom */
:root[data-serif] .split .w { padding-bottom: .24em; margin-bottom: -.24em; }
/* the taller box needs the hidden words pushed further down so no sliver shows before the reveal */
:root[data-serif].js .split .w > span { transform: translateY(135%); }
:root[data-serif].js .is-in .split .w > span { transform: none; }
:root[data-serif][data-textfx="on"].js .is-in .split:not(.in-view) .w > span { transform: translateY(135%); }

/* the day's clock: stays still under the headline, the time follows the scroll */
.sky__clock { margin: 18px 0 0; font: 400 clamp(30px, 3.4vw, 46px)/1 var(--serif, Georgia, serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--bone); }
.sky__ampm { font: 600 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--saffron); vertical-align: .9em; margin-left: 4px; }

/* stats: centered halves, and an arrow filled with the same flowing brand colors as the charged borders */
:root[data-glass="on"] .stats--flow { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
:root[data-glass="on"] .stats--flow .stat { text-align: center; }
:root[data-glass="on"] .stats--flow .stat span { margin-left: auto; margin-right: auto; }
:root[data-glass="on"] .stats--flow::after { width: 60px; height: 16px; justify-self: center; align-self: center; margin-top: 4px;
  background: linear-gradient(90deg, #9b87f5, #ef5b3f, #139e8a, #4f7bff, #9b87f5) 0 0 / 120px 100% repeat-x;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cpath d='M2 8h53M48 2.5l7 5.5-7 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cpath d='M2 8h53M48 2.5l7 5.5-7 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60px 16px no-repeat;
  animation: lab-flow 2.2s linear infinite; }
@keyframes lab-flow { to { background-position: 120px 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-glass="on"] .stats--flow::after { animation: none; } }
:root[data-glass="on"] .stats--flow .stat span { text-wrap: balance; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .stats--flow .stat span { font-size: 13px; } :root[data-glass="on"] .stats--flow { align-items: start; } :root[data-glass="on"] .stats--flow::after { margin-top: 44px; } }

/* text links: the arrow steps out, and the underline becomes a charged line of flowing brand colors */
.ghost { text-decoration: none; background: linear-gradient(rgba(var(--fg-rgb), .3), rgba(var(--fg-rgb), .3)) 0 calc(100% - 2px) / 100% 1px no-repeat; }
.inline { text-decoration: none; padding-bottom: 3px; background: linear-gradient(rgba(155, 135, 245, .5), rgba(155, 135, 245, .5)) 0 100% / 100% 1px no-repeat; color: var(--saffron); }
.ghost svg { transition: transform .35s var(--ease); }
.ghost:hover svg, .ghost:focus-visible svg { transform: translateX(5px); }
.ghost:hover, .ghost:focus-visible, .inline:hover, .inline:focus-visible {
  background-image: linear-gradient(90deg, #9b87f5, #ef5b3f, #139e8a, #4f7bff, #9b87f5);
  background-size: 160px 2px; background-repeat: repeat-x; animation: lab-underline 1.6s linear infinite; }
.ghost:hover, .ghost:focus-visible { animation-name: lab-underline-g; }
@keyframes lab-underline { from { background-position: 0 100%; } to { background-position: 160px 100%; } }
@keyframes lab-underline-g { from { background-position: 0 calc(100% - 2px); } to { background-position: 160px calc(100% - 2px); } }
@media (prefers-reduced-motion: reduce) { .ghost:hover, .inline:hover { animation: none; } .ghost:hover svg { transform: none; } }

/* phones: headline above the animation, description below it */
.scene__head { display: none; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .has-head { padding-top: 72px; }
  .has-head > .scene__head { display: block; }
  .scene__headtext { grid-column: 1 / -1; }
  .scene__headtext .eyebrow { margin-bottom: 14px; }
  .has-head > .scene__slot { height: 54vh; height: 54svh; }
  .has-head.scene--hero > .scene__slot { height: 48svh; }
  .has-head .scene__text { padding-top: 8px; }
}

@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  /* the demo section: a shorter animation, then the demo, then the description */
  .has-demo > .scene__slot { height: 38vh; height: 38svh; }
  .has-demo .entry { margin-top: 0; }
  .has-demo .entry__title { font-size: 24px; margin-top: 8px; }
  /* chip rows stay on one line and scroll sideways if they need to */
  .entry__tags, .platforms { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .entry__tags::-webkit-scrollbar, .platforms::-webkit-scrollbar { display: none; }
  .entry__tags .tag, .platforms .tag { flex: none; }
  .entry__go { margin-top: 18px; }
}
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  /* the text backing fades out at the bottom too, so shapes scrolling under it have no hard edge */
  .scene__text::before { inset: 0 calc(var(--gutter) * -1) -150px;
    background: linear-gradient(rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), .5) 60px, rgba(var(--bg-rgb), .86) 120px, rgba(var(--bg-rgb), .86) calc(100% - 190px), rgba(var(--bg-rgb), 0)); }
}
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  /* tighter bounds around each shape so the headline and description sit closer to it */
  .has-head { padding-top: 56px; padding-bottom: 40px; }
  .has-head > .scene__slot { height: 41vh; height: 41svh; }
  .has-head.scene--hero > .scene__slot { height: 42svh; }
  .has-head .scene__text { padding-top: 0; }
  .scene__headtext .h2, .scene__headtext .display { margin-bottom: 0; }
}

/* other stats blocks (Install, Voice Kit): three glass cards in a row */
:root[data-glass="on"] .stats:not(.stats--flow) { gap: 12px; }
:root[data-glass="on"] .stats:not(.stats--flow) .stat { padding: 18px 20px; }
:root[data-glass="on"] .stats:not(.stats--flow) .stat b { font-family: var(--serif, inherit); }

/* ===================== Pass 3 (design QA of the other pages, 2026-10-01) ===================== */

/* the wordmark in the headline serif */
.brand__word { font-family: "Fraunces", "Fraunces Fallback", Georgia, serif; font-weight: 450; font-size: 21px; letter-spacing: -.02em; font-variation-settings: "opsz" 36, "SOFT" 50; }

/* vocabulary sheet: the question under each category reads clearly */
.terms dt span { font-weight: 400; font-size: 13.5px; color: var(--mist); margin-top: 5px; }

/* row lists as a glass sheet: an optional header, rows split by hairlines, a colored dot + small label, the value in the serif */
:root[data-glass="on"] .maps--sheet { gap: 0; padding: 0; margin-top: 40px; border-radius: var(--r-ctl, 12px); background: var(--glass); overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
.maps--sheet[data-head]::before { content: attr(data-head); display: block; padding: 13px 22px; font-size: 12px; font-weight: 500; color: var(--ash); border-bottom: 1px solid var(--glass-line); }
.maps--sheet li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 15px 22px 16px; border-bottom: 1px solid var(--glass-line); font-size: 16px; }
.maps--sheet li:last-child { border-bottom: 0; }
.maps--sheet li .ash { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ash); }
.maps--sheet li .ash::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; vertical-align: 1px; border-radius: 50%; background: var(--thread); }
.maps--sheet li b { font-family: var(--serif, inherit); font-weight: 400; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--bone); }
.maps--sheet li:nth-child(4n + 1) { --thread: var(--loom-accent, #9b87f5); }
.maps--sheet li:nth-child(4n + 2) { --thread: #ef5b3f; }
.maps--sheet li:nth-child(4n + 3) { --thread: #139e8a; }
.maps--sheet li:nth-child(4n + 4) { --thread: #4f7bff; }
/* fields -> schema: the field in the serif, an accent arrow, the property as a code chip */
.maps--fields li { grid-template-columns: minmax(0, 190px) 22px minmax(0, 1fr); align-items: center; padding-top: 12px; padding-bottom: 12px; }
.maps--fields li b { font-size: 19px; }
.maps--fields li b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 3px; border-radius: 50%; background: var(--thread); }
.maps--fields li i { font-style: normal; color: var(--saffron); }
.maps--fields code { justify-self: start; padding: 3px 8px; border-radius: 2px; font: 500 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--code-s); background: rgba(var(--fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--glass-line); }
.maps--sheet li.is-linked { cursor: pointer; }
:root[data-loom-hover] .maps--sheet li.is-linked:hover, .maps--sheet li.is-lit { background: rgba(155, 135, 245, .08); }
:root[data-loom-hover] .maps--sheet li.is-linked:hover b, .maps--sheet li.is-lit b { color: var(--saffron); }

/* the topic page example as one card: title and definition on top, then the parts it's built from */
:root[data-glass="on"] .tpage { margin-top: 44px; max-width: 560px; border-radius: var(--r-ctl, 12px); background: var(--glass); overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
.tpage__top { padding: 20px 22px 18px; border-bottom: 1px solid var(--glass-line); }
.tpage__top .h3 { margin: 10px 0 0; }
.tpage__def { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--mist); }
:root[data-glass="on"] .tpage .maps--flush { margin: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tpage .maps--sheet li:nth-child(1) { --thread: var(--loom-accent, #9b87f5); }
.tpage .maps--sheet li:nth-child(2) { --thread: #139e8a; }
.tpage .maps--sheet li:nth-child(3) { --thread: #4f7bff; }

/* code in a box: a title bar, then the JSON; a hovered field lights its lines */
:root[data-glass="on"] .codebox { margin-top: 14px; border-radius: var(--r-ctl, 12px); background: rgba(var(--fg-rgb), .035); box-shadow: inset 0 0 0 1px var(--glass-line); overflow: hidden; }
:root[data-theme="dark"][data-glass="on"] .codebox { background: rgba(0, 0, 0, .45); }
.codebox__bar { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--ash); border-bottom: 1px solid var(--glass-line); }
.codebox__bar span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--code-s); vertical-align: 1px; }
.codebox .mono { margin: 0; padding: 14px 16px 16px; font-size: 13px; line-height: 1.75; }
.codebox .mono .c { color: var(--ash); }
.codebox .ln { display: inline-block; min-width: 100%; margin: 0 -16px; padding: 0 16px; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.codebox .ln.is-hot { background: rgba(155, 135, 245, .14); box-shadow: inset 2px 0 0 var(--loom-accent, #9b87f5); }

@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .maps--sheet li { grid-template-columns: 1fr; padding: 12px 16px 13px; }
  .maps--sheet[data-head]::before { padding: 11px 16px; }
  .maps--sheet li b { font-size: 18px; }
  .maps--fields li { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 4px 10px; }
  .maps--fields li b { font-size: 16px; }
  .maps--fields li b::before { display: none; }
  .maps--fields code { font-size: 12px; padding: 2px 6px; }
  .tpage__top { padding: 16px; }
  .codebox .mono { font-size: 12px; padding: 12px 14px; }
  .codebox .ln { margin: 0 -14px; padding: 0 14px; }
}

/* ---------- mobile menu: serif links that slide up in turn, a small loom weaving on the right ---------- */
.sheet { transition: opacity .3s var(--ease) .34s, visibility 0s .66s; overflow: hidden; } /* closing: links leave first, then the sheet fades */
.sheet.is-open { transition: opacity .3s var(--ease), visibility 0s; }
.sheet__weave { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; width: min(44%, 420px); height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 62% at 100% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 62% at 100% 50%, #000 45%, transparent 100%); }
.sheet__top, .sheet__links, .sheet > .btn { position: relative; z-index: 1; }
.sheet__links { gap: 2px; }
.sheet__links a { display: flex; align-items: baseline; gap: 14px; overflow: hidden; padding-bottom: .08em; color: var(--bone);
  font-family: var(--serif, Georgia, serif); font-weight: 350; font-size: clamp(40px, 11.5vw, 62px); line-height: 1.12; letter-spacing: -.03em; font-variation-settings: "opsz" 120, "SOFT" 50; }
.sheet__n { flex: none; width: 22px; font: 600 11px/1 var(--font); letter-spacing: .08em; color: var(--ash); transform: translateY(-.9em); }
.sheet__links a[aria-current="page"] .sheet__n { color: var(--saffron); }
.sheet__t { display: inline-block; transform: translateY(115%); transition: transform .36s cubic-bezier(.5, 0, .75, 0) calc((5 - var(--i, 0)) * 22ms); }
.sheet__n { opacity: 0; transition: opacity .25s var(--ease); }
.sheet.is-open .sheet__t { transform: none; transition: transform .8s var(--ease) calc(160ms + var(--i, 0) * 60ms); }
.sheet.is-open .sheet__n { opacity: 1; transition: opacity .5s var(--ease) calc(380ms + var(--i, 0) * 60ms); }
.sheet__links a:hover .sheet__t, .sheet__links a:focus-visible .sheet__t { color: var(--saffron); }
.sheet > .btn { opacity: 0; transform: translateY(14px); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.sheet.is-open > .btn { opacity: 1; transform: none; transition: opacity .6s var(--ease) .55s, transform .7s var(--ease) .55s; }
@media (prefers-reduced-motion: reduce) { .sheet__t, .sheet.is-open .sheet__t, .sheet > .btn { transform: none; transition: none; } }

/* ---------- theme switch: the new theme spreads out in a circle from the button ---------- */
.theme-sweep::view-transition-old(root), .theme-sweep::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-sweep::view-transition-old(root) { z-index: 1; }
.theme-sweep::view-transition-new(root) { z-index: 2; }
/* colors snap during the sweep, so the spreading circle shows the finished theme, not a fade */
.theme-sweep, .theme-sweep *, .theme-sweep *::before, .theme-sweep *::after { transition: none !important; }

/* Home pass 3: the clock's am/pm sits beside the time, centered on the digits (it floated high as a superscript) */
.sky__ampm { vertical-align: middle; position: relative; top: -.08em; margin-left: 8px; font-size: 14px; }
/* the publish demo's status message wraps to two lines on phones: reserve them so nothing below jumps */
/* stats card: the arrow sits in the middle of the card, level with the two numbers */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .stats--flow { align-items: center; } :root[data-glass="on"] .stats--flow::after { margin-top: 0; align-self: center; } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .stats--flow .stat::before { white-space: nowrap; font-size: 10px; letter-spacing: .05em; } }

/* page transitions: leaving fades every background layer (finale gradient, day sky, glows, grid) to the plain theme
   color, while the loom turns any white threads back to their own colors, so the rows always match the theme;
   the next page fades its glows and grid back in */
.is-leaving .lab-finale-bg, .is-leaving .lab-sky, .is-leaving .lab-glow, .is-leaving .lab-bg { opacity: 0; transition: opacity .4s var(--ease); }
.is-entering .lab-glow, .is-entering .lab-bg { opacity: 0; transition: none; }
.lab-finale-bg, .lab-sky { transition: opacity .4s var(--ease); }

/* publish demo: the status line in a small glass card under the button; it drops out of the button when published,
   and slides away when it changes. Its space is reserved, so nothing below moves. */
.entry__go { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 126px; } /* button + a two-line card */
.entry__status { position: relative; max-width: 100%; margin: 0; padding: 10px 14px 10px 14px; font-size: 14.5px; line-height: 1.5;
  border-radius: var(--r-ctl, 8px); background: var(--glass, rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px var(--glass-line, rgba(255,255,255,.1));
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  transform-origin: 40px top; transition: opacity .35s var(--ease), transform .45s var(--ease), box-shadow .4s var(--ease); }
.entry__status.is-out { opacity: 0; transform: translateY(-6px); transition-duration: .18s, .2s, .2s; }
.entry__status[data-kind="done"] { box-shadow: inset 2px 0 0 var(--loom-accent, #9b87f5), inset 0 0 0 1px rgba(155, 135, 245, .35), 0 10px 30px rgba(91, 69, 201, .14); padding-left: 38px; }
.entry__status[data-kind="done"]::before { content: ""; position: absolute; left: 14px; top: calc(10px + .75em - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--loom-accent, #9b87f5)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.entry__status[data-kind="done"]:not(.is-out) { animation: tw-drop .6s var(--ease); }
@keyframes tw-drop { from { opacity: 0; transform: translateY(-14px) scaleY(.82); } to { opacity: 1; transform: none; } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .entry__go { min-height: 148px; } } /* phones: room for three lines */
@media (prefers-reduced-motion: reduce) { .entry__status, .entry__status.is-out { transition: none; transform: none; } .entry__status[data-kind="done"]:not(.is-out) { animation: none; } }
/* the nightly checks: title in the serif with its star's color, the explanation underneath */
.maps--checks li { grid-template-columns: 1fr; gap: 2px; padding-top: 12px; padding-bottom: 13px; }
.maps--checks li b { font-size: 19px; }
.maps--checks li b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 3px; border-radius: 50%; background: var(--thread); }
.maps--checks li .muted { padding-left: 17px; font-size: 14.5px; color: var(--mist); }
/* Install / Voice Kit stat cards: the number always fits on one line ("4 mo" wrapped) */
:root[data-glass="on"] .stats:not(.stats--flow) .stat b { white-space: nowrap; font-size: clamp(34px, 3.5vw, 56px); }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .stats:not(.stats--flow) .stat b { font-size: 34px; } }

/* Pricing calculator: each group of sliders in a compact glass card */
:root[data-glass="on"] .calc { gap: 12px; margin-top: 34px; }
:root[data-glass="on"] .calc__group { gap: 10px; padding: 16px 20px 14px; border-radius: var(--r-ctl, 12px); background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
:root[data-glass="on"] .calc__group > .label { margin: 0 0 2px; padding-bottom: 10px; border-bottom: 1px solid var(--glass-line); }
:root[data-glass="on"] .range { gap: 2px; }
:root[data-glass="on"] .range__top { font-size: 14.5px; align-items: baseline; }
:root[data-glass="on"] .range__top output { font-family: var(--serif, inherit); font-size: 19px; letter-spacing: -.01em; }

/* answers as stacked glass cards; the open one gets an accent edge */
:root[data-glass="on"] .faq { display: grid; gap: 8px; }
:root[data-glass="on"] .faq details { padding: 18px 22px; border-radius: var(--r-ctl, 12px); background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line);
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease); }
:root[data-glass="on"] .faq details:hover { box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .35); }
:root[data-glass="on"] .faq details[open] { box-shadow: inset 2px 0 0 var(--loom-accent, #9b87f5), inset 0 0 0 1px rgba(155, 135, 245, .3), 0 12px 32px rgba(91, 69, 201, .12); }
:root[data-glass="on"] .faq summary { font-size: clamp(19px, 1.7vw, 23px); }
.faq details p { opacity: 1; transform: none; transition: opacity .35s var(--ease) .08s, transform .4s var(--ease) .08s; }
.faq details.is-opening p { animation: tw-answer .45s var(--ease) both; }
@keyframes tw-answer { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .faq details { padding: 15px 16px; } :root[data-glass="on"] .calc__group { padding: 14px 16px 12px; } }
.form[hidden], .form__done[hidden] { display: none !important; }

/* ---------- roadmap: each phase beside a real screenshot of the prototype ---------- */
.scene--shot .scene__media { grid-column: 7 / span 6; grid-row: 1; align-self: center; position: relative; margin-left: 24px; }
.scene--shot.scene--flip .scene__media { grid-column: 1 / span 6; margin-left: 0; margin-right: 24px; }
.scene--shot .scene__text { grid-row: 1; align-self: center; }
.shot { margin: 0; border-radius: var(--r-ctl, 8px); overflow: hidden; background: var(--void);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--fg-rgb), .1); }
:root[data-theme="light"] .shot { box-shadow: 0 30px 70px rgba(11, 27, 43, .16), 0 0 0 1px rgba(11, 27, 43, .1); }
.shot img { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .shot .is-light, :root[data-theme="light"] .shot .is-dark { display: none; }
.shot--phone { position: absolute; width: 27%; right: -5%; bottom: -16%; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--fg-rgb), .14); }
.scene--shot .ghost { display: inline-block; margin-top: 26px; }
.scene--shot .actions .ghost { display: inline-flex; margin-top: 0; } /* B282: a ghost inside a button row keeps its arrow on the same line */
.shot__go { font-size: 13px; padding-bottom: 2px; white-space: nowrap; } /* B282: the caption's small link to that exact prototype screen */
/* B281: The app page: Capture's phone screenshot stands alone, phone-sized */
.shot--solo { width: min(300px, 70%); margin: 0 auto; border-radius: 26px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .shot--solo { width: min(240px, 66%); border-radius: 20px; } }
.scene--shot .shot--solo + .shot__cap { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .scene--shot > .scene__slot { display: none; }
  .scene--shot .scene__media, .scene--shot.scene--flip .scene__media { grid-column: 1 / -1; grid-row: 2; margin: 34px 0 40px; }
  .scene--shot .scene__text { grid-row: 1; }
  .shot--phone { width: 30%; right: -2%; bottom: -12%; border-radius: 14px; }
}

/* Pricing: installs and plans as glass cards; the featured plan gets the accent edge; "TBD" with its note underneath */
:root[data-glass="on"] .pkgs { gap: 14px; margin-top: 56px; align-items: stretch; }
:root[data-glass="on"] .pkg { display: flex; flex-direction: column; padding: 26px 26px 28px; background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
:root[data-glass="on"] .pkg:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .4), 0 14px 36px rgba(91, 69, 201, .14); }
:root[data-glass="on"] .pkg--featured { box-shadow: inset 0 2px 0 var(--loom-accent, #9b87f5), inset 0 0 0 1px rgba(155, 135, 245, .3), var(--glass-shadow); }
:root[data-glass="on"] .pkg__price small { display: block; margin: 8px 0 0; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--saffron); }
:root[data-glass="on"] .pkg ul { padding-top: 20px; border-top: 1px solid var(--glass-line); }
:root[data-glass="on"] .pkg .ghost { margin-top: auto; padding-top: 24px; align-self: flex-start; }
/* B292: each card's "Ask about…" is a full-width footer in its own divider strip, tinted in the package's thread color
   (Foundation lilac, Library coral, Full System cobalt, the same order as Home's tier list) */
:root[data-glass="on"] .pkg { overflow: hidden; }
:root[data-glass="on"] .pkg:nth-child(1) { --pkg-c: 155, 135, 245; } :root[data-glass="on"] .pkg:nth-child(2) { --pkg-c: 239, 91, 63; } :root[data-glass="on"] .pkg:nth-child(3) { --pkg-c: 79, 123, 255; }
:root[data-glass="on"] .pkg > .ghost:last-child { align-self: stretch; justify-content: space-between; margin: auto -26px -28px; padding: 18px 26px; margin-top: auto;
  border-top: 1px solid rgba(var(--pkg-c, 155, 135, 245), .35); background: rgba(var(--pkg-c, 155, 135, 245), .12); text-decoration: none; transition: background-color .25s, color .25s; }
:root[data-glass="on"] .pkg > .ghost:last-child:hover, :root[data-glass="on"] .pkg > .ghost:last-child:focus-visible { background: rgba(var(--pkg-c, 155, 135, 245), .22); }
:root[data-glass="on"] .pkg { padding-bottom: 28px; }
:root[data-glass="on"] .pkg ul { margin-bottom: 26px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .pkg > .ghost:last-child { margin: auto -18px -22px; padding: 16px 18px; } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .pkg { padding: 20px 18px 22px; } }

/* stat cards (Voice Kit, Install): like the other cards, a dotted label on top, then the value in the serif */
:root[data-glass="on"] .stats:not(.stats--flow) .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 18px 20px 20px; }
:root[data-glass="on"] .stats:not(.stats--flow) .stat span { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.45; color: var(--ash); }
:root[data-glass="on"] .stats:not(.stats--flow) .stat span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--thread); }
:root[data-glass="on"] .stats:not(.stats--flow) .stat b { font-size: clamp(30px, 2.8vw, 42px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
:root[data-glass="on"] .stats:not(.stats--flow) .stat:nth-child(1) { --thread: var(--loom-accent, #9b87f5); }
:root[data-glass="on"] .stats:not(.stats--flow) .stat:nth-child(2) { --thread: #ef5b3f; }
:root[data-glass="on"] .stats:not(.stats--flow) .stat:nth-child(3) { --thread: #139e8a; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .stats:not(.stats--flow) .stat b { font-size: 30px; } }

/* Install, week by week: one compact sheet instead of seven tall cards; the two gates in the accent */
.maps--weeks li { grid-template-columns: 112px minmax(0, 1fr); padding-top: 12px; padding-bottom: 13px; }
.maps--weeks li b { display: block; font-size: 18px; }
.maps--weeks li p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--mist); }
.maps--weeks li.is-gate { background: rgba(155, 135, 245, .06); }
.maps--weeks li.is-gate .ash, .maps--weeks li.is-gate b { color: var(--saffron); }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .maps--weeks li { grid-template-columns: 1fr; } }
/* titles stay in the body color on every card, hovered or not; the lilac stays on labels and the moving border */
:root[data-loom-hover] .maps--sheet li.is-linked:hover b, .maps--sheet li.is-lit b, :root[data-loom-hover] .terms > div.is-linked:hover dd, .maps--weeks li.is-gate b { color: var(--bone); }
.steps h3.spark, .steps .h4.spark { color: inherit; }

/* packages and plans: the charged border on hover, like the linked cards; the featured one is tinted with a filled badge */
:root[data-glass="on"] .pkg { position: relative; }
:root[data-glass="on"] .pkg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg 190deg, #9b87f5 245deg, #ef5b3f 285deg, #139e8a 318deg, #4f7bff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease); animation: lab-spin 2.2s linear infinite; animation-play-state: paused; }
:root[data-glass="on"] .pkg:hover::after { opacity: 1; animation-play-state: running; }
:root[data-glass="on"] .pkg--featured { background: linear-gradient(165deg, rgba(155, 135, 245, .16), var(--glass) 55%); }
:root[data-glass="on"][data-theme="light"] .pkg--featured { background: linear-gradient(165deg, rgba(124, 99, 236, .1), var(--glass) 55%); }
:root[data-glass="on"] .pkg .badge { padding: 4px 8px; border-radius: 2px; background: rgba(155, 135, 245, .18); font-family: var(--font); font-size: 10.5px; letter-spacing: .07em; color: var(--saffron); align-self: center; }
@media (prefers-reduced-motion: reduce) { :root[data-glass="on"] .pkg::after { animation: none; background: linear-gradient(90deg, #9b87f5, #ef5b3f, #139e8a, #4f7bff); } }

/* the calculator's answer: a glass card that stays in view at the bottom of the screen while you move the sliders */
:root[data-glass="on"] .calc .result { position: sticky; bottom: 18px; z-index: 2; margin-top: 4px; padding: 16px 20px; border-radius: var(--r-ctl, 12px);
  background: rgba(var(--bg-rgb), .82); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 2px 0 0 var(--loom-accent, #9b87f5), inset 0 0 0 1px rgba(155, 135, 245, .3), 0 18px 40px rgba(0, 0, 0, .35); }
:root[data-glass="on"][data-theme="light"] .calc .result { box-shadow: inset 2px 0 0 var(--loom-accent, #7c63ec), inset 0 0 0 1px rgba(124, 99, 236, .25), 0 18px 40px rgba(11, 27, 43, .12); }
:root[data-glass="on"] .calc .result b { font-size: clamp(44px, 4.4vw, 64px); }
:root[data-glass="on"] .calc .result p { margin-top: 6px; font-size: 14px; }
:root[data-glass="on"] .calc .result .math { margin-top: 8px; font-size: 12px; }

/* answers: the charged border while hovered or open */
:root[data-glass="on"] .faq details { position: relative; }
:root[data-glass="on"] .faq details::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg 190deg, #9b87f5 245deg, #ef5b3f 285deg, #139e8a 318deg, #4f7bff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease); animation: lab-spin 2.6s linear infinite; animation-play-state: paused; }
:root[data-glass="on"] .faq details:hover::after, :root[data-glass="on"] .faq details[open]::after { opacity: 1; animation-play-state: running; }
:root[data-glass="on"] .faq details[open] { box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .2), 0 12px 32px rgba(91, 69, 201, .14); }
@media (prefers-reduced-motion: reduce) { :root[data-glass="on"] .faq details::after { animation: none; background: linear-gradient(90deg, #9b87f5, #ef5b3f, #139e8a, #4f7bff); } }

/* ===================== pass 3, round 4 ===================== */
/* no lilac accent edges: featured cards, the publish status, the open answer, the calculator answer */
:root[data-glass="on"] .pkg--featured { box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .3), var(--glass-shadow); }
.entry__status[data-kind="done"] { box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .35), 0 10px 30px rgba(91, 69, 201, .14); }
:root[data-glass="on"] .faq details[open] { box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .25), 0 12px 32px rgba(91, 69, 201, .14); }

/* every standalone text link carries the arrow, and it steps forward on hover */
.ghost:not(:has(svg))::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .35s var(--ease); }
.ghost:hover::after, .ghost:focus-visible::after { transform: translateX(5px); }

/* the calculator's answer: its own glass card under the rings (desktop), at the end of the form on phones */
#calc > .grid > .calc__out { grid-column: 8 / span 4; grid-row: 1; align-self: start; position: sticky; top: calc(50vh + 220px); margin: 0;
  padding: 18px 22px 18px; border-radius: var(--r-ctl, 12px); background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); text-align: center; }
#calc > .grid > .scene__text { grid-row: 1; }
@media (min-width: 860px), (orientation: landscape) and (min-width: 600px) { #calc > .grid { padding-bottom: 150px; } } /* B293: room for the estimate card to stay under the rings while the section ends */
.calc__label { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ash); }
.calc__label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--loom-accent, #9b87f5); }
#calc .calc__out b { font-size: clamp(44px, 4.4vw, 64px); }
#calc .calc__out p { margin: 6px 0 0; font-size: 14px; color: var(--mist); }
#calc .calc__out .math { text-align: left; font-size: 12px; color: var(--ash); }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { #calc > .grid > .calc__out { grid-column: 1 / -1; grid-row: 2; position: sticky; top: auto; bottom: 14px; margin-top: 14px; } }

/* Install: add a term */
.addterm { margin-top: 30px; max-width: 460px; }
.addterm__label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ash); }
.addterm__row { display: flex; gap: 8px; }
.addterm__row .input { flex: 1; min-width: 0; height: 44px; }
.addterm__row .btn { height: 44px; }
.addterm__note { margin: 8px 0 0; font-size: 13px; color: var(--mist); }

/* sections on the vivid gradient look the same in both themes (dark-style glass, white text) */
:root[data-theme="light"] .lab-finale { --glass: rgba(255, 255, 255, .1); --glass-line: rgba(255, 255, 255, .2); --glass-shadow: 0 10px 30px rgba(0, 0, 0, .2); --code-s: #9be7d9; --bg-rgb: 20, 24, 60; }
:root[data-theme="light"] .lab-finale .input { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }
:root[data-force-dark] .nav .theme, :root[data-force-dark] .sheet .theme { display: none; }

/* a held hero: two screens tall with its text pinned, so its shape can run through before the next one takes over */
@media (min-width: 860px) {
  .scene--hold { display: block; min-height: 210vh; padding: 0; }
  .scene--hold > .grid { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; align-content: center; padding-top: 80px; padding-bottom: 40px; }
}

/* the finale gradient moves with the page (positioned per frame by look.js), clean top edge, no clip or mask */
.lab-finale-bg { inset: 0 0 auto 0; height: 0; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; will-change: transform; }

/* gradient sections: more room above their content, so the clean edge has air before the eyebrow */
:root[data-finale="on"] main > .lab-finale:not(.scene--pin) { padding-top: 220px; }
:root[data-finale="on"] .scene--pin.lab-finale > .grid { padding-top: 150px; }
:root[data-finale="on"] .scene--hero.lab-finale { padding-top: 150px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-finale="on"] main > .lab-finale:not(.scene--pin) { padding-top: 110px; } :root[data-finale="on"] .scene--pin.lab-finale > .grid { padding-top: 110px; } }

/* ---------- the Topicweave logo (2026-10-02) ---------- */
.brand__logo { display: block; width: auto; height: 22px; color: var(--bone); }
.brand svg.brand__logo { width: auto; height: 22px; }
.brand__icon { width: 100%; height: 100%; }
.foot .brand svg.brand__logo { height: 24px; }
.sheet .brand svg.brand__logo { height: 22px; }

:root[data-nav] .brand svg.brand__logo, .foot .brand svg.brand__logo { width: auto; height: 22px; }
.foot .brand svg.brand__logo { height: 24px; }
/* back links already point left: no trailing arrow */
.ghost.is-back::after { content: none; }
/* the side rail over a gradient section: white thread and fibers */
.on-grad .rail::before { background: rgba(255, 255, 255, .3); }
.on-grad .rail::after { background: #fff; }
.on-grad .rail a::before { background: rgba(255, 255, 255, .55); }
.on-grad .rail a[aria-current="true"]::before { background: #fff; }

/* ---------- joined cards (2026-10-02): step lists and the FAQ are one card each, rows split by hairlines ---------- */
:root[data-glass="on"] .steps, :root[data-glass="on"] .faq { gap: 0; border-radius: var(--r-ctl, 12px); background: var(--glass); overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
:root[data-glass="on"] .steps li, :root[data-glass="on"] .faq details { border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; border-bottom: 1px solid var(--glass-line); }
:root[data-glass="on"] .steps li:last-child, :root[data-glass="on"] .faq details:last-child { border-bottom: 0; }
/* hover / open: a faint tint on the row, plus the moving border around just that row */
:root[data-glass="on"] .steps li.is-linked:hover, :root[data-glass="on"] .steps li.is-lit, :root[data-glass="on"] .faq details:hover, :root[data-glass="on"] .faq details[open] {
  transform: none; background: rgba(155, 135, 245, .07); box-shadow: none; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .steps li, :root[data-glass="on"] .faq details { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* on the gradient, the logo is all white (mark included) */
:root[data-finale="on"] .foot .brand__logo path { fill: #fff; }
/* Home's pinned last section: everything (incl. the buttons) fits on one screen from the first stop */
:root[data-finale="on"] .scene--pin.lab-finale > .grid { padding-top: 96px; padding-bottom: 32px; }
:root[data-finale="on"] .scene--pin .h2 { font-size: clamp(36px, 3.6vw, 54px); }
:root[data-finale="on"] .scene--pin .lede { margin-top: 16px; font-size: 16px; }
:root[data-finale="on"] .scene--pin .tierlist { margin-top: 20px; gap: 6px; }
:root[data-finale="on"] .scene--pin .tierlist li { padding: 9px 16px; }
:root[data-finale="on"] .scene--pin .tierlist b { font-size: 19px; }
:root[data-finale="on"] .scene--pin .tierlist p { margin-top: 1px; font-size: 13px; }
:root[data-finale="on"] .scene--pin .actions { margin-top: 22px; }

/* footer links: a white underline draws in from the left, and the text brightens from slightly dimmed */
.foot nav a:not(.brand) { position: relative; align-self: start; justify-self: start; opacity: .82; transition: opacity .25s var(--ease); }
.foot nav a:not(.brand)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); }
.foot nav a:not(.brand):hover, .foot nav a:not(.brand):focus-visible { opacity: 1; }
.foot nav a:not(.brand):hover::after, .foot nav a:not(.brand):focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .foot nav a::after { transition: none; } }

/* ---------- the white rule (2026-10-02): lilac only on small labels, links and the current-page marker;
   big numbers, titles and body text stay in the text color ---------- */
:root[data-glass="on"] .stats--flow .stat:last-child b, .result b, #calc .calc__out b, .range__top output, .form__done,
.sheet__links a[aria-current="page"], .sheet__links a:hover .sheet__t, .sheet__links a:focus-visible .sheet__t { color: var(--bone); }
.sheet__links a { transition: opacity .25s var(--ease); }
.sheet__links:hover a:not(:hover) { opacity: .55; }
.entry__status b { color: var(--bone); font-weight: 500; }
:root[data-glass="on"] .pkg__price small { color: var(--ash); }

/* the "in your voice" card gets the moving border on hover wherever it isn't already linked to a shape */
.pair > :last-child:not(.is-linked) { position: relative; }
.pair > :last-child:not(.is-linked)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg 190deg, #9b87f5 245deg, #ef5b3f 285deg, #139e8a 318deg, #4f7bff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease); animation: lab-spin 2.2s linear infinite; animation-play-state: paused; }
.pair > :last-child:not(.is-linked):hover::after { opacity: 1; animation-play-state: running; }
/* the day section: room under the cards before the next section's edge */
.scene--sky { padding-bottom: 180px; }
.sky__pin { padding-bottom: 70px; } /* B170: cards sit lower, more open sky */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .scene--sky { padding-bottom: 110px; } .sky__pin { padding-bottom: 80px; } }

.lab-finale-bg.is-wait, .lab-sky.is-wait { opacity: 0 !important; }
.lab-finale-bg, .lab-sky { transition: opacity .35s var(--ease); }
/* the side rail over a gradient: white thread and fibers on a soft dark pill so it reads on any color
   (the earlier .on-grad rules lost to the [data-rail] ones) */
:root[data-rail="thread"].on-grad .rail { padding: 10px 0; }
:root[data-rail="thread"].on-grad .rail::before { background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 9px rgba(10, 14, 40, .28); border-radius: 9px; }
:root[data-rail="thread"].on-grad .rail::after { background: #fff; }
:root[data-rail="thread"].on-grad .rail a::before { background: rgba(255, 255, 255, .7); }
:root[data-rail="thread"].on-grad .rail a[aria-current="true"]::before { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .6); }
/* rail on gradients: a roomier pill, and the section-name label in white on a dark chip */
:root[data-rail="thread"].on-grad .rail::before { top: -14px; bottom: -14px; box-shadow: 0 0 0 11px rgba(10, 14, 40, .3); border-radius: 12px; }
:root[data-rail="thread"].on-grad .rail::after { top: 0; bottom: 0; }
.rail a span { padding: 4px 8px; border-radius: 4px; }
.on-grad .rail a span { color: #fff; background: rgba(10, 14, 40, .55); }
/* rail labels sit clear of the thread (and of the pill on gradients) */
:root[data-rail="thread"] .rail a span { right: 34px; }
:root[data-rail="thread"].on-grad .rail a span { right: 40px; }
/* rail labels: the same dark chip with white text on every section (they got lost on the day sky) */
.rail a span { color: #fff !important; background: rgba(10, 14, 40, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Join the beta: the whole form, button included, fits on the first screen; centered when the screen has room (B332: sat high on 4K) */
:root[data-finale="on"] main > .scene--hero.gradient-from:not(.scene--pin) { padding-top: 104px; padding-bottom: 56px; align-items: center; }
.gradient-from .display { font-size: clamp(44px, 5vw, 72px); }
.gradient-from .lede { margin-top: 14px; }
.gradient-from .form { margin-top: 26px; gap: 14px; }
.gradient-from .form textarea { min-height: 96px; height: 96px; }
/* inputs on the gradient: placeholders in soft white */
.lab-finale .input::placeholder { color: rgba(255, 255, 255, .55); }

/* on-brand dropdown */
.dd { position: relative; }
.dd__native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd__btn { display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.dd__btn::after { content: ""; width: 10px; height: 10px; margin-left: 12px; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); opacity: .8; }
.dd.is-open .dd__btn::after { transform: translateY(2px) rotate(-135deg); }
.dd__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: var(--r-ctl, 8px);
  background: rgba(14, 18, 44, .92); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .35); animation: dd-in .18s var(--ease); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }
.dd__list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; color: #fff; font-size: 15px; cursor: pointer; }
.dd__list li i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); flex: none; }
.dd__list li:nth-child(2) i { background: #9b87f5; } .dd__list li:nth-child(3) i { background: #ef5b3f; } .dd__list li:nth-child(4) i { background: #4f7bff; }
.dd__list li.is-hi { background: rgba(155, 135, 245, .18); }
.dd__list li[aria-selected="true"]::after { content: ""; margin-left: auto; width: 10px; height: 5px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: translateY(-2px) rotate(-45deg); }

/* shorter laptop screens: the beta form still fits with its button */
@media (max-height: 820px) and (min-width: 860px) {
  :root[data-finale="on"] main > .scene--hero.gradient-from:not(.scene--pin) { padding-top: 84px; padding-bottom: 32px; }
  .gradient-from .display { font-size: 48px; }
  .gradient-from .lede { font-size: 16px; }
  .gradient-from .form { margin-top: 18px; gap: 10px; }
  .gradient-from .form__row { gap: 12px; }
  .gradient-from .input { min-height: 42px; padding: 9px 14px; }
  .gradient-from .form textarea { min-height: 64px; height: 64px; }
  .gradient-from .field { gap: 6px; }
}
/* light theme sliders: a white knob with a cobalt ring (matching the filled track) instead of a solid ink dot */
:root[data-theme="light"] input[type="range"]::-webkit-slider-thumb { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt-hi, #2f5bea), 0 2px 6px rgba(11, 27, 43, .18); }
:root[data-theme="light"] input[type="range"]::-moz-range-thumb { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt-hi, #2f5bea), 0 2px 6px rgba(11, 27, 43, .18); }
input[type="range"]::-webkit-slider-thumb { transition: transform .2s var(--ease); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

/* the page background never fades between themes on load (the theme switch itself uses the circle sweep) */
html, body { transition: none !important; }

/* phones: a held shape (sections with lots of copy or cards) sticks under the nav while the copy scrolls beneath it */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .has-head.is-stick > .scene__slot { position: sticky; top: 52px; z-index: 0; }
  .has-head.is-stick .scene__text::before { display: none; } /* the fade replaces the backing scrim */
}
/* phones: the text backing must not spill its fade into a section with its own sky or gradient below */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  main > .scene:has(+ .scene--sky) .scene__text::before, main > .scene:has(+ .lab-finale) .scene__text::before { bottom: 0;
    background: linear-gradient(rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), .5) 60px, rgba(var(--bg-rgb), .86) 120px); }
  main > .scene:has(+ .scene--sky), main > .scene:has(+ .lab-finale) { overflow: clip; }
}
/* more room under the section before the day sky / a gradient */
main > .scene:has(+ .scene--sky), main > .scene:has(+ .lab-finale) { padding-bottom: 200px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { main > .scene:has(+ .scene--sky), main > .scene:has(+ .lab-finale) { padding-bottom: 120px; } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  main > .scene:has(+ .scene--sky) .scene__text::before, main > .scene:has(+ .lab-finale) .scene__text::before { bottom: -110px;
    background: linear-gradient(rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), .5) 60px, rgba(var(--bg-rgb), .86) 120px, rgba(var(--bg-rgb), .86) calc(100% - 130px), rgba(var(--bg-rgb), 0)); }
}
/* phones: page heroes start clear of the nav bar */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { main > .scene--hero.has-head:first-child { padding-top: 108px; } }

.lab-finale-bg { inset: auto 0 auto 0; top: 0; transform: none; will-change: auto; }
.lab-fin-in { position: absolute; left: 0; right: 0; overflow: hidden; background: #2b3fd6; }
.lab-finale-bg i { will-change: auto; }
.lab-glow i { will-change: auto; }

/* phones: no live blur behind glass (a big paint cost while scrolling); slightly denser glass instead */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  :root[data-glass="on"] { --glass: rgba(255, 255, 255, .8); }
  :root[data-glass="on"][data-theme="dark"] { --glass: rgba(22, 24, 32, .82); }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .lab-finale-bg i { animation-duration: 22s; }
}

.addterm__quick { display: none; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .addterm__row { display: none; }
  .addterm__quick { display: inline-flex; }
  .addterm__label { display: none; }
}
/* touch: no blue tap flash on linked cards, and hover styles only where there's a real pointer */
.is-linked, .is-linked * , .faq summary, .pkg { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  :root[data-loom-hover] .is-linked:hover:not(.is-lit)::after { opacity: 0; animation-play-state: paused; }
  :root[data-loom-hover] .is-linked:hover:not(.is-lit), :root[data-glass="on"] .steps li.is-linked:hover:not(.is-lit),
  :root[data-loom-hover] .maps--sheet li.is-linked:hover:not(.is-lit), :root[data-loom-hover] .terms > div.is-linked:hover:not(.is-lit) { background: none; box-shadow: none; transform: none; }
  :root[data-glass="on"] .pkg:hover { transform: none; }
  :root[data-glass="on"] .pkg:hover::after { opacity: 0; }
}
/* no blue tap flash anywhere on touch (links and buttons still show focus rings for keyboard users) */
html, body, * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }
:focus:not(:focus-visible) { outline: none; }
/* a lit card's steady outline sits inside its edge: outside, the sheet's clipping cut it off on the top and right */
:root[data-loom-hover] .is-linked:hover, .is-linked.is-lit { box-shadow: inset 0 0 0 1px rgba(155, 135, 245, .45), 0 10px 34px rgba(124, 99, 236, .14); }
@media (hover: none) { :root[data-loom-hover] .is-linked:hover:not(.is-lit) { box-shadow: none; } }
/* cards inside joined sheets never lift (a 2px lift pushed their top edge under the sheet's clip, esp. with sticky touch hover) */
.terms > div.is-linked, .steps li.is-linked, .maps--sheet li.is-linked,
:root[data-loom-hover] .terms > div.is-linked:hover, :root[data-loom-hover] .steps li.is-linked:hover, :root[data-loom-hover] .maps--sheet li.is-linked:hover { transform: none !important; }

/* phones: the screenshot sits inset a little so its woven frame isn't lost at the screen edges */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .scene--shot .scene__media, .scene--shot.scene--flip .scene__media { margin: 46px 14px 56px; } }

@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .scene--bg > .scene__slot { height: 0 !important; } .scene--bg { padding-top: 80px; } }
/* phones: background-shape sections need no text backing (the shape already fades under the copy); it drew a hard dark band */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .scene--bg .scene__text::before { display: none; } }
/* phones: package and plan cards sit in from the edges, with more room between and under them */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  :root[data-glass="on"] .pkgs { gap: 22px; padding: 0 10px; }
  :root[data-glass="on"] .pkg { padding: 22px 20px 32px; }
  :root[data-glass="on"] .pkg .ghost { padding-top: 28px; }
}
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .pkg__for { min-height: 0; } :root[data-glass="on"] .pkg ul { margin-top: 18px; } }
/* inputs on the gradient: a darker field with a clear white edge, brighter on focus */
.lab-finale .input { background: rgba(10, 14, 50, .32) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: #fff; }
.lab-finale .input:focus, .lab-finale .dd.is-open .dd__btn { outline: none; box-shadow: inset 0 0 0 2px #fff; background: rgba(10, 14, 50, .42) !important; }
.lab-finale .input::placeholder { color: rgba(255, 255, 255, .7); }
.lab-finale .field label { color: #fff; }
/* phones: glass on the gradient stays the light translucent kind used on desktop (the denser dark phone glass is for dark sections) */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-glass="on"] .lab-finale, :root[data-glass="on"][data-theme="dark"] .lab-finale { --glass: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .22); } }
.lab-finale { --glass-shadow: 0 8px 24px rgba(10, 14, 50, .12); }
/* the pinned finale's buttons sit at the very bottom of the screen: reveal them with their section, not on their own entry */
:root[data-textfx="on"].js .scene--pin.is-in .rv:not(.in-view), .js .scene--pin .scene__text.is-in .rv { opacity: 1 !important; transform: none !important; }

/* page transition weave: the page fades to the theme color while the weave knits over the whole screen */
.pageweave { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: rgba(var(--bg-rgb), 0); transition: background-color .42s var(--ease) .12s; } /* the weave starts first; the page fades behind it, never to a bare black frame */
.pageweave.is-on { background: rgba(var(--bg-rgb), 1); }
.pageweave.is-instant { transition: none; }
.pageweave:not(.is-on) { transition: background-color .5s var(--ease) .15s; }
.pageweave__cv { position: absolute; inset: 0; width: 100%; height: 100%; }

/* arriving from a page change: a plain theme-colored cover from the very first paint until the weave is drawn on it
   (otherwise the page flashed before the weave appeared) */
html.pw-arrive::after { content: ""; position: fixed; inset: 0; z-index: 61; background: var(--void); }
/* while the weave covers the page, the page itself doesn't run its own fade-in or the loom's opening */
html.pw-arrive .site, html.pw-arrive .nav { transition: none !important; }

/* B98: the opening shows the real color mark; it fades as its bars light up in threads (loom adds .intro-release) */
:root[data-loom-intro="logo"]::before { content: ""; position: fixed; z-index: 3; left: 50%; top: 50%; pointer-events: none;
  width: calc(min(100vw, 100vh) * .3325); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.73 66.73'%3E%3Cpath fill='%239085bf' d='M28.98,1.78v31h-14.83V1.78c0-.98.8-1.78,1.78-1.78h11.27c.98,0,1.78.8,1.78,1.78Z'/%3E%3Cpath fill='%239085bf' d='M14.15,56.54h14.83v8.41c0,.98-.8,1.78-1.78,1.78h-11.27c-.98,0-1.78-.8-1.78-1.78v-8.41Z'/%3E%3Cpath fill='%23f05b40' d='M1.78,14.15h7.41v14.83H1.78c-.98,0-1.78-.8-1.78-1.78v-11.27c0-.98.8-1.78,1.78-1.78Z'/%3E%3Cpath fill='%230f9e8a' d='M32.78,37.74v14.83H1.78c-.98,0-1.78-.8-1.78-1.78v-11.27c0-.98.8-1.78,1.78-1.78h31Z'/%3E%3Cpath fill='%230f9e8a' d='M66.73,39.52v11.27c0,.98-.8,1.78-1.78,1.78h-7.41v-14.83h7.41c.98,0,1.78.8,1.78,1.78Z'/%3E%3Cpath fill='%234861ad' d='M52.57,1.78v7.41h-14.83V1.78c0-.98.8-1.78,1.78-1.78h11.27c.98,0,1.78.8,1.78,1.78Z'/%3E%3Cpath fill='%234861ad' d='M37.74,33.95h14.83v31c0,.98-.8,1.78-1.78,1.78h-11.27c-.98,0-1.78-.8-1.78-1.78v-31Z'/%3E%3Cpath fill='%23f05b40' d='M66.73,15.94v11.27c0,.98-.8,1.78-1.78,1.78h-31v-14.83h31c.98,0,1.78.8,1.78,1.78Z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; }
:root[data-loom-intro="logo"]:not(.intro-release):not(.intro-done)::before { opacity: 1; animation: introMark .55s var(--ease) both; }
:root[data-loom-intro="logo"].intro-release:not(.intro-done)::before { animation: introMarkOut .4s var(--ease) both; }
@keyframes introMark { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes introMarkOut { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.04); } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { :root[data-loom-intro="logo"]::before { width: calc(min(100vw, 100vh) * .4908); } }

/* B103: Pricing FAQ is centered, the accordion narrower (answers read at a comfortable line length) */
#faq .scene__text > .eyebrow, #faq .scene__text > .h2 { text-align: center; }
#faq .faq { max-width: 820px; margin-inline: auto; text-align: left; }

/* B106: the arriving page's first-paint cover already shows the woven cloth (tools/cloth_tile.py), so the threads never
   blink out between leaving one page and the next page's script drawing its weave */
:root { --cloth: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22%3E%3Cg fill=%22none%22 stroke-width=%221.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M3 8.5L14 8.5%22 stroke=%22%239b87f5%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M18 8.5L29 8.5%22 stroke=%22%239b87f5%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M38.5 3L38.5 14%22 stroke=%22%23139e8a%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M53.5 3L53.5 14%22 stroke=%22%234f7bff%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M3 23.5L14 23.5%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M18 23.5L29 23.5%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M38.5 18L38.5 29%22 stroke=%22%23139e8a%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M53.5 18L53.5 29%22 stroke=%22%234f7bff%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M8.5 33L8.5 44%22 stroke=%22%239b87f5%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M23.5 33L23.5 44%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M33 38.5L44 38.5%22 stroke=%22%23139e8a%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M48 38.5L59 38.5%22 stroke=%22%23139e8a%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M8.5 48L8.5 59%22 stroke=%22%239b87f5%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M23.5 48L23.5 59%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M33 53.5L44 53.5%22 stroke=%22%234f7bff%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M48 53.5L59 53.5%22 stroke=%22%234f7bff%22 stroke-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E"); --cloth-s: 60px; }
@media (max-width: 599px) { :root { --cloth: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22%3E%3Cg fill=%22none%22 stroke-width=%221.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M2 6.5L11 6.5%22 stroke=%22%239b87f5%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M14 6.5L23 6.5%22 stroke=%22%239b87f5%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M30.5 2L30.5 11%22 stroke=%22%23139e8a%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M42.5 2L42.5 11%22 stroke=%22%234f7bff%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M2 18.5L11 18.5%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M14 18.5L23 18.5%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M30.5 14L30.5 23%22 stroke=%22%23139e8a%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M42.5 14L42.5 23%22 stroke=%22%234f7bff%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M6.5 26L6.5 35%22 stroke=%22%239b87f5%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M18.5 26L18.5 35%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M26 30.5L35 30.5%22 stroke=%22%23139e8a%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M38 30.5L47 30.5%22 stroke=%22%23139e8a%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M6.5 38L6.5 47%22 stroke=%22%239b87f5%22 stroke-opacity=%220.2%22/%3E%3Cpath d=%22M18.5 38L18.5 47%22 stroke=%22%23ef5b3f%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M26 42.5L35 42.5%22 stroke=%22%234f7bff%22 stroke-opacity=%220.85%22/%3E%3Cpath d=%22M38 42.5L47 42.5%22 stroke=%22%234f7bff%22 stroke-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E"); --cloth-s: 48px; } }
html.pw-arrive::after { background: var(--cloth) 0 0 / var(--cloth-s) var(--cloth-s) repeat, var(--pw-bg, var(--void)); }

/* B109: leaving from the phone menu, its own strip fades as the page cloth unrolls over it */
.sheet.is-unfurl .sheet__weave { opacity: 0; transition: opacity .3s var(--ease) .05s; }

/* B111: platform chips as tinted glass: glass card, a wash of the chip's color (still sweeping in), a thin colored edge and a dot */
.platforms span.tag:nth-child(4n + 1) { --c: #9b87f5; }
.platforms span.tag:nth-child(4n + 2) { --c: #4f7bff; }
.platforms span.tag:nth-child(4n + 3) { --c: #139e8a; }
.platforms span.tag:nth-child(4n + 4) { --c: #ef5b3f; }
:root[data-theme="light"] .platforms span.tag:nth-child(4n + 1) { --c: #6a4fdc; }
:root[data-theme="light"] .platforms span.tag:nth-child(4n + 2) { --c: #2f5bea; }
:root[data-theme="light"] .platforms span.tag:nth-child(4n + 3) { --c: #0b7a6b; }
:root[data-theme="light"] .platforms span.tag:nth-child(4n + 4) { --c: #c23a20; }
.platforms { gap: 8px; }
.platforms span.tag { gap: 8px; padding: 0 14px 0 12px; color: var(--bone); font-weight: 500; background: var(--glass, rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), var(--glass-shadow, none); }
:root[data-tagfill="on"] .platforms span.tag::before { background: color-mix(in srgb, var(--c) 16%, transparent); }
:root[data-tagfill="on"][data-theme="light"] .platforms span.tag::before { background: color-mix(in srgb, var(--c) 10%, transparent); }
:root[data-tagfill="on"] .platforms .is-in span.tag, :root[data-tagfill="on"] .is-in .platforms span.tag { color: var(--bone); }
.platforms span.tag i { width: 7px; height: 7px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .platforms span.tag { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* B120: FAQ questions in the serif, answers stay in the sans */
.faq summary { font-family: var(--serif, "Fraunces", "Fraunces Fallback", Georgia, serif); letter-spacing: -.01em; }
:root[data-glass="on"] .faq summary { font-size: clamp(19px, 1.6vw, 22px); }
.faq summary::after { font-family: var(--font); }
.faq details p { font-family: var(--font); }
/* B123: answers at card-text size, so the serif question leads */
.faq details p { font-size: 16px; line-height: 1.62; max-width: 62ch; }
.faq details p + p { margin-top: 10px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .faq details p { font-size: 15.5px; } }

/* B131: Privacy and Terms: the text in one glass card at a comfortable measure */
.legal .scene__text { display: flex; justify-content: center; }
.legal__card { width: min(760px, 100%); padding: 40px 48px 44px; background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); font-size: 16px; line-height: 1.65; color: var(--mist); }
.legal__card h2 { margin: 34px 0 10px; font-family: var(--serif, "Fraunces", "Fraunces Fallback", Georgia, serif); font-weight: 400; font-size: 23px; line-height: 1.25; letter-spacing: -.015em; color: var(--bone); }
.legal__card h2:first-child { margin-top: 0; }
.legal__card p, .legal__card ul { margin: 0 0 12px; }
.legal__card ul { padding-left: 20px; } .legal__card li { margin-bottom: 6px; }
.legal__card b { color: var(--bone); font-weight: 500; }
.legal__draft { display: inline-flex; align-items: center; gap: 8px; color: var(--ash); }
.legal__draft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--loom-accent, #9b87f5); }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .legal__card { padding: 26px 20px 28px; font-size: 15.5px; } .legal__card h2 { font-size: 21px; margin-top: 28px; } }

/* B131: cookie notice: small glass card, bottom left, first visit only (site.js) */
.cookie { position: fixed; z-index: 55; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 40px)); padding: 18px 20px 16px;
  background: rgba(var(--bg-rgb), .82); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--glass-line, rgba(var(--fg-rgb), .12)), 0 20px 50px rgba(0, 0, 0, .3); color: var(--mist); font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.cookie.is-in { opacity: 1; transform: none; }
.cookie__k { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron); }
.cookie__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--loom-accent, #9b87f5); }
.cookie p { margin: 0; }
.cookie__row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.cookie__row .btn { height: 38px; padding: 0 18px; font-size: 13px; }
.cookie__row a.inline { font-size: 13px; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .cookie { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; transform: none; } }

/* B131: the notice is nearly solid, so it reads over page text */
.cookie { background: rgba(var(--bg-rgb), .94); }
.legal { padding-bottom: 60px; }

/* B272: beta film tile (bottom right, solid so it can slide without losing a blur) + its centered player (site.js) */
.film { position: fixed; z-index: 35; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center;
  background: rgba(var(--bg-rgb), .96); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14), 0 18px 44px rgba(0, 0, 0, .28);
  transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .6s var(--ease), box-shadow .25s var(--ease), visibility 0s .6s; }
.film.is-in { transform: none; visibility: visible; transition: transform .6s var(--ease), box-shadow .25s var(--ease); }
.film.is-in.is-away { transform: translateY(calc(100% + 40px)); transition: transform .35s var(--ease); } /* B298: phones, while scrolling down */
.film__open { display: flex; align-items: center; gap: 14px; padding: 10px 6px 10px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.film__thumb { position: relative; flex: none; width: 96px; height: 54px; overflow: hidden; background: #000; }
.film__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.film__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.film__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 3px; background: rgba(255, 255, 255, .94); fill: none; stroke-width: 2.4; stroke-linecap: round; }
.film__txt { display: flex; flex-direction: column; gap: 3px; }
.film__k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.film__t { font-size: 14px; color: var(--bone); }
.film__x { align-self: flex-start; width: 32px; height: 32px; margin: 4px 4px 0 0; display: grid; place-items: center; background: none; border: 0; color: var(--ash); cursor: pointer; opacity: .7; }
.film__x svg { width: 12px; height: 12px; }
.film__x:hover, .film__x:focus-visible { opacity: 1; color: var(--bone); }
@media (hover: hover) { .film.is-in:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(47, 91, 234, .55), 0 22px 50px rgba(0, 0, 0, .32); } .film:hover .film__thumb img { transform: scale(1.05); } }
.film__open:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
@media (max-width: 599px) { .film { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .film__open { gap: 12px; padding: 8px 4px 8px 8px; } .film__thumb { width: 80px; height: 45px; } .film__t { font-size: 13.5px; } }

.filmbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; }
.filmbox__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); opacity: 0; transition: opacity .3s var(--ease); }
.filmbox__in { position: relative; width: min(1120px, 100%, calc((100dvh - 150px) * 16 / 9)); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.filmbox.is-in .filmbox__scrim, .filmbox.is-in .filmbox__in { opacity: 1; transform: none; }
.filmbox__frame { aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .5); }
.filmbox__frame iframe, .filmbox__frame video { display: block; width: 100%; height: 100%; border: 0; }
.filmbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.filmbox__close { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: none; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.filmbox__close svg { width: 12px; height: 12px; }
.filmbox__close:hover, .filmbox__close:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); outline: none; }
.filmbox--tall .filmbox__in { width: min(100%, calc((100dvh - 120px) * 9 / 16)); }
.filmbox--tall .filmbox__frame { aspect-ratio: 9 / 16; }
@media (max-width: 599px) { .filmbox { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .film, .film.is-in, .filmbox__in, .filmbox__scrim { transition: none; } }

/* B285: the beta list's done panel: a sheet where the form was, a check woven from the four brand threads, a step tracker */
.done { max-width: 560px; margin-top: 42px; padding: 26px 26px 22px; font-size: 16px; color: var(--bone); border-radius: var(--r-ctl, 12px);
  background: rgba(var(--fg-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .16), 0 20px 50px rgba(0, 0, 0, .14); animation: done-in .6s var(--ease) both; }
.done:focus { outline: none; }
.done__head { display: flex; align-items: center; gap: 18px; }
.done__mark { flex: none; width: 52px; height: 52px; }
.done__mark path { fill: none; stroke-width: 3.4; stroke-linecap: square; stroke-dasharray: 32; stroke-dashoffset: 32; animation: done-draw .45s var(--ease) forwards; }
.done__mark path:nth-child(2) { animation-delay: .08s; } .done__mark path:nth-child(3) { animation-delay: .28s; } .done__mark path:nth-child(4) { animation-delay: .36s; }
.done__k { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.done__h { margin: 0; font-family: "Fraunces", "Fraunces Fallback", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -.025em; }
.done__p { margin: 18px 0 0; color: var(--mist); line-height: 1.5; }
.done__p b, .done__steps b { font-weight: 500; color: var(--bone); }
.done__steps { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid rgba(var(--fg-rgb), .16); }
.done__steps li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(var(--fg-rgb), .16); animation: done-in .5s var(--ease) both; }
.done__steps li:nth-child(1) { animation-delay: .35s; } .done__steps li:nth-child(2) { animation-delay: .43s; } .done__steps li:nth-child(3) { animation-delay: .51s; }
.done__steps li::before { content: ""; flex: none; width: 8px; height: 8px; background: rgba(var(--fg-rgb), .35); }
.done__steps li.is-done::before { background: #0f9e8a; box-shadow: 0 0 0 3px rgba(15, 158, 138, .25); }
.done__steps li.is-next::before { background: var(--bone); }
.done__steps span { flex: 1; min-width: 0; }
.done__steps em { font-style: normal; font-size: 13px; color: var(--ash); white-space: nowrap; }
.done__steps li.is-done em { color: var(--bone); }
.done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 14px; }
@keyframes done-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes done-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 599px) { .done { padding: 22px 18px 18px; } .done__mark { width: 44px; height: 44px; } .done__h { font-size: 27px; } .done__steps em { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .done, .done__steps li { animation: none; } .done__mark path { animation: none; stroke-dashoffset: 0; } }

/* B132: the waving white weave along the bottom of the footer (site.js) */
.foot { position: relative; }
.foot__weave { display: block; width: 100%; height: 92px; margin: 26px 0 -48px; pointer-events: none; } /* runs to the very bottom (the footer has 48px of bottom padding) */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .foot__weave { height: 70px; margin-top: 18px; } }

/* B133: footer, reorganized: brand + one line + the action on the left; the three link columns in one joined glass card;
   a hairline, then the copyright and small glass chips (always on the finale gradient, so white glass) */
.foot { --fglass: rgba(255, 255, 255, .08); --fline: rgba(255, 255, 255, .2); padding-top: 110px; }
.foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.foot__brand > p { margin: 18px 0 0; font-size: 17px; line-height: 1.5; color: #fff; max-width: 340px; }
.foot__cta { margin-top: 22px; }
:root[data-finale="on"] .foot .foot__cta .btn { background: #fff; color: #1d2b62; box-shadow: none; }
:root[data-finale="on"] .foot .foot__cta .btn:hover { background: rgba(255, 255, 255, .88); }
.foot .foot__by { margin-top: 22px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.foot__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--fglass); box-shadow: inset 0 0 0 1px var(--fline);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.foot__links nav { padding: 22px 24px 24px; gap: 9px; }
.foot__links nav + nav { box-shadow: inset 1px 0 0 var(--fline); }
.foot .foot__h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .09em; color: rgba(255, 255, 255, .7); }
.foot__links nav a { font-size: 15px; }
.foot__base { margin-top: 56px; padding-top: 22px; position: relative; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .78); }
.foot__base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--fline); }
.foot__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.foot__chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; font-size: 12.5px; color: #fff; text-decoration: none;
  background: var(--fglass); box-shadow: inset 0 0 0 1px var(--fline); transition: background-color .2s, box-shadow .2s; }
a.foot__chip:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.foot__chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7ef0c6; box-shadow: 0 0 0 3px rgba(126, 240, 198, .2); }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .foot { padding-top: 80px; }
  .foot__grid { grid-template-columns: 1fr; gap: 30px; }
  .foot__links { grid-template-columns: 1fr 1fr; }
  .foot__links nav:nth-child(3) { grid-column: 1 / -1; box-shadow: inset 0 1px 0 var(--fline); }
  .foot__links nav { padding: 18px 18px 20px; }
  .foot__base { margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* B136: short landscape screens (a phone on its side): the side-by-side layout, sized for ~400px of height */
@media (orientation: landscape) and (max-height: 520px) {
  .scene { padding: 84px 0 56px; }
  .display { font-size: clamp(32px, 5vw, 46px); }
  .h2 { font-size: clamp(28px, 4vw, 40px); }
  .lede { margin-top: 16px; font-size: 15.5px; line-height: 1.5; }
  .eyebrow { font-size: 11px; }
  .actions { margin-top: 18px; }
  .stats { margin-top: 18px; }
  .sky__pin { padding: 70px 0 40px; }
  .sky__head .h2 { font-size: clamp(24px, 3.4vw, 34px); }
  .foot { padding-top: 70px; }
}

/* B138: phones: no bar. The nav is three glass tiles: the mark (just the icon) on the left; the theme switch and a branded
   menu button (three bars in the mark's colors) on the right. Slightly smaller than before. The menu sheet's top matches. */
.nav .brand .brand__icon, .sheet .brand .brand__icon { display: none; }
.burger { display: grid; gap: 4px; width: 16px; }
.burger i { display: block; height: 1.8px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; } /* B299: no width animation (the bars never change width now) */
.burger i:nth-child(1) { background: var(--loom-accent, #9b87f5); }
.burger i:nth-child(2) { background: #ef5b3f; width: 70%; justify-self: end; }
.burger i:nth-child(3) { background: #139e8a; width: 85%; }
.burger.is-x i:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.burger.is-x i:nth-child(2) { opacity: 0; }
.burger.is-x i:nth-child(3) { width: 100%; transform: translateY(-5.8px) rotate(-45deg); }
.nav__menu-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 859px) {
  :root[data-nav] .nav::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
  :root[data-nav] .nav__in { padding: 10px 12px; }
  .nav .brand, .sheet__top .brand, .nav .theme, .nav__menu, .sheet__close { display: inline-grid !important; place-items: center; width: 38px; height: 38px; padding: 0;
    background: rgba(var(--bg-rgb), .62); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14), 0 6px 20px rgba(0, 0, 0, .18); border-radius: 0; color: var(--bone); }
  :root[data-nav] .nav .theme { width: 38px; height: 38px; }
  .nav .brand .brand__logo, .sheet__top .brand .brand__logo { display: none; }
  .nav .brand .brand__icon, .sheet__top .brand .brand__icon { display: block; width: 19px; height: 19px; }
  .nav__end { gap: 6px; }
  .sheet__top .brand, .sheet__close { background: rgba(var(--fg-rgb), .06); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14); }
  .on-grad .nav .brand, .on-grad .nav .theme, .on-grad .nav__menu { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; }
  .nav .brand:active, .nav .theme:active, .nav__menu:active { transform: scale(.96); }
}
@media (max-width: 859px) { .sheet { padding-top: 10px; } .sheet__top { margin: 0 calc(12px - var(--gutter)); } } /* the sheet's tiles sit exactly where the nav's are */
/* B138: the tiles are nearly solid, and a soft fade at the top lets content slip away under them (not on the gradient) */
@media (max-width: 859px) {
  .nav .brand, .nav .theme, .nav__menu { background: rgba(var(--bg-rgb), .86); }
  :root[data-nav] .nav::before { background: linear-gradient(rgba(var(--bg-rgb), .9), rgba(var(--bg-rgb), .55) 55%, rgba(var(--bg-rgb), 0)); inset: 0 0 -14px; }
  :root[data-nav].on-grad .nav::before { background: transparent; }
}
@media (max-width: 859px) { :root[data-nav].on-sky .nav::before { background: transparent; } }
/* B141: on the gradient the phone tiles stay in the theme (solid paper or void glass, the mark and the colored menu bars), not see-through white */
@media (max-width: 859px) {
  :root.on-grad .nav .brand, :root.on-grad .nav .theme, :root.on-grad .nav__menu { background: rgba(var(--bg-rgb), .9); color: var(--bone);
    box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14), 0 8px 24px rgba(0, 0, 0, .22); }
  :root.on-grad .nav .brand .brand__icon path { fill: revert-layer; }
}
@media (max-width: 859px) { .nav .brand, .nav .theme, .nav__menu, :root.on-grad .nav .brand, :root.on-grad .nav .theme, :root.on-grad .nav__menu { background: var(--void); } } /* B141: solid tiles, nothing reads through */
/* B142: phones: at the top of the page the logo tile shows the full logo; it shrinks to the icon once you scroll */
@media (max-width: 859px) {
  .nav .brand { position: relative; overflow: hidden; transition: width .45s var(--ease), background-color .3s, box-shadow .3s; }
  .nav .brand .brand__logo, .nav .brand .brand__icon { display: block !important; position: absolute; top: 50%; transition: opacity .3s var(--ease), transform .45s var(--ease); }
  .nav .brand .brand__icon { left: 9.5px; width: 19px; height: 19px; transform: translateY(-50%); }
  .nav .brand .brand__logo { left: 12px; width: auto; height: 18px !important; transform: translateY(-50%); }
  :root:not(.lab-scrolled) .nav .brand { width: 150px; }
  :root:not(.lab-scrolled) .nav .brand .brand__icon { opacity: 0; transform: translateY(-50%) scale(.8); }
  :root.lab-scrolled .nav .brand .brand__logo { opacity: 0; transform: translateY(-50%) translateX(-8px); }
}
/* B143: the icon is centered from the middle of its tile (an older logo-size rule made it 24px against a 19px offset) */
@media (max-width: 859px) {
  .nav .brand .brand__icon, .sheet__top .brand .brand__icon { left: 50% !important; width: 20px !important; height: 20px !important; transform: translate(-50%, -50%); }
  :root:not(.lab-scrolled) .nav .brand .brand__icon { transform: translate(-50%, -50%) scale(.8); }
  .sheet__top .brand { position: relative; }
  .sheet__top .brand .brand__icon { position: absolute; top: 50%; }
}
/* B144: four bars, one per brand color (lilac, coral, teal, cobalt); in the open menu the outer two cross into the ✕ */
.burger { gap: 3px; width: 17px; }
.burger i { height: 1.8px; }
.burger i:nth-child(1) { background: var(--loom-accent, #9b87f5); width: 100%; }
.burger i:nth-child(2) { background: #ef5b3f; width: 70%; justify-self: end; }
.burger i:nth-child(3) { background: #139e8a; width: 85%; justify-self: start; }
.burger i:nth-child(4) { background: #4f7bff; width: 60%; justify-self: end; }
.burger.is-x i:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.burger.is-x i:nth-child(2), .burger.is-x i:nth-child(3) { opacity: 0; transform: none; }
.burger.is-x i:nth-child(4) { width: 100%; transform: translateY(-7.2px) rotate(-45deg); }
.burger i { height: 2px; } /* whole pixels, so every bar is equally crisp */
.burger.is-x i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-x i:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }
/* B145: three bars: top and bottom the same length, the middle one shorter (lilac, coral, teal); top and bottom cross into the ✕ */
.burger { gap: 4px; width: 17px; }
.burger i { height: 2px; transform: none; opacity: 1; }
.burger i:nth-child(1) { background: var(--loom-accent, #9b87f5); width: 100%; justify-self: stretch; }
.burger i:nth-child(2) { background: #ef5b3f; width: 60%; justify-self: end; }
.burger i:nth-child(3) { background: #139e8a; width: 100%; justify-self: stretch; }
.burger.is-x i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-x i:nth-child(2) { opacity: 0; transform: none; }
.burger.is-x i:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }
.burger.is-x i:nth-child(3) { opacity: 1; } /* (the four-bar version hid bar 3 in the ✕) */

/* B146: the page-change cover is drawn by the cloth itself, square by square, so the page appears (and disappears) along
   the sweep's edge instead of fading everywhere at once */
.pageweave, .pageweave.is-on, .pageweave:not(.is-on) { background: transparent !important; transition: none !important; }

/* B147: the menu button's bars morph into the ✕ as the menu opens (the sheet's close button starts as bars), and back */
.sheet .sheet__close .burger i { transition: transform .4s var(--ease) .12s, opacity .25s .12s; } /* B299 */
.sheet:not(.is-open) .sheet__close .burger i:nth-child(1), .sheet:not(.is-open) .sheet__close .burger i:nth-child(3) { transform: none; }
.sheet:not(.is-open) .sheet__close .burger i:nth-child(2) { opacity: 1; }
.sheet.is-open .sheet__close .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sheet.is-open .sheet__close .burger i:nth-child(2) { opacity: 0; }
.sheet.is-open .sheet__close .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); opacity: 1; }

/* B148: the tagline in the footer */
.foot .foot__brand > p.foot__tag { margin-top: 20px; font-family: var(--serif, "Fraunces", "Fraunces Fallback", Georgia, serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.foot .foot__brand > p.foot__tag + p { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .8); }

.foot .foot__brand > p.foot__tag { max-width: 460px; }

/* B152: the opening mark is smaller (no tagline under it); its threads are sized to match (introUnit in loom.js) */
:root[data-loom-intro="logo"]::before { width: calc(min(100vw, 100vh) * .2138); }
@media (max-width: 859px) { :root[data-loom-intro="logo"]::before { width: calc(min(100vw, 100vh) * .3325); } }

/* B153: the mark dissolves over 1 s while its threads appear one by one (loom.js), instead of a quick fade */
:root[data-loom-intro="logo"].intro-release:not(.intro-done)::before { animation: introMarkOut 1s cubic-bezier(.45, 0, .55, 1) .15s both; }
@keyframes introMarkOut { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.015); } }
/* B154: smaller still (matches introUnit), pinned to the exact center of the screen */
:root[data-loom-intro="logo"]::before { width: calc(min(100vw, 100vh) * .1583); left: 50%; top: 50%; margin: 0; }
@media (max-width: 859px) { :root[data-loom-intro="logo"]::before { width: calc(min(100vw, 100vh) * .2533); } }
@media (max-width: 859px) and (min-width: 600px) and (orientation: landscape) { :root[data-loom-intro="logo"]::before { width: calc(min(100vw, 100vh) * .1583); } } /* landscape phones use the side-by-side (desktop) sizing, like the threads */

/* B155: the day on a phone held sideways: heading, clock and the cards on the left (the cards glide up one at a time),
   the sun and sky on the right */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .sky__pin { grid-template-columns: 48% 1fr; grid-template-rows: auto 1fr; padding: 64px 0 0; }
  .scene--sky .sky__head { grid-column: 1; grid-row: 1; text-align: left; justify-self: start; padding: 0 0 0 var(--gutter); max-width: none; }
  .scene--sky .sky__head .h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); }
  .scene--sky .sky__head .eyebrow { margin-bottom: 6px; }
  .sky__clock { margin-top: 6px; font-size: 26px; }
  .sky__track { grid-column: 1; grid-row: 2; flex-direction: column; gap: 10px; padding: 0 0 0 var(--gutter); align-self: start; }
  .sky__track li { width: min(330px, 40vw); padding: 12px 14px; }
  .sky__track p { font-size: 14px; }
  .scene--sky .grid { grid-column: 1; }
  .sky__pin .grid { display: block; padding: 0; max-width: none; margin: 0; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .sky__track { margin-top: 14px; } .sky__track li.is-past { opacity: 0; } .sky__head { position: relative; z-index: 2; }
}

/* B156: tablets (portrait): a shorter fade under the nav, so the shapes held under it have more headroom */
@media (min-width: 600px) and (max-width: 859px) and (orientation: portrait) {
  :root[data-nav] .nav::before { inset: 0 0 -4px; background: linear-gradient(rgba(var(--bg-rgb), .85), rgba(var(--bg-rgb), 0)); }
}

/* B158: no solid logo in the opening; the threads weave the mark themselves */
:root[data-loom-intro="logo"]::before { display: none !important; }

/* B159: Roadmap, "Ideas on the list": a joined glass list of ideas, then a "Suggest a feature" card */
.later .scene__text { max-width: 980px; margin: 0 auto; }
.later__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
.later__list li { padding: 18px 22px 20px; box-shadow: inset 0 -1px 0 var(--glass-line); display: grid; gap: 5px; }
.later__list li:nth-child(odd) { box-shadow: inset 0 -1px 0 var(--glass-line), inset -1px 0 0 var(--glass-line); }
.later__list li:nth-last-child(-n + 2) { box-shadow: none; } .later__list li:nth-last-child(2):nth-child(odd) { box-shadow: inset -1px 0 0 var(--glass-line); }
.later__list li { align-content: start; } /* B289: a short item in a tall row kept a gap under its title */
.later__list li:nth-last-child(2):nth-child(even) { box-shadow: inset 0 -1px 0 var(--glass-line); } /* B289: odd count: this row still has one below it */
.later__list li:last-child:nth-child(odd) { grid-column: 1 / -1; box-shadow: none; }
.later__list b { font-family: var(--serif, "Fraunces", "Fraunces Fallback", Georgia, serif); font-weight: 400; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; color: var(--bone); display: flex; align-items: baseline; gap: 9px; }
.later__list b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-2px); background: var(--thread, #9b87f5); }
.later__list li:nth-child(4n + 1) { --thread: var(--loom-accent, #9b87f5); } .later__list li:nth-child(4n + 2) { --thread: #ef5b3f; }
.later__list li:nth-child(4n + 3) { --thread: #139e8a; } .later__list li:nth-child(4n + 4) { --thread: #4f7bff; }
.later__list span { font-size: 15px; line-height: 1.55; color: var(--mist); padding-left: 15px; }
.later__suggest { margin-top: 18px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 32px; padding: 24px 26px; background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
.later__k { margin: 0 0 8px; font-family: var(--serif, "Fraunces", "Fraunces Fallback", Georgia, serif); font-size: 23px; letter-spacing: -.015em; color: var(--bone); }
.later__ask p:not(.later__k) { margin: 0; font-size: 15px; color: var(--mist); line-height: 1.55; }
.later__form { display: grid; gap: 10px; }
.later__form[hidden], .later__done[hidden] { display: none; } /* B290: the grid kept the sent form on screen */
.later__form textarea { min-height: 84px; resize: vertical; }
.later__form .is-empty { box-shadow: inset 0 0 0 2px #ef5b3f; }
.later__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.later__note { margin: 0; font-size: 12.5px; color: var(--ash); }
.later__done { grid-column: 2; margin: 0; align-self: center; font-size: 16px; color: var(--bone); animation: done-in .6s var(--ease) both; }
.later__done:focus { outline: none; }
.later__done .done__h { font-size: 26px; }
.later__done .done__mark { width: 44px; height: 44px; }
.later__done .done__p { margin-top: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  .later__list { grid-template-columns: 1fr; }
  .later__list li, .later__list li:nth-child(odd), .later__list li:nth-last-child(2):nth-child(odd) { box-shadow: inset 0 -1px 0 var(--glass-line); padding: 15px 16px 16px; }
  .later__list li:last-child { box-shadow: none; }
  .later__suggest { grid-template-columns: 1fr; padding: 18px 16px; }
  .later__row { grid-template-columns: 1fr; }
  .later__done { grid-column: 1; }
}

/* B160: Roadmap, a one-line caption under each screenshot (below the woven strip the threads draw under it) */
.scene--shot .shot__cap { margin: 58px 0 0; max-width: 560px; font-size: 14px; line-height: 1.5; color: var(--mist); }
.scene--shot .shot__cap b { font-weight: 500; color: var(--bone); }
.scene--shot .shot--phone ~ .shot__cap { margin-top: 64px; padding-right: 26%; } /* clears the phone inset */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .scene--shot .shot__cap { margin-top: 44px; font-size: 13.5px; } .scene--shot .shot--phone ~ .shot__cap { margin-top: 70px; padding-right: 0; } }
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) { .scene--shot .shot--phone ~ .shot__cap { margin-top: 48px; padding-right: 30%; } }

/* B161: between pages the scrollbar thumb jumped (each page is a different length, and pinned sections finish laying out
   after load). It is transparent while the cloth is up, leaving and arriving; it keeps its width, so nothing shifts. */
@supports (-moz-appearance: none) { html.pw-arrive, html.pw-busy { scrollbar-color: transparent transparent; } }
html.pw-arrive::-webkit-scrollbar-thumb, html.pw-busy::-webkit-scrollbar-thumb { background: transparent; }

/* B172: bigger screens change pages with a plain fade: the threads fade where they are (no cloth, no sweep into rows) */
html.pg-fade canvas.loom { opacity: 0; transition: opacity .38s var(--ease); }

/* B173: live forms: empty/invalid flag, sending state, error line */
.form .is-empty { box-shadow: inset 0 0 0 2px #ef5b3f; }
.is-sending button[type=submit] { opacity: .6; cursor: progress; }
.form__err { margin: 14px 0 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: inherit; }
.form__err::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 2px; background: #ef5b3f; } /* B299: a square marker, like the site's other dots, instead of a side stripe */

/* B185: a slim scrollbar in the four thread colors instead of the generic one. Chrome/Safari/Edge draw it with
   ::-webkit-scrollbar (setting scrollbar-color would switch them back to the standard bar); Firefox can't do
   gradients, so it gets a thin lilac bar. Same in dark and light. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; background-clip: padding-box; border-radius: 0;
  background-image: linear-gradient(180deg, #9b87f5, #ef5b3f 38%, #139e8a 68%, #4f7bff); background-color: transparent; }
::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(90deg, #9b87f5, #ef5b3f 38%, #139e8a 68%, #4f7bff); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { border-width: 2px; }
@supports (-moz-appearance: none) { html { scrollbar-width: thin; scrollbar-color: #9b87f5 transparent; } }

/* B207: the phone menu offers the prototypes right beside Join the beta */
.sheet__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; align-self: flex-start; }

/* B292: phones: the card footers bleed to the card's own edges (these padding values win over the earlier phone rules) */
@media (max-width: 859px) and (orientation: portrait), (max-width: 599px) {
  :root[data-glass="on"] .pkg { padding: 22px 20px 0; }
  :root[data-glass="on"] .pkg > .ghost:last-child { margin: auto -20px 0; padding: 16px 20px; }
}
@media (min-width: 860px), (orientation: landscape) and (min-width: 600px) { :root[data-glass="on"] .pkg { padding-bottom: 0; } :root[data-glass="on"] .pkg > .ghost:last-child { margin-bottom: 0; } }

/* B307: Lighthouse target size: rail links get a 24 px tap area (they were 22 x 18 with no gap); the rail is a little taller */
:root[data-rail="thread"] .rail a { width: 24px; height: 24px; }

/* B328: Home hero in three set lines (Your expertise, / built into your site. / Yours to keep.); the last never splits.
   The line is sized to its column so laptops don't break "built into" onto its own line. */
.hero-lines .ln { display: block; }
.hero-lines .ln--keep { white-space: nowrap; }
@media (min-width: 600px) { .hero-lines { font-size: min(clamp(46px, min(7.2vw, 10.5vh), 90px), 6.1vw); } .hero-lines .ln { white-space: nowrap; } }

/* Refer page (draft): a square, on-brand checkbox row */
.check { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 15px; color: var(--mist); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1px solid rgba(var(--fg-rgb), .45); background: none; cursor: pointer; display: grid; place-content: center; }
.check input::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--cobalt, #2f5bea); border-color: var(--cobalt, #2f5bea); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
#thanks .terms--buy div:nth-child(4) dt::before { background: #fff; }