:root {
  color-scheme: dark;
  --ink: #f6f5ef;
  --muted: #aaaead;
  --bg: #080909;
  --panel: #151717;
  --line: #323635;
  --teal: #50dfd4;
  --yellow: #ffca43;
  --purple: #7940ee;
  --blue: #268bef;
  --red: #e82a25;
  --black: #0e0e10;
  /* v2 colour fields (App Store slides) */
  --f-amber: #ffc42e;
  --f-fire: #d8360c;
  --f-teal: #18ceba;
  --f-sand: #f3ece0;
  --f-green: #34d378;
  --display: Impact, "Helvetica Neue Condensed Black", "HelveticaNeue-CondensedBlack", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
::selection { color: #090909; background: var(--teal); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.skip-link { position: absolute; z-index: 100; top: -10rem; left: 1rem; background: var(--teal); color: #061010; padding: .75rem 1rem; border-radius: .5rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }
.wrap { width: min(100% - 3rem, 1240px); margin-inline: auto; }
main > section { overflow: hidden; overflow: clip; }

/* Type */
.display { font-family: var(--display); font-stretch: condensed; font-weight: 900; letter-spacing: -.045em; text-transform: uppercase; }
.mega { font-family: var(--display); font-stretch: condensed; font-weight: 900; letter-spacing: -.025em; font-size: clamp(4.2rem, 9.4vw, 9.6rem); line-height: .88; margin: 0; }
.mega-md { font-size: clamp(3.4rem, 6.6vw, 6.6rem); line-height: .92; }
.kicker-lg { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 750; letter-spacing: -.015em; line-height: 1.25; margin: .9rem 0 0; }
.c-yellow { color: var(--yellow); } .c-teal { color: var(--teal); }
.eyebrow, .section-kicker { font-size: .78rem; letter-spacing: .14em; font-weight: 900; text-transform: uppercase; }
.section-kicker { color: var(--teal); margin-bottom: 1.5rem; }
h1, h2, h3, p { margin-top: 0; }
main h2.display { font-size: clamp(3.6rem, 6.4vw, 6.6rem); line-height: .96; margin-bottom: 0; }
.lede { color: #c5cac6; font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.57; max-width: 34rem; margin: 1.8rem 0 0; }
.fine { color: #8d958f; font-size: .85rem; line-height: 1.55; max-width: 32rem; margin: 1.5rem 0 0; }

/* Header */
.site-header { width: min(100% - 3rem, 1340px); min-height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-size: 1.42rem; font-weight: 900; letter-spacing: -.06em; white-space: nowrap; }
.brand img { width: 42px; height: 42px; border-radius: 11px; }
.brand-dot, .footer-brand span { color: var(--teal); }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); margin-left: auto; }
.site-nav a { color: #ced1ce; text-decoration: none; font-size: .9rem; font-weight: 700; transition: color .2s ease; }
.site-nav a:hover { color: white; }
.header-cta { display: inline-flex; align-items: center; gap: 1.2rem; text-decoration: none; border: 1px solid #4b514e; padding: .78rem 1rem .78rem 1.2rem; border-radius: 999px; font-size: .9rem; font-weight: 800; white-space: nowrap; transition: background .2s ease, border-color .2s ease; }
.header-cta:hover { border-color: var(--teal); background: #152521; }
.header-cta span { font-size: 1.15rem; }

/* ---------- Colour bands ---------- */
.band { position: relative; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); }
.band-copy { align-self: center; padding-block: clamp(4.5rem, 8vw, 7.5rem); position: relative; z-index: 2; }
.band-lede { font-size: clamp(1.06rem, 1.45vw, 1.24rem); line-height: 1.55; max-width: 32rem; margin: 1.6rem 0 0; font-weight: 500; }
.band-note { font-size: .84rem; line-height: 1.5; margin: 1.4rem 0 0; }
.band-media { display: flex; justify-content: center; position: relative; }
.bleed-bottom { align-items: flex-start; padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.bleed-top { align-items: flex-end; padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.bleed-bottom .shot { margin-bottom: calc(var(--w) * -.66); }
.bleed-top .shot { margin-top: calc(var(--w) * -.5); }

.band-blue { background: linear-gradient(180deg, #061646 0%, #0b2f8a 55%, #1260d8 100%); color: #fff; }
.band-blue .band-lede { color: #eef2ff; } .band-blue .band-note { color: #fff; }
.band-amber { background: var(--f-amber); color: var(--black); }
.band-grey { background: linear-gradient(180deg, #a8aaac 0%, #e8e8e6 55%); color: var(--black); }
.band-fire { background: var(--f-fire); color: #fff; }
.band-fire .band-note { color: #fff; }
.band-violet { background: linear-gradient(180deg, #601ed6 0%, #7a36f0 100%); color: #fff; }
.band-teal { background: var(--f-teal); color: var(--black); }
.band-sand { background: var(--f-sand); color: var(--black); }
.band-green { background: var(--f-green); color: var(--black); }
.band-amber .band-lede, .band-grey .band-lede, .band-teal .band-lede, .band-sand .band-lede, .band-green .band-lede { color: #1d1e20; }
.band-flip .band-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }

/* Phone frame + pop-outs */
.shot { --w: min(var(--pw, 320px), 74vw); position: relative; width: var(--w); flex: none; }
.phone { position: relative; aspect-ratio: 1320 / 2868; overflow: hidden; background: #050505; border: 6px solid #1c1d20; border-radius: 14% / 6.45%; box-shadow: 0 40px 90px #0009, 0 0 0 1.5px #62666c; }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone-md { width: min(100%, 320px); }
.pop { position: absolute; z-index: 3; max-width: none; border-radius: calc(var(--w) * .075); transform: rotate(var(--r, 0deg)); box-shadow: 0 26px 50px #000a, 0 0 0 1px #0003; }
.sticker-icon { position: absolute; z-index: 4; width: 31%; left: -15%; top: 54%; border-radius: 22.5%; transform: rotate(11deg); box-shadow: 0 18px 36px #0009, 0 0 0 2px #ffffff40; }
.sticker-example { position: absolute; z-index: 4; top: 9.5%; right: -9%; transform: rotate(8deg); background: #0e0e10; color: #fff; border-radius: 8px; padding: .5rem .75rem; font-size: .78rem; font-weight: 950; letter-spacing: .14em; box-shadow: 0 10px 24px #0006; }

/* Notification banner (HTML, text as the push sender writes it) */
.banner { position: absolute; z-index: 4; left: -9%; right: -9%; top: -6%; display: flex; gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 24px; background: #202023f5; color: #fff; box-shadow: 0 22px 44px #0007, inset 0 0 0 1px #ffffff1f; font-size: .92rem; line-height: 1.3; }
.banner img { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.banner div { min-width: 0; flex: 1; }
.banner p { margin: 0; }
.banner p:first-child { display: flex; justify-content: space-between; gap: .5rem; }
.banner p:first-child span { color: #a8a8ae; font-size: .8rem; }
.banner-body { color: #ebebf0; } /* wraps like iOS, so the full push text shows */

/* Callouts: a 0x0 anchor sits on the target; arrow tip touches it; pill sits past the tail */
.co { position: absolute; z-index: 6; left: var(--x); top: var(--y); width: 0; height: 0; color: #fff; --ar: 45deg; --al: -10px; --at: -46px; --px: 40px; --py: -40px; --tx: 0%; --ty: -100%; }
.co .arrow { position: absolute; width: 56px; height: 56px; left: var(--al); top: var(--at); transform: rotate(var(--ar)); filter: drop-shadow(0 1px 3px #0009); overflow: visible; }
.co .pill { position: absolute; left: var(--px); top: var(--py); transform: translate(var(--tx), var(--ty)); }
.co-ul { --ar: -45deg; --al: -46px; --at: -46px; --px: -40px; --py: -40px; --tx: -100%; --ty: -100%; }
.co-ur { --ar: 45deg; --al: -10px; --at: -46px; --px: 40px; --py: -40px; --tx: 0%; --ty: -100%; }
.co-dl { --ar: -135deg; --al: -46px; --at: -10px; --px: -40px; --py: 40px; --tx: -100%; --ty: 0%; }
.co-dr { --ar: 135deg; --al: -10px; --at: -10px; --px: 40px; --py: 40px; --tx: 0%; --ty: 0%; }
.co-r { --ar: 90deg; --al: -3px; --at: -28px; --px: 50px; --py: 0px; --tx: 0%; --ty: -50%; }
.co-l { --ar: -90deg; --al: -53px; --at: -28px; --px: -50px; --py: 0px; --tx: -100%; --ty: -50%; }
.band-grey .co, .band-teal .co { color: var(--black); }
.band-grey .co .arrow, .band-teal .co .arrow { filter: none; }
.pill { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; background: #fff; color: var(--black); font-size: .95rem; font-weight: 800; letter-spacing: -.01em; padding: .55rem .95rem; border-radius: 999px; box-shadow: 0 10px 24px #0004; }
.pill-ink { background: var(--black); color: #fff; }
.pill-check::before, .pill-minus::before { content: "✓"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #1f9a4c; color: #fff; font-size: .78rem; font-weight: 900; }
.pill-minus::before { content: "–"; background: #6b6b73; }

/* Hero (blue) */
.hero .band-copy { padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(4rem, 7vw, 6.5rem); }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--teal); margin: 0 0 1.4rem; }
.pulse-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px #50dfd42a; }
.hero .kicker-lg { margin: 0 0 .9rem; color: #eef2ff; }
.hero h1 { font-size: clamp(4.2rem, 8.2vw, 8.6rem); }
.hero h1 .c-yellow { color: var(--yellow); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 1.8rem; margin-top: 2rem; }
.store-soon { display: inline-flex; align-items: center; gap: .8rem; margin: 0; padding: .7rem 1.4rem .7rem 1.1rem; min-height: 58px; border-radius: 16px; border: 1.5px solid #ffffff59; background: #050b1f; color: #fff; cursor: default; user-select: none; }
.store-soon svg { color: var(--teal); flex: none; }
.store-soon span { display: flex; flex-direction: column; font-size: 1.22rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.1; }
.store-soon small { font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: #c4cbe0; }
.store-soon-dark { background: #071210; border-color: #071210; }
.store-soon-dark small { color: #9fdcd5; }
.text-link { color: #fff; font-size: .95rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.text-link span { margin-left: .35rem; }

.tag-dark { display: inline-block; margin: 1rem 0 0; background: var(--black); color: #fff; border-radius: 999px; padding: .5rem .95rem; font-size: .88rem; font-weight: 700; line-height: 1.35; }

/* Alerts (amber) */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.8rem 0 0; max-width: 32rem; }
.chips li { border: 1.5px solid var(--black); border-radius: 999px; padding: .42rem .85rem; font-size: .84rem; font-weight: 800; }
.chips .chip-strong { background: var(--black); color: var(--f-amber); }
#alerts .bleed-bottom { padding-top: clamp(5rem, 8vw, 7rem); }

/* Source (grey) */
.source-list { border-top: 1px solid #0e0e1033; max-width: 34rem; margin-top: 2rem; }
.source-list article { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.1rem 0 1.2rem; border-bottom: 1px solid #0e0e1033; }
.source-symbol { flex: 0 0 40px; height: 40px; display: grid; place-items: center; color: #080909; border-radius: 12px; font-weight: 950; font-size: 1.3rem; }
.symbol-yellow { background: var(--yellow); }.symbol-blue { background: #58aeff; }.symbol-purple { background: #bb97ff; }
.source-list h3 { font-size: 1.16rem; letter-spacing: -.025em; margin: .1rem 0 .35rem; }
.source-list p { color: #2a2c2f; font-size: .97rem; line-height: 1.5; margin: 0; }
.source-media { align-items: center; padding-block: 5rem; }
@media (min-width: 1240px) { .source-media { justify-content: flex-start; } }
.shot-card .card-img { width: 100%; border-radius: calc(var(--w) * .06); transform: rotate(-2deg); box-shadow: 0 30px 60px #0006; }

/* Duo: place (sand) + covered (green) */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo-half { overflow: hidden; overflow: clip; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: clamp(1.5rem, 4vw, 4rem); min-width: 0; }
.duo-copy { padding-top: clamp(4.5rem, 7vw, 6.5rem); max-width: 30rem; }
.duo-copy .band-lede { margin-inline: auto; }
.duo-media { display: flex; justify-content: center; width: 100%; }

/* Journey (dark) */
.journey-section { display: grid; grid-template-columns: .55fr 1.45fr; gap: 3rem; align-items: start; padding-block: clamp(5rem, 9vw, 8rem) 0; }
main h2.journey-title { font-size: clamp(2.8rem, 4.4vw, 4.2rem); line-height: .96; }
.journey-title span { color: var(--teal); }
.journey-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.step { position: relative; border-radius: 22px; padding: 1.5rem 1.4rem 1.6rem; min-height: 230px; display: flex; flex-direction: column; }
.step + .step::before { content: "→"; position: absolute; left: -1.05rem; top: 1.4rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--ink); font-weight: 900; font-size: .9rem; z-index: 2; }
.step-num { font-size: .78rem; font-weight: 950; letter-spacing: .1em; margin-bottom: auto; }
.step strong { display: block; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.15; margin: 2.2rem 0 .5rem; }
.step p { margin: 0; font-size: .95rem; line-height: 1.5; font-weight: 600; }
.step-yellow { background: var(--yellow); color: #120d05; }
.step-teal { background: var(--teal); color: #061210; }
.step-purple { background: var(--purple); color: #fff; }

/* Signal strip */
.signal-strip { border-bottom: 1px solid #303432; overflow-x: auto; scrollbar-width: none; }
.signal-strip::-webkit-scrollbar { display: none; }
.signal-track { width: max-content; min-width: 100%; max-width: 1440px; margin-inline: auto; display: flex; align-items: center; justify-content: space-around; gap: clamp(1.4rem, 3vw, 3rem); padding: 1.2rem 2rem; }
.signal-track span { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; color: #daddd9; font-size: .9rem; font-weight: 750; }
.chip-icon { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: #080909; font-size: .85rem; font-style: normal; font-weight: 950; }
.chip-amber { background: var(--yellow); }.chip-blue { background: #52adff; }.chip-red { background: #ff655f; }.chip-purple { background: #b888ff; }.chip-orange { background: #ff9337; }.chip-teal { background: var(--teal); }.chip-white { background: #e9ebe7; }

/* Intro (dark) */
.section-intro { display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: 5rem; padding-block: clamp(5rem, 9vw, 8rem); }
.section-intro h2 span { color: var(--yellow); }
.section-intro > p { color: #c5cac6; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.57; max-width: 32rem; margin: 0 0 .55rem; }

/* Notifications (dark) */
.notify-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(5rem, 9vw, 8rem); }
.notify-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 2.4rem; }
.feature-card { min-height: 190px; border-radius: 22px; padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.feature-number { font-size: .75rem; font-weight: 950; letter-spacing: .1em; }
.feature-card h3 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: .98; margin: 0; }
.feature-card h3 b { font-size: 1.5em; line-height: .8; }
.feature-yellow { background: var(--yellow); color: #0b0b0b; }
.feature-blue { background: #1f6fd1; color: white; }
.feature-purple { background: var(--purple); color: white; }
.feature-ink { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.feature-ink h3 { color: var(--teal); }
.notify-media { display: grid; place-items: center; }
.notify-media .phone { transform: rotate(4deg); }

/* App Store preview gallery (dark) */
.gallery-section { background: #0f1212; border-top: 1px solid #202423; padding-block: clamp(4.5rem, 8vw, 7rem); }
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.gallery-controls { display: flex; gap: .6rem; }
.gallery-btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #4b514e; background: transparent; color: var(--ink); font-size: 1.3rem; font-weight: 800; cursor: pointer; transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
.gallery-btn:hover:not(:disabled) { border-color: var(--teal); background: #152521; }
.gallery-btn:disabled { opacity: .35; cursor: default; }
.gallery { --edge: max(1.5rem, calc((100% - 1240px) / 2)); list-style: none; margin: 0; display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: .5rem var(--edge) 1.4rem; scrollbar-width: thin; scrollbar-color: #4b514e transparent; }
.gallery:focus-visible { outline-offset: -3px; }
.gallery li { flex: 0 0 auto; width: clamp(210px, 21vw, 270px); scroll-snap-align: start; }
.gallery img { width: 100%; aspect-ratio: 480 / 1043; border-radius: 18px; background: #1a1d1d; box-shadow: 0 18px 40px #0007; }

/* Pricing (dark) */
.pricing-section { background: #0b0d0d; border-top: 1px solid #202423; padding-block: clamp(5rem, 9vw, 8rem); }
.pricing-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pricing-head .lede { text-align: center; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 1rem; margin-top: 3.2rem; }
.price-card { position: relative; background: var(--panel); border: 1.5px solid var(--line); border-radius: 24px; padding: 1.8rem 1.7rem 1.6rem; }
.price-card-featured { border-color: var(--teal); box-shadow: 0 20px 60px #50dfd41a; }
.price-card h3 { font-size: 1rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #ced1ce; margin: 0 0 1rem; }
.price { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.price strong { font-family: var(--display); font-stretch: condensed; font-weight: 900; font-size: clamp(3.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.02em; }
.price span { color: var(--muted); font-weight: 700; }
.price-sub { margin: .9rem 0 0; color: #c5cac6; font-size: .95rem; }
.price-flag { position: absolute; top: -.85rem; right: 1.2rem; background: var(--yellow); color: #17100a; border-radius: 999px; padding: .4rem .75rem; font-size: .72rem; font-weight: 950; letter-spacing: .08em; transform: rotate(3deg); }
.included { list-style: none; padding: 0; margin: 2.4rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; max-width: 52rem; }
.included li { display: inline-flex; align-items: center; gap: .5rem; color: #dfe2de; font-size: .95rem; font-weight: 700; }
.included li::before { content: "✓"; color: var(--teal); font-weight: 950; }
.pricing-fine { text-align: center; margin: 2rem auto 0; max-width: 40rem; }

/* Closing (brand teal) */
.closing-section { background: var(--teal); color: #071210; }
.closing-inner { min-height: 460px; display: flex; justify-content: space-between; align-items: center; gap: 4rem; padding-block: 4rem; }
.closing-section .section-kicker { color: #065f59; }
.closing-section .mega { font-size: clamp(3.8rem, 7vw, 7.2rem); }
.closing-section .mega span { color: #087a72; }
.closing-section p:not(.section-kicker):not(.store-soon) { max-width: 30rem; margin: 1.3rem 0 1.6rem; font-size: 1.12rem; line-height: 1.55; font-weight: 600; }
.closing-inner img { flex: 0 0 auto; width: clamp(190px, 25vw, 300px); height: auto; border-radius: 28%; transform: rotate(8deg); box-shadow: 0 28px 50px #08726961; }

/* Footer */
.site-footer { min-height: 140px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer-brand { font-size: 1.35rem; font-weight: 950; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.site-footer p { color: #9ca6a0; font-size: .82rem; line-height: 1.5; max-width: 27rem; margin: 0; }
.site-footer > span { color: #8a938e; font-size: .8rem; white-space: nowrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.footer-links a { color: #ced1ce; text-decoration: none; font-size: .85rem; font-weight: 700; }
.footer-links a:hover { color: white; }

@media (max-width: 1239px) {
  .co { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .co.m-ul { --ar: -45deg; --al: -46px; --at: -46px; --px: -40px; --py: -40px; --tx: -100%; --ty: -100%; }
  .co.m-ur { --ar: 45deg; --al: -10px; --at: -46px; --px: 40px; --py: -40px; --tx: 0%; --ty: -100%; }
  .co.m-dl { --ar: -135deg; --al: -46px; --at: -10px; --px: -40px; --py: 40px; --tx: -100%; --ty: 0%; }
  .co.m-dr { --ar: 135deg; --al: -10px; --at: -10px; --px: 40px; --py: 40px; --tx: 0%; --ty: 0%; }
}
@media (max-width: 1040px) {
  .journey-section { grid-template-columns: 1fr; gap: 2rem; }
  .duo { grid-template-columns: 1fr; }
  .duo-half { padding-inline: 1.5rem; }
}
@media (max-width: 860px) {
  .site-nav { display: none; }
  .band-grid, .band-flip .band-grid, .notify-section { grid-template-columns: 1fr; gap: 0; }
  .band-copy { padding-block: 4rem 0; }
  .hero .band-copy { padding-block: 2.5rem 0; }
  .band-flip .band-copy { padding-block: 2.5rem 4.5rem; }
  .bleed-bottom { padding-top: 4.5rem; }
  #alerts .bleed-bottom { padding-top: 5.5rem; }
  .source-media { padding-block: 4.5rem 4rem; }
}
@media (max-width: 760px) {
  .wrap, .site-header { width: min(100% - 2rem, 600px); }
  .site-header { min-height: 72px; gap: 1rem; }
  .brand { font-size: 1.3rem; }.brand img { width: 38px; height: 38px; }
  .header-cta { font-size: .82rem; padding: .62rem .85rem; gap: .6rem; }
  .mega { font-size: clamp(3.4rem, 17vw, 5.6rem); }
  .mega-md { font-size: clamp(2.9rem, 13vw, 4.4rem); }
  .hero h1 { font-size: clamp(3.2rem, 15.6vw, 5.4rem); }
  .shot { --w: min(var(--pw, 320px), 66vw); }
  .pill { font-size: .8rem; padding: .45rem .75rem; }
  .co .arrow { width: 44px; height: 44px; }
  .co-ul { --al: -38px; --at: -38px; --px: -32px; --py: -32px; }
  .co-ur { --al: -6px; --at: -38px; --px: 32px; --py: -32px; }
  .co-dl { --al: -38px; --at: -6px; --px: -32px; --py: 32px; }
  .co-dr { --al: -6px; --at: -6px; --px: 32px; --py: 32px; }
  .co-r { --al: -2px; --at: -22px; --px: 40px; }
  .co-l { --al: -42px; --at: -22px; --px: -40px; }
  .co.m-ul { --al: -38px; --at: -38px; --px: -32px; --py: -32px; }
  .co.m-ur { --al: -6px; --at: -38px; --px: 32px; --py: -32px; }
  .co.m-dl { --al: -38px; --at: -6px; --px: -32px; --py: 32px; }
  .co.m-dr { --al: -6px; --at: -6px; --px: 32px; --py: 32px; }
  .banner-body { white-space: normal; }
  .co.m-hide { display: none; }
  .sticker-icon { left: -9%; width: 26%; }
  .sticker-example { right: -4%; font-size: .66rem; }
  .banner { left: -7%; right: -7%; font-size: .78rem; padding: .65rem .75rem; gap: .6rem; border-radius: 18px; }
  .banner img { width: 36px; height: 36px; border-radius: 9px; }
  .section-intro { grid-template-columns: 1fr; gap: 1.3rem; padding-block: 4.5rem; }
  main h2.display { font-size: clamp(3.1rem, 14vw, 5.5rem); }
  .lede, .section-intro > p { font-size: 1.06rem; }
  .duo-half { padding-inline: 1rem; }
  .journey-section { padding-top: 4.5rem; }
  .journey-steps { grid-template-columns: 1fr; gap: .8rem; }
  .step { min-height: 0; }
  .step strong { margin-top: 1.2rem; }
  .step + .step::before { content: "↓"; left: 1.3rem; top: -1.2rem; }
  .notify-section, .pricing-section { padding-block: 4.5rem; }
  .notify-grid { gap: .6rem; }
  .feature-card { min-height: 150px; padding: 1.1rem 1rem 1.2rem; border-radius: 18px; }
  .feature-card h3 { font-size: 1.42rem; }
  .notify-media { padding-top: 2.5rem; }
  .notify-media .phone { width: 72%; }
  .gallery-section { padding-block: 4.5rem; }
  .gallery { --edge: 1rem; gap: .75rem; }
  .gallery li { width: 62vw; max-width: 250px; }
  .gallery-btn { width: 44px; height: 44px; }
  .price-grid { grid-template-columns: 1fr; }
  .included { justify-content: flex-start; flex-direction: column; align-items: flex-start; max-width: 340px; }
  .closing-inner { min-height: 0; gap: 1.5rem; }
  .closing-inner img { width: 160px; }
  .site-footer { min-height: 0; padding-block: 2rem; flex-wrap: wrap; gap: 1rem; }
  .site-footer p { order: 3; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .closing-inner { align-items: flex-start; flex-direction: column-reverse; padding-block: 3.5rem; }
  .closing-inner img { align-self: flex-end; width: 120px; margin-bottom: -1rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Apple's "Download on the App Store" badge (Apple Marketing Tools artwork, unmodified). */
.store-badge { display: inline-block; line-height: 0; border-radius: 12px; }
.store-badge img { width: 180px; height: auto; display: block; }
.store-badge:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.launch-note { margin: 1rem 0 0; padding: .7rem 1rem; border-radius: 12px; background: #ffffff14; color: #e6ebe8; font-size: .95rem; font-weight: 650; max-width: 36rem; }

/* ---------- 1.1 landing: responsive pictures, 3D scenes, sky band ---------- */
picture { display: contents; }
.chip-green { background: #3ee07a; }

/* Hero: 3D hurricane scene (crop of the 1.1 slide below its headline) */
.hero-media { align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.hero-scene { position: relative; width: min(100%, 460px); }
.hero-scene img:not(.hero-sticker) { width: 100%; border-radius: 28px; box-shadow: 0 34px 80px #0009, 0 0 0 1px #ffffff1f; }
.hero-sticker { width: 22%; left: -9%; right: auto; top: 40%; bottom: auto; transform: rotate(-9deg); }

/* Scene bands: a slide crop with its own arrows and labels */
.scene-media { align-items: center; padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.scene { width: min(100%, 420px); }
.scene img { width: 100%; border-radius: 26px; box-shadow: 0 30px 70px #0008, 0 0 0 1px #ffffff1f; }
.hero-watch { position: absolute; z-index: 5; width: 30%; right: -8%; top: 67%; transform: rotate(5deg); filter: drop-shadow(0 18px 26px #000b); }
.hero-scene .hero-watch img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.gallery-subtitle { margin: 2.2rem auto .9rem; font-size: 1.05rem; font-weight: 850; letter-spacing: .02em; color: var(--ink); }
.gallery-watch li { width: clamp(150px, 14vw, 190px); }
.gallery-watch img { aspect-ratio: 422 / 514; border-radius: 22%/18%; background: #000; box-shadow: 0 14px 32px #0007, 0 0 0 1px #ffffff1f; }
@media (max-width: 760px) {
  .hero-watch { right: -2%; width: 28%; }
  .gallery-watch li { width: 40vw; max-width: 180px; }
}
.band-navy { background: linear-gradient(180deg, #071022 0%, #0d2147 60%, #133a6e 100%); color: #fff; }
.band-storm { background: linear-gradient(180deg, #170b12 0%, #3b1414 55%, #7a2410 100%); color: #fff; }
.band-plum { background: linear-gradient(180deg, #1b1240 0%, #3a1c6e 55%, #6a2a9a 100%); color: #fff; }
.band-forest { background: linear-gradient(180deg, #06231b 0%, #0b3d2e 55%, #12634a 100%); color: #fff; }
.band-ember { background: linear-gradient(180deg, #160c06 0%, #3a1a08 55%, #6e2c0a 100%); color: #fff; }
.band-navy .band-lede, .band-storm .band-lede, .band-plum .band-lede, .band-forest .band-lede, .band-ember .band-lede { color: #eef1f8; }
.band-navy .band-note, .band-storm .band-note, .band-plum .band-note, .band-forest .band-note, .band-ember .band-note { color: #cdd3e0; }
/* v5 slide cards (flat colour App Store slides, cut below their headline) */
.scene-card img { box-shadow: 0 30px 70px #0008, 0 0 0 1px #ffffff26; }
.band-grey .chips { margin-top: 1.6rem; }
.band-grey .chips .chip-strong { color: var(--yellow); }

/* Living sky (night) */
.band-night { background: linear-gradient(180deg, #070b16 0%, #0d1730 100%); color: #fff; border-top: 1px solid #1b2440; }
.band-night .band-lede { color: #dfe6f5; } .band-night .band-note { color: #aab4c8; }
.weather-wrap { padding-block: clamp(4.5rem, 8vw, 7rem); }
.sky-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sky-clip { justify-self: center; width: min(100%, 420px); }
.sky-clip video { display: block; width: 100%; height: auto; aspect-ratio: 600 / 638; border-radius: 26px; background: #2b3444; box-shadow: 0 30px 70px #000a, 0 0 0 1px #ffffff1f; }
.sky-clip figcaption { color: #9aa4b8; font-size: .82rem; line-height: 1.5; margin-top: .9rem; }
.weather-tiles { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.weather-tiles li { background: #ffffff0a; border: 1px solid #ffffff1c; border-radius: 24px; padding: .8rem .8rem 1.3rem; min-width: 0; }
.tile-media { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: #000; padding: .6rem; }
.tile-media.rain { background: #1d2132; }
.tile-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.tile-media.cover { padding: 0; }
.tile-media.cover img { object-fit: cover; border-radius: 0; }
.weather-tiles h3 { font-size: 1.2rem; letter-spacing: -.02em; margin: 1.1rem .4rem .35rem; }
.weather-tiles p { color: #c9d1e2; font-size: .96rem; line-height: 1.5; margin: 0 .4rem; }

.gallery-fine { margin: 1.2rem auto 0; max-width: 1240px; }
.phone-media { align-items: center; padding-block: clamp(3.5rem, 6vw, 5rem); }

@media (max-width: 1080px) {
  .site-nav { display: none; }
}
@media (max-width: 860px) {
  .hero-media { padding-block: 2.5rem 3.5rem; }
  .hero-scene { width: min(100%, 420px); }
  .scene-media, .phone-media { padding-block: 3rem 4rem; }
  .band-flip .scene-media { order: 2; }
  .band-flip .band-copy { padding-block: 4rem 0; }
  .sky-head { grid-template-columns: 1fr; }
  .sky-clip { width: min(100%, 360px); }
  .weather-tiles { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 760px) {
  .hero-scene img:not(.hero-sticker) { border-radius: 20px; }
  .hero-sticker { width: 20%; left: -3%; }
  .scene img { border-radius: 20px; }
  .weather-wrap { padding-block: 4.5rem; }
}