/* Remura landing — site stylesheet.
   Sections: 1) tokens + base (from design shared.css + DS bundle.css)
             2) motion (shared.css, verbatim)  3) DS components (bundle.css subset)
             4) page layout (replaces the design's inline styles)
             5) value-path + sent-state motion (design <helmet>)  6) responsive  7) reduced motion */

/* ===================================================================
   1) Tokens + base
   =================================================================== */
:root {
  --surface:#F5F7FA; --surface-raised:#FFFFFF; --surface-tint:#F2F6FD; --surface-inverse:#071739;
  --line:#DDE2EB; --line-control:#7D879C;
  --ink:#0F1A2E; --ink-heading:#0C2458; --ink-muted:#5B6680; --ink-inverse:#FFFFFF; --ink-inverse-muted:#8FB0EE;
  --brand:#0C2458; --brand-hover:#16367A; --on-brand:#FFFFFF; --link:#1F4FB0;
  --accent:#12948B; --accent-text:#0F7F78; --focus:#3D7BF0;
  --success:#1E7F5C; --success-soft:#E6F3EE; --warning:#9A6212; --warning-soft:#FBF1E2; --danger:#B42318; --danger-soft:#FBEAE8;
  --navy-900:#071739; --navy-800:#0C2458; --navy-700:#16367A; --blue-600:#1F4FB0; --blue-500:#3D7BF0; --blue-400:#6FA0F5; --blue-300:#8FB0EE; --blue-100:#DCE6F8; --blue-50:#F2F6FD;
  --ink-900:#0F1A2E; --slate-500:#5B6680; --mist-200:#DDE2EB; --cloud-50:#F5F7FA; --white:#FFFFFF;
  --tide-500:#2BB3A8; --tide-600:#12948B; --tide-700:#0F7F78;
  --font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-9:48px; --space-10:64px; --space-11:72px;
  --radius-xs:3px; --radius-sm:8px; --radius-md:10px; --radius-lg:13px; --radius-xl:18px; --radius-icon:24px; --radius-full:999px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --gutter:clamp(16px, 3vw, 32px);
}
.rm-dark {
  --surface:#071739; --surface-raised:#0C2458; --surface-tint:#102C66; --surface-inverse:#0C2458;
  --line:#1E3D7F; --line-control:#5C7FC9;
  --ink:#FFFFFF; --ink-heading:#FFFFFF; --ink-muted:#8FB0EE;
  --brand:#FFFFFF; --brand-hover:#DCE6F8; --on-brand:#0C2458; --link:#6FA0F5;
  --accent:#2BB3A8; --accent-text:#2BB3A8;
  --success:#5CC8A0; --success-soft:#123A3A; --warning:#E8B04B; --warning-soft:#3A2E12; --danger:#F2867A; --danger-soft:#3E1A1F;
}
html { scroll-behavior: smooth; }
body {
  margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.55;
  background:#F5F7FA; color:#0F1A2E; min-height:100vh; padding-bottom:32px;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3 { font-weight:600; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--ink-heading); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
/* no double-tap-to-zoom delay/zoom on controls (iOS zooms the page on two quick taps of prev/next) */
a, button, [role="tab"], summary { touch-action:manipulation; }
[hidden] { display:none !important; }
img { max-width:100%; }
.mono { font-family:var(--font-mono); }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; line-height:1.3; }
.dot { display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--accent); }
.skip-link { position:absolute; left:16px; top:-100px; z-index:100; padding:10px 16px; border-radius:var(--radius-md); background:var(--brand); color:var(--on-brand); font-weight:500; font-size:14px; }
.skip-link:focus { top:16px; color:var(--on-brand); }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Link styled as button (for real navigation) */
.btn { display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border-radius:var(--radius-md); font-weight:500; font-size:15px; border:1px solid transparent; transition:background-color 120ms ease, border-color 120ms ease; white-space:nowrap; box-sizing:border-box; }
.btn-primary { background:var(--brand); color:var(--on-brand); }
.btn-primary:hover { background:var(--brand-hover); color:var(--on-brand); }
.btn-secondary { background:transparent; color:var(--ink-heading); border-color:var(--line-control); }
.btn-secondary:hover { background:var(--surface-tint); color:var(--ink-heading); }
.btn .arr { transition:transform 200ms var(--ease); }
.btn:hover .arr { transform:translateX(4px); }
button.btn { cursor:pointer; font-family:inherit; }
button.btn:disabled { cursor:progress; }

/* ===================================================================
   2) Motion — shared.css, verbatim
   =================================================================== */
/* ---------- Entrance + scroll reveal ---------- */
@keyframes rm-rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes rm-fade { from { opacity:0; } to { opacity:1; } }
@keyframes rm-word { from { opacity:0; transform:translateY(0.5em); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.in { animation:rm-rise 0.9s var(--ease) both; }
.w { display:inline-block; animation:rm-word 0.9s var(--ease) both; }
.d1 { animation-delay:0.06s; } .d2 { animation-delay:0.14s; } .d3 { animation-delay:0.22s; } .d4 { animation-delay:0.30s; }
.d5 { animation-delay:0.38s; } .d6 { animation-delay:0.46s; } .d7 { animation-delay:0.54s; } .d8 { animation-delay:0.62s; }
.d9 { animation-delay:0.74s; } .d10 { animation-delay:0.9s; } .d11 { animation-delay:1.05s; }
@supports (animation-timeline: view()) {
  .rv { animation:rm-rise linear both; animation-timeline:view(); animation-range:entry 0% cover 25%; }
  .rv-fade { animation:rm-fade linear both; animation-timeline:view(); animation-range:entry 0% cover 30%; }
}

/* Card hover: border to accent, quiet lift.
   Uses the independent `translate` property so the lift still works on
   elements whose `transform` is owned by the .rv scroll animation. */
.lift { transition:translate 250ms var(--ease), border-color 250ms ease; }
@media (hover: hover) { .lift:hover { translate:0 -4px; border-color:var(--accent) !important; } } /* touch screens would keep the hover stuck after a tap */

/* ---------- Masking ---------- */
@keyframes rm-clear { 0%,38% { opacity:1; transform:none; } 46%,92% { opacity:0; transform:translateY(-6px); } 100% { opacity:1; transform:none; } }
@keyframes rm-mask  { 0%,38% { opacity:0; transform:translateY(6px); } 46%,92% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(6px); } }
.swap { display:inline-grid; }
.swap > * { grid-area:1 / 1; }
.swap .clear { opacity:0; animation:rm-clear 6s var(--ease) infinite; }
.swap .masked { animation:rm-mask 6s var(--ease) infinite; }
.swap.slow .clear, .swap.slow .masked { animation-duration:9s; }
.mask-dots { color:var(--accent); letter-spacing:0.04em; }

@keyframes rm-blink { 0%,100% { opacity:0.25; } 50% { opacity:1; } }
.blink3 > span { animation:rm-blink 1.4s ease-in-out infinite; }
.blink3 > span:nth-child(2) { animation-delay:0.2s; }
.blink3 > span:nth-child(3) { animation-delay:0.4s; }
@keyframes rm-cursor { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.cursor { display:inline-block; width:9px; height:1.1em; vertical-align:-0.2em; background:var(--accent); animation:rm-cursor 1s steps(1) infinite; }

/* ---------- 5-step sequencer (10s cycle, 2s per step) ---------- */
@keyframes rm-step { 0% { border-color:var(--line); background:var(--surface-raised); } 3%,19% { border-color:var(--accent); background:var(--surface-tint); } 23%,100% { border-color:var(--line); background:var(--surface-raised); } }
@keyframes rm-steptext { 0% { opacity:0.45; } 3%,19% { opacity:1; } 23%,100% { opacity:0.45; } }
@keyframes rm-stepdot { 0% { transform:scale(1); background:var(--line-control); } 3%,19% { transform:scale(1.5); background:var(--accent); } 23%,100% { transform:scale(1); background:var(--line-control); } }
.stp { animation:rm-step 10s linear infinite; }
.stp-t { animation:rm-steptext 10s linear infinite; }
.stp-d { animation:rm-stepdot 10s linear infinite; }
.s1 { animation-delay:0s; } .s2 { animation-delay:2s; } .s3 { animation-delay:4s; } .s4 { animation-delay:6s; } .s5 { animation-delay:8s; }
@keyframes rm-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.fill { transform-origin:left center; animation:rm-fill 10s linear infinite; }
@keyframes rm-fill-y { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.fill-y { transform-origin:center top; animation:rm-fill-y 10s linear infinite; }
/* panel shown only during its step */
@keyframes rm-panel { 0% { opacity:0; visibility:hidden; } 2%,19% { opacity:1; visibility:visible; } 21%,100% { opacity:0; visibility:hidden; } }
.pnl { animation:rm-panel 10s linear infinite; }

/* ---------- Log rows (8s cycle) ---------- */
@keyframes rm-log { 0% { opacity:0; transform:translateY(10px); } 5%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
.log { opacity:0; animation:rm-log 8s var(--ease) infinite; }
.l1 { animation-delay:0s; } .l2 { animation-delay:0.6s; } .l3 { animation-delay:1.2s; } .l4 { animation-delay:1.8s; } .l5 { animation-delay:2.4s; } .l6 { animation-delay:3.0s; } .l7 { animation-delay:3.6s; }

/* ---------- Atmosphere (heroes only) ---------- */
@keyframes rm-drift { 0% { background-position:0% 0%, 100% 100%, 0 0; } 50% { background-position:30% 20%, 70% 80%, 0 0; } 100% { background-position:0% 0%, 100% 100%, 0 0; } }
.atmo-navy {
  background-color:#071739;
  background-image:
    radial-gradient(60% 70% at 20% 10%, rgba(31,79,176,0.45), transparent 70%),
    radial-gradient(50% 60% at 85% 90%, rgba(43,179,168,0.16), transparent 70%),
    linear-gradient(180deg, #0C2458 0%, #071739 100%);
  background-size:160% 160%, 160% 160%, 100% 100%;
  animation:rm-drift 18s ease-in-out infinite;
}
.atmo-dots { background-image:radial-gradient(rgba(43,179,168,0.22) 1.2px, transparent 1.4px); background-size:28px 28px; }
.atmo-grid { background-image:linear-gradient(rgba(143,176,238,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,238,0.09) 1px, transparent 1px); background-size:56px 56px; }
.atmo-grid-light { background-image:linear-gradient(rgba(12,36,88,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,36,88,0.05) 1px, transparent 1px); background-size:56px 56px; }
@keyframes rm-scan { 0% { transform:translateY(-100%); } 100% { transform:translateY(100%); } }
.scan { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.scan::after { content:""; position:absolute; left:0; right:0; height:40%; background:linear-gradient(180deg, transparent, rgba(43,179,168,0.07), transparent); animation:rm-scan 6s linear infinite; }
@keyframes rm-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.float { animation:rm-float 6s ease-in-out infinite; }
@keyframes rm-pulse { 0% { box-shadow:0 0 0 0 rgba(43,179,168,0.5); } 70% { box-shadow:0 0 0 10px rgba(43,179,168,0); } 100% { box-shadow:0 0 0 0 rgba(43,179,168,0); } }
.pulse { animation:rm-pulse 2s ease-out infinite; }
@keyframes rm-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.marquee { display:flex; width:max-content; animation:rm-marquee 40s linear infinite; }

/* ===================================================================
   3) Design-system components (subset of ds/remura/components/bundle.css)
   =================================================================== */
.rm-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:where(.rm-input):focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* Logo + mark: fills set by tone class (geometry lives in the page's SVG sprite) */
.rm-logo, .rm-mark { display:block; height:auto; }
.tone-accent { --logo-ink:var(--navy-800); --logo-dot:var(--tide-600); }
.tone-reversed { --logo-ink:var(--white); --logo-dot:var(--tide-500); }
.tone-navy { --logo-ink:var(--navy-800); --logo-dot:var(--navy-800); }
.lg-ink { fill:var(--logo-ink, var(--navy-800)); }
.lg-dot { fill:var(--logo-dot, var(--navy-800)); }

/* Status badge: text + tint + border, the word always carries the meaning */
.rm-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; line-height:1.2; border:1px solid currentColor; white-space:nowrap; }
.rm-badge-settled { color:var(--success); background:var(--success-soft); }
.rm-badge-pending { color:var(--warning); background:var(--warning-soft); }
.rm-badge-failed { color:var(--danger); background:var(--danger-soft); }
.rm-badge-info { color:var(--link); background:var(--surface-tint); }
.rm-badge-neutral { color:var(--ink-muted); background:var(--surface); border-color:var(--line); }

/* Text field */
.rm-field { display:flex; flex-direction:column; gap:6px; }
.rm-field-label { font-size:14px; font-weight:600; color:var(--ink-heading); }
.rm-input { height:44px; box-sizing:border-box; padding:0 14px; font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface-raised); border:1px solid var(--line-control); border-radius:var(--radius-md); }
.rm-input::placeholder { color:var(--ink-muted); }
.rm-field-help { font-size:13px; line-height:1.5; color:var(--ink-muted); }
.rm-field-error .rm-input { border-color:var(--danger); border-width:2px; padding:0 13px; }
.rm-field-error .rm-field-help { color:var(--danger); }

/* ===================================================================
   4) Page layout
   =================================================================== */
.container { max-width:1180px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
main [id], #top, #contact { scroll-margin-top:104px; }

/* utility colours used on eyebrows/labels */
.c-tide { color:#2BB3A8; }
.c-muted { color:#5B6680; }
.c-teal { color:#0F7F78; }
.c-mist { color:#8FB0EE; }
.rel { position:relative; }
.layer { position:absolute; inset:0; }
.o25 { opacity:0.25; } .o30 { opacity:0.3; } .o35 { opacity:0.35; }
.dot-5 { width:5px; height:5px; } .dot-6 { width:6px; height:6px; } .dot-8 { width:8px; height:8px; } .dot-12 { width:12px; height:12px; }
.dots { display:inline-flex; gap:4px; }
.dots-sm { display:inline-flex; gap:3px; }
.pulse-dot { width:7px; height:7px; border-radius:999px; background:#2BB3A8; flex-shrink:0; }
.pulse-dot-deep { background:#12948B; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Nav: floating bar ---------- */
.nav-wrap { position:sticky; top:0; z-index:40; padding:16px var(--gutter) 0; }
.nav {
  max-width:1180px; margin:0 auto; min-height:64px; padding:0 12px 0 24px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:rgba(255,255,255,0.86); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
  border:1px solid #DDE2EB; border-radius:13px; box-shadow:0 8px 24px rgba(12,36,88,0.08);
}
.nav-home { display:block; padding:8px 0; }
.logo-nav { width:118px; }
.nav-menu { flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:0; }
.nav-links { display:flex; gap:28px; margin:0 auto; padding:0; list-style:none; font-size:14px; font-weight:500; flex-wrap:wrap; }
.nav-links a { color:#0F1A2E; }
.nav-links a:hover { color:var(--link); }
.nav-cta { height:42px; font-size:14px; }
.nav-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nav-toggle {
  display:none; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 12px;
  border:1px solid #DDE2EB; border-radius:10px; background:#FFFFFF; color:#0C2458;
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
}
.nav-toggle svg { display:block; }
.nav-toggle .ic-close { display:none; }
.nav-toggle[aria-expanded="true"] .ic-open { display:none; }
.nav-toggle[aria-expanded="true"] .ic-close { display:block; }

/* ---------- Hero ---------- */
.hero { padding-top:clamp(64px, 8vw, 104px); padding-bottom:48px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; }
.status-pill { display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border:1px solid #DDE2EB; border-radius:8px; background:#FFFFFF; font-size:13px; font-weight:600; color:#0C2458; flex-wrap:wrap; justify-content:center; }
.status-pill-live { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid #1E7F5C; border-radius:8px; background:#E6F3EE; color:#1E7F5C; font-size:12px; }
.hero-title { margin:0; font-size:clamp(40px, 5vw, 64px); line-height:1.04; letter-spacing:-0.02em; color:#0C2458; max-width:920px; }
.hero-sub { display:block; margin-top:0.4em; font-size:clamp(20px, 2.7vw, 38px); line-height:1.2; letter-spacing:-0.015em; }
.hero-sub .muted { color:#5B6680; }
.hero-sub .teal { color:#0F7F78; }
.hero-sub .phrase { white-space:nowrap; } /* break between the two sentences, never mid-phrase */
.hero-lead { margin:0; font-size:18px; line-height:1.6; max-width:660px; }

/* ---------- Bento ---------- */
.bento { display:grid; gap:16px; }
.bento-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.bento-platform { grid-auto-rows:minmax(220px, auto); }
.bento-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.span-4 { grid-column:span 4; }
.row-2 { grid-row:span 2; }

.tile { background:#FFFFFF; border:1px solid #DDE2EB; border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:16px; }
.tile-between { justify-content:space-between; }
.tile-note { margin:0; font-size:14px; color:#5B6680; }
.tile-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* A: flow tile */
.tile-flow { position:relative; overflow:hidden; border-radius:18px; padding:32px; color:#FFFFFF; display:flex; flex-direction:column; justify-content:space-between; gap:28px; }
.tile-flow-intro { display:flex; flex-direction:column; gap:10px; position:relative; }
.tile-flow-title { margin:0; font-size:28px; line-height:1.15; letter-spacing:-0.02em; }

/* B: mask swap */
.mask-amount { font-size:28px; font-weight:500; color:#0C2458; }
.mask-unit { font-size:15px; color:#5B6680; }

/* C: auditor meter */
.meter-block { display:flex; flex-direction:column; gap:8px; }
.meter-head { display:flex; justify-content:space-between; font-size:13px; }
.meter-label { font-weight:600; color:#0C2458; }
.meter { height:6px; background:#F2F6FD; border-radius:999px; overflow:hidden; }
.meter .fill { height:6px; background:#0C2458; animation-direction:reverse; }

/* D: batch */
.batch-id { font-size:13px; color:#1F4FB0; }
.log-list { display:flex; flex-direction:column; font-size:14px; }
.log-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #DDE2EB; gap:12px; }
.log-row:last-child { border-bottom:0; }

/* E: compliance */
.tile-tint { background:#F2F6FD; border-color:#DCE6F8; padding:24px; gap:14px; }
.cert-list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.cert { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#FFFFFF; border:1px solid #DDE2EB; border-radius:13px; }
.cert-badge { width:40px; height:40px; flex-shrink:0; display:block; }
.cert-text { display:flex; flex-direction:column; min-width:0; flex-grow:1; }
.cert-name { font-size:14px; font-weight:600; color:#0C2458; }
.cert-desc { font-size:12px; color:#5B6680; }
.cert-check { flex-shrink:0; }
.tile-tint .tile-note { font-size:13px; }

/* F: API */
.tile-api { position:relative; overflow:hidden; background:#071739; border-color:#1E3D7F; padding:24px; color:#FFFFFF; }
.tile-api-head { position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.api-tag { font-size:11px; padding:3px 8px; border:1px solid #1E3D7F; border-radius:8px; color:#8FB0EE; }
.code { position:relative; border:1px solid #1E3D7F; border-radius:13px; background:#050F28; overflow:hidden; font-size:12px; line-height:1.7; }
.code-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #1E3D7F; }
.code-method { padding:1px 7px; border-radius:6px; background:#2BB3A8; color:#071739; font-weight:500; font-size:11px; }
.code-path, .code-line { color:#DCE6F8; }
.code-body { padding:10px 12px; display:flex; flex-direction:column; }
.code-key { color:#6FA0F5; }
.code-line-muted { color:#8FB0EE; }
.code-cursor { width:6px; margin-left:4px; }
.code-res { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-top:1px dashed #1E3D7F; background:rgba(43,179,168,0.06); }
.code-res-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.code-ok { color:#5CC8A0; }
.tile-api-note { position:relative; margin:0; font-size:13px; line-height:1.5; color:#8FB0EE; }

/* H: built for + marquee */
.tile-built { padding:28px 0; justify-content:space-between; gap:20px; overflow:hidden; }
.built-intro { padding:0 28px; display:flex; flex-direction:column; gap:8px; }
.built-title { margin:0; font-size:20px; line-height:1.25; color:#0C2458; }
.built-lead { margin:0; font-size:14px; line-height:1.5; color:#5B6680; max-width:460px; }
.flow { padding:0 28px; flex-grow:1; display:flex; align-items:center; }
.flow-grid { width:100%; display:grid; grid-template-columns:minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items:start; row-gap:8px; }
.flow-node { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.flow-icon { width:44px; height:44px; box-sizing:border-box; border-radius:13px; background:#F5F7FA; border:1px solid #DDE2EB; display:flex; align-items:center; justify-content:center; }
.flow-icon-brand { background:#0C2458; border:0; }
.flow-icon .rm-mark { width:16px; }
.flow-name { font-size:13px; font-weight:600; color:#0C2458; line-height:1.3; }
.flow-val { font-size:11px; color:#5B6680; }
.flow-link { height:44px; display:flex; align-items:center; }
.flow-dash { flex-grow:1; border-top:2px dashed #DDE2EB; }
.flow-arrow { margin-left:-2px; }
.marquee-wrap { overflow:hidden; border-top:1px solid #DDE2EB; padding-top:20px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-built { gap:20px; font-size:16px; font-weight:600; color:#0C2458; white-space:nowrap; margin:0; padding:0; list-style:none; }
.marquee-item { display:inline-flex; align-items:center; gap:20px; }

/* ---------- Inside the console (tabs + cropped tablet) ---------- */
.section-console { padding-top:clamp(64px, 8vw, 104px); }
.cs-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:center; background:#F2F6FD; border:1px solid #DCE6F8; border-radius:18px; overflow:hidden; }
.cs-copy { padding:clamp(28px, 4vw, 48px); display:flex; flex-direction:column; gap:24px; min-width:0; }
.cs-intro { display:flex; flex-direction:column; gap:12px; }
.cs-title { margin:0; font-size:clamp(30px, 3.4vw, 44px); line-height:1.1; letter-spacing:-0.02em; color:#0C2458; }
.cs-lead { margin:0; font-size:18px; line-height:1.6; color:#5B6680; }
.cs-tabs { display:flex; flex-direction:column; gap:10px; }
.cs-tab { display:flex; gap:16px; align-items:flex-start; width:100%; box-sizing:border-box; padding:18px 20px; border-radius:13px; font:inherit; color:inherit; text-align:left; cursor:pointer; background:transparent; border:1px solid #DCE6F8; transition:background-color 120ms ease, border-color 120ms ease; }
.cs-tab:hover { border-color:#7D879C; }
.cs-tab[aria-selected="true"] { background:#FFFFFF; border-color:#0C2458; }
.cs-num { font-size:13px; padding-top:3px; color:#5B6680; }
.cs-tab[aria-selected="true"] .cs-num { color:#0F7F78; }
.cs-tab-text { display:flex; flex-direction:column; gap:4px; text-align:left; }
.cs-tab-title { font-size:17px; font-weight:600; color:#0C2458; }
.cs-tab-desc { font-size:14px; line-height:1.5; color:#5B6680; }
.cs-controls { display:flex; align-items:center; gap:12px; }
html:not(.js) .cs-controls { display:none; }
.cs-btn { width:44px; height:44px; padding:0; border-radius:10px; border:1px solid #7D879C; background:#FFFFFF; color:#0C2458; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cs-btn:hover { background:#F2F6FD; }
.cs-next { border-color:#0C2458; background:#0C2458; color:#FFFFFF; }
.cs-next:hover { background:#16367A; border-color:#16367A; }
.cs-count { font-size:13px; color:#5B6680; margin-left:4px; }
.cs-stage { padding:clamp(28px, 4vw, 48px) 0; min-width:0; }
.cs-device { position:relative; width:155%; }
.cs-hw { position:absolute; }
.cs-power { top:-3px; left:9%; width:54px; height:4px; border-radius:3px 3px 0 0; background:linear-gradient(180deg, #9AA1AD, #5E6573); }
.cs-vol { left:-3px; top:18%; width:4px; height:44px; border-radius:3px 0 0 3px; background:linear-gradient(90deg, #9AA1AD, #5E6573); }
.cs-vol-2 { top:calc(18% + 54px); }
.cs-body { position:relative; background:#0B0E14; border-radius:32px; padding:18px; box-shadow:0 0 0 1.5px #3A404C, 0 0 0 3px #A7AEBA, 0 0 0 4px #6B7280, 0 30px 60px rgba(12,36,88,0.20), 0 8px 18px rgba(12,36,88,0.10); }
.cs-cam { position:absolute; top:6px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:999px; background:radial-gradient(circle at 35% 35%, #3B4A6B 0%, #11151D 55%); box-shadow:0 0 0 1.5px #1C212B; }
.cs-window { border-radius:14px; overflow:hidden; background:#FFFFFF; }
.cs-bar { display:flex; align-items:center; gap:14px; height:40px; padding:0 14px; background:#ECEEF2; border-bottom:1px solid #D7DAE0; }
.cs-lights { display:inline-flex; gap:8px; flex-shrink:0; }
.cs-lights > span { width:12px; height:12px; border-radius:999px; box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.15); background:#FF5F57; }
.cs-lights > span:nth-child(2) { background:#FEBC2E; }
.cs-lights > span:nth-child(3) { background:#28C840; }
.cs-arrows { display:inline-flex; gap:12px; color:#8A909C; flex-shrink:0; }
.cs-url-wrap { flex:1; display:flex; justify-content:center; min-width:0; }
.cs-url { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:380px; height:26px; padding:0 12px; border-radius:8px; background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE0E6; font-size:12px; color:#5B6680; white-space:nowrap; overflow:hidden; box-sizing:border-box; }
.cs-url svg { flex-shrink:0; }
.cs-url-site { color:#0F1A2E; flex-shrink:0; }
.cs-url-path { min-width:0; overflow:hidden; text-overflow:ellipsis; } /* narrow screens: truncate the crumb, never clip "Remura" */
.cs-bar-spacer { width:44px; flex-shrink:0; }
.cs-screen { position:relative; aspect-ratio:2000 / 968; background:#F5F7FA; }
.cs-screen:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.cs-shot { position:absolute; inset:0; display:block; opacity:0; pointer-events:none; transition:opacity 300ms ease; }
.cs-shot.is-active { opacity:1; pointer-events:auto; }
.cs-shot img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.cs-sheen { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 28%, rgba(255,255,255,0) 42%); }
.cs-home { position:absolute; bottom:8px; left:50%; width:120px; height:4px; margin-left:-60px; border-radius:999px; background:rgba(15,26,46,0.28); }
/* stacked layout only (<=900px): short chip label inside each tab, caption under the device */
.cs-tab-short, .cs-caption { display:none; }

/* ---------- Meridian 2026 ---------- */
.section-meridian { padding-top:clamp(64px, 8vw, 104px); }
.meridian { position:relative; overflow:hidden; border-radius:18px; color:#FFFFFF; padding:clamp(28px, 4.5vw, 56px); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap:40px; align-items:center; }
.meridian-copy { position:relative; display:flex; flex-direction:column; gap:20px; }
.event-pill { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid #2BB3A8; border-radius:8px; font-size:12px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:#2BB3A8; }
.meridian-title { margin:0; font-size:clamp(30px, 3.6vw, 44px); line-height:1.08; letter-spacing:-0.025em; }
.meridian-lead { margin:0; font-size:18px; line-height:1.6; color:#8FB0EE; max-width:520px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin:0; }
.fact { display:flex; gap:12px; align-items:center; padding:14px 16px; border:1px solid #1E3D7F; border-radius:13px; background:rgba(7,23,57,0.5); }
.fact svg { flex-shrink:0; }
.fact-text { display:flex; flex-direction:column; margin:0; }
.fact-label { font-size:12px; color:#8FB0EE; }
.fact-value { font-size:15px; font-weight:600; margin:0; }
.btn-on-dark, .btn-on-dark:hover { color:#FFFFFF; }

.pass-wrap { position:relative; justify-self:center; width:100%; max-width:380px; }
.pass { background:#FFFFFF; color:#0F1A2E; border:2px solid #FFFFFF; border-radius:18px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,0.35); transform:rotate(-2deg); }
.pass-head { background:#0C2458; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.logo-pass { width:104px; }
.pass-kind { font-size:11px; letter-spacing:0.07em; color:#8FB0EE; }
.pass-body { padding:24px; display:flex; flex-direction:column; gap:18px; }
.pass-event { display:flex; flex-direction:column; gap:8px; }
.eyebrow-sm { font-size:11px; color:#5B6680; }
.pass-event-box { background:#000000; border-radius:13px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pass-event-box img { display:block; flex:0 1 auto; min-width:0; width:178px; max-width:100%; height:auto; }
.pass-date { font-size:12px; color:#DCE6F8; text-align:right; line-height:1.4; white-space:nowrap; flex-shrink:0; }
.pass-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px dashed #DDE2EB; padding-top:16px; }
.pass-field { display:flex; flex-direction:column; gap:4px; }
.pass-val { font-size:14px; font-weight:600; color:#0C2458; }
.pass-val-mono { font-size:14px; }
.pass-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px dashed #DDE2EB; padding-top:16px; }
.countdown { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:#E6F3EE; border:1px solid #1E7F5C; color:#1E7F5C; font-size:12px; font-weight:600; }

/* ---------- Use cases ---------- */
.section-uses { padding-top:clamp(80px, 10vw, 136px); display:flex; flex-direction:column; gap:32px; }
.section-title { margin:0; font-size:clamp(30px, 3.4vw, 44px); line-height:1.1; letter-spacing:-0.022em; color:#0C2458; }
.use { padding:32px; gap:10px; }
.use-kind { font-size:13px; color:#0F7F78; }
.use-title { margin:0; font-size:20px; color:#0C2458; }
.use-text { margin:0; font-size:16px; line-height:1.55; }
.span-2 .use-text { max-width:560px; }

/* ---------- Roadmap ---------- */
.section-roadmap { padding-top:clamp(80px, 10vw, 136px); }
.roadmap { padding:clamp(28px, 4vw, 48px); gap:36px; }
.roadmap-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; }
.roadmap-titles { display:flex; flex-direction:column; gap:12px; }
.roadmap-title { margin:0; font-size:clamp(30px, 3.6vw, 44px); line-height:1.08; letter-spacing:-0.025em; color:#0C2458; }
.stat { display:flex; align-items:baseline; gap:10px; }
.stat-num { font-size:44px; font-weight:600; letter-spacing:-0.025em; color:#0C2458; line-height:1; }
.stat-label { font-size:15px; color:#5B6680; }
.tl-track { position:relative; height:56px; }
/* six stages: node i sits on the centre of grid column i (6 columns, 12px gaps) */
.tl-base { position:absolute; left:calc((100% - 60px) / 12); right:calc((100% - 60px) / 12); top:27px; height:2px; background:#DDE2EB; }
.tl-done, .tl-cur { position:absolute; top:26px; height:4px; border-radius:999px; }
.tl-done { left:calc((100% - 60px) / 12); width:calc((100% - 60px) * 8 / 12 + 48px); background:#0C2458; }
.tl-cur { left:calc((100% - 60px) * 9 / 12 + 48px); width:calc((100% - 60px) / 12 + 6px); background:#12948B; }
.tl-node { position:absolute; top:18px; width:20px; height:20px; margin-left:-10px; border-radius:999px; background:#0C2458; display:flex; align-items:center; justify-content:center; }
.tl-at-1 { left:calc((100% - 60px) / 12); }
.tl-at-2 { left:calc((100% - 60px) * 3 / 12 + 12px); }
.tl-at-3 { left:calc((100% - 60px) * 5 / 12 + 24px); }
.tl-at-4 { left:calc((100% - 60px) * 7 / 12 + 36px); }
.tl-at-5 { left:calc((100% - 60px) * 9 / 12 + 48px); }
.tl-at-6 { left:calc((100% - 60px) * 11 / 12 + 60px); }
.tl-now { position:absolute; left:calc((100% - 60px) * 10 / 12 + 54px); top:0; transform:translateX(-50%); font-size:11px; font-weight:500; letter-spacing:0.07em; color:#0F7F78; }
.tl-pulse { position:absolute; left:calc((100% - 60px) * 10 / 12 + 54px); top:20px; width:16px; height:16px; margin-left:-8px; border-radius:999px; background:#12948B; }
.tl-next { background:#FFFFFF; border:2px dashed #7D879C; box-sizing:border-box; }
.tl-grid { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; margin:-20px 0 0; padding:0; list-style:none; }
.tl-stage { padding:18px; display:flex; flex-direction:column; gap:8px; border-radius:13px; background:#F5F7FA; }
.tl-stage-next { background:#F2F6FD; border:1px dashed #7D879C; }
.tl-date { font-size:12px; color:#5B6680; }
.tl-stage-next .tl-date { color:#0F7F78; }
.tl-name { font-size:16px; font-weight:600; color:#0C2458; }
.tl-badge { margin-top:auto; }
.now-card { border-radius:18px; padding:28px; color:#FFFFFF; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.now-text { display:flex; flex-direction:column; gap:4px; flex:1 1 280px; }
.now-title { font-size:20px; font-weight:600; }
.now-desc { font-size:15px; color:#8FB0EE; }
.network { gap:12px; }
.network-row { display:flex; align-items:center; gap:12px; }
.network-row img { width:44px; height:44px; object-fit:contain; display:block; }
.network-name { font-size:28px; font-weight:600; color:#0C2458; letter-spacing:-0.02em; }
.network-path { font-size:13px; color:#5B6680; }

/* ---------- Footer ---------- */
.site-footer { padding-top:clamp(80px, 10vw, 136px); }
.footer-card { background:#071739; border:1px solid #1E3D7F; border-radius:18px; padding:clamp(28px, 4vw, 48px); color:#FFFFFF; display:flex; flex-direction:column; gap:40px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap:32px; }
.footer-brand { grid-column:span 2; display:flex; flex-direction:column; gap:16px; min-width:0; }
.logo-footer { width:132px; }
.footer-brand p { margin:0; font-size:15px; line-height:1.55; color:#8FB0EE; max-width:340px; }
.footer-status { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid #1E3D7F; border-radius:8px; font-size:13px; color:#DCE6F8; }
.footer-nav { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer-nav-title { font-size:12px; color:#2BB3A8; }
.footer-nav a { color:#DCE6F8; }
.footer-nav a:hover, .footer-status:hover { color:#FFFFFF; }
.footer-bottom { border-top:1px solid #1E3D7F; padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:#8FB0EE; }
.footer-certs { display:inline-flex; gap:8px; align-items:center; }
.footer-noscript a { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.footer-remi, .footer-remi:hover { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
/* lighter focus ring on the navy footer (default #3D7BF0 is low-contrast on #071739) */
.footer-card a:focus-visible { outline-color:#8FB0EE; }

/* ---------- Contact dialog ---------- */
html.is-locked { overflow:hidden; }
.dlg {
  width:calc(100% - 32px); max-width:640px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  margin:auto; padding:0; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain;
  background:#FFFFFF; color:#0F1A2E; border:1px solid #DDE2EB; border-radius:18px; box-shadow:0 12px 32px rgba(12,36,88,0.16);
}
.dlg[open] { display:flex; flex-direction:column; animation:rm-rise 0.5s var(--ease) both; }
.dlg::backdrop { background:rgba(7,23,57,0.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:rm-fade 200ms ease both; }
.dlg-head { position:relative; flex-shrink:0; overflow:hidden; padding:28px 32px; color:#FFFFFF; display:flex; flex-direction:column; gap:14px; border-radius:17px 17px 0 0; }
.dlg-head-top { position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.logo-dlg { width:112px; }
.dlg-close { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid #1E3D7F; border-radius:10px; background:transparent; color:#DCE6F8; cursor:pointer; padding:0; }
.dlg-close:hover { background:#102C66; color:#FFFFFF; }
.dlg-intro { position:relative; display:flex; flex-direction:column; gap:8px; }
.dlg-title { margin:0; font-size:28px; line-height:1.15; letter-spacing:-0.02em; }
.dlg-lead { margin:0; font-size:15px; line-height:1.55; color:#8FB0EE; }
.dlg-form { padding:28px 32px 32px; display:flex; flex-direction:column; gap:18px; }
.form-alert { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid #B42318; border-radius:13px; background:#FBEAE8; color:#B42318; font-size:14px; line-height:1.5; }
.form-alert:focus { outline:2px solid var(--focus); outline-offset:2px; }
.form-alert svg { flex-shrink:0; margin-top:1px; }
.form-alert-body { display:flex; flex-direction:column; gap:2px; }
.form-alert-title { font-weight:600; }
.form-alert-text { color:#0F1A2E; }
.form-alert-text a { color:#1F4FB0; text-decoration:underline; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:16px; align-items:start; }
.select-wrap { position:relative; }
.select-chevron { position:absolute; right:14px; top:14px; pointer-events:none; }
.rm-select { width:100%; -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:40px; }
.rm-field-error .rm-select { padding-right:39px; }
.rm-textarea { height:auto; padding:12px 14px; resize:vertical; line-height:1.5; }
.rm-field-error .rm-textarea { padding:11px 13px; }
.field-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.optional { font-weight:400; color:#5B6680; }
.char-count { font-size:12px; color:#5B6680; }
.char-count.is-over { color:#B42318; }
.consent { display:flex; flex-direction:column; gap:6px; }
.consent-label { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:#5B6680; cursor:pointer; }
.consent-box { width:18px; height:18px; margin:1px 0 0; accent-color:#0C2458; flex-shrink:0; }
.consent-box[aria-invalid="true"] { outline:2px solid #B42318; outline-offset:2px; border-radius:3px; }
.consent-error { font-size:13px; line-height:1.5; color:#B42318; padding-left:28px; }
.form-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid #DDE2EB; padding-top:20px; }
.form-brand { font-size:12px; color:#5B6680; display:inline-flex; align-items:center; gap:8px; }
.form-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn-send { min-width:168px; justify-content:center; }
.btn-send .busy { display:inline-flex; align-items:center; }
.btn-send .busy .blink3 { display:inline-flex; gap:5px; }
.btn-send .busy .dot { width:7px; height:7px; background:#FFFFFF; }
.btn-send .busy-label { margin-left:4px; }
.sent { padding:44px 32px 40px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.sent-title { margin:0; font-size:20px; color:#0C2458; }
.sent-title:focus { outline:none; }
.sent-text { margin:0; font-size:15px; line-height:1.55; color:#5B6680; max-width:400px; }
.sent .btn { margin-top:8px; }
.ok-pulse { width:88px; height:88px; border-radius:999px; }
.ok-pulse svg { display:block; }

/* ---------- 404 ---------- */
.nf { padding-top:clamp(48px, 7vw, 88px); }
.nf-card { position:relative; overflow:hidden; border-radius:18px; color:#FFFFFF; padding:clamp(40px, 7vw, 96px) clamp(24px, 5vw, 72px); display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.nf-code { position:relative; margin:0; font-size:clamp(56px, 9vw, 112px); font-weight:500; line-height:1; letter-spacing:-0.02em; }
.nf-title { position:relative; margin:0; font-size:clamp(30px, 4vw, 52px); line-height:1.06; letter-spacing:-0.02em; max-width:720px; }
.nf-lead { position:relative; margin:0; font-size:17px; line-height:1.6; color:#8FB0EE; max-width:560px; }
.nf .btn-row { position:relative; }

/* ---------- Waitlist page (/waitlist, design Waitlist.dc.html) ---------- */
/* .nav-wrap .nav.nav-wl outranks the landing nav's collapse rules (<=1000px), which this toggle-less bar doesn't use */
.nav-wrap .nav.nav-wl { min-height:64px; padding:0 12px 0 24px; gap:16px; flex-wrap:wrap; }
.wl-nav-links { display:flex; gap:28px; margin:0; padding:0; list-style:none; font-size:14px; font-weight:500; flex-wrap:wrap; }
.wl-nav-links a { color:#0F1A2E; }
.wl-nav-links a:hover { color:var(--link); }
.wl-back { height:42px; font-size:14px; }
.wl-main { max-width:1180px; margin:0 auto; padding:clamp(32px, 5vw, 64px) var(--gutter) 0; }
.wl-grid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:20px; align-items:stretch; }

/* left: navy story panel */
.wl-story { position:relative; overflow:hidden; border-radius:18px; border:1px solid #1E3D7F; padding:clamp(28px, 4vw, 48px); color:#FFFFFF; display:flex; flex-direction:column; gap:28px; }
.wl-story > * { position:relative; }
.wl-story > .wl-grid-bg, .wl-story > .scan { position:absolute; inset:0; }
.wl-grid-bg { opacity:0.6; }
.wl-intro { display:flex; flex-direction:column; gap:20px; }
.wl-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:6px 12px 6px 8px; border:1px solid #1E3D7F; border-radius:8px; background:rgba(7,23,57,0.6); font-size:13px; font-weight:600; color:#DCE6F8; }
.wl-badge-live { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid #2BB3A8; border-radius:8px; background:rgba(43,179,168,0.12); color:#2BB3A8; font-size:12px; }
.wl-title { margin:0; font-size:clamp(34px, 4.2vw, 54px); line-height:1.06; letter-spacing:-0.02em; color:#FFFFFF; }
.wl-lead { margin:0; font-size:17px; line-height:1.6; color:#DCE6F8; max-width:520px; }
.wl-status { border:1px solid #1E3D7F; border-radius:13px; background:rgba(7,23,57,0.55); padding:20px; display:flex; flex-direction:column; gap:14px; }
.wl-status-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.wl-status-title { margin:0; font-size:12px; color:#8FB0EE; }
.wl-status-note { font-size:12px; color:#2BB3A8; }
.wl-steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.wl-step { display:flex; flex-direction:column; gap:10px; }
.wl-step-bar { height:6px; border-radius:999px; background:#1E3D7F; }
.wl-step-bar.is-done { background:#2BB3A8; }
.wl-step-text { display:flex; flex-direction:column; gap:2px; }
.wl-step-name { font-size:14px; font-weight:600; color:#FFFFFF; }
.wl-step-desc { font-size:12px; color:#8FB0EE; }
@keyframes wl-sweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(250%); } }
.wl-bar { position:relative; overflow:hidden; }
.wl-bar::after { content:""; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, rgba(43,179,168,0.55), transparent); animation:wl-sweep 2.6s ease-in-out infinite; }
.wl-perks { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.wl-perks li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:#DCE6F8; }
.wl-perks strong { color:#FFFFFF; font-weight:600; }
.wl-tick { flex-shrink:0; margin-top:2px; width:22px; height:22px; box-sizing:border-box; border-radius:7px; border:1px solid #2BB3A8; display:inline-flex; align-items:center; justify-content:center; color:#2BB3A8; }
.wl-tick svg { display:block; }
.wl-foot { margin-top:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:#8FB0EE; }

/* right: form card */
.wl-card { background:#FFFFFF; border:1px solid #DDE2EB; border-radius:18px; box-shadow:0 12px 32px rgba(12,36,88,0.08); display:flex; flex-direction:column; min-width:0; }
.wl-form { padding:clamp(24px, 3.5vw, 40px); display:flex; flex-direction:column; gap:20px; }
.wl-form-head { display:flex; flex-direction:column; gap:6px; }
.wl-form-title { margin:0; font-size:26px; line-height:1.2; letter-spacing:-0.015em; color:#0C2458; }
.wl-form-lead { margin:0; font-size:15px; line-height:1.55; color:#5B6680; }
.wl-submit { width:100%; justify-content:center; height:52px; font-size:16px; }
.wl-submit .idle, .wl-submit .busy { display:inline-flex; align-items:center; gap:8px; }
.wl-submit .busy { gap:0; }
.wl-submit .busy .blink3 { display:inline-flex; gap:5px; }
.wl-submit .busy .dot { width:7px; height:7px; background:#FFFFFF; }
.wl-submit .busy-label { margin-left:4px; }
.wl-form-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid #DDE2EB; padding-top:16px; font-size:13px; color:#5B6680; }
.wl-form-foot .mono { font-size:12px; }
.wl-sent { flex:1; padding:clamp(32px, 4vw, 56px) clamp(24px, 3.5vw, 40px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.wl-sent-title { margin:0; font-size:24px; color:#0C2458; }
.wl-sent-title:focus { outline:none; }
.wl-sent-text { margin:0; font-size:15px; line-height:1.55; color:#5B6680; max-width:380px; overflow-wrap:anywhere; }
.wl-sent-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* slim footer */
.wl-footer { max-width:1180px; margin:0 auto; padding:20px var(--gutter) 0; }
.wl-footer-row { border-top:1px solid #DDE2EB; padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:#5B6680; }

/* ===================================================================
   5) Design <helmet> motion: value path + sent confirmation
   =================================================================== */
/* Value path: one 9s cycle. Alice visible -> hide -> hidden zone -> unhide -> Bob visible */
.vp { animation-duration:9s; animation-iteration-count:infinite; }
@keyframes vp-move{0%,10%{left:12.5%}25%,40%{left:37.5%}55%,65%{left:62.5%}80%,100%{left:87.5%}}
@keyframes vp-clear{0%,15%{opacity:1;transform:scale(1)}19%,70%{opacity:0;transform:scale(0.3)}74%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(1)}}
@keyframes vp-mask{0%,15%{opacity:0;transform:scale(0.3)}19%,70%{opacity:1;transform:scale(1)}74%,100%{opacity:0;transform:scale(0.3)}}
@keyframes vp-n1{0%,93%{color:#2BB3A8;opacity:1}98%,100%{color:#5C7FC9;opacity:0.45}}
@keyframes vp-n2{0%,24%{color:#5C7FC9;opacity:0.45}26%,93%{color:#2BB3A8;opacity:1}98%,100%{color:#5C7FC9;opacity:0.45}}
@keyframes vp-n3{0%,54%{color:#5C7FC9;opacity:0.45}56%,93%{color:#2BB3A8;opacity:1}98%,100%{color:#5C7FC9;opacity:0.45}}
@keyframes vp-n4{0%,79%{color:#5C7FC9;opacity:0.45}81%,93%{color:#2BB3A8;opacity:1}98%,100%{color:#5C7FC9;opacity:0.45}}
@keyframes vp-hide{0%,13%{background:#071739;color:#8FB0EE;border-color:#5C7FC9}16%,22%{background:#2BB3A8;color:#071739;border-color:#2BB3A8}26%,100%{background:#071739;color:#8FB0EE;border-color:#5C7FC9}}
@keyframes vp-unhide{0%,67%{background:#071739;color:#8FB0EE;border-color:#5C7FC9}70%,76%{background:#2BB3A8;color:#071739;border-color:#2BB3A8}80%,100%{background:#071739;color:#8FB0EE;border-color:#5C7FC9}}
@keyframes vp-zone{0%,16%{background:rgba(43,179,168,0.03);border-color:#1E3D7F}20%,70%{background:rgba(43,179,168,0.10);border-color:#2BB3A8}74%,100%{background:rgba(43,179,168,0.03);border-color:#1E3D7F}}
@keyframes vp-pub{0%,16%{opacity:1}18%,71%{opacity:0}73%,100%{opacity:1}}
@keyframes vp-hid{0%,16%{opacity:0}18%,71%{opacity:1}73%,100%{opacity:0}}
@keyframes vp-sa{0%,15%{opacity:1}17%,100%{opacity:0}}
@keyframes vp-sb{0%,16%{opacity:0}18%,70%{opacity:1}72%,100%{opacity:0}}
@keyframes vp-sc{0%,71%{opacity:0}73%,96%{opacity:1}99%,100%{opacity:0}}

.vp-card { position:relative; border:1px solid #1E3D7F; border-radius:13px; background:rgba(5,15,40,0.55); padding:18px 18px 22px; display:flex; flex-direction:column; gap:8px; }
.vp-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.vp-head-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vp-eyebrow { font-size:11px; color:#8FB0EE; }
.stack-swap { display:inline-grid; }
.stack-swap > * { grid-area:1 / 1; }
.vp-badge { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border:1px solid #5C7FC9; border-radius:8px; font-size:12px; white-space:nowrap; }
.vp-badge-hidden { border-color:#2BB3A8; background:rgba(43,179,168,0.1); opacity:0; }
.vp-amount { font-weight:500; color:#FFFFFF; }
.vp-badge-hidden .vp-amount { color:#2BB3A8; }
.vp-note { color:#8FB0EE; }
.vp-stage { font-size:12px; color:#8FB0EE; }
.vp-stage-item { display:flex; align-items:center; gap:8px; }
.vp-stage-item + .vp-stage-item { opacity:0; }
.vp-stage-dot { width:6px; height:6px; border-radius:999px; background:#DCE6F8; flex-shrink:0; }
.vp-stage-dot-b { background:#2BB3A8; }
.vp-stage-dot-c { background:#5CC8A0; }
.vp-pub { animation-name:vp-pub; } .vp-hid { animation-name:vp-hid; }
.vp-sa { animation-name:vp-sa; } .vp-sb { animation-name:vp-sb; } .vp-sc { animation-name:vp-sc; }

.vp-diagram { position:relative; height:176px; }
.vp-zone { position:absolute; left:25%; right:25%; top:26px; bottom:0; border:1px dashed #1E3D7F; border-radius:13px; background:rgba(43,179,168,0.03); animation-name:vp-zone; }
.vp-chip { position:absolute; top:26px; transform:translate(-50%, -50%); display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border:1px solid #5C7FC9; border-radius:8px; background:#071739; color:#8FB0EE; font-size:11px; font-weight:600; letter-spacing:0.07em; }
.vp-chip-hide { left:25%; animation-name:vp-hide; }
.vp-chip-unhide { left:75%; animation-name:vp-unhide; }
.vp-chip-zone { left:50%; padding:0 12px; border:0; background:#12948B; color:#FFFFFF; white-space:nowrap; }
.vp-line { position:absolute; left:12.5%; right:12.5%; top:83px; border-top:2px dashed #1E3D7F; }
.vp-node { position:absolute; top:64px; width:110px; margin-left:-55px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.vp-node-1 { left:12.5%; color:#2BB3A8; animation-name:vp-n1; }
.vp-node-2 { left:37.5%; color:#5C7FC9; opacity:0.45; animation-name:vp-n2; }
.vp-node-3 { left:62.5%; color:#5C7FC9; opacity:0.45; animation-name:vp-n3; }
.vp-node-4 { left:87.5%; color:#5C7FC9; opacity:0.45; animation-name:vp-n4; }
.vp-node-icon { width:40px; height:40px; box-sizing:border-box; border-radius:999px; border:1px solid currentColor; background:#0C2458; display:flex; align-items:center; justify-content:center; }
.vp-node-label { font-size:13px; font-weight:600; color:#FFFFFF; white-space:nowrap; line-height:1.55; }
.vp-node-who { font-size:10px; letter-spacing:0.07em; color:#8FB0EE; }
.vp-token { position:absolute; left:12.5%; top:84px; width:0; height:0; animation-name:vp-move; animation-timing-function:cubic-bezier(0.65, 0, 0.35, 1); }
.vp-token-clear { position:absolute; left:-7px; top:-7px; width:14px; height:14px; box-sizing:border-box; border-radius:999px; background:#FFFFFF; border:3px solid #6FA0F5; animation:vp-clear 9s ease-out infinite, rm-pulse 2s ease-out infinite; }
.vp-token-mask { position:absolute; left:-14px; top:-7px; width:28px; height:14px; border-radius:999px; background:#2BB3A8; color:#071739; display:flex; align-items:center; justify-content:center; gap:2px; opacity:0; animation-name:vp-mask; }
.vp-token-mask > span { width:4px; height:4px; border-radius:999px; background:#071739; }

/* Sent confirmation: ring draws, disc pops, check draws, then a soft pulse */
@keyframes ok-draw{to{stroke-dashoffset:0}}
@keyframes ok-pop{to{transform:scale(1)}}
@keyframes ok-ring{0%{box-shadow:0 0 0 0 rgba(30,127,92,0.35)}100%{box-shadow:0 0 0 22px rgba(30,127,92,0)}}
.ok-ring{stroke-dasharray:252;stroke-dashoffset:252;animation:ok-draw 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards}
.ok-fill{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ok-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.45s forwards}
.ok-check{stroke-dasharray:50;stroke-dashoffset:50;animation:ok-draw 0.45s cubic-bezier(0.16,1,0.3,1) 0.8s forwards}
.ok-pulse{animation:ok-ring 1s ease-out 1.15s both}
.ok-t1{animation:rm-rise 0.6s cubic-bezier(0.16,1,0.3,1) 1.0s both}
.ok-t2{animation:rm-rise 0.6s cubic-bezier(0.16,1,0.3,1) 1.1s both}
.ok-t3{animation:rm-rise 0.6s cubic-bezier(0.16,1,0.3,1) 1.2s both}

/* ===================================================================
   6) Responsive
   =================================================================== */
/* Nav collapses behind a toggle (only when JS is available to drive it).
   1000px, not the design's 880px: with "Join the waitlist" added, the full bar needs ~940px and wrapped below that. */
@media (max-width: 1000px) {
  .js .nav { position:relative; min-height:0; padding:10px 12px 10px 20px; gap:0; }
  .js .nav-toggle { display:inline-flex; height:44px; }
  /* open menu floats under the bar (overlays the page, nothing below shifts); scrolls on short/landscape screens */
  .js .nav-menu {
    display:none; position:absolute; top:100%; left:0; right:0; margin-top:8px;
    flex-direction:column; align-items:stretch; gap:12px; padding:8px 12px 12px; box-sizing:border-box;
    max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); overflow-y:auto; overscroll-behavior:contain;
    background:#FFFFFF; border:1px solid #DDE2EB; border-radius:13px; box-shadow:0 16px 40px rgba(12,36,88,0.16);
  }
  .js .nav-menu.is-open { display:flex; }
  .js .nav-links { flex-direction:column; gap:0; margin:0; font-size:15px; }
  .js .nav-links a { display:flex; align-items:center; min-height:44px; padding:0 4px; }
  .js .nav-cta { justify-content:center; height:46px; font-size:15px; }
  .js .nav-actions { flex-direction:column; align-items:stretch; gap:10px; }
  /* no-JS: let the bar wrap like the design does */
  html:not(.js) .nav { gap:12px 16px; padding:12px 12px 12px 20px; }
  html:not(.js) .nav-menu { flex-wrap:wrap; gap:12px 16px; }
  html:not(.js) .nav-links { margin:0; gap:8px 20px; }
}

/* Touch widths: stop the rubber-band overscroll past the end of the page (iOS shows a tall light band
   under the footer). Applied only near the bottom via JS (.at-end) so top pull-to-refresh still works. */
@media (max-width: 900px) {
  html.at-end, html.at-end body { overscroll-behavior-y:none; }
}

/* Touch targets >= 44px on phones/tablets without changing the visual rhythm:
   invisible hit areas via ::after on links whose painted size stays as designed */
@media (max-width: 900px) {
  .status-pill, .footer-status, .footer-remi, .footer-nav a { position:relative; }
  .status-pill::after, .footer-status::after { content:""; position:absolute; left:0; right:0; top:50%; height:max(100%, 44px); transform:translateY(-50%); }
  .footer-nav a::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
  .footer-remi::after { content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:44px; transform:translate(-50%, -50%); }
  .dlg-close { width:44px; height:44px; }
}

/* Waitlist page: the design stacks at 900px (story panel, then form) and drops the nav links */
@media (max-width: 900px) {
  .wl-grid { grid-template-columns:minmax(0, 1fr); }
  .wl-nav-links { display:none; }
  /* compact sticky bar, like the landing page's collapsed nav */
  .nav-wrap .nav.nav-wl { min-height:0; padding:10px 12px 10px 20px; gap:12px; flex-wrap:nowrap; }
  .nav-wl .nav-home { display:flex; align-items:center; min-height:44px; padding:0; }
  .wl-back { height:44px; }
  /* 44px hit areas on the small inline links (painted size unchanged) */
  .wl-form-foot a, .wl-footer-row a { position:relative; }
  .wl-form-foot a::after, .wl-footer-row a::after { content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:44px; transform:translate(-50%, -50%); }
  .wl-form .consent-label { padding:4px 0; }
}
/* Waitlist on phones: a slightly tighter story panel so the form arrives sooner; the back button fits a 360px bar */
@media (max-width: 520px) {
  .wl-story { padding:24px 20px; gap:24px; }
  .wl-intro { gap:16px; }
  .wl-lead { font-size:16px; }
}
@media (max-width: 400px) {
  .wl-back { padding:0 14px; }
}

/* Intermediate step (not in the design): four columns get too narrow below ~1080px (28px masked amount) */
@media (max-width: 1080px) {
  .bento-platform { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bento-platform .row-2 { grid-row:auto; }
  .bento-roadmap { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bento-roadmap .span-4 { grid-column:span 3; }
  .bento-roadmap .span-3 { grid-column:span 2; }
}

/* Roadmap: six stages are too narrow side by side below ~1100px; wrap 3 + 3 and drop the single-row track */
@media (max-width: 1100px) {
  .tl-track { display:none; }
  .tl-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:0; }
}

/* Console card stacks a little earlier than the design's 760px: below ~900px the 5fr text column gets too narrow */
@media (max-width: 900px) {
  /* Stacked: intro -> screen selector -> device (uncropped, full card width) -> caption -> prev/next.
     .cs-copy dissolves so its children can be ordered around the device. */
  .cs-grid { grid-template-columns:minmax(0, 1fr); align-items:stretch; gap:16px; padding:24px; }
  .cs-copy { display:contents; }
  .cs-intro { order:1; gap:10px; padding:4px 4px 8px; }
  .cs-tabs { order:2; }
  .cs-stage { order:3; padding:0; }
  .cs-caption { order:4; }
  .cs-controls { order:5; }

  /* screen selector: the same tab buttons, restyled as a segmented control */
  .cs-tabs { flex-direction:row; gap:4px; padding:4px; border:1px solid #DCE6F8; border-radius:13px; background:#FFFFFF; overflow-x:auto; scrollbar-width:none; }
  .cs-tabs::-webkit-scrollbar { display:none; }
  .cs-tab { flex:1 0 auto; justify-content:center; align-items:center; width:auto; min-height:44px; padding:0 12px; border:0; border-radius:9px; font-size:14px; font-weight:600; line-height:1.2; color:#0C2458; white-space:nowrap; text-align:center; }
  .cs-tab:hover { background:#F2F6FD; }
  .cs-tab[aria-selected="true"] { background:#0C2458; color:#FFFFFF; }
  .cs-tab .cs-num, .cs-tab .cs-tab-text { display:none; }
  .cs-tab .cs-tab-short { display:inline; }

  /* device: 100% of the card, the whole screenshot visible, frame scaled to match */
  .cs-device { width:100%; }
  .cs-hw, .cs-cam, .cs-home, .cs-arrows { display:none; }
  .cs-body { border-radius:16px; padding:7px; box-shadow:0 0 0 1px #3A404C, 0 0 0 2px #A7AEBA, 0 14px 30px rgba(12,36,88,0.16), 0 4px 10px rgba(12,36,88,0.08); }
  .cs-window { border-radius:10px; }
  .cs-bar { gap:8px; height:28px; padding:0 8px; }
  .cs-lights { gap:5px; }
  .cs-lights > span { width:8px; height:8px; }
  .cs-url { gap:5px; max-width:340px; height:18px; padding:0 8px; border-radius:5px; font-size:11px; }
  .cs-url svg { width:9px; height:9px; }
  .cs-bar-spacer { width:34px; } /* = lights width, keeps the URL pill centred */

  /* all three captions share one cell, so the block keeps the tallest height and prev/next never jump */
  .cs-caption { display:grid; padding:0 4px; }
  .cs-cap { grid-area:1 / 1; display:flex; flex-direction:column; gap:4px; visibility:hidden; }
  .cs-cap.is-active { visibility:visible; }
  .cs-cap p { margin:0; }
  .cs-cap-title { font-size:17px; font-weight:600; line-height:1.35; color:#0C2458; }
  .cs-cap-desc { font-size:15px; line-height:1.5; color:#5B6680; }
  .cs-controls { padding:0 4px 4px; }
}

@media (max-width: 760px) {
  /* 16px stops iOS zooming the page when a field is focused */
  .rm-input { font-size:16px; }
  body { padding-bottom:16px; }
  .vp-node-who { font-size:11px; }
  .cs-grid { padding:16px; gap:14px; }
  .cs-bar-spacer { display:none; }
  .bento { grid-template-columns:minmax(0, 1fr) !important; }
  .bento > * { grid-column:auto !important; grid-row:auto !important; }
  .tl-track { display:none !important; }
  .tl-grid { grid-template-columns:minmax(0, 1fr) !important; }
  .tl-grid > * { border-left:0 !important; border-bottom:1px solid var(--line); }
  .tl-grid { margin-top:0; }
  .hide-sm { display:none !important; }
}

@media (max-width: 520px) {
  .footer-brand { grid-column:1 / -1; }
  .tile-flow { padding:24px 20px; }
  .tile-flow-title { font-size:26px; }
  .vp-card { padding:14px 12px 18px; }
  .vp-badge { padding:0 10px; }
  .vp-diagram { height:200px; }
  .vp-chip { padding:0 7px; letter-spacing:0.04em; }
  .vp-chip svg { display:none; }
  /* move the HIDDEN ZONE label to the bottom edge of the zone so it clears HIDE/UNHIDE */
  .vp-chip-zone { top:auto; bottom:0; transform:translate(-50%, 50%); }
  .vp-diagram { margin-bottom:13px; }
  .vp-node { width:64px; margin-left:-32px; }
  .vp-node-label { font-size:11px; white-space:normal; text-align:center; line-height:1.25; }
  .status-pill { padding:6px 12px; font-size:12px; line-height:1.4; }
  .log-list { font-size:12px; }
  .log-row { gap:8px; }
  .log-row > span { white-space:nowrap; }
  .dlg-head { padding:24px 20px; }
  .dlg-title { font-size:24px; }
  .dlg-form { padding:24px 20px 24px; }
  .sent { padding:36px 20px 32px; }
  .form-actions { width:100%; }
  .form-actions .btn { flex:1 1 auto; justify-content:center; }
  .btn-send { min-width:0; }
}

@media (max-width: 400px) {
  /* let the value-path badge wrap instead of forcing the column wider than the screen */
  .vp-badge { white-space:normal; height:auto; min-height:28px; padding:4px 10px; flex-wrap:wrap; column-gap:6px; row-gap:0; box-sizing:border-box; max-width:100%; }
  .vp-head-left, .stack-swap { min-width:0; max-width:100%; }
  /* batch rows were 1px wider than the tile at 360px */
  .log-row { gap:6px; }
}

/* ===================================================================
   7) Reduced motion
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .dlg::backdrop { animation:none !important; }
  .swap .clear, .log, .pnl.s1 { opacity:1; visibility:visible; }
  .pnl { opacity:0; visibility:hidden; }
  .swap .masked { opacity:0; }
  .vp { animation:none !important; }
  .ok-ring, .ok-check { stroke-dashoffset:0 !important; }
  .ok-fill { transform:none !important; }
  .wl-bar::after { display:none; } /* a frozen sweep would read as a partly filled bar */
}