/* Senco landing UI system - the vape-page design applied house-wide.
   Loaded AFTER each page's inline styles; overrides by cascade order.
   Safe on any page from the skeleton family: rules only touch classes that exist. */

/* ===== nav: slim white pill, blue logo, pill buttons ===== */
.navbar{background:#fff;border:0;border-radius:999px;box-shadow:0 3px 14px rgba(16,24,40,.08);backdrop-filter:none;min-height:52px;max-width:1112px;padding:7px 8px 7px 20px}
.navzone{top:16px}
.navtag{color:var(--ink);font-size:14px;font-weight:600}
.senco-mark{height:23px;color:#155EEF}
.navcta,.btn{border-radius:999px}
.navcta{padding:10px 18px;font-size:13.5px}

/* ===== hero: Stripe-style diagonal gradient sweep ===== */
.hero{background:#fff}
.hero::before{content:"";position:absolute;inset:0;height:auto;width:auto;background:var(--band);clip-path:polygon(0 0,100% 0,100% 88%,0 52%);pointer-events:none}
.hero::after{clip-path:polygon(0 0,100% 0,100% 88%,0 52%)}
.hero .stats{border-top:1px solid rgba(16,24,40,.10)}

/* ===== round frames ===== */
.fcard,.gradband .fcard{border-radius:18px}
.phone{border-radius:34px;padding:10px;border:0;box-shadow:0 24px 60px rgba(16,24,40,.18)}
.phone-in{border-radius:26px}

/* ===== stats strip: integrated, top-aligned, equal cells ===== */
.stats{align-items:start}
.stat{align-items:flex-start}
.stat b{min-height:41px}

/* ===== offer tiles: one rigid anatomy, fixed-span gradient values ===== */
.kpigrid.four{align-items:stretch}
.kpigrid.four .kpitile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-height:158px;padding:28px 16px 24px;text-align:center;border:1px solid var(--line);border-radius:20px;box-shadow:0 4px 20px rgba(16,24,40,.06);background:#fff}
.kpigrid.four .k{line-height:1;height:12px;margin-bottom:14px;font-size:11.5px}
.kpigrid.four .n{line-height:1;height:32px;display:flex;align-items:center;font-size:clamp(23px,2.2vw,28px);white-space:nowrap;background:linear-gradient(105deg,var(--blue) 0%,var(--green-d) 220px);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpigrid.four .l{margin-top:12px;line-height:1.4;white-space:nowrap;color:var(--body)}
.kpiband .btn{min-height:54px;padding:16px 32px;font-size:15.5px}
.kpiband.plainband{background:#fff;border:0}

/* ===== timeline: equal columns, pulsing now-dot ===== */
.tltext{max-width:270px;margin:0 auto}
.tldate{margin-bottom:8px}
@keyframes nowpulse{0%{box-shadow:0 0 0 6px rgba(21,94,239,.18)}70%{box-shadow:0 0 0 16px rgba(21,94,239,0)}100%{box-shadow:0 0 0 6px rgba(21,94,239,0)}}
.tlstep.is-now .tldot{animation:nowpulse 2.2s ease-out infinite}

/* ===== trust grid: cards stretch to media column, strict top-aligned zones ===== */
.trustgrid{align-items:stretch;gap:36px;margin-top:48px}
.trustgrid .hero-phone{margin-top:0}
.trustgrid .grid2{height:calc(100% - 34px);grid-auto-rows:1fr;gap:20px;margin-top:0}
.trustgrid .fcard{display:flex;flex-direction:column;justify-content:flex-start;padding:32px 28px}
.trustgrid .fcard h3{min-height:58px;display:flex;align-items:flex-start;margin-bottom:10px}
.trustgrid .fcard p{margin:0}

/* ===== bands: oblique cuts, seamless final ===== */
.gradband{clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);padding:118px 0 122px}
.gradband .ey{text-align:center;display:block}
.gradband h2{text-align:center;margin:0 auto;max-width:840px}
.finalband.plain{background:#fff;border-top:0}

/* ===== rhythm ===== */
.tlband{padding:56px 0 0}
.kpiband.plainband{padding:56px 0 72px}
.kpigrid.four{margin:38px 0 36px}

/* ===== mobile - keep last ===== */
@media (max-width:980px){
  .trustgrid{grid-template-columns:1fr}
  .trustgrid .grid2{height:auto}
  .trustgrid .fcard h3{min-height:0}
}
@media (max-width:760px){
  .hero{padding:118px 0 52px}
  .hero::before,.hero::after{clip-path:none}
  section{padding:52px 0}
  .gradband{clip-path:none;padding:60px 0}
  .tlband{padding:30px 0 0}
  .kpiband.plainband{padding:44px 0 56px}
  .tl{gap:20px}
  .tl::before{display:none}
  .tlstep,.tlstep.is-now{padding:0 10px}
  .hero-phone{max-width:270px}
  .trustgrid{gap:26px;margin-top:34px}
  .trustgrid .hero-phone{max-width:250px}
  .kpigrid.four .kpitile{min-height:0}
  .kpigrid.four .n{height:auto}
  .kpigrid.four .l,.kpigrid.four .n{white-space:normal}
  .stat b{min-height:0}
  h2{font-size:29px}
  .sub{font-size:15px}
  .navzone{top:10px;padding:0 14px}
  .navbar{width:100%;max-width:100%;min-width:0;gap:10px;padding:8px 8px 8px 16px}
  .senco-mark{height:22px}
  .navcta{padding:9px 12px;font-size:12px;white-space:nowrap}
  .navtag{display:none}
}

/* ===== split hero: copy left, media right, dashboard card behind ===== */
.hero{padding:158px 0 72px;text-align:left}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:start}
.hero-copy .kicker{height:37px;display:inline-flex;align-items:center;margin-bottom:14px}
.hero-copy h1{margin:0;text-align:left;font-size:clamp(34px,3.6vw,50px);line-height:1.06;max-width:none!important;text-wrap:balance}
.hero-copy .br-d{display:none}
.hero-copy .lead{margin:20px 0 0;max-width:560px;text-align:left;font-size:clamp(18px,1.9vw,21px)}
.hero-copy .micro{margin-top:14px;max-width:520px;text-align:left;font-size:14.5px}
.hero-cta{justify-content:flex-start;margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.hero-media{text-align:center}
.hero-stack{position:relative;max-width:none;margin:0;padding:30px 0 0;text-align:left}
.stack-back{position:absolute;top:44px;left:150px;width:640px;max-width:none;object-fit:contain;border-radius:14px;box-shadow:0 30px 70px rgba(16,24,40,.20);z-index:1;background:#fff}
.hero-stack .hero-phone{position:relative;z-index:2;margin:0;max-width:290px}
.hero-stack .herocap{position:relative;z-index:2;text-align:left;max-width:290px}
@media (max-width:1100px){.stack-back{left:auto;right:-8px;width:520px}}
@media (max-width:900px){
  .hero{text-align:center;padding:124px 0 58px}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-copy{text-align:center}
  .hero-copy h1{text-align:center;font-size:clamp(32px,6vw,44px)}
  .hero-copy .lead,.hero-copy .micro{margin-left:auto;margin-right:auto;text-align:center}
  .hero-cta{justify-content:center}
  .hero-stack{padding:0;max-width:300px;margin:0 auto;text-align:center}
  .hero-stack .herocap{text-align:center;margin:10px auto 0}
  .stack-back{display:none}
}

/* ===== prototype adoption: floating stats bar + timeline card ===== */
.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px auto 0;padding:0;max-width:1040px;border:0;border-top:0;border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(16,24,40,.10);overflow:hidden}
.stat{min-height:88px;gap:12px;padding:22px 20px;border-right:1px solid #EAECF0;border-radius:0;box-shadow:none;background:#fff;align-items:center}
.stat:last-child{border-right:0}
.stat .ic{width:38px;height:38px;border-radius:10px;background:#F0F7FF;border:1px solid #D1E9FF;backdrop-filter:none;margin:0}
.stat b{min-height:0;font-size:14px;white-space:normal}
.tlband{padding:64px 0 0}
.tl{max-width:1080px;gap:18px;background:linear-gradient(135deg,rgba(21,94,239,.04) 0%,rgba(7,243,171,.06) 100%),#fff;border-radius:24px;box-shadow:0 14px 40px rgba(16,24,40,.08);padding:44px 30px 40px}
.tl::before{top:53px;left:14%;right:14%}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid #EAECF0}}
@media (max-width:760px){
  .stats{grid-template-columns:1fr;margin:36px auto 0;max-width:420px}
  .stat{border-right:0;border-bottom:1px solid #EAECF0}
  .stat:last-child{border-bottom:0}
  .tl{padding:28px 18px 26px;border-radius:20px}
}

/* variant-page shims: stats with an inner .wrap become grid items; hero CTA rows left-align in split heroes */
.stats > .wrap{display:contents}
.hero-copy .cta-row{justify-content:flex-start;margin-top:28px}
@media (max-width:900px){.hero-copy .cta-row{justify-content:center}}
.hero-media .appwrap{margin:0}
.hero-media .appshot img{width:100%;display:block}

/* long vidtag chips wrap on mobile instead of overflowing */
@media (max-width:760px){.vidtag{white-space:normal;max-width:calc(100vw - 48px);height:auto;line-height:1.45;text-align:center}}

/* royal blue is the landing blue */
:root{--blue:#155EEF}
/* stats live in the hero media column: compact 2x2 card under the dashboard */
.hero-media .stats{grid-template-columns:1fr 1fr;gap:0;margin:26px auto 0;max-width:560px;border-radius:20px}
.hero-media .stat{min-height:74px;padding:15px 18px}
.hero-media .stat:nth-child(2n){border-right:0}
.hero-media .stat:nth-child(-n+2){border-bottom:1px solid #EAECF0}
.hero-media .stat:nth-child(n+3){border-bottom:0}
.hero-media .stat b{font-size:13.5px}
@media (max-width:760px){.hero-media .stats{grid-template-columns:1fr;max-width:340px}.hero-media .stat{border-right:0;border-bottom:1px solid #EAECF0}.hero-media .stat:last-child{border-bottom:0}}

/* ===== Why Senco: one living line - infinite tile marquee ===== */
.kpimarquee{display:block;overflow:hidden;margin:38px 0 36px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.kpitrack{display:flex;gap:20px;width:max-content;animation:kpiscroll 34s linear infinite}
.kpidup{display:contents}
.kpimarquee:hover .kpitrack{animation-play-state:paused}
@keyframes kpiscroll{to{transform:translateX(calc(-50% - 10px))}}
.kpimarquee .kpitile{width:290px;flex:none}
@media (max-width:760px){.kpimarquee .kpitile{width:250px}}
@media (prefers-reduced-motion:reduce){.kpitrack{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.kpidup{display:none}}

/* ===== hero stats: sponsor-style ticker, right to left ===== */
.statmarquee{display:block;overflow:hidden;max-width:560px;margin:26px auto 0;background:transparent;box-shadow:none;border:0;border-radius:0;padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.stattrack{display:flex;gap:14px;width:max-content;animation:statscroll 26s linear infinite}
.statdup{display:contents}
.statmarquee:hover .stattrack{animation-play-state:paused}
@keyframes statscroll{to{transform:translateX(calc(-50% - 7px))}}
.statmarquee .stat,.statmarquee .stat:nth-child(2n),.statmarquee .stat:nth-child(-n+2){flex:none;background:#fff;border:0;border-radius:16px;box-shadow:0 6px 20px rgba(16,24,40,.10);padding:13px 20px 13px 13px;min-height:0;gap:11px;align-items:center}
.statmarquee .stat b{white-space:nowrap;min-height:0;font-size:14px}
.statmarquee .stat span{display:none}
@media (max-width:760px){.statmarquee{max-width:calc(100vw - 40px)}}
@media (prefers-reduced-motion:reduce){.stattrack{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.statdup{display:none}}

/* ===== one living line: Why Senco squares + credential pills together ===== */
.kpimarquee .kpitile,.kpimarquee .kpitile:nth-child(2),.kpimarquee .kpitile:nth-child(4){width:auto;min-width:0;min-height:0;padding:18px 28px;border:0;border-radius:22px;box-shadow:0 6px 24px rgba(16,24,40,.10);gap:3px;background:#fff;align-items:center;justify-content:center}
.kpimarquee .kpitile .n{height:auto;font-size:19px;white-space:nowrap}
.kpimarquee .kpitile .l{margin-top:2px;font-size:12px;white-space:nowrap}
.kpimarquee .kpitrack{animation-duration:44s}
@media (max-width:760px){.kpimarquee .kpitile{padding:14px 20px}.kpimarquee .kpitile .n{font-size:16px;white-space:nowrap}.kpimarquee .kpitile .l{white-space:nowrap}}

/* pill line: outrank the tile skin */
.kpimarquee .kpitrack{align-items:center}
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){width:auto;min-width:0;min-height:0;height:auto;padding:18px 30px;border:0;border-top:0;border-radius:22px;box-shadow:0 6px 24px rgba(16,24,40,.10);gap:3px;background:#fff;align-items:center;justify-content:center;text-align:center;overflow:visible}
.kpigrid.four.kpimarquee .kpitile::before,.kpigrid.four.kpimarquee .kpitile::after{display:none}
.kpigrid.four.kpimarquee .k{display:none}
.kpigrid.four.kpimarquee .n{height:auto;font-size:19px;white-space:nowrap;line-height:1.2}
.kpigrid.four.kpimarquee .l{margin-top:2px;font-size:12px;white-space:nowrap}
@media (max-width:760px){.kpigrid.four.kpimarquee .kpitile{padding:14px 22px;min-height:0}.kpigrid.four.kpimarquee .n{font-size:16px;white-space:nowrap}.kpigrid.four.kpimarquee .l{white-space:nowrap}}

.kpimarquee{padding:12px 0 30px;margin:26px 0 10px}

/* ===== the line: equal cards attached edge-to-edge, scrolling as one bar ===== */
.kpigrid.four.kpimarquee{display:block;overflow:hidden;max-width:1040px;margin:38px auto 36px;padding:0;background:#fff;border-radius:24px;box-shadow:0 14px 36px rgba(16,24,40,.10);-webkit-mask-image:none;mask-image:none}
.kpimarquee .kpitrack{gap:0;align-items:stretch}
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){width:290px;min-width:290px;min-height:112px;height:auto;padding:20px 18px;border:0;border-right:1px solid #EAECF0;border-radius:0;box-shadow:none;background:#fff;align-items:center;justify-content:center;text-align:center;gap:3px}
.kpigrid.four.kpimarquee .n{height:auto;font-size:19px;white-space:nowrap;line-height:1.2}
.kpigrid.four.kpimarquee .l{margin-top:3px;font-size:12px;white-space:nowrap}
@media (max-width:760px){.kpigrid.four.kpimarquee{border-radius:18px;margin:28px auto}.kpigrid.four.kpimarquee .kpitile{width:240px;min-width:240px;min-height:96px;padding:14px 14px}.kpigrid.four.kpimarquee .n{font-size:16px}}

/* gradient drops lower: right side rides full height, white wedge cuts in lower-left */
.hero{padding:158px 0 118px}
.hero::before{clip-path:polygon(0 0,100% 0,100% 100%,0 60%)}
.hero::after{clip-path:polygon(0 0,100% 0,100% 100%,0 60%)}
@media (max-width:900px){.hero{padding:124px 0 58px}.hero::before,.hero::after{clip-path:none}}

/* ===== THE BOARD: original Why Senco cards, unchanged design, scrolling horizontally ===== */
.kpigrid.four.kpimarquee{background:transparent;box-shadow:none;border-radius:0;max-width:none;margin:38px 0 36px;padding:12px 0 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.kpimarquee .kpitrack{gap:20px;align-items:stretch;animation-duration:40s}
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:290px;min-width:290px;min-height:158px;height:auto;padding:24px 16px;text-align:center;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px;box-shadow:0 4px 20px rgba(16,24,40,.06);background:#fff;overflow:hidden}
.kpigrid.four.kpimarquee .kpitile::before,.kpigrid.four.kpimarquee .kpitile::after{display:block}
.kpigrid.four.kpimarquee .k{display:block;line-height:1;margin-bottom:12px;font-size:11.5px}
.kpigrid.four.kpimarquee .n{height:auto;display:flex;align-items:center;font-size:clamp(22px,2.1vw,27px);white-space:nowrap;line-height:1.1}
.kpigrid.four.kpimarquee .l{margin-top:10px;font-size:13px;white-space:nowrap}
@media (max-width:760px){.kpigrid.four.kpimarquee .kpitile{width:250px;min-width:250px;min-height:132px}.kpigrid.four.kpimarquee .n{font-size:19px}}

/* long-title cards grow instead of clipping */
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){width:auto;min-width:290px;padding:24px 26px}

/* ===== FINAL BOARD SPEC: uniform cards, always moving ===== */
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){width:300px;min-width:300px;max-width:300px;min-height:150px;padding:22px 20px}
.kpigrid.four.kpimarquee .n{white-space:normal;text-align:center;font-size:clamp(21px,2vw,25px);line-height:1.15}
.kpigrid.four.kpimarquee .l{white-space:normal;line-height:1.35}
@media (prefers-reduced-motion:reduce){
  .kpitrack{display:flex;flex-wrap:nowrap;width:max-content;animation:kpiscroll 40s linear infinite;justify-content:flex-start}
  .kpidup{display:contents}
  .kpimarquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}
@media (max-width:760px){.kpigrid.four.kpimarquee .kpitile{width:250px;min-width:250px;max-width:250px;min-height:128px}}

/* diagonal 25% lower on the left; 35% more air above the headline */
.hero{padding:212px 0 118px}
.hero::before{clip-path:polygon(0 0,100% 0,100% 100%,0 75%)}
.hero::after{clip-path:polygon(0 0,100% 0,100% 100%,0 75%)}
@media (max-width:900px){.hero{padding:124px 0 58px}.hero::before,.hero::after{clip-path:none}}

/* video caption centered under the phone */
.hero-stack .herocap{text-align:center;max-width:290px;margin:12px 0 0}

/* board +15%, two-line fit; trust cards tightened */
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){width:345px;min-width:345px;max-width:345px;min-height:172px;padding:26px 24px}
.kpigrid.four.kpimarquee .n{font-size:24px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpigrid.four.kpimarquee .l{font-size:13.5px}
.kpimarquee .kpitrack{animation-duration:46s}
.trustgrid{grid-template-columns:300px 1fr}
.trustgrid .fcard{padding:24px 26px}
.trustgrid .fcard h3{min-height:50px;font-size:19px}
@media (max-width:760px){.kpigrid.four.kpimarquee .kpitile{width:270px;min-width:270px;max-width:270px;min-height:140px}.kpigrid.four.kpimarquee .n{font-size:19px}}

/* the board runs edge-to-edge across the full screen */
.kpigrid.four.kpimarquee{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}

/* mobile guard: trust grid single column (must stay after the 300px desktop rule) */
@media (max-width:980px){.trustgrid{grid-template-columns:1fr}}

/* final band sub-line: balanced break, no orphan words */
.finalband .sub{text-wrap:balance;max-width:520px}

/* ===== FINAL uniform board anatomy: label 11.5 / value 24 one line / sub 13.5 one line ===== */
.kpigrid.four.kpimarquee .kpitile,
.kpigrid.four.kpimarquee .kpitile:nth-child(2),
.kpigrid.four.kpimarquee .kpitile:nth-child(4){width:345px;min-width:345px;max-width:345px;min-height:164px;max-height:164px;padding:26px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.kpigrid.four.kpimarquee .k{display:block;font-size:11.5px;letter-spacing:.09em;line-height:1;margin:0 0 12px;height:auto}
.kpigrid.four.kpimarquee .n{display:block;font-size:24px;line-height:1.1;white-space:nowrap;height:auto;-webkit-line-clamp:unset;overflow:visible}
.kpigrid.four.kpimarquee .l{display:block;font-size:13.5px;line-height:1.3;white-space:nowrap;margin:10px 0 0}
@media (max-width:760px){.kpigrid.four.kpimarquee .kpitile{width:280px;min-width:280px;max-width:280px;min-height:140px;max-height:140px}.kpigrid.four.kpimarquee .n{font-size:19px}}

/* timeline: raised 15%, card and writing 25% bigger; labels bigger and uniform */
.hero{padding:212px 0 100px}
.tlband{padding:40px 0 0}
.tl{max-width:1200px;padding:56px 36px 50px;gap:22px}
.tldate{font-size:19px;margin-bottom:10px}
.tltext{font-size:17px;line-height:1.55;max-width:330px}
.tldot{width:24px;height:24px}
.tl::before{top:67px;left:13%;right:13%}
.kpigrid.four.kpimarquee .k{font-size:13px;margin:0 0 12px}
@media (max-width:900px){.hero{padding:124px 0 58px}}
@media (max-width:760px){.tl{padding:30px 20px 28px;gap:18px}.tldate{font-size:17px}.tltext{font-size:15px}.tldot{width:20px;height:20px}.kpigrid.four.kpimarquee .k{font-size:11.5px}}

/* footer wears the Senco gradient */
footer{background:var(--band);border-top:0}
footer .fl{color:var(--ink)}

/* the story dot: travels the timeline to Now, pausing at each date */
.tltraveler{position:absolute;top:67px;left:13%;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(21,94,239,.18),0 2px 10px rgba(21,94,239,.45);transform:translate(-50%,-50%);z-index:2;opacity:0;animation:tltravel 6.5s ease-in-out infinite;pointer-events:none}
@keyframes tltravel{
  0%{left:13%;opacity:0}
  7%{left:13%;opacity:1}
  15%{left:13%}
  34%{left:50%}
  42%{left:50%}
  64%{left:87%}
  80%{left:87%;opacity:1}
  90%{left:87%;opacity:0}
  100%{left:87%;opacity:0}
}
@media (max-width:760px){.tltraveler{display:none}}

/* Ken 8/20: dashboard out of the hero - the founder video owns the column */
.stack-back{display:none!important}
.hero-stack{padding:6px 0 0;text-align:center}
.hero-stack .hero-phone{max-width:340px;margin:0 auto}
.hero-stack .herocap{max-width:340px;margin:12px auto 0}
@media (max-width:900px){.hero-stack .hero-phone{max-width:300px}}

/* consistency pass: gradient top edge on the timeline card and trust cards, like the board tiles */
.tl{position:relative;overflow:hidden}
.tl::after{content:"";position:absolute;top:0;left:0;height:4px;width:100%;background:var(--grad);z-index:2}
.trustgrid .fcard{position:relative;overflow:hidden}
.trustgrid .fcard::after{content:"";position:absolute;top:0;left:0;height:4px;width:100%;background:var(--grad)}

/* board tiles: gradient top bar always visible, not scroll-triggered (the fill effect does not fit a moving marquee) */
.kpigrid.four.kpimarquee .kpitile::after{transform:scaleX(1)!important;transition:none!important}
.kpigrid.four.kpimarquee .kpitile::before{display:none!important}