:root {
  color-scheme: dark;
  --bg: #070910;
  --bg-raised: #0d111c;
  --panel: rgba(17, 22, 36, 0.82);
  --panel-solid: #111624;
  --text: #f7f8fc;
  --muted: #a7b0c3;
  --muted-strong: #cbd1dc;
  --accent: #8b5cf6;
  --accent-light: #b9a1ff;
  --cyan: #39d7ee;
  --green: #39dfa0;
  --border: rgba(172, 184, 211, 0.16);
  --border-strong: rgba(185, 161, 255, 0.34);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --radius: 22px;
  --container: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  line-height: 1.65;
  background:
    radial-gradient(circle at 78% -10%, rgba(57, 215, 238, 0.12), transparent 32rem),
    radial-gradient(circle at 16% 10%, rgba(139, 92, 246, 0.2), transparent 34rem),
    var(--bg);
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

a {
  color: var(--accent-light);
  text-underline-offset: 0.2em;
}

a:hover {
  color: #d7ccff;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--bg);
  font-weight: 800;
  text-decoration: none;
  background: var(--cyan);
  border-radius: 10px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgba(7, 9, 16, 0.78);
  backdrop-filter: blur(18px);
}

.site-nav {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* The whole top bar is brand cyan: wordmark, strapline and every tab. It is
   the one band of the site that is always on screen, so it reads as Infin8
   chrome rather than as page content. Contrast is well clear of AA on the
   header's near-black fill, and the current tab is still distinguished by its
   own fill and underline rather than by colour alone. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color 160ms ease;
}

.brand:hover { color: var(--accent-light); }

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(10, 13, 22, 0.72);
  box-shadow: 0 8px 28px rgba(122, 92, 255, 0.32);
  overflow: hidden;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-company {
  margin-top: 4px;
  color: rgba(57, 215, 238, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  position: relative;
  padding: 8px 12px;
  color: var(--cyan);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 9px;
  transition: color 160ms ease, background-color 160ms ease;
}

.nav-links a:hover {
  color: #7ff0ff;
  background: rgba(57, 215, 238, 0.12);
}

/* The current tab is the brightest cyan, on a cyan fill, over a cyan rule -
   three signals, none of which is hue alone. */
.nav-links a[aria-current="page"] {
  color: #b6f6ff;
  background: rgba(57, 215, 238, 0.16);
}

.nav-links a[aria-current="page"]::after {
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  content: "";
}

/* The hero is a banner, not a landing page. Matching the arcade's tighter top
   so the promo card and the first section are both visible without scrolling. */
.hero {
  position: relative;
  padding: clamp(28px, 3.5vw, 46px) 0 34px;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.eyebrow,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: #d2c7ff;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(139, 92, 246, 0.46);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.11);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}

h1,
h2,
h3 {
  margin-top: 0;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h1 {
  max-width: 860px;
  margin: 14px 0;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
}

.gradient-text {
  color: transparent;
  background: linear-gradient(100deg, #fff 8%, var(--accent-light) 50%, var(--cyan));
  background-clip: text;
}

.lead {
  max-width: 720px;
  margin: 0;
  color: var(--muted-strong);
  font-size: clamp(1.06rem, 2vw, 1.25rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  color: var(--text);
  font-weight: 750;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* .button sets its own display, which outranks the user-agent [hidden] rule -
   so a button the page has hidden stays on screen. Every site control that can
   be toggled needs this, not just #manage-billing. */
.button[hidden],
.text-link[hidden] { display: none; }

.button:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #5f7df9);
  box-shadow: 0 14px 36px rgba(107, 86, 235, 0.26);
}

/* Business-first home hero: the real Assistant workspace is the visual anchor,
   with one continuous capability rail instead of a cluster of workflow cards. */
.assistant-home-hero {
  padding-top: clamp(34px, 5vw, 72px);
  overflow: hidden;
}

.assistant-home-hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 680px;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 82% 30%, rgba(57, 215, 238, 0.2), transparent 28rem),
    radial-gradient(circle at 18% 18%, rgba(139, 92, 246, 0.28), transparent 32rem);
}

.assistant-home-hero .container {
  width: min(1320px, calc(100% - 40px));
}

/* Two columns, as before: the mark and one clean title on the left, the real
   workspace on the right. Everything explanatory moved below the pair, so the
   top of the page is a statement rather than a paragraph. */
.assistant-hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, 0.95fr) minmax(500px, 1.05fr);
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
}

/* The mark owns the top of the column and the title sits centred beneath it,
   so the identity fills the space instead of hugging one edge. */
.assistant-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.assistant-hero-copy h1 {
  max-width: 14ch;
  margin: 6px 0 0;
  font-size: clamp(2.7rem, 4.9vw, 4.8rem);
  line-height: 0.99;
}

.assistant-hero-copy .actions { margin-top: 26px; }

/* The supporting line sits under both columns, centred, so it reads as the
   explanation of what is above it instead of competing with the title. */
.assistant-hero-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(30px, 4vw, 52px);
  gap: 14px;
  text-align: center;
}

.assistant-hero-summary .lead { max-width: 74ch; }

.assistant-hero-screen {
  position: relative;
  margin: 0;
  border: 1px solid rgba(185, 161, 255, 0.34);
  border-radius: 24px;
  background: #080b13;
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.58), 0 0 70px rgba(57, 215, 238, 0.12);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
}

.assistant-hero-screen::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.assistant-hero-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.assistant-hero-screen figcaption {
  display: flex;
  gap: 8px;
  padding: 15px 18px;
  color: var(--muted);
  font-size: 0.86rem;
  border-top: 1px solid var(--border);
  background: rgba(10, 14, 24, 0.95);
}

.assistant-hero-screen figcaption strong { color: var(--text); }

.assistant-capability-rail {
  position: relative;
  display: grid;
  /* Five equal cells: at four the fifth capability dropped onto a row of its
     own and read like an afterthought. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 62px);
  border-block: 1px solid var(--border);
}

.assistant-capability-rail span {
  padding: 20px clamp(14px, 2vw, 24px);
  color: var(--muted);
  font-size: 0.85rem;
}

.assistant-capability-rail span + span { border-left: 1px solid var(--border); }

@media (max-width: 1100px) {
  .assistant-capability-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assistant-capability-rail span:nth-child(3n + 1) { border-left: 0; }
  .assistant-capability-rail span:nth-child(n + 4) { border-top: 1px solid var(--border); }
}
.assistant-capability-rail strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.assistant-orbit {
  position: relative;
  display: grid;
  min-height: 380px;
  place-items: center;
}

.assistant-orbit::before,
.assistant-orbit::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(185, 161, 255, 0.22);
  border-radius: 50%;
}

.assistant-orbit::before {
  width: 330px;
  height: 330px;
}

.assistant-orbit::after {
  width: 240px;
  height: 240px;
  border-color: rgba(57, 215, 238, 0.18);
}

.assistant-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 160px;
  height: 160px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 46px;
  background:
    radial-gradient(circle at 65% 25%, rgba(255, 255, 255, 0.45), transparent 16%),
    linear-gradient(145deg, #9e6dff, #6376ec 56%, #31d6e7);
  box-shadow: 0 28px 90px rgba(95, 82, 218, 0.42);
  transform: rotate(-7deg);
}

.assistant-core span {
  font-size: 4.8rem;
  font-weight: 900;
  letter-spacing: -0.12em;
  text-shadow: 0 8px 28px rgba(22, 17, 73, 0.32);
  transform: rotate(7deg) translateX(-0.08em);
}

.suite-hero .hero-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
  align-items: center;
}

/* The hero promo is a finished flyer with its own headline, lockup and call to
   action. It is presented flat and unobstructed: nothing is absolutely
   positioned over it, and it keeps its own aspect ratio whatever shape the
   artwork is swapped to. */
.hero-media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
  /* The copy column is tall; without a floor the flyer floats in dead space. */
  min-height: 430px;
}

.hero-media::before {
  position: absolute;
  inset: 6% 4% 22%;
  z-index: 0;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.34), transparent 68%);
  filter: blur(30px);
}

.promo-flyer {
  position: relative;
  z-index: 1;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  overflow: hidden;
  background: #05070f;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5);
}

.promo-flyer > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Three equal claims under the flyer. A grid rather than floating chips, so
   they line up with the flyer edges and never overlap the artwork. */
.promo-claims {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promo-claims li {
  padding: 14px 8px;
  text-align: center;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(13, 17, 28, 0.82);
}

.suite-visual {
  position: relative;
  min-height: 430px;
  perspective: 1000px;
}

.suite-visual::before {
  position: absolute;
  inset: 18% 8% 8%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 68%);
  filter: blur(22px);
}

.suite-window {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 21, 35, 0.92);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.window-back {
  top: 54px;
  right: 14px;
  width: 78%;
  height: 280px;
  opacity: 0.48;
  transform: rotate(8deg) translateZ(-40px);
}

.window-back span {
  display: block;
  width: 65%;
  height: 12px;
  margin: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.window-main {
  top: 86px;
  left: 0;
  z-index: 2;
  width: 90%;
  height: 290px;
  overflow: hidden;
  transform: rotate(-3deg);
}

.window-bar {
  display: flex;
  height: 45px;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-bottom: 1px solid var(--border);
}

.window-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.window-bar strong {
  margin-left: 9px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.window-content {
  display: grid;
  height: calc(100% - 45px);
  grid-template-columns: 58px 1fr;
}

.window-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  padding-top: 22px;
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
}

.window-sidebar b {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(185, 161, 255, 0.2);
}

.window-sidebar b:first-child {
  background: var(--accent);
}

.window-canvas {
  padding: 34px;
}

.canvas-kicker,
.canvas-title {
  display: block;
  height: 8px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(57, 215, 238, 0.46);
}

.canvas-kicker {
  width: 74px;
  height: 5px;
}

.canvas-title {
  width: 78%;
  height: 15px;
  background: rgba(255, 255, 255, 0.58);
}

.canvas-title.short {
  width: 54%;
}

.canvas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 32px;
}

.canvas-grid i {
  height: 66px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.15), rgba(57, 215, 238, 0.06));
}



/* One rhythm for every page. The old 34/86 split left a screen of dead space
   between sections; this keeps the separation readable while bringing far more
   content into each viewport. */
.section {
  padding: 28px 0 56px;
}

.media-section {
  padding-top: 10px;
}

.promo-video {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  background: #03050a;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.52);
}

.promo-video::before {
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(139, 92, 246, 0.12);
}

.promo-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

.section-heading h2 {
  margin-bottom: 8px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.section-heading p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 27, 43, 0.92), rgba(12, 16, 27, 0.9));
  box-shadow: var(--shadow);
}

.card::after {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 160px;
  height: 160px;
  content: "";
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.12);
  filter: blur(8px);
}

.card-number {
  display: inline-grid;
  width: 38px;
  height: 38px;
  margin-bottom: 30px;
  place-items: center;
  color: #dbd3ff;
  font-size: 0.85rem;
  font-weight: 800;
  border: 1px solid rgba(185, 161, 255, 0.28);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.12);
}

.card h3 {
  margin-bottom: 10px;
  font-size: 1.18rem;
}

.card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--border);
}

.trust-item {
  padding: 20px 24px;
  background: var(--bg-raised);
}

.trust-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.trust-item span {
  color: var(--muted);
  font-size: 0.86rem;
}

.statement-panel,
.cta-panel {
  padding: clamp(34px, 6vw, 64px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 20%, rgba(57, 215, 238, 0.13), transparent 24rem),
    radial-gradient(circle at 12% 100%, rgba(139, 92, 246, 0.18), transparent 30rem),
    var(--panel-solid);
  box-shadow: var(--shadow);
}

.statement-panel h2 {
  max-width: 750px;
  margin: 18px 0 14px;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.statement-panel p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.05rem;
}

.statement-panel.centered {
  text-align: center;
}

.statement-panel.centered h2,
.statement-panel.centered p {
  margin-inline: auto;
}

.statement-panel.centered .button {
  margin-top: 14px;
}

.text-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 12px;
  font-weight: 750;
  text-decoration: none;
}

.section-heading > .text-link {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.product-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.product-preview {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

.product-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #090c14;
}

.product-preview > div {
  padding: 20px 22px 22px;
}

.product-preview span,
.product-type {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-preview h3 {
  margin: 6px 0 0;
  font-size: 1.2rem;
}

/* Home-page flow rule: media controls the height of its own presentation and
   supporting copy stays in one continuous rhythm. Fixed media shells and
   clusters of detached summary cards do not belong on the landing page. */
.section {
  padding: clamp(24px, 3.5vw, 44px) 0;
}

.home-page main > .section + .section > .container {
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--border);
}

.media-section {
  padding-top: 8px;
}

.product-preview {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-preview img {
  height: auto;
  aspect-ratio: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.4);
}

.product-preview > div {
  padding: 12px 2px 0;
}

.home-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home-principle {
  padding: 22px 24px;
}

.home-principle + .home-principle {
  border-left: 1px solid var(--border);
}

.principle-number {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.home-principle h3 {
  margin: 8px 0 8px;
  font-size: 1.08rem;
}

.home-principle p {
  margin: 0;
  color: var(--muted);
}

.home-closing {
  padding-bottom: clamp(22px, 4vw, 42px);
}

.home-closing h2 {
  max-width: 760px;
  margin: 12px 0 10px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.home-closing p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

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

  .home-principle + .home-principle {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

.audio-page-flow {
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.audio-intro {
  max-width: 1000px;
}

.audio-intro h1 {
  max-width: 1000px;
  margin: 18px 0 16px;
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  line-height: 1.02;
}

.audio-intro .lead {
  max-width: 860px;
  margin: 0;
}

.audio-lineup-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 56px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.audio-lineup-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  color: var(--text);
  text-decoration: none;
}

.audio-lineup-link + .audio-lineup-link {
  border-left: 1px solid var(--border);
}

.audio-lineup-link img {
  display: block;
  width: 64px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: contain;
}

.audio-lineup-link span,
.audio-lineup-link strong {
  display: block;
}

.audio-lineup-link span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.audio-lineup-link strong {
  margin-bottom: 2px;
  color: var(--text);
  font-size: 0.95rem;
}

.audio-product {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(38px, 7vw, 88px);
  padding: clamp(46px, 7vw, 82px) 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 100px;
}

.audio-product.reverse {
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr);
}

.audio-product.reverse .audio-product-copy {
  order: 2;
}

.audio-product-copy h2 {
  margin: 10px 0 14px;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.06;
}

.audio-product-copy p,
.audio-product-copy li {
  color: var(--muted-strong);
}

.audio-product-copy ul {
  margin: 20px 0 0;
  padding-left: 1.2rem;
}

.audio-product-copy li {
  margin-block: 0.5rem;
}

.audio-product-media {
  margin: 0;
}

.audio-product-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
}

.audio-flow-section {
  padding: clamp(44px, 7vw, 76px) 0;
  border-bottom: 1px solid var(--border);
}

.audio-foundation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  align-items: end;
  gap: clamp(36px, 7vw, 84px);
}

.audio-foundation h2,
.audio-purchase h2 {
  margin: 14px 0 0;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
}

.audio-foundation p,
.audio-purchase p {
  margin: 0;
  color: var(--muted);
}

.audio-purchase {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  border-bottom: 0;
}

.audio-purchase > div {
  max-width: 760px;
}

.audio-purchase p {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .audio-lineup-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audio-lineup-link:nth-child(3) {
    border-left: 0;
  }

  .audio-lineup-link:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .audio-product,
  .audio-product.reverse,
  .audio-foundation {
    grid-template-columns: 1fr;
  }

  .audio-product.reverse .audio-product-copy {
    order: 0;
  }

  .audio-purchase {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .audio-lineup-rail {
    grid-template-columns: 1fr;
  }

  .audio-lineup-link + .audio-lineup-link {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

/* Matches the home hero: a banner, not a screenful of empty space. */
.page-hero {
  padding: clamp(28px, 3.5vw, 46px) 0 34px;
}

.page-hero h1 {
  max-width: 920px;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
  align-items: center;
  gap: clamp(42px, 8vw, 110px);
  padding: 46px 0;
}

.feature-row.reverse .feature-copy {
  order: 2;
}

.feature-copy h2 {
  margin: 14px 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.feature-copy p {
  color: var(--muted);
  font-size: 1.05rem;
}

.feature-index {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.feature-art {
  position: relative;
  display: grid;
  min-height: 300px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 70% 20%, rgba(57, 215, 238, 0.14), transparent 50%),
    rgba(17, 22, 36, 0.72);
}

.art-desktop i {
  position: absolute;
  width: 68%;
  height: 58%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(8, 11, 20, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.art-desktop i:nth-child(1) {
  transform: translate(-44px, 18px) rotate(-7deg);
}

.art-desktop i:nth-child(2) {
  transform: translate(44px, -18px) rotate(7deg);
}

.art-desktop i:nth-child(3) {
  width: 54%;
  height: 48%;
  border-color: rgba(185, 161, 255, 0.32);
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.23), rgba(57, 215, 238, 0.08));
}

.art-ai span {
  color: transparent;
  font-size: 9rem;
  font-weight: 850;
  line-height: 1;
  background: linear-gradient(120deg, var(--accent-light), var(--cyan));
  background-clip: text;
  filter: drop-shadow(0 18px 34px rgba(104, 86, 235, 0.3));
}

.art-system {
  grid-template-columns: repeat(2, 72px);
  gap: 16px;
}

.art-system i {
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.3), rgba(57, 215, 238, 0.07));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
}

.art-system i:nth-child(2),
.art-system i:nth-child(3) {
  background: rgba(255, 255, 255, 0.045);
}

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.cta-panel h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
}

.cta-panel p {
  max-width: 700px;
  margin: 12px 0 0;
  color: var(--muted-strong);
}

.company-page-flow {
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.company-intro {
  max-width: 1040px;
}

.company-intro h1 {
  max-width: 1040px;
  margin: 18px 0 16px;
  font-size: clamp(3rem, 6.8vw, 5.35rem);
  line-height: 1.02;
}

.company-intro .lead {
  max-width: 850px;
  margin: 0;
}

.company-identity-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 56px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.company-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  color: var(--text);
  text-decoration: none;
}

.company-identity + .company-identity {
  padding-left: clamp(24px, 5vw, 56px);
  border-left: 1px solid var(--border);
}

.company-identity img {
  display: block;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  object-fit: contain;
}

.company-identity.developer img {
  width: min(190px, 42%);
  height: 84px;
}

.company-identity span,
.company-identity strong {
  display: block;
}

.company-identity span {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.company-identity strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

.company-flow-section {
  padding: clamp(44px, 7vw, 78px) 0;
  border-bottom: 1px solid var(--border);
}

.company-story-layout,
.company-development {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: start;
  gap: clamp(42px, 8vw, 96px);
}

.company-story h2,
.company-development h2 {
  margin: 16px 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.company-story p,
.company-development p {
  color: var(--muted-strong);
  font-size: 1.04rem;
}

.company-principles h2 {
  margin: 0;
  font-size: 1.35rem;
}

.company-principles ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: company-principles;
}

.company-principles li {
  position: relative;
  padding: 16px 0 16px 42px;
  border-top: 1px solid var(--border);
  counter-increment: company-principles;
}

.company-principles li::before {
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  content: "0" counter(company-principles);
}

.company-principles li strong,
.company-principles li span {
  display: block;
}

.company-principles li span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.9rem;
}

.development-note {
  padding-left: clamp(24px, 5vw, 48px);
  border-left: 1px solid var(--border);
}

.development-note strong,
.development-note span {
  display: block;
}

.development-note strong {
  color: var(--cyan);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.development-note span {
  margin-top: 10px;
  color: var(--muted);
}

.company-contact {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 0;
}

.company-contact h2 {
  margin: 14px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

@media (max-width: 860px) {
  .company-identity-rail,
  .company-story-layout,
  .company-development {
    grid-template-columns: 1fr;
  }

  .company-identity + .company-identity {
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .development-note {
    padding-top: 22px;
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .company-contact {
    align-items: flex-start;
    flex-direction: column;
  }
}

.support-page-flow {
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.support-intro {
  max-width: 940px;
}

.support-intro h1 {
  margin: 18px 0 14px;
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 1;
}

.support-intro .lead {
  max-width: 820px;
  margin: 0;
}

.support-flow-section {
  padding: clamp(46px, 7vw, 80px) 0;
  border-bottom: 1px solid var(--border);
}

/* The company story now lives on this page, so its opening block reads as a
   support section rather than a second page hero. */
.company-about p { max-width: 900px; margin: 12px 0 0; }

.support-contact-flow,
.support-prep {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: start;
  gap: clamp(44px, 8vw, 96px);
}

.support-contact-flow h2,
.support-prep h2,
.company-about h2 {
  margin: 10px 0 12px;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.08;
}

.support-contact-flow p,
.company-about p,
.support-prep p,
.support-prep li {
  color: var(--muted-strong);
}

.support-email .actions {
  margin-top: 22px;
}

/* The 2026 wordmark under the email action, so the column carries the brand
   the way the Discord column carries its QR card. */
.support-email-brand {
  display: block;
  max-width: 360px;
  margin-top: 28px;
  padding: 14px 18px;
  line-height: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(8, 11, 24, 0.55);
  transition: border-color 180ms ease, transform 180ms ease;
}

.support-email-brand:hover {
  border-color: var(--cyan);
  transform: translateY(-1px);
}

.support-email-brand img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .support-email-brand { max-width: 260px; }
}

.contact-link {
  display: inline-flex;
  min-width: 0;
  margin-top: 8px;
  color: var(--cyan);
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.support-discord {
  padding-left: clamp(28px, 5vw, 56px);
  border-left: 1px solid var(--border);
}

.discord-invite-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  align-items: center;
  gap: clamp(22px, 4vw, 42px);
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.discord-invite-copy span {
  display: block;
  max-width: 280px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.qr-image-link {
  display: block;
  width: 176px;
  height: 176px;
  padding: 8px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(7, 9, 16, 0.55);
}

.qr-image-link:hover {
  border-color: var(--cyan);
}

.discord-qr-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.support-prep {
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  border-bottom: 0;
}

.support-prep > div:first-child p {
  max-width: 470px;
}

.support-details ul {
  margin: 0;
  padding-left: 1.2rem;
}

.support-details li {
  margin-block: 0.62rem;
}

.support-privacy {
  margin: 24px 0 0;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--green);
}

.support-privacy strong {
  color: #d9f9ee;
}

@media (max-width: 860px) {
  .support-contact-flow,
  .support-prep {
    grid-template-columns: 1fr;
  }

  .support-discord {
    padding-top: 30px;
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .discord-invite-layout {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 16px;
  }

  .qr-image-link {
    width: 112px;
    height: 112px;
    padding: 6px;
  }
}

.site-footer {
  border-top: 1px solid var(--border);
}

.footer-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 0 42px;
}

.footer-copy {
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-copy strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 0.98rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 16px;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

/* Legal pages keep policy text readable and stable without a separate theme. */
.legal-layout {
  max-width: 960px;
}

.legal-intro {
  max-width: 760px;
  margin-bottom: 32px;
}

.legal-version {
  color: var(--muted);
  font-size: .9rem;
}

.legal-document {
  display: grid;
  gap: 16px;
}

.legal-document section,
.legal-contact {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(17, 22, 36, .88);
}

.legal-document h2 {
  margin-top: 0;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
}

.legal-document p:last-child,
.legal-document ul:last-child {
  margin-bottom: 0;
}

.legal-document li + li {
  margin-top: 10px;
}

.legal-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  margin-top: 24px;
}

.legal-contact strong {
  width: 100%;
}

.pricing-card.is-directed-entry {
  border-color: rgba(57, 215, 238, .92);
  box-shadow: 0 0 0 2px rgba(57, 215, 238, .18), 0 24px 60px rgba(0, 0, 0, .28);
}

/* Plans and purchasing */
.plans-hero{padding:clamp(72px,10vw,130px) 0 54px}.plans-hero-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(28px,6vw,80px);align-items:center}.plans-hero h1{max-width:13ch;font-size:clamp(3.2rem,7vw,6.8rem);line-height:.92;letter-spacing:-.055em}.plans-hero .lead{max-width:720px}.plan-trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.plan-trust-row span{padding:8px 11px;border:1px solid rgba(98,231,255,.2);border-radius:999px;background:rgba(7,14,30,.62);color:var(--muted);font-size:.78rem;font-weight:750}.plans-account-card{padding:28px;border-radius:24px}.plans-account-card h2{font-size:1.45rem}.plans-account-card form{display:grid;gap:12px;margin-top:18px}.plans-account-card label{display:grid;gap:6px;color:var(--muted);font-size:.82rem;font-weight:750}.plans-account-card input{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:#080d1d;color:var(--text)}.plans-account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}.plans-status{min-height:24px;margin:14px 0 0;color:var(--cyan);font-size:.86rem}.plans-status.error{color:#ff8d9e}.plan-selection{padding-top:56px}.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}.pricing-card{position:relative;display:flex;flex-direction:column;min-height:610px;padding:28px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(155deg,rgba(14,22,44,.93),rgba(7,10,22,.96));overflow:hidden}.pricing-card::before{content:"";position:absolute;width:240px;height:240px;top:-130px;right:-90px;border-radius:50%;background:radial-gradient(circle,rgba(98,231,255,.22),transparent 67%);pointer-events:none}.pricing-card.pro::before{background:radial-gradient(circle,rgba(255,163,77,.23),transparent 67%)}.pricing-card.exclusive{border-color:rgba(98,231,255,.52);box-shadow:0 28px 80px rgba(45,95,188,.2)}.pricing-card.exclusive::before{background:radial-gradient(circle,rgba(206,91,255,.3),transparent 67%)}.pricing-index{position:absolute;right:22px;top:20px;color:rgba(255,255,255,.08);font-size:4rem;font-weight:900}.pricing-tier{color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.pricing-card h3{margin:12px 0 10px;font-size:1.85rem}.pricing-price{display:flex;align-items:baseline;gap:7px;margin:0 0 18px}.pricing-price strong{font-size:clamp(2.35rem,4vw,3.5rem);letter-spacing:-.05em}.pricing-price span{color:var(--muted)}.pricing-summary{min-height:78px;color:var(--muted);line-height:1.6}.pricing-card ul{display:grid;gap:10px;margin:8px 0 26px;padding:0;list-style:none}.pricing-card li{position:relative;padding-left:23px}.pricing-card li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 15px var(--cyan)}.pricing-card .plan-action{width:100%;margin-top:auto}.pricing-card button:disabled{cursor:not-allowed;opacity:.56;transform:none}.exclusive .pricing-index{top:50px}.pricing-footnote{max-width:760px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:.82rem}.plan-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.plan-step-grid article{padding:22px;border-top:1px solid var(--border);background:rgba(8,13,28,.5)}.plan-step-grid strong{color:var(--cyan);font-size:1.8rem}.plan-step-grid h3{margin:12px 0 6px}.plan-step-grid p{margin:0;color:var(--muted);line-height:1.55}.portal-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.portal-service-grid>a,.portal-service-grid>button,.portal-service-grid>article{display:flex;min-height:190px;flex-direction:column;align-items:flex-start;padding:22px;border:1px solid var(--border);border-radius:18px;background:rgba(8,13,28,.68);color:var(--text);text-align:left;text-decoration:none;font:inherit;transition:transform 160ms ease,border-color 160ms ease}.portal-service-grid>a:hover,.portal-service-grid>button:hover{border-color:var(--cyan);transform:translateY(-3px)}.portal-service-grid strong{font-size:1.08rem}.portal-service-grid span{margin-top:10px;color:var(--muted);line-height:1.55}.portal-service-grid small{margin-top:auto;padding-top:16px;color:var(--cyan);font-weight:800}@media(max-width:980px){.plans-hero-layout{grid-template-columns:1fr}.plans-hero h1{max-width:15ch}.pricing-grid{grid-template-columns:1fr}.pricing-card{min-height:auto}.pricing-summary{min-height:auto}.plan-step-grid,.portal-service-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.plans-hero{padding-top:48px}.plans-hero h1{font-size:clamp(2.8rem,15vw,4.5rem)}.plans-account-card{padding:20px}.plan-step-grid,.portal-service-grid{grid-template-columns:1fr}.pricing-card{padding:22px}.plan-trust-row{display:grid;grid-template-columns:1fr 1fr}.plans-account-actions{align-items:stretch;flex-direction:column}.plans-account-actions>*{width:100%}.portal-service-grid>a,.portal-service-grid>button,.portal-service-grid>article{min-height:150px}}

@media (max-width: 860px) {
  .assistant-hero-copy h1 { font-size: clamp(2.6rem, 11vw, 4.4rem); }
  .assistant-hero-screen { transform: none; }
  /* Two per row: every odd cell starts a row, so it drops its left rule and
     gains a top rule instead. */
  .assistant-capability-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-capability-rail span:nth-child(odd) { border-left: 0; }
  .assistant-capability-rail span:nth-child(n+3) { border-top: 1px solid var(--border); }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  /* Stacked, the flyer sizes itself from its own aspect ratio. The desktop
     floor height only exists to fill the right-hand column and would otherwise
     open a dead gap above the artwork. */
  .hero-media {
    min-height: 0;
  }

  .suite-hero .hero-layout {
    grid-template-columns: 1fr;
  }

  .assistant-orbit {
    min-height: 320px;
  }

  .grid,
  .trust-strip,
  .product-preview-grid {
    grid-template-columns: 1fr;
  }

  .suite-hero .hero-layout,
  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-row.reverse .feature-copy {
    order: 0;
  }

  /* The flyer sizes itself from its own aspect ratio now, so only the
     decorative panel still needs a floor height. */
  .suite-visual {
    min-height: 380px;
  }

}

@media (max-width: 680px) {
  .assistant-home-hero { padding-top: 30px; }
  .assistant-hero-screen { border-radius: 16px; }
  .assistant-hero-screen figcaption { display: block; }
  .assistant-capability-rail { grid-template-columns: 1fr; }
  .assistant-capability-rail span + span { border-top: 1px solid var(--border); border-left: 0; }

  .container {
    width: min(100% - 28px, var(--container));
  }

  .site-nav {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 12px;
  }

  .nav-links {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-links a {
    padding: 8px;
    font-size: 0.84rem;
  }

  .hero {
    padding-top: 24px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .promo-flyer {
    border-radius: 16px;
  }

  .promo-claims li {
    padding: 8px 6px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .assistant-orbit {
    min-height: 290px;
    transform: scale(0.88);
  }

  .footer-layout {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .cta-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* Infin8 Arcade website integration */
.arcade-promo-section { overflow: hidden; }
.arcade-promo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  padding: clamp(32px, 5vw, 58px);
  border: 1px solid rgba(105, 224, 255, .2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 20%, rgba(164, 83, 255, .2), transparent 26rem),
    linear-gradient(145deg, rgba(12, 17, 38, .96), rgba(5, 11, 24, .92));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .26);
}
.arcade-promo-copy h2 { max-width: 760px; }
.arcade-promo-copy p { max-width: 700px; color: var(--muted); }
.arcade-promo-art { position: relative; min-height: 320px; }
.arcade-promo-art::before {
  content: "";
  position: absolute;
  inset: 12% 2% 4%;
  border-radius: 48% 52% 18% 20%;
  background: linear-gradient(160deg, rgba(99, 230, 255, .12), rgba(181, 109, 255, .09));
  clip-path: polygon(0 64%, 16% 47%, 30% 58%, 48% 28%, 65% 44%, 82% 15%, 100% 43%, 100% 100%, 0 100%);
}
.arcade-ring { position: absolute; width: 106px; aspect-ratio: 1; border: 13px solid #ffe267; border-radius: 50%; filter: drop-shadow(0 0 18px rgba(255,226,103,.5)); }
.arcade-ring.one { top: 14%; right: 12%; }
.arcade-ring.two { width: 72px; left: 16%; top: 30%; opacity: .78; }
.arcade-board { position: absolute; left: 22%; bottom: 21%; width: 56%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #62e7ff, #b56dff); box-shadow: 0 0 22px rgba(98,231,255,.65); transform: rotate(-8deg); }
.arcade-board::before { content: ""; position: absolute; left: 43%; bottom: 12px; width: 42px; height: 96px; border-radius: 24px 24px 12px 12px; background: linear-gradient(#b56dff, #62e7ff); transform: rotate(12deg); }
.arcade-speed-line { position: absolute; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, #62e7ff, transparent); }
.arcade-speed-line.line-one { width: 44%; right: 0; bottom: 39%; }
.arcade-speed-line.line-two { width: 34%; left: 0; bottom: 27%; }
@media (max-width: 850px) {
  .arcade-promo-layout { grid-template-columns: 1fr; }
  .arcade-promo-art { min-height: 240px; }
}


/* ---------------------------------------------------------------------------
   Phone tap targets

   Standalone links (footer navigation, "read more" style links, card links)
   render at their text height, which is around 23px. That is well under a
   comfortable thumb target, so on phones they get a minimum height and become
   inline-flex so the extra height is actually tappable rather than just extra
   line box. Links inside running paragraphs are deliberately left alone:
   padding them out would break the paragraph's rhythm.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) and (pointer: coarse) {
  .text-link,
  .contact-link,
  .side-link,
  footer a,
  .board-footer a,
  .arcade-footer a,
  nav a,
  .arcade-links a,
  .board-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Landing layout: phone ordering and action rows

   On a phone the promo card belongs directly under the headline, not below a
   paragraph and a stack of buttons - it is the strongest thing on the page and
   was being pushed under the fold. `display: contents` on the copy column lets
   the badge, headline, flyer, lead and actions all become siblings of the same
   flex column so they can be reordered without changing the markup.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .suite-hero .hero-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .suite-hero .hero-layout > div:first-child {
    display: contents;
  }

  .suite-hero .badge { order: 1; }
  .suite-hero h1 { order: 2; margin: 0; }
  .suite-hero .hero-media { order: 3; }
  .suite-hero .lead { order: 4; }
  .suite-hero .actions { order: 5; margin-top: 0; }

  /* Two buttons per row instead of a full-width stack, so the whole call to
     action fits in the viewport with the promo card above it. */
  .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .actions > * {
    width: 100%;
    padding: 0 12px;
    text-align: center;
  }

  /* An odd trailing button spans the row rather than leaving a gap. */
  .actions > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .actions {
    grid-template-columns: 1fr;
  }
  .actions > *:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Landing pages share one heading rhythm so suite, company and support all read
   as the same site rather than three separately tuned pages. */
.page-hero .lead {
  margin-top: 12px;
}

/* The Software page reads as one continuous story rather than a stack of
   separate panels, so its blocks float on the page background instead of
   carrying the bordered card chrome the product pages use. */
.software-flow {
  display: grid;
  gap: clamp(64px, 10vw, 128px);
}

.software-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.software-block.reverse > .software-copy {
  order: 2;
}

/* A tall, narrow interface crop needs a narrower column, or it floats in a wide
   empty gutter. */
.software-block.narrow-media {
  /* The navigation side strip is a tall, narrow capture (300x877). A
     fractional media track gave it a 343px column that it could only fill
     144px of once the portrait height cap applied, leaving 199px of dead
     gutter beside a sliver. Sizing the track to the artwork keeps the strip
     flush with the copy instead of adrift in its own column. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.software-copy h2,
.software-copy h3 {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.software-copy p {
  margin: 14px 0 0;
  color: var(--muted);
}

.software-copy ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.software-copy li {
  position: relative;
  margin-top: 10px;
  padding-left: 20px;
  color: var(--muted);
}

.software-copy li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
}

/* No frame, no fill: the interface art sits directly on the page and is lifted
   by shadow alone. */
.software-figure {
  margin: 0;
}

.software-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6);
}

.software-figure.portrait img {
  max-height: 560px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.software-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.software-showcase {
  margin-top: clamp(28px, 5vw, 44px);
}

/* The closing notes stay as running prose in two columns so the page ends by
   reading rather than by presenting another boxed summary. */
.software-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
  margin-top: clamp(20px, 4vw, 32px);
}

.software-notes p {
  margin: 0;
  color: var(--muted);
}

.software-notes strong {
  color: var(--text);
}

@media (max-width: 860px) {
  .software-block,
  .software-block.narrow-media,
  .software-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .software-block.reverse > .software-copy {
    order: 0;
  }

  .software-figure.portrait img {
    max-height: 460px;
  }
}

/* ===========================================================================
   Icons

   Symbols come from assets/infin8-symbols.svg as real vector artwork rather
   than typed characters. A glyph like "→" or "∞" renders in whatever font the
   visitor's OS supplies, so it changed shape between platforms and could not
   be sized or aligned reliably against the text beside it.

   `currentColor` means an icon inherits the colour of the text it sits in, so
   a link's icon changes with the link on hover without a second rule.
   =========================================================================== */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  color: currentColor;
  vertical-align: -0.125em;
}

.icon-lg { width: 1.5em; height: 1.5em; }
.icon-xl { width: 2.25em; height: 2.25em; }

/* Trailing icons on links track the text and nudge forward on hover, which
   reads as direction rather than decoration. */
.text-link .icon {
  margin-left: 0.4em;
  transition: transform 0.18s ease;
}

.text-link:hover .icon,
.text-link:focus-visible .icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .text-link .icon { transition: none; }
  .text-link:hover .icon,
  .text-link:focus-visible .icon { transform: none; }
}

/* The brand mark is filled artwork on its own grid, so it keeps its weight
   regardless of how the stroked icon set is themed. */
.brand-sigil {
  width: 2em;
  height: 1em;
  color: var(--brand-cyan, #63e6ff);
  flex: none;
}

/* ==========================================================================
   Homepage motion system (2026.08)

   Three layers, all opt-in through markup so nothing here changes a page that
   does not ask for it:

   1. `.infin8-sigil`   - the custom animated infinity mark drawn from the
                          Infin8 Apps logo: cyan top loop, violet bottom loop,
                          one continuous stroke traced by a travelling comet so
                          the path never visibly starts or ends.
   2. `.aurora-field`   - slow drifting brand light behind the hero.
   3. `[data-reveal]`   - scroll-entry choreography for the rest of the page.

   Every animation is decorative: the reduced-motion block at the end freezes
   all of it and pins revealed content to its final state, so no information is
   ever gated behind movement.
   ========================================================================== */

.infin8-sigil {
  /* One clock for the whole swirl: the stroke light, the head and every
     particle read from these two values, so they can never drift apart. */
  --swirl-duration: 3.4s;
  --swirl-delay: 1.2s;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.infin8-sigil .sigil-track {
  fill: none;
  stroke: rgba(185, 161, 255, 0.16);
  stroke-width: 9;
  stroke-linecap: round;
}

.infin8-sigil .sigil-stroke {
  fill: none;
  stroke: url(#infin8SigilGradient);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 16px rgba(57, 215, 238, 0.6)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.35));
  animation:
    sigil-draw 1.8s cubic-bezier(0.65, 0, 0.2, 1) forwards,
    sigil-charge 3.4s ease-in-out 1.8s infinite;
}

/* The comet is the same path carrying a short dash. Offsetting it forever is
   what makes the loop read as endless rather than as a repeating clip. */
.infin8-sigil .sigil-comet {
  fill: none;
  stroke: #7ff0ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0.13 0.87;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(122, 240, 255, 1)) drop-shadow(0 0 26px rgba(57, 215, 238, 0.85));
  animation:
    sigil-comet-run var(--swirl-duration) linear var(--swirl-delay) infinite,
    sigil-comet-in 0.6s ease var(--swirl-delay) forwards;
}

/* Particle trail. Each mote rides the same path on the same clock as the
   swirl, held back by its own negative delay, so the group reads as one comet
   shedding sparks rather than as several independent animations. */
.infin8-sigil .sigil-mote {
  fill: #aef4ff;
  offset-path: path("M60 102C32 86 25 71 25 58C25 34 40 20 60 20C80 20 95 34 95 58C95 71 88 86 60 102C31 119 22 132 22 150C22 173 39 188 60 188C81 188 98 173 98 150C98 132 89 119 60 102Z");
  offset-rotate: 0deg;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(122, 240, 255, 0.95));
  animation:
    sigil-spark-run var(--swirl-duration) linear infinite,
    sigil-mote-flicker var(--swirl-duration) ease-in-out infinite;
  animation-delay: calc(var(--swirl-delay) + var(--mote-delay, 0s));
}

/* The spark rides the path itself (offset-path), which is what sells the loop
   as one continuous circuit rather than a stroke effect. */
.infin8-sigil .sigil-spark {
  fill: #f2feff;
  offset-path: path("M60 102C32 86 25 71 25 58C25 34 40 20 60 20C80 20 95 34 95 58C95 71 88 86 60 102C31 119 22 132 22 150C22 173 39 188 60 188C81 188 98 173 98 150C98 132 89 119 60 102Z");
  offset-rotate: 0deg;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(122, 240, 255, 1)) drop-shadow(0 0 26px rgba(94, 230, 255, 0.7));
  animation:
    sigil-spark-run var(--swirl-duration) linear var(--swirl-delay) infinite,
    sigil-comet-in 0.6s ease var(--swirl-delay) forwards;
}

.infin8-sigil .sigil-halo {
  fill: none;
  stroke: url(#infin8SigilGradient);
  stroke-width: 20;
  opacity: 0.16;
  filter: blur(11px);
  animation: sigil-breathe 3.2s ease-in-out 1.6s infinite;
}

@keyframes sigil-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sigil-comet-run {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sigil-comet-in {
  to { opacity: 1; }
}

@keyframes sigil-breathe {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.42; }
}

/* Motes fade in behind the head and burn out before they catch it again. */
@keyframes sigil-mote-flicker {
  0% { opacity: 0.85; }
  55% { opacity: 0.35; }
  85%, 100% { opacity: 0; }
}

@keyframes sigil-spark-run {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* The whole stroke lifts in brightness as the light passes, so the glow reads
   as energy travelling the loop instead of a constant neon outline. */
@keyframes sigil-charge {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(57, 215, 238, 0.5)) drop-shadow(0 0 26px rgba(139, 92, 246, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(94, 230, 255, 0.85)) drop-shadow(0 0 46px rgba(155, 109, 255, 0.55));
  }
}

/* The hero mark is the first thing on the page and the largest: the header
   already carries the wordmark, so nothing here repeats it in text. */
/* Inner page heroes: copy on the left, the mark in its own column on the right.
   It never sits above a title - that composition belongs to the home page. */
.page-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.page-hero-copy h1 {
  margin: 12px 0 14px;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
}

.page-hero-copy .lead { max-width: 68ch; }

@media (max-width: 760px) {
  .page-hero-layout {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
  }

  /* Stacked, the mark follows the copy rather than pushing the title down. */
  .page-hero-layout .page-mark { order: 2; margin-left: 0; }
}

/* Inner pages carry the same mark at banner scale: present on every tab, but
   never competing with the page title the way the home hero deliberately does. */
.page-mark {
  width: clamp(120px, 14vw, 210px);
  height: clamp(120px, 14vw, 210px);
  margin: 0;
  transform: perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fin's greeting. Real text, not an image, so it is readable, selectable and
   translatable. It arrives a beat after the page settles rather than on load,
   which reads as Fin noticing you instead of as a banner.

   Fin stands in the lower left of the mark, so the balloon claims the whole
   empty upper-right quadrant and hangs its tail directly over his head. It is
   anchored in percentages of the mark, so the balloon and the character stay
   locked together at every size. */
.fin-bubble {
  position: absolute;
  top: auto;
  /* Sized to its own text rather than stretched to a fixed right edge - a
     balloon with a pool of empty space after the words does not read as
     speech. */
  right: auto;
  width: max-content;
  /* Bottom edge parked a clear 20px above Fin's crown. It was previously a
     flat 56%, which put the balloon and its tail down across his head. */
  bottom: calc(100% - var(--fin-crown) + 20px);
  /* Opens to Fin's upper right rather than directly over him - clear of his
     silhouette, with the tail angling back down toward his head. */
  left: 38%;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 1.15rem 1.4rem;
  font-size: clamp(0.95rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.34;
  /* One line. Fin greets you in a single breath, and a balloon that holds it
     on one line reads as speech where two lines read as a paragraph. The size
     is capped to what the space beside him can actually hold; below the
     narrow-screen breakpoint it is allowed to wrap rather than shrink away. */
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transform-origin: 22% 100%;
  animation: fin-bubble-in 620ms cubic-bezier(0.22, 1.4, 0.4, 1) 1.4s both;
}

/* Point it straight down at his head rather than off his shoulder. */
.fin-bubble::after {
  bottom: -10px;
  left: 22px;
  transform: rotate(45deg) skew(5deg, 5deg);
}

/* No trailing beads on this one. They hang 34px below the balloon, which is
   exactly the space Fin's head occupies here - the tail alone says who is
   speaking. The docked balloon on the plans page points sideways into open
   air, so it keeps them. */
.fin-bubble::before { display: none; }

@keyframes fin-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.assistant-hero-screen.nebula-panel,
.fin-figure.nebula-panel { --nebula-radius: 24px; }

/* These two panels clip their contents, so the bloom would be cut off at the
   edge. Pull it inside instead of letting it halo outward. */
.assistant-hero-screen .nebula-ring::after,
.fin-figure .nebula-ring::after { inset: 0; }


.hero-mark {
  width: clamp(260px, 27vw, 420px);
  height: clamp(260px, 27vw, 420px);
  margin: 0 auto;
  /* Fin stands in the mark's lower left and his balloon opens to the upper
     right, so the pair's visual centre sits right of the mark's own centre.
     Nudging the mark left re-centres the group under the headline rather than
     leaving it looking pushed against the screenshot. */
  position: relative;
  left: -10%;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gradient-text {
  background-size: 220% 100%;
  animation: sheen 9s ease-in-out infinite;
}

.badge-dot {
  animation: badge-pulse 2.6s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px var(--green); }
  50% { transform: scale(1.25); box-shadow: 0 0 22px var(--green); }
}

/* The hero screenshot keeps its designed perspective and only gains a small
   pointer-driven parallax on top of it. */
.assistant-hero-screen {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.assistant-hero-screen.is-tracking {
  transform:
    perspective(1400px)
    rotateY(calc(-3deg + var(--tilt-y, 0deg)))
    rotateX(calc(1.5deg + var(--tilt-x, 0deg)));
}

.assistant-capability-rail span {
  transition: color 240ms ease, background-color 240ms ease;
}

.assistant-capability-rail span:hover {
  color: var(--muted-strong);
  background: rgba(139, 92, 246, 0.08);
}

.assistant-capability-rail span:hover strong { color: var(--cyan); }

.product-preview {
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms ease,
    box-shadow 420ms ease;
}

.product-preview:hover,
.product-preview:focus-within {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(57, 215, 238, 0.1);
}

/* The number is the only thing that moves on a principle card, which keeps the
   three of them readable while still responding to the pointer. */
.home-principle {
  position: relative;
  transition: border-color 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-principle:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.principle-number {
  transition: color 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-principle:hover .principle-number {
  color: var(--cyan);
  transform: translateY(-2px) scale(1.06);
}


/* --------------------------------------------------------------------------
   Fin presentation

   The one product story on the home page that gets a full band of its own: the
   Assistant's visual voice sits directly under the hero, ahead of the audio
   promo, and uses the same card language as the hero screenshot so the two
   read as one product surface.
   -------------------------------------------------------------------------- */
.fin-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.fin-copy h2 {
  max-width: 16ch;
  margin: 12px 0 16px;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
}

.fin-points {
  display: grid;
  margin: 22px 0 26px;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.fin-points li {
  position: relative;
  padding-left: 26px;
  color: var(--muted-strong);
}

/* The marker is the brand cyan dot used for live state elsewhere on the site,
   not a bullet glyph that would change shape between platforms. */
.fin-points li::before {
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(57, 215, 238, 0.8);
}

.fin-figure {
  position: relative;
  margin: 0;
  border: 1px solid rgba(185, 161, 255, 0.34);
  border-radius: 24px;
  background: #080b13;
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.58), 0 0 70px rgba(139, 92, 246, 0.14);
  overflow: hidden;
  transform: perspective(1400px) rotateY(3deg) rotateX(1.5deg);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fin-figure.is-tracking {
  transform:
    perspective(1400px)
    rotateY(calc(3deg + var(--tilt-y, 0deg)))
    rotateX(calc(1.5deg + var(--tilt-x, 0deg)));
}

.fin-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.fin-figure figcaption {
  padding: 15px 18px;
  color: var(--muted);
  font-size: 0.86rem;
  border-top: 1px solid var(--border);
  background: rgba(10, 14, 24, 0.95);
}

@media (max-width: 860px) {
  .fin-showcase { grid-template-columns: 1fr; }
  .fin-figure { transform: none; }
  .fin-copy h2 { max-width: none; }
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* The same nebula treatment carries the text links, at a fraction of the
   strength, so the two link styles stay part of one family. */
.text-link {
  position: relative;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--cyan), var(--accent), transparent);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.text-link:hover::after,
.text-link:focus-visible::after { transform: scaleX(1); }

/* One button pair, one width: the two hero actions read as a matched set
   rather than as a primary control with a label-sized companion. */
.actions { justify-content: center; }

.actions .button {
  min-width: 210px;
  justify-content: center;
}

/* Section headings on the home page share one rhythm: eyebrow, title, one
   supporting line, and the optional link parked on the same baseline. */
.section-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.section-heading p { margin-bottom: 0; }

@media (max-width: 860px) {
  .actions .button { min-width: 0; flex: 1 1 auto; }
  .assistant-hero-layout { grid-template-columns: 1fr; }
  .hero-mark { width: clamp(230px, 60vw, 340px); height: clamp(230px, 60vw, 340px); }
  .hero-mark { left: -3%; }
  .fin-bubble {
    left: 26%;
    right: auto;
    width: auto;
    max-width: 84%;
    padding: 0.85rem 1rem;
    font-size: 1.02rem;
    white-space: normal;
    text-wrap: balance;
  }
  .fin-bubble::after { left: 22px; }
  .fin-bubble::before { left: 10px; }
}

/* ==========================================================================
   Purchasing stage (2026.08)

   The plans page is the only page on the site where the visitor is asked to
   decide something, so it borrows the home page's motion vocabulary wholesale
   rather than inventing a second one: the same `.aurora-field` behind the
   hero, the same `.nebula-panel` / `.nebula-ring` frame the home page puts
   around a product screenshot, the same `[data-reveal]` entry choreography and
   the same pointer tilt. What is added here is focus - one plan at a time is
   allowed to be the brightest thing on the page.

   Everything below is decorative. The reduced-motion block at the end of this
   file freezes it, and every plan stays fully readable and operable with the
   motion layer absent.
   ========================================================================== */

.plans-page .plans-hero {
  position: relative;
  overflow: hidden;
}

/* The account card is a live window like the home page screenshots, so it gets
   the same travelling edge. It clips its own contents, so the bloom is pulled
   inside exactly as `.assistant-hero-screen` does. */
.plans-account-card.nebula-panel { --nebula-radius: 24px; }
.plans-account-card .nebula-ring::after { inset: 0; }

/* --------------------------------------------------------------------------
   The plan stage

   Three windows on one lit shelf. The shelf is a single wide brand glow behind
   the grid so the three cards read as one offer with a recommended tier,
   instead of as three unrelated boxes.
   -------------------------------------------------------------------------- */
.plan-selection { position: relative; }

.plan-stage {
  position: relative;
  margin-top: 32px;
}

.plan-stage-glow {
  position: absolute;
  inset: -12% -6% -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 58% at 50% 42%, rgba(139, 92, 246, 0.26), transparent 70%),
    radial-gradient(ellipse 62% 40% at 50% 96%, rgba(57, 215, 238, 0.16), transparent 72%);
  filter: blur(18px);
  animation: plan-stage-breathe 12s ease-in-out infinite;
}

@keyframes plan-stage-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Touch drops the scale for the same reason the aurora plates do: this layer
   carries filter: blur(18px), and a blurred layer that is scaled has to be
   re-rasterised every frame. The breath is mostly the opacity anyway - the 4%
   of scale is not what the eye is reading. */
@media (hover: none) and (pointer: coarse) {
  .plan-stage-glow { animation-name: plan-stage-pulse; }
}

@keyframes plan-stage-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.plan-stage .pricing-grid {
  position: relative;
  z-index: 1;
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .plan-stage .pricing-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Plan windows

   The card keeps its existing geometry, palette and content order. What it
   gains is the home page's frame: a travelling cyan-to-violet edge, a pointer
   tilt, and a lift on hover or keyboard focus.
   -------------------------------------------------------------------------- */
.pricing-card.nebula-panel {
  --nebula-radius: 24px;
  --nebula-width: 1px;
  display: flex;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease,
    box-shadow 480ms ease,
    opacity 320ms ease,
    filter 320ms ease;
}

/* The card clips its contents, so the ring's outer bloom is drawn inside it. */
.pricing-card .nebula-ring::after { inset: 0; opacity: 0.55; }

/* The recommended plan is brighter and wider-ringed, so a first glance lands
   on it. It stays level with its row - with four panels on a 2x2 grid a static
   lift only reads as a misaligned card. Colour is not the only signal: it also
   carries the "Full workspace" flag and the primary action. */
.pricing-card.exclusive.nebula-panel {
  --nebula-width: 2px;
}

.pricing-card.exclusive .nebula-ring::after { opacity: 0.85; }

.pricing-card:hover,
.pricing-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(139, 92, 246, 0.18);
}

/* Focus, literally: while the visitor is considering one plan the other two
   step back. Hover-capable pointers only - on touch there is no hover to leave
   and the dimming would strand a card in a half-lit state. */
@media (hover: hover) and (pointer: fine) {
  .pricing-grid:hover .pricing-card:not(:hover),
  .pricing-grid:focus-within .pricing-card:not(:focus-within) {
    opacity: 0.62;
    filter: saturate(0.7);
  }

  .pricing-grid:hover .pricing-card:hover,
  .pricing-grid:focus-within .pricing-card:focus-within {
    opacity: 1;
    filter: none;
  }
}

/* The price is the number the page exists to communicate, so it carries the
   brand ramp and the same slow sheen as a `.gradient-text` headline. */
.pricing-price strong {
  color: transparent;
  background: linear-gradient(100deg, #fff 6%, var(--accent-light) 48%, var(--cyan));
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 220% 100%;
  animation: sheen 9s ease-in-out infinite;
}

/* A plan's feature dots arrive one after another rather than all at once, so
   the list reads as it lands. */
.pricing-card.is-revealed li {
  animation: plan-feature-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(220ms + var(--feature-index, 0) * 70ms);
}

.pricing-card li:nth-child(1) { --feature-index: 0; }
.pricing-card li:nth-child(2) { --feature-index: 1; }
.pricing-card li:nth-child(3) { --feature-index: 2; }
.pricing-card li:nth-child(4) { --feature-index: 3; }
.pricing-card li:nth-child(5) { --feature-index: 4; }
.pricing-card li:nth-child(6) { --feature-index: 5; }

@keyframes plan-feature-in {
  from { opacity: 0; transform: translate3d(-8px, 0, 0); }
  to { opacity: 1; transform: none; }
}

.pricing-card li::before { transition: box-shadow 320ms ease; }
.pricing-card:hover li::before { box-shadow: 0 0 22px var(--cyan); }

/* The recommended flag pulses gently. It is a decoration on top of a label
   that already says what it means. */
/* Portal tiles pick up the same frame at a smaller radius so the second half
   of the page belongs to the first. */
.portal-service-grid > a,
.portal-service-grid > button,
.portal-service-grid > article {
  position: relative;
  --nebula-radius: 18px;
  --nebula-width: 1px;
}

.portal-service-grid .nebula-ring { opacity: 0.42; transition: opacity 280ms ease; }
.portal-service-grid .nebula-ring::after { inset: 0; opacity: 0.4; }
.portal-service-grid > a:hover .nebula-ring,
.portal-service-grid > button:hover .nebula-ring,
.portal-service-grid > a:focus-visible .nebula-ring,
.portal-service-grid > button:focus-visible .nebula-ring { opacity: 1; }

/* Three plans, three portal doors: the page uses one column rhythm from top to
   bottom rather than switching to a four-up grid halfway down. */
.plans-page .portal-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .plans-page .portal-service-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Landing band

   Short on purpose. The account card and the section heading that used to sit
   between the headline and the plans are gone - the card into Fin's balloon,
   the heading because it restated the headline - so the plan windows are near
   the top of the first screen rather than below it.
   -------------------------------------------------------------------------- */
.plans-page .plans-hero { padding: clamp(26px, 3.6vw, 48px) 0 20px; }

.plans-page .plans-hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  gap: 6px;
  text-align: center;
}

/* Sized to hold on one line at every desktop width. It still wraps on a phone
   rather than shrinking below a readable size - a headline that fits is worth
   more than a headline that is one line. */
.plans-page .plans-hero h1 {
  max-width: none;
  margin: 10px 0 6px;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: nowrap;
}

@media (max-width: 780px) {
  .plans-page .plans-hero h1 { text-wrap: balance; font-size: clamp(2rem, 8vw, 2.8rem); }
}

.plans-page .plans-hero .lead { max-width: 68ch; }
.plans-page .plan-trust-row { justify-content: center; margin-top: 16px; }
.plans-page .plan-selection { padding-top: 12px; }
.plans-page .plan-stage { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Branded plan panels

   The cards used to be numbered 01/02/03 in a big grey numeral, which is the
   one piece of a pricing table that carries no information: the tiers already
   read in order and each already names itself. In its place the panel wears
   the Infin8 mark itself - the same infinity path the home page hero animates -
   once, centred, and barely there. One quiet symbol per panel; not a tile, not
   a pattern.

   It is an inline SVG data URI rather than an image file, so the texture is
   part of the stylesheet, costs no request, and stays crisp at any density. It
   is painted under the panel gradient at well below a tenth of full strength,
   so nothing about text contrast changes.
   -------------------------------------------------------------------------- */
.pricing-card.nebula-panel {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 208'%3E%3Cpath d='M60 102C32 86 25 71 25 58C25 34 40 20 60 20C80 20 95 34 95 58C95 71 88 86 60 102C31 119 22 132 22 150C22 173 39 188 60 188C81 188 98 173 98 150C98 132 89 119 60 102Z' fill='none' stroke='%238b5cf6' stroke-opacity='0.09' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(155deg, rgba(14, 22, 44, 0.82), rgba(7, 10, 22, 0.88)),
    url("infin8-texture.webp"),
    linear-gradient(var(--bg), var(--bg));
  background-repeat: no-repeat;
  background-position: center, 0 0, center, 0 0;
  background-size: 62% auto, cover, cover, cover;
  /* The galaxy is a brand surface, not a picture, so it is blended for
     luminosity only - the page-wide layer screens instead - and sits under a
     scrim heavy enough that no body text lands on a bright region. */
  background-blend-mode: normal, normal, luminosity, normal;
}

/* The recommended panel carries the mark slightly larger. */
.pricing-card.exclusive.nebula-panel { background-size: 66% auto, cover, cover, cover; }

/* The numerals are gone from the markup; this keeps any cached copy of the
   page from painting one over the texture. */
.pricing-index { display: none; }

/* Plan titles carry a violet-led version of the site's own .gradient-text ramp
   with the same slow sheen, so the three names pop off the panel and read as
   one family. Violet leads it because these are the plans - the cyan ramp is
   reserved for the headline and the price. */
.pricing-card h3 {
  color: transparent;
  background: linear-gradient(100deg, var(--accent-light) 4%, #efe6ff 34%, var(--accent) 58%, var(--accent-light) 92%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: sheen 7s ease-in-out infinite;
}

.pricing-tier {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.12);
}

/* The texture must never come between the reader and the words, so everything
   the panel actually says sits on its own layer above it. */
.pricing-card > *:not(.nebula-ring) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Included products

   What is in a plan is the actual decision, so the product list is labelled
   and the inherited tier is lifted out of it. Rolling "Everything in Infin8
   Pro" into the same bulleted column as the products made the one line that
   explains the whole ladder look like another feature.
   -------------------------------------------------------------------------- */
.pricing-includes {
  display: block;
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pricing-card li.is-inherit {
  margin-bottom: 4px;
  padding: 8px 12px 8px 30px;
  border: 1px solid rgba(139, 92, 246, 0.42);
  border-radius: 11px;
  background: rgba(139, 92, 246, 0.13);
  color: var(--muted-strong);
  font-weight: 800;
}

.pricing-card li.is-inherit::before {
  left: 12px;
  top: 50%;
  margin-top: -4px;
  background: var(--accent-light);
  box-shadow: 0 0 14px var(--accent-light);
}

/* A plan whose price has not arrived yet must not look like a plan that costs
   nothing, so the placeholder is visibly a placeholder. */
.pricing-price strong:empty::before { content: "\2014"; }

/* --------------------------------------------------------------------------
   The sign-in pop-out

   Fin's balloon carries the page's real account form. It is the same markup
   the hero card used, so the controls keep their site styling; only the
   spacing changes to sit inside a balloon.
   -------------------------------------------------------------------------- */
.fin-guide-account {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(185, 161, 255, 0.28);
}

.fin-guide-account[hidden] { display: none; }

.fin-guide-account #plans-account-state strong {
  display: block;
  color: #fff;
  font-size: 0.98rem;
}

.fin-guide-account #plans-account-state p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.fin-guide-account form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.fin-guide-account label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.fin-guide-account input {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #080d1d;
  color: var(--text);
  font: inherit;
}

.fin-guide-account input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.fin-guide-account .button { min-height: 44px; font-size: 0.9rem; }

.fin-guide-account .plans-account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.85rem;
}

.fin-guide-account .plans-status {
  min-height: 0;
  margin: 10px 0 0;
  color: var(--cyan);
  font-size: 0.82rem;
  line-height: 1.4;
}

.fin-guide-account .plans-status.error { color: #ff8d9e; }





@media (prefers-reduced-motion: reduce) {
  .infin8-sigil .sigil-stroke,
  .infin8-sigil .sigil-comet,
  .infin8-sigil .sigil-mote,
  .infin8-sigil .sigil-spark,
  .infin8-sigil .sigil-halo,
  .gradient-text,
  .badge-dot {
    animation: none !important;
  }

  .infin8-sigil .sigil-stroke { stroke-dashoffset: 0; }
  .infin8-sigil .sigil-comet,
  .infin8-sigil .sigil-mote,
  .infin8-sigil .sigil-spark { display: none; }
  .text-link::after { transition: none; }
  .infin8-sigil .sigil-halo { opacity: 0.18; }

  .fin-bubble { animation: none; opacity: 1; transform: none; }

  /* Purchasing stage. Every one of these is decoration on top of content that
     is already in its final position, so freezing them removes motion without
     removing a plan, a price, a feature or one of Fin's messages. */
  .plan-stage-glow,
  .pricing-card h3,
  .pricing-price strong,
  .pricing-card.is-revealed li {
    animation: none !important;
  }

  .pricing-card.is-revealed li { opacity: 1; transform: none; }

  .pricing-card.nebula-panel { transform: none; }

  .hero-mark,
  .page-mark,
  .fin-figure.is-tracking,
  .assistant-hero-screen.is-tracking {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Customer account (purchasing.html)

   The product-verification account: sign-in, account creation, subscription,
   licensed downloads and order history. It lives here rather than in the
   Arcade profile because buying software and playing the free games are two
   different relationships that happen to share one Infin8 login.
   --------------------------------------------------------------------------- */

.customer-account .account-state-line {
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(8, 13, 28, 0.68);
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

/* Several account panels use grid or flex layouts. Those author rules outrank
   the browser's default [hidden] styling, so keep staged, signed-out, and
   account-only surfaces fail-closed regardless of their layout class. */
.customer-account [hidden] { display: none !important; }

/* The two entry cards are the forms themselves, so the card gets the form
   grid it previously applied to a nested <form>. */
.customer-account .plans-account-card { display: grid; align-content: start; gap: 12px; }
.customer-account .plans-account-card h3 { margin: 2px 0 0; font-size: 1.35rem; }
.customer-account .account-note { margin: 0; color: var(--muted); line-height: 1.55; }

.account-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-entry .button { margin-top: 4px; }

.account-portal { display: grid; gap: 16px; }

.account-identity {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.account-identity .plans-account-actions { margin-top: 0; justify-content: flex-end; }

.account-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.account-panel-head h3 { margin: 2px 0 0; font-size: 1.35rem; }

.account-chip {
  flex: none;
  padding: 7px 11px;
  border: 1px solid rgba(57, 215, 238, 0.35);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 800;
}

.customer-account .customer-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.customer-account .customer-product {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}
.customer-account .customer-product h4 { margin: 0; font-size: 1.05rem; }
.customer-account .customer-product p { margin: 0; color: var(--muted); line-height: 1.55; }
.customer-account .product-kind {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.customer-account .product-license-state { font-size: 0.88rem; }
.customer-account .product-actions { margin-top: 4px; }

.customer-account .purchase-history:not(:empty) { margin-top: 8px; }
.customer-account .purchase-history h4 { margin: 0 0 4px; font-size: 1.05rem; }
.customer-account .purchase-row {
  padding: 11px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.88rem;
}

.cloud-activation textarea {
  width: 100%;
  resize: vertical;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #080d1d;
  color: var(--text);
  font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.cloud-activation textarea:focus-visible,
.cloud-activation input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.activation-file-label { margin-top: 12px; }
.activation-result,
.activation-devices { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.activation-result .button { margin-top: 12px; }
.activation-devices h4 { margin: 0; font-size: 1.05rem; }
.activation-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.activation-device-row > div { display: grid; gap: 3px; }
.activation-device-row span { color: var(--muted); font-size: 0.82rem; }

.customer-account .portal-service-grid { margin-top: 32px; }

@media (max-width: 900px) {
  .account-entry,
  .customer-account .customer-product-grid { grid-template-columns: 1fr; }
  .account-identity { grid-template-columns: 1fr; align-items: start; }
  .account-identity .plans-account-actions { justify-content: flex-start; margin-top: 8px; }
  .account-panel-head { display: grid; }
  .activation-device-row { align-items: stretch; flex-direction: column; }
}

/* Purchasing-closed notice. Raised by the same server commerce flag that
   refuses a checkout, so the page cannot invite a purchase the API rejects. */
.plans-notice {
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 212, 121, 0.45);
  border-radius: 14px;
  background: rgba(38, 30, 12, 0.55);
  color: var(--text-soft, var(--text));
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
}