/* ===== Chasing Light app promo: cinematic landing (app.html) + homepage band ===== */

/* ---------- iPhone 18 Pro Max frame (screens are img/cl-*.svg placeholders, swap for real screenshots) ---------- */
/* iPhone 18 Pro Max: APPLE'S OWN PRODUCT IMAGE (Josh, 15 Oct 2026: the drawn frames "look terrible"; he accepted the
   Apple Design Resources licence for Apple's bezels, then preferred the black iPhone 18). img/device/iphone-18-pro-max-black.*
   is Apple's Black portrait bezel, scaled to 900px wide, laid OVER the screenshot. Its screen opening is exactly 1320x2868 at (75,66)
   of 1470x3000, the native Pro Max screen, so .cl-screen sits on it by percentage and nothing is cropped; the
   Dynamic Island is Apple's, drawn in the image, so .cl-island is hidden. --w is the whole device width.
   LICENCE: mock-ups of Apple-platform software only, never in an app bundle (the app's own welcome slides keep their
   drawn frame in app-brand.css for that reason), never redistributed as stand-alone images. */
.cl-phone{--w:clamp(220px,25vw,280px);position:relative;width:var(--w);aspect-ratio:1470/3000;flex:0 0 auto;align-self:center;box-sizing:border-box;
  filter:drop-shadow(0 40px 46px rgba(0,0,0,.55))}
.cl-phone::before{content:none}
.cl-phone::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:url(img/device/iphone-18-pro-max-black.png) center/100% 100% no-repeat;
  background-image:image-set(url(img/device/iphone-18-pro-max-black.webp) type("image/webp"),url(img/device/iphone-18-pro-max-black.png) type("image/png"))}
.cl-screen{position:absolute;left:5.102%;top:2.2%;width:89.796%;height:95.6%;border-radius:calc(var(--w)*.12);overflow:hidden;background:#04060a;isolation:isolate}
.cl-shot{display:block;width:100%;height:100%;object-fit:cover}
.cl-island{display:none}
.cl-float{animation:clfloat 7s ease-in-out infinite}
@keyframes clfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media(prefers-reduced-motion:reduce){.cl-float{animation:none}}

/* ---------- Page shell + starfield ---------- */
.clp-page{position:relative;background:#05070d;color:#e8eef7;overflow-x:clip}
.cl-stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.clp-page>section{position:relative;z-index:1}
.cl-rise{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.cl-rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cl-rise{opacity:1;transform:none;transition:none}}
.clp-kick{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7f8ea6;margin-bottom:15px}

/* ---------- Hero ---------- */
.clp-hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:clamp(98px,13vh,152px) 0 clamp(56px,8vh,92px)}
.clp-hero-bg{position:absolute;inset:0;z-index:0}
.clp-hero-bg img{width:100%;height:100%;object-fit:cover;animation:clkb 32s ease-in-out infinite alternate}
@keyframes clkb{from{transform:scale(1.05)}to{transform:scale(1.17) translateY(-2%)}}
@media(prefers-reduced-motion:reduce){.clp-hero-bg img{animation:none}}
.clp-hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,7,13,.5),rgba(5,7,13,.3) 34%,rgba(5,7,13,.6) 66%,rgba(5,7,13,.98)),
  radial-gradient(78% 62% at 20% 42%,rgba(5,7,13,.55),transparent 72%)}
.clp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.clp-eyebrow{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#34d27a;margin-bottom:14px}
.clp-h1{font-size:clamp(2.7rem,7.6vw,5.4rem);font-weight:900;line-height:.98;letter-spacing:-.025em;color:#fff;margin:0 0 6px}
.clp-h1 .g{background:linear-gradient(100deg,#a9ffd2,#34d27a 55%,#37c6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.clp-script{font-family:'Square Peg',cursive;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1;color:#8ff0be;margin:0 0 18px}
.clp-lead{color:#c6d2e1;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.56;max-width:44ch;margin:0 0 26px}
.clp-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.clp-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:.96rem;color:#e6eef8;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);transition:background .25s,border-color .25s;cursor:pointer}
.clp-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42)}
.clp-phone-wrap{position:relative;display:flex;justify-content:center;align-items:center}
.clp-phone-wrap::before{content:"";position:absolute;width:84%;height:66%;top:14%;border-radius:50%;background:radial-gradient(circle,rgba(52,210,122,.45),transparent 68%);filter:blur(46px);z-index:0}
.clp-phone-wrap .cl-phone{position:relative;z-index:1}
.clp-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;color:#8ea6bd;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.clp-scroll i{width:1px;height:34px;background:linear-gradient(#8ea6bd,transparent);animation:clsc 2.2s ease-in-out infinite}
@keyframes clsc{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

.clp-badges{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}
.clp-badge{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:#c0ccda;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:9px 13px}
.clp-badge svg{width:14px;height:14px;flex:0 0 auto}
.clp-early{margin-top:16px;max-width:420px}
.clp-early-row{display:flex;gap:8px;flex-wrap:wrap}
.clp-early label{display:block;font-size:.82rem;font-weight:700;color:#8fd7ad;margin:0 0 8px}
.clp-early input{flex:1 1 200px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:12px 14px;color:#fff;font:inherit;font-size:.92rem}
.clp-early input::placeholder{color:#93a1b2}
.clp-early input:focus{outline:none;border-color:#34d27a;box-shadow:0 0 0 3px rgba(52,210,122,.2)}
.clp-early button{flex:0 0 auto;border:none;cursor:pointer;font:inherit;font-weight:800;font-size:.9rem;color:#06210f;background:linear-gradient(135deg,#8ff0be,#34d27a);border-radius:11px;padding:12px 18px}
.clp-early .capture-done{color:#8ff0be;font-weight:700;margin:0;max-width:none;text-align:left}
/* Hero (16 Oct 2026): one quiet trial line, and the launch sign-up as one compact block */
.clp-trial{color:#9fb0c2;font-size:.86rem;margin:14px 0 0}
.clp-hero .clp-early{margin-top:26px;padding:16px 18px;border-radius:16px;background:rgba(8,12,20,.55);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.clp-early-plat{display:flex;align-items:center;gap:8px;color:#c0ccda;font-size:.8rem;font-weight:700;margin-bottom:10px}
.clp-early-plat svg{width:15px;height:15px;flex:0 0 auto;opacity:.85}
.clp-early-plat span{margin-left:2px}
.clp-hero .clp-early label{color:#8ff0be;font-size:.86rem}
/* the stage: the phone a touch bigger, a real alert floating above it, the watch at its corner */
.hero-stage .cl-phone{--w:var(--hw)}
/* the alert floats OFF the phone (Josh: inside the screen it looked always there) but keeps the true iPhone
   size: one point of this phone is --hw x 0.0020408, the banner is 424 pt wide (440 less 8 pt each side),
   overhanging the phone's left edge. It drops in once when the page opens, then stays (Josh, 16 Oct). */
.hero-stage{--hw:clamp(250px,24vw,312px);--pt:calc(var(--hw)*.0020408)}
.hero-stage .hero-np{position:absolute;z-index:6;top:11%;width:calc(var(--pt)*424);left:calc(50% - var(--hw)*.62);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 calc(var(--pt)*26) calc(var(--pt)*50) calc(var(--pt)*-12) rgba(0,0,0,.75);
  animation:heroNpIn .8s cubic-bezier(.2,.9,.25,1.04) 1s both}
@keyframes heroNpIn{from{opacity:0;transform:translateY(calc(var(--pt)*-60)) scale(.96)}to{opacity:1;transform:none}}
.hero-stage .hero-watch{--w:clamp(112px,10.5vw,140px);position:absolute;z-index:5;right:4%;bottom:6%;margin:0}
@media(prefers-reduced-motion:reduce){.hero-stage .hero-np{animation:none;opacity:1}}
@media(max-width:900px){.hero-stage{--hw:min(52vw,220px)}.hero-stage .hero-np{left:calc(50% - var(--hw)*.5 - var(--pt)*30)}.hero-stage .hero-watch{--w:min(26vw,108px);right:4%}}

/* ---------- Thesis interstitial ---------- */
.clp-thesis{text-align:center;padding:clamp(74px,12vw,150px) 0}
.clp-thesis h2{font-size:clamp(1.9rem,4.6vw,3.6rem);font-weight:800;line-height:1.06;letter-spacing:-.02em;max-width:18ch;margin:0 auto;color:#fff}
.clp-thesis h2 em{font-style:normal;color:#8ff0be}
.clp-thesis p{color:#93a3b8;margin:20px auto 0;max-width:54ch;font-size:1.06rem;line-height:1.62}

/* ---------- Sky sections (the colour journey) ---------- */
.sky{position:relative;padding:clamp(66px,10vw,130px) 0;overflow:hidden}
.sky::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.sky-aurora::before{background:radial-gradient(58% 52% at 76% 30%,rgba(52,210,122,.20),transparent 60%)}
.sky-night::before{background:radial-gradient(58% 52% at 24% 32%,rgba(124,140,255,.22),transparent 60%)}
.sky-ar::before{background:radial-gradient(58% 52% at 76% 32%,rgba(64,190,255,.18),transparent 60%)}
.sky-golden::before{background:radial-gradient(60% 52% at 22% 32%,rgba(255,168,74,.20),transparent 60%)}
.sky-storm::before{background:radial-gradient(58% 52% at 76% 32%,rgba(255,84,64,.18),transparent 60%)}
.sky-camera::before{background:radial-gradient(58% 52% at 24% 30%,rgba(47,212,198,.19),transparent 60%)}
.sky-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,84px);align-items:center}
.sky-grid.rev .sky-media{order:2}
.sky-num{display:block;font-size:.8rem;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.4);margin-bottom:10px}
.sky-kicker{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:16px}
.k-aurora{color:#7CE2A4;background:rgba(52,210,122,.14)}
.k-golden{color:#ffce8a;background:rgba(255,181,74,.14)}
.k-sky{color:#aab8ff;background:rgba(124,140,255,.16)}
.k-ar{color:#8fe3ff;background:rgba(64,190,255,.15)}
.k-storm{color:#ff9d7a;background:rgba(255,90,74,.15)}
.k-camera{color:#7fe6dc;background:rgba(47,212,198,.16)}
.sky h2{font-size:clamp(1.9rem,3.7vw,3rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.sky p{color:#b6c3d3;font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.6;max-width:44ch;margin:0 0 18px}
.sky-media{position:relative;display:flex;justify-content:center;align-items:center}
.sky-media::before{content:"";position:absolute;width:80%;height:60%;top:20%;border-radius:50%;filter:blur(50px);z-index:0}
.sky-aurora .sky-media::before{background:radial-gradient(circle,rgba(52,210,122,.55),transparent 70%)}
.sky-night .sky-media::before{background:radial-gradient(circle,rgba(124,140,255,.55),transparent 70%)}
.sky-ar .sky-media::before{background:radial-gradient(circle,rgba(64,190,255,.45),transparent 70%)}
.sky-golden .sky-media::before{background:radial-gradient(circle,rgba(255,168,74,.55),transparent 70%)}
.sky-storm .sky-media::before{background:radial-gradient(circle,rgba(255,84,64,.5),transparent 70%)}
.sky-camera .sky-media::before{background:radial-gradient(circle,rgba(47,212,198,.5),transparent 70%)}
.sky-media .cl-phone{position:relative;z-index:1}
.clp-mini{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.clp-mini li{position:relative;padding-left:28px;color:#cfdae6;font-size:1rem;line-height:1.45}
.clp-mini li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#1c8f52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- Everything else grid ---------- */
.clp-more{padding:clamp(62px,9vw,120px) 0}
.clp-more h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.7rem);font-weight:900;letter-spacing:-.02em;margin:0}
.clp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.clp-feat{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px;transition:transform .3s ease,border-color .3s ease}
.clp-feat:hover{transform:translateY(-4px);border-color:rgba(52,210,122,.4)}
.clp-feat::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(90% 60% at 50% 0,rgba(52,210,122,.14),transparent 70%)}
.clp-feat:hover::after{opacity:1}
.clp-feat .ic{position:relative;line-height:1;color:#34d27a}
.clp-feat .ic svg{width:26px;height:26px;display:block}
.clp-feat h3{position:relative;color:#fff;font-size:1.05rem;font-weight:800;margin:10px 0 6px}
.clp-feat p{position:relative;color:#93a3b3;font-size:.9rem;line-height:1.5;margin:0}
/* Feature cards: a preview of the real thing pops up above the card on hover or keyboard focus;
   on touch screens (no hover) it sits under the card's words instead. */
.clp-feat.has-pop{overflow:visible;outline:none;z-index:1}
.clp-feat.has-pop::after{border-radius:inherit}
.clp-feat.has-pop:hover,.clp-feat.has-pop:focus-within{z-index:5}
.clp-feat.has-pop:focus-visible{border-color:rgba(52,210,122,.6)}
.feat-pop{position:absolute;left:50%;bottom:calc(100% + 12px);width:min(340px,100%);opacity:0;pointer-events:none;
  transform:translate(-50%,10px) scale(.96);transform-origin:50% 100%;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.clp-feat.has-pop:hover .feat-pop,.clp-feat.has-pop:focus .feat-pop{opacity:1;transform:translate(-50%,0) scale(1)}
@media (hover:none){
  .feat-pop{position:relative;left:auto;bottom:auto;width:auto;opacity:1;transform:none;margin-top:16px}
  .clp-feat.has-pop:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.feat-pop{transition:opacity .2s ease;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce) and (hover:none){.feat-pop{transform:none}}
/* iOS notification banners, drawn as iOS draws them: the system font, a frosted material with a
   heavy blur, a rounded app icon on the left, the title bold with the time on the same line and the
   message under it. No app-name row: iOS hides it when a notification has a title. */
.np-stack{position:relative;padding-top:calc(var(--pt)*14)}
.feat-pop{--pt:.8px}
.np{position:relative;display:flex;gap:calc(var(--pt)*10);align-items:center;text-align:left;padding:calc(var(--pt)*14) calc(var(--pt)*16) calc(var(--pt)*14) calc(var(--pt)*14);border-radius:calc(var(--pt)*24);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:rgba(46,48,54,.62);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
  border:.5px solid rgba(255,255,255,.14);box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 calc(var(--pt)*14) calc(var(--pt)*30) calc(var(--pt)*-10) rgba(0,0,0,.6)}
.np img{width:calc(var(--pt)*38);height:calc(var(--pt)*38);border-radius:calc(var(--pt)*9);flex:0 0 auto;box-shadow:0 0 0 .5px rgba(255,255,255,.08)}
.np-txt{min-width:0;flex:1}
.np-head{display:flex;align-items:baseline;gap:calc(var(--pt)*8)}
.np-title{flex:1;min-width:0;color:#fff;font-weight:600;font-size:calc(var(--pt)*15);line-height:calc(var(--pt)*20);letter-spacing:-.016em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-time{flex:0 0 auto;color:rgba(235,235,245,.6);font-size:calc(var(--pt)*13);line-height:calc(var(--pt)*18)}
.np-body{color:rgba(255,255,255,.92);font-size:calc(var(--pt)*15);line-height:calc(var(--pt)*20);letter-spacing:-.016em}
.np-back{position:absolute;left:5%;right:5%;top:0;transform:scale(.95);transform-origin:50% 0;opacity:.6}
.np-back .np-txt{visibility:hidden}
/* Aurora chat */
.cp-chat{text-align:left;border-radius:18px;overflow:hidden;background:#11161f;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px -14px rgba(0,0,0,.75)}
.cp-chat-head{display:flex;align-items:center;gap:7px;padding:10px 13px;background:#16304a;font-size:.78rem}
.cp-chat-head i{width:7px;height:7px;border-radius:50%;background:#34d27a;box-shadow:0 0 0 3px rgba(52,210,122,.2)}
.cp-chat-head b{color:#fff}
.cp-chat-head span{margin-left:auto;color:#9fb3c8;font-size:.72rem}
.cp-msg{display:flex;gap:9px;align-items:flex-start;padding:9px 13px 0}
.cp-msg:last-child{padding-bottom:12px}
.cp-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.62rem;font-weight:700}
.cp-msg p{margin:0;background:#1f2633;color:#e3e8ef;font-size:.78rem;line-height:1.4;padding:7px 10px;border-radius:4px 12px 12px 12px}
/* Moon tonight */
.cp-moon{display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px;border-radius:18px;background:#11161f;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px -14px rgba(0,0,0,.75)}
.cp-moon-disc{flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(233,228,212,.18))}
.cp-moon-k{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#34d27a;font-weight:700}
.cp-moon-name{color:#fff;font-weight:800;font-size:.98rem;margin:2px 0}
.cp-moon-sub{color:#a6b2c0;font-size:.78rem}
.cp-moon-sub b{color:#fff}
/* triptych of real screens */
.clp-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,80px);align-items:start;justify-items:center}
.clp-tri-item{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:290px;margin:0}
.clp-tri-item .cl-phone{--w:clamp(158px,17vw,210px)}
.clp-tri-item figcaption{margin-top:28px}
.clp-tri-item figcaption b{display:block;color:#fff;font-size:1.05rem;font-weight:800;margin-bottom:5px}
.clp-tri-item figcaption span{color:#93a3b3;font-size:.9rem;line-height:1.5}
/* Map Packs are on the way (Josh, 17 Sep 2026): the caption carries the one Coming soon tag, and the note under
   the trio says what a pack is and which regions come first. Same muted tone as the figcaptions, so it reads as
   a footnote to them rather than a new section. */
.clp-tri-item figcaption b .clp-soon{display:inline-block;vertical-align:2px;margin-left:6px;padding:3px 8px;border:1px solid rgba(52,210,122,.45);border-radius:999px;color:#34d27a;font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.clp-packs{max-width:660px;margin:38px auto 0;text-align:center;color:#93a3b3;font-size:.92rem;line-height:1.6}
.clp-packs b{color:#fff;font-weight:800}
.clp-packs .clp-packs-names{color:#c6cfda}
@media (max-width:700px){.clp-packs{margin-top:30px;font-size:.88rem}}

/* ---------- Offer ---------- */
.clp-offer{position:relative;padding:clamp(52px,8vw,98px) 0}
.clp-offer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 46% at 50% 34%,rgba(120,149,243,.16),transparent 66%)}
.clp-offer-card{position:relative;z-index:1;max-width:560px;margin:0 auto;color:#eaf1f8;background:linear-gradient(165deg,rgba(120,149,243,.18),rgba(235,83,129,.15));border:1px solid rgba(255,255,255,.16);border-radius:26px;padding:clamp(26px,4vw,38px);box-shadow:0 44px 96px rgba(0,0,0,.55)}
.clp-pro-badge{display:inline-block;background:linear-gradient(135deg,#7895f3,#eb5381);color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.12em;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.clp-offer-card h2{font-size:clamp(1.7rem,3vw,2.1rem);font-weight:900;color:#fff;margin:0 0 6px;line-height:1.08}
.clp-offer-card .sub{color:#c6cfda;margin:0 0 20px}
.clp-stack{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.clp-stack li{position:relative;padding-left:28px;color:#e0e7ef;font-size:.96rem;line-height:1.35}
.clp-stack li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#1c8f52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.clp-stack li.bonus{color:#fff;font-weight:700}.clp-stack li.bonus::before{background-color:#c062ef}
.clp-price{text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px;margin-bottom:16px}
.clp-price .v{display:block;font-size:.82rem;color:#93a0b0}
.clp-price .p{display:block;font-size:1.08rem;font-weight:800;color:#fff;margin-top:3px}
.clp-foot{text-align:center;color:#8b97a6;font-size:.82rem;margin:12px 0 0}

/* ---------- Final CTA ---------- */
.clp-final{position:relative;min-height:64vh;display:flex;align-items:center;text-align:center;overflow:hidden;padding:clamp(62px,10vw,120px) 0}
.clp-final-bg{position:absolute;inset:0;z-index:0}
.clp-final-bg img{width:100%;height:100%;object-fit:cover}
.clp-final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,.72),rgba(5,7,13,.88)),radial-gradient(60% 60% at 50% 28%,rgba(52,210,122,.18),transparent 70%)}
.clp-final .container{position:relative;z-index:1}
.clp-final h2{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;line-height:1.06;letter-spacing:-.02em;margin:8px auto 14px;max-width:16ch}
.clp-final p{color:#c6d2e1;max-width:52ch;margin:0 auto 24px;line-height:1.6}

/* ---------- Homepage band (upgraded, on the light homepage) ---------- */
.clp-band{position:relative;overflow:hidden;color:#eaf1f8;background:radial-gradient(130% 110% at 85% -20%,#123a2a 0%,#0c1524 48%,#080b13 100%);padding:clamp(48px,7vw,84px) 0}
.clp-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 40% at 12% 4%,rgba(124,226,164,.15),transparent 72%)}
.clp-band-grid{position:relative;display:grid;grid-template-columns:1fr .82fr;gap:clamp(26px,5vw,58px);align-items:center}
.clp-band .eyebrow{color:#34d27a}
.clp-band h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:900;line-height:1.05;letter-spacing:-.01em;margin:6px 0 14px}
.clp-band .lead{color:#b8c5d5;max-width:48ch}
.clp-band-list{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px}
.clp-band-list li{position:relative;padding-left:26px;color:#cfdae6;font-size:.98rem}
.clp-band-list li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:#1c8f52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}

@media(max-width:900px){
  .clp-hero{min-height:auto;padding-top:clamp(90px,17vw,120px)}
  .clp-hero-grid{grid-template-columns:1fr;gap:38px}
  .clp-hero .clp-phone-wrap{order:-1}
  .clp-scroll{display:none}
  .sky-grid{grid-template-columns:1fr;gap:32px}
  .sky-grid.rev .sky-media{order:0}
  .sky-media{order:-1}
  .clp-grid{grid-template-columns:1fr}
  .clp-tri{grid-template-columns:1fr;gap:44px}
  .clp-band-grid{grid-template-columns:1fr;gap:30px}
  .clp-band .clp-phone-wrap{order:-1}
}

/* ============ APPLE WATCH MOCKUP (Josh, 13 Oct 2026: "mockups of the apple watch for chaser pro") ============
   A Series 11 46mm look to sit beside the iPhone 17 Pro frame above: a jet-black aluminium case with the Digital
   Crown and side button, the screen at the real 416x496 shape, and a short sport-band stub top and bottom that fades
   out. Same rule as .cl-phone: every measure is a share of --w (the case width), so a layout sets --w, never width.
     <div class="cl-watch"><div class="cl-watch-screen"><img class="cl-shot" src="img/app-watch-aurora.png" alt="..."></div></div> */
/* Apple Watch Series 11 46mm, APPLE'S OWN PRODUCT IMAGE (15 Oct 2026), Jet Black aluminium with the black Sport Band,
   laid over the screenshot. Its screen opening is exactly 416x496 at (72,192) of 560x880, the native 46mm screen.
   --w is the whole image width, band included. Same licence rules as the iPhone above. */
.cl-watch{--w:clamp(150px,16vw,196px);position:relative;width:var(--w);aspect-ratio:560/880;box-sizing:border-box;flex:0 0 auto;align-self:center;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.cl-watch::before{content:none}
.cl-watch::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:url(img/device/apple-watch-s11-46-jet-black.png) center/100% 100% no-repeat;
  background-image:image-set(url(img/device/apple-watch-s11-46-jet-black.webp) type("image/webp"),url(img/device/apple-watch-s11-46-jet-black.png) type("image/png"))}
.cl-watch-screen{position:absolute;left:12.857%;top:21.818%;width:74.286%;height:56.364%;border-radius:calc(var(--w)*.14);overflow:hidden;background:#000}
.cl-watch-screen .cl-shot{width:100%;height:100%;object-fit:cover;display:block}
.cl-watch-crown,.cl-watch-btn{display:none}
/* a phone with a watch beside it: the watch tucks in at the phone's lower left */
.clp-phone-wrap.with-watch{position:relative}
/* the watch sits at the phone's lower right, clear of the words beside it (Josh, 16 Oct: it covered the text) */
.clp-phone-wrap.with-watch .cl-watch{--w:clamp(110px,11.5vw,146px);position:absolute;left:auto;right:calc(var(--w)*-.28);bottom:-4%;margin:0;z-index:5}
/* the outline button on the dark app band reads light */
.clp-band .btn-ghost{color:#e6eef8;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.clp-band .btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
/* a row of watches */
.cl-watches{display:flex;justify-content:center;align-items:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap}
.cl-watches figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.cl-watches figcaption{color:#aab6c2;font-size:.86rem;font-weight:600;text-align:center}
@media(max-width:640px){.clp-phone-wrap.with-watch .cl-watch{right:calc(var(--w)*-.05)}}
/* app.html "05 Your wrist": three watches, the middle one forward, in the Chaser Pro purple */
.sky-watch::before{background:radial-gradient(58% 52% at 76% 32%,rgba(192,98,239,.18),transparent 60%)}
.sky-watch .sky-media::before{background:radial-gradient(circle,rgba(192,98,239,.45),transparent 70%)}
.k-watch{color:#dcc2ff;background:rgba(192,98,239,.16)}
.cl-watch-trio{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px)}
.cl-watch-trio .cl-watch{--w:clamp(118px,12.5vw,158px)}
.cl-watch-trio .cl-watch.lead{--w:clamp(150px,17vw,214px)}
.cl-watch-trio .cl-watch:not(.lead){opacity:.92;transform:translateY(12%)}
@media(max-width:860px){.cl-watch-trio .cl-watch{--w:clamp(96px,27vw,136px)}.cl-watch-trio .cl-watch.lead{--w:clamp(124px,35vw,170px)}}
/* membership.html: a wide card with the watch beside the words */
/* .lesson-card .lbody sets its own display, and it out-ranks a single class */
.lesson-card .lbody.mb-watch{display:flex;flex-direction:row;align-items:center;gap:clamp(20px,4vw,44px)}
.mb-watch .cl-watch{--w:clamp(104px,11vw,130px);margin:0 0 0 calc(var(--w)*.05)}
.mb-watch h3{margin-top:0}
@media(max-width:640px){.lesson-card .lbody.mb-watch{flex-direction:column;text-align:center}}

/* Free vs Chaser Pro + FAQ (growth plan stage 2, 20 Oct 2026). The night version of membership.html's table. */
.clp-plans,.clp-faq{position:relative;padding:clamp(48px,7vw,86px) 0;color:#eaf1f8}
.clp-plans-head{max-width:620px;margin:0 auto 26px;text-align:center}
.clp-plans-head h2{color:#fff;text-wrap:balance}
.clp-plans-head p{color:rgba(234,241,248,.72);line-height:1.6;margin:10px auto 0;max-width:56ch}
.clp-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.clp-compare{width:100%;max-width:680px;margin:0 auto;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden}
.clp-compare th,.clp-compare td{padding:14px 16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}
.clp-compare th:first-child,.clp-compare td:first-child{text-align:left;font-weight:600;color:#eaf1f8}
.clp-compare thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(234,241,248,.6)}
.clp-compare td:nth-child(3),.clp-compare th:nth-child(3){background:rgba(120,149,243,.14)}
.clp-compare thead th:nth-child(3){color:#b9c8ff}
.clp-compare tbody tr:last-child td{border-bottom:none}
.clp-compare td{color:rgba(234,241,248,.75)}
.clp-compare .mb-yes{color:#9fe3b8;font-weight:800}
.clp-compare .mb-no{color:rgba(234,241,248,.4)}
.clp-compare .mb-soon-tag{display:inline-block;vertical-align:1px;padding:2px 7px;border-radius:999px;background:rgba(120,149,243,.22);color:#cfd9ff;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@media (max-width:560px){.clp-compare th,.clp-compare td{padding:12px 10px;font-size:.86rem}}
.clp-qs{max-width:680px;margin:0 auto}
.clp-q{border-bottom:1px solid rgba(255,255,255,.12);padding:18px 0}
.clp-q h4{margin:0 0 6px;font-size:1.04rem;color:#fff}
.clp-q p{margin:0;color:rgba(234,241,248,.72);line-height:1.6}
/* Phones: the headline and the button first, the mock-up straight after (stage 2: the button sat 935px down on a 812px screen). */
@media(max-width:560px){.clp-hero .clp-phone-wrap{order:0}.clp-hero-grid{gap:30px}}