/*
  AllInsight — site styles.

  Quiet and editorial, in the brand kit's palette: Paper ground, Ink text,
  hairline rules instead of cards, and a great deal of space. Sora Light
  carries the headlines; small tracked capitals do the labelling. Insight
  Amber is used only for the dot in the mark and small status marks, never
  for text. One section goes Graphite, for the privacy statement, because
  that is the claim the product stands on.

  The mark (an A with a lowercase i inside it) draws itself on load, the way
  the promo kit's logo reveal does, and the app icon builds itself when the
  download section comes into view.

  No third-party requests: Sora is served from assets/fonts.
*/

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --paper: #f4f2ee;
  --paper-2: #faf9f6;
  --ink: #111318;
  --graphite: #0f1115;
  --slate: #1b1f27;
  --stone: #5a606b;
  --ash: #9a9ea6;
  --rule: #dedcd6;
  --line: #2a2f38;
  --fog: #9aa1ac;
  --on-dark: #f4f2ee;
  --amber: #f5a524;

  --display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --text: "Sora", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}

a { color: inherit; }
code { font-family: var(--mono); font-size: 0.84em; }
p { text-wrap: pretty; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
}
.skip:focus { left: 12px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.narrow { max-width: 760px; text-align: center; }

/* ── Type ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
h3 { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }

.label {
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.prose { margin: 28px 0 0; max-width: 560px; color: var(--stone); }

.head { margin-bottom: clamp(64px, 9vw, 112px); max-width: 820px; }
.head-center { margin-inline: auto; text-align: center; }
.head-center .prose { margin-inline: auto; }

.section { padding: clamp(120px, 18vh, 200px) 0; border-top: 1px solid var(--rule); }
.section-paper { background: var(--paper-2); }

/* ── Navigation ───────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--ink);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--rule);
}
.nav.is-dark {
  background: color-mix(in srgb, var(--graphite) 80%, transparent);
  border-bottom-color: var(--line);
  color: var(--on-dark);
}
.nav-inner {
  width: min(var(--wrap), 100% - 48px);
  margin-inline: auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand, .foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  text-decoration: none;
  font-size: 22px;
}
.mark { width: 0.95em; height: 0.95em; flex: none; transform: translateY(-0.04em); }

/* The wordmark: Sora SemiBold, both i's drawn as a dotless i with an amber
   dot where the brand kit puts it. */
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wi { position: relative; display: inline-block; }
.wi::after {
  content: "";
  position: absolute;
  left: calc(0.1555em - 0.0775em);
  top: var(--dot-top, 0.09em);
  width: 0.155em;
  height: 0.155em;
  border-radius: 50%;
  background: var(--amber);
}
.tm { font-size: 0.45em; align-self: flex-start; margin-left: 0.15em; opacity: 0.6; }
.nav-links { display: flex; gap: 40px; }
.nav-links a, .nav-cta {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.62;
  transition: opacity 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.is-here, .nav-cta:hover { opacity: 1; }
.nav-cta { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nav-links a, .nav-cta { font-weight: 400; }

@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
  min-height: 100svh;
  padding: 140px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.headline {
  font-size: clamp(48px, 9.4vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.headline .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.headline .line > span {
  display: inline-block;
  transform: translateY(105%);
  animation: lift 1.6s var(--ease) forwards;
}
.headline .line > span { animation-delay: 1.5s; }
.headline .line:nth-child(2) > span { animation-delay: 1.64s; }
.quiet { color: var(--ash); }

@keyframes lift { to { transform: none; } }

.rise {
  opacity: 0;
  animation: fade 1.4s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--d, 0) * 0.12s);
}
.hero .rise { animation-delay: calc(1.3s + var(--d, 0) * 0.12s); }

/* ── The mark, drawn ─────────────────────────────────────────────── */

.hero-mark {
  width: clamp(76px, 9vw, 104px);
  height: auto;
  margin-bottom: clamp(40px, 6vh, 64px);
  overflow: visible;
}
.mark-a, .mark-stem {
  fill: none;
  stroke: var(--ink);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark-dot { fill: var(--amber); }
.pulse { fill: none; stroke: var(--amber); stroke-width: 1.2; opacity: 0; }

/* 1. The A draws itself.  2. The i rises.  3. The dot drops in.
   4. Two scan rings leave the dot.  Same order as the logo reveal film. */
.hero-mark .mark-a {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.hero-mark .mark-stem {
  opacity: 0;
  transform: translateY(14px);
  animation: stem 0.6s var(--ease) 0.95s forwards;
}
.hero-mark .mark-dot {
  opacity: 0;
  transform: translateY(-46px);
  animation: drop 0.75s cubic-bezier(0.34, 1.45, 0.64, 1) 1.15s forwards;
}
.hero-mark .pulse {
  transform-origin: 50px 54px;
  transform-box: view-box;
  animation: ring 2.4s var(--ease) 1.7s forwards;
}
.hero-mark .pulse-2 { animation-delay: 2.1s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes stem { to { opacity: 1; transform: none; } }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-46px); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes ring {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(7); }
}

.status {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 0.12em;
}

/* ── The app icon, built ─────────────────────────────────────────── */

.app-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 40px;
}
.app-icon .tile {
  fill: var(--slate);
  stroke: var(--line);
  stroke-width: 1;
  transform-origin: 50px 50px;
  transform-box: view-box;
  transform: scale(0.6);
  opacity: 0;
}
.app-icon .mark-a, .app-icon .mark-stem { stroke: var(--paper); }
.app-icon .mark-a { stroke-dasharray: 1; stroke-dashoffset: 1; }
.app-icon .mark-stem { opacity: 0; }
.app-icon .mark-dot { opacity: 0; transform: translateY(-30px); }
.app-icon.built .tile { animation: tile 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) forwards; }
.app-icon.built .mark-a { animation: draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
.app-icon.built .mark-stem { animation: stem 0.5s var(--ease) 0.9s forwards; }
.app-icon.built .mark-dot { animation: drop 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 1.05s forwards; }
@keyframes tile { to { opacity: 1; transform: none; } }
@keyframes fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.lede { margin: clamp(28px, 4vh, 40px) auto 0; max-width: 520px; color: var(--stone); }

.cta {
  margin-top: 44px;
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 15px 40px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size 0.5s var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* ── Privacy (dark) ───────────────────────────────────────────────── */

.dark {
  background: var(--graphite);
  color: var(--on-dark);
  padding: clamp(140px, 22vh, 240px) 0;
}
.dark .label, .dark .prose { color: var(--fog); }
.dark .prose { margin-inline: auto; }
.statement {
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.horizon {
  margin: clamp(80px, 12vh, 120px) auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fog);
}
.horizon-far { opacity: 0.45; }
.horizon-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fog) 60%, transparent) 50%, transparent 50%) 0 0 / 8px 1px repeat-x;
}
/* The wall: a vertical hairline at the midpoint. */
.horizon-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 29px;
  background: var(--on-dark);
}
/* A single point of light travels out and stops at the wall. */
.horizon-line i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 18%, transparent);
  opacity: 0;
}
.horizon.is-live .horizon-line i { animation: travel 3.6s var(--ease) infinite; }
@keyframes travel {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  62% { left: calc(50% - 9px); opacity: 1; }
  100% { left: calc(50% - 9px); opacity: 0; }
}

.figure {
  margin: 56px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fog);
}
.figure span { color: var(--on-dark); }

/* ── Method ───────────────────────────────────────────────────────── */

.method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.method li { padding: 40px 40px 0 0; }
.method li + li { padding-left: 40px; border-left: 1px solid var(--rule); }
.numeral {
  display: block;
  margin-bottom: 72px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ash);
}
.method p { margin: 18px 0 0; color: var(--stone); font-size: 16px; }

@media (max-width: 860px) {
  .method { grid-template-columns: 1fr; }
  .method li, .method li + li { padding: 36px 0 44px; border-left: 0; }
  .method li + li { border-top: 1px solid var(--rule); }
  .numeral { margin-bottom: 28px; }
}

/* ── Instruments ──────────────────────────────────────────────────── */

.specs { margin: 0; border-top: 1px solid var(--ink); }
.spec {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.6s var(--ease);
}
.spec:hover { padding-left: 12px; }
.spec dt {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}
.spec dd { margin: 0; color: var(--stone); max-width: 560px; align-self: center; }

@media (max-width: 700px) {
  .spec { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Safety ───────────────────────────────────────────────────────── */

.gates {
  position: relative;
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 48px;
  --p: 0%;
}
.gates-rail { position: relative; background: var(--rule); }
.gates-rail i {
  position: absolute;
  inset: 0 0 auto;
  height: var(--p);
  background: var(--ink);
}
.gates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: gate;
}
.gates-list li {
  counter-increment: gate;
  position: relative;
  padding: 22px 0 22px 64px;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(17px, 1.7vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ash);
  transition: color 0.6s var(--ease);
}
.gates-list li:first-child { padding-top: 0; }
.gates-list li code { color: inherit; }
.gates-list li::before {
  content: counter(gate, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding-top: 0.45em;
}
.gates-list li.passed { color: var(--ink); }

.never { margin-top: clamp(80px, 12vw, 140px); }
.never-list {
  margin: 0;
  max-width: 900px;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--stone);
}

@media (max-width: 640px) {
  .gates { gap: 24px; }
  .gates-list li { padding-left: 44px; }
}

/* ── Download ─────────────────────────────────────────────────────── */

.platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
}
.platform header { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.platform header p { margin: 10px 0 0; font-size: 14px; color: var(--stone); }
.platform h3 { font-size: 28px; letter-spacing: -0.025em; }

.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding 0.5s var(--ease);
}
.file:hover { padding-inline: 10px; }
.file-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-name b { font-weight: 500; }
.file-name i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ash);
  overflow-wrap: anywhere;
}
.file-size {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone);
}
.file-size::after { content: "  ↓"; white-space: pre; }

.verify { margin-top: 24px; font-size: 14px; color: var(--stone); }
.verify summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.verify summary::-webkit-details-marker { display: none; }
.verify summary::after { content: " +"; }
.verify[open] summary::after { content: " −"; }
.verify .cmd {
  display: block;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow-x: auto;
  white-space: nowrap;
}
.verify dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.verify dt { color: var(--ink); }
.verify dd { margin: 0; min-width: 0; }
.verify dd code { overflow-wrap: anywhere; }

.fine {
  margin: 72px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ash);
}
.fine a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.fine a:hover { color: var(--ink); border-color: var(--ink); }

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

/* ── Footer ───────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule); padding: 56px 0 64px; }
.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-brand { font-size: 26px; }
.foot-note { margin: 0; max-width: 520px; font-size: 13px; color: var(--ash); }
.foot-text { max-width: 520px; }
.foot-contact { margin: 0 0 10px; font-size: 15px; color: var(--stone); }
.foot-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot-contact a:hover { border-color: var(--ink); }

/* ── Reveal on scroll ─────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.1s);
}
.reveal.in { opacity: 1; transform: none; }

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .reveal { opacity: 1; transform: none; }
  .headline .line > span { transform: none; }
  .hero-mark .mark-a, .app-icon .mark-a { stroke-dashoffset: 0; }
  .hero-mark .mark-stem, .hero-mark .mark-dot,
  .app-icon .tile, .app-icon .mark-stem, .app-icon .mark-dot { opacity: 1; transform: none; }
}