
  @view-transition { navigation: auto; }
  :root {
    --bg: #0a0a0e;
    --bg2: #101018;
    --card: #12121a;
    --line: rgba(255,255,255,0.11);
    --txt: #e8e8ee;
    --dim: rgba(232,232,238,0.66);
    --acc: #b7ff2e;
    --acc2: #7a5cff;
    --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { background: var(--bg); }
  body {
    background: var(--bg); color: var(--txt);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--acc); color: #000; }

  /* ---------- 21 progress bar ---------- */
  #progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: var(--acc); transform-origin: 0 50%; transform: scaleX(0);
    z-index: 9500;
  }

  /* ---------- 02 cursor ---------- */
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none;
    border-radius: 50%; z-index: 9999; mix-blend-mode: difference;
  }
  .cursor-dot  { width: 6px;  height: 6px;  background: #fff; }
  .cursor-ring { width: 36px; height: 36px; border: 1px solid #fff; transition: width .25s, height .25s; }
  .cursor-ring.hover { width: 60px; height: 60px; }
  @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }
  @media (pointer: fine) { body { cursor: none; } body a, body button { cursor: none; } }

  /* ---------- 03 preloader ---------- */
  #preloader {
    position: fixed; inset: 0; background: #060609; color: #fff;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9000; gap: 1.2rem;
  }
  .pre-num { font: 600 5rem/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .pre-bar { width: 240px; height: 1px; background: rgba(255,255,255,.12); }
  .pre-fill { height: 100%; background: var(--acc); width: 0%; }
  .pre-tag { font: 400 .7rem/1 var(--mono); color: var(--dim); letter-spacing: .3em; text-transform: uppercase; }

  /* ---------- 04 page transition overlay ---------- */
  #transition { position: fixed; inset: 0; z-index: 8800; pointer-events: none; display: flex; }
  #transition .slab { flex: 1; background: var(--acc); transform: scaleY(0); transform-origin: 50% 100%; }

  /* ---------- 05 grain ---------- */
  #grain {
    position: fixed; inset: -100%; z-index: 8000; pointer-events: none; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-jump .28s steps(4) infinite;
  }
  body.no-grain #grain { display: none; }
  @keyframes grain-jump {
    0% { transform: translate(0,0); } 25% { transform: translate(-2%,3%); }
    50% { transform: translate(3%,-2%); } 75% { transform: translate(-3%,-3%); } 100% { transform: translate(2%,2%); }
  }

  /* ---------- layout ---------- */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
  .hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding-top: 8rem; padding-bottom: 6rem; }
  .hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .65fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; }
  .hero-copy { min-width: 0; }
  .hero .eyebrow { margin: 0 0 1.25rem; color: var(--acc); font: 600 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .hero h1 {
    font-size: clamp(4.5rem, 10vw, 8.5rem); line-height: .78; letter-spacing: -0.055em;
    font-weight: 700; text-transform: uppercase;
  }
  .hero h1 .accent { color: var(--acc); }
  .hero p.sub { margin-top: 2rem; max-width: 38rem; color: #aaaab2; font-size: 1.08rem; line-height: 1.65; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
  .hero-cta { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: .8rem 1.15rem; border: 1px solid #3a3a42; border-radius: 99px; color: var(--txt); font: 600 .72rem/1 var(--mono); text-decoration: none; transition: transform .2s, border-color .2s; }
  .hero-cta:hover { transform: translateY(-2px); border-color: var(--acc); }
  .hero-cta.primary { color: #090a08; background: var(--acc); border-color: var(--acc); }
  .hero-proof { padding: 1.4rem; border: 1px solid #303038; border-radius: 14px; background: rgba(255,255,255,.025); }
  .hero-proof > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #292930; }
  .hero-proof strong { color: var(--txt); font: 600 1.55rem/1 var(--mono); }
  .hero-proof span { color: #aaaab2; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
  .hero-proof p { margin: 1.15rem 0; color: #aaaab2; font: 400 .82rem/1.55 var(--sans); }
  .hero-proof code { display: block; color: var(--acc); font: 500 .7rem/1 var(--mono); }
  @media (max-width: 760px) {
    .hero { min-height: auto; padding-top: 7rem; padding-bottom: 4rem; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero h1 { font-size: clamp(4rem, 21vw, 6rem); }
  }

  .section-head { padding: 14vh 0 5vh; }
  .sec-toggleable { cursor: pointer; user-select: none; }
  .sec-toggleable h2 { transition: color .3s; }
  .sec-toggleable:hover h2 { color: var(--acc); }
  .chev { display: inline-block; margin-left: .45em; color: var(--acc); font-size: .45em; vertical-align: middle; transition: transform .4s cubic-bezier(.76,0,.24,1); }
  .sec-toggleable.open .chev { transform: rotate(180deg); }
  .sec-hint { font: 400 .68rem var(--mono); color: var(--dim); letter-spacing: .08em; margin-top: .5rem; }
  .sec-toggleable.open .sec-hint .when-closed, .sec-toggleable:not(.open) .sec-hint .when-open { display: none; }
  .sec-body.closed { display: none; }
  .section-head .kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
  .section-head h2 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.03em; margin-top: .6rem; }
  .section-head p { color: var(--dim); margin-top: .8rem; max-width: 36rem; line-height: 1.6; }

  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }

  .card {
    border: 1px solid var(--line); border-radius: 14px; background: var(--card);
    overflow: hidden; display: flex; flex-direction: column;
  }
  .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }
  .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; }
  .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
  .tags { display: flex; gap: .35rem; }
  .tags i {
    font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim);
    border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap;
  }
  .demo {
    min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center;
    background: var(--bg2); overflow: hidden; flex: 1;
  }
  .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); }
  .order b { color: var(--txt); font-weight: 500; }

  .btn {
    font: 500 .8rem/1 var(--mono); color: var(--txt); background: transparent;
    border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: .8em 1.6em;
    transition: border-color .3s;
  }
  .btn:hover { border-color: var(--acc); color: var(--acc); }
  .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }

  canvas.gl { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }

  /* 01 */
  .vel-readout { text-align: center; }
  .vel-readout .v { font: 600 4.5rem/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
  .vel-readout .l { font-family: var(--mono); font-size: .7rem; color: var(--dim); letter-spacing: .25em; text-transform: uppercase; margin-top: .6rem; }

  /* 06 gradient mesh */
  .mesh-demo { position: absolute; inset: 0; filter: blur(48px) saturate(1.3); transform: translateZ(0); }
  .blob { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; }
  .blob.b1 { background: #7a5cff; top: -10%; left: -5%; }
  .blob.b2 { background: #0ea5b7; bottom: -15%; right: -5%; }
  .blob.b3 { background: #b7ff2e; top: 30%; left: 40%; width: 35%; opacity: .7; }

  /* 07 char cascade */
  .split-heading { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; }
  .split-heading .ch { display: inline-block; will-change: transform; }

  /* 08 line mask */
  .lines { font-size: 1.25rem; font-weight: 500; line-height: 1.5; text-align: center; }
  .lines .line { overflow: hidden; display: block; }
  .lines .line > span { display: block; will-change: transform; }
  .lines .line em { color: var(--acc); font-style: normal; }

  /* 09 scramble */
  .scramble-txt { font-family: var(--mono); font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: .06em; color: var(--txt); }

  /* 10 word scrub */
  .scrub-block { padding: 10vh 0 12vh; }
  .scrub-words { font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; max-width: 60rem; }
  .scrub-words span { opacity: .12; }

  /* 11 marquee */
  .marquee-block { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; margin-top: 20px; }
  .marquee-track { display: flex; gap: 3rem; width: max-content; white-space: nowrap; will-change: transform; }
  .marquee-track span { font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }
  .marquee-track span:nth-child(even) { -webkit-text-stroke: 1px var(--txt); color: transparent; }
  .marquee-note { font-family: var(--mono); font-size: .72rem; color: var(--dim); padding: .7rem 0 0; }

  /* 12 outline hover */
  .outline-word {
    font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
    -webkit-text-stroke: 1.5px var(--txt); color: transparent; transition: color .4s ease;
  }
  .outline-word:hover { color: var(--acc); -webkit-text-stroke-color: var(--acc); }

  /* 13 counter */
  .count-wrap { text-align: center; }
  .count-wrap .c { font: 700 4.5rem/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
  .count-wrap .c small { font-size: 2rem; color: var(--acc); }
  .count-wrap .l { font-family: var(--mono); font-size: .7rem; color: var(--dim); letter-spacing: .25em; text-transform: uppercase; margin-top: .6rem; }

  /* 14 reveal */
  .reveal-stack { display: flex; flex-direction: column; gap: .9rem; width: 78%; }
  .reveal-stack .r-item { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; background: rgba(255,255,255,.02); font-size: .9rem; color: var(--dim); }

  /* 15 parallax */
  .plx { position: absolute; inset: 0; }
  .plx .layer { position: absolute; border-radius: 12px; }
  .plx .l-back { inset: 12% 20%; background: linear-gradient(135deg, #1c1c30, #101020); }
  .plx .l-mid  { inset: 30% 30%; background: linear-gradient(135deg, var(--acc2), #2a1a66); }
  .plx .l-front{ inset: 44% 42%; background: var(--acc); }

  /* 16 pin stage */
  .stage { position: relative; }
  .stage-viewport { height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
  .stage-num { position: absolute; top: 24px; left: 24px; font-family: var(--mono); color: var(--acc); }
  .pin-box {
    width: min(34vmin, 260px); aspect-ratio: 1; border-radius: 18px;
    background: linear-gradient(135deg, var(--acc2), #3a2a86);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: .8rem;
  }
  .pin-captions { position: absolute; bottom: 12vh; left: 0; right: 0; text-align: center; height: 2.2em; }
  .pin-captions p { position: absolute; inset: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 600; opacity: 0; }

  /* 17 horizontal */
  .h-scroll { overflow: hidden; position: relative; }
  .h-inner { display: flex; will-change: transform; }
  .h-panel {
    flex: 0 0 70vw; max-width: 900px; height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1rem; border-right: 1px solid var(--line);
  }
  .h-panel h4 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.03em; }
  .h-panel p { color: var(--dim); font-family: var(--mono); font-size: .78rem; }

  /* 18 stack cards */
  .stack-zone { position: relative; padding-bottom: 10vh; }
  .stack-card {
    position: sticky; top: 12vh; min-height: 62vh; border-radius: 20px; margin: 0 0 6vh;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .6rem;
    border: 1px solid var(--line);
  }
  .stack-card h4 { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; }
  .stack-card p { font-family: var(--mono); font-size: .75rem; color: rgba(0,0,0,.55); }
  .stack-card.s1 { background: #1a1a26; } .stack-card.s1 p { color: var(--dim); }
  .stack-card.s2 { background: var(--acc2); }
  .stack-card.s2 p { color: rgba(255,255,255,.6); }
  .stack-card.s3 { background: var(--acc); color: #0a0a0e; }

  /* 19 clip reveal */
  .clip-img { width: 78%; aspect-ratio: 16/10; border-radius: 10px;
    background:
      radial-gradient(120% 90% at 20% 15%, #ffd76e 0%, transparent 45%),
      radial-gradient(110% 100% at 85% 30%, #ff6e9c 0%, transparent 55%),
      radial-gradient(130% 110% at 50% 95%, var(--acc2) 0%, #191930 70%);
    clip-path: inset(100% 0 0 0); }

  /* 20 zoom */
  .zoom-frame { width: 78%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; }
  .zoom-art { width: 100%; height: 100%; transform: scale(1.45); transform-origin: 50% 50%;
    background:
      radial-gradient(100% 80% at 70% 20%, #0ea5b7 0%, transparent 55%),
      radial-gradient(120% 90% at 20% 80%, var(--acc) 0%, transparent 40%),
      linear-gradient(160deg, #141428, #0b0b14); }

  /* 22 magnetic */
  .mag-btn { font-size: .9rem; padding: 1.1em 2.4em; }

  /* 23 tilt */
  .tilt-card {
    width: 65%; aspect-ratio: 16/10; border-radius: 14px;
    background: linear-gradient(150deg, #1c1c2e 0%, #101018 100%);
    border: 1px solid rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: .75rem; color: var(--dim);
    transform-style: preserve-3d; will-change: transform;
  }
  .tilt-card .shine { position: absolute; inset: 0; border-radius: 14px;
    background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 70%); }

  /* 24 trail */
  .trail-zone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .trail-zone p { font-family: var(--mono); font-size: .75rem; color: var(--dim); pointer-events: none; }
  .trail-bit { position: absolute; width: 72px; height: 92px; border-radius: 8px; pointer-events: none; will-change: transform, opacity; }

  /* 25 link roll */
  .roll-links { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
  .roll { font-size: 1.5rem; font-weight: 600; color: var(--txt); text-decoration: none; overflow: hidden; display: block; height: 1.3em; line-height: 1.3; }
  .roll .stackk { display: block; transition: transform .45s cubic-bezier(.76,0,.24,1); }
  .roll:hover .stackk { transform: translateY(-50%); }
  .roll .stackk span { display: block; height: 1.3em; }
  .roll .stackk span:last-child { color: var(--acc); }

  /* 26 fill sweep */
  .sweep { position: relative; overflow: hidden; font: 500 .9rem/1 var(--mono); color: var(--txt);
    background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 1.1em 2.6em; }
  .sweep i { position: absolute; inset: 0; background: var(--acc); transform: scaleY(0); transform-origin: 50% 100%;
    transition: transform .45s cubic-bezier(.76,0,.24,1); border-radius: 99px; font-style: normal; }
  .sweep b { position: relative; z-index: 2; font-weight: 500; transition: color .3s; }
  .sweep:hover i { transform: scaleY(1); }
  .sweep:hover b { color: #0a0a0e; }

  /* ---------- Section F · shader craft ---------- */
  .ascii-box { font: 700 10px/9px var(--mono); color: var(--acc); white-space: pre; letter-spacing: 1px; user-select: none; }
  .goo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(10px) contrast(22); }
  .ptext-canvas, .scrub48-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .demo-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font: 400 .65rem var(--mono); color: var(--dim); pointer-events: none; z-index: 4; }

  /* ---------- Section G · motion systems ---------- */
  .drag-view { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; cursor: grab; touch-action: pan-y; }
  .drag-view:active { cursor: grabbing; }
  .drag-track { display: flex; gap: 14px; padding: 0 24px; will-change: transform; }
  .drag-item { flex: 0 0 160px; height: 160px; border-radius: 12px; display: flex; align-items: flex-end; padding: 10px;
    font: 500 .68rem var(--mono); color: rgba(0,0,0,.55); user-select: none; }

  .flip-grid { display: grid; grid-template-columns: repeat(4, 46px); gap: 8px; }
  .flip-grid .tile { width: 46px; height: 46px; border-radius: 9px; }

  .svg-draw path { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; }
  .morph-svg path { fill: var(--acc2); opacity: .9; }

  .odo { display: flex; align-items: baseline; font: 700 3.6rem/1 var(--sans); letter-spacing: -0.03em; }
  .odo .col { height: 1em; overflow: hidden; }
  .odo .strip { display: flex; flex-direction: column; will-change: transform; }
  .odo .strip span { height: 1em; line-height: 1; display: block; }
  .odo small { font-size: 1.6rem; color: var(--acc); margin-left: .2em; }

  .vt-grid { display: grid; grid-template-columns: repeat(4, 54px); gap: 10px; }
  .vt-item { aspect-ratio: 1; border-radius: 10px; border: 0; padding: 0; }
  .vt-item.big { grid-column: 1 / -1; aspect-ratio: 4 / 1.4; }
  .vt-note { position: absolute; top: 12px; left: 14px; font: 400 .62rem var(--mono); color: var(--dim); }

  .skew-lines { text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; will-change: transform; }
  .skew-lines .sk { display: block; }

  /* ---------- Section H · AI layer ---------- */
  .ai-card { border-color: rgba(122,92,255,.4) !important; }
  .ai-card .num { color: var(--acc2) !important; }
  .ai-badge { position: absolute; top: 12px; left: 14px; font: 400 .6rem var(--mono); color: var(--acc2);
    border: 1px solid rgba(122,92,255,.4); border-radius: 99px; padding: .3em .7em; z-index: 4; }

  .chat-demo { width: 84%; display: flex; flex-direction: column; gap: .55rem; font-size: .78rem; }
  .chat-demo .msg { padding: .6rem .85rem; border-radius: 12px; max-width: 85%; line-height: 1.45; min-height: 1em; }
  .chat-demo .user { align-self: flex-end; background: rgba(255,255,255,.08); border-bottom-right-radius: 3px; }
  .chat-demo .bot { align-self: flex-start; background: rgba(122,92,255,.16); border: 1px solid rgba(122,92,255,.3); border-bottom-left-radius: 3px; }

  .search-demo { width: 84%; }
  .search-demo .inp { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem;
    font: 400 .8rem var(--mono); color: var(--txt); background: rgba(255,255,255,.03); min-height: 1.1em; }
  .search-demo .inp::after { content: '▌'; color: var(--acc2); animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .search-demo .hits { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; min-height: 4.4em; align-content: flex-start; }
  .search-demo .hit { font: 400 .68rem var(--mono); border: 1px solid rgba(122,92,255,.35); color: var(--txt);
    border-radius: 99px; padding: .45em .9em; opacity: 0; }

  .gen-frame { width: 70%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; position: relative; background: #16162a; }
  .gen-art { position: absolute; inset: 0; opacity: 0; }
  .gen-shimmer { position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(122,92,255,.25) 50%, transparent 70%);
    background-size: 250% 100%; animation: shimmer 1.4s linear infinite; }
  @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  .gen-label { position: absolute; bottom: 8px; left: 10px; font: 400 .62rem var(--mono); color: var(--dim); z-index: 3; }

  .persona-demo { width: 80%; text-align: center; }
  .persona-tag { font: 400 .65rem var(--mono); color: var(--acc2); letter-spacing: .2em; text-transform: uppercase; }
  .persona-h { font-size: 1.35rem; font-weight: 700; margin-top: .6rem; min-height: 2.6em; }
  .persona-cta { display: inline-block; margin-top: .6rem; font: 500 .72rem var(--mono); border: 1px solid rgba(122,92,255,.5);
    border-radius: 99px; padding: .6em 1.4em; color: var(--txt); }

  .copygen { width: 84%; font: 400 .78rem/1.7 var(--mono); color: var(--txt); min-height: 8em; }
  .copygen .cg-line { min-height: 1.7em; }
  .copygen .dimline { color: var(--dim); }

  .voice-demo { text-align: center; }
  .voice-bars { display: flex; gap: 5px; align-items: flex-end; height: 54px; justify-content: center; margin-bottom: 1rem; }
  .voice-bars i { width: 5px; background: var(--acc2); border-radius: 3px; animation: vbar 1s ease-in-out infinite; }
  @keyframes vbar { 0%,100% { height: 18%; } 50% { height: 100%; } }

  .agent-graph { font: 400 .7rem var(--mono); color: var(--dim); text-align: center; }
  .agent-graph svg { overflow: visible; margin-bottom: .9rem; }
  .agent-graph circle { fill: var(--bg2); stroke: rgba(122,92,255,.6); stroke-width: 1.5; }
  .agent-graph .hub { stroke: var(--acc2); stroke-width: 2; }
  .agent-graph line { stroke: rgba(122,92,255,.35); stroke-dasharray: 4 5; animation: dashflow 1.4s linear infinite; }
  @keyframes dashflow { to { stroke-dashoffset: -9; } }
  .agent-graph text { fill: var(--txt); font-size: 9px; font-family: var(--mono); text-anchor: middle; }
  .agent-status { min-height: 1.5em; }

  /* ---------- Section I · text & type II ---------- */
  .vf-word { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: .02em; user-select: none; }
  .vf-word .ch { display: inline-block; font-variation-settings: 'wght' 300; }

  .circ-text { animation: none; }
  .circ-text text { fill: var(--txt); font: 600 13.5px var(--mono); letter-spacing: .34em; text-transform: uppercase; }

  .pathtext-svg text { fill: var(--acc); font: 700 20px var(--sans); letter-spacing: .05em; }

  .typewriter { font: 500 1.15rem var(--mono); color: var(--txt); }
  .typewriter::after { content: '▌'; color: var(--acc); animation: caret 1s steps(1) infinite; }

  .blur-heading { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; }
  .blur-heading .ch { display: inline-block; }

  .shine-text {
    font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
    background: linear-gradient(110deg, #55555f 42%, #ffffff 50%, #b7ff2e 52%, #55555f 58%);
    background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine-slide 3.2s linear infinite;
  }
  @keyframes shine-slide { from { background-position: 130% 0; } to { background-position: -110% 0; } }

  .rotator { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; display: flex; gap: .5ch; align-items: baseline; }
  .rotator .slot { display: inline-block; min-width: 7ch; perspective: 400px; color: var(--acc); }
  .rotator .slot span { display: inline-block; transform-origin: 50% 100%; }

  .preview-links { display: flex; flex-direction: column; gap: .9rem; z-index: 2; }
  .preview-links a { color: var(--txt); text-decoration: none; font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
  .float-preview { position: absolute; width: 130px; height: 96px; border-radius: 8px; pointer-events: none; opacity: 0; z-index: 1; will-change: transform; }

  .wave-text { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; text-transform: uppercase; }
  .wave-text .ch { display: inline-block; }

  .grav-box { position: absolute; inset: 0; }
  .grav-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .06em;
    font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; text-transform: uppercase; }
  .grav-word .ch { display: inline-block; will-change: transform; }

  /* ---------- Section J · interface micro II ---------- */
  .burger { width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .burger span { display: block; width: 22px; height: 2px; background: var(--txt); transition: transform .4s cubic-bezier(.76,0,.24,1), opacity .3s; }
  .burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .spot-card { width: 78%; aspect-ratio: 16/9; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  .spot-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font: 600 1.1rem var(--sans); color: var(--acc);
    background: repeating-linear-gradient(45deg, rgba(183,255,46,.08) 0 12px, transparent 12px 24px);
    -webkit-mask-image: radial-gradient(150px 150px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 75%);
    mask-image: radial-gradient(150px 150px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 75%); }

  @property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  .beam-wrap { position: relative; border-radius: 14px; padding: 1.5px; overflow: hidden; }
  .beam-wrap::before { content: ''; position: absolute; inset: -40%;
    background: conic-gradient(from var(--beam-angle), transparent 0 78%, var(--acc) 88%, #fff 92%, transparent 98%);
    animation: beam-spin 3.5s linear infinite; }
  @keyframes beam-spin { to { --beam-angle: 360deg; } }
  .beam-core { position: relative; border-radius: 12.5px; background: var(--bg2); padding: 2rem 2.6rem;
    font: 500 .85rem var(--mono); color: var(--txt); }

  .dots-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  .ba-wrap { width: 82%; aspect-ratio: 16/9; border-radius: 10px; position: relative; overflow: hidden; cursor: ew-resize; touch-action: none; }
  .ba-layer { position: absolute; inset: 0; }
  .ba-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
  .ba-handle::after { content: '⇔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
  .ba-tag { position: absolute; bottom: 8px; font: 500 .6rem var(--mono); background: rgba(0,0,0,.55); color: #fff; padding: .3em .6em; border-radius: 4px; }

  .accordion-cols { display: flex; gap: 8px; width: 84%; height: 200px; }
  .acc-col { flex: 1; border-radius: 10px; transition: flex .55s cubic-bezier(.76,0,.24,1); position: relative; overflow: hidden; }
  .acc-col:hover { flex: 3.2; }
  .acc-col span { position: absolute; bottom: 10px; left: 12px; font: 500 .65rem var(--mono); color: rgba(0,0,0,.6); }

  .deck-zone { position: relative; width: 200px; height: 200px; }
  .deck-card { position: absolute; inset: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font: 700 1.4rem var(--sans); color: rgba(0,0,0,.6); cursor: grab; will-change: transform; user-select: none; touch-action: none; }
  .deck-card:active { cursor: grabbing; }

  #menu-overlay { position: fixed; inset: 0; background: #060609; z-index: 8600; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.4rem; visibility: hidden; }
  #menu-overlay a { color: var(--txt); text-decoration: none; font-size: clamp(2rem, 6vw, 4rem); font-weight: 800;
    text-transform: uppercase; letter-spacing: -0.02em; overflow: hidden; display: block; }
  #menu-overlay a span { display: block; transform: translateY(120%); }
  #menu-overlay .close-menu { position: absolute; top: 24px; right: 28px; }

  .tabs { display: flex; gap: 4px; position: relative; border: 1px solid var(--line); border-radius: 99px; padding: 5px; }
  .tabs button { position: relative; z-index: 2; border: 0; background: transparent; color: var(--dim);
    font: 500 .78rem var(--mono); padding: .6em 1.3em; border-radius: 99px; transition: color .3s; }
  .tabs button.on { color: #0a0a0e; }
  .tab-ind { position: absolute; top: 5px; bottom: 5px; left: 0; background: var(--acc); border-radius: 99px; z-index: 1; }

  .toast-zone { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
  .toast { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--acc);
    border-radius: 8px; padding: .7rem 1rem; font: 400 .72rem var(--mono); color: var(--txt); white-space: nowrap; overflow: hidden; }

  .skel { width: 78%; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem; display: flex; gap: 1rem; align-items: center; }
  .skel .sk-img { width: 74px; height: 74px; border-radius: 9px; flex: none; }
  .skel .sk-lines { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
  .skel .sk-line { height: 12px; border-radius: 6px; }
  .skel.loading .sk-img, .skel.loading .sk-line {
    background: linear-gradient(100deg, #1a1a26 40%, #262636 50%, #1a1a26 60%); background-size: 220% 100%;
    animation: shimmer 1.3s linear infinite; color: transparent; }
  .skel .sk-img { background: linear-gradient(140deg, var(--acc2), #241a66); }
  .skel .sk-line { background: rgba(255,255,255,.1); }
  .skel .sk-line span { font: 500 .72rem var(--mono); color: var(--txt); line-height: 12px; }
  .skel.loading .sk-line span { visibility: hidden; }

  .theme-stage { position: absolute; inset: 0; }
  .theme-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: .5rem; font: 600 1.05rem var(--sans); }
  .theme-panel small { font: 400 .68rem var(--mono); opacity: .55; }
  .theme-panel.dark { background: var(--bg2); color: var(--txt); }
  .theme-panel.light { background: #f2f1ec; color: #14141a; clip-path: circle(0% at 50% 82%); }
  .theme-btn { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; }

  /* ---------- Section L · platform natives ---------- */
  .support-badge { position: absolute; top: 12px; left: 14px; font: 400 .6rem var(--mono); border-radius: 99px; padding: .3em .7em; z-index: 4; }
  .support-badge.yes { color: var(--acc); border: 1px solid rgba(183,255,46,.4); }
  .support-badge.no { color: #ff8f6e; border: 1px solid rgba(255,143,110,.4); }

  .sda-list { display: flex; flex-direction: column; gap: .8rem; width: 76%; }
  .sda-item { border: 1px solid var(--line); border-radius: 8px; padding: .85rem 1.1rem; font: 400 .78rem var(--mono); color: var(--dim); background: rgba(255,255,255,.02); }
  @supports (animation-timeline: view()) {
    .sda-item { animation: sda-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
  @keyframes sda-in { from { opacity: 0; transform: translateY(34px) scale(.96); } }

  .corner-demo { width: 150px; height: 150px; background: linear-gradient(140deg, var(--acc), #4a6b00);
    display: flex; align-items: center; justify-content: center; font: 500 .68rem var(--mono); color: rgba(0,0,0,.6);
    transition: border-radius .6s cubic-bezier(.76,0,.24,1); }

  .car87 { width: 84%; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; border-radius: 10px; }
  .car87::-webkit-scrollbar { display: none; }
  .car87 .slide { flex: 0 0 78%; aspect-ratio: 16/8; border-radius: 10px; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center; font: 700 1.6rem var(--sans); color: rgba(0,0,0,.55); }
  .car-dots { display: flex; gap: 6px; justify-content: center; margin-top: .7rem; }
  .car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .3s, transform .3s; }
  .car-dots i.on { background: var(--acc); transform: scale(1.3); }

  .anchor-btn { position: relative; }
  .anchor-tip { position: fixed; background: var(--bg2); border: 1px solid rgba(183,255,46,.4); color: var(--txt);
    font: 400 .7rem var(--mono); padding: .55rem .8rem; border-radius: 8px; pointer-events: none; opacity: 0;
    transition: opacity .25s, transform .25s; transform: translateY(6px); z-index: 50; white-space: nowrap; }
  .anchor-tip.show { opacity: 1; transform: translateY(0); }

  .vtext {
    font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1;
    background:
      radial-gradient(60% 80% at 30% 30%, #b7ff2e 0%, transparent 60%),
      radial-gradient(70% 90% at 70% 60%, #7a5cff 0%, transparent 55%),
      radial-gradient(50% 70% at 50% 90%, #0ea5b7 0%, transparent 60%),
      linear-gradient(120deg, #14141f, #2a2438);
    background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: vtext-drift 7s ease-in-out infinite alternate;
  }
  @keyframes vtext-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

  .chapters { width: 82%; height: 230px; overflow-y: auto; scroll-snap-type: y mandatory; border-radius: 10px;
    border: 1px solid var(--line); scrollbar-width: none; }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters .chap { height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: .3rem; }
  .chapters .chap h4 { font-size: 2.2rem; font-weight: 800; }
  .chapters .chap p { font: 400 .7rem var(--mono); color: var(--dim); }
  .chap-dots { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 7px; }
  .chap-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .3s; }
  .chap-dots i.on { background: var(--acc); }

  /* ---------- Section M · heavy hitters ---------- */
  .fluid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
  .phys-box { position: absolute; inset: 0; overflow: hidden; }
  .phys-box .pl { position: absolute; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; text-transform: uppercase;
    cursor: grab; user-select: none; will-change: transform; touch-action: none; line-height: 1; }
  .phys-box .pl:active { cursor: grabbing; }

  .goo-trail-zone { position: absolute; inset: 0; filter: blur(9px) contrast(22); background: var(--bg2); }
  .goo-dot { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--acc); pointer-events: none; transform: translate(-50%,-50%); }

  .pan-zone { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
  .pan-zone:active { cursor: grabbing; }
  .pan-tile { position: absolute; width: 110px; height: 82px; border-radius: 10px; display: flex; align-items: flex-end;
    padding: 8px; font: 500 .62rem var(--mono); color: rgba(0,0,0,.55); will-change: transform; }

  .audio-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
  .audio-canvas { width: 260px; height: 110px; }

  /* ---------- Section N · commerce & connected ---------- */
  .cfg-ui { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: .5rem; justify-content: center; align-items: center; z-index: 5; flex-wrap: wrap; }
  .cfg-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
  .cfg-swatch.on { border-color: #fff; }
  .cfg-finish { font: 500 .62rem var(--mono); color: var(--txt); background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: .4em .9em; }
  .cfg-finish.on { border-color: var(--acc); color: var(--acc); }
  .cfg-price { position: absolute; top: 12px; right: 14px; font: 700 1.1rem var(--sans); color: var(--txt); z-index: 5; font-variant-numeric: tabular-nums; }

  model-viewer { width: 100%; height: 100%; --poster-color: transparent; }

  .quiz { width: 86%; }
  .quiz-q { font-size: .95rem; font-weight: 600; margin-bottom: .8rem; min-height: 2.4em; }
  .quiz-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
  .quiz-opts button { font: 400 .72rem var(--mono); color: var(--txt); background: rgba(255,255,255,.03);
    border: 1px solid var(--line); border-radius: 99px; padding: .6em 1.1em; transition: border-color .3s; }
  .quiz-opts button:hover { border-color: var(--acc2); }
  .quiz-result { display: none; }
  .quiz-result .qr-card { border: 1px solid rgba(122,92,255,.4); border-radius: 10px; padding: .8rem 1rem; margin-top: .6rem;
    font: 400 .74rem var(--mono); color: var(--txt); }
  .quiz-result .qr-card b { color: var(--acc); }

  .ghost-cursor { position: absolute; z-index: 6; pointer-events: none; will-change: transform; }
  .ghost-cursor svg { display: block; }
  .ghost-cursor span { font: 500 .58rem var(--mono); background: var(--acc2); color: #fff; border-radius: 4px; padding: .2em .5em; margin-left: 10px; }
  .presence-badge { position: absolute; top: 12px; right: 14px; font: 400 .62rem var(--mono); color: var(--txt);
    border: 1px solid var(--line); border-radius: 99px; padding: .35em .8em; z-index: 5; }
  .presence-badge b { color: var(--acc); }

  .mcp-chat { width: 86%; font: 400 .72rem var(--mono); display: flex; flex-direction: column; gap: .5rem; }
  .mcp-line { min-height: 1.3em; color: var(--txt); }
  .mcp-line.dim { color: var(--dim); }
  .mcp-tools { display: flex; gap: .4rem; flex-wrap: wrap; min-height: 1.8em; }
  .mcp-tool { font-size: .6rem; border: 1px solid rgba(122,92,255,.45); color: var(--acc2); border-radius: 5px; padding: .3em .6em; opacity: 0; }

  .genui { width: 86%; }
  .genui-msg { font: 400 .74rem var(--mono); color: var(--dim); min-height: 1.4em; margin-bottom: .7rem; }
  .genui-cards { display: flex; gap: .6rem; }
  .genui-card { flex: 1; border: 1px solid rgba(122,92,255,.35); border-radius: 10px; padding: .7rem; opacity: 0; transform: translateY(14px); }
  .genui-card .gi { height: 44px; border-radius: 6px; margin-bottom: .5rem; }
  .genui-card p { font: 400 .62rem var(--mono); color: var(--txt); line-height: 1.5; }
  .genui-card p b { color: var(--acc); }

  .seed-label { position: absolute; top: 12px; left: 14px; font: 400 .62rem var(--mono); color: var(--dim); z-index: 4; }

  /* ---------- Section O · fresh off the radar ---------- */
  .vt-badge-mini { view-transition-name: mm-annex-badge; width: 96px; height: 96px; border-radius: 16px;
    background: linear-gradient(140deg, var(--acc), #4a6b00); display: flex; align-items: center; justify-content: center;
    font: 700 .9rem var(--mono); color: rgba(0,0,0,.65); }
  .pro-rows { width: 84%; display: flex; flex-direction: column; gap: 1.1rem; }
  .pro-row { display: flex; align-items: center; gap: 1rem; }
  .pro-row .pr-tag { font: 400 .58rem var(--mono); color: var(--acc); border: 1px solid rgba(183,255,46,.35);
    border-radius: 5px; padding: .3em .55em; flex: none; width: 92px; text-align: center; }
  .pro-split { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
  .pro-scramble { font: 500 .95rem var(--mono); color: var(--txt); }
  .pro-morph svg { display: block; }
  .pro-morph path { fill: var(--acc2); }
  #rive-canvas { width: 100%; height: 100%; display: block; }

  /* ---------- Section P · frontier tech ---------- */
  .vfx-target { width: 70%; aspect-ratio: 16/8; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font: 800 2rem var(--sans); color: #fff; text-transform: uppercase; letter-spacing: -0.02em;
    background: linear-gradient(140deg, #7a5cff, #241a66); }
  .vfx-btns { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: .5rem; justify-content: center; z-index: 5; }
  .vfx-btns button { font: 500 .6rem var(--mono); color: var(--txt); background: rgba(10,10,14,.7); border: 1px solid rgba(255,255,255,.25);
    border-radius: 99px; padding: .5em 1em; }
  .vfx-btns button.on { border-color: var(--acc); color: var(--acc); }
  #spline-canvas, #webgpu-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .frontier-note { position: absolute; top: 12px; left: 14px; font: 400 .6rem var(--mono); color: var(--dim); z-index: 5; }

  /* ---------- Section Q · domain packs ---------- */
  .pricing { display: flex; gap: 12px; width: 90%; align-items: stretch; }
  .tier { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1rem; position: relative; }
  .tier.hot { border-color: rgba(183,255,46,.5); }
  .tier .t-name { font: 500 .68rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .15em; }
  .tier .t-price { font: 700 1.8rem var(--sans); margin: .5rem 0 .2rem; font-variant-numeric: tabular-nums; }
  .tier .t-price small { font-size: .8rem; color: var(--dim); font-weight: 400; }
  .tier .t-feat { font: 400 .64rem var(--mono); color: var(--dim); line-height: 1.9; }
  .tier .t-pop { position: absolute; top: -9px; right: 12px; font: 500 .55rem var(--mono); background: var(--acc); color: #0a0a0e;
    border-radius: 99px; padding: .3em .8em; }
  .bill-toggle { display: flex; align-items: center; gap: .6rem; font: 400 .68rem var(--mono); color: var(--dim); margin-bottom: 1.1rem; }
  .bill-toggle .sw { width: 40px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.12); border: 0; position: relative; }
  .bill-toggle .sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--acc);
    transition: transform .35s cubic-bezier(.76,0,.24,1); }
  .bill-toggle.annual .sw i { transform: translateX(18px); }
  .bill-toggle .save { color: var(--acc); }

  .swatch-demo { display: flex; gap: 1.1rem; width: 90%; align-items: center; }
  .sw-product { flex: 1.2; border-radius: 12px; aspect-ratio: 4/3.4; position: relative; overflow: hidden; }
  .sw-art { position: absolute; inset: 0; transition: opacity .5s; }
  .sw-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .9rem; background: linear-gradient(transparent, rgba(0,0,0,.72));
    font: 400 .66rem var(--mono); color: #fff; }
  .sw-meta b { display: block; font: 600 .9rem var(--sans); margin-bottom: .15rem; }
  .sw-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sw-chip { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; padding: 0; transition: border-color .25s, transform .25s; }
  .sw-chip.on { border-color: #fff; transform: scale(1.08); }

  .quote { width: 92%; font: 400 .7rem var(--mono); }
  .quote table { width: 100%; border-collapse: collapse; }
  .quote td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); color: var(--txt); }
  .quote td.qty { white-space: nowrap; }
  .quote td button { font: 500 .7rem var(--mono); color: var(--txt); background: rgba(255,255,255,.06); border: 0; border-radius: 5px;
    width: 20px; height: 20px; }
  .quote .q-x { color: #ff8f6e; background: transparent; width: auto; }
  .quote .totals { margin-top: .7rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; color: var(--dim); }
  .quote .totals .grand { font: 700 1.15rem var(--sans); color: var(--txt); }
  .quote .totals .disc { color: var(--acc); }
  .quote .q-add { margin-top: .8rem; }

  .mood { display: flex; gap: 1rem; width: 92%; }
  .mood-tray { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: flex-start; }
  .mood-chip { aspect-ratio: 1; border-radius: 8px; border: 0; padding: 0; position: relative; }
  .mood-chip span { position: absolute; bottom: 4px; left: 5px; font: 500 .5rem var(--mono); color: rgba(0,0,0,.6); }
  .mood-board { flex: 1.1; border: 1px dashed rgba(255,255,255,.2); border-radius: 12px; padding: 10px; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: flex-start; min-height: 200px; }
  .mood-board .placed { aspect-ratio: 1; border-radius: 8px; border: 0; padding: 0; }
  .mood-hint { font: 400 .6rem var(--mono); color: var(--dim); grid-column: 1 / -1; text-align: center; padding-top: 4.4rem; }

  .compare { width: 92%; font: 400 .68rem var(--mono); }
  .compare table { width: 100%; border-collapse: collapse; }
  .compare th { font: 600 .78rem var(--sans); color: var(--txt); text-align: left; padding: .45rem .5rem; }
  .compare td { padding: .45rem .5rem; border-top: 1px solid var(--line); color: var(--dim); transition: background .4s, color .4s; }
  .compare tr.diff td { background: rgba(183,255,46,.07); color: var(--txt); }
  .compare td .win { color: var(--acc); }

  .leadtime { width: 90%; display: flex; flex-direction: column; gap: .7rem; font: 400 .68rem var(--mono); }
  .lt-row { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
  .lt-name { color: var(--txt); }
  .lt-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
  .lt-bar i { display: block; height: 100%; background: var(--acc); width: 0%; transition: width 1s cubic-bezier(.76,0,.24,1); }
  .lt-pill { font-size: .58rem; border-radius: 99px; padding: .35em .8em; white-space: nowrap; transition: background .4s, color .4s; }
  .lt-pill.ok { background: rgba(183,255,46,.15); color: var(--acc); }
  .lt-pill.soon { background: rgba(255,215,110,.15); color: #ffd76e; }
  .lt-pill.wait { background: rgba(255,110,110,.13); color: #ff8f8f; }

  /* ---------- Sections S/T/U/V · full domain build ---------- */
  .spin-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
  .spin-canvas:active { cursor: grabbing; }

  .engrave { display: flex; gap: 1.1rem; width: 90%; align-items: center; }
  .engrave svg { flex: none; }
  .engrave .e-controls { flex: 1; display: flex; flex-direction: column; gap: .7rem; }
  .engrave input[type=text] { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px;
    color: var(--txt); font: 500 .8rem var(--mono); padding: .65rem .8rem; width: 100%; }
  .engrave .e-metals { display: flex; gap: .5rem; }
  .engrave .e-price { font: 700 1.2rem var(--sans); color: var(--txt); }
  .engrave .e-price small { color: var(--acc); font: 400 .62rem var(--mono); display: block; }
  #engrave-text-path { font: 600 11px var(--mono); letter-spacing: .18em; }

  .sizer { width: 86%; display: flex; flex-direction: column; gap: .9rem; align-items: center; font: 400 .68rem var(--mono); color: var(--dim); }
  .sizer .cal-row { width: 100%; display: flex; align-items: center; gap: .8rem; }
  .sizer .cal-card { height: 54px; border-radius: 6px; background: linear-gradient(140deg, #2a2a3a, #1a1a26);
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .58rem; flex: none; }
  .sizer input[type=range] { flex: 1; accent-color: var(--acc); }
  .size-stage { display: flex; align-items: center; gap: 1.4rem; }
  .size-ring { border: 3px solid var(--acc); border-radius: 50%; }
  .size-read { color: var(--txt); font-size: .8rem; line-height: 1.8; }
  .size-read b { color: var(--acc); }

  .prov { width: 88%; display: flex; flex-direction: column; gap: .6rem; }
  .prov-badge { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; cursor: pointer;
    font: 400 .7rem var(--mono); color: var(--txt); transition: border-color .3s; }
  .prov-badge:hover { border-color: rgba(183,255,46,.4); }
  .prov-badge .pb-head { display: flex; align-items: center; gap: .6rem; }
  .prov-badge .pb-ico { color: var(--acc); }
  .prov-badge .pb-detail { display: none; color: var(--dim); padding-top: .55rem; line-height: 1.7; }
  .prov-badge.open .pb-detail { display: block; }
  .prov-badge .pb-hash { color: var(--acc2); word-break: break-all; }

  .calc { width: 90%; font: 400 .7rem var(--mono); display: flex; flex-direction: column; gap: .9rem; }
  .calc .c-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
  .calc .c-row label { color: var(--dim); width: 82px; flex: none; }
  .calc select { background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: 8px;
    font: 400 .72rem var(--mono); padding: .5rem .7rem; }
  .calc input[type=range] { flex: 1; accent-color: var(--acc); }
  .calc .c-tiers { display: flex; gap: .4rem; }
  .calc .c-tiers button { font: 500 .62rem var(--mono); color: var(--dim); background: transparent;
    border: 1px solid var(--line); border-radius: 99px; padding: .45em 1em; }
  .calc .c-tiers button.on { border-color: var(--acc); color: var(--acc); }
  .calc .c-out { border-top: 1px solid var(--line); padding-top: .8rem; color: var(--txt); line-height: 2; }
  .calc .c-out .c-total { font: 700 1.3rem var(--sans); }
  .calc .c-out .c-total small { font: 400 .62rem var(--mono); color: var(--dim); }

  .specsheet { width: 90%; display: flex; gap: 1rem; align-items: flex-start; font: 400 .66rem var(--mono); }
  .specsheet .ss-doc { flex: 1.4; background: #f4f2ec; color: #1a1a1a; border-radius: 8px; padding: 1rem 1.1rem; line-height: 1.8; }
  .specsheet .ss-doc h4 { font: 800 .95rem var(--sans); letter-spacing: -0.01em; }
  .specsheet .ss-doc .ss-brand { font: 700 .55rem var(--mono); letter-spacing: .3em; color: #777; }
  .specsheet .ss-doc td { padding: .1rem .6rem .1rem 0; vertical-align: top; }
  .specsheet .ss-doc td:first-child { color: #888; }
  .specsheet .ss-side { flex: 1; display: flex; flex-direction: column; gap: .6rem; }
  #print-sheet { display: none; }
  @media print {
    body > *:not(#print-sheet) { display: none !important; }
    #print-sheet { display: block !important; color: #000; background: #fff; font: 12px/1.7 monospace; padding: 24px; }
    #print-sheet h1 { font: 800 22px system-ui; }
  }

  .gate { width: 82%; position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .gate table { width: 100%; border-collapse: collapse; font: 400 .68rem var(--mono); }
  .gate td, .gate th { padding: .55rem .8rem; border-bottom: 1px solid var(--line); color: var(--txt); text-align: left; }
  .gate .g-trade { color: var(--acc); }
  .gate .g-veil { position: absolute; inset: 0; backdrop-filter: blur(7px); background: rgba(10,10,14,.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; transition: opacity .6s, visibility .6s; }
  .gate .g-veil.off { opacity: 0; visibility: hidden; }
  .gate .g-lock { font-size: 1.6rem; }

  .gantt { width: 92%; font: 400 .64rem var(--mono); }
  .gantt .g-weeks { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--line);
    color: var(--dim); padding-bottom: .3rem; margin-bottom: .6rem; }
  .gantt .g-row { display: grid; grid-template-columns: 88px 1fr; gap: .6rem; align-items: center; margin-bottom: .55rem; }
  .gantt .g-lane { position: relative; height: 16px; }
  .gantt .g-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; cursor: pointer; transition: filter .3s; }
  .gantt .g-bar:hover { filter: brightness(1.3); }
  .gantt .g-today { position: absolute; top: -6px; bottom: -6px; width: 2px; background: #fff; opacity: .7; }
  .gantt .g-detail { min-height: 1.6em; color: var(--dim); padding-top: .4rem; }

  .dims { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
  .dims svg { display: block; }
  .dims .d-btns { display: flex; gap: .4rem; }
  .dims .d-btns button { font: 500 .62rem var(--mono); color: var(--dim); background: transparent;
    border: 1px solid var(--line); border-radius: 99px; padding: .45em 1em; }
  .dims .d-btns button.on { border-color: var(--acc); color: var(--acc); }
  .dims .dim-line { stroke: var(--acc); stroke-width: 1; }
  .dims .dim-txt { fill: var(--acc); font: 600 9px var(--mono); }
  .dims .clr-zone { fill: rgba(122,92,255,.12); stroke: rgba(122,92,255,.6); stroke-dasharray: 4 4; }

  .samplereq { width: 86%; font: 400 .7rem var(--mono); }
  .samplereq .sr-step { display: none; }
  .samplereq .sr-step.on { display: block; }
  .samplereq .sr-picks { display: flex; gap: .5rem; margin: .7rem 0; }
  .samplereq .sr-picks button { width: 40px; height: 40px; border-radius: 8px; border: 2px solid transparent; padding: 0; }
  .samplereq .sr-picks button.on { border-color: #fff; }
  .samplereq input { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px;
    color: var(--txt); font: 400 .72rem var(--mono); padding: .55rem .7rem; width: 100%; margin: .25rem 0; }
  .samplereq .sr-ok { color: var(--acc); line-height: 1.9; }

  .volmx { width: 88%; font: 400 .68rem var(--mono); }
  .volmx table { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
  .volmx td, .volmx th { padding: .5rem .6rem; border-bottom: 1px solid var(--line); color: var(--dim); text-align: left; transition: background .3s, color .3s; }
  .volmx tr.on td { background: rgba(183,255,46,.08); color: var(--txt); }
  .volmx .vm-row { display: flex; align-items: center; gap: .8rem; color: var(--dim); }
  .volmx input[type=range] { flex: 1; accent-color: var(--acc); }
  .volmx .vm-total { color: var(--txt); font: 700 1rem var(--sans); }
  .volmx .vm-nudge { color: var(--acc); min-height: 1.4em; }

  .room { position: relative; width: 84%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
    background: linear-gradient(180deg, #232331 55%, #33323e 55.2%, #2a2933 100%); }
  .room .rm-obj { position: absolute; border-radius: 6px; }
  .hotspot { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgba(183,255,46,.9);
    border: 0; padding: 0; transform: translate(-50%,-50%); }
  .hotspot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(183,255,46,.6); animation: hs-pulse 1.6s ease-out infinite; }
  @keyframes hs-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
  .rm-pop { position: absolute; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
    padding: .7rem .9rem; font: 400 .66rem var(--mono); color: var(--txt); width: 150px; opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s; transform: translateY(6px); z-index: 6; }
  .rm-pop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .rm-pop b { display: block; }
  .rm-pop .rp-price { color: var(--acc); }
  .rm-pop button { margin-top: .4rem; font: 500 .6rem var(--mono); color: #0a0a0e; background: var(--acc); border: 0; border-radius: 99px; padding: .45em 1em; }

  .assembly { display: flex; flex-direction: column; gap: .8rem; align-items: center; width: 88%; font: 400 .66rem var(--mono); color: var(--dim); }
  .assembly .as-ctrl { display: flex; gap: .6rem; align-items: center; }
  .assembly .as-parts { display: flex; gap: .9rem; }
  .assembly .as-parts span.done { color: var(--acc); text-decoration: line-through; }

  .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 78px; gap: 10px; width: 90%; }
  .bento .b-card { border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; font: 400 .62rem var(--mono);
    color: var(--dim); transition: transform .3s, border-color .3s; overflow: hidden; position: relative; }
  .bento .b-card:hover { transform: translateY(-3px); border-color: rgba(183,255,46,.4); }
  .bento .b-card b { display: block; font: 600 .8rem var(--sans); color: var(--txt); margin-bottom: .2rem; }
  .bento .b-tall { grid-row: span 2; } .bento .b-wide { grid-column: span 2; }
  .bento .b-num { font: 700 1.6rem var(--sans); color: var(--acc); }

  .intwall { width: 90%; }
  .intwall .iw-filters { display: flex; gap: .4rem; margin-bottom: .8rem; }
  .intwall .iw-filters button { font: 500 .6rem var(--mono); color: var(--dim); background: transparent;
    border: 1px solid var(--line); border-radius: 99px; padding: .45em 1em; }
  .intwall .iw-filters button.on { border-color: var(--acc); color: var(--acc); }
  .intwall .iw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .intwall .iw-chip { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .4rem; text-align: center;
    font: 600 .68rem var(--sans); color: var(--txt); }

  .clog { width: 88%; font: 400 .66rem var(--mono); display: flex; flex-direction: column; gap: .6rem; max-height: 230px; overflow: hidden; }
  .clog .cl-row { border-left: 2px solid var(--line); padding: .1rem 0 .1rem .8rem; color: var(--dim); }
  .clog .cl-row b { color: var(--txt); font-weight: 500; }
  .clog .cl-tag { font-size: .55rem; border-radius: 4px; padding: .2em .5em; margin-right: .4em; }
  .clog .t-new { background: rgba(183,255,46,.15); color: var(--acc); }
  .clog .t-fix { background: rgba(122,92,255,.18); color: var(--acc2); }
  .clog .t-perf { background: rgba(255,215,110,.15); color: #ffd76e; }

  .playground { width: 90%; font: 400 .68rem var(--mono); }
  .playground textarea { width: 100%; height: 74px; background: rgba(255,255,255,.04); border: 1px solid var(--line);
    border-radius: 10px; color: var(--txt); font: 400 .72rem var(--mono); padding: .7rem .8rem; resize: none; }
  .playground .pg-row { display: flex; gap: 1rem; align-items: center; margin-top: .6rem; color: var(--dim); flex-wrap: wrap; }
  .playground .pg-row b { color: var(--acc); font-weight: 500; }
  .playground .pg-out { margin-top: .7rem; min-height: 3em; color: var(--txt); line-height: 1.7; border-top: 1px solid var(--line); padding-top: .7rem; }

  .fin { text-align: center; }
  .fin .f-price { font: 700 2.2rem var(--sans); }
  .fin .f-per { font: 400 .72rem var(--mono); color: var(--acc); margin: .4rem 0 1rem; }
  #fin-modal { position: fixed; inset: 0; background: rgba(6,6,9,.8); z-index: 8700; display: none;
    align-items: center; justify-content: center; }
  #fin-modal.show { display: flex; }
  #fin-modal .fm-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.8rem;
    width: min(360px, 90vw); font: 400 .72rem var(--mono); color: var(--txt); }
  #fin-modal .fm-row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); }
  #fin-modal .fm-row b { color: var(--acc); }
  #fin-modal .fm-note { color: var(--dim); font-size: .62rem; margin-top: .8rem; line-height: 1.7; }

  /* ---------- Section W · DAF pack ---------- */
  .daf-card { width: 84%; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; font: 400 .7rem var(--mono); color: var(--txt); }
  .daf-card .dc-name { font: 600 .95rem var(--sans); }
  .daf-card .dc-price { font: 700 1.3rem var(--sans); margin: .3rem 0; }
  .daf-card .dc-why { color: var(--acc); cursor: pointer; }
  .daf-card .dc-break { display: none; border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; color: var(--dim); line-height: 1.9; }
  .daf-card.open .dc-break { display: block; }
  .daf-card .dc-learn { display: inline-block; margin-top: .4rem; font-size: .62rem; border: 1px solid rgba(183,255,46,.4); color: var(--acc); border-radius: 99px; padding: .35em .9em; }

  .lifecycle { width: 90%; }
  .lc-stages { display: flex; gap: .4rem; margin-bottom: .9rem; flex-wrap: wrap; }
  .lc-stages button { font: 500 .62rem var(--mono); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: .5em 1em; }
  .lc-stages button.on { border-color: var(--acc); color: var(--acc); }
  .lc-panel { font: 400 .7rem var(--mono); color: var(--txt); line-height: 1.8; min-height: 5em; }
  .lc-panel b { color: var(--acc); }

  .lifeware { width: 78%; border: 1px solid rgba(183,255,46,.4); border-radius: 14px; padding: 1.3rem 1.4rem; text-align: center; }
  .lifeware .lw-price { font: 800 2.4rem var(--sans); }
  .lifeware .lw-once { font: 500 .72rem var(--mono); color: var(--acc); letter-spacing: .2em; text-transform: uppercase; }
  .lifeware ul { list-style: none; margin-top: .9rem; font: 400 .68rem var(--mono); color: var(--dim); line-height: 2.1; }

  .install-flow { width: 88%; font: 400 .68rem var(--mono); color: var(--txt); }
  .install-flow .if-steps { display: flex; align-items: center; gap: .5rem; margin: .9rem 0; flex-wrap: wrap; }
  .install-flow .if-step { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; flex: 1; min-width: 90px; text-align: center; color: var(--dim); transition: border-color .4s, color .4s; }
  .install-flow .if-step.on { border-color: var(--acc); color: var(--txt); }
  .install-flow .if-arrow { color: var(--dim); }

  .brief { width: 88%; font: 400 .7rem var(--mono); color: var(--txt); display: flex; flex-direction: column; gap: .8rem; }
  .brief .b-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
  .brief .b-progress i { display: block; height: 100%; background: var(--acc); width: 10%; transition: width .5s cubic-bezier(.76,0,.24,1); }
  .brief select, .brief input[type=range] { accent-color: var(--acc); }
  .brief select { background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; font: 400 .7rem var(--mono); padding: .5rem .7rem; }
  .brief .b-row { display: flex; align-items: center; gap: .8rem; }
  .brief .b-row label { color: var(--dim); width: 74px; flex: none; }
  .brief a.btn { text-decoration: none; text-align: center; }

  .learnhub { width: 90%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .learnhub .lh-tile { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; font: 400 .64rem var(--mono); color: var(--dim);
    transition: border-color .3s, transform .3s; cursor: pointer; }
  .learnhub .lh-tile:hover { border-color: rgba(183,255,46,.45); transform: translateY(-2px); }
  .learnhub .lh-tile b { display: block; font: 600 .8rem var(--sans); color: var(--txt); margin-bottom: .25rem; }
  .learnhub .lh-tile span { color: var(--acc); }

  /* ---------- Section Y · next wave vol. 1 ---------- */
  #palette-overlay { position: fixed; inset: 0; background: rgba(6,6,9,.75); z-index: 8900; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; }
  #palette-overlay.show { display: flex; }
  .palette { width: min(520px, 92vw); background: var(--bg2); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .palette input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--txt);
    font: 500 1rem var(--sans); padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
  .palette .p-list { max-height: 46vh; overflow-y: auto; }
  .palette .p-item { display: flex; gap: .8rem; padding: .7rem 1.2rem; font: 400 .78rem var(--mono); color: var(--dim); cursor: pointer; align-items: baseline; }
  .palette .p-item .pn { color: var(--acc); flex: none; width: 34px; }
  .palette .p-item.sel, .palette .p-item:hover { background: rgba(183,255,46,.08); color: var(--txt); }
  .palette .p-hint { padding: .5rem 1.2rem; font: 400 .6rem var(--mono); color: var(--dim); border-top: 1px solid var(--line); }

  .fc-outer { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
  .fc-outer::-webkit-scrollbar { display: none; }
  /* The curtain only works if the reveal is pinned to the SCROLLPORT while the page slides off
     it. `position: absolute` inside a scrolling container positions against the CONTENT box, so
     the two moved together by the identical delta and the footer was never uncovered — past a
     point the demo just went blank. The card was even tagged "CSS sticky" while not using it.
     Sticky is the technique the card claims and the one that works: the reveal starts pinned at
     the bottom, hidden under a full-height page (z-index 2 over 1), and scrolling lifts the page
     off it. The margin-bottom that used to reserve the space is gone — the reveal is in flow now
     and occupies its own. */
  .fc-page { position: relative; z-index: 2; background: linear-gradient(180deg, var(--bg2), #16161f); min-height: 100%;
    display: flex; align-items: center; justify-content: center; font: 400 .7rem var(--mono); color: var(--dim);
    border-bottom: 1px solid var(--line); }
  .fc-reveal { position: sticky; bottom: 0; height: 46%; min-height: 90px; background: var(--acc); color: #0a0a0e;
    display: flex; align-items: center; justify-content: center; font: 800 1.3rem var(--sans); z-index: 1; }

  .island { background: #000; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: var(--txt);
    display: flex; align-items: center; justify-content: center; gap: .6rem; overflow: hidden;
    font: 500 .72rem var(--mono); white-space: nowrap; will-change: width, height, border-radius; }
  .island .isl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }

  .flap-row { display: flex; gap: 6px; }
  .flap { width: 34px; height: 48px; background: #16161f; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font: 700 1.5rem var(--mono); color: var(--txt);
    perspective: 200px; position: relative; overflow: hidden; }
  .flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); }
  .flap span { display: block; will-change: transform; }

  .scrim-demo { position: absolute; inset: 0; overflow: hidden; }
  .scrim-content { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; will-change: transform; }
  .scrim-content .sc-row { flex: none; height: 40px; border-radius: 8px; background: linear-gradient(90deg, #232337, #1a1a28);
    display: flex; align-items: center; padding: 0 12px; font: 400 .62rem var(--mono); color: var(--dim); }
  .scrim { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 3; }
  .scrim.top { top: 0; height: 34%; }
  .scrim.bot { bottom: 0; height: 34%; }
  .scrim .s-l { position: absolute; inset: 0; }
  .scrim.top .s-l1 { backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(#000 30%, transparent 70%); mask-image: linear-gradient(#000 30%, transparent 70%); }
  .scrim.top .s-l2 { backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 10%, transparent 45%); mask-image: linear-gradient(#000 10%, transparent 45%); }
  .scrim.top .s-l3 { backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(#000 0%, transparent 25%); mask-image: linear-gradient(#000 0%, transparent 25%); }
  .scrim.bot .s-l1 { backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent 30%, #000 70%); mask-image: linear-gradient(transparent 30%, #000 70%); }
  .scrim.bot .s-l2 { backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(transparent 55%, #000 90%); mask-image: linear-gradient(transparent 55%, #000 90%); }
  .scrim.bot .s-l3 { backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(transparent 75%, #000 100%); mask-image: linear-gradient(transparent 75%, #000 100%); }

  .galaxy-ui { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 1rem; justify-content: center; z-index: 5;
    font: 400 .6rem var(--mono); color: var(--dim); align-items: center; }
  .galaxy-ui input { width: 90px; accent-color: var(--acc); }

  .organic-svg { filter: drop-shadow(0 0 24px rgba(122,92,255,.35)); }

  .dirfill { position: relative; overflow: hidden; font: 500 .85rem var(--mono); color: var(--txt);
    background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 1.1em 2.4em; }
  .dirfill .df-fill { position: absolute; inset: 0; background: var(--acc); transform: translateY(101%); }
  .dirfill span { position: relative; z-index: 2; transition: color .25s; }
  .dirfill:hover span { color: #0a0a0e; }
  .dock { display: flex; gap: 8px; align-items: flex-end; height: 64px; }
  .dock i { display: block; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--acc2), #241a66);
    transform-origin: 50% 100%; will-change: transform; }
  .dock i:nth-child(even) { background: linear-gradient(150deg, var(--acc), #3a6600); }

  /* ---------- Section Z · next wave vol. 2 ---------- */
  .shatter-canvas, .phys-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .phys-canvas { image-rendering: auto; }

  .portal-outer { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
  .portal-outer::-webkit-scrollbar { display: none; }
  .portal-track { height: 320%; position: relative; }
  .portal-stick { position: sticky; top: 0; height: 33%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .portal-img { width: 42%; aspect-ratio: 16/10; border-radius: 14px; will-change: transform, border-radius;
    background: radial-gradient(100% 90% at 30% 25%, #ffd76e 0%, transparent 55%), radial-gradient(120% 100% at 70% 75%, #7a5cff 0%, #14141f 70%); }
  .portal-next { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font: 800 1.6rem var(--sans); color: var(--txt); opacity: 0; }

  .obs-box { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
  .obs-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font: 800 1.8rem var(--sans); color: rgba(0,0,0,.6); }
  .mp-track { position: absolute; bottom: 8px; left: 10px; width: 130px; z-index: 5; opacity: .9; }
  .mp-dot { fill: var(--acc); }

  .shop-demo { width: 86%; position: relative; font: 400 .68rem var(--mono); color: var(--txt); }
  .shop-cart { position: absolute; top: -4px; right: 0; font-size: 1.2rem; }
  .shop-cart .sc-badge { position: absolute; top: -7px; right: -10px; background: var(--acc); color: #0a0a0e;
    font: 700 .55rem var(--mono); border-radius: 99px; padding: .2em .5em; }
  .shop-prod { display: flex; gap: .8rem; align-items: center; margin-top: 1.4rem; }
  .shop-thumb { width: 54px; height: 54px; border-radius: 10px; background: linear-gradient(150deg, #b7ff2e, #3a6600); flex: none; }
  .shop-drop { margin-top: 1rem; color: var(--dim); }
  .shop-stock { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: .4rem; overflow: hidden; }
  .shop-stock i { display: block; height: 100%; width: 62%; background: #ff8f6e; transition: width .8s; }
  .fly-chip { position: absolute; width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(150deg, #b7ff2e, #3a6600); z-index: 9; pointer-events: none; }
  .confetti-bit { position: absolute; width: 6px; height: 9px; z-index: 9; pointer-events: none; }

  .natives { width: 90%; display: flex; flex-direction: column; gap: 1rem; font: 400 .66rem var(--mono); color: var(--dim); }
  .natives .nv-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
  .natives .nv-tag { width: 118px; flex: none; color: var(--txt); }
  .natives .nv-ok { font-size: .58rem; border-radius: 99px; padding: .25em .7em; }
  .natives .nv-ok.y { color: var(--acc); border: 1px solid rgba(183,255,46,.4); }
  .natives .nv-ok.n { color: #ff8f6e; border: 1px solid rgba(255,143,110,.4); }
  .sib-row { display: flex; gap: 6px; }
  .sib-row i { display: block; width: 16px; height: 26px; border-radius: 4px; background: var(--acc2); transition: transform .3s; transition-delay: calc(var(--i, 0) * 45ms); }
  .sib-row:hover i { transform: translateY(-10px); }
  #nv-pop { background: var(--bg2); border: 1px solid rgba(183,255,46,.4); color: var(--txt); border-radius: 10px;
    padding: .8rem 1rem; font: 400 .7rem var(--mono); }
  details.nv-details { color: var(--txt); }
  details.nv-details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s, content-visibility .5s; transition-behavior: allow-discrete; }
  details.nv-details[open]::details-content { block-size: auto; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

  .dio-wrap { perspective: 700px; }
  .dio-scene { position: relative; width: 190px; height: 150px; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-38deg); will-change: transform; }
  .dio-scene div { position: absolute; transform-style: preserve-3d; }
  .dio-floor { inset: 0; background: #232331; border: 1px solid rgba(255,255,255,.12); }
  .dio-wall-n { left: 0; right: 0; top: 0; height: 70px; background: #1a1a26; transform-origin: top; transform: rotateX(-90deg); border: 1px solid rgba(255,255,255,.08); }
  .dio-wall-w { top: 0; bottom: 0; left: 0; width: 70px; background: #16161f; transform-origin: left; transform: rotateY(90deg); border: 1px solid rgba(255,255,255,.08); }
  .dio-desk { left: 34px; top: 44px; width: 76px; height: 40px; background: #8a6a48; transform: translateZ(26px); border-radius: 3px; box-shadow: 0 26px 8px rgba(0,0,0,.4); }
  .dio-chair { left: 68px; top: 96px; width: 26px; height: 26px; background: #55555f; border-radius: 50%; transform: translateZ(18px); }
  .dio-lamp { left: 140px; top: 20px; width: 14px; height: 14px; background: var(--acc); border-radius: 50%; transform: translateZ(46px); box-shadow: 0 0 26px rgba(183,255,46,.8); }
  .dio-rug { left: 50px; top: 80px; width: 84px; height: 52px; background: rgba(122,92,255,.35); border-radius: 6px; transform: translateZ(1px); }

  #am-dialog { position: fixed; z-index: 8950; background: var(--bg2); border: 1px solid rgba(183,255,46,.4); border-radius: 16px;
    padding: 1.4rem 1.6rem; width: min(320px, 88vw); color: var(--txt); font: 400 .74rem var(--mono); display: none; }
  #am-dialog h5 { font: 700 .95rem var(--sans); margin-bottom: .5rem; }
  #am-backdrop { position: fixed; inset: 0; background: rgba(6,6,9,.6); z-index: 8940; display: none; }

  .think-chat { width: 88%; font: 400 .7rem var(--mono); }
  .think-block { border: 1px solid rgba(122,92,255,.35); border-radius: 10px; margin: .6rem 0; overflow: hidden; }
  .think-head { padding: .5rem .8rem; color: var(--acc2); cursor: pointer; display: flex; justify-content: space-between; }
  .think-body { padding: 0 .8rem .6rem; color: var(--dim); line-height: 1.8; display: none; }
  .think-block.open .think-body { display: block; }
  .cite { display: inline-block; font-size: .58rem; color: var(--acc2); border: 1px solid rgba(122,92,255,.45);
    border-radius: 4px; padding: 0 .4em; margin: 0 .15em; cursor: pointer; position: relative; }
  .cite-card { position: absolute; bottom: 130%; left: 0; width: 190px; background: var(--bg2); border: 1px solid var(--line);
    border-radius: 8px; padding: .6rem .7rem; color: var(--dim); display: none; z-index: 8; }
  .cite:hover .cite-card { display: block; }

  /* ---------- Section AA · heavy tech ---------- */
  .heavy { width: 90%; font: 400 .7rem var(--mono); color: var(--txt); display: flex; flex-direction: column; gap: .7rem; }
  .heavy .hv-status { color: var(--dim); min-height: 1.4em; }
  .heavy .hv-status b { color: var(--acc); }
  .heavy input[type=text], .heavy textarea { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px;
    color: var(--txt); font: 400 .72rem var(--mono); padding: .6rem .8rem; width: 100%; }
  .heavy textarea { height: 58px; resize: none; }
  .heavy table { width: 100%; border-collapse: collapse; }
  .heavy td, .heavy th { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; color: var(--dim); }
  .heavy th { color: var(--txt); }
  .hv-hits { display: flex; flex-direction: column; gap: .4rem; }
  .hv-hit { border: 1px solid rgba(122,92,255,.35); border-radius: 8px; padding: .55rem .8rem; display: flex; justify-content: space-between; }
  .hv-hit b { color: var(--acc); font-weight: 500; }
  #tryon-video { display: none; }
  #tryon-canvas, #splat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ---------- expansion wave 175–188 ---------- */
  .attract { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .at-orb { width: 28px; height: 28px; border-radius: 50%; background: var(--acc); opacity: 0; }
  .glow-wrap { position: relative; width: 56%; aspect-ratio: 16/9; }
  .glow-back, .glow-front { position: absolute; inset: 0; border-radius: 14px;
    background: linear-gradient(120deg, #7a5cff, #0ea5b7, #b7ff2e, #7a5cff); background-size: 300% 300%;
    animation: glow-shift 7s ease-in-out infinite alternate; }
  .glow-back { filter: blur(46px) saturate(1.4); transform: scale(1.35); opacity: .8; }
  @keyframes glow-shift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
  .readstat { text-align: center; }
  .rs-big { font: 800 3.6rem var(--sans); font-variant-numeric: tabular-nums; }
  .rs-sub { font: 400 .68rem var(--mono); color: var(--dim); margin-top: .4rem; }
  .selbox { width: 80%; max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px;
    padding: 1rem 1.1rem; font: 400 .8rem/1.9 var(--sans); color: var(--dim);
    scrollbar-width: thin; scrollbar-color: var(--acc) rgba(255,255,255,.06); }
  .selbox::-webkit-scrollbar { width: 6px; }
  .selbox::-webkit-scrollbar-thumb { background: var(--acc); border-radius: 3px; }
  .selbox::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
  .selbox ::selection, .selbox::selection { background: var(--acc2); color: #fff; }
  .selbox b { color: var(--txt); }
  .strokefill { position: relative; font: 900 clamp(2.6rem, 7vw, 4.6rem) var(--sans); letter-spacing: -0.02em; }
  .sf-outline { -webkit-text-stroke: 1.5px var(--txt); color: transparent; }
  .sf-fill { position: absolute; inset: 0; color: var(--acc); clip-path: inset(0 100% 0 0); }
  .fontflick { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: .04em; }
  .fontflick span { display: inline-block; cursor: default; }
  .anno-wrap { position: relative; }
  .anno-text { font: 500 1.15rem/1.9 var(--sans); text-align: center; }
  .anno-svg { position: absolute; inset: -14px 0 auto 0; width: 100%; pointer-events: none; }
  .anno-svg path { stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; }
  .colspeed { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
  .colspeed::-webkit-scrollbar { display: none; }
  .cs-inner { display: flex; gap: 10px; padding: 10px; height: 300%; }
  .cs-col { flex: 1; display: flex; flex-direction: column; gap: 10px; will-change: transform; }
  .cs-col div { flex: none; height: 88px; border-radius: 10px; }
  .loopscroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
  .loopscroll::-webkit-scrollbar { display: none; }
  .ls-item { height: 96px; margin: 10px; border-radius: 10px; display: flex; align-items: center; padding: 0 16px;
    font: 700 1.2rem var(--sans); color: rgba(0,0,0,.55); }
  .prevrows { width: 88%; }
  .prevrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line);
    padding: .7rem .2rem; font: 600 1rem var(--sans); color: var(--txt); cursor: pointer; }
  .prevrow canvas { width: 92px; height: 52px; border-radius: 6px; opacity: 0; transition: opacity .3s; }
  .prevrow:hover canvas { opacity: 1; }
  .ctxzone { flex: 1; aspect-ratio: 4/3; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font: 400 .68rem var(--mono); color: var(--dim); border: 1px solid var(--line);
    background: linear-gradient(150deg, #1c1c2c, #12121c); cursor: none; }
  #ctx-label { position: fixed; z-index: 9998; pointer-events: none; background: var(--acc); color: #0a0a0e;
    font: 700 .6rem var(--mono); border-radius: 99px; padding: .5em 1em; opacity: 0; transform: translate(-50%, -50%); }
  .ripplebtn { position: relative; overflow: hidden; }
  .ripplebtn .rp { position: absolute; border-radius: 50%; background: rgba(183,255,46,.35); transform: translate(-50%,-50%) scale(0); pointer-events: none; }
  .iconbtn { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--txt); display: flex; align-items: center; justify-content: center; }
  .iconbtn.liked { color: #ff6e9c; }
  .holdbtn { position: relative; background: transparent; border: 0; color: var(--txt); display: flex; flex-direction: column; align-items: center; gap: .6rem; font: 500 .7rem var(--mono); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }

  /* ---------- expansion wave 189–205 ---------- */
  .shimres { width: 88%; font: 400 .78rem/1.9 var(--mono); color: var(--txt); }
  .shimres .sh-line { min-height: 1.9em; border-radius: 5px; }
  .shimres .sh-line.wait { background: linear-gradient(100deg, #1a1a26 40%, #262636 50%, #1a1a26 60%); background-size: 220% 100%; animation: shimmer 1.2s linear infinite; color: transparent; margin-bottom: .4rem; }
  .stickydemo { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
  .stickydemo::-webkit-scrollbar { display: none; }
  .sticky-bar { position: sticky; top: 0; padding: .7rem 1rem; font: 600 .8rem var(--sans); color: var(--txt);
    background: rgba(18,18,26,.6); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; z-index: 2; transition: .3s; }
  @supports (container-type: scroll-state) {
    .stickydemo { container-type: scroll-state; }
    @container scroll-state(stuck: top) { .sticky-bar { background: rgba(183,255,46,.14); border-bottom-color: rgba(183,255,46,.5); color: #b7ff2e; } }
  }
  .sticky-filler { height: 150%; padding: 1rem; font: 400 .68rem/2 var(--mono); color: var(--dim); }
  .hascheck { font: 400 .74rem var(--mono); color: var(--txt); display: flex; gap: .6rem; align-items: center; cursor: pointer; }
  .hascheck input { accent-color: var(--acc); width: 16px; height: 16px; }
  .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }
  .hasbtn { opacity: .35; pointer-events: none; transition: .3s; }
  .cqwrap { container-type: inline-size; width: 420px; max-width: 90%; }
  .cqcard { display: flex; gap: .9rem; border: 1px solid var(--line); border-radius: 12px; padding: .9rem; align-items: center; }
  .cqcard .cq-img { width: 84px; height: 64px; border-radius: 8px; background: linear-gradient(150deg, #b7ff2e, #3a6600); flex: none; }
  .cqcard .cq-body b { display: block; font: 700 .95rem var(--sans); color: var(--txt); }
  .cqcard .cq-body span { font: 400 .62rem var(--mono); color: var(--dim); }
  @container (max-width: 300px) {
    .cqcard { flex-direction: column; text-align: center; }
    .cqcard .cq-img { width: 100%; }
  }
  .twdemo h4 { text-wrap: balance; transition: .2s; }
  .twdemo.off h4 { text-wrap: initial; }

  /* ---------- expansion wave 206–227 ---------- */
  .ordtrack { width: 88%; font: 400 .68rem var(--mono); }
  .ot-step { display: flex; gap: .8rem; align-items: center; padding: .45rem 0; color: var(--dim); }
  .ot-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex: none; transition: .4s; }
  .ot-step.done { color: var(--txt); }
  .ot-step.done .ot-dot { background: var(--acc); border-color: var(--acc); }
  .ot-step.now .ot-dot { border-color: var(--acc); animation: hs-pulse 1.4s ease-out infinite; }
  .bookslots { width: 88%; font: 400 .66rem var(--mono); }
  .bs-days { display: flex; gap: .4rem; margin-bottom: .8rem; }
  .bs-days button, .bs-times button { font: 500 .62rem var(--mono); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: .5em .9em; }
  .bs-days button.on, .bs-times button.on { border-color: var(--acc); color: var(--acc); }
  .bs-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .bs-confirm { margin-top: .8rem; color: var(--acc); min-height: 1.4em; }
  .giftwrap { width: 88%; font: 400 .66rem var(--mono); color: var(--txt); }
  .gw-opts { display: flex; gap: .5rem; margin: .6rem 0; }
  .gw-box { width: 52px; height: 52px; border-radius: 8px; border: 2px solid transparent; padding: 0; }
  .gw-box.on { border-color: #fff; }
  .gw-note { width: 100%; background: rgba(255,255,255,.04); border: 1px dashed var(--line); border-radius: 8px; color: var(--txt); font: italic 400 .78rem Georgia, serif; padding: .6rem .8rem; }
  .ugcwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 88%; }
  .ugc-tile { aspect-ratio: 1; border-radius: 8px; position: relative; overflow: hidden; }
  .ugc-tile span { position: absolute; inset: auto 0 0 0; padding: .3rem .4rem; font: 500 .55rem var(--mono); color: #fff; background: rgba(0,0,0,.55); opacity: 0; transition: .3s; }
  .ugc-tile:hover span { opacity: 1; }
  .stonecmp { display: flex; gap: 1rem; width: 88%; justify-content: center; }
  .stone { text-align: center; font: 400 .6rem var(--mono); color: var(--dim); cursor: pointer; }
  .stone canvas { width: 74px; height: 74px; border-radius: 50%; }
  .stone.on { color: var(--acc); }
  .careritual { width: 84%; font: 400 .68rem var(--mono); color: var(--dim); }
  .cr-step { display: flex; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
  .cr-step b { color: var(--acc); font-weight: 500; flex: none; }
  .punchlist { width: 88%; font: 400 .68rem var(--mono); }
  .pl-item { display: flex; gap: .6rem; padding: .4rem 0; color: var(--dim); align-items: center; }
  .pl-item.done { color: var(--txt); }
  .pl-item.done .pl-box { background: var(--acc); border-color: var(--acc); color: #0a0a0e; }
  .pl-box { width: 15px; height: 15px; border: 1.5px solid var(--line); border-radius: 4px; flex: none; font-size: 10px; line-height: 13px; text-align: center; transition: .3s; }
  .pl-sign { margin-top: .7rem; }
  .warranty { width: 88%; font: 400 .68rem var(--mono); color: var(--txt); }
  .wr-opts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
  .wr-opts button { font: 400 .62rem var(--mono); color: var(--txt); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 99px; padding: .5em 1em; }
  .wr-out { color: var(--acc); min-height: 2.6em; line-height: 1.8; }
  .budgetbars { width: 88%; font: 400 .64rem var(--mono); color: var(--dim); display: flex; flex-direction: column; gap: .7rem; }
  .bb-row .bb-lane { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); position: relative; margin-top: .3rem; }
  .bb-row .bb-b, .bb-row .bb-a { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
  .bb-row .bb-b { background: rgba(122,92,255,.4); }
  .bb-row .bb-a { background: var(--acc); height: 4px; top: 2px; }
  .marginwhat { width: 88%; font: 400 .68rem var(--mono); color: var(--txt); }
  .marginwhat input { width: 100%; accent-color: var(--acc); margin: .6rem 0; }
  .mw-out { color: var(--dim); line-height: 1.9; min-height: 4em; }
  .mw-out b { color: var(--acc); }
  .scorecard { width: 90%; font: 400 .64rem var(--mono); color: var(--dim); }
  .scorecard table { width: 100%; border-collapse: collapse; }
  .scorecard td, .scorecard th { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
  .scorecard th { color: var(--txt); }
  .sc-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--acc); vertical-align: middle; }
  .refurbroi { width: 88%; font: 400 .68rem var(--mono); color: var(--txt); }
  .refurbroi input { width: 100%; accent-color: var(--acc); margin: .6rem 0; }
  .rr-save { font: 800 1.6rem var(--sans); color: var(--acc); }
  .devsig div { line-height: 2.1; }
  .devsig b { color: var(--acc); }

  /* ---------- Radar ---------- */
  .radar-list { display: flex; flex-direction: column; margin-top: 2rem; border-top: 1px solid var(--line); }
  .radar-row { display: grid; grid-template-columns: 64px 1fr 2fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
  .radar-row .rn { font-family: var(--mono); color: var(--acc); }
  .radar-row .rname { font-weight: 600; }
  .radar-row .rdesc { color: var(--dim); font-size: .9rem; line-height: 1.55; }
  @media (max-width: 720px) { .radar-row { grid-template-columns: 48px 1fr; } .radar-row .rdesc { grid-column: 2; } }

  /* footer */
  .foot { padding: 16vh 0 12vh; }
  .foot .combos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 2.4rem; }
  .foot .combo { border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.4rem; background: var(--card); }
  .foot .combo h3 { font-family: var(--mono); font-size: .78rem; color: var(--acc); letter-spacing: .12em; text-transform: uppercase; }
  .foot .combo p { margin-top: .7rem; font-family: var(--mono); font-size: .82rem; line-height: 1.7; color: var(--txt); }
  .foot .combo small { display: block; margin-top: .6rem; color: var(--dim); font-size: .74rem; line-height: 1.6; }
  .foot .colophon { margin-top: 5rem; font-family: var(--mono); font-size: .7rem; color: var(--dim); line-height: 2; }

  /* ---------- next wave vol. 3 · 228–239 ---------- */
  /* 228 card stack */
  .stx-outer { width: 100%; height: 280px; overflow-y: auto; border-radius: 12px; background: #08080d; }
  .stx-track { height: 980px; }
  .stx-stick { position: sticky; top: 0; height: 280px; overflow: hidden; display: grid; place-items: center; }
  .stx-card { position: absolute; width: 74%; height: 62%; border-radius: 14px; display: grid; place-items: center; font: 600 .85rem var(--mono); letter-spacing: .08em; color: #0b0b10; box-shadow: 0 18px 40px rgba(0,0,0,.45); will-change: transform, filter; }
  /* 229 liquid glass */
  .lg-scene { position: relative; width: 100%; height: 250px; border-radius: 12px; overflow: hidden; background: radial-gradient(620px 320px at 18% 12%, #3d2f86 0%, transparent 60%), radial-gradient(520px 300px at 85% 85%, #14535c 0%, transparent 60%), #0a0a12; touch-action: none; }
  .lg-lines { position: absolute; inset: 0; padding: 18px 20px; font: 700 1.3rem/1.55 var(--mono); color: rgba(255,255,255,.82); letter-spacing: .02em; user-select: none; }
  .lg-lines i { font-style: normal; color: var(--acc); }
  .lg-pill { position: absolute; top: 38%; left: 8%; width: 216px; height: 64px; border-radius: 999px; cursor: grab; display: flex; align-items: center; justify-content: center; gap: .6em; font: 600 .76rem var(--mono); color: #fff; letter-spacing: .06em;
    background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 55%, rgba(255,255,255,.10));
    backdrop-filter: blur(2.5px) saturate(1.8) brightness(1.12); -webkit-backdrop-filter: blur(2.5px) saturate(1.8) brightness(1.12);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(255,255,255,.15), inset 3px 6px 14px rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.28); }
  .lg-pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 9px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    backdrop-filter: blur(9px) brightness(1.22) saturate(2); -webkit-backdrop-filter: blur(9px) brightness(1.22) saturate(2); pointer-events: none; }
  .lg-pill:active { cursor: grabbing; }
  /* 230 exploded assembly */
  .expl-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 5; display: flex; gap: .8rem; align-items: center; font: 600 .64rem var(--mono); color: var(--dim); }
  .expl-bar input { flex: 1; accent-color: var(--acc); }
  /* 231 hotspots */
  .hot-dot { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--acc); background: rgba(183,255,46,.14); color: var(--acc); font: 600 .62rem var(--mono); display: grid; place-items: center; transform: translate(-50%,-50%); cursor: pointer; z-index: 4; transition: background .2s; }
  .hot-dot:hover { background: rgba(183,255,46,.32); }
  .hot-chip { position: absolute; transform: translate(-50%, calc(-100% - 18px)); background: #101016; border: 1px solid var(--line); border-radius: 8px; padding: .5em .8em; font: 500 .66rem var(--mono); color: var(--txt); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
  .hot-chip.on { opacity: 1; }
  /* 232 walkthrough */
  .walk-outer { width: 100%; height: 300px; overflow-y: auto; border-radius: 12px; background: #000; }
  .walk-track { height: 1500px; }
  .walk-stick { position: sticky; top: 0; height: 300px; }
  /* 233 day/night */
  .dn-toggle { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; }
  /* 234 webgpu compute */
  #tsl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  /* 235 sdf type */
  .sdf-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 5; }
  .sdf-input { width: 100%; background: rgba(12,12,18,.85); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); font: 600 .78rem var(--mono); padding: .6em .9em; letter-spacing: .14em; text-transform: uppercase; }
  .sdf-input:focus { outline: none; border-color: var(--acc); }
  /* 236 dotLottie */
  .lot-canvas { width: 100%; height: 210px; display: block; }
  .lot-row { display: flex; gap: .5rem; align-items: center; justify-content: center; }
  .lot-chip { font: 600 .64rem var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: .3em .8em; cursor: pointer; background: none; }
  .lot-chip.on { color: var(--acc); border-color: var(--acc); }
  /* 237 gallery expand */
  .gx-wrap { position: relative; width: 100%; height: 260px; }
  .gx-veil { position: absolute; inset: -14px; background: rgba(5,5,8,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 5; }
  .gx-veil.on { opacity: 1; }
  .gx-grid { position: absolute; inset: 0; display: grid; grid-template: repeat(2, 1fr) / repeat(3, 1fr); gap: 10px; }
  .gx-item { border-radius: 10px; cursor: zoom-in; position: relative; overflow: hidden; }
  .gx-item:nth-child(1) { grid-area: 1/1; } .gx-item:nth-child(2) { grid-area: 1/2; } .gx-item:nth-child(3) { grid-area: 1/3; }
  .gx-item:nth-child(4) { grid-area: 2/1; } .gx-item:nth-child(5) { grid-area: 2/2; } .gx-item:nth-child(6) { grid-area: 2/3; }
  .gx-item.gx-open { position: absolute; inset: 0; z-index: 6; cursor: zoom-out; }
  .gx-cap { position: absolute; left: 14px; bottom: 12px; font: 600 .7rem var(--mono); color: rgba(255,255,255,.92); opacity: 0; transition: opacity .35s .15s; }
  .gx-item.gx-open .gx-cap { opacity: 1; }
  /* 238 floorplan */
  .fp-wrap { width: 100%; display: flex; flex-direction: column; gap: .7rem; }
  .fp-palette { display: flex; gap: .5rem; flex-wrap: wrap; }
  .fp-pal { font: 600 .64rem var(--mono); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: .45em .8em; cursor: pointer; background: #0d0d13; }
  .fp-pal.on { border-color: var(--acc); color: var(--acc); }
  .fp-board { position: relative; height: 220px; border-radius: 10px; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), #0a0a10; background-size: 20px 20px; cursor: crosshair; overflow: hidden; touch-action: none; }
  .fp-item { position: absolute; display: grid; place-items: center; font: 600 .56rem var(--mono); color: #0a0a0e; background: var(--acc); border-radius: 5px; cursor: grab; user-select: none; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
  .fp-item.f-desk { width: 56px; height: 28px; } .fp-item.f-chair { width: 24px; height: 24px; border-radius: 50%; background: #7fd8ff; }
  .fp-item.f-table { width: 64px; height: 40px; background: #ffb46b; } .fp-item.f-storage { width: 40px; height: 20px; background: #d9a8ff; }
  .fp-total { font: 600 .7rem var(--mono); color: var(--dim); line-height: 1.6; }
  .fp-total b { color: var(--acc); }

  /* ---------- seams & handoffs · 240–247 ---------- */
  /* 240 velocity-adaptive seam */
  .vs-outer { width: 100%; height: 260px; overflow-y: auto; border-radius: 12px; background: #08080d; }
  .vs-track { height: 900px; }
  .vs-stick { position: sticky; top: 0; height: 260px; overflow: hidden; }
  .vs-panel { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.4rem var(--mono); letter-spacing: .1em; }
  .vs-a { background: linear-gradient(150deg, #14212e, #0a0f16); color: #7fd8ff; }
  .vs-b { background: linear-gradient(150deg, #1d2a14, #0d1208); color: var(--acc); opacity: 0; }
  .vs-wipe { position: absolute; inset: 0; background: #e8e8ee; transform: scaleY(0); transform-origin: top; z-index: 3; }
  .vs-meter { margin-top: .6rem; font: 600 .66rem var(--mono); color: var(--dim); text-align: center; min-height: 1.2em; }
  .vs-meter b { color: var(--acc); }
  /* 241 shared-element handoff */
  .sh-outer { width: 100%; height: 300px; overflow-y: auto; border-radius: 12px; background: #0a0a10; }
  .sh-track { height: 1100px; }
  .sh-stick { position: sticky; top: 0; height: 300px; overflow: hidden; }
  .sh-bgA, .sh-bgB { position: absolute; inset: 0; transition: none; }
  .sh-bgA { background: linear-gradient(160deg, #171426, #0a0912); }
  .sh-bgB { background: linear-gradient(160deg, #10201a, #070d0b); opacity: 0; }
  .sh-label { position: absolute; left: 18px; top: 14px; font: 600 .66rem var(--mono); color: var(--dim); z-index: 2; }
  .sh-slotA { position: absolute; left: 18px; top: 44px; width: 120px; height: 84px; }
  .sh-slotB { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-46%); width: 78%; height: 64%; }
  .sh-img { position: absolute; border-radius: 10px; background: linear-gradient(135deg, #b7ff2e 0%, #14535c 60%, #0a0a12 100%); box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 3; will-change: transform; }
  .sh-cap { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font: 600 .7rem var(--mono); color: var(--txt); opacity: 0; z-index: 4; }
  /* 242 fbo blend */
  .fbo-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 5; display: flex; gap: .8rem; align-items: center; font: 600 .64rem var(--mono); color: var(--dim); }
  .fbo-bar input { flex: 1; accent-color: var(--acc); }
  /* 243 act peek */
  .peek-outer { width: 100%; height: 300px; overflow-y: auto; border-radius: 12px; background: #08080d; position: relative; }
  .peek-act { height: 85%; position: relative; display: grid; place-items: center; }
  .peek-act:nth-child(1) { background: #10141d; } .peek-act:nth-child(2) { background: #131a12; } .peek-act:nth-child(3) { background: #1a1212; }
  .peek-act h4 { font: 700 1.1rem var(--mono); color: var(--txt); letter-spacing: .08em; margin: 0; }
  .peek-straddle { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); font: 800 2rem var(--mono); color: rgba(255,255,255,.08); letter-spacing: .2em; white-space: nowrap; pointer-events: none; }
  .peek-nudge { position: sticky; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 1rem; color: var(--acc); opacity: 0; pointer-events: none; }
  /* 244 same-doc view transition */
  .sdt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
  .sdt-chip { height: 64px; border-radius: 10px; display: grid; place-items: center; font: 700 .9rem var(--mono); color: #0b0b10; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  /* 245 device tier */
  .tier-wrap { width: 100%; display: flex; flex-direction: column; gap: .7rem; }
  .tier-read { font: 600 .66rem var(--mono); color: var(--dim); line-height: 1.7; }
  .tier-read b { color: var(--acc); }
  .tier-slot { position: relative; height: 170px; border-radius: 10px; overflow: hidden; background: #0a0a10; }
  .tier-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
  .tier-layer.on { opacity: 1; }
  .tier-static { background: radial-gradient(420px 200px at 30% 30%, #2b3a67, transparent 70%), radial-gradient(420px 220px at 75% 75%, #14535c, transparent 70%), #0a0a12; display: grid; place-items: center; font: 600 .7rem var(--mono); color: var(--txt); }
  .tier-css { display: grid; place-items: center; perspective: 600px; }
  .tier-css i { width: 90px; height: 90px; border-radius: 14px; background: linear-gradient(135deg, var(--acc), #14535c); animation: tier-spin 5s linear infinite; }
  @keyframes tier-spin { from { transform: rotateY(0) rotateX(12deg); } to { transform: rotateY(360deg) rotateX(12deg); } }
  .tier-btns { display: flex; gap: .5rem; }
  .tier-btn { font: 600 .64rem var(--mono); color: var(--txt); border: 1px solid var(--line); border-radius: 999px; padding: .35em .9em; cursor: pointer; background: #0d0d13; }
  .tier-btn.on { border-color: var(--acc); color: var(--acc); }
  /* 246 virtual scroll stage */
  .virt-stage { position: relative; width: 100%; height: 280px; border-radius: 12px; background: #08080d; overflow: hidden; cursor: ns-resize; touch-action: none; }
  .virt-panel { position: absolute; inset: 12% 10%; border-radius: 14px; display: grid; place-items: center; font: 700 1rem var(--mono); letter-spacing: .1em; color: #0b0b10; will-change: transform, opacity; }
  .virt-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); }
  .virt-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--acc); }
  /* 247 iris seam */
  .iris-outer { width: 100%; height: 300px; overflow-y: auto; border-radius: 12px; background: #000; }
  .iris-track { height: 1000px; }
  .iris-stick { position: sticky; top: 0; height: 300px; overflow: hidden; }
  .iris-below, .iris-above { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.2rem var(--mono); letter-spacing: .1em; }
  .iris-below { background: linear-gradient(150deg, #1d2a14, #0c1208); color: var(--acc); }
  .iris-above { background: linear-gradient(150deg, #14212e, #0a0f16); color: #7fd8ff; will-change: clip-path; }

  /* ---------- the backend layer · 248–264 ---------- */
  .be-col { width: 100%; display: flex; flex-direction: column; gap: .6rem; }
  .be-log { width: 100%; max-height: 170px; overflow-y: auto; background: #08080d; border-radius: 10px; padding: .7rem .9rem; font: 500 .64rem/1.9 var(--mono); color: var(--txt); }
  .be-log b { color: var(--acc); }
  .be-log .err { color: #ff8f8f; }
  .be-log .dim { color: var(--dim); }
  .be-row { display: flex; gap: .5rem; width: 100%; flex-wrap: wrap; align-items: center; }
  .be-input { flex: 1; min-width: 90px; background: #0c0c12; border: 1px solid var(--line); border-radius: 8px; color: var(--txt); font: 500 .68rem var(--mono); padding: .55em .8em; }
  .be-input:focus { outline: none; border-color: var(--acc); }
  .be-note { font: 500 .62rem var(--mono); color: var(--dim); line-height: 1.6; }
  .be-lane { display: flex; align-items: center; gap: .6rem; font: 600 .62rem var(--mono); color: var(--txt); width: 100%; }
  .be-lane span:first-child { width: 110px; }
  .be-lane .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
  .be-lane .bar i { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 4px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
  .gb-list { width: 100%; display: flex; flex-direction: column; gap: .4rem; max-height: 120px; overflow-y: auto; }
  .gb-item { font: 500 .64rem var(--mono); color: var(--txt); background: #0c0c12; border: 1px solid var(--line); border-radius: 8px; padding: .45em .8em; }
  .gb-item b { color: var(--acc); }
  .pres-wrap { display: flex; align-items: center; gap: .8rem; font: 600 .8rem var(--mono); color: var(--txt); }
  .pres-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px rgba(183,255,46,.55); }
  .sync-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .sync-panel { background: #0c0c12; border: 1px solid var(--line); border-radius: 10px; padding: .7rem; min-height: 110px; font: 500 .64rem var(--mono); color: var(--txt); }
  .sync-panel h4 { margin: 0 0 .5rem; font: 600 .58rem var(--mono); color: var(--dim); letter-spacing: .12em; }
  .sync-msg { padding: .3em .55em; border-radius: 6px; margin-bottom: .3rem; background: #14141c; }
  .sync-msg.pending { opacity: .4; font-style: italic; }
  .q-track { height: 24px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; position: relative; width: 100%; }
  .q-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--acc), #ff7e5f); }
  .jwt-box { width: 100%; font: 500 .6rem/1.7 var(--mono); word-break: break-all; background: #08080d; border-radius: 10px; padding: .7rem .9rem; min-height: 3em; }
  .jwt-h { color: #7fd8ff; } .jwt-p { color: var(--acc); } .jwt-s { color: #ff9e9e; }
  .rls-table { width: 100%; border-collapse: collapse; font: 500 .62rem var(--mono); }
  .rls-table td, .rls-table th { border: 1px solid var(--line); padding: .3em .6em; color: var(--txt); text-align: left; }
  .rls-table tr.rls-hidden td { opacity: .18; text-decoration: line-through; }
  .og-img { width: 100%; min-height: 150px; border-radius: 10px; border: 1px solid var(--line); background:var(--bg2); display: block; object-fit:cover; }

  /* ---------- 265 · Verification code entry ---------- */
  .acb { width: 100%; text-align: center; padding: 0 .8rem; font-family: var(--sans); }
.acb-title { font: 600 1.05rem var(--sans); letter-spacing: -0.02em; color: var(--txt); }
.acb-sub { font: 400 .7rem var(--sans); color: var(--dim); margin: .3rem 0 1rem; }
.acb-row { display: flex; gap: .4rem; justify-content: center; }
.acb-cell { width: 36px; height: 44px; text-align: center; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; color: var(--txt);
  font: 600 1.05rem var(--mono); outline: none; transition: border-color .25s, box-shadow .25s; }
.acb-cell:focus { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.acb-live { border-color: var(--acc); }
.acb-resend { font: 400 .64rem var(--mono); color: var(--dim); margin-top: .9rem; }
.acb-resend a { color: var(--acc); text-decoration: none; }
.acb-resend a:hover, .acb-resend a:focus-visible { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .acb-cell { transition: none; } }

  /* ---------- 266 · Magic-link sign-in ---------- */
  .aml { width: 100%; max-width: 280px; padding: 0 1rem; font-family: var(--sans); }
.aml-title { font: 600 1.15rem var(--sans); letter-spacing: -0.02em; color: var(--txt); }
.aml-sub { font: 400 .72rem/1.5 var(--sans); color: var(--dim); margin: .35rem 0 1rem; }
.aml-form { display: flex; flex-direction: column; gap: .55rem; }
.aml-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.aml-input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--txt);
  font: 400 .76rem var(--mono); padding: .8em 1em; outline: none; transition: border-color .3s; }
.aml-input::placeholder { color: var(--dim); }
.aml-input:focus { border-color: var(--acc); }
.aml-btn { font: 500 .72rem var(--mono); letter-spacing: .06em; color: var(--bg); background: var(--acc);
  border: 0; border-radius: 8px; padding: .85em 1em; cursor: pointer; transition: opacity .25s; }
.aml-btn:hover, .aml-btn:focus-visible { opacity: .82; }
.aml-alt { font: 400 .58rem var(--mono); color: var(--dim); margin-top: .9rem; }
@media (prefers-reduced-motion: reduce) { .aml-input, .aml-btn { transition: none; } }

  /* ---------- 267 · Horizontal bar comparison ---------- */
  .bcr-wrap { width: 100%; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .85rem; box-sizing: border-box; }
.bcr-wrap .bcr-row { display: grid; grid-template-columns: 4rem 1fr 2rem; align-items: center; gap: .7rem; }
.bcr-wrap .bcr-lbl { font: 400 .64rem var(--mono); color: var(--dim); }
.bcr-wrap .bcr-track { height: .4rem; border-radius: 99px; background: var(--line); overflow: hidden; }
.bcr-wrap .bcr-fill { height: 100%; border-radius: 99px; background: var(--dim); }
.bcr-wrap .bcr-fill-acc { background: var(--acc); }
.bcr-wrap .bcr-val { font: 500 .7rem var(--mono); color: var(--txt); text-align: right; }

  /* ---------- 268 · Before/after credibility pairing ---------- */
  .bap-wrap { width: 100%; padding: 1.3rem 1.3rem; display: flex; align-items: center; justify-content: center; gap: 1rem; box-sizing: border-box; }
.bap-wrap .bap-panel { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 7.2rem; }
.bap-wrap .bap-swatch { width: 100%; height: 3.1rem; }
.bap-wrap .bap-before .bap-swatch { background: var(--bg2); border: 1px solid var(--line); border-radius: 2px; }
.bap-wrap .bap-after .bap-swatch { background: linear-gradient(135deg, var(--card), var(--bg2)); border: 1px solid var(--acc); border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset; }
.bap-wrap .bap-tag { margin: 0; font: 600 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--txt); }
.bap-wrap .bap-after .bap-tag { color: var(--acc); }
.bap-wrap .bap-note { margin: 0; text-align: center; font: 400 .64rem/1.4 var(--sans); color: var(--dim); }
.bap-wrap .bap-arrow { color: var(--dim); flex-shrink: 0; }
.bap-wrap .bap-arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- 269 · Bento grid, one metric emphasised ---------- */
  .bme-wrap { width: 100%; height: 200px; padding: 1rem 1.1rem; box-sizing: border-box; }
.bme-wrap .bme-grid { height: 100%; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, 1fr); gap: .7rem; }
.bme-wrap .bme-cell { display: flex; flex-direction: column; justify-content: center; gap: .35rem; padding: .95rem 1.05rem; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 55%, transparent)); box-sizing: border-box; }
.bme-wrap .bme-lead { grid-row: span 2; border: 0; border-left: 2px solid var(--acc); background: linear-gradient(165deg, color-mix(in srgb, var(--acc) 12%, var(--card)), var(--bg2) 70%); }
.bme-wrap .bme-lead .bme-fig { font-size: 2.7rem; line-height: 1; letter-spacing: -.045em; color: var(--acc); border-bottom: 1px solid var(--line); padding-bottom: .45rem; }
.bme-wrap .bme-fig { font: 700 1.3rem var(--mono); color: var(--txt); letter-spacing: -.02em; }
.bme-wrap .bme-lbl { font: 500 .58rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }
.bme-wrap .bme-lead .bme-lbl { font-size: .52rem; margin-top: .1rem; }

  /* ---------- 270 · Counter row with unit labels ---------- */
  .cur-wrap { width: 100%; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; box-sizing: border-box; }
.cur-wrap .cur-cell { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.cur-wrap .cur-fig { font: 700 1.6rem var(--mono); color: var(--acc); letter-spacing: -.02em; }
.cur-wrap .cur-unit { font: 500 .58rem var(--mono); color: var(--txt); opacity: .7; }
.cur-wrap .cur-lbl { margin-top: .25rem; font: 400 .56rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }

  /* ---------- 271 · Credential ledger ---------- */
  .crl-list { width: 100%; padding: 1.3rem 1.6rem; margin: 0; list-style: none; display: flex; flex-direction: column; box-sizing: border-box; }
.crl-list .crl-row { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.crl-list .crl-row:last-child { border-bottom: none; }
.crl-list .crl-seal { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.crl-list .crl-text { display: flex; flex-direction: column; gap: .1rem; }
.crl-list .crl-name { font: 600 .78rem var(--sans); color: var(--txt); }
.crl-list .crl-body { font: 400 .66rem var(--mono); color: var(--dim); }

  /* ---------- 272 · Inline-field CTA ---------- */
  .cif { width: 100%; padding: 0 7%; font-family: var(--sans); }
.cif-kick { font: 600 1.05rem var(--sans); letter-spacing: -0.02em; color: var(--txt); margin-bottom: .8rem; }
.cif-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cif-wrap { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 99px;
  padding: .3rem .3rem .3rem 1.1rem; transition: border-color .3s; }
.cif-wrap:focus-within { border-color: var(--acc); }
.cif-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--txt);
  font: 400 .78rem var(--mono); padding: .5em 0; min-width: 0; }
.cif-input::placeholder { color: var(--dim); }
.cif-send { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--acc); color: var(--bg); font-size: .9rem; line-height: 1;
  transition: transform .3s cubic-bezier(.76,0,.24,1); }
.cif-send:hover, .cif-send:focus-visible { transform: translateX(3px); }
.cif-note { font: 400 .6rem var(--mono); color: var(--dim); margin-top: .7rem; }
@media (prefers-reduced-motion: reduce) { .cif-send, .cif-wrap { transition: none; } }

  /* ---------- 273 · Split CTA ---------- */
  .csa { width: 100%; padding: 1.1rem 6%; display: flex; align-items: center; gap: 1.2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--sans); flex-wrap: wrap; }
.csa-copy { flex: 1; min-width: 150px; }
.csa-kick { font: 500 .56rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
.csa-title { font: 600 1.25rem/1.1 var(--sans); letter-spacing: -0.025em; color: var(--txt); margin: .35rem 0 .3rem; }
.csa-sub { font: 400 .74rem/1.5 var(--sans); color: var(--dim); }
.csa-btn { font: 500 .72rem var(--mono); letter-spacing: .08em; color: var(--txt); background: transparent;
  border: 1px solid var(--line); border-radius: 99px; padding: .78em 1.5em; cursor: pointer;
  transition: color .3s, border-color .3s, background .3s; }
.csa-btn:hover, .csa-btn:focus-visible { color: var(--bg); background: var(--acc); border-color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .csa-btn { transition: none; } }

  /* ---------- 274 · Statement CTA ---------- */
  .csb { width: 100%; padding: 0 7%; font-family: var(--sans); }
.csb-line { font: 700 clamp(1.5rem, 7vw, 2.1rem)/1.02 var(--sans); letter-spacing: -0.035em; color: var(--txt); }
.csb-em { color: var(--acc); }
.csb-go { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.1rem;
  font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--acc); padding-bottom: 5px; }
.csb-arrow { display: inline-block; transition: transform .35s cubic-bezier(.76,0,.24,1); }
.csb-go:hover .csb-arrow, .csb-go:focus-visible .csb-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .csb-arrow { transition: none; } }

  /* ---------- 275 · As-featured-in strip ---------- */
  .fis-wrap { width: 100%; padding: 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; box-sizing: border-box; }
.fis-wrap .fis-label { margin: 0; text-align: center; font: 500 .6rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.fis-wrap .fis-track { display: flex; width: max-content; animation: fis-scroll 16s linear infinite; }
.fis-wrap .fis-row { display: flex; gap: 2.1rem; padding-right: 2.1rem; flex-shrink: 0; }
.fis-wrap .fis-mark { display: flex; align-items: center; color: var(--dim); }
.fis-wrap .fis-mark svg { width: 2.3rem; height: 1rem; }
.fis-wrap .fis-mark svg rect,
.fis-wrap .fis-mark svg circle,
.fis-wrap .fis-mark svg polygon,
.fis-wrap .fis-mark svg path,
.fis-wrap .fis-mark svg line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
@keyframes fis-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fis-wrap .fis-track { animation: none; transform: translateX(0); } }

  /* ---------- 276 · Figure/label ledger ---------- */
  .fll-list { width: 100%; padding: 1.3rem 1.6rem; margin: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.fll-list .fll-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.fll-list .fll-row:last-child { border-bottom: none; }
.fll-list .fll-fig { margin: 0; order: 2; display: flex; align-items: baseline; gap: .5rem; justify-content: flex-end; font: 700 1.02rem var(--mono); color: var(--acc); }
.fll-list .fll-idx { font: 400 .6rem var(--mono); color: var(--dim); }
.fll-list .fll-lbl { margin: 0; order: 1; font: 400 .72rem var(--sans); color: var(--txt); }

  /* ---------- 277 · Big-ask closer ---------- */
  .fba { width: 100%; padding: 0 7%; font-family: var(--sans); }
.fba-kick { font: 500 .6rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-bottom: .7rem; }
.fba-line { font: 700 clamp(1.6rem, 8vw, 2.4rem)/0.98 var(--sans); letter-spacing: -0.04em; color: var(--txt); }
.fba-em { color: var(--acc); }
.fba-mail { display: inline-block; margin-top: 1.2rem; font: 400 .8rem var(--mono); color: var(--dim);
  text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: color .3s, border-color .3s; }
.fba-mail:hover, .fba-mail:focus-visible { color: var(--acc); border-color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .fba-mail { transition: none; } }

  /* ---------- 278 · Marquee-edge footer ---------- */
  .fme { width: 100%; }
.fme-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .8rem 0; }
.fme-track { display: flex; gap: 1.4rem; width: max-content; white-space: nowrap;
  font: 600 1.15rem var(--sans); letter-spacing: -0.02em; color: var(--txt);
  animation: fme-run 14s linear infinite; will-change: transform; }
.fme-track span:nth-child(even) { color: var(--acc); }
@keyframes fme-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fme-bar { display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 6% 0; font: 400 .64rem var(--mono); color: var(--dim); }
.fme-mark { font: 700 .95rem var(--sans); letter-spacing: -0.02em; color: var(--txt); }
@media (prefers-reduced-motion: reduce) { .fme-track { animation: none; } }

  /* ---------- 279 · Sign-off rule footer ---------- */
  .fsr { width: 100%; padding: 0 6%; font-family: var(--sans); }
.fsr-rule { height: 1px; background: var(--line); margin-bottom: 1.4rem; }
.fsr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fsr-mark { font: 700 1.25rem/1 var(--sans); letter-spacing: -0.03em; color: var(--txt); }
.fsr-nav { display: flex; gap: 1.1rem; }
.fsr-nav a { font: 400 .78rem var(--sans); color: var(--dim); text-decoration: none; position: relative; padding-bottom: 2px; }
.fsr-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.76,0,.24,1); }
.fsr-nav a:hover, .fsr-nav a:focus-visible { color: var(--txt); }
.fsr-nav a:hover::after, .fsr-nav a:focus-visible::after { transform: scaleX(1); }
.fsr-meta { display: flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  font: 400 .66rem var(--mono); color: var(--dim); }
.fsr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: fsr-pulse 2.4s ease-in-out infinite; }
.fsr-year { margin-left: auto; }
@keyframes fsr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fsr-dot { animation: none; } .fsr-nav a::after { transition: none; } }

  /* ---------- 280 · Sitemap footer ---------- */
  .fsc-wrap { width: 100%; padding: 1.1rem 1.2rem .9rem; }
.fsc-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.fsc-mark { font: 700 .82rem/1 var(--sans); color: var(--txt); margin-bottom: .35rem; }
.fsc-tag { font: 400 .6rem/1.4 var(--mono); color: var(--dim); max-width: 12ch; margin: 0; }
.fsc-h { font: 600 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 0 0 .55rem; }
.fsc-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; }
.fsc-list a { font: 400 .66rem/1 var(--sans); color: var(--txt); text-decoration: none; opacity: .85; transition: opacity .2s, color .2s; }
.fsc-list a:hover { color: var(--acc); opacity: 1; }
.fsc-list a:focus-visible { color: var(--acc); opacity: 1; outline: 2px solid var(--acc); outline-offset: 2px; }
.fsc-bottom { display: flex; justify-content: space-between; margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--line); font: 400 .58rem/1 var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .fsc-list a { transition: none; } }

  /* ---------- 281 · Four-up metric row ---------- */
  .fmr-wrap { width: 100%; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); box-sizing: border-box; }
.fmr-wrap .fmr-cell { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0 .4rem; border-left: 1px solid var(--line); }
.fmr-wrap .fmr-cell:first-child { border-left: none; }
.fmr-wrap .fmr-fig { font: 700 1.6rem var(--mono); color: var(--acc); letter-spacing: -.02em; }
.fmr-wrap .fmr-lbl { font: 400 .58rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .07em; text-align: center; }

  /* ---------- 282 · Generic logo wall ---------- */
  .glw-wrap { width: 100%; padding: 1.5rem 1.6rem; box-sizing: border-box; }
.glw-wrap .glw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; list-style: none; margin: 0; padding: 0; }
.glw-wrap .glw-tile { display: flex; align-items: center; justify-content: center; height: 3.3rem; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); transition: border-color .3s, color .3s; }
.glw-wrap .glw-tile:hover { border-color: var(--acc); color: var(--acc); }
.glw-wrap .glw-tile svg { width: 1.4rem; height: 1.4rem; }
.glw-wrap .glw-tile svg circle,
.glw-wrap .glw-tile svg rect,
.glw-wrap .glw-tile svg polygon,
.glw-wrap .glw-tile svg path,
.glw-wrap .glw-tile svg line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .glw-wrap .glw-tile { transition: none; } }

  /* ---------- 283 · Hero number with caption ---------- */
  .hnc-wrap { width: 100%; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; box-sizing: border-box; }
.hnc-wrap .hnc-rule { width: 1.8rem; height: 2px; background: var(--acc); }
.hnc-wrap .hnc-fig { font: 700 clamp(2.6rem, 10vw, 4.2rem) var(--mono); color: var(--txt); line-height: 1; letter-spacing: -.03em; }
.hnc-wrap .hnc-cap { margin: 0; max-width: 22ch; font: 400 .72rem/1.5 var(--sans); color: var(--dim); }

  /* ---------- 284 · Credential list ---------- */
  .pcl { width: 100%; padding: 0 7%; font-family: var(--sans); }
.pcl-kick { font: 500 .56rem var(--mono); letter-spacing: .28em; text-transform: uppercase;
  color: var(--acc); margin-bottom: .7rem; }
.pcl-list { list-style: none; margin: 0; padding: 0; }
.pcl-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--line); }
.pcl-k { font: 500 .74rem var(--sans); color: var(--txt); }
.pcl-v { font: 400 .64rem var(--mono); color: var(--dim); text-align: right; }

  /* ---------- 285 · Pull-quote with rule ---------- */
  .ppr { width: 100%; padding: 0 7%; font-family: var(--sans); }
.ppr-q { font: 400 clamp(.95rem, 4.6vw, 1.2rem)/1.45 var(--sans); letter-spacing: -0.015em;
  color: var(--txt); border: 0; margin: 0; text-wrap: balance; }
.ppr-q::before { content: '\201C'; color: var(--acc); margin-right: .08em; }
.ppr-q::after { content: '\201D'; color: var(--acc); }
.ppr-rule { height: 1px; background: var(--line); margin: 1.1rem 0 .7rem; width: 46px; }
.ppr-by { display: flex; flex-direction: column; gap: .18rem; }
.ppr-who { font: 500 .74rem var(--sans); color: var(--txt); }
.ppr-role { font: 400 .62rem var(--mono); letter-spacing: .1em; color: var(--dim); }

  /* ---------- 286 · Pull quote with rule ---------- */
  .pqr-wrap { width: 100%; padding: 1.6rem 1.9rem; display: flex; flex-direction: column; gap: 1.1rem; position: relative; box-sizing: border-box; }
.pqr-wrap .pqr-mark { position: absolute; top: -.4rem; left: 1.1rem; font: 700 4.6rem/1 var(--sans); color: var(--acc); opacity: .2; pointer-events: none; }
.pqr-wrap .pqr-quote { margin: 0; padding-left: 2.3rem; font: 400 1.02rem/1.5 var(--sans); color: var(--txt); letter-spacing: -.01em; max-width: 27ch; }
.pqr-wrap .pqr-rule { width: 2.4rem; height: 2px; background: var(--acc); margin-left: 2.3rem; }
.pqr-wrap .pqr-attr { padding-left: 2.3rem; display: flex; flex-direction: column; gap: .15rem; }
.pqr-wrap .pqr-name { font: 500 .78rem var(--mono); color: var(--txt); }
.pqr-wrap .pqr-role { font: 400 .72rem var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .pqr-wrap * { transition: none !important; animation: none !important; } }

  /* ---------- 287 · Quote with gradient portrait ---------- */
  .qgp-wrap { width: 100%; padding: 1.6rem 1.8rem; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; box-sizing: border-box; }
.qgp-wrap .qgp-avatar { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: conic-gradient(from 200deg, var(--acc), var(--acc2), var(--bg2), var(--acc)); box-shadow: 0 0 0 3px var(--bg2), 0 0 0 4px var(--line); }
.qgp-wrap .qgp-quote { margin: 0; max-width: 24ch; font: 400 .84rem/1.55 var(--sans); color: var(--txt); }
.qgp-wrap .qgp-cap { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.qgp-wrap .qgp-name { font: 600 .74rem var(--mono); color: var(--txt); }
.qgp-wrap .qgp-role { font: 400 .68rem var(--mono); color: var(--dim); }

  /* ---------- 288 · Three-up quote grid ---------- */
  .qtg-wrap { width: 100%; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; box-sizing: border-box; }
.qtg-wrap .qtg-card { margin: 0; padding: 0 1.1rem; display: flex; flex-direction: column; gap: .8rem; border-left: 1px solid var(--line); transition: transform .3s; }
.qtg-wrap .qtg-card:first-child { border-left: none; padding-left: 0; }
.qtg-wrap .qtg-card:hover { transform: translateY(-3px); }
.qtg-wrap .qtg-quote { margin: 0; font: 400 .76rem/1.55 var(--sans); color: var(--txt); }
.qtg-wrap .qtg-cap { margin-top: .2rem; display: flex; flex-direction: column; gap: .1rem; }
.qtg-wrap .qtg-name { font: 600 .7rem var(--mono); color: var(--txt); }
.qtg-wrap .qtg-role { font: 400 .64rem var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .qtg-wrap .qtg-card { transition: none; } }

  /* ---------- 289 · Sparkline row ---------- */
  .spr-wrap { width: 100%; padding: 1.3rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; box-sizing: border-box; }
.spr-wrap .spr-row { display: grid; grid-template-columns: 4.4rem 1fr 2.2rem; align-items: center; gap: .8rem; }
.spr-wrap .spr-lbl { font: 400 .62rem var(--mono); color: var(--dim); }
.spr-wrap .spr-line { width: 100%; height: 1.5rem; overflow: visible; }
.spr-wrap .spr-line polyline { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spr-wrap .spr-fig { font: 600 .76rem var(--mono); color: var(--txt); text-align: right; }

  /* ---------- 290 · Four-up metric row ---------- */
  .sfu { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); font-family: var(--sans); }
.sfu-item { background: var(--bg2); padding: 1rem .9rem; display: flex; flex-direction: column; gap: .3rem; }
.sfu-n { font: 600 1.7rem/1 var(--sans); letter-spacing: -0.04em; color: var(--txt); font-variant-numeric: tabular-nums; }
.sfu-n i { font-style: normal; font-size: .55em; color: var(--acc); margin-left: .1em; }
.sfu-l { font: 400 .58rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

  /* ---------- 291 · Hero figure ---------- */
  .shf { width: 100%; padding: 0 7%; font-family: var(--sans); }
.shf-kick { font: 500 .56rem var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.shf-row { display: flex; align-items: baseline; gap: .7rem; margin: .35rem 0 .5rem; }
.shf-n { font: 700 clamp(2.6rem, 14vw, 4rem)/0.9 var(--sans); letter-spacing: -0.05em;
  color: var(--txt); font-variant-numeric: tabular-nums; }
.shf-chip { font: 500 .62rem var(--mono); color: var(--acc); border: 1px solid var(--acc);
  border-radius: 99px; padding: .3em .7em; }
.shf-cap { font: 400 .7rem/1.55 var(--sans); color: var(--dim); max-width: 22rem; }

  /* ---------- 292 · Account-created confirmation ---------- */
  .aac-wrap{width:100%;padding:1.8rem 2rem;display:flex;align-items:center;}.aac-card{display:flex;align-items:flex-start;gap:1rem;max-width:300px;}.aac-icon{position:relative;flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--acc);margin-top:.1rem;}.aac-ring{position:absolute;inset:0;border:1px solid var(--acc);border-radius:50%;opacity:.3;animation:aac-pulse 3s ease-out infinite;}.aac-icon svg{width:20px;height:20px;position:relative;z-index:1;}@keyframes aac-pulse{0%{transform:scale(.9);opacity:.4;}100%{transform:scale(1.6);opacity:0;}}.aac-body{display:flex;flex-direction:column;gap:.35rem;min-width:0;}.aac-title{font:600 .9rem var(--sans);color:var(--txt);}.aac-copy{font:400 .72rem var(--sans);color:var(--dim);line-height:1.4;}.aac-btn{align-self:flex-start;margin-top:.3rem;font:600 .7rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.5em 1em;cursor:pointer;transition:border-color .25s;}.aac-btn:hover{border-color:var(--acc);}.aac-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.aac-wrap *{animation:none!important;transition:none!important;}}

  /* ---------- 293 · Provider button stack ---------- */
  .aos-wrap{width:100%;padding:1.8rem 2.2rem;display:flex;align-items:center;justify-content:center;}.aos-card{width:100%;max-width:240px;display:flex;flex-direction:column;gap:.6rem;}.aos-title{font:500 .64rem var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;text-align:center;margin-bottom:.3rem;}.aos-btn{display:flex;align-items:center;gap:.6rem;font:500 .76rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:.55em .8em;cursor:pointer;transition:border-color .25s,background .25s;}.aos-btn:hover{border-color:var(--acc);background:var(--card);}.aos-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.aos-mark{width:16px;height:16px;flex:0 0 auto;border:1.4px solid var(--dim);}.aos-mark--a{border-radius:50%;}.aos-mark--b{border-radius:3px;transform:rotate(45deg);}.aos-mark--c{border:none;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid var(--dim);opacity:.6;}.aos-divider{position:relative;text-align:center;margin:.3rem 0;}.aos-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);}.aos-divider span{position:relative;background:var(--bg2);padding:0 .6em;font:400 .62rem var(--mono);color:var(--dim);}.aos-link{align-self:center;font:400 .68rem var(--mono);color:var(--dim);text-decoration:none;transition:color .25s;}.aos-link:hover,.aos-link:focus-visible{color:var(--acc);}.aos-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.aos-wrap *{transition:none!important;}}

  /* ---------- 294 · Passkey prompt card ---------- */
  .apk-wrap{width:100%;padding:1.6rem;display:flex;align-items:center;justify-content:center;}.apk-card{width:100%;max-width:300px;display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;position:relative;}.apk-badge{position:absolute;top:-9px;left:1.1rem;font:500 .58rem var(--mono);color:var(--dim);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:.2em .6em;}.apk-ring{position:relative;flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--acc);}.apk-ring::before{content:'';position:absolute;inset:0;border:1px solid var(--acc);border-radius:50%;opacity:.35;animation:apk-pulse 2.6s ease-out infinite;}.apk-ring svg{width:24px;height:24px;position:relative;z-index:1;}@keyframes apk-pulse{0%{transform:scale(.85);opacity:.5;}100%{transform:scale(1.5);opacity:0;}}.apk-body{display:flex;flex-direction:column;gap:.3rem;min-width:0;}.apk-title{font:600 .82rem var(--sans);color:var(--txt);}.apk-copy{font:400 .68rem var(--sans);color:var(--dim);line-height:1.35;}.apk-btn{align-self:flex-start;margin-top:.2rem;font:600 .68rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:.45em .9em;cursor:pointer;transition:border-color .25s;}.apk-btn:hover{border-color:var(--acc);}.apk-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.apk-wrap *{animation:none!important;transition:none!important;}}

  /* ---------- 295 · Magic-link split ---------- */
  .apw-wrap{width:100%;padding:1.6rem 1.8rem;display:flex;align-items:center;}.apw-card{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center;}.apw-copy-col{display:flex;flex-direction:column;gap:.4rem;min-width:0;}.apw-icon{width:34px;height:22px;color:var(--acc);}.apw-icon svg{width:100%;height:100%;}.apw-title{font:600 .92rem var(--sans);color:var(--txt);}.apw-copy{font:400 .72rem var(--sans);color:var(--dim);line-height:1.4;}.apw-form-col{display:flex;flex-direction:column;gap:.5rem;min-width:0;}.apw-label{font:500 .64rem var(--mono);color:var(--dim);}.apw-input{font:400 .78rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.55em .7em;transition:border-color .25s;}.apw-input:focus-visible{outline:none;border-color:var(--acc);}.apw-btn{font:600 .74rem var(--sans);color:var(--txt);background:transparent;border:1px solid var(--line);border-radius:8px;padding:.55em 1em;cursor:pointer;transition:border-color .25s,color .25s;}.apw-btn:hover{border-color:var(--acc);color:var(--acc);}.apw-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.apw-wrap *{transition:none!important;}}

  /* ---------- 296 · Session gate card ---------- */
  .asg-wrap{width:100%;padding:1rem;display:flex;align-items:center;justify-content:center;}.asg-stage{position:relative;width:100%;max-width:300px;height:190px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2);}.asg-skeleton{position:absolute;inset:0;padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;}.asg-skeleton span{display:block;height:.6rem;border-radius:4px;background:var(--line);}.asg-skeleton span:nth-child(1){width:55%;}.asg-skeleton span:nth-child(2){width:85%;}.asg-skeleton span:nth-child(3){width:70%;}.asg-skeleton span:nth-child(4){width:40%;}.asg-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:0 1.2rem;backdrop-filter:blur(6px);background:rgba(0,0,0,.35);}.asg-lock{width:22px;height:22px;color:var(--txt);margin-bottom:.2rem;}.asg-title{font:600 .82rem var(--sans);color:var(--txt);}.asg-copy{font:400 .7rem var(--sans);color:var(--dim);}.asg-btn{margin-top:.4rem;font:600 .72rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.5em 1.1em;cursor:pointer;transition:border-color .25s;}.asg-btn:hover{border-color:var(--acc);}.asg-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.asg-wrap *{transition:none!important;}}

  /* ---------- 297 · Sign-in card ---------- */
  .asc-wrap{width:100%;padding:1.6rem;display:flex;align-items:center;justify-content:center;}.asc-card{width:100%;max-width:270px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.75rem;}.asc-kicker{font:500 .64rem var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;}.asc-title{font:600 1rem var(--sans);color:var(--txt);margin-bottom:.2rem;}.asc-field{display:flex;flex-direction:column;gap:.3rem;}.asc-label{font:500 .68rem var(--mono);color:var(--dim);}.asc-input{font:400 .8rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.55em .7em;transition:border-color .25s;}.asc-input:focus-visible{outline:none;border-color:var(--acc);}.asc-btn{margin-top:.3rem;font:600 .78rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.65em 1em;cursor:pointer;transition:border-color .25s;}.asc-btn:hover{border-color:var(--acc);}.asc-btn:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.asc-link{align-self:center;font:400 .68rem var(--mono);color:var(--dim);text-decoration:none;transition:color .25s;}.asc-link:hover,.asc-link:focus-visible{color:var(--acc);}.asc-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.asc-wrap *{transition:none!important;}}

  /* ---------- 298 · Two-factor code entry ---------- */
  .a2f-wrap{width:100%;padding:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;}.a2f-kicker{font:500 .62rem var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;}.a2f-title{font:600 .86rem var(--sans);color:var(--txt);text-align:center;}.a2f-boxes{display:flex;gap:.4rem;}.a2f-box{width:34px;height:42px;text-align:center;font:600 1.1rem var(--mono);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px;transition:border-color .25s;}.a2f-box:focus-visible{outline:none;border-color:var(--acc);}.a2f-resend{font:500 .68rem var(--mono);color:var(--dim);background:none;border:none;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);transition:color .25s;}.a2f-resend:hover{color:var(--acc);}.a2f-resend:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.a2f-wrap *{transition:none!important;}}

  /* ---------- 299 · Card CTA with rule ---------- */
  .ccr-wrap { width: 86%; border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.5rem 1.3rem; background: var(--card); }
.ccr-h { font: 700 1.15rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--txt); margin: 0 0 .4rem; }
.ccr-sub { font: 400 .7rem/1.4 var(--mono); color: var(--dim); margin: 0; }
.ccr-rule { border: none; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.ccr-link { display: inline-flex; align-items: center; font: 600 .78rem/1 var(--mono); color: var(--acc); text-decoration: none; }
.ccr-arrow { display: inline-block; transition: transform .25s ease; }
.ccr-link:hover .ccr-arrow, .ccr-link:focus-visible .ccr-arrow { transform: translateX(.3em); }
.ccr-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .ccr-arrow { transition: none; } }

  /* ---------- 300 · Full-bleed statement CTA ---------- */
  .cfs-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; text-align: center; padding: 1.8rem 1.4rem; background: radial-gradient(120% 140% at 50% 0%, var(--bg2) 0%, var(--bg) 65%); }
.cfs-kicker { font: 600 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--acc); margin: 0; }
.cfs-h { font: 700 clamp(1.3rem, 6vw, 1.9rem)/1.15 var(--sans); letter-spacing: -0.02em; color: var(--txt); margin: 0; }
.cfs-acc { color: var(--acc); }
.cfs-btn { font: 600 .74rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .75em 1.4em; cursor: pointer; transition: transform .2s, filter .2s; }
.cfs-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cfs-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cfs-btn { transition: none; } }

  /* ---------- 301 · Inline form CTA ---------- */
  .ctif-wrap { width: 100%; padding: 1.4rem 1.3rem; text-align: center; }
.ctif-h { font: 700 1.05rem/1.25 var(--sans); color: var(--txt); margin: 0 0 1rem; letter-spacing: -0.01em; }
.ctif-field { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .3rem .3rem 1rem; gap: .4rem; transition: border-color .25s; }
.ctif-field:has(.ctif-input:focus-visible) { border-color: var(--acc); }
.ctif-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ctif-input { background: none; border: none; color: var(--txt); font: 400 .72rem/1 var(--mono); width: 9.5rem; outline: none; }
.ctif-input::placeholder { color: var(--dim); }
.ctif-btn { font: 600 .68rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .62em 1.1em; white-space: nowrap; cursor: pointer; transition: filter .2s; }
.ctif-btn:hover { filter: brightness(1.08); }
.ctif-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ctif-field { transition: none; } }

  /* ---------- 302 · Quiet text-link CTA ---------- */
  .cqt-wrap { width: 82%; text-align: center; padding: 1.2rem 0; }
.cqt-rule { border: none; border-top: 1px solid var(--line); width: 2.4rem; margin: 0 auto 1.1rem; }
.cqt-line { font: 400 .74rem/1.5 var(--sans); color: var(--dim); margin: 0 0 .55rem; }
.cqt-link { font: 500 .72rem/1 var(--mono); color: var(--txt); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0); transition: color .2s, border-color .2s; }
.cqt-link:hover { color: var(--acc); border-color: var(--acc); }
.cqt-link:focus-visible { color: var(--acc); border-color: var(--acc); outline: none; }
@media (prefers-reduced-motion: reduce) { .cqt-link { transition: none; } }

  /* ---------- 303 · Split CTA ---------- */
  .csca-wrap { width: 92%; display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; }
.csca-copy { flex: 1.15; }
.csca-h { font: 700 1rem/1.2 var(--sans); color: var(--txt); margin: 0 0 .3rem; letter-spacing: -0.01em; }
.csca-sub { font: 400 .64rem/1.35 var(--mono); color: var(--dim); margin: 0; }
.csca-rule { width: 1px; align-self: stretch; background: var(--line); flex-shrink: 0; }
.csca-actions { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.csca-btn { font: 600 .72rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .65em 1.2em; cursor: pointer; transition: transform .2s, filter .2s; }
.csca-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.csca-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.csca-alt { font: 400 .64rem/1 var(--mono); color: var(--dim); text-decoration: underline; text-decoration-color: var(--line); transition: color .2s; }
.csca-alt:hover { color: var(--txt); }
.csca-alt:focus-visible { color: var(--txt); outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .csca-btn, .csca-alt { transition: none; } }

  /* ---------- 304 · Sticky CTA bar ---------- */
  .ctsb-stage { width: 100%; min-height: 220px; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.3rem; }
.ctsb-bar { display: flex; align-items: center; gap: .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: .55em .5em .55em 1.1em; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); max-width: 92%; }
.ctsb-text { font: 400 .66rem/1.3 var(--mono); color: var(--dim); }
.ctsb-btn { font: 600 .68rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .62em 1.1em; white-space: nowrap; cursor: pointer; transition: filter .2s, transform .2s; }
.ctsb-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ctsb-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ctsb-btn { transition: none; } }

  /* ---------- 305 · Horizon curtain footer ---------- */
  .fhc-wrap { width: 100%; min-height: 210px; position: relative; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(to bottom, var(--bg2) 0%, var(--bg) 78%); overflow: hidden; padding: 1.6rem 1rem 1.9rem; text-align: center; }
.fhc-line { position: absolute; left: 8%; right: 8%; bottom: 1.9rem; height: 1px; background: var(--acc); box-shadow: 0 0 18px 1px var(--acc); opacity: .55; }
.fhc-end { position: relative; font: 700 clamp(1.05rem, 4.4vw, 1.4rem)/1.25 var(--sans); letter-spacing: -0.01em; color: var(--txt); margin: 0; mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%); }

  /* ---------- 306 · Legal status bar ---------- */
  .flsb-wrap { width: 100%; padding: .8rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; border-top: 1px solid var(--line); }
.flsb-left { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.flsb-copy { font: 400 .62rem/1 var(--mono); color: var(--dim); }
.flsb-link { font: 400 .62rem/1 var(--mono); color: var(--dim); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0); transition: color .2s, border-color .2s; }
.flsb-link:hover { color: var(--txt); border-color: var(--line); }
.flsb-link:focus-visible { color: var(--txt); outline: 2px solid var(--acc); outline-offset: 2px; }
.flsb-status { display: flex; align-items: center; gap: .45em; font: 400 .62rem/1 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.flsb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .flsb-link { transition: none; } }

  /* ---------- 307 · Let's-talk closer ---------- */
  .fltc-wrap { width: 100%; padding: 1.6rem 1.4rem; text-align: left; }
.fltc-h { font: 700 clamp(1.5rem, 7vw, 2.3rem)/1.03 var(--sans); letter-spacing: -0.02em; color: var(--txt); margin: 0 0 1rem; }
.fltc-acc { color: var(--acc); }
.fltc-link { display: inline-flex; align-items: center; font: 500 .82rem/1 var(--mono); color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: .35em; transition: color .25s, border-color .25s; }
.fltc-link:hover { color: var(--txt); border-color: var(--acc); }
.fltc-link:focus-visible { color: var(--txt); border-color: var(--acc); outline: none; }
.fltc-arrow { display: inline-block; transition: transform .25s ease; }
.fltc-link:hover .fltc-arrow, .fltc-link:focus-visible .fltc-arrow { transform: translateX(.25em); }
@media (prefers-reduced-motion: reduce) { .fltc-link, .fltc-arrow { transition: none; } }

  /* ---------- 308 · Ticker strip footer ---------- */
  .fmt-wrap { width: 100%; }
.fmt-ticker { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3em 1em; padding: 1rem 1.1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fmt-ticker span { font: 700 .98rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: -0.01em; color: var(--txt); white-space: nowrap; }
.fmt-ticker .fmt-dot { color: var(--acc); font-weight: 400; }
.fmt-bottom { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.2rem; }
.fmt-mark { font: 600 .72rem/1 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.fmt-link { font: 500 .72rem/1 var(--mono); color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: .25em; transition: color .2s, border-color .2s; }
.fmt-link:hover { color: var(--acc); border-color: var(--acc); }
.fmt-link:focus-visible { color: var(--acc); border-color: var(--acc); outline: none; }
@media (prefers-reduced-motion: reduce) { .fmt-link { transition: none; } }

  /* ---------- 309 · Minimal sign-off footer ---------- */
  .fms-wrap { width: 100%; padding: 1.1rem 1.3rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.fms-mark { font: 600 .78rem/1 var(--sans); letter-spacing: -0.01em; color: var(--txt); }
.fms-nav { display: flex; gap: 1.1rem; }
.fms-link { font: 400 .64rem/1 var(--mono); color: var(--dim); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; position: relative; padding-bottom: .3em; transition: color .25s; }
.fms-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--acc); transition: right .25s ease; }
.fms-link:hover { color: var(--txt); }
.fms-link:hover::after, .fms-link:focus-visible::after { right: 0; }
.fms-link:focus-visible { color: var(--txt); outline: 2px solid var(--acc); outline-offset: 3px; }
.fms-meta { font: 400 .62rem/1 var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .fms-link, .fms-link::after { transition: none; } }

  /* ---------- 310 · Newsletter inline footer ---------- */
  .fni-wrap { width: 100%; padding: 1.2rem 1.3rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .9rem; }
.fni-h { font: 600 .92rem/1.25 var(--sans); color: var(--txt); margin: 0; }
.fni-sub { font: 400 .64rem/1.3 var(--mono); color: var(--dim); margin: .3rem 0 0; }
.fni-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.fni-field { display: flex; align-items: center; border-bottom: 1px solid var(--line); transition: border-color .25s; }
.fni-field:has(.fni-input:focus-visible) { border-color: var(--acc); }
.fni-input { flex: 1; background: none; border: none; color: var(--txt); font: 400 .74rem/1 var(--mono); padding: .55em 0; outline: none; }
.fni-input::placeholder { color: var(--dim); }
.fni-btn { background: none; border: none; color: var(--dim); font: 600 .95rem/1 var(--mono); cursor: pointer; padding: .3em .2em; transition: color .2s, transform .2s; }
.fni-btn:hover { color: var(--acc); transform: translateX(.15em); }
.fni-btn:focus-visible { color: var(--acc); outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fni-field, .fni-btn { transition: none; } }

  /* ---------- 311 · Outline wordmark footer ---------- */
  .fow-wrap { width: 100%; min-height: 210px; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding-bottom: 1rem; }
.fow-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); font: 800 clamp(3.2rem, 17vw, 5.5rem)/1 var(--sans); letter-spacing: -0.03em; color: rgba(255,255,255,0); -webkit-text-stroke: 1px var(--line); white-space: nowrap; user-select: none; }
.fow-nav { position: relative; z-index: 1; display: flex; gap: 1.3rem; }
.fow-nav a { font: 500 .68rem/1 var(--mono); color: var(--dim); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; transition: color .2s; }
.fow-nav a:hover { color: var(--acc); }
.fow-nav a:focus-visible { color: var(--acc); outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fow-nav a { transition: none; } }

  /* ---------- 312 · Breadcrumb with cut chevrons ---------- */
  .nbc-wrap{width:100%;padding:2.4rem 1.6rem;display:flex;align-items:center;justify-content:center;}.nbc-list{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;}.nbc-list li{display:flex;align-items:center;gap:.5rem;}.nbc-link{position:relative;font:500 .74rem var(--sans);color:var(--dim);text-decoration:none;transition:color .25s;padding:.15rem .05rem;border-radius:2px;}.nbc-link::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s;}.nbc-link:hover,.nbc-link:focus-visible{color:var(--txt);}.nbc-link:hover::after,.nbc-link:focus-visible::after{transform:scaleX(1);}.nbc-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.nbc-current{font:600 .74rem var(--sans);color:var(--txt);}.nbc-sep{width:9px;height:13px;flex:0 0 auto;background:var(--dim);opacity:.55;clip-path:polygon(0 0,58% 0,100% 50%,58% 100%,0 100%,32% 50%);}@media (prefers-reduced-motion: reduce){.nbc-wrap *{transition:none!important;}}

  /* ---------- 313 · Centered wordmark bar ---------- */
  .ncw-wrap{width:100%;padding:2.2rem 1.6rem;display:flex;flex-direction:column;gap:1.6rem;align-items:center;}.ncw-bar{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;}.ncw-side{justify-self:start;font:500 .72rem var(--mono);color:var(--dim);text-decoration:none;letter-spacing:.02em;transition:color .25s;border-radius:2px;}.ncw-side:hover,.ncw-side:focus-visible{color:var(--txt);}.ncw-side:focus-visible{outline:1px solid var(--acc);outline-offset:3px;}.ncw-mark{justify-self:center;font:700 1rem var(--sans);letter-spacing:.14em;color:var(--txt);text-decoration:none;border-radius:2px;}.ncw-mark:focus-visible{outline:1px solid var(--acc);outline-offset:3px;}.ncw-cta{justify-self:end;font:500 .68rem var(--mono);color:var(--txt);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.5em 1.1em;cursor:pointer;transition:border-color .25s,color .25s;}.ncw-cta:hover{border-color:var(--acc);color:var(--acc);}.ncw-cta:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.ncw-cap{font:400 .66rem var(--mono);color:var(--dim);}@media (prefers-reduced-motion: reduce){.ncw-wrap *{transition:none!important;}}

  /* ---------- 314 · Icon rail ---------- */
  .nir-wrap{width:100%;padding:2rem;display:flex;align-items:center;justify-content:center;}.nir-rail{display:flex;flex-direction:column;gap:.4rem;padding:.5rem;border:1px solid var(--line);border-radius:16px;background:var(--bg2);}.nir-item{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--dim);border-radius:10px;text-decoration:none;transition:color .25s,background .25s,transform .25s;}.nir-item:hover,.nir-item:focus-visible{color:var(--txt);background:var(--card);}.nir-item:hover{transform:translateX(1px);}.nir-item:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.nir-item[aria-current='page']{color:var(--acc);}.nir-item[aria-current='page']::after{content:'';position:absolute;left:-9px;top:50%;width:3px;height:16px;background:var(--acc);border-radius:2px;transform:translateY(-50%);}.nir-icon{width:19px;height:19px;}@media (prefers-reduced-motion: reduce){.nir-wrap *{transition:none!important;}}

  /* ---------- 315 · Segmented pill switcher ---------- */
  .nsp-wrap{width:100%;padding:2.4rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem;}.nsp-group{position:relative;display:flex;width:100%;max-width:280px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px;}.nsp-input{position:absolute;width:1px;height:1px;opacity:0;}.nsp-seg{position:relative;z-index:1;flex:1;min-width:0;text-align:center;padding:.5rem .3rem;font:500 .72rem var(--mono);color:var(--dim);border-radius:999px;cursor:pointer;transition:color .3s;user-select:none;white-space:nowrap;}.nsp-input:checked+.nsp-seg{color:rgba(0,0,0,.72);}.nsp-input:focus-visible+.nsp-seg{outline:1px solid var(--acc);outline-offset:2px;}.nsp-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:var(--acc);border-radius:999px;transition:transform .35s cubic-bezier(.65,0,.35,1);z-index:0;}.nsp-group:has(#nsp-a:checked) .nsp-thumb{transform:translateX(0);}.nsp-group:has(#nsp-b:checked) .nsp-thumb{transform:translateX(100%);}.nsp-group:has(#nsp-c:checked) .nsp-thumb{transform:translateX(200%);}.nsp-cap{font:400 .68rem var(--mono);color:var(--dim);}@media (prefers-reduced-motion: reduce){.nsp-wrap *{transition:none!important;}}

  /* ---------- 316 · Sidebar nav with sliding marker ---------- */
  .nsm-wrap{width:100%;padding:2rem 1.6rem;display:flex;justify-content:center;}.nsm-rail{position:relative;display:flex;flex-direction:column;width:180px;border-left:1px solid var(--line);padding-left:1rem;}.nsm-link{position:relative;height:2.5rem;display:flex;align-items:center;font:500 .78rem var(--sans);color:var(--dim);text-decoration:none;transition:color .3s;border-radius:2px;}.nsm-link:hover,.nsm-link:focus-visible{color:var(--txt);}.nsm-link[aria-current='page']{color:var(--txt);}.nsm-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.nsm-marker{position:absolute;left:-1px;top:0;width:2px;height:2.5rem;background:var(--acc);transform:translateY(2.5rem);transition:transform .4s cubic-bezier(.65,0,.35,1);}.nsm-rail:has(.nsm-link:nth-child(1):is(:hover,:focus)) .nsm-marker{transform:translateY(0);}.nsm-rail:has(.nsm-link:nth-child(2):is(:hover,:focus)) .nsm-marker{transform:translateY(2.5rem);}.nsm-rail:has(.nsm-link:nth-child(3):is(:hover,:focus)) .nsm-marker{transform:translateY(5rem);}.nsm-rail:has(.nsm-link:nth-child(4):is(:hover,:focus)) .nsm-marker{transform:translateY(7.5rem);}@media (prefers-reduced-motion: reduce){.nsm-wrap *{transition:none!important;}}

  /* ---------- 317 · Tab bar with sliding fill ---------- */
  .ntb-wrap{width:100%;padding:2.2rem 1.6rem;display:flex;justify-content:center;}.ntb-bar{position:relative;display:flex;width:100%;max-width:300px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:4px;}.ntb-tab{position:relative;z-index:1;flex:1;min-width:0;text-align:center;padding:.6rem .5rem;font:500 .74rem var(--sans);color:var(--dim);text-decoration:none;border-radius:7px;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.ntb-tab:hover,.ntb-tab:focus-visible{color:var(--txt);}.ntb-tab[aria-current='page']{color:var(--txt);}.ntb-tab:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.ntb-bg{position:absolute;top:4px;left:4px;bottom:4px;width:calc((100% - 8px)/3);background:var(--card);border:1px solid var(--line);border-radius:7px;transform:translateX(100%);transition:transform .4s cubic-bezier(.65,0,.35,1);}.ntb-bg::before{content:'';position:absolute;top:0;left:14%;right:14%;height:2px;background:var(--acc);border-radius:2px;}.ntb-bar:has(.ntb-tab:nth-child(1):is(:hover,:focus)) .ntb-bg{transform:translateX(0);}.ntb-bar:has(.ntb-tab:nth-child(2):is(:hover,:focus)) .ntb-bg{transform:translateX(100%);}.ntb-bar:has(.ntb-tab:nth-child(3):is(:hover,:focus)) .ntb-bg{transform:translateX(200%);}@media (prefers-reduced-motion: reduce){.ntb-wrap *{transition:none!important;}}

  /* ---------- 318 · Underline-slide nav ---------- */
  .nus-wrap{width:100%;padding:2.2rem 1.4rem;display:flex;flex-direction:column;gap:1.4rem;}.nus-bar{position:relative;display:flex;gap:0;border-bottom:1px solid var(--line);}.nus-link{flex:1;min-width:0;text-align:center;padding:.7rem .3rem;font:500 .74rem var(--sans);color:var(--dim);text-decoration:none;letter-spacing:.01em;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:2px;}.nus-link:hover,.nus-link:focus-visible{color:var(--txt);}.nus-link[aria-current='page']{color:var(--txt);}.nus-link:focus-visible{outline:1px solid var(--acc);outline-offset:-3px;}.nus-ul{position:absolute;left:0;bottom:-1px;width:25%;height:2px;background:var(--acc);transform:translateX(100%);transition:transform .45s cubic-bezier(.65,0,.35,1);}.nus-bar:has(.nus-link:nth-child(1):is(:hover,:focus)) .nus-ul{transform:translateX(0%);}.nus-bar:has(.nus-link:nth-child(2):is(:hover,:focus)) .nus-ul{transform:translateX(100%);}.nus-bar:has(.nus-link:nth-child(3):is(:hover,:focus)) .nus-ul{transform:translateX(200%);}.nus-bar:has(.nus-link:nth-child(4):is(:hover,:focus)) .nus-ul{transform:translateX(300%);}.nus-cap{font:400 .68rem var(--mono);color:var(--dim);text-align:center;}@media (prefers-reduced-motion: reduce){.nus-wrap *{transition:none!important;}}

  /* ---------- 319 · Aurora drift ---------- */
  .adr { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.adr i { position: absolute; display: block; border-radius: 50%; filter: blur(46px); opacity: .5; }
.adr .adr-a { width: 62%; aspect-ratio: 1; left: -12%; top: -18%;
  background: radial-gradient(circle, var(--acc), transparent 68%); animation: adr-1 19s ease-in-out infinite alternate; }
.adr .adr-b { width: 54%; aspect-ratio: 1; right: -10%; bottom: -16%;
  background: radial-gradient(circle, var(--acc2), transparent 68%); animation: adr-2 23s ease-in-out infinite alternate; }
.adr .adr-c { width: 40%; aspect-ratio: 1; left: 38%; top: 30%;
  background: radial-gradient(circle, var(--acc2), transparent 72%); opacity: .3;
  animation: adr-1 27s ease-in-out infinite alternate-reverse; }
@keyframes adr-1 { to { transform: translate3d(16%, 12%, 0) scale(1.16); } }
@keyframes adr-2 { to { transform: translate3d(-14%, -10%, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .adr i { animation: none; } }

  /* ---------- 320 · Diagonal scan lines ---------- */
  .dsl { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.dsl-lines { position: absolute; inset: -40%;
  background: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 11px);
  animation: dsl-drift 24s linear infinite; }
.dsl-mask { position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 50%, transparent, var(--bg) 92%); }
@keyframes dsl-drift { to { transform: translate3d(11px, 11px, 0); } }
@media (prefers-reduced-motion: reduce) { .dsl-lines { animation: none; } }

  /* ---------- 321 · Dot matrix fade ---------- */
  .dmf { position: absolute; inset: 0; background: var(--bg2);
  background-image: radial-gradient(var(--line) 1.1px, transparent 1.1px); background-size: 18px 18px; }
.dmf-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg2) 0%, transparent 38%, transparent 62%, var(--bg2) 100%); }

  /* ---------- 322 · Hairline grid field ---------- */
  .hgf { position: absolute; inset: 0; overflow: hidden;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px; }
.hgf-fade { position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 45%, transparent 0%, var(--bg2) 100%); }
.hgf-mark { position: absolute; left: 16px; bottom: 14px; font: 500 .58rem var(--mono);
  letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }

  /* ---------- 323 · Horizon glow ---------- */
  .hgw { position: absolute; inset: 0; background:
  radial-gradient(120% 78% at 50% 118%, var(--acc2) 0%, transparent 58%), var(--bg); }
.hgw-line { position: absolute; left: 12%; right: 12%; bottom: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .7; }

  /* ---------- 324 · FAQ disclosure ---------- */
  .fqd { width: 100%; padding: 0 7%; font-family: var(--sans); }
.fqd-row { border-bottom: 1px solid var(--line); }
.fqd-row summary { cursor: pointer; list-style: none; padding: .75rem 0;
  font: 500 .8rem var(--sans); color: var(--txt); display: flex; align-items: center;
  justify-content: space-between; gap: .8rem; }
.fqd-row summary::-webkit-details-marker { display: none; }
.fqd-row summary::after { content: '+'; font: 400 1rem var(--mono); color: var(--acc);
  transition: transform .3s cubic-bezier(.76,0,.24,1); }
.fqd-row[open] summary::after { transform: rotate(45deg); }
.fqd-row p { font: 400 .72rem/1.6 var(--sans); color: var(--dim); padding: 0 0 .85rem; }
@media (prefers-reduced-motion: reduce) { .fqd-row summary::after { transition: none; } }

  /* ---------- 325 · Lede with rule ---------- */
  .ldr { width: 100%; padding: 0 7%; font-family: var(--sans); }
.ldr-kick { font: 500 .56rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
.ldr-rule { height: 1px; width: 40px; background: var(--line); margin: .7rem 0 .9rem; }
.ldr-lede { font: 400 clamp(.92rem, 4.2vw, 1.08rem)/1.55 var(--sans); color: var(--txt);
  letter-spacing: -0.01em; text-wrap: pretty; }

  /* ---------- 326 · Spec ledger ---------- */
  .spl { width: 100%; padding: 0 7%; font-family: var(--sans); }
.spl-kick { font: 500 .54rem var(--mono); letter-spacing: .28em; text-transform: uppercase;
  color: var(--acc); margin-bottom: .6rem; }
.spl-list { margin: 0; }
.spl-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line); }
.spl-row dt { font: 400 .7rem var(--sans); color: var(--dim); margin: 0; }
.spl-row dd { font: 500 .7rem var(--mono); color: var(--txt); margin: 0; text-align: right; }

  /* ---------- 327 · Numbered step ladder ---------- */
  .stl { width: 100%; padding: 0 7%; font-family: var(--sans); }
.stl-row { display: flex; gap: .95rem; align-items: baseline; padding: .65rem 0;
  border-bottom: 1px solid var(--line); }
.stl-row:last-child { border-bottom: 0; }
.stl-n { font: 500 .62rem var(--mono); color: var(--acc); min-width: 1.8em; }
.stl-row b { display: block; font: 500 .8rem var(--sans); color: var(--txt); }
.stl-row p { font: 400 .68rem/1.5 var(--sans); color: var(--dim); margin-top: .15rem; }

  /* ---------- 328 · Two-column with margin note ---------- */
  .tcn { width: 100%; padding: 0 6%; display: grid; grid-template-columns: 1.9fr 1fr; gap: 1.2rem;
  font-family: var(--sans); align-items: start; }
.tcn-h { font: 600 .95rem var(--sans); letter-spacing: -0.015em; color: var(--txt); margin-bottom: .45rem; }
.tcn-p { font: 400 .76rem/1.6 var(--sans); color: var(--dim); text-wrap: pretty; }
.tcn-note { border-left: 1px solid var(--line); padding-left: .9rem; }
.tcn-n { display: block; font: 500 .54rem var(--mono); letter-spacing: .24em;
  text-transform: uppercase; color: var(--acc); margin-bottom: .35rem; }
.tcn-note p { font: 400 .66rem/1.55 var(--sans); color: var(--dim); }

  /* ---------- 329 · Corner meta ---------- */
  .ccm { position: absolute; inset: 0; pointer-events: none; font: 500 .55rem var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.ccm span { position: absolute; display: flex; align-items: center; gap: .4em; }
.ccm-tl { top: 12px; left: 14px; }
.ccm-tr { top: 12px; right: 14px; }
.ccm-bl { bottom: 12px; left: 14px; }
.ccm-br { bottom: 12px; right: 14px; }
.ccm-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }

  /* ---------- 330 · Scroll cue ---------- */
  .csc { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.csc-word { font: 500 .55rem var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--dim); }
.csc-rail { position: relative; width: 1px; height: 46px; background: var(--line); overflow: hidden; }
.csc-rail i { position: absolute; left: -1px; top: 0; width: 3px; height: 12px; border-radius: 2px;
  background: var(--acc); animation: csc-fall 1.9s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes csc-fall { 0% { top: -14px; opacity: 0; } 30% { opacity: 1; } 100% { top: 46px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .csc-rail i { animation: none; top: 16px; } }

  /* ---------- 331 · Booking date and slot picker ---------- */
  .bkds-wrap{width:100%;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;box-sizing:border-box;}.bkds-days{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;}.bkds-day{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:none;border:1px solid var(--line);border-radius:10px;padding:.5em .3em;cursor:pointer;transition:border-color .2s,background .2s;}.bkds-dname{font:500 .56rem var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.05em;}.bkds-dnum{font:600 .82rem var(--sans);color:var(--txt);}.bkds-day-active{border-color:var(--acc);background:var(--bg2);}.bkds-day-active .bkds-dname,.bkds-day-active .bkds-dnum{color:var(--acc);}.bkds-day:hover,.bkds-day:focus-visible{border-color:var(--acc);}.bkds-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;}.bkds-slot{font:500 .66rem var(--mono);color:var(--dim);background:none;border:1px solid var(--line);border-radius:8px;padding:.5em .3em;cursor:pointer;transition:border-color .2s,color .2s,background .2s;}.bkds-slot-active{color:var(--bg);background:var(--acc);border-color:var(--acc);}.bkds-slot:hover,.bkds-slot:focus-visible{border-color:var(--acc);color:var(--acc);}.bkds-slot-active:hover{color:var(--bg);}.bkds-slot:focus-visible,.bkds-day:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.bkds-day,.bkds-slot{transition:none;}}

  /* ---------- 332 · File-drop zone ---------- */
  .fdrz-wrap{width:100%;padding:1.3rem;box-sizing:border-box;}.fdrz-zone{width:100%;padding:1.6rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;border:1.5px dashed var(--line);border-radius:14px;text-align:center;box-sizing:border-box;transition:border-color .25s,background .25s;}.fdrz-zone:hover{border-color:var(--acc);background:var(--bg2);}.fdrz-icon{width:1.7rem;height:1.7rem;fill:none;stroke:var(--dim);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s;}.fdrz-zone:hover .fdrz-icon{stroke:var(--acc);}.fdrz-lead{margin:0;font:600 .78rem var(--sans);color:var(--txt);}.fdrz-sub{margin:0;font:400 .66rem var(--mono);color:var(--dim);}.fdrz-browse{background:none;border:none;padding:0;font:inherit;color:var(--acc);text-decoration:underline;cursor:pointer;}.fdrz-browse:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.fdrz-zone,.fdrz-icon{transition:none;}}

  /* ---------- 333 · Multi-step form, progress rule ---------- */
  .mstp-wrap{width:100%;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.85rem;box-sizing:border-box;}.mstp-progress{display:flex;gap:.35rem;}.mstp-seg{flex:1;height:3px;border-radius:99px;background:var(--line);}.mstp-seg-done,.mstp-seg-active{background:var(--acc);}.mstp-seg-active{opacity:.55;}.mstp-head{display:flex;flex-direction:column;gap:.2rem;}.mstp-step{margin:0;font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}.mstp-h{margin:0;font:700 .95rem var(--sans);color:var(--txt);}.mstp-field{display:flex;flex-direction:column;gap:.25rem;}.mstp-label{font:500 .6rem var(--mono);color:var(--dim);}.mstp-input{font:400 .74rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.45em .6em;box-sizing:border-box;width:100%;transition:border-color .2s;}.mstp-input:focus-visible{outline:none;border-color:var(--acc);}.mstp-actions{display:flex;justify-content:space-between;margin-top:.2rem;}.mstp-btn{font:600 .68rem var(--mono);border-radius:6px;padding:.5em .9em;cursor:pointer;transition:border-color .2s,filter .2s,color .2s;}.mstp-btn-ghost{background:none;border:1px solid var(--line);color:var(--dim);}.mstp-btn-ghost:hover,.mstp-btn-ghost:focus-visible{border-color:var(--acc);color:var(--acc);}.mstp-btn-solid{background:var(--acc);border:none;color:var(--bg);}.mstp-btn-solid:hover{filter:brightness(1.08);}.mstp-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.mstp-input,.mstp-btn{transition:none;}}

  /* ---------- 334 · Newsletter form with consent line ---------- */
  .nwsc-wrap{width:100%;padding:1.3rem;display:flex;flex-direction:column;gap:.65rem;box-sizing:border-box;}.nwsc-h{margin:0;font:700 .95rem var(--sans);color:var(--txt);letter-spacing:-0.01em;}.nwsc-field{display:flex;align-items:center;gap:.4rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.3rem .3rem .3rem .7rem;transition:border-color .2s;}.nwsc-field:has(.nwsc-input:focus-visible){border-color:var(--acc);}.nwsc-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}.nwsc-input{flex:1;background:none;border:none;color:var(--txt);font:400 .7rem var(--mono);outline:none;min-width:0;}.nwsc-input::placeholder{color:var(--dim);}.nwsc-btn{font:600 .64rem var(--mono);color:var(--bg);background:var(--acc);border:none;border-radius:6px;padding:.5em .8em;cursor:pointer;white-space:nowrap;transition:filter .2s;}.nwsc-btn:hover{filter:brightness(1.08);}.nwsc-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}.nwsc-consent{display:flex;align-items:flex-start;gap:.4rem;font:400 .6rem/1.35 var(--mono);color:var(--dim);cursor:pointer;}.nwsc-check{margin-top:.1rem;accent-color:var(--acc);}@media (prefers-reduced-motion: reduce){.nwsc-field,.nwsc-btn{transition:none;}}

  /* ---------- 335 · Search field with filter chips ---------- */
  .sfch-wrap{width:100%;padding:1.3rem;display:flex;flex-direction:column;gap:.7rem;box-sizing:border-box;}.sfch-field{display:flex;align-items:center;gap:.5rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.5em .7em;transition:border-color .2s;}.sfch-field:has(.sfch-input:focus-visible){border-color:var(--acc);}.sfch-icon{width:.85rem;height:.85rem;flex-shrink:0;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;}.sfch-input{flex:1;background:none;border:none;color:var(--txt);font:400 .74rem var(--sans);outline:none;min-width:0;}.sfch-input::placeholder{color:var(--dim);}.sfch-chips{display:flex;gap:.4rem;flex-wrap:wrap;}.sfch-cinput{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}.sfch-chip{font:500 .64rem var(--mono);color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:.35em .75em;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}.sfch-cinput:checked+.sfch-chip{background:var(--acc);color:var(--bg);border-color:var(--acc);}.sfch-cinput:focus-visible+.sfch-chip{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.sfch-field,.sfch-chip{transition:none;}}

  /* ---------- 336 · Segmented choice picker ---------- */
  .sgcp-wrap{width:100%;padding:1.4rem;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}.sgcp-fieldset{border:none;margin:0;padding:0;width:100%;}.sgcp-legend{padding:0;margin:0 0 .6rem;font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}.sgcp-group{display:flex;padding:.25rem;border:1px solid var(--line);border-radius:99px;background:var(--bg2);}.sgcp-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.sgcp-opt{flex:1;text-align:center;font:500 .68rem var(--mono);color:var(--dim);padding:.5em .6em;border-radius:99px;cursor:pointer;transition:background .2s,color .2s;}.sgcp-input:checked+.sgcp-opt{background:var(--acc);color:var(--bg);}.sgcp-input:focus-visible+.sgcp-opt{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.sgcp-opt{transition:none;}}

  /* ---------- 337 · Split contact form with rule ---------- */
  .fscr-wrap{width:100%;padding:1.2rem 1.3rem;display:grid;grid-template-columns:0.85fr 1.15fr;gap:1.1rem;box-sizing:border-box;align-items:start;}.fscr-intro{display:flex;flex-direction:column;gap:.5rem;padding-top:.1rem;}.fscr-eyebrow{margin:0;font:600 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);}.fscr-h{margin:0;font:700 1rem/1.25 var(--sans);color:var(--txt);letter-spacing:-0.01em;}.fscr-note{margin:0;font:400 .64rem/1.4 var(--mono);color:var(--dim);}.fscr-form{display:flex;flex-direction:column;gap:.6rem;padding-left:1.1rem;border-left:1px solid var(--line);}.fscr-field{display:flex;flex-direction:column;gap:.25rem;}.fscr-label{font:500 .6rem var(--mono);color:var(--dim);}.fscr-input{font:400 .74rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.45em .6em;box-sizing:border-box;width:100%;transition:border-color .2s;}.fscr-input:focus-visible{outline:none;border-color:var(--acc);}.fscr-btn{margin-top:.2rem;font:600 .7rem var(--mono);color:var(--bg);background:var(--acc);border:none;border-radius:6px;padding:.55em .8em;cursor:pointer;transition:filter .2s;}.fscr-btn:hover{filter:brightness(1.08);}.fscr-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.fscr-input,.fscr-btn{transition:none;}}

  /* ---------- 338 · Stacked brief intake form ---------- */
  .sbfi-wrap{width:100%;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.65rem;box-sizing:border-box;}.sbfi-kicker{margin:0 0 .2rem;font:600 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}.sbfi-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}.sbfi-field{display:flex;flex-direction:column;gap:.25rem;}.sbfi-field-full{width:100%;}.sbfi-label{font:500 .6rem var(--mono);color:var(--dim);}.sbfi-input,.sbfi-textarea{font:400 .72rem/1.4 var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.45em .6em;resize:none;box-sizing:border-box;width:100%;transition:border-color .2s;}.sbfi-input:focus-visible,.sbfi-textarea:focus-visible{outline:none;border-color:var(--acc);}.sbfi-btn{align-self:flex-start;margin-top:.15rem;font:600 .68rem var(--mono);color:var(--txt);background:none;border:1px solid var(--line);border-radius:6px;padding:.5em .9em;cursor:pointer;transition:border-color .2s,color .2s;}.sbfi-btn:hover,.sbfi-btn:focus-visible{border-color:var(--acc);color:var(--acc);}.sbfi-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.sbfi-input,.sbfi-textarea,.sbfi-btn{transition:none;}}

  /* ---------- 339 · Feature with thumbs ---------- */
  .gft { width: 100%; padding: 0 6%; font-family: var(--sans); }
.gft-main { width: 100%; aspect-ratio: 16 / 10; border-radius: 4px;
  background: linear-gradient(150deg, var(--acc2), var(--bg) 70%); }
.gft-row { display: flex; gap: 7px; margin-top: 8px; }
.gft-t { flex: 1; aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--line);
  background: linear-gradient(140deg, var(--bg2), var(--acc2)); cursor: pointer; padding: 0;
  opacity: .5; transition: opacity .25s, border-color .25s; }
.gft-t:hover, .gft-t:focus-visible { opacity: .85; }
.gft-on { opacity: 1; border-color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .gft-t { transition: none; } }

  /* ---------- 340 · Hairline quad grid ---------- */
  .ghq { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.ghq-cell { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.ghq-cell figcaption { position: absolute; left: 8px; bottom: 6px;
  font: 500 .55rem var(--mono); letter-spacing: .18em; color: var(--txt); opacity: .8; }
.ghq-a { background: linear-gradient(140deg, var(--acc2), var(--bg)); }
.ghq-b { background: linear-gradient(200deg, var(--acc), var(--bg2)); }
.ghq-c { background: linear-gradient(20deg, var(--bg2), var(--acc2)); }
.ghq-d { background: linear-gradient(300deg, var(--bg), var(--acc)); }

  /* ---------- 341 · Offset pair ---------- */
  .gop { width: 100%; padding: 0 6%; display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; align-items: start; font-family: var(--sans); }
.gop-one, .gop-two { margin: 0; }
.gop-two { margin-top: 1.6rem; }
.gop-art { width: 100%; border-radius: 3px; }
.gop-art1 { aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--acc2), var(--bg)); }
.gop-art2 { aspect-ratio: 1; background: linear-gradient(30deg, var(--acc), var(--bg2)); }
.gop figcaption { font: 400 .58rem var(--mono); color: var(--dim); margin-top: .45rem;
  letter-spacing: .06em; }

  /* ---------- 342 · Snap strip ---------- */
  .gss { width: 100%; display: flex; gap: 10px; overflow-x: auto; padding: 0 6% 10px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
.gss:focus-visible { outline: 1px solid var(--acc); outline-offset: 3px; }
.gss-item { flex: 0 0 62%; aspect-ratio: 4 / 3; border-radius: 4px; scroll-snap-align: center;
  display: flex; align-items: flex-end; padding: 10px; }
.gss-item span { font: 500 .58rem var(--mono); letter-spacing: .18em; color: var(--txt); }
.gss-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gss-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); }
.gss-3 { background: linear-gradient(40deg, var(--bg2), var(--acc2)); }
.gss-4 { background: linear-gradient(320deg, var(--bg), var(--acc)); }

  /* ---------- 343 · Hero with bordered spec panel ---------- */
  .hsp-wrap { width: 100%; min-height: 250px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 1.1rem; padding: 1.3rem 1.4rem; box-sizing: border-box; }
.hsp-title { margin: 0; font: 700 clamp(1.15rem, 5.6vw, 1.6rem)/1.15 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.hsp-panel { border: 1px solid var(--line); border-radius: 6px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .5rem; background: var(--bg2); }
.hsp-row { display: flex; justify-content: space-between; gap: .6rem; }
.hsp-k { font: 500 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.hsp-v { font: 500 .64rem/1.2 var(--sans); color: var(--txt); text-align: right; }
@media (max-width: 360px) { .hsp-wrap { grid-template-columns: 1fr; } }

  /* ---------- 344 · Centred statement hero ---------- */
  .hcs-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 1.6rem 1.4rem; box-sizing: border-box; }
.hcs-eyebrow { margin: 0; font: 600 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--acc); }
.hcs-title { margin: 0; font: 700 clamp(1.35rem, 6.5vw, 2rem)/1.12 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hcs-cta { display: inline-flex; align-items: center; gap: .3em; font: 600 .74rem/1 var(--mono); color: var(--txt); background: none; border: 1px solid var(--line); border-radius: 99px; padding: .7em 1.3em; text-decoration: none; transition: border-color .2s, color .2s, transform .2s; }
.hcs-cta:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-1px); }
.hcs-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hcs-cta { transition: none; } }

  /* ---------- 345 · Hero with clipped line reveal ---------- */
  .hcr-wrap { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 1.4rem; box-sizing: border-box; }
.hcr-title { margin: 0; font: 700 clamp(1.2rem, 6vw, 1.75rem)/1.18 var(--sans); letter-spacing: -.02em; color: var(--txt); text-align: center; }
.hcr-line { display: block; overflow: hidden; }
.hcr-inner { display: inline-block; transform: translateY(100%); animation: hcr-up .6s cubic-bezier(.22,1,.36,1) forwards; }
.hcr-title .hcr-line:nth-child(1) .hcr-inner { animation-delay: 0s; }
.hcr-title .hcr-line:nth-child(2) .hcr-inner { animation-delay: .09s; }
.hcr-title .hcr-line:nth-child(3) .hcr-inner { animation-delay: .18s; }
.hcr-title .hcr-line:nth-child(4) .hcr-inner { animation-delay: .27s; }
@keyframes hcr-up { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hcr-inner { animation: none; transform: translateY(0); } }

  /* ---------- 346 · Minimal hero, one hairline ---------- */
  .hmh-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.hmh-title { margin: 0; font: 700 clamp(1.5rem, 7vw, 2.2rem)/1.1 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hmh-rule { width: 2.2rem; height: 1px; background: var(--line); }
.hmh-sub { margin: 0; font: 400 .74rem/1.4 var(--sans); color: var(--dim); }

  /* ---------- 347 · Asymmetric hero, offset caption ---------- */
  .hoc-wrap { width: 100%; min-height: 250px; display: grid; grid-template-columns: 1.4rem 1fr; align-items: end; gap: .8rem; padding: 1.3rem 1.3rem 1.5rem; box-sizing: border-box; }
.hoc-side { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font: 500 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); justify-self: center; }
.hoc-main { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.hoc-title { margin: 0; font: 700 clamp(1.15rem, 6vw, 1.7rem)/1.15 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.hoc-cap { margin: 0; max-width: 28ch; font: 400 .7rem/1.4 var(--sans); color: var(--dim); }

  /* ---------- 348 · Outlined wordmark hero ---------- */
  .how-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.how-tag { font: 600 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--dim); }
.how-word { margin: 0; font: 800 clamp(2.2rem, 13vw, 3.6rem)/1 var(--sans); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px var(--txt); text-stroke: 1.5px var(--txt); }
.how-sub { margin: 0; max-width: 24ch; font: 400 .72rem/1.4 var(--sans); color: var(--dim); }

  /* ---------- 349 · Hero with scrolling kicker strip ---------- */
  .hks-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: 1.4rem 0; box-sizing: border-box; overflow: hidden; }
.hks-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .5rem 0; overflow: hidden; }
.hks-track { display: flex; gap: 2rem; width: max-content; animation: hks-scroll 14s linear infinite; }
.hks-item { font: 500 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); white-space: nowrap; }
.hks-title { margin: 0; padding: 0 1.5rem; font: 700 clamp(1.3rem, 6.4vw, 1.9rem)/1.1 var(--sans); letter-spacing: -.02em; color: var(--txt); }
@keyframes hks-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hks-track { animation: none; } }

  /* ---------- 350 · Split editorial hero ---------- */
  .hse-wrap { width: 100%; min-height: 250px; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 1.2rem; padding: 1.4rem 1.5rem; box-sizing: border-box; }
.hse-title { margin: 0; font: 700 clamp(1.3rem, 6.6vw, 1.9rem)/1.05 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hse-meta { display: flex; align-items: stretch; gap: .9rem; height: 100%; }
.hse-rule { width: 1px; background: var(--line); flex: none; }
.hse-list { margin: auto 0; display: flex; flex-direction: column; gap: .55rem; }
.hse-row { display: flex; flex-direction: column; gap: .1rem; }
.hse-k { font: 500 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 0; }
.hse-v { font: 400 .72rem/1.2 var(--sans); color: var(--txt); margin: 0; }
@media (max-width: 360px) { .hse-wrap { grid-template-columns: 1fr; gap: .8rem; } .hse-meta { flex-direction: row; } }

  /* ---------- 351 · Ambient glow media frame ---------- */
  .ambg-wrap{position:relative;width:100%;padding:1.6rem;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}.ambg-glow{position:absolute;width:9rem;height:9rem;border-radius:50%;background:var(--acc);opacity:.28;filter:blur(30px);animation:ambg-breathe 6s ease-in-out infinite;}.ambg-frame{position:relative;width:9.5rem;aspect-ratio:1/1;border-radius:14px;background:linear-gradient(160deg,var(--card),var(--bg));border:1px solid var(--line);display:flex;align-items:flex-end;padding:.6rem;box-sizing:border-box;}.ambg-cap{font:500 .6rem var(--mono);color:var(--dim);}@keyframes ambg-breathe{0%,100%{opacity:.2;transform:scale(.94);}50%{opacity:.4;transform:scale(1.05);}}@media (prefers-reduced-motion: reduce){.ambg-glow{animation:none;opacity:.28;}}

  /* ---------- 352 · Audio player row with waveform ---------- */
  .awfr-wrap{width:100%;padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.7rem;box-sizing:border-box;}.awfr-play{flex-shrink:0;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--acc);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;}.awfr-play svg{width:.8rem;height:.8rem;fill:var(--bg);}.awfr-play:hover{transform:scale(1.08);}.awfr-play:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}.awfr-wave{flex:1;width:100%;min-width:0;height:1.5rem;overflow:visible;}.awfr-wave rect{fill:var(--line);}.awfr-wave rect.awfr-played{fill:var(--acc);}.awfr-time{flex-shrink:0;font:500 .6rem var(--mono);color:var(--dim);white-space:nowrap;}@media (prefers-reduced-motion: reduce){.awfr-play{transition:none;}}

  /* ---------- 353 · Media card with duration pill ---------- */
  .mcdp-wrap{width:100%;max-width:15rem;margin:0;padding:1rem;box-sizing:border-box;}.mcdp-thumb{position:relative;width:100%;aspect-ratio:16/10;border-radius:10px;background:conic-gradient(from 200deg at 30% 30%,var(--acc2),var(--card) 40%,var(--bg2) 75%,var(--card));border:1px solid var(--line);}.mcdp-pill{position:absolute;bottom:.5rem;right:.5rem;font:600 .58rem var(--mono);color:rgba(255,255,255,.92);background:rgba(0,0,0,.5);padding:.2em .5em;border-radius:99px;}.mcdp-cap{padding:.6rem 0 0;}.mcdp-h{margin:0 0 .5rem;font:600 .78rem var(--sans);color:var(--txt);}.mcdp-rule{border:none;border-top:1px solid var(--line);margin:0 0 .45rem;}.mcdp-meta{margin:0;font:400 .6rem var(--mono);color:var(--dim);}

  /* ---------- 354 · Editorial figure with caption ---------- */
  .edfc-wrap{width:100%;margin:0;padding:1rem 1.2rem;box-sizing:border-box;}.edfc-media{width:100%;aspect-ratio:4/3;border-radius:4px;background:radial-gradient(140% 130% at 25% 20%,var(--acc2),var(--card) 45%,var(--bg2) 85%);border:1px solid var(--line);}.edfc-rule{border:none;border-top:1px solid var(--line);margin:.6rem 0;}.edfc-cap{display:flex;gap:.6rem;align-items:baseline;}.edfc-num{flex-shrink:0;font:600 .6rem var(--mono);color:var(--acc);}.edfc-txt{font:400 .66rem/1.4 var(--sans);color:var(--dim);}

  /* ---------- 355 · 16:9 embed frame with chrome bar ---------- */
  .emfc-wrap{width:100%;padding:1rem;box-sizing:border-box;}.emfc-panel{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);}.emfc-bar{display:flex;align-items:center;gap:.35rem;padding:.5rem .6rem;border-bottom:1px solid var(--line);}.emfc-dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--line);}.emfc-url{margin-left:.4rem;flex:1;font:400 .58rem var(--mono);color:var(--dim);background:var(--bg2);border-radius:5px;padding:.2em .5em;}.emfc-body{aspect-ratio:16/9;background:radial-gradient(160% 130% at 15% -10%,var(--acc2),var(--card) 40%,var(--bg2) 75%);}

  /* ---------- 356 · Full-bleed media band with overlay title ---------- */
  .flbo-wrap{width:100%;padding:0;}.flbo-band{position:relative;width:100%;min-height:10.5rem;overflow:hidden;background:radial-gradient(130% 100% at 80% 0%,var(--acc2),var(--bg2) 55%);display:flex;align-items:flex-end;}.flbo-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%);}.flbo-content{position:relative;padding:1.1rem 1.3rem;}.flbo-kicker{margin:0 0 .3rem;font:600 .58rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);}.flbo-h{margin:0;font:700 1.05rem/1.25 var(--sans);color:rgba(255,255,255,.96);max-width:14rem;}

  /* ---------- 357 · Media grid with feature cell ---------- */
  .mgfc-wrap{width:100%;padding:1rem;box-sizing:border-box;}.mgfc-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,3.4rem);gap:.4rem;}.mgfc-cell{margin:0;border-radius:8px;background:linear-gradient(150deg,var(--card),var(--bg));border:1px solid var(--line);position:relative;display:flex;align-items:flex-end;}.mgfc-feature{grid-column:1/3;grid-row:1/3;background:linear-gradient(150deg,var(--acc2),var(--card) 65%);}.mgfc-label{margin:0;padding:.4em .55em;font:600 .58rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--txt);}

  /* ---------- 358 · Video frame with play affordance ---------- */
  .vidp-wrap{width:100%;margin:0;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem;box-sizing:border-box;}.vidp-frame{position:relative;width:100%;height:8.2rem;border-radius:12px;overflow:hidden;background:radial-gradient(130% 140% at 20% 15%,var(--acc2),var(--card) 42%,var(--bg2) 78%);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}.vidp-play{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--acc);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;}.vidp-play svg{width:.9rem;height:.9rem;fill:var(--bg);}.vidp-play:hover{transform:scale(1.08);}.vidp-play:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}.vidp-time{position:absolute;bottom:.5rem;right:.55rem;font:500 .58rem var(--mono);color:rgba(255,255,255,.92);background:rgba(0,0,0,.45);padding:.2em .5em;border-radius:5px;}.vidp-cap{margin:0;padding:0;}.vidp-title{margin:0;font:600 .78rem var(--sans);color:var(--txt);}.vidp-sub{margin:.2rem 0 0;font:400 .62rem var(--mono);color:var(--dim);}@media (prefers-reduced-motion: reduce){.vidp-play{transition:none;}}

  /* ---------- 359 · Compact price strip ---------- */
  .pcs-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.2rem; box-sizing: border-box; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pcs-label { margin: 0; font: 400 .68rem/1.2 var(--sans); color: var(--dim); }
.pcs-price { margin: 0; font: 700 .95rem/1 var(--mono); color: var(--txt); flex: none; }
.pcs-cta { flex: none; display: inline-flex; align-items: center; gap: .25em; font: 600 .64rem/1 var(--mono); color: var(--acc); text-decoration: none; transition: transform .2s; }
.pcs-cta:hover { transform: translateX(.15em); }
.pcs-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pcs-cta { transition: none; } }

  /* ---------- 360 · Comparison table, hairline grid ---------- */
  .pch-wrap { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 1.2rem 1.3rem; box-sizing: border-box; }
.pch-table { width: 100%; border-collapse: collapse; font: 400 .64rem/1.2 var(--sans); }
.pch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.pch-th { text-align: center; font: 600 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: .4rem .3rem; border-bottom: 1px solid var(--line); }
.pch-corner { text-align: left; }
.pch-rh { text-align: left; font: 500 .64rem/1.2 var(--sans); color: var(--txt); padding: .5rem .3rem; border-bottom: 1px solid var(--line); }
.pch-td { text-align: center; color: var(--txt); padding: .5rem .3rem; border-bottom: 1px solid var(--line); }
.pch-no { color: var(--dim); }
.pch-yes { color: var(--acc); font-weight: 600; }
.pch-table tbody tr:last-child .pch-rh, .pch-table tbody tr:last-child .pch-td { border-bottom: none; }

  /* ---------- 361 · What's included checklist panel ---------- */
  .pic-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1.3rem 1.4rem; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.pic-title { margin: 0; font: 600 .78rem/1 var(--sans); color: var(--txt); }
.pic-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.pic-item { display: flex; align-items: center; gap: .5rem; font: 400 .68rem/1.2 var(--sans); color: var(--txt); }
.pic-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--acc); color: var(--bg); font-size: .62em; flex: none; }
.pic-price { margin: .2rem 0 0; font: 700 1.15rem/1 var(--mono); color: var(--txt); border-top: 1px solid var(--line); padding-top: .7rem; }
.pic-per { font: 500 .58rem/1 var(--mono); color: var(--dim); }

  /* ---------- 362 · Price with open breakdown disclosure ---------- */
  .pmd-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.4rem; box-sizing: border-box; }
.pmd-price { margin: 0; font: 700 clamp(1.4rem, 6.5vw, 1.9rem)/1 var(--mono); color: var(--txt); }
.pmd-per { font: 500 .6rem/1 var(--mono); color: var(--dim); margin-left: .2em; }
.pmd-details { width: 100%; max-width: 15rem; }
.pmd-summary { list-style: none; cursor: pointer; text-align: center; font: 500 .64rem/1 var(--mono); color: var(--dim); padding: .3rem 0; transition: color .2s; }
.pmd-summary::-webkit-details-marker { display: none; }
.pmd-summary::after { content: '+'; margin-left: .4em; }
.pmd-details[open] .pmd-summary::after { content: '−'; }
.pmd-summary:hover { color: var(--acc); }
.pmd-summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pmd-lines { margin: .5rem 0 0; padding: .5rem 0 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; border-top: 1px solid var(--line); }
.pmd-line { display: flex; justify-content: space-between; font: 400 .64rem/1.2 var(--sans); color: var(--dim); }
.pmd-line span:last-child { font-family: var(--mono); color: var(--txt); }
@media (prefers-reduced-motion: reduce) { .pmd-summary { transition: none; } }

  /* ---------- 363 · Quote panel with line-item breakdown ---------- */
  .pqb-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 1.2rem 1.4rem; box-sizing: border-box; }
.pqb-head { display: flex; align-items: baseline; justify-content: space-between; }
.pqb-title { margin: 0; font: 600 .8rem/1 var(--sans); color: var(--txt); }
.pqb-num { font: 400 .58rem/1 var(--mono); color: var(--dim); }
.pqb-lines { margin: 0; padding: .3rem 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pqb-line { display: flex; justify-content: space-between; padding: .2rem 0; font: 400 .66rem/1.2 var(--sans); color: var(--dim); }
.pqb-amt { font: 400 .66rem/1.2 var(--mono); color: var(--txt); }
.pqb-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .2rem; }
.pqb-tlabel { font: 600 .68rem/1 var(--sans); color: var(--txt); }
.pqb-tamt { font: 700 .95rem/1 var(--mono); color: var(--acc); }

  /* ---------- 364 · Single-price statement panel ---------- */
  .psp-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.psp-kicker { margin: 0 0 .3rem; font: 600 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.psp-price { margin: 0; font: 700 clamp(2rem, 9vw, 2.8rem)/1 var(--mono); color: var(--txt); letter-spacing: -.02em; }
.psp-cur { font-size: .55em; vertical-align: .5em; color: var(--dim); }
.psp-per { font: 500 .7rem/1 var(--mono); color: var(--dim); margin-left: .2em; }
.psp-note { margin: 0; font: 400 .64rem/1.3 var(--sans); color: var(--dim); }
.psp-btn { margin-top: .4rem; font: 600 .72rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .7em 1.4em; cursor: pointer; transition: transform .2s, filter .2s; }
.psp-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.psp-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .psp-btn { transition: none; } }

  /* ---------- 365 · Three-tier pricing row ---------- */
  .pte-wrap { width: 100%; min-height: 250px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: .55rem; padding: 1.1rem; box-sizing: border-box; }
.pte-card { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .55rem; display: flex; flex-direction: column; gap: .4rem; background: var(--bg2); position: relative; }
.pte-emph { background: var(--card); border-color: var(--acc); transform: translateY(-.3rem); }
.pte-badge { position: absolute; top: -.55rem; left: 50%; transform: translateX(-50%); font: 600 .5rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bg); background: var(--acc); border-radius: 99px; padding: .25em .55em; white-space: nowrap; }
.pte-name { margin: .2rem 0 0; font: 600 .7rem/1 var(--sans); color: var(--txt); }
.pte-price { margin: 0; font: 700 1.15rem/1 var(--mono); color: var(--txt); }
.pte-per { font: 500 .55rem/1 var(--mono); color: var(--dim); }
.pte-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .25rem; font: 400 .56rem/1.3 var(--sans); color: var(--dim); }
.pte-btn { margin-top: auto; font: 600 .6rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .55em .4em; cursor: pointer; transition: filter .2s; }
.pte-btn:hover { filter: brightness(1.08); }
.pte-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pte-btn { transition: none; } }

  /* ---------- 366 · Monthly/annual toggle, pure CSS ---------- */
  .ptm-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.ptm-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ptm-head { display: flex; align-items: center; gap: .55rem; }
.ptm-opt { font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ptm-switch { display: inline-flex; align-items: center; width: 2.1rem; height: 1.15rem; border-radius: 99px; background: var(--line); padding: .15rem; cursor: pointer; transition: background .2s; }
.ptm-knob { width: .85rem; height: .85rem; border-radius: 50%; background: var(--txt); transition: transform .2s; }
.ptm-input:checked ~ .ptm-head .ptm-switch { background: var(--acc); }
.ptm-input:checked ~ .ptm-head .ptm-switch .ptm-knob { transform: translateX(.95rem); }
.ptm-input:focus-visible ~ .ptm-head .ptm-switch { outline: 2px solid var(--acc); outline-offset: 2px; }
.ptm-price { margin: 0; font: 700 clamp(1.6rem, 7vw, 2.2rem)/1 var(--mono); color: var(--txt); }
.ptm-per { font: 500 .55rem/1 var(--mono); color: var(--dim); margin-left: .15em; }
.ptm-annual { display: none; }
.ptm-input:checked ~ .ptm-price .ptm-monthly { display: none; }
.ptm-input:checked ~ .ptm-price .ptm-annual { display: inline; }
.ptm-save { margin: 0; font: 400 .62rem/1.2 var(--sans); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .ptm-switch, .ptm-knob { transition: none; } }

  /* ---------- 367 · Labelled rule seam ---------- */
  .slr { width: 100%; padding: 0 6%; display: flex; align-items: center; gap: .9rem; }
.slr-line { flex: 1; height: 1px; background: var(--line); }
.slr-label { font: 500 .58rem var(--mono); letter-spacing: .26em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap; }

  /* ---------- 368 · Sweeping rule seam ---------- */
  .ssr { width: 100%; padding: 0 6%; }
.ssr-track { position: relative; display: block; height: 1px; background: var(--line);
  overflow: hidden; }
.ssr-glint { position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  animation: ssr-run 3.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes ssr-run { 0% { left: -30%; } 60%, 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ssr-glint { animation: none; } }

  /* ---------- 369 · Alternating line stack ---------- */
  .tas { width: 100%; padding: 0 7%; display: flex; flex-direction: column;
  font: 700 clamp(1.3rem, 7vw, 2rem)/1.02 var(--sans); letter-spacing: -0.04em; color: var(--txt); }
.tas-l { align-self: flex-start; }
.tas-r { align-self: flex-end; }
.tas-em { color: var(--acc); }

  /* ---------- 370 · Drop-cap lede ---------- */
  .tdc { width: 100%; padding: 0 7%; font: 400 .82rem/1.62 var(--sans); color: var(--dim);
  text-wrap: pretty; }
.tdc::first-letter { float: left; font: 700 3.1rem/0.82 var(--sans); color: var(--acc);
  padding: .06em .12em 0 0; }
.tdc code { font: 400 .78em var(--mono); color: var(--txt); }

  /* ---------- 371 · Rotating word headline ---------- */
  .trw { width: 100%; padding: 0 7%; font: 600 clamp(1.15rem, 5.4vw, 1.6rem)/1.25 var(--sans);
  letter-spacing: -0.025em; color: var(--txt); }
.trw-slot { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.25em; }
.trw-slot i { grid-area: 1 / 1; font-style: normal; color: var(--acc);
  animation: trw-cycle 9s infinite; opacity: 0; }
.trw-slot i:nth-child(2) { animation-delay: 3s; }
.trw-slot i:nth-child(3) { animation-delay: 6s; }
@keyframes trw-cycle {
  0%   { opacity: 0; transform: translateY(60%); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 0; transform: translateY(-60%); }
  100% { opacity: 0; transform: translateY(-60%); }
}
@media (prefers-reduced-motion: reduce) { .trw-slot i { animation: none; opacity: 0; } .trw-slot i:first-child { opacity: 1; } }

  /* ---------- 372 · Stroke headline ---------- */
  .tsh { width: 100%; padding: 0 7%; font: 700 clamp(1.7rem, 9vw, 2.6rem)/1.02 var(--sans);
  letter-spacing: -0.045em; text-transform: uppercase; }
.tsh-out { color: transparent; -webkit-text-stroke: 1px var(--txt); }
.tsh-in { color: var(--acc); }

  /* ---------- 373 · Noise wash ---------- */
  .nsw { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(160deg, var(--acc2), var(--bg) 62%); }
.nsw-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; mix-blend-mode: overlay; }

  /* ---------- 374 · Topographic rings ---------- */
  .tpr { position: absolute; inset: 0; background: var(--bg);
  background-image: repeating-radial-gradient(circle at 30% 40%, transparent 0 17px, var(--line) 17px 18px); }
.tpr-veil { position: absolute; inset: 0;
  background: radial-gradient(85% 70% at 30% 40%, transparent, var(--bg) 88%); }

  /* ---------- 375 · Vignette frame ---------- */
  .vgf { position: absolute; inset: 0; background: var(--bg2);
  box-shadow: inset 0 0 90px 30px rgba(0,0,0,.55); }
.vgf-edge { position: absolute; inset: 14px; border: 1px solid var(--line); border-radius: 2px; }

  /* ---------- 376 · Callout band ---------- */
  .clb { width: 100%; margin: 0 6%; border-left: 2px solid var(--acc); background: rgba(255,255,255,.03);
  padding: .9rem 1.1rem; border-radius: 0 4px 4px 0; font-family: var(--sans); }
.clb-tag { font: 500 .54rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
.clb-text { font: 400 .78rem/1.55 var(--sans); color: var(--txt); margin-top: .4rem; text-wrap: pretty; }

  /* ---------- 377 · Definition pair ---------- */
  .dfp { width: 100%; padding: 0 7%; margin: 0; font-family: var(--sans); }
.dfp-row { padding: .65rem 0; border-top: 1px solid var(--line); }
.dfp-row dt { font: 600 .78rem var(--sans); color: var(--acc); margin: 0; letter-spacing: -0.01em; }
.dfp-row dd { font: 400 .72rem/1.55 var(--sans); color: var(--dim); margin: .2rem 0 0; }

  /* ---------- 378 · Timeline rail ---------- */
  .tmr { width: 100%; padding: 0 7%; position: relative; font-family: var(--sans); }
.tmr::before { content: ''; position: absolute; left: calc(7% + 3px); top: .4rem; bottom: .4rem;
  width: 1px; background: var(--line); }
.tmr-item { position: relative; padding-left: 1.4rem; padding-bottom: .8rem; }
.tmr-item:last-child { padding-bottom: 0; }
.tmr-dot { position: absolute; left: 0; top: .32rem; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--line); }
.tmr-now .tmr-dot { background: var(--acc); border-color: var(--acc); }
.tmr-item time { display: block; font: 500 .56rem var(--mono); letter-spacing: .2em; color: var(--dim); }
.tmr-item p { font: 400 .74rem/1.5 var(--sans); color: var(--txt); margin-top: .18rem; }

  /* ---------- 379 · Log and activity feed ---------- */
  .dac-wrap { width: 100%; list-style: none; margin: 0; padding: 1rem 1.2rem; box-sizing: border-box; font-family: var(--sans); position: relative; }
.dac-row { display: flex; gap: .6rem; padding: .5rem 0; position: relative; }
.dac-row::before { content: ''; position: absolute; left: .21rem; top: 1rem; bottom: -.5rem; width: 1px; background: var(--line); }
.dac-row:last-child::before { display: none; }
.dac-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--acc); flex: none; margin-top: .18rem; box-shadow: 0 0 0 3px var(--bg2); z-index: 1; }
.dac-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dac-line { margin: 0; font: 400 .66rem var(--sans); color: var(--txt); }
.dac-time { font: 400 .56rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }

  /* ---------- 380 · Notification and alert stack ---------- */
  .das-wrap { width: 100%; padding: 1rem 1.1rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .5rem; font-family: var(--sans); }
.das-item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .7rem; border-radius: 8px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc); }
.das-warn { border-left-color: var(--acc2); }
.das-body { flex: 1; min-width: 0; }
.das-title { margin: 0; font: 600 .64rem var(--sans); color: var(--txt); }
.das-desc { margin: .15rem 0 0; font: 400 .58rem/1.3 var(--sans); color: var(--dim); }
.das-close { flex: none; background: none; border: none; color: var(--dim); font: 400 .8rem var(--sans); line-height: 1; cursor: pointer; padding: 0 .1rem; }
.das-close:hover, .das-close:focus-visible { color: var(--txt); }
.das-close:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

  /* ---------- 381 · Empty-state panel ---------- */
  .des-wrap { width: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1.4rem; box-sizing: border-box; text-align: center; font-family: var(--sans); border: 1px dashed var(--line); border-radius: 10px; margin: .6rem; }
.des-mark { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.des-mark::before, .des-mark::after { content: ''; position: absolute; background: var(--dim); border-radius: 1px; }
.des-mark::before { top: 45%; left: 25%; width: 50%; height: 1px; }
.des-mark::after { top: 25%; left: 45%; width: 1px; height: 50%; }
.des-title { margin: 0; font: 600 .72rem var(--sans); color: var(--txt); }
.des-desc { margin: 0; max-width: 24ch; font: 400 .6rem/1.4 var(--sans); color: var(--dim); }
.des-btn { margin-top: .3rem; font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--bg); background: var(--acc); border: none; border-radius: 6px; padding: .5rem .9rem; cursor: pointer; }
.des-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

  /* ---------- 382 · Job queue list with state pills ---------- */
  .djq-wrap { width: 100%; list-style: none; margin: 0; padding: 1rem 1.2rem; box-sizing: border-box; font-family: var(--sans); }
.djq-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.djq-row:last-child { border-bottom: none; }
.djq-id { font: 400 .56rem var(--mono); color: var(--dim); flex: none; }
.djq-name { font: 500 .66rem var(--sans); color: var(--txt); flex: 1; }
.djq-pill { font: 500 .56rem var(--mono); padding: .2rem .5rem; border-radius: 99px; border: 1px solid var(--line); flex: none; }
.djq-run { color: var(--acc); border-color: var(--acc); }
.djq-wait { color: var(--dim); }
.djq-done { color: var(--txt); }
.djq-fail { color: var(--acc2); border-color: var(--acc2); }

  /* ---------- 383 · KPI header row with filter bar ---------- */
  .dkf-wrap { width: 100%; padding: 1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .8rem; font-family: var(--sans); }
.dkf-kpis { display: flex; gap: .9rem; }
.dkf-tile { flex: 1; display: flex; flex-direction: column; gap: .2rem; padding-right: .9rem; border-right: 1px solid var(--line); }
.dkf-tile:last-child { border-right: none; padding-right: 0; }
.dkf-num { font: 600 .92rem var(--mono); color: var(--txt); }
.dkf-lbl { font: 400 .56rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.dkf-filters { display: flex; gap: .35rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.dkf-chip { font: 500 .58rem var(--mono); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: .32rem .6rem; cursor: pointer; transition: color .15s, border-color .15s; }
.dkf-chip-on { color: var(--bg); background: var(--acc); border-color: var(--acc); }
.dkf-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dkf-chip { transition: none; } }

  /* ---------- 384 · Settings form panel, grouped rows ---------- */
  .dsg-wrap { width: 100%; padding: 1.2rem 1.3rem; box-sizing: border-box; font-family: var(--sans); }
.dsg-group-label { margin: 0 0 .5rem; font: 500 .54rem var(--mono); text-transform: uppercase; letter-spacing: .22em; color: var(--acc); }
.dsg-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.dsg-row:last-child { border-bottom: none; }
.dsg-name { margin: 0; font: 500 .66rem var(--sans); color: var(--txt); }
.dsg-note { margin: .1rem 0 0; font: 400 .58rem/1.3 var(--sans); color: var(--dim); }
.dsg-toggle { flex: none; appearance: none; width: 1.8rem; height: 1.05rem; border-radius: 99px; background: var(--line); border: none; position: relative; cursor: pointer; transition: background .15s; }
.dsg-toggle::before { content: ''; position: absolute; top: .15rem; left: .15rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--txt); transition: transform .15s; }
.dsg-toggle:checked { background: var(--acc); }
.dsg-toggle:checked::before { transform: translateX(.75rem); background: var(--bg); }
.dsg-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dsg-toggle, .dsg-toggle::before { transition: none; } }

  /* ---------- 385 · Compact sidebar and content shell ---------- */
  .dss-wrap { width: 100%; min-height: 230px; display: flex; align-items: stretch; font-family: var(--sans); }
.dss-nav { flex: none; width: 34%; display: flex; flex-direction: column; gap: .1rem; padding: 1rem .8rem; border-right: 1px solid var(--line); }
.dss-link { font: 500 .62rem var(--sans); color: var(--dim); text-decoration: none; padding: .4rem .5rem; border-radius: 5px; }
.dss-link:hover { color: var(--txt); }
.dss-on { color: var(--txt); background: var(--card); }
.dss-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.dss-main { flex: 1; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; justify-content: center; min-width: 0; }
.dss-heading { margin: 0; font: 600 .74rem var(--sans); color: var(--txt); }
.dss-body { margin: 0; font: 400 .6rem/1.4 var(--sans); color: var(--dim); max-width: 26ch; }

  /* ---------- 386 · Data table with status column ---------- */
  .dst-wrap { width: 100%; border-collapse: collapse; font: 400 .64rem/1.2 var(--sans); }
.dst-th { text-align: left; font: 600 .56rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.dst-td { text-align: left; color: var(--txt); padding: .5rem .5rem; border-bottom: 1px solid var(--line); }
.dst-dim { color: var(--dim); }
.dst-row:last-child .dst-td { border-bottom: none; }
.dst-pill { display: inline-flex; align-items: center; gap: .3rem; font: 500 .56rem var(--mono); padding: .2rem .5rem; border-radius: 99px; border: 1px solid var(--line); }
.dst-pill::before { content: ''; width: .35rem; height: .35rem; border-radius: 50%; }
.dst-ok::before { background: var(--acc); }
.dst-warn::before { background: var(--acc2); }
.dst-off::before { background: var(--dim); }

  /* ---------- 387 · Usage meter row with bars ---------- */
  .dum-wrap { width: 100%; padding: 1.1rem 1.3rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .7rem; font-family: var(--sans); }
.dum-row { display: flex; flex-direction: column; gap: .3rem; }
.dum-head { display: flex; justify-content: space-between; font: 400 .6rem var(--mono); color: var(--dim); }
.dum-head span:last-child { color: var(--txt); }
.dum-track { width: 100%; height: .3rem; border-radius: 99px; background: var(--line); overflow: hidden; }
.dum-bar { height: 100%; border-radius: 99px; background: var(--acc); }
.dum-warn { background: var(--acc2); }

  /* ---------- 388 · Hover-reveal caption ---------- */
  .hrc { width: 100%; padding: 0 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hrc-cell { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; }
.hrc-a { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.hrc-b { background: linear-gradient(320deg, var(--acc), var(--bg2)); }
.hrc-cell figcaption { position: absolute; inset: auto 0 0 0; padding: .7rem .8rem;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
  transform: translateY(100%); opacity: 0; transition: transform .38s cubic-bezier(.76,0,.24,1), opacity .3s;
  font-family: var(--sans); }
.hrc-cell:hover figcaption, .hrc-cell:focus-within figcaption { transform: translateY(0); opacity: 1; }
.hrc-cell figcaption b { display: block; font: 600 .72rem var(--sans); color: var(--txt); }
.hrc-cell figcaption span { font: 400 .58rem var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .hrc-cell figcaption { transition: none; opacity: 1; transform: none; } }

  /* ---------- 389 · Masonry three-column ---------- */
  .msn { width: 100%; padding: 0 6%; columns: 3; column-gap: 8px; }
.msn-c { display: block; width: 100%; margin-bottom: 8px; border-radius: 3px; break-inside: avoid; }
.msn-1 { height: 58px; background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.msn-2 { height: 92px; background: linear-gradient(200deg, var(--acc), var(--bg2)); }
.msn-3 { height: 44px; background: linear-gradient(20deg, var(--bg2), var(--acc2)); }
.msn-4 { height: 76px; background: linear-gradient(330deg, var(--bg), var(--acc)); }
.msn-5 { height: 50px; background: linear-gradient(90deg, var(--acc2), var(--bg2)); }
.msn-6 { height: 66px; background: linear-gradient(240deg, var(--acc), var(--bg)); }

  /* ---------- 390 · Quote over media frame ---------- */
  .qof { position: relative; width: 88%; margin: 0; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; }
.qof-art { position: absolute; inset: 0; background: linear-gradient(140deg, var(--acc2), var(--bg) 72%); }
.qof-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.68), transparent 62%); }
.qof-cap { position: absolute; inset: auto 0 0 0; padding: .9rem 1rem; font-family: var(--sans); }
.qof-cap q { display: block; font: 500 .88rem/1.35 var(--sans); color: var(--txt); quotes: '\201C' '\201D'; }
.qof-cap span { font: 400 .56rem var(--mono); letter-spacing: .16em; color: var(--dim); }

  /* ---------- 391 · Anchor list with progress ---------- */
  .nap { display: flex; flex-direction: column; gap: .5rem; padding: 0 7%; width: 100%; font-family: var(--sans); }
.nap a { display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font: 400 .72rem var(--sans); color: var(--dim); transition: color .25s; }
.nap-b { width: 16px; height: 1px; background: var(--line); transition: width .3s, background .3s; }
.nap a:hover, .nap a:focus-visible { color: var(--txt); }
.nap a:hover .nap-b, .nap a:focus-visible .nap-b { width: 24px; }
.nap-on { color: var(--txt) !important; }
.nap-on .nap-b { width: 28px; background: var(--acc); }
@media (prefers-reduced-motion: reduce) { .nap a, .nap-b { transition: none; } }

  /* ---------- 392 · Mega-menu columns ---------- */
  .mgm { width: 100%; margin: 0 5%; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); padding: .9rem 1rem; display: grid; grid-template-columns: 1fr 1fr 1.2fr;
  gap: .9rem; font-family: var(--sans); }
.mgm-col { display: flex; flex-direction: column; gap: .3rem; }
.mgm-col h4 { font: 500 .52rem var(--mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .2rem; }
.mgm-col a { font: 400 .7rem var(--sans); color: var(--txt); text-decoration: none; opacity: .82; }
.mgm-col a:hover, .mgm-col a:focus-visible { color: var(--acc); opacity: 1; }
.mgm-feat { border-radius: 4px; padding: .7rem .8rem;
  background: linear-gradient(150deg, var(--acc2), var(--bg2)); display: flex;
  flex-direction: column; justify-content: flex-end; gap: .2rem; }
.mgm-kick { font: 500 .5rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.mgm-feat b { font: 600 .74rem/1.25 var(--sans); color: var(--txt); }

  /* ---------- 393 · Lead-time and availability strip ---------- */
  .pav-wrap { width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 1.2rem; box-sizing: border-box; font-family: var(--sans); }
.pav-status { display: flex; align-items: center; gap: .45rem; }
.pav-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--acc); flex: none; animation: pav-pulse 2.4s ease-in-out infinite; }
@keyframes pav-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 0 4px rgba(255,255,255,.06); } }
.pav-label { font: 500 .64rem var(--sans); color: var(--txt); }
.pav-sep { width: 1px; height: 1.1rem; background: var(--line); flex: none; }
.pav-lead { display: flex; align-items: baseline; gap: .35rem; }
.pav-lead-num { font: 600 .78rem var(--mono); color: var(--acc); }
.pav-lead-note { font: 400 .58rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .pav-dot { animation: none; } }

  /* ---------- 394 · What's in the box, itemised panel ---------- */
  .pbx-wrap { width: 100%; padding: 1.3rem 1.4rem; box-sizing: border-box; font-family: var(--sans); }
.pbx-kick { font: 500 .54rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); margin: 0 0 .7rem; }
.pbx-list { list-style: none; margin: 0; padding: 0; counter-reset: pbx; }
.pbx-row { display: flex; align-items: baseline; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--line); counter-increment: pbx; }
.pbx-row:last-child { border-bottom: none; }
.pbx-row::before { content: counter(pbx, decimal-leading-zero); font: 400 .56rem var(--mono); color: var(--dim); }
.pbx-qty { font: 600 .62rem var(--mono); color: var(--acc); flex: none; }
.pbx-name { font: 400 .68rem var(--sans); color: var(--txt); }

  /* ---------- 395 · Two-option comparison panel ---------- */
  .pct-wrap { width: 100%; min-height: 220px; display: flex; align-items: stretch; padding: 1.2rem 1rem; box-sizing: border-box; font-family: var(--sans); }
.pct-side { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; padding: 0 .5rem; }
.pct-name { font: 600 .78rem var(--sans); color: var(--txt); margin: 0 0 .6rem; }
.pct-row { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font: 400 .6rem var(--mono); color: var(--dim); }
.pct-row span:last-child { color: var(--txt); }
.pct-rule { position: relative; width: 1px; background: var(--line); display: flex; align-items: center; justify-content: center; flex: none; }
.pct-vs { position: absolute; background: var(--bg2); color: var(--acc); font: 600 .58rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 99px; }

  /* ---------- 396 · Product detail accordion ---------- */
  .pda-wrap { width: 100%; padding: 1.2rem 1.4rem; box-sizing: border-box; font-family: var(--sans); }
.pda-item { border-bottom: 1px solid var(--line); padding: .55rem 0; }
.pda-item:first-child { padding-top: 0; }
.pda-sum { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font: 600 .68rem var(--sans); color: var(--txt); }
.pda-sum::-webkit-details-marker { display: none; }
.pda-ico { position: relative; width: .6rem; height: .6rem; flex: none; }
.pda-ico::before, .pda-ico::after { content: ''; position: absolute; background: var(--dim); border-radius: 1px; }
.pda-ico::before { top: 45%; left: 0; width: 100%; height: 1px; }
.pda-ico::after { top: 0; left: 45%; width: 1px; height: 100%; transition: transform .15s; }
.pda-item[open] .pda-ico::after { transform: rotate(90deg); opacity: 0; }
.pda-body { margin: .55rem 0 0; font: 400 .64rem/1.4 var(--sans); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .pda-ico::after { transition: none; } }

  /* ---------- 397 · Feature callout row, hairline numbering ---------- */
  .pfc-wrap { width: 100%; padding: 1.3rem 1.2rem; box-sizing: border-box; display: flex; gap: 0; font-family: var(--sans); }
.pfc-item { flex: 1; padding: 0 .8rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.pfc-item:first-child { border-left: none; padding-left: 0; }
.pfc-num { font: 500 .58rem var(--mono); color: var(--acc); letter-spacing: .06em; }
.pfc-title { font: 600 .74rem var(--sans); color: var(--txt); margin: 0; }
.pfc-desc { font: 400 .62rem/1.35 var(--sans); color: var(--dim); margin: 0; }

  /* ---------- 398 · Product hero with spec sidebar ---------- */
  .pss-wrap { width: 100%; min-height: 250px; display: flex; align-items: stretch; padding: 1.2rem 1.3rem; box-sizing: border-box; gap: 1.2rem; font-family: var(--sans); }
.pss-main { flex: 1.3; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pss-kick { font: 500 .52rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); margin: 0 0 .5rem; }
.pss-title { font: 600 1.28rem/1.08 var(--sans); color: var(--txt); margin: 0 0 .5rem; letter-spacing: -.01em; }
.pss-desc { font: 400 .68rem/1.4 var(--sans); color: var(--dim); margin: 0; max-width: 22ch; }
.pss-side { flex: 1; border-left: 1px solid var(--line); padding-left: 1rem; display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; }
.pss-row { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font: 400 .62rem var(--mono); color: var(--dim); }
.pss-row span:last-child { color: var(--txt); text-align: right; }
.pss-row:last-child { border-bottom: none; }

  /* ---------- 399 · Materials and finish list with swatch chips ---------- */
  .pmf-wrap { width: 100%; padding: 1.3rem 1.4rem; box-sizing: border-box; font-family: var(--sans); }
.pmf-kick { font: 500 .54rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); margin: 0 0 .7rem; }
.pmf-list { list-style: none; margin: 0; padding: 0; }
.pmf-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.pmf-row:last-child { border-bottom: none; }
.pmf-chip { width: .85rem; height: .85rem; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.pmf-c1 { background: linear-gradient(160deg, var(--acc2), var(--bg2)); }
.pmf-c2 { background: linear-gradient(160deg, var(--dim), var(--bg2)); }
.pmf-c3 { background: linear-gradient(160deg, var(--acc), var(--bg2)); }
.pmf-name { font: 500 .68rem var(--sans); color: var(--txt); flex: 1; }
.pmf-note { font: 400 .58rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }

  /* ---------- 400 · Size and dimension selector ---------- */
  .pds-wrap { width: 100%; padding: 1.3rem 1.4rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .9rem; font-family: var(--sans); }
.pds-sizes { display: flex; gap: .4rem; }
.pds-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.pds-opt { flex: 1; text-align: center; font: 600 .64rem var(--mono); color: var(--dim); padding: .5em 0; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pds-input:checked + .pds-opt { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.pds-input:focus-visible + .pds-opt { outline: 2px solid var(--acc); outline-offset: 2px; }
.pds-dims { display: flex; justify-content: space-between; gap: .8rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--line); }
.pds-dims div { display: flex; flex-direction: column; gap: .2rem; }
.pds-dims dt { font: 400 .56rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin: 0; }
.pds-dims dd { font: 500 .68rem var(--sans); color: var(--txt); margin: 0; }
@media (prefers-reduced-motion: reduce) { .pds-opt { transition: none; } }

  /* ---------- 401 · Variant swatch picker ---------- */
  .psw-wrap { width: 100%; padding: 1.4rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; font-family: var(--sans); }
.psw-label { margin: 0; font: 500 .68rem var(--mono); color: var(--dim); letter-spacing: .04em; }
.psw-val { color: var(--txt); font-weight: 600; }
.psw-row { display: flex; gap: .55rem; }
.psw-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.psw-swatch { width: 2rem; height: 2rem; border-radius: 50%; display: block; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, border-color .15s; }
.psw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.psw-s1 { background: linear-gradient(160deg, var(--acc2), var(--bg2)); }
.psw-s2 { background: linear-gradient(160deg, var(--dim), var(--bg2)); }
.psw-s3 { background: linear-gradient(160deg, var(--txt), var(--bg)); }
.psw-s4 { background: linear-gradient(160deg, var(--card), var(--bg2)); }
.psw-input:checked + .psw-swatch { border-color: var(--acc); transform: scale(1.12); }
.psw-input:focus-visible + .psw-swatch { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .psw-swatch { transition: none; } }

  /* ---------- 402 · Angled slash divider ---------- */
  .asd-wrap{position:relative;width:100%;height:220px;overflow:hidden;border-radius:10px;background:var(--bg)}.asd-top{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-start;padding:1.1rem 1.3rem}.asd-line{position:absolute;inset:0;background:var(--acc);clip-path:polygon(0 61%,100% 43%,100% 49%,0 67%)}.asd-bottom{position:absolute;inset:0;background:var(--bg2);clip-path:polygon(0 64%,100% 46%,100% 100%,0 100%);display:flex;align-items:flex-end;justify-content:flex-end;padding:1.1rem 1.3rem}.asd-eyebrow{font:600 .58rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.asd-bottom .asd-eyebrow{color:var(--txt)}

  /* ---------- 403 · Arc curve divider ---------- */
  .acd-wrap{position:relative;width:100%;height:220px;overflow:hidden;background:var(--bg);border-radius:10px}.acd-top,.acd-bottom{position:absolute;left:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center}.acd-top{top:0;height:60%;background:var(--bg)}.acd-bottom{bottom:0;height:44%;background:var(--card)}.acd-bottom::before{content:'';position:absolute;left:50%;top:-34px;width:150%;height:68px;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:50% 50% 0 0/100% 100% 0 0}.acd-eyebrow{font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);display:block}.acd-cue{font:400 .72rem var(--sans);color:var(--dim);display:block}.acd-top .acd-cue{color:var(--txt)}

  /* ---------- 404 · Plan gate ---------- */
  .apg { width: 84%; border: 1px solid var(--line); border-radius: 7px; padding: 1.1rem 1.2rem;
  text-align: center; font-family: var(--sans); background: rgba(255,255,255,.02); }
.apg-lock { font-size: 1.1rem; color: var(--acc); }
.apg-h { font: 600 .88rem var(--sans); color: var(--txt); margin: .4rem 0 .3rem; letter-spacing: -0.015em; }
.apg-p { font: 400 .68rem/1.5 var(--sans); color: var(--dim); }
.apg-b { margin-top: .8rem; font: 500 .68rem var(--mono); color: var(--bg); background: var(--acc);
  border: 0; border-radius: 99px; padding: .65em 1.3em; cursor: pointer; transition: opacity .25s; }
.apg-b:hover, .apg-b:focus-visible { opacity: .84; }
@media (prefers-reduced-motion: reduce) { .apg-b { transition: none; } }

  /* ---------- 405 · Back-to-top affordance ---------- */
  .btt-wrap{position:relative;width:100%;height:220px;border-radius:10px;background:var(--bg);overflow:hidden}.btt-page{position:absolute;inset:0;padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.7rem}.btt-line{display:block;height:8px;border-radius:4px;background:var(--line)}.btt-line:nth-child(1){width:70%}.btt-line:nth-child(2){width:90%}.btt-line:nth-child(3){width:58%}.btt-btn{position:absolute;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .2s,border-color .2s,color .2s}.btt-btn svg{width:18px;height:18px}.btt-btn:hover{transform:translateY(-2px);border-color:var(--acc);color:var(--acc)}.btt-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}@media (prefers-reduced-motion: reduce){.btt-btn{transition:none}}

  /* ---------- 406 · Corner glow pair ---------- */
  .cgp { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.cgp-a, .cgp-b { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; filter: blur(38px); }
.cgp-a { top: -22%; left: -18%; background: radial-gradient(circle, var(--acc2), transparent 66%); opacity: .75; }
.cgp-b { bottom: -24%; right: -16%; background: radial-gradient(circle, var(--acc), transparent 64%); opacity: .55; }
.cgp-rule { position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: var(--line); }

  /* ---------- 407 · Perspective floor ---------- */
  .pfl { position: absolute; inset: 0; overflow: hidden; background: var(--bg); perspective: 320px; }
.pfl-plane { position: absolute; left: -50%; right: -50%; bottom: -30%; height: 90%;
  transform: rotateX(72deg); transform-origin: 50% 100%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px; }
.pfl-haze { position: absolute; inset: 0;
  background: linear-gradient(0deg, transparent 0%, var(--bg) 62%); }

  /* ---------- 408 · Checklist panel ---------- */
  .ckp { width: 88%; border: 1px solid var(--line); border-radius: 6px; padding: .9rem 1rem; font-family: var(--sans); }
.ckp-h { font: 500 .54rem var(--mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .55rem; }
.ckp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .38rem; }
.ckp-i { font: 400 .74rem var(--sans); color: var(--txt); display: flex; align-items: baseline; gap: .5rem; }
.ckp-i::before { content: '✓'; color: var(--acc); font-size: .8em; }
.ckp-off { color: var(--dim); }
.ckp-off::before { content: '—'; color: var(--dim); }

  /* ---------- 409 · Quote break ---------- */
  .qbk { width: 100%; padding: 0 8%; text-align: center; font-family: var(--sans); }
.qbk-mark { display: block; font: 700 2.4rem/0.6 var(--sans); color: var(--acc); }
.qbk-text { font: 400 clamp(.95rem, 4.6vw, 1.15rem)/1.42 var(--sans); color: var(--txt);
  letter-spacing: -0.018em; margin-top: .5rem; text-wrap: balance; }

  /* ---------- 410 · Two-up content cards ---------- */
  .tuc { width: 100%; padding: 0 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-family: var(--sans); }
.tuc-card { border: 1px solid var(--line); border-radius: 5px; padding: .85rem .9rem;
  display: flex; flex-direction: column; gap: .3rem; transition: border-color .28s; }
.tuc-card:hover { border-color: rgba(255,255,255,.2); }
.tuc-k { font: 500 .5rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.tuc-card h4 { font: 600 .82rem var(--sans); color: var(--txt); letter-spacing: -0.015em; }
.tuc-card p { font: 400 .68rem/1.5 var(--sans); color: var(--dim); flex: 1; }
.tuc-card a { font: 500 .62rem var(--mono); color: var(--txt); text-decoration: none; }
.tuc-card a:hover, .tuc-card a:focus-visible { color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .tuc-card { transition: none; } }

  /* ---------- 411 · Floating status pill ---------- */
  .fsp-wrap{position:relative;width:100%;height:190px}.fsp-meta{position:absolute;top:14px;left:18px;padding-left:.9rem;display:flex;flex-direction:column;gap:.3rem}.fsp-rule{position:absolute;left:0;top:.15rem;bottom:.15rem;width:2px;background:var(--acc)}.fsp-eyebrow{font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.fsp-heading{font:600 1rem var(--sans);color:var(--txt)}.fsp-pill{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:.5em;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:.5em .9em;box-shadow:0 8px 20px rgba(0,0,0,.3)}.fsp-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:0 0 auto;animation:fsp-pulse 2.4s ease-in-out infinite}.fsp-label{font:500 .68rem var(--mono);color:var(--txt);letter-spacing:.01em}@keyframes fsp-pulse{0%,100%{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion: reduce){.fsp-dot{animation:none}}

  /* ---------- 412 · Indexed footer ---------- */
  .fic { width: 100%; padding: 0 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  font-family: var(--sans); border-top: 1px solid var(--line); padding-top: 1.1rem; }
.fic-col { display: flex; flex-direction: column; gap: .32rem; }
.fic-n { font: 500 .52rem var(--mono); letter-spacing: .2em; color: var(--acc); margin-bottom: .2rem; }
.fic-col a { font: 400 .72rem var(--sans); color: var(--dim); text-decoration: none; }
.fic-col a:hover, .fic-col a:focus-visible { color: var(--txt); }

  /* ---------- 413 · Gradient fade-out band ---------- */
  .gfb-wrap{position:relative;width:100%;height:220px;overflow:hidden;border-radius:10px;background:var(--bg)}.gfb-lines{position:absolute;inset:0;display:flex;flex-direction:column;gap:.7rem;padding:1.4rem 1.6rem}.gfb-line{display:block;height:9px;border-radius:5px;background:var(--line)}.gfb-line:nth-child(1){width:78%}.gfb-line:nth-child(2){width:92%}.gfb-line:nth-child(3){width:64%}.gfb-line:nth-child(4){width:86%}.gfb-line:nth-child(5){width:52%}.gfb-fade{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 82%)}.gfb-mark{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);color:var(--acc);font:600 .8rem var(--mono);opacity:.85}

  /* ---------- 414 · Hanging punctuation quote ---------- */
  .hpq-wrap{width:100%;max-width:300px;margin:0;padding:0 0 0 1.6rem}.hpq-quote{position:relative;margin:0;font:500 1.15rem/1.45 var(--sans);color:var(--txt);letter-spacing:-.01em;hanging-punctuation:first allow-end}.hpq-quote::before{content:'\201C';position:absolute;left:-.62em;top:.02em;font:700 1.6em/1 var(--sans);color:var(--acc)}.hpq-cite{display:block;margin-top:.7rem;font:500 .66rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}

  /* ---------- 415 · Justified two-column text ---------- */
  .jtc-wrap{width:100%;max-width:320px;display:flex;flex-direction:column;gap:.6rem}.jtc-cap{font:500 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.jtc-cols{column-count:2;column-gap:1.1rem;column-rule:1px solid var(--line);text-align:justify;hyphens:auto;font:400 .74rem/1.5 var(--sans);color:var(--txt)}

  /* ---------- 416 · Keyboard hint bar ---------- */
  .khb-bar{display:flex;align-items:center;gap:.7em;width:100%;max-width:300px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.7em 1em;color:var(--dim);cursor:pointer;font:400 .78rem var(--sans);transition:border-color .2s,color .2s}.khb-icon{width:16px;height:16px;flex:0 0 auto}.khb-text{flex:1;text-align:left;color:var(--dim)}.khb-keys{display:flex;gap:.3em;flex:0 0 auto}.khb-kbd{font:600 .66rem var(--mono);color:var(--txt);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:.15em .45em;line-height:1.4}.khb-bar:hover,.khb-bar:focus-visible{border-color:var(--acc);color:var(--txt)}.khb-bar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}@media (prefers-reduced-motion: reduce){.khb-bar{transition:none}}

  /* ---------- 417 · Theme switcher pill row ---------- */
  .lts-group{position:relative;display:inline-flex;gap:4px;padding:4px;background:var(--bg2);border:1px solid var(--line);border-radius:999px}.lts-btn{position:relative;z-index:1;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s}.lts-btn svg{width:16px;height:16px}.lts-btn:hover{color:var(--txt)}.lts-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.lts-on{color:var(--bg)}.lts-active{position:absolute;top:4px;left:44px;width:36px;height:36px;border-radius:50%;background:var(--acc)}@media (prefers-reduced-motion: reduce){.lts-btn{transition:none}}

  /* ---------- 418 · Marked phrase, gradient underline ---------- */
  .mpt-wrap{width:100%;max-width:300px;font:400 .95rem/1.55 var(--sans);color:var(--dim);margin:0}.mpt-mark{position:relative;color:var(--txt);font-weight:600;background-image:linear-gradient(90deg,var(--acc),var(--acc2));background-repeat:no-repeat;background-position:0 100%;background-size:100% .22em;padding-bottom:.05em}

  /* ---------- 419 · Aspect ratio row ---------- */
  .asr { width: 100%; padding: 0 6%; display: flex; gap: 8px; align-items: center; }
.asr-i { flex: 1; border-radius: 3px; }
.asr-p { aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--acc2), var(--bg)); }
.asr-s { aspect-ratio: 1; background: linear-gradient(40deg, var(--acc), var(--bg2)); }
.asr-l { aspect-ratio: 4 / 3; background: linear-gradient(280deg, var(--bg2), var(--acc2)); }

  /* ---------- 420 · Split media and caption ---------- */
  .msc { width: 100%; margin: 0; padding: 0 6%; display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 1rem; align-items: center; font-family: var(--sans); }
.msc-art { aspect-ratio: 4 / 3; border-radius: 4px;
  background: linear-gradient(150deg, var(--acc2), var(--bg) 74%); }
.msc-k { font: 500 .52rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.msc-cap p { font: 400 .7rem/1.55 var(--sans); color: var(--dim); margin-top: .3rem; }

  /* ---------- 421 · Mono label / display pairing ---------- */
  .mld-wrap{display:flex;flex-direction:column;gap:.55rem;width:100%;max-width:300px;padding:0 .4rem}.mld-label{font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.mld-display{font:600 1.5rem/1.22 var(--sans);letter-spacing:-.02em;color:var(--txt);margin:0}

  /* ---------- 422 · Command hint bar ---------- */
  .chb { width: 74%; display: flex; align-items: center; gap: .6rem; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: .62em 1em;
  font-family: var(--sans); transition: border-color .25s; }
.chb:hover, .chb:focus-visible { border-color: var(--acc); }
.chb-icon { color: var(--dim); font-size: .9rem; }
.chb-t { flex: 1; text-align: left; font: 400 .74rem var(--sans); color: var(--dim); }
.chb-k { font: 500 .58rem var(--mono); color: var(--txt); border: 1px solid var(--line);
  border-radius: 4px; padding: .22em .45em; }
@media (prefers-reduced-motion: reduce) { .chb { transition: none; } }

  /* ---------- 423 · Numbered act marker ---------- */
  .nam-wrap{position:relative;width:100%;padding:2.2rem 1.6rem;display:flex;flex-direction:column;gap:.9rem}.nam-cap{font:600 .6rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}.nam-rule{position:relative;height:1px;background:var(--line);margin:.4rem 0}.nam-num{position:absolute;top:50%;left:26%;transform:translate(-50%,-50%);display:inline-flex;align-items:baseline;gap:.15em;background:var(--bg2);padding:.35em .7em;border:1px solid var(--line);border-radius:999px;font:600 .78rem var(--mono);color:var(--txt);white-space:nowrap}.nam-of{color:var(--dim);font-weight:400}.nam-next{color:var(--txt);font:500 .95rem var(--sans);letter-spacing:0;text-transform:none}

  /* ---------- 424 · Numbered pull statement ---------- */
  .nps-wrap{display:flex;align-items:flex-start;gap:1.1rem;width:100%;max-width:320px;padding:0 .4rem}.nps-num{font:700 2.6rem/1 var(--sans);color:var(--acc);letter-spacing:-.02em;flex:0 0 auto}.nps-text{font:500 1.05rem/1.4 var(--sans);color:var(--txt);letter-spacing:-.01em;margin-top:.35rem}

  /* ---------- 425 · Overlapping panel seam ---------- */
  .ops-wrap{position:relative;width:100%;height:220px;background:var(--bg);border-radius:10px;overflow:hidden}.ops-back{position:absolute;inset:0;padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}.ops-back .ops-line{font:400 .78rem/1.5 var(--sans);color:var(--dim);max-width:220px}.ops-peek{position:absolute;left:6%;right:6%;top:64%;bottom:14px;background:var(--bg2);border:1px solid var(--line);border-radius:14px 14px 4px 4px;box-shadow:0 -18px 40px rgba(0,0,0,.35);padding:1rem 1.3rem;display:flex;flex-direction:column;gap:.3rem;justify-content:center}.ops-eyebrow{font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}.ops-title{font:600 1rem var(--sans);color:var(--txt)}

  /* ---------- 426 · Oversized glyph graphic ---------- */
  .ogg-wrap{position:relative;width:100%;max-width:300px;min-height:150px;display:flex;align-items:center;justify-content:center}.ogg-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 9rem/1 var(--sans);color:var(--txt);opacity:.1;letter-spacing:0;pointer-events:none;user-select:none}.ogg-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.ogg-cap{font:600 1.3rem var(--sans);color:var(--txt);letter-spacing:-.01em}

  /* ---------- 427 · Numbered quote pair ---------- */
  .nqp { width: 100%; padding: 0 6%; display: flex; flex-direction: column; gap: .9rem; font-family: var(--sans); }
.nqp-q { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: baseline; }
.nqp-n { grid-row: 1 / 3; font: 500 .58rem var(--mono); color: var(--acc); }
.nqp-q p { font: 400 .8rem/1.45 var(--sans); color: var(--txt); }
.nqp-q cite { font: 400 .58rem var(--mono); font-style: normal; letter-spacing: .1em; color: var(--dim); }

  /* ---------- 428 · Reading progress bar ---------- */
  .rpb-wrap{width:100%;max-width:320px;display:flex;flex-direction:column;gap:.6rem}.rpb-bar{position:relative;height:3px;width:100%;background:var(--line);border-radius:2px;overflow:hidden}.rpb-fill{position:absolute;inset:0;width:62%;background:var(--acc);border-radius:2px 0 0 2px;transition:width .3s}.rpb-page{display:flex;align-items:center;justify-content:space-between;padding:0 .1rem}.rpb-meta{font:500 .68rem var(--mono);color:var(--dim);letter-spacing:.02em}.rpb-pct{font:600 .68rem var(--mono);color:var(--txt)}@media (prefers-reduced-motion: reduce){.rpb-fill{transition:none}}

  /* ---------- 429 · Side page index ---------- */
  .spx-wrap{width:100%;height:200px;display:flex;align-items:center;gap:1.6rem;padding:0 1.2rem}.spx-rail{flex:0 0 auto}.spx-list{list-style:none;display:flex;flex-direction:column;gap:.85rem;padding:0;margin:0}.spx-item{display:flex;align-items:center;gap:.6em;text-decoration:none;color:var(--dim);padding:.15rem 0}.spx-dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto;transition:background .2s,transform .2s}.spx-label{font:500 .68rem var(--mono);letter-spacing:.03em;color:var(--dim);transition:color .2s}.spx-item:hover .spx-label,.spx-item:focus-visible .spx-label{color:var(--txt)}.spx-item:hover .spx-dot,.spx-item:focus-visible .spx-dot{background:var(--dim)}.spx-active .spx-dot{background:var(--acc);transform:scale(1.3)}.spx-active .spx-label{color:var(--txt)}.spx-item:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}.spx-panel{flex:1;min-width:0;height:100%;border-left:1px solid var(--line);padding-left:1.4rem;display:flex;flex-direction:column;justify-content:center;gap:.4rem}.spx-panel-eyebrow{font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}.spx-panel-title{font:600 1.4rem var(--sans);color:var(--txt)}@media (prefers-reduced-motion: reduce){.spx-dot,.spx-label{transition:none}}

  /* ---------- 430 · Delta rows ---------- */
  .dlr { width: 90%; font-family: var(--sans); }
.dlr-row { display: grid; grid-template-columns: 1fr auto auto; gap: .9rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--line); }
.dlr-l { font: 400 .7rem var(--sans); color: var(--dim); }
.dlr-v { font: 600 .88rem var(--sans); color: var(--txt); font-variant-numeric: tabular-nums; }
.dlr-d { font: 500 .58rem var(--mono); min-width: 4.4em; text-align: right; }
.dlr-up { color: var(--acc); }
.dlr-dn { color: var(--dim); }

  /* ---------- 431 · Ring gauge ---------- */
  .rgg { display: flex; flex-direction: column; align-items: center; gap: .55rem; font-family: var(--sans); }
.rgg-ring { width: 104px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--acc) 0turn .72turn, var(--line) .72turn 1turn); }
.rgg-ring::before { content: ''; position: absolute; width: 82px; aspect-ratio: 1;
  border-radius: 50%; background: var(--bg2); }
.rgg-n { position: relative; font: 600 1.35rem var(--sans); color: var(--txt);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rgg-n i { font-style: normal; font-size: .58em; color: var(--acc); }
.rgg-l { font: 400 .56rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

  /* ---------- 432 · Stepped edge seam ---------- */
  .tse-wrap{position:relative;width:100%;height:220px;overflow:hidden;border-radius:10px;background:var(--bg)}.tse-top{position:absolute;inset:0;display:flex;align-items:flex-start;padding:1.1rem 1.3rem}.tse-bottom{position:absolute;left:0;right:0;bottom:0;height:56%;background:var(--card);border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:flex-end;padding:1.1rem 1.3rem;clip-path:polygon(0 14px,12.5% 14px,12.5% 0,25% 0,25% 14px,37.5% 14px,37.5% 0,50% 0,50% 14px,62.5% 14px,62.5% 0,75% 0,75% 14px,87.5% 14px,87.5% 0,100% 0,100% 100%,0 100%)}.tse-tag{font:600 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.tse-bottom .tse-tag{color:var(--txt)}

  /* ---------- 433 · Organisation switcher ---------- */
  .aos2 { width: 84%; border: 1px solid var(--line); border-radius: 7px; padding: .7rem .75rem;
  background: var(--card); font-family: var(--sans); }
.aos2-k { font: 500 .5rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.aos2-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .4rem; border-radius: 5px; cursor: pointer; }
.aos2-row:hover { background: rgba(255,255,255,.04); }
.aos2-on { background: rgba(255,255,255,.05); }
.aos2-av { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  background: var(--acc2); font: 600 .62rem var(--mono); color: var(--txt); }
.aos2-row b { flex: 1; font: 500 .72rem var(--sans); color: var(--txt); }
.aos2-row i { font-style: normal; font: 400 .55rem var(--mono); color: var(--dim); }
.aos2-add { width: 100%; margin-top: .3rem; font: 500 .62rem var(--mono); color: var(--acc);
  background: none; border: 1px dashed var(--line); border-radius: 5px; padding: .5em; cursor: pointer; }
.aos2-add:hover, .aos2-add:focus-visible { border-color: var(--acc); }

  /* ---------- 434 · Announcement strip with dismiss ---------- */
  .anno-wrap{width:100%;display:flex;align-items:center;gap:.7rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;box-sizing:border-box;}.anno-text{flex:1;margin:0;font:500 .66rem/1.4 var(--sans);color:var(--txt);display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;}.anno-tag{font:700 .55rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);}.anno-close{flex:none;width:1.6em;height:1.6em;border-radius:50%;border:1px solid var(--line);background:none;color:var(--dim);font-size:.85rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s;}.anno-close:hover{color:var(--txt);border-color:var(--acc);}.anno-close:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.anno-close{transition:none;}}

  /* ---------- 435 · Breadcrumb and share row ---------- */
  .brsh-wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line);}.brsh-crumbs{display:flex;align-items:center;gap:.4em;font:500 .62rem var(--mono);flex-wrap:wrap;}.brsh-link{color:var(--dim);text-decoration:none;transition:color .2s;}.brsh-link:hover{color:var(--acc);}.brsh-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}.brsh-sep{color:var(--dim);opacity:.5;}.brsh-current{color:var(--txt);}.brsh-share{display:flex;gap:.4rem;}.brsh-icon{width:1.9em;height:1.9em;border-radius:50%;border:1px solid var(--line);background:none;color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,border-color .2s;}.brsh-icon:hover{color:var(--acc);border-color:var(--acc);}.brsh-icon:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.brsh-link,.brsh-icon{transition:none;}}

  /* ---------- 436 · Cookie consent bar ---------- */
  .cook-wrap{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;box-sizing:border-box;}.cook-text{flex:1 1 200px;margin:0;font:400 .68rem/1.45 var(--sans);color:var(--txt);}.cook-actions{display:flex;gap:.5rem;flex-wrap:wrap;}.cook-btn{font:600 .62rem var(--mono);letter-spacing:.02em;padding:.5em .85em;border-radius:6px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--txt);transition:border-color .2s,color .2s;}.cook-btn-solid{background:var(--acc);color:var(--bg);border-color:var(--acc);}.cook-btn:hover{border-color:var(--acc);}.cook-btn-solid:hover{filter:brightness(1.08);}.cook-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.cook-btn{transition:none;}}

  /* ---------- 437 · Corner social link cluster ---------- */
  .soci-wrap{position:absolute;inset:0;pointer-events:none;}.soci-cluster{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:.45rem;pointer-events:auto;}.soci-link{width:1.9em;height:1.9em;border-radius:50%;border:1px solid var(--line);color:var(--dim);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:color .2s,border-color .2s;}.soci-link:hover{color:var(--acc);border-color:var(--acc);}.soci-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.soci-link{transition:none;}}

  /* ---------- 438 · Footer-anchored contact pill ---------- */
  .cpil-wrap{position:absolute;inset:0;}.cpil-anchor{position:absolute;right:16px;bottom:16px;}.cpil-pill{display:inline-flex;align-items:center;gap:.5em;font:600 .62rem var(--sans);color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:.6em 1em;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.22);transition:border-color .2s,color .2s;}.cpil-ico{color:var(--acc);flex:none;}.cpil-pill:hover{border-color:var(--acc);color:var(--acc);}.cpil-pill:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.cpil-pill{transition:none;}}

  /* ---------- 439 · Skip-to-content link ---------- */
  .skpc-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1rem;box-sizing:border-box;}.skpc-link{position:relative;font:600 .68rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--bg);background:var(--acc);border-radius:6px;padding:.6em 1em;text-decoration:none;}.skpc-link:not(.skpc-preview):not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}.skpc-link:focus-visible{outline:2px solid var(--txt);outline-offset:3px;}.skpc-note{margin:0;font:400 .58rem/1.4 var(--sans);color:var(--dim);text-align:center;max-width:220px;}

  /* ---------- 440 · Sticky section header ---------- */
  .sesh-wrap{width:100%;}.sesh-bar{display:flex;align-items:center;gap:.6em;background:var(--card);border:1px solid var(--line);border-radius:8px 8px 0 0;padding:.6rem .85rem;box-shadow:0 6px 14px rgba(0,0,0,.18);box-sizing:border-box;}.sesh-num{font:700 .6rem var(--mono);color:var(--acc);}.sesh-label{flex:1;font:600 .68rem var(--sans);color:var(--txt);}.sesh-next{font:500 .56rem var(--mono);color:var(--dim);white-space:nowrap;}.sesh-track{height:3px;background:var(--line);border-radius:0 0 8px 8px;overflow:hidden;}.sesh-fill{display:block;height:100%;width:42%;background:var(--acc);}

  /* ---------- 441 · Saved and syncing status chip ---------- */
  .ssyc-wrap{width:100%;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;}.ssyc-chip{display:inline-flex;align-items:center;gap:.5em;font:500 .62rem var(--mono);letter-spacing:.02em;color:var(--dim);background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:.4em .8em;}.ssyc-saved{color:var(--txt);}.ssyc-check{color:var(--acc);flex:none;}.ssyc-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;display:inline-block;animation:ssyc-pulse 1.6s ease-in-out infinite;}@keyframes ssyc-pulse{0%,100%{opacity:.35;transform:scale(.8);}50%{opacity:1;transform:scale(1);}}@media (prefers-reduced-motion: reduce){.ssyc-dot{animation:none;opacity:1;}}

  /* ---------- 442 · Comparison columns ---------- */
  .ccl { width: 100%; padding: 0 6%; display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: 1rem; font-family: var(--sans); }
.ccl::before { content: ''; grid-column: 2; background: var(--line); }
.ccl-col h4 { font: 500 .54rem var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .45rem; }
.ccl-alt h4 { color: var(--acc); }
.ccl-col p { font: 400 .7rem/1.5 var(--sans); color: var(--txt); margin-bottom: .3rem; }
.ccl-col p + p { color: var(--dim); }

  /* ---------- 443 · CTA with availability line ---------- */
  .cav { width: 100%; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.cav-status { display: inline-flex; align-items: center; gap: .45rem; }
.cav-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--acc); animation: cav-pulse 2.2s ease-in-out infinite; }
.cav-text { font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.cav-h { margin: 0; font: 700 1.15rem/1.25 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.cav-btn { font: 600 .7rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .65em 1.3em; cursor: pointer; transition: filter .2s, transform .2s; }
.cav-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cav-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@keyframes cav-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cav-dot { animation: none; } .cav-btn { transition: none; } }

  /* ---------- 444 · Boxed book-a-call CTA ---------- */
  .cbc { width: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.cbc-box { width: 100%; max-width: 260px; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.2rem; background: var(--card); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; box-sizing: border-box; }
.cbc-icon { color: var(--acc); margin-bottom: .3rem; }
.cbc-h { margin: 0; font: 700 1.05rem/1.2 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.cbc-sub { margin: 0 0 .5rem; font: 400 .68rem/1.4 var(--sans); color: var(--dim); }
.cbc-btn { font: 600 .68rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .62em 1.2em; cursor: pointer; transition: filter .2s; }
.cbc-btn:hover { filter: brightness(1.08); }
.cbc-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cbc-btn { transition: none; } }

  /* ---------- 445 · Bordered panel CTA with two actions ---------- */
  .cbp { width: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.cbp-panel { width: 100%; max-width: 300px; border: 1px solid var(--line); border-radius: 10px; padding: 1.3rem 1.2rem; background: var(--card); display: flex; flex-direction: column; gap: .5rem; }
.cbp-h { margin: 0; font: 700 1.05rem/1.2 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.cbp-sub { margin: 0 0 .3rem; font: 400 .7rem/1.4 var(--sans); color: var(--dim); }
.cbp-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cbp-btn { font: 600 .68rem/1 var(--mono); border-radius: 99px; padding: .65em 1.1em; cursor: pointer; transition: filter .2s, border-color .2s, color .2s; }
.cbp-btn--primary { background: var(--acc); color: var(--bg); border: none; }
.cbp-btn--primary:hover { filter: brightness(1.08); }
.cbp-btn--ghost { background: transparent; color: var(--txt); border: 1px solid var(--line); }
.cbp-btn--ghost:hover { border-color: var(--acc); color: var(--acc); }
.cbp-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cbp-btn { transition: none; } }

  /* ---------- 446 · CTA with what-happens-next checklist ---------- */
  .ccn { width: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.3rem 1.2rem; box-sizing: border-box; }
.ccn-h { margin: 0; font: 700 1rem/1.25 var(--sans); letter-spacing: -.01em; color: var(--txt); text-align: center; }
.ccn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 280px; }
.ccn-item { display: flex; align-items: baseline; gap: .6rem; font: 400 .68rem/1.4 var(--sans); color: var(--dim); }
.ccn-mark { flex: none; font: 600 .58rem/1 var(--mono); color: var(--acc); }
.ccn-btn { font: 600 .7rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .68em 1.3em; cursor: pointer; transition: filter .2s; }
.ccn-btn:hover { filter: brightness(1.08); }
.ccn-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ccn-btn { transition: none; } }

  /* ---------- 447 · Full-width slab CTA ---------- */
  .csl { width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; }
.csl-slab { width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; padding: 1.6rem 1.4rem; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-sizing: border-box; }
.csl-h { margin: 0; max-width: 22ch; font: 700 clamp(1.1rem, 5vw, 1.5rem)/1.2 var(--sans); letter-spacing: -.01em; color: var(--txt); text-align: center; }
.csl-btn { flex: none; font: 600 .74rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .8em 1.5em; cursor: pointer; transition: transform .2s, filter .2s; }
.csl-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.csl-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .csl-btn { transition: none; } }

  /* ---------- 448 · CTA over a gradient band ---------- */
  .cgb { width: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; padding: .8rem; box-sizing: border-box; }
.cgb-band { width: 100%; border-radius: 12px; padding: 1.6rem 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .7rem; background: linear-gradient(120deg, var(--acc2), var(--acc)); }
.cgb-kick { margin: 0; font: 600 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--bg); opacity: .75; }
.cgb-h { margin: 0; max-width: 22ch; font: 700 clamp(1.05rem, 5vw, 1.4rem)/1.2 var(--sans); letter-spacing: -.01em; color: var(--bg); }
.cgb-btn { font: 600 .7rem/1 var(--mono); color: var(--txt); background: var(--bg); border: none; border-radius: 99px; padding: .68em 1.3em; cursor: pointer; transition: transform .2s; }
.cgb-btn:hover { transform: translateY(-1px); }
.cgb-btn:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cgb-btn { transition: none; } }

  /* ---------- 449 · CTA with countdown-style meta line ---------- */
  .cml { width: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.cml-kick { margin: 0; font: 600 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--acc); }
.cml-clock { display: flex; align-items: baseline; gap: .1em; font: 700 clamp(1.4rem, 6vw, 2rem)/1 var(--mono); color: var(--txt); }
.cml-colon { color: var(--dim); animation: cml-blink 1.6s steps(1) infinite; }
.cml-cap { margin: 0; max-width: 26ch; font: 400 .7rem/1.4 var(--sans); color: var(--dim); }
@keyframes cml-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cml-colon { animation: none; } }

  /* ---------- 450 · Minimal arrow-link CTA row ---------- */
  .car { width: 100%; min-height: 160px; display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; padding: 1.2rem; box-sizing: border-box; }
.car-link { display: inline-flex; align-items: center; gap: .4em; font: 600 .78rem/1 var(--mono); letter-spacing: .02em; color: var(--txt); text-decoration: none; padding-bottom: .3em; border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.car-arrow { display: inline-block; transition: transform .25s cubic-bezier(.76,0,.24,1); }
.car-link:hover, .car-link:focus-visible { color: var(--acc); border-color: var(--acc); }
.car-link:hover .car-arrow, .car-link:focus-visible .car-arrow { transform: translateX(.3em); }
.car-link:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .car-arrow { transition: none; } }

  /* ---------- 451 · CTA with phone and email pair ---------- */
  .cpe { width: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.cpe-kick { margin: 0; font: 700 .95rem/1.3 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.cpe-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.cpe-link { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; transition: color .2s; }
.cpe-label { font: 600 .56rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.cpe-val { font: 500 .78rem/1 var(--mono); color: var(--txt); }
.cpe-link:hover .cpe-val, .cpe-link:focus-visible .cpe-val { color: var(--acc); }
.cpe-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.cpe-rule { width: 1px; height: 1.6rem; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .cpe-link { transition: none; } }

  /* ---------- 452 · CTA with quiet secondary link ---------- */
  .cqs { width: 100%; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.cqs-h { margin: 0; font: 700 1.15rem/1.22 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.cqs-sub { margin: 0 0 .3rem; max-width: 26ch; font: 400 .72rem/1.4 var(--sans); color: var(--dim); }
.cqs-btn { font: 600 .72rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .68em 1.4em; cursor: pointer; transition: filter .2s, transform .2s; }
.cqs-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cqs-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.cqs-alt { margin-top: .3rem; font: 400 .66rem/1 var(--mono); color: var(--dim); text-decoration: underline; text-decoration-color: var(--line); transition: color .2s; }
.cqs-alt:hover { color: var(--txt); }
.cqs-alt:focus-visible { color: var(--txt); outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cqs-btn, .cqs-alt { transition: none; } }

  /* ---------- 453 · Diff summary ---------- */
  .dds { width: 92%; font-family: var(--mono); }
.dds-row { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .66rem; }
.dds-f { color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dds-a { color: var(--acc); }
.dds-r { color: var(--dim); }

  /* ---------- 454 · Run timeline ---------- */
  .drt { width: 92%; font-family: var(--sans); display: flex; flex-direction: column; gap: .45rem; }
.drt-row { display: grid; grid-template-columns: 4.4em 1fr 3em; gap: .6rem; align-items: center; }
.drt-n { font: 400 .6rem var(--mono); color: var(--dim); }
.drt-bar { position: relative; height: 8px; border-radius: 2px; background: rgba(255,255,255,.06); }
.drt-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--o); width: var(--w);
  border-radius: 2px; background: var(--acc2); }
.drt-live::after { background: var(--acc); }
.drt-t { font: 400 .58rem var(--mono); color: var(--txt); text-align: right; }

  /* ---------- 455 · Two-tone split footer ---------- */
  .fts { width: 100%; font-family: var(--sans); }
.fts-a { padding: 1rem 6%; background: rgba(255,255,255,.03); border-top: 1px solid var(--line); }
.fts-k { font: 500 .52rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
.fts-a b { display: block; font: 600 1.05rem var(--sans); color: var(--txt); letter-spacing: -0.02em; margin-top: .2rem; }
.fts-b { padding: .7rem 6%; display: flex; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--line); font: 400 .62rem var(--mono); color: var(--dim); }
.fts-b a { color: var(--dim); text-decoration: none; }
.fts-b a:hover, .fts-b a:focus-visible { color: var(--txt); }
.fts-b span { margin-left: auto; }

  /* ---------- 456 · Address form, grouped fields ---------- */
  .fagr-wrap{width:100%;display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.1rem;box-sizing:border-box;border-left:2px solid var(--acc);}.fagr-heading{margin:0 0 .1rem;font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}.fagr-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}.fagr-field-full{width:100%;}.fagr-field{display:flex;flex-direction:column;gap:.25rem;}.fagr-label{font:500 .58rem var(--mono);color:var(--dim);}.fagr-input{font:400 .7rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.4em .6em;box-sizing:border-box;width:100%;transition:border-color .2s;}.fagr-input:focus-visible{outline:none;border-color:var(--acc);}@media (prefers-reduced-motion: reduce){.fagr-input{transition:none;}}

  /* ---------- 457 · Compact two-field row with submit ---------- */
  .fcpt-wrap{width:100%;display:flex;align-items:flex-end;gap:.5rem;padding:1rem 1.1rem;box-sizing:border-box;flex-wrap:wrap;}.fcpt-field{flex:1 1 100px;display:flex;flex-direction:column;gap:.25rem;min-width:90px;}.fcpt-label{font:500 .56rem var(--mono);color:var(--dim);}.fcpt-input{font:400 .68rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.42em .6em;box-sizing:border-box;width:100%;transition:border-color .2s;}.fcpt-input:focus-visible{outline:none;border-color:var(--acc);}.fcpt-btn{flex:none;font:600 .62rem var(--mono);color:var(--bg);background:var(--acc);border:none;border-radius:6px;padding:.55em .9em;cursor:pointer;transition:filter .2s;white-space:nowrap;}.fcpt-btn:hover{filter:brightness(1.08);}.fcpt-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.fcpt-input,.fcpt-btn{transition:none;}}

  /* ---------- 458 · Form with inline validation states ---------- */
  .fval-wrap{width:100%;display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.1rem;box-sizing:border-box;}.fval-field{display:flex;flex-direction:column;gap:.3rem;}.fval-label{font:500 .58rem var(--mono);color:var(--dim);}.fval-input{font:400 .7rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.4em .6em;box-sizing:border-box;width:100%;transition:border-color .2s;}.fval-input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;}.fval-valid .fval-input{border-color:var(--acc);}.fval-error .fval-input{border-color:var(--acc2);}.fval-msg{display:flex;align-items:center;gap:.4em;font:500 .58rem var(--sans);color:var(--dim);}.fval-valid .fval-msg{color:var(--acc);}.fval-error .fval-msg{color:var(--acc2);}.fval-icon{flex:none;}@media (prefers-reduced-motion: reduce){.fval-input{transition:none;}}

  /* ---------- 459 · Payment card form (visual only) ---------- */
  .fpay-wrap{width:100%;display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.1rem;box-sizing:border-box;}.fpay-flag{margin:0;font:600 .54rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim);}.fpay-card{position:relative;border-radius:10px;padding:.8rem .9rem;background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--line);display:flex;flex-direction:column;gap:.55rem;min-height:5.2rem;box-sizing:border-box;}.fpay-chip{width:1.5rem;height:1.1rem;border-radius:3px;background:var(--dim);opacity:.35;display:block;}.fpay-num{font:600 .78rem var(--mono);letter-spacing:.06em;color:var(--txt);}.fpay-name{font:500 .56rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:auto;}.fpay-exp{position:absolute;top:.8rem;right:.9rem;font:500 .56rem var(--mono);color:var(--dim);}.fpay-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}.fpay-field-full{grid-column:1 / -1;}.fpay-field{display:flex;flex-direction:column;gap:.25rem;}.fpay-label{font:500 .58rem var(--mono);color:var(--dim);}.fpay-input{font:400 .7rem var(--sans);color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.4em .6em;box-sizing:border-box;width:100%;transition:border-color .2s;}.fpay-input:focus-visible{outline:none;border-color:var(--acc);}.fpay-btn{margin-top:.15rem;font:600 .66rem var(--mono);color:var(--bg);background:var(--acc);border:none;border-radius:6px;padding:.55em 0;cursor:pointer;transition:filter .2s;}.fpay-btn:hover{filter:brightness(1.08);}.fpay-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.fpay-input,.fpay-btn{transition:none;}}

  /* ---------- 460 · Rating scale input row ---------- */
  .frat-wrap{width:100%;padding:1rem 1.1rem;box-sizing:border-box;}.frat-fieldset{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}.frat-legend{padding:0;font:600 .66rem/1.4 var(--sans);color:var(--txt);}.frat-scale{display:flex;align-items:center;gap:.5rem;}.frat-end{font:500 .54rem var(--mono);color:var(--dim);white-space:nowrap;}.frat-options{display:flex;gap:.35rem;flex:1;justify-content:center;}.frat-opt{position:relative;}.frat-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}.frat-num{display:flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:50%;border:1px solid var(--line);font:600 .64rem var(--mono);color:var(--dim);transition:border-color .2s,color .2s;}.frat-radio:checked + .frat-num{border-color:var(--acc);color:var(--acc);background:var(--card);}.frat-radio:focus-visible + .frat-num{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.frat-num{transition:none;}}

  /* ---------- 461 · Tag and keyword chip input ---------- */
  .ftag-wrap{width:100%;display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem;box-sizing:border-box;}.ftag-label{font:500 .58rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim);}.ftag-field{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem;background:var(--bg2);transition:border-color .2s;}.ftag-field:focus-within{border-color:var(--acc);}.ftag-chip{display:inline-flex;align-items:center;gap:.4em;font:500 .62rem var(--sans);color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:.3em .3em .3em .7em;}.ftag-remove{width:1.3em;height:1.3em;border-radius:50%;border:none;background:none;color:var(--dim);cursor:pointer;font-size:.75rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;}.ftag-remove:hover{color:var(--acc2);background:var(--bg2);}.ftag-remove:focus-visible{outline:2px solid var(--acc);outline-offset:1px;}.ftag-input{flex:1;min-width:5em;border:none;background:none;font:400 .68rem var(--sans);color:var(--txt);outline:none;}.ftag-input::placeholder{color:var(--dim);}@media (prefers-reduced-motion: reduce){.ftag-remove,.ftag-field{transition:none;}}

  /* ---------- 462 · Centre-rule diptych ---------- */
  .gcd-wrap { width: 100%; padding: 0 6%; display: flex; align-items: stretch; }
.gcd-a, .gcd-b { flex: 1; margin: 0; aspect-ratio: 3 / 4; }
.gcd-a { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gcd-b { background: linear-gradient(320deg, var(--acc), var(--bg2)); }
.gcd-rule { width: 1px; flex-shrink: 0; background: var(--line); margin: 0 12px; }

  /* ---------- 463 · Corner index frame ---------- */
  .gci-frame { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 10; border-radius: 3px;
  background: linear-gradient(150deg, var(--acc2), var(--bg) 70%); }
.gci-index { position: absolute; top: 0; left: 0; padding: .3rem .55rem; background: var(--bg2);
  border: 1px solid var(--line); border-top: none; border-left: none;
  font: 500 .55rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--txt); }

  /* ---------- 464 · Filmstrip with scrub rail ---------- */
  .gfs-wrap { width: 100%; padding: 0 6%; display: flex; flex-direction: column; gap: 8px; }
.gfs-strip { display: flex; gap: 3px; }
.gfs-f { flex: 1; aspect-ratio: 4 / 3; border-radius: 2px; }
.gfs-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gfs-2 { background: linear-gradient(200deg, var(--acc), var(--bg2)); }
.gfs-3 { background: linear-gradient(20deg, var(--bg2), var(--acc2)); }
.gfs-4 { background: linear-gradient(330deg, var(--bg), var(--acc)); }
.gfs-5 { background: linear-gradient(90deg, var(--acc2), var(--bg2)); }
.gfs-rail { position: relative; height: 3px; border-radius: 2px; background: var(--line); }
.gfs-scrub { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--acc); animation: gfs-drift 6s ease-in-out infinite; }
@keyframes gfs-drift { 0%, 100% { left: 0; } 50% { left: calc(100% - 10px); } }
@media (prefers-reduced-motion: reduce) { .gfs-scrub { animation: none; left: 20%; } }

  /* ---------- 465 · Full-bleed quad band ---------- */
  .gfq-band { width: 100%; display: flex; }
.gfq-f { flex: 1; margin: 0; aspect-ratio: 3 / 4; }
.gfq-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gfq-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); }
.gfq-3 { background: linear-gradient(30deg, var(--bg2), var(--acc2)); }
.gfq-4 { background: linear-gradient(320deg, var(--bg), var(--acc)); }

  /* ---------- 466 · Mixed orientation pair ---------- */
  .gmo-row { width: 100%; padding: 0 6%; display: flex; gap: 10px; align-items: flex-end; }
.gmo-port { flex: 0 0 34%; margin: 0; aspect-ratio: 3 / 4; border-radius: 3px; background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gmo-land { flex: 1; margin: 0; aspect-ratio: 16 / 9; border-radius: 3px; background: linear-gradient(320deg, var(--acc), var(--bg2)); }

  /* ---------- 467 · Scattered frame stack ---------- */
  .gsf-pile { position: relative; width: 100%; height: 176px; }
.gsf-f { position: absolute; top: 50%; left: 50%; width: 42%; aspect-ratio: 4 / 5; margin: 0;
  border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 10px 22px rgba(0,0,0,.3);
  transition: transform .3s ease; }
.gsf-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); transform: translate(-68%, -44%) rotate(-8deg); z-index: 1; }
.gsf-2 { background: linear-gradient(210deg, var(--bg2), var(--acc2)); transform: translate(-50%, -56%) rotate(2deg); z-index: 2; }
.gsf-3 { background: linear-gradient(40deg, var(--acc), var(--bg2)); transform: translate(-32%, -44%) rotate(11deg); z-index: 1; }
.gsf-1:hover { transform: translate(-68%, -44%) rotate(-8deg) scale(1.07); z-index: 3; }
.gsf-2:hover { transform: translate(-50%, -56%) rotate(2deg) scale(1.07); z-index: 3; }
.gsf-3:hover { transform: translate(-32%, -44%) rotate(11deg) scale(1.07); z-index: 3; }
@media (prefers-reduced-motion: reduce) { .gsf-f { transition: none; } }

  /* ---------- 468 · Span-cell grid ---------- */
  .gsc-grid { width: 100%; padding: 0 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gsc-c { margin: 0; aspect-ratio: 1; border-radius: 3px; }
.gsc-span { grid-column: span 2; aspect-ratio: 2 / 1; }
.gsc-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gsc-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); }
.gsc-3 { background: linear-gradient(30deg, var(--bg2), var(--acc2)); }
.gsc-4 { background: linear-gradient(320deg, var(--bg), var(--acc)); }

  /* ---------- 469 · Diagonal split hero ---------- */
  .hds { position: relative; width: 100%; min-height: 250px; overflow: hidden; box-sizing: border-box; display: flex; align-items: center; padding: 1.4rem; }
.hds-bg { position: absolute; inset: 0; z-index: 0; }
.hds-bg--a { background: var(--bg2); clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
.hds-bg--b { background: var(--card); clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.hds-tag { position: absolute; top: 1.2rem; left: 1.3rem; z-index: 1; font: 600 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--dim); }
.hds-main { position: relative; z-index: 1; margin-left: auto; width: 60%; text-align: center; display: flex; flex-direction: column; gap: .5rem; padding-right: 1.3rem; box-sizing: border-box; }
.hds-title { margin: 0; font: 700 clamp(1.2rem, 5.6vw, 1.7rem)/1.12 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hds-sub { margin: 0; font: 400 .7rem/1.4 var(--sans); color: var(--dim); }

  /* ---------- 470 · Hero with inline email capture ---------- */
  .hec { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.hec-title { margin: 0; font: 700 clamp(1.15rem, 5.6vw, 1.6rem)/1.15 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hec-sub { margin: 0; max-width: 26ch; font: 400 .72rem/1.4 var(--sans); color: var(--dim); }
.hec-form { margin-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .3rem .3rem 1rem; transition: border-color .25s; }
.hec-form:has(.hec-input:focus-visible) { border-color: var(--acc); }
.hec-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hec-input { background: none; border: none; outline: none; color: var(--txt); font: 400 .72rem/1 var(--mono); width: 8.5rem; }
.hec-input::placeholder { color: var(--dim); }
.hec-btn { font: 600 .66rem/1 var(--mono); color: var(--bg); background: var(--acc); border: none; border-radius: 99px; padding: .6em 1em; white-space: nowrap; cursor: pointer; transition: filter .2s; }
.hec-btn:hover { filter: brightness(1.08); }
.hec-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hec-form, .hec-btn { transition: none; } }

  /* ---------- 471 · Full-bleed gradient hero ---------- */
  .hgc { position: relative; width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.5rem; box-sizing: border-box; }
.hgc-field { position: absolute; inset: -20%; background: conic-gradient(from 180deg at 50% 40%, var(--acc2), var(--acc), var(--acc2)); opacity: .22; filter: blur(30px); animation: hgc-drift 16s linear infinite; }
.hgc-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.hgc-eyebrow { margin: 0; font: 600 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--acc); }
.hgc-title { margin: 0; font: 700 clamp(1.3rem, 6.4vw, 1.95rem)/1.12 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hgc-sub { margin: 0; max-width: 26ch; font: 400 .74rem/1.4 var(--sans); color: var(--dim); }
@keyframes hgc-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hgc-field { animation: none; } }

  /* ---------- 472 · Hero with oversized numeral ---------- */
  .hln { position: relative; width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 1.4rem; box-sizing: border-box; overflow: hidden; }
.hln-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 clamp(6rem, 26vw, 9rem)/1 var(--mono); color: var(--txt); opacity: .12; letter-spacing: -.04em; pointer-events: none; }
.hln-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.hln-title { margin: 0; font: 700 clamp(1.3rem, 6.2vw, 1.9rem)/1.14 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hln-sub { margin: 0; max-width: 24ch; font: 400 .72rem/1.4 var(--sans); color: var(--dim); }

  /* ---------- 473 · Hero with bottom meta row ---------- */
  .hmrb { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.hmrb-title { margin: 0; font: 700 clamp(1.3rem, 6.2vw, 1.9rem)/1.13 var(--sans); letter-spacing: -.02em; color: var(--txt); }
.hmrb-meta { display: flex; align-items: center; gap: .6rem; }
.hmrb-item { font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); white-space: nowrap; }
.hmrb-div { width: 1px; height: .7rem; background: var(--line); }

  /* ---------- 474 · Hero with offset image panel ---------- */
  .hip { position: relative; width: 100%; min-height: 250px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: .6rem; padding: 1.3rem 1.2rem; box-sizing: border-box; }
.hip-copy { display: flex; flex-direction: column; gap: .5rem; z-index: 1; }
.hip-title { margin: 0; font: 700 clamp(1.05rem, 5vw, 1.5rem)/1.16 var(--sans); letter-spacing: -.01em; color: var(--txt); }
.hip-sub { margin: 0; max-width: 22ch; font: 400 .68rem/1.4 var(--sans); color: var(--dim); }
.hip-frame { position: relative; height: 100%; min-height: 150px; border: 1px solid var(--line); border-radius: 4px; transform: translate(.6rem, -.5rem); background: var(--bg2); padding: .4rem; box-sizing: border-box; }
.hip-img { width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(135deg, var(--acc2), var(--bg2) 60%, var(--acc)); opacity: .5; }
@media (max-width: 360px) { .hip { grid-template-columns: 1fr; } .hip-frame { transform: none; } }

  /* ---------- 475 · Hero with rotating word line ---------- */
  .hrw { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 1.4rem; box-sizing: border-box; }
.hrw-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .4em; font: 700 clamp(1.3rem, 6.4vw, 1.95rem)/1.15 var(--sans); letter-spacing: -.02em; color: var(--txt); text-align: center; }
.hrw-stage { position: relative; display: inline-block; height: 1.2em; min-width: 6.5ch; color: var(--acc); }
.hrw-word { position: absolute; left: 0; top: 0; opacity: 0; animation: hrw-cycle 6s ease-in-out infinite; }
.hrw-word:nth-child(1) { animation-delay: 0s; }
.hrw-word:nth-child(2) { animation-delay: 2s; }
.hrw-word:nth-child(3) { animation-delay: 4s; }
@keyframes hrw-cycle { 0%, 4% { opacity: 0; transform: translateY(.3em); } 8%, 28% { opacity: 1; transform: translateY(0); } 32%, 100% { opacity: 0; transform: translateY(-.3em); } }
@media (prefers-reduced-motion: reduce) { .hrw-word { animation: none; opacity: 0; } .hrw-word:first-child { opacity: 1; } }

  /* ---------- 476 · Stacked type-pairing hero ---------- */
  .hsm { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 1.5rem; box-sizing: border-box; }
.hsm-mono { margin: 0; font: 500 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--acc); }
.hsm-mono--b { color: var(--dim); letter-spacing: .12em; }
.hsm-display { margin: 0; font: 400 italic clamp(1.5rem, 7vw, 2.3rem)/1.08 var(--sans); letter-spacing: -.01em; color: var(--txt); }

  /* ---------- 477 · Hero with booking status strip ---------- */
  .hnb { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; text-align: center; padding: 1.4rem; box-sizing: border-box; }
.hnb-strip { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 99px; padding: .4em .9em; background: var(--bg2); }
.hnb-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--acc); flex: none; animation: hnb-pulse 2.4s ease-in-out infinite; }
.hnb-label { font: 500 .62rem/1 var(--mono); letter-spacing: .06em; color: var(--dim); }
.hnb-title { margin: 0; font: 700 clamp(1.3rem, 6.2vw, 1.9rem)/1.14 var(--sans); letter-spacing: -.02em; color: var(--txt); }
@keyframes hnb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hnb-dot { animation: none; } }

  /* ---------- 478 · Hero with two-line mask reveal ---------- */
  .htm { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 1.4rem; box-sizing: border-box; }
.htm-title { margin: 0; display: flex; flex-direction: column; gap: .15em; font: 700 clamp(1.25rem, 6vw, 1.85rem)/1.16 var(--sans); letter-spacing: -.02em; color: var(--txt); text-align: center; }
.htm-line { display: block; }
.htm-mask { display: inline-block; clip-path: inset(0 100% 0 0); animation: htm-wipe .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .1s; }
.htm-mask--b { animation-delay: .35s; }
@keyframes htm-wipe { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .htm-mask { animation: none; clip-path: inset(0 0 0 0); } }

  /* ---------- 479 · Media chapter list ---------- */
  .mcl { width: 88%; font-family: var(--sans); }
.mcl-row { display: flex; gap: .9rem; align-items: baseline; padding: .5rem .6rem;
  border-radius: 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mcl-row:hover { background: rgba(255,255,255,.03); }
.mcl-t { font: 500 .6rem var(--mono); color: var(--acc); }
.mcl-x { font: 400 .74rem var(--sans); color: var(--txt); }
.mcl-on { background: rgba(255,255,255,.04); }

  /* ---------- 480 · Compact nav bar with divider ---------- */
  .nfb { width: 100%; padding: 0 6% .7rem; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); font-family: var(--sans); }
.nfb-mark { font: 700 .92rem var(--sans); letter-spacing: -0.03em; color: var(--txt); }
.nfb-links { display: flex; gap: 1rem; }
.nfb-links a { font: 400 .72rem var(--sans); color: var(--dim); text-decoration: none; }
.nfb-links a:hover, .nfb-links a:focus-visible { color: var(--txt); }
.nfb-on { color: var(--acc) !important; }

  /* ---------- 481 · Per-seat calculator layout ---------- */
  .pseat-wrap{width:100%;padding:1.1rem 1.2rem;box-sizing:border-box;display:flex;flex-direction:column;gap:.6rem;}.pseat-kicker{margin:0;font:600 .58rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}.pseat-row{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}.pseat-term{font:700 1rem var(--mono);color:var(--txt);display:flex;align-items:baseline;gap:.3em;}.pseat-op{font:500 .8rem var(--mono);color:var(--dim);}.pseat-unit{font:500 .5rem var(--mono);color:var(--dim);text-transform:uppercase;}.pseat-total{font:700 1.3rem var(--mono);color:var(--acc);display:flex;align-items:baseline;gap:.3em;}.pseat-range{width:100%;accent-color:var(--acc);}.pseat-note{margin:0;font:400 .58rem/1.4 var(--sans);color:var(--dim);}

  /* ---------- 482 · Care instructions ---------- */
  .pci { width: 86%; border: 1px solid var(--line); border-radius: 6px; padding: .9rem 1rem; font-family: var(--sans); }
.pci-h { font: 500 .54rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); margin-bottom: .55rem; }
.pci-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .42rem; }
.pci-l li { display: flex; align-items: baseline; gap: .6rem; font: 400 .72rem var(--sans); color: var(--txt); }
.pci-s { color: var(--acc); font-size: .8em; }

  /* ---------- 483 · Provenance chain ---------- */
  .ppc { width: 100%; padding: 0 6%; display: flex; gap: .4rem; font-family: var(--sans); }
.ppc-s { flex: 1; position: relative; padding-top: .9rem; }
.ppc-s::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--line); }
.ppc-d { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.ppc-s b { display: block; font: 600 .72rem var(--sans); color: var(--txt); }
.ppc-s i { font-style: normal; font: 400 .6rem var(--mono); color: var(--dim); }

  /* ---------- 484 · Rating summary ---------- */
  .prs { width: 82%; font-family: var(--sans); }
.prs-score { display: flex; align-items: baseline; gap: .3rem; }
.prs-score b { font: 700 2rem/1 var(--sans); letter-spacing: -0.04em; color: var(--txt); }
.prs-score span { font: 400 .68rem var(--mono); color: var(--dim); }
.prs-bars { display: flex; flex-direction: column; gap: 4px; margin: .7rem 0 .5rem; }
.prs-b { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); position: relative; }
.prs-b::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p);
  border-radius: 2px; background: var(--acc); }
.prs-n { font: 400 .58rem var(--mono); color: var(--dim); }

  /* ---------- 485 · Chevron notch seam ---------- */
  .scn-seam { width: 100%; padding: 0 6%; display: flex; align-items: center; }
.scn-line { flex: 1; height: 1px; background: var(--line); }
.scn-chev { width: 9px; height: 9px; flex-shrink: 0; margin: 0 -5px;
  border-right: 1px solid var(--acc); border-bottom: 1px solid var(--acc); transform: rotate(45deg); }

  /* ---------- 486 · Continues-below descend cue ---------- */
  .sdc-seam { width: 100%; padding: 1rem 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sdc-line { width: 1px; height: 26px; background: var(--line); }
.sdc-arrow { width: 8px; height: 8px; border-right: 1px solid var(--dim); border-bottom: 1px solid var(--dim);
  transform: rotate(45deg); animation: sdc-drift 2.4s ease-in-out infinite; }
@keyframes sdc-drift { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
  50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sdc-arrow { animation: none; opacity: .8; } }

  /* ---------- 487 · Double hairline with centred dot ---------- */
  .sdh-seam { position: relative; width: 100%; padding: 0 6%; display: flex; flex-direction: column; gap: 5px; }
.sdh-line { height: 1px; width: 100%; background: var(--line); }
.sdh-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); transform: translate(-50%, -50%); }

  /* ---------- 488 · Rotated stamp-tag seam ---------- */
  .srt-seam { position: relative; width: 100%; padding: 0 6%; display: flex; align-items: center; }
.srt-line { flex: 1; height: 1px; background: var(--line); }
.srt-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg);
  padding: .25rem .6rem; background: var(--bg2); border: 1px solid var(--line);
  font: 500 .56rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--txt); white-space: nowrap; }

  /* ---------- 489 · Tone-shift band seam ---------- */
  .stb-seam { width: 100%; display: flex; flex-direction: column; }
.stb-top { height: 56px; background: var(--bg); }
.stb-band { height: 30px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stb-band span { font: 500 .52rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.stb-bottom { height: 56px; background: var(--bg2); }

  /* ---------- 490 · Progress ladder ---------- */
  .spl2 { width: 92%; display: flex; flex-direction: column; gap: .55rem; font-family: var(--sans); }
.spl2-r { display: grid; grid-template-columns: 6em 1fr 2em; gap: .7rem; align-items: center; }
.spl2-r > span:first-child { font: 400 .64rem var(--sans); color: var(--dim); }
.spl2-b { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); }
.spl2-b::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p);
  border-radius: 3px; background: var(--acc); }
.spl2-r b { font: 600 .7rem var(--mono); color: var(--txt); text-align: right; }

  /* ---------- 491 · Headline with footnote annotation ---------- */
  .tah-wrap { width: 100%; padding: 0 7%; font-family: var(--sans); }
.tah-head { margin: 0 0 .35rem; font: 700 clamp(1.2rem, 6vw, 1.7rem)/1.1 var(--sans); letter-spacing: -.03em; color: var(--txt); }
.tah-ref { font-size: .5em; color: var(--acc); margin-left: .1em; }
.tah-note { margin: 0; font: 400 .62rem/1.5 var(--sans); color: var(--dim); }
.tah-note sup { color: var(--acc); margin-right: .2em; }

  /* ---------- 492 · Numbered chapter heading ---------- */
  .tch-wrap { width: 100%; padding: 0 7%; display: flex; align-items: center; gap: 1rem; }
.tch-num { font: 300 clamp(2.4rem, 12vw, 3.6rem)/1 var(--mono); color: var(--dim); }
.tch-body { display: flex; flex-direction: column; gap: .2rem; border-left: 1px solid var(--line); padding-left: 1rem; }
.tch-kicker { font: 500 .58rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.tch-title { margin: 0; font: 700 clamp(1.05rem, 5vw, 1.4rem)/1.1 var(--sans); letter-spacing: -.02em; color: var(--txt); }

  /* ---------- 493 · Gradient-filled word ---------- */
  .tgw-line { width: 100%; padding: 0 7%; font: 600 clamp(1.2rem, 5.6vw, 1.6rem)/1.3 var(--sans);
  letter-spacing: -.015em; color: var(--txt); }
.tgw-word { background: linear-gradient(120deg, var(--acc), var(--acc2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* ---------- 494 · Hanging-indent paragraph set ---------- */
  .thi-list { width: 100%; padding: 0 7%; display: flex; flex-direction: column; gap: .55rem; }
.thi-p { margin: 0; padding-left: 1.7rem; text-indent: -1.7rem; font: 400 .76rem/1.5 var(--sans); color: var(--dim); }
.thi-mark { display: inline-block; width: 1.7rem; font: 500 .68rem var(--mono); color: var(--acc); }

  /* ---------- 495 · Two-size stacked lockup ---------- */
  .tsl-wrap { width: 100%; padding: 0 7%; display: flex; flex-direction: column; gap: .3rem; }
.tsl-big { font: 800 clamp(2.2rem, 13vw, 3.3rem)/.92 var(--sans); letter-spacing: -.045em; color: var(--txt); }
.tsl-small { font: 500 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

  /* ---------- 496 · Vertical label beside headline ---------- */
  .tvl-row { width: 100%; padding: 0 7%; display: flex; align-items: flex-end; gap: 1rem; }
.tvl-tag { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 .58rem var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim); padding-bottom: .05rem; flex-shrink: 0; }
.tvl-head { margin: 0; font: 700 clamp(1.15rem, 6.2vw, 1.7rem)/1.05 var(--sans); letter-spacing: -.03em; color: var(--txt); }

  /* ---------- 497 · Weighted clause line ---------- */
  .twc-line { width: 100%; padding: 0 7%; font-family: var(--sans); line-height: 1.3; }
.twc-light { font-weight: 300; font-size: clamp(1rem, 4.6vw, 1.3rem); letter-spacing: -.01em; color: var(--dim); }
.twc-heavy { font-weight: 800; font-size: clamp(1rem, 4.6vw, 1.3rem); letter-spacing: -.02em; color: var(--txt); }

  /* ---------- 498 · Wide letter-spaced label row ---------- */
  .twl-row { width: 100%; padding: .65rem 7%; display: flex; justify-content: space-between;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.twl-w { font: 500 .62rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.twl-on { color: var(--acc); }

  /* ---------- 499 · Print header ---------- */
  .cph { width: 90%; font-family: var(--sans); }
.cph-top { display: flex; justify-content: space-between; align-items: baseline; }
.cph-top b { font: 600 .95rem var(--sans); color: var(--txt); letter-spacing: -0.02em; }
.cph-top span { font: 500 .6rem var(--mono); color: var(--acc); }
.cph-rule { height: 1px; background: var(--line); margin: .5rem 0 .45rem; }
.cph-bot { display: flex; gap: 1rem; font: 400 .58rem var(--mono); color: var(--dim); }
.cph-bot span:last-child { margin-left: auto; }

  /* ---------- 500 · Section counter ---------- */
  .csn { display: flex; align-items: baseline; gap: .3rem; font-family: var(--mono); }
.csn-c { font: 600 1.1rem var(--mono); color: var(--acc); font-variant-numeric: tabular-nums; }
.csn-s, .csn-t { font: 400 .7rem var(--mono); color: var(--dim); }
.csn-l { margin-left: .7rem; font: 500 .56rem var(--mono); letter-spacing: .24em;
  text-transform: uppercase; color: var(--txt); }

  /* ---------- 501 · Two-path CTA ---------- */
  .ctp { width: 100%; padding: 0 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  font-family: var(--sans); }
.ctp-p { border: 1px solid var(--line); border-radius: 6px; padding: .85rem .9rem;
  text-decoration: none; display: flex; flex-direction: column; gap: .25rem;
  transition: border-color .28s, background .28s; }
.ctp-p:hover, .ctp-p:focus-visible { border-color: var(--acc); }
.ctp-p b { font: 600 .82rem var(--sans); color: var(--txt); }
.ctp-p span { font: 400 .64rem var(--mono); color: var(--dim); }
.ctp-main { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }
.ctp-main b { color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .ctp-p { transition: none; } }

  /* ---------- 502 · Inline-label rows ---------- */
  .filr { width: 88%; display: flex; flex-direction: column; gap: .4rem; font-family: var(--sans); }
.filr-r { display: grid; grid-template-columns: 4.6em 1fr; align-items: center; gap: .7rem;
  border-bottom: 1px solid var(--line); padding: .35rem 0; }
.filr-r span { font: 400 .62rem var(--mono); color: var(--dim); }
.filr-r input { background: none; border: 0; outline: none; color: var(--txt);
  font: 400 .74rem var(--sans); padding: .35em 0; }
.filr-r input::placeholder { color: var(--dim); opacity: .6; }
.filr-r:focus-within { border-bottom-color: var(--acc); }
.filr-b { align-self: flex-start; margin-top: .5rem; font: 500 .66rem var(--mono);
  color: var(--bg); background: var(--acc); border: 0; border-radius: 99px;
  padding: .6em 1.4em; cursor: pointer; }

  /* ---------- 503 · Question opener ---------- */
  .hqo { width: 100%; padding: 0 7%; font-family: var(--sans); }
.hqo-q { font: 400 clamp(1.2rem, 6vw, 1.75rem)/1.18 var(--sans); letter-spacing: -0.03em;
  color: var(--dim); font-style: italic; }
.hqo-a { font: 600 clamp(1.1rem, 5.4vw, 1.55rem)/1.2 var(--sans); letter-spacing: -0.03em;
  color: var(--txt); margin-top: .5rem; text-wrap: balance; }
.hqo-go { display: inline-block; margin-top: .9rem; font: 500 .68rem var(--mono);
  letter-spacing: .1em; color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc);
  padding-bottom: 3px; }

  /* ---------- 504 · Currency and region switcher row ---------- */
  .fxsr-wrap{width:100%;padding:1.1rem 1.2rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;}.fxsr-switch{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:.2rem;gap:.1rem;}.fxsr-pill{font:600 .58rem var(--mono);color:var(--dim);background:none;border:none;border-radius:99px;padding:.35em .8em;cursor:pointer;transition:color .2s,background .2s;}.fxsr-active{color:var(--bg);background:var(--acc);}.fxsr-pill:hover:not(.fxsr-active){color:var(--txt);}.fxsr-pill:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}.fxsr-price{margin:0;font:700 1.4rem var(--mono);color:var(--txt);display:flex;align-items:baseline;gap:.3em;}.fxsr-per{font:500 .5rem var(--mono);color:var(--dim);text-transform:uppercase;}.fxsr-note{margin:0;font:400 .56rem/1.4 var(--sans);color:var(--dim);}@media (prefers-reduced-motion: reduce){.fxsr-pill{transition:none;}}

  /* ---------- 505 · Enterprise talk-to-us panel beside two tiers ---------- */
  .pent-wrap{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:1rem;box-sizing:border-box;}.pent-card{border:1px solid var(--line);border-radius:8px;padding:.65rem .55rem;display:flex;flex-direction:column;gap:.35rem;background:var(--bg2);}.pent-enterprise{border-style:dashed;border-color:var(--dim);background:none;}.pent-name{margin:0;font:600 .66rem var(--sans);color:var(--txt);}.pent-price{margin:0;font:700 1.05rem var(--mono);color:var(--txt);}.pent-custom{margin:0;font:700 .82rem var(--mono);color:var(--dim);}.pent-per{font:500 .5rem var(--mono);color:var(--dim);}.pent-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.2rem;font:400 .54rem/1.3 var(--sans);color:var(--dim);}.pent-btn{margin-top:auto;font:600 .58rem var(--mono);color:var(--txt);background:none;border:1px solid var(--line);border-radius:6px;padding:.5em .3em;cursor:pointer;transition:border-color .2s,color .2s;}.pent-btn:hover{border-color:var(--acc);color:var(--acc);}.pent-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.pent-btn{transition:none;}}

  /* ---------- 506 · Fee transparency ---------- */
  .pft { width: 82%; font-family: var(--sans); }
.pft-r { display: flex; justify-content: space-between; align-items: baseline; padding: .5rem 0;
  border-bottom: 1px solid var(--line); font: 400 .74rem var(--sans); color: var(--dim); }
.pft-r b { font: 500 .78rem var(--mono); color: var(--txt); }
.pft-r i { font-style: normal; font-size: .82em; color: var(--acc); }
.pft-t { border-bottom: 0; border-top: 1px solid var(--acc); margin-top: .2rem; padding-top: .6rem; }
.pft-t span, .pft-t b { color: var(--txt); font-weight: 600; }

  /* ---------- 507 · One-off versus subscription pair ---------- */
  .poos-wrap{width:100%;display:flex;align-items:center;gap:.7rem;padding:1rem;box-sizing:border-box;}.poos-opt{flex:1;border:1px solid var(--line);border-radius:8px;padding:.75rem .7rem;display:flex;flex-direction:column;gap:.3rem;box-sizing:border-box;}.poos-emph{border-color:var(--acc);background:var(--card);}.poos-tag{margin:0;font:600 .56rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);}.poos-price{margin:0;font:700 1.05rem var(--mono);color:var(--txt);display:flex;align-items:baseline;gap:.3em;}.poos-emph .poos-price{color:var(--acc);}.poos-per{font:500 .5rem var(--mono);color:var(--dim);text-transform:uppercase;}.poos-desc{margin:0;font:400 .56rem/1.35 var(--sans);color:var(--dim);}.poos-or{flex:none;font:500 .58rem var(--mono);color:var(--dim);text-transform:uppercase;}

  /* ---------- 508 · Price with struck-through comparison ---------- */
  .pstr-wrap{width:100%;padding:1.1rem 1.2rem;box-sizing:border-box;display:flex;flex-direction:column;gap:.4rem;}.pstr-label{margin:0;font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}.pstr-row{margin:0;display:flex;align-items:baseline;gap:.6rem;}.pstr-old{font:600 1rem var(--mono);color:var(--dim);text-decoration:line-through;text-decoration-color:var(--dim);display:flex;align-items:baseline;gap:.25em;}.pstr-new{font:700 1.5rem var(--mono);color:var(--acc);display:flex;align-items:baseline;gap:.25em;}.pstr-per{font:500 .5rem var(--mono);text-transform:uppercase;color:var(--dim);}.pstr-note{margin:0;font:400 .56rem/1.4 var(--sans);color:var(--dim);}

  /* ---------- 509 · Usage-tier ladder ---------- */
  .plad-wrap{width:100%;padding:1rem 1.15rem;box-sizing:border-box;}.plad-kicker{margin:0 0 .5rem;font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}.plad-list{margin:0;padding:0;list-style:none;position:relative;padding-left:.9rem;border-left:1px solid var(--line);}.plad-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.4rem 0;position:relative;}.plad-row::before{content:'';position:absolute;left:-.94rem;top:50%;width:6px;height:6px;border-radius:50%;background:var(--line);transform:translateY(-50%);}.plad-last::before{background:var(--acc);}.plad-range{font:500 .6rem var(--mono);color:var(--dim);}.plad-price{font:600 .64rem var(--mono);color:var(--txt);}.plad-last .plad-price{color:var(--acc);}

  /* ---------- 510 · Inline mention line ---------- */
  .pim { width: 86%; text-align: center; font: 400 .86rem/1.6 var(--sans); color: var(--dim); }
.pim b { color: var(--txt); font-weight: 600; }
.pim-em { color: var(--acc); }

  /* ---------- 511 · Stepped seam ---------- */
  .sst { width: 100%; display: flex; align-items: flex-end; height: 34px; }
.sst i { flex: 1; display: block; background: var(--bg); border-top: 1px solid var(--line); }
.sst i:nth-child(1) { height: 100%; }
.sst i:nth-child(2) { height: 78%; }
.sst i:nth-child(3) { height: 56%; }
.sst i:nth-child(4) { height: 34%; }
.sst i:nth-child(5) { height: 12%; border-top-color: var(--acc); }

  /* ---------- 512 · Stitched rule ---------- */
  .ssr2 { width: 100%; padding: 0 6%; display: flex; align-items: center; gap: .5rem; }
.ssr2-d { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px); }
.ssr2-c { width: 26%; height: 2px; border-radius: 1px; background: var(--acc); opacity: .8; }

  /* ---------- 513 · Comparison pair ---------- */
  .scp { display: flex; align-items: center; gap: 1.2rem; font-family: var(--sans); }
.scp-side { text-align: center; }
.scp-l { font: 500 .52rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.scp-side b { display: block; font: 700 2.2rem/1 var(--sans); letter-spacing: -0.05em;
  color: var(--txt); font-variant-numeric: tabular-nums; margin-top: .2rem; }
.scp-now b { color: var(--acc); }
.scp-arrow { font: 400 1rem var(--mono); color: var(--dim); }

  /* ---------- 514 · Marker underline ---------- */
  .tmu { width: 84%; text-align: center; font: 400 1rem/1.6 var(--sans); color: var(--txt); }
.tmu-m { background-image: linear-gradient(90deg, var(--acc), var(--acc));
  background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 92%;
  padding-bottom: 2px; }

  /* ---------- 515 · Focus ring ---------- */
  .cfo { width: 88%; font-family: var(--sans); }
.cfo-k { font: 400 .58rem var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .6rem; }
.cfo-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cfo-b, .cfo-a, .cfo-i { font: 500 .68rem var(--mono); border-radius: 6px; padding: .55em 1em;
  background: none; border: 1px solid var(--line); color: var(--txt); text-decoration: none; }
.cfo-b:focus-visible, .cfo-a:focus-visible, .cfo-i:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px; border-color: var(--acc); }
.cfo-i::placeholder { color: var(--dim); }

  /* ---------- 516 · Progress CTA ---------- */
  .cpc { width: 84%; font-family: var(--sans); text-align: center; }
.cpc-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.cpc-bar i { display: block; height: 100%; width: var(--p); border-radius: 2px; background: var(--acc); }
.cpc-t { font: 400 .64rem var(--mono); color: var(--dim); margin: .6rem 0 .7rem; }
.cpc-b { font: 500 .7rem var(--mono); color: var(--bg); background: var(--acc); border: 0;
  border-radius: 99px; padding: .7em 1.5em; cursor: pointer; transition: opacity .25s; }
.cpc-b:hover, .cpc-b:focus-visible { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .cpc-b { transition: none; } }

  /* ---------- 517 · One question at a time ---------- */
  .fqo { width: 84%; font-family: var(--sans); }
.fqo-n { font: 500 .58rem var(--mono); letter-spacing: .16em; color: var(--acc); }
.fqo-q { display: block; font: 500 1rem/1.3 var(--sans); color: var(--txt);
  letter-spacing: -0.02em; margin: .35rem 0 .7rem; }
.fqo-i { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  outline: none; color: var(--txt); font: 400 .86rem var(--sans); padding: .4em 0; }
.fqo-i::placeholder { color: var(--dim); opacity: .55; }
.fqo-i:focus { border-bottom-color: var(--acc); }
.fqo-h { font: 400 .56rem var(--mono); color: var(--dim); margin-top: .6rem; }

  /* ---------- 518 · Index-card hero ---------- */
  .hic { width: 88%; border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem; font-family: var(--sans); }
.hic-top { display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.hic-top b { font: 600 1.05rem var(--sans); letter-spacing: -0.025em; color: var(--txt); }
.hic-top span { font: 500 .56rem var(--mono); letter-spacing: .18em; color: var(--acc); }
.hic-rows { display: flex; flex-direction: column; gap: .34rem; padding-top: .7rem; }
.hic-rows div { display: flex; justify-content: space-between; font-size: .66rem; }
.hic-rows span { font-family: var(--mono); color: var(--dim); letter-spacing: .12em; }
.hic-rows b { font: 500 .68rem var(--sans); color: var(--txt); }
.hic-live { color: var(--acc) !important; }

  /* ---------- 519 · Marquee band hero ---------- */
  .hmb { width: 100%; font-family: var(--sans); }
.hmb-band { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .7rem 0; }
.hmb-run { display: flex; gap: 1.2rem; width: max-content; white-space: nowrap;
  font: 700 clamp(1.3rem, 6vw, 2rem) var(--sans); letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--txt); animation: hmb-go 13s linear infinite; }
.hmb-run span:nth-child(even) { color: var(--acc); }
@keyframes hmb-go { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hmb-sub { padding: .8rem 6% 0; font: 400 .74rem var(--sans); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .hmb-run { animation: none; } }

  /* ---------- 520 · What changes by tier ---------- */
  .pwc { width: 88%; font-family: var(--sans); }
.pwc-h, .pwc-r { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem;
  align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.pwc-h b { font: 500 .56rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.pwc-r span { font: 400 .7rem var(--sans); color: var(--dim); }
.pwc-r b { font: 500 .72rem var(--mono); color: var(--txt); min-width: 3.4em; text-align: right; }
.pwc-on { color: var(--acc) !important; }

  /* ---------- 521 · Case strip ---------- */
  .pcst { width: 88%; border-left: 2px solid var(--acc); padding-left: 1rem; font-family: var(--sans); }
.pcst-k { font: 500 .52rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
.pcst-rows { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.pcst-rows div { display: grid; grid-template-columns: 4.6em 1fr; gap: .7rem; align-items: baseline; }
.pcst-rows span { font: 400 .58rem var(--mono); color: var(--dim); letter-spacing: .1em; }
.pcst-rows b { font: 500 .74rem var(--sans); color: var(--txt); }

  /* ---------- 522 · Inset corner seam ---------- */
  .sic { width: 100%; }
.sic-top { height: 26px; border-bottom: 1px solid var(--line); }
.sic-next { margin-left: 22%; border-left: 1px solid var(--acc); border-top: 1px solid var(--acc);
  border-top-left-radius: 6px; padding: .6rem 1rem; background: rgba(255,255,255,.03); }
.sic-next span { font: 500 .54rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }

  /* ---------- 523 · Share split bar ---------- */
  .sss { width: 90%; font-family: var(--sans); }
.sss-bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; }
.sss-bar i { display: block; width: var(--w); }
.sss-a { background: var(--acc); }
.sss-b { background: var(--acc2); }
.sss-c { background: rgba(255,255,255,.14); }
.sss-key { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .6rem;
  font: 400 .58rem var(--mono); color: var(--dim); }
.sss-key span { display: flex; align-items: center; gap: .35rem; }
.sss-key b { width: 7px; height: 7px; border-radius: 2px; display: block; }
.sss-ka { background: var(--acc); }
.sss-kb { background: var(--acc2); }
.sss-kc { background: rgba(255,255,255,.14); }

  /* ---------- 524 · Lead and dek ---------- */
  .tld { width: 100%; padding: 0 7%; font-family: var(--sans); }
.tld-lead { font: 700 clamp(1.25rem, 6vw, 1.7rem)/1.08 var(--sans); letter-spacing: -0.04em;
  color: var(--txt); text-wrap: balance; }
.tld-dek { font: 300 clamp(.82rem, 3.8vw, .95rem)/1.5 var(--sans); color: var(--dim);
  margin-top: .55rem; max-width: 32rem; text-wrap: pretty; }
.tld-dek::first-line { color: var(--txt); }

  /* ---------- 525 · New device sign-in approval ---------- */
  .adc-wrap { width: 86%; box-sizing: border-box; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-family: var(--sans); }
.adc-ico { display: block; width: 1.7rem; height: 1.7rem; border-radius: 6px; background: var(--acc2); opacity: .85; margin-bottom: .6rem; }
.adc-h { margin: 0 0 .6rem; font: 600 .74rem var(--sans); color: var(--txt); }
.adc-rows { display: flex; flex-direction: column; margin-bottom: .8rem; }
.adc-row { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font: 400 .58rem var(--mono); color: var(--dim); }
.adc-row:last-child { border-bottom: none; }
.adc-row span:last-child { color: var(--txt); }
.adc-actions { display: flex; gap: .5rem; }
.adc-btn { flex: 1; font: 500 .6rem var(--mono); padding: .5em; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.adc-deny:hover, .adc-deny:focus-visible { color: var(--txt); border-color: var(--txt); }
.adc-approve { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.adc-approve:hover, .adc-approve:focus-visible { opacity: .85; }
.adc-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .adc-btn { transition: none; } }

  /* ---------- 526 · Organisation invite accept card ---------- */
  .aic-wrap { width: 86%; box-sizing: border-box; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--card); text-align: center; font-family: var(--sans); }
.aic-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--acc2); color: var(--txt); font: 600 .78rem var(--mono); margin-bottom: .6rem; }
.aic-lede { margin: 0 0 .5rem; font: 400 .66rem/1.4 var(--sans); color: var(--dim); }
.aic-lede b { color: var(--txt); font-weight: 600; }
.aic-role { display: inline-block; margin-bottom: .9rem; font: 500 .52rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); border: 1px dashed var(--line); border-radius: 99px; padding: .25rem .65rem; }
.aic-actions { display: flex; gap: .5rem; }
.aic-btn { flex: 1; font: 500 .6rem var(--mono); padding: .5em; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.aic-decline:hover, .aic-decline:focus-visible { color: var(--txt); border-color: var(--txt); }
.aic-accept { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.aic-accept:hover, .aic-accept:focus-visible { opacity: .85; }
.aic-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .aic-btn { transition: none; } }

  /* ---------- 527 · Account lockout cooldown notice ---------- */
  .alc-wrap { width: 84%; box-sizing: border-box; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); text-align: center; font-family: var(--sans); }
.alc-ico { display: block; width: 1.6rem; height: 1.6rem; margin: 0 auto .55rem; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.alc-ico::before { content: ''; position: absolute; top: 22%; left: 50%; width: 1.5px; height: 38%; margin-left: -.75px; background: var(--acc2); }
.alc-ico::after { content: ''; position: absolute; bottom: 22%; left: 50%; width: 2px; height: 2px; margin-left: -1px; border-radius: 50%; background: var(--acc2); }
.alc-h { margin: .2rem 0 .35rem; font: 600 .74rem var(--sans); color: var(--txt); }
.alc-p { margin: 0 0 .8rem; font: 400 .6rem/1.5 var(--sans); color: var(--dim); }
.alc-time { color: var(--txt); font-weight: 600; font-family: var(--mono); }
.alc-bar { width: 100%; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: .8rem; }
.alc-fill { display: block; height: 100%; width: 42%; background: var(--acc2); border-radius: 99px; }
.alc-link { display: inline-block; font: 500 .56rem var(--mono); color: var(--acc); text-decoration: none; }
.alc-link:hover, .alc-link:focus-visible { text-decoration: underline; }
.alc-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

  /* ---------- 528 · Multistep signup with step indicator ---------- */
  .ams-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 1rem; font-family: var(--sans); }
.ams-steps { position: relative; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; }
.ams-steps::before { content: ''; position: absolute; top: .35rem; left: 8%; right: 8%; height: 1px; background: var(--line); z-index: 0; }
.ams-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); background: var(--bg2); }
.ams-dot { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); }
.ams-done .ams-dot { background: var(--acc); border-color: var(--acc); }
.ams-on { color: var(--txt); }
.ams-on .ams-dot { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.ams-form { display: flex; flex-direction: column; gap: .5rem; }
.ams-label { font: 500 .54rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.ams-input { padding: .55em .65em; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--txt); font: 400 .68rem var(--sans); transition: border-color .15s; }
.ams-input:focus-visible { outline: none; border-color: var(--acc); }
.ams-cta { margin-top: .2rem; align-self: flex-start; font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--bg); background: var(--acc); border: none; border-radius: 6px; padding: .55em 1.1em; cursor: pointer; transition: opacity .2s; }
.ams-cta:hover, .ams-cta:focus-visible { opacity: .85; }
.ams-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ams-input, .ams-cta { transition: none; } }

  /* ---------- 529 · Password field with strength meter ---------- */
  .aps-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .5rem; font-family: var(--sans); }
.aps-label { font: 500 .54rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.aps-input { padding: .55em .65em; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--txt); font: 400 .7rem var(--sans); letter-spacing: .15em; transition: border-color .15s; }
.aps-input:focus-visible { outline: none; border-color: var(--acc); }
.aps-meter { display: flex; gap: .25rem; margin-top: .2rem; }
.aps-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.aps-fill { background: var(--acc); }
.aps-strength { margin: 0; font: 500 .58rem var(--mono); color: var(--acc); }
.aps-reqs { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.aps-req { position: relative; padding-left: 1rem; font: 400 .6rem var(--sans); color: var(--dim); }
.aps-req::before { content: ''; position: absolute; left: 0; top: .3em; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--line); }
.aps-met { color: var(--txt); }
.aps-met::before { background: var(--acc); border-color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .aps-input { transition: none; } }

  /* ---------- 530 · Recovery codes with checkbox reveal ---------- */
  .arv-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; font-family: var(--sans); }
.arv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; gap: .6rem; }
.arv-h { margin: 0; font: 600 .74rem var(--sans); color: var(--txt); }
.arv-toggle { display: flex; align-items: center; gap: .35rem; font: 500 .54rem var(--mono); color: var(--dim); cursor: pointer; }
.arv-check { accent-color: var(--acc); cursor: pointer; }
.arv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; filter: blur(5px); transition: filter .2s; }
.arv-wrap:has(.arv-check:checked) .arv-grid { filter: none; }
.arv-code { display: block; text-align: center; padding: .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); font: 500 .62rem var(--mono); letter-spacing: .03em; color: var(--txt); }
.arv-actions { display: flex; gap: .5rem; margin-top: .8rem; }
.arv-btn { flex: 1; font: 500 .58rem var(--mono); padding: .5em; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; transition: border-color .15s, color .15s; }
.arv-btn:hover, .arv-btn:focus-visible { border-color: var(--acc); color: var(--txt); }
.arv-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .arv-grid, .arv-btn { transition: none; } }

  /* ---------- 531 · Account type selection cards ---------- */
  .arc-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; font-family: var(--sans); }
.arc-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.arc-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .7rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.arc-card b { font: 600 .6rem var(--sans); color: var(--txt); }
.arc-card span { font: 400 .5rem/1.3 var(--sans); color: var(--dim); }
.arc-input:checked + .arc-card { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.arc-input:checked + .arc-card::after { content: ''; position: absolute; top: .5rem; right: .5rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--acc); }
.arc-input:focus-visible + .arc-card { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .arc-card { transition: none; } }

  /* ---------- 532 · Scrollable terms consent gate ---------- */
  .atc-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .7rem; font-family: var(--sans); }
.atc-box { position: relative; height: 5.6rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; background: var(--bg2); }
.atc-box::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.4rem; background: linear-gradient(to bottom, transparent, var(--bg2)); pointer-events: none; }
.atc-box:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.atc-p { margin: 0 0 .5rem; font: 400 .58rem/1.5 var(--sans); color: var(--dim); }
.atc-p:last-child { margin-bottom: 0; }
.atc-check { display: flex; align-items: center; gap: .5rem; font: 500 .56rem var(--mono); color: var(--dim); cursor: pointer; }
.atc-input { accent-color: var(--acc); cursor: pointer; }
.atc-cta { align-self: flex-start; font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--bg); background: var(--acc); border: none; border-radius: 6px; padding: .55em 1.1em; cursor: pointer; opacity: .4; transition: opacity .2s; }
.atc-wrap:has(.atc-input:checked) .atc-cta { opacity: 1; }
.atc-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .atc-cta { transition: none; } }

  /* ---------- 533 · Blockout collage ---------- */
  .blk { position: absolute; inset: 0; overflow: hidden; background: var(--bg2); }
.blk-r { position: absolute; }
.blk-1 { width: 58%; height: 42%; left: -6%; top: -8%; background: var(--card); border: 1px solid var(--line); }
.blk-2 { width: 34%; height: 64%; right: 8%; top: 12%; background: var(--acc2); opacity: .55; }
.blk-3 { width: 46%; height: 22%; left: 22%; bottom: -4%; background: var(--acc); opacity: .4; }
.blk-line { position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: var(--line); transform: rotate(-3deg); }

  /* ---------- 534 · Conic spoke wheel ---------- */
  .csw { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.csw-wheel { position: absolute; width: 160%; aspect-ratio: 1; left: -50%; top: -50%; opacity: .32;
  background: repeating-conic-gradient(from 0deg, var(--acc2) 0deg 3deg, transparent 3deg 16deg);
  animation: csw-spin 48s linear infinite; }
.csw-fade { position: absolute; inset: 0; background: radial-gradient(75% 70% at 35% 35%, transparent, var(--bg) 92%); }
@keyframes csw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .csw-wheel { animation: none; } }

  /* ---------- 535 · Corner register marks ---------- */
  .crm { position: absolute; inset: 0; overflow: hidden; background: var(--bg2); }
.crm-b { position: absolute; width: 22px; height: 22px; }
.crm-tl { top: 16px; left: 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.crm-tr { top: 16px; right: 16px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.crm-bl { bottom: 16px; left: 16px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.crm-br { bottom: 16px; right: 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.crm-x { position: absolute; top: 50%; left: 50%; background: var(--acc); opacity: .55; transform: translate(-50%, -50%); }
.crm-h { width: 26px; height: 1px; }
.crm-v { width: 1px; height: 26px; }
.crm-tag { position: absolute; right: 16px; bottom: 40px; font: 500 .55rem var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

  /* ---------- 536 · Facet shard cluster ---------- */
  .fac { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.fac-s { position: absolute; width: 46%; aspect-ratio: 1; }
.fac-1 { left: -8%; top: -10%; background: var(--acc2); opacity: .22;
  clip-path: polygon(0 0, 100% 20%, 60% 100%); }
.fac-2 { width: 38%; right: -6%; top: 8%; background: var(--acc); opacity: .16; transform: rotate(8deg);
  clip-path: polygon(20% 0, 100% 10%, 80% 100%, 0 70%); }
.fac-3 { width: 30%; left: 20%; bottom: -8%; background: var(--line); opacity: .4;
  clip-path: polygon(0 30%, 70% 0, 100% 100%, 20% 100%); }
.fac-4 { width: 26%; right: 16%; bottom: -6%; background: var(--acc2); opacity: .2; transform: rotate(-14deg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fac-5 { width: 20%; left: 46%; top: 38%; background: var(--acc); opacity: .14; transform: rotate(24deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%); }

  /* ---------- 537 · Halftone dither ---------- */
  .hfd { position: absolute; inset: 0; overflow: hidden; background: var(--bg2); }
.hfd-a, .hfd-b { position: absolute; inset: 0; background-image: radial-gradient(var(--dim) 1.4px, transparent 1.4px); }
.hfd-a { background-size: 8px 8px;
  mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%); }
.hfd-b { background-size: 22px 22px;
  mask-image: linear-gradient(315deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: linear-gradient(315deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%); }

  /* ---------- 538 · Orbit rings ---------- */
  .obr { position: absolute; inset: 0; overflow: hidden; background: var(--bg);
  display: flex; align-items: center; justify-content: center; }
.obr-rings { position: relative; width: 70%; aspect-ratio: 1; max-width: 220px; }
.obr-ring { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; }
.obr-r2 { inset: 16%; }
.obr-r3 { inset: 32%; }
.obr-core { position: absolute; inset: 44%; border-radius: 50%; background: var(--acc2); opacity: .5; }
.obr-orbit { position: absolute; inset: 0; animation: obr-spin 22s linear infinite; }
.obr-dot { position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
@keyframes obr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .obr-orbit { animation: none; } }

  /* ---------- 539 · Ridge silhouette ---------- */
  .rsl { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.rsl-l { position: absolute; left: -10%; right: -10%; bottom: 0; height: 70%; }
.rsl-1 { background: var(--bg2); opacity: .9;
  clip-path: polygon(0 60%, 12% 40%, 26% 55%, 40% 30%, 55% 50%, 68% 24%, 82% 46%, 100% 32%, 100% 100%, 0 100%); }
.rsl-2 { height: 52%; background: var(--acc2); opacity: .22; animation: rsl-drift 34s ease-in-out infinite alternate;
  clip-path: polygon(0 70%, 15% 46%, 30% 62%, 48% 34%, 63% 58%, 80% 30%, 100% 50%, 100% 100%, 0 100%); }
.rsl-3 { height: 34%; background: var(--acc); opacity: .16;
  clip-path: polygon(0 80%, 20% 55%, 42% 70%, 58% 45%, 78% 66%, 100% 48%, 100% 100%, 0 100%); }
@keyframes rsl-drift { to { transform: translateX(-3%); } }
@media (prefers-reduced-motion: reduce) { .rsl-2 { animation: none; } }

  /* ---------- 540 · Sheen sweep ---------- */
  .shs { position: absolute; inset: 0; overflow: hidden; background: var(--bg2); }
.shs-rule { position: absolute; left: -10%; right: -10%; top: 54%; height: 1px; background: var(--line); transform: rotate(-5deg); }
.shs-tag { position: absolute; left: 18px; bottom: 16px; font: 500 .55rem var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.shs-band { position: absolute; top: 0; bottom: 0; left: -35%; width: 30%; opacity: .6;
  background: linear-gradient(90deg, transparent, var(--acc2) 45%, var(--acc) 55%, transparent);
  animation: shs-pass 6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes shs-pass { to { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .shs-band { animation: none; left: 40%; } }

  /* ---------- 541 · Diagonal split content panel ---------- */
  .cds-wrap{position:relative;width:100%;height:210px;background:var(--card);overflow:hidden;display:flex;font-family:var(--sans);}
.cds-wrap::before{content:'';position:absolute;inset:0;right:38%;background:var(--bg2);clip-path:polygon(0 0,100% 0,72% 100%,0 100%);}
.cds-a{position:relative;flex:0 0 54%;display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1.5rem 1.6rem;}
.cds-b{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1.5rem 1.7rem 1.5rem 1.1rem;}
.cds-tag{font:500 .5rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.cds-t{font:500 .78rem/1.4 var(--sans);color:var(--txt);margin:0;}

  /* ---------- 542 · Annotated diagram pins ---------- */
  .cdp-wrap{width:100%;padding:.9rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;font-family:var(--sans);}
.cdp-svg{width:100%;max-width:186px;height:auto;}
.cdp-pin{fill:var(--acc);stroke:var(--bg2);stroke-width:2;}
.cdp-num{font:700 8px var(--sans);fill:rgba(0,0,0,.75);text-anchor:middle;}
.cdp-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .9rem;width:100%;max-width:280px;}
.cdp-legend li{font:400 .58rem/1.35 var(--sans);color:var(--dim);}
.cdp-legend b{font:700 .58rem var(--mono);color:var(--txt);margin-right:.25rem;}

  /* ---------- 543 · Drop-cap column feature ---------- */
  .cdc-wrap{width:100%;padding:1.6rem 1.5rem;font-family:var(--sans);}
.cdc-kick{font:500 .56rem var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin:0 0 .7rem;}
.cdc-cols{column-count:2;column-gap:1.2rem;column-rule:1px solid var(--line);}
.cdc-p{font:400 .68rem/1.5 var(--sans);color:var(--txt);margin:0 0 .5rem;}
.cdc-p:first-of-type::first-letter{float:left;font:700 2.7rem/.78 var(--sans);color:var(--acc);padding:.05rem .14rem 0 0;}

  /* ---------- 544 · Filmstrip content scroller ---------- */
  .cfr-wrap{position:relative;width:100%;padding:1.4rem 0;}
.cfr-wrap::after{content:'';position:absolute;top:1.4rem;bottom:1.4rem;right:0;width:30px;z-index:1;pointer-events:none;background:linear-gradient(-90deg,var(--bg2),transparent);}
.cfr-track{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1.2rem;height:190px;scrollbar-width:none;}
.cfr-track::-webkit-scrollbar{display:none;}
.cfr-card{scroll-snap-align:center;flex:0 0 140px;height:170px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:.9rem .85rem;display:flex;flex-direction:column;gap:.35rem;}
.cfr-k{font:500 .5rem var(--mono);letter-spacing:.2em;color:var(--dim);}
.cfr-h{font:600 .78rem var(--sans);color:var(--txt);margin:0;}
.cfr-p{font:400 .68rem/1.4 var(--sans);color:var(--dim);margin:0;}

  /* ---------- 545 · Margin line-numbered clauses ---------- */
  .cmn-wrap{width:100%;padding:1.7rem 1.6rem;font-family:var(--sans);}
.cmn-kick{font:500 .56rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 .8rem;}
.cmn-lines{list-style:none;margin:0;padding:0;counter-reset:cmn-c;border-top:1px solid var(--line);}
.cmn-line{counter-increment:cmn-c;position:relative;padding:.55rem 0 .55rem 2.1rem;font:400 .72rem/1.5 var(--sans);color:var(--txt);border-bottom:1px solid var(--line);}
.cmn-line::before{content:counter(cmn-c,decimal-leading-zero);position:absolute;left:0;top:.58rem;font:500 .62rem var(--mono);color:var(--dim);}

  /* ---------- 546 · Corkboard note wall ---------- */
  .cnc-wrap{width:100%;padding:1.7rem 1.6rem;display:flex;justify-content:center;}
.cnc-board{position:relative;width:100%;max-width:300px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:66px;grid-auto-flow:dense;gap:1.1rem 1.4rem;}
.cnc-note{border:1px solid var(--line);background:var(--card);padding:.6rem .7rem;box-shadow:0 6px 14px rgba(0,0,0,.22);display:flex;align-items:center;}
.cnc-note p{margin:0;font:400 .66rem/1.35 var(--sans);color:var(--txt);}
.cnc-n1{transform:rotate(-2.5deg);}
.cnc-n2{transform:rotate(1.8deg);}
.cnc-n3{transform:rotate(-1.2deg);grid-row:span 2;}
.cnc-n4{transform:rotate(2.6deg);}

  /* ---------- 547 · Sticky index scroll pane ---------- */
  .csi-wrap{width:100%;padding:1.2rem 0;display:flex;justify-content:center;}
.csi-scroll{width:88%;height:200px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg2);}
.csi-group{padding:0 1rem;}
.csi-label{position:sticky;top:0;margin:0;padding:.5rem 0;font:600 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);background:var(--bg2);border-bottom:1px solid var(--line);}
.csi-item{margin:0;padding:.5rem 0;font:400 .72rem/1.4 var(--sans);color:var(--txt);border-bottom:1px solid var(--line);}
.csi-group:last-child .csi-item:last-child{border-bottom:none;}

  /* ---------- 548 · Tabbed content switch ---------- */
  .cts-wrap{width:100%;padding:1.8rem 1.6rem;font-family:var(--sans);}
.cts-tabs{display:flex;gap:1.1rem;border-bottom:1px solid var(--line);margin-bottom:.9rem;}
.cts-input{position:absolute;width:1px;height:1px;opacity:0;}
.cts-tab{padding:.4rem .05rem .55rem;font:500 .68rem var(--sans);color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:color .25s,border-color .25s;user-select:none;}
.cts-input:checked+.cts-tab{color:var(--txt);border-color:var(--acc);}
.cts-input:focus-visible+.cts-tab{outline:1px solid var(--acc);outline-offset:2px;}
.cts-panel{display:none;font:400 .74rem/1.55 var(--sans);color:var(--txt);margin:0;}
.cts-wrap:has(#cts-1:checked) .cts-p1{display:block;}
.cts-wrap:has(#cts-2:checked) .cts-p2{display:block;}
.cts-wrap:has(#cts-3:checked) .cts-p3{display:block;}
@media (prefers-reduced-motion: reduce){.cts-wrap *{transition:none!important;}}

  /* ---------- 549 · Activity heatmap grid ---------- */
  .dhg-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .7rem; font-family: var(--sans); }
.dhg-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dhg-title { font: 600 .62rem var(--sans); color: var(--txt); }
.dhg-legend { display: flex; align-items: center; gap: .25rem; font: 400 .5rem var(--mono); color: var(--dim); }
.dhg-lt { padding: 0 .1rem; }
.dhg-lg { width: .45rem; height: .45rem; border-radius: 2px; background: var(--line); }
.dhg-lg.dhg-l1 { background: var(--acc); opacity: .28; }
.dhg-lg.dhg-l2 { background: var(--acc); opacity: .52; }
.dhg-lg.dhg-l3 { background: var(--acc); opacity: .76; }
.dhg-lg.dhg-l4 { background: var(--acc); opacity: 1; }
.dhg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .22rem; }
.dhg-cell { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--line); }
.dhg-cell.dhg-l1 { background: var(--acc); opacity: .28; }
.dhg-cell.dhg-l2 { background: var(--acc); opacity: .52; }
.dhg-cell.dhg-l3 { background: var(--acc); opacity: .76; }
.dhg-cell.dhg-l4 { background: var(--acc); opacity: 1; }

  /* ---------- 550 · Period comparison split ---------- */
  .dcs-wrap { width: 100%; padding: 1.2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.1rem; font-family: var(--sans); }
.dcs-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.dcs-lbl { font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.dcs-num { font: 600 1.3rem var(--sans); color: var(--txt); letter-spacing: -.01em; }
.dcs-dim { color: var(--dim); }
.dcs-mid { flex: none; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.dcs-arrow { font-size: .95rem; color: var(--acc); }
.dcs-delta { font: 400 .48rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }

  /* ---------- 551 · Nested file tree list ---------- */
  .dnt-wrap { width: 100%; padding: 1rem 1.2rem; box-sizing: border-box; font: 400 .64rem var(--sans); color: var(--dim); }
.dnt-folder { margin-bottom: .15rem; }
.dnt-sum { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; color: var(--txt); font-weight: 500; padding: .25rem 0; }
.dnt-sum::-webkit-details-marker { display: none; }
.dnt-chev { position: relative; width: .5rem; height: .5rem; flex: none; }
.dnt-chev::before { content: ''; position: absolute; top: 35%; left: 15%; width: .3rem; height: .3rem; border-right: 1.4px solid var(--dim); border-bottom: 1.4px solid var(--dim); transform: rotate(-45deg); transition: transform .15s; }
.dnt-folder[open] .dnt-chev::before { transform: rotate(45deg); }
.dnt-ico { width: .62rem; height: .5rem; flex: none; border-radius: 2px; }
.dnt-ico-folder { background: var(--acc2); opacity: .8; }
.dnt-ico-file { border: 1px solid var(--line); }
.dnt-list { margin: .15rem 0 .3rem 1.35rem; padding-left: .6rem; border-left: 1px dashed var(--line); list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.dnt-file { display: flex; align-items: center; gap: .4rem; }
@media (prefers-reduced-motion: reduce) { .dnt-chev::before { transition: none; } }

  /* ---------- 552 · Onboarding checklist with progress ring ---------- */
  .dcr-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; align-items: center; gap: 1.1rem; font-family: var(--sans); }
.dcr-ring { flex: none; position: relative; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: conic-gradient(var(--acc) 0turn .6turn, var(--line) .6turn 1turn); display: grid; place-items: center; }
.dcr-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg2); }
.dcr-frac { position: relative; z-index: 1; font: 600 .72rem var(--mono); color: var(--txt); }
.dcr-list { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.dcr-step { display: flex; align-items: center; gap: .5rem; font: 400 .62rem var(--sans); color: var(--dim); }
.dcr-mark { position: relative; width: .75rem; height: .75rem; flex: none; border-radius: 50%; border: 1px solid var(--line); }
.dcr-done { color: var(--txt); }
.dcr-done .dcr-mark { background: var(--acc); border-color: var(--acc); }
.dcr-done .dcr-mark::after { content: ''; position: absolute; left: .2rem; top: .05rem; width: .22rem; height: .38rem; border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }

  /* ---------- 553 · Page header with breadcrumb and actions ---------- */
  .dph-wrap { width: 100%; box-sizing: border-box; padding: 1rem 1.2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); font-family: var(--sans); }
.dph-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.dph-crumb { display: flex; align-items: center; gap: .35rem; font: 400 .54rem var(--mono); color: var(--dim); }
.dph-crumb a { color: var(--dim); text-decoration: none; }
.dph-crumb a:hover, .dph-crumb a:focus-visible { color: var(--txt); }
.dph-current { color: var(--txt); }
.dph-title { margin: 0; font: 600 .84rem var(--sans); color: var(--txt); letter-spacing: -.01em; }
.dph-actions { display: flex; gap: .5rem; flex: none; }
.dph-btn { font: 500 .6rem var(--mono); border-radius: 6px; padding: .45rem .8rem; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--dim); transition: border-color .15s, color .15s, background .15s; }
.dph-secondary:hover, .dph-secondary:focus-visible { color: var(--txt); border-color: var(--txt); }
.dph-primary { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.dph-primary:hover, .dph-primary:focus-visible { opacity: .85; }
.dph-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dph-btn { transition: none; } }

  /* ---------- 554 · Permission matrix table ---------- */
  .dpm-wrap { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.dpm-th { font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); padding: .35rem .4rem; text-align: center; border-bottom: 1px solid var(--line); }
.dpm-corner { border-bottom: none; }
.dpm-rh { font: 400 .6rem var(--sans); font-weight: 400; color: var(--dim); text-align: left; padding: .4rem .4rem; border-bottom: 1px solid var(--line); }
.dpm-td { text-align: center; padding: .4rem; border-bottom: 1px solid var(--line); }
.dpm-wrap tbody tr:last-child .dpm-td, .dpm-wrap tbody tr:last-child .dpm-rh { border-bottom: none; }
.dpm-dot { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; }
.dpm-on { background: var(--acc); }
.dpm-off { border: 1px solid var(--line); }

  /* ---------- 555 · Reorderable list with drag handles ---------- */
  .drh-wrap { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; font-family: var(--sans); }
.drh-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.drh-handle { position: relative; width: .5rem; height: .85rem; flex: none; cursor: grab; }
.drh-handle::before { content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 var(--dim), 6px 0 0 var(--dim), 0 6px 0 var(--dim), 6px 6px 0 var(--dim), 0 12px 0 var(--dim), 6px 12px 0 var(--dim); }
.drh-name { flex: 1; font: 500 .64rem var(--sans); color: var(--txt); }
.drh-num { font: 500 .56rem var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .4rem; }

  /* ---------- 556 · Segmented tab panel switcher ---------- */
  .dtp-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .8rem; font-family: var(--sans); }
.dtp-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.dtp-seg { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); align-self: flex-start; }
.dtp-opt { font: 500 .58rem var(--mono); color: var(--dim); padding: .35rem .7rem; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.dtp-wrap:has(#dtp-t1:checked) label[for="dtp-t1"], .dtp-wrap:has(#dtp-t2:checked) label[for="dtp-t2"], .dtp-wrap:has(#dtp-t3:checked) label[for="dtp-t3"] { background: var(--acc); color: var(--bg); }
.dtp-wrap:has(#dtp-t1:focus-visible) label[for="dtp-t1"], .dtp-wrap:has(#dtp-t2:focus-visible) label[for="dtp-t2"], .dtp-wrap:has(#dtp-t3:focus-visible) label[for="dtp-t3"] { outline: 2px solid var(--acc); outline-offset: 2px; }
.dtp-body { border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; min-height: 3.4rem; }
.dtp-panel { display: none; margin: 0; font: 400 .6rem/1.5 var(--sans); color: var(--dim); }
.dtp-wrap:has(#dtp-t1:checked) .dtp-p1, .dtp-wrap:has(#dtp-t2:checked) .dtp-p2, .dtp-wrap:has(#dtp-t3:checked) .dtp-p3 { display: block; }
@media (prefers-reduced-motion: reduce) { .dtp-opt { transition: none; } }

  /* ---------- 557 · Accordion sitemap footer ---------- */
  .fas-wrap{width:100%;padding:1.2rem 1.4rem;display:flex;flex-direction:column;font-family:var(--sans);}
.fas-group{border-top:1px solid var(--line);}
.fas-group:last-child{border-bottom:1px solid var(--line);}
.fas-sum{display:flex;align-items:center;justify-content:space-between;padding:.65rem .1rem;font:600 .72rem var(--sans);color:var(--txt);cursor:pointer;list-style:none;}
.fas-sum::-webkit-details-marker{display:none;}
.fas-chev{width:7px;height:7px;border-right:1.4px solid var(--dim);border-bottom:1.4px solid var(--dim);transform:rotate(45deg);transition:transform .25s;}
.fas-group[open] .fas-chev{transform:rotate(-135deg);}
.fas-links{display:flex;flex-wrap:wrap;gap:.6rem 1rem;padding:.2rem .1rem .8rem;}
.fas-links a{font:400 .68rem var(--sans);color:var(--dim);text-decoration:none;transition:color .2s;}
.fas-links a:hover,.fas-links a:focus-visible{color:var(--txt);}
.fas-links a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.fas-wrap *{transition:none!important;}}

  /* ---------- 558 · Bento contact footer ---------- */
  .fbc-wrap{width:100%;padding:1.2rem;font-family:var(--sans);}
.fbc-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;grid-template-areas:"contact social" "loc legal";gap:.7rem;}
.fbc-cell{border:1px solid var(--line);border-radius:8px;background:var(--bg2);padding:.8rem .9rem;display:flex;flex-direction:column;gap:.35rem;justify-content:center;}
.fbc-contact{grid-area:contact;}
.fbc-social{grid-area:social;}
.fbc-loc{grid-area:loc;}
.fbc-legal{grid-area:legal;flex-direction:row;justify-content:space-between;align-items:center;}
.fbc-k{font:500 .52rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.fbc-cell a{font:500 .68rem var(--sans);color:var(--txt);text-decoration:none;transition:color .2s;}
.fbc-cell a:hover,.fbc-cell a:focus-visible{color:var(--acc);}
.fbc-cell a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.fbc-cell p{margin:0;font:400 .68rem var(--sans);color:var(--txt);}
.fbc-legal span{font:400 .6rem var(--mono);color:var(--dim);}
@media (prefers-reduced-motion: reduce){.fbc-wrap *{transition:none!important;}}

  /* ---------- 559 · Diagonal band footer ---------- */
  .fdb-wrap{width:100%;font-family:var(--sans);}
.fdb-band{position:relative;background:var(--acc);clip-path:polygon(0 0,100% 0,100% 78%,0 100%);padding:1.3rem 1.4rem 2rem;display:flex;flex-direction:column;gap:.5rem;}
.fdb-line{margin:0;font:600 .8rem/1.35 var(--sans);color:rgba(0,0,0,.78);}
.fdb-cta{align-self:flex-start;font:600 .68rem var(--sans);color:rgba(0,0,0,.78);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:1px;}
.fdb-cta:focus-visible{outline:1px solid var(--bg);outline-offset:2px;}
.fdb-bottom{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.4rem;background:var(--bg2);}
.fdb-mark{font:700 .7rem var(--sans);color:var(--txt);}
.fdb-nav{display:flex;gap:.9rem;}
.fdb-nav a{font:500 .64rem var(--sans);color:var(--dim);text-decoration:none;transition:color .2s;}
.fdb-nav a:hover,.fdb-nav a:focus-visible{color:var(--txt);}
.fdb-nav a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.fdb-wrap *{transition:none!important;}}

  /* ---------- 560 · Expanding column footer ---------- */
  .fec-wrap{width:100%;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;font-family:var(--sans);}
.fec-row{display:flex;gap:.9rem;border-top:1px solid var(--line);padding-top:1rem;}
.fec-col{flex:1;min-width:0;transition:flex-grow .35s;overflow:hidden;}
.fec-big{flex-grow:2.2;}
.fec-col h4{margin:0 0 .5rem;font:500 .52rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.fec-col a{display:block;margin-bottom:.35rem;font:400 .68rem var(--sans);color:var(--txt);text-decoration:none;opacity:.85;white-space:nowrap;transition:color .2s,opacity .2s;}
.fec-col a:hover,.fec-col a:focus-visible{color:var(--acc);opacity:1;}
.fec-col a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.fec-row:has(.fec-c1:hover) .fec-c1{flex-grow:2.2;}
.fec-row:has(.fec-c1:hover) .fec-c2,.fec-row:has(.fec-c1:hover) .fec-c3{flex-grow:.6;}
.fec-row:has(.fec-c3:hover) .fec-c3{flex-grow:2.2;}
.fec-row:has(.fec-c3:hover) .fec-c1,.fec-row:has(.fec-c3:hover) .fec-c2{flex-grow:.6;}
.fec-cap{margin:0;font:400 .6rem var(--mono);color:var(--dim);}
@media (prefers-reduced-motion: reduce){.fec-wrap *{transition:none!important;}}

  /* ---------- 561 · Orbit badge footer ---------- */
  .fob-wrap{width:100%;padding:1.6rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-family:var(--sans);}
.fob-badge{position:relative;width:88px;height:88px;flex:0 0 auto;}
.fob-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--acc) 0 8%,transparent 8% 25%,var(--acc) 25% 33%,transparent 33% 50%,var(--acc) 50% 58%,transparent 58% 75%,var(--acc) 75% 83%,transparent 83% 100%);animation:fob-spin 9s linear infinite;}
.fob-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--bg2);}
@keyframes fob-spin{to{transform:rotate(360deg);}}
.fob-core{position:absolute;inset:14px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font:600 .58rem/1.25 var(--sans);color:var(--txt);text-decoration:none;}
.fob-core:focus-visible{outline:1px solid var(--acc);outline-offset:3px;}
.fob-side{display:flex;flex-direction:column;gap:.3rem;align-items:flex-end;}
.fob-mark{font:700 .74rem var(--sans);color:var(--txt);}
.fob-meta{font:400 .6rem var(--mono);color:var(--dim);}
@media (prefers-reduced-motion: reduce){.fob-ring{animation:none;}}

  /* ---------- 562 · Tabbed footer panels ---------- */
  .ftp-wrap{width:100%;padding:1.2rem 1.4rem 1.4rem;font-family:var(--sans);}
.ftp-tabs{display:flex;gap:1.1rem;border-bottom:1px solid var(--line);margin-bottom:.85rem;}
.ftp-input{position:absolute;width:1px;height:1px;opacity:0;}
.ftp-tab{padding:.4rem .05rem .55rem;font:500 .66rem var(--sans);color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:color .25s,border-color .25s;user-select:none;}
.ftp-input:checked+.ftp-tab{color:var(--txt);border-color:var(--acc);}
.ftp-input:focus-visible+.ftp-tab{outline:1px solid var(--acc);outline-offset:2px;}
.ftp-panel{display:none;flex-direction:column;gap:.4rem;}
.ftp-panel a,.ftp-panel span,.ftp-panel p{margin:0;font:400 .68rem var(--sans);color:var(--dim);text-decoration:none;}
.ftp-panel a:hover,.ftp-panel a:focus-visible{color:var(--txt);}
.ftp-panel a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.ftp-p2,.ftp-p3{flex-direction:row;gap:1rem;align-items:center;}
.ftp-wrap:has(#ftp-1:checked) .ftp-p1{display:flex;}
.ftp-wrap:has(#ftp-2:checked) .ftp-p2{display:flex;}
.ftp-wrap:has(#ftp-3:checked) .ftp-p3{display:flex;}
@media (prefers-reduced-motion: reduce){.ftp-wrap *{transition:none!important;}}

  /* ---------- 563 · Tag-cloud wall footer ---------- */
  .ftw-wrap{width:100%;padding:1.3rem 1.4rem;font-family:var(--sans);}
.ftw-wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:.5rem;}
.ftw-tag{grid-column:span 1;padding:.55rem .3rem;text-align:center;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--dim);text-decoration:none;font:500 .64rem var(--sans);transition:color .2s,border-color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ftw-big{grid-column:span 2;background:var(--acc);color:rgba(0,0,0,.75);border-color:var(--acc);font-weight:600;}
.ftw-tag:hover,.ftw-tag:focus-visible{color:var(--txt);border-color:var(--dim);}
.ftw-big:hover,.ftw-big:focus-visible{color:rgba(0,0,0,.75);border-color:var(--acc);}
.ftw-tag:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.ftw-wrap *{transition:none!important;}}

  /* ---------- 564 · Torn-edge footer ---------- */
  .fte-wrap{width:100%;font-family:var(--sans);}
.fte-tear{height:14px;background-color:var(--line);-webkit-mask-image:radial-gradient(circle at 7px 0,transparent 6.5px,var(--card) 7px);mask-image:radial-gradient(circle at 7px 0,transparent 6.5px,var(--card) 7px);-webkit-mask-size:14px 14px;mask-size:14px 14px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;}
.fte-body{background:var(--card);padding:1rem 1.4rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;}
.fte-mark{font:700 .78rem var(--sans);color:var(--txt);}
.fte-nav{display:flex;gap:1rem;}
.fte-nav a{font:500 .66rem var(--sans);color:var(--dim);text-decoration:none;transition:color .2s;}
.fte-nav a:hover,.fte-nav a:focus-visible{color:var(--txt);}
.fte-nav a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.fte-meta{font:400 .6rem var(--mono);color:var(--dim);}
@media (prefers-reduced-motion: reduce){.fte-wrap *{transition:none!important;}}

  /* ---------- 565 · Asymmetric bento ---------- */
  .gab-grid { width: 100%; height: 160px; padding: 0 6%; box-sizing: border-box;
  display: grid; grid-template-columns: 1.4fr .8fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
  grid-template-areas: "hero tall wide" "hero tall small"; }
.gab-c { margin: 0; border-radius: 3px; min-height: 0; }
.gab-hero { grid-area: hero; background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gab-tall { grid-area: tall; background: linear-gradient(200deg, var(--acc), var(--bg2)); }
.gab-wide { grid-area: wide; background: linear-gradient(20deg, var(--bg2), var(--acc2)); }
.gab-small { grid-area: small; background: linear-gradient(330deg, var(--bg), var(--acc)); }

  /* ---------- 566 · Flip card pair ---------- */
  .gfc-row { width: 100%; padding: 0 6%; display: flex; gap: 12px; perspective: 900px; }
.gfc-card { flex: 1; aspect-ratio: 3 / 4; cursor: pointer; }
.gfc-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.gfc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.gfc-card:hover .gfc-inner, .gfc-card:focus-visible .gfc-inner { transform: rotateY(180deg); }
.gfc-front, .gfc-back { position: absolute; inset: 0; border-radius: 4px; backface-visibility: hidden; }
.gfc-front { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gfc-front2 { background: linear-gradient(320deg, var(--acc), var(--bg2)); }
.gfc-back { background: var(--card); border: 1px solid var(--line); transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center; padding: .6rem; }
.gfc-back span { font: 400 .6rem/1.4 var(--sans); color: var(--dim); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gfc-inner { transition: none; } }

  /* ---------- 567 · Hex cluster ---------- */
  .ghc-wrap { position: relative; width: 100%; height: 190px; }
.ghc-h { position: absolute; width: 96px; height: 110px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ghc-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); top: 6px; left: calc(50% - 108px); }
.ghc-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); top: 56px; left: calc(50% - 48px); }
.ghc-3 { background: linear-gradient(30deg, var(--bg2), var(--acc2)); top: 6px; left: calc(50% + 12px); }

  /* ---------- 568 · Marquee loop row ---------- */
  .gml-wrap { width: 100%; overflow: hidden; }
.gml-track { display: flex; gap: 10px; width: max-content; animation: gml-scroll 16s linear infinite; }
.gml-f { flex: 0 0 76px; aspect-ratio: 3 / 4; border-radius: 3px; }
.gml-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gml-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); }
.gml-3 { background: linear-gradient(20deg, var(--bg2), var(--acc2)); }
.gml-4 { background: linear-gradient(330deg, var(--bg), var(--acc)); }
@keyframes gml-scroll { to { transform: translateX(-344px); } }
@media (prefers-reduced-motion: reduce) { .gml-track { animation: none; } }

  /* ---------- 569 · Radial orbit thumbs ---------- */
  .grt-wrap { position: relative; width: 100%; height: 210px; display: flex; align-items: center; justify-content: center; }
.grt-main { position: relative; width: 96px; height: 96px; margin: 0; border-radius: 50%; z-index: 1;
  background: linear-gradient(150deg, var(--acc2), var(--bg) 70%); border: 1px solid var(--line); }
.grt-t { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  padding: 0; cursor: pointer; opacity: .55; transition: opacity .25s, transform .25s; }
.grt-t1 { top: 6px; left: 50%; margin-left: -17px; background: linear-gradient(140deg, var(--bg2), var(--acc2)); }
.grt-t2 { top: 50%; right: 14%; margin-top: -17px; background: linear-gradient(140deg, var(--bg2), var(--acc)); }
.grt-t3 { bottom: 6px; left: 50%; margin-left: -17px; background: linear-gradient(140deg, var(--bg2), var(--acc2)); }
.grt-t4 { top: 50%; left: 14%; margin-top: -17px; background: linear-gradient(140deg, var(--bg2), var(--acc)); }
.grt-t:hover, .grt-t:focus-visible { opacity: .85; transform: scale(1.08); }
.grt-on { opacity: 1; border-color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .grt-t { transition: none; } }

  /* ---------- 570 · Stair-step row ---------- */
  .gsr-row { width: 100%; padding: 0 6%; display: flex; align-items: flex-start; gap: 8px; }
.gsr-f { flex: 1; margin: 0; aspect-ratio: 3 / 4; border-radius: 3px; }
.gsr-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); margin-top: 0; }
.gsr-2 { background: linear-gradient(200deg, var(--acc), var(--bg2)); margin-top: 16px; }
.gsr-3 { background: linear-gradient(20deg, var(--bg2), var(--acc2)); margin-top: 32px; }
.gsr-4 { background: linear-gradient(330deg, var(--bg), var(--acc)); margin-top: 48px; }

  /* ---------- 571 · Torn-edge strip ---------- */
  .gte-row { position: relative; width: 100%; display: flex; }
.gte-f { flex: 1; margin: 0 -14px 0 0; aspect-ratio: 3 / 4; }
.gte-f:last-child { margin-right: 0; }
.gte-1, .gte-2 { clip-path: polygon(0 0, 88% 0, 100% 8%, 88% 16%, 100% 24%, 88% 32%, 100% 40%, 88% 48%,
  100% 56%, 88% 64%, 100% 72%, 88% 80%, 100% 88%, 88% 96%, 100% 100%, 0 100%); }
.gte-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); z-index: 3; }
.gte-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); z-index: 2; }
.gte-3 { background: linear-gradient(30deg, var(--bg2), var(--acc2)); z-index: 1; }

  /* ---------- 572 · Vertical rail strip ---------- */
  .gvr-wrap { position: relative; width: 78%; padding-left: 18px; }
.gvr-rail { position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.gvr-items { display: flex; flex-direction: column; gap: 10px; }
.gvr-row { position: relative; display: flex; align-items: center; gap: .6rem; }
.gvr-dot { position: absolute; left: -18px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.gvr-f { flex: 1; margin: 0; height: 40px; border-radius: 3px; }
.gvr-1 { background: linear-gradient(150deg, var(--acc2), var(--bg)); }
.gvr-2 { background: linear-gradient(210deg, var(--acc), var(--bg2)); }
.gvr-3 { background: linear-gradient(30deg, var(--bg2), var(--acc2)); }

  /* ---------- 573 · Diagonal notch caption ---------- */
  .dnc-wrap { position: relative; width: 86%; margin: 0; }
.dnc-media { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--acc2), var(--bg) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 72%); }
.dnc-cap { position: absolute; left: 0; bottom: 0; width: 34%; padding: .3rem 0 .5rem;
  display: flex; flex-direction: column; gap: .1rem; }
.dnc-k { font: 600 .6rem var(--mono); color: var(--acc); }
.dnc-x { font: 500 .62rem var(--sans); color: var(--dim); letter-spacing: .03em; }

  /* ---------- 574 · Folded index card ---------- */
  .fdi-wrap { width: 82%; margin: 0; }
.fdi-tab { width: 44%; margin-left: 10%; background: var(--card); border: 1px solid var(--line); border-bottom: none;
  border-radius: 6px 6px 0 0; padding: .25rem .5rem; }
.fdi-idx { font: 600 .52rem var(--mono); letter-spacing: .12em; color: var(--dim); }
.fdi-card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: .5rem; }
.fdi-media { width: 100%; aspect-ratio: 4 / 3; border-radius: 3px; background: linear-gradient(150deg, var(--acc2), var(--bg2) 75%); }
.fdi-cap { margin: .4rem 0 0; font: 400 .6rem var(--mono); color: var(--dim); text-align: center; }

  /* ---------- 575 · Peel corner reveal ---------- */
  .pcr-wrap { position: relative; width: 82%; margin: 0; }
.pcr-under { position: absolute; inset: 6px -6px -6px 6px; border-radius: 6px;
  background: linear-gradient(150deg, var(--acc2), var(--bg2)); }
.pcr-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, var(--acc2), var(--card) 55%, var(--bg2) 92%); border: 1px solid var(--line);
  transition: transform .35s ease; }
.pcr-fold { position: absolute; top: 0; right: 0; width: 42px; height: 42px; background: var(--bg2);
  clip-path: polygon(100% 0, 0 0, 100% 100%); box-shadow: -4px 4px 10px rgba(0,0,0,.45);
  transform-origin: top right; transition: transform .35s ease; }
.pcr-wrap:hover .pcr-fold { transform: scale(1.18); }
.pcr-wrap:hover .pcr-frame { transform: translate(-3px, 3px); }
@media (prefers-reduced-motion: reduce) { .pcr-fold, .pcr-frame { transition: none; } }

  /* ---------- 576 · Picture-in-picture overlay ---------- */
  .pip-wrap { position: relative; width: 88%; margin: 0 0 .6rem; }
.pip-main { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--line);
  background: radial-gradient(130% 120% at 15% 10%, var(--acc2), var(--card) 45%, var(--bg2) 85%); }
.pip-mini { position: absolute; right: 6%; bottom: -14%; width: 30%; aspect-ratio: 4 / 3; border-radius: 6px;
  background: linear-gradient(150deg, var(--card), var(--bg)); border: 2px solid var(--bg2);
  box-shadow: 0 6px 16px rgba(0,0,0,.4); display: flex; align-items: flex-start; justify-content: flex-end; padding: .3rem; }
.pip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }

  /* ---------- 577 · Radial progress ring ---------- */
  .rpr-wrap { display: flex; align-items: center; gap: .9rem; padding: 1rem; }
.rpr-ring { position: relative; width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: conic-gradient(var(--acc) 0deg 223deg, var(--line) 223deg 360deg);
  display: flex; align-items: center; justify-content: center; }
.rpr-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg2); }
.rpr-play { position: relative; width: 2rem; height: 2rem; border-radius: 50%; background: var(--acc); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rpr-play svg { width: .75rem; height: .75rem; fill: var(--bg); }
.rpr-play:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.rpr-meta { display: flex; flex-direction: column; }
.rpr-pct { font: 700 1rem var(--sans); color: var(--txt); }
.rpr-lbl { font: 400 .6rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }

  /* ---------- 578 · Scrub bar with chapter marks ---------- */
  .stm-wrap { width: 100%; padding: .9rem 1rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .55rem; }
.stm-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(155deg, var(--acc2), var(--card) 55%, var(--bg2) 90%);
  display: flex; align-items: center; justify-content: center; }
.stm-play { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--acc); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stm-play svg { width: .8rem; height: .8rem; fill: var(--bg); }
.stm-play:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.stm-bar { position: relative; height: 3px; border-radius: 2px; background: var(--line); margin-top: .2rem; }
.stm-fill { position: absolute; inset: 0 62% 0 0; border-radius: 2px; background: var(--acc); }
.stm-tick { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--dim); }
.stm-t1 { left: 22%; }
.stm-t2 { left: 48%; }
.stm-t3 { left: 74%; }
.stm-thumb { position: absolute; top: 50%; left: 38%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px var(--bg2); }

  /* ---------- 579 · Subtitle track bar ---------- */
  .sbt-wrap { width: 100%; margin: 0; padding: 1rem; box-sizing: border-box; }
.sbt-media { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px 8px 0 0; border: 1px solid var(--line); border-bottom: none;
  background: linear-gradient(150deg, var(--acc2), var(--card) 60%, var(--bg2) 95%); }
.sbt-track { display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 8px 8px; padding: .5rem .7rem; }
.sbt-cc { flex-shrink: 0; font: 700 .55rem var(--mono); letter-spacing: .05em; color: var(--bg);
  background: var(--acc); border-radius: 3px; padding: .15em .4em; }
.sbt-line { flex: 1; margin: 0; font: 400 .66rem/1.3 var(--sans); color: var(--txt); }
.sbt-time { flex-shrink: 0; font: 500 .58rem var(--mono); color: var(--dim); }

  /* ---------- 580 · Vertical frame with action rail ---------- */
  .vac-wrap { position: relative; height: 220px; display: flex; align-items: stretch; gap: .6rem; }
.vac-frame { width: 124px; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--acc2), var(--card) 55%, var(--bg2) 92%); }
.vac-rail { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding-top: .2rem; }
.vac-item { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.vac-ic { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
.vac-n { font: 500 .56rem var(--mono); color: var(--dim); }

  /* ---------- 581 · Scroll-snap chip rail ---------- */
  .ncs-wrap{position:relative;width:100%;padding:1.8rem 0;}
.ncs-wrap::after{content:'';position:absolute;top:1.8rem;bottom:1.8rem;right:0;width:26px;z-index:1;pointer-events:none;background:linear-gradient(-90deg,var(--bg2),transparent);}
.ncs-track{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;padding:0 1.2rem;scrollbar-width:none;}
.ncs-track::-webkit-scrollbar{display:none;}
.ncs-chip{scroll-snap-align:start;flex:0 0 auto;padding:.5rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--bg2);color:var(--dim);font:500 .68rem var(--sans);cursor:pointer;transition:color .2s,background .2s,border-color .2s;white-space:nowrap;}
.ncs-chip:hover,.ncs-chip:focus-visible{color:var(--txt);border-color:var(--dim);}
.ncs-chip[aria-current='true']{background:var(--acc);border-color:var(--acc);color:rgba(0,0,0,.75);}
.ncs-chip:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.ncs-wrap *{transition:none!important;}}

  /* ---------- 582 · Corner-anchored nav ---------- */
  .nca-wrap{width:100%;height:210px;padding:1.6rem;display:flex;}
.nca-grid{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;grid-template-areas:"mark links" ". links" "meta links";font-family:var(--sans);}
.nca-mark{grid-area:mark;align-self:start;font:700 .78rem var(--sans);letter-spacing:.02em;color:var(--txt);text-decoration:none;}
.nca-links{grid-area:links;align-self:start;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;}
.nca-link{font:500 .72rem var(--sans);color:var(--dim);text-decoration:none;transition:color .2s;}
.nca-link:hover,.nca-link:focus-visible{color:var(--txt);}
.nca-link[aria-current='page']{color:var(--txt);}
.nca-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.nca-meta{grid-area:meta;align-self:end;font:500 .58rem var(--mono);letter-spacing:.06em;color:var(--dim);}
@media (prefers-reduced-motion: reduce){.nca-wrap *{transition:none!important;}}

  /* ---------- 583 · Disclosure drawer nav ---------- */
  .ndd-wrap{width:100%;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;font-family:var(--sans);}
.ndd-drawer{border:1px solid var(--line);border-radius:10px;background:var(--bg2);overflow:hidden;}
.ndd-sum{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;font:600 .74rem var(--sans);color:var(--txt);cursor:pointer;list-style:none;}
.ndd-sum::-webkit-details-marker{display:none;}
.ndd-chev{width:8px;height:8px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .25s;}
.ndd-drawer[open] .ndd-chev{transform:rotate(-135deg);}
.ndd-list{display:flex;flex-direction:column;border-top:1px solid var(--line);padding:.3rem;}
.ndd-link{padding:.55rem .7rem;font:500 .72rem var(--sans);color:var(--dim);text-decoration:none;border-radius:6px;transition:color .2s,background .2s;}
.ndd-link:hover,.ndd-link:focus-visible{color:var(--txt);background:var(--card);}
.ndd-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.ndd-cap{font:400 .64rem var(--mono);color:var(--dim);margin:0;}
@media (prefers-reduced-motion: reduce){.ndd-wrap *{transition:none!important;}}

  /* ---------- 584 · Index dot scrollspy nav ---------- */
  .nid-wrap{width:100%;padding:2.2rem 1.6rem;display:flex;justify-content:center;}
.nid-row{position:relative;display:flex;align-items:center;gap:1.6rem;}
.nid-row::before{content:'';position:absolute;left:9px;right:9px;top:50%;height:1px;background:var(--line);transform:translateY(-50%);z-index:0;}
.nid-dot{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .25s,border-color .25s,background .25s,width .25s,height .25s;}
.nid-num{font:600 .5rem var(--mono);color:var(--dim);transition:color .25s;}
.nid-dot:hover,.nid-dot:focus-visible{border-color:var(--acc);transform:scale(1.12);}
.nid-dot:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.nid-on{width:26px;height:26px;background:var(--acc);border-color:var(--acc);}
.nid-on .nid-num{color:rgba(0,0,0,.75);}
@media (prefers-reduced-motion: reduce){.nid-wrap *{transition:none!important;}}

  /* ---------- 585 · Marquee alert bar nav ---------- */
  .nma-wrap{width:100%;font-family:var(--sans);}
.nma-alert{overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg2);}
.nma-track{display:flex;gap:1rem;width:max-content;white-space:nowrap;padding:.4rem 0;font:500 .6rem var(--mono);letter-spacing:.04em;color:var(--dim);animation:nma-run 11s linear infinite;will-change:transform;}
.nma-dot{color:var(--acc);}
@keyframes nma-run{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.nma-bar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.3rem;}
.nma-mark{font:700 .74rem var(--sans);color:var(--txt);}
.nma-links{display:flex;gap:1rem;}
.nma-links a{font:500 .68rem var(--sans);color:var(--dim);text-decoration:none;transition:color .2s;}
.nma-links a:hover,.nma-links a:focus-visible{color:var(--txt);}
.nma-links a[aria-current='page']{color:var(--txt);}
.nma-links a:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.nma-track{animation:none;}.nma-wrap *{transition:none!important;}}

  /* ---------- 586 · Preview flyout nav ---------- */
  .npf-wrap{width:100%;padding:2rem 1.4rem 1.6rem;display:flex;flex-direction:column;align-items:center;font-family:var(--sans);}
.npf-bar{position:relative;display:flex;gap:1.3rem;}
.npf-link{font:500 .72rem var(--sans);color:var(--dim);text-decoration:none;padding:.3rem .1rem;transition:color .25s;}
.npf-link:hover,.npf-link:focus-visible{color:var(--txt);}
.npf-link[aria-current='page']{color:var(--txt);}
.npf-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.npf-flyout{position:relative;margin-top:.9rem;width:220px;min-height:52px;padding:.75rem .9rem;background:var(--card);border:1px solid var(--line);border-radius:8px;}
.npf-arrow{position:absolute;top:-5px;left:100px;width:9px;height:9px;background:var(--card);border:1px solid var(--line);border-right:none;border-bottom:none;transform:rotate(45deg);transition:left .35s cubic-bezier(.65,0,.35,1);}
.npf-p{position:absolute;inset:.75rem .9rem;margin:0;font:400 .68rem/1.4 var(--sans);color:var(--dim);opacity:0;transition:opacity .25s;}
.npf-p2{opacity:1;}
.npf-wrap:has(.npf-link:nth-child(1):hover) .npf-p1,.npf-wrap:has(.npf-link:nth-child(1):focus-visible) .npf-p1{opacity:1;}
.npf-wrap:has(.npf-link:nth-child(1):hover) .npf-p2,.npf-wrap:has(.npf-link:nth-child(1):focus-visible) .npf-p2{opacity:0;}
.npf-wrap:has(.npf-link:nth-child(1):hover) .npf-arrow,.npf-wrap:has(.npf-link:nth-child(1):focus-visible) .npf-arrow{left:14px;}
.npf-wrap:has(.npf-link:nth-child(3):hover) .npf-p3,.npf-wrap:has(.npf-link:nth-child(3):focus-visible) .npf-p3{opacity:1;}
.npf-wrap:has(.npf-link:nth-child(3):hover) .npf-p2,.npf-wrap:has(.npf-link:nth-child(3):focus-visible) .npf-p2{opacity:0;}
.npf-wrap:has(.npf-link:nth-child(3):hover) .npf-arrow,.npf-wrap:has(.npf-link:nth-child(3):focus-visible) .npf-arrow{left:186px;}
.npf-wrap:has(.npf-link:nth-child(4):hover) .npf-p4,.npf-wrap:has(.npf-link:nth-child(4):focus-visible) .npf-p4{opacity:1;}
.npf-wrap:has(.npf-link:nth-child(4):hover) .npf-p2,.npf-wrap:has(.npf-link:nth-child(4):focus-visible) .npf-p2{opacity:0;}
.npf-wrap:has(.npf-link:nth-child(4):hover) .npf-arrow,.npf-wrap:has(.npf-link:nth-child(4):focus-visible) .npf-arrow{left:258px;}
@media (prefers-reduced-motion: reduce){.npf-wrap *{transition:none!important;}}

  /* ---------- 587 · Skewed tab deck nav ---------- */
  .nsk-wrap{width:100%;padding:2.2rem 1.2rem;display:flex;justify-content:center;}
.nsk-bar{display:flex;}
.nsk-tab{position:relative;padding:.6rem 1.1rem;margin-left:-.6rem;text-decoration:none;}
.nsk-tab:first-child{margin-left:0;}
.nsk-tab::before{content:'';position:absolute;inset:0;background:var(--bg2);border:1px solid var(--line);transform:skewX(-12deg);transition:background .25s,border-color .25s;z-index:0;}
.nsk-tab span{position:relative;z-index:1;font:500 .68rem var(--sans);color:var(--dim);transition:color .25s;white-space:nowrap;}
.nsk-tab:hover::before,.nsk-tab:focus-visible::before{border-color:var(--dim);}
.nsk-tab:hover span,.nsk-tab:focus-visible span{color:var(--txt);}
.nsk-tab:focus-visible{outline:none;}
.nsk-tab:focus-visible::before{outline:1px solid var(--acc);outline-offset:1px;}
.nsk-tab[aria-current='page']::before{background:var(--acc);border-color:var(--acc);}
.nsk-tab[aria-current='page'] span{color:rgba(0,0,0,.75);}
@media (prefers-reduced-motion: reduce){.nsk-wrap *{transition:none!important;}}

  /* ---------- 588 · Two-tier utility nav ---------- */
  .ntu-wrap{width:100%;padding:1.4rem 1.2rem;display:flex;justify-content:center;}
.ntu-bar{width:100%;max-width:320px;display:grid;grid-template-rows:auto auto;}
.ntu-util{display:flex;align-items:center;justify-content:space-between;padding-bottom:.55rem;border-bottom:1px solid var(--line);}
.ntu-status{display:flex;align-items:center;gap:.4rem;font:500 .58rem var(--mono);letter-spacing:.05em;color:var(--dim);}
.ntu-dot{width:5px;height:5px;border-radius:50%;background:var(--acc);}
.ntu-ulink{font:500 .58rem var(--mono);color:var(--dim);text-decoration:none;transition:color .2s;}
.ntu-ulink:hover,.ntu-ulink:focus-visible{color:var(--txt);}
.ntu-ulink:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.ntu-main{display:flex;align-items:center;gap:1rem;padding-top:.7rem;}
.ntu-mark{font:700 .72rem var(--sans);letter-spacing:.02em;color:var(--txt);text-decoration:none;margin-right:auto;}
.ntu-links{display:flex;gap:.85rem;}
.ntu-link{font:500 .68rem var(--sans);color:var(--dim);text-decoration:none;transition:color .2s;}
.ntu-link:hover,.ntu-link:focus-visible{color:var(--txt);}
.ntu-link[aria-current='page']{color:var(--txt);}
.ntu-link:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
.ntu-cta{padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--txt);font:500 .64rem var(--sans);cursor:pointer;transition:border-color .2s,background .2s;}
.ntu-cta:hover,.ntu-cta:focus-visible{border-color:var(--acc);background:var(--bg2);}
.ntu-cta:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){.ntu-wrap *{transition:none!important;}}

  /* ---------- 589 · Sticky buy bar ---------- */
  .pbb-wrap { width: 100%; box-sizing: border-box; padding: .9rem 1.1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--sans); background: var(--bg2); }
.pbb-id { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.pbb-thumb { width: 2rem; height: 2rem; border-radius: 6px; flex: none; background: linear-gradient(155deg, var(--acc2), var(--card)); border: 1px solid var(--line); }
.pbb-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pbb-name { font: 600 .68rem var(--sans); color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbb-price { font: 500 .58rem var(--mono); color: var(--dim); }
.pbb-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.pbb-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pbb-step { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: none; background: none; color: var(--dim); font: 500 .7rem var(--mono); cursor: pointer; transition: background .15s, color .15s; }
.pbb-step:hover, .pbb-step:focus-visible { color: var(--txt); background: rgba(255,255,255,.05); }
.pbb-step:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.pbb-num { width: 1.6rem; text-align: center; font: 500 .64rem var(--mono); color: var(--txt); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.pbb-cta { font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--bg); background: var(--acc); border: none; border-radius: 6px; padding: .5rem .8rem; cursor: pointer; transition: opacity .2s; }
.pbb-cta:hover, .pbb-cta:focus-visible { opacity: .85; }
.pbb-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pbb-step, .pbb-cta { transition: none; } }

  /* ---------- 590 · Certification badge grid ---------- */
  .pcg-wrap { width: 100%; padding: 1.2rem; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem .6rem; font-family: var(--sans); }
.pcg-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.pcg-badge { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.pcg-badge::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed var(--line); }
.pcg-badge::after { content: ''; position: absolute; top: 50%; left: 50%; width: .3rem; height: .3rem; margin: -.15rem; border-radius: 50%; background: var(--acc); }
.pcg-label { font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--dim); line-height: 1.3; }

  /* ---------- 591 · Downloadable resources list ---------- */
  .pdl-wrap { width: 100%; margin: 0; padding: 0; list-style: none; font-family: var(--sans); }
.pdl-row { border-bottom: 1px solid var(--line); }
.pdl-row:last-child { border-bottom: none; }
.pdl-link { display: flex; align-items: center; gap: .6rem; padding: .6rem .2rem; color: var(--txt); text-decoration: none; }
.pdl-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.pdl-ico { width: .85rem; height: 1rem; flex: none; border: 1px solid var(--dim); border-radius: 1px; position: relative; background: var(--card); }
.pdl-ico::after { content: ''; position: absolute; top: 0; right: 0; width: .3rem; height: .3rem; background: var(--bg2); border-left: 1px solid var(--dim); border-bottom: 1px solid var(--dim); }
.pdl-name { flex: 1; font: 500 .66rem var(--sans); }
.pdl-type { font: 500 .5rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: .15rem .4rem; }
.pdl-arrow { color: var(--acc); font-size: .62rem; display: inline-block; transition: transform .15s; }
.pdl-link:hover .pdl-arrow, .pdl-link:focus-visible .pdl-arrow { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .pdl-arrow { transition: none; } }

  /* ---------- 592 · Live configurator, options drive a shared preview ---------- */
  .plc-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .8rem; font-family: var(--sans); }
.plc-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.plc-preview { display: flex; align-items: center; gap: .7rem; }
.plc-swatch { width: 2.6rem; height: 2.6rem; border-radius: 8px; border: 1px solid var(--line); flex: none; transition: background .2s; }
.plc-wrap:has(#plc-f1:checked) .plc-swatch { background: linear-gradient(160deg, var(--acc2), var(--bg2)); }
.plc-wrap:has(#plc-f2:checked) .plc-swatch { background: linear-gradient(160deg, var(--dim), var(--bg2)); }
.plc-wrap:has(#plc-f3:checked) .plc-swatch { background: linear-gradient(160deg, var(--txt), var(--bg)); }
.plc-cap { margin: 0; font: 500 .64rem var(--mono); color: var(--dim); }
.plc-l { display: none; color: var(--txt); font-weight: 600; }
.plc-wrap:has(#plc-f1:checked) .plc-l1, .plc-wrap:has(#plc-f2:checked) .plc-l2, .plc-wrap:has(#plc-f3:checked) .plc-l3 { display: inline; }
.plc-opts { display: flex; gap: .4rem; }
.plc-opt { flex: 1; text-align: center; font: 600 .62rem var(--mono); color: var(--dim); padding: .45em 0; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.plc-wrap:has(#plc-f1:checked) label[for="plc-f1"], .plc-wrap:has(#plc-f2:checked) label[for="plc-f2"], .plc-wrap:has(#plc-f3:checked) label[for="plc-f3"] { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.plc-wrap:has(#plc-f1:focus-visible) label[for="plc-f1"], .plc-wrap:has(#plc-f2:focus-visible) label[for="plc-f2"], .plc-wrap:has(#plc-f3:focus-visible) label[for="plc-f3"] { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .plc-swatch, .plc-opt { transition: none; } }

  /* ---------- 593 · Spec list with hover-defined terms ---------- */
  .psg-wrap { width: 100%; padding: 1.2rem 1.3rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .55rem; font-family: var(--sans); }
.psg-row { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.psg-row:last-child { border-bottom: none; }
.psg-label { font: 500 .64rem var(--sans); color: var(--txt); }
.psg-term { position: relative; display: inline-flex; }
.psg-btn { width: .95rem; height: .95rem; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--dim); font: 600 .5rem var(--mono); line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s, color .15s; }
.psg-btn:hover, .psg-btn:focus-visible { border-color: var(--acc); color: var(--acc); }
.psg-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.psg-tip { position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%); width: 9.5rem; max-width: 70vw; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .6rem; font: 400 .58rem/1.4 var(--sans); color: var(--dim); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.psg-btn:hover + .psg-tip, .psg-btn:focus-visible + .psg-tip { opacity: 1; }
.psg-val { flex: 1; text-align: right; font: 400 .62rem var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .psg-btn, .psg-tip { transition: none; } }

  /* ---------- 594 · 360 spin viewer, static illustration ---------- */
  .psv-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; font-family: var(--sans); }
.psv-stage { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.psv-ring { position: absolute; inset: 0; border: 1px dashed var(--line); border-radius: 50%; animation: psv-spin 12s linear infinite; }
.psv-ring::before { content: ''; position: absolute; top: -2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acc); }
.psv-obj { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(155deg, var(--acc2), var(--card)); border: 1px solid var(--line); }
.psv-hint { display: flex; align-items: center; gap: .4rem; font: 500 .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0; }
.psv-arrow { display: inline-block; font-size: .75rem; color: var(--acc); animation: psv-nudge 2.4s ease-in-out infinite; }
@keyframes psv-spin { to { transform: rotate(360deg); } }
@keyframes psv-nudge { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-35deg); } }
@media (prefers-reduced-motion: reduce) { .psv-ring, .psv-arrow { animation: none; } }

  /* ---------- 595 · Tabbed spec groups ---------- */
  .ptg-wrap { width: 100%; padding: 1.1rem 1.2rem; box-sizing: border-box; font-family: var(--sans); }
.ptg-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.ptg-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.ptg-tab { font: 500 .6rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--dim); padding: 0 0 .55rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.ptg-wrap:has(#ptg-t1:checked) label[for="ptg-t1"], .ptg-wrap:has(#ptg-t2:checked) label[for="ptg-t2"], .ptg-wrap:has(#ptg-t3:checked) label[for="ptg-t3"] { color: var(--txt); border-color: var(--acc); }
.ptg-wrap:has(#ptg-t1:focus-visible) label[for="ptg-t1"], .ptg-wrap:has(#ptg-t2:focus-visible) label[for="ptg-t2"], .ptg-wrap:has(#ptg-t3:focus-visible) label[for="ptg-t3"] { outline: 2px solid var(--acc); outline-offset: 2px; }
.ptg-panel { display: none; margin: 0; font: 400 .64rem/1.5 var(--sans); color: var(--dim); max-width: 32ch; }
.ptg-wrap:has(#ptg-t1:checked) .ptg-p1, .ptg-wrap:has(#ptg-t2:checked) .ptg-p2, .ptg-wrap:has(#ptg-t3:checked) .ptg-p3 { display: block; }
@media (prefers-reduced-motion: reduce) { .ptg-tab { transition: none; } }

  /* ---------- 596 · Trust badge row ---------- */
  .ptb-wrap { width: 100%; display: flex; padding: 1rem 1.1rem; box-sizing: border-box; font-family: var(--sans); }
.ptb-item { flex: 1; display: flex; align-items: flex-start; gap: .5rem; padding: 0 .7rem; border-right: 1px solid var(--line); }
.ptb-item:last-child { border-right: none; padding-right: 0; }
.ptb-item:first-child { padding-left: 0; }
.ptb-ico { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.ptb-ico::before { content: ''; position: absolute; top: 50%; left: 50%; width: .3rem; height: .3rem; margin: -.15rem; border-radius: 50%; background: var(--acc); }
.ptb-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ptb-text b { font: 600 .62rem var(--sans); color: var(--txt); }
.ptb-text i { font-style: normal; font: 400 .54rem/1.3 var(--sans); color: var(--dim); }

  /* ---------- 597 · Hairline cart ledger ---------- */
  .hcl-wrap{width:100%;max-width:520px;display:flex;flex-direction:column;font-family:var(--sans);}.hcl-row{display:grid;grid-template-columns:44px 1fr auto auto auto auto;align-items:center;gap:.7rem;padding:.75rem 0;border-bottom:1px solid var(--line);}.hcl-thumb{width:44px;height:44px;background:linear-gradient(160deg,var(--acc2),var(--bg2));flex:none;}.hcl-info{min-width:0;}.hcl-title{margin:0;font:500 .74rem/1.3 var(--sans);color:var(--txt);}.hcl-variant{margin:.15rem 0 0;font:400 .66rem/1.2 var(--sans);color:var(--dim);}.hcl-unit{margin:0;font:400 .7rem var(--sans);color:var(--dim);white-space:nowrap;}.hcl-qty{display:flex;align-items:center;gap:.4rem;}.hcl-step{width:22px;height:22px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);font:400 .78rem/1 var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s;}.hcl-step:hover{border-color:var(--dim);}.hcl-step:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.hcl-qtyval{min-width:1.2em;text-align:center;font:400 .74rem var(--sans);color:var(--txt);}.hcl-total{margin:0;font:600 .74rem var(--sans);color:var(--txt);white-space:nowrap;}.hcl-remove{background:none;border:none;padding:0;font:400 .66rem var(--sans);color:var(--dim);cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color .2s;}.hcl-remove:hover,.hcl-remove:focus-visible{color:var(--txt);}.hcl-remove:focus-visible{outline:1px solid var(--acc);outline-offset:2px;}.hcl-subtotal{display:flex;align-items:baseline;justify-content:space-between;padding:.9rem 0;border-top:1px solid var(--line);font:400 .78rem var(--sans);color:var(--txt);}.hcl-subtotal-amt{font:600 .95rem var(--sans);}.hcl-checkout{margin-top:.6rem;width:100%;padding:.75em 1em;background:var(--acc);color:rgba(0,0,0,.75);border:none;font:600 .78rem var(--sans);cursor:pointer;transition:opacity .2s;}.hcl-checkout:hover{opacity:.85;}.hcl-checkout:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}@media (prefers-reduced-motion: reduce){.hcl-wrap *{transition:none!important;}}

  /* MM-CHROME-START — catalogue-only CSS. extract.css_for() skips everything between
     these markers, so the browse layer's own styling can never leak into a customer's
     pattern bundle. It leaked 41 unrelated rules into every bundle before this existed. */
  /* ================= PRODUCT CHROME + ARRIVAL ================= */
  .skip-link {
    position: fixed; z-index: 10001; top: .75rem; left: .75rem; transform: translateY(-180%);
    min-height: 44px; display: inline-flex; align-items: center; padding: .8rem 1rem; border-radius: 999px; color: #080a07; background: var(--acc);
    font: 700 .72rem/1 var(--mono); text-decoration: none; transition: transform .2s ease;
  }
  .skip-link:focus { transform: translateY(0); }
  .site-nav {
    position: fixed; z-index: 7000; top: 0; left: 0; right: 0; min-height: 68px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
    padding: 0 max(clamp(1rem, 4vw, 3rem), calc((100vw - 1280px) / 2 + 3rem));
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(10,10,14,.94), rgba(10,10,14,.78));
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .site-mark, .site-links a { color: var(--txt); text-decoration: none; }
  .site-mark { display: inline-flex; width: max-content; min-height: 44px; align-items: center; gap: .625rem; font-size: .8125rem; font-weight: 850; letter-spacing: -.02em; }
  .site-mark i { width: 1.125rem; height: 1.125rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .125rem; transform: rotate(8deg); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .site-mark:hover i { transform: rotate(98deg); }
  .site-mark i::before, .site-mark i::after {
    content: ''; background: var(--acc);
    box-shadow: .625rem 0 var(--txt), 0 .625rem var(--txt), .625rem .625rem var(--acc);
  }
  .site-links { display: flex; align-items: center; gap: .1rem; }
  .site-links a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .7rem; color: #aaaab3; font: 500 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; border-radius: 2px; }
  .site-links a:hover, .site-links a[aria-current] { color: var(--txt); background: rgba(255,255,255,.06); }
  .site-links a.buy { margin-left: .5rem; padding-inline: 1rem; color: #080a07; background: var(--acc); }
  .site-links a.buy:hover { color: #080a07; background: var(--acc); opacity: .88; }
  .site-nav a:focus-visible, .lab-strip a:focus-visible, #browse button:focus-visible, #browse input:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

  /* ================= LAB STRIP — compact working-surface header, not a hero ================= */
  .lab-strip { padding-top: 6.5rem; padding-bottom: 2.75rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .lab-strip .eyebrow { margin-bottom: .85rem; color: var(--acc); font: 600 .64rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
  .lab-strip-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
  .lab-strip h1 { max-width: 12ch; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: .96; letter-spacing: -.035em; text-transform: uppercase; }
  .lab-strip-sub { max-width: 42ch; margin: 0; color: #b5b5be; font-size: .84rem; line-height: 1.6; }
  .lab-strip-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
  .lab-strip-stats { display: flex; gap: 1.6rem; }
  .lab-strip-stats p { margin: 0; }
  .lab-strip-stats strong { display: block; color: var(--txt); font: 650 1.05rem/1 var(--mono); }
  .lab-strip-stats span { color: #a9a9b2; font: 500 .56rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  #hero-search-trigger { display: inline-flex; min-height: 44px; align-items: center; gap: .6rem; padding: .6rem .95rem; border: 1px solid var(--line); border-radius: 999px; color: #b5b5be; font: 500 .62rem/1.3 var(--mono); text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
  #hero-search-trigger:hover { color: var(--txt); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.035); }
  #hero-search-trigger kbd { flex: none; border: 1px solid rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.3); border-radius: .35rem; padding: .3rem .4rem; color: var(--acc); background: rgba(0,0,0,.24); font: inherit; }
  .unlock-line { margin: 1rem 0 0; text-align: right; color: #a9a9b2; font: 500 .62rem/1.5 var(--mono); }
  .unlock-line a { color: var(--acc); }

  /* ================= BROWSE — taxonomy v2 filter bar ================= */
  #browse { padding-top: 5vh; scroll-margin-top: 5rem; }
  .library-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(24rem, .75fr); gap: clamp(3rem, 7vw, 7rem); align-items: end; padding: 9vh 0 5vh; border-top: 1px solid rgba(255,255,255,.12); }
  .library-head > div > p { margin-bottom: 1.1rem; color: var(--acc); font: 600 .64rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
  .library-head h2 { max-width: 11ch; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.05em; text-transform: uppercase; }
  .library-head h2 span { color: #8f8f99; }
  .library-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .library-ledger p { margin: 0; padding: 1rem .8rem; border-right: 1px solid var(--line); text-align: center; }
  .library-ledger p:last-child { border-right: 0; }
  .library-ledger strong { display: block; margin-bottom: .4rem; color: var(--txt); font: 650 1.15rem/1 var(--mono); }
  .library-ledger span { color: #a9a9b2; font: 500 .55rem/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .browse-bar {
    border: 1px solid var(--line); border-radius: 14px; background: #0d0d13;
    padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .85rem;
  }
  .format-bar { display: grid; grid-template-columns: 8.5em auto minmax(12rem, 1fr); align-items: center; gap: .65rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
  .format-options { display: flex; flex-wrap: wrap; gap: .4rem; }
  .format-choice { min-height: 44px; appearance: none; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .55rem .85rem; color: #a9a9b2; background: transparent; font: 550 .66rem/1 var(--mono); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
  .format-choice:hover { color: var(--txt); border-color: rgba(255,255,255,.28); }
  .format-choice.on { color: #080a07; border-color: var(--acc); background: var(--acc); }
  .format-bar > p { justify-self: end; margin: 0; max-width: 30ch; color: #a9a9b2; font: 500 .62rem/1.45 var(--mono); text-align: right; }
  .browse-search { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
  #mm-q {
    flex: 1; min-width: 240px; background: var(--bg2); border: 1px solid var(--line);
    min-height: 48px; border-radius: 10px; padding: .8em 1em; color: var(--txt);
    font: 400 .82rem var(--mono); outline: none;
  }
  #mm-q:focus { border-color: rgba(183,255,46,.5); }
  #mm-q::-webkit-search-cancel-button { filter: invert(1) opacity(.4); }
  .browse-count { font: 400 .72rem var(--mono); color: var(--dim); white-space: nowrap; }
  .browse-count b { color: var(--acc); font-weight: 500; }
  .filter-drawer { border-top: 1px solid var(--line); }
  .filter-drawer > summary { min-height: 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
  .filter-drawer > summary::-webkit-details-marker { display: none; }
  .filter-drawer > summary > span { color: var(--txt); font: 600 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
  .filter-drawer > summary > i { color: #9f9fa8; font: 500 .61rem/1 var(--mono); font-style: normal; }
  .filter-drawer > summary > b { color: var(--acc); font: 400 1.2rem/1 var(--mono); transition: transform .3s cubic-bezier(.76,0,.24,1); }
  .filter-drawer[open] > summary > b { transform: rotate(45deg); }
  .filter-groups { display: flex; flex-direction: column; gap: .7rem; padding: .5rem 0 .8rem; }
  .fgroup { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
  .flabel {
    font: 500 .62rem var(--mono); color: var(--dim); text-transform: uppercase;
    letter-spacing: .18em; min-width: 8.5em;
  }
  .pill {
    font: 500 .68rem var(--mono); color: var(--dim); background: transparent;
    min-height: 44px; border: 1px solid var(--line); border-radius: 99px; padding: .55em .9em;
    cursor: pointer; display: inline-flex; align-items: baseline; gap: .45em;
    transition: color .2s, border-color .2s, background .2s;
  }
  .pill i { font-style: normal; font-size: .82em; opacity: .5; }
  .pill:hover { color: var(--txt); border-color: rgba(255,255,255,.2); }
  .pill.on { color: #0a0a0e; background: var(--acc); border-color: var(--acc); }
  .pill.on i { opacity: .65; }
  .pill.role.on { background: var(--acc); }
  .pill.clear { color: var(--acc); border-color: rgba(183,255,46,.4); }
  .pill[hidden] { display: none !important; }
  .fgroup.roles .pill { border-color: rgba(255,255,255,.14); }
  .lens > summary {
    cursor: pointer; font: 500 .62rem var(--mono); color: var(--dim);
    text-transform: uppercase; letter-spacing: .18em; list-style: none;
  }
  .lens > summary::-webkit-details-marker { display: none; }
  .lens > summary::before { content: '▸ '; }
  .lens[open] > summary::before { content: '▾ '; }
  .lens-pills { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .6rem; width: 100%; }
  .lens-pills .pill { min-width: 44px; justify-content: center; }
  main input[type="range"] { min-height: 44px; }
  .card.mm-hide, .wrap.mm-hide, .stage.mm-hide, .h-scroll.mm-hide, .mm-stage.mm-hide,
  .mm-page-hidden { display: none !important; }
  .sec-match { color: var(--acc); font: 500 .68rem var(--mono); margin-left: .6rem; }
  .mm-empty {
    text-align: center; color: var(--dim); font: 400 .8rem var(--mono);
    padding: 8vh 0; display: none;
  }
  .mm-empty.on { display: block; }

  .format-action { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .75rem; border: 1px solid rgba(183,255,46,.25); border-radius: 999px; color: var(--acc); font: 550 .55rem/1 var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; transition: color .2s, background .2s; }
  .format-action:hover { color: #080a07; background: var(--acc); }
  /* S/A only — a minimal link straight to the pattern page's featured code excerpt. */
  .see-code { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .75rem; color: var(--dim); font: 550 .55rem/1 var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; transition: color .2s; }
  .see-code:hover { color: var(--txt); }
  .card > header .tags { display: none; }
  [data-catalog-section="light"] .section-head { padding-top: 10vh; }
  [data-catalog-section="light"] .section-head h2 { color: var(--acc); }
  [data-catalog-section] .section-head [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-catalog-section]:not([data-catalog-section="light"]) { border-top: 1px solid rgba(255,255,255,.12); }
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head {
    min-height: 118px; display: grid; grid-template-columns: minmax(9rem,.45fr) minmax(14rem,.75fr) minmax(16rem,1fr) auto;
    align-items: center; gap: 1.5rem; padding: 1.35rem 0; margin: 0;
  }
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head .kicker,
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head h2,
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head p,
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head .sec-hint { margin: 0; }
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head h2 { font-size: clamp(1.35rem,2.3vw,2rem); line-height: 1; letter-spacing: -.035em; }
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head p { max-width: 48ch; color: #a9a9b2; font-size: .78rem; line-height: 1.5; }
  [data-catalog-section]:not([data-catalog-section="light"]) .section-head .sec-hint { min-width: 9rem; color: var(--acc); text-align: right; }
  .mm-load-more {
    display: flex; width: min(32rem,calc(100% - 2rem)); min-height: 52px; align-items: center; justify-content: center;
    margin: 2.25rem auto 5rem; border: 1px solid rgba(183,255,46,.34); border-radius: 999px;
    color: var(--acc); background: rgba(183,255,46,.035); font: 600 .68rem/1 var(--mono);
    letter-spacing: .04em; cursor: pointer; transition: color .2s, background .2s, transform .2s;
  }
  .mm-load-more:hover { color: #080a07; background: var(--acc); transform: translateY(-1px); }
  .mm-load-more[hidden] { display: none; }
  .catalog-footer {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(20rem,.85fr); gap: clamp(3rem,8vw,8rem);
    padding-top: 12vh; padding-bottom: 2rem; margin-top: 8vh; border-top: 1px solid rgba(255,255,255,.12);
  }
  .catalog-footer-copy h2 { max-width: 8ch; font-size: clamp(3.6rem,7vw,6.8rem); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; }
  .catalog-footer-copy > p:not(.eyebrow) { max-width: 40rem; margin-top: 1.5rem; color: #aaaab3; font-size: .92rem; line-height: 1.65; }
  .catalog-footer-ledger { align-self: end; border-top: 1px solid var(--line); }
  .catalog-footer-ledger p { display: grid; gap: .6rem; margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
  .catalog-footer-ledger span { color: #8f8f99; font: 600 .6rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
  .catalog-footer-ledger strong, .catalog-footer-ledger a { color: var(--txt); font: 550 .78rem/1.45 var(--sans); text-decoration: none; }
  .catalog-footer-ledger p:last-child { grid-template-columns: auto 1fr 1fr 1fr; align-items: center; }
  .catalog-footer-ledger a:hover { color: var(--acc); }
  .catalog-colophon { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 7vh; padding-top: 1.2rem; border-top: 1px solid var(--line); color: #81818b; font: 500 .58rem/1.6 var(--mono); letter-spacing: .08em; }
  .catalog-colophon a { color: #aaaab3; }

  /* degraded-specimen overlay — see the JS band's `degrade()` IIFE */
  .mm-blocked {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .4rem; padding: 1.5rem;
    text-align: center; background: rgba(10,10,14,.92); backdrop-filter: blur(2px);
  }
  .mm-blocked p { margin: 0; max-width: 26rem; color: var(--txt); font: 550 .78rem/1.5 var(--sans); }
  .mm-blocked .mm-blocked-detail { color: var(--dim); font: 500 .64rem/1.5 var(--mono); }
  [data-cdn-hosts] .demo, [data-cdn-hosts].mm-stage { position: relative; }
  @media (prefers-reduced-motion: reduce) { .mm-blocked { backdrop-filter: none; } }
  @media (max-width: 860px) {
    .site-nav { min-height: 108px; grid-template-columns: 1fr; grid-template-rows: 60px 48px; gap: 0; padding-inline: 1rem; }
    .site-links { grid-row: 2; display: flex; width: calc(100vw - 2rem); gap: .25rem; overflow-x: auto; scrollbar-width: none; }
    .site-links::-webkit-scrollbar { display:none; }
    .site-links a { flex: 1 0 auto; padding-inline: .85rem; }
    .site-links a.buy { margin-left: 0; }
    .lab-strip { padding-top: 8.5rem; padding-bottom: 2.25rem; }
    .lab-strip-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .lab-strip h1 { max-width: none; font-size: clamp(2.4rem, 11vw, 3rem); }
    .lab-strip-sub { max-width: none; }
    .lab-strip-foot { flex-direction: column; align-items: flex-start; }
    .unlock-line { text-align: left; }
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero-cta { width: 100%; }
    .browse-bar { padding: .8rem; }
    .library-head { grid-template-columns: 1fr; gap: 2rem; padding-top: 6vh; }
    .library-head h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
    .library-ledger { min-width: 0; }
    .format-bar { grid-template-columns: 1fr; align-items: start; }
    .format-bar > p { justify-self: start; text-align: left; }
    .format-choice { min-height: 44px; }
    .browse-search { display: grid; grid-template-columns: 1fr auto; }
    #mm-q { grid-column: 1 / -1; min-width: 0; width: 100%; }
    .pill { min-height: 44px; }
    .flabel { min-width: 100%; }
    .filter-drawer > summary { grid-template-columns: 1fr auto; gap: .6rem; }
    .filter-drawer > summary > i { display: none; }
    .card > header { flex-wrap: wrap; }
    .grid { grid-template-columns: minmax(0,1fr); }
    .format-action { min-height: 44px; }
    [data-catalog-section]:not([data-catalog-section="light"]) .section-head { min-height: 0; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1.4rem 0; }
    [data-catalog-section]:not([data-catalog-section="light"]) .section-head .kicker { grid-column: 1 / -1; }
    [data-catalog-section]:not([data-catalog-section="light"]) .section-head h2 { font-size: 1.55rem; }
    [data-catalog-section]:not([data-catalog-section="light"]) .section-head p { grid-column: 1 / -1; grid-row: 3; }
    [data-catalog-section]:not([data-catalog-section="light"]) .section-head .sec-hint { grid-column: 2; grid-row: 2; min-width: 0; font-size: .6rem; }
    .catalog-footer { grid-template-columns: 1fr; gap: 3rem; padding-top: 8vh; }
    .catalog-footer-copy h2 { font-size: clamp(3.4rem,17vw,5rem); }
    .catalog-footer-ledger p:last-child { grid-template-columns: 1fr; }
  }
  @media (max-width: 390px) {
    .site-mark span { font-size: .66rem; }
    .lab-strip h1 { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  }
  /* MM-CHROME-END */
