/* Self-hosted (not loaded from fonts.googleapis.com) so no visitor IP is sent to Google on font
   load - both are OFL-licensed, free for commercial use. Each family's weights (500/600/700 for
   Cormorant Garamond, 400/500/600/700 for Manrope) all live inside the same variable-font file per
   subset, so a single @font-face per subset with a font-weight range covers every weight in use. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --header-height: 84px;
  --announcement-height: 0px;
  --ink: #0d0b0c;
  --ink-soft: #171214;
  --wine: #3b161f;
  --wine-light: #6a2638;
  --gold: #d6ad55;
  --gold-light: #f0d690;
  --ivory: #f2eadb;
  --muted: #b9aa9f;
  --line: rgba(214, 173, 85, 0.25);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  padding-top: calc(var(--header-height) + var(--announcement-height));
  color: var(--ivory);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

/* Atmosphere: fixed to the viewport (not the page) so the glow, smoke, and
   vignette stay consistent as you scroll instead of fading to flat black
   past the hero. Layered wine + gold glows read as depth, not decoration. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 62rem 46rem at 84% 6%, rgba(106, 38, 56, 0.4), transparent 68%),
    radial-gradient(ellipse 54rem 50rem at 4% 96%, rgba(214, 173, 85, 0.1), transparent 62%),
    radial-gradient(ellipse 80rem 64rem at 50% 48%, rgba(59, 22, 31, 0.22), transparent 72%),
    var(--ink);
}

/* Soft vignette to pull focus toward the center and keep the far edges of
   the screen from ever reading as an empty, undefined void. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 90rem 72rem at 50% 42%, transparent 50%, rgba(6, 5, 5, 0.6) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Fireflies: fixed to the viewport (like .noise) so they drift consistently
   over the whole page rather than scrolling away after the hero. Kept sparse,
   slow, and dim so it reads as ambiance, not a decoration. */
.fireflies {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.firefly {
  position: absolute;
  width: var(--size, 1.5px);
  height: var(--size, 1.5px);
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 3px 1px rgba(240, 214, 144, 0.35), 0 0 7px 2px rgba(214, 173, 85, 0.15);
  opacity: 0;
  animation: firefly-drift var(--duration, 12s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes firefly-drift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.4;
  }
  50% {
    transform: translate(14px, -46px);
    opacity: 0.18;
  }
  88% {
    opacity: 0.38;
  }
  100% {
    transform: translate(-10px, -92px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .firefly {
    animation: none;
    opacity: 0.4;
  }
}

.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 44px 10px 16px;
  background: linear-gradient(90deg, var(--wine-light), var(--wine));
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.announcement-bar[hidden] {
  display: none;
}

.announcement-bar p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ivory);
  font-weight: 600;
}

.announcement-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.announcement-dismiss {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.announcement-dismiss:hover {
  color: var(--ivory);
  background: rgba(242, 234, 219, 0.1);
}

/* Sale banner: takes the announcement bar's place while a website promo is live (see
   updateTopBars in script.js). Deep wine with a gold hairline and a slow light sweep. */
.sale-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 61;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 9px 48px 9px 16px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(90deg, #1c0a10 0%, #4a1a27 30%, #5c2133 50%, #4a1a27 70%, #1c0a10 100%);
  border-bottom: 1px solid rgba(240, 214, 144, 0.6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(240, 214, 144, 0.28);
}

.sale-bar[hidden] {
  display: none;
}

.sale-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(240, 214, 144, 0.22), transparent);
  transform: skewX(-18deg);
  animation: sale-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sale-shimmer {
  0% {
    left: -35%;
  }
  60%,
  100% {
    left: 125%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sale-bar::before {
    display: none;
  }
}

.sale-bar > * {
  position: relative;
}

.sale-bar-tag {
  padding: 3px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e2a6, var(--gold));
  color: #18110b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(214, 173, 85, 0.5);
}

.sale-bar-tag::before {
  content: "\2726";
  margin-right: 7px;
}

.sale-bar-text {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-light);
}

.sale-bar-ends {
  font-size: 0.8rem;
  color: var(--muted);
}

.sale-bar-ends strong {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.sale-bar-cta {
  padding: 5px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.sale-bar-cta:hover {
  background: linear-gradient(135deg, #f6e2a6, var(--gold));
  color: #18110b;
}

.sale-bar .announcement-dismiss {
  z-index: 2;
}

@media (max-width: 640px) {
  .sale-bar {
    gap: 4px 10px;
    padding: 7px 40px 7px 10px;
  }

  .sale-bar-tag {
    padding: 2px 10px;
    font-size: 0.66rem;
  }

  .sale-bar-text {
    font-size: 1.05rem;
  }

  .sale-bar-ends {
    font-size: 0.72rem;
  }

  .sale-bar-cta {
    padding: 3px 12px;
    font-size: 0.66rem;
  }
}

.site-header {
  position: fixed;
  top: var(--announcement-height);
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-height);
  background: linear-gradient(180deg, rgba(59, 22, 31, 0.32), rgba(13, 11, 12, 0.86));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  height: 28px;
  background: linear-gradient(180deg, rgba(13, 11, 12, 0.4), transparent);
  pointer-events: none;
}

.site-header-inner {
  width: min(1180px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

nav {
  display: flex;
  gap: 34px;
  color: var(--muted);
  font-size: 0.82rem;
}

nav a,
.header-cta,
.header-link {
  transition: color 180ms ease;
}

nav a:hover,
.header-cta:hover,
.header-link:hover {
  color: var(--gold-light);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-link {
  color: var(--muted);
  font-size: 0.82rem;
}

.tutorial-nav {
  position: relative;
}

.tutorial-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.tutorial-toggle[hidden] {
  display: none;
}

.tutorial-caret {
  font-size: 0.6rem;
  transition: transform 180ms ease;
}

.tutorial-toggle[aria-expanded="true"] .tutorial-caret {
  transform: rotate(180deg);
}

.tutorial-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 55;
  min-width: 240px;
  padding: 6px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.tutorial-menu[hidden] {
  display: none;
}

.tutorial-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: var(--ivory);
  font-size: 0.82rem;
  white-space: nowrap;
  border-top: 1px solid rgba(214, 173, 85, 0.12);
}

.tutorial-menu a:first-child {
  border-top: none;
}

.tutorial-menu a::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.tutorial-menu a:hover,
.tutorial-menu a:focus-visible {
  background: rgba(214, 173, 85, 0.1);
  color: var(--gold-light);
}

.tutorial-menu a:hover::before,
.tutorial-menu a:focus-visible::before {
  opacity: 1;
}

.header-cta {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--gold-light);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

main,
footer {
  position: relative;
  z-index: 2;
}

.hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 70px;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--serif);
  line-height: 0.98;
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(4rem, 7.5vw, 7.2rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

h1 em {
  color: var(--gold-light);
  font-weight: 500;
}

.hero-text {
  max-width: 620px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  min-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #18110b;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.button-primary:hover {
  background: var(--ivory);
}

.button-secondary {
  color: var(--gold-light);
  background: rgba(13, 11, 12, 0.5);
}

.button-secondary:hover {
  color: var(--ink);
  background: var(--gold-light);
}

.microcopy {
  margin-top: 22px;
  color: #837871;
  font-size: 0.72rem;
}

/* Answers "what happens after the trial?" right under the button that starts it. Brighter than the
   surrounding microcopy on purpose: it is the reassurance, not the fine print. */
.hero-free-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.8rem;
}

.hero-free-check {
  margin-right: 4px;
  color: var(--gold);
}

/* Styled to read as a real, clickable control - not a link to elsewhere, so pressing it expands
   the answer right here instead of taking the visitor away from wherever they're reading. */
.mouse-source-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-light);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mouse-source-toggle:hover,
.mouse-source-toggle:focus-visible {
  color: var(--gold);
}

.mouse-source-answer {
  max-width: 480px;
  margin: 10px auto 0;
}

.mouse-source-answer[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .mouse-source-toggle {
    display: block;
    margin: 6px auto 0;
    text-align: center;
  }
}

.hero-free-note + .microcopy {
  margin-top: 6px;
}

.active-devices-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.78rem;
}

.active-devices-badge[hidden] {
  display: none;
}

.active-devices-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fd68f;
  box-shadow: 0 0 0 0 rgba(111, 214, 143, 0.6);
  animation: active-devices-pulse 2s infinite;
}

@keyframes active-devices-pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 214, 143, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(111, 214, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 214, 143, 0); }
}

.hero-art {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.orbit {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.orbit-one {
  width: 450px;
  height: 450px;
  animation: drift 12s ease-in-out infinite;
}

.orbit-two {
  width: 330px;
  height: 330px;
  border-style: dashed;
  animation: spin 28s linear infinite;
}

.mouse-photo-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.mouse-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: rgba(214, 173, 85, 0.22);
  filter: blur(45px);
  z-index: -1;
}

.mouse-photo {
  width: 260px;
  max-width: 70%;
  height: auto;
  transform: rotate(6deg);
  filter: drop-shadow(0 35px 60px rgba(0, 0, 0, 0.6));
}

.floating-label {
  position: absolute;
  padding: 7px 13px;
  border: 1px solid var(--line);
  color: var(--gold-light);
  background: rgba(13, 11, 12, 0.86);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  animation: float 5s ease-in-out infinite;
}

.label-one {
  top: 20%;
  left: 6%;
}

.label-two {
  right: 2%;
  bottom: 29%;
  animation-delay: -1.5s;
}

.label-three {
  bottom: 9%;
  left: 22%;
  animation-delay: -3s;
}

.edition-seal {
  position: absolute;
  top: 10%;
  right: 0;
  width: 92px;
  height: 92px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(59, 22, 31, 0.65);
  transform: rotate(8deg);
}

.edition-seal span {
  font-size: 0.48rem;
  letter-spacing: 0.2em;
}

.edition-seal strong {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.trust-strip {
  min-height: 88px;
  padding: 20px 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #a99a90;
  background: rgba(23, 18, 20, 0.72);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
}

.trust-strip i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 62px;
}

.section-heading h2,
.premium-section h2,
.final-cta h2 {
  margin-bottom: 20px;
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.section-heading > p:last-child,
.premium-section p {
  color: var(--muted);
}

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

.feature-card {
  min-height: 330px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(59, 22, 31, 0.28), transparent 60%),
    rgba(23, 18, 20, 0.86);
}

.feature-card-large {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  justify-content: space-between;
}

.feature-card-signature {
  gap: 28px;
  border-color: rgba(214, 173, 85, 0.45);
  background:
    radial-gradient(ellipse 90% 65% at 92% 2%, rgba(214, 173, 85, 0.11), rgba(214, 173, 85, 0.03) 35%, transparent 62%),
    linear-gradient(135deg, #3b161f, #1a1114 78%);
}

.card-number {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.feature-card h3,
.process-list h3 {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
}

.feature-card p,
.process-list p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-stack-label {
  margin: 0;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.profile-stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-stack-row span,
.profile-stack-row a {
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(13, 11, 12, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.profile-stack-row a {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.profile-stack-row a:hover,
.profile-stack-row a:focus-visible {
  background: var(--gold);
  color: #18110b;
  border-color: var(--gold);
}

.coming-soon-tip {
  position: fixed;
  z-index: 80;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 8px 14px;
  background: var(--ink-soft);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.coming-soon-tip.is-visible {
  opacity: 1;
}

.process-section {
  border-top: 1px solid var(--line);
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.process-list li {
  padding: 31px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  border-bottom: 1px solid var(--line);
}

.process-list > li > span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 2rem;
}

.process-list h3 {
  margin-bottom: 6px;
}

.premium-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 74px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
  border: 1px solid rgba(214, 173, 85, 0.45);
  background:
    radial-gradient(circle at 90% 20%, rgba(214, 173, 85, 0.15), transparent 22rem),
    linear-gradient(135deg, #3b161f, #1a1114 62%);
}

.premium-section h2 {
  max-width: 700px;
}

.premium-section p:last-child {
  max-width: 650px;
  margin-bottom: 0;
}

.pricing-toggle {
  display: inline-flex;
  margin-bottom: 46px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  overflow: hidden;
}

.toggle-option {
  padding: 12px 28px;
  border: none;
  color: var(--muted);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.toggle-option.is-active {
  color: #18110b;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.save-badge {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(214, 173, 85, 0.16);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.toggle-option.is-active .save-badge {
  color: #18110b;
  background: rgba(24, 17, 11, 0.14);
}

.pricing-card {
  max-width: 460px;
  padding: 54px;
  /* A "Get Premium Access" link scrolls straight to this card; without this its top edge would
     land under the fixed announcement bar and header. */
  scroll-margin-top: calc(var(--announcement-height) + var(--header-height) + 18px);
  border: 1px solid rgba(214, 173, 85, 0.45);
  background:
    radial-gradient(ellipse 90% 65% at 92% 2%, rgba(214, 173, 85, 0.11), rgba(214, 173, 85, 0.03) 35%, transparent 62%),
    linear-gradient(135deg, #3b161f, #1a1114 78%);
}

.pricing-card-head h3 {
  margin: 6px 0 18px;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-amount {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--gold-light);
}

.price-period {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Limited-time promo: the regular price stays visible but struck through, the promo price takes the
   headline, and a countdown says when it goes back to normal. All hidden unless a promo is live. */
.price-original {
  color: var(--muted);
  font-size: 1.5rem;
  text-decoration-thickness: 2px;
}

.price-original[hidden],
.promo-strip[hidden] {
  display: none;
}

.promo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(214, 173, 85, 0.55);
  border-radius: 8px;
  background: rgba(214, 173, 85, 0.1);
  font-size: 0.82rem;
}

.promo-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #18110b;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.promo-ends {
  color: var(--muted);
}

.price-off {
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #18110b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.price-off[hidden] {
  display: none;
}

.promo-plan {
  color: var(--gold-light);
  font-weight: 600;
}

.promo-plan[hidden] {
  display: none;
}

.promo-countdown {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.price-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.price-php {
  margin: 6px 0 0;
  color: var(--gold-light);
  font-size: 0.9rem;
}

.pricing-features {
  margin: 34px 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  color: var(--ivory);
  font-size: 0.88rem;
}

.pricing-features li {
  padding-left: 22px;
  position: relative;
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.payment-method-toggle {
  display: flex;
  width: fit-content;
  margin: 4px auto 22px;
}

.qr-frame {
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  background: rgba(242, 234, 219, 0.04);
}

/* display:grid above outranks the browser's built-in [hidden] rule, so without this an empty
   plan still drew a blank dashed frame next to its "no QR" note. */
.qr-frame[hidden] {
  display: none;
}

.qr-image {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

/* Stands in for the QR frame on a plan that has no code, so the block does not collapse into a
   gap and the buyer is told what to do instead of being left looking for a QR. */
.qr-missing-note {
  margin: 0 auto 16px;
  max-width: 300px;
  padding: 16px 18px;
  text-align: center;
  border: 1px dashed var(--line);
  background: rgba(242, 234, 219, 0.04);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.qr-account {
  margin: 0 0 6px;
  text-align: center;
  color: var(--gold-light);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.qr-safety-note {
  margin: 0 0 26px;
  text-align: center;
  color: #837871;
  font-size: 0.68rem;
  font-style: italic;
}

.manual-steps {
  margin: 0 0 26px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.85rem;
  display: grid;
  gap: 6px;
}

.manual-pay-cta {
  width: 100%;
}

.manual-pay-messenger {
  width: 100%;
  margin-top: 10px;
}

/* Hidden until there are enough ratings to reassure rather than warn (see MIN_REVIEWS_TO_SHOW in
   script.js). Explicit in case a section style ever sets display and outranks [hidden]. */
.reviews-section[hidden] {
  display: none;
}

/* The section can be scrolled to in code once it unhides, so keep its top clear of the fixed
   announcement bar and header. */
.reviews-section {
  scroll-margin-top: calc(var(--announcement-height) + var(--header-height) + 18px);
}

.pricing-microcopy {
  margin-top: 14px;
  text-align: center;
}

.pay-reveal {
  width: 100%;
}

/* .button sets display:inline-flex, which would otherwise keep this visible after it is hidden. */
.pay-reveal[hidden] {
  display: none;
}

.payment-panel.is-opening {
  animation: payment-panel-in 280ms ease both;
}

@keyframes payment-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.inline-link {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-link:hover {
  color: var(--ivory);
}

.reviews-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 0 40px;
  text-align: center;
}

.reviews-summary[hidden] {
  display: none;
}

.reviews-average {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--gold-light);
  line-height: 1;
}

.reviews-stars {
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: 3px;
}

.reviews-count {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.reviews-list {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 40px;
}

.review-card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(23, 18, 20, 0.6);
}

.review-card .review-stars {
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.review-card .review-author {
  margin: 0 0 6px;
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.review-card p.review-comment {
  color: var(--ivory);
  line-height: 1.7;
  margin: 0;
}

.review-card .review-date {
  color: var(--muted);
  font-size: 0.72rem;
  margin: 10px 0 0;
}

.reviews-empty {
  text-align: center;
  color: var(--muted);
  margin: 0 0 40px;
}

.reviews-empty[hidden] {
  display: none;
}

.reviews-form-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(23, 18, 20, 0.6);
}

.reviews-form-card h3 {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.4rem;
  margin: 0 0 8px;
}

.reviews-form-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0 0 20px;
}

.reviews-bonus-note {
  color: var(--gold-light);
  padding: 10px 14px;
  background: rgba(214, 173, 85, 0.08);
  border: 1px solid rgba(214, 173, 85, 0.25);
  border-radius: 8px;
}

.reviews-bonus-note strong {
  color: var(--gold-light);
}

.reviews-form-card label {
  display: block;
  margin: 16px 0 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.reviews-form-card label:first-of-type {
  margin-top: 0;
}

.reviews-form-card input,
.reviews-form-card textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.9rem;
  box-sizing: border-box;
}

.reviews-code-field {
  position: relative;
}

.reviews-code-field input {
  padding-right: 44px;
}

.reviews-code-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
}

.reviews-code-toggle:hover,
.reviews-code-toggle[aria-pressed="true"] {
  color: var(--gold-light);
}

.reviews-form-card textarea {
  min-height: 90px;
  resize: vertical;
}

.reviews-star-picker {
  display: flex;
  gap: 6px;
}

.star-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(214, 173, 85, 0.3);
  cursor: pointer;
  transition: color 150ms ease, transform 150ms ease;
}

.star-btn:hover,
.star-btn.is-active {
  color: var(--gold);
  transform: scale(1.1);
}

.reviews-form-card button.button {
  margin-top: 22px;
  width: 100%;
}

.reviews-form-result {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  display: none;
}

.reviews-form-result.ok {
  display: block;
  background: rgba(85, 214, 140, 0.12);
  border: 1px solid rgba(85, 214, 140, 0.4);
  color: #8fe0ab;
}

.reviews-form-result.err {
  display: block;
  background: rgba(214, 85, 85, 0.12);
  border: 1px solid rgba(214, 85, 85, 0.4);
  color: #f0a0a0;
}

.faq-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

details {
  padding: 25px 4px;
  border-bottom: 1px solid var(--line);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.45rem;
  list-style: none;
}

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

summary::after {
  content: "+";
  color: var(--gold);
  font-family: var(--sans);
  font-size: 1rem;
}

details[open] summary::after {
  content: "−";
}

details p {
  padding: 14px 40px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.final-cta {
  padding: 140px 24px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(circle at 50% 80%, rgba(106, 38, 56, 0.32), transparent 30rem);
}

.final-cta h2 {
  max-width: 790px;
  margin-right: auto;
  margin-left: auto;
}

footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  color: #796f69;
  font-size: 0.72rem;
}

footer p {
  margin: 0;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-social a {
  display: inline-flex;
  color: #796f69;
  transition: color 180ms ease;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal[hidden] {
  display: none;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 5, 0.86);
  backdrop-filter: blur(4px);
}

.video-modal-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
}

.video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-soft);
  color: var(--ivory);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.video-modal-close:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
}

.video-modal-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.video-modal-play svg {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--gold);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@media (max-width: 900px) {
  nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 2px;
    padding: 10px 24px 22px;
    background: rgba(13, 11, 12, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
  }

  nav.is-open a {
    padding: 13px 0;
    border-bottom: 1px solid rgba(214, 173, 85, 0.12);
    color: var(--ivory);
    font-size: 0.95rem;
  }

  nav.is-open a:last-child {
    border-bottom: none;
  }

  .hero {
    min-height: auto;
    padding: 100px 0 70px;
    grid-template-columns: 1fr;
  }

  .hero-art {
    min-height: 470px;
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-card-large {
    grid-column: span 2;
  }

  .premium-section,
  .faq-section {
    grid-template-columns: 1fr;
  }

  .premium-section {
    align-items: start;
  }

  .faq-section {
    gap: 20px;
  }
}

@media (max-width: 620px) {
  .site-header-inner,
  .hero,
  .section,
  .premium-section,
  footer {
    width: min(100% - 30px, 1180px);
  }

  :root {
    --header-height: 68px;
  }

  .header-cta {
    font-size: 0.68rem;
  }

  .header-actions {
    gap: 14px;
  }

  .header-link {
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .hero {
    padding-top: 76px;
    gap: 32px;
  }

  h1 {
    font-size: clamp(3.4rem, 17vw, 5rem);
  }

  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .hero-art {
    min-height: 390px;
    transform: scale(0.85);
  }

  .trust-strip {
    padding: 24px 15px;
    flex-wrap: wrap;
    gap: 14px 20px;
  }

  .section {
    padding: 56px 0;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card-large {
    grid-column: span 1;
    min-height: 480px;
  }

  .process-list li {
    grid-template-columns: 55px 1fr;
    gap: 12px;
  }

  .premium-section {
    padding: 48px 26px;
  }

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

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---- Showcase: app chips + a Function HUD that changes per app --------------------------------- */
.showcase-stage {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(300px, 380px) 1fr;
  gap: 28px;
  align-items: start;
  padding: 28px;
  border: 1px solid rgba(214, 173, 85, 0.35);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(214, 173, 85, 0.09), transparent 62%),
    linear-gradient(135deg, rgba(59, 22, 31, 0.7), rgba(23, 18, 20, 0.9) 75%);
  overflow: hidden;
}

.showcase-apps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(214, 173, 85, 0.22);
  border-radius: 10px;
  background: rgba(13, 11, 12, 0.5);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.showcase-chip:hover {
  color: var(--ivory);
  border-color: rgba(214, 173, 85, 0.55);
}

.showcase-chip[aria-selected="true"] {
  color: var(--gold-light);
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(214, 173, 85, 0.18), rgba(13, 11, 12, 0.55));
  transform: translateX(4px);
}

.showcase-chip-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f6e2a6, var(--gold));
  color: #18110b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.showcase-chip-more {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: rgba(214, 173, 85, 0.07);
  color: var(--ivory);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Function HUD, rebuilt in HTML from the app's own window so it stays sharp at any size. */
.hud {
  --hud-alpha: 0.4;
  --hud-text: #eeeeee;
  padding: 20px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(15, 18, 18, var(--hud-alpha));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  font-family: "Segoe UI", var(--sans);
}

.hud-title {
  margin: 0;
  color: #19e6ff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hud-app {
  margin: 6px 0 12px;
  color: #f0c96a;
  font-size: 1rem;
  font-weight: 700;
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
  color: #a9a29a;
  font-size: 0.8rem;
}

.hud-row > span {
  width: 52px;
  flex: none;
}

.hud-row b {
  margin-left: auto;
  font-weight: 400;
  color: #8d8580;
}

.hud-range {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hud-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #3a3f42;
}

.hud-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #3a3f42;
}

.hud-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  border-radius: 3px;
  background: #1f8eea;
}

.hud-range::-moz-range-thumb {
  width: 10px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  background: #1f8eea;
}

.hud-range:focus-visible {
  outline: 1px solid #19e6ff;
  outline-offset: 4px;
}

.hud-swatches {
  display: flex;
  gap: 8px;
}

.hud-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hud-swatch:hover {
  transform: scale(1.12);
}

.hud-swatch.is-selected {
  outline: 2px solid #19e6ff;
  outline-offset: 2px;
}

.hud-rule {
  height: 1px;
  margin: 14px 0;
  background: rgba(255, 255, 255, 0.16);
}

.hud-select {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 5px 30px 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  background: #ececec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #1b1b1b;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 0 0 0 rgba(25, 230, 255, 0.55);
  animation: hud-select-cue 2.6s ease-out 1.2s 3;
}

.hud-select:hover,
.hud-select:focus-visible {
  border-color: #19e6ff;
  outline: none;
}

@keyframes hud-select-cue {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 230, 255, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(25, 230, 255, 0);
  }
}

.hud {
  position: relative;
}

.hud-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 2px 9px;
  border: 1px solid rgba(240, 201, 106, 0.55);
  border-radius: 999px;
  color: #f0c96a;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hud-hint {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #8d8580;
  font-size: 0.74rem;
  line-height: 1.5;
}

.showcase-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(214, 173, 85, 0.35);
  border-radius: 10px;
  background: rgba(214, 173, 85, 0.07);
}

.showcase-note-title {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: 0.86rem;
  font-weight: 700;
}

.showcase-note ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.showcase-note li {
  margin: 2px 0;
}

.showcase-note strong {
  color: var(--ivory);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .hud-select {
    animation: none;
  }
}

.hud-layers {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.hud-layers li {
  margin: 0 0 9px;
  color: var(--hud-text);
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  animation: hud-row-in 0.45s ease forwards;
  animation-delay: calc(var(--i) * 90ms);
}

.hud-layers li b {
  color: #f0c96a;
  font-weight: 600;
}

.hud-layers li.hud-smart {
  color: #9fd8e6;
}

@keyframes hud-row-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.showcase-copy {
  align-self: center;
}

.showcase-count {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.showcase-copy h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--gold-light);
}

.showcase-copy p:not(.showcase-count):not(.microcopy) {
  margin: 0 0 14px;
  color: var(--ivory);
  font-size: 0.98rem;
}

.showcase-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(214, 173, 85, 0.12);
}

.showcase-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.showcase-progress span.is-running {
  animation: showcase-progress var(--showcase-ms, 6500ms) linear forwards;
}

@keyframes showcase-progress {
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-layers li {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .showcase-progress {
    display: none;
  }
}

/* ---- User Settings demo: a working copy of the real window's look ------------------------------ */
.setup-demo {
  max-width: 1060px;
  margin: 40px auto 0;
  text-align: center;
}

.setup-demo-head h3 {
  margin: 4px 0 10px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold-light);
}

.setup-demo-head p:not(.eyebrow) {
  max-width: 680px;
  margin: 0 auto 22px;
  color: var(--ivory);
}

.setup-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.setup-steps li {
  position: relative;
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(214, 173, 85, 0.25);
  border-radius: 10px;
  background: rgba(13, 11, 12, 0.5);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.setup-steps b {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.setup-steps span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.setup-steps strong {
  color: var(--ivory);
  font-weight: 600;
}

.setup-steps li.is-current {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(214, 173, 85, 0.16), rgba(13, 11, 12, 0.55));
  box-shadow: 0 0 0 1px rgba(214, 173, 85, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.setup-steps li.is-current span {
  color: var(--ivory);
}

.setup-steps li.is-done b::after {
  content: " \2713";
  color: #7fe38a;
}

.setup-steps li.is-done {
  border-color: rgba(127, 227, 138, 0.4);
}

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

@media (max-width: 560px) {
  /* Compact on phones so the demo is reached with less scrolling: two small cards per row, last step full width */
  .setup-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }

  .setup-steps li {
    padding: 9px 10px 10px 12px;
    border-radius: 8px;
  }

  .setup-steps li:last-child {
    grid-column: 1 / -1;
  }

  .setup-steps b {
    margin-bottom: 2px;
    font-size: 0.62rem;
  }

  .setup-steps span {
    font-size: 0.76rem;
    line-height: 1.4;
  }
}

.us-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #020404;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  color: #d8d4ce;
  text-align: left;
  font-family: "Segoe UI", var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
}

.us-titlebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  background: #c8407e;
  color: #fff;
  font-size: 0.78rem;
}

.us-titlebar span {
  flex: 1;
}

.us-titlebar em {
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.us-winctl {
  display: flex;
  gap: 18px;
  font-style: normal;
}

.us-winctl b {
  font-weight: 400;
  opacity: 0.85;
}

.us-frame {
  margin: 8px;
  padding: 0 22px 18px;
  border: 1px solid rgba(176, 138, 60, 0.6);
}

.us-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(176, 138, 60, 0.5);
}

.us-brand {
  color: #e8c878;
  font-weight: 600;
  font-size: 0.86rem;
}

.us-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}

.us-links u {
  color: #19e6ff;
  font-weight: 700;
  font-size: 0.8rem;
}

.us-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 190px;
  gap: 8px 30px;
  align-items: start;
  padding-top: 16px;
}

.us-title {
  display: inline-block;
  margin: 0 0 22px;
  padding-bottom: 6px;
  border-bottom: 2px solid #19e6ff;
  color: #19e6ff;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.us-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.us-row > span,
.us-frow > span {
  color: #e8c878;
  font-weight: 700;
  font-size: 0.82rem;
}

.us-row select,
.us-frow select,
.us-frow input,
.us-keys {
  width: 100%;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0;
  background: #0b0e0e;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
}

.us-row select,
.us-frow select {
  cursor: pointer;
}

.us-row select:focus-visible,
.us-frow select:focus-visible,
.us-frow input:focus-visible {
  outline: 2px solid #19e6ff;
  outline-offset: 1px;
}

.us-trigger {
  margin-top: -4px;
}

.us-trig-input {
  display: flex;
  gap: 10px;
}

.us-trig-input input {
  flex: 1;
  min-width: 0;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0;
  background: #0b0e0e;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
}

.us-trig-input input.is-recording {
  border-color: #19e6ff;
  color: #19e6ff;
  animation: us-blink 1s ease-in-out infinite;
}

.us-trig-input input:focus-visible {
  outline: 2px solid #19e6ff;
  outline-offset: 1px;
}

.us-trig-hint {
  margin: -6px 0 14px 124px;
  color: #77726c;
  font-size: 0.72rem;
}

.us-trig-hint.is-warn {
  color: #f0c96a;
}

.us-trig-hint.is-ok {
  color: #7fe38a;
}

.us-xbnote {
  margin: -4px 0 0 124px;
  color: #77726c;
  font-size: 0.72rem;
}

.us-mouse {
  position: relative;
  justify-self: end;
  width: 190px;
  padding-top: 4px;
}

.us-mouse img {
  display: block;
  width: 110px;
  height: auto;
  margin-left: auto;
  filter: drop-shadow(0 0 10px rgba(214, 173, 85, 0.25));
}

.us-xb {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a98a4a;
  font-size: 0.82rem;
  font-weight: 700;
  transition: color 0.2s ease;
}

.us-xb::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

.us-xb2 {
  top: 26px;
}

.us-xb1 {
  top: 60px;
}

.us-xb.is-on {
  color: #f6d67a;
}

.us-status {
  margin: 4px 0 0;
  color: #b9b3ac;
  font-size: 0.74rem;
}

.us-divider {
  position: relative;
  height: 14px;
  margin: 10px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.us-divider i {
  position: absolute;
  left: 28%;
  top: -6px;
  width: 1px;
  height: 11px;
  background: #d94a3d;
}

.us-divider b {
  position: absolute;
  left: 50%;
  top: -4px;
  color: #19e6ff;
  font-size: 0.72rem;
  transform: translateX(-50%);
}

.us-section {
  margin: 14px 0 0;
  color: #e8c878;
  font-size: 1.3rem;
  font-weight: 500;
}

.us-sub {
  margin: 0 0 12px;
  color: #b9b3ac;
  font-size: 0.78rem;
}

.us-form {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px 28px;
  padding: 18px 20px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #050808;
}

.us-frow {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-left: 22px;
}

.us-frow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #b08a3c;
}

.us-keys {
  display: flex;
  align-items: center;
  color: #b9b3ac;
}

.us-keys:focus-visible {
  outline: 2px solid #19e6ff;
  outline-offset: 1px;
}

.us-rec-note {
  margin-top: 12px !important;
  color: #77726c !important;
  font-size: 0.72rem !important;
}

.us-keys.has-keys {
  color: #f6d67a;
  font-weight: 600;
}

.us-keys.is-recording {
  border-color: #19e6ff;
  color: #19e6ff;
  animation: us-blink 1s ease-in-out infinite;
}

@keyframes us-blink {
  50% {
    box-shadow: 0 0 0 3px rgba(25, 230, 255, 0.25);
  }
}

.us-examples {
  grid-column: 1 / -1;
  margin: -6px 0 0;
  color: #77726c;
  font-size: 0.72rem;
}

.us-side {
  padding-top: 4px;
}

.us-side p {
  margin: 0 0 8px;
  color: #a9a39c;
  font-size: 0.78rem;
}

.us-example-line {
  margin-bottom: 26px !important;
}

.us-press-notes p {
  margin: 0 0 3px;
  padding-left: 8px;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.us-press-notes p.is-active {
  border-left-color: #19e6ff;
  color: #f2eee8;
}

.us-hide-note {
  margin-top: 14px !important;
}

.us-rec {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.us-btn {
  min-height: 34px;
  padding: 6px 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  background: #0b0e0e;
  color: #e6e2dc;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.us-btn:hover {
  border-color: #19e6ff;
  background: #142124;
}

.us-btn-cyan {
  color: #19e6ff;
}

.us-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}

.us-btn-wide {
  width: 100%;
  min-height: 40px;
}

.us-result {
  min-height: 1.3em;
  margin: 12px 0 0;
  color: #7fe38a;
  font-size: 0.8rem;
}

.us-result.is-warn {
  color: #f0c96a;
}

.us-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.us-list li {
  margin: 4px 0;
  padding: 5px 10px;
  border-left: 2px solid #d6ad55;
  background: rgba(214, 173, 85, 0.07);
  color: #e6e2dc;
  font-size: 0.76rem;
}

.us-list li b {
  color: #f0c96a;
  font-weight: 600;
}

.us-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 20px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.us-notes {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid #19e6ff;
  list-style: none;
  color: #b2ada6;
  font-size: 0.74rem;
}

.us-notes li {
  margin: 0 0 5px;
  padding-left: 16px;
  text-indent: -16px;
}

.us-notes li::before {
  content: "-";
  display: inline-block;
  width: 16px;
  text-indent: 0;
  color: #77726c;
}

.us-voicewrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 10px;
  align-self: start;
}

.us-voice {
  padding: 10px 12px 12px;
  border: 1px solid rgba(25, 230, 255, 0.75);
  background: #07151b;
  text-align: center;
}

.us-voice p {
  margin: 0;
  color: #19e6ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.us-speaking {
  color: #b9f3ff !important;
}

.us-wave {
  height: 54px;
  margin: 8px 0;
  border-top: 1px solid rgba(25, 230, 255, 0.4);
  border-bottom: 1px solid rgba(25, 230, 255, 0.4);
}

.us-wave canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.us-vol {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 6px;
  border: 1px solid rgba(25, 230, 255, 0.45);
  background: #07151b;
}

.us-vol p {
  margin: 0;
  color: #19e6ff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.us-vol input {
  width: 24px;
  height: 64px;
  margin: 6px 0;
  background: transparent;
  cursor: pointer;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: none;
  -webkit-appearance: none;
}

.us-vol input::-webkit-slider-runnable-track {
  width: 4px;
  border-radius: 2px;
  background: #3a3f42;
}

.us-vol input::-moz-range-track {
  width: 4px;
  border-radius: 2px;
  background: #3a3f42;
}

.us-vol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 10px;
  margin-left: -7px;
  border: 0;
  border-radius: 3px;
  background: #1f8eea;
}

.us-vol input::-moz-range-thumb {
  width: 18px;
  height: 10px;
  border: 0;
  border-radius: 3px;
  background: #1f8eea;
}

.us-vol output {
  color: #f0a040;
  font-size: 0.7rem;
  font-weight: 600;
}

@media (max-width: 560px) {
  .setup-demo-head h3 {
    font-size: 1.6rem;
  }
}

/* On phones and small tablets the User Settings window is shown exactly as on a PC, scaled to fit (see
   initDemoFit in script.js). Too small to use in place, it opens full size on tap. */
.us-fit {
  position: relative;
}

.us-fit-inner {
  width: 100%;
}

.us-fit.is-scaled .us-fit-inner {
  transform-origin: top left;
}

.us-fit.is-preview {
  cursor: pointer;
}

.us-fit.is-preview .us-fit-inner {
  pointer-events: none;
  user-select: none;
}

.us-fit-open {
  display: none;
}

.us-fit.is-preview .us-fit-open {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e2a6, var(--gold));
  color: #18110b;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.us-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #020404;
}

.us-zoom[hidden] {
  display: none;
}

.us-zoom-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(214, 173, 85, 0.4);
  background: #120f10;
  color: var(--gold-light);
  font-size: 0.86rem;
  font-weight: 600;
}

.us-zoom-bar span {
  flex: 1;
}

.us-zoom-bar button {
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.us-zoom-scroll {
  flex: 1;
  overflow: auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
}

.us-zoom-stage {
  position: relative;
}

.us-zoom-stage .us-fit-inner {
  transform-origin: top left;
}


/* ---- How it works: steps beside a working copy of the launcher ------------------------------------ */
.process-wrap {
  max-width: 612px;
  margin: 0 auto;
}

.lc-demo {
  width: 100%;
  min-width: 0;
  max-width: 612px;
  margin: 0 auto;
}

.lc-note {
  text-align: center;
}

.lc-reset {
  display: block;
  margin: 8px auto 0;
  padding: 6px 16px;
  border: 1px solid rgba(214, 173, 85, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.lc-reset[hidden] {
  display: none;
}

.lc-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #121016;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  color: #ebe8e0;
  font-family: "Segoe UI", var(--sans);
  text-align: left;
}

.lc-titlebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  background: #c8407e;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.lc-titlebar span {
  flex: 1;
}

.lc-titlebar em {
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.lc-body {
  position: relative;
  padding: 24px 90px 44px;
}

.lc-title {
  margin: 0;
  color: #d6b25c;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
}

.lc-sub {
  margin: 4px 0 14px;
  color: #b4aea4;
  font-size: 0.86rem;
  text-align: center;
}

.lc-rule {
  height: 1px;
  margin: 0 -10px 22px;
  background: #785e2d;
}

.lc-label {
  display: block;
  margin: 0 0 4px;
  color: #d6b25c;
  font-size: 0.8rem;
  font-weight: 600;
}

.lc-input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 4px 9px;
  border: 1px solid #4a4452;
  border-radius: 0;
  background: #221d27;
  color: #ebe8e0;
  font: inherit;
  font-size: 0.92rem;
}

.lc-email {
  border-color: rgba(255, 255, 255, 0.9);
}

.lc-input:focus-visible {
  outline: 2px solid #d6b25c;
  outline-offset: 1px;
}

.lc-request-row {
  display: flex;
  justify-content: flex-end;
  margin: 9px 0 16px;
}

.lc-btn {
  border: 0;
  border-radius: 0;
  background: #d6b25c;
  color: #121016;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lc-btn:hover:not(:disabled) {
  background: #e3c682;
}

.lc-btn:disabled,
.lc-show:disabled,
.lc-input:disabled {
  cursor: default;
  opacity: 0.55;
}

.lc-btn-request {
  width: 220px;
  height: 32px;
}

.lc-code-row {
  display: flex;
  gap: 4px;
}

.lc-show {
  flex: none;
  width: 48px;
  height: 32px;
  border: 0;
  background: #221d27;
  color: #b4aea4;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
}

.lc-activate-row {
  display: flex;
  justify-content: center;
  margin: 24px 0 22px;
}

.lc-btn-activate {
  width: 200px;
  height: 40px;
}

.lc-status {
  margin: 0;
  color: #d6b25c;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.lc-status.is-error {
  color: #e65f73;
}

.lc-detail {
  margin: 4px -46px 12px;
  color: #ebe8e0;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.lc-detail.is-error {
  color: #e65f73;
}

.lc-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #d6b25c;
  font-size: 0.72rem;
}

.lc-links i {
  color: #785e2d;
  font-style: normal;
}

.lc-progress {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid #b9b5ad;
  background: #e9e7e2;
}

.lc-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  background: #d6b25c;
  opacity: 0;
}

.lc-progress.is-busy span {
  opacity: 1;
  animation: lc-marquee 1.1s linear infinite;
}

@keyframes lc-marquee {
  to {
    left: 100%;
  }
}

.lc-version {
  position: absolute;
  left: 14px;
  bottom: 10px;
  margin: 0;
  color: #b4aea4;
  font-size: 0.66rem;
}

@media (prefers-reduced-motion: reduce) {
  .lc-progress.is-busy span {
    animation: none;
    left: 35%;
  }
}

/* The website's window only requests the code; activating happens in the launcher, so the button is a Store link. */
.lc-turnstile {
  display: flex;
  justify-content: center;
  margin: 14px 0 0;
}

.lc-btn-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 22px;
  text-decoration: none;
  white-space: nowrap;
}

/* Create account: a plain website form + three steps (the launcher window look is no longer copied) */
.ca-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(59, 22, 31, 0.55), rgba(13, 11, 12, 0.92));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.ca-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ca-row {
  display: flex;
  gap: 10px;
}

.ca-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--ivory);
  font: inherit;
  font-size: 1rem;
}

.ca-input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.ca-btn,
.ca-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e2a6, var(--gold));
  color: #18110b;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ca-btn {
  height: 52px;
}

.ca-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ca-turnstile {
  display: flex;
  margin-top: 14px;
}

.ca-progress {
  position: relative;
  height: 3px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(214, 173, 85, 0.15);
}

.ca-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  background: var(--gold);
  opacity: 0;
}

.ca-progress.is-busy span {
  opacity: 1;
  animation: lc-marquee 1.1s linear infinite;
}

.ca-status {
  margin: 14px 0 0;
  color: var(--gold-light);
  font-weight: 700;
}

.ca-detail {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.ca-status.is-error,
.ca-detail.is-error {
  color: #ef7085;
}

.ca-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.ca-steps li {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.ca-steps li > span {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

.ca-steps strong {
  color: var(--ivory);
}

.ca-steps p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ca-store {
  height: 40px;
  margin-top: 10px;
  padding: 0 16px;
  font-size: 0.8rem;
  white-space: normal;
  text-align: center;
}

.ca-note {
  margin: 22px 0 0;
  text-align: center;
}

@media (max-width: 720px) {
  .ca-card {
    padding: 22px 18px;
  }

  .ca-row {
    flex-direction: column;
  }

  .ca-steps {
    grid-template-columns: 1fr;
  }
}

.process-section .process-wrap {
  max-width: 860px;
}

/* Below the steps only on phones (step 2's own button is hidden there) */
.ca-store-after {
  display: none;
}

@media (max-width: 720px) {
  .ca-store-step {
    display: none;
  }

  .ca-store-after {
    display: flex;
    margin: 22px auto 0;
    max-width: 320px;
  }
}

/* Phones: the three steps become the same "STEP N" cards as the setup steps above */
@media (max-width: 720px) {
  .ca-steps {
    gap: 12px;
    padding-top: 22px;
  }

  .ca-steps li {
    display: block;
    padding: 14px 14px 14px 16px;
    border: 1px solid rgba(214, 173, 85, 0.25);
    border-radius: 10px;
    background: rgba(13, 11, 12, 0.5);
  }

  .ca-steps li > span {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 4px;
    border: 0;
    border-radius: 0;
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
  }

  .ca-steps li > span::before {
    content: "Step ";
  }
}

.final-cta-text {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--muted);
  line-height: 1.7;
}

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Bigger Store buttons in Create account */
.ca-store-step {
  width: 100%;
  height: auto;
  min-height: 50px;
  margin-top: 14px;
  padding: 10px 18px;
  font-size: 0.95rem;
  line-height: 1.25;
}

.ca-store-after {
  min-height: 54px;
  padding: 0 26px;
  font-size: 1rem;
}

/* One long single-line Store button below the steps on every screen size */
.ca-store-step {
  display: none;
}

.ca-store-after {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 54px;
  margin: 26px auto 0;
  padding: 0 40px;
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .ca-store-after {
    padding: 0 22px;
    font-size: 0.92rem;
  }
}

/* The heading font draws numbers "old-style" (the 3 in "30" hangs below the line); use lining figures in headings */
.hero h1,
.section-heading h2,
.final-cta h2 {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Closing heading on one line on wide screens; balanced lines on narrow ones */
.final-cta h2 {
  max-width: 1100px;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  text-wrap: balance;
}

@media (min-width: 900px) {
  .final-cta h2 {
    white-space: nowrap;
  }
}

/* "Create your free account." on one line except on small phones */
#how-it-works .section-heading {
  max-width: none;
}

@media (min-width: 640px) {
  #how-it-works .section-heading h2 {
    white-space: nowrap;
  }
}

/* "One mouse, / tuned to your profession." stays on two lines except on small phones */
#professions .section-heading {
  max-width: none;
}

@media (min-width: 640px) {
  #professions .section-heading h2 {
    white-space: nowrap;
  }
}

/* Efficiency Dashboard example card (static) */
.dash-demo {
  max-width: 900px;
  margin: 72px auto 0;
  text-align: center;
}

.dash-card {
  position: relative;
  margin-top: 26px;
  padding: 22px 22px 24px;
  border: 1px solid rgba(214, 173, 85, 0.4);
  border-radius: 12px;
  background: #070909;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  text-align: left;
}

.dash-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 3px 10px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.dash-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-bottom: 14px;
  text-align: center;
}

.dash-brand {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.dash-head strong {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.dash-head em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.dash-tabs {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(214, 173, 85, 0.25);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dash-tabs .is-on {
  color: #55c8ee;
  box-shadow: 0 3px 0 #b89540;
  padding-bottom: 9px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.dash-box {
  grid-column: span 2;
  padding: 16px;
  border: 1px solid rgba(214, 173, 85, 0.28);
  border-radius: 8px;
  background: rgba(20, 22, 22, 0.8);
  text-align: center;
}

.dash-box h4 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.dash-box b {
  display: block;
  color: #7fdcf0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.55rem;
}

.dash-box small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.74rem;
}

.dash-wide {
  grid-column: span 3;
  text-align: left;
}

.dash-wide h4 {
  text-align: center;
}

.dash-box dl {
  margin: 0;
}

.dash-box dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(214, 173, 85, 0.12);
}

.dash-box dt {
  color: var(--ivory);
  font-size: 0.86rem;
}

.dash-box dd {
  margin: 0;
  color: #7fdcf0;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 700;
}

.dash-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-bars li {
  display: grid;
  grid-template-columns: 84px 1fr 48px 42px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.86rem;
}

.dash-bars span {
  color: var(--ivory);
}

.dash-bars i {
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 4px;
  background: linear-gradient(90deg, #b89540, #f0d690);
}

.dash-bars b {
  color: #7fdcf0;
  font-size: 0.82rem;
  text-align: right;
}

/* On phones the dashboard keeps this desktop layout and is scaled to fit (see initDemoFit); tap opens it full size. */

.dash-gold {
  color: #f0d690 !important;
}

.dash-bars em {
  color: #7fdcf0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  font-style: normal;
  text-align: right;
}

.dash-bars b {
  color: #f0d690;
}

.dash-box h4.dash-gold + small {
  margin: 0 0 6px;
  color: #fff;
  font-weight: 700;
}

/* "View math formula" under the dashboard example */
.dash-formula {
  max-width: 900px;
  margin: 22px auto 0;
  text-align: left;
}

.dash-formula summary {
  display: block;
  width: max-content;
  margin: 0 auto;
  padding: 11px 26px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(214, 173, 85, 0.08);
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

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

.dash-formula[open] summary {
  background: rgba(214, 173, 85, 0.18);
}

.dash-formula-body {
  margin-top: 16px;
  padding: 26px 28px 28px;
  border: 1px solid rgba(214, 173, 85, 0.3);
  border-radius: 12px;
  background: rgba(7, 9, 9, 0.85);
}

.dash-formula-body h4 {
  margin: 0 0 6px;
  color: var(--gold-light);
  font-size: 1.25rem;
}

.dash-formula-body p {
  margin: 0 0 10px;
  color: var(--ivory);
  font-size: 1rem;
  line-height: 1.7;
}

.dash-formula-intro {
  color: var(--muted) !important;
}

.dash-formula-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}

.dash-formula-card {
  padding: 16px;
  border: 1px solid rgba(214, 173, 85, 0.28);
  border-radius: 10px;
  background: rgba(20, 22, 22, 0.8);
}

.dash-formula-card h5,
.dash-formula-body .dash-formula-step {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.dash-formula-body .dash-formula-step {
  margin-top: 26px;
  font-size: 1.05rem;
}

.dash-formula-body .dash-formula-eq {
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: rgba(214, 173, 85, 0.1);
  color: var(--gold-light);
  font-weight: 700;
  font-size: 0.98rem;
}

.dash-formula-body .dash-formula-ex {
  color: var(--muted);
  font-size: 0.94rem;
}

.dash-formula-body .dash-formula-note {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(214, 173, 85, 0.2);
  color: var(--muted);
  font-size: 0.88rem;
}

@media (max-width: 760px) {
  .dash-formula-cards {
    grid-template-columns: 1fr;
  }

  .dash-formula-body {
    padding: 20px 18px 22px;
  }
}

/* On phones the header button points to Create account instead of Download, since the hero's own
   Download button sits right below it - having both say "download" reads as a duplicate. */
.header-cta-account {
  display: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .header-cta-download {
    display: none;
  }

  .header-cta-account {
    display: inline-flex;
  }
}

/* "Which shortcut is on which button" rotating example, between the showcase heading and the HUD demo.
   .xb-stage is a fixed 640x460 design (see aspect-ratio below) - the photo, the two callout pills, and
   the leader-line SVG are all positioned as percentages of that one box, so the lines stay pointed at
   the real XButton1/XButton2 locations on the photo at any render size, not just one fixed width. */
.xb-slide {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.xb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 460;
}

.xb-photo {
  position: absolute;
  left: 49.22%;
  top: 4.35%;
  width: 50.78%;
  height: 91.3%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

.xb-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xb-lines .xb-line {
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
}

.xb-lines .xb-dot-glow {
  fill: var(--gold);
  opacity: 0.5;
}

.xb-lines .xb-dot {
  fill: var(--gold-light);
}

/* One bordered box per button, bottom-anchored for XButton2 (so it grows upward) and top-anchored
   for XButton1 (so it grows downward) - Layer 1 sits at the anchored edge and never moves; Layer 2
   and 3 grow/shrink the box smoothly instead of popping in, so the reveal reads as "this button
   gained a row" rather than a jump-cut. */
.xb-group {
  position: absolute;
  left: 3.13%;
  width: 26.56%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: rgba(13, 11, 12, 0.9);
  overflow: hidden;
  text-align: left;
}

.xb-group-2 {
  bottom: 63.04%;
}

.xb-group-1 {
  top: 63.04%;
}

.xb-layer-row {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 320ms ease, opacity 260ms ease;
}

.xb-layer-row.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.xb-layer-row-inner {
  overflow: hidden;
  min-height: 0;
  padding: 6px 10px;
}

.xb-layer-row:not(:first-child) .xb-layer-row-inner {
  border-top: 1px solid rgba(214, 173, 85, 0.22);
}

.xb-callout-tag {
  display: block;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.xb-callout-value {
  display: block;
  margin-top: 2px;
  color: var(--gold-light);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* Layer 1 is the plain click - kept bold and bright. Layer 2 and 3 need a held trigger key to
   reach, so they step down in size to read as progressively "further" from the default. */
.xb-layer-row[data-layer="2"] .xb-callout-value,
.xb-chip-wrap[data-layer="2"] .xb-callout-value {
  font-size: 0.8rem;
}

.xb-layer-row[data-layer="3"] .xb-callout-value,
.xb-chip-wrap[data-layer="3"] .xb-callout-value {
  font-size: 0.72rem;
}

/* Below 641px, keep the vertical stacked boxes (.xb-group, already tested on phones); at and above
   it, switch to the horizontal right-to-left chain (.xb-chain) instead. Both read the same
   data-layer attributes, so one JS toggle loop drives whichever is visible. */
.xb-desktop-only {
  display: none;
}

@media (min-width: 641px) {
  .xb-mobile-only {
    display: none;
  }

  .xb-desktop-only {
    display: flex;
  }
}

/* Right-anchored at exactly the same point the leader line starts from (x=190 of the 640-wide
   design, i.e. 450 from the right edge), so Layer 1's chip never moves - only the chips further
   left appear or disappear as layers are added. */
.xb-chain {
  position: absolute;
  right: 70.31%;
  align-items: center;
  gap: 0;
}

.xb-chain-2 {
  top: 33.26%;
  transform: translateY(-50%);
}

.xb-chain-1 {
  top: 66.74%;
  transform: translateY(-50%);
}

.xb-chip {
  display: block;
  flex: none;
  padding: 6px 10px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: rgba(13, 11, 12, 0.9);
  text-align: left;
  white-space: nowrap;
}

.xb-arrow {
  flex: none;
  padding: 0 8px;
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
}

/* Same accordion trick as the mobile boxes, just on the horizontal axis - a newly revealed layer's
   chip+arrow grows in from zero width instead of popping into place. */
.xb-chip-wrap {
  flex: none;
  max-width: 260px;
  overflow: hidden;
  opacity: 1;
  transition: max-width 320ms ease, opacity 260ms ease;
}

.xb-chip-wrap.is-collapsed {
  max-width: 0;
  opacity: 0;
}

.xb-chip-wrap-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.xb-slide-caption {
  max-width: 480px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.xb-slide-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.xb-slide-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.xb-slide-dots button[aria-selected="true"] {
  background: var(--gold);
}

@media (max-width: 420px) {
  .xb-callout-value {
    font-size: 0.82rem;
  }
}