/* Joora AI selling site — one LIGHT-first stylesheet.
   A warm near-white ground, ink type, violet and mint accents; depth from soft
   gradients, glow and generated artwork rather than from a dark ground. Two
   sections keep the dark: the orbit and the assistant network, where the two
   "space" animations live — their tokens are re-declared inside .section--dark,
   so every component below works on both grounds without a second copy.
   No inline styles anywhere, so the page holds under `style-src 'self'`. */

/* ---------- fonts: self-hosted subsets, declared as the deck declares them ---------- */

@font-face {
  font-family: 'Manrope';
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url(/fonts/manrope-cyrillic.woff2) format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- tokens: the light ground ---------- */

:root {
  color-scheme: light;

  --violet: #6C43F0;
  --violet-soft: #8B6BF2;
  --violet-pale: #B49BFF;
  --violet-wash: #F1ECFE;
  --cyan: #1E8FBF;
  --mint: #0B6E4C;
  --amber: #B87316;

  --bg: #FBFAFF;
  --bg-tint: #F5F2FD;
  --surface: #FFFFFF;
  --ink: #150F38;
  --body: #4A4468;
  --mist: #6C6592;

  --line: rgba(108, 67, 240, 0.13);
  --line-strong: rgba(108, 67, 240, 0.30);
  --accent-ink: var(--violet);

  --grad-brand: linear-gradient(120deg, #6C43F0 0%, #8B6BF2 48%, #2E9FD4 100%);
  --grad-line: linear-gradient(90deg, rgba(108,67,240,0) 0%, rgba(108,67,240,0.22) 30%, rgba(46,159,212,0.22) 70%, rgba(108,67,240,0) 100%);

  --shadow-sm: 0 2px 6px -2px rgba(28, 16, 74, 0.10), 0 10px 26px -18px rgba(28, 16, 74, 0.30);
  --shadow: 0 4px 12px -6px rgba(28, 16, 74, 0.12), 0 24px 60px -32px rgba(64, 34, 160, 0.35);
  --shadow-lift: 0 8px 20px -8px rgba(28, 16, 74, 0.16), 0 34px 70px -34px rgba(64, 34, 160, 0.45);
  --glow: 0 14px 36px -14px rgba(108, 67, 240, 0.55);

  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --wrap: 1120px;
  --gutter: clamp(18px, 5vw, 44px);
  --band: clamp(46px, 6.4vw, 88px);
  --radius: 18px;

  --fs-h1: clamp(2.4rem, 1.5rem + 3.7vw, 4.1rem);
  --fs-h2: clamp(1.86rem, 1.35rem + 2.3vw, 2.9rem);
  --fs-h3: clamp(1.24rem, 1.06rem + 0.8vw, 1.55rem);
  --fs-sub: clamp(1.06rem, 1.0rem + 0.4vw, 1.28rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-mono: clamp(0.68rem, 0.64rem + 0.16vw, 0.78rem);

  --header-h: 68px;
}

/* the two dark bands: the same components, re-tokened */
.section--dark {
  color-scheme: dark;

  --violet: #8B6BF2;
  --violet-soft: #9C86F0;
  --violet-pale: #B49BFF;
  --violet-wash: rgba(140, 120, 220, 0.10);
  --cyan: #4FC9F0;
  --mint: #4FD9A4;
  --amber: #F6AE57;

  --bg: #08071A;
  --bg-tint: #0B0A20;
  --surface: rgba(140, 120, 220, 0.07);
  --ink: #F4F1FD;
  --body: #C7BEEC;
  --mist: #A79CD4;

  --line: rgba(180, 155, 255, 0.16);
  --line-strong: rgba(180, 155, 255, 0.32);
  --accent-ink: var(--violet-pale);

  --grad-brand: linear-gradient(120deg, #B49BFF 0%, #6C43F0 46%, #4FC9F0 100%);
  --grad-line: linear-gradient(90deg, rgba(180,155,255,0) 0%, rgba(140,110,240,0.5) 30%, rgba(79,201,240,0.5) 70%, rgba(180,155,255,0) 100%);

  --shadow-sm: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 34px 90px -40px rgba(0, 0, 0, 0.95);
  --glow: 0 18px 60px -22px rgba(108, 67, 240, 0.55);
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the header is fixed in place: without this, an anchor lands with its
     heading tucked underneath it */
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 84% -8%, rgba(108, 67, 240, 0.10), transparent 62%),
    radial-gradient(900px 560px at 4% 6%, rgba(46, 159, 212, 0.07), transparent 58%);
  background-attachment: fixed;
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.16; }
h4 { font-size: 1.06rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
strong, b { color: var(--ink); }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 8px;
}
.section--dark :where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--violet-pale);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute;
  left: -10000px;
  top: 0;
  background: var(--violet);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 0 0 10px 0;
  z-index: 60;
}
.skip:focus { left: 0; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 1.1em;
}
.eyebrow::before {
  content: "";
  width: 2.6em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-ink), transparent);
  flex: none;
}

.sub {
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--body);
  max-width: 48ch;
  text-wrap: pretty;
}
.lead { max-width: 62ch; }

.statement {
  font-size: clamp(1.24rem, 1.0rem + 1.1vw, 1.72rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ink);
  max-width: 30ch;
  text-wrap: balance;
  padding-left: 0.9em;
  border-left: 3px solid var(--violet);
}
.statement--dark { border-left-color: var(--violet-pale); margin-top: clamp(26px, 3.4vw, 40px); max-width: 46ch; }

.points {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  max-width: 68ch;
}
.points li {
  position: relative;
  padding-left: 1.6em;
  color: var(--body);
  text-wrap: pretty;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.58em;
  height: 0.58em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--violet-soft), var(--violet));
}
.section--dark .points li::before { box-shadow: 0 0 10px rgba(124, 86, 240, 0.7); }

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
  border: 1px solid var(--line-strong);
  background: var(--violet-wash);
  border-radius: 999px;
  padding: 0.6em 1.15em;
  max-width: 100%;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.55em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 0.88em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(120deg, #7C54F2, #6236E8);
  color: #fff;
  box-shadow: var(--glow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 18px 44px -14px rgba(108, 67, 240, 0.7); }
.btn--ghost {
  background: var(--surface);
  color: var(--violet);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); }
.section--dark .btn--ghost { color: var(--ink); background: rgba(140, 120, 220, 0.10); }

.actions { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 2em; }

/* ---------- click-to-reveal ---------- */

.reveal { border-radius: 14px; }
.reveal > summary {
  display: flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
  padding: 0.85em 1.05em;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.reveal__i {
  margin-left: auto;
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-right: 2px solid var(--violet);
  border-bottom: 2px solid var(--violet);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.section--dark .reveal__i { border-color: var(--violet-pale); }
.reveal[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.reveal[open] .reveal__i { transform: rotate(-135deg) translate(-3px, -3px); }
.reveal__body {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 0.2em 1.05em 1.1em;
  color: var(--body);
}
.reveal--panel > summary { background: var(--violet-wash); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.2em;
  min-height: var(--header-h);
  padding-block: 0.6em;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand img { width: 26px; height: auto; }
.site-nav {
  display: none;
  margin-left: auto;
  gap: 1.6em;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.site-nav a { text-decoration: none; transition: color 0.16s; }
.site-nav a:hover { color: var(--violet); }
.lang {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.48em 0.95em;
  white-space: nowrap;
  transition: color 0.16s, border-color 0.16s;
}
.lang:hover { color: var(--violet); border-color: var(--violet); }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .lang { margin-left: 0; }
}

/* ---------- sections ---------- */

.section { position: relative; padding-block: var(--band); }
.section--tint { background: var(--bg-tint); }
.section--dark {
  background-color: #08071A;
  background-image:
    radial-gradient(1000px 560px at 80% -6%, rgba(108, 67, 240, 0.34), transparent 62%),
    radial-gradient(820px 560px at 8% 100%, rgba(79, 201, 240, 0.13), transparent 58%);
  color: var(--body);
}
.section--dark + .section--dark { border-top: 1px solid rgba(180, 155, 255, 0.14); }
.section > .wrap { position: relative; z-index: 1; }

/* a light band that carries the generated flow field behind it */
.section--art { overflow: hidden; }
.section--art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/img/flow-soft.webp);
  background-repeat: no-repeat;
  /* the field fills the space beside the headline, where a light band is
     otherwise empty */
  background-position: 116% -34%;
  background-size: 66% auto;
  opacity: 0.8;
  -webkit-mask-image: radial-gradient(64% 92% at 82% 22%, #000 0%, transparent 74%);
  mask-image: radial-gradient(64% 92% at 82% 22%, #000 0%, transparent 74%);
}

.section__head { margin-bottom: clamp(28px, 3.6vw, 46px); max-width: 66ch; }
.section__head h2 { max-width: 22ch; text-wrap: balance; }
.section__head .sub { margin-top: 0.85em; }

.block { margin-top: clamp(28px, 4vw, 48px); }
.block__head { margin-bottom: 1.4em; }
.block__head h3 { max-width: 26ch; text-wrap: balance; }
.block__head .sub { margin-top: 0.6em; font-size: var(--fs-body); }

.grid-2 { display: grid; gap: clamp(18px, 2.6vw, 28px); }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a reusable panel */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 0.5em;
  align-content: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card p { color: var(--body); }

.ico { width: 1.5em; height: 1.5em; display: block; }
.ico__mark { stroke-width: 3.6; opacity: 0.35; }
.card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 12px;
  background: var(--violet-wash);
  color: var(--violet);
  margin-bottom: 0.35em;
}
.section--dark .card__ico { color: var(--violet-pale); background: rgba(140, 120, 220, 0.14); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(48px, 7.6vw, 108px) var(--band);
  overflow: hidden;
}
.hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/img/hero-flow.webp);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 104%;
  /* the deck's light hero is airy: the generated field is atmosphere at the
     edge, and the drawn flow lines carry the movement */
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 76%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 76%, #000 100%);
}
.hero__flow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; }
.hero h1 { max-width: 15ch; text-wrap: balance; }
.hero .sub { margin-top: 1.1em; max-width: 44ch; }
.hero__flex {
  margin-top: 1.1em;
  max-width: 44ch;
  font-weight: 700;
  color: var(--ink);
  text-wrap: pretty;
}
.hero__mark { justify-self: start; }
.hero__mark img {
  width: clamp(110px, 20vw, 176px);
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(108, 67, 240, 0.32));
}

@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__mark { justify-self: end; }
}

/* ---------- measured figures ---------- */

.measured {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
}
.measured__label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mist);
  margin-bottom: 1.1em;
}
.measured__grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 700px) { .measured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.measured__grid li { position: relative; padding-left: 1.2em; display: grid; gap: 0.3em; }
.measured__grid li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em; bottom: 0.1em;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--violet-soft), var(--cyan));
}
.measured__n {
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.measured__t { color: var(--body); }

/* ---------- the morning note ---------- */

.brief-layout { display: grid; gap: clamp(24px, 3.4vw, 44px); align-items: center; }
@media (min-width: 900px) { .brief-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.brief-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF, #FBF9FF);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px, 2.8vw, 34px);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.brief-card__title { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; }
.brief-card__sub { color: var(--mist); margin-top: 0.3em; }
.brief-card__rows { margin-top: 1.4em; }
.brief-card__rows li {
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.9em 0;
  border-top: 1px solid #EDE8F8;
  font-weight: 600;
  color: var(--ink);
}
.brief-card__rows li::before {
  content: "";
  order: 0;
  flex: none;
  width: 1.8em; height: 1.8em; border-radius: 9px;
  background: linear-gradient(150deg, #EFE6FE, #E1D4FB);
  box-shadow: inset 0 0 0 1px rgba(108, 67, 240, 0.16);
}
.brief-card__rows li:nth-child(2)::before { background: linear-gradient(150deg, #E4ECFE, #D3E0FC); }
.brief-card__rows li:nth-child(3)::before { background: linear-gradient(150deg, #F1E7FE, #DED2FB); }
.brief-card__rows li span:not(.dot) { order: 1; flex: 1 1 auto; }
.brief-card__rows .dot {
  order: 2;
  flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
}
.brief-card__rows li:nth-child(2) .dot { background: #2E6BD6; }
.brief-card__rows li:nth-child(3) .dot { background: var(--violet); }
.brief-card__note {
  margin-top: 1.2em;
  padding-top: 1em;
  border-top: 1px solid #EDE8F8;
  color: var(--mint);
  font-weight: 700;
  font-size: 0.95em;
}

.brief-copy h3 { max-width: 18ch; text-wrap: balance; }
.brief-copy .sub { margin-top: 0.8em; }

.states { display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; margin-top: 1.6em; }
.states li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.states .dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--mint); }
.states li:nth-child(2) .dot { background: #2E6BD6; border-radius: 2px; }
.states li:nth-child(3) .dot { background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.states li:nth-child(4) .dot { background: transparent; border: 2px solid var(--violet); }

/* ---------- choose your format ---------- */

.formats { display: grid; gap: clamp(16px, 2.2vw, 24px); align-items: stretch; }
@media (min-width: 900px) { .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* three cards of one height, whichever way the titles wrap */
.format { display: flex; }
.format__d { display: flex; flex-direction: column; width: 100%; }
.format__d > summary { flex: 1 0 auto; align-content: start; }

.format__d > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico label i" "who who who";
  gap: 0.55em 0.8em;
  align-items: start;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--radius);
}
.format__ico {
  grid-area: ico;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em; height: 2.5em;
  border-radius: 12px;
  background: var(--violet-wash);
  color: var(--violet);
}
.format__l { grid-area: label; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; }
.format__who { grid-area: who; font-weight: 400; color: var(--body); text-wrap: pretty; }
.format__d .reveal__i { grid-area: i; align-self: start; margin-top: 0.6em; }
.format__d .reveal__body { padding: 0.4em clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px); border-radius: 0 0 var(--radius) var(--radius); }
.format__k {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mist);
  margin-top: 1.2em;
  margin-bottom: 0.7em;
}
.format__d[open] > summary { border-bottom-color: transparent; border-radius: var(--radius) var(--radius) 0 0; }

/* ---------- the seven actions ---------- */

.tiles { display: grid; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tiles > li { grid-column: span 6; }
  .tiles > li:last-child { grid-column: span 12; }
}
@media (min-width: 1000px) {
  .tiles > li:nth-child(-n+4) { grid-column: span 3; }
  .tiles > li:nth-child(n+5) { grid-column: span 4; }
}
.tile__d > summary {
  --accent: var(--violet);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8em;
  padding: 1em 1.05em;
  border-radius: var(--radius);
}
.tile__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em; height: 2.4em;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tile__l { font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
.tile__d[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.tile__d .reveal__body { border-radius: 0 0 var(--radius) var(--radius); }
.tile--remembers .tile__d > summary { --accent: #6C43F0; }
.tile--tracks    .tile__d > summary { --accent: #2E6BD6; }
.tile--reminds   .tile__d > summary { --accent: #B87316; }
.tile--highlights .tile__d > summary { --accent: #B3399E; }
.tile--analyses  .tile__d > summary { --accent: #1E8FBF; }
.tile--reports   .tile__d > summary { --accent: #10855D; }
.tile--acts      .tile__d > summary { --accent: #7A38E8; }

/* ---------- the helpers roster ---------- */

/* The composition: the orbit in the middle with weekly helpers laid down both
   flanks of it, the rest as a band beneath, and the two on-demand ones as
   their own last row — the outer ring, drawn as a row. There is no frame
   around the orbit: it is the scene the cards stand in, not a window in a
   grid, so the gap between them is the only separation and the animation's own
   sky fades out into the section's ground. Below 1100px the orbit runs the
   full viewport width and every card goes underneath it, in reading order.
   The lists are filled from the roster data, so the grid says what the content
   file says. */
.constellation { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.roster { display: grid; gap: clamp(12px, 1.5vw, 18px); grid-template-columns: minmax(0, 1fr); }
/* auto-fit keeps every row full whatever the roster's length: no orphan card
   sitting alone beside an empty cell */
@media (min-width: 700px) { .roster { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
/* Full-bleed under 1100px: the orbit reaches both screen edges, the cards do
   not. Two class names deep on purpose — the animation's own `.ja` sets
   `width: 100%; margin: 0` on whatever it mounts into, and anim.css is loaded
   after this file. */
@media (max-width: 1099px) {
  .constellation .constellation__orbit {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}
@media (min-width: 1100px) {
  .constellation {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr) minmax(0, 0.85fr);
    align-items: stretch;
  }
  .constellation .constellation__orbit { grid-column: 2; grid-row: 1; }
  .roster--left { grid-column: 1; grid-row: 1; }
  .roster--right { grid-column: 3; grid-row: 1; }
  /* The flanking cards spread across the orbit's height rather than piling up
     at its top. They are sized to their own text (`min-content`) and the slack
     goes into the gaps: `1fr` tracks would instead make every card as tall as
     the tallest and push the whole row past one screen. */
  .roster--left,
  .roster--right {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: space-between;
  }
  .roster--band { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster--demand { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.roster__i {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 1.1em 1.25em 1.2em 2.6em;
  display: grid;
  gap: 0.4em;
  align-content: start;
  box-shadow: var(--shadow-sm);
}
.roster__i::after {
  content: "";
  position: absolute;
  left: 1.15em; top: 1.5em;
  width: 0.62em; height: 0.62em; border-radius: 50%;
}
/* the weekly five read as solid bodies, the on-demand two as outlines — the
   same distinction the orbit draws */
.roster__i--inner::after {
  background: radial-gradient(circle at 34% 30%, var(--violet-pale), var(--violet));
  box-shadow: 0 0 10px rgba(124, 86, 240, 0.75);
}
.roster__i--outer::after {
  background: transparent;
  border: 1.6px dashed var(--cyan);
  box-shadow: 0 0 10px rgba(79, 201, 240, 0.5);
}
.roster__label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
}
.roster__i--outer .roster__label { color: var(--cyan); }
.roster__blurb { color: var(--body); font-size: 0.97em; }

/* the explainer is not a satellite: no bead, a dashed edge, and it says how
   the seven of them add up to one answer */
.roster__i--note {
  padding-left: 1.25em;
  border-style: dashed;
  background: none;
  box-shadow: none;
}
.roster__i--note::after { content: none; }
.roster__i--note .roster__label { color: var(--mist); }

/* ---------- animation mount points ---------- */

.anim {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(60% 80% at 50% 45%, rgba(108, 67, 240, 0.12), transparent 70%),
    linear-gradient(180deg, #0C0A22, #08071A);
  padding: clamp(14px, 2.2vw, 26px);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.anim--light {
  background:
    radial-gradient(70% 90% at 50% 40%, rgba(108, 67, 240, 0.07), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F7F4FE);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
/* The orbit alone has no frame. The operator's reason: a frame costs the room
   between it and the cards twice over, and the gap next to an edge reads as a
   window in a grid instead of one scene. So no border, no ground, no shadow —
   and nothing clipped either, which is what lets a satellite's arrival ripple
   reach out across the gap towards the cards. Its height comes from an
   aspect ratio, so the animation can measure a box that does not depend on
   what the animation puts in it. */
.anim--orbit {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: 6 / 5;
}
/* Full-bleed tablets and small laptops: at 100vw a 16/9 box is 576px tall on a
   1024px screen and pushes the section past a 768px viewport; a flatter box
   with a cap keeps heading plus orbit on one screen. */
@media (min-width: 700px) and (max-width: 1099px) { .anim--orbit { aspect-ratio: 2 / 1; max-height: 520px; } }
.anim--stream { min-height: 230px; }
.anim--network { min-height: 280px; }
@media (min-width: 700px) {
  .anim--stream { min-height: 330px; }
  .anim--network { min-height: 400px; }
}
/* the ripple and the sky may spill out of the orbit's box; the section is
   where that stops, so the page never gains a horizontal scrollbar */
#satellites { overflow-x: clip; }
.anim__fallback { color: var(--mist); text-align: center; max-width: 46ch; text-wrap: pretty; }
.anim--light .anim__fallback { color: var(--mist); }

/* ---------- the assistant network ---------- */

.status-line {
  margin-top: 1.4em;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink);
  font-weight: 700;
}
.status-line::before {
  content: "";
  width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  flex: none;
}

/* ---------- under control ---------- */

.control-grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 700px) { .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.economy {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(22px, 2.8vw, 34px);
  box-shadow: var(--shadow-sm);
}
.dot-field { display: grid; gap: clamp(16px, 2.4vw, 26px); }
@media (min-width: 700px) { .dot-field { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dot-field__c {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1em 1.2em 1.3em;
  background: var(--bg-tint);
}
.dot-field__c--accent { background: var(--violet-wash); border-color: var(--line-strong); }
.dot-field__l {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mist);
  margin-bottom: 1.1em;
}
.dot-field__c--accent .dot-field__l { color: var(--violet); }
.dot-field__g { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
/* on a phone the same sixty events read as three wide rows rather than five */
@media (max-width: 640px) { .dot-field__g { grid-template-columns: repeat(20, 1fr); gap: 4px; } }
.dot-field__d {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(108, 67, 240, 0.13);
}
.dot-field__d.is-on {
  background: radial-gradient(circle at 34% 30%, var(--violet-soft), var(--violet));
  box-shadow: 0 0 8px rgba(108, 67, 240, 0.5);
}
.claim {
  margin-top: 1.6em;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.economy__line { margin-top: 1em; color: var(--body); max-width: 62ch; }

/* ---------- pricing ---------- */

.price-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(22px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  box-shadow: var(--shadow-sm);
}
.price-card--accent {
  border-color: transparent;
  background: linear-gradient(180deg, #FFFFFF, #F8F5FF);
  box-shadow: var(--shadow-lift);
}
.price-card--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.price-card__label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--violet);
}
.price-card__amount {
  font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.price-card--accent .price-card__amount {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card__unit {
  color: var(--mist);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.price-card__note { color: var(--ink); font-weight: 700; margin-top: 0.5em; }
.checklist { display: flex; flex-direction: column; gap: 0.5em; margin-top: 0.2em; color: var(--body); }
.checklist li { position: relative; padding-left: 1.7em; text-wrap: pretty; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.05em;
  height: 0.58em;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}
.price-card__scope {
  margin-top: 1.1em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.92em;
}
/* both cards' buttons land on one line, whatever the checklists weigh */
.price-card .checklist { margin-bottom: 1.5em; }
.price-card__cta { margin-top: auto; align-self: start; }

.requirement {
  margin-top: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--violet);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--violet-wash);
  color: var(--ink);
  font-weight: 600;
  max-width: 74ch;
}

.price-extra {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: start;
}
.price-extra__amount { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.price-extra__unit { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.price-extra p { color: var(--body); }
.price-extra .btn { margin-top: 0.7em; }

/* ---------- questions ---------- */

.faq { display: grid; gap: 0.65em; max-width: 82ch; }
.faq__d > summary { font-size: 1.02rem; }

/* ---------- the pilot form ---------- */

.contact-layout { display: grid; gap: clamp(24px, 3.4vw, 44px); align-items: center; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); } }

/* the pilot's three concrete promises, stacked, so the column beside the form
   carries substance instead of a single sentence */
.contact-side .chips { flex-direction: column; align-items: flex-start; gap: 0.8em; }
.contact-side .chip {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.85em 1.3em;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.contact-side .chip::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.5em;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg) translate(1px, -2px);
}
.contact-side__reply { margin-top: 1.6em; color: var(--body); }

.form {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(20px, 2.8vw, 32px);
  display: grid;
  gap: 1.05em;
  box-shadow: var(--shadow);
}
.field { display: grid; gap: 0.35em; }
.field label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mist);
}
.field input,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #FDFCFF;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 0.8em 0.95em;
  width: 100%;
  max-width: 100%;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.field textarea { min-height: 7em; resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(108, 67, 240, 0.18); outline: none; }
.field .hint { font-size: 0.86rem; color: var(--mist); }
.req { color: var(--violet); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.7em; align-items: start; }
.consent input {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.28em;
  accent-color: var(--violet);
}
.consent label { color: var(--body); font-size: 0.95rem; line-height: 1.5; }
.consent a { color: var(--violet); text-underline-offset: 2px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form button[type="submit"] { justify-self: start; margin-top: 0.2em; }

#form-error {
  color: #8E1038;
  background: #FDECF2;
  border: 1px solid #F2B7CC;
  border-radius: 12px;
  padding: 0.8em 1em;
  font-size: 0.96rem;
}

.form__note { color: var(--mist); font-size: 0.88rem; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(28px, 4vw, 44px);
  color: var(--mist);
  background: var(--bg-tint);
}
.site-footer__row { display: flex; flex-wrap: wrap; gap: 1em 1.8em; align-items: center; }
.site-footer .brand { color: var(--ink); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1em 1.6em; }
.site-footer__links a {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mist);
}
.site-footer__links a:hover { color: var(--violet); }
.site-footer .lang { margin-left: auto; }
.site-footer__note { margin-top: 1.2em; max-width: 74ch; font-size: 0.88rem; }

/* ---------- the privacy page ---------- */

.doc__body { display: grid; gap: clamp(18px, 2.4vw, 26px); max-width: 74ch; }
.doc__s {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow-sm);
}
.doc__s h2 { font-size: var(--fs-h3); margin-bottom: 0.5em; }
.doc__updated { margin-top: clamp(20px, 2.6vw, 28px); color: var(--mist); font-size: 0.9rem; }

/* ---------- thanks page ---------- */

.thanks { min-height: 58vh; display: flex; align-items: center; padding-block: var(--band); }
.thanks h1 { max-width: 18ch; text-wrap: balance; }
.thanks .sub { margin-top: 1em; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}