/* Landing in its marketing layout, colours from the fixed palette in tokens.css (decisions/0019) */
:root {
  --deep: var(--dark-bg);
  --deep-2: var(--light-ink);
  --indigo: var(--light-accent);
  --indigo-hi: var(--dark-accent);
  --indigo-lo: var(--dark-accent-soft);
  --soft: var(--light-accent-soft);
  --paper: var(--light-bg);
  --cream: var(--dark-ink);
  --muted-on-dark: var(--dark-ink-2);
  --phone-bezel: var(--dark-surface);
  --radius-phone: 13% / 6%;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); min-height: 100vh; color: var(--cream); font: 17px/1.55 var(--font); overflow-x: hidden; }
a { color: inherit; }
.page { background: radial-gradient(70% 22% at 6% 0%, var(--indigo-hi), transparent 70%), radial-gradient(60% 18% at 100% 34%, color-mix(in srgb, var(--indigo-hi) 50%, transparent), transparent 70%), radial-gradient(60% 18% at 0% 58%, color-mix(in srgb, var(--indigo) 55%, transparent), transparent 70%), radial-gradient(60% 18% at 100% 80%, color-mix(in srgb, var(--indigo-hi) 40%, transparent), transparent 70%), linear-gradient(180deg, var(--indigo) 0%, var(--indigo-lo) 38%, var(--indigo-lo) 70%, var(--deep) 100%); background-repeat: no-repeat; overflow-x: clip; }
h1, h2 { font-family: var(--font); letter-spacing: -0.03em; margin: 0; }

.hero { position: relative; isolation: isolate; min-height: min(100vh, 860px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 24px; padding: 32px max(24px, 5vw) 48px; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); }
.hero::before { width: 120vmin; height: 120vmin; right: -20vmin; top: -10vmin; }
.hero::after { width: 80vmin; height: 80vmin; right: 4vmin; top: 10vmin; }
.hero__copy { max-width: 560px; }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: 1.5rem; text-decoration: none; margin-bottom: 40px; }
.brand img { width: 64px; height: 64px; border-radius: 22%; box-shadow: 0 12px 28px color-mix(in srgb, var(--deep) 45%, transparent); }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: .98; font-weight: 900; }
.hero p.lead { margin: 24px 0 28px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted-on-dark); max-width: 30em; }
.pill { display: inline-block; padding: 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--cream) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 28%, transparent); font-weight: 600; font-size: .95rem; }

.stage { position: relative; width: 100%; aspect-ratio: 1.12; margin-top: 24px; }
.phone { position: absolute; margin: 0; padding: .8%; background: var(--phone-bezel); border-radius: var(--radius-phone); box-shadow: 0 0 0 1px color-mix(in srgb, var(--light-surface) 16%, transparent) inset, 0 40px 70px color-mix(in srgb, var(--deep) 55%, transparent); }
.phone img { display: block; width: 100%; height: auto; border-radius: 12.4% / 5.6%; background: var(--paper); }
.phone::after { content: ""; position: absolute; top: 2.4%; left: 50%; width: 25%; height: 1.7%; transform: translateX(-50%); border-radius: 999px; background: var(--phone-bezel); }
.stage .p-left { width: 36%; left: 0; top: 12%; }
.stage .p-mid { width: 41%; left: 30%; top: 0; z-index: 2; }
.stage .p-right { width: 36%; right: 0; top: 12%; }

.band { position: relative; isolation: isolate; padding: clamp(56px, 8vw, 112px) max(24px, 5vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 32px; }
.band:nth-of-type(odd) .band__copy { order: 2; }
.band::before { content: ""; position: absolute; z-index: -1; width: 80vmin; aspect-ratio: 1; border-radius: 50%; right: -20vmin; top: 50%; transform: translateY(-50%); border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); }
.band:nth-of-type(odd)::before { right: auto; left: -20vmin; }
.eyebrow { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 12px; }
.band h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; font-weight: 800; margin-bottom: 16px; }
.band p { margin: 0; max-width: 28em; font-size: 1.1rem; opacity: .85; }
.duo { position: relative; width: 100%; aspect-ratio: 1.25; }
.duo .phone { width: 40%; }
.duo .d-left { left: 8%; top: 4%; }
.duo .d-right { right: 8%; top: 12%; }
.duo .d-one { left: 30%; top: 4%; }

.cta { text-align: center; padding: 96px 24px 56px; }
.cta h2 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; margin-bottom: 14px; }
.cta p { margin: 0 auto 28px; color: var(--muted-on-dark); max-width: 28em; }
footer.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; padding: 0 24px 48px; color: var(--muted-on-dark); font-size: .9rem; }
footer.foot a { text-decoration: none; opacity: .85; }
footer.foot a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .brand { margin-bottom: 28px; }
  .band { grid-template-columns: 1fr; }
  .band:nth-of-type(odd) .band__copy { order: 0; }
  .duo { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage .phone, .duo .phone { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .stage:hover .p-left { transform: translateX(-3%); }
  .stage:hover .p-right { transform: translateX(3%); }
}

.js [data-reveal] { opacity: 0; translate: 0 36px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.2, .7, .2, 1), scale 1s cubic-bezier(.2, .7, .2, 1); }
.js .phone[data-reveal] { translate: 0 72px; scale: .94; }
.js [data-reveal].in { opacity: 1; translate: 0 0; scale: 1; }

.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.steps b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--cream) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent); font-size: .9rem; }
.flow { position: relative; width: 100%; aspect-ratio: 1.25; }
.flow .f-phone { width: 36%; left: 2%; top: 4%; }
.flow .qr { position: absolute; left: 27%; bottom: 2%; width: 26%; padding: 2.4%; background: var(--light-surface); border-radius: 12%; box-shadow: 0 24px 50px color-mix(in srgb, var(--deep) 50%, transparent); transform: rotate(4deg); z-index: 3; }
.flow .qr img { display: block; width: 100%; height: auto; }
.browser { position: absolute; right: 0; top: 14%; width: 52%; background: var(--paper); color: var(--deep-2); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 70px color-mix(in srgb, var(--deep) 50%, transparent); transform: rotate(2deg); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--light-surface-2); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--light-line-strong); }
.browser__bar span { margin-left: 8px; flex: 1; min-width: 0; padding: 4px 10px; border-radius: 999px; background: var(--light-surface); font-size: .68rem; color: var(--light-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser__page { padding: 16px; display: grid; gap: 12px; }
.bz { display: grid; gap: 2px; padding: 16px; border-radius: 14px; background: var(--indigo); color: var(--light-surface); }
.bz strong { font-size: 1.15rem; }
.bz span { font-size: .82rem; opacity: .85; }
.rows { margin: 0; display: grid; gap: 8px; }
.rows div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--light-line); font-size: .8rem; }
.rows dt { color: var(--light-ink-2); }
.rows dd { margin: 0; font-weight: 600; text-align: right; }
.save { text-align: center; padding: 10px; border-radius: 999px; background: var(--indigo); color: var(--light-surface); font-weight: 700; font-size: .8rem; }
@media (max-width: 880px) {
  .flow { aspect-ratio: 1.05; }
  .rows div { font-size: .7rem; }
  .browser__page { padding: 10px; gap: 8px; }
  .bz { padding: 10px; }
  .bz strong { font-size: .95rem; }
  .bz span { font-size: .68rem; }
  .save { font-size: .68rem; padding: 7px; }
}