/*
 * Axiom — studio.css
 * =================================================================
 * The product-grade visual layer. Loaded AFTER app.css and luxe.css,
 * so it upgrades the existing brand rather than replacing it: same
 * obsidian ground, same champagne accent, same copy and IA.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * luxe.css was written under the belief that CSP `default-src 'self'`
 * forbade fonts and images ("No external fonts, no images, no
 * network"). That reads `'self'` too strictly: the policy is
 * `font-src 'self'` and `img-src 'self' data:`, which permit
 * SAME-ORIGIN assets. The site therefore shipped with no typeface at
 * all, falling back to system Georgia/Times, and with zero imagery.
 * That single misreading is the main reason the page looked generic.
 *
 * WHAT CHANGES
 * ------------
 *  1. A real, self-hosted typeface (Geist Variable, OFL-1.1).
 *     Display type moves from a system serif stack to a precise
 *     grotesque — the register technical buyers read as "product
 *     company" rather than "brochure".
 *  2. A real elevation system. Flat hairline boxes on flat black gave
 *     the eye nothing to land on; surfaces now have depth, a top
 *     highlight, and motivated hover response.
 *  3. Layout primitives that break the one-family monotony: asymmetric
 *     section heads, full-bleed feature rows, a featured plan that
 *     escapes its grid.
 *
 * Every value here is a token so the whole page moves together.
 */

/* ------------------------------------------------------------ fonts */
/* Self-hosted, same-origin. Variable files: one request covers every
   weight, which is why the whole scale below can use real weights
   instead of faking hierarchy with size alone. */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-var.woff2') format('woff2-variations'),
       url('../fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-var.woff2') format('woff2-variations'),
       url('../fonts/geist-mono-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ tokens */

body.luxe {
  /* Surfaces. Three real levels, each a step of light, not a border.
     A dark UI reads as designed when elevation is luminance, not lines. */
  --s-0: #06070A;
  --s-1: #0B0D12;
  --s-2: #10131A;
  --s-3: #161A23;

  /* One accent, locked for the whole page (no second colour anywhere). */
  --accent: #C9A961;
  --accent-lift: #E6D3A3;
  --accent-deep: #8A6F35;

  --ink: #F4F6F9;
  --ink-2: #AFB9C6;
  --ink-3: #737E8C;

  --line: rgba(244, 246, 249, 0.08);
  --line-lift: rgba(244, 246, 249, 0.14);

  /* One radius system: cards 16, controls 10, pills full. */
  --r-card: 16px;
  --r-ctl: 10px;

  /* Real fonts now, with the old stacks kept as the fallback chain. */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--font-sans);
  /* Never let the browser fake a weight or a slant we did not ship. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------- typography */
/* The display face is a grotesque now, so it needs the opposite
   treatment to a serif: heavier weight, much tighter tracking, and
   optical sizes that get tighter as they get bigger. */

body.luxe h1,
body.luxe h2,
body.luxe h3,
body.luxe .luxe-display {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.035em;
  color: var(--ink);
}

body.luxe .luxe-display {
  font-size: clamp(3.1rem, 7.6vw, 6.6rem);
  line-height: 0.96;
  font-weight: 600;
  letter-spacing: -0.045em;
}

/* Emphasis uses the SAME family — weight and colour, never a second
   typeface and never a synthetic slant (the variable file has no
   italic axis, so `font-style: italic` would be faked and look wrong). */
body.luxe .luxe-display em,
body.luxe h2 em {
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(96deg, var(--accent-lift) 8%, var(--accent) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.luxe h2 {
  font-size: clamp(2rem, 3.5vw, 3.05rem);
  line-height: 1.04;
}

body.luxe h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  font-weight: 560;
  letter-spacing: -0.02em;
}

body.luxe .luxe-lead,
body.luxe .lead {
  font-size: clamp(1.03rem, 1.25vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
  font-weight: 400;
}

body.luxe p { color: var(--ink-2); }

/* Numerals: tabular everywhere a price or spec appears, so columns
   line up instead of shimmying. */
body.luxe .luxe-price,
body.luxe .luxe-founding-price,
body.luxe .founding-price,
body.luxe .hw-price,
body.luxe .luxe-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  letter-spacing: -0.04em;
  font-weight: 600;
}

/* Eyebrows survive, but as a quiet mono label — and the markup pass
   removed most of them, so the few left carry real weight. */
body.luxe .luxe-eyebrow,
body.luxe .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------- surfaces */
/* Elevation as light. Each card gets a 1px top highlight (the edge
   catching light from above) plus a tinted shadow — never a pure-black
   shadow, which reads as a hole rather than a lift. */

body.luxe .card,
body.luxe .luxe-cell,
body.luxe .hw-card,
body.luxe .custom-pillar,
body.luxe .price-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%),
    var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 34px -18px rgba(0, 0, 0, 0.9);
  transition:
    transform 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

/* Motivated hover: the card rises toward the pointer to signal it is a
   real target. One step, no bounce. */
@media (hover: hover) {
  body.luxe .card:hover,
  body.luxe .luxe-cell:hover,
  body.luxe .hw-card:hover,
  body.luxe .price-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-lift);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 2px 4px rgba(0, 0, 0, 0.4),
      0 26px 60px -22px rgba(0, 0, 0, 0.95);
  }
}

/* The one card that must not look like the others. */
body.luxe .price-card.is-featured,
body.luxe .luxe-cell.is-featured {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 169, 97, 0.13), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 46%),
    var(--s-3);
  border-color: rgba(201, 169, 97, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(230, 211, 163, 0.22),
    0 30px 70px -26px rgba(0, 0, 0, 0.95);
}

/* ---------------------------------------------------------- rhythm */
/* Section spacing was uniform, which is why eight sections read as one
   long scroll. Alternating the ground colour every other section gives
   the page a pulse without ever leaving the dark theme (Theme Lock). */

body.luxe .luxe-section {
  padding-block: clamp(5rem, 10vw, 8.5rem);
  position: relative;
}

body.luxe .luxe-section.is-raised,
body.luxe .section-tight.is-raised,
body.luxe .section.is-raised {
  background: linear-gradient(180deg, transparent, var(--s-1) 12%, var(--s-1) 88%, transparent);
}

body.luxe .luxe-section.is-raised::before,
body.luxe .luxe-section.is-raised::after,
body.luxe .section-tight.is-raised::before,
body.luxe .section-tight.is-raised::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-lift) 22%, var(--line-lift) 78%, transparent);
}
body.luxe .luxe-section.is-raised::before,
body.luxe .section-tight.is-raised::before { top: 0; }
body.luxe .luxe-section.is-raised::after,
body.luxe .section-tight.is-raised::after { bottom: 0; }

body.luxe .section-tight.is-raised,
body.luxe .section.is-raised { position: relative; }

/* -------------------------------------------------- section headers */
/* Primitive 1: the asymmetric head. Headline left at a real size, a
   short standfirst held to a readable measure beneath it. Replaces the
   centred eyebrow/headline/sub stack that repeated on every section. */

body.luxe .head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 5vw, 3.8rem);
}

body.luxe .head-split > p {
  margin: 0;
  padding-bottom: 0.35rem;
}

@media (max-width: 860px) {
  body.luxe .head-split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
  }
}

/* ------------------------------------------------------ feature row */
/* Primitive 2: a full-bleed alternating row for the two or three
   claims that deserve room. Used at most twice per page so it never
   becomes the new monotony. */

body.luxe .feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

body.luxe .feature-row + .feature-row { margin-top: clamp(3.5rem, 7vw, 6rem); }
body.luxe .feature-row.is-flipped > *:first-child { order: 2; }

@media (max-width: 860px) {
  body.luxe .feature-row { grid-template-columns: 1fr; gap: 1.75rem; }
  body.luxe .feature-row.is-flipped > *:first-child { order: 0; }
}

/* The visual half of a feature row: a real framed surface, not a
   div pretending to be a screenshot. */
body.luxe .feature-visual {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--s-1);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 1);
}

body.luxe .feature-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------- statistics */
/* Primitive 3: bare numbers on the ground, no card. Density without
   boxes — the thing that stops a page looking like a form. */

body.luxe .stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body.luxe .stat-band dt {
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body.luxe .stat-band dd {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 30ch;
}

/* ----------------------------------------------------------- controls */

body.luxe .btn {
  font-family: var(--font-sans);
  font-weight: 520;
  letter-spacing: -0.008em;
  border-radius: var(--r-ctl);
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

body.luxe .btn-primary {
  background: linear-gradient(180deg, var(--accent-lift), var(--accent));
  border: 1px solid var(--accent-deep);
  /* Dark ink on a light champagne fill: 4.5:1+, and it reads as a
     physical key rather than a coloured rectangle. */
  color: #17130A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 26px -12px rgba(201, 169, 97, 0.55);
}

@media (hover: hover) {
  body.luxe .btn-primary:hover {
    background: linear-gradient(180deg, #F0E1BB, var(--accent-lift));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 14px 34px -12px rgba(201, 169, 97, 0.7);
  }
  body.luxe .btn-ghost:hover {
    border-color: var(--line-lift);
    background: rgba(255, 255, 255, 0.04);
  }
}

/* Tactile press — confirms the click physically. */
body.luxe .btn:active { transform: translateY(1px); }

body.luxe .btn-ghost {
  background: transparent;
  border: 1px solid var(--line-lift);
  color: var(--ink);
}

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

body.luxe .luxe-hero {
  /* Cap the top padding so the hero never floats halfway down. */
  padding-top: clamp(4.5rem, 9vw, 6.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* A single warm light source behind the product, tinted with the
   accent rather than the stock blue/violet AI glow. */
body.luxe .luxe-hero::after {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 68% 26%, rgba(201, 169, 97, 0.16), transparent 66%),
    radial-gradient(60% 46% at 32% 6%, rgba(88, 128, 220, 0.10), transparent 68%);
}

body.luxe .luxe-hero-inner { align-items: center; }

/* --------------------------------------------------------- FAQ rows */
/* Was: a hairline under every row, the laziest possible list. Now the
   rows are real targets with a hover ground and generous hit area. */

body.luxe .faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--s-1);
  margin-bottom: 0.6rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

body.luxe .faq details[open] {
  background: var(--s-2);
  border-color: var(--line-lift);
}

body.luxe .faq summary {
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
}

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

@media (hover: hover) {
  body.luxe .faq details:hover { border-color: var(--line-lift); }
}

/* ----------------------------------------------------- pricing density */
/* The pricing page was four columns of eight bullets in small grey text,
   four times over. The information is right; the setting was not. This
   does not cut a single line - it gives each one room, and lets the tick
   carry the scanning so the eye can skip rather than read. */

body.luxe .feature-list {
  display: grid;
  gap: 0.62rem;
  margin: 1.1rem 0 0;
}

/* The tick is positioned, NOT a grid column. These list items hold a
   variable number of children (tick, text, <strong>, hydrated
   <span data-money>), so a two-column grid pushes every child past the
   second into the 1rem tick column and breaks the text one word per
   line. Absolute positioning does not care how many children there are. */
body.luxe .feature-list li {
  font-size: 0.895rem;
  line-height: 1.5;
  color: var(--ink-2);
  position: relative;
  padding-left: 1.55rem;
}

body.luxe .feature-list li .tick {
  position: absolute;
  left: 0;
  top: 0.12em;
  color: var(--accent);
  font-size: 0.72rem;
}

/* The line that actually differentiates a tier should not look like the
   seven around it. */
body.luxe .feature-list li strong { color: var(--ink); font-weight: 560; }

body.luxe .price-card,
body.luxe .card {
  padding: clamp(1.35rem, 2vw, 1.75rem);
}

/* Plan name and price want air between them and the list beneath. */
body.luxe .plan-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--ink);
}

body.luxe .price-card .muted {
  font-size: 0.865rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------------------------------------------------------- imagery */

body.luxe img { max-width: 100%; height: auto; }

body.luxe .media-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--s-1);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 1);
}

/* ------------------------------------------------------ accessibility */

body.luxe a:focus-visible,
body.luxe button:focus-visible,
body.luxe summary:focus-visible,
body.luxe .btn:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
  border-radius: var(--r-ctl);
}

/* Every transition above is decorative; none of it carries meaning that
   a still page would lose. So under reduced motion it all collapses. */
@media (prefers-reduced-motion: reduce) {
  body.luxe *,
  body.luxe *::before,
  body.luxe *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.luxe .card:hover,
  body.luxe .luxe-cell:hover,
  body.luxe .price-card:hover { transform: none; }
}