/* Spark Break — site styles.
   Values transcribed verbatim from the Claude Design source
   ("Spark Break Site.dc.html"). The design is inline-styled; these are the
   same declarations lifted into classes so that media queries can reach them.
   Do not "tidy" a number here without changing it in the design too. */

/* ---------- Fonts ---------------------------------------------------- */
/* Self-hosted, not Google Fonts: the footer promises no third-party
   requests, and the CSP in firebase.json enforces it. Both are variable
   fonts, so one file covers weights 400-800. */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ------------------------------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  background: #0B0908;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }

/* Text is not selectable: the site should feel like an app, not a document.
   Drag-selecting a heading was the main way it broke that illusion. Links
   and buttons still work; emails are mailto, so nothing needs copying. */
html, body {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}
a { color: #FFB020; text-decoration: none; }
summary::-webkit-details-marker { display: none; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid #FFD666;
  outline-offset: 3px;
  border-radius: 4px;
}

/* `glowPulse` and `floatY` were the first design's hero animations. The
   motion layer at the bottom of this file supersedes them with `sbGlow` and
   `sbFloat`; reduced-motion is handled there too, for everything at once. */

.page {
  background:
    radial-gradient(120% 52% at 50% 0%, rgba(255, 124, 26, .13), transparent 62%),
    #0B0908;
  min-height: 100vh;
  font-family: Manrope, system-ui, sans-serif;
  color: #FFF4E4;
  padding-bottom: 96px;
  /* No `overflow-x` here. It computes `overflow-y: auto`, which turns this
     element into a scroll container — and the sticky header then sticks to
     *it* rather than to the page, so it scrolls away and takes the progress
     bar with it. Nothing overflows sideways at any width, checked. */
}

/* ---------- Shared containers ---------------------------------------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.sec { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) 24px 0; }
.sec-col { display: flex; flex-direction: column; gap: 34px; }
.sec-row { display: flex; flex-wrap: wrap; gap: 44px; }

.eyebrow {
  font: 700 11.5px/1 Manrope, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 176, 32, .75);
}

.h2 {
  margin: 0;
  font: 700 clamp(28px, 3.4vw, 40px)/1.1 Outfit, sans-serif;
  letter-spacing: -.028em;
  color: #FFF4E4;
}
.h2-sm {
  margin: 0;
  font: 700 24px/1.2 Outfit, sans-serif;
  letter-spacing: -.02em;
  color: #FFF4E4;
}
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

/* Dashed chip marking something Nik still has to supply. Part of the
   design on purpose — it makes an unfilled blank impossible to miss. */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 176, 32, .5);
  background: rgba(255, 176, 32, .08);
  color: #FFD666;
  font-weight: 600;
}

/* ---------- Header ---------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(11, 9, 8, .82);
  border-bottom: 1px solid rgba(255, 244, 228, .07);
}
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span {
  font: 800 17px/1 Outfit, sans-serif;
  letter-spacing: -.02em;
  color: #FFF4E4;
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}
/* `:not(.nav-cta)` is load-bearing, not tidiness: `.nav a` outranks
   `.nav-cta` on specificity and would otherwise repaint the button's text
   in link colour and strip its horizontal padding. */
.nav a:not(.nav-cta) { font: 600 14px/1 Manrope, sans-serif; color: rgba(255, 244, 228, .62); }
.nav a[aria-current='page'] { color: #FFB020; }
.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFCB55, #FF9E22);
  color: #2B1607;
  font: 700 14px/1 Manrope, sans-serif;
  box-shadow: 0 6px 20px rgba(255, 150, 40, .24);
}

/* ---------- Home · hero ---------------------------------------------- */
.hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}
.hero-copy { flex: 1 1 460px; display: flex; flex-direction: column; gap: 22px; }
.hero h1 {
  margin: 0;
  font: 800 clamp(40px, 5.2vw, 62px)/1.03 Outfit, sans-serif;
  letter-spacing: -.035em;
  color: #FFF4E4;
  text-wrap: balance;
}
.hero-lead {
  margin: 0;
  max-width: 520px;
  font: 500 17.5px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .62);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}
.appstore {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 56px;
  padding: 0 22px;
  border-radius: 14px;
  background: #FFF4E4;
  color: #0B0908;
}
.appstore-labels { display: flex; flex-direction: column; gap: 1px; }
.appstore-small {
  font: 500 10.5px/1 Manrope, sans-serif;
  letter-spacing: .02em;
  color: rgba(11, 9, 8, .66);
}
.appstore-big { font: 700 18px/1 Outfit, sans-serif; letter-spacing: -.01em; }
.hero-price {
  font: 500 13.5px/1.5 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
  max-width: 210px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 228, .1);
  font: 600 12.5px/1 Manrope, sans-serif;
  color: rgba(255, 244, 228, .55);
}

.hero-device {
  flex: 0 1 380px;
  display: flex;
  justify-content: center;
  position: relative;
  min-width: 300px;
}
.glow {
  position: absolute;
  width: 340px;
  height: 340px;
  top: 40px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 140, 30, .3), transparent 68%);
  pointer-events: none;
}
.phone {
  position: relative;
  width: 322px;
  max-width: 100%;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, rgba(255, 244, 228, .16), rgba(255, 244, 228, .04));
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
.phone-screen {
  border-radius: 34px;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255, 124, 26, .16), transparent 60%),
    #0B0908;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 12px/1 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
}
.phone-head { display: flex; flex-direction: column; gap: 5px; }
.phone-week {
  font: 700 10.5px/1 Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 176, 32, .8);
}
.phone-cap {
  font: 800 30px/1.05 Outfit, sans-serif;
  letter-spacing: -.03em;
  color: #FFF4E4;
}
.phone-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border-radius: 20px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .06);
}
.phone-card-row {
  display: flex;
  justify-content: space-between;
  font: 600 12.5px/1 Manrope, sans-serif;
  color: rgba(255, 244, 228, .55);
}
.bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 244, 228, .07);
  overflow: hidden;
}
.bar > i {
  display: block;
  width: 48%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF6A18, #FFD666);
  box-shadow: 0 0 16px rgba(255, 150, 40, .5);
}
.phone-note { font: 500 11px/1 Manrope, sans-serif; color: rgba(255, 244, 228, .5); }
.phone-tiles { display: flex; gap: 12px; }
.phone-tile {
  flex: 1;
  padding: 14px;
  border-radius: 18px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .06);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.phone-tile.tight { gap: 4px; }
.phone-tile b { font: 800 22px/1 Outfit, sans-serif; color: #FFF4E4; font-weight: 800; }
.phone-tile small { font: 500 12px/1.3 Manrope, sans-serif; color: rgba(255, 244, 228, .5); }
.dots { display: flex; gap: 5px; }
.dots span { width: 9px; height: 9px; border-radius: 999px; background: #FFB020; }
.dots span.off { background: rgba(255, 244, 228, .14); }
.phone-foot {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255, 244, 228, .04);
}
.phone-foot img { width: 34px; height: auto; }
.phone-foot span { font: 500 12.5px/1.4 Manrope, sans-serif; color: rgba(255, 244, 228, .55); }

.mock-note {
  max-width: 1160px;
  margin: 14px auto 0;
  padding: 0 24px;
  font: 500 11.5px/1.4 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
}

/* ---------- Home · steps --------------------------------------------- */
.head-block { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  border-radius: 24px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .07);
}
.step-num {
  font: 800 42px/1 Outfit, sans-serif;
  letter-spacing: -.04em;
  color: rgba(255, 176, 32, .28);
}
.step h3 {
  margin: 0;
  font: 700 21px/1.25 Outfit, sans-serif;
  letter-spacing: -.02em;
  color: #FFF4E4;
}
.step p {
  margin: 0;
  font: 500 15.5px/1.6 Manrope, sans-serif;
  color: rgba(255, 244, 228, .58);
  text-wrap: pretty;
}

/* ---------- Home · differences --------------------------------------- */
.diff-copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.diff-copy p {
  margin: 0;
  max-width: 400px;
  font: 500 16px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .55);
  text-wrap: pretty;
}
.diff-list { flex: 1 1 420px; display: flex; flex-direction: column; gap: 2px; }
.diff-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 244, 228, .08);
}
.diff-item:last-child { border-bottom: 1px solid rgba(255, 244, 228, .08); }
.diff-item > .bullet {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: #FF8A2B;
}
.diff-item div { display: flex; flex-direction: column; gap: 6px; }
.diff-item h3 { margin: 0; font: 700 17px/1.3 Outfit, sans-serif; color: #FFF4E4; }
.diff-item p {
  margin: 0;
  font: 500 15px/1.6 Manrope, sans-serif;
  color: rgba(255, 244, 228, .55);
}
.inline-link { color: #FFB020; font-weight: 700; }

/* ---------- Home · privacy banner ------------------------------------ */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  padding: clamp(32px, 4vw, 52px);
  border-radius: 28px;
  background: linear-gradient(140deg, rgba(255, 138, 43, .13), rgba(255, 176, 32, .03));
  border: 1px solid rgba(255, 176, 32, .18);
}
.banner-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.banner h2 {
  margin: 0;
  font: 700 clamp(24px, 3vw, 34px)/1.18 Outfit, sans-serif;
  letter-spacing: -.025em;
  color: #FFF4E4;
  text-wrap: balance;
}
.banner p {
  margin: 0;
  max-width: 560px;
  font: 500 15.5px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .6);
}
.banner-link { font: 700 15px/1 Manrope, sans-serif; color: #FFB020; margin-top: 4px; }
.banner img {
  width: clamp(110px, 14vw, 164px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 20px 36px rgba(255, 120, 20, .3));
}

/* ---------- Home · pricing ------------------------------------------- */
#download { scroll-margin-top: 88px; display: flex; flex-direction: column; gap: 30px; }
#download .head-block { max-width: 620px; }
#download .head-block p {
  margin: 0;
  font: 500 16px/1.6 Manrope, sans-serif;
  color: rgba(255, 244, 228, .55);
}
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 26px;
  border-radius: 24px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .08);
  /* the badge and the chosen-state ring both anchor here */
  position: relative;
}
.plan-badge {
  position: absolute;
  /* Above the annual card's conic ring, which paints at z-index 2. */
  z-index: 3;
  top: -11px;
  left: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFCB55, #FF9E22);
  color: #2B1607;
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan-name {
  font: 700 13px/1 Manrope, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, .6);
}
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price b {
  font: 800 40px/1 Outfit, sans-serif;
  letter-spacing: -.03em;
  color: #FFF4E4;
  font-weight: 800;
}
.plan-price span { font: 500 15px/1 Manrope, sans-serif; color: rgba(255, 244, 228, .45); }
.plan-sub { font: 600 14px/1 Manrope, sans-serif; color: rgba(255, 244, 228, .4); }
.plan-sub.accent { color: #FFB020; }
.plan p {
  margin: 0;
  font: 500 14.5px/1.55 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
}
.plan-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 228, .18);
  color: #FFF4E4;
  font: 700 15.5px/1 Manrope, sans-serif;
}
.plan[aria-checked='true'] .plan-cta {
  border-color: transparent;
  background: linear-gradient(180deg, #FFCB55, #FF9E22);
  color: #2B1607;
}

.legal-box {
  padding: 22px 24px;
  border-radius: 18px;
  background: rgba(255, 244, 228, .035);
  border: 1px solid rgba(255, 244, 228, .07);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-box p {
  margin: 0;
  font: 500 13.5px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
  max-width: 880px;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font: 700 13.5px/1 Manrope, sans-serif;
}

/* ---------- Legal pages (shared) ------------------------------------- */
.legal-head {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legal-head.narrow { max-width: 820px; }
.legal-head h1, .support-copy h1 {
  margin: 0;
  font: 800 clamp(34px, 4.4vw, 52px)/1.05 Outfit, sans-serif;
  letter-spacing: -.032em;
  color: #FFF4E4;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.legal-date { font: 500 14.5px/1.5 Manrope, sans-serif; color: rgba(255, 244, 228, .5); }
.lead-p {
  margin: 0;
  font: 500 17px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .6);
  max-width: 640px;
}
.legal-flag {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 244, 228, .06);
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, .5);
}

.legal-body {
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}
.toc {
  flex: 0 1 210px;
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 180px;
}
.toc-title {
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, .5);
  margin-bottom: 4px;
}
.toc a { font: 600 13.5px/1.4 Manrope, sans-serif; color: rgba(255, 244, 228, .55); }

.prose {
  flex: 1 1 560px;
  display: flex;
  flex-direction: column;
  gap: 38px;
  max-width: 700px;
}
.prose > .lead {
  margin: 0;
  font: 500 18px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .72);
  text-wrap: pretty;
}
.prose section {
  scroll-margin-top: 92px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prose section.wide { gap: 14px; }
.prose p {
  margin: 0;
  font: 500 16px/1.68 Manrope, sans-serif;
  color: rgba(255, 244, 228, .6);
}

/* Bordered row stack, used for the on-device / processor / deletion tables */
.rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 244, 228, .08);
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 15px 18px;
  background: #131010;
}
.row.head {
  gap: 4px 16px;
  padding: 14px 18px;
  background: rgba(255, 244, 228, .05);
}
.row.tight { gap: 4px 16px; }
.row dt, .row .k {
  flex: 1 1 200px;
  font: 700 14.5px/1.4 Manrope, sans-serif;
  color: #FFF4E4;
  margin: 0;
}
.row dd, .row .v {
  flex: 1 1 240px;
  font: 500 14.5px/1.5 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
  margin: 0;
}
.row.head .k, .row.head .v {
  font: 700 12px/1 Manrope, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, .5);
}
.row.k150 .k { flex: 1 1 150px; }
.row.k190 .k { flex: 1 1 190px; }
.row.k230 .k { flex: 1 1 230px; }
.row.v190 .v { flex: 1 1 190px; }
.row.v200 .v { flex: 1 1 200px; }
.row.v220 .v { flex: 1 1 220px; }

.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .07);
}
.card b { font: 700 15.5px/1.3 Outfit, sans-serif; color: #FFF4E4; font-weight: 700; }
.card span { font: 500 14.5px/1.6 Manrope, sans-serif; color: rgba(255, 244, 228, .55); }

.muted-note { margin: 0; font: 500 15px/1.6 Manrope, sans-serif; color: rgba(255, 244, 228, .5); }

/* ---------- Terms ----------------------------------------------------- */
.terms-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.notice {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255, 138, 43, .14), rgba(255, 176, 32, .03));
  border: 1px solid rgba(255, 176, 32, .28);
}
.notice img { width: 46px; height: auto; flex: none; }
.notice div { display: flex; flex-direction: column; gap: 6px; }
.notice b { font: 700 17px/1.3 Outfit, sans-serif; color: #FFF4E4; font-weight: 700; }
.notice span { font: 500 15px/1.6 Manrope, sans-serif; color: rgba(255, 244, 228, .62); }
.terms-body section { display: flex; flex-direction: column; gap: 12px; }
.terms-body section.wide { gap: 14px; }
.terms-body p {
  margin: 0;
  font: 500 16px/1.68 Manrope, sans-serif;
  color: rgba(255, 244, 228, .6);
}
.strong-inline { color: #FFF4E4; font-weight: 700; }
/* Emphasis carried by weight and colour, not italics — the design's
   `font-style:normal` on an <em>. */
.emph { color: rgba(255, 244, 228, .78); font-style: normal; font-weight: 700; }

/* ---------- Support --------------------------------------------------- */
.support-head {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
}
.support-copy { flex: 1 1 480px; display: flex; flex-direction: column; gap: 16px; }
.support-copy p {
  margin: 0;
  max-width: 520px;
  font: 500 17px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .6);
}
.support-card {
  flex: 0 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 22px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .08);
}
.card-label {
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, .5);
}
.support-email {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 176, 32, .5);
  background: rgba(255, 176, 32, .08);
  color: #FFD666;
  font: 700 18px/1.5 Manrope, sans-serif;
  word-break: break-word;
}
.support-card > span:last-child {
  font: 500 14.5px/1.6 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
}

.faq {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq h2 {
  margin: 0 0 6px;
  font: 700 clamp(24px, 3vw, 32px)/1.15 Outfit, sans-serif;
  letter-spacing: -.025em;
  color: #FFF4E4;
}
details {
  border-radius: 18px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .08);
  overflow: hidden;
}
details summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font: 700 16.5px/1.4 Outfit, sans-serif;
  color: #FFF4E4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
/* The question is a real heading, not a styled span: screen readers and AI
   answer engines both navigate by headings, and a <span> is invisible to
   them. Visually it has to stay the exact flex row the design draws, so it
   inherits everything from the summary and keeps no margin of its own. */
details summary h3 {
  margin: 0;
  font: inherit;
  color: inherit;
}
details summary .sign {
  font: 400 22px/1 Manrope, sans-serif;
  color: rgba(255, 176, 32, .7);
  flex: none;
  transition: transform .18s ease;
}
/* Closed state is exactly the design's "+"; open turns it into a "×" so an
   expanded row does not still invite a tap to expand. */
details[open] summary .sign { transform: rotate(45deg); }
details p {
  margin: 0;
  padding: 0 22px 22px;
  font: 500 15.5px/1.65 Manrope, sans-serif;
  color: rgba(255, 244, 228, .58);
}

  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255, 244, 228, .04);
  border: 1px solid rgba(255, 244, 228, .07);
}
.pill-link {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 32, .4);
  font: 700 14.5px/1 Manrope, sans-serif;
  color: #FFB020;
  flex: none;
}
.pill-link.tall { height: 46px; font-size: 15px; }

/* ---------- Delete account -------------------------------------------- */
.del-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.callout {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255, 138, 43, .12), rgba(255, 176, 32, .03));
  border: 1px solid rgba(255, 176, 32, .24);
}
.callout > .bullet {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: #FFB020;
}
.callout div { display: flex; flex-direction: column; gap: 6px; }
.callout b { font: 700 17px/1.3 Outfit, sans-serif; color: #FFF4E4; font-weight: 700; }
.callout span { font: 500 15.5px/1.62 Manrope, sans-serif; color: rgba(255, 244, 228, .62); }
.del-body section { display: flex; flex-direction: column; gap: 16px; }
.del-body section.tight { gap: 14px; }
.del-body section.tighter { gap: 12px; }
.del-body section p {
  margin: 0;
  font: 500 16px/1.68 Manrope, sans-serif;
  color: rgba(255, 244, 228, .6);
}
.steps { display: flex; flex-direction: column; gap: 10px; }
.stepline {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 16px;
  background: #131010;
  border: 1px solid rgba(255, 244, 228, .07);
}
.stepline > .n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 176, 32, .16);
  color: #FFD666;
  font: 700 13px/26px Manrope, sans-serif;
  text-align: center;
}
.stepline > span:last-child {
  font: 500 15.5px/1.55 Manrope, sans-serif;
  color: rgba(255, 244, 228, .62);
}
.stepline strong { color: #FFF4E4; }

/* ---------- 404 -------------------------------------------------------- */
.nf {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(60px, 10vw, 140px) 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.nf img { width: 130px; height: auto; filter: drop-shadow(0 20px 40px rgba(255, 120, 20, .25)); }
.nf .eyebrow { letter-spacing: .2em; color: rgba(255, 176, 32, .7); }
.nf h1 {
  margin: 0;
  font: 800 clamp(30px, 4vw, 44px)/1.08 Outfit, sans-serif;
  letter-spacing: -.03em;
  color: #FFF4E4;
}
.nf p {
  margin: 0;
  max-width: 420px;
  font: 500 16.5px/1.62 Manrope, sans-serif;
  color: rgba(255, 244, 228, .55);
}
.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}
.nf-links a {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 228, .16);
  color: #FFF4E4;
  font: 700 14.5px/1 Manrope, sans-serif;
}
.nf-links a.primary {
  border: none;
  background: linear-gradient(180deg, #FFCB55, #FF9E22);
  color: #2B1607;
}

/* ---------- Footer ----------------------------------------------------- */
.footer {
  margin-top: clamp(72px, 9vw, 132px);
  border-top: 1px solid rgba(255, 244, 228, .07);
}
.footer-top {
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-brand { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
.footer-brand > div { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer-brand b {
  font: 800 16px/1 Outfit, sans-serif;
  letter-spacing: -.02em;
  color: #FFF4E4;
  font-weight: 800;
}
.footer-brand span {
  font: 500 14.5px/1.6 Manrope, sans-serif;
  color: rgba(255, 244, 228, .5);
  max-width: 280px;
}
.footer-col { flex: 0 1 160px; display: flex; flex-direction: column; gap: 11px; }
.footer-col.wide { flex: 0 1 170px; }
.footer-col > span:first-child {
  font: 700 11px/1 Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, .5);
}
.footer-col a { font: 600 14.5px/1 Manrope, sans-serif; color: rgba(255, 244, 228, .6); }
.footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: 36px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom span { font: 500 13px/1.6 Manrope, sans-serif; color: rgba(255, 244, 228, .5); }
.footer-bottom .todo {
  border-color: rgba(255, 176, 32, .4);
  background: rgba(255, 176, 32, .06);
  color: rgba(255, 214, 102, .9);
  padding: 1px 7px;
}

/* ---------- Phones ------------------------------------------------------
   The design is a desktop canvas; everything below keeps the same values
   and only changes how they reflow. Nothing is restyled. */

/* The nav is five items on one 68px line — that stops fitting well before
   the layout does, so below this it moves to its own row. */
/* Five items on one 68px line stop fitting long before the layout does, so
   the header becomes two rows: brand and the button, then the links. The
   button is lifted out of flow rather than reordered — it is a child of the
   nav, and taking it out is the one change that cannot reflow anything. */
@media (max-width: 860px) {
  .header-inner {
    position: relative;
    height: auto;
    min-height: 68px;
    padding: 12px 20px;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .brand { flex: 1 1 auto; min-height: 36px; }
  .nav {
    flex: 1 1 100%;
    margin-left: 0;
    gap: 6px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .nav a:not(.nav-cta) { flex: 0 1 auto; padding: 4px 0; white-space: nowrap; }
  /* `.nav a.nav-cta`, not `.nav-cta`: the motion layer later in this file
     gives every `.sb-btn` `position: relative`, and a bare class selector
     would lose to it — dropping the button back into the nav row on top of
     "Support". */
  .nav a.nav-cta {
    position: absolute;
    top: 12px;
    right: 20px;
    height: 36px;
    padding: 0 16px;
    white-space: nowrap;
  }
  .toc { top: 84px; }
  .prose section, #download { scroll-margin-top: 132px; }
}

@media (max-width: 760px) {
  /* The table of contents stops being a sidebar and becomes a chip row. */
  .legal-body { gap: 28px; }
  .toc {
    position: static;
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #131010;
    border: 1px solid rgba(255, 244, 228, .08);
  }
  .toc-title { flex: 1 1 100%; margin-bottom: 0; }
  .toc a {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 244, 228, .05);
    font-size: 12.5px;
  }
}

@media (max-width: 620px) {
  .page { padding-bottom: 64px; }
  .hero { gap: 40px; }
  /* min-width:300px on the device column would force a horizontal
     scrollbar at 320px. It has to give. */
  .hero-device { min-width: 0; flex: 1 1 100%; }
  .glow { width: 260px; height: 260px; top: 30px; }
  .hero-price { max-width: none; }
  .sec, .hero, .legal-head, .legal-body, .support-head, .faq,
  .terms-body, .del-body,
  .footer-top, .footer-bottom, .mock-note, .nf {
    padding-left: 18px;
    padding-right: 18px;
  }
  .wrap, .wrap-narrow { padding: 0 18px; }
  .step { padding: 26px 22px; }
  .plan { padding: 26px 22px; }
  .banner { gap: 24px; }
  .banner img { align-self: center; }
  .notice, .callout,   .row { padding: 14px 16px; }
  details summary { padding: 18px 18px; font-size: 15.5px; }
  details p { padding: 0 18px 18px; }
  .support-card { min-width: 0; padding: 22px 20px; }
  .mail { min-width: 0; }
  .footer-top { gap: 28px; }
  .footer-col, .footer-col.wide { flex: 1 1 130px; }
  }

@media (max-width: 380px) {
  .hero h1 { font-size: 34px; }
  .plan-price b { font-size: 34px; }
  .nav a { font-size: 13px; }
}

/* ---------- Pressed states ---------------------------------------------
   Hover was removed at the client's request. Press feedback stays: without
   hover there is otherwise no sign that anything is interactive, and on a
   phone hover never existed anyway. */
a, button, summary, .plan { -webkit-tap-highlight-color: transparent; }
a:active, button:active, summary:active { opacity: .82; }

/* ---------- Chosen plan -------------------------------------------------
   The pricing cards do something when tapped now: they mark themselves.
   There is no checkout to send anyone to yet, so the choice is the whole
   interaction — which makes the state need to read clearly on its own. */
.plan { cursor: pointer; transition: border-color .28s var(--e-out), background-color .28s var(--e-out); }
/* The highlight — amber wash, warm border, filled button — belongs to
   whichever card is chosen rather than to the annual one. Annual is simply
   chosen by default, so at rest the section is exactly the design's: the
   values below are the design's own inline styles for its featured card. */
.plan[aria-checked='true'] {
  background: linear-gradient(170deg, rgba(255, 176, 32, .12), rgba(19, 16, 16, .9));
  border-color: rgba(255, 176, 32, .42);
  isolation: isolate;
}
.plan-cta {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  background: none;
}

/* =====================================================================
   MOTION + CRAFT LAYER
   Ported from the design's `sb-*` layer, value for value.

   The design is inline-styled, so its rules lean on `!important` to beat
   those attributes. Here the base styles are classes, so most of that is
   unnecessary — the selectors below are shaped to win on their own and
   this block is last on purpose. Where a rule still needs to outrank a
   base selector, the selector says so rather than reaching for
   `!important`.
   ===================================================================== */

:root {
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --e-in-out: cubic-bezier(.645, .045, .355, 1);
  --e-spring: cubic-bezier(.34, 1.5, .64, 1);
}

::selection { background: rgba(255, 150, 40, .3); color: #FFF4E4; }

/* ---- ambient: drifting ember light + film grain ---------------------- */
.sb-root { position: relative; isolation: isolate; }
.sb-root::before {
  content: "";
  position: fixed;
  left: -12%; right: -12%; top: -24%;
  height: 88vh;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(36% 44% at 24% 30%, rgba(255, 106, 24, .20), transparent 68%),
    radial-gradient(30% 38% at 76% 14%, rgba(255, 200, 90, .12), transparent 70%);
  animation: sbAurora 24s var(--e-in-out) infinite;
}
.sb-root::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@keyframes sbAurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  34% { transform: translate3d(3.5%, 2.5%, 0) scale(1.08); }
  67% { transform: translate3d(-3%, -1.5%, 0) scale(1.04); }
}

/* ---- scroll reveal ---------------------------------------------------- */
[data-rv] {
  opacity: 0;
  transform: translate3d(0, var(--rvY, 20px), 0) scale(var(--rvS, 1));
  transition: opacity .6s var(--e-out) var(--d, 0ms),
              transform .82s var(--e-out) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-rv].is-in { opacity: 1; transform: none; }
/* No JS, no hiding. motion.js sets data-js before the first paint. */
html:not([data-js]) [data-rv] { opacity: 1; transform: none; }

/* ---- headline mask reveal --------------------------------------------- */
.sb-head {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 46%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 46%, #000 100%);
  -webkit-mask-size: 100% 230%;
  mask-size: 100% 230%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 0;
}
.sb-head.is-in { animation: sbHeadIn 1.15s var(--e-out) var(--d, 0ms) both; }
@keyframes sbHeadIn {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; transform: translate3d(0, 24px, 0); opacity: 0; }
  8% { opacity: 1; }
  to { -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: none; opacity: 1; }
}
html:not([data-js]) .sb-head { opacity: 1; -webkit-mask-image: none; mask-image: none; }

.sb-grad {
  background: linear-gradient(96deg, #FFF4E4 6%, #FFD07A 46%, #FF8A2B 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- surfaces --------------------------------------------------------- */
.sb-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 244, 228, .058), rgba(255, 244, 228, .014)), #121010;
  border: 1px solid rgba(255, 244, 228, .075);
  transition: transform .45s var(--e-out),
              border-color .45s var(--e-out),
              box-shadow .45s var(--e-out);
}
/* The spotlight that follows the cursor across a card. `motion.js` writes
   --mx/--my; with no pointer they stay centred and the layer stays at zero. */
.sb-card::before,
.sb-pro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s var(--e-out);
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255, 150, 40, .15), transparent 60%);
}
.sb-pro {
  position: relative;
  isolation: isolate;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.sb-pro::after {
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255, 180, 60, .16), transparent 60%);
}

.sb-card::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  pointer-events: none;
  opacity: .3;
  transition: opacity .45s var(--e-out);
  background: linear-gradient(90deg, transparent, rgba(255, 196, 100, .7), transparent);
}

.sb-num {
  display: inline-block;
  transition: transform .5s var(--e-spring), filter .5s var(--e-out), color .5s;
}

/* The ring above is driven by this custom property. */
/* `position` is deliberately not set here. In the design this rule said
   `relative`, but there the badge carried an inline `position:absolute` that
   outranked it. Ours is placed by `.plan-badge`, a class of equal weight that
   sits earlier in the file — declaring `relative` here dropped the badge back
   into the flow, where it stretched across the whole card. */
.sb-badge { overflow: hidden; }
.sb-badge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 45%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: sbSweep 3.6s var(--e-out-cubic) 1.4s infinite;
}
@keyframes sbSweep { 0% { left: -70%; } 45%, 100% { left: 150%; } }

/* ---- buttons ---------------------------------------------------------- */
.sb-btn {
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--e-out), box-shadow .34s var(--e-out),
              border-color .34s, color .24s;
}
.sb-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 42%;
  transform: skewX(-20deg);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  pointer-events: none;
}
.sb-btn:active { transform: translateY(0) scale(.972); transition-duration: .09s; }
@keyframes sbSheen { from { left: -70%; opacity: 1; } to { left: 130%; opacity: 0; } }
.sb-btn-g::after { background: linear-gradient(90deg, transparent, rgba(11, 9, 8, .16), transparent); }
.sb-btn-o {
  transition: transform .22s var(--e-out), border-color .34s,
              background-color .34s, box-shadow .34s;
}

/* ---- nav -------------------------------------------------------------- */
.sb-nav { position: relative; transition: color .22s var(--e-out); }
.sb-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF8A2B, #FFD666);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .36s var(--e-out);
}

.sb-hdr {
  transition: background-color .4s var(--e-out), box-shadow .4s var(--e-out), border-color .4s;
}
html[data-scrolled] .sb-hdr {
  background: rgba(11, 9, 8, .92);
  box-shadow: 0 14px 40px -26px rgba(0, 0, 0, 1);
}
.sb-prog {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  background: linear-gradient(90deg, #FF6A18, #FFD666);
  box-shadow: 0 0 14px rgba(255, 150, 40, .7);
}
.sb-logo { transition: transform .35s var(--e-spring); }
.sb-logo img { transition: transform .5s var(--e-spring), filter .4s; }

/* ---- list rows -------------------------------------------------------- */
.sb-row { border-radius: 14px; transition: background .4s var(--e-out); }
.sb-row h3 { transition: color .3s var(--e-out); }
.sb-dot { transition: transform .4s var(--e-spring), box-shadow .4s var(--e-out); }
.sb-link { transition: color .22s, text-shadow .3s; }
.sb-flink { display: inline-block; transition: color .24s var(--e-out), transform .3s var(--e-out); }

/* ---- chips ------------------------------------------------------------ */
.sb-chip { transition: transform .34s var(--e-out), border-color .34s, color .34s, background-color .34s; }

/* ---- hero device ------------------------------------------------------ */
.sb-stage { perspective: 1200px; }
.sb-phone {
  animation: sbFloat 7.5s var(--e-in-out) infinite;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--e-out);
  will-change: transform;
}
.sb-phone.is-live { transition: transform .12s linear; }
@keyframes sbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.sb-screen { position: relative; }
.sb-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .075) 46%, transparent 58%);
  background-size: 260% 100%;
  background-position: 190% 0;
  animation: sbScreenSheen 7s var(--e-in-out) 1.6s infinite;
}
@keyframes sbScreenSheen { 0% { background-position: 190% 0; } 42%, 100% { background-position: -90% 0; } }

/* `.bar > i` is (0,1,1), so this has to be at least that specific. */
.bar > i.sb-bar {
  opacity: 1;
  transform: none;
  width: 0;
  transition: width 1.6s var(--e-out) .35s;
}
.bar > i.sb-bar.is-in { width: 48%; }

.sb-dots span { opacity: 0; transform: scale(.3); transition: opacity .34s var(--e-out), transform .5s var(--e-spring); }
.sb-dots.is-in span { opacity: 1; transform: none; }
.sb-dots.is-in span:nth-child(1) { transition-delay: .34s; }
.sb-dots.is-in span:nth-child(2) { transition-delay: .42s; }
.sb-dots.is-in span:nth-child(3) { transition-delay: .50s; }
.sb-dots.is-in span:nth-child(4) { transition-delay: .58s; }
.sb-dots.is-in span:nth-child(5) { transition-delay: .66s; }
.sb-dots.is-in span:nth-child(6) { transition-delay: .74s; }
.sb-dots.is-in span:nth-child(7) { transition-delay: .82s; }

.sb-glowblob { animation: sbGlow 6s var(--e-in-out) infinite; }
@keyframes sbGlow {
  0%, 100% { opacity: .7; transform: scale(1) translate3d(0, 0, 0); }
  50% { opacity: 1; transform: scale(1.08) translate3d(0, -10px, 0); }
}

/* ---- embers ----------------------------------------------------------- */
.sb-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.sb-embers i {
  position: absolute;
  bottom: -12px;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: #FFC24A;
  opacity: 0;
  box-shadow: 0 0 12px rgba(255, 170, 60, .95);
  animation: sbEmber var(--t, 10s) linear var(--dl, 0s) infinite;
}
@keyframes sbEmber {
  0% { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  10% { opacity: .85; }
  65% { opacity: .5; }
  100% { transform: translate3d(var(--dx, 16px), var(--h, -420px), 0) scale(.2); opacity: 0; }
}

/* ---- mascots ---------------------------------------------------------- */
.sb-mascot {
  animation: sbBob 6.5s var(--e-in-out) infinite;
  transition: transform .5s var(--e-spring), filter .4s var(--e-out);
}
@keyframes sbBob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -11px; rotate: -2.5deg; } }

.sb-hero-mascot {
  position: absolute;
  left: -26%;
  bottom: 4%;
  width: clamp(84px, 7.4vw, 112px);
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 22px 40px rgba(255, 120, 20, .5));
}
@media (max-width: 1180px) { .sb-hero-mascot { display: none; } }

/* ---- feature band ----------------------------------------------------- */
.sb-band { position: relative; overflow: hidden; isolation: isolate; }
.sb-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 46% at 20% 30%, rgba(255, 138, 43, .2), transparent 70%),
    radial-gradient(30% 40% at 82% 74%, rgba(255, 200, 90, .13), transparent 72%);
  animation: sbAurora 20s var(--e-in-out) infinite;
}

/* ---- faq -------------------------------------------------------------- */
.sb-sum { transition: color .25s var(--e-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv], .sb-head {
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .bar > i.sb-bar { width: 48% !important; }
  .sb-dots span { opacity: 1 !important; transform: none !important; }
}

/* ---- reveal delays ----------------------------------------------------
   The design carries these as inline `style="--d:110ms"`. Inline style
   attributes are blocked by this site's CSP, so the same values live here
   as classes. Same numbers, same order. */
.d40  { --d: 40ms; }
.d80  { --d: 80ms; }
.d90  { --d: 90ms; }
.d100 { --d: 100ms; }
.d110 { --d: 110ms; }
.d180 { --d: 180ms; }
.d200 { --d: 200ms; }
.d220 { --d: 220ms; }
.d270 { --d: 270ms; }
.d290 { --d: 290ms; }
.d370 { --d: 370ms; }

/* The hero device drifts a little further and starts a touch smaller. */
.sb-stage { --rvY: 26px; --rvS: .96; }

/* ---- ember positions --------------------------------------------------
   Ten sparks, each with its own lane, drift, height, duration and delay —
   inline in the design, nth-child here for the same reason as above. */
.sb-embers i:nth-child(1)  { left: 14%; --dx:  26px; --h: -380px; --t:  9.5s; --dl: 0.0s; }
.sb-embers i:nth-child(2)  { left: 28%; --dx: -18px; --h: -430px; --t: 11.0s; --dl: 1.6s; }
.sb-embers i:nth-child(3)  { left: 41%; --dx:  34px; --h: -350px; --t:  8.5s; --dl: 3.1s; }
.sb-embers i:nth-child(4)  { left: 55%; --dx: -26px; --h: -460px; --t: 12.0s; --dl: 0.8s; }
.sb-embers i:nth-child(5)  { left: 67%; --dx:  20px; --h: -400px; --t: 10.0s; --dl: 4.2s; }
.sb-embers i:nth-child(6)  { left: 79%; --dx: -14px; --h: -340px; --t:  9.0s; --dl: 2.3s; }
.sb-embers i:nth-child(7)  { left: 90%; --dx:  30px; --h: -420px; --t: 11.5s; --dl: 5.4s; }
.sb-embers i:nth-child(8)  { left:  7%; --dx: -22px; --h: -300px; --t:  8.0s; --dl: 6.1s; }
.sb-embers i:nth-child(9)  { left: 48%; --dx:  12px; --h: -480px; --t: 13.0s; --dl: 2.9s; }
.sb-embers i:nth-child(10) { left: 72%; --dx: -30px; --h: -360px; --t:  9.8s; --dl: 7.0s; }

/* ── Pointer feedback ───────────────────────────────────────────────────────
   The design's hover layer, rule for rule. The transitions these lean on are
   declared with each element above; nothing is redeclared here.

   One deliberate departure: hovering *text* does nothing. Links, nav items and
   the FAQ summaries keep their resting colour, which is why the design's
   `a`, `.sb-nav`, `.sb-link`, `.sb-flink` and `.sb-sum` rules are absent. What
   is hovered here is always a surface — a card, a button, a row, a chip, an
   image. Text inside a hovered surface still responds, because the surface is
   what the cursor is on.

   Gated behind a fine pointer so a phone never pays for any of it. */
@media (hover: hover) and (pointer: fine) {
  .sb-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 176, 32, .3);
    box-shadow: 0 26px 54px -20px rgba(0, 0, 0, .9),
                0 0 40px -22px rgba(255, 150, 40, .5);
  }
  .sb-card:hover::before,
  .sb-card:hover::after { opacity: 1; }
  .sb-card:hover .sb-num {
    transform: translateY(-3px) scale(1.06);
    color: rgba(255, 190, 80, .62);
    filter: drop-shadow(0 6px 18px rgba(255, 140, 30, .4));
  }

  .sb-pro:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .9),
                0 0 54px -20px rgba(255, 150, 40, .55);
  }
  .sb-pro:hover::after { opacity: 1; }

  .sb-btn:hover { transform: translateY(-2px); }
  .sb-btn:hover::after { animation: sbSheen .9s var(--e-out-cubic) forwards; }
  .sb-btn-p:hover { box-shadow: 0 12px 34px -8px rgba(255, 150, 40, .55); }
  .sb-btn-g:hover { box-shadow: 0 14px 32px -10px rgba(255, 244, 228, .35); }
  .sb-btn-o:hover {
    border-color: rgba(255, 176, 32, .55);
    background: rgba(255, 176, 32, .07);
  }
  /* The plan buttons take their fill from whichever card is chosen rather
     than from a fixed `-p`/`-o` class, so the same two hovers are keyed to
     that state instead. Same values as the two rules above. */
  .plan[aria-checked='true'] .plan-cta:hover {
    box-shadow: 0 12px 34px -8px rgba(255, 150, 40, .55);
  }
  .plan:not([aria-checked='true']) .plan-cta:hover {
    border-color: rgba(255, 176, 32, .55);
    background: rgba(255, 176, 32, .07);
  }

  .sb-logo:hover { transform: scale(1.04); }
  .sb-logo:hover img {
    transform: rotate(-8deg) scale(1.1);
    filter: drop-shadow(0 6px 16px rgba(255, 150, 40, .6));
  }

  .sb-row:hover {
    background: linear-gradient(90deg,
                rgba(255, 150, 40, .075), rgba(255, 150, 40, 0) 74%);
  }
  .sb-row:hover h3 { color: #FFD98A; }
  .sb-row:hover .sb-dot {
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(255, 138, 43, .13),
                0 0 16px rgba(255, 138, 43, .8);
  }

  .sb-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 176, 32, .4);
    color: rgba(255, 244, 228, .85);
    background: rgba(255, 176, 32, .06);
  }

  .sb-mascot:hover {
    transform: translateY(-8px) rotate(-5deg) scale(1.06);
    filter: drop-shadow(0 24px 44px rgba(255, 140, 30, .55));
  }
}