/* Autrylia 2026 — one design system for every page.
   Night sections carry the story; paper sections are for reading. */
@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: optional; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/plus-jakarta-latin.woff2") format("woff2"); font-weight: 200 800; font-display: optional; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: optional; }

:root {
  --night: #03080c; --night-2: #08131a; --night-3: #0d1c25; --night-line: rgba(255,255,255,.09); --night-text: #a9bcc5;
  --paper: #f4f7f6; --white: #fff; --ink: #051017; --text: #2b3b44; --muted: #5d707a; --line: #dfe8ea;
  --cyan: #19d3db; --cyan-hi: #8ff6f2; --mint: #4be3b0; --teal: #0b6f76; --violet: #6f63ff; --amber: #ffb547; --danger: #e5484d;
  --aurora: linear-gradient(115deg, #19d3db 0%, #4be3b0 45%, #c8f56a 100%);
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-xl: 44px;
  --wrap: 1240px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
img, svg, canvas, video { display: block; max-width: 100%; }
@media (max-width:700px) { body { text-rendering: auto; } }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--cyan); color: var(--night); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 16px; }
.wrap { width: calc(100% - var(--gutter) * 2); max-width: var(--wrap); margin: 0 auto; }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.night .eyebrow { color: var(--cyan); }
.display { font: 700 clamp(44px, 8.6vw, 132px)/.9 var(--display); letter-spacing: -.045em; color: var(--ink); margin: 0; }
.h1 { font: 700 clamp(38px, 6vw, 84px)/.95 var(--display); letter-spacing: -.04em; color: var(--ink); margin: 0; text-wrap: balance; }
.h2 { font: 700 clamp(32px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.035em; color: var(--ink); margin: 0; text-wrap: balance; }
.h3 { font: 650 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0; text-wrap: pretty; }
.night .display, .night .h1, .night .h2, .night .h3 { color: var(--white); }
.night .lead { color: var(--night-text); }
.aurora-text { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.night .muted { color: var(--night-text); }
.fine { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.night .fine { color: #7d929c; }

/* ---------- Buttons ---------- */
.btn { --bg: var(--ink); --fg: var(--white); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg); font: 700 16px/1 var(--body); text-decoration: none; cursor: pointer; isolation: isolate; transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .arrow { transition: transform .35s var(--spring); }
.btn:hover .arrow { transform: translate(3px, -3px); }
.btn-glow { --bg: var(--cyan); --fg: var(--night); box-shadow: 0 0 0 1px rgba(143,246,242,.5) inset, 0 10px 40px -8px rgba(25,211,219,.65); }
.btn-glow:hover { box-shadow: 0 0 0 1px rgba(143,246,242,.8) inset, 0 16px 60px -6px rgba(25,211,219,.85); }
.btn-ghost { --bg: transparent; --fg: var(--ink); box-shadow: 0 0 0 1.5px var(--line) inset; }
.night .btn-ghost { --fg: var(--white); box-shadow: 0 0 0 1.5px rgba(255,255,255,.18) inset; }
.btn-ghost:hover { box-shadow: 0 0 0 1.5px currentColor inset; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teal); text-decoration: none; }
.night .link-arrow { color: var(--cyan); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav-bar { pointer-events: auto; display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); max-width: 1180px; margin: 0 auto; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(6,14,19,.55); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 20px 50px -20px rgba(0,0,0,.6); color: var(--white); transition: background .3s, box-shadow .3s; }
.nav.light .nav-bar { background: rgba(255,255,255,.72); color: var(--ink); box-shadow: 0 0 0 1px rgba(5,16,23,.08) inset, 0 20px 50px -24px rgba(5,16,23,.35); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--display); letter-spacing: -.03em; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; padding: 0; list-style: none; }
.nav-links a { display: block; padding: 10px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; opacity: .78; transition: opacity .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; background: rgba(255,255,255,.1); }
.nav.light .nav-links a:hover, .nav.light .nav-links a[aria-current] { background: rgba(5,16,23,.06); }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); cursor: pointer; }
.nav.light .nav-toggle { background: rgba(5,16,23,.06); }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-account { display: none; flex: none; color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 14px; border-radius: 999px; box-shadow: 0 0 0 1px currentColor inset; }
@media (max-width: 1100px) {
  .nav-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,14,19,.95); }
  .nav.light .nav-bar { background: rgba(255,255,255,.96); }
  .nav-links { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 6px; padding: 96px 28px 40px; margin: 0; background: rgba(3,8,12,.97); color: var(--white); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
  .nav-links a { font: 700 34px/1.1 var(--display); letter-spacing: -.03em; opacity: .9; padding: 12px 6px; transform: translateY(16px); transition: transform .5s var(--ease); }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links.open a { transform: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-bar .btn { display: none; }
  .nav-links .nav-cta { display: block; margin-top: 18px; }
}
.nav-links .nav-cta { display: none; }
@media (max-width: 1100px) { .nav-links .nav-cta { display: block; } .nav-links .nav-cta a { display: inline-flex; font: 700 17px/1 var(--body); padding: 0 26px; transform: none; background: var(--cyan); color: var(--night); opacity: 1; } }
@media (max-width: 1100px) {
  .nav-account { display: inline-flex; margin-left: auto; }
  .nav-account + .nav-toggle { margin-left: 0; }
  .nav-links { overflow-y: auto; justify-content: flex-start; gap: 2px; }
  .nav-links a { font-size: clamp(25px, 4vh, 34px); padding-block: 10px; }
}
@media (max-width: 380px) { .nav-bar { gap: 8px; padding-left: 12px; } .nav-account { font-size: 13px; padding-inline: 10px; } .brand { font-size: 18px; gap: 7px; } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(88px, 12vw, 168px) 0; }
/* Long pages render offscreen sections as they approach the viewport. */
.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@supports not (translate: 0) {
  .brand img { margin-right: 10px; }
  .row > * { margin-right: 10px; margin-bottom: 8px; }
  .hero-stores > span { margin-right: 14px; }
  .status i { margin-right: 8px; }
}
.night { background: var(--night); color: var(--night-text); }
.paper { background: var(--paper); }
.white { background: var(--white); }
.section-head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(44px, 6vw, 80px); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.grain::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Phone frame ---------- */
/* Screenshots are full screens (828 × 1639, clean status bar): the screen keeps that exact ratio, so nothing is cropped. */
/* Realistic phone: titanium rim, black bezel, Dynamic Island, side buttons and a glass glare.
   Screenshots are full screens (828 x 1639), so the screen keeps their exact ratio. */
.phone { --b: calc(var(--w, 300px) * .03); position: relative; display: grid; width: var(--w, 300px); padding: var(--b); border-radius: calc(var(--w, 300px) * .145);
  background: #050708;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 calc(var(--w, 300px) * .008) #0d1215,
    0 0 0 calc(var(--w, 300px) * .016) #7d8a91,
    0 0 0 calc(var(--w, 300px) * .019) #2b343a,
    calc(var(--w, 300px) * .02) calc(var(--w, 300px) * .012) 0 calc(var(--w, 300px) * .016) #1b2328,
    0 60px 110px -30px rgba(0,0,0,.75), 0 30px 70px -40px rgba(25,211,219,.45); }
.phone::before { content: ""; position: absolute; z-index: 3; top: calc(var(--b) + var(--w, 300px) * .028); left: 50%; width: 30%; height: calc(var(--w, 300px) * .085); border-radius: 999px; background: #000;
  box-shadow: inset calc(var(--w, 300px) * .085) 0 0 -1px #000, inset calc(var(--w, 300px) * -.06) 0 calc(var(--w, 300px) * .02) -2px rgba(40,70,90,.35); transform: translateX(-50%); }
.phone::after { content: ""; position: absolute; z-index: -1; left: calc(var(--w, 300px) * -.024); top: 19%; width: calc(var(--w, 300px) * .012); height: 5%; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #4b565c, #8f9ba1);
  box-shadow: 0 calc(var(--w, 300px) * .2) 0 0 #6f7b81, 0 calc(var(--w, 300px) * .34) 0 0 #6f7b81,
    calc(var(--w, 300px) * 1.036) calc(var(--w, 300px) * .26) 0 0 #6f7b81; }
.phone img { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 828 / 1639; object-fit: cover; border-radius: calc(var(--w, 300px) * .118); background: #f2f6f7; }
.phone > i.glare { grid-area: 1 / 1; z-index: 2; pointer-events: none; border-radius: calc(var(--w, 300px) * .118);
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 78%, rgba(255,255,255,.07) 100%); mix-blend-mode: screen; }
.phone.light { background: #050708; }

/* ---------- Glass chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(13,28,37,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 20px 40px -20px rgba(0,0,0,.6); color: var(--white); font-size: 14px; line-height: 1.3; }
.chip b { display: block; font: 700 15px/1.2 var(--display); }
.chip small { color: var(--night-text); font-size: 12.5px; }
.chip .dot { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(25,211,219,.16); color: var(--cyan); }
.chip .dot.warn { background: rgba(255,181,71,.16); color: var(--amber); }
.chip .dot.ok { background: rgba(75,227,176,.16); color: var(--mint); }
.chip svg { width: 20px; height: 20px; }

/* ---------- Gecko canvas ---------- */
.gecko { position: relative; display: grid; place-items: center; }
.gecko canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); }
.gecko[data-ready="true"] canvas { opacity: 1; }
.gecko .gecko-poster { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transition: opacity .6s; }
.gecko[data-ready="true"] .gecko-poster { opacity: 0; }
.gecko-halo { position: absolute; top: 12%; right: 8%; bottom: 4%; left: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(25,211,219,.38), rgba(25,211,219,0)); filter: blur(10px); z-index: -1; }

/* ---------- Reveal motion ---------- */
[data-tilt] { transform: var(--tilt, none); }
:focus { outline: 3px solid var(--cyan); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.reveal { opacity: 1; }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 1; }
.reveal-scale.in { opacity: 1; transform: none; }
/* A readable layout remains available before modern CSS math is supported. */
@supports not (font-size: clamp(16px, 2vw, 24px)) {
  :root { --gutter: 20px; }
  .display { font: 700 72px/.95 var(--display); }
  .h1 { font: 700 52px/1 var(--display); }
  .h2 { font: 700 40px/1.05 var(--display); }
  .h3 { font: 650 26px/1.15 var(--display); }
  .lead { font-size: 20px; }
  .section { padding: 88px 0; }
  .section-head { margin-bottom: 44px; }
  @media (max-width:700px) {
    .h1 { font-size: 38px; }
    .h2 { font-size: 32px; }
    .lead { font-size: 17px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--night-line); background: var(--night); color: var(--white); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 28px; padding: 26px 14px; font: 600 clamp(20px, 2.4vw, 30px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.marquee span::after { content: "✦"; color: var(--cyan); font-size: .6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cards ---------- */
.card { position: relative; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; }
.night .card { background: var(--night-2); box-shadow: 0 0 0 1px var(--night-line) inset; }
.card-pad { padding: clamp(24px, 3vw, 40px); }
.tilt { transform-style: preserve-3d; transition: transform .6s var(--ease); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-md); background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow .3s; }
.faq details[open] { box-shadow: 0 0 0 1.5px var(--cyan) inset, 0 20px 40px -30px rgba(11,111,118,.5); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; font: 650 clamp(17px, 1.6vw, 20px)/1.3 var(--display); color: var(--ink); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); transition: background .3s, transform .4s var(--spring); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.faq details[open] summary i { background: var(--cyan); transform: rotate(180deg); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq details p { margin: 0; padding: 0 24px 24px; color: var(--muted); max-width: 70ch; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--night); color: var(--night-text); padding: clamp(72px, 9vw, 120px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer .footer-heading { margin: 0 0 16px; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--cyan); }
.footer-word { margin-top: clamp(56px, 8vw, 110px); font: 700 clamp(72px, 19vw, 300px)/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); white-space: nowrap; user-select: none; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: 13.5px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Store badges ---------- */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px 0 16px; border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px rgba(5,16,23,.08) inset; transition: transform .35s var(--spring); }
.store:hover { transform: translateY(-2px); }
.store svg { width: 26px; height: 26px; }
.store small { display: block; font-size: 11px; line-height: 1.1; color: var(--muted); }
.store b { display: block; font: 700 18px/1.1 var(--display); letter-spacing: -.01em; }
.store.soon { background: rgba(255,255,255,.06); color: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; cursor: default; }
.store.soon small { color: var(--night-text); }
.store.soon:hover { transform: none; }

/* ---------- Article (guides, legal, company) ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(150px, 18vw, 220px) 0 clamp(64px, 8vw, 110px); }
.page-hero .glow { position: absolute; top: auto; right: -10%; bottom: -40%; left: 30%; height: 90%; background: radial-gradient(closest-side, rgba(25,211,219,.28), transparent 70%); filter: blur(20px); pointer-events: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font: 500 13px/1 var(--mono); color: var(--night-text); }
.crumbs a { text-decoration: none; color: var(--cyan); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.prose { max-width: 720px; font-size: 18px; line-height: 1.75; color: var(--text); }
.prose h2 { margin: 2.2em 0 .6em; font: 700 clamp(26px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); scroll-margin-top: 110px; }
.prose h3 { margin: 1.8em 0 .5em; font: 650 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--teal); }
.prose a { color: var(--teal); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15.5px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.callout { margin: 1.6em 0; padding: 22px 24px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(25,211,219,.1), rgba(75,227,176,.08)); box-shadow: 0 0 0 1px rgba(11,111,118,.18) inset; color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 110px; display: grid; gap: 4px; font-size: 14.5px; }
.toc b { font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc a { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.active { color: var(--ink); border-color: var(--cyan); }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .toc { display: none; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; font-weight: 600; color: var(--ink); font-size: 15px; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1.5px var(--line) inset; font: 500 16px/1.4 var(--body); color: var(--ink); transition: box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--cyan) inset, 0 0 0 5px rgba(25,211,219,.18); }

/* ---------- Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font: 600 12.5px/1 var(--mono); letter-spacing: .04em; background: rgba(25,211,219,.12); color: var(--teal); }
.night .pill { color: var(--cyan); background: rgba(25,211,219,.12); }
.stack { display: grid; gap: var(--gap, 18px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 14px); }
@media print { .nav, .footer, .marquee, .gecko { display: none !important; } .night { background: #fff; color: #000; } .reveal, .reveal-scale { opacity: 1; transform: none; } }