/* BIFROST web – light rainbow design system. Tokens: /workspace/bifrost-ui/DESIGN.md
   Light sky, soft clouds, white cards, navy ink, and «broen»: the living rainbow bridge.
   Interaction (same as the apps): the rainbow IS the switch. Living colour = connected, grey and still = off. */

@font-face { font-family: "Outfit"; font-weight: 300 700; font-display: swap; src: url("assets/fonts/outfit-latin.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f6f9fd; --sky: #e3effb; --sky-pale: #eef5fc; --surface: #ffffff; --raised: #f3f7fc;
  --line: #e3e9f2; --line-strong: #cfd8e5;
  --ink: #1b2a4a; --ink-2: #3a4866; --mist: #5b6886; --dim: #66728c;
  --navy: #1b2a4a; --navy-hover: #26385f; --on-navy: #ffffff;
  --accent: #5a4bd6; --accent-soft: #8b7cf6; --ring: 0 0 0 4px rgba(108, 92, 231, 0.2);
  /* rainbow tokens (decoration) and the softer web set used by the living bridge (16 % white mixed in) */
  --rose: #f77fae; --peach: #ff9f6e; --sun: #f8c84e; --mint: #5ccf94; --aqua: #46c3e6; --blue: #6f8ff8; --violet: #9a7bf4;
  --s-rose: #f893bb; --s-peach: #ffae85; --s-sun: #f9d16a; --s-mint: #76d7a5; --s-aqua: #64cdea; --s-blue: #86a1f9; --s-violet: #aa90f6;
  --rainbow: linear-gradient(90deg, var(--s-rose), var(--s-peach), var(--s-sun), var(--s-mint), var(--s-aqua), var(--s-blue), var(--s-violet));
  --rainbow-conic: conic-gradient(from 0deg, var(--s-rose), var(--s-peach), var(--s-sun), var(--s-mint), var(--s-aqua), var(--s-blue), var(--s-violet), var(--s-rose));
  --rainbow-text: linear-gradient(90deg, #e2559a, #ef8640, #d9a514, #2fb37a, #1fa5cc, #4f74e8, #7a5ae0);
  --ok: #2bb673; --ok-bg: #eaf8f0; --ok-line: #bfe6cf; --ok-text: #146c3e;
  --off: #9aa4b6;
  --shadow-sm: 0 1px 2px rgba(27, 42, 74, 0.05), 0 4px 14px rgba(27, 42, 74, 0.05);
  --shadow: 0 1px 2px rgba(27, 42, 74, 0.05), 0 12px 32px -8px rgba(27, 42, 74, 0.12);
  --shadow-lg: 0 2px 6px rgba(27, 42, 74, 0.05), 0 30px 60px -18px rgba(27, 42, 74, 0.22);
  --r-input: 12px; --r-row: 14px; --r-card: 20px; --r-hero: 28px;
  --font: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cycle: 6s;   /* master loop of the living rainbow: every loop below divides it, so captures loop seamlessly */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: url("assets/clouds.svg") bottom center / 1600px auto no-repeat,
              linear-gradient(180deg, var(--sky) 0, var(--sky-pale) 420px, var(--bg) 900px);
  background-color: var(--bg); color: var(--ink-2);
  font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
h1 { font-size: clamp(32px, 4.4vw, 44px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 18px; letter-spacing: -0.01em; }
p { margin: 0; }
strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* placeholders that must be filled in before launch (seller identity, legal, logging, deletion) */
.ph { display: inline; padding: 0 5px; border-radius: 5px; background: #fff7e0; border: 1px dashed #e2b93b; color: #7a5a00; font-size: 0.92em; white-space: normal; }
.soon { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }

/* ------------------------------------------------------------------ brand (placeholder logo = one file) */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none !important; flex: none; }
.brand .lockup { display: block; height: 34px; width: auto; flex: none; }
.brand.sm .lockup { height: 30px; }

/* ------------------------------------------------------------------ header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(27, 42, 74, 0.4); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav .link { color: var(--mist); padding: 8px 12px; border-radius: 999px; font-size: 15px; }
.nav .link:hover, .nav .link[aria-current="page"] { color: var(--ink); background: rgba(27, 42, 74, 0.05); text-decoration: none; }
.nav .btn { min-height: 40px; padding: 8px 18px; font-size: 15px; margin-left: 4px; }

/* ------------------------------------------------------------------ buttons */
.btn, button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  background: var(--navy); color: var(--on-navy); font: 500 16px/1.2 var(--font);
  text-decoration: none !important; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(27, 42, 74, 0.55);
  transition: background 0.18s var(--ease), border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.btn:hover, button[type="submit"]:hover { background: var(--navy-hover); }
.btn:active, button[type="submit"]:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn.lg { min-height: 56px; padding: 14px 28px; font-size: 17px; }
.btn.block, button[type="submit"] { width: 100%; }
.btn.quiet { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.quiet:hover { background: var(--raised); border-color: var(--line-strong); }
.providers { display: grid; gap: 10px; margin: 22px 0 4px; }
.btn.provider { width: 100%; min-height: 50px; box-shadow: var(--shadow-sm); }
.btn.provider svg { width: 20px; height: 20px; flex: none; }
.btn.provider.apple { background: #000; color: #fff; }
.btn.provider.apple:hover { background: #1d1d1f; }
.btn.provider.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn.provider.google:hover { background: #f8f9fb; border-color: #c6cad2; }

/* ------------------------------------------------------------------ small parts */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--mist); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--rainbow); }
.eyebrow.pill { padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--mist); font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge.soon { background: #f5f3ff; border-color: #e3defc; color: #5a4bd6; }
.badge.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-text); padding-left: 5px; }
.badge.ok .okc { width: 15px; height: 15px; color: var(--ok); }
.rainbow-text { background: var(--rainbow-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flag { width: 22px; height: 16px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(27, 42, 74, 0.06); }
.hint { color: var(--mist); font-size: 14px; margin-top: 14px; }
.small { color: var(--dim); font-size: 14px; margin-top: 12px; }
.lede { color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.price-line { color: var(--mist); font-size: 14.5px; }
.note { margin: 28px 0 0; text-align: center; color: var(--dim); font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow-sm); }
.card.lg { padding: 32px; border-radius: var(--r-hero); box-shadow: var(--shadow); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-title h2 { font-size: 17px; letter-spacing: -0.01em; }
.trust { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); font-size: 14px; }
.trust svg { width: 18px; height: 18px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; flex: none; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%232bb673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ticks.plain li::before { background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%235b6886'/%3E%3C/svg%3E") center / 20px no-repeat; }
.icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); }
.icon svg { width: 22px; height: 22px; }
.icon.t1 { background: linear-gradient(135deg, #ffe6f0, #fff0e2); }
.icon.t2 { background: linear-gradient(135deg, #fff5da, #e0f7ea); }
.icon.t3 { background: linear-gradient(135deg, #def4fb, #e9e6ff); }

/* ------------------------------------------------------------------ «broen»: the living Hengebro (rainbow bridge)
   assets/rainbow-bridge.svg is inlined by gen/rbridge_web.py (its own <style> dropped, ids prefixed). Box = viewBox
   0 -36 400 336 (h = .84 w): spire tips 10.7 %, saddles 19 %, cable sag 40.5 %, shield gap centre 55.5 %, deck 68.8 %.
   Below the deck only the tower legs run on, so the box is cropped (--rb-crop) and the legs fade into the clouds. */
.bridge { display: block; width: 100%; height: auto; overflow: visible; }
.rb-live, .rb-static { display: block; width: 100%; height: auto; margin-bottom: var(--rb-crop, -17%);
  -webkit-mask: linear-gradient(180deg, #000 0, #000 72%, transparent 80%); mask: linear-gradient(180deg, #000 0, #000 72%, transparent 80%); }
.rb-pic { display: contents; }
.rb-static { display: none; }
/* the static export's aurora stops in a straight edge at the image border: fade the sides as well */
.rb-static { --rb-fade-y: linear-gradient(180deg, #000 0, #000 72%, transparent 80%);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), var(--rb-fade-y); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), var(--rb-fade-y); mask-composite: intersect; }
.bridge-nodes circle, .bridge-halos circle, .bridge-stars path, .bridge-tips .tipglow { transform-box: fill-box; transform-origin: center; }
.bridge-sparks { opacity: 0; pointer-events: none; }
.bridge-spark { stroke-dasharray: 13 87; stroke-dashoffset: 100; }
.bridge-stars path { opacity: 0.85; }
.bridge-dust circle { opacity: 0.8; }
.bridge, .rb-static, .bridge-halos, .bridge-sparks, .bridge-aurora, .bridge-dust, .bridge-stars, .bridge-tips .shaft { transition: filter 0.7s var(--ease), opacity 0.7s var(--ease); }

/* OFF: grey, still, faded; no aurora, no light shafts, no stardust */
[data-state="closed"] .bridge, [data-state="closed"] .rb-static { filter: saturate(0.08); opacity: 0.42; }
[data-state="closed"] .bridge-halos, [data-state="closed"] .bridge-aurora, [data-state="closed"] .bridge-tips .shaft, [data-state="closed"] .bridge-dust { opacity: 0; }
[data-state="closed"] .bridge-stars { opacity: 0.4; }

/* ON: each rainbow stop (style --k) walks backwards through the 7 soft colours with a 1/7 phase offset, so the colours
   flow left -> right along cable, hangers and deck. Gold (spire tips) and white (halo) gradients stay fixed. */
@keyframes bf-cycle-stop { 0%, 100% { stop-color: #f893bb; } 14.2857% { stop-color: #aa90f6; } 28.5714% { stop-color: #86a1f9; }
  42.8571% { stop-color: #64cdea; } 57.1429% { stop-color: #76d7a5; } 71.4286% { stop-color: #f9d16a; } 85.7143% { stop-color: #ffae85; } }
@keyframes bf-cycle-fill { 0%, 100% { fill: #f893bb; } 14.2857% { fill: #aa90f6; } 28.5714% { fill: #86a1f9; }
  42.8571% { fill: #64cdea; } 57.1429% { fill: #76d7a5; } 71.4286% { fill: #f9d16a; } 85.7143% { fill: #ffae85; } }
@keyframes bf-cycle-stroke { 0%, 100% { stroke: #f893bb; } 14.2857% { stroke: #aa90f6; } 28.5714% { stroke: #86a1f9; }
  42.8571% { stroke: #64cdea; } 57.1429% { stroke: #76d7a5; } 71.4286% { stroke: #f9d16a; } 85.7143% { stroke: #ffae85; } }
@keyframes bf-twinkle { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes bf-spark { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bf-shimmer { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes bf-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes bf-aurora { 0%, 100% { transform: translateX(0); opacity: 0.75; } 50% { transform: translateX(1.5%); opacity: 1; } }
@keyframes bf-tip { 0%, 100% { opacity: 0.75; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes bf-dust { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes bf-spin { to { transform: rotate(360deg); } }
@keyframes bf-ripple { 0% { transform: translate(-50%, -50%) scale(0.85); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.2; } }
@keyframes bf-fill-in { from { filter: saturate(0.08); opacity: 0.42; } to { filter: saturate(1); opacity: 1; } }

[data-state="open"] .bridge stop[style*="--k"] { animation: bf-cycle-stop var(--cycle) linear infinite; animation-delay: calc((var(--k) - 7) / 7 * var(--cycle)); }
[data-state="open"] .bridge-sparks { opacity: 0.6; }
[data-state="open"] .bridge-spark { animation: bf-spark calc(var(--cycle) / 2) linear infinite; animation-delay: calc(var(--i) * -0.53s); }
[data-state="open"] .bridge-spark:nth-child(odd) { animation-direction: reverse; }
[data-state="open"] .bridge-strand { animation: bf-shimmer calc(var(--cycle) / 2) ease-in-out infinite; animation-delay: calc(var(--i) * -0.29s); }
[data-state="open"] .bridge-glow { animation: bf-glow calc(var(--cycle) / 2) ease-in-out infinite; }
[data-state="open"] .bridge-halos circle { animation: bf-twinkle calc(var(--cycle) / 4) ease-in-out infinite, bf-cycle-fill var(--cycle) linear infinite;
  animation-delay: calc(var(--i) * -0.137s), calc((var(--u) * 6 / 7 - 1) * var(--cycle)); }
[data-state="open"] .bridge-nodes circle { animation: bf-twinkle calc(var(--cycle) / 4) ease-in-out infinite, bf-cycle-stroke var(--cycle) linear infinite;
  animation-delay: calc(var(--i) * -0.137s), calc((var(--u) * 6 / 7 - 1) * var(--cycle)); }
[data-state="open"] .bridge-stars path { animation: bf-twinkle calc(var(--cycle) / 4) ease-in-out infinite, bf-cycle-fill var(--cycle) linear infinite;
  animation-delay: calc(var(--i) * -0.31s), calc((var(--u) * 6 / 7 - 1) * var(--cycle)); }
[data-state="open"] .bridge-aurora path { animation: bf-aurora var(--cycle) ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
[data-state="open"] .bridge-tips .tipglow, [data-state="open"] .bridge-tips .shaft { animation: bf-tip calc(var(--cycle) / 2) ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
[data-state="open"] .bridge-dust circle { animation: bf-dust calc(var(--cycle) / 2) ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s); }
/* CONNECTING: colour fills in, spinner around the symbol */
[data-state="opening"] .bridge, [data-state="opening"] .rb-static { animation: bf-fill-in 1.3s var(--ease) forwards; }
[data-state="opening"] .bridge-halos { opacity: 0.5; }
[data-state="opening"] .bridge-aurora, [data-state="opening"] .bridge-dust { opacity: 0.35; }

/* clouds the bridge rises from */
.clouds { position: absolute; left: -40px; right: -40px; bottom: 0; height: 150px; pointer-events: none;
  background: url("assets/clouds.svg") bottom center / 900px 200px repeat-x;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 45%, #000 75%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 45%, #000 75%, transparent 100%); }

/* ------------------------------------------------------------------ the toggle: rainbow = switch */
.toggle { position: relative; display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; border-radius: 28px; -webkit-tap-highlight-color: transparent; }
.toggle .bridge, .toggle .rb-static { transition: transform 0.15s var(--ease), filter 0.7s var(--ease), opacity 0.7s var(--ease); }
.toggle:hover .bridge, .toggle:hover .rb-static { transform: translateY(-2px); }
.toggle:active .bridge, .toggle:active .rb-static { transform: scale(0.985); }
.toggle:focus-visible { box-shadow: none; }
.toggle:focus-visible .badge-sym { box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(90, 75, 214, 0.55); }
.bwrap { position: absolute; left: 50%; top: var(--by, 69.6%); width: 0; height: 0; display: grid; place-items: center; }
.badge-sym { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px rgba(27, 42, 74, 0.25); transition: box-shadow 0.4s var(--ease); }
.badge-sym .sg { grid-area: 1 / 1; width: 38px; height: 38px; transition: opacity 0.3s, transform 0.3s var(--ease); }
.badge-sym .sg-on { color: var(--ok); opacity: 0; transform: scale(0.7); }
.badge-sym .sg-off { color: var(--off); width: 34px; height: 34px; }
.badge-sym .spin { position: absolute; inset: -5px; border-radius: 50%; border: 3px solid rgba(90, 75, 214, 0.14); border-top-color: var(--accent); opacity: 0; }
[data-state="open"] .badge-sym, .badge-sym.on { background: #fff; box-shadow: 0 0 0 8px rgba(43, 182, 115, 0.12), 0 12px 26px -8px rgba(43, 182, 115, 0.55); }
[data-state="open"] .badge-sym .sg-on, .badge-sym.on .sg-on { opacity: 1; transform: none; }
[data-state="open"] .badge-sym .sg-off, .badge-sym.on .sg-off { opacity: 0; }
[data-state="opening"] .badge-sym .spin { opacity: 1; animation: bf-spin 1s linear infinite; }
.ripple { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(91, 104, 134, 0.22); transform: translate(-50%, -50%); opacity: 0; }
.ripple.r1 { width: 104px; height: 104px; } .ripple.r2 { width: 138px; height: 138px; border-color: rgba(91, 104, 134, 0.13); }
[data-state="closed"] .ripple { opacity: 1; animation: bf-ripple calc(var(--cycle) / 3) ease-out infinite; }
[data-state="closed"] .ripple.r2 { animation-delay: -1s; }
[data-state="opening"] .ripple { opacity: 1; border-color: rgba(90, 75, 214, 0.3); animation: bf-ripple 1s ease-out infinite; }
/* state-dependent copy */
.when-on, .when-busy { display: none !important; }
[data-state="open"] .when-on { display: flex !important; }
[data-state="open"] .when-off, [data-state="opening"] .when-off { display: none !important; }
[data-state="opening"] .when-busy { display: flex !important; }

/* ------------------------------------------------------------------ landing hero */
/* copy on top; the Hengebro below it, spire tips flanking the buttons, deck and tower feet in the clouds.
   --hw = bridge width (box h = .84 w, tips at .09 w, deck at .578 w). --ov = how far the tips rise beside the copy. */
.hero { position: relative; overflow: hidden; padding: 0; --hw: clamp(700px, 70vw, 1000px); --ov: 92px; }
.hero-arch { position: relative; z-index: 0; width: var(--hw); margin-left: calc(50% - var(--hw) / 2); pointer-events: none;
  margin-top: calc(var(--hw) * -0.09 - var(--ov)); margin-bottom: calc(var(--hw) * -0.84 + var(--hw) * 0.578 + 96px); }
.hero-arch .rb-live, .hero-arch .rb-static { margin-bottom: 0;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 70.5%, transparent 79%); mask: linear-gradient(180deg, #000 0, #000 70.5%, transparent 79%); }
.hero-arch .rb-static { --rb-fade-y: linear-gradient(180deg, #000 0, #000 70.5%, transparent 79%);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), var(--rb-fade-y); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), var(--rb-fade-y); mask-composite: intersect; }
.hero-arch .badge-sym { top: 55.5%; width: 84px; height: 84px; }
.hero-arch .badge-sym .sg { width: 44px; height: 44px; }
.hero-clouds { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none; z-index: 1;
  background: url("assets/clouds.svg") bottom center / 1600px 360px repeat-x;
  -webkit-mask: linear-gradient(180deg, transparent, #000 45%, #000 78%, transparent); mask: linear-gradient(180deg, transparent, #000 45%, #000 78%, transparent); }
.hero-copy { position: relative; z-index: 2; text-align: center; padding-top: 92px; display: flex; flex-direction: column; align-items: center; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 40px; width: 820px; height: 420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(240, 246, 253, 0.94), rgba(240, 246, 253, 0.65) 60%, transparent); pointer-events: none; }
.hero h1 { font-size: clamp(44px, 5.6vw, 72px); letter-spacing: -0.035em; line-height: 1.02; margin: 20px 0 16px; }
.hero .lede { max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 16px; }

/* ------------------------------------------------------------------ sections */
.section { padding: 96px 0 0; }
.section-head { max-width: 640px; margin-bottom: 30px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 12px 0 10px; }
.section-head p { color: var(--mist); font-size: 17px; }
.grid { display: grid; gap: 18px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature h3 { margin: 16px 0 6px; }
.feature p { color: var(--mist); font-size: 15px; }

.how { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; margin-bottom: 40px; }
.demo-card { position: relative; overflow: hidden; border-radius: var(--r-hero); border: 1px solid var(--line); box-shadow: var(--shadow);
  background: linear-gradient(180deg, #e8f1fb, #f4f8fd 70%, #fff); padding: 44px 34px 70px; }
.demo-card .toggle { z-index: 1; }
.demo-card .clouds { height: 130px; z-index: 0; }
.demo-hint { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; display: flex; justify-content: center; font-size: 15px; color: var(--mist); }
.demo-hint span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); }
.demo-hint svg { width: 18px; height: 18px; }
.demo-hint .okc { color: var(--ok); }
.demo-card[data-state="open"] .when-off { display: none !important; }
.how-copy h2 { margin: 12px 0 10px; font-size: clamp(30px, 3.4vw, 42px); }
.how-copy .sub { color: var(--mist); font-size: 17px; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps .n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 600; font-size: 14px; }
.steps strong { display: block; font-size: 17px; }
.steps span { color: var(--mist); font-size: 15px; }

.plats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-width: 0; }
.dicon { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--ink); background: linear-gradient(135deg, #eef3fb, #f5f2ff); }
.dicon svg { width: 22px; height: 22px; }
.plats .plat:nth-child(1) .dicon { background: linear-gradient(135deg, #ffe6f0, #fff0e2); }
.plats .plat:nth-child(2) .dicon { background: linear-gradient(135deg, #fff5da, #e0f7ea); }
.plats .plat:nth-child(3) .dicon { background: linear-gradient(135deg, #def4fb, #e9e6ff); }
.plats .plat:nth-child(4) .dicon { background: linear-gradient(135deg, #e0f7ea, #def4fb); }
.plats .plat:nth-child(5) .dicon { background: linear-gradient(135deg, #e9e6ff, #ffe6f0); }
.plats .plat:nth-child(6) .dicon { background: linear-gradient(135deg, #fff0e2, #fff5da); }
.pn { min-width: 0; flex: 1; }
.pn strong { display: block; font-size: 16px; }
.pn .meta, .devlist .meta { display: block; color: var(--dim); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.qas { display: grid; gap: 10px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.qa summary, .adv summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; color: var(--ink); font-weight: 500; font-size: 17px; border-radius: 16px; }
.qa summary::-webkit-details-marker, .adv summary::-webkit-details-marker { display: none; }
.qchev { width: 20px; height: 20px; color: var(--mist); flex: none; transition: transform 0.2s var(--ease); }
details[open] > summary .qchev { transform: rotate(180deg); }
.qa .ans { padding: 0 20px 18px; color: var(--ink-2); font-size: 15.5px; }

/* ------------------------------------------------------------------ footer */
.site-footer { margin-top: 110px; padding: 40px 0 28px; border-top: 1px solid rgba(207, 216, 229, 0.7); background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.seller { color: var(--dim); font-size: 13.5px; line-height: 1.8; }
.foot-col { display: grid; gap: 8px; align-content: start; font-size: 14.5px; }
.foot-col h2 { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.foot-col a { color: var(--ink-2); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }

/* ------------------------------------------------------------------ auth */
.auth { display: grid; grid-template-columns: 1fr 470px; gap: 64px; align-items: center; padding: 44px 0 0; }
.auth-art { position: relative; max-width: 520px; display: flow-root; }
.auth-art .clouds, .sec-art .clouds { left: -20px; right: -20px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent 0, #000 45%, #000 75%, transparent 100%);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent 0, #000 45%, #000 75%, transparent 100%); mask-composite: intersect; }
.auth-art .clouds { height: 76px; bottom: -22px; }
/* the main logo (Asgard-ring) sits in the clear sky under the arc, like the shield on the dashboard */
.logo-tile { position: absolute; left: 50%; top: 69.6%; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 62%, rgba(255, 255, 255, 0)); }
.logo-tile img { width: 104px; height: 104px; filter: drop-shadow(0 8px 18px rgba(139, 108, 240, 0.25)); }
.auth-aside h2 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -0.03em; margin: 26px 0 12px; }
.auth-card h1 { font-size: 32px; margin: 24px 0 6px; }
.switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); }
.switch a { text-align: center; padding: 9px 12px; border-radius: 999px; color: var(--mist); font-size: 15px; font-weight: 500; text-decoration: none; }
.switch a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--dim); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
label { display: block; margin: 14px 0 6px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-input); background: #fff; color: var(--ink); font: 400 16px/1.3 var(--font); transition: border-color 0.15s, box-shadow 0.15s; }
input:hover { border-color: #b9c4d4; }
input:focus { outline: none; border-color: var(--accent-soft); box-shadow: var(--ring); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--mist); font-weight: 400; margin: 14px 0 4px; }
label.check input { width: 16px; height: 16px; accent-color: var(--navy); margin: 0; }
form button[type="submit"] { margin-top: 18px; }
.legal-line { color: var(--dim); font-size: 13px; margin-top: 8px; }

/* ------------------------------------------------------------------ dashboard */
body.app-body { background: linear-gradient(180deg, var(--sky) 0, var(--bg) 560px); }
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.app > * { min-width: 0; }
.sidenav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 24px 16px 18px;
  background: rgba(255, 255, 255, 0.72); border-right: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); z-index: 10; }
.sidenav .brand { padding: 0 8px 24px; }
.sidenav nav { display: grid; gap: 3px; }
.sidenav nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink-2); font-size: 15px; text-decoration: none; }
.sidenav nav a svg { width: 20px; height: 20px; color: var(--mist); flex: none; }
.sidenav nav a:hover { background: var(--raised); }
.sidenav nav a[aria-current="page"] { background: #eef2fe; color: var(--accent); font-weight: 500; }
.sidenav nav a[aria-current="page"] svg { color: var(--accent); }
.side-foot { margin-top: auto; }
.account-chip { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); cursor: pointer; font: inherit; text-align: left; color: inherit; }
.account-chip:hover { border-color: var(--line-strong); }
.account-chip .who { min-width: 0; flex: 1; }
.account-chip .who strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip .who span { display: block; font-size: 12px; color: var(--dim); }
.account-chip .chev { width: 16px; height: 16px; color: var(--dim); transform: rotate(180deg); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-transform: uppercase; position: relative; }
.avatar::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: var(--rainbow-conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.avatar-btn { border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer; }

/* popover menus (account + place) */
.menu-wrap { position: relative; }
.menu { position: absolute; z-index: 40; min-width: 250px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.menu[hidden] { display: none; }
.menu-wrap.up .menu { bottom: calc(100% + 8px); left: 0; right: 0; }
.topbar .menu { right: 0; top: calc(100% + 8px); }
.menu-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-who strong { display: block; font-size: 15px; }
.menu-who span { color: var(--dim); font-size: 13px; }
.menu a, .menu .menu-out, .menu .menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); font: 400 15px/1.3 var(--font); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none !important; box-shadow: none; min-height: 0; margin: 0; }
.menu a:hover, .menu .menu-out:hover, .menu .menu-item:hover { background: var(--raised); }
.menu svg { width: 18px; height: 18px; color: var(--mist); flex: none; }
.menu-label { padding: 8px 10px 4px; color: var(--dim); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.loc-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.loc-menu li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-weight: 500; }
.loc-menu li .meta { display: block; color: var(--dim); font-size: 12.5px; font-weight: 400; }
.loc-menu li.sel { background: #f4f6fe; }
.loc-menu li .okc { width: 18px; height: 18px; margin-left: auto; color: var(--ok); }
.loc-menu .menu-note { margin: 6px 10px 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }

.topbar { display: none; }
.main { padding: 28px 36px 40px; min-width: 0; }
.dash-head { margin-bottom: 18px; }
.dash-head h1 { font-size: 30px; margin-top: 8px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.side { display: grid; gap: 16px; }

.stage { position: relative; border-radius: 32px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(120% 90% at 50% 0%, #e6f0fb 0%, #f2f7fd 55%, #fbfdff 100%); padding: 40px 40px 34px; overflow: hidden; }
.stage .toggle { z-index: 1; max-width: 620px; margin-inline: auto; }
.stage .clouds { bottom: 120px; height: 150px; z-index: 0; }
.stage-foot { position: relative; z-index: 2; display: grid; justify-items: center; gap: 20px; margin-top: 18px; }
.meta { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 9px; font-size: 15px; color: var(--mist); min-height: 26px; }
.meta .timer { color: var(--ink); font-weight: 600; font-size: 17px; }
.meta .sep { color: #b3bccb; }
.meta.hint { color: var(--dim); font-size: 15px; }
.meta.busy { color: var(--accent); font-weight: 500; }
.loc { height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); font: 500 15px/1 var(--font); color: var(--ink-2); cursor: pointer; }
.loc:hover { border-color: var(--line-strong); background: #fff; }
.loc .flag { width: 20px; height: 14px; }
.loc .chev { width: 16px; height: 16px; color: var(--dim); }
.loc-wrap .menu { left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px); width: 300px; }

.dev-sub { color: var(--mist); font-size: 14px; margin: -4px 0 12px; }
.devlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.devlist li { display: flex; align-items: center; gap: 12px; }
.devlist .dicon { width: 36px; height: 36px; border-radius: 11px; }
.devlist .dicon svg { width: 19px; height: 19px; }
.devlist strong { display: block; font-size: 14.5px; font-weight: 500; }
.sec-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; }
.sec-link:hover { background: #fff; }
.sec-link > svg { width: 22px; height: 22px; color: var(--mist); flex: none; }
.sec-link strong { display: block; font-size: 14.5px; font-weight: 500; }
.sec-link span span { display: block; color: var(--dim); font-size: 13px; }
.sec-link .chev.r { width: 16px; height: 16px; margin-left: auto; transform: rotate(-90deg); }

/* subscription sheet (opened from the account menu) */
.btn.sm { min-height: 36px; padding: 7px 14px; font-size: 14px; box-shadow: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(27, 42, 74, 0.22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 100% - 32px);
  background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); padding: 22px 24px 20px; }
.sheet[hidden], .sheet-backdrop[hidden], .reminder[hidden] { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-head h2 { font-size: 21px; letter-spacing: -0.015em; }
.r-close { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--raised); color: var(--mist); display: grid; place-items: center; cursor: pointer; }
.r-close:hover { background: #e9eef6; color: var(--ink); }
.r-close svg { width: 16px; height: 16px; }
.plan { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line); }
.plan-logo { width: 44px; height: 44px; border-radius: 13px; background: #fff; display: grid; place-items: center; border: 1px solid var(--line); flex: none; }
.plan strong { display: block; font-size: 16px; }
.plan div span { color: var(--mist); font-size: 13.5px; }
.plan .badge { margin-left: auto; }
.sub-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.sub-facts div { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); }
.sub-facts dt { color: var(--dim); font-size: 12.5px; }
.sub-facts dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; font-size: 16px; }
.auto-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.auto-title { color: var(--ink); font-weight: 600; font-size: 16px; }
.auto-text { color: var(--mist); font-size: 13.5px; margin-top: 2px; }
.auto-state { color: var(--dim); font-size: 13px; margin: 8px 0 18px; }
.tgl { position: relative; flex: none; width: 50px; height: 30px; margin-top: 2px; border-radius: 999px; border: 0; background: #cfd8e5; cursor: pointer; transition: background 0.2s var(--ease); }
.tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(27, 42, 74, 0.25); transition: transform 0.2s var(--ease); }
.tgl[aria-checked="true"] { background: var(--ok); }
.tgl[aria-checked="true"]::after { transform: translateX(20px); }
.tgl:focus-visible { box-shadow: var(--ring); border-radius: 999px; }
.sheet .btn.block { min-height: 50px; }
.sheet-legal { text-align: center; color: var(--dim); font-size: 12.5px; margin-top: 12px; }
.sheet-legal a { color: var(--mist); }

/* renewal reminder: only when <= 3 days remain and auto-renew is off. Small, bottom corner, never blocks the bridge. */
.reminder { position: fixed; z-index: 50; right: 24px; bottom: 24px; width: min(450px, 100% - 32px); display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 12px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bf-rise 0.4s var(--ease); }
@keyframes bf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.r-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #8a5a00; background: linear-gradient(135deg, #fff5da, #ffeedd); }
.r-ico svg { width: 19px; height: 19px; }
.r-body { flex: 1; min-width: 0; }
.r-title { color: var(--ink); font-weight: 600; font-size: 15px; }
.r-text { color: var(--mist); font-size: 13.5px; margin-top: 1px; }
.r-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.r-later { flex: none; align-self: flex-start; border: 0; background: none; color: var(--mist); font: 500 14px/1 var(--font); padding: 6px 6px; border-radius: 8px; cursor: pointer; }
.sm-only { display: none; }
.r-later:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.reminder .r-close { width: 28px; height: 28px; background: none; }

/* ------------------------------------------------------------------ security page */
.sec-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 56px 0 8px; }
.sec-hero h1 { font-size: clamp(38px, 4.6vw, 56px); letter-spacing: -0.03em; margin: 16px 0 14px; }
.sec-hero .lede { max-width: 40ch; }
.sec-art { position: relative; display: flow-root; }
.sec-art .clouds { height: 70px; bottom: -22px; }
.sec-art .badge-sym { top: 69.6%; }
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 40px; }
.sec-cols { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; padding-top: 18px; align-items: start; }
.sec-cols h2 { font-size: 24px; margin-bottom: 8px; }
.sec-cols p { color: var(--ink-2); }
.sec-cols .btn { margin-top: 18px; }
.side-stack { display: grid; gap: 18px; }
.mini { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 22px 0 10px; }
.placeholder-box { margin: 0; }
.adv-wrap { padding-top: 18px; }
.adv { background: #fff; border: 1px solid var(--line); border-radius: var(--r-hero); box-shadow: var(--shadow-sm); }
.adv summary { padding: 22px 28px; }
.adv summary > span { display: grid; gap: 6px; }
.adv summary strong { font-size: 20px; letter-spacing: -0.01em; }
.adv-body { padding: 0 28px 26px; }
.specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--dim); font-size: 14px; }
.spec dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: 1fr; }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side .sec-link { grid-column: 1 / -1; }
}
@media (max-width: 1040px) { .nav .link { display: none; } }
@media (max-width: 960px) {
  .how, .faq, .sec-hero, .sec-cols { grid-template-columns: 1fr; gap: 28px; }
  .cols-3, .sec-grid { grid-template-columns: 1fr; }
  .plats { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .auth { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .auth-aside { text-align: center; }
  .auth-art { max-width: 340px; margin-inline: auto; }
  .auth-aside .lede { display: none; }
  .auth-aside h2 { font-size: 28px; margin: 12px 0 0; }
  .auth-aside h2 br { display: none; }
  .auth-card { max-width: 500px; margin-inline: auto; width: 100%; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidenav { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 10px 20px;
    background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .main { padding: 18px 20px 36px; }
}
@media (max-width: 720px) {
  .site-header .wrap { min-height: 62px; }
  .nav .btn.quiet { display: none; }
  .nav .btn { padding: 8px 16px; }
  .section { padding-top: 64px; }
  .hero { --hw: 128vw; --ov: -6px; }
  .hero-arch { margin-bottom: calc(var(--hw) * -0.84 + var(--hw) * 0.578 + 84px); }
  .hero-clouds { height: 92px !important; }
  .hero-copy { padding-top: 44px; }
  .hero-arch .badge-sym { width: 62px; height: 62px; } .hero-arch .badge-sym .sg { width: 32px; height: 32px; }
  .hero-copy .eyebrow { display: none; }
  .hero-copy::before { top: 40%; width: 120%; height: 80%; }
  .hero h1 { font-size: 42px; }
  .hero .lede { font-size: 17px; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 100%; }
  .demo-card { padding: 28px 12px 66px; }
  .plats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .card.lg { padding: 24px 20px; }
  .stage { padding: 26px 8px 24px; border-radius: 26px; }
  .stage .clouds { bottom: 110px; }
  .badge-sym { width: 62px; height: 62px; }
  .badge-sym .sg { width: 32px; height: 32px; } .badge-sym .sg-off { width: 29px; height: 29px; }
  .ripple.r1 { width: 88px; height: 88px; } .ripple.r2 { width: 116px; height: 116px; }
  .side { grid-template-columns: 1fr; }
  .reminder { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .lg-only { display: none; } .sm-only { display: inline; }
  .reminder .r-ico { display: none; }
  .reminder { padding: 14px 10px 14px 16px; }
  .sheet { top: auto; bottom: 0; transform: translateX(-50%); width: 100%; border-radius: 26px 26px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .specs { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 130px 1fr; }
  .adv summary { padding: 18px 20px; } .adv-body { padding: 0 20px 20px; }
  .two { grid-template-columns: 1fr; gap: 0; }
  .foot-grid { gap: 24px; }
}
@media (max-width: 400px) { .brand .lockup { height: 30px; } }
@media (prefers-reduced-motion: reduce) {
  /* static fallback: the rainbow keeps its colours (on) or stays grey (off), nothing moves */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rb-live { display: none; }
  .rb-static { display: block; }
  [data-state="opening"] .rb-static { filter: none; opacity: 1; }
}

/* ---------------------------------------------------------------- v8 raster hero «Fiberbroen» + «Nevralnettet» (animated; gen/rbridge_web.py)
   A box (aspect --rb-ar) shows the landscape composition assets/bifrost-hero-wide.* (2120x840: the 1280x720 bridge source at x 420..1700,
   sky + clouds extended sideways, ends fading into the clouds, 120 mirrored cloud rows below). --rb-aw = width of the bridge source in %
   of the box (>100 crops the sides so the deck spans the box), --rb-top = offset of the image in % of the box height.
   --by = the clear sky just above the deck centre (shield / logo tile, source y 338 = .2641 x source width).
   The deck's neural network is a <canvas class="hi-neural"> drawn by assets/neural.js (rAF, paused when hidden, static for reduced motion).
   One 8 s loop (--hero); every period divides it, so ?t= captures and dashboard-alive.mp4 loop seamlessly.
   GPU-friendly: only transform / opacity / stroke-dashoffset animate; one mix-blend-mode layer. */
:root { --hero: 8s; --rb-ar: 1.6; --rb-aw: 120; --rb-top: -12;
  --flow: linear-gradient(90deg, #f77fae 0%, #ff9f6e 5%, #f8c84e 12.5%, #5ccf94 21%, #46c3e6 27.5%, #6f8ff8 34%, #9a7bf4 41%, #c77fd8 46%, #f77fae 50%,
    #ff9f6e 55%, #f8c84e 62.5%, #5ccf94 71%, #46c3e6 77.5%, #6f8ff8 84%, #9a7bf4 91%, #c77fd8 96%, #f77fae 100%); }
.toggle, .hero-arch, .auth-art, .sec-art { --by: calc((var(--rb-top) + .2641 * var(--rb-aw) * var(--rb-ar)) * 1%); }
.rb-hero { position: relative; width: 100%; aspect-ratio: var(--rb-ar); margin: 0; overflow: hidden;
  transition: filter .7s var(--ease), opacity .7s var(--ease), transform .15s var(--ease);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0, #000 13%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0, #000 13%, #000 78%, transparent 100%);
  mask-composite: intersect; }
.rb-stage { position: absolute; top: calc(var(--rb-top) * 1%); left: calc(50% - var(--rb-aw) * .828125%); width: calc(var(--rb-aw) * 1.65625%); aspect-ratio: 2120 / 840; }
.rb-stage picture { display: contents; }
.rb-stage > img, .rb-stage picture img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.rb-cloud { will-change: transform; }
.rb-box { position: absolute; top: 0; height: 85.7143%; left: 19.8113%; width: 60.3774%; }   /* = the 1280x720 source region */
.rb-box .hi-neural { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
[data-state="closed"] .rb-box .hi-neural { opacity: .8; }
.rb-flow { position: absolute; inset: 0; overflow: hidden; opacity: 0; mix-blend-mode: color; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.rb-flow i { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: var(--flow); transform: translate3d(-50%, 0, 0); will-change: transform; }
.rb-pulse { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; fill: none; stroke-linecap: round;
  -webkit-mask: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%); mask: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%); }
.rb-pulse .g { stroke: #fff; stroke-opacity: .34; stroke-width: 7.5; stroke-dasharray: 7 93; stroke-dashoffset: 100; }
.rb-pulse .c { stroke: #fff; stroke-opacity: .9; stroke-width: 2.1; stroke-dasharray: 2.6 97.4; stroke-dashoffset: 97.8; }
.rb-dots i { position: absolute; width: calc(var(--s) * 3.4%); aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.6); will-change: transform, opacity;
  background: radial-gradient(circle, #fff 0 14%, rgba(255,255,255,.9) 22%, rgba(255,248,236,.42) 42%, rgba(255,255,255,0) 70%); }
.rb-dots i svg { position: absolute; inset: -38%; width: 176%; height: 176%; fill: #fff; opacity: .9; }
@keyframes bf-flow { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes bf-drift { 0%, 100% { transform: translate3d(-.6%, 0, 0); } 50% { transform: translate3d(.6%, -.3%, 0); } }
@keyframes bf-pulse-g { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bf-pulse-c { from { stroke-dashoffset: 97.8; } to { stroke-dashoffset: -2.2; } }
@keyframes bf-dot { 0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.55) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(25deg); } }
@keyframes bf-heropulse { 0%, 100% { filter: grayscale(.9) brightness(1.06); opacity: .6; } 50% { filter: grayscale(0) saturate(1.05); opacity: .95; } }
/* CONNECTED */
[data-state="open"] .rb-hero { filter: saturate(1.12) contrast(1.03); }
[data-state="open"] .rb-cloud { animation: bf-drift var(--hero) ease-in-out infinite; }
[data-state="open"] .rb-flow { opacity: .86; }
[data-state="open"] .rb-flow i { animation: bf-flow var(--hero) linear infinite; }
[data-state="open"] .rb-pulse { opacity: .85; }
[data-state="open"] .rb-pulse .g { animation: bf-pulse-g calc(var(--hero) / 2) linear infinite; animation-delay: calc(var(--i) * -1.37s); }
[data-state="open"] .rb-pulse .c { animation: bf-pulse-c calc(var(--hero) / 2) linear infinite; animation-delay: calc(var(--i) * -1.37s); }
[data-state="open"] .rb-pulse .rev path { animation-direction: reverse; }
[data-state="open"] .rb-dots i { animation: bf-dot var(--tw) ease-in-out infinite; animation-delay: calc(var(--i) * -.53s); }
/* DISCONNECTED: grey, desaturated, still */
[data-state="closed"] .rb-hero { filter: grayscale(1) brightness(1.06) contrast(.9); opacity: .55; }
/* CONNECTING: slow grey <-> colour pulse */
[data-state="opening"] .rb-hero { animation: bf-heropulse calc(var(--hero) / 3) ease-in-out infinite; }
.toggle:hover .rb-hero { transform: translateY(-2px); }
.toggle:active .rb-hero { transform: scale(.99); }
@media (prefers-reduced-motion: reduce) {
  [data-state="open"] .rb-flow { opacity: .6; } [data-state="open"] .rb-pulse { display: none; }
  [data-state="open"] .rb-dots i { opacity: .75; transform: translate(-50%, -50%) scale(.9); }
}
/* the image carries its own clouds: the old SVG cloud strips are not needed next to it */
.stage .clouds, .demo-card .clouds, .auth-art .clouds, .sec-art .clouds, .hero-clouds { display: none; }
/* ---- per context */
.stage .toggle { --rb-ar: 1.36; --rb-aw: 150; --rb-top: -14; }
.demo-card .toggle { --rb-ar: 1.35; --rb-aw: 140; --rb-top: -10; }
.auth-art { --rb-ar: 1.2; --rb-aw: 150; --rb-top: -8; }
.auth-art .logo-tile, .sec-art .badge-sym, .hero-arch .badge-sym { top: var(--by); }
.sec-art { --rb-ar: 1.35; --rb-aw: 140; --rb-top: -10; }
/* landing hero: full-bleed landscape, arc under the buttons, clouds melt into the page */
.hero { --rb-ar: 2.25; --rb-aw: 100; --rb-top: -30; }
.hero-arch { width: 100%; margin: -16px 0 0; }
.hero-arch .rb-hero { -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 76%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 720px) {
  .hero { --rb-ar: 1.15; --rb-aw: 165; --rb-top: -10; }
  .hero-arch { margin: -10px 0 0; }
  .stage .toggle { --rb-ar: 1.1; --rb-aw: 170; --rb-top: -10; }
  .demo-card .toggle { --rb-ar: 1.1; --rb-aw: 170; --rb-top: -10; }
}

/* ---- v8 error states on the dashboard (data-err on the stage; data-state stays "closed" -> grey bridge, no signals) */
.when-failed, .when-offline { display: none !important; }
[data-err="failed"] .when-failed, [data-err="offline"] .when-offline { display: flex !important; }
[data-err] .when-off { display: none !important; }
.errc { margin: 0 auto; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; border-radius: 16px;
  background: rgba(255,255,255,.9); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(27,42,74,.45); font-size: 14px; line-height: 1.4; color: var(--mist); }
.errc strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.errc .eic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #eef1f6; color: var(--mist); }
.errc .eic.bad { background: #fdecef; color: #d9455a; }
.errc .eic .ico { width: 21px; height: 21px; }
.badge-sym .sg-err { color: #d9455a; opacity: 0; width: 36px; height: 36px; }
[data-err="failed"] .badge-sym { background: #fff; box-shadow: 0 0 0 7px rgba(217,69,90,.10), 0 10px 22px -8px rgba(217,69,90,.45); }
[data-err="failed"] .badge-sym .sg-err { opacity: 1; } [data-err="failed"] .badge-sym .sg-off { opacity: 0; }
[data-err] .ripple { display: none; }
[data-err="offline"] .toggle { cursor: default; } [data-err="offline"] .rb-hero { opacity: .38; }

/* ---- v3 responsive bridge (bro-neural-v3, variant C): edge to edge (landscape W x 1.12, portrait W x 1.45, sides cropped),
   deck kept at its previous height in the hero box, no side fade; clouds drift sideways only (stay below the deck);
   the shield's vertical position is set by assets/neural.js (bridge top - 14 px - radius). */
.hero { --rb-aw: 112; --rb-top: -37.2; }
.hero-arch .rb-hero { -webkit-mask: linear-gradient(180deg, transparent 0, #000 14%, #000 76%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 14%, #000 76%, transparent 100%); }
@keyframes bf-drift3 { 0%, 100% { transform: translate3d(-.6%, 0, 0); } 50% { transform: translate3d(.6%, 0, 0); } }
[data-state="open"] .rb-cloud { animation-name: bf-drift3; }
@media (max-width: 720px) { .hero { --rb-aw: 145; --rb-top: -4; } }
@media (prefers-reduced-motion: reduce) { [data-state="open"] .rb-cloud { animation: none; } }