/* Features page. Builds on style.css (tokens, panels, phone frame, fonts). The page is complete without script and without motion;
   features.js only adds the reveals and the scroll-drawn figures, and only when the visitor has not asked for less motion. */
.nav nav a[aria-current]{color:var(--ink);background-size:100% 1.5px}

.open{max-width:1240px;margin:0 auto;padding:30px 32px 70px}
.open h1{font-size:clamp(48px,7.4vw,112px);max-width:9em}
.open>p{font-size:21px;color:var(--mute);margin:30px 0 36px;max-width:36em}
.jump{display:flex;flex-wrap:wrap;gap:10px}
.jump a{border:1.5px solid var(--ink);border-radius:99px;padding:8px 18px;font-size:16px;text-decoration:none;transition:background .25s,color .25s,translate .3s var(--ease)}
.jump a:hover{background:var(--ink);color:#fff;translate:0 -2px}

.fx{max-width:1240px;margin:0 auto 28px;border-radius:var(--r);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:76px;overflow:hidden}
.fx.rev .t{order:2}
.fx h2{font-size:clamp(34px,3.9vw,56px)}
.fx .t>p{color:var(--mute);margin-top:20px;font-size:19px;max-width:27em}
.pts{list-style:none;padding:0;margin:28px 0 0;max-width:30em;border-top:1px solid rgba(14,18,16,.18)}
.pts li{padding:14px 0;border-bottom:1px solid rgba(14,18,16,.18);color:var(--mute);font-size:16.5px;line-height:1.5}
.pts b{display:block;font:500 19px "Funnel Display";letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.v{min-width:0}
.fx figure{margin:0}
.fx figcaption{font-size:14px;color:var(--mute);margin-top:12px}
.fx h3{font:500 20px "Funnel Display";letter-spacing:-.015em}
.fx svg{display:block;width:100%;height:auto;overflow:visible}

/* phone beside a drawn figure: the phone bleeds off the panel's bottom edge, like the home page */
.fx:has(.phones){min-height:660px}
.v.phones{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:end;grid-template-rows:1fr;margin:-76px 0;align-self:stretch}
.v.phones figure{align-self:center}
.phones .shot{position:relative;height:470px;overflow:hidden;--pw:230px}
.phones .shot .phone{left:0;top:30px;translate:0 var(--py,0px)}
.phones .ring svg{max-width:200px}

.dive svg{max-width:640px}
.dive .head,.hrv .dot{transform-box:fill-box;transform-origin:center}
.reg{margin-top:34px;max-width:320px}
.reg svg{margin:14px 0 10px}
.reg p{font-size:15px;color:var(--mute);margin:0}

.hrv svg{max-width:420px}
.hs svg{max-width:420px}
.hs .rng,.hs .terms rect{transform-box:fill-box}

.zones{max-width:260px}
.zb{display:flex;gap:4px;height:92px;margin-top:16px}
.zb span{flex:var(--w) 1 0;min-width:0;border-radius:10px;overflow:hidden;background:rgba(14,18,16,.08);display:block;position:relative}
.zb i{position:absolute;inset:0;background:#0e1210;border-radius:inherit;transform-origin:50% 100%}
.z1 i{opacity:.28}.z2 i{opacity:.5}.z3 i{opacity:.72}.z4 i{background:#b9761b}.z5 i{background:#9b3a1d}
.zl{display:flex;gap:4px;list-style:none;padding:0;margin:8px 0 0;font-size:13px;color:var(--mute)}
.zl li{flex:1;text-align:center}
.zl li:nth-child(1){flex:8}.zl li:nth-child(2){flex:34}.zl li:nth-child(3){flex:30}.zl li:nth-child(4){flex:22}.zl li:nth-child(5){flex:6}

.src ul,.sw ul{list-style:none;padding:0;margin:0;max-width:440px;border-top:1px solid rgba(14,18,16,.2)}
.src li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(14,18,16,.2)}
.src .n{font:500 clamp(22px,2.4vw,30px) "Funnel Display";letter-spacing:-.02em}
.src .c{font-size:15.5px;color:var(--mute);text-align:right}
.sw{position:relative;max-width:440px}
.sw li{height:84px;padding:18px 0 0;border-bottom:1px solid rgba(14,18,16,.2);position:relative}
.sw li b{display:block;font:500 clamp(22px,2.4vw,30px) "Funnel Display";letter-spacing:-.02em;line-height:1.1}
.sw li span{display:block;font-size:15px;color:var(--mute);margin-top:4px}
.sw .pr{position:absolute;right:0;top:0;height:84px;margin:0;display:flex;align-items:center;translate:0 0;transition:translate 1.1s var(--ease) .5s}
.sw .pr span{background:var(--ink);color:#fff;font-size:14px;padding:8px 16px;border-radius:99px}
.sw.in .pr{translate:0 84px}

.daily{max-width:1240px;margin:70px auto 28px;padding:0 32px}
.daily h2{font-size:clamp(36px,4.4vw,64px);margin-bottom:28px}
.dg{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.dg article{border-radius:32px;padding:34px 36px 38px;grid-column:span 6}
.dg article:nth-child(1){grid-column:span 7;background:var(--lilac)}
.dg article:nth-child(2){grid-column:span 5;background:var(--peach)}
.dg article:nth-child(3){grid-column:span 5;background:var(--sage)}
.dg article:nth-child(4){grid-column:span 7;background:var(--blue)}
.dg h3{font-size:clamp(26px,2.6vw,34px);margin-bottom:12px}
.dg p{color:var(--mute);font-size:17px;max-width:32em}
.tg{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tg li{background:rgba(255,255,255,.65);border-radius:99px;padding:9px 18px;font-size:15px}
.tg li:last-child{background:var(--ink);color:#fff}

.priv .ai{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2);max-width:34em;font-size:18px;color:rgba(255,255,255,.78)}
.priv .ai b{color:#fff;font-weight:600}
.priv .more{margin-top:30px}

.works2{max-width:820px;margin:80px auto 0;padding:0 32px}
.works2 h2{font-size:clamp(32px,4vw,52px);margin-bottom:18px}
.works2 p{color:var(--mute);max-width:36em}
.works2 .na{font-size:15px;margin-top:16px;color:var(--soft)}

/* motion: only when features.js has marked the page (no reduced-motion preference, script running) */
.js-on .rv{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate 1s var(--ease);transition-delay:var(--d,0s)}
.js-on .rv.in{opacity:1;translate:0 0}
.js-on .dive .line{stroke-dasharray:1;stroke-dashoffset:var(--p,1)}
.js-on .dive .head{opacity:calc(var(--p,1)*-1 + 1)}
.js-on .ring .arc{transition:stroke-dasharray 1.6s var(--ease) .15s}
.js-on .ring:not(.in) .arc{stroke-dasharray:0 100}
.js-on .hrv .band{transform-box:fill-box;transform-origin:center;transition:transform 1s var(--ease)}
.js-on .hrv:not(.in) .band{transform:scaleY(0)}
.js-on .hrv .line{stroke-dasharray:1;transition:stroke-dashoffset 1.7s var(--ease) .5s}
.js-on .hrv:not(.in) .line{stroke-dashoffset:1}
.js-on .hrv .dot{transition:opacity .4s 1.9s,transform .9s var(--ease) 1.9s}
.js-on .hrv:not(.in) .dot{opacity:0;transform:scale(.2)}
.js-on .hs .rng{transition:transform 2s var(--ease) .2s;transform-origin:50% 50%}
.js-on .hs:not(.in) .rng{transform:scaleX(2.3)}
.js-on .hs .terms rect{transform-origin:0 50%;transition:transform 1.4s var(--ease) .9s}
.js-on .hs:not(.in) .terms rect{transform:scaleX(0)}
.js-on .zb i{transition:transform 1.3s var(--ease);transition-delay:calc(var(--k,0)*.12s + .2s)}
.js-on .zones:not(.in) .zb i{transform:scaleY(0)}
.js-on .src li{transition:opacity .8s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--i)*.12s + .15s)}
.js-on .src:not(.in) li{opacity:0;translate:0 18px}

@media (max-width:900px){
  .open{padding:14px 20px 50px}
  .fx{grid-template-columns:1fr;padding:52px 26px;gap:36px;margin:0 16px 16px;border-radius:32px}
  .fx.rev .t{order:0}
  .fx:has(.phones){min-height:0}
  .v.phones{grid-template-columns:1fr;margin:0 0 -52px;gap:20px;justify-items:center}
  .v.phones figure{justify-self:start}
  .phones .shot{width:230px;height:400px}
  .daily{padding:0 16px;margin-top:50px}.daily h2{padding:0 4px}
  .dg article,.dg article:nth-child(n){grid-column:span 12;padding:28px 26px 32px}
  .works2{padding:0 20px;margin-top:56px}
}
@media (prefers-reduced-motion:reduce){.jump a,.sw .pr{transition:none}}