/* Final shared QA layer: accessibility, responsive stability, and performance. */
html { color-scheme: dark; }
.demo-page { color-scheme: light; }

img { max-width: 100%; }

.site-footer > span { color: #92949d; }

.studio-page .studio-progress-title strong { color: #f4f2ec; }
.studio-page .studio-progress li i { color: #989ba6; }
.studio-page .studio-progress li.is-current i { color: #05060b; }

.demo-page .studio-steps-heading span,
.demo-page .studio-steps li:not(.is-active),
.demo-page .control-heading span,
.demo-page .control-heading button,
.demo-page .control-group legend span,
.demo-page .experience-option small,
.demo-page .experience-option > i,
.demo-page .business-name-field > span,
.demo-page .palette-field > span,
.demo-page .logo-field > span { color: #5e5d66; }

.demo-page .pos-option small { color: #50545f; }
.demo-page .demo-app-header small,
.demo-page .demo-reward-card small { color: #595862; }
.demo-page .studio-connected small { color: #55545c; }
.demo-page .experience-option.is-selected > i { color: #ffffff; }
.demo-page .site-footer small,
.demo-page .site-footer > p,
.demo-page .site-footer > span { color: #a8abba; }
.demo-page .site-footer a[aria-current="page"] { color: #91a6ff; }

.home-page .button,
.home-page .text-action,
.studio-page .studio-app-tabs button {
  min-width: 44px;
  min-height: 44px;
}

.demo-page .brand,
.demo-page .menu-button,
.demo-page .demo-app-header button,
.demo-page .demo-campaign button,
.demo-page .control-heading button,
.demo-page .business-name-field input,
.demo-page .palette-options button,
.demo-page .logo-field strong,
.demo-page .studio-action,
.demo-page .text-link,
.demo-page .site-footer a {
  min-height: 44px;
}

.demo-page .menu-button { min-width: 44px; }
.demo-page .palette-options button { width: 44px; }
.demo-page .palette-options button { height: 44px; }
.demo-page .demo-app-header button { min-width: 48px; min-height: 48px; }
.demo-page .demo-campaign button { min-height: 48px; }
.demo-page .control-heading button { display: inline-flex; align-items: center; }
.demo-page .logo-field strong { padding-inline: 8px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #8fb7ff;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 820px) {
  /* A transformed parent changes the containing block for mobile fixed controls. */
  .platform-copy,
  .business-copy,
  .pricing-copy {
    transform: none !important;
    will-change: opacity;
  }

  .platform-text-action,
  .business-text-action,
  .pricing-text-action {
    min-height: 44px;
    align-items: center;
  }

  .source-output { right: 2%; }
  .moment-role-return { bottom: 3%; }
  .journey-visual { top: 245px; }
}

@media (max-width: 680px) {
  .site-header .menu-button {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }

  .home-page .hero-single-product .hero-phone-featured {
    transform: translateY(-24px) !important;
  }

  /* Google mobile readability: essential copy and controls remain at least 12px. */
  .sphere-lockup-kicker,
  .sphere-lockup-company,
  .home-page .cinematic-intro > p,
  .home-page .hero-copy .eyebrow,
  .home-page .hero-copy > p:not(.eyebrow),
  .home-page .hero-actions .button,
  .home-page .hero-actions .text-action,
  .home-page .problem-slide-label,
  .home-page .problem-copy > p,
  .home-page .problem-role > span,
  .home-page .marketplace-panel > strong,
  .home-page .marketplace-entry > em,
  .home-page .direct-copy > p,
  .home-page .product-journey-copy > p,
  .home-page .pilot-slide-label,
  .home-page .pilot-copy > p,
  .home-page .pilot-price > span,
  .home-page .pilot-pricing > p,
  .home-page .pilot-action,
  .home-page .final-slide-label,
  .home-page .final-copy > p,
  .home-page .final-primary-action,
  .home-page .final-text-action,
  .platform-copy > p:first-child,
  .platform-hero-copy > strong,
  .platform-primary-action,
  .platform-text-action,
  .moment-role,
  .source-output,
  .journey-node,
  .journey-copy small,
  .platform-integrations li strong,
  .pricing-copy > p:first-child,
  .pricing-rate p,
  .pricing-primary-action,
  .pricing-text-action,
  .pricing-service,
  .pricing-preview-node,
  .pricing-preview-screen strong,
  .pricing-square-status strong,
  .pricing-square-status span {
    font-size: 12px !important;
  }

  .about-copy > p:first-child,
  .about-copy h1 + p,
  .about-copy h2 + p,
  .about-text-action,
  .about-primary-action,
  .about-mobile-summary > p,
  .about-mobile-summary .about-text-action,
  .connection-role,
  .about-square-node,
  .about-value {
    font-size: 12px !important;
  }

  .business-node,
  .business-node small,
  .business-copy > p:first-child,
  .visual-square-status,
  .studio-page .studio-progress-title span,
  .studio-page .studio-progress-title strong,
  .studio-page .studio-progress li i,
  .studio-page .studio-choice strong,
  .studio-page .studio-choice small,
  .studio-page .studio-control-group legend,
  .studio-page .studio-direction strong,
  .studio-page .studio-assurance,
  .studio-page .studio-preview-status,
  .studio-page .site-brand strong,
  .studio-page .site-brand small,
  .studio-page .site-footer nav a,
  .studio-page .site-footer > a:not(.site-brand),
  .studio-page .site-footer > span {
    font-size: 12px !important;
  }

  /* This trust line repeats nearby copy and became illegible at presentation scale. */
  .home-page .final-trust { display: none; }
}

/* Tall phones need a composed portrait layout, not the short-screen artwork
   floating above copy that is pinned to the bottom edge. Keep the phone and
   its supporting diagram large enough to use the available canvas, then pull
   the copy into the same visual group. */
@media (max-width: 680px) and (min-height: 740px) {
  .home-page .problem-visual {
    min-height: 430px;
  }

  .home-page .problem-phone {
    width: min(170px, 42vw, calc((100svh - 430px) * .485));
  }

  .home-page .marketplace-panel {
    width: min(138px, 35vw);
  }

  .home-page .problem-copy {
    bottom: 120px;
  }

  .home-page .direct-visual {
    min-height: 470px;
  }

  .home-page .direct-world {
    width: min(285px, 72vw, 42vh);
  }

  .home-page .direct-phone {
    width: min(178px, 44vw, calc((100svh - 420px) * .485));
  }

  .home-page .direct-copy {
    bottom: 116px;
  }

  .home-page .product-journey-visual {
    min-height: 470px;
  }

  .home-page .journey-device {
    width: min(104px, 26vw, calc((100svh - 430px) * .485));
  }

  .home-page .journey-device-order {
    width: min(138px, 34vw, calc((100svh - 385px) * .485));
  }

  .home-page .product-journey-copy {
    bottom: 115px;
  }

  .home-page .pos-visual {
    min-height: 450px;
  }

  .home-page .pos-phone {
    width: min(128px, 32vw, calc((100svh - 400px) * .485));
  }

  .home-page .pos-copy {
    bottom: 110px;
  }

  .home-page .how-visual {
    height: min(54svh, 460px);
  }

  .home-page .how-phone {
    width: min(160px, 39vw, calc((54svh - 20px) * .485));
  }

  .home-page .how-copy {
    bottom: 90px;
  }
}

/* Max/Plus-class phones have another full row of usable height. Let the
   diagrams occupy it and keep their captions visually attached. */
@media (max-width: 680px) and (min-height: 880px) {
  .home-page .problem-visual { min-height: 500px; }
  .home-page .problem-copy { bottom: 130px; }

  .home-page .direct-visual { min-height: 540px; }
  .home-page .direct-copy { bottom: 140px; }

  .home-page .product-journey-visual { min-height: 540px; }
  .home-page .product-journey-copy { bottom: 140px; }

  .home-page .pos-visual { min-height: 540px; }
  .home-page .pos-copy { bottom: 140px; }

  .home-page .how-visual { height: 520px; }
  .home-page .how-copy { bottom: 130px; }
}

@media (max-width: 360px) {
  /* Keep the founding-pilot phone clear of the four-line headline on short phones. */
  .pricing-home-device { width: min(28vh, 31vw, 145px); }
}

@media (max-width: 360px) and (max-height: 620px) {
  /* The full product stage cannot fit cleanly on legacy 568px screens. */
  .pricing-spotlight-visual { display: none; }
}

/* Real mobile Safari has materially less usable height than the advertised
   device resolution. These compact compositions reserve independent zones for
   navigation, product imagery, copy, and actions so none of them collide. */
@media (max-width: 480px) {
  /* Intro: keep the front-facing product prominent without crowding the line
     at the bottom of the cinematic sequence. */
  .home-page .intro-single-phone {
    width: min(144px, 37vw);
  }

  .home-page .cinematic-intro.stage-phone .intro-single-phone {
    transform: translate(-50%, -46%) scale(1);
  }

  .home-page .cinematic-intro.stage-screen .intro-single-phone {
    transform: translate(-50%, -47%) scale(1.015);
  }

  .home-page .cinematic-intro > p {
    right: 14px;
    bottom: 5.5svh;
    left: 14px;
    font-size: 12px !important;
    letter-spacing: .32em;
    text-align: center;
  }

  /* Landing hero: the phone is fully visible below the header and the sales
     message begins only after the product stage ends. */
  .home-page .hero-product-stage,
  .home-page .hero-single-product {
    inset: 78px 0 342px;
  }

  .home-page .hero-single-product .hero-phone-featured {
    width: min(138px, 35vw) !important;
    transform: none !important;
  }

  .home-page .hero-single-product .hero-phone-labels {
    display: none;
  }

  .home-page .hero-copy {
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 18px;
  }

  .home-page .hero-copy .eyebrow {
    max-width: 350px;
    margin-inline: auto;
    line-height: 1.35;
  }

  .home-page .hero-copy h1 {
    margin: 8px 0 7px;
    font-size: clamp(1.86rem, 8.8vw, 2.15rem);
    line-height: .98;
  }

  .home-page .hero-copy > p:not(.eyebrow) {
    max-width: 355px;
    line-height: 1.38;
  }

  .home-page .hero-actions {
    gap: 10px;
    margin-top: 9px;
  }

  .home-page .hero-actions .button,
  .home-page .hero-actions .text-action {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px !important;
    letter-spacing: .08em;
  }

  /* Founding pilot: keep the phone in a dedicated upper stage and align the
     explanation and prices along a common baseline below it. */
  .home-page .pilot-slide-label {
    top: 70px;
  }

  .home-page .pilot-visual {
    top: 78px;
    right: 11%;
    left: 11%;
    height: 304px;
  }

  .home-page .pilot-phone {
    top: 51%;
    width: min(140px, 36vw);
  }

  .home-page .pilot-copy {
    right: 53%;
    bottom: 28px;
  }

  .home-page .pilot-copy > p:first-child {
    display: none;
  }

  .home-page .pilot-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(1.08rem, 4.8vw, 1.28rem);
    line-height: 1.13;
  }

  .home-page .pilot-copy > p:nth-of-type(2) {
    font-size: 12px;
    line-height: 1.38;
  }

  .home-page .pilot-pricing {
    right: 18px;
    bottom: 28px;
    width: calc(45% - 10px);
  }

  .home-page .pilot-price {
    gap: 4px;
    padding-bottom: 10px;
  }

  .home-page .pilot-price + .pilot-price {
    padding-top: 10px;
  }

  .home-page .pilot-price strong {
    font-size: clamp(1.9rem, 9vw, 2.25rem);
  }

  .home-page .pilot-price > span {
    line-height: 1.35;
  }

  .home-page .pilot-action {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 11px !important;
    line-height: 1.25;
    text-align: center;
  }

  .home-page .pilot-pricing > p {
    display: none;
  }

  /* Pricing hero: the four-line heading, phone, prices, and CTA now occupy
     non-overlapping bands of the viewport. */
  .pricing-hero-copy {
    top: 88px;
  }

  .pricing-hero-copy h1 {
    max-width: 310px;
    font-size: clamp(1.48rem, 7.3vw, 1.78rem);
    line-height: 1.02;
  }

  .pricing-spotlight-visual {
    inset: 218px 0 210px;
  }

  .pricing-home-device {
    width: min(29vh, 32vw, 138px);
  }

  .pricing-spotlight-plate {
    top: -3%;
    width: 142%;
    height: 112%;
  }

  .pricing-rates {
    top: calc(100svh - 282px);
  }

  .pricing-rate {
    min-height: 74px;
  }

  .pricing-rate strong {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  .pricing-hero-copy > .pricing-primary-action {
    top: calc(100svh - 190px);
    min-height: 50px;
  }

  /* Platform source: reduce the empty gap after the headline and enlarge the
     live menu while preserving the output icons and POS status row. */
  .platform-source-scene .source-visual {
    top: 166px;
    bottom: 78px;
  }

  .platform-source-scene .platform-device-menu {
    width: min(25vh, 43vw, 170px);
  }

  .platform-source-scene .source-origin {
    left: 3%;
  }

  .platform-source-scene .source-output {
    right: 0;
  }
}

@media (max-width: 360px) and (max-height: 680px) {
  .home-page .hero-product-stage,
  .home-page .hero-single-product {
    inset: 76px 0 328px;
  }

  .home-page .hero-single-product .hero-phone-featured {
    width: min(124px, 34vw) !important;
  }

  .home-page .hero-copy h1 {
    font-size: 1.72rem;
  }

  .home-page .hero-copy > p:not(.eyebrow) {
    line-height: 1.32;
  }

  .home-page .pilot-visual {
    height: 274px;
  }

  .home-page .pilot-phone {
    width: min(124px, 35vw);
  }

  .home-page .pilot-copy h2 {
    font-size: 1rem;
  }

  .home-page .pilot-copy > p:nth-of-type(2) {
    font-size: 11px;
  }

  .pricing-spotlight-visual {
    inset: 226px 0 207px;
  }

  .pricing-home-device {
    width: min(25vh, 28vw, 112px);
  }
}

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