/*
  turingos.css — Turing AI OS landing page
  Light: ink on white, with the orb's own colours kept as accents. The scheme
  turned over in one commit — the token block below is the whole palette, and
  the sweeps under it are the literals that never became tokens.
  Everything is scoped to body.tos so it cannot leak into the storefront theme.
*/

:root {
  --tos-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tos-black: #ffffff;
  --tos-ink: #f6f7f9;
  --tos-surface: #ffffff;
  --tos-surface-2: #f1f3f7;
  --tos-line: rgba(9, 12, 20, 0.10);
  --tos-line-strong: rgba(9, 12, 20, 0.20);

  --tos-text: #0b0e14;
  --tos-muted: #59616f;
  --tos-dim: #838b99;

  /* Orb accents, darkened for a white ground: the orb's own blue is a light on
     black and a wash on white, and text set in it stops being readable. */
  --tos-blue: #1f6bff;
  --tos-violet: #7c46ef;
  --tos-teal: #0f9e88;
  --tos-warm: #c26a25;
  --tos-arc: linear-gradient(90deg, #0f9e88, #1f6bff, #7c46ef, #c26a25);
  --tos-silver: linear-gradient(180deg, #0b0e14 0%, #333b4a 55%, #6b7386 100%);

  --tos-radius: 14px;
  --tos-radius-lg: 22px;
  /* A glow needs something dark to glow against. On white it is a shadow. */
  --tos-glow: 0 18px 60px rgba(9, 12, 20, 0.10);
}

/* ── Shell ─────────────────────────────────────────────── */

html:has(body.tos) {
  height: auto !important;
  background: var(--tos-black);
  scroll-behavior: smooth;
}

body.tos {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  background: var(--tos-black);
  color: var(--tos-text);
  font-family: var(--tos-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.tos .content-wrapper {
  display: block !important;
  flex: none !important;
}

body.tos ::selection {
  background: rgba(31, 107, 255, 0.20);
  color: var(--tos-text);
}

/* Navbar: floats over the black hero, condenses on scroll */
body.tos .navbar-wrapper {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  background: transparent !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Floating is for the hero, and only the hero. The rest of these pages —
   thanks, subscribed, download, install, resend, sold out, unavailable — have
   nothing behind the bar for it to float over, so a fixed navbar takes up no
   space in the flow and simply covers whatever comes first. What comes first
   on every one of them is the eyebrow, which is why "Payment received" was
   drawn behind the bar.

   They get back the sticky navbar the rest of the site uses: it occupies its
   own height, so nothing can hide under it, and it still follows the page
   down. Written as a rule about heroes rather than a list of templates so the
   next page of this shape is right when it is written, and given the same
   background the scrolled state uses, because a transparent bar with text
   passing under it is the same bug wearing a different hat. */
body.tos:not(:has(.tos-hero)) .navbar-wrapper {
  position: sticky !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tos-line);
}

body.tos.tos-scrolled .navbar-wrapper {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tos-line);
}

body.tos .top-nav,
body.tos .top-nav.scrolled,
body.tos .top-nav .container-fluid {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.tos .top-nav a,
body.tos .top-nav span,
body.tos .top-nav .nav-link-cultural,
body.tos .top-nav .brand-text-cultural,
body.tos .top-nav .brand-subtitle-cultural,
body.tos .top-nav .text-muted {
  color: rgba(9, 12, 20, 0.92) !important;
  font-family: var(--tos-font) !important;
}

body.tos .top-nav .brand-subtitle-cultural {
  color: rgba(9, 12, 20, 0.55) !important;
}

body.tos .top-nav a:hover {
  color: var(--tos-text) !important;
}

body.tos .site-footer {
  background: var(--tos-black);
  border-top: 1px solid var(--tos-line);
  color: var(--tos-dim);
}

body.tos .site-footer a {
  color: var(--tos-muted);
}

body.tos .site-footer a:hover {
  color: var(--tos-text);
}

/* ── Typography and primitives ─────────────────────────── */

.tos-wrap {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.tos-narrow {
  width: min(760px, 100% - 3rem);
  margin-inline: auto;
}

.tos-section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  position: relative;
}

.tos-section + .tos-section {
  border-top: 1px solid var(--tos-line);
}

.tos-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tos-dim);
  margin: 0 0 1rem;
}

.tos-h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.tos-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: var(--tos-muted);
  margin: 0;
}

.tos-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tos-head-center {
  text-align: center;
  margin-inline: auto;
}

.tos-gradient-text {
  background: var(--tos-arc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons */
.tos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--tos-font);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tos-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.tos-btn-primary {
  background: var(--tos-text);
  color: #ffffff;
}

.tos-btn-primary:hover {
  background: #22262f;
  color: #ffffff;
  box-shadow: 0 12px 34px rgba(9, 12, 20, 0.18);
}

.tos-btn-ghost {
  background: rgba(9, 12, 20, 0.04);
  border-color: var(--tos-line-strong);
  color: var(--tos-text);
}

.tos-btn-ghost:hover {
  background: rgba(9, 12, 20, 0.06);
  color: var(--tos-text);
  border-color: rgba(9, 12, 20, 0.28);
}

.tos-btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.tos-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.tos-note {
  font-size: 0.85rem;
  color: var(--tos-dim);
  margin: 1rem 0 0;
}

/* Cards */
.tos-card {
  background: linear-gradient(180deg, rgba(9, 12, 20, 0.045), rgba(9, 12, 20, 0.015));
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.tos-card:hover {
  border-color: var(--tos-line-strong);
  transform: translateY(-3px);
}

.tos-card h3 {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

.tos-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tos-muted);
  margin: 0;
}

/* Scroll reveal */
.tos-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.tos-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tos-reveal { opacity: 1; transform: none; transition: none; }
  html:has(body.tos) { scroll-behavior: auto; }
}

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

.tos-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 9rem 1.5rem 5rem;
  overflow: hidden;
}

/* Aurora bloom behind the orb */
.tos-hero::before {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 38% 40%, rgba(15, 158, 136, 0.16), transparent 46%),
    radial-gradient(circle at 62% 42%, rgba(31, 107, 255, 0.24), transparent 48%),
    radial-gradient(circle at 52% 62%, rgba(124, 70, 239, 0.18), transparent 52%),
    radial-gradient(circle at 68% 66%, rgba(194, 106, 37, 0.10), transparent 46%);
  filter: blur(38px);
  pointer-events: none;
  animation: tos-bloom 16s ease-in-out infinite alternate;
}

@keyframes tos-bloom {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  to   { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.tos-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

/* The orb keeps a dark ground of its own.
   It is a bright artwork drawn on black — the boot orb, the same image the
   machine shows while it starts — so on a white page its own square edge shows
   as a grey tile and its glow has nothing to glow against. Rather than repaint
   the art, it is given a round dark plate the size of itself: the image reads
   as it was drawn, the square disappears into the circle, and the one dark
   shape on the page is the one the product is named for. */
.tos-hero-orb {
  width: clamp(150px, 22vw, 230px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0b0e14 0%, #0b0e14 62%, rgba(11, 14, 20, 0) 72%);
  filter: drop-shadow(0 18px 44px rgba(9, 12, 20, 0.22));
  animation: tos-orb-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tos-orb-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

.tos-hero h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0 0 1.25rem;
  background: var(--tos-silver);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tos-hero-sub {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--tos-text);
  margin: 0 auto 1.1rem;
  max-width: 620px;
  letter-spacing: -0.015em;
}

.tos-hero-desc {
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.65;
  color: var(--tos-muted);
  margin: 0 auto 2.25rem;
  max-width: 620px;
}

.tos-hero .tos-actions {
  justify-content: center;
}

.tos-hero-meta {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
  font-size: 0.82rem;
  color: var(--tos-dim);
}

.tos-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tos-hero-meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tos-teal);
  box-shadow: 0 0 10px var(--tos-teal);
}

/* Voice line under the hero */
.tos-say {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem 0.5rem 0.75rem;
  border: 1px solid var(--tos-line-strong);
  border-radius: 999px;
  background: rgba(9, 12, 20, 0.03);
  font-size: 0.88rem;
  color: var(--tos-muted);
  margin-bottom: 1.75rem;
}

.tos-say b {
  color: var(--tos-text);
  font-weight: 600;
}

.tos-say-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tos-teal);
  box-shadow: 0 0 0 0 rgba(15, 158, 136, 0.6);
  animation: tos-pulse 2.4s ease-out infinite;
  flex: none;
  margin-left: 0.3rem;
}

@keyframes tos-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 158, 136, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(15, 158, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 158, 136, 0); }
}

/* ── Pillars ───────────────────────────────────────────── */

.tos-grid {
  display: grid;
  gap: 1.25rem;
}

.tos-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tos-grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.tos-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* One card, not three. A lone card in a three-up grid stretches the width of the
   page and stops reading as a price card, so it keeps roughly the width the
   three-up layout gave it and sits in the middle. */
.tos-grid-1 {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.tos-pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: rgba(31, 107, 255, 0.12);
  border: 1px solid rgba(31, 107, 255, 0.28);
}

.tos-pillar-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--tos-blue);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Split feature rows ────────────────────────────────── */

.tos-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.tos-split + .tos-split {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.tos-split-flip .tos-split-media { order: -1; }

.tos-split h3 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.tos-split p {
  color: var(--tos-muted);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.tos-split-media img {
  width: 100%;
  border-radius: var(--tos-radius-lg);
  border: 1px solid var(--tos-line);
  display: block;
}

.tos-checks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.tos-checks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--tos-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.tos-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tos-arc);
}

.tos-checks strong {
  color: var(--tos-text);
  font-weight: 600;
}

/* ── Command panel mock ────────────────────────────────── */

.tos-mock {
  border-radius: var(--tos-radius-lg);
  border: 1px solid var(--tos-line-strong);
  background: linear-gradient(180deg, #ffffff, #f4f6f9);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(9, 12, 20, 0.14), var(--tos-glow);
}

.tos-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--tos-line);
  background: rgba(9, 12, 20, 0.025);
}

.tos-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(9, 12, 20, 0.16);
}

.tos-mock-title {
  margin-left: 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tos-dim);
}

.tos-mock-body {
  padding: 1.5rem 1.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.tos-mock-body p { margin: 0 0 0.85rem; }
.tos-mock-body p:last-child { margin-bottom: 0; }

.tos-mock-you {
  color: var(--tos-text);
  font-weight: 500;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--tos-line);
}

.tos-mock-tool {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--tos-teal);
  padding-left: 1.3rem;
  position: relative;
}

.tos-mock-tool::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--tos-dim);
}

.tos-mock-say {
  margin-top: 1.1rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--tos-line);
  color: var(--tos-blue);
  font-style: italic;
}

/* ── App suite ─────────────────────────────────────────── */

.tos-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.tos-app {
  text-align: center;
  padding: 1.75rem 1.1rem;
  border-radius: var(--tos-radius-lg);
  border: 1px solid var(--tos-line);
  background: rgba(9, 12, 20, 0.02);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, background 0.28s ease;
}

.tos-app:hover {
  transform: translateY(-6px);
  border-color: var(--tos-line-strong);
  background: rgba(9, 12, 20, 0.05);
}

.tos-app img {
  width: 74px;
  height: 74px;
  margin: 0 auto 1rem;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(9, 12, 20, 0.14));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.tos-app:hover img {
  transform: scale(1.07);
}

.tos-app h3 {
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 0.35rem;
}

.tos-app p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--tos-muted);
  margin: 0;
}

/* ── Screenshots ───────────────────────────────────────── */

.tos-shots {
  border-top: 1px solid var(--tos-line);
}

.tos-shot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tos-shot-wide { grid-column: 1 / -1; }

.tos-shot {
  margin: 0;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  background: var(--tos-surface);
  overflow: hidden;
}

/* The captures come off a real 1920-wide machine, so let them scale rather
   than crop — cropping a UI screenshot loses the thing being demonstrated. */
.tos-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--tos-line);
}

.tos-shot figcaption {
  padding: 1.1rem 1.3rem 1.3rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tos-muted);
}

.tos-shot figcaption strong {
  color: var(--tos-text);
  display: block;
  margin-bottom: 0.25rem;
}

/* ── Spec / architecture table ─────────────────────────── */

.tos-specs {
  display: grid;
  gap: 0;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  overflow: hidden;
}

.tos-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding: 1.15rem 1.6rem;
  align-items: baseline;
}

.tos-spec-row + .tos-spec-row {
  border-top: 1px solid var(--tos-line);
}

.tos-spec-row dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tos-dim);
  margin: 0;
}

.tos-spec-row dd {
  margin: 0;
  color: var(--tos-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ── AI plans ──────────────────────────────────────────── */

.tos-plan {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: var(--tos-radius-lg);
  border: 1px solid var(--tos-line);
  background: rgba(9, 12, 20, 0.02);
  position: relative;
}

.tos-plan-featured {
  border-color: rgba(31, 107, 255, 0.45);
  background: linear-gradient(180deg, rgba(31, 107, 255, 0.09), rgba(9, 12, 20, 0.015));
  box-shadow: var(--tos-glow);
}

.tos-plan-tag {
  position: absolute;
  top: -0.7rem;
  left: 2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--tos-blue);
  color: #fff;
}

.tos-plan h3 {
  font-size: 1.2rem;
  font-weight: 650;
  margin: 0 0 0.4rem;
}

.tos-plan-price {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.6rem 0 0.2rem;
}

.tos-plan-price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--tos-dim);
  letter-spacing: 0;
}

.tos-plan > p {
  color: var(--tos-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.tos-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--tos-muted);
}

.tos-plan ul li {
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.5;
}

.tos-plan ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--tos-teal);
  border-bottom: 1.8px solid var(--tos-teal);
  transform: rotate(-45deg);
}

.tos-plan-foot {
  margin-top: auto;
}

/* ── Hardware bundle ───────────────────────────────────── */

.tos-hw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.tos-hw-card {
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  overflow: hidden;
  background: rgba(9, 12, 20, 0.02);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.tos-hw-card:hover {
  border-color: var(--tos-line-strong);
  transform: translateY(-3px);
}

.tos-hw-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: hidden;
  background: #f4f6f9;
}

/* Pool of light under the cutout so it doesn't float in a void */
.tos-hw-media::before {
  content: "";
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 72%;
  height: 58%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(31, 107, 255, 0.18), transparent 70%);
  filter: blur(22px);
}

.tos-hw-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 34px rgba(9, 12, 20, 0.14));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tos-hw-card:hover .tos-hw-media img {
  transform: scale(1.04);
}

.tos-hw-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tos-hw-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.tos-hw-body > p {
  color: var(--tos-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

.tos-hw-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--tos-dim);
  display: grid;
  gap: 0.35rem;
}

.tos-hw-form {
  margin-top: auto;
}

.tos-finish {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.tos-finish label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--tos-line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--tos-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.tos-finish label:hover { border-color: var(--tos-line-strong); color: var(--tos-text); }

.tos-finish label:has(input:checked) {
  border-color: var(--tos-blue);
  background: rgba(31, 107, 255, 0.12);
  color: var(--tos-text);
}

/* Screen-reader-only rather than opacity:0, which would drop the radio out of
   the accessibility tree. The pill is the visual control. */
.tos-finish input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tos-finish label:focus-within {
  border-color: var(--tos-blue);
  box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.25);
}

.tos-swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--tos-line-strong);
  display: inline-block;
}

.tos-swatch-black { background: #1b1e24; }
.tos-swatch-silver { background: linear-gradient(135deg, #e8eaee, #a9aeb8); }
.tos-swatch-titanium { background: linear-gradient(135deg, #cfc9bf, #8d8880); }

.tos-buy {
  width: 100%;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--tos-text);
  color: #ffffff;
  font-family: var(--tos-font);
  font-size: 0.93rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tos-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(9, 12, 20, 0.16);
}

/* ── Early access ──────────────────────────────────────── */

.tos-cta {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 10vw, 8.5rem);
  overflow: hidden;
  border-top: 1px solid var(--tos-line);
}

.tos-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(31, 107, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 100%, rgba(15, 158, 136, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 50% at 72% 100%, rgba(124, 70, 239, 0.14), transparent 70%);
  pointer-events: none;
}

.tos-cta > * { position: relative; }

.tos-form {
  display: flex;
  gap: 0.6rem;
  max-width: 480px;
  margin: 2rem auto 0;
}

.tos-form input[type="email"] {
  flex: 1;
  padding: 0.9rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--tos-line-strong);
  background: rgba(9, 12, 20, 0.05);
  color: var(--tos-text);
  font-family: var(--tos-font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tos-form input[type="email"]::placeholder { color: var(--tos-dim); }

.tos-form input[type="email"]:focus {
  border-color: var(--tos-blue);
  background: rgba(9, 12, 20, 0.08);
}

.tos-form button { flex: none; }

/* ── FAQ ───────────────────────────────────────────────── */

.tos-faq {
  border-top: 1px solid var(--tos-line);
}

.tos-faq details {
  border-bottom: 1px solid var(--tos-line);
  padding: 1.35rem 0;
}

.tos-faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  color: var(--tos-text);
}

.tos-faq summary::-webkit-details-marker { display: none; }

.tos-faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--tos-dim);
  line-height: 1;
  flex: none;
  transition: transform 0.25s ease, color 0.25s ease;
}

.tos-faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--tos-blue);
}

.tos-faq details p {
  margin: 0.9rem 0 0;
  color: var(--tos-muted);
  line-height: 1.7;
  font-size: 0.95rem;
  max-width: 68ch;
}

/* ── Status strip ──────────────────────────────────────── */

.tos-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--tos-line);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  overflow: hidden;
}

.tos-status div {
  background: var(--tos-black);
  padding: 1.75rem 1.5rem;
}

.tos-status dt {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
  background: var(--tos-silver);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tos-status dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tos-muted);
  line-height: 1.5;
}

/* ── Set-up: brain picker and voice picker ─────────────── */

.tos-setup {
  border-top: 1px solid var(--tos-line);
}

.tos-step {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.tos-step-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.55rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tos-text);
}

.tos-step-num {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--tos-line-strong);
  background: rgba(31, 107, 255, 0.16);
  font-size: 0.85rem;
}

.tos-step-note {
  max-width: 64ch;
  margin: 0 0 1.7rem;
  color: var(--tos-muted);
  line-height: 1.7;
}

.tos-brains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.tos-brain {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  background: var(--tos-surface);
}

.tos-brain-featured {
  border-color: rgba(31, 107, 255, 0.5);
  background: linear-gradient(180deg, rgba(31, 107, 255, 0.13), var(--tos-surface) 62%);
}

.tos-brain-tag {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tos-dim);
}

.tos-brain-featured .tos-brain-tag { color: var(--tos-blue); }

.tos-brain h3 {
  margin: 0 0 0.15rem;
  font-size: 1.2rem;
}

.tos-brain-line {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--tos-dim);
}

.tos-brain p:last-child {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--tos-muted);
}

/* The model lists inside a brain card. Same size and colour as the paragraph
   below them, so a card reads as one block rather than a list with a footnote. */
.tos-brain-list {
  margin: 0 0 0.85rem;
  padding-left: 1.05rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tos-muted);
}

.tos-brain-list li { margin-bottom: 0.4rem; }
.tos-brain-list li:last-child { margin-bottom: 0; }
.tos-brain-list strong { color: var(--tos-text, inherit); font-weight: 600; }

/* Voice credits. Small print by design — it has to be visible and readable,
   which an attribution licence requires, without competing with the voices. */
.tos-voice-credits {
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius-lg);
  background: var(--tos-surface);
}

.tos-voice-credits h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tos-dim);
}

.tos-voice-credits p,
.tos-voice-credits li {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--tos-muted);
}

.tos-voice-credits p { margin: 0 0 0.7rem; }
.tos-voice-credits ul { margin: 0; padding-left: 1.05rem; }
.tos-voice-credits li { margin-bottom: 0.45rem; }
.tos-voice-credits li:last-child { margin-bottom: 0; }
.tos-voice-credits strong { color: var(--tos-text); font-weight: 600; }

.tos-byok {
  margin: 1.4rem 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--tos-muted);
}

.tos-byok strong {
  color: var(--tos-text);
  font-weight: 600;
}

.tos-voice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
}

.tos-voice-tab {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--tos-line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--tos-muted);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.tos-voice-tab:hover {
  border-color: var(--tos-line-strong);
  color: var(--tos-text);
}

.tos-voice-tab.is-active {
  border-color: var(--tos-blue);
  background: rgba(31, 107, 255, 0.14);
  color: var(--tos-text);
}

.tos-voice-panel {
  display: grid;
  gap: 0.6rem;
}

/* Only the scripted player hides the other locales; without JavaScript the tabs
   are plain anchors and every panel stays on the page. */
.has-js .tos-voice-panel:not(.is-active) { display: none; }

.tos-voice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius);
  background: var(--tos-surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tos-voice.is-playing {
  border-color: var(--tos-blue);
  background: linear-gradient(90deg, rgba(31, 107, 255, 0.15), var(--tos-surface) 65%);
}

.tos-voice-play {
  display: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--tos-line-strong);
  background: rgba(9, 12, 20, 0.04);
  color: var(--tos-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.has-js .tos-voice-play { display: grid; }

.tos-voice-play:hover {
  border-color: var(--tos-blue);
  background: rgba(31, 107, 255, 0.18);
}

.tos-voice-play:focus-visible {
  outline: 2px solid var(--tos-blue);
  outline-offset: 2px;
}

.tos-voice-play svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.tos-voice-play .tos-icon-stop { display: none; }
.tos-voice.is-playing .tos-voice-play .tos-icon-play { display: none; }
.tos-voice.is-playing .tos-voice-play .tos-icon-stop { display: block; }

.tos-voice-text { min-width: 0; }

.tos-voice-text h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.tos-voice-character {
  margin: 0.12rem 0 0;
  font-size: 0.82rem;
  color: var(--tos-dim);
}

.tos-voice-say {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--tos-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tos-voice-audio { max-width: 15rem; }
.has-js .tos-voice-audio { display: none; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 860px) {
  .tos-split { grid-template-columns: 1fr; }
  .tos-split-flip .tos-split-media { order: 0; }
  .tos-spec-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .tos-hero { min-height: auto; padding-top: 7.5rem; }
  .tos-shot-grid { grid-template-columns: 1fr; }
  .tos-brains { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .tos-wrap, .tos-narrow { width: calc(100% - 2.5rem); }
  .tos-form { flex-direction: column; }
  .tos-form button { width: 100%; }
  .tos-voice { grid-template-columns: auto 1fr; }
  .tos-voice-say { display: none; }
}