/* Scroll-driven device sections on the landing page. Brand colours and fonts only. */
.device-scroll{--device-scroll-length:340vh;position:relative;height:var(--device-scroll-length)}
.device-stage{position:sticky;overflow-x:clip;top:var(--device-top,0px);height:calc(100vh - var(--device-top,0px));height:calc(100svh - var(--device-top,0px));display:grid;align-items:center;padding:24px 0}
.device-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(24px,5vw,72px);align-items:center;width:100%}
.device-player .device-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.device-copy{min-width:0}
.marketing-page .device-copy h1{font-size:clamp(36px,3.7vw,54px);line-height:1.08;margin:12px 0 16px;max-width:17ch}
.marketing-page .device-copy h2{font-size:clamp(32px,3.4vw,50px);line-height:1.08;margin:12px 0 16px;max-width:16ch}
.device-lede{font-size:17px;line-height:1.6;color:#31575a;max-width:42ch;margin:0 0 22px}
.device-copy .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* The 4 stops beside the device */
.device-stops{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:2px;max-width:30em}
.device-stops li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:5px 0;color:#31575a;transition:color .3s}
.device-stops li b{display:block;font:600 15px/1.35 Poppins,Inter,sans-serif;letter-spacing:-.01em}
.device-stops li span{display:none;font-size:13px;line-height:1.5;margin-top:2px}
.device-stops li i{width:10px;height:10px;border-radius:50%;margin:5px 0 0 4px;box-shadow:inset 0 0 0 2px currentColor;transition:background .3s,transform .3s}
.device-stops li.on{color:#012126}.device-stops li.on span{display:block}
.device-stops li.on i{background:#01db95;box-shadow:none;transform:scale(1.25)}

/* Device figure */
.device-figure{margin:0;min-width:0;justify-self:center;width:100%}
.device-figure figcaption{font-size:11px;color:#31575a;text-align:center;margin-top:14px}
.device-rig{position:relative}
.device-hand,.device-hand-still{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
.device-hand{opacity:0}
.is-live .device-hand{opacity:1}.is-live .device-hand-still{visibility:hidden}

/* Tablet: the hand frames already include the tablet. The screen sits behind them. */
.device-tablet{max-width:820px}
.device-tablet .device-rig{aspect-ratio:993/576;filter:drop-shadow(0 28px 30px rgba(1,33,38,.16))}
.device-tablet .ds-screen{position:absolute;left:7.14%;top:15.1%;width:62.8%;height:72.8%;transform-origin:0 0;z-index:1}

/* Phone: drawn in CSS. The hand frames sit on top. */
.device-phone{max-width:min(300px,calc((100svh - var(--device-top,0px) - 110px) * .466))}
.device-phone .device-rig{aspect-ratio:9/19.3}
.device-phone-body{position:absolute;inset:0;border-radius:15%/7%;padding:3.6%;background:linear-gradient(100deg,#2f3a3d,#8e9a9c 6%,#1d2629 12%,#0f1517 50%,#1d2629 88%,#8e9a9c 94%,#2f3a3d);box-shadow:0 0 0 1px #01080a,inset 0 1px 1px rgba(255,255,255,.35),0 50px 70px -30px rgba(0,0,0,.6)}
.device-phone-body::before{content:"";position:absolute;inset:1.3%;border-radius:14%/6.6%;background:#020607}
.device-island{position:absolute;left:50%;top:3.3%;width:30%;height:3.2%;background:#000;border-radius:99px;transform:translateX(-50%);z-index:4}
.device-phone .ds-screen{position:relative;width:100%;height:100%;border-radius:12%/5.6%}
.device-phone .device-hand,.device-phone .device-hand-still{left:-56.207%;top:29.284%;width:114.828%;height:auto;aspect-ratio:466/937;filter:drop-shadow(0 10px 12px rgba(0,0,0,.25))}

/* Screen shell shared by both devices */
.ds-screen{overflow:hidden;background:#f4f7f7;container-type:inline-size;isolation:isolate;color:#012126;font-family:Inter,sans-serif;text-align:left}
.ds-view{position:absolute;overflow:hidden}
.ds-long{will-change:transform}
.ds-shot{display:block;width:100%;height:auto}
/* Real screenshots and recordings bring their own app layout, so the example sidebar and tabs are hidden. */
.ds-owner:not([data-screen=example]) .ds-side,.dp-player:not([data-screen=example]) .dp-tabs{display:none}
.ds-owner:not([data-screen=example]) .ds-view{inset:0}
.dp-player:not([data-screen=example]) .ds-view{bottom:0}
.ds-screen:not([data-screen=example]){background:#fff}
.ds-recording{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ds-glare{position:absolute;inset:0;pointer-events:none;z-index:9;background:linear-gradient(118deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 30%,rgba(255,255,255,0) 31%)}
.ds-screen small{font-size:1em;color:#31575a}
.ds-pill{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid #dce5e5;background:#fff;border-radius:99px;padding:.5em 1em;font-size:1em;font-weight:600}
.ds-pill-dark{background:#012126;border-color:#012126;color:#fff}
.ds-pill-green{background:#01db95;border-color:#01db95;color:#012126}
.ds-title{display:block;font:700 2em/1.15 Poppins,Inter,sans-serif;letter-spacing:-.02em}

/* Owner dashboard example. 1em is 1% of the screen width (about 6.8 px at full size). */
.ds-owner>*{font-size:1.47cqw}
.ds-owner .ds-side{position:absolute;inset:0 auto 0 0;width:18%;background:#012126;padding:4% 2%;display:flex;flex-direction:column;gap:.6em;z-index:2}
.ds-owner .ds-side img{width:100%;height:auto;margin:0 0 2.2em}
.ds-owner .ds-side span{color:#a9c3c2;font-size:1.05em;font-weight:600;padding:.75em .9em;border-radius:.7em;transition:background .3s,color .3s}
.ds-owner .ds-side span.on{background:rgba(1,219,149,.16);color:#01db95}
.ds-owner .ds-view{inset:0 0 0 18%}
.ds-owner .ds-long{height:400%;display:flex;flex-direction:column}
.ds-page{flex:0 0 25%;display:flex;flex-direction:column;gap:3%;padding:4.5% 5% 3.5%;min-height:0}
.ds-head{display:flex;justify-content:space-between;align-items:center}
.ds-head small{display:block;margin-bottom:.3em}
.ds-card{background:#fff;border:1px solid #dce5e5;border-radius:1.4em;padding:1.6em 1.8em}
.ds-tiles,.ds-campaign-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
.ds-campaign-stats{grid-template-columns:repeat(2,1fr);margin-top:1.4em}
.ds-tile{background:#fff;border:1px solid #dce5e5;border-radius:1.4em;padding:1.4em 1.6em;display:grid;gap:.35em}
.ds-tile b{font:700 2.3em/1.1 Poppins,Inter,sans-serif;letter-spacing:-.02em}
.ds-tile span{font-size:.95em;color:#31575a}
.ds-tiles .ds-tile:nth-child(2){background:#ddf8ed;border-color:#ddf8ed}
.ds-chart{flex:1;display:flex;flex-direction:column;gap:1em;min-height:0}
.ds-bars{flex:1;display:flex;align-items:flex-end;gap:3%;min-height:0}
.ds-bars span{flex:1;border-radius:.6em .6em 0 0;background:#ddf8ed}
.ds-bars span:last-child{background:#01db95}
.ds-bar-1{height:42%}.ds-bar-2{height:55%}.ds-bar-3{height:48%}.ds-bar-4{height:63%}.ds-bar-5{height:58%}.ds-bar-6{height:71%}.ds-bar-7{height:66%}.ds-bar-8{height:84%}
.ds-table{flex:1;padding:.6em 1.8em;display:flex;flex-direction:column;justify-content:space-around}
.ds-row{display:grid;grid-template-columns:3em 1.6fr 1fr 1.1fr 1fr;gap:1em;align-items:center;font-size:1.1em}
.ds-row i{width:2.6em;height:2.6em;border-radius:50%;background:#ddf8ed;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85em}
.ds-row span{color:#31575a}
.ds-row em{font-style:normal;font-weight:600;font-size:.9em;justify-self:start;background:#ddf8ed;border-radius:99px;padding:.3em .9em}
.ds-row em.is-pending{background:#fff1ce;color:#664c12}
.ds-row-head{font-size:.95em;color:#31575a}.ds-row-head b,.ds-row-head em{font-weight:600;background:none;padding:0}
.ds-packages{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em;min-height:0}
.ds-package{background:#fff;border:1px solid #dce5e5;border-radius:1.6em;padding:2em 1.8em;display:flex;flex-direction:column;gap:.6em}
.ds-package b{font:700 3em/1.1 Poppins,Inter,sans-serif;letter-spacing:-.02em;margin-top:auto}
.ds-package span{font-size:1.05em;color:#31575a}
.ds-package.is-featured{background:#012126;border-color:#012126;color:#fff}
.ds-package.is-featured small,.ds-package.is-featured span{color:#01db95}
.ds-verify{display:flex;justify-content:space-between;align-items:center;gap:1em}.ds-verify b{display:block;font-size:1.15em}
.ds-campaign{flex:1}
.ds-campaign-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4em}.ds-campaign-top b{font:700 1.5em/1.2 Poppins,Inter,sans-serif}
.ds-progress{height:1em;border-radius:99px;background:#f4f7f7;overflow:hidden;margin-bottom:.7em}
.ds-progress span{display:block;height:100%;width:45%;background:#01db95;border-radius:99px}
.ds-offer-row{display:flex;justify-content:space-between;align-items:center}.ds-offer-row b{font-size:1.15em}

/* Player app example. 1em is about 3.4% of the screen width. */
.dp-player>*{font-size:3.4cqw}
.dp-status{position:absolute;inset:0 0 auto;height:9%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 9% 2%;font-size:3cqw;font-weight:600;background:#f4f7f7;z-index:3}
.dp-status span:last-child{color:#31575a}
.dp-player .ds-view{top:9%;bottom:11%;left:0;right:0}
.dp-player .ds-long{height:400%;display:flex;flex-direction:column}
.dp-page{flex:0 0 25%;display:flex;flex-direction:column;gap:3.5%;padding:5% 7% 4%;min-height:0}
.dp-hello{margin-bottom:-.4em}
.dp-player .ds-title{font-size:1.75em}
.dp-card{flex:1;max-height:72%;background:#012126;color:#fff;border-radius:1.4em;padding:1.4em;display:flex;flex-direction:column;gap:.5em;position:relative;overflow:hidden}
.dp-card::after{content:"";position:absolute;right:-20%;top:-18%;width:60%;aspect-ratio:1;border-radius:50%;background:rgba(1,219,149,.18)}
.dp-card small,.dp-card>span{color:#a9c3c2;font-size:.85em}
.dp-club{display:flex;align-items:center;gap:.6em}.dp-club b{font:700 1.2em/1.2 Poppins,Inter,sans-serif}
.dp-club i{width:2.2em;height:2.2em;border-radius:50%;background:#01db95;color:#012126;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8em}
.dp-qr{margin:auto;width:56%;aspect-ratio:1;background:#fff;border-radius:.8em;padding:6%;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr)}
.dp-qr span.on{background:#012126}
.dp-card>span{text-align:center}
.dp-balance{background:#012126;color:#fff;border-radius:1.4em;padding:1.4em;display:grid;gap:.3em}
.dp-balance small{color:#a9c3c2}
.dp-balance b{font:700 2.6em/1.1 Poppins,Inter,sans-serif;color:#01db95;letter-spacing:-.02em}
.dp-balance div{display:flex;justify-content:space-between;gap:.5em;font-size:.82em;color:#ddf8ed}
.dp-row{display:grid;grid-template-columns:2.4em 1fr auto;gap:.8em;align-items:center;background:#fff;border:1px solid #dce5e5;border-radius:1.1em;padding:.9em 1em}
.dp-row i{width:2.4em;height:2.4em;border-radius:.7em;background:#ddf8ed}
.dp-row b{display:block;font-size:.95em}.dp-row small{font-size:.8em}
.dp-row>span{font-weight:700;font-size:.95em}
.dp-points{background:#ddf8ed;border-radius:1.4em;padding:1.4em;display:grid;gap:.3em}
.dp-points b{font:700 2.6em/1.1 Poppins,Inter,sans-serif}
.dp-progress{height:.7em;border-radius:99px;background:#fff;overflow:hidden;margin-top:.4em}
.dp-progress span{display:block;height:100%;width:85%;background:#01db95}
.dp-offer{background:#012126;color:#fff;border-radius:1.4em;padding:1.4em;display:grid;gap:.4em}
.dp-offer small{color:#01db95;font-weight:600}
.dp-offer b{font:700 1.4em/1.2 Poppins,Inter,sans-serif}
.dp-offer span{font-size:.9em;color:#ddf8ed}
.dp-tabs{position:absolute;inset:auto 0 0;height:11%;display:flex;justify-content:space-around;align-items:flex-start;padding:3% 6% 0;background:#fff;border-top:1px solid #dce5e5;z-index:3}
.dp-tabs span{font-size:.75em;font-weight:600;color:#31575a;padding:.4em .7em;border-radius:99px;transition:background .3s,color .3s}
.dp-tabs span.on{background:#012126;color:#fff}

/* Players section: full-width Deep Teal band without horizontal overflow */
.device-player{background:#012126;box-shadow:0 0 0 100vmax #012126;clip-path:inset(0 -100vmax);color:#fff}
.marketing-page .device-player .eyebrow{color:#01db95}
.marketing-page .device-player h2{color:#fff}
.device-player .device-lede,.device-player .device-stops li,.device-player figcaption{color:#a9c3c2}
.device-player .device-stops li.on{color:#fff}
.is-marketing .device-player a.button:not(.secondary){background:#01db95;border-color:#01db95;color:#012126}
.is-marketing .device-player a.sample-link{color:#ddf8ed}

/* Mobile: text above the device, then the device. Stops list is hidden to save room. */
@media (max-width:860px){
  .device-scroll{--device-scroll-length:300vh}
  .device-stage{align-items:start;padding:18px 0 12px}
  .device-grid,.device-player .device-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .device-player .device-copy{order:-1}
  .marketing-page .device-copy h1{font-size:clamp(30px,8.4vw,44px);margin:8px 0 10px}
  .marketing-page .device-copy h2{font-size:clamp(28px,7.6vw,40px);margin:8px 0 10px}
  .device-lede{font-size:15px;margin-bottom:14px}
  .device-stops{display:none}
  .device-copy .actions{gap:8px 16px}
  .device-tablet{max-width:560px;margin-right:-18px;width:calc(100% + 18px)}
  .device-copy .actions .button{padding:11px 15px}
  .device-figure figcaption{margin-top:8px}
  /* The phone fills the space left under the text. */
  .device-player .device-stage{align-items:stretch}
  .device-player .device-grid{height:100%;grid-template-rows:auto minmax(0,1fr)}
  .device-phone{max-width:none;min-height:0;height:100%;display:flex;flex-direction:column;align-items:center}
  .device-phone .device-rig{flex:1 1 auto;min-height:0;max-height:440px;width:auto;max-width:56vw;aspect-ratio:9/19.3;margin-left:18%}
}
@media (max-width:860px) and (max-height:700px){.device-lede{display:none}}

/* Reduced motion: no tall scroll areas. Show the first frame, the first page and every stop. */
@media (prefers-reduced-motion:reduce){
  .device-scroll{height:auto}
  .device-stage{position:relative;top:auto;height:auto;padding:48px 0}
  .device-stops li span{display:block}
  .ds-owner .ds-side span,.dp-tabs span,.device-stops li,.device-stops li i{transition:none}
}