:root {
  color-scheme: dark light;
  --background: #16213e;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #a0a0b0;
  --border: rgba(255, 255, 255, 0.12);
  --link: #dce4ff;
  --link-hover: #ffffff;
  --home-background: #16213e;
  --home-background-inner: #0f0f1a;
  --home-surface: #212a44;
  --home-surface-soft: rgba(255, 255, 255, 0.06);
  --home-border: rgba(255, 255, 255, 0.12);
  --home-text: #ffffff;
  --home-muted: #a0a0b0;
  --home-accent: #e94560;
  --home-accent-hover: #ff647f;
  --home-scan: #2dd4bf;
  --legal-border: #d9e2ec;
}

* {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--background);
  color: #ffffff;
}

body {
  margin: 0;
  line-height: 1.65;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
}

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header,
.site-footer {
  background: transparent;
}

.site-header {
  border-bottom: 1px solid var(--border);
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.site-header__inner,
.page-content,
.site-footer,
.site-footer__inner {
  width: min(100% - 2rem, 52rem);
  margin: 0 auto;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.brand__mark {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  flex: 0 0 auto;
  border-radius: 0.32rem;
  box-shadow:
    0 0 0.5rem rgba(255, 255, 255, 0.12),
    0 0 1rem rgba(255, 255, 255, 0.04);
}

.site-header__cta {
  max-width: min(100%, 18.5rem);
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--home-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page-content {
  width: min(100% - 2rem, 53rem);
  padding: 2.5rem 0 3rem;
}

.legal-content h1,
.home-content h1 {
  line-height: 1.2;
  margin-top: 0;
}

.legal-content h2,
.legal-content h3 {
  line-height: 1.3;
  margin-top: 2rem;
}

.legal-content p,
.legal-content ul,
.legal-content ol,
.legal-content table,
.home-content p {
  margin: 1rem 0;
}

.legal-content {
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.5rem;
  box-shadow: 0 2rem 4rem rgba(4, 10, 22, 0.22);
  padding: 2rem 1.5rem 2.5rem;
  margin-top:1.5rem;
}

.legal-content a {
  color: #0b5fff;
}

.legal-content a:hover,
.legal-content a:focus-visible {
  color: #0847bf;
}

.legal-content ul,
.legal-content ol {
  padding-left: 1.25rem;
}

.legal-content hr {
  border: 0;
  border-top: 1px solid var(--legal-border);
  margin: 2rem 0;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.legal-content th,
.legal-content td {
  border: 1px solid var(--legal-border);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.legal-content th {
  background: #f0f4f8;
}

.site-footer {
  padding: 1.25rem 0 2rem;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer__links a {
  color: var(--muted);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: #ffffff;
}

/*
  Homepage styles are intentionally namespaced under .page-home so changes here do not
  accidentally restyle the generated legal pages.
*/
.page-home {
  background:
    radial-gradient(circle at top, rgba(45, 212, 191, 0.08), transparent 34rem),
    linear-gradient(180deg, #1b2a4a 0%, var(--home-background) 18%, #121b31 100%);
  color: var(--home-text);
}

.page-home .page-content {
  width: min(100% - 2rem, 76rem);
}

.home-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

.landing-stage {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 2rem;
}

/* ── Split-hero: pitch text (left column) ── */

.landing-stage__pitch {
  max-width: 32rem;
  text-align: center;
}

.pitch__kicker {
  margin: 0 0 0.75rem;
  color: var(--home-scan);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0;
  animation: fade-in-up 0.7s ease-out 0.15s forwards;
}

.pitch__headline {
  margin: 0 0 1.25rem;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--home-text);
  opacity: 0;
  animation: fade-in-up 0.7s ease-out 0.35s forwards;
}

.pitch__body {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.6;
  color: var(--home-muted);
  opacity: 0;
  animation: fade-in-up 0.7s ease-out 0.55s forwards;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch__kicker,
  .pitch__headline,
  .pitch__body {
    opacity: 1;
    animation: none;
  }
}

.landing-stage__device-stack {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

/*
  The homepage hero uses Apple's official iPhone 17 portrait bezel artwork. The measured
  transparent opening in that PNG is 1206x2622 inside a 1350x2760 asset, so the screen
  window is expressed as percentages of the overall frame and scales responsively with it.
*/
.device-render {
  position: relative;
  width: min(100%, clamp(13.4rem, calc((100dvh - 10rem) * 0.43), 18.6rem));
  aspect-ratio: 1350 / 2760;
  filter: drop-shadow(0 2rem 4.5rem rgba(0, 0, 0, 0.42));
}

.device-render__screen-window {
  position: absolute;
  top: 2.5%;
  left: 5.333333%;
  width: 89.333333%;
  height: 95%;
  overflow: hidden;
  /*
    The Apple frame image defines the visible screen opening, but the live
    screen layer still needs its own responsive clipping so dark content does
    not extend over the shell at small sizes. This needs to scale with the
    screen window itself rather than the browser viewport, otherwise the fit
    drifts at very narrow and medium browser widths.
  */
  border-radius: clamp(12px, 10%, 28px);
  background: var(--home-background-inner);
}

.device-render__frame {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.app-landing-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-landing-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 390px;
  height: 844px;
  transform-origin: top center;
}

.app-landing {
  width: 390px;
  height: 844px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 28px 32px;
  background: var(--home-background-inner);
}

.app-landing__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-stats-card {
  width: 240px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  padding: 12px 18px;
  border: 1px solid var(--home-surface);
  border-radius: 14px;
  background: var(--home-surface);
}

.hero-stats-card__metric {
  text-align: center;
}

.hero-stats-card__label {
  margin: 0 0 4px;
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.hero-stats-card__value {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-stats-card__unit {
  margin-left: 2px;
  font-size: 16px;
  font-weight: 600;
}

.hero-stats-card__divider {
  width: 1px;
  margin: 4px 12px;
  background: var(--home-surface);
}

.hero-scan-frame {
  position: relative;
  width: 232px;
  aspect-ratio: 232 / 340;
  overflow: hidden;
  border: 1.5px solid #2b3556;
  border-radius: 0;
  background: transparent;
}

.hero-scan-frame__silhouette {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 56.9%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.92;
}

.hero-scan-frame__band {
  position: absolute;
  top: 6px;
  left: 2px;
  right: 2px;
  display: grid;
  gap: 0;
  height: 40px;
  animation: scan-band 2.1s linear infinite alternate;
  will-change: transform;
}

.hero-scan-frame__band span:nth-child(1),
.hero-scan-frame__band span:nth-child(5) {
  background: rgba(45, 212, 191, 0.1);
}

.hero-scan-frame__band span:nth-child(2),
.hero-scan-frame__band span:nth-child(4) {
  background: rgba(45, 212, 191, 0.4);
}

.hero-scan-frame__band span:nth-child(3) {
  background: rgba(45, 212, 191, 1);
}

.hero-scan-frame__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--home-scan);
  border-style: solid;
  z-index: 2;
}

.hero-scan-frame__corner--tl {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
}

.hero-scan-frame__corner--tr {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
}

.hero-scan-frame__corner--bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 3px 3px;
}

.hero-scan-frame__corner--br {
  right: 0;
  bottom: 0;
  border-width: 0 3px 3px 0;
}

.app-landing__copy {
  margin-top: 20px;
  text-align: center;
}

.app-landing__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.app-landing__tagline {
  margin: 12px auto 0;
  max-width: 304px;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.35;
}

.app-landing__cta {
  width: 100%;
  max-width: 264px;
  height: 56px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--home-accent);
  color: var(--home-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.trust-strip {
  width: min(100%, 320px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.trust-strip__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--home-muted);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

.trust-strip__icon {
  color: var(--home-muted);
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}

@keyframes scan-band {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(276px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scan-frame__band {
    animation: none;
    transform: translateY(138px);
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header__cta {
    max-width: 100%;
    white-space: normal;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-content {
    padding-top: 2rem;
  }

  .home-landing {
    min-height: auto;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }

  .device-render {
    width: min(100%, 23.25rem);
  }

  .app-landing {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .trust-strip {
    gap: 0.5rem;
  }

}

@media (min-width: 641px) {
  .page-shell--home {
    min-height: 100dvh;
  }

  .page-shell--home .site-header__inner {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .page-shell--home .site-footer {
    padding-top: 0.9rem;
    padding-bottom: 1rem;
  }

  .home-landing {
    min-height: 0;
  }

  .landing-stage {
    height: 100%;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    align-content: center;
    justify-items: start;
    gap: 2rem;
  }

  .landing-stage__pitch {
    text-align: left;
  }

  .landing-stage {
    padding-left: 9.5rem;
    padding-right: 2rem;
  }

  .landing-stage__device-stack {
    justify-self: center;
  }

  .device-render {
    width: min(100%, clamp(13.4rem, calc((100dvh - 10rem) * 0.43), 18.6rem));
  }
}