/*
 * HybridCheats — "HC One" design language
 * ══════════════════════════════════════════════════════════════════════
 *
 * The layout DNA of a modern subscription-product page carried on this
 * site's own dark neon brand:
 *
 *   · one idea per section, with real whitespace between them
 *   · big soft-rounded cards in even rows — no angular clip-path cuts
 *   · a calm type scale: large light headings, quiet supporting copy
 *   · pill buttons, a minimal header, a plan-card + comparison table
 *
 * ── Why a hand-written stylesheet ────────────────────────────────────
 * public/css/tailwind.min.css is a frozen, purged artifact with no build
 * pipeline. It has no rounded-2xl/3xl, no shadow-*, no neutral palette and
 * no md:grid-cols-*, so the design above simply cannot be spelled in the
 * utilities that survived the purge. Rather than regenerate that file and
 * put every existing page at risk, this adds a layer on top — the same call
 * layouts/showcase.blade.php already made with its `sx-` system.
 *
 * ── Cascade position (load-bearing) ──────────────────────────────────
 * Linked in layouts/app.blade.php AFTER tailwind.min.css and AFTER the
 * layout's inline <style>, so the bridge layer at the bottom of this file
 * can restyle legacy utilities without !important. Do not move the link.
 *
 * ── The animation contract ───────────────────────────────────────────
 * public/js/motion.js finds what to animate by querying STRUCTURE and
 * CLASS NAMES, not data attributes. Markup using this system must keep:
 *
 *   .o-shell        section content wrapper — motion.js was taught to
 *                   recognise it alongside .max-w-* (block reveal, stagger
 *                   and the hero scrub all hang off finding this element)
 *   grid            the literal token, alongside .o-grid, so a card row
 *                   still counts as a stagger group
 *   grid-cols-12    alongside .o-split, for the two-column left/right reveal
 *   absolute / rise on decoration layers, so they are skipped
 *   num font-display on stat numerals, for count-up
 *   glow-pink/cyan/purple on the parallax blobs
 *   marquee · divider-line · text-gradient · btn-neon · nav-link
 *
 * Everything here is written so those hooks keep working. See §12.
 */

/* ═══ 1 · TOKENS ═══════════════════════════════════════════════════ */
:root {
  /* Surfaces — a shallower stack than the old ink-800…950 ramp, because
     this design separates blocks with whitespace and radius, not contrast. */
  --o-bg:         #06060a;
  --o-surface:    #0e0e17;
  --o-raised:     #14141f;
  --o-sunken:     #0a0a12;
  --o-hairline:   rgba(255, 255, 255, 0.08);
  --o-hairline-2: rgba(255, 255, 255, 0.14);

  /* Brand — unchanged. The neon is the identity; only its shapes moved. */
  --o-pink:   #ff1d6c;
  --o-cyan:   #22e7f0;
  --o-violet: #a855f7;

  --o-text:  #f2f2f7;
  --o-dim:   rgba(242, 242, 247, 0.64);
  --o-faint: rgba(242, 242, 247, 0.40);
  --o-ghost: rgba(242, 242, 247, 0.24);

  /* Radius — the single biggest visual shift in this revamp. Every
     clip-corner cut in the old markup resolves to one of these. */
  --o-r-xs: 12px;
  --o-r-sm: 16px;
  --o-r:    24px;
  --o-r-lg: 28px;
  --o-r-xl: 36px;
  --o-pill: 999px;

  /* Rhythm — the whitespace is the design. Sections breathe; the content
     rail is narrower and more centred than the old max-w-7xl. */
  --o-sect: clamp(4.5rem, 9vw, 8.5rem);
  --o-rail: clamp(1.25rem, 5vw, 4rem);
  --o-maxw: 1200px;
  --o-maxw-narrow: 820px;

  /* Type. Headings move to the humanist sans; the techno display face is
     kept for the wordmark, eyebrows and numerals so the brand voice
     survives where it reads as intent rather than noise. Flip --o-display
     back to var(--hc-display) to put Chakra Petch on every heading. */
  --o-display: var(--hc-sans);
  --o-body:    var(--hc-sans);
  --o-brand:   var(--hc-display);
  --o-mono:    var(--hc-mono);

  --o-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --o-shadow:    0 24px 70px -30px rgba(0, 0, 0, 0.9);
  --o-shadow-lg: 0 40px 110px -40px rgba(0, 0, 0, 0.95);
}

/* ═══ 2 · BASE ═════════════════════════════════════════════════════ */
body {
  background: var(--o-bg);
  color: var(--o-text);
  font-family: var(--o-body);
  font-weight: 400;
  line-height: 1.65;
}

/* ═══ 3 · LAYOUT PRIMITIVES ════════════════════════════════════════ */

/* The section content wrapper. motion.js::contentContainer() matches this
   class by name — renaming it silently kills block reveal site-wide. */
.o-shell {
  position: relative;
  width: 100%;
  max-width: var(--o-maxw);
  margin-inline: auto;
  padding-inline: var(--o-rail);
}
.o-shell--narrow { max-width: var(--o-maxw-narrow); }
.o-shell--wide   { max-width: 1400px; }

.o-sect { position: relative; padding-block: var(--o-sect); }
.o-sect--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.o-sect--flush-top { padding-top: 0; }

/* Section heading block: eyebrow → title → lede. */
.o-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.o-head--center { margin-inline: auto; text-align: center; }

/* ═══ 4 · TYPE SCALE ═══════════════════════════════════════════════ */
.o-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--o-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--o-cyan);
  margin: 0 0 1.1rem;
}
.o-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--o-pink), var(--o-cyan));
}
.o-head--center .o-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--o-cyan), var(--o-pink));
}
.o-eyebrow--pink { color: var(--o-pink); }

.o-h1, .o-h2, .o-h3, .o-h4 {
  font-family: var(--o-display);
  color: var(--o-text);
  margin: 0;
  text-wrap: balance;
}
.o-h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.o-h2 {
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.024em;
}
.o-h3 {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.o-h4 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.008em;
}
/* A lighter weight reads as calm at hero sizes but as washed-out at body
   sizes, so it is opt-in per heading rather than baked into .o-h1. */
.o-h1--light, .o-h2--light { font-weight: 300; }
/* Sub-section headings that sit under an .o-h2 in the same block and would
   compete with it at the full size. */
.o-h2--sm { font-size: clamp(1.7rem, 3vw, 2.35rem); }

.o-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.72;
  color: var(--o-dim);
  max-width: 40rem;
  margin: 1.35rem 0 0;
}
.o-head--center .o-lede { margin-inline: auto; }
.o-body  { font-size: 0.98rem; line-height: 1.75; color: var(--o-dim); margin: 0; }
.o-small { font-size: 0.82rem; line-height: 1.6; color: var(--o-faint); margin: 0; }
.o-note  { font-size: 0.75rem; line-height: 1.6; color: var(--o-ghost); margin: 0; }

/* ═══ 5 · BUTTONS (pills) ══════════════════════════════════════════ */
.o-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--o-hairline-2);
  border-radius: var(--o-pill);
  padding: 0.9rem 1.75rem;
  font-family: var(--o-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--o-text);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--o-ease), background-color 0.25s ease,
              border-color 0.25s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.o-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.06); }
.o-btn svg { width: 16px; height: 16px; flex: none; }

.o-btn--primary { background: var(--o-pink); border-color: var(--o-pink); color: #fff; }
.o-btn--primary:hover {
  background: var(--o-pink);
  color: #fff;
  box-shadow: 0 20px 46px -18px rgba(255, 29, 108, 0.85);
}
.o-btn--light { background: #fff; border-color: #fff; color: #0a0a12; }
.o-btn--light:hover { background: #fff; color: #0a0a12; box-shadow: 0 20px 46px -20px rgba(255, 255, 255, 0.5); }
.o-btn--ghost { background: transparent; }
.o-btn--sm    { padding: 0.6rem 1.15rem; font-size: 0.85rem; }
.o-btn--lg    { padding: 1.05rem 2.15rem; font-size: 1rem; }
.o-btn--block { display: flex; width: 100%; }

/* Quiet text link with a growing gap, for "learn more" affordances. */
.o-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--o-cyan);
  transition: gap 0.25s var(--o-ease), color 0.2s ease;
}
.o-link:hover { gap: 0.75rem; color: #fff; }
.o-link svg { width: 15px; height: 15px; flex: none; }
.o-link--pink   { color: var(--o-pink); }
.o-link--violet { color: var(--o-violet); }

/* ═══ 6 · SURFACES: cards, tiles, media ════════════════════════════ */
.o-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--o-surface);
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  overflow: hidden;
  transition: transform 0.35s var(--o-ease), border-color 0.35s ease,
              box-shadow 0.35s ease, background-color 0.35s ease;
}
/* The hairline highlight along the top edge is what stops a large flat
   radius from reading as a grey box on a near-black page. */
.o-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}
.o-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 29, 108, 0.34);
  box-shadow: var(--o-shadow);
}
.o-card--flat:hover { transform: none; box-shadow: none; border-color: var(--o-hairline-2); }
.o-card--raised { background: var(--o-raised); }
.o-card--pad-lg { padding: clamp(2rem, 3.6vw, 3rem); }
.o-card--center { align-items: center; text-align: center; }

/* Feature tile — the dark answer to a pastel product tile: a low-alpha
   neon wash held inside a big radius. Accent set per tile. */
.o-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r-lg);
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, var(--o-tint, rgba(255, 29, 108, 0.14)), transparent 62%),
    var(--o-surface);
  transition: transform 0.35s var(--o-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.o-tile:hover { transform: translateY(-4px); border-color: var(--o-hairline-2); box-shadow: var(--o-shadow); }
.o-tile--pink   { --o-tint: rgba(255, 29, 108, 0.16); }
.o-tile--cyan   { --o-tint: rgba(34, 231, 240, 0.14); }
.o-tile--violet { --o-tint: rgba(168, 85, 247, 0.16); }

/* Icon chip that heads a tile. */
.o-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--o-r-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--o-hairline);
  color: var(--o-text);
  margin-bottom: 1.15rem;
  flex: none;
}
.o-ico svg { width: 20px; height: 20px; }
.o-ico--pink   { background: rgba(255, 29, 108, 0.12); border-color: rgba(255, 29, 108, 0.30); color: var(--o-pink); }
.o-ico--cyan   { background: rgba(34, 231, 240, 0.10); border-color: rgba(34, 231, 240, 0.30); color: var(--o-cyan); }
.o-ico--violet { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.30); color: var(--o-violet); }

/* Rounded media frame. Rendered as <figure class="o-media overflow-hidden">
   so motion.js's figure zoom + scroll-scrubbed settle still match it. */
.o-media {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--o-r-lg);
  border: 1px solid var(--o-hairline);
  background: var(--o-sunken);
  overflow: hidden;
}
.o-media img, .o-media video { display: block; width: 100%; height: auto; }
.o-media--flush { border: 0; }

/* Pill chip / badge. */
.o-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-pill);
  padding: 0.42rem 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--o-dim);
  white-space: nowrap;
}
.o-chip--pink   { border-color: rgba(255, 29, 108, 0.32); background: rgba(255, 29, 108, 0.09); color: #ff8ab4; }
.o-chip--cyan   { border-color: rgba(34, 231, 240, 0.32); background: rgba(34, 231, 240, 0.08); color: #7ff0f5; }
.o-chip--violet { border-color: rgba(168, 85, 247, 0.32); background: rgba(168, 85, 247, 0.10); color: #d0a9fb; }

/* ═══ 7 · GRIDS ════════════════════════════════════════════════════ */
/* Always author these as `class="grid o-grid o-grid--3"`: motion.js's
   isStaggerGroup() tests for the literal `grid` token to decide whether the
   row's children stagger in one by one. */
.o-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.o-grid--tight { gap: 0.75rem; }
.o-grid--loose { gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 700px) {
  .o-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .o-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Two-up text/media row. Authored as `class="grid grid-cols-12 o-split"` so
   motion.js's isTwoColumnSplit() gives the halves the left/right reveal. */
.o-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .o-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-split--reverse > *:first-child { order: 2; }
  .o-split--lean-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .o-split--lean-text  { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Stat row. Numerals keep `class="num font-display"` for the count-up. */
.o-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--o-hairline);
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r);
  overflow: hidden;
}
@media (min-width: 760px) { .o-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o-stat { background: var(--o-surface); padding: 1.4rem 1.4rem 1.5rem; }
.o-stat__n {
  font-family: var(--o-brand);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--o-text);
}
.o-stat__l {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-faint);
}
/* A stat that is the point of its own section rather than one cell in a row
   (the live-user count on /about, for instance) needs headline scale. */
.o-stat__n--lg { font-size: clamp(2.8rem, 6vw, 4rem); }

/* ═══ 8 · CHROME: topbar, header, nav, footer ══════════════════════ */
.o-topbar {
  background: rgba(6, 6, 10, 0.72);
  border-bottom: 1px solid var(--o-hairline);
  overflow: hidden;
}
.o-topbar .marquee { padding-block: 0.55rem; }
.o-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--o-dim);
  white-space: nowrap;
}
.o-topbar__item strong { color: var(--o-text); font-weight: 600; }
.o-topbar__dot { color: var(--o-ghost); }

.o-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 6, 10, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.o-header.mo-hdr-scrolled { border-bottom-color: var(--o-hairline); }
.o-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}
.o-mark { display: inline-flex; align-items: center; gap: 0.7rem; }
.o-mark__glyph {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--o-r-xs);
  background: linear-gradient(135deg, var(--o-pink), var(--o-violet) 55%, var(--o-cyan));
  color: #06060a;
  font-family: var(--o-brand);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  flex: none;
}
/* Both are <span>s stacked by CSS rather than by an inline style attribute:
   the tagline has to be hideable by the phone media query below, and an
   inline `display:block` would outrank it. */
.o-mark__word {
  display: block;
  font-family: var(--o-brand);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1.1;
}
.o-mark__word span { color: var(--o-pink); }
.o-mark__sub {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--o-ghost);
  margin-top: 0.15rem;
}

/* Nav. All seven destinations stay inside <nav> as real <a> elements —
   public/js/mobile-nav.js builds its drawer by enumerating `header nav a`,
   so anything pulled out of the DOM would vanish from mobile entirely.
   The overflow four are merely parked in a popover on desktop. */
.o-nav { display: none; align-items: center; gap: 0.35rem; }
@media (min-width: 1024px) { .o-nav { display: flex; } }
.o-nav a.nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: var(--o-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--o-dim);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.o-nav a.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.o-nav a.nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* The layout's legacy underline marker would sit inside the pill and read
   as a stray dash; the pill itself is the active affordance now. */
.o-nav a.nav-link::after,
.o-nav a.nav-link.active::after { display: none; }

.o-nav__more { position: relative; }
.o-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--o-pill);
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--o-dim);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.o-nav__toggle svg { width: 13px; height: 13px; transition: rotate 0.25s ease; }
.o-nav__more:hover .o-nav__toggle,
.o-nav__more:focus-within .o-nav__toggle { color: #fff; background: rgba(255, 255, 255, 0.06); }
.o-nav__more:hover .o-nav__toggle svg,
.o-nav__more:focus-within .o-nav__toggle svg { rotate: 180deg; }
.o-nav__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 12rem;
  padding: 0.4rem;
  border: 1px solid var(--o-hairline-2);
  border-radius: var(--o-r-sm);
  background: rgba(14, 14, 23, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--o-shadow);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity 0.2s ease, translate 0.24s var(--o-ease), visibility 0.2s;
}
.o-nav__more:hover .o-nav__panel,
.o-nav__more:focus-within .o-nav__panel { opacity: 1; visibility: visible; translate: 0 0; }
.o-nav__panel a.nav-link {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--o-r-xs);
  font-size: 0.88rem;
}

/* The header switcher also carries `lang-switcher` (see the layout comment on
   why), and i18n.js injects a runtime stylesheet for that class with an
   angular clip-path. That injected <style> lands after this file, so these
   rules are written at .o-langs.lang-switcher — two classes — to win on
   specificity rather than on order, which we do not control. */
.o-langs,
.o-langs.lang-switcher {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0.22rem;
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-pill);
  background: rgba(255, 255, 255, 0.03);
  clip-path: none;
}
/* 1024, matching the breakpoint at which mobile-nav.js takes over: below it
   the drawer hosts its own switcher, and i18n.js hides this one outright. */
@media (min-width: 1024px) {
  .o-langs, .o-langs.lang-switcher { display: flex; }
}
.o-langs a,
.o-langs.lang-switcher a {
  padding: 0.3rem 0.62rem;
  border-radius: var(--o-pill);
  font-family: var(--o-mono);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--o-faint);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.o-langs a:hover { color: #fff; }
.o-langs a[aria-current="true"] { color: #06060a; background: var(--o-cyan); font-weight: 700; }

.o-foot { border-top: 1px solid var(--o-hairline); background: var(--o-bg); }
.o-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 760px)  { .o-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .o-foot__grid { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); } }
.o-foot h4 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-faint);
  margin: 0 0 1.1rem;
}
.o-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.o-foot ul a { font-size: 0.9rem; color: var(--o-dim); transition: color 0.2s ease; }
.o-foot ul a:hover { color: #fff; }
.o-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--o-hairline);
  font-size: 0.78rem;
  color: var(--o-faint);
}
.o-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.o-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-pill);
  color: var(--o-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.o-social a:hover { color: #fff; border-color: var(--o-hairline-2); background: rgba(255, 255, 255, 0.06); }

/* ═══ 9 · PRICING: plan row + comparison table ═════════════════════ */
.o-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
  align-items: stretch;
}
@media (min-width: 760px)  { .o-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .o-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.o-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--o-surface);
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: transform 0.35s var(--o-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.o-plan:hover { transform: translateY(-4px); border-color: var(--o-hairline-2); box-shadow: var(--o-shadow); }
.o-plan--featured {
  border-color: rgba(255, 29, 108, 0.42);
  background: linear-gradient(180deg, rgba(255, 29, 108, 0.07), transparent 40%), var(--o-surface);
}
.o-plan__price {
  font-family: var(--o-brand);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: var(--o-text);
}
.o-plan__per  { font-size: 0.8rem; color: var(--o-faint); }
.o-plan__list { list-style: none; margin: 1.35rem 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.o-plan__list li { display: flex; gap: 0.6rem; font-size: 0.88rem; line-height: 1.5; color: var(--o-dim); }
.o-plan__list svg { width: 15px; height: 15px; flex: none; margin-top: 0.22rem; color: var(--o-cyan); }
.o-plan__cta  { margin-top: auto; }

/* Comparison table. Wrapped in .o-compare-wrap so a wide table scrolls
   inside its own box instead of pushing the page sideways. */
.o-compare-wrap {
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r);
  overflow-x: auto;
  background: var(--o-surface);
}
.o-compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
.o-compare th, .o-compare td { padding: 0.95rem 1.15rem; text-align: left; }
.o-compare thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o-faint);
  border-bottom: 1px solid var(--o-hairline);
  white-space: nowrap;
}
.o-compare tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.o-compare tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.o-compare td:first-child { color: var(--o-text); font-weight: 500; }
.o-compare td { color: var(--o-dim); }
.o-compare .o-yes { color: var(--o-cyan); }
.o-compare .o-no  { color: var(--o-ghost); }

/* ═══ 10 · FAQ, quotes, tabs ═══════════════════════════════════════ */
/* Kept as <details>/<summary> so motion.js's accordion fade still fires. */
.o-faq {
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r);
  background: var(--o-surface);
  overflow: hidden;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.o-faq + .o-faq { margin-top: 0.7rem; }
.o-faq[open] { border-color: var(--o-hairline-2); }
.o-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.15rem, 2vw, 1.6rem);
  font-size: 1rem;
  font-weight: 600;
  color: var(--o-text);
  cursor: pointer;
  list-style: none;
}
.o-faq > summary::-webkit-details-marker { display: none; }
.o-faq__sign { position: relative; width: 16px; height: 16px; flex: none; }
.o-faq__sign::before, .o-faq__sign::after {
  content: "";
  position: absolute;
  background: var(--o-faint);
  transition: rotate 0.3s var(--o-ease), opacity 0.25s ease;
}
.o-faq__sign::before { inset: 7px 0 auto; height: 2px; }
.o-faq__sign::after  { inset: 0 7px auto; width: 2px; height: 16px; }
.o-faq[open] .o-faq__sign::after { opacity: 0; rotate: 90deg; }
.o-faq__body {
  padding: 0 clamp(1.15rem, 2vw, 1.6rem) 1.35rem;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--o-dim);
}

.o-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--o-surface);
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-r-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}
.o-quote p { font-size: 0.95rem; line-height: 1.7; color: var(--o-dim); margin: 0; }
.o-quote footer { display: flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--o-faint); margin-top: auto; }

/* Pill tab row, used by the platform switchers. */
.o-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--o-hairline);
  border-radius: var(--o-pill);
  background: rgba(255, 255, 255, 0.03);
  max-width: 100%;
  overflow-x: auto;
}
.o-tab {
  border: 0;
  border-radius: var(--o-pill);
  padding: 0.5rem 1.05rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--o-faint);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.o-tab:hover { color: var(--o-text); }
.o-tab[aria-selected="true"] { background: var(--o-text); color: #06060a; }

/* ═══ 11 · HERO + DECOR ════════════════════════════════════════════ */
.o-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem); }
.o-hero__center { text-align: center; max-width: 52rem; margin-inline: auto; }
.o-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.o-hero__center .o-hero__actions { justify-content: center; }

/* Glow blobs stay .glow-* so motion.js's parallax keeps claiming them; the
   softer blur suits the larger rounded shapes this design uses. */
.glow-pink   { filter: blur(90px);  opacity: 0.75; }
.glow-cyan   { filter: blur(100px); opacity: 0.62; }
.glow-purple { filter: blur(95px);  opacity: 0.68; }

.o-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--o-hairline-2), transparent); border: 0; margin: 0; }

/* ═══ 12 · BRIDGE LAYER ════════════════════════════════════════════
   Restyles the legacy dark-neon utilities that the not-yet-rewritten pages
   still use, so the whole site adopts the new radius and tone the moment
   this file loads, and each page rewrite refines rather than rescues it.
   All of it is plain single-class specificity — this stylesheet just loads
   last. Safe to delete a rule once no page depends on it.
   ────────────────────────────────────────────────────────────────── */

/* The angular cuts are the old language; round them everywhere. Only these
   two need !important — the layout's inline <style> declares the same
   clip-path and several elements repeat it as a style attribute. */
.clip-corner    { clip-path: none !important; border-radius: var(--o-r); }
.clip-corner-sm { clip-path: none !important; border-radius: var(--o-r-sm); }

/* Panels sit closer to the page and lean on radius instead of contrast. */
.bg-ink-900 { background-color: var(--o-surface); }
.bg-ink-850 { background-color: var(--o-raised); }
.bg-ink-800 { background-color: var(--o-raised); }

/* Legacy micro-copy was set very faint; lift the lower rungs to a calmer,
   more legible ramp without touching the brand colours. */
.text-white\/30 { color: var(--o-ghost); }
.text-white\/40, .text-white\/45 { color: var(--o-faint); }
.text-white\/50, .text-white\/55 { color: rgba(242, 242, 247, 0.55); }
.text-white\/60, .text-white\/65, .text-white\/70 { color: var(--o-dim); }

/* Buttons and cards that predate .o-btn / .o-card still round and lift. */
.btn-neon { border-radius: var(--o-pill); }
.card-lift { border-radius: var(--o-r-lg); }
.card-lift:hover { border-color: rgba(255, 29, 108, 0.34); box-shadow: var(--o-shadow); }

/* The old grid and diagonal-stripe backdrops are visual noise under a
   design built on whitespace; keep the elements (motion.js counts them as
   decoration and skips them) but quiet them right down. */
.bg-grid { opacity: 0.25; background-size: 96px 96px; }
.diag-stripe { opacity: 0.18; }

/* Headings inherited from the old scale pick up the new tracking without
   every page having to be rewritten first. */
h1.font-display, h2.font-display { letter-spacing: -0.022em; }

/* ═══ 13 · UTILITIES ═══════════════════════════════════════════════ */

/* This stylesheet loads after the tailwind build, so any component here that
   declares `display` silently outranks `.hidden` on an element carrying both
   — which is how the header's Login button ended up visible on phones. Utility
   intent wins: restated last, at the same specificity, so it beats every
   component rule above. Anything that needs to reappear at a breakpoint gets
   its own class (see .o-login) rather than a `sm:` prefix, because the purged
   build has no `sm:inline-flex` to reappear with. */
.hidden { display: none; }
.o-login { display: none; }
@media (min-width: 640px) { .o-login { display: inline-flex; } }

.o-center { text-align: center; }
.o-mt-sm  { margin-top: 0.75rem; }
.o-mt     { margin-top: 1.5rem; }
.o-mt-lg  { margin-top: clamp(2rem, 4vw, 3rem); }
.o-flow > * + * { margin-top: 1rem; }
.o-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.o-row--center { justify-content: center; }

/* Anything wide enough to overflow scrolls inside its own box; the page
   body must never scroll sideways. */
.o-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══ 14 · MOBILE ══════════════════════════════════════════════════
   The system is authored mobile-first — every grid starts at one column
   and every size is a clamp() — so this section is not a separate mobile
   design, it is the set of rules that only make sense on a small screen.
   ────────────────────────────────────────────────────────────────── */

/* Decorative glow blobs are absolutely positioned at fixed pixel sizes
   (w-[520px] and friends) and routinely reach past their section's edge.
   The layout's body{overflow-x:hidden} stops the page from scrolling
   sideways, but only after the blob has already stretched the scroll
   width — which is what makes a phone render the page zoomed out. `clip`
   contains them without turning the section into a scroll container the
   way `hidden` would (that would also break any sticky descendant). */
.o-sect, .o-hero { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .o-sect, .o-hero { overflow-x: hidden; }
}

/* Long unbroken strings — URLs, SKUs, package codes — must wrap rather
   than set the minimum width of their column. */
.o-h1, .o-h2, .o-h3, .o-h4, .o-lede, .o-body, .o-small { overflow-wrap: break-word; }

/* Every horizontally scrollable rail gets momentum scrolling and loses its
   scrollbar chrome, so it reads as a swipeable strip rather than a broken
   layout. */
.o-tabs, .o-compare-wrap, .o-scroll-x {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.o-tabs::-webkit-scrollbar,
.o-compare-wrap::-webkit-scrollbar,
.o-scroll-x::-webkit-scrollbar { height: 0; width: 0; }
.o-tabs { scroll-snap-type: x proximity; }
.o-tab  { scroll-snap-align: center; }

/* Coarse pointers get a real 44px target on every control, whatever the
   type size inside it works out to. Block-level controls take a min-height;
   inline affordances ("Learn more", footer links, breadcrumbs) take vertical
   padding instead, because a min-height on an inline box does nothing. */
@media (pointer: coarse) {
  .o-btn, .o-tab, .o-langs a, .o-social a, .o-nav__toggle,
  .hd-tab, .pf-tab, .pt-tab, .pc-cta { min-height: 44px; }
  .o-faq > summary { min-height: 52px; }

  .o-link, .pc-manual, .o-foot ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pc-manual { display: flex; justify-content: center; }
  /* The footer's own row gap already separates these, so the taller target
     would otherwise double-space the column. */
  .o-foot ul { gap: 0; }

  /* Small round indicators (carousel dots, banner dismiss) keep their drawn
     size but get an invisible 44px hit area centred on them. */
  .hc-dot, .hcb-x { position: relative; }
  .hc-dot::after, .hcb-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 700px) {
  /* 2.5rem is a comfortable floor on a tablet and a wall of text on a
     360px phone, where a headline of any length runs to four lines. */
  .o-h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .o-h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  .o-header__in { height: 60px; }
  /* The tagline under the wordmark is the first thing to go when the row
     has to hold a hamburger, the register pill and the mark. */
  .o-mark__sub { display: none; }

  /* Stacked full-width CTAs, the way a phone expects them — a row of two
     pills at 360px leaves each one too narrow for its label. */
  .o-hero__actions { flex-direction: column; align-items: stretch; }
  .o-hero__actions .o-btn { width: 100%; }

  /* Sub-pixel gaps between stat cells read as broken hairlines once the
     row halves; the padding comes down with them. */
  .o-stat { padding: 1.15rem 1.1rem 1.25rem; }

  .o-foot__bar { justify-content: flex-start; }
}

@media (max-width: 420px) {
  /* At this width the eyebrow rule steals more room than the label it
     decorates, and the wordmark needs the whole left half of the header. */
  .o-eyebrow::before, .o-eyebrow::after { display: none; }
  .o-eyebrow { letter-spacing: 0.2em; }
  .o-chip { font-size: 0.7rem; padding: 0.38rem 0.75rem; }
  .o-btn  { padding-inline: 1.25rem; }
}