/* Arctaur. The frame is sharp and neutral (Instrument Sans); each product keeps its own world:
   Ariadne (Newsreader, Courier Prime, warm dark, gold), Oplys (Lysning: Newsreader, Public Sans, cream, ember),
   Kallus (Archivo, plate colours), Orbis (Luminous Cosmogram: Libre Baskerville, Jost, void, gold leaf). */

/* ---------- Fonts, all served from this site ---------- */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(../fonts/instrument-sans-latin-standard-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(../fonts/instrument-sans-latin-ext-standard-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin-opsz-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(../fonts/newsreader-latin-opsz-italic.woff2) format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/courier-prime-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/public-sans-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/Jost-VF.ttf) format('truetype'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/LibreBaskerville-VF.ttf) format('truetype'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/LibreBaskerville-Italic-VF.ttf) format('truetype'); }

/* ---------- Frame tokens and base ---------- */
:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --tile: #ececE8;
  --ink: #111113;
  --muted: #64645f;
  --line: #e2e2de;
  --focus: #1e58d2;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Newsreader', Georgia, serif;
  --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; font-family: inherit; background: var(--ink); color: var(--bg); transition: transform .2s ease, opacity .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }

/* ---------- Wordmark: the A is the constellation, standing on the baseline at cap height ---------- */
.wordmark { display: inline-flex; align-items: baseline; font-weight: 600; letter-spacing: -.02em; line-height: 1; text-decoration: none; color: inherit; }
.wordmark svg { height: .76em; width: calc(.76em * 52.4 / 52); overflow: visible; margin-right: .05em; }

/* ---------- Header ---------- */
.site-header { --h-bg: var(--bg); --h-ink: var(--ink); --h-muted: var(--muted); --h-hover: var(--tile); --h-btn: var(--ink); --h-btn-ink: var(--bg);
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--h-bg) 88%, transparent); color: var(--h-ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header .wrap { display: flex; align-items: center; height: 72px; gap: 20px; }
.brand { font-size: 23px; }
.site-nav { margin-left: auto; display: flex; gap: 2px; }
.site-nav a, .menu nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--h-muted); }
.site-nav a:hover, .site-nav a[aria-current] { background: var(--h-hover); color: var(--h-ink); }
.header-cta { background: var(--h-btn); color: var(--h-btn-ink); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s; }
.menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu nav { position: absolute; right: 0; top: 54px; min-width: 220px; display: grid; padding: 8px; border-radius: 20px; background: var(--h-bg); box-shadow: 0 20px 50px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--h-ink) 12%, transparent); }
.menu nav a { font-size: 17px; padding: 12px 16px; color: var(--h-ink); }
.menu nav a[aria-current] { background: var(--h-hover); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 120px; padding: 56px 0 40px; background: var(--bg); color: var(--ink); }
.site-footer > .wrap:first-child { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand .wordmark { font-size: 26px; }
.foot-brand p { color: var(--muted); margin: 12px 0 0; font-size: 15px; }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-cols h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.foot-cols div { display: grid; gap: 6px; align-content: start; }
.foot-cols a { text-decoration: none; font-size: 15px; }
.foot-cols a:hover { text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; color: var(--muted); font-size: 14px; }

/* ---------- Home: opening and the four doors ---------- */
.opening { padding: 56px 0 120px; }
.opening-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.opening h1 { font-size: clamp(46px, 6.8vw, 108px); font-weight: 600; font-stretch: 88%; line-height: .94; letter-spacing: -.04em; margin: 0; }
.opening h1 span { color: var(--muted); }
.opening-top p { font-size: 19px; color: var(--muted); margin: 0 0 22px; max-width: 34ch; }
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.door { position: relative; overflow: hidden; border-radius: 24px; height: 380px; text-decoration: none; display: flex; flex-direction: column; padding: 22px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.door:hover { transform: translateY(-6px); }
.door .top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.door .top img { width: 40px; height: 40px; border-radius: 9px; }
.chip { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; font-family: var(--sans); }
.door .name { position: relative; z-index: 2; margin-top: auto; }
.door h2, .door h3 { margin: 0; line-height: 1; }
.door .line { margin: 8px 0 0; font-size: 15px; line-height: 1.35; max-width: 24ch; opacity: .85; }
.door .n { position: absolute; z-index: 2; left: 22px; top: 76px; font-family: var(--mono); font-size: 12px; opacity: .6; }
.d-ariadne { background: #262320; color: #e9e2d6; }
.d-ariadne h2, .d-ariadne h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 46px; color: #d9a441; }
.d-ariadne .line { font-family: var(--serif); font-size: 18px; }
.d-ariadne .chip { background: rgba(217,164,65,.14); color: #d9a441; }
.d-ariadne .code { position: absolute; left: 22px; right: 22px; top: 112px; font-family: 'Courier Prime', monospace; font-size: 13.5px; line-height: 1.75; color: #6a635a; white-space: nowrap; overflow: hidden; }
.code b, .codeblock b { color: #d9a441; font-weight: 400; }
.code i, .codeblock i { color: #72bcab; font-style: normal; }
.codeblock u { color: #6a635a; text-decoration: none; }
.d-oplys { background: #efebe1; color: #1f2b25; }
.d-oplys h2, .d-oplys h3 { font-family: var(--serif); font-weight: 500; font-size: 44px; letter-spacing: -.02em; }
.d-oplys .line { font-family: 'Public Sans', sans-serif; color: #53655a; opacity: 1; }
.d-oplys .chip { background: #f8f5ee; color: #a3481b; border: 1px solid #d9d2c1; }
.spines { position: absolute; left: 22px; right: 22px; top: 120px; display: flex; gap: 6px; align-items: end; height: 120px; }
.spines i { flex: 1; border-radius: 4px 4px 2px 2px; }
.spines .s1 { height: 78%; background: #7a4a2c; } .spines .s2 { height: 100%; background: #1f2b25; } .spines .s3 { height: 86%; background: #2f4a56; }
.spines .s4 { height: 92%; background: #465a3b; } .spines .s5 { height: 70%; background: #1f2b25; } .spines .s6 { height: 84%; background: #7a4a2c; }
.spines .beam { flex: 1.4; height: 100%; background: linear-gradient(180deg, rgba(194,90,38,0), #c25a26); opacity: .85; }
.d-kallus { background: #1e58d2; color: #fff; }
.d-kallus h2, .d-kallus h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 50px; }
.d-kallus .line { font-family: 'Archivo', sans-serif; font-weight: 600; }
.d-kallus .chip { background: rgba(255,255,255,.16); color: #fff; }
.plates { display: flex; gap: 8px; align-items: center; }
.plates i { display: block; border-radius: 6px; width: 22px; }
.plates .red { background: #cf3426; height: 52%; } .plates .white { background: #fff; height: 78%; } .plates .yellow { background: #e9ab00; height: 100%; } .plates .green { background: #17925a; height: 68%; }
.d-kallus .plates { position: absolute; left: 22px; top: 122px; height: 120px; }
.d-orbis { background: #04050a url(../img/shots/orbis-zoom-poster.jpg) 30% 50%/cover; color: #f4f1ea; }
.d-orbis::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,5,10,.9), rgba(4,5,10,0) 60%); }
.d-orbis h2, .d-orbis h3 { font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .28em; font-size: 38px; }
.d-orbis .line { font-family: 'Libre Baskerville', serif; font-style: italic; color: #d9b46a; opacity: 1; }
.d-orbis .chip { border: 1px solid #d9b46a; color: #f1dda8; }

/* Kallus is the odd one out, and wears a sticker saying so */
.odd { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 100%; font-size: 13px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #12233b; background: #e9ab00; padding: 7px 10px 6px; border-radius: 6px; transform: rotate(-6deg); box-shadow: 0 6px 14px rgba(0,0,0,.18); white-space: nowrap; }
.title .odd { display: table; font-size: 14px; margin: 16px 0 6px; letter-spacing: .05em; }
.door .odd { position: absolute; z-index: 2; right: 18px; top: 150px; transform: rotate(7deg); }

/* ---------- Product bands (home sections and product heroes) ---------- */
.band { position: relative; overflow: hidden; }
.band > .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; min-height: 92vh; padding-top: 104px; padding-bottom: 104px; }
.band .num { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.band .num img { width: 40px; height: 40px; border-radius: 9px; }
.band h1, .band h2 { margin: 0; }
.facts { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; gap: 10px; }
.facts li { padding-left: 22px; position: relative; }
.facts li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: currentColor; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.more-link { font-weight: 600; text-underline-offset: 4px; }
.win { border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); background: #1f1c19; }
.win .bar { height: 30px; display: flex; gap: 7px; align-items: center; padding: 0 12px; background: #2c2824; }
.win .bar i { width: 11px; height: 11px; border-radius: 50%; background: #4e463c; }
.win.light { background: #fff; box-shadow: 0 40px 80px -24px rgba(18,35,59,.35), 0 0 0 1px #dbe1e8; }
.win.light .bar { background: #e9edf2; } .win.light .bar i { background: #c3cbd5; }
.phones { display: flex; gap: 24px; justify-content: center; align-items: flex-start; }
.phone { width: min(270px, 42%); border-radius: 42px; padding: 9px; background: #111; box-shadow: 0 40px 70px -24px rgba(0,0,0,.45); }
.phone img { border-radius: 33px; aspect-ratio: 390/844; object-fit: cover; object-position: top; width: 100%; }
.phone.lower { margin-top: 64px; }

.b-ariadne { background: #262320; color: #e9e2d6; font-family: var(--serif); }
.b-ariadne .title { font-style: italic; font-weight: 500; font-size: clamp(56px, 7vw, 96px); color: #d9a441; letter-spacing: -.02em; display: flex; align-items: center; gap: 24px; line-height: 1.05; }
.b-ariadne .title::after { content: ''; height: 1.5px; flex: 0 0 120px; background: #d9a441; }
.b-ariadne .lead { font-size: 30px; line-height: 1.25; margin: 18px 0 0; max-width: 20ch; }
.b-ariadne .sub { color: #a69c8f; font-size: 19px; max-width: 42ch; }
.b-ariadne .num { font-family: 'Courier Prime', monospace; color: #a69c8f; }
.b-ariadne .facts { font-size: 18px; }
.b-ariadne .facts li::before { background: #72bcab; }
.b-ariadne .btn { background: #d9a441; color: #1f1c19; font-family: var(--sans); }
.b-ariadne .more-link { color: #d9a441; font-family: var(--sans); font-size: 15px; }

.b-oplys { background: #efebe1; color: #1f2b25; font-family: 'Public Sans', system-ui, sans-serif; }
.b-oplys > .wrap { grid-template-columns: 1.1fr 1fr; }
.b-oplys .name { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -.02em; }
.b-oplys .title { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.02em; margin: 14px 0 0; }
.b-oplys .title em { font-style: normal; color: #a3481b; }
.b-oplys .sub { color: #53655a; font-size: 18px; max-width: 44ch; }
.b-oplys .num { color: #53655a; }
.b-oplys .facts li::before { background: #c25a26; }
.b-oplys .btn { background: #a3481b; color: #fff; font-family: 'Public Sans', sans-serif; }
.b-oplys .more-link { color: #a3481b; font-size: 15px; }

.b-kallus { background: #1e58d2; color: #fff; font-family: 'Archivo', system-ui, sans-serif; }
.b-kallus .title { font-weight: 900; font-stretch: 72%; font-size: clamp(64px, 9vw, 132px); line-height: .86; letter-spacing: -.02em; text-transform: uppercase; }
.b-kallus .lead { font-size: 28px; font-weight: 600; margin: 22px 0 0; line-height: 1.15; }
.b-kallus .sub { opacity: .9; font-size: 18px; max-width: 44ch; }
.b-kallus .plates { gap: 6px; margin-bottom: 26px; height: 48px; }
.b-kallus .plates i { width: 14px; border-radius: 4px; }
.b-kallus .btn { background: #fff; color: #12233b; font-family: 'Archivo', sans-serif; }
.b-kallus .more-link { color: #fff; font-size: 15px; }
.b-kallus .facts li::before { background: #e9ab00; height: 3px; }

.b-orbis { background: #04050a; color: #f4f1ea; font-family: 'Jost', system-ui, sans-serif; font-weight: 300; }
.b-orbis > .wrap { grid-template-columns: 1fr 1fr; min-height: 100vh; }
.b-orbis .title { font-family: 'Libre Baskerville', serif; font-weight: 400; font-size: clamp(56px, 7vw, 104px); letter-spacing: .28em; line-height: 1.1; }
.b-orbis .lead { font-family: 'Libre Baskerville', serif; font-style: italic; color: #d9b46a; font-size: 24px; margin: 18px 0 0; }
.b-orbis .sub { font-size: 18px; max-width: 42ch; color: #d8d3c8; font-weight: 400; }
.b-orbis .num { color: #d9b46a; }
.b-orbis .rule { height: 1px; background: linear-gradient(90deg, #d9b46a, transparent); margin: 30px 0; max-width: 420px; }
.b-orbis .btn, .t-orbis .btn { background: transparent; border: 1px solid #d9b46a; color: #f1dda8; font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.btn.play { background: #d9b46a !important; color: #04050a !important; }
.btn.play::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.b-orbis .soon { font-size: 15px; color: #a9a59b; margin-top: 14px; }
.b-orbis .more-link { color: #f1dda8; font-size: 15px; font-weight: 500; }

/* Orbis: the zoom from the trailer, galaxy to planet, loops behind the band */
.zoom-bg { position: absolute; inset: 0; background: #04050a url(../img/shots/orbis-zoom-poster.jpg) 65% 50%/cover; }
.zoom-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; transition: opacity .7s ease; }
.zoom-bg video.fading { opacity: 0; }
.zoom-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #04050a 18%, rgba(4,5,10,.55) 50%, rgba(4,5,10,0) 80%); }

/* Trailer player */
dialog.trailer { width: min(1200px, 94vw); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; color: #fff; }
dialog.trailer::backdrop { background: rgba(4,5,10,.88); backdrop-filter: blur(6px); }
dialog.trailer video { width: 100%; aspect-ratio: 16/9; }
dialog.trailer .close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 20px; cursor: pointer; }

/* ---------- Tiles: beta sign-up, the name, and other closing tiles ---------- */
.closing { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; padding-top: 120px; }
.tile { border-radius: var(--radius); padding: 36px; }
.beta-tile { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-family: var(--sans); }
.beta-tile h2 { font-size: 44px; font-weight: 600; letter-spacing: -.035em; margin: 0 0 8px; line-height: 1; }
.beta-intro { color: var(--muted); margin: 0 0 24px; max-width: 46ch; }
.hp { position: absolute; left: -9999px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.opts label { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; }
.opts label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opts img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.opts small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.opts input { margin-left: auto; width: 20px; height: 20px; accent-color: var(--ink); flex: none; }
.email { display: flex; gap: 10px; }
.email input { flex: 1; min-width: 0; height: 50px; border-radius: 999px; border: 1px solid #cfcfca; background: var(--bg); padding: 0 20px; font: inherit; color: var(--ink); }
.email .btn { height: 50px; }
.fine { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.fine a { color: inherit; }
.elsewhere { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.elsewhere a { color: var(--ink); font-weight: 600; }
.join-tile { display: flex; flex-direction: column; align-items: flex-start; }
.join-tile .btn { margin-top: 4px; }
.form-status { margin: 10px 0 0; font-weight: 600; min-height: 0; }
.form-status:empty { display: none; }
.form-status.error { color: #b4321f; }
.beta-done h3 { font-size: 30px; letter-spacing: -.03em; margin: 8px 0; }
.beta-done p { color: var(--muted); margin: 0; }

.name-tile { background: var(--ink); color: #f7f7f5; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.name-tile .wordmark { font-size: 76px; letter-spacing: -.035em; }
.name-tile h2 { font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1; margin: 0 0 12px; }
.name-tile h2 span { color: #8d8d88; }
.name-tile p { color: #c3c3be; margin: 0 0 14px; max-width: 40ch; }
.name-tile a { color: #fff; font-weight: 600; }

/* ---------- Product pages: one set of components, themed per product ---------- */
.theme-ariadne { --p-bg: #262320; --p-bg2: #1f1c19; --p-surface: #2c2824; --p-ink: #e9e2d6; --p-muted: #a69c8f; --p-line: #3a342d; --p-accent: #d9a441; --p-on-accent: #1f1c19; --p-accent2: #72bcab;
  --p-display: 'Newsreader', Georgia, serif; --p-display-style: italic; --p-display-weight: 500; --p-display-case: none; --p-display-track: -.02em; --p-display-stretch: 100%; --p-body: 'Newsreader', Georgia, serif; --p-body-size: 19px; --p-body-weight: 400; }
.theme-oplys { --p-bg: #efebe1; --p-bg2: #e7e2d5; --p-surface: #f8f5ee; --p-ink: #1f2b25; --p-muted: #53655a; --p-line: #d9d2c1; --p-accent: #a3481b; --p-on-accent: #fff; --p-accent2: #3e6a4c;
  --p-display: 'Newsreader', Georgia, serif; --p-display-style: normal; --p-display-weight: 600; --p-display-case: none; --p-display-track: -.02em; --p-display-stretch: 100%; --p-body: 'Public Sans', system-ui, sans-serif; --p-body-size: 17px; --p-body-weight: 400; }
.theme-kallus { --p-bg: #f2f4f7; --p-bg2: #e9edf2; --p-surface: #fff; --p-ink: #12233b; --p-muted: #56667c; --p-line: #dbe1e8; --p-accent: #1e58d2; --p-on-accent: #fff; --p-accent2: #17925a;
  --p-display: 'Archivo', system-ui, sans-serif; --p-display-style: normal; --p-display-weight: 900; --p-display-case: uppercase; --p-display-track: -.01em; --p-display-stretch: 72%; --p-body: 'Archivo', system-ui, sans-serif; --p-body-size: 17px; --p-body-weight: 400; }
.theme-orbis { --p-bg: #04050a; --p-bg2: #0b0f24; --p-surface: #0b0f24; --p-ink: #f4f1ea; --p-muted: #b2ada2; --p-line: rgba(217,180,106,.28); --p-accent: #d9b46a; --p-on-accent: #04050a; --p-accent2: #3fc1b5;
  --p-display: 'Libre Baskerville', Georgia, serif; --p-display-style: normal; --p-display-weight: 400; --p-display-case: none; --p-display-track: .02em; --p-display-stretch: 100%; --p-body: 'Jost', system-ui, sans-serif; --p-body-size: 18px; --p-body-weight: 400; }

[class*='theme-'] .site-header { --h-bg: var(--p-bg); --h-ink: var(--p-ink); --h-muted: var(--p-muted); --h-hover: color-mix(in srgb, var(--p-ink) 10%, transparent); --h-btn: var(--p-accent); --h-btn-ink: var(--p-on-accent); }
.theme-kallus .site-header { --h-bg: #1e58d2; --h-ink: #fff; --h-muted: rgba(255,255,255,.82); --h-hover: rgba(255,255,255,.16); --h-btn: #fff; --h-btn-ink: #12233b; }
.theme-kallus .site-header.scrolled { --h-bg: var(--p-bg); --h-ink: var(--p-ink); --h-muted: var(--p-muted); --h-hover: var(--p-line); --h-btn: var(--p-accent); --h-btn-ink: #fff; }

.p-world { background: var(--p-bg); color: var(--p-ink); font-family: var(--p-body); font-size: var(--p-body-size); font-weight: var(--p-body-weight); }
.p-sec { padding: 112px 0; }
.p-sec + .p-sec { padding-top: 0; }
.p-sec.alt { background: var(--p-bg2); padding-top: 112px; }
.p-head { max-width: 760px; margin-bottom: 56px; }
.p-head .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-accent); margin-bottom: 16px; }
.theme-orbis .p-head .eyebrow, .theme-ariadne .p-head .eyebrow { font-family: 'Courier Prime', monospace; }
.theme-orbis .p-head .eyebrow { font-family: 'Jost', sans-serif; letter-spacing: .2em; }
.p-h { font-family: var(--p-display); font-style: var(--p-display-style); font-weight: var(--p-display-weight); text-transform: var(--p-display-case); letter-spacing: var(--p-display-track); font-stretch: var(--p-display-stretch); font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; margin: 0 0 18px; }
.theme-kallus .p-h { line-height: .92; }
.theme-ariadne .p-h { color: var(--p-accent); }
.p-head p { color: var(--p-muted); margin: 0; font-size: 1.08em; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.feature { border-top: 1px solid var(--p-line); padding: 26px 0 34px; }
.feature h3 { font-family: var(--p-body); font-weight: 600; font-size: 1.12em; margin: 0 0 8px; letter-spacing: -.005em; }
.theme-ariadne .feature h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; color: var(--p-accent); }
.theme-orbis .feature h3 { font-family: 'Libre Baskerville', serif; font-weight: 400; font-size: 20px; color: #f1dda8; }
.theme-kallus .feature h3 { font-weight: 800; }
.feature p { margin: 0; color: var(--p-muted); }
.feature .k { display: block; font-family: var(--mono); font-size: 12px; color: var(--p-accent); margin-bottom: 14px; }

.show { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; padding: 48px 0; }
.show.flip { grid-template-columns: 1fr 1.3fr; }
.show.flip .show-media { order: 2; }
.show h3 { font-family: var(--p-display); font-style: var(--p-display-style); font-weight: var(--p-display-weight); text-transform: var(--p-display-case); font-stretch: var(--p-display-stretch); letter-spacing: var(--p-display-track); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 0 0 14px; }
.theme-ariadne .show h3 { color: var(--p-accent); }
.show p { color: var(--p-muted); margin: 0 0 12px; }
.show-media img { border-radius: 12px; }
.show-media .shadow { box-shadow: 0 30px 70px -20px rgba(0,0,0,.5), 0 0 0 1px var(--p-line); }
.show-media .phones { justify-content: flex-start; }

.codeblock { background: var(--p-bg2); border: 1px solid var(--p-line); border-radius: 14px; padding: 26px 28px; overflow-x: auto; font-family: 'Courier Prime', monospace; font-size: 16px; line-height: 1.75; color: #e9e2d6; margin: 0; }
.codeblock code { font: inherit; white-space: pre; }
.codeblock .hd { color: #d9a441; border-bottom: 1px solid #4e463c; display: inline-block; min-width: 100%; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.steps li { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 20px; padding: 26px 24px; counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--p-accent); color: var(--p-on-accent); font-weight: 700; margin-bottom: 18px; font-family: var(--p-body); }
.steps h3 { margin: 0 0 6px; font-size: 1.08em; }
.steps p { margin: 0; color: var(--p-muted); font-size: .95em; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 20px; padding: 30px; }
.plan h3 { font-family: var(--p-display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 34px; margin: 0 0 6px; }
.plan > p { color: var(--p-muted); margin: 0 0 18px; }
.plan ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.plan.free { border-color: var(--p-accent2); box-shadow: inset 0 0 0 1px var(--p-accent2); }

.quote { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.35; color: #f1dda8; max-width: 26ch; margin: 0; }
.quote-by { font-family: 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; color: var(--p-muted); margin-top: 20px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; border: 1px solid var(--p-line); width: 100%; }
.gallery figcaption { font-size: 14px; color: var(--p-muted); margin-top: 8px; }
.gallery .wide { grid-column: span 2; }

.status { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.status > div { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 20px; padding: 28px 30px; }
.status h3 { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--p-accent); }
.status ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.status li::marker { color: var(--p-accent); }

.faq { border-top: 1px solid var(--p-line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--p-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 600; font-size: 1.05em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--p-accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--p-muted); max-width: 70ch; }

/* The product's own card beside the sign-up form */
.p-card { background: var(--p-bg); color: var(--p-ink); font-family: var(--p-body); display: flex; flex-direction: column; gap: 22px; }
.theme-kallus .p-card { background: #1e58d2; color: #fff; --p-muted: rgba(255,255,255,.82); --p-line: rgba(255,255,255,.25); }
.p-card img { width: 64px; height: 64px; border-radius: 15px; }
.p-card h2 { font-family: var(--p-display); font-style: var(--p-display-style); font-weight: var(--p-display-weight); text-transform: var(--p-display-case); font-stretch: var(--p-display-stretch); letter-spacing: var(--p-display-track); font-size: 44px; line-height: 1; margin: 0; }
.theme-ariadne .p-card h2 { color: var(--p-accent); }
.p-card dl { margin: auto 0 0; display: grid; gap: 0; }
.p-card dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--p-line); }
.p-card dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--p-muted); padding-top: 3px; }
.p-card dd { margin: 0; }
.p-card a { color: inherit; font-weight: 600; }
.note { font-size: 15px; color: var(--p-muted); margin-top: 24px; max-width: 70ch; }

/* Other products, as small doors */
.more { margin-top: 72px; }
.more-head { font-size: 15px; color: var(--muted); margin: 0 0 16px; }
.more-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.more-doors .door { height: 220px; }
.more-doors.four { grid-template-columns: repeat(4, 1fr); }
.more-doors .door .odd { top: 74px; }
.more-doors .door .n, .more-doors .door .code, .more-doors .door .spines, .more-doors .door .plates { display: none; }

/* ---------- Text pages: about, press, legal, thanks ---------- */
.page-head { padding: 72px 0 56px; }
.page-head h1 { font-size: clamp(44px, 6vw, 88px); font-weight: 600; font-stretch: 88%; letter-spacing: -.04em; line-height: .95; margin: 0 0 20px; }
.page-head h1 span { color: var(--muted); }
.page-head p { font-size: 20px; color: var(--muted); max-width: 52ch; margin: 0; }
.prose { max-width: 720px; }
.prose h2 { font-size: 28px; letter-spacing: -.025em; margin: 48px 0 12px; line-height: 1.15; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p, .prose li { color: #2f2f2c; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose .updated { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); }
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table th, .facts-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16px; }
.facts-table th { width: 34%; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; padding-right: 16px; }
.downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.downloads a { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); text-decoration: none; font-weight: 600; }
.downloads a:hover { border-color: var(--ink); }
.press-top { display: grid; gap: 24px; }
.press-top .facts-table { max-width: 900px; }
.logo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-box { border-radius: 22px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.logo-box .art { height: 200px; display: grid; place-items: center; }
.logo-box .art.dark { background: var(--ink); color: #f7f7f5; }
.logo-box .art .wordmark { font-size: 56px; }
.logo-box .art svg.big { width: 90px; height: 90px; }
.logo-box .downloads { margin: 0; padding: 16px; }
.press-product { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); }
.press-product img.icon { width: 96px; height: 96px; border-radius: 22px; }
.press-product h3 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 6px; }
.press-product .one { font-size: 19px; margin: 0 0 14px; }
.press-product p { margin: 0 0 12px; color: #2f2f2c; max-width: 70ch; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.thumbs a { display: block; width: 150px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.thumbs img { width: 100%; height: 96px; object-fit: cover; object-position: top; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .doors { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .site-nav, .header-cta { display: none; }
  .menu { display: block; margin-left: auto; }
  .site-header .wrap { height: 64px; }
  .opening { padding: 28px 0 72px; }
  .opening-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .doors { gap: 10px; }
  .door { height: 250px; border-radius: 20px; padding: 16px; }
  .door .top img { width: 32px; height: 32px; }
  .door .chip, .door .n, .door .line { display: none; }
  .d-ariadne .code { left: 16px; top: 64px; font-size: 11px; line-height: 1.7; }
  .d-ariadne h2, .d-ariadne h3 { font-size: 34px; } .d-oplys h2, .d-oplys h3 { font-size: 34px; } .d-kallus h2, .d-kallus h3 { font-size: 30px; } .d-orbis h2, .d-orbis h3 { font-size: 24px; }
  .spines { left: 16px; right: 16px; top: 70px; height: 90px; }
  .d-kallus .plates { left: 16px; top: 72px; height: 90px; }
  .door .odd { top: 96px; right: 10px; font-size: 10px; padding: 5px 7px 4px; }
  .title .odd { font-size: 11px; margin-top: 10px; }
  .d-kallus .plates i { width: 16px; }
  .band > .wrap, .b-oplys > .wrap, .b-orbis > .wrap { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 72px; padding-bottom: 72px; }
  .b-orbis > .wrap { min-height: 92svh; align-content: end; }
  .zoom-bg::after { background: linear-gradient(0deg, #04050a 38%, rgba(4,5,10,.45) 70%, rgba(4,5,10,.1)); }
  .zoom-bg video { object-position: 50% 30%; }
  .closing { grid-template-columns: 1fr; padding-top: 72px; }
  .tile { padding: 24px 22px; border-radius: 22px; }
  .opts { grid-template-columns: 1fr; }
  .email { flex-direction: column; }
  .email input { flex: none; }
  .name-tile .wordmark { font-size: 54px; }
  .p-sec, .p-sec.alt { padding: 72px 0; }
  .p-sec + .p-sec { padding-top: 0; }
  .p-sec.alt { padding-top: 72px; }
  .p-head { margin-bottom: 36px; }
  .features, .steps, .plans, .status, .gallery, .more-doors, .split, .cards, .logo-row { grid-template-columns: 1fr; }
  .gallery .wide { grid-column: auto; }
  .more-doors.four { grid-template-columns: 1fr 1fr; }
  .show, .show.flip { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .show.flip .show-media { order: 0; }
  .more-doors .door { height: 160px; }
  .press-product { grid-template-columns: 1fr; gap: 16px; }
  .foot-cols { gap: 36px; }
  .codeblock { font-size: 14px; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zoom-bg video { display: none; }
  .door, .btn { transition: none; }
}