:root {
  --su-charcoal: #343b45;
  --su-deep: #161b22;
  --su-panel: #202731;
  --su-steel: #617691;
  --su-blue: #6b8aa7;
  --su-indigo: #405687;
  --su-lavender: #646d97;
  --su-ink: #f3f6fa;
  --su-muted: #abb7c6;
}

html { color-scheme: dark; }
body {
  background:
    radial-gradient(900px 620px at 8% -10%, rgba(97,118,145,.24), transparent 62%),
    radial-gradient(760px 560px at 100% 12%, rgba(64,86,135,.2), transparent 66%),
    #11161c !important;
}
.bg-grid {
  opacity: .28;
  background-image: linear-gradient(rgba(107,138,167,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(107,138,167,.07) 1px, transparent 1px) !important;
}
[data-nav] {
  border-color: rgba(171,183,198,.18) !important;
  background: rgba(22,27,34,.82) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
}
[data-nav] > a:first-child { flex: 0 1 auto; min-width: 0; }
/* The wordmark block has to shrink with its anchor. Without this the platform
   line keeps its full min-content width, spills out of the shrunken anchor and
   paints over the nav links. */
[data-nav] > a:first-child > span:last-child { min-width: 0; }
[data-nav] > div:nth-child(2) { flex: 0 0 auto; }
[data-nav] > div:last-child { flex: 0 0 auto; }
.nav-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) {
  /* The bar is capped at 72rem and now carries six links, the wordmark and a
     purchase button. The platform line cannot fit beside them at any width, so
     it stands down rather than colliding. It still shows on tablet widths, and
     the hero lists the five platforms either way. */
  .nav-status { display: none !important; }
}
@media (max-width: 1279px) {
  [data-nav] > div:nth-child(2) { gap: 0 !important; }
  [data-nav] > div:nth-child(2) a { padding-left: .62rem; padding-right: .62rem; }
}
.bg-shield, .from-shield { background-color: var(--su-indigo) !important; }
.bg-gradient-to-r.from-shield {
  background-image: linear-gradient(110deg, var(--su-indigo), var(--su-steel)) !important;
}
.text-shield, .text-lav, .text-steel { color: #90a8c3 !important; }
.text-gradient, .wordmark, .grad {
  background-image: linear-gradient(110deg, #dce8f4 2%, #8ca6c1 45%, #737da8 100%) !important;
}
.ramp-bar { background: linear-gradient(90deg, var(--su-charcoal), var(--su-steel), var(--su-indigo), var(--su-lavender)) !important; }
.su-popup, .rounded-3xl, .rounded-2xl {
  --tw-ring-color: rgba(107,138,167,.22);
}
.su-popup {
  box-shadow: 0 38px 95px rgba(0,0,0,.5), 0 0 0 1px rgba(107,138,167,.22) !important;
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #91acc8;
  outline-offset: 3px;
}
.plan-grid { display: grid; gap: 1rem; }
.plan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(171,183,198,.16);
  border-radius: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(145deg, rgba(52,59,69,.72), rgba(22,27,34,.9));
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}
.plan-card.featured { border-color: rgba(107,138,167,.55); }
.plan-card.featured::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--su-steel), var(--su-indigo), var(--su-lavender));
}
.plan-kicker { color: #90a8c3; font: 700 .68rem/1.2 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
.plan-title { margin-top: .8rem; color: var(--su-ink); font-size: 1.4rem; font-weight: 800; }
.plan-price { margin-top: .3rem; color: #dce8f4; font-size: 1rem; font-weight: 650; }
.plan-copy { margin-top: .75rem; color: var(--su-muted); font-size: .9rem; line-height: 1.65; }
.plan-list { margin-top: 1.1rem; display: grid; gap: .65rem; color: #d4dce6; font-size: .875rem; }
.plan-list li { display: flex; gap: .6rem; align-items: flex-start; }
.plan-list li::before { content: "✓"; color: #91acc8; font-weight: 800; }
.plan-action {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1.4rem; min-height: 2.8rem; padding: .7rem 1rem;
  border-radius: .9rem; border: 1px solid rgba(145,172,200,.38); color: #f7faff; font-size: .875rem; font-weight: 700;
  background: rgba(97,118,145,.14); transition: transform .18s ease, background .18s ease;
}
.plan-action:hover { transform: translateY(-2px); background: rgba(97,118,145,.25); }
.plan-card.featured .plan-action { border-color: transparent; background: linear-gradient(110deg, var(--su-indigo), var(--su-steel)); }
.trust-strip { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.trust-strip span { border:1px solid rgba(171,183,198,.15); border-radius:999px; padding:.4rem .7rem; color:var(--su-muted); font:500 .66rem/1.2 "JetBrains Mono",monospace; }
@media (min-width: 768px) { .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- Pro tools showcase: mock player, follow badge, Pro chip ---- */
.pro-chip {
  border: 1px solid rgba(145,172,200,.4);
  border-radius: 999px;
  padding: .3rem .62rem;
  background: rgba(64,86,135,.26);
  color: #cfe0f0;
  font: 700 .62rem/1 "JetBrains Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pro-frame {
  overflow: hidden;
  border: 1px solid rgba(171,183,198,.16);
  border-radius: 1.25rem;
  background: rgba(17,22,28,.72);
}
.pro-shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  background: linear-gradient(140deg, rgba(52,59,69,.92), rgba(64,86,135,.55) 58%, rgba(100,109,151,.42));
}
.pro-shot-glow {
  position: absolute;
  inset: auto -10% -45% -10%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(145,172,200,.35), transparent);
}
.pro-meta {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  color: rgba(171,183,198,.72);
  font: 500 .62rem/1 "JetBrains Mono", monospace;
}
.pro-shot-play {
  position: relative;
  display: grid;
  place-items: center;
  height: 3rem;
  width: 3rem;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(17,22,28,.55);
  color: var(--su-ink);
}
.pro-tag {
  position: absolute;
  left: .7rem;
  top: .7rem;
  border: 1px solid rgba(171,183,198,.22);
  border-radius: 999px;
  padding: .26rem .52rem;
  background: rgba(17,22,28,.62);
  color: var(--su-muted);
  font: 500 .62rem/1 "JetBrains Mono", monospace;
}
.pro-dl {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(171,183,198,.3);
  border-radius: .7rem;
  padding: .4rem .62rem;
  background: rgba(33,38,45,.92);
  color: #e8eef6;
  font: 600 .7rem/1 "Plus Jakarta Sans", system-ui, sans-serif;
  white-space: nowrap;
}
.pro-dl-float { position: absolute; right: .7rem; bottom: .7rem; }
.pro-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-top: 1px solid rgba(171,183,198,.14);
  padding: .6rem .7rem;
}
.pro-bar .pro-dl { margin-left: auto; }
.follow-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid rgba(171,183,198,.14);
  border-radius: 1rem;
  background: rgba(17,22,28,.5);
  padding: .7rem .8rem;
}
.follow-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .32rem .58rem;
  font: 600 .68rem/1 "Plus Jakarta Sans", system-ui, sans-serif;
  white-space: nowrap;
}
.follow-badge.yes { border: 1px solid rgba(121,216,162,.38); background: rgba(46,120,80,.22); color: #9fe0ba; }
.follow-badge.no { border: 1px solid rgba(171,183,198,.22); background: rgba(52,59,69,.5); color: var(--su-muted); }
.follow-badge.unknown { border: 1px dashed rgba(171,183,198,.32); background: transparent; color: var(--su-muted); }
/* ---- Hero platform chips ---- */
.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(171,183,198,.16);
  border-radius: 999px;
  padding: .28rem .52rem;
  background: rgba(32,39,49,.6);
  color: #d4dce6;
  font: 500 .66rem/1 "Plus Jakarta Sans", system-ui, sans-serif;
  white-space: nowrap;
}
.platform-chip::before {
  content: "";
  height: .4rem;
  width: .4rem;
  border-radius: 999px;
  background: var(--su-steel);
}
.platform-chip.ig::before { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.platform-chip.fb::before { background: #4a76c4; }
.platform-chip.msg::before { background: linear-gradient(135deg, #00b2ff, #8a5cf5); }
.platform-chip.wa::before { background: #5fbf7a; }
.platform-chip.th::before { background: #d8dde4; }

/* ---- Hero product film ---- */
/* The frame (border, panel background, radius and padding) comes from the
   utilities in the markup; this only has to establish the positioning context
   and clip the video's corners to the frame. */
.tour {
  position: relative;
  overflow: hidden;
}
.tour-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0f14;
}
.tour-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: inherit;
  padding: .75rem;
  background: transparent;
  cursor: pointer;
  transition: opacity .35s ease, visibility .35s ease;
}
.tour-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,.2), rgba(11,15,20,.62));
}
/* Centred on the film: the play glyph plus the two lines that name it. */
.tour-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  max-width: min(92%, 30rem);
  border: 1px solid rgba(171,183,198,.28);
  border-radius: 1rem;
  padding: .7rem 1.1rem .7rem .8rem;
  background: rgba(17,22,28,.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: transform .2s ease, border-color .2s ease;
}
.tour-cover:hover .tour-cta { transform: translateY(-2px); border-color: rgba(171,183,198,.5); }
.tour-play {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.6rem;
  width: 2.6rem;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--su-indigo), var(--su-steel));
  color: #fff;
}
[data-tour].is-playing .tour-cover { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .tour-cover, .tour-cta { transition: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }