/* sealed · in render.com's visual language: near-black, hairline grid, square corners, light
   display weight, white square buttons, one purple, gradient text used once. */
:root {
  --bg: #f7fcff;
  --bg2: #eef8fe;
  --card: #ffffff;
  --line: #d3e9f6;
  --line2: #a9d3ec;
  --text: #072a4a;
  --sec: #3d5f7c;
  --faint: #6b88a1;
  --mute: #9ab4c7;
  --sky: #75c8f8;
  --sky2: #8cd4f9;
  --haze: #c6e8fb;
  --cloud: #f3fcff;
  --blue: #1a8fdc;
  --deep: #0b6fb3;
  --navy: #072a4a;
  --ok: #12a26b;
  --disp: "Inter Tight", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 2.6vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
.dim { color: var(--sec); }
.mute { color: var(--faint); }
.note { font-size: 14px; color: var(--faint); }
p { margin: 0 0 12px; }
.frame { max-width: 1920px; margin: 0 auto; }
@media (min-width: 1920px) { .frame { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.wrap { padding: 0 var(--pad); }

/* announcement bar */
.ann { background: var(--navy); color: var(--text); font-size: 14px; text-align: center; padding: 10px 16px; }
.ann a { color: var(--p200); text-decoration: none; margin-left: 8px; }
.ann a:hover { text-decoration: underline; }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .bar { display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 var(--pad); max-width: 1920px; margin: 0 auto; }
.brand { font: 500 19px/1 var(--disp); letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nav { display: flex; gap: 26px; margin-left: 18px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--text); opacity: .86; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--text); }
.spacer { flex: 1; }
.menu-btn { display: none !important; }
@media (max-width: 860px) {
  .nav { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); margin: 0; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
  .menu-btn { display: inline-flex !important; }
}

/* buttons: square, 48px, white or white outline */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 1px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; text-decoration: none; font-size: 16px; white-space: nowrap; border-radius: 0; transition: background .15s, color .15s; }
.pill:hover { background: var(--navy); color: #fff; }
.pill.solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill.solid:hover { background: var(--deep); border-color: var(--deep); }
.pill.white { background: #fff; color: var(--navy); border-color: #fff; }
.pill.white:hover { background: var(--cloud); }
.pill.glass { background: #ffffff33; border-color: #ffffffb3; color: var(--navy); backdrop-filter: blur(6px); }
.pill.glass:hover { background: #ffffff66; }
.pill.ghost { border-color: var(--line2); }
.pill.ghost:hover { background: var(--bg2); color: var(--text); }
.pill.sm, .top .pill { height: 36px; padding: 0 14px; font-size: 15px; }
.pill[disabled] { opacity: .45; cursor: not-allowed; }
.link { color: var(--deep); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.link:hover { text-decoration: underline; }

/* the privacy light */
.light { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sec); text-decoration: none; height: 36px; padding: 0 12px; border: 1px solid var(--line2); background: #fff; }
.light b { width: 8px; height: 8px; background: var(--mute); }
.light[data-state="pass"] b { background: var(--ok); box-shadow: 0 0 8px #12a26b88; }
.light[data-state="dev"] b { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sec); }
.light[data-state="fail"] b { background: #d4483f; }

/* type */
h1, h2, h3 { font-family: var(--disp); font-weight: 300; margin: 0; color: var(--text); }
h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 14px; }
h3 { font-size: clamp(22px, 2vw, 32px); line-height: 1.15; letter-spacing: -.02em; font-weight: 400; margin-bottom: 10px; }
h4 { font: 500 17px/1.3 var(--sans); margin: 0 0 6px; }
.lead { font-size: 20px; line-height: 1.5; color: var(--sec); max-width: 640px; }
.label { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); }
.grad { background: linear-gradient(to right, var(--deep), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* sections cut by full-width hairlines */
.sec { border-bottom: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0; position: relative; overflow: hidden; }

/* hero */
.hero { background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 55%, var(--haze) 100%); border-bottom: 1px solid var(--line2); position: relative; overflow: hidden; min-height: min(88svh, 860px); display: flex; align-items: center; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero h1 { color: var(--navy); }
.hero .lead { color: #12436b; }
.hero .wrap { width: 100%; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 8vw, 120px); }
.hero .lead { margin: 22px 0 34px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }

/* blurred orbs */
.orb { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(102px); pointer-events: none; z-index: 0; }
.orb.p { background: radial-gradient(circle, var(--sky2), var(--haze)); opacity: .45; }
.orb.g { background: radial-gradient(circle, var(--haze), var(--cloud)); opacity: .7; }
.sec > .wrap, .hero > .wrap, .cta > :not(.orb):not(canvas) { position: relative; z-index: 1; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 6vw, 120px); margin-top: 56px; }
.num { width: 32px; height: 32px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 15px; margin-bottom: 18px; }
.steps p { color: var(--sec); line-height: 1.6; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* big bordered panel split into rows */
.panel { border: 1px solid var(--line); background: var(--card); margin-top: 48px; box-shadow: 0 30px 60px -40px #0b6fb340; }
.panel > .prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-top: 1px solid var(--line); }
.panel > .prow:first-child { border-top: 0; }
.prow > div { padding: clamp(24px, 3vw, 48px); min-width: 0; }
.prow > div + div { border-left: 1px solid var(--line); background: var(--bg2); }
.prow p { color: var(--sec); line-height: 1.6; }
@media (max-width: 860px) { .panel > .prow { grid-template-columns: 1fr; } .prow > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* tile band: the hairline squares around the call to action */
.tiles { display: grid; grid-template-columns: repeat(16, 1fr); }
.tiles i { aspect-ratio: 1; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tiles.top { border-bottom: 0; }
.tiles.bot i { border-bottom: 0; border-top: 1px solid var(--line); }
.tiles i.lit { background: linear-gradient(135deg, var(--haze), transparent 90%); }
.tiles i:last-child { border-right: 0; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(8, 1fr); } .tiles i:nth-child(n+9) { display: none; } .tiles i:nth-child(8) { border-right: 0; } }
.cta { text-align: center; padding: clamp(56px, 7vw, 104px) var(--pad); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky2), var(--haze)); }
.cta canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta h2 { max-width: 780px; margin: 0 auto 28px; }
.cta .ctas { justify-content: center; }
.band { border-bottom: 1px solid var(--line); }

/* generic app surfaces */
.page { padding: clamp(40px, 5vw, 72px) 0; }
.page > .wrap > h2 { margin-bottom: 10px; }
.grid { display: grid; gap: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .g2, .g3 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 32px); min-width: 0; border-radius: 0; }
/* cards in a grid share their hairlines, like render's framed panels */
.grid.g2 > .card:nth-child(2n), .grid.g3 > .card:not(:nth-child(3n+1)) { border-left: 0; }
.grid.g2 > .card:nth-child(n+3), .grid.g3 > .card:nth-child(n+4) { border-top: 0; }
@media (max-width: 860px) { .grid > .card { border-left: 1px solid var(--line) !important; } .grid > .card:not(:first-child) { border-top: 0 !important; } }
.card.flat { background: var(--bg2); }
.card h3 { font-size: 24px; }
.big { font: 300 56px/1 var(--disp); letter-spacing: -.03em; margin: 12px 0 6px; }

.receipt { font-family: var(--mono); font-size: 12.5px; color: var(--sec); background: var(--bg2); border: 1px solid var(--line); padding: 20px; white-space: pre-wrap; word-break: break-all; line-height: 1.7; margin: 0; }
.receipt b { color: var(--deep); font-weight: 500; }

.rows { display: grid; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.row:last-child { border-bottom: 0; }
.row > :first-child { color: var(--sec); }
.row > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }

label.f { display: grid; gap: 8px; font-size: 14px; color: var(--sec); margin-bottom: 16px; }
.in { width: 100%; background: #fff; border: 1px solid var(--line2); border-radius: 0; padding: 12px 14px; color: var(--text); outline: none; }
.in:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #1a8fdc26; }
textarea.in { min-height: 130px; resize: vertical; line-height: 1.5; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.msg { font-size: 14px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--line); margin: 14px 0 0; }
.msg.err { border-color: #f1c4c0; background: #fff4f3; color: #a3271f; }
.msg:empty { display: none; }

table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th { text-align: left; font-weight: 500; color: var(--faint); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.t td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr:hover td { background: var(--bg2); }
.scroll { overflow-x: auto; }
.tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--line2); color: var(--sec); font-size: 13px; }
.tag.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.empty { color: var(--faint); padding: 28px 0; text-align: center; font-size: 15px; }
.yes { color: var(--ok); }

.chat { display: grid; gap: 12px; }
.bubble { padding: 14px 16px; max-width: 86%; white-space: pre-wrap; border: 1px solid var(--line); }
.bubble.me { justify-self: end; background: var(--navy); border-color: var(--navy); color: #fff; }
.bubble.me small { color: #9fc3e0; }
.bubble.ai { background: var(--bg2); }
.bubble small { display: block; color: var(--faint); font-size: 12px; margin-top: 8px; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; background: var(--mute); }
.checks li.pass::before { background: var(--ok); }
.checks li.fail::before { background: #d4483f; }
.checks li.skip::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.checks small { display: block; color: var(--faint); font-size: 13px; overflow-wrap: anywhere; }

ol.rules { list-style: none; padding: 0; margin: 40px 0 0; border: 1px solid var(--line); counter-reset: r; background: var(--card); }
ol.rules li { counter-increment: r; display: grid; grid-template-columns: 32px 1fr; gap: 20px; padding: 22px clamp(18px, 2.4vw, 32px); border-top: 1px solid var(--line); color: var(--sec); line-height: 1.6; }
ol.rules li:first-child { border-top: 0; }
ol.rules li::before { content: counter(r); width: 32px; height: 32px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 15px; }
ol.rules b { color: var(--text); font-weight: 500; display: block; margin-bottom: 2px; }

table.who td:not(:first-child), table.who th:not(:first-child) { text-align: center; }

/* footer */
footer { padding: 72px 0 40px; background: var(--navy); color: #fff; }
footer .label { color: #8fb6d6 !important; }
footer p, footer a { color: #e6f3fc !important; }
footer .base { border-top-color: #ffffff22 !important; color: #8fb6d6 !important; }
footer .wordmark { font: 300 clamp(80px, 16vw, 240px)/.85 var(--disp); letter-spacing: -.05em; margin-top: 48px; background: linear-gradient(180deg, #ffffff, #75c8f855); -webkit-background-clip: text; background-clip: text; color: transparent; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
footer .label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--faint); }
footer p, footer a { font-size: 15px; color: var(--text); opacity: .86; line-height: 1.6; text-decoration: none; }
footer a { display: block; padding: 3px 0; }
footer a:hover { opacity: 1; }
footer .base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: 14px; }

/* dialog */
.modal { position: fixed; inset: 0; background: #072a4a99; backdrop-filter: blur(4px); display: none; place-items: center; z-index: 50; padding: 16px; }
.modal.open { display: grid; }
.modal .card { width: min(460px, 100%); }
.wallets { display: grid; margin-top: 16px; border: 1px solid var(--line); }
.wallets button { justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid var(--line); height: 56px; }
.wallets button:last-child { border-bottom: 0; }

[hidden] { display: none !important; }
@media (max-width: 560px) {
  .top .bar { gap: 8px; }
  .light span { display: none; }
  .light { padding: 0 12px; }
  .brand { font-size: 18px; }
}
.grid.sp { gap: clamp(24px, 3vw, 48px); }
.hero.solo .wrap { grid-template-columns: minmax(0, 1fr); max-width: 1100px; margin: 0; }
.hero.solo h1 { font-size: clamp(44px, 6vw, 88px); }

/* hero: sky with drawn clouds and a white example card */
.herogrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding: clamp(64px, 9vw, 128px) 0; }
.herogrid h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; }
.herogrid .lead { margin: 24px 0 36px; }
@media (max-width: 960px) { .herogrid { grid-template-columns: 1fr; } }
.example { background: #ffffffe6; backdrop-filter: blur(10px); border: 1px solid #ffffff; box-shadow: 0 40px 80px -40px #0b6fb366; }
.ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.ex-in { padding: 22px 24px; font: 300 22px/1.35 var(--disp); color: var(--navy); border-bottom: 1px solid var(--line); }
.ex-rules { margin: 0; padding: 8px 24px 8px 24px; list-style: none; counter-reset: x; }
.ex-rules li { counter-increment: x; display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--sec); font-size: 15px; }
.ex-rules li:last-child { border-bottom: 0; }
.ex-rules li::before { content: counter(x); width: 26px; height: 26px; background: var(--haze); color: var(--deep); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.ex-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); font-size: 13px; color: var(--deep); }
.ex-foot span { padding: 14px 24px; }
.ex-foot span + span { border-left: 1px solid var(--line); }
.cta h2 { color: var(--navy); }
.hero > .wrap { display: block; padding-top: 0; padding-bottom: 0; }

/* scroll motion (src/motion.js). Only applied when JavaScript runs and motion is allowed. */
html.atl-smooth { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.atl-rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--atl-delay, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--atl-delay, 0ms); }
.atl-rv.atl-in { opacity: 1; transform: none; }
.hero canvas, .cta canvas, .herogrid h1, .herogrid .lead { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .atl-rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* brand */
.brand { color: var(--navy); }
.brand-svg { height: 26px; width: auto; display: block; }
.foot-brand { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); margin-top: 56px; color: #fff; }
.foot-mark { height: clamp(64px, 9vw, 140px); width: auto; flex: none; }
.foot-word { height: clamp(48px, 7.4vw, 116px); width: auto; max-width: 100%; }
@media (max-width: 560px) { .brand-svg { height: 22px; } }

/* the fan: the brand mark as the hero's signature graphic, turned by scrolling */
.fan { position: absolute; right: clamp(-120px, -2vw, 0px); top: 50%; width: clamp(560px, 50vw, 900px); height: auto; translate: 0 -50%; opacity: .95; filter: drop-shadow(0 30px 60px #0b6fb333); pointer-events: none; z-index: 0; }
@media (max-width: 960px) { .fan { width: 420px; top: 18%; right: -140px; opacity: .55; } }
@media (max-width: 420px) {
  .brand-svg { height: 19px; }
  .top .pill { padding: 0 10px; font-size: 14px; }
  .top .bar { gap: 6px; }
}

/* scroll-driven layer (src/scrollfx.js) */
.top { transition: box-shadow .3s; }
.top.atl-scrolled { box-shadow: 0 10px 30px -18px #0b6fb355; }
.atl-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--sky), var(--deep)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

.atl-split .atl-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.atl-split .atl-wi { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1s cubic-bezier(.2, .75, .15, 1) calc(var(--i) * 45ms); }
.atl-split.atl-in .atl-wi { transform: none; }

.atl-pin { height: 280vh; padding: 0 !important; overflow: visible !important; border-bottom: 1px solid var(--line); }
.atl-pin > .wrap { position: sticky; top: 57px; min-height: calc(100vh - 57px); display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 40px; }
.atl-rail { height: 2px; background: var(--line); margin-top: 48px; overflow: hidden; }
.atl-rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--deep)); transform: scaleX(0); transform-origin: 0 50%; }
.atl-pin .steps { margin-top: 40px; }
.atl-pin .steps > div { opacity: .28; transform: translate3d(0, 14px, 0); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .75, .15, 1); }
.atl-pin .steps > div.atl-step-on { opacity: 1; transform: none; }
.atl-pin .steps .num { background: var(--haze); color: var(--deep); transition: background .4s, color .4s; }
.atl-pin .steps > div.atl-step-on .num { background: var(--blue); color: #fff; }
.atl-pin .steps > div.atl-step-now h3 { color: var(--deep); }

.panel > .prow.atl-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.65, 0, .2, 1); }
.panel > .prow.atl-wipe.atl-open { clip-path: inset(0 0 0 0); }

.tiles i { transition: background .5s ease; }
.tiles i.atl-on:not(.lit) { background: linear-gradient(135deg, #eaf6fe, transparent 85%); }