:root {
  --ink: #070a12;
  --ink-soft: #0c1220;
  --surface: #101827;
  --surface-raised: #131e30;
  --line: rgba(189, 220, 255, 0.17);
  --line-strong: rgba(189, 220, 255, 0.3);
  --text: #f1f6fc;
  --muted: #a9b8cb;
  --dim: #77869a;
  --blue: #54c9f7;
  --ice: #c9f4ff;
  --ember: #ff8844;
  --ember-soft: #ffc080;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --page: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 3%, rgba(34, 62, 105, 0.58) 0, transparent 31rem),
    radial-gradient(circle at 1% 35%, rgba(17, 56, 91, 0.58) 0, transparent 36rem),
    radial-gradient(circle at 84% 72%, rgba(84, 36, 24, 0.2) 0, transparent 28rem),
    var(--ink);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(176, 217, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 217, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

/* Ambient particle field. z-index -1 puts it in the same negative layer as the
   body::before grid; because it comes later in the tree it paints above that
   grid, and the whole negative layer paints below normal-flow content, the
   sticky header (9), and the grain (10). z-index 0 would NOT work here: it
   would paint above unpositioned text. */
.particle-field {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0.045;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.045em; }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  background: var(--ice);
  color: var(--ink);
  font-weight: 800;
}

.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 9;
  min-height: 78px;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 10, 18, 0.78);
  backdrop-filter: blur(18px);
}

.brand,
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.brand img,
.footer-brand img {
  object-fit: contain;
  filter: drop-shadow(0 0 11px rgba(79, 195, 247, 0.58));
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.3rem);
  color: var(--muted);
  font-size: 0.8rem;
}

.site-header nav a,
.nav-action { text-decoration: none; }
.site-header nav a { transition: color 160ms ease; }
.site-header nav a:hover { color: var(--ice); }

.nav-action {
  padding-bottom: 0.22rem;
  border-bottom: 1px solid var(--ember);
  font-size: 0.8rem;
  white-space: nowrap;
}

.mobile-menu { display: none; position: relative; }
.mobile-menu summary { padding: 0.45rem 0.7rem; border: 1px solid var(--line-strong); color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; list-style: none; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { border-color: var(--ice); color: var(--ice); }
.mobile-menu nav { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; min-width: 190px; display: grid; padding: 0.55rem; border: 1px solid var(--line-strong); background: rgba(7, 10, 18, 0.97); }
.mobile-menu nav a { padding: 0.6rem 0.65rem; color: var(--muted); font-size: 0.82rem; text-decoration: none; }
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible { color: var(--ice); }

.hero {
  width: min(100%, 1320px);
  min-height: min(760px, calc(100svh - 78px));
  margin: 0 auto;
  padding: clamp(4.8rem, 9vw, 7.5rem) clamp(1.5rem, 7vw, 7rem) 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero-copy { position: relative; z-index: 2; max-width: 650px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.15rem;
  color: var(--ember-soft);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow span { display: block; width: 19px; height: 1px; background: var(--ember); }

h1 {
  margin-bottom: 1.65rem;
  font-size: clamp(3.65rem, 6vw, 6.1rem);
  line-height: 0.96;
}

h1 em {
  color: var(--blue);
  font-style: normal;
  text-shadow: 0 0 32px rgba(79, 195, 247, 0.24);
}

.hero-summary {
  max-width: 540px;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2.1rem 0 1.35rem;
}

.button {
  min-height: 46px;
  padding: 0.78rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 0;
  border-radius: 0;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.primary {
  position: relative;
  overflow: hidden;
  color: #281108;
  background: linear-gradient(135deg, #fff1e7, #ff9b56);
  box-shadow: 0 8px 28px rgba(255, 138, 61, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 32%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-14deg) translateX(-140%);
}

@media (hover: hover) {
  .primary:hover::after { animation: button-shine 720ms ease; }
}

.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255, 138, 61, 0.3);
}

.text-link {
  color: var(--muted);
  font-size: 0.86rem;
  text-underline-offset: 0.32rem;
  transition: color 160ms ease;
}

.text-link:hover { color: var(--ice); }
.quiet-note { margin: 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.025em; }

.artifact-stage {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
}

.artifact-halo {
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.16), rgba(79, 195, 247, 0.035) 45%, transparent 72%);
  filter: blur(4px);
}

.hero-mark-wrap {
  position: absolute;
  width: min(92%, 430px);
  transform: perspective(700px) rotateY(var(--mark-tilt-x, 0deg)) rotateX(var(--mark-tilt-y, 0deg));
  will-change: transform;
  animation: float 7s ease-in-out infinite;
}

.hero-mark {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55)) drop-shadow(-18px 2px 26px rgba(62, 192, 255, 0.35)) drop-shadow(18px 3px 28px rgba(255, 117, 45, 0.3));
}

.hero-mark-shimmer {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: url("assets/aifrit-mark.png");
  mask-image: url("assets/aifrit-mark.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .hero-mark-shimmer { display: block; }
}

.hero-mark-shimmer::before {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(201, 244, 255, 0.32) 42%, rgba(255, 192, 128, 0.2) 58%, transparent);
  transform: translateX(-180%) rotate(9deg);
  animation: shimmer-sweep 6.8s ease-in-out infinite;
}

.artifact-caption {
  position: absolute;
  bottom: 9%;
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stage-coordinate {
  position: absolute;
  color: rgba(201, 244, 255, 0.45);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
}

.coordinate-a { top: 10%; left: 2%; }
.coordinate-b { right: 1%; bottom: 14%; writing-mode: vertical-rl; }

.orbit {
  position: absolute;
  border: 1px solid rgba(123, 205, 255, 0.18);
  border-radius: 50%;
  transform: rotate(-26deg);
}

.orbit-one { width: 450px; height: 145px; }
.orbit-two { width: 330px; height: 470px; transform: rotate(30deg); border-color: rgba(255, 154, 86, 0.14); }

.ember,
.star { position: absolute; border-radius: 50%; }
.ember { width: 5px; height: 5px; background: var(--ember); box-shadow: 0 0 16px var(--ember); animation: ember-pulse 5.6s ease-in-out infinite; }
.star { width: 3px; height: 3px; background: var(--ice); box-shadow: 0 0 12px var(--blue); animation: twinkle 4.2s ease-in-out infinite; }
.ember-a { top: 17%; right: 16%; }
.ember-b { bottom: 24%; left: 10%; animation-delay: -1.9s; }
.ember-c { top: 55%; right: 3%; animation-delay: -3.7s; }
.star-a { top: 24%; left: 11%; }
.star-b { top: 19%; right: 6%; animation-delay: -1.3s; }
.star-c { bottom: 19%; right: 17%; animation-delay: -2.1s; }
.star-d { bottom: 35%; left: 4%; animation-delay: -3.2s; }

.section-heading { max-width: 640px; }
.section-heading.wide { max-width: 820px; }
.section-heading h2 { margin-bottom: 1.2rem; font-size: clamp(2.7rem, 4.8vw, 4.5rem); line-height: 1.02; }
.section-heading > p:not(.eyebrow) { color: var(--muted); }
.centered { margin-inline: auto; text-align: center; }
.centered .eyebrow { justify-content: center; }

.memory-section,
.growth-section,
.access-section {
  width: min(100%, var(--page));
  margin: 0 auto;
  padding: 7rem clamp(1.5rem, 5vw, 4rem);
}

.memory-field {
  position: relative;
  min-height: 580px;
  margin-top: 3.5rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(169, 221, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 221, 255, 0.04) 1px, transparent 1px),
    linear-gradient(115deg, rgba(22, 53, 83, 0.58), rgba(9, 14, 25, 0.78) 45%, rgba(76, 33, 23, 0.26));
  background-size: 44px 44px, 44px 44px, auto;
}

.memory-field::before,
.memory-field::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.65;
}

.memory-field::before { width: 420px; height: 420px; right: -100px; top: -110px; background: radial-gradient(circle, rgba(55, 171, 240, 0.24), transparent 66%); }
.memory-field::after { width: 350px; height: 350px; left: -80px; bottom: -150px; background: radial-gradient(circle, rgba(255, 126, 54, 0.16), transparent 68%); }

.field-help,
.field-index { position: absolute; top: 1.15rem; z-index: 2; margin: 0; font-size: 0.7rem; }
.field-help { left: 1.35rem; color: var(--muted); }
.field-index { right: 1.35rem; color: var(--dim); letter-spacing: 0.12em; }

.field-core {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 2;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.field-core img {
  width: 140px;
  height: auto;
  filter: drop-shadow(-9px 0 16px rgba(79, 195, 247, 0.5)) drop-shadow(8px 0 16px rgba(255, 138, 61, 0.4));
}

.field-core span { color: var(--ice); font-size: 0.56rem; letter-spacing: 0.23em; }

.core-ring {
  position: absolute;
  width: 185px;
  height: 185px;
  border: 1px solid rgba(174, 234, 255, 0.33);
  border-radius: 50%;
  animation: ring 10s linear infinite;
}

.core-ring::before,
.core-ring::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(255, 168, 103, 0.2); border-radius: 50%; transform: rotateX(68deg); }
.core-ring::after { inset: -17px; transform: rotateY(65deg); }

.memory-object {
  position: absolute;
  z-index: 3;
  min-width: 124px;
  min-height: 68px;
  padding: 0.92rem 1rem;
  border: 1px solid rgba(188, 229, 255, 0.32);
  background: rgba(10, 17, 28, 0.8);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .memory-object { cursor: grab; }
  .memory-object.dragging { cursor: grabbing; transition: none; }
}

.memory-object:hover,
.memory-object:focus-visible,
.memory-object.active {
  border-color: var(--ember-soft);
  background: rgba(30, 44, 63, 0.96);
  box-shadow: 0 0 28px rgba(255, 138, 61, 0.08);
}

.memory-object:hover:not(.dragging),
.memory-object:focus-visible { transform: translateY(-3px); }
.memory-object.active { border-left-color: var(--blue); }
.memory-object b,
.memory-object small { display: block; }
.memory-object b { font-family: var(--display); font-size: 1.28rem; font-weight: 400; }
.memory-object small { margin-top: 0.08rem; color: var(--muted); font-size: 0.63rem; }
.goal { left: 8%; top: 24%; }
.context { right: 9%; top: 19%; }
.decision { left: 14%; bottom: 18%; }
.memory { right: 13%; bottom: 19%; }

.memory-response {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  z-index: 4;
  width: min(90%, 620px);
  padding: 1rem 1.25rem 0;
  border-top: 1px solid rgba(201, 242, 255, 0.33);
  background: linear-gradient(90deg, transparent, rgba(7, 11, 20, 0.88) 15%, rgba(7, 11, 20, 0.88) 85%, transparent);
  text-align: center;
  transform: translateX(-50%);
}

.response-label { margin: 0 0 0.35rem; color: var(--ember-soft); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.response-copy { margin: 0; color: #dbe7f2; font-family: var(--display); font-size: 1.1rem; }
.connection-line {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 244, 255, 0.9), rgba(132, 215, 255, 0.5) 55%, rgba(255, 136, 68, 0.6));
  box-shadow: 0 0 9px rgba(132, 215, 255, 0.35);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.connection-line.is-active { opacity: 1; }

/* Ambient memory threads: one per .memory-object, each running from the core
   to that object. Position, length and angle come entirely from script.js,
   measured with the same core-to-object geometry the connection line uses, so
   the selected object's thread is exactly where the bright line lands and the
   two read as one thread lighting up. Width and opacity start at zero because
   without JavaScript there is no measurement, and for pure decoration absent
   is correct where misaligned is not. The compact layout hides the container
   outright (see the max-width: 620px block). */
.thread-lines i { position: absolute; width: 0; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(132, 215, 255, 0.42), transparent); transform-origin: 0 50%; pointer-events: none; transition: opacity 420ms ease; }
.thread-lines i.is-active { opacity: 1; }

/* The travelling highlight only exists on a thread that has been measured.
   Motion is left to the global prefers-reduced-motion rule, which halts every
   animation on the page and leaves these as static filaments. */
.thread-lines i.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 42%, rgba(201, 244, 255, 0.65) 50%, transparent 58%); background-size: 220% 100%; background-position: -60% 0; background-repeat: no-repeat; animation: thread-pulse 5.4s linear infinite; }
.thread-lines i:nth-child(2).is-active::after { animation-delay: -1.35s; }
.thread-lines i:nth-child(3).is-active::after { animation-delay: -2.7s; }
.thread-lines i:nth-child(4).is-active::after { animation-delay: -4.05s; }

.field-cta { margin: 1.6rem 0 0; text-align: center; }

.growth-section { padding-top: 4.5rem; }

.contrast-strip { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contrast-cell { padding: 1.7rem 1.9rem; background: rgba(10, 17, 29, 0.9); }
.contrast-cell p:last-child { max-width: 430px; margin: 0; color: var(--muted); font-family: var(--display); font-size: 1.12rem; }
.contrast-cell .cap-number { color: var(--dim); }
.contrast-cell.is-aifrit { background: linear-gradient(135deg, rgba(24, 54, 80, 0.85), rgba(59, 31, 23, 0.55)); }
.contrast-cell.is-aifrit .cap-number { color: var(--ember-soft); }
.contrast-cell.is-aifrit p:last-child { color: var(--text); }
.growth-path { margin: 3.2rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; counter-reset: path; }
.growth-path li { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; padding: 2.1rem 0; border-bottom: 1px solid var(--line); transition: border-color 320ms ease, padding-left 320ms ease; }
.growth-path span { color: var(--ember); font-size: 0.7rem; letter-spacing: 0.1em; transition: text-shadow 320ms ease; }

@media (hover: hover) {
  .growth-path li:hover { padding-left: 0.6rem; border-bottom-color: rgba(255, 161, 87, 0.4); }
  .growth-path li:hover span { text-shadow: 0 0 14px rgba(255, 136, 68, 0.55); }
}
.growth-path h3 { margin-bottom: 0.35rem; font-family: var(--display); font-size: 1.35rem; font-weight: 400; }
.growth-path p { max-width: 570px; margin: 0; color: var(--muted); }

.capabilities-section { padding: 7rem clamp(1.5rem, 5vw, 4rem); background: linear-gradient(180deg, transparent, rgba(19, 37, 59, 0.32), transparent); }
.capabilities-section > .section-heading { width: min(100%, calc(var(--page) - 8rem)); max-width: 900px; margin: 0 auto; }
.capability-grid { width: min(100%, calc(var(--page) - 8rem)); margin: 3.2rem auto 0; display: grid; grid-template-columns: 1.15fr 0.85fr 1fr; gap: 1px; background: var(--line); }
.capability { position: relative; min-height: 365px; overflow: hidden; padding: 2rem; background: #0a111d; transition: background 320ms ease; }
.capability::after { content: ""; position: absolute; right: -40px; bottom: -80px; width: 180px; height: 180px; border: 1px solid rgba(173, 229, 255, 0.1); transform: rotate(45deg); transition: transform 640ms ease, border-color 320ms ease; }

@media (hover: hover) {
  .capability:hover { background: #0c1524; }
  .capability:hover::after { transform: rotate(63deg); border-color: rgba(173, 229, 255, 0.2); }
  .capability:hover .archive i { border-color: rgba(143, 223, 255, 0.85); }
  .capability:hover .archive i:nth-child(2) { border-color: rgba(255, 161, 87, 0.9); }
  .capability:hover .archive i:nth-child(1) { translate: 6px 3px; }
  .capability:hover .archive i:nth-child(2) { translate: 0 6px; }
  .capability:hover .archive i:nth-child(3) { translate: -6px -3px; }
}
.capability h3 { margin: 0.4rem 0 0.7rem; font-family: var(--display); font-size: 2rem; font-weight: 400; }
.capability > p:last-child { max-width: 290px; color: var(--muted); font-size: 0.9rem; }
.cap-number { margin-bottom: 0.35rem; color: var(--ember-soft); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.15em; }
.artifact-symbol { position: relative; height: 150px; margin-bottom: 1rem; }
.artifact-symbol i { position: absolute; display: block; }
.archive i { width: 78px; height: 78px; left: 10%; top: 35px; border: 1px solid rgba(143, 223, 255, 0.6); background: linear-gradient(135deg, rgba(105, 212, 255, 0.16), transparent); transform: rotate(45deg); animation: archive-breathe 7.5s ease-in-out infinite; transition: translate 520ms ease, border-color 320ms ease; }
.archive i:nth-child(2) { left: 32%; top: 17px; border-color: rgba(255, 161, 87, 0.7); animation-delay: -2.5s; }
.archive i:nth-child(3) { left: 55%; top: 64px; border-color: rgba(143, 223, 255, 0.36); animation-delay: -5s; }
.compass::before { content: ""; position: absolute; left: 35%; top: 8px; width: 130px; height: 130px; border: 1px solid rgba(255, 183, 112, 0.5); border-radius: 50%; }
.compass i:first-child { left: calc(35% + 37px); top: 33px; width: 56px; height: 80px; background: linear-gradient(180deg, var(--ember) 50%, rgba(201, 244, 255, 0.72) 50%); clip-path: polygon(50% 0, 82% 100%, 50% 78%, 18% 100%); filter: drop-shadow(0 0 12px rgba(255, 138, 61, 0.35)); transform: rotate(24deg); animation: compass-wander 11s ease-in-out infinite; }
.compass.is-tracking i:first-child { animation: none; transform: rotate(var(--compass-angle, 24deg)); }
.compass i:last-child { left: calc(35% + 61px); top: 69px; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px rgba(84, 201, 247, 0.8); }
.voice i { left: 15%; bottom: 15px; width: 8px; background: var(--blue); box-shadow: 0 0 14px rgba(79, 195, 247, 0.5); transform-origin: 50% 100%; transform: scaleY(calc(1 + var(--bar-boost, 0) * 0.35)); filter: brightness(calc(1 + var(--bar-boost, 0) * 0.8)); animation: voice-idle 3.6s ease-in-out infinite; }
.voice i:nth-child(1) { height: 54px; }
.voice i:nth-child(2) { left: 27%; height: 105px; background: var(--ice); animation-delay: -1.2s; }
.voice i:nth-child(3) { left: 39%; height: 77px; background: var(--ember); animation-delay: -2.4s; }

.access-section { padding-top: 6rem; }
.journey-rail { margin: 3.5rem 0 1px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); list-style: none; }
.journey-rail li { position: relative; min-height: 128px; padding: 1.35rem; display: flex; flex-direction: column; background: rgba(10, 17, 29, 0.92); transition: background 320ms ease; }

@media (hover: hover) {
  .journey-rail li:hover { background: rgba(17, 28, 45, 0.96); }
  .journey-rail li:hover span { color: var(--ember-soft); }
}
.journey-rail li::after { content: "→"; position: absolute; right: -0.55rem; top: 50%; z-index: 2; width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--blue); font-size: 0.72rem; transform: translateY(-50%); }
.journey-rail li:last-child::after { content: none; }
.journey-rail span { margin-bottom: auto; color: var(--ember); font-size: 0.62rem; letter-spacing: 0.12em; }
.journey-rail strong { font-family: var(--display); font-size: 1.05rem; font-weight: 400; }
.journey-rail small { color: var(--dim); font-size: 0.66rem; }

.access-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1px; background: var(--line); }
.access-grid article { min-width: 0; min-height: 300px; padding: 2rem; background: #0a111d; }
.access-grid article:first-child { background: linear-gradient(135deg, #1a2a3d, #261a15); }
.access-grid h3,
.destination-strip h3 { margin: 0.4rem 0 0.65rem; font-family: var(--display); font-size: 1.8rem; font-weight: 400; }
.access-grid article > p:not(.cap-number, .access-note, .price-line) { min-height: 76px; color: var(--muted); font-size: 0.88rem; }
.price-line { margin: 0.2rem 0 1rem; display: flex; align-items: baseline; gap: 0.5rem; }
.price-line strong { font-family: var(--display); font-size: 2.2rem; font-weight: 400; color: var(--text); }
.price-line span { color: var(--muted); font-size: 0.78rem; }

.access-note { margin: 0.9rem 0 0; color: var(--dim); font-size: 0.72rem; }
.member-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

.destination-strip { margin-top: 1px; padding: 2rem; display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: 2rem; border: 1px solid var(--line); background: rgba(10, 17, 29, 0.76); }
.destination-strip h3 { font-size: 1.3rem; }
.destination-strip p { margin-bottom: 0; color: var(--muted); font-size: 0.8rem; }
.destination-strip > .text-link { justify-self: end; }

.faq-section { width: min(100%, calc(var(--page) - 8rem)); margin: 0 auto; padding: 2rem clamp(1.5rem, 5vw, 4rem) 7rem; }
.faq-list { margin-top: 2.6rem; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.3rem 2.4rem 1.3rem 0; list-style: none; cursor: pointer; font-family: var(--display); font-size: 1.25rem; transition: color 200ms ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; color: var(--ember-soft); font-family: var(--sans); font-size: 1.1rem; transform: translateY(-50%); transition: transform 260ms ease; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details[open] summary { color: var(--ice); }
.faq-list details p { max-width: 640px; margin: 0; padding: 0 0 1.4rem; color: var(--muted); }
.faq-list details a { color: var(--ice); text-underline-offset: 0.28rem; }

@media (hover: hover) {
  .faq-list summary:hover { color: var(--ice); }
}

footer { padding: 2.2rem clamp(1.5rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.78rem; }
footer p { margin: 0; }
.footer-brand { color: var(--text); }
.prototype-label { color: #718098; font-size: 0.6rem; letter-spacing: 0.12em; }

/* Checkout visual prototype */
.checkout-page { background: radial-gradient(circle at 17% 12%, rgba(22, 60, 94, 0.58), transparent 29rem), radial-gradient(circle at 83% 46%, rgba(91, 41, 24, 0.27), transparent 32rem), var(--ink); }
.checkout-header { position: relative; }
.header-prototype-label { margin: 0; color: var(--dim); font-size: 0.6rem; letter-spacing: 0.16em; }
.checkout-main { width: min(100%, 1120px); margin: 0 auto; padding: 5.5rem clamp(1.5rem, 5vw, 4rem) 7rem; }
.checkout-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); align-items: end; gap: 4rem; }
.checkout-intro h1 { max-width: 720px; margin: 0; font-size: clamp(3.25rem, 6vw, 5.8rem); }
.checkout-intro > p { max-width: 420px; margin: 0 0 0.55rem; color: var(--muted); }

.checkout-progress { margin: 4rem 0 1px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); list-style: none; }
.checkout-progress li { min-width: 0; padding: 1rem 1.15rem; display: grid; grid-template-columns: auto 1fr; column-gap: 0.8rem; background: rgba(10, 17, 29, 0.94); }
.checkout-progress li.current { background: linear-gradient(135deg, rgba(24, 54, 80, 0.96), rgba(59, 31, 23, 0.9)); box-shadow: inset 0 -2px var(--ember); }
.checkout-progress li.complete span { color: var(--blue); }
.checkout-progress span { grid-row: 1 / 3; align-self: center; color: var(--dim); font-size: 0.62rem; letter-spacing: 0.1em; }
.checkout-progress strong { font-family: var(--display); font-size: 1rem; font-weight: 400; }
.checkout-progress small { color: var(--dim); font-size: 0.64rem; }

.checkout-artifact { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); border: 1px solid var(--line); background: rgba(8, 13, 22, 0.82); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.26); }
.checkout-context,
.payment-preview { min-width: 0; padding: clamp(1.5rem, 4vw, 3rem); }
.checkout-context { border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(23, 51, 78, 0.66), rgba(10, 17, 29, 0.2) 58%, rgba(78, 35, 23, 0.24)); }
.verified-badge { width: fit-content; margin-bottom: 2.8rem; padding: 0.42rem 0.65rem; border: 1px solid rgba(91, 211, 244, 0.38); background: rgba(52, 151, 183, 0.09); color: var(--ice); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.verified-badge span { margin-right: 0.35rem; color: var(--blue); }
.context-kicker { margin-bottom: 0.5rem; color: var(--dim); font-size: 0.6rem; letter-spacing: 0.15em; }
.checkout-context > h2,
.payment-preview h2 { margin-bottom: 1.7rem; font-size: 2.35rem; line-height: 1.05; }
.invite-facts { margin: 0 0 2rem; }
.invite-facts div { padding: 0.8rem 0; display: flex; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.invite-facts dt { color: var(--dim); font-size: 0.72rem; }
.invite-facts dd { margin: 0; color: var(--text); font-size: 0.75rem; text-align: right; }
.plan-card { padding: 1.35rem; border: 1px solid var(--line-strong); background: rgba(8, 13, 22, 0.62); }
.plan-card > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.plan-card h3 { margin: 0; font-family: var(--display); font-size: 1.4rem; font-weight: 400; }
.plan-price { margin: 1.15rem 0 0.35rem; display: flex; align-items: baseline; gap: 0.45rem; }
.plan-price strong { font-family: var(--display); font-size: 2.1rem; font-weight: 400; }
.plan-price span { color: var(--muted); font-size: 0.72rem; }
.confirmation-tag { margin: 0; color: var(--dim); font-size: 0.65rem; }
.trial-note { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line); color: var(--ember-soft); font-size: 0.72rem; }

.preview-heading { margin-bottom: 2rem; display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.preview-heading h2 { margin: 0; }
.preview-heading > span { padding: 0.35rem 0.45rem; border: 1px solid rgba(255, 179, 112, 0.3); color: var(--ember-soft); font-size: 0.55rem; letter-spacing: 0.12em; }
.card-placeholder { padding: 1.4rem; display: grid; gap: 1rem; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.025); }
.placeholder-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.placeholder-field { min-width: 0; }
.placeholder-field span { display: block; margin-bottom: 0.4rem; color: var(--dim); font-size: 0.63rem; }
.placeholder-field i { display: block; height: 42px; border: 1px solid rgba(189, 220, 255, 0.14); background: linear-gradient(90deg, rgba(201, 244, 255, 0.035), transparent); }
.security-note { margin: 1.5rem 0; display: grid; grid-template-columns: 32px 1fr; gap: 0.8rem; }
.security-glyph { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--blue); transform: rotate(45deg); }
.security-note p { margin: 0; color: var(--muted); font-size: 0.72rem; }
.security-note strong { display: block; margin-bottom: 0.2rem; color: var(--text); font-size: 0.73rem; }
.prototype-submit { min-height: 48px; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, rgba(255, 241, 231, 0.34), rgba(255, 155, 86, 0.34)); color: rgba(255, 245, 239, 0.74); font-size: 0.8rem; font-weight: 800; cursor: not-allowed; }
.prototype-submit span { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
.payment-footnote { margin: 0.8rem 0 0; color: var(--dim); font-size: 0.62rem; }

.activation-preview { margin-top: 1px; padding: 2rem; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 1.5rem; border: 1px solid var(--line); background: rgba(10, 17, 29, 0.88); }
.activation-symbol { position: relative; width: 56px; height: 56px; border: 1px solid rgba(84, 201, 247, 0.48); transform: rotate(45deg); }
.activation-symbol::before,
.activation-symbol::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 136, 68, 0.35); }
.activation-symbol i { position: absolute; inset: 22px; background: var(--ice); box-shadow: 0 0 18px var(--blue); }
.activation-preview h2 { margin: 0.1rem 0 0.35rem; font-size: 1.7rem; }
.activation-preview p:not(.cap-number) { max-width: 670px; margin: 0; color: var(--muted); font-size: 0.78rem; }
.outcome-state { color: var(--dim); font-size: 0.58rem; letter-spacing: 0.14em; white-space: nowrap; }
.prototype-boundary { margin-top: 1.5rem; padding: 1rem 1.2rem; display: flex; gap: 1.4rem; border-left: 2px solid var(--ember); background: rgba(255, 136, 68, 0.045); color: var(--muted); font-size: 0.72rem; }
.prototype-boundary strong { color: var(--ember-soft); white-space: nowrap; }
.prototype-boundary p { margin: 0; }

/* Scroll reveal — the .reveal class is only ever added by script.js when
   IntersectionObserver exists and reduced motion is off, so nothing is
   hidden for no-JS or reduced-motion visitors. */
.reveal { opacity: 0; translate: 0 18px; transition: opacity 640ms ease, translate 640ms ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

@keyframes float { 50% { translate: 0 -9px; rotate: 0.7deg; } }
@keyframes ring { to { transform: rotate(360deg); } }
@keyframes voice-idle { 50% { scale: 1 1.07; } }
@keyframes twinkle { 50% { opacity: 0.35; scale: 0.8; } }
@keyframes button-shine { to { transform: skewX(-14deg) translateX(560%); } }
@keyframes ember-pulse { 50% { opacity: 0.55; box-shadow: 0 0 7px var(--ember); } }
@keyframes thread-pulse { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
@keyframes compass-wander {
  0%, 100% { transform: rotate(24deg); }
  28% { transform: rotate(-18deg); }
  55% { transform: rotate(7deg); }
  80% { transform: rotate(-6deg); }
}
@keyframes archive-breathe {
  0%, 100% { transform: translateY(0) rotate(45deg) scale(1); }
  50% { transform: translateY(-6px) rotate(45deg) scale(1.03); }
}
@keyframes shimmer-sweep {
  0%, 52% { transform: translateX(-180%) rotate(9deg); }
  88%, 100% { transform: translateX(430%) rotate(9deg); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); padding-inline: 3rem; }
  .capability-grid,
  .capabilities-section > .section-heading { width: min(100%, 760px); }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability:last-child { grid-column: 1 / -1; }
  .access-grid article { min-height: 260px; }
  .checkout-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .checkout-artifact { grid-template-columns: 1fr; }
  .checkout-context { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .site-header { min-height: 68px; padding-inline: 1.25rem; }
  .site-header > nav { display: none; }
  .mobile-menu { display: block; }
  .nav-action { font-size: 0.72rem; }
  .hero { min-height: auto; padding: 4.5rem 1.5rem 5rem; grid-template-columns: 1fr; gap: 2.5rem; }
  h1 { font-size: clamp(3.25rem, 14vw, 4.7rem); }
  .hero-summary { font-size: 0.98rem; }
  .artifact-stage { min-height: 265px; }
  .hero-mark-wrap { width: min(84vw, 300px); }
  .orbit-one { width: min(88vw, 300px); height: 96px; }
  .orbit-two { width: 200px; height: 275px; }
  .artifact-caption { bottom: 0; }
  .coordinate-a { left: 5%; }
  .coordinate-b { right: 4%; }
  .memory-section,
  .growth-section,
  .access-section { padding: 5rem 1.5rem; }
  .capabilities-section { padding: 5rem 1.5rem; }
  .section-heading h2 { font-size: clamp(2.55rem, 11vw, 3.6rem); }
  .capability-grid,
  .capabilities-section > .section-heading { width: 100%; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability:last-child { grid-column: auto; }
  .capability { min-height: 300px; }
  .contrast-strip { grid-template-columns: 1fr; }
  .faq-section { padding: 1rem 1.5rem 5rem; }
  .faq-list summary { font-size: 1.1rem; }
  .journey-rail { grid-template-columns: 1fr 1fr; }
  .journey-rail li:nth-child(2)::after { content: none; }
  .journey-rail li { min-height: 112px; }
  .access-grid { grid-template-columns: 1fr; }
  .access-grid article { min-height: auto; }
  .access-grid article > p:not(.cap-number, .access-note) { min-height: auto; }
  .destination-strip { grid-template-columns: 1fr; }
  .destination-strip > .text-link { justify-self: start; }
  footer { align-items: flex-start; flex-direction: column; gap: 0.65rem; }
  .checkout-main { padding: 4.5rem 1.5rem 5rem; }
  .checkout-intro h1 { font-size: clamp(3rem, 13vw, 4.4rem); }
  .checkout-progress { grid-template-columns: 1fr 1fr; }
  .checkout-progress li { padding: 0.85rem; }
  .activation-preview { grid-template-columns: 52px 1fr; }
  .outcome-state { grid-column: 2; }
  .prototype-boundary { flex-direction: column; gap: 0.4rem; }
}

@media (max-width: 620px) {
  .memory-field { min-height: auto; padding: 4.65rem 1rem 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .field-help { right: 1rem; line-height: 1.35; }
  .field-index,
  .thread-lines { display: none; }
  .field-core { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 170px; height: 170px; margin: 0 auto 0.5rem; transform: none; }
  .field-core img { width: 125px; }
  .core-ring { width: 165px; height: 165px; }
  .memory-object { position: relative; inset: auto; width: 100%; min-width: 0; min-height: 68px; padding: 0.75rem; }
  .memory-response { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; width: 100%; margin-top: 0.35rem; padding: 1rem 0.35rem 0.25rem; transform: none; }
  .response-copy { font-size: 1rem; }
  .header-prototype-label { display: none; }
  .checkout-context,
  .payment-preview { padding: 1.4rem; }
  .verified-badge { margin-bottom: 2rem; }
  .checkout-context > h2,
  .payment-preview h2 { font-size: 2rem; }
  .preview-heading { align-items: flex-start; flex-direction: column; }
  .invite-facts div { flex-direction: column; gap: 0.2rem; }
  .invite-facts dd { text-align: left; }
  .placeholder-row { grid-template-columns: 1fr; }
  .prototype-submit { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .site-header { gap: 0.75rem; }
  .brand { font-size: 0.9rem; }
  .nav-action { font-size: 0.66rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.1rem; }
  .button { width: 100%; }
  .journey-rail { grid-template-columns: 1fr; }
  .journey-rail li::after,
  .journey-rail li:nth-child(2)::after { content: "↓"; right: 50%; top: auto; bottom: -0.56rem; transform: translateX(50%); }
  .journey-rail li:last-child::after { content: none; }
  .checkout-progress strong { font-size: 0.9rem; }
  .checkout-progress small { font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-mark-wrap { transform: none; translate: none; rotate: none; }
  .hero-mark-shimmer { display: none; }
  .particle-field { display: none; }
}

/* ---------------------------------------------------------------------------
   Download page (/download). Self-contained: this block adds only new
   selectors, so nothing above it changes. The page reuses the site header,
   footer, buttons, eyebrow, cap-number, destination-strip, and reveal
   behaviour; only the platform cards and the release table are new.
   --------------------------------------------------------------------------- */

.download-main { width: min(100%, var(--page)); margin: 0 auto; padding: 4.5rem clamp(1.5rem, 5vw, 4rem) 6rem; }
.download-intro { margin-bottom: 3.2rem; }
.download-intro h1 { margin-bottom: 1.2rem; font-size: clamp(2.9rem, 5.4vw, 4.6rem); line-height: 1.02; }
.download-intro > p:not(.eyebrow) { max-width: 640px; color: var(--muted); }

.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }

.platform-card { min-width: 0; padding: 2.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; background: #0a111d; }
.platform-card:first-child { background: linear-gradient(135deg, #1a2a3d, #261a15); }
.platform-card h2 { margin: 0.4rem 0 0.75rem; font-family: var(--display); font-size: 1.9rem; font-weight: 400; }
.platform-summary { min-height: 76px; margin: 0 0 1.5rem; color: var(--muted); font-size: 0.88rem; }
.platform-note { margin: 0.95rem 0 0; color: var(--dim); font-size: 0.72rem; }

/* The Apple row is deliberately inert rather than a link to nowhere: there is
   no iOS build to point at, so it announces itself as disabled to assistive
   technology and never takes a click. */
.platform-card.is-unavailable { background: rgba(10, 17, 29, 0.72); }
.platform-card.is-unavailable h2,
.platform-card.is-unavailable .cap-number { color: var(--dim); }
.button.is-disabled { color: var(--dim); background: none; border: 1px solid var(--line); cursor: not-allowed; box-shadow: none; }
.button.is-disabled:hover { transform: none; }

.download-detail { margin-top: 3.6rem; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.detail-column { min-width: 0; padding: 2.2rem; background: rgba(8, 13, 22, 0.86); }
.detail-column h2 { margin: 0.4rem 0 1.5rem; font-family: var(--display); font-size: 1.6rem; font-weight: 400; }

.install-steps { margin: 0 0 1.4rem; padding-left: 1.2rem; display: grid; gap: 1rem; color: var(--muted); font-size: 0.88rem; }
.install-steps li { padding-left: 0.35rem; }
.install-steps li::marker { color: var(--ember-soft); font-weight: 800; }
.install-steps strong { color: var(--text); font-weight: 750; }

.release-facts { margin: 0 0 1.8rem; }
.release-facts div { padding: 0.7rem 0; display: flex; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.release-facts dt { color: var(--dim); font-size: 0.74rem; }
.release-facts dd { margin: 0; color: var(--text); font-size: 0.76rem; text-align: right; }

.hash-label { margin: 0 0 0.5rem; color: var(--ember-soft); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.15em; }
/* The digest is one unbroken 64-character token: anywhere breaking keeps it
   readable on a phone without inserting characters that would corrupt a copy. */
.hash-value { margin: 0 0 1.2rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line); background: rgba(7, 10, 18, 0.72); color: var(--ice); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.6; overflow-wrap: anywhere; }

.download-archive { margin-top: 2.4rem; }
.download-archive h2 { margin: 0.4rem 0 0.9rem; font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.download-archive ul { margin: 0 0 0.8rem; padding-left: 1.1rem; color: var(--muted); font-size: 0.82rem; }
.download-archive li { margin-bottom: 0.4rem; }
.download-archive code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.76rem; color: var(--ice); }

.download-main .destination-strip { margin-top: 3.6rem; }

@media (max-width: 900px) {
  .download-detail { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .download-main { padding: 3.5rem 1.5rem 5rem; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-summary { min-height: auto; }
  .platform-card,
  .detail-column { padding: 1.6rem; }
}

/* ---------------------------------------------------------------------------
   A2 demonstration, footer links, the folded release archive, and the shared
   shell for the standalone pages (/pricing, /how-it-works, /privacy, /terms,
   404). Appended as a self-contained block: every selector here is new, so
   nothing above it changes.
   --------------------------------------------------------------------------- */

.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.footer-links a { color: var(--muted); font-size: 0.76rem; text-decoration: none; transition: color 160ms ease; }
.footer-links a:hover { color: var(--ice); }

/* The before/after demonstration is a labelled replay, so it is typeset as a
   document rather than as a chat UI: no bubbles, no avatars, no typing
   indicator, nothing that could read as a live model answering right now. It
   has no controls at all — the whole conversation is always on screen, which
   is also why it needs no JavaScript to be readable. */
.demo-section { width: min(100%, var(--page)); margin: 0 auto; padding: 6rem clamp(1.5rem, 5vw, 4rem) 2rem; }
/* Used when the component sits inside a page that already supplies the gutter. */
.demo-section.is-inline { width: auto; margin: 3.2rem 0 0; padding: 0; }

/* The label reads inline with its sentence rather than as a badge on its own
   row, so it cannot be mistaken for decoration and cannot be scrolled past. */
.demo-label,
.inline-notice { margin: 2rem 0 0; padding: 0.85rem 1rem; border-left: 2px solid var(--ember); background: rgba(255, 136, 68, 0.045); color: var(--muted); font-size: 0.76rem; line-height: 1.7; }
.demo-label b,
.inline-notice b { margin-right: 0.55rem; color: var(--ember-soft); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }

.demo-pair { margin-top: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.demo-panel { min-width: 0; padding: 1.9rem; background: rgba(10, 17, 29, 0.9); }
.demo-panel.is-later { background: linear-gradient(135deg, rgba(24, 54, 80, 0.85), rgba(59, 31, 23, 0.55)); }
.demo-panel.is-later .cap-number { color: var(--ember-soft); }
.demo-panel h3 { margin: 0.3rem 0 0; font-family: var(--display); font-size: 1.45rem; font-weight: 400; }

.demo-thread { margin: 1.35rem 0 0; padding: 0; display: grid; gap: 0.85rem; list-style: none; }
.demo-turn { min-width: 0; padding: 0.9rem 1.05rem; border: 1px solid var(--line); border-left-width: 2px; background: rgba(7, 10, 18, 0.5); }
.demo-turn.is-person { border-left-color: var(--line-strong); }
.demo-turn.is-aifrit { border-left-color: var(--ember); }
.demo-speaker { margin: 0 0 0.3rem; color: var(--dim); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.demo-turn.is-aifrit .demo-speaker { color: var(--ember-soft); }
/* Long unbroken strings in poured copy must not push the grid wider than the
   viewport; the panels are already min-width: 0 for the same reason. */
.demo-line { margin: 0; color: var(--muted); font-family: var(--display); font-size: 1.02rem; overflow-wrap: anywhere; }
.demo-turn.is-aifrit .demo-line { color: var(--text); }
.demo-footnote { margin: 1.3rem 0 0; color: var(--dim); font-size: 0.78rem; }

/* Folded release archive on /download. Native <details>, so it is keyboard
   operable and every fact stays in the document — folded, never removed. */
.archive-framing { margin: 0 0 1.1rem; max-width: 640px; color: var(--muted); font-size: 0.85rem; }
.archive-details { margin-bottom: 0.9rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.archive-details summary { position: relative; padding: 0.9rem 1.8rem 0.9rem 0; list-style: none; cursor: pointer; color: var(--muted); font-size: 0.82rem; transition: color 200ms ease; }
.archive-details summary::-webkit-details-marker { display: none; }
.archive-details summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; color: var(--ember-soft); font-size: 1rem; transform: translateY(-50%); transition: transform 260ms ease; }
.archive-details[open] summary { color: var(--ice); }
.archive-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.archive-details ul { margin-bottom: 1.1rem; }

@media (hover: hover) {
  .archive-details summary:hover { color: var(--ice); }
}

/* Shared shell for the standalone pages. Mirrors the /download page shell so
   every route carries the same gutter, rhythm, and heading scale. */
.page-main { width: min(100%, var(--page)); margin: 0 auto; padding: 4.5rem clamp(1.5rem, 5vw, 4rem) 6rem; }
.page-intro { margin-bottom: 3.2rem; }
.page-intro h1 { margin-bottom: 1.2rem; font-size: clamp(2.9rem, 5.4vw, 4.6rem); line-height: 1.02; }
.page-intro > p:not(.eyebrow) { max-width: 640px; color: var(--muted); }

/* On the standalone pages the plan card is a section heading in its own right,
   so it uses h2 where the homepage uses h3; match the homepage's card scale. */
.access-grid h2 { margin: 0.4rem 0 0.65rem; font-family: var(--display); font-size: 1.8rem; font-weight: 400; }

.page-block { margin-top: 3.6rem; }
.page-block > h2 { margin: 0.4rem 0 1.2rem; font-family: var(--display); font-size: 1.9rem; font-weight: 400; }
.page-block > p:not(.cap-number) { max-width: 680px; color: var(--muted); }

.include-list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); list-style: none; }
.include-list li { min-width: 0; padding: 1.35rem 1.5rem; background: rgba(10, 17, 29, 0.9); color: var(--muted); font-size: 0.88rem; }
.include-list strong { display: block; margin-bottom: 0.35rem; color: var(--text); font-family: var(--display); font-size: 1.15rem; font-weight: 400; }

.legal-doc { max-width: 720px; margin-top: 2.2rem; }
.legal-block { padding: 1.7rem 0; border-top: 1px solid var(--line); }
.legal-block h2 { margin: 0 0 0.7rem; font-family: var(--display); font-size: 1.45rem; font-weight: 400; }
.legal-block p { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.9rem; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-meta { margin: 1.9rem 0 0; color: var(--dim); font-size: 0.72rem; }

.error-links { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1.7rem; }

@media (max-width: 900px) {
  .include-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .demo-section { padding: 4.5rem 1.5rem 1.5rem; }
  .demo-pair { grid-template-columns: 1fr; }
  .demo-panel { padding: 1.5rem; }
  .page-main { padding: 3.5rem 1.5rem 5rem; }
  .page-block { margin-top: 2.8rem; }
  .include-list li { padding: 1.2rem; }
}

/* ---------------------------------------------------------------------------
   Integration block: the homepage trust section (A3), the five-row comparison
   strip (A4), the "what you're paying for" block (A5), and a few prose details
   on the standalone pages. Appended, like the block above it: every selector
   here is new, so nothing before this point changes.
   --------------------------------------------------------------------------- */

/* The A2 / draft-notice tag is set nowrap so it reads as one token beside its
   sentence. At phone widths the full tag is wider than the column, so it stops
   being nowrap and takes its own line instead of forcing a scrollbar. */
@media (max-width: 760px) {
  .demo-label b,
  .inline-notice b { display: block; margin: 0 0 0.4rem; white-space: normal; }
}

/* A3 — "You decide what stays". Same shell as the other homepage sections. */
.trust-section { width: min(100%, var(--page)); margin: 0 auto; padding: 6rem clamp(1.5rem, 5vw, 4rem) 4rem; }
.trust-list { margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.trust-list li { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.trust-list .cap-number { margin: 0; }
.trust-list p:last-child { max-width: 620px; margin: 0; color: var(--muted); }
.trust-close { max-width: 680px; margin-top: 2.4rem; }
.trust-close p { color: var(--muted); font-size: 0.88rem; }
.trust-close p:last-child { margin-bottom: 0; }

/* A4 — the comparison strip. Three columns at desktop; at phone widths the head
   row is dropped and each cell shows its own label, so the pairing survives the
   stack. The labels are in the accessibility tree at every width. */
.compare-strip { margin-top: 3rem; border: 1px solid var(--line); background: rgba(10, 17, 29, 0.9); }
.compare-head,
.compare-row { display: grid; grid-template-columns: 230px 1fr 1fr; gap: 1px; background: var(--line); }
.compare-head { padding-top: 1px; }
.compare-head p { grid-column: auto; margin: 0; padding: 1rem 1.4rem; background: var(--ink-soft); }
.compare-head p:first-child { grid-column: 2; color: var(--dim); }
.compare-head p.is-aifrit { color: var(--ember-soft); }
.compare-row { border-top: 1px solid var(--line); }
.compare-row p { min-width: 0; margin: 0; padding: 1.4rem; background: rgba(10, 17, 29, 0.94); color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.compare-row .compare-label { color: var(--ice); }
.compare-row .compare-aifrit { background: linear-gradient(135deg, rgba(24, 54, 80, 0.85), rgba(59, 31, 23, 0.55)); color: var(--text); }
.compare-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.compare-footnote { margin-top: 1.1rem; color: var(--dim); }

/* A5 — value before the number, inside #access. */
.value-block { margin: 3.6rem 0 2.6rem; }
.value-block h3 { margin: 0 0 0.9rem; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -0.04em; }
.value-lede { max-width: 640px; color: var(--muted); }
.value-grid { margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); list-style: none; }
.value-grid li { min-width: 0; padding: 1.5rem 1.6rem; background: rgba(10, 17, 29, 0.9); }
.value-grid p:last-child { margin: 0; color: var(--muted); font-size: 0.88rem; }
.value-close { max-width: 640px; margin: 1.6rem 0 0; color: var(--muted); font-size: 0.88rem; }

/* Prose details on the standalone pages. */
.trial-detail { margin-top: 1.6rem; }
.pricing-close { margin: 3.4rem 0 0; font-family: var(--display); font-size: 1.5rem; color: var(--text); }
.legal-block strong { color: var(--text); font-weight: 700; }
.legal-block a,
.trust-list a,
.page-block a:not(.text-link):not(.button) { color: var(--ice); text-underline-offset: 0.28rem; }
.legal-block .inline-notice { margin-top: 0; font-size: 0.82rem; }

@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .trust-section { padding: 4.5rem 1.5rem 3rem; }
  .trust-list li { grid-template-columns: 1fr; gap: 0.55rem; padding: 1.5rem 0; }
  .trust-list p:last-child { max-width: none; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row p { padding: 1.1rem 1.2rem; }
  .compare-tag { position: static; display: block; width: auto; height: auto; margin-bottom: 0.35rem; overflow: visible; clip-path: none; color: var(--dim); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: normal; }
  .compare-row .compare-aifrit .compare-tag { color: var(--ember-soft); }
  .value-block { margin: 2.8rem 0 2.2rem; }
  .pricing-close { font-size: 1.25rem; }
}