.side-menu[hidden] {
  display: none !important;
}

html {
  /* Dark theme throughout -- without this, form controls, the scrollbar and
     select dropdowns render in the OS's light UI regardless of the page's
     own dark background. */
  color-scheme: dark;
}

/* body sets cursor:none unconditionally (base stylesheet) on the assumption
   the custom cursor JS always takes over. If that JS fails above the 1024px
   breakpoint (the only width the mobile fallback below doesn't already
   cover), the pointer disappears with nothing to replace it. */
html:not(.js-enhanced) body {
  cursor: auto !important;
}

a,
button,
.store-badge-link,
.hamburger-menu,
.faq-question {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 212, 178, 0.18);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* An <img>'s width/height attributes are presentational hints that map into
   the CSS cascade, not just CLS metadata. Where the stylesheet sizes an
   image on one axis only, the attribute supplies the other axis and
   overrides the natural aspect ratio -- which squashed these flat (the app
   screenshots were pinned to their full 844/1024px intrinsic height inside
   a ~230px-wide box, and the square SVG icons were crushed to 32px tall).
   Setting the free axis to auto restores the attributes to their intended
   role: providing the ratio, so the browser reserves correct space without
   dictating the rendered size.

   Deliberately scoped rather than a blanket `img { height: auto }`: the
   hero and story mockups are object-fit:cover and genuinely need their
   explicit heights. */
.bento-app-screen,
.bento-symbol,
.evidence-symbol {
  height: auto;
}

.nav-logo-icon,
.footer-left img {
  width: auto;
}

/* The bento icons sit in a deliberately wide, short corner box, so even
   with a correct ratio they should letterbox inside it rather than stretch
   to fill it. */
.bento-symbol,
.evidence-symbol {
  object-fit: contain;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--accent-teal);
  color: var(--bg-dark);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* .premium-nav is fixed and sits on top of everything, so an in-page anchor
   jump (hamburger menu, skip link) lands the target heading directly under
   it with no scroll-margin -- these are the only real anchor destinations
   on the page. */
#story-trigger,
#features,
#driver-tips,
#pricing,
#faq,
#download,
#main-content {
  scroll-margin-top: 100px;
}

.container {
  width: min(90%, 1440px);
  margin-inline: auto;
}

.nav-actions,
.store-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-download,
.store-button {
  color: var(--text-main);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  padding: 13px 20px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

.nav-download {
  padding: 11px 18px;
  color: var(--accent-teal);
  border-color: rgb(0 212 178 / 35%);
  /* Primary nav CTA -- was rendering 36px tall, under the 44px minimum
     touch target, on the device most visitors arrive on. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* On mobile .nav-logo-text is hidden, leaving the home link as just the
   24px mark -- too small to hit reliably. */
.nav-logo {
  min-height: 44px;
}

.store-button-primary {
  color: var(--bg-dark);
  border-color: var(--accent-teal);
  background: var(--accent-teal);
}

.nav-download:hover,
.store-button:hover,
.nav-download:focus-visible,
.store-button:focus-visible {
  color: var(--bg-dark);
  border-color: var(--accent-teal);
  background: var(--accent-teal);
  outline: none;
  transform: translateY(-2px);
}

.nav-download:focus-visible,
.store-button:focus-visible,
.store-button-primary:focus-visible {
  outline: 3px solid var(--text-main);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(0 212 178 / 35%);
}

.hamburger-menu {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.hero-title {
  margin: 0;
}

.hero-title .kinetic-row,
.hero-title .kinetic-text {
  display: block;
}
.hero-title .kinetic-text {
  font-size: clamp(2.2rem, 7vw, 7rem);
}

.hero-subtext-new strong {
  color: var(--text-main);
  font-weight: 600;
}

.hero-tax-benefit {
  max-width: 650px;
  margin-top: 16px;
  color: var(--text-main);
  font-size: 0.84rem;
  line-height: 1.4;
}

.hero-tax-benefit strong {
  font-weight: 700;
}

.hero-tax-benefit small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  /* Fixed rather than em-relative: .hero-tax-benefit drops to 0.76rem on
     mobile, and 0.85em of that would land under the 12px legibility floor
     used everywhere else on this page. */
  font-size: 0.76rem;
  font-weight: 400;
}

.hero-store-actions,
.store-reassurance {
  opacity: 1;
  transform: none;
}

.js-enhanced.motion-ready .hero-store-actions,
.js-enhanced.motion-ready .loader-hero .store-reassurance {
  opacity: 0;
  transform: translateY(20px);
}

.hero-store-actions {
  margin-top: 28px;
}

.store-reassurance {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.hero-floating-img,
.mockup-img {
  object-position: top;
}

#mockup-map {
  opacity: 1;
}

.story-copy {
  position: absolute;
  z-index: 12;
  left: 5vw;
  bottom: 8vh;
  width: min(420px, 38vw);
}

.js-enhanced.motion-ready .story-step {
  position: absolute;
  inset: auto 0 0;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.js-enhanced.motion-ready .story-step.is-active {
  opacity: 1;
  transform: translateY(0);
}

.story-step p {
  color: var(--text-main);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
}

.story-step h2 {
  margin-bottom: 12px;
  color: var(--accent-teal);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.story-step small {
  display: block;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.story-step-image {
  display: none;
}

@media (width > 600px) {
  .bento-grid {
    grid-auto-rows: 360px;
  }
}

.bento-card .card-content {
  position: relative;
  z-index: 2;
}

.card-small h3 {
  font-size: clamp(2.25rem, 3vw, 3rem);
}

.bento-app-screen {
  position: absolute;
  right: 5%;
  bottom: -34%;
  width: min(270px, 46%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 28px;
  box-shadow: 0 26px 70px rgb(0 0 0 / 58%);
}

.bento-symbol {
  position: absolute;
  z-index: 1;
  right: -12%;
  bottom: -10%;
  width: 64%;
  max-height: 46%;
  opacity: 0.32;
  pointer-events: none;
}

.card-accent .bento-symbol {
  filter: grayscale(1) brightness(0.2);
}

.evidence-symbol {
  position: absolute;
  right: 8%;
  top: 16%;
  width: 120px;
  opacity: 0.2;
}

.trust-strip {
  padding: 96px 0;
  border-top: 1px solid rgb(255 255 255 / 5%);
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  background: #030303;
}

.trust-label,
.cta-eyebrow {
  margin-bottom: 16px;
  color: var(--accent-teal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.trust-strip h2 {
  max-width: 620px;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.trust-grid p {
  padding-top: 18px;
  border-top: 1px solid rgb(0 212 178 / 28%);
  color: var(--text-muted);
  line-height: 1.55;
}

.cta-support {
  max-width: 590px;
  margin: -26px auto 34px;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.6;
  text-align: center;
}

.final-download-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.btn-magnetic .btn-text {
  max-width: 132px;
  text-align: center;
}

.cta-content .store-reassurance {
  opacity: 1;
  transform: none;
  text-align: center;
}

.footer-brand {
  max-width: 430px;
}

@media (width <= 1024px) {
  .hero-content {
    padding-top: 72px;
  }

  .hero-store-actions {
    justify-content: center;
  }

  .story-copy {
    width: min(380px, 42vw);
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The base stylesheet only hides the custom cursor dot/outline and
     restores the system cursor below 600px, so a mouse- or trackpad-driven
     visitor in the 601-1024px tablet band (an iPad with a pointer, or a
     desktop window resized narrow) gets body's global cursor:none with no
     replacement drawn -- effectively no cursor at all. */
  .cursor-dot,
  .cursor-outline {
    display: none !important;
  }

  body {
    cursor: auto;
  }
}

@media (width <= 600px) {
  .premium-nav {
    padding-top: 20px;
  }

  .nav-logo-text {
    display: none;
  }

  .nav-actions {
    gap: 14px;
  }

  .nav-download {
    padding: 10px 14px;
  }

  .hamburger-menu {
    width: 44px;
    height: 44px;
    padding: 11px 5px;
  }

  .loader-hero {
    min-height: 100svh;
    /* clamp() so this shrinks in step with short viewports instead of eating
       a fixed number of px out of whatever room a small phone has. Reserves
       a zone the centered hero-content can't grow into, so the floating
       phone image can't reach the absolutely-positioned scroll hint. */
    padding-top: clamp(72px, 16svh, 120px);
    padding-bottom: clamp(48px, 11svh, 92px);
  }

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

  .hero-title .kinetic-text {
    font-size: 3.2rem !important;
    line-height: 0.95 !important;
  }

  /* Previously display:none -- this is the whole value proposition and the
     "free, quick to set up" reassurance right before the download buttons.
     Hiding it left mobile visitors (the majority of traffic) with a headline
     and a screenshot and no explanation of what the app actually does.
     Sized down from the desktop 1.25rem/30px so restoring it doesn't blow
     out the hero height and reopen the store-badges/phone-image overlap. */
  .hero-subtext-new {
    display: block;
    margin-top: 16px;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .store-reassurance {
    display: block;
    margin-top: 10px;
  }

  .hero-tax-benefit {
    margin-top: 12px;
    font-size: 0.76rem;
  }

  .hero-store-actions,
  .final-download-cluster {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }

  .store-badge-image {
    height: 48px;
  }

  /* The floating phone mockup (.main-float) is absolutely positioned inside
     a wrapper that centers it with top:50%. On mobile that combination
     turned out to be unreliable in several different ways while sizing it
     down from its 280x580 desktop box: a flex-basis:0% collapse that zeroed
     the container, a box-shadow that visually bled into "scroll to
     explore" well before the boxes themselves touched (worse once a 3D
     rotateY/rotateX transform was involved, since the shadow renders
     through that same transform), and finally genuine run-to-run rendering
     variance in how the intro animation settles, where identical CSS
     produced a clean gap on one load and an overlap on the next. Rather
     than keep tuning around a moving target, this drops the decoration on
     mobile -- .secondary-float is already dropped here for the same class
     of reason, and the four real app screenshots later in the Features
     section carry the "what does this look like" job just fine. */
  .hero-visual-col {
    display: none;
  }

  .secondary-float {
    display: none !important;
  }

  /* Ultra-Premium Mobile Story Section (Only when Motion is Active) */

  html.motion-ready .pinned-mockup {
    position: absolute !important;
    top: max(80px, 12vh) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(55vw, 240px) !important;
    height: auto !important;
    aspect-ratio: 300 / 620 !important;
    display: block !important;
  }

  html.motion-ready .story-copy {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    bottom: auto !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html.motion-ready .story-step {
    position: absolute !important;
    top: 65vh !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-align: center;
  }

  html.motion-ready .story-step h2 {
    font-size: 2.4rem !important;
    margin-bottom: 0 !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  }

  html.motion-ready .story-step p,
  html.motion-ready .story-step small,
  html.motion-ready .story-step-image {
    display: none !important;
  }

  /* Fallback: Hide text but keep visual flow */
  html:not(.motion-ready) .story-step p,
  html:not(.motion-ready) .story-step small {
    display: none !important;
  }

  .bento-card {
    min-height: auto;
    padding: 40px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
  }
  
  /* Previously display:none -- these are the nine feature explanations in
     the Features section. Hiding them left mobile with a heading and a
     screenshot per card and nothing telling the driver what the feature
     does. Sized down from the desktop 1.15rem so the cards don't balloon. */
  .card-content p {
    display: block;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  /* .bento-symbol is positioned to bleed deliberately outside the card
     (right:-12%; bottom:-10%; width:64%), which reads as a design flourish
     on a tall desktop card but not on a ~175px-tall mobile one: with the
     feature copy above restored, the icon lands on top of the text and
     spills past the card's rounded corner. It's purely decorative
     (alt="", opacity .32) and there is no room for it here, so drop it on
     mobile rather than shrink it into an unreadable smudge. */
  .bento-symbol {
    display: none;
  }

  .card-large,
  .card-wide {
    min-height: auto;
  }

  .bento-card-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .bento-media {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
  }

  .bento-grid {
    grid-auto-rows: auto;
  }

  .card-content h3,
  .card-large h3,
  .card-small h3 {
    font-size: 1.6rem !important;
    text-align: center;
  }

  .bento-app-screen {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 80% !important;
    max-width: 240px !important;
    display: block !important;
    transform: none !important;
  }

  .evidence-symbol {
    top: -20px !important;
    right: 10% !important;
    width: 80px !important;
  }

  .section-heading {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
  }

  .trust-strip {
    padding: 72px 0;
  }

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

  .cta-magnetic {
    min-height: 100svh;
    height: auto;
    padding: 96px 5vw;
  }

  .massive-cta-text {
    font-size: 2.6rem !important;
    line-height: 1.1 !important;
    margin-bottom: 44px;
  }
}

/* Short phones (SE/8-class, ~667pt tall and below): the clamp()-based sizing
   above is tuned against 812-896pt-tall screens and doesn't leave enough
   room on shorter ones for the floating phone image to clear "scroll to
   explore" underneath it. A dedicated, generously-sized override here is
   more reliable than pushing the vh coefficients further -- past a point,
   small clamp adjustments stopped producing predictable results during
   testing, most likely because the pinned/scrubbed ScrollTrigger on this
   page keeps nudging layout during measurement. This rule trades some
   elegance for a large, unambiguous safety margin. */
html:not(.motion-ready) .char,
html:not(.motion-ready) .hero-subtext-new,
html:not(.motion-ready) .hero-store-actions,
html:not(.motion-ready) .store-reassurance,
html.motion-stalled .char,
html.motion-stalled .hero-subtext-new,
html.motion-stalled .hero-store-actions,
html.motion-stalled .store-reassurance {
  opacity: 1 !important;
  transform: none !important;
}

html:not(.motion-ready) .hero-floating-img,
html.motion-stalled .hero-floating-img {
  opacity: 1 !important;
}

html:not(.motion-ready) .story-section,
html:not(.motion-ready) .story-container {
  height: auto !important;
  min-height: 0 !important;
}

html:not(.motion-ready) .story-container {
  position: static !important;
  display: block !important;
  padding: 96px 5vw;
}

html:not(.motion-ready) .massive-text-track,
html:not(.motion-ready) .pinned-mockup,
html:not(.motion-ready) .mockup-glow {
  display: none !important;
}

html:not(.motion-ready) .story-copy {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html:not(.motion-ready) .story-step {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

html:not(.motion-ready) .story-step-image {
  display: block !important;
  width: min(100%, 280px);
  margin-top: 24px;
  border-radius: 28px;
}

@media (width <= 600px) {
  html:not(.motion-ready) .story-container {
    padding: 72px 5vw;
  }

  html:not(.motion-ready) .story-copy {
    grid-template-columns: 1fr;
    left: auto;
    right: auto;
    bottom: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  html:not(.motion-ready) .story-step {
    padding: 0;
  }
}

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

  body {
    cursor: auto !important;
  }

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

  .char,
  .kinetic-text,
  .hero-subtext-new,
  .hero-store-actions,
  .store-reassurance,
  .hero-floating-img,
  .line,
  .section-header,
  .bento-card,
  .mockup-frame,
  .mockup-img,
  .btn-magnetic,
  .btn-text,
  .cta-content,
  .massive-cta-text {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .hero-floating-img {
    opacity: 1 !important;
  }

  .main-float {
    transform: translate(-50%, -50%) !important;
  }

  .secondary-float {
    transform: translate(-50%, -50%) !important;
  }

  .story-section,
  .story-container {
    height: auto;
    min-height: 0;
  }

  .story-container {
    position: static;
    display: block;
    padding: 96px 5vw;
  }

  .massive-text-track,
  .pinned-mockup,
  .mockup-glow {
    display: none !important;
    transform: none !important;
  }

  .story-copy {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    width: auto;
  }

  .story-step {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .story-step-image {
    display: block !important;
    width: min(100%, 280px);
    margin-top: 24px;
    border-radius: 28px;
  }

  .cursor-dot,
  .cursor-outline {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (width <= 1024px) {
  .main-float {
    transform: translate(-50%, -50%) scale(0.8) !important;
  }
}

@media (prefers-reduced-motion: reduce) and (width <= 600px) {
  .story-container {
    padding: 72px 5vw;
  }

  .story-copy {
    grid-template-columns: 1fr;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .story-step {
    padding: 0;
  }
}

/* Focused navigation, hand story, bento and download refinements. */
body.menu-open {
  overflow: hidden;
}

html:not(.js-enhanced) .hamburger-menu {
  display: none;
}

.premium-nav {
  padding-bottom: 18px;
  /* Fixed to the very top of the viewport, so on a notched/Dynamic-Island
     phone it needs its own inset rather than relying on body padding. */
  padding-top: calc(18px + env(safe-area-inset-top));
}

.premium-nav .nav-container {
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 12px 18px;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease;
}

.premium-nav.is-scrolled .nav-container,
body.menu-open .premium-nav .nav-container {
  border-color: rgb(255 255 255 / 11%);
  background: rgb(4 4 4 / 94%);
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%);
  backdrop-filter: blur(18px);
}

.side-menu {
  z-index: 9980;
  inset: 0;
  width: 100%;
  height: 100dvh;
  padding: clamp(96px, 14vh, 150px) 5vw 48px;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  pointer-events: none;
  visibility: hidden;
  background:
    radial-gradient(circle at 78% 20%, rgb(0 212 178 / 14%), transparent 34%),
    #040505;
  opacity: 1;
  transition: visibility 0s linear 280ms;
}

.side-menu.active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.side-menu .side-menu-items {
  width: min(100%, 760px);
  align-items: stretch;
  gap: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 280ms ease 60ms,
    transform 420ms var(--curve-smooth) 60ms;
}

.side-menu.active .side-menu-items {
  opacity: 1;
  transform: translateY(0);
}

.side-menu-items li:not(.menu-divider) {
  width: 100%;
}

.side-menu-items li a {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 4px;
  font-size: clamp(1.55rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.side-menu-items li a::after {
  content: "↗";
  color: var(--accent-teal);
  font-size: 0.45em;
  opacity: 0;
  transform: translate(-8px, 8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.side-menu-items li a:hover::after,
.side-menu-items li a:focus-visible::after {
  opacity: 1;
  transform: translate(0);
}

.side-menu-items li a:focus-visible {
  color: var(--accent-teal);
  outline: 2px solid var(--accent-teal);
  outline-offset: 4px;
}

.side-menu .menu-divider {
  width: 100%;
  height: 1px;
  padding: 0;
  background: rgb(255 255 255 / 10%);
}

.side-menu .menu-divider .circle {
  display: none;
}

.hamburger-menu {
  position: relative;
  z-index: 2;
}

.hamburger-menu .line {
  transform-origin: center;
  transition:
    width 180ms ease,
    transform 220ms ease,
    opacity 180ms ease;
}

.hamburger-menu[aria-expanded="true"] .line-1 {
  width: 100% !important;
  transform: translateY(11px) rotate(45deg);
}

.hamburger-menu[aria-expanded="true"] .line-2 {
  opacity: 0;
}

.hamburger-menu[aria-expanded="true"] .line-3 {
  width: 100% !important;
  transform: translateY(-11px) rotate(-45deg);
}

.store-badge-link {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 10px;
  text-decoration: none;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.store-badge-link:hover {
  filter: brightness(1.14);
  transform: translateY(-2px);
}

.store-badge-link:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
}

.store-badge-image {
  display: block;
  width: auto;
  height: 54px;
}

[data-store="android"] .store-badge-image {
  height: 67.5px;
  margin-block: -6.75px;
}

.hero-store-actions {
  align-items: center;
  flex-wrap: wrap;
}

.legacy-motion-sink {
  display: none !important;
}

.massive-text-track {
  opacity: 0.08;
}

.pinned-mockup {
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 1vw;
  width: min(63vw, 630px);
  height: min(94vh, 940px);
  transform: translateY(-50%);
  perspective: none;
}

.phone-hand {
  --hand-screen-left: 34.1%;
  --hand-screen-top: 17.2%;
  --hand-screen-width: 35%;
  --hand-screen-height: 53%;
  position: relative;
  width: 100%;
  height: 100%;
}

.phone-hand-screen {
  position: absolute;
  z-index: 1;
  top: var(--hand-screen-top);
  left: var(--hand-screen-left);
  width: var(--hand-screen-width);
  height: var(--hand-screen-height);
  overflow: hidden;
  border-radius: 9% / 4%;
  background: #07100f;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 8%);
}

.phone-hand-screen .mockup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: none;
}

#hand-screen-shift {
  opacity: 1;
}

.phone-hand-foreground {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 32px 42px rgb(0 0 0 / 52%));
}

.bento-card-layout {
  position: relative;
  width: 100%;
  height: 100%;
}

.bento-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.bento-earnings-media {
  position: absolute;
  right: -1%;
  bottom: -19%;
  width: 49%;
  height: 72%;
  overflow: visible;
}

.bento-earnings-media .bento-app-screen {
  position: static;
  width: 100%;
  border-radius: 28px 28px 0 0;
}

.bento-proof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(210px, 0.85fr);
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
}

.bento-proof-layout .card-content {
  align-self: center;
}

.bento-proof-media {
  align-self: stretch;
  overflow: hidden;
  border-left: 1px solid rgb(255 255 255 / 8%);
}

.bento-proof-media .bento-app-screen {
  position: absolute;
  top: -20%;
  right: 6%;
  bottom: auto;
  width: min(88%, 270px);
  border-radius: 28px;
}

.bento-proof-media .evidence-symbol {
  z-index: 2;
  top: 12%;
  right: 0;
  width: 92px;
}

.card-accent .card-content p {
  color: rgb(1 35 30 / 88%);
  font-weight: 520;
}

.card-small {
  padding: 32px;
}

.card-small .card-content h3 {
  font-size: clamp(2rem, 2.4vw, 2.25rem);
}

.card-small .card-content p {
  font-size: 0.96rem;
  line-height: 1.45;
}

.final-download-cluster {
  gap: 24px;
}

.final-store-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-qr-card {
  display: flex;
  min-height: 122px;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 20px;
  color: var(--text-main);
  background: rgb(255 255 255 / 4%);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

.download-qr-card:hover {
  border-color: rgb(0 212 178 / 50%);
  background: rgb(0 212 178 / 6%);
  transform: translateY(-2px);
}

.download-qr-card:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
}

.download-qr-card img {
  width: 96px;
  height: 96px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;
}

.download-qr-card span {
  display: grid;
  gap: 6px;
}

.download-qr-card strong {
  max-width: 130px;
  font-size: 0.96rem;
  line-height: 1.2;
}

.download-qr-card small {
  color: var(--text-muted);
  font-size: 0.76rem;
}

@media (width <= 1024px) {
  .pinned-mockup {
    right: -8vw;
    width: min(68vw, 580px);
  }

  .story-copy {
    left: 5vw;
    width: min(360px, 42vw);
  }

  .bento-proof-layout {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.8fr);
    gap: 22px;
  }
}

@media (width <= 600px) {
  .premium-nav {
    padding-bottom: 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .premium-nav .nav-container {
    width: calc(100% - 24px);
    padding: 8px 10px 8px 14px;
  }

  .side-menu {
    padding: 92px 24px 28px;
  }

  .side-menu-items li a {
    min-height: 48px;
    padding-block: 10px;
    font-size: clamp(1.45rem, 8vw, 2.15rem);
  }

  .store-badge-image {
    height: 48px;
  }

  [data-store="android"] .store-badge-image {
    height: 60px;
    margin-block: -6px;
  }

  .hero-store-actions {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .story-container {
    align-items: flex-start;
  }

  .massive-text-track {
    display: none;
  }

  .pinned-mockup {
    top: 8px;
    right: auto;
    left: 50%;
    width: min(92vw, 370px);
    height: min(64vh, 555px);
    transform: translateX(-50%);
  }

  .story-copy {
    z-index: 14;
    bottom: max(12px, 2vh);
    height: clamp(190px, 25vh, 216px);
  }

  .story-container > .story-copy {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
  }

  .story-step {
    padding: 20px;
  }

  .story-step h2 {
    margin-bottom: 10px;
    font-size: 1.35rem;
  }

  .story-step p {
    font-size: 0.95rem;
    line-height: 1.42;
  }

  .story-step small {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .bento-card-layout {
    display: flex;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    gap: 28px;
  }

  .bento-earnings-media,
  .bento-proof-media {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 350px;
    min-height: 350px;
    overflow: hidden;
    border-left: 0;
  }

  .bento-earnings-media .bento-app-screen,
  .bento-proof-media .bento-app-screen {
    position: absolute;
    top: 0;
    right: 50%;
    bottom: auto;
    width: min(74%, 270px);
    transform: translateX(50%);
  }

  .bento-proof-media .evidence-symbol {
    top: 18px;
    right: 6%;
  }

  .card-large,
  .card-wide {
    min-height: 620px;
  }

  .final-download-cluster {
    flex-direction: column;
  }

  .final-store-badges {
    flex-flow: row wrap;
    justify-content: center;
    gap: 10px;
  }

  .download-qr-card {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-hand,
  .legacy-motion-sink {
    display: none !important;
  }
}

/* Restored screen-only scroll story: real app UI, no hand or device shell. */
.pinned-mockup {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 300px;
  height: 620px;
  aspect-ratio: auto;
  transform: none;
  perspective: 1500px;
}

.story-screen-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 44px;
  background: #000;
  box-shadow:
    0 40px 80px rgb(0 0 0 / 90%),
    inset 0 0 0 1px rgb(255 255 255 / 20%),
    inset 0 0 20px rgb(255 255 255 / 5%);
}

.story-screen-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  will-change: opacity, transform;
}

#story-screen-shift {
  opacity: 1;
}

@media (width <= 600px) {
  .pinned-mockup {
    position: absolute;
    top: max(32px, 5vh);
    right: auto;
    left: 50%;
    width: min(44vw, 24vh, 180px);
    height: auto;
    aspect-ratio: 300 / 620;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-screen-stage {
    display: none !important;
  }
}

/* Bento Grid Expansion Styling */
.bento-vertical-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.bento-vertical-media {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 30px;
}

.bento-vertical-img {
  width: 90%;
  max-width: 300px;
  object-fit: contain;
  object-position: top center;
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* FAQ Section - 2026 Style Split Accordion */
.faq-container {
  display: flex;
  gap: 10vw;
  align-items: flex-start;
}

.faq-header-col {
  flex: 1;
  position: sticky;
  top: 15vh;
}

.faq-list-col {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-section {
  padding: 10vh 5vw 15vh;
  background-color: var(--bg-dark);
  position: relative;
  z-index: 10;
}

.faq-accordion {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  overflow: hidden;
  transition:
    background-color 0.4s var(--curve-smooth),
    border-color 0.4s var(--curve-smooth);
}

.faq-accordion:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.faq-accordion[open] {
  background: rgba(0, 212, 178, 0.05);
  border-color: rgba(0, 212, 178, 0.2);
  box-shadow: 0 10px 40px rgba(0, 212, 178, 0.05);
}

.faq-question {
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  padding-right: 20px;
  transition: color 0.3s;
}

.faq-accordion[open] .faq-question h3 {
  color: var(--accent-teal);
}

.faq-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s var(--curve-smooth), background 0.4s;
  color: var(--text-main);
}

.faq-accordion[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--accent-teal);
  color: var(--bg-dark);
}

.faq-answer {
  padding: 0 32px 32px;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .faq-container {
    flex-direction: column;
    gap: 40px;
  }
  .faq-header-col {
    position: static;
  }
}

/* Feature-card footnotes: the safety/liability caveat for a card lives here,
   one step down from the pitch line above it, rather than folded into the
   same sentence as the sell -- same pattern as .hero-tax-benefit small. */
.card-content small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}

.card-accent .card-content small {
  color: rgb(1 35 30 / 70%);
}

/* ---------- Pricing ---------- */
.pricing-section {
  position: relative;
  z-index: 20;
  padding: 16vh 0;
  background-color: #030303;
  border-top: 1px solid rgb(255 255 255 / 3%);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
}

.pricing-card {
  padding: 40px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 28px;
  background: rgb(255 255 255 / 3%);
}

.pricing-card-featured {
  border-color: rgb(0 212 178 / 40%);
  background: rgb(0 212 178 / 6%);
}

.pricing-term {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-main);
}

.pricing-price strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  /* Prices sit next to each other; lining figures keep the two cards aligned. */
  font-variant-numeric: tabular-nums;
}

.pricing-price span {
  color: var(--text-muted);
  font-size: 1rem;
}

.pricing-note {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pricing-free,
.pricing-tax {
  max-width: 720px;
  margin-top: 28px;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.pricing-tax {
  margin-top: 12px;
  font-size: 0.88rem;
}

.pricing-tax a {
  color: var(--accent-teal);
  font-weight: 600;
  text-decoration: none;
}

.pricing-tax a:hover,
.pricing-tax a:focus-visible {
  text-decoration: underline;
}

@media (width <= 600px) {
  .pricing-section {
    padding: 10vh 0;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pricing-card {
    padding: 28px 24px;
  }
}

/* ---------- Waitlist capture (final CTA) ---------- */
.waitlist-form {
  max-width: 480px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.waitlist-lede {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

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

.waitlist-label {
  /* Visually hidden but present for assistive tech; the placeholder carries
     the visible hint, so a floating/adjacent visible label would duplicate
     it. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.waitlist-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  color: var(--text-main);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
  font-size: 0.95rem;
  font-family: inherit;
}

.waitlist-input::placeholder {
  color: var(--text-muted);
}

.waitlist-input:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

.waitlist-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  color: var(--bg-dark);
  border: 0;
  border-radius: 12px;
  background: var(--accent-teal);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 160ms ease, transform 160ms ease;
}

.waitlist-submit:hover {
  transform: translateY(-1px);
}

.waitlist-submit:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 2px;
}

.waitlist-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.waitlist-hp {
  /* Off-screen rather than display:none/visibility:hidden -- some spam
     scripts skip fields those computed styles report as invisible, but
     still fill a field only positioned out of the viewport. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.waitlist-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.waitlist-status[data-tone="success"] {
  color: var(--accent-teal);
}

.waitlist-status[data-tone="error"] {
  color: #ff8a8a;
}

@media (width <= 600px) {
  .waitlist-row {
    flex-direction: column;
  }

  .waitlist-submit {
    width: 100%;
  }
}

/* Hero call-to-action.
   Replaces the App Store / Google Play badges that stood here until
   2026-08-26. Both store URLs 404 while the app is still in review, so the
   hero now points at the waitlist anchor instead of a dead end. Styled to
   match .waitlist-submit so the hero CTA and the form button it scrolls to
   read as the same action. */
.hero-waitlist-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  color: var(--bg-dark);
  border-radius: 12px;
  background: var(--accent-teal);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: opacity 160ms ease, transform 160ms ease;
}

.hero-waitlist-cta:hover {
  transform: translateY(-1px);
}

.hero-waitlist-cta:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-waitlist-cta {
    transition: none;
  }

  .hero-waitlist-cta:hover {
    transform: none;
  }
}