/* Draft 3b — Aperture, refined.
   Type: Geist + Geist Mono, the dashboard's own faces (approved 29 Sep 2026).
   Geist for everything people read; Geist Mono only for the prompt and the
   addresses; tabular figures wherever digits align.
   Ground: one night colour, lit only by the mark (hero and close).
   WebKit law: nothing inside a panel is transformed or clipped; the iris lives
   in a figure, not a card, and moves by SVG transform attributes only. */
:root{
  --night:#0d0f13;       /* Charcoal: the ground, the dashboard sign-in's dark ground */
  --deep:#0a0c0f;        /* Deep: footer, recessed wells */
  --panel-hi:#16191f;    /* Pane: the dashboard's --pane-solid */
  --panel-lo:#16191f;
  --sunk:#1a1d24;        /* Sunk: the dashboard's --pane-sunk */
  --hover:#1c2029;       /* Hover */
  --raised:#1a1d24;
  --hair:#2b303b;        /* Rule: the dashboard's --rule */
  --hair-soft:#232833;   /* Soft rule */
  --hair-2:#3a404c;      /* Control border on the ground */
  --text:#ebedf2;        /* Ink */
  --muted:#b3bac8;       /* Ink 2 */
  --faint:#959faf;       /* Ink 3 */
  --settled:#78d3ae;--settled-bg:#172f29;--attn:#e4bb78;--attn-bg:#332b1d;--stop:#f698a0;--stop-bg:#351f27;--focus:#9baeff;
  --emerald:#0f7a5a;     /* The ring */
  --mint:#9fe8c9;        /* The light */
  --mint-hi:#c4f4df;
  --lumen:#fffbf2;       /* The warm centre */
  --amber:#e4bb78;       /* Development, as text: the dashboard's --attn */
  --green:var(--mint);--wash:var(--panel-hi);--line:var(--hair);--ink:var(--text);--r-card:12px;--r-control:6px;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --panel:var(--panel-hi);
  --panel-edge:inset 0 1px 0 #ffffff0d;
  --lift:0 1px 2px #00000040,0 24px 60px -24px #000000b3;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;background:var(--night)}
body{position:relative;margin:0;background:transparent;color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1}
h1,h2,h3,p,dl,dd,ul,ol{margin:0}
h1,h2,h3{font-family:var(--sans);color:var(--text);text-wrap:balance}
p{text-wrap:pretty}
/* The ground: flat charcoal #0d0f13. The only light on the page is the iris's own, inside the hero art. */
body::before{content:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.container{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;left:16px;top:-80px;background:var(--mint);color:var(--deep);padding:10px 14px;z-index:50;border-radius:8px}
.skip:focus{top:12px}
[hidden]{display:none!important}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:-.01em}
.lens{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}

/* ---- type scale: Geist, about 1.25, set on 17 px ---- */
.hero h1{font-size:clamp(2.5rem,4.6vw,4.25rem);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.sec h2{font-size:clamp(1.875rem,3vw,2.625rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.label{font-size:.8125rem;font-weight:500;letter-spacing:0;color:var(--faint)}
.fine{font-size:.8125rem;color:var(--faint)}

/* ---- controls ---- */
/* Buttons: the dashboard sign-in's .ui-btn / .ui-btn--solid (1 px border, 6 px radius,
   flat fill, a 1 px shadow, a 160 ms background change), scaled from 40 to 46 px. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid var(--hair);border-radius:8px;background:var(--panel-hi);color:var(--text);font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:0;line-height:1.2;white-space:nowrap;box-shadow:0 1px 2px #00000020;transition:background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out}
.btn-primary{background:var(--mint);border-color:var(--mint);color:#0d0f13}
.btn-primary:hover{background:#b8f0d8;border-color:#b8f0d8;color:#0d0f13}
.btn-quiet:hover{background:var(--hover)}
.btn:disabled{color:var(--faint);background:var(--sunk);border-color:var(--hair);box-shadow:none;cursor:default}
.btn-small{min-height:36px;padding:0 12px;font-size:.8125rem;border-radius:6px}
.link{color:var(--text);font-weight:500;font-size:.9375rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:#4b5261;transition:text-decoration-color 160ms ease-out}
.link:hover{text-decoration-color:var(--mint)}
.mono-link{font-family:var(--mono);font-weight:400;font-size:.875rem;letter-spacing:-.01em}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;font-size:.75rem;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap}
.chip i{width:8px;height:8px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.34 0h3.32L8 2.34v3.32L5.66 8H2.34L0 5.66V2.34z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.34 0h3.32L8 2.34v3.32L5.66 8H2.34L0 5.66V2.34z'/%3E%3C/svg%3E") center/contain no-repeat}
.chip-live{color:var(--settled);background:var(--settled-bg)}
.chip-dev{color:var(--attn);background:var(--attn-bg)}
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--panel-edge),var(--lift)}

/* ---- header ---- */
.header{position:sticky;top:0;z-index:20;background:var(--night);box-shadow:0 1px 0 var(--hair)}
.nav{display:flex;align-items:center;gap:40px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:1.375rem;font-weight:650;letter-spacing:-.03em}
.brand svg{width:26px;height:26px}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:.9063rem;font-weight:500;color:var(--muted)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-sign{display:none}
.nav-end{display:flex;align-items:center;gap:22px;font-size:.9063rem;font-weight:500}
.sign-in{color:var(--muted)}
.sign-in:hover{color:var(--text)}
.menu-button{display:none;background:var(--panel-hi);border:1px solid var(--hair);box-shadow:0 1px 2px #00000020;border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;color:var(--text)}

/* ---- hero ---- */
.hero{position:relative;padding:72px 0 96px;overflow-x:clip}
.hero-light{display:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);grid-template-areas:"text ap";column-gap:64px;align-items:center}
.hero-text{grid-area:text}
.tagline{display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:500;letter-spacing:.005em;color:var(--muted);margin-bottom:24px}
.hero h1{max-width:15ch}
.lede{font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:31rem;margin:24px 0 36px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .fine{margin-top:18px}
.platforms{list-style:none;padding:0;margin-top:28px;display:flex;flex-wrap:wrap;gap:0;font-size:.8125rem;font-weight:500;color:var(--muted)}
.platforms{gap:6px 20px}
.platforms li{line-height:1}

.ap{grid-area:ap;margin:0;display:flex;flex-direction:column;align-items:center}
.ap-stage{position:relative;width:min(100%,468px);aspect-ratio:1}
.vault{position:absolute;inset:-173.2%;z-index:-1;width:446.4%;height:446.4%;pointer-events:none;overflow:visible;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 41%),radial-gradient(circle closest-side,#000 16%,transparent 36%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 20%,#000 41%),radial-gradient(circle closest-side,#000 16%,transparent 36%);mask-composite:intersect}
.vr{fill:none;stroke:#c9d0db}
.vl{stroke:#c9d0db;stroke-opacity:.07;stroke-width:1}
.ap-glow{display:none}
.ap-svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.ring{stroke:none}
.rim-out{fill:none;stroke:#c4f4df;stroke-opacity:.3;stroke-width:1.5}
.rim-in{fill:none;stroke:#d9f8ea;stroke-opacity:.45;stroke-width:1}
.rim-in-shadow{fill:none;stroke:#04241a;stroke-opacity:.55;stroke-width:1.2}
.tun{fill:none;stroke:#0b5a43;stroke-width:1}
.sheen{opacity:.55}
.blade-edge{stroke:#c4f4df;stroke-opacity:.34;stroke-width:1}
.blade-shade{stroke:#020c08;stroke-opacity:.55;stroke-width:5}
.tick{stroke:#d3f8e8;stroke-width:3;stroke-linecap:round}
.mtick{stroke:#d3f8e8;stroke-opacity:.28;stroke-width:1.4;stroke-linecap:round}
.core-flash{fill:#fffbf2;opacity:0}
.bloom{fill:none;stroke:#c4f4df;stroke-width:2;opacity:0}
.core-text text{text-anchor:middle}
.ct-live{font-family:var(--sans);font-weight:600;font-size:56px;letter-spacing:-2.2px;fill:#06301f}
.ct-url{font-family:var(--mono);font-size:16px;letter-spacing:0;fill:#1d5a44}

.readout{position:relative;text-align:left;margin-top:22px;width:min(100%,420px);border:1px solid var(--hair);border-radius:12px;background:var(--panel-hi);box-shadow:var(--panel-edge),var(--lift)}
.ro-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 4px}
.chip-swap,.ro-url{display:grid}
.chip-swap>span,.ro-url>span{grid-area:1/1}
.chip-swap>span{justify-self:end}
.ro-url{font-size:.8125rem;color:var(--muted)}
.st-dev{opacity:0}
.ro-ticker{display:grid;padding:13px 16px 12px;font-size:.9375rem;line-height:1.45;min-height:3.3em;align-items:center}
.tk{grid-area:1/1;opacity:0;color:var(--text)}
.tk-final{opacity:1}
.tk-final b{color:var(--mint);font-weight:600;margin-right:6px}
.ro-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px 9px 16px;background:var(--sunk);border-radius:0 0 11px 11px;font-size:.75rem;color:var(--faint)}
.ap-hold{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;background:transparent;border:1px solid var(--hair);border-radius:6px;color:var(--muted);transition:background-color 160ms ease-out,color 160ms ease-out}
.ap-hold:hover{background:var(--hover);color:var(--text)}
.ap-hold:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hold-ico{width:14px;height:14px;fill:currentColor}
.ap-hold .i-play,.ap-hold[aria-pressed="true"] .i-pause{display:none}
.ap-hold[aria-pressed="true"] .i-play{display:inline}
@media (hover:hover) and (min-width:501px){
  .ap-hold::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 8px);padding:5px 8px;border-radius:6px;background:#23272f;border:1px solid var(--hair);color:var(--text);font-size:.75rem;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px -8px #000;opacity:0;pointer-events:none;transition:opacity 120ms ease-out}
  .ap-hold:hover::after,.ap-hold:focus-visible::after{opacity:1}
}

/* ---- sections ---- */
.sec{position:relative;padding:96px 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:56px;align-items:end;margin-bottom:48px}
.sec-head p{color:var(--muted);font-size:1.0625rem;line-height:1.55}

.prompt-panel{padding:0}
.pp-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 28px 0}
.pp-hint{font-size:.8125rem;color:var(--faint)}
.pp-text{display:flex;gap:16px;padding:18px 28px 10px;font-size:clamp(1.0625rem,1.9vw,1.4375rem);line-height:1.6;color:var(--text);max-width:62rem}
.pp-text .mono{overflow-wrap:anywhere}
.pp-caret{font-family:var(--mono);color:var(--settled);font-weight:500;flex:none}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:22px 28px 28px}
.copy-message:empty{display:none}
/* the sign-in's hint box (.lv-hint) */
.copy-message{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:var(--settled-bg);color:var(--settled);font-size:.8125rem;line-height:1.4}
.pp-actions .link{margin-left:auto}

.stops{list-style:none;padding:0;margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stops li{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:18px;align-items:start;padding:22px 22px 24px}
.stop-ap{width:64px;height:64px;grid-row:1/span 3}
.stop-n{font-size:.8125rem;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:6px}
.stops h3{margin:2px 0 6px}
.stops p{color:var(--muted);font-size:.9688rem;line-height:1.55}
.research{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;color:var(--muted);font-size:.9375rem;padding:16px 22px}

.caps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;align-items:center;padding:22px 22px 24px;background:var(--panel-hi);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--panel-edge),var(--lift)}
.cap-ico{width:30px;height:30px;grid-column:1;grid-row:1;overflow:visible}
.i-ring{fill:none;stroke:#5d6675;stroke-width:1.3}
.i-core{fill:#78d3ae1f;stroke:var(--settled);stroke-width:1.2;transform-box:fill-box;transform-origin:center}
.i-lock{fill:var(--settled);transform-box:fill-box;transform-origin:center}
.i-tick-mark{stroke:var(--mint);stroke-width:2;stroke-linecap:round}
.i-tick-glow{stroke:var(--mint);stroke-opacity:.2;stroke-width:3.8;stroke-linecap:round}
.i-ray{stroke:var(--settled);stroke-width:2;stroke-linecap:round}
.i-ray{opacity:0;transform-box:view-box;transform-origin:14px 14px}
.i-dot{fill:var(--mint);opacity:0;transform-box:view-box;transform-origin:14px 14px}
.cap{transition:border-color 200ms ease-out,background-color 200ms ease-out,box-shadow 200ms ease-out}
@media (hover:hover){.cap:hover,.cap:focus-within{border-color:#3a414d;background:#181c22;box-shadow:inset 0 1px 0 #ffffff12,0 1px 2px #00000040,0 28px 64px -24px #000000cc,0 0 0 1px #78d3ae14}}
.cap-q:active{background:var(--selected,#282d39);box-shadow:inset 0 1px 2px #00000066;color:var(--text)}
.cap-q{grid-column:2;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--hair);border-radius:6px;background:var(--panel-hi);color:var(--muted);font:500 .75rem/1 var(--sans);box-shadow:0 1px 2px #00000020;transition:background-color 160ms ease-out,color 160ms ease-out}
.cap-q:hover,.cap-q[aria-expanded="true"]{background:var(--hover);color:var(--text)}
.cap h3{grid-column:1/-1;margin:18px 0 6px;font-size:1.1875rem}
.cap p{grid-column:1/-1;align-self:start;color:var(--muted);font-size:.9375rem;line-height:1.55}
.providers{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-top:16px;padding:16px 22px}
.providers ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:1rem;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.pipe{margin-top:16px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding:40px}
.pipe h3{font-size:1.625rem;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.pipe-q{float:right;margin:2px 0 0 12px}
.pipe-ico{display:block;margin-bottom:16px}
.pipe-text p{color:var(--muted);margin:14px 0 22px;font-size:1rem}
.pipe-run{list-style:none;padding:0;display:grid;gap:8px}
.pr-dot{position:absolute;left:-15px;top:50%;width:7px;height:7px;margin-top:-3.5px}
.pd-off{fill:#4b5261}
.pd-on{fill:var(--mint)}
.pipe-run{margin-left:14px}
.pipe-run li{position:relative;display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:16px;align-items:baseline;padding:15px 18px;border-radius:8px;background:var(--sunk)}
.pr-k{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:500;color:var(--faint)}
.pipe-run b{font-weight:500;font-size:.9688rem}
.pipe-run .pr-g{background:var(--settled-bg)}
.pipe-run .pr-g b{color:var(--text)}
.pipe-run .pr-g .pr-k{color:var(--settled)}
.after{margin-top:32px}
.split{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;margin-top:18px}

.dash-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;background:var(--sunk);border-radius:11px 11px 0 0;font-size:.875rem}
.dash-id{display:inline-flex;align-items:center;gap:10px}
.dash-id b{font-weight:600}
.dash-tabs{display:flex;flex-wrap:wrap;gap:4px 22px;color:var(--faint);font-weight:500}
.dash-tabs .on{color:var(--text);box-shadow:0 2px 0 var(--text);padding-bottom:2px}
.dash-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.dash-table{width:100%;border-collapse:collapse;font-size:.9063rem}
.dash-table th{text-align:left;font-weight:500;font-size:.75rem;letter-spacing:.01em;color:var(--faint);padding:16px 22px 10px}
.dash-table td{padding:13px 22px;box-shadow:0 -1px 0 #20252b;white-space:nowrap}
.dash-table .num{text-align:right;font-variant-numeric:tabular-nums}
.dash-rec b,.dash-rec li,.price,.ro-url,.fine{font-variant-numeric:tabular-nums}
.tag{font-style:normal;font-size:.75rem;font-weight:500;padding:4px 8px;border-radius:6px;background:var(--settled-bg);color:var(--settled)}
.tag-free{background:var(--sunk);color:var(--muted)}
.dash-rec{padding:16px 22px 14px;background:rgba(0,0,0,.16);border-bottom-right-radius:11px}
.dash-rec .label{margin-bottom:6px}
.dash-rec ol{list-style:none;padding:0}
.dash-rec li{display:grid;padding:9px 0 9px 18px;position:relative;font-size:.875rem}
.dash-rec li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;background:var(--faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.34 0h3.32L8 2.34v3.32L5.66 8H2.34L0 5.66V2.34z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.34 0h3.32L8 2.34v3.32L5.66 8H2.34L0 5.66V2.34z'/%3E%3C/svg%3E") center/contain no-repeat}
.dash-rec b{font-weight:600}
.dash-rec span{font-size:.75rem;color:var(--faint);margin-top:2px}

.pair{padding:96px 0}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pair-cell{padding:40px 40px 44px}
.pair-cell h2{font-size:clamp(1.625rem,2.4vw,2.125rem)!important}
.pair-cell .price{color:var(--muted);font-size:1.0625rem;line-height:1.6;margin:16px 0 20px;max-width:31rem}
.who{margin:18px 0 20px;display:grid;gap:0}
.who{gap:10px}
.who>div{padding:12px 14px;border-radius:8px;background:var(--sunk)}
.who dt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;margin-bottom:3px}
.who dd{margin:0;color:var(--muted);font-size:.9688rem;line-height:1.5}
.who-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.pair-cell{display:flex;flex-direction:column}
.pair-cell>.link{margin-top:auto;align-self:flex-start}
.price strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

.start{padding:104px 0 120px;text-align:center;overflow-x:clip}
.start-light{position:absolute;inset:0;z-index:-1;background:radial-gradient(520px 380px at 50% 34%,#78d3ae1c,#78d3ae00 70%);pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 70%,transparent)}
.start-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.start-ap{width:148px;height:148px;margin-bottom:36px;position:relative}
.start-ap::before{content:"";position:absolute;inset:-30%;background:radial-gradient(closest-side,rgba(207,248,229,.42),rgba(159,232,201,.1) 55%,rgba(159,232,201,0));pointer-events:none}
.start-iris{position:relative;width:100%;height:100%;display:block;overflow:visible}
.start .vault-end{-webkit-mask-image:radial-gradient(circle closest-side,#000 16%,transparent 52%);mask-image:radial-gradient(circle closest-side,#000 16%,transparent 52%)}
.start h2{font-size:clamp(2.25rem,4vw,3.25rem)!important}
.start p{color:var(--muted);margin:16px 0 32px;font-size:1.0625rem}

/* ---- capability explainers: native popovers in the top layer (outside every card) ---- */
.cap-pop{position:fixed;inset:auto;margin:0;width:min(360px,calc(100vw - 32px));padding:18px 18px 16px;border:1px solid var(--hair);border-radius:12px;background:var(--panel-hi);color:var(--text);box-shadow:inset 0 1px 0 #ffffff0d,0 1px 2px #00000040,0 24px 60px -24px #000000b3;opacity:1;transform:none;transition:opacity 160ms ease-out,transform 160ms ease-out,overlay 160ms allow-discrete,display 160ms allow-discrete}
.cap-pop:not(:popover-open){opacity:0;transform:translateY(4px)}
@starting-style{.cap-pop:popover-open{opacity:0;transform:translateY(4px)}}
.cap-pop.is-open{display:block}
.no-popover .cap-pop:not(.is-open){display:none}
.cap-pop::backdrop{background:transparent}
.pop-h{font-weight:600;font-size:1rem;letter-spacing:-.01em;margin:0 36px 8px 0}
.pop-p{color:var(--muted);font-size:.9063rem;line-height:1.5}
.pop-p+.pop-p{margin-top:6px}
.pop-link{display:flex;align-items:center;min-height:44px;margin-top:8px;color:var(--text);font-weight:600;font-size:.875rem}
.pop-link:hover{color:var(--settled)}
.pop-x{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--faint);font-size:20px;line-height:1}
.pop-x:hover{background:var(--hover);color:var(--text)}
@media (max-width:500px){
  .cap-pop{left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;border-radius:16px 16px 0 0;border-bottom:0;padding:22px 18px calc(12px + env(safe-area-inset-bottom));transform:none}
  .cap-pop:not(:popover-open){transform:translateY(16px)}
  @starting-style{.cap-pop:popover-open{transform:translateY(16px)}}
  .cap-pop::backdrop{background:rgba(0,0,0,.5)}
  .pop-x{width:44px;height:44px;top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){.cap-pop{transition:none}}

/* ---- footer (canonical markup) ---- */
.footer{padding:64px 0 0;background:transparent;font-size:.875rem}
.footer .brand{font-size:1.2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px;padding-bottom:40px}
.footer-brand p{color:var(--muted);margin-top:12px;max-width:18rem}
.footer-column{display:flex;flex-direction:column;gap:10px}
.footer-column strong{font-weight:600;margin-bottom:6px}
.footer-column a{color:var(--muted);display:inline-flex;align-items:center;gap:4px;transition:color .2s}
.footer-column a:hover{color:var(--text)}
.footer-column .icon{width:13px;height:13px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 0 20px;font-size:.78rem;color:var(--faint)}
.footer-social{display:flex;gap:16px}
.footer-social a{color:var(--muted)}
.footer-legal{padding:0 0 30px;font-size:.75rem;line-height:1.75;color:var(--faint)}.footer-legal p{margin:0}
.footer-legal a{text-decoration:underline}

.fb-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6)}.fb-overlay[hidden]{display:none}.fb-panel{position:relative;width:min(92vw,460px);max-height:min(88vh,640px);overflow-y:auto;background:var(--panel-hi);color:var(--text);box-shadow:var(--panel-edge);border-radius:18px;padding:24px 24px 20px}.fb-close{position:absolute;top:12px;right:12px;width:32px;height:32px;background:transparent;border:0;color:var(--muted);font-size:20px;line-height:1}.fb-modes{display:flex;flex-wrap:wrap;gap:6px;margin:0 32px 18px 0}.fb-mode{font-size:.8rem;font-weight:600;padding:7px 11px;border-radius:8px;border:0;box-shadow:0 0 0 1px var(--hair-2);background:transparent;color:var(--muted)}.fb-mode[aria-selected=true]{background:var(--selected,#282d39);color:var(--text)}.fb-heading{font-size:1.2rem;font-weight:600;margin:0 0 14px}.fb-label{display:block;font-size:.8rem;font-weight:600;margin:0 0 6px}.fb-label span{font-weight:400;color:var(--muted)}.fb-textarea,.fb-input{width:100%;font:inherit;font-size:.9375rem;color:var(--text);background:var(--panel-hi);border:1px solid var(--hair);border-radius:6px;padding:0 12px;min-height:40px;margin-bottom:14px;box-shadow:0 1px 2px #00000020;transition:border-color 160ms ease-out,box-shadow 160ms ease-out}.fb-textarea{padding:10px 12px}.fb-textarea:hover,.fb-input:hover{border-color:var(--faint)}.fb-textarea:focus,.fb-input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px #9baeff38}.fb-textarea{min-height:120px}.fb-error{margin:-4px 0 12px;padding:8px 10px;border-radius:6px;background:var(--stop-bg);color:var(--stop);font-size:.8125rem;line-height:1.4}.fb-acts{display:flex;gap:8px;align-items:center}.fb-note{font-size:.75rem;color:var(--muted);margin:14px 0 0}.fb-result-p{font-size:.9rem;margin:0 0 16px}.fb-panel .button{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--mint);background:var(--mint);color:#0d0f13;font-size:.8125rem;font-weight:600;box-shadow:0 1px 2px #00000020}.fb-panel .button.secondary{background:var(--panel-hi);color:var(--text);border-color:var(--hair)}

/* ---- responsive ---- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"text" "ap";row-gap:48px;justify-items:start;text-align:left}
  .vault{-webkit-mask-image:radial-gradient(circle closest-side,#000 20%,transparent 44%);mask-image:radial-gradient(circle closest-side,#000 20%,transparent 44%)}
  .ap-stage{width:min(100%,400px)}
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stops{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr;gap:32px}
  .dash-body{grid-template-columns:1fr}
  .dash-rec{border-bottom-left-radius:11px}
  .stops{gap:12px}
}
@media (max-width:860px){
  .nav{gap:16px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--night);box-shadow:0 24px 40px -24px #000000b3;padding:8px 16px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0}
  .nav-sign{display:block}
  .sign-in{display:none}
  .nav-end{margin-left:auto;gap:10px}
  .menu-button{display:inline-flex}
  .sec-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  .pair-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:500px){
  body{font-size:16px}
  .container{width:calc(100% - 32px)}
    .nav{min-height:62px}
  .brand{font-size:1.25rem}
  .brand svg{width:22px;height:22px}
  .hero{padding:22px 0 48px}
  .hero-grid{row-gap:22px}
  .ap-stage{width:min(58vw,220px)}
  .readout{margin-top:12px}
  .ro-top{padding:8px 12px}
  .ro-ticker{padding:9px 12px 8px;font-size:.875rem;min-height:3.1em;text-align:left}
  .ro-foot{padding:4px 4px 4px 12px;font-size:.6875rem}
  .ap-hold{width:44px;height:44px;border-color:transparent}
  .tagline{margin-bottom:12px;font-size:.875rem}
  .hero h1{font-size:2.25rem;line-height:1.04}
  .lede{font-size:1rem;margin:14px 0 22px}
  .actions .btn{flex:1 1 100%}
  .platforms{margin-top:22px}
  .sec,.pair{padding:48px 0}
  .sec-head{margin-bottom:32px}
  .pp-top{padding:13px 18px}
  .pp-hint{display:none}
  .pp-text{padding:22px 18px 6px;gap:10px;font-size:1rem}
  .pp-actions{padding:18px 18px 20px}
  .pp-actions .btn{width:100%}
  .pp-actions .link{margin-left:0}
  .stops{margin-top:44px;gap:28px}
  .stops li{grid-template-columns:56px minmax(0,1fr);column-gap:16px}
  .stop-ap{width:56px;height:56px}
  .research{margin-top:40px}
  .caps{grid-template-columns:1fr;gap:12px}
  .cap{padding:18px 18px 20px}
  .cap-q{min-height:44px;padding:0 12px}
  .providers{padding:14px 16px}
  .research{padding:14px 16px}
  .stops li{padding:18px}
  .pipe{margin-top:48px;padding:24px 18px}
  .pipe h3{font-size:1.375rem}
  .pipe-run li{grid-template-columns:1fr;gap:3px;padding:14px 16px}
  .dash-top{flex-direction:column;align-items:flex-start;gap:10px;padding:13px 14px}
  .dash-tabs{gap:4px 16px;font-size:.8125rem}
  .dash-table .wide{display:none}
  .dash-table th,.dash-table td{padding-inline:14px}
  .dash-rec{padding:14px}
  .pair-cell{padding:28px 20px 30px}
  .start{padding:56px 0 72px}
  .start-ap{width:116px;height:116px;margin-bottom:28px}
  .start .btn{width:100%}
  .footer-grid{gap:28px}
}
@media (max-width:360px){.hero h1{font-size:2rem}.nav-end .btn-small{display:none}.platforms li{padding:0 10px}}

/* footer bottom: the company line, then the social icons on their own line (29 Sep) */
.footer-bottom{flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:14px!important}.footer-bottom>*{order:1!important}.footer-bottom>.footer-social{order:0!important}


/* ---- PHONES (≤500px): the restraint of a product page ----
   Left-aligned words, a short muted description, two buttons side by side where they fit
   (stacked below 340px of content), then the iris and its status. No glow anywhere. */
@media (max-width:500px){
  .hero{padding-top:28px}
  .hero-grid{row-gap:36px}
  .tagline{font-size:.8125rem;margin-bottom:14px}
  .hero h1{font-size:clamp(2rem,8.6vw,2.25rem);line-height:1.06;max-width:none}
  .lede{font-size:.9375rem;line-height:1.55;margin:14px 0 22px;max-width:34ch}
  .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;width:100%}
  .actions .btn{flex:none;width:100%;min-height:44px;padding:0 12px;font-size:.875rem}
  .hero .fine{margin-top:14px}
  .platforms{margin-top:16px}
  .ap{align-items:flex-start;width:100%}
  .ap-stage{width:min(52vw,200px);margin-inline:auto}
  .readout{width:100%}
  
  
  
  
}

/* "Start building" next-step panel: the prompt is copied, here is what to do */
.next-step{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:min(420px,calc(100% - 32px));padding:16px 44px 16px 18px;background:#16191f;border:1px solid var(--hair);border-radius:12px;box-shadow:inset 0 1px 0 #ffffff0d,0 1px 2px #00000040,0 24px 60px -24px #000000b3;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out}
.next-step.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.next-step .ns-h{margin:0 0 4px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.next-step .ns-h::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--mint)}
.next-step .ns-b{margin:0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.next-step .ns-prompt{margin:10px 0 0;padding:10px 12px;background:#1a1d24;border:1px solid var(--hair);border-radius:6px;font-family:"Geist Mono",ui-monospace,monospace;font-size:.8125rem;line-height:1.5;color:var(--text);user-select:all;overflow-wrap:anywhere}
.next-step .ns-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:6px;background:none;color:var(--faint);font-size:1.25rem;line-height:1;cursor:pointer}
.next-step .ns-x:hover{color:var(--text);background:#1c2029}
.next-step .ns-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.next-step{transition:none}}

/* the dashboard table: the "Latest change" column needs about 610px of page; below that it folds away
   (the phone rule above hides it at 500px and under; this closes the 501–620px gap that scrolled sideways) */
@media (max-width:620px){.dash-table .wide{display:none}}