/* ============================================================
   Team Drops · landing.css: the landing layer over the Pulse kit.
   Pulse (kit/) supplies type, colour, motion and every section;
   this file only adds what the landing needs: the hero drop card,
   the pain-point cards, the process panels, the phone frames, the
   product tiles, the give-back example and a few phone fixes.
   Brand = default Pulse: volt #EAFF00 on near-black.
   ============================================================ */

[hidden]{display:none!important}
section[id],header[id]{scroll-margin-top:72px}
body{overflow-x:hidden}
@media(max-width:520px){.wrap,.k-stats>.wrap{padding-inline:18px}}

/* ---- nav ---- */
.k-nav .brand{white-space:nowrap}
.k-nav .nav-cta .s{display:none}
@media(max-width:860px){
  .k-nav .actions .nav-cta{display:inline-flex;padding:9px 14px;font-size:13px}
  .k-nav .nav-cta .l{display:none}
  .k-nav .nav-cta .s{display:inline}
}
@media(min-width:861px) and (max-width:1020px){.k-nav .links a{padding:8px 8px}}

/* ---- hero ---- */
.k-hero h1{max-width:12ch;line-height:.92}
.k-hero .sub{max-width:50ch;font-size:clamp(16px,1.35vw,18px)}
.k-hero .sub b{color:var(--white);font-weight:600}
.k-hero .horb .fx-orb{--orb-a:var(--accent);--orb-opacity:.16;top:-38%;left:-18%}
.k-hero .horb .fx-orb-2{--orb-b:var(--accent-2);--orb-opacity:.12;right:-22%;bottom:-48%}
.k-hero .drop{padding:26px 22px 26px}
.k-hero .drop .plate{display:block;position:relative;aspect-ratio:1/1.04;margin:0 0 18px;background:#f6f6f6;border-radius:2px;overflow:hidden}
.k-hero .drop .plate img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.k-hero .drop .clock{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.k-hero .drop .clock div{border:1px solid var(--line-2);border-radius:2px;padding:10px 4px 9px;background:var(--black)}
.k-hero .drop .clock b{display:block;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.k-hero .drop .clock span{display:block;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.k-hero .drop .clock div:last-child b{color:var(--volt)}
@media(max-width:860px){
  .k-hero .visual{padding-top:0}
  .k-hero .drop{max-width:330px}
}
@media(max-width:520px){
  .k-hero{padding-top:44px}
  .k-hero h1{font-size:clamp(46px,15vw,64px)}
  .k-hero .cta .btn{flex:1 1 100%}
  .k-hero .drop{max-width:100%}
}

/* ---- 04 · why: old way / new way ---- */
.pains .item .lbl{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pains .item .old{border-bottom:1px solid var(--line-2);padding-bottom:14px}
.pains .item .old p{color:var(--muted);font-size:14px}
.pains .item .new .lbl{color:var(--volt)}
.pains .item .new p{color:var(--white);font-size:15px;font-weight:600;line-height:1.5}
.pains .item h3{margin-bottom:4px}
@media(min-width:1181px){.pains .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(min-width:561px) and (max-width:1180px){.pains .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.pains .punch{margin-top:clamp(26px,3vw,40px);font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);line-height:1.05;letter-spacing:.01em}
.pains .punch span{color:var(--volt)}

/* ---- 05 · how a drop works: the showcase panels carry the numbers ---- */
.k-showcase .shot.panel-shot{flex-direction:column;justify-content:flex-end;padding:clamp(22px,3vw,38px);container-type:inline-size;color:var(--accent-ink);overflow:hidden}
.k-showcase .shot.panel-shot b{font-family:var(--font-display);font-weight:400;font-size:clamp(70px,34cqw,260px);line-height:.82;letter-spacing:-.01em;text-transform:uppercase}
.k-showcase .shot.panel-shot i{font-style:normal;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(20px,7.4cqw,46px);line-height:.95;margin-top:10px}
.k-showcase .shot.panel-shot em{font-style:normal;font-family:var(--font-mono);font-size:clamp(11px,2.6cqw,13px);letter-spacing:.14em;text-transform:uppercase;margin-top:18px;opacity:.8}
.k-showcase .shot.panel-shot[data-look="accent"]{background:linear-gradient(150deg,var(--accent-light),var(--accent) 48%,var(--accent-2))}
.k-showcase .shot.panel-shot[data-look="dark"]{background:radial-gradient(at 30% 20%,rgba(var(--accent-rgb),.2),var(--black) 70%);color:var(--white)}
.k-showcase .shot.panel-shot[data-look="dark"] b{color:transparent;-webkit-text-stroke:2px var(--volt)}
.k-showcase .shot.panel-shot[data-look="ink"]{background:linear-gradient(160deg,#2A2A35,#121218);color:var(--white)}
.k-showcase .shot.panel-shot[data-look="ink"] b{color:var(--volt)}
.k-showcase .shot.panel-shot[data-look="white"]{background:linear-gradient(160deg,#ffffff,#d9d9de);color:var(--black)}
.k-showcase .step .when{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt);border:1px solid var(--line-2);padding:5px 9px;border-radius:2px}
.k-showcase .step .num{color:var(--volt)}
/* let the last step reach the reading band while the panel is still pinned */
@media(min-width:861px){.k-showcase .steps{padding-bottom:clamp(200px,27vh,340px)}}
.k-showcase .media .shot.panel-shot{display:flex}
@media(max-width:860px){.k-showcase .step .shot.panel-shot{aspect-ratio:16/10;display:flex}}

/* ---- stats ---- */
.k-stats .lbl{line-height:1.5}
@media(max-width:640px){.k-stats .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.k-stats .cell{padding:28px 12px}}

/* ---- the store: three phones + six features ---- */
.store-sec .grid.phones{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(20px,3vw,44px);max-width:1000px;margin:0 auto clamp(44px,5vw,72px)}
.phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.phone .screen{display:block;width:100%;max-width:290px;aspect-ratio:600/1298;border:9px solid #22222B;border-radius:38px;overflow:hidden;background:var(--black);
  box-shadow:0 0 0 1px var(--line-2),0 44px 90px -44px rgba(var(--accent-rgb),.32)}
.phone .screen img{width:100%;height:100%;object-fit:cover}
.phone figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;max-width:28ch;line-height:1.5}
.phone figcaption b{color:var(--volt);font-weight:600}
@media(max-width:760px){
  .store-sec .grid.phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-18px;padding:6px 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .store-sec .grid.phones::-webkit-scrollbar{display:none}
  .phone{flex:0 0 66%;scroll-snap-align:center}
  .phone .screen{border-width:7px;border-radius:30px}
}
.feats.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.feats .item{padding:24px 24px 26px;gap:8px}
.feats .item h3{font-size:20px;display:flex;align-items:center;gap:10px}
.feats .item h3::before{content:"";flex:0 0 9px;height:9px;background:var(--volt)}
@media(max-width:900px){.feats.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.feats.grid{grid-template-columns:1fr!important;gap:10px}.feats .item{padding:18px 18px 20px}}
.swipe-hint{display:none}
@media(max-width:760px){.swipe-hint{display:block;margin:-34px 0 34px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}}

/* ---- the range: product tiles, no prices ---- */
.range .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(12px,1.6vw,22px)}
.range .item{padding:0;gap:0}
.range .item .ph{position:relative;display:block;aspect-ratio:4/5;background:#f6f6f6;border-bottom:1px solid var(--line);overflow:hidden}
.range .item .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.range .item .ph img.alt{opacity:0}
@media(hover:hover){.range .item:hover .ph img{transform:scale(1.035)}.range .item:hover .ph img.alt{opacity:1}}
.range .item .body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.range .item h3{font-size:clamp(17px,1.6vw,21px);line-height:1}
.range .item .body p{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.range .item .body p span{white-space:nowrap}
.range .also{margin-top:clamp(22px,2.6vw,32px);color:var(--muted);font-size:15px;max-width:70ch}
.range .also b{color:var(--white);font-weight:600}
@media(max-width:900px){.range .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:520px){.range .item .body{padding:12px 12px 14px}.range .item .body p{font-size:10.5px;letter-spacing:.06em;line-height:1.45}}

/* ---- who it's for ---- */
.who .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.who .item{padding:24px 24px 26px;gap:8px}
.who .item h3{font-size:20px}
@media(max-width:900px){.who .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.who .grid{grid-template-columns:1fr!important;gap:10px}.who .item{padding:18px 18px 20px}}

/* ---- the give-back ---- */
.giveback .grid.gb{grid-template-columns:1.15fr 1fr!important;grid-auto-rows:auto}
.giveback .gb .ex{grid-row:span 2;border:2px solid var(--volt);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),var(--black-2) 46%);padding:clamp(24px,3vw,36px);gap:16px}
.giveback .ex .tag{align-self:flex-start;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--volt);color:var(--black);padding:5px 9px;border-radius:2px}
.giveback .calc{display:grid;gap:0;margin:4px 0 0}
.giveback .calc div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.giveback .calc dt{color:var(--muted);font-size:14.5px}
.giveback .calc dd{font-family:var(--font-display);font-size:24px;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.giveback .ex .back{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:6px}
.giveback .ex .back span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt);max-width:14ch;line-height:1.5}
.giveback .ex .back b{font-family:var(--font-display);font-weight:400;font-size:clamp(54px,7vw,84px);line-height:.9;color:var(--volt);font-variant-numeric:tabular-nums}
.giveback .ex .note{font-size:13px;color:var(--muted);line-height:1.55}
.giveback .gb .item:not(.ex) h3{font-size:20px}
.giveback .gb .item .num{text-transform:uppercase}
@media(max-width:860px){.giveback .grid.gb{grid-template-columns:1fr!important}.giveback .gb .ex{grid-row:auto}}

/* ---- getting started ---- */
.k-process .need{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.k-process .need .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.k-process .chip{color:var(--white)}

/* ---- FAQ ---- */
.k-faq .sec-head a{color:var(--white);text-decoration-color:var(--volt);text-underline-offset:3px}

/* ---- CTA band ---- */
.k-cta .band::before{content:attr(data-ghost)}
.k-cta .band .direct{margin-top:18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;opacity:1}
.k-cta .band .direct a{color:var(--black);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.k-cta .band .cta .btn{flex:1 1 100%}.k-cta .band .direct{font-size:11px;letter-spacing:.02em}}

/* ---- footer ---- */
.k-footer .brand{display:flex;align-items:center;gap:12px}
.k-footer .brand .mark{width:12px;height:12px;background:var(--volt)}
.k-footer h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin-bottom:14px}
.k-footer ul{list-style:none;display:grid;gap:9px}
.k-footer li,.k-footer li a{font-size:14px;color:var(--muted);text-decoration:none}
.k-footer li a:hover{color:var(--volt)}
.k-footer .legal .ltd{color:var(--muted)}
.k-footer .legal .ltd a{color:var(--white);border-bottom-color:var(--line-2)}
.k-footer .legal .ltd a:hover{color:var(--volt)}

@media (prefers-reduced-motion:reduce){.range .item .ph img{transition:none!important}}

/* ---- Made by TEAMLTD (Jamie, Oct 16: "merch made by a Canadian brand, not a reseller") ---- */
.k-hero .made-by{margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt)}
.k-hero .made-by a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.5)}
.madeby{border-top:1px solid var(--line)}
.madeby-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,64px);align-items:center}
.madeby .sec-head{margin-bottom:0}
.madeby .sec-head p a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.5)}
.madeby-facts{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.madeby-facts li{background:var(--black-2);padding:20px 22px;display:grid;gap:4px}
.madeby-facts b{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;color:var(--volt);text-transform:uppercase}
.madeby-facts span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){.madeby-grid{grid-template-columns:1fr}}