/* PileAxis website: hand-written CSS, no framework, no build step.
   The design system is the Ramisoft family's (navy hero, teal accent, white cards), the same file as
   FoundaTrix Studio's site so the two product sites read as one family; the lavender and magenta come
   from the family's marks and mark what is Pro. Changes to the shared rules belong in both sites. */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f7fa;
  --bg-sunk: #eef2f7;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -12px rgba(15, 23, 42, 0.14);
  --card-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 40px -18px rgba(15, 23, 42, 0.24);

  --hero-bg: #0a0f1c;
  --hero-bg-2: #171c45;
  --hero-grid-line: rgba(148, 163, 184, 0.11);
  --hero-ink: #e2e8f0;
  --hero-ink-soft: #a3b0c4;

  --accent: #2dd4bf;
  --accent-strong: #14b8a6;
  --accent-deep: #0f766e;
  --accent-text: #0f766e;
  --accent-ink: #042f2c;

  --lavender: #b8a9f6;
  --violet: #8f7ee6;
  --violet-text: #5b47c9;
  --magenta: #f0388f;
  --magenta-text: #be185d;
  --premium-gradient: linear-gradient(135deg, #8f7ee6 0%, #c35bd0 55%, #f0388f 100%);

  --amber: #f59e0b;
  --amber-bg: #fffbeb;
  --amber-border: #fde68a;
  --amber-ink: #78350f;

  --free: #22c55e;
  --free-text: #15803d;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --container: 1180px;

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --bg-alt: #0e1526;
    --bg-sunk: #0a101d;
    --ink: #f1f5f9;
    --ink-soft: #b6c2d4;
    --ink-faint: #8391a7;
    --border: #1e293b;
    --border-strong: #334155;
    --card-bg: #111a2e;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
    --card-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 44px -18px rgba(0, 0, 0, 0.75);
    --accent-text: #5eead4;
    --violet-text: #c4b8ff;
    --magenta-text: #f472b6;
    --amber-bg: #241a06;
    --amber-border: #7c5a10;
    --amber-ink: #fbbf24;
    --free-text: #4ade80;
  }
}

* {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Announcement bar ---------- */

.announce-bar {
  background: linear-gradient(90deg, #0f766e, #14b8a6 45%, #8f7ee6);
  color: #ffffff;
}

.announce-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 24px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

.announce-bar__tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.announce-bar a {
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 6px 14px -6px rgba(23, 28, 69, 0.55);
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1;
}

.brand__name span {
  font-weight: 450;
  color: var(--ink-soft);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 550;
  transition: color 0.15s ease;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -23px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-strong);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

.nav__toggle {
  display: none;
  cursor: pointer;
  padding: 0;
}

.nav__toggle .icon-close {
  display: none;
}

.nav--open .nav__toggle .icon-open {
  display: none;
}

.nav--open .nav__toggle .icon-close {
  display: block;
}

@media (max-width: 920px) {
  .nav__toggle {
    display: inline-flex;
  }
  .nav__menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 66px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 24px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px -18px rgba(15, 23, 42, 0.35);
  }
  .nav--open .nav__menu {
    display: flex;
  }
  .nav__links {
    flex-direction: column;
    gap: 0;
  }
  .nav__links a {
    display: block;
    padding: 11px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  .nav__links a[aria-current="page"]::after {
    display: none;
  }
  .nav__links a[aria-current="page"] {
    color: var(--accent-text);
  }
  .nav__actions .btn {
    flex: 1;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}

.btn--primary:hover {
  background: #5eead4;
}

.btn--secondary {
  background: rgba(226, 232, 240, 0.04);
  border-color: color-mix(in srgb, var(--hero-ink) 28%, transparent);
  color: var(--hero-ink);
}

.btn--secondary:hover {
  border-color: var(--hero-ink);
  background: rgba(226, 232, 240, 0.08);
}

.btn--ghost {
  background: var(--card-bg);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink-faint);
  background: var(--bg-alt);
}

.btn--premium {
  background: var(--premium-gradient);
  color: #ffffff;
  box-shadow: 0 12px 26px -12px rgba(195, 91, 208, 0.75);
}

.btn--premium:hover {
  filter: brightness(1.08);
}

.btn--sm {
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 9px;
}

.btn--lg {
  padding: 15px 28px;
  font-size: 16px;
}

.btn[aria-disabled="true"] {
  cursor: default;
}

/* ---------- Eyebrow, badges, pills ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 16px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.eyebrow--premium {
  color: var(--violet-text);
}

.eyebrow--premium::before {
  background: var(--magenta);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 22%, transparent);
}

.on-dark .eyebrow {
  color: var(--accent);
}

.on-dark .eyebrow--premium {
  color: #d6ccff;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.badge svg {
  width: 12px;
  height: 12px;
}

.badge--free {
  background: color-mix(in srgb, var(--free) 15%, transparent);
  color: var(--free-text);
}

.badge--account {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
}

.badge--premium {
  background: linear-gradient(135deg, rgba(143, 126, 230, 0.18), rgba(240, 56, 143, 0.16));
  color: var(--violet-text);
  border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent);
}

.on-dark .badge--premium {
  color: #e2dbff;
  border-color: rgba(184, 169, 246, 0.4);
}

.badge--soon {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber-ink);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.chip strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 0;
  background: radial-gradient(ellipse 110% 90% at 78% -12%, var(--hero-bg-2), var(--hero-bg) 62%);
  color: var(--hero-ink);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(30deg, var(--hero-grid-line) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(150deg, var(--hero-grid-line) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(ellipse 75% 70% at 72% 25%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 25%, black 30%, transparent 100%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 620px;
  height: 620px;
  right: -140px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 126, 230, 0.28), transparent 65%);
  filter: blur(10px);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 48px;
  padding: 88px 24px 200px;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  font-weight: 800;
}

.hero h1 .grad {
  background: linear-gradient(100deg, #5eead4 10%, #b8a9f6 60%, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--hero-ink-soft);
  max-width: 56ch;
  margin: 0 0 32px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--hero-ink);
}

.hero__assurances li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__assurances svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  flex-shrink: 0;
}

.hero__art {
  position: relative;
}

.hero__art svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    padding: 56px 24px 150px;
    gap: 36px;
  }
  .hero__art {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Product shot that overlaps the bottom of the hero. */

.hero-shot {
  position: relative;
  z-index: 2;
  margin-top: -150px;
  padding: 0 0 24px;
}

@media (max-width: 960px) {
  .hero-shot {
    margin-top: -110px;
  }
}

/* ---------- Window frame around a screenshot ---------- */

.shot {
  margin: 0;
  /* A grid item's automatic minimum is its min-content width, and the bar's title never wraps, so a long
     title would widen the whole column past a phone's screen. The title ellipsizes instead. */
  min-width: 0;
}

.shot__frame {
  border-radius: 12px;
  overflow: hidden;
  background: #1e1f22;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 30px 60px -24px rgba(15, 23, 42, 0.45);
}

.shot--hero .shot__frame {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 50px 90px -30px rgba(10, 15, 28, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 0 0 12px;
  background: #232629;
  border-bottom: 1px solid #31353b;
  color: #a6adb6;
  font-size: 12.5px;
  font-weight: 500;
}

.shot__bar img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.shot__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot__controls {
  display: flex;
  height: 100%;
}

.shot__controls span {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shot__controls span::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1.4px solid #8b929b;
  border-radius: 1px;
}

.shot__controls .min::before {
  height: 0;
  border-width: 1.4px 0 0;
}

.shot__controls .close::before {
  width: 12px;
  height: 1.4px;
  border: 0;
  background: #8b929b;
  transform: rotate(45deg);
  box-shadow: none;
}

.shot__controls .close {
  position: relative;
}

.shot__controls .close::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1.4px;
  background: #8b929b;
  transform: rotate(-45deg);
}

.shot__body img {
  width: 100%;
}

.shot figcaption {
  padding: 14px 4px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.shot figcaption strong {
  color: var(--ink);
}

/* ---------- Sections ---------- */

section {
  padding: 96px 0;
}

.section--tight {
  padding: 64px 0;
}

.section-head {
  max-width: 700px;
  margin: 0 0 52px;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 4px 0 16px;
}

.section-head p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 8px;
}

.section-head p:not(.eyebrow):last-child {
  margin-bottom: 0;
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.alt-band {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- "No account" pillars ---------- */

.pillars {
  padding: 40px 0 88px;
}

.pillars__panel {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--free) 9%, var(--card-bg)), var(--card-bg) 60%);
  border: 1px solid color-mix(in srgb, var(--free) 28%, var(--border));
  box-shadow: var(--card-shadow);
}

.pillars__lead h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 12px 0 12px;
}

.pillars__lead p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pillar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pillar__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--free) 15%, transparent);
  color: var(--free-text);
}

.pillar__icon svg {
  width: 21px;
  height: 21px;
}

.pillar h3 {
  margin: 0 0 3px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.pillar p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .pillars__panel {
    grid-template-columns: 1fr;
    padding: 30px 24px;
    gap: 28px;
  }
}

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

/* ---------- Foundation types ---------- */

.types-section {
  padding: 0 0 88px;
}

.types {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1040px) {
  .types {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .types {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .type-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .type-card:last-child:nth-child(odd) .type-card__art img {
    max-width: 260px;
    margin: 0 auto;
  }
}

.type-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 12px 18px;
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.type-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.type-card__art {
  border-radius: 10px;
  margin: 0 0 14px;
  background: radial-gradient(ellipse 80% 70% at 50% 60%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 75%),
    color-mix(in srgb, var(--violet) 4%, var(--bg-alt));
}

.type-card__art img {
  width: 100%;
}

.type-card h3 {
  margin: 0 4px 5px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.type-card p {
  margin: 0 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.types-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 820px;
  margin: 32px auto 0;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  font-size: 14.5px;
  color: var(--ink-soft);
}

.types-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent-text);
}

.types-note strong {
  color: var(--ink);
}

/* ---------- Standards strip ---------- */

.standards {
  padding: 0 0 96px;
}

.standards__label {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
}

.standards__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Feature rows (text beside a screenshot) ---------- */

.feature-rows {
  display: flex;
  flex-direction: column;
  gap: 104px;
}

.feature-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.feature-row--flip .feature-row__text {
  order: 2;
}

.feature-row__text h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.feature-row__text > p:not(.eyebrow):not(.feature-row__kicker) {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 16.5px;
}

.feature-row__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.feature-row__kicker svg {
  width: 18px;
  height: 18px;
}

.clauses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.clauses li {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .feature-rows {
    gap: 72px;
  }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feature-row--flip .feature-row__text {
    order: 0;
  }
}

/* ---------- Check lists ---------- */

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}

.check-list--sm li {
  font-size: 14px;
}

.check-list--premium li::before {
  background: color-mix(in srgb, var(--violet) 22%, transparent);
}

.check-list--premium li::after {
  border-color: var(--violet-text);
}

.on-dark .check-list li {
  color: var(--hero-ink);
}

.on-dark .check-list--premium li::after {
  border-color: #d6ccff;
}

.check-list .muted {
  color: var(--ink-faint);
}

/* ---------- Feature cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1000px) {
  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .card-grid,
  .card-grid--4,
  .card-grid--2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.card__icon svg {
  width: 23px;
  height: 23px;
}

.card h3 {
  font-size: 17.5px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.card p:not(.card__kicker) {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}

.card__badge {
  position: absolute;
  top: 26px;
  right: 26px;
}

.card {
  position: relative;
}

.card__kicker {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 10px;
}

/* ---------- Premium band ---------- */

.premium-band {
  position: relative;
  background: radial-gradient(ellipse 90% 70% at 15% 0%, #241c57, transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, #3a1340, transparent 60%), var(--hero-bg);
  color: var(--hero-ink);
  overflow: hidden;
  isolation: isolate;
}

.premium-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(30deg, rgba(184, 169, 246, 0.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(150deg, rgba(184, 169, 246, 0.07) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 100%);
}

.premium-band .section-head p:not(.eyebrow) {
  color: var(--hero-ink-soft);
}

.premium-band .section-head h2 .grad {
  background: linear-gradient(100deg, #c4b8ff, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promo-note {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(184, 169, 246, 0.28);
  font-size: 14.5px;
  color: var(--hero-ink);
}

.promo-note strong {
  color: #ffffff;
}

.premium-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 72px;
}

.premium-showcase h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.premium-showcase p:not(.eyebrow) {
  color: var(--hero-ink-soft);
  font-size: 16.5px;
  margin: 0 0 22px;
}

/* The second showcase reads text first, picture second. */
.premium-showcase--flip {
  grid-template-columns: 0.85fr 1.15fr;
}

@media (max-width: 960px) {
  .premium-showcase,
  .premium-showcase--flip {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ---------- The deformed shape (features page) ---------- */

.deformed {
  margin-top: 96px;
}

.deformed .section-head {
  max-width: 820px;
  margin-bottom: 36px;
}

.deformed h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 4px 0 14px;
}

.shot-pair {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  align-items: start;
}

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

/* ---------- AI assistant connector ---------- */

.assistant {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.assistant__text h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 4px 0 16px;
}

.assistant__text > p:not(.eyebrow):not(.assistant__note) {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 22px;
}

.assistant__art {
  margin: 0;
}

.assistant__art img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12), 0 40px 80px -36px rgba(15, 23, 42, 0.55);
}

.assistant__note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.assistant-band {
  background: radial-gradient(ellipse 80% 70% at 10% 0%, #10314a, transparent 60%), var(--hero-bg);
  color: var(--hero-ink);
}

.assistant-band .assistant__text > p:not(.eyebrow):not(.assistant__note) {
  color: var(--hero-ink-soft);
}

.assistant-band .assistant__note {
  color: #8b97ab;
}

.assistant-band .assistant__art img {
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.22), 0 40px 80px -36px rgba(0, 0, 0, 0.8);
}

@media (max-width: 960px) {
  .assistant {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.families {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0 0 72px;
  padding: 0;
  list-style: none;
}

@media (max-width: 1000px) {
  .families {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .families {
    grid-template-columns: repeat(2, 1fr);
  }
}

.family {
  padding: 18px 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 169, 246, 0.2);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.family:hover {
  border-color: rgba(184, 169, 246, 0.5);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}

.family svg {
  width: 100%;
  height: 92px;
  margin-bottom: 14px;
}

.family h4 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: -0.005em;
}

.family p {
  margin: 0;
  font-size: 12.5px;
  color: var(--hero-ink-soft);
  line-height: 1.45;
}

.premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 960px) {
  .premium-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

.premium-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(184, 169, 246, 0.22);
  overflow: hidden;
}

.premium-card__shot {
  padding: 18px 18px 0;
}

.premium-card__shot img {
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 0;
}

.premium-card__body {
  padding: 22px 24px 26px;
  border-top: 1px solid rgba(184, 169, 246, 0.18);
}

.premium-card h3 {
  margin: 10px 0 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.premium-card p {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--hero-ink-soft);
}

.premium-card .check-list li {
  font-size: 13.5px;
}

.premium-card .refs-inline {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(184, 169, 246, 0.16);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #a99ee8;
}

.premium-card__body > .badge:first-child + h3 {
  margin-top: 12px;
}

.mt-xl {
  margin-top: 96px;
}

@media (max-width: 900px) {
  .mt-xl {
    margin-top: 72px;
  }
}

.callout--spaced {
  margin-top: 28px;
}

.premium-extras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 22px;
}

@media (max-width: 760px) {
  .premium-extras {
    grid-template-columns: 1fr;
  }
}

.premium-extra {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 169, 246, 0.2);
}

.premium-extra__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(143, 126, 230, 0.3), rgba(240, 56, 143, 0.25));
  color: #f3efff;
}

.premium-extra__icon svg {
  width: 21px;
  height: 21px;
}

.premium-extra h3 {
  margin: 0 0 5px;
  font-size: 16.5px;
  color: #ffffff;
}

.premium-extra p {
  margin: 0;
  font-size: 14px;
  color: var(--hero-ink-soft);
}

/* ---------- Plans ---------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .tier-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px 28px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.tier--free {
  border-color: color-mix(in srgb, var(--free) 45%, var(--border));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 22px 44px -22px color-mix(in srgb, var(--free) 55%, transparent);
}

.tier--premium {
  border: 1px solid transparent;
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--premium-gradient) border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 48px -22px rgba(195, 91, 208, 0.5);
}

.tier__ribbon {
  position: absolute;
  top: -12px;
  left: 28px;
}

.tier h3 {
  margin: 6px 0 4px;
  font-size: 22px;
  letter-spacing: -0.015em;
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 6px;
}

.tier__price strong {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.tier__price span {
  font-size: 14px;
  color: var(--ink-soft);
}

.tier__blurb {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14.5px;
  min-height: 4.6em;
}

.tier .check-list {
  margin-bottom: 26px;
}

.tier .btn {
  margin-top: auto;
}

.tier__foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- Comparison table ---------- */

.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.compare {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.compare th,
.compare td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.compare thead th {
  position: sticky;
  top: 0;
  background: var(--bg-alt);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.compare thead th:not(:first-child),
.compare td:not(:first-child) {
  text-align: center;
  width: 17%;
}

.compare tbody th {
  font-weight: 500;
  color: var(--ink);
}

.compare tbody th small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-weight: 400;
  margin-top: 2px;
}

.compare .group th {
  background: var(--bg-sunk);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 11px;
  padding-bottom: 11px;
}

.compare tr:last-child td,
.compare tr:last-child th {
  border-bottom: 0;
}

@media (max-width: 680px) {
  .compare {
    min-width: 0;
    font-size: 13.5px;
  }
  .compare th,
  .compare td {
    padding: 11px 8px;
  }
  .compare thead th:not(:first-child),
  .compare td:not(:first-child) {
    width: 19%;
  }
  .compare thead th {
    font-size: 12px;
  }
  .compare thead small {
    display: none;
  }
  .compare tbody th {
    padding-left: 14px;
  }
  .compare td .badge {
    padding: 3px 6px;
    font-size: 10px;
  }
}

.yes,
.no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.yes {
  background: color-mix(in srgb, var(--free) 16%, transparent);
  color: var(--free-text);
}

.yes--premium {
  background: color-mix(in srgb, var(--violet) 20%, transparent);
  color: var(--violet-text);
}

.no {
  color: var(--ink-faint);
}

.yes svg,
.no svg {
  width: 14px;
  height: 14px;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 650;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq details > div {
  padding: 0 22px 20px;
  color: var(--ink-soft);
  font-size: 15px;
}

.faq details > div p {
  margin: 0 0 10px;
}

.faq details > div p:last-child {
  margin: 0;
}

.faq a {
  color: var(--accent-text);
  font-weight: 600;
}

/* ---------- Spec cards (features page) ---------- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

.spec-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.spec-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.spec-card h3 {
  margin: 0 0 14px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.spec-card .check-list li {
  font-size: 14px;
  color: var(--ink-soft);
}

.spec-card--premium {
  border-color: color-mix(in srgb, var(--violet) 40%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 6%, var(--card-bg)), var(--card-bg) 45%);
}

.spec-card--wide {
  grid-column: 1 / -1;
}

.subnav {
  position: sticky;
  top: 66px;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.subnav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav ul::-webkit-scrollbar {
  display: none;
}

@media (min-width: 900px) {
  .subnav ul {
    flex-wrap: wrap;
    gap: 4px;
    overflow: visible;
  }
}

.subnav a {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.subnav a:hover {
  color: var(--ink);
  border-color: var(--border);
  background: var(--bg-alt);
}

.refs {
  margin: 40px 0 0;
  padding: 26px 0 0 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.75;
}

/* ---------- Page header (inner pages) ---------- */

.page-hero {
  position: relative;
  background: radial-gradient(ellipse 110% 120% at 80% -30%, var(--hero-bg-2), var(--hero-bg) 65%);
  color: var(--hero-ink);
  padding: 76px 0 72px;
  overflow: hidden;
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(30deg, var(--hero-grid-line) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(150deg, var(--hero-grid-line) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(ellipse 60% 90% at 85% 10%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 10%, black 20%, transparent 100%);
}

.page-hero h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 20ch;
}

.page-hero p:not(.eyebrow) {
  margin: 0;
  max-width: 62ch;
  font-size: 18px;
  color: var(--hero-ink-soft);
}

.page-hero .cta-row {
  margin: 28px 0 0;
}

/* ---------- Download ---------- */

.download-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse 80% 120% at 100% 0%, #241c57, transparent 60%), var(--hero-bg);
  color: var(--hero-ink);
  overflow: hidden;
  isolation: isolate;
}

.download-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(30deg, var(--hero-grid-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(150deg, var(--hero-grid-line) 0 1px, transparent 1px 40px);
  mask-image: linear-gradient(90deg, transparent, black);
  -webkit-mask-image: linear-gradient(90deg, transparent, black);
}

.download-panel h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 4px 0 14px;
}

.download-panel p:not(.eyebrow):not(.download-panel__meta) {
  margin: 0 0 24px;
  color: var(--hero-ink-soft);
  font-size: 16.5px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 16px;
  border-radius: 12px;
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.store-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.store-btn svg {
  width: 30px;
  height: 30px;
}

.store-btn small {
  display: block;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.2;
}

.store-btn strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 650;
}

.download-panel__meta {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--hero-ink-soft);
}

.req-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.req-list li {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.req-list .req-label {
  display: block;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hero-ink-soft);
  margin-bottom: 5px;
}

.req-list .req-value {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: #ffffff;
}

.req-list .req-detail {
  display: block;
  font-size: 12.5px;
  color: var(--hero-ink-soft);
  margin-top: 2px;
}

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

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

/* ---------- Support ---------- */

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.support-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--card-shadow);
}

.support-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.support-card p {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.support-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 66px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  font-size: 15px;
  color: var(--ink-soft);
}

.steps li strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 2px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  font-size: 14px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
}

/* ---------- Callouts ---------- */

.callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  color: var(--amber-ink);
}

.callout__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.callout h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

.callout a {
  font-weight: 650;
}

.callout--info {
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--ink);
}

.callout--info .callout__icon {
  color: var(--accent-text);
}

.callout--info p {
  color: var(--ink-soft);
}

/* ---------- Closing CTA ---------- */

.closing {
  text-align: center;
}

.closing h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 auto 14px;
  max-width: 22ch;
}

.closing p {
  margin: 0 auto 28px;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 17px;
}

.closing .cta-row {
  justify-content: center;
  margin: 0;
}

/* ---------- Legal pages ---------- */

.legal-page {
  padding: 72px 0 96px;
  background: var(--bg-alt);
}

.legal-layout {
  max-width: 900px;
}

.legal-header {
  margin-bottom: 32px;
}

.legal-header h1 {
  margin: 8px 0 12px;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.legal-effective {
  margin: 0 0 20px;
  color: var(--ink-soft);
}

.legal-header .lead {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
}

.legal-header .lead a {
  color: var(--accent-text);
}

.legal-document {
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.legal-document section {
  padding: 0;
}

.legal-document section + section {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.legal-document h2 {
  margin: 0 0 14px;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.legal-document p,
.legal-document ul {
  margin: 0;
  color: var(--ink-soft);
}

.legal-document p + p {
  margin-top: 14px;
}

.legal-document ul {
  padding-left: 24px;
}

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

.legal-document strong {
  color: var(--ink);
}

.legal-document a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

.legal-document address {
  color: var(--ink-soft);
  font-style: normal;
}

.legal-document address + p {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .legal-page {
    padding: 48px 0 64px;
  }
}

/* ---------- 404 ---------- */

.not-found {
  min-height: 62vh;
  display: flex;
  align-items: center;
}

.not-found__code {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 140px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(100deg, #14b8a6, #8f7ee6 55%, #f0388f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 12px;
}

.not-found h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.025em;
}

.not-found .lead-muted {
  margin: 0 0 28px;
  max-width: 54ch;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 64px 0 32px;
  font-size: 14px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 44px;
}

@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

.footer__brand p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  max-width: 36ch;
}

.footer__brand .sibling {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-faint);
}

.footer__brand .sibling a {
  color: var(--ink-soft);
  font-weight: 600;
}

.footer__col h2 {
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col a {
  color: var(--ink-soft);
  text-decoration: none;
}

.footer__col a:hover {
  color: var(--ink);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 13px;
}

.footer__social {
  display: flex;
  gap: 8px;
}

/* ---------- Scroll to top ---------- */

.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, visibility 0.2s;
}

.scroll-top:hover {
  background: #5eead4;
}

.scroll-top svg {
  width: 20px;
  height: 20px;
}

.scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .scroll-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
  section {
    padding: 72px 0;
  }
}

/* ---------- Reveal on scroll (site.js marks only what starts below the window) ---------- */

.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--pending {
  opacity: 0;
  transform: translateY(18px);
}

@media print {
  .nav,
  .announce-bar,
  .scroll-top,
  .subnav {
    display: none;
  }
  .reveal--pending {
    opacity: 1;
    transform: none;
  }
}

/* ---------- PileAxis additions (the rules above are FoundaTrix Studio's site's, unchanged) ---------- */

/* Three pile systems instead of five foundation types. */
.types--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 620px) {
  .types--3 {
    grid-template-columns: 1fr;
  }
  .types--3 .type-card:last-child:nth-child(odd) .type-card__art img {
    max-width: none;
  }
}

.type-card .badge {
  margin: 0 4px 8px;
}

/* The Microsoft Store button while the listing is not live: the same shape, not a link. */
.store-btn--soon {
  cursor: default;
  opacity: 0.86;
  border-style: dashed;
}

.store-btn--soon:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.download-panel__alt {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.download-panel__alt span {
  font-size: 14px;
  color: var(--hero-ink-soft);
}