:root {
  --parchment: #eee3cc;
  --paper: #fffaf0;
  --ink: #101827;
  --ink-raised: #18243a;
  --ink-soft: #2b3850;
  --coral: #dc5b47;
  --sky: #78a9c7;
  --gold: #d2ad58;
  --sage: #738d72;
  --violet: #58406f;
  --line: rgba(16, 24, 39, .18);
  --line-light: rgba(255, 250, 240, .2);
  --display: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  --page: min(1280px, calc(100vw - 3rem));
}

* { box-sizing: border-box; }
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--parchment);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
em { font-weight: 400; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 60; color: var(--ink); background: var(--paper); padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 5rem;
  padding: 0 max(1.5rem, calc((100vw - 1280px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  color: var(--ink);
  background: rgba(238, 227, 204, .9);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px var(--line);
}
.wordmark { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font: 700 1.18rem/1 var(--display); letter-spacing: .025em; }
.brand-mark { width: 2.65rem; height: 2.65rem; flex: 0 0 auto; filter: drop-shadow(0 .3rem .6rem rgba(4, 9, 18, .2)); }
nav { display: flex; align-items: center; gap: 1.45rem; font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
nav a { text-decoration: none; }
nav a:not(.nav-cta) { position: relative; }
nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.35rem; height: 1px; background: currentColor; transition: right .2s ease; }
nav a:not(.nav-cta):hover::after { right: 0; }
.nav-cta { border: 1px solid currentColor; padding: .68rem 1rem; }

.eyebrow, .hero-kicker {
  margin-bottom: 1rem;
  font-size: .67rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.hero-kicker { color: var(--gold); }
.hero {
  position: relative;
  min-height: 100svh;
  padding: 6.5rem 0 3rem;
  display: grid;
  align-items: center;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 35%, rgba(120, 169, 199, .18), transparent 29%),
    linear-gradient(118deg, #101827 0 55%, #151d30 55% 100%);
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 4.75rem 4.75rem; mask-image: linear-gradient(90deg, black, transparent 72%); }
.hero-grid {
  position: relative;
  z-index: 2;
  width: min(1480px, calc(100vw - 3rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(540px, 1.08fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.hero-copy { max-width: 690px; padding: 2rem 0 4rem; }
.hero .hero-copy.reveal { opacity: 1; transform: none; }
.hero h1 { max-width: 780px; margin-bottom: 2rem; font: 400 clamp(4.6rem, 7.3vw, 8.6rem)/.84 var(--display); letter-spacing: -.057em; }
.hero h1 em { color: var(--gold); }
.hero-lede { max-width: 630px; margin-bottom: 0; color: rgba(255, 250, 240, .72); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.7; }
.hero-lede strong { color: var(--paper); }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.3rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .85rem 1.35rem; border: 1px solid transparent; font-size: .76rem; font-weight: 800; letter-spacing: .035em; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-paper { color: var(--ink); background: var(--paper); }
.hero-testflight-button {
  min-height: 3.25rem;
  padding: .7rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  border: 1px solid rgba(255, 250, 240, .28);
  border-radius: .55rem;
  color: #fff;
  background: rgba(18, 18, 20, .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.hero-testflight-button:hover { transform: translateY(-2px); border-color: rgba(255, 250, 240, .5); background: rgba(34, 34, 38, .94); }
.hero-testflight-button:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.hero-testflight-button img { width: 2rem; height: 2rem; object-fit: contain; }
.hero-testflight-button > span { display: flex; flex-direction: column; line-height: 1.1; }
.hero-testflight-button small { margin-bottom: .2rem; color: rgba(255, 250, 240, .55); font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.text-link { font-size: .77rem; font-weight: 800; text-underline-offset: .35em; }
.text-link span { margin-left: .3rem; }
.text-link-light { color: var(--paper); }
.hero-platforms { display: flex; gap: .65rem; margin-top: 2.4rem; }
.hero-platforms span { padding: .42rem .7rem; border: 1px solid rgba(255, 250, 240, .28); font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-heraldry { height: min(78svh, 810px); display: flex; align-items: flex-start; gap: clamp(.55rem, 1.1vw, 1.1rem); }
.hero-standard {
  --field: #3c0e1a;
  --primary: #722030;
  --charge: #c9a254;
  position: relative;
  width: 25%;
  height: var(--standard-height);
  min-height: 30rem;
  padding: 1.35rem .55rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff8e8;
  background:
    linear-gradient(158deg, transparent 0 48%, rgba(255,255,255,.06) 48% 50%, transparent 50%),
    linear-gradient(155deg, var(--field) 0 44%, var(--primary) 44% 67%, var(--charge) 67% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  animation: standard-enter 1s cubic-bezier(.18,.8,.25,1) both;
  animation-delay: var(--delay);
  overflow: hidden;
}
.hero-standard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.2), transparent 18%, transparent 82%, rgba(0,0,0,.2)); }
.standard-work { --field: #0d2034; --primary: #37699e; --charge: #bd8e27; }
.standard-personal { --field: #557b5d; --primary: #b5a381; --charge: #b83b2d; }
.standard-meadow { --field: #152318; --primary: #345738; --charge: #bca766; }
.standard-storm { --field: #151824; --primary: #313848; --charge: #b08f4a; }
.standard-name, .standard-motto, .hero-standard img { position: relative; z-index: 1; }
.standard-name { font: 700 clamp(.56rem, .75vw, .72rem)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.hero-standard img { width: min(100%, 9rem); margin: auto 0; filter: drop-shadow(0 1rem 1.2rem rgba(0,0,0,.25)); }
.standard-motto { max-width: 7.5rem; text-align: center; font: 600 clamp(.5rem, .65vw, .62rem)/1.45 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.hero-independence { position: absolute; z-index: 3; right: 1.5rem; bottom: 1rem; margin: 0; color: rgba(255,250,240,.38); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }
@keyframes standard-enter { from { transform: translateY(-110%); } to { transform: translateY(0); } }

.running-order { overflow: hidden; color: var(--ink); background: var(--gold); border-block: 1px solid rgba(16,24,39,.5); padding: .8rem 0; font: 800 .64rem/1 var(--sans); text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; }
.running-order div { width: max-content; animation: marquee 24s linear infinite; }
.running-order div::after { content: "The best of Arc · Carried forward · Native on Mac · Expanded to iPad · Reimagined for iPhone · The best of Arc · Carried forward · Native on Mac · Expanded to iPad · Reimagined for iPhone ·"; }
@keyframes marquee { to { transform: translateX(-50%); } }

.arc-story { padding: clamp(6.5rem, 11vw, 11rem) max(1.5rem, calc((100vw - 1280px) / 2)); background: var(--paper); }
.arc-story-lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.arc-story-lead .eyebrow { grid-column: 1 / -1; }
.arc-story h2, .section-heading h2, .space-story h2, .identity h2, .final-cta h2 { margin-bottom: 0; font: 400 clamp(3.6rem, 6.3vw, 7rem)/.92 var(--display); letter-spacing: -.05em; }
.arc-story h2 em { color: var(--coral); }
.story-declaration { margin: 0 0 .6rem; color: rgba(16,24,39,.67); font: 400 1.08rem/1.75 var(--sans); }
.arc-bridge { margin-top: clamp(4rem, 8vw, 7.5rem); display: grid; grid-template-columns: 1fr 180px 1fr; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
.bridge-card { min-height: 560px; padding: clamp(2.2rem, 4vw, 4.2rem); }
.bridge-card h3 { margin: 0 0 2.5rem; font: 400 clamp(2.35rem, 3.7vw, 4rem)/.95 var(--display); letter-spacing: -.035em; }
.bridge-inherit { color: var(--paper); background: var(--ink); }
.bridge-expand { background: var(--parchment); border: 1px solid var(--line); }
.bridge-card ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.bridge-card li { padding: 1rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; border-bottom: 1px solid currentColor; }
.bridge-card li strong { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.bridge-card li span { color: rgba(16,24,39,.62); font-size: .78rem; line-height: 1.55; }
.bridge-inherit li span { color: rgba(255,250,240,.61); }
.bridge-crest { display: grid; place-items: center; gap: 1.25rem; }
.bridge-crest img { width: 150px; }
.bridge-line { display: block; width: 1px; height: 72px; background: var(--line); }

.platform-story { padding: clamp(6.5rem, 11vw, 10rem) max(1.5rem, calc((100vw - 1280px) / 2)); color: var(--paper); background: #49365f; }
.section-heading { width: var(--page); margin: 0 auto 4.5rem; display: grid; grid-template-columns: 1.25fr .75fr; column-gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading > p:last-child { margin: 0 0 .5rem; color: rgba(16,24,39,.64); line-height: 1.75; }
.section-heading-light > p:last-child { color: rgba(255,250,240,.66); }
.platform-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.15rem; }
.platform-card { min-width: 0; color: var(--ink); background: var(--paper); }
.platform-mac { grid-column: 1 / -1; min-height: 650px; display: grid; grid-template-columns: .7fr 1.3fr; }
.platform-copy { position: relative; padding: clamp(2rem, 4vw, 4rem); }
.platform-copy h3 { margin: .3rem 0 1.2rem; font: 400 clamp(2.6rem, 4.4vw, 4.7rem)/.92 var(--display); letter-spacing: -.04em; }
.platform-copy > p:last-of-type { color: rgba(16,24,39,.66); font-size: .86rem; line-height: 1.7; }
.platform-copy ul { margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.platform-copy li { padding: .38rem 0; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.platform-index { position: absolute; top: 1.2rem; right: 1.4rem; color: rgba(16,24,39,.25); font: 400 2.5rem/1 var(--display); }
.platform-shot { min-width: 0; margin: 0; display: grid; place-items: center; background: #e8deca; overflow: hidden; }
.platform-shot img { width: 100%; height: 100%; object-fit: contain; }
.platform-shot-mac { padding: 2rem; }
.platform-ipad { display: flex; flex-direction: column; }
.platform-ipad .platform-shot { aspect-ratio: 2420 / 1668; }
.platform-field { position: relative; min-height: clamp(170px, 19vw, 290px); flex: 1; padding: clamp(1.5rem, 3vw, 2.8rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; color: var(--paper); background: linear-gradient(155deg, transparent 0 38%, rgba(55,105,158,.96) 38% 66%, transparent 66%), linear-gradient(14deg, #bd8e27 0 34%, transparent 34%), #0d2034; overflow: hidden; }
.platform-field::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; left: -36%; top: -80%; border: 1px solid rgba(255,250,240,.16); border-radius: 50%; box-shadow: 0 0 0 2.5rem rgba(255,250,240,.025), 0 0 0 5rem rgba(255,250,240,.018); }
.platform-field img { position: relative; width: min(30%, 125px); max-height: 145px; filter: drop-shadow(0 .9rem 1.4rem rgba(4,9,18,.28)); }
.platform-field p { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.platform-field span { margin-bottom: .45rem; font-size: .55rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.platform-field strong { font: 400 clamp(1.7rem, 2.6vw, 2.7rem)/.95 var(--display); }
.platform-iphone { display: grid; grid-template-columns: 1fr .55fr; background: #d9e1d4; }
.platform-shot-phone { min-height: 590px; padding: 1.5rem .75rem; background: #c4d0c1; }
.platform-shot-phone img { max-height: 540px; }

.sidebar-story { margin-top: 1.15rem; padding: clamp(2.5rem, 5vw, 5.5rem); color: var(--paper); background: #101827; border: 1px solid rgba(255,250,240,.16); overflow: hidden; }
.sidebar-story-copy { display: grid; grid-template-columns: 1.22fr .78fr; column-gap: clamp(2rem, 6vw, 7rem); align-items: end; }
.sidebar-story-copy .eyebrow { grid-column: 1 / -1; color: var(--gold); }
.sidebar-story-copy h3 { max-width: 800px; margin: 0; font: 400 clamp(3rem, 5.4vw, 6rem)/.9 var(--display); letter-spacing: -.048em; }
.sidebar-story-copy h3 em { color: var(--gold); }
.sidebar-story-copy > p:last-child { margin: 0 0 .45rem; color: rgba(255,250,240,.67); font-size: .9rem; line-height: 1.75; }
.sidebar-wide-pair { margin-top: clamp(3rem, 6vw, 5.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
.sidebar-wide-pair figure { min-width: 0; margin: 0; padding: .65rem; color: var(--ink); background: var(--parchment); }
.sidebar-wide-pair img { width: 100%; height: auto; object-fit: contain; background: #d7d2c4; }
.sidebar-wide-pair figcaption { min-height: 3.4rem; padding: .8rem .35rem .15rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: rgba(16,24,39,.58); font-size: .62rem; line-height: 1.35; }
.sidebar-wide-pair figcaption span { color: var(--ink); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-mobile-sequence { width: min(820px, 100%); margin: clamp(3rem, 7vw, 6rem) auto 0; display: grid; grid-template-columns: minmax(0,1fr) 7.5rem minmax(0,1fr); gap: 1.2rem; align-items: center; }
.sidebar-mobile-sequence figure { position: relative; min-width: 0; margin: 0; padding: .75rem; background: rgba(255,250,240,.07); border: 1px solid rgba(255,250,240,.18); }
.sidebar-mobile-sequence img { width: 100%; max-height: 660px; object-fit: contain; }
.sidebar-mobile-step { position: absolute; z-index: 1; top: 1.25rem; left: 1.25rem; padding: .5rem .65rem; color: var(--ink); background: var(--gold); font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-transition-mark { display: grid; place-items: center; gap: .8rem; color: rgba(255,250,240,.52); font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.sidebar-transition-mark b { color: var(--gold); font: 400 3.5rem/1 var(--display); }

.space-story { padding: clamp(6.5rem, 11vw, 10rem) 0; color: var(--ink); background: var(--parchment); overflow: hidden; }
.space-story-intro { width: var(--page); margin: 0 auto 3rem; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.space-story-lede { margin: 0 0 .5rem; color: rgba(16,24,39,.66); font-size: .92rem; line-height: 1.75; }
.space-browser-showcase { width: min(1180px, calc(100vw - 3rem)); margin: 0 auto; }
.space-browser-shell { outline: none; touch-action: pan-y; }
.space-browser-shell:focus-visible .space-browser-screen { outline: 2px solid var(--coral); outline-offset: 5px; }
.space-browser-screen { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #0f1622; box-shadow: 0 2.2rem 5rem rgba(16,24,39,.2); }
.space-browser-picture { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(1.25%); transition: opacity .4s ease, transform .7s cubic-bezier(.2,.75,.25,1); pointer-events: none; }
.space-browser-picture.active { opacity: 1; transform: translateX(0); }
.space-browser-picture img { width: 100%; height: 100%; object-fit: contain; }
.space-browser-mobile-shot { display: none; }
.space-browser-actions { margin: 1.2rem 0 0; display: flex; align-items: stretch; justify-content: flex-end; gap: .55rem; }
.space-browser-actions-label { margin-right: auto; display: flex; flex-direction: column; justify-content: center; color: rgba(16,24,39,.48); font-size: .57rem; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; }
.space-browser-actions-label strong { color: var(--ink); font-size: .65rem; }
.space-browser-actions button { min-width: 11.5rem; min-height: 3.4rem; padding: .4rem .85rem .4rem .35rem; display: flex; align-items: center; gap: .55rem; color: var(--ink); background: transparent; border: 1px solid rgba(16,24,39,.25); font: inherit; text-align: left; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.space-browser-actions button:hover { border-color: rgba(16,24,39,.62); transform: translateY(-1px); }
.space-browser-actions button.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.space-browser-actions button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.space-browser-actions button > span:last-child { display: flex; flex-direction: column; }
.space-browser-actions button strong { font-size: .68rem; line-height: 1.2; }
.space-browser-actions button small { margin-top: .16rem; font-size: .53rem; line-height: 1.2; opacity: .62; }
.space-choice-crest { width: 2.7rem; height: 3rem; object-fit: contain; flex: 0 0 auto; }
.space-browser-caption { min-height: 6.5rem; padding: 1.2rem 0 0; display: grid; grid-template-columns: .65fr 1.05fr 1.8fr; column-gap: 1.7rem; align-items: start; }
.space-browser-caption .eyebrow { margin: .35rem 0 0; color: var(--coral); font-size: .58rem; }
.space-browser-caption h3 { margin: 0; font: 400 clamp(1.65rem, 2.3vw, 2.2rem)/1 var(--display); }
.space-browser-caption > p:not(.eyebrow,.space-browser-meta) { margin: 0; color: rgba(16,24,39,.66); font-size: .78rem; line-height: 1.65; }
.space-browser-meta { grid-column: 2 / 4; margin: .75rem 0 0; padding-top: .7rem; color: rgba(16,24,39,.44); border-top: 1px solid var(--line); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.space-ledger { width: var(--page); margin: 5rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.space-ledger article { min-height: 190px; padding: 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.space-ledger span { color: var(--coral); font: 700 .58rem/1 var(--sans); letter-spacing: .12em; }
.space-ledger h3 { margin: 2rem 0 .55rem; font: 400 1.65rem/1 var(--display); }
.space-ledger p { margin: 0; color: rgba(16,24,39,.62); font-size: .76rem; line-height: 1.55; }

.identity { padding: clamp(6.5rem, 11vw, 10rem) max(1.5rem, calc((100vw - 1280px) / 2)); background: var(--paper); }
.identity-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.identity-copy p { color: rgba(16,24,39,.67); font-size: .9rem; line-height: 1.75; }
.crest-anatomy { margin-top: 5rem; display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--line); }
.crest-anatomy article { min-width: 0; min-height: 250px; padding: 1.3rem; display: grid; grid-template-rows: auto 1fr; place-items: center; border-right: 1px solid var(--line); background: var(--parchment); }
.crest-anatomy article:first-child { border-left: 1px solid var(--line); }
.crest-anatomy span { justify-self: start; color: rgba(16,24,39,.55); font-size: .56rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.crest-anatomy img { width: min(100%, 160px); max-height: 190px; }
.forge-grid { min-width: 0; width: 100%; max-width: 100%; margin-top: 1.2rem; display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2rem; }
.forge-card { min-width: 0; display: flex; flex-direction: column; background: var(--parchment); }
.forge-copy { padding: clamp(2rem, 3.5vw, 3.3rem); }
.forge-copy h3 { margin: .2rem 0 .9rem; font: 400 clamp(2.4rem, 3.8vw, 3.8rem)/.95 var(--display); letter-spacing: -.035em; }
.forge-copy p:last-child { margin-bottom: 0; color: rgba(16,24,39,.64); font-size: .82rem; line-height: 1.7; }
.forge-shot { min-width: 0; width: 100%; max-width: 100%; margin: auto 0 0; padding: 1rem; aspect-ratio: 8 / 5; overflow: hidden; }
.forge-shot img { width: 100%; height: 100%; object-fit: contain; }
.forge-everywhere { color: var(--paper); background: var(--ink); }
.forge-everywhere .forge-copy p:last-child { color: rgba(255,250,240,.66); }
.forge-devices { margin-top: auto; padding: 1rem; display: grid; grid-template-columns: 1fr .29fr; gap: .8rem; align-items: end; min-height: 390px; }
.forge-devices figure { min-width: 0; margin: 0; }
.forge-devices img { width: 100%; height: 100%; max-height: 360px; object-fit: contain; }
.forge-traditional { grid-column: 1 / -1; display: grid; grid-template-columns: .62fr 1.38fr; color: var(--paper); background: linear-gradient(145deg, #58616b 0%, #777363 52%, #b38d37 100%); }
.forge-traditional .forge-copy { display: flex; flex-direction: column; justify-content: center; }
.forge-traditional .forge-copy p:last-child { color: rgba(255,250,240,.72); }
.forge-traditional .forge-shot { margin: 0; background: rgba(16,24,39,.18); }
.forge-traditional .forge-shot img { height: auto; aspect-ratio: 8 / 5; }

.migration-story { position: relative; padding: clamp(6.5rem, 11vw, 10rem) 0; color: var(--paper); background: linear-gradient(148deg, #101827 0 42%, #1a2944 100%); overflow: hidden; }
.migration-story::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 5.5rem 5.5rem; mask-image: linear-gradient(140deg, black, transparent 68%); }
.migration-story > * { position: relative; z-index: 1; }
.migration-intro { width: var(--page); max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.migration-story h2 { margin-bottom: 0; font: 400 clamp(3.6rem, 6.3vw, 7rem)/.92 var(--display); letter-spacing: -.05em; }
.migration-story h2 em { color: var(--gold); }
.migration-lede p { color: rgba(255,250,240,.68); font-size: .9rem; line-height: 1.75; }
.migration-lede p:last-child { margin-bottom: 0; }
.migration-lede strong { color: var(--paper); }
.migration-source-shot { min-width: 0; width: var(--page); max-width: 100%; margin: clamp(3rem, 6vw, 5rem) auto 0; padding: .8rem; border: 1px solid var(--line-light); background: #2a3d5d; }
.migration-source-shot img, .migration-review-shot img { width: 100%; height: auto; }
.migration-source-shot figcaption { padding: 1.1rem .45rem .35rem; display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1rem; align-items: start; }
.migration-source-shot figcaption > span, .migration-review-shot figcaption > span { color: var(--gold); font: 400 1.8rem/1 var(--display); }
.migration-source-shot figcaption strong, .migration-review-shot figcaption strong { font-size: .72rem; letter-spacing: .04em; }
.migration-source-shot figcaption p { max-width: 46rem; margin: .25rem 0 0; color: rgba(255,250,240,.58); font-size: .68rem; line-height: 1.55; }
.migration-source-ledger { width: var(--page); max-width: 100%; margin: 1.2rem auto 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.migration-source-ledger article { min-width: 0; min-height: 145px; padding: 1.35rem; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.migration-source-ledger strong { color: var(--gold); font: 600 1.1rem/1 var(--display); }
.migration-source-ledger p { margin: 1.4rem 0 0; color: rgba(255,250,240,.62); font-size: .66rem; line-height: 1.55; }
.migration-review { min-width: 0; width: var(--page); max-width: 100%; margin: clamp(4.5rem, 9vw, 8rem) auto 0; display: grid; grid-template-columns: .72fr 1.28fr; align-items: stretch; background: #152139; border: 1px solid var(--line-light); }
.migration-review-copy { min-width: 0; padding: clamp(2.3rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.migration-review-copy .eyebrow { color: var(--coral); }
.migration-review-copy h3 { margin: .2rem 0 1.2rem; font: 400 clamp(2.8rem, 4.8vw, 5rem)/.92 var(--display); letter-spacing: -.04em; }
.migration-review-copy > p:not(.eyebrow,.migration-note) { color: rgba(255,250,240,.66); font-size: .8rem; line-height: 1.7; }
.migration-steps { margin: 1.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.migration-steps li { padding: 1.1rem 0; display: grid; grid-template-columns: 2.2rem minmax(0,1fr); gap: .65rem; border-bottom: 1px solid var(--line-light); }
.migration-steps li > span { color: var(--gold); font-size: .57rem; font-weight: 800; letter-spacing: .12em; }
.migration-steps strong { font-size: .72rem; }
.migration-steps p { margin: .28rem 0 0; color: rgba(255,250,240,.55); font-size: .65rem; line-height: 1.5; }
.migration-note { margin: 1.5rem 0 0; padding-left: 1rem; color: rgba(255,250,240,.62); border-left: 3px solid var(--gold); font-size: .68rem; line-height: 1.6; }
.migration-note strong { color: var(--paper); }
.migration-review-shot { min-width: 0; margin: 0; padding: 1rem; display: flex; flex-direction: column; background: #2a3d5d; }
.migration-review-shot img { margin: auto; }
.migration-review-shot figcaption { padding: 1rem .2rem .1rem; display: grid; grid-template-columns: 2.3rem minmax(0,1fr); gap: .65rem; align-items: center; }

.extensions-story { padding: clamp(6.5rem,11vw,10rem) 0; color: var(--ink); background: var(--paper); }
.extensions-intro { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem,7vw,8rem); align-items: end; }
.extensions-story h2 { margin-bottom: 0; font: 400 clamp(3.6rem,6.3vw,7rem)/.92 var(--display); letter-spacing: -.05em; }
.extensions-story h2 em { color: var(--coral); }
.extensions-lede p { color: rgba(16,24,39,.68); font-size: .9rem; line-height: 1.75; }
.extensions-lede p:last-child { margin-bottom: 0; }
.extensions-lede strong { color: var(--ink); }
.extension-install-paths { width: var(--page); margin: clamp(3.5rem,7vw,6rem) auto 0; display: grid; grid-template-columns: 1.2fr .9fr .9fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.extension-install-path { position: relative; min-width: 0; min-height: 360px; padding: clamp(1.6rem,3vw,2.7rem); display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--parchment); }
.extension-install-path .eyebrow { padding-right: 3.5rem; }
.extension-install-path h3 { max-width: 25rem; margin: auto 0 1rem; font: 400 clamp(2rem,3vw,3.2rem)/.94 var(--display); letter-spacing: -.035em; }
.extension-install-path > p:last-child { margin-bottom: 0; color: rgba(16,24,39,.65); font-size: .78rem; line-height: 1.65; }
.extension-install-path > p:last-child strong { color: var(--ink); }
.extension-path-index { position: absolute; top: 2rem; right: 2rem; color: rgba(16,24,39,.27); font: 400 2.4rem/1 var(--display); }
.extension-install-store { color: var(--paper); background: var(--ink); }
.extension-install-store .eyebrow, .extension-install-store .extension-path-index { color: var(--gold); }
.extension-install-store > p:last-child { color: rgba(255,250,240,.67); }
.extension-management-strip { width: var(--page); margin: 1.2rem auto 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.extension-management-strip article { min-width: 0; min-height: 190px; padding: 1.4rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(223,229,220,.55); }
.extension-management-strip article:nth-child(even) { background: var(--parchment); }
.extension-management-strip span { color: var(--coral); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.extension-management-strip strong { margin-top: auto; font: 400 1.3rem/1.05 var(--display); }
.extension-management-strip p { margin: .6rem 0 0; color: rgba(16,24,39,.62); font-size: .65rem; line-height: 1.55; }
.extension-runtime { width: var(--page); margin: clamp(3.5rem,7vw,6rem) auto 0; display: grid; grid-template-columns: 1.05fr .95fr; border: 1px solid var(--line); background: #dfe5dc; }
.extension-runtime-copy { padding: clamp(2rem,4vw,4rem); display: flex; flex-direction: column; justify-content: center; }
.extension-runtime-copy h3 { max-width: 38rem; margin: .3rem 0 1.2rem; font: 400 clamp(2.8rem,4.7vw,5rem)/.92 var(--display); letter-spacing: -.04em; }
.extension-runtime-copy > p:last-child { max-width: 38rem; margin: 0; color: rgba(16,24,39,.67); font-size: .84rem; line-height: 1.7; }
.extension-attention { min-width: 0; margin: clamp(1rem,2.3vw,2rem); padding: clamp(1.6rem,3vw,2.5rem); align-self: center; background: var(--paper); border: 1px solid rgba(16,24,39,.16); box-shadow: 0 1.6rem 4rem rgba(16,24,39,.12); }
.extension-attention-head { padding-bottom: 1.3rem; display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid var(--line); }
.extension-attention-icon { width: 2.8rem; height: 3.1rem; display: grid; place-items: center; color: var(--paper); background: var(--coral); clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); font-size: 1.25rem; font-weight: 900; }
.extension-attention-head small, .extension-attention-head strong { display: block; }
.extension-attention-head small { margin-bottom: .28rem; color: rgba(16,24,39,.48); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.extension-attention-head strong { font: 400 1.6rem/1 var(--display); }
.extension-attention h4 { margin: 1.5rem 0 .6rem; font-size: .92rem; }
.extension-attention > p { color: rgba(16,24,39,.62); font-size: .76rem; line-height: 1.6; }
.extension-technical { margin-top: 1.2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.extension-technical summary { padding: .9rem 0; cursor: pointer; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.extension-technical code { display: block; margin: 0 0 .9rem; padding: .8rem; color: var(--paper); background: var(--ink); font-size: .68rem; overflow-wrap: anywhere; }
.extension-audit { width: var(--page); margin: clamp(3.5rem,7vw,6rem) auto 0; padding: clamp(2rem,4.5vw,4.5rem); color: var(--paper); background: var(--ink); }
.extension-audit-heading { margin-bottom: 3rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,6vw,6rem); align-items: end; }
.extension-audit-heading .eyebrow { color: var(--gold); }
.extension-audit-heading h3 { margin: .5rem 0 0; font: 400 clamp(3rem,5vw,5.6rem)/.9 var(--display); letter-spacing: -.045em; }
.extension-audit-heading > p { margin-bottom: 0; color: rgba(255,250,240,.62); font-size: .78rem; line-height: 1.7; }
.extension-audit-list { border-top: 1px solid var(--line-light); }
.extension-audit-list article { min-width: 0; padding: 1.1rem 0; display: grid; grid-template-columns: 2.5rem minmax(180px,.7fr) 11.5rem minmax(220px,1fr); gap: 1rem; align-items: center; border-bottom: 1px solid var(--line-light); }
.extension-audit-index { color: var(--gold); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.extension-audit-name { min-width: 0; }
.extension-audit-name strong, .extension-audit-name small { display: block; }
.extension-audit-name strong { font-size: .8rem; }
.extension-audit-name small { margin-top: .25rem; color: rgba(255,250,240,.46); font-size: .62rem; }
.extension-result { width: fit-content; padding: .35rem .5rem; border: 1px solid currentColor; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.extension-result-clean { color: #a9cda8; }
.extension-result-partial { color: var(--gold); }
.extension-result-blocked { color: #ef8979; }
.extension-result-dependent { color: #8ec5dc; }
.extension-audit-list article > p { margin: 0; color: rgba(255,250,240,.58); font-size: .68rem; line-height: 1.5; }
.extension-audit-note { margin: 2rem 0 0; padding-left: 1rem; color: rgba(255,250,240,.55); border-left: 3px solid var(--gold); font-size: .68rem; line-height: 1.65; }
.extension-audit-note strong { color: var(--paper); }
.extension-boundaries { width: var(--page); margin: 1.2rem auto 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.extension-boundaries article { min-width: 0; min-height: 310px; padding: clamp(1.7rem,3vw,3rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.extension-boundaries h3 { max-width: 31rem; margin: .4rem 0 1rem; font: 400 clamp(2rem,3.3vw,3.5rem)/.94 var(--display); letter-spacing: -.035em; }
.extension-boundaries article > p:last-child { max-width: 39rem; margin-bottom: 0; color: rgba(16,24,39,.64); font-size: .78rem; line-height: 1.7; }
.extension-channel code { padding: .1rem .25rem; color: inherit; background: rgba(16,24,39,.07); font-size: .9em; overflow-wrap: anywhere; }
.extension-channel-direct { color: var(--paper); background: #29445a; }
.extension-channel-direct .eyebrow { color: #8ec5dc; }
.extension-boundaries .extension-channel-direct > p:last-child { color: rgba(255,250,240,.72); }
.extension-channel-direct code { background: rgba(255,250,240,.1); }
.extension-boundaries .extension-native-trace { min-height: 0; grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,6vw,6rem); color: var(--paper); background: #213142; }
.extension-native-trace .eyebrow { color: var(--gold); }
.extension-native-trace-copy { min-width: 0; align-self: end; }
.extension-native-trace-copy > p { margin-top: 0; color: rgba(255,250,240,.72); font-size: .78rem; line-height: 1.7; }
.extension-trace-result { width: fit-content; margin-top: 1.4rem; padding: .45rem .62rem; display: inline-flex; border: 1px solid #ef8979; color: #ef8979; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.extension-trace-result-verified { border-color: #a9cda8; color: #a9cda8; }
.extension-trace-details { margin-top: 1.2rem; border-top: 1px solid var(--line-light); }
.extension-trace-details summary { padding: .9rem 0; cursor: pointer; color: var(--gold); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.extension-trace-details code { min-width: 0; margin-bottom: .45rem; padding: .72rem; display: block; color: rgba(255,250,240,.78); background: rgba(10,16,28,.72); font-size: .62rem; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.extension-boundaries .extension-wblock { min-height: 0; grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,6vw,6rem); align-items: end; color: var(--paper); background: var(--coral); }
.extension-wblock .eyebrow { color: var(--ink); }
.extension-wblock > p:last-child { color: rgba(255,250,240,.78); }
.extension-navigation-note { width: var(--page); margin: 1.2rem auto 0; padding: 1.4rem; display: grid; grid-template-columns: minmax(12rem,.35fr) minmax(0,1fr); gap: 2rem; border: 1px solid var(--line); background: #dfe5dc; }
.extension-navigation-note strong { font: 400 1.45rem/1.05 var(--display); }
.extension-navigation-note p { min-width: 0; margin: 0; color: rgba(16,24,39,.67); font-size: .72rem; line-height: 1.65; overflow-wrap: anywhere; }
.extension-navigation-note code { padding: .12rem .3rem; background: rgba(255,250,240,.72); font-size: .9em; }
.extension-release-note { width: var(--page); margin: 0 auto; padding: 1rem 1.4rem; display: grid; grid-template-columns: minmax(12rem,.35fr) minmax(0,1fr); gap: 2rem; color: var(--paper); background: var(--coral); border: 1px solid var(--coral); border-top: 0; }
.extension-release-note span { font-size: .58rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.extension-release-note p { min-width: 0; margin: 0; color: rgba(255,250,240,.78); font-size: .68rem; line-height: 1.6; }
.extension-guides-link { width: var(--page); margin: 1.2rem auto 0; padding: 1.5rem clamp(1.5rem,3vw,2.5rem); display: flex; justify-content: space-between; gap: 2rem; align-items: center; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); text-decoration: none; transition: color 180ms ease, background 180ms ease; }
.extension-guides-link:hover { color: var(--ink); background: var(--gold); }
.extension-guides-link span:first-child { min-width: 0; display: grid; gap: .35rem; }
.extension-guides-link small { color: var(--gold); font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.extension-guides-link:hover small { color: var(--coral); }
.extension-guides-link strong { font: 400 clamp(1.35rem,2.4vw,2rem)/1.05 var(--display); }
.extension-guides-link > span:last-child { flex: 0 0 auto; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.feature-field { padding: clamp(6.5rem, 11vw, 10rem) 0; background: var(--parchment); }
.feature-chapters, .feature-ledger { width: var(--page); margin-inline: auto; }
.feature-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.feature-chapter { min-width: 0; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.feature-copy { position: relative; padding: clamp(2rem, 3.7vw, 3.8rem); }
.feature-copy h3 { margin: .3rem 0 1.1rem; font: 400 clamp(2.8rem, 4.7vw, 5rem)/.9 var(--display); letter-spacing: -.042em; }
.feature-copy > p:last-child { max-width: 31rem; margin-bottom: 0; color: rgba(16,24,39,.65); font-size: .84rem; line-height: 1.7; }
.feature-index { position: absolute; right: 2rem; top: 2rem; color: rgba(16,24,39,.24); font: 400 2.8rem/1 var(--display); }
.feature-chapter figure { min-width: 0; margin: auto 0 0; padding: 1rem; background: #dfe5dc; }
.feature-chapter figure img { width: 100%; height: 100%; object-fit: contain; }
.feature-quick figure { aspect-ratio: 720 / 460; }
.feature-peek figure { aspect-ratio: 1329 / 768; }
.feature-peek figure { background: #dce5ed; }
.feature-localhost { grid-column: 1 / -1; min-height: 600px; display: grid; grid-template-columns: .72fr 1.28fr; color: var(--paper); background: #162826; border-color: transparent; }
.feature-localhost .feature-copy > p:last-child { color: rgba(255,250,240,.68); }
.feature-localhost .feature-index { color: rgba(255,250,240,.25); }
.feature-localhost figure { margin: 0; padding: 2rem 1rem; background: #1d3431; }
.feature-ledger { margin-top: 5rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-ledger article { min-height: 235px; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-ledger > article > span { display: inline-grid; width: 2.8rem; height: 3.1rem; place-items: center; color: var(--paper); background: var(--ink); clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); }
.feature-ledger h3 { margin: 2rem 0 .65rem; font: 400 1.65rem/1 var(--display); }
.feature-ledger p { margin-bottom: 0; color: rgba(16,24,39,.62); font-size: .78rem; line-height: 1.6; }

.early-access {
  padding: clamp(5rem, 9vw, 8rem) max(1.5rem, calc((100vw - 1280px) / 2));
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  color: var(--paper);
  background:
    radial-gradient(circle at 82% 18%, rgba(66, 133, 210, .2), transparent 34rem),
    linear-gradient(135deg, #0c1525, #1b2d49);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.early-access h2 { max-width: 740px; margin-top: 1rem; font-size: clamp(3.8rem, 6.4vw, 7rem); line-height: .88; letter-spacing: -.055em; }
.early-access-copy > p:last-child { max-width: 650px; margin-top: 1.8rem; color: rgba(255, 250, 240, .72); font-size: 1rem; line-height: 1.75; }
.community-actions {
  min-width: 0;
  display: grid;
  border-top: 1px solid rgba(255, 250, 240, .28);
  border-left: 1px solid rgba(255, 250, 240, .28);
}
.brand-action {
  position: relative;
  min-width: 0;
  min-height: 8rem;
  padding: 1.35rem 1.5rem;
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: 1.15rem;
  align-items: center;
  border-right: 1px solid rgba(255, 250, 240, .28);
  border-bottom: 1px solid rgba(255, 250, 240, .28);
  color: var(--paper);
  background: rgba(255, 250, 240, .055);
  text-decoration: none;
  overflow: hidden;
  transition: color 180ms ease, background 180ms ease;
}
.brand-action::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .25rem;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 180ms ease;
}
.brand-action:hover { background: rgba(255, 250, 240, .1); }
.brand-action:hover::before { transform: scaleY(1); }
.brand-action:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.brand-action-icon { width: 4.6rem; height: 4.6rem; display: block; object-fit: contain; }
.brand-action-copy { min-width: 0; display: grid; gap: .25rem; }
.brand-action-copy small { color: rgba(255, 250, 240, .55); font-size: .62rem; font-weight: 800; letter-spacing: .11em; line-height: 1.4; text-transform: uppercase; }
.brand-action-copy strong { overflow-wrap: anywhere; font: 400 clamp(1.35rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -.02em; }
.service-button {
  min-height: 3rem;
  padding: .8rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: 1px solid var(--gold);
  color: var(--paper);
  background: transparent;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}
.service-button::after { content: "↗"; color: var(--gold); font-size: .9rem; transition: color 180ms ease; }
.brand-action:hover .service-button { color: var(--ink); background: var(--gold); }
.brand-action:hover .service-button::after { color: var(--ink); }

.final-cta { min-height: 760px; padding: clamp(6rem, 10vw, 9rem) max(1.5rem, calc((100vw - 1280px) / 2)); display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; color: var(--paper); background: var(--coral); }
.final-crest { min-width: 0; display: grid; place-items: center; }
.final-crest img { width: min(100%, 390px); filter: drop-shadow(0 2rem 3rem rgba(73, 15, 10, .3)); }
.final-copy h2 { max-width: 920px; font-size: clamp(4rem, 7.2vw, 7.8rem); }
.final-copy > p:not(.eyebrow) { max-width: 660px; margin-top: 1.8rem; color: rgba(255,250,240,.74); font-size: 1rem; line-height: 1.75; }

footer { min-height: 9rem; padding: 2.2rem max(1.5rem, calc((100vw - 1280px) / 2)); display: flex; align-items: center; gap: 2rem; color: var(--paper); background: #0a101c; font-size: .68rem; }
footer p { max-width: 42rem; margin: 0; color: rgba(255,255,255,.55); line-height: 1.55; }
footer > div { margin-left: auto; display: flex; gap: 1.35rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
section:target .reveal { opacity: 1; transform: none; }

/* Documentation */
.docs-body { background: var(--paper); }
.docs-body .site-header { position: sticky; color: var(--ink); background: rgba(255,250,240,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.docs-shell { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0,780px); gap: clamp(3rem,8vw,8rem); padding: 5rem 0 8rem; }
.docs-nav { position: sticky; top: 7rem; align-self: start; min-width: 0; }
.docs-nav p { margin-bottom: 1rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.docs-nav a { display: block; padding: .52rem 0; color: rgba(16,24,39,.65); text-decoration: none; font-size: .82rem; }
.docs-nav a:hover { color: var(--coral); }
.docs-content { min-width: 0; }
.docs-content h1 { margin: 0 0 1.5rem; font: 400 clamp(3.5rem,6vw,6rem)/.9 var(--display); letter-spacing: -.045em; }
.docs-content h2 { margin: 4rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font: 400 2.2rem/1 var(--display); }
.docs-content h3 { margin: 2rem 0 .7rem; font: 600 1.25rem/1.2 var(--display); }
.docs-content p, .docs-content li { color: rgba(16,24,39,.72); line-height: 1.75; }
.docs-content li { margin: .4rem 0; }
.docs-lede { font: 400 1.3rem/1.6 var(--display); color: var(--ink) !important; }
.docs-callout { margin: 2rem 0; padding: 1.5rem; border-left: 4px solid var(--coral); background: var(--parchment); }
.docs-content code { border-radius: .25rem; padding: .12rem .35rem; background: var(--parchment); font-size: .86em; }
.docs-content pre { max-width: 100%; overflow: auto; padding: 1.25rem; color: #e9edf5; background: var(--ink); }
.docs-content pre code { padding: 0; background: transparent; }
.docs-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5rem 0; font-size: .84rem; }
.docs-table th, .docs-table td { padding: .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-table th { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }

/* Privacy */
.privacy-body { background: var(--paper); }
.privacy-body .site-header { position: sticky; color: var(--ink); background: rgba(255,250,240,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.privacy-hero { min-height: 660px; padding: clamp(5rem,8vw,8rem) max(1.5rem,calc((100vw - 1280px) / 2)); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: clamp(3rem,8vw,8rem); align-items: center; color: var(--paper); background: var(--ink); }
.privacy-hero-copy { min-width: 0; }
.privacy-hero-copy .eyebrow { color: var(--gold); }
.privacy-hero h1 { max-width: 850px; margin: 1rem 0 2rem; font: 400 clamp(4.5rem,7.3vw,8rem)/.86 var(--display); letter-spacing: -.055em; }
.privacy-hero h1 em { color: var(--gold); font-weight: 400; }
.privacy-hero-copy > p:last-child { max-width: 750px; margin: 0; color: rgba(255,250,240,.7); font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.75; }
.privacy-promises { border-top: 1px solid rgba(255,250,240,.2); }
.privacy-promises article { min-height: 150px; padding: 1.5rem 0; display: grid; grid-template-columns: 2.8rem minmax(0,1fr); gap: .35rem 1.1rem; align-content: center; border-bottom: 1px solid rgba(255,250,240,.2); }
.privacy-promises span { grid-row: 1 / 3; color: var(--gold); font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.privacy-promises strong { font: 400 1.55rem/1 var(--display); }
.privacy-promises p { margin: 0; color: rgba(255,250,240,.55); font-size: .78rem; line-height: 1.6; }
.privacy-layout { width: var(--page); margin: 0 auto; padding: clamp(4rem,7vw,7rem) 0 8rem; display: grid; grid-template-columns: 220px minmax(0,820px); gap: clamp(3rem,8vw,8rem); justify-content: start; }
.privacy-nav { position: sticky; top: 7rem; align-self: start; min-width: 0; }
.privacy-nav p { margin: 0 0 1rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.privacy-nav a { display: block; padding: .52rem 0; color: rgba(16,24,39,.65); font-size: .82rem; text-decoration: none; }
.privacy-nav a:hover { color: var(--coral); }
.privacy-article { min-width: 0; }
.privacy-article > section { position: relative; padding: 0 0 4.5rem; margin-bottom: 4.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 6.4rem; }
.privacy-article > section:first-child { padding-top: 0; }
.privacy-article h2 { max-width: 720px; margin: .65rem 0 1.5rem; font: 400 clamp(2.8rem,4.8vw,5rem)/.92 var(--display); letter-spacing: -.042em; }
.privacy-article p { color: rgba(16,24,39,.72); line-height: 1.78; }
.privacy-article strong { color: var(--ink); }
.privacy-index { margin: 0 0 1rem; color: var(--coral) !important; font-size: .68rem; font-weight: 800; letter-spacing: .15em; }
.privacy-source { width: fit-content; max-width: 100%; margin-top: 1rem; padding-bottom: .3rem; display: inline-flex; gap: .55rem; color: var(--ink); border-bottom: 1px solid var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .04em; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.privacy-source:hover { color: var(--coral); }
.privacy-sources { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }
.privacy-attribution { margin: 0 0 4.5rem; padding: clamp(1.5rem,3vw,2.5rem); display: grid; grid-template-columns: 170px minmax(0,1fr); gap: clamp(1.5rem,4vw,3.5rem); color: var(--paper); background: var(--ink); border-bottom: .5rem solid var(--gold); scroll-margin-top: 6.4rem; }
.privacy-attribution-label span { display: block; margin-bottom: .55rem; color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.privacy-attribution-label strong { color: var(--paper); font: 400 1.25rem/1.1 var(--display); }
.privacy-attribution h2 { margin: 0 0 1.4rem; color: var(--paper); font-size: clamp(2.4rem,4vw,4rem); }
.privacy-attribution p { color: rgba(255,250,240,.7); line-height: 1.75; }
.privacy-attribution strong { color: var(--paper); }
.privacy-attribution code { padding: .12rem .35rem; color: var(--ink); background: var(--gold); border-radius: .2rem; font-size: .86em; }
.privacy-attribution .privacy-source { color: var(--paper); }
.privacy-attribution .privacy-source:hover { color: var(--gold); }
.privacy-contact { margin-top: 2.2rem; padding: 1.5rem; border: 1px solid var(--line); border-left: 4px solid var(--coral); background: var(--parchment); }
.privacy-contact span { display: block; margin-bottom: .45rem; color: var(--ink); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.privacy-contact p { margin: 0; }
.privacy-contact a { color: var(--ink); text-underline-offset: .2em; }

@media (max-width: 1100px) {
  .site-header nav a:not(.nav-cta) { display: none; }
  .hero { padding-top: 7rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 790px; padding-bottom: 0; }
  .hero h1 { max-width: 900px; font-size: clamp(4.6rem, 11vw, 7.5rem); }
  .hero-heraldry { height: 35rem; }
  .hero-standard { min-height: 23rem; }
  .arc-bridge { grid-template-columns: 1fr 1fr; }
  .bridge-crest { display: none; }
  .platform-mac { grid-template-columns: 1fr; }
  .platform-shot-mac { min-height: 500px; }
  .platform-iphone { grid-template-columns: 1fr; }
  .platform-shot-phone { min-height: 470px; }
  .sidebar-mobile-sequence { width: min(720px, 100%); grid-template-columns: minmax(0,1fr) 5rem minmax(0,1fr); }
  .forge-grid { grid-template-columns: 1fr; }
  .forge-traditional { grid-template-columns: 1fr; }
  .forge-devices { grid-template-columns: 1fr .24fr; }
  .migration-source-ledger { grid-template-columns: repeat(3, 1fr); }
  .migration-review { grid-template-columns: 1fr; }
  .feature-localhost { grid-template-columns: 1fr; }
  .feature-localhost figure { aspect-ratio: 8 / 5; }
  .extension-install-paths { grid-template-columns: 1fr 1fr; }
  .extension-install-store { grid-column: 1 / -1; }
  .extension-install-path { min-height: 310px; }
  .extension-management-strip { grid-template-columns: 1fr 1fr; }
  .extension-audit-list article { grid-template-columns: 2.5rem minmax(140px,.65fr) 10.5rem minmax(160px,1fr); }
  .privacy-hero { grid-template-columns: 1fr; }
  .privacy-promises { display: grid; grid-template-columns: repeat(3,1fr); }
  .privacy-promises article { min-height: 170px; padding: 1.5rem; display: block; border-right: 1px solid rgba(255,250,240,.2); }
  .privacy-promises article:last-child { border-right: 0; }
  .privacy-promises span, .privacy-promises strong, .privacy-promises p { display: block; }
  .privacy-promises strong { margin: 1.7rem 0 .55rem; }
}

@media (max-width: 760px) {
  :root { --page: min(100% - 2rem, 650px); }
  .site-header { height: 4.4rem; padding-inline: 1rem; }
  .nav-cta { padding: .58rem .75rem; }
  .hero { padding: 6.5rem 0 2.2rem; }
  .hero-grid { width: calc(100vw - 2rem); gap: 3rem; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(4rem, 18vw, 6rem); }
  .hero-lede { font-size: .94rem; }
  .hero-heraldry { height: 27rem; gap: .35rem; }
  .hero-standard { min-height: 18rem; padding: 1rem .25rem 2.8rem; }
  .hero-standard img { width: min(100%, 6.2rem); }
  .standard-name { font-size: .45rem; }
  .standard-motto { display: none; }
  .hero-independence { position: static; margin: 2rem 1rem 0; text-align: right; }
  .arc-story-lead, .section-heading, .space-story-intro, .identity-intro, .migration-intro, .extensions-intro { grid-template-columns: 1fr; gap: 1.4rem; }
  .arc-story h2, .section-heading h2, .space-story h2, .identity h2, .migration-story h2, .extensions-story h2, .early-access h2, .final-cta h2 { font-size: clamp(3.1rem, 13vw, 4.8rem); }
  .arc-bridge, .platform-grid, .feature-chapters { grid-template-columns: 1fr; }
  .bridge-card { min-height: 0; }
  .platform-mac, .feature-localhost { grid-column: auto; }
  .platform-shot-mac { min-height: 330px; padding: 1rem; }
  .platform-shot-phone { min-height: 430px; }
  .sidebar-story { padding: 2rem; }
  .sidebar-story-copy { grid-template-columns: 1fr; gap: 1.4rem; }
  .sidebar-story-copy > p:last-child { max-width: 38rem; }
  .sidebar-wide-pair { grid-template-columns: 1fr; }
  .sidebar-mobile-sequence { grid-template-columns: minmax(0,1fr) 3.2rem minmax(0,1fr); gap: .55rem; }
  .sidebar-transition-mark span { display: none; }
  .sidebar-transition-mark b { font-size: 2.5rem; }
  .space-browser-caption { grid-template-columns: 1fr 1fr; }
  .space-browser-caption > p:not(.eyebrow,.space-browser-meta) { grid-column: 1 / 3; margin-top: .8rem; }
  .space-browser-meta { grid-column: 1 / 3; }
  .space-ledger, .feature-ledger { grid-template-columns: 1fr 1fr; }
  .crest-anatomy { grid-template-columns: repeat(6, 1fr); border-bottom: 0; }
  .crest-anatomy article { grid-column: span 2; min-height: 210px; border-bottom: 1px solid var(--line); }
  .crest-anatomy article:nth-child(4) { grid-column: 2 / span 2; border-left: 1px solid var(--line); }
  .crest-anatomy article:nth-child(5) { grid-column: 4 / span 2; }
  .forge-devices { min-height: 300px; }
  .migration-source-shot { padding: .5rem; }
  .migration-source-ledger { grid-template-columns: 1fr 1fr; }
  .migration-source-ledger article:last-child { grid-column: 1 / -1; }
  .feature-chapter figure { padding: .65rem; }
  .early-access, .final-cta { grid-template-columns: 1fr; min-height: 0; }
  .final-crest img { width: min(62vw, 290px); }
  footer { align-items: flex-start; flex-direction: column; gap: 1rem; }
  footer > div { margin-left: 0; flex-wrap: wrap; }
  .docs-shell { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .docs-nav { position: relative; top: auto; display: flex; flex-wrap: wrap; gap: .2rem 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
  .docs-nav p { width: 100%; }
  .privacy-hero { min-height: 0; padding: 5rem 1rem; gap: 3rem; }
  .privacy-hero h1 { font-size: clamp(3.8rem,17vw,6rem); }
  .privacy-promises { grid-template-columns: 1fr; }
  .privacy-promises article { min-height: 0; padding: 1.3rem 0; display: grid; grid-template-columns: 2.5rem minmax(0,1fr); border-right: 0; }
  .privacy-promises span { grid-row: 1 / 3; }
  .privacy-promises strong { margin: 0; }
  .privacy-layout { padding-top: 3rem; grid-template-columns: 1fr; gap: 3rem; }
  .privacy-nav { position: relative; top: auto; display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
  .privacy-nav p { width: 100%; }
  .privacy-attribution { grid-template-columns: 1fr; }
  .extension-install-paths { grid-template-columns: 1fr; }
  .extension-install-store { grid-column: auto; }
  .extension-management-strip { grid-template-columns: 1fr; }
  .extension-management-strip article { min-height: 155px; }
  .extension-runtime { grid-template-columns: 1fr; }
  .extension-audit-heading { grid-template-columns: 1fr; gap: 1.3rem; }
  .extension-audit-list article { grid-template-columns: 2.2rem minmax(0,1fr); gap: .45rem 1rem; align-items: start; }
  .extension-audit-name { grid-column: 2; }
  .extension-result { grid-column: 2; margin-top: .4rem; }
  .extension-audit-list article > p { grid-column: 2; margin-top: .35rem; }
  .extension-boundaries { grid-template-columns: 1fr; }
  .extension-boundaries .extension-native-trace { grid-column: auto; grid-template-columns: 1fr; gap: 1.4rem; }
  .extension-boundaries .extension-wblock { grid-column: auto; grid-template-columns: 1fr; gap: 1rem; }
  .extension-navigation-note, .extension-release-note { grid-template-columns: 1fr; gap: .7rem; }
}

@media (max-width: 520px) {
  .wordmark .brand-mark { width: 2.25rem; height: 2.25rem; }
  .hero h1 { font-size: clamp(3.7rem, 19vw, 5.2rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .hero-testflight-button { width: 100%; }
  .hero-platforms { margin-top: 1.8rem; }
  .hero-heraldry { height: 21rem; }
  .hero-standard { min-height: 14rem; }
  .hero-standard img { width: min(100%, 4.8rem); }
  .arc-story, .platform-story, .identity, .early-access, .final-cta { padding-inline: 1rem; }
  .brand-action { min-height: 0; padding: 1rem; grid-template-columns: 3.7rem minmax(0, 1fr); gap: .9rem; }
  .brand-action-icon { width: 3.7rem; height: 3.7rem; }
  .service-button { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .bridge-card { padding: 1.6rem; }
  .bridge-card li { grid-template-columns: 6rem 1fr; }
  .platform-copy, .forge-copy, .feature-copy { padding: 1.6rem; }
  .platform-field { min-height: 145px; padding: 1.25rem; }
  .platform-field img { width: 4.5rem; }
  .forge-traditional .forge-shot { padding: .55rem; }
  .platform-shot-mac { min-height: 250px; }
  .platform-shot-phone { min-height: 380px; }
  .sidebar-story { padding: 1.15rem; }
  .sidebar-story-copy h3 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .sidebar-wide-pair figcaption { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .sidebar-mobile-sequence figure { padding: .35rem; }
  .sidebar-mobile-step { top: .6rem; left: .6rem; padding: .35rem .4rem; font-size: .42rem; }
  .space-story { padding-inline: 1rem; }
  .space-browser-showcase { width: min(300px, calc(100vw - 2rem)); }
  .space-browser-screen { aspect-ratio: 1206 / 1900; box-shadow: 0 1.5rem 3rem rgba(16,24,39,.2); }
  .space-browser-desktop-shot { display: none; }
  .space-browser-mobile-shot { display: block; object-fit: cover !important; object-position: top; }
  .space-browser-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .space-browser-actions-label { grid-column: 1 / 3; margin: 0; align-items: center; }
  .space-browser-actions-label small, .space-browser-actions button small { display: none; }
  .space-browser-actions button { min-width: 0; min-height: 3rem; padding: .3rem .45rem; gap: .25rem; }
  .space-choice-crest { width: 2.1rem; height: 2.5rem; }
  .space-browser-caption { display: block; text-align: center; }
  .space-browser-caption .eyebrow { margin: 0 0 .55rem; }
  .space-browser-caption h3 { font-size: 1.55rem; }
  .space-browser-caption > p:not(.eyebrow,.space-browser-meta) { margin-top: .6rem; font-size: .68rem; }
  .space-browser-meta { display: none; }
  .space-ledger, .feature-ledger { width: 100%; grid-template-columns: 1fr; }
  .crest-anatomy { grid-template-columns: 1fr 1fr; }
  .crest-anatomy article, .crest-anatomy article:nth-child(4) { grid-column: auto; min-height: 190px; }
  .crest-anatomy article:nth-child(5) { grid-column: 1 / -1; }
  .crest-anatomy img { max-height: 145px; }
  .forge-devices { grid-template-columns: 1fr .3fr; min-height: 240px; padding: .55rem; }
  .migration-source-shot, .migration-review-shot { padding: .35rem; }
  .migration-source-shot figcaption { grid-template-columns: 2.1rem minmax(0,1fr); padding: .9rem .35rem .35rem; }
  .migration-source-ledger article { min-height: 125px; padding: 1rem; }
  .migration-review-copy { padding: 1.6rem; }
  .migration-review-copy h3 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .extension-install-path { min-height: 270px; }
  .extension-management-strip { width: 100%; }
  .extension-audit { padding: 1.6rem; }
  .feature-localhost figure { aspect-ratio: 1329 / 850; }
  .final-crest { display: none; }
  .extensions-story { padding-inline: 1rem; }
  .extension-runtime-copy { padding: 1.6rem; }
  .extension-runtime-copy h3 { font-size: clamp(2.7rem,13vw,4rem); }
  .extension-attention { margin: 0 1rem 1rem; }
  .extension-audit { width: 100%; }
  .extension-audit-heading h3 { font-size: clamp(2.7rem,13vw,4rem); }
  .extension-boundaries { width: 100%; }
  .extension-navigation-note, .extension-release-note, .extension-guides-link { width: 100%; }
  .extension-guides-link { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
  .privacy-hero h1 { font-size: clamp(3.4rem,17vw,4.8rem); }
  .privacy-article > section { padding-bottom: 3.5rem; margin-bottom: 3.5rem; }
  .privacy-article h2 { font-size: clamp(2.7rem,13vw,4rem); }
  .privacy-attribution { margin-inline: 0; padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}