:root{
  --black:#000; --ground:#060A0E; --surface:#0D141C; --raised:#141E29; --line:#1D2A38; --line2:#293949;
  --ink:#F2F7FC; --dim:#A8BCCF; --muted:#728799;
  --blue:#1CA7EC; --cyan:#06B6D4; --ember:#F5A524; --good:#34D399;
  --grad:linear-gradient(135deg,#1CA7EC,#06B6D4);
  --disp:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:22px; --col:1180px; --narrow:920px;
  --t1a-display:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--ink);font-family:var(--body);font-size:17px;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--pad)}

/* ---------- Apple-grammar type ---------- */
h1{font-family:var(--disp);font-weight:800;font-size:clamp(34px,8.6vw,86px);line-height:1.02;
  letter-spacing:-.035em;margin:0;text-wrap:balance}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,6.6vw,58px);line-height:1.05;
  letter-spacing:-.03em;margin:0;text-wrap:balance}
h3{font-family:var(--disp);font-weight:600;font-size:clamp(21px,3.2vw,28px);line-height:1.2;
  letter-spacing:-.02em;margin:0}
.kick{font-family:var(--disp);font-weight:600;font-size:clamp(15px,2.4vw,19px);color:var(--blue);
  margin:0 0 14px;letter-spacing:-.01em}
.sub{font-size:clamp(15.5px,2.2vw,21px);color:var(--dim);line-height:1.5;margin:18px auto 0;max-width:34ch}
.center{text-align:center}
.db{display:none}
.center .sub{margin-left:auto;margin-right:auto}
p{margin:0 0 1em}

/* ---------- acts ---------- */
.act{padding:clamp(76px,13vw,150px) 0;position:relative}
.act.tight{padding:clamp(56px,9vw,104px) 0}
.g-dark{background:var(--black)}
.g-lift{background:var(--ground)}
.g-panel{background:var(--surface)}

/* ---------- ribbon + nav ---------- */
.ribbon{background:#0B1219;color:var(--dim);font-size:14px;text-align:center;padding:13px 20px;
  border-bottom:1px solid var(--line)}
.ribbon a{color:var(--blue)}
.globalnav{height:52px;display:flex;align-items:center;background:rgba(0,0,0,.86);
  backdrop-filter:blur(16px);position:sticky;top:0;z-index:70}
.globalnav .wrap{display:flex;align-items:center;gap:16px;width:100%}
.globalnav img{height:22px;width:auto}
.globalnav .sp{margin-left:auto}
.globalnav .tel{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:none}

/* the local nav — Apple's product pill */
.localnav{position:sticky;top:0;z-index:65;background:rgba(13,20,28,.88);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.localnav .wrap{display:flex;align-items:center;gap:10px;height:54px}
.localnav .name{display:flex;align-items:center;flex:none}
.localnav .name img{height:30px;width:auto;display:block}
.localnav nav{display:none;gap:22px;margin-left:26px;font-size:14px;color:var(--dim)}
.localnav nav a:hover{color:var(--ink)}
.localnav .acts{margin-left:auto;display:flex;gap:8px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);
  font-weight:600;font-size:15px;padding:10px 20px;border-radius:999px;background:var(--grad);
  color:#04121C;transition:filter .15s,transform .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.09)}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:15px 30px;font-size:17px}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--blue);background:rgba(28,167,236,.1);filter:none}
.btn.plain{background:none;color:var(--blue);padding:10px 4px}
.btn.plain:hover{filter:none;text-decoration:underline}

/* ---------- hero ---------- */
.hero{padding:clamp(26px,6vw,76px) 0 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-14%;width:130vw;height:70vh;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(28,167,236,.20),transparent 72%);pointer-events:none}
.hero .eyebrow{font-family:var(--disp);font-weight:600;font-size:clamp(17px,3vw,22px);
  color:var(--blue);margin:0 0 12px}
.heroline{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.6vw,24px);line-height:1.3;
  color:#fff;margin:18px auto 0;max-width:30ch;text-wrap:balance}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.heroshot{margin-top:clamp(34px,6vw,62px);position:relative}
.shot{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--raised);
  box-shadow:0 40px 90px -40px rgba(0,0,0,1);cursor:zoom-in}
.hero .trust{margin-top:clamp(26px,4vw,40px);font-size:14px;color:var(--muted);
  display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap}
.hero .trust b{color:var(--dim);font-weight:600}

/* ---------- hero: departments slide behind "Get out from behind the desk" ----------
   Phone first: one department at a time, crossfading, below the copy.
   Desktop: a Blackmagic-style accordion. Six slides; the one on the far right is wide and
   carries the phone and the department's name. Each tick every slide moves one slot right,
   the wide one drops back to the far left, hidden behind the shade under the copy. */
.hero.scene-hero{padding:clamp(28px,6vw,72px) 0 clamp(28px,4vw,48px)}
.hero.scene-hero::before{display:none}
.herogrid{position:relative;z-index:2;display:grid;gap:clamp(34px,5vw,56px);align-items:center}
.herocopy{max-width:640px;margin:0 auto}
.trustwrap{position:relative;z-index:2}
.dept-hero{display:flex;flex-direction:column}
.dept-hero .herogrid{order:1}
.dept-hero .trustwrap{order:3}
.depts{--ease:cubic-bezier(.65,0,.35,1);position:relative;order:2;height:600px;margin:30px var(--pad) 0;
  border-radius:24px;overflow:hidden;background:#05080b}
.dept{position:absolute;top:0;bottom:0;left:0;width:100%;overflow:hidden;opacity:0;transition:opacity .8s ease}
.dept.is-active{opacity:1;z-index:2}
.deptbg{position:absolute;inset:0;background:var(--bg);background-size:cover;background-position:center 42%}
.deptbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.06) 40%,rgba(0,0,0,.45))}
.deptpill,.deptshade{display:none}
.deptinner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:26px 16px}
.deptname{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em;
  color:#fff;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.dphone{--pw:min(228px,58vw);position:relative}
.dphone::before{content:"";position:absolute;left:50%;top:14%;width:160%;height:74%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);filter:blur(16px);z-index:0}
.dphone .device{z-index:1}
.dept.is-active .dphone .device{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.dphone .hcall{position:absolute;top:12%;left:5%;right:5%;width:auto;margin:0;transform:none;opacity:1;z-index:6;text-align:left}
.phph{aspect-ratio:760/1652;background:linear-gradient(180deg,#f4f6f9,#e5eaf0);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:18px;gap:6px}
.phph-k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8;margin:0;
  border:1px dashed #cbd5e1;border-radius:6px;padding:4px 8px}
.phph-t{font-family:var(--disp);font-weight:700;font-size:15px;color:#0f172a;margin:6px 0 0}
.phph-s{font-size:11px;color:#64748b;margin:0}
@media(min-width:900px){
  .dept-hero{min-height:clamp(640px,88vh,840px)}
  .dept-hero .herogrid{flex:1;align-content:center;grid-template-columns:1fr}
  .herocopy{text-align:left;margin:0;max-width:560px}
  .herocopy .sub,.herocopy .heroline{margin-left:0}
  .herocopy .cta{justify-content:flex-start}
  .hero.scene-hero .trust{justify-content:flex-start}
  .depts{position:absolute;inset:0;height:auto;margin:0;border-radius:0;z-index:0;order:0}
  .dept{opacity:1;z-index:2;transition:left 1.15s var(--ease),width 1.15s var(--ease);box-shadow:inset 1px 0 0 rgba(0,0,0,.55)}
  .dept[data-slot="0"]{left:0;width:11.6%}
  .dept[data-slot="1"]{left:11.6%;width:11.6%}
  .dept[data-slot="2"]{left:23.2%;width:11.6%}
  .dept[data-slot="3"]{left:34.8%;width:11.6%}
  .dept[data-slot="4"]{left:46.4%;width:11.6%}
  .dept[data-slot="5"]{left:58%;width:42%}
  .dept.is-active{z-index:3}
  .dept.is-leaving{z-index:1}
  .dept.no-anim{transition:none}
  .deptpill{display:block;position:absolute;top:16px;left:10px;z-index:4;font-family:var(--body);font-weight:600;
    font-size:11px;line-height:1;color:#fff;background:rgba(0,0,0,.58);border-radius:6px;padding:6px 8px;
    white-space:nowrap;transition:opacity .4s}
  .dept.is-active .deptpill{opacity:0}
  .deptinner{left:auto;width:42vw;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .35s ease,transform .5s ease}
  .dept.is-active .deptinner{opacity:1;transform:none;transition:opacity .6s ease .45s,transform .9s var(--ease) .35s}
  .dphone{--pw:clamp(220px,min(19vw,31vh),272px)}
  .deptshade{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 30%,rgba(0,0,0,.80) 44%,rgba(0,0,0,.28) 55%,transparent 62%),
      linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 14%,transparent 82%,#000 100%)}
}
/* Mobile + tablet: the same accordion turned on its side. The open department sits on top,
   the rest are labeled bands below; the band under it grows up to take over and the old one
   fades to the back of the line at the bottom. Desktop (>=900px) above is locked, owner 2026-09-15. */
@media(max-width:899px){
  /* Full-bleed and tucked under the copy, with the desktop's black fade turned vertical.
     z-index:0 keeps the slides below the copy, which sits on top of the fade. */
  .depts{--A:640px;--B:52px;height:calc(var(--A) + 5 * var(--B));z-index:0;margin:-24px 0 0;border-radius:0;background:#000}
  .depts::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;z-index:5;pointer-events:none;
    background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.9) 25%,rgba(0,0,0,.45) 60%,transparent 100%)}
  .deptinner{justify-content:flex-start;padding-top:158px}
  .dept{opacity:1;bottom:auto;cursor:pointer;box-shadow:inset 0 1px 0 rgba(0,0,0,.6);
    transition:top 1.15s var(--ease),height 1.15s var(--ease),opacity .45s ease}
  .dept[data-slot="5"]{top:0;height:var(--A);cursor:default}
  .dept[data-slot="4"]{top:var(--A);height:var(--B)}
  .dept[data-slot="3"]{top:calc(var(--A) + var(--B));height:var(--B)}
  .dept[data-slot="2"]{top:calc(var(--A) + 2 * var(--B));height:var(--B)}
  .dept[data-slot="1"]{top:calc(var(--A) + 3 * var(--B));height:var(--B)}
  .dept[data-slot="0"]{top:calc(var(--A) + 4 * var(--B));height:var(--B)}
  .dept.is-active{z-index:3}
  .dept.is-leaving{z-index:1;opacity:0}
  .dept.no-anim{transition:none}
  .deptbg,.deptinner{bottom:auto;height:var(--A)}
  .deptbg::after{transition:background .6s ease}
  .dept:not(.is-active) .deptbg::after{background:rgba(0,0,0,.42)}
  .deptpill{display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:0;
    height:var(--B);padding:0 20px;z-index:4;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;
    color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);transition:opacity .4s ease}
  .deptpill::after{content:"";width:8px;height:8px;border-right:2px solid rgba(255,255,255,.8);
    border-bottom:2px solid rgba(255,255,255,.8);transform:rotate(-45deg)}
  .dept.is-active .deptpill{opacity:0;pointer-events:none}
  .deptinner{opacity:0;transition:opacity .3s ease}
  .dept.is-active .deptinner{opacity:1;transition:opacity .6s ease .5s}
  .dphone{--pw:min(200px,52vw)}
}
/* Phones: the header and the pinned bottom bar already carry Book a tour, so the hero drops
   its own button row and the slider moves up under the last line of copy. */
@media(max-width:759px){
  .dept-hero .herocopy .cta{display:none}
  .dept-hero .herogrid{gap:0}
  .depts{margin-top:-60px}
}
@media(prefers-reduced-motion:reduce){.dept.is-active .dphone .device{animation:none}.dept,.deptinner{transition:none!important}}


/* Photo backgrounds for the department slider. Keep url()s here, never in an inline --bg:
   Chrome resolves a url() inside a custom property against the stylesheet that uses it. */
.dept[data-dept="communication"] .deptbg{background-image:url('img/forest-blur.jpg');background-size:cover;background-position:center 42%}

/* ---------- full-bleed statement ---------- */
.bleed{min-height:min(86vh,760px);display:grid;place-items:center;text-align:center;position:relative;
  overflow:hidden;padding:clamp(70px,11vw,130px) 0}
.bleed .bg{position:absolute;inset:0;z-index:0}
.bleed .bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.bleed .bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(75% 65% at 50% 46%,rgba(0,0,0,.12),rgba(0,0,0,.80) 82%)}
.bleed .inner{position:relative;z-index:1;max-width:900px;padding:0 var(--pad)}
.bleed .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 14px}

/* ---------- highlights carousel ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--pad) 22px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.card{scroll-snap-align:center;flex:0 0 min(84vw,420px);background:var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;display:flex;flex-direction:column;
  min-height:440px}
.card h3{margin-bottom:14px}
.card .m{color:var(--dim);font-size:15.5px;margin:0 0 16px}
.card .split{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.card .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.card .lab.us{color:var(--blue)}
.card .txt{font-size:14.5px;color:var(--dim);margin:0 0 14px}
.card .txt.us{color:var(--ink)}
.railctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.dots{display:flex;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 14px}
.dot{width:7px;height:7px;border-radius:999px;background:var(--line2);transition:.25s}
.dot.on{background:var(--dim);width:22px}
.pause{width:40px;height:40px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--dim)}

/* ---------- big-number grid ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(30px,5vw,50px)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 20px;
  text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:190px}
.tile .cap{font-size:14px;color:var(--dim);margin:0 0 10px;line-height:1.35}
.tile .big{font-family:var(--disp);font-weight:800;font-size:clamp(30px,7vw,46px);line-height:1;
  letter-spacing:-.03em;color:#fff;margin:0 0 8px}
.tile .foot{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.35}
.tile.wide{grid-column:span 2}

/* ---------- ask demo ---------- */
.ask{display:grid;gap:30px;margin-top:clamp(34px,5vw,54px);align-items:center}
.chips{display:flex;flex-direction:column;gap:10px}
.chip{text-align:left;border:1px solid var(--line2);background:var(--surface);border-radius:14px;
  padding:15px 17px;font-family:var(--disp);font-weight:500;font-style:italic;font-size:16px;
  color:var(--dim);transition:.18s;display:flex;gap:11px;align-items:flex-start}
.chip:hover{border-color:var(--blue);color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--blue);background:rgba(28,167,236,.11);color:var(--ink)}
.chip .mic{flex:none;width:18px;height:18px;margin-top:2px;opacity:.85}
.phone{width:min(300px,80vw);margin:0 auto;border:9px solid #101821;border-radius:40px;background:#000;
  box-shadow:0 40px 90px -34px rgba(0,0,0,1);overflow:hidden;position:relative}
.phone .screen{aspect-ratio:9/18.5;background:linear-gradient(180deg,#0A141E,#05090D);
  padding:36px 14px 16px;display:flex;flex-direction:column;gap:12px;position:relative}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:21px;
  background:#101821;border-radius:12px}
.said{background:rgba(255,255,255,.07);border-radius:15px 15px 15px 5px;padding:11px 13px;
  font-size:13.5px;color:var(--dim);font-style:italic;min-height:44px}
.answer{background:var(--raised);border:1px solid var(--line2);border-radius:15px;padding:15px;
  transition:opacity .3s}
.answer.pending{opacity:.22}
.answer .num{font-family:var(--disp);font-weight:800;font-size:36px;line-height:1;color:#fff;margin-bottom:6px}
.answer .lbl{font-size:12.5px;color:var(--dim);line-height:1.45}
.answer .meta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.waves{display:flex;gap:3px;align-items:flex-end;height:16px;margin-top:auto;justify-content:center;opacity:.5}
.waves i{display:block;width:3px;background:var(--blue);border-radius:2px;height:5px}
.speaking .waves i{animation:w .9s ease-in-out infinite}
.waves i:nth-child(2){animation-delay:.1s}.waves i:nth-child(3){animation-delay:.2s}
.waves i:nth-child(4){animation-delay:.3s}.waves i:nth-child(5){animation-delay:.15s}
@keyframes w{0%,100%{height:5px}50%{height:15px}}

/* ---------- roles ---------- */
.roles{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin:clamp(26px,4vw,40px) 0 24px;
  scrollbar-width:none;justify-content:flex-start}
.roles::-webkit-scrollbar{display:none}
.role{flex:none;border:1px solid var(--line2);border-radius:999px;padding:10px 18px;font-size:14.5px;
  color:var(--dim);font-weight:500;transition:.16s}
.role[aria-pressed="true"]{background:var(--grad);color:#04121C;border-color:transparent;font-weight:600}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wg{background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:13px}
.wg .t{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.wg .v{font-family:var(--disp);font-weight:700;font-size:25px;color:#fff;line-height:1}
.wg .s{font-size:11.5px;color:var(--dim);margin-top:5px;line-height:1.35}
.wg.wide{grid-column:span 2}

/* ---------- why-only ---------- */
.why{border:1px solid rgba(28,167,236,.34);border-radius:24px;
  background:linear-gradient(180deg,rgba(28,167,236,.09),rgba(28,167,236,.02));
  padding:clamp(26px,4vw,44px);margin-top:clamp(34px,5vw,56px)}
.why .cap{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 14px}
.why .lead{color:var(--ink);font-size:clamp(16px,2vw,18.5px);max-width:62ch;margin:0 0 22px}
.why dl{margin:0;display:grid;gap:14px}
.why dt{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--cyan)}
.why dd{margin:4px 0 0;color:var(--dim);font-size:15.5px;max-width:62ch}
.why .cl{margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(28,167,236,.24);
  color:var(--ink);max-width:62ch;font-size:16px}

/* ---------- scope pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.pills span{border:1px solid var(--line2);border-radius:999px;padding:9px 17px;font-size:14.5px;color:var(--dim)}
.pills span:hover{border-color:var(--blue);color:var(--ink)}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:16px;margin-top:clamp(30px,5vw,50px)}
.q{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px}
.q p{font-family:var(--disp);font-weight:500;font-style:italic;color:var(--ink);font-size:16.5px;line-height:1.55}
.q .who{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-style:normal;margin:0}

/* ---------- listen to the episode ---------- */
.listen{margin-top:clamp(30px,5vw,48px);text-align:center}
.listenlead{color:var(--dim);max-width:52ch;margin:0 auto 20px;font-size:clamp(16px,2vw,18px)}
.listenlead em{color:var(--ink);font-style:italic}
.listenrow{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.listenfoot{margin:20px auto 0;max-width:56ch;font-size:13.5px;color:var(--muted)}

/* ---------- form ---------- */
.formwrap{background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:clamp(24px,4vw,38px);margin-top:clamp(30px,5vw,46px)}
.f{display:grid;gap:15px}
.fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fld input,.fld textarea{width:100%;background:var(--black);border:1px solid var(--line2);
  border-radius:12px;padding:14px 15px;color:var(--ink);font:inherit;font-size:16px}
.fld input:focus,.fld textarea:focus{border-color:var(--blue);outline:none}
.fld textarea{min-height:90px;resize:vertical}
.f .btn{padding:16px;width:100%}
.fine{font-size:13.5px;color:var(--muted);margin:14px 0 0;text-align:center}
.done{display:none;text-align:center;padding:24px 6px}
.done.on{display:block}
.done .tick{width:50px;height:50px;border-radius:999px;background:rgba(52,211,153,.15);color:var(--good);
  display:grid;place-items:center;margin:0 auto 16px;font-size:24px}
.err{color:#F87171;font-size:13.5px;margin-top:8px;display:none}
.err.on{display:block}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 120px;color:var(--muted);font-size:14px;background:var(--black)}
.fcols{display:grid;gap:30px}
.fcols h4{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:500}
.fcols a{display:block;color:var(--dim);padding:6px 0}
.fcols a:hover{color:var(--ink)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.badge{border:1px solid var(--line2);border-radius:12px;padding:10px 15px;display:flex;gap:10px;
  align-items:center;color:var(--dim)}
.badge:hover{border-color:var(--blue);color:var(--ink)}
.badge b{display:block;font-family:var(--disp);font-size:14px;color:var(--ink);font-weight:600;line-height:1.15}
.badge small{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.brandline{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--disp);font-style:italic;color:var(--dim);font-size:16px}

/* ---------- floating chip + bar ---------- */
.chipbar{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;z-index:60;
  background:rgba(20,30,41,.92);backdrop-filter:blur(14px);border:1px solid var(--line2);
  border-radius:999px;padding:8px 8px 8px 20px;display:flex;align-items:center;gap:14px;
  font-size:14.5px;color:var(--dim);opacity:0;pointer-events:none;transition:opacity .3s}
.chipbar.on{opacity:1;pointer-events:auto}
.chipbar.hide{opacity:0!important;pointer-events:none!important}
.chipbar .go{width:32px;height:32px;border-radius:999px;background:var(--grad);color:#04121C;
  display:grid;place-items:center;font-weight:700}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:66;display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(0,0,0,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.bar .btn{flex:1;padding:14px}

/* ---------- panel / lightbox ---------- */
.ibtn{width:27px;height:27px;border-radius:999px;border:1px solid var(--line2);color:var(--blue);
  font-family:var(--disp);font-weight:700;font-size:13px;display:inline-grid;place-items:center;
  vertical-align:middle;margin-left:10px;transition:.18s}
.ibtn:hover{border-color:var(--blue);background:rgba(28,167,236,.13)}
.panel{position:fixed;top:0;left:0;bottom:0;width:min(440px,92vw);z-index:80;background:var(--surface);
  border-right:1px solid var(--line2);transform:translateX(-102%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:26px 0 70px -22px #000}
.panel.open{transform:none}
.panel .ph{padding:22px 24px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--surface);z-index:2}
.panel .ph .x{position:absolute;top:16px;right:16px;font-size:28px;line-height:1;color:var(--muted);padding:4px 10px}
.panel .pb{padding:22px 24px 30px}
.panel .oneline{font-size:16.5px;color:var(--ink);margin-bottom:20px}
.acc{border-top:1px solid var(--line)}
.acc summary{padding:14px 0;font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--blue);font-size:18px}
.acc[open] summary::after{content:"\2013"}
.acc p{color:var(--dim);font-size:14.5px;margin:0 0 15px}
.pinned{margin-top:24px;border:1px solid rgba(28,167,236,.34);border-radius:16px;padding:18px;
  background:rgba(28,167,236,.08)}
.pinned .cap{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--blue);margin-bottom:10px}
.pinned p{font-size:14.5px;color:var(--dim);margin:0 0 10px}
.pinned p:last-child{margin:0}
.pinned b{color:var(--ink)}
.scrim{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.lb{position:fixed;inset:0;z-index:90;background:rgba(2,4,6,.96);display:none;place-items:center;padding:20px}
.lb.on{display:grid}
.lb img{max-width:100%;max-height:88vh;border-radius:10px;border:1px solid var(--line2)}
.lb .x{position:absolute;top:16px;right:20px;font-size:32px;color:var(--dim);padding:6px 12px}
.mk{position:fixed;left:10px;bottom:74px;z-index:59;background:rgba(20,30,41,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line2);border-radius:999px;padding:6px 13px;font-family:var(--mono);font-size:9.5px;
  color:var(--muted);letter-spacing:.05em;max-width:min(320px,calc(100vw - 20px));cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}
.mk:hover{opacity:1}
.mk.gone{display:none}
.mk b{color:var(--ember)}

/* ---------- the call lands on the phone ---------- */
.dolly{position:relative;background:var(--black)}
.dtrack{position:relative;height:700vh}
.anchor-why{position:absolute;top:0;left:0;height:1px;width:1px}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:calc(52px + 6vh) var(--pad) 0}
.outdoors{position:absolute;inset:0;z-index:0;opacity:var(--out,0);pointer-events:none;
  background-image:linear-gradient(180deg,rgba(4,9,14,.52),rgba(4,9,14,.26) 42%,rgba(4,9,14,.74)),url('img/forest-blur.jpg');
  background-size:cover;background-position:center 42%}
.glow{position:absolute;inset:0;z-index:1;opacity:calc(var(--out,0)*.8);pointer-events:none;
  background:radial-gradient(42% 32% at 50% 62%, rgba(28,167,236,.16), transparent 70%)}

/* the headline sits ABOVE the phone and never moves */
.dollycopy{position:relative;z-index:6;text-align:center;max-width:760px;opacity:var(--introop,1)}
.dollycopy .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 10px}
.dollycopy h2{font-size:clamp(24px,5vw,44px)}

.scene{--pw:min(300px,72vw);position:relative;z-index:5;margin-top:clamp(18px,3.4vh,34px);
  display:flex;flex-direction:column;align-items:center;opacity:var(--introop,1)}

/* "Incoming call" — it arrives, it shakes, then it becomes the card */
.ring{position:absolute;top:50%;left:50%;margin:-24px 0 0;transform:translate(calc(-50% + var(--rx,0px)),calc(-50% + var(--ry,0px))) scale(var(--ringsc,1));z-index:12;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:rgba(9,14,20,.94);border:1px solid rgba(28,167,236,.5);border-radius:999px;
  padding:10px 18px;font-family:var(--disp);font-weight:600;font-size:15px;color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 6px rgba(28,167,236,.07);
  opacity:var(--ringop,1);padding:13px 22px;font-size:16px}
.dotpulse{width:8px;height:8px;border-radius:999px;background:var(--blue);flex:none;
  box-shadow:0 0 0 0 rgba(28,167,236,.7);animation:pulse 1.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(28,167,236,.7)}70%{box-shadow:0 0 0 9px rgba(28,167,236,0)}100%{box-shadow:0 0 0 0 rgba(28,167,236,0)}}
.ring.joggle{animation:joggleC .55s ease-in-out infinite}
@keyframes joggleC{
  0%,100%{transform:translate(-50%,-50%) rotate(0)}
  20%{transform:translate(calc(-50% - 4px),-50%) rotate(-2.4deg)}
  40%{transform:translate(calc(-50% + 4px),-50%) rotate(2.4deg)}
  60%{transform:translate(calc(-50% - 3px),-50%) rotate(-1.5deg)}
  80%{transform:translate(calc(-50% + 3px),-50%) rotate(1.5deg)}}

/* the phone never changes size — the call comes to it */
.device{position:relative;z-index:2;width:var(--pw);border-radius:40px;
  border:11px solid #05070A;background:#000;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(150,170,190,.5), 0 54px 96px rgba(0,0,0,.92)}
.device::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.16)}
.rail-l,.rail-r{position:absolute;z-index:6;background:#0A0E14;border-radius:2px;width:3px;
  box-shadow:inset 0 0 0 1px rgba(190,205,220,.22)}
.rail-l{left:-13px}.rail-r{right:-13px}
.rail-l.a{top:17%;height:5%}.rail-l.b{top:25%;height:9%}.rail-l.c{top:36%;height:9%}
.rail-r.a{top:29%;height:13%}
.device .glass{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0 16%,transparent 32%)}
.device .pill{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:82px;height:24px;
  background:#000;border-radius:99px;z-index:4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.device .screen{position:relative;background:#fff;overflow:hidden}
.appshot{width:100%;display:block}
.dim{position:absolute;inset:0;opacity:var(--dimop,0);
  background:linear-gradient(180deg,rgba(4,8,12,.42),rgba(4,8,12,.72))}

/* the card: measured at rest inside the phone, then thrown out to the middle of the stage */
.callui{position:absolute;top:11%;left:50%;width:calc(var(--pw) - 46px);
  margin-left:calc((var(--pw) - 46px) / -2);z-index:8;
  background:rgba(9,14,20,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(28,167,236,.34);border-radius:14px;padding:13px 12px 12px;font-size:11px;
  box-shadow:0 26px 60px rgba(0,0,0,.7);
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1));
  transform-origin:50% 50%;opacity:var(--cardop,1);
  clip-path:inset(-60px -60px var(--clipb,-60px) -60px round 14px)}
.callui .lab{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:7.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.callui .lab .dotpulse{width:5px;height:5px}
.callui .who{display:flex;gap:9px;align-items:center;margin-bottom:12px}
.callui .av{width:32px;height:32px;border-radius:999px;background:var(--grad);display:grid;
  place-items:center;font-family:var(--disp);font-weight:700;color:#04121C;font-size:12px}
.callui .nm{font-family:var(--disp);font-weight:600;font-size:14px;color:#fff;line-height:1.15}
.callui .sub2{font-size:9px;color:var(--dim)}
.callui .rows{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px;font-size:9.5px;color:var(--dim)}
.callui .rows div{display:flex;justify-content:space-between;gap:8px}
.callui .rows b{color:var(--ember)}
.callui .rows b.ok{color:var(--good)}
.callui .acts2{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.callui .acts2 span{border:1px solid var(--line2);border-radius:7px;padding:5px 8px;font-size:8.5px;color:var(--dim)}
.callui .acts2 span.hot{border-color:var(--blue);color:var(--ink);background:rgba(28,167,236,.12)}

/* ---------- the call-screen slider (built elsewhere, dropped in here) ---------- */
/* Its README is strict about this: the host must carry exactly 2rem of horizontal padding,
   because the slider reaches -2rem back through it to frame the neighbouring cards. */
.sliderhost{padding:0 2rem;margin:clamp(28px,4vw,44px) auto 0;max-width:1180px}
.sliderfoot{max-width:60ch;margin:clamp(20px,3vw,30px) auto 0;padding:0 var(--pad);
  text-align:center;font-size:13.5px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .dolly{height:auto}
  .dtrack{height:auto}
  .stage{position:relative;height:auto;padding:60px var(--pad)}
  .callui{transform:none!important;opacity:1!important;clip-path:none!important}
  .ring{display:none}
  .outdoors,.glow{opacity:1!important}
  .scene,.dollycopy{opacity:1!important}
  .beat{position:relative!important;inset:auto!important;opacity:1!important;padding:0 0 48px!important}
  .brain .w,.brain .bsub,.bridge p{opacity:1!important;transform:none!important;filter:none!important}
  .sheet,.bub,.tick,.gobtn{animation:none!important}
  .ring.joggle{animation:none}
}

@media(min-width:760px){
  :root{--pad:34px}
  .db{display:inline}
  .localnav nav{display:flex}
  .ask{grid-template-columns:1fr 320px;gap:52px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .tile.wide{grid-column:span 1}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .fcols{grid-template-columns:2fr 1fr 1fr}
  .f{grid-template-columns:1fr 1fr}
  .f .full,.f .btn,.f .fine,.f .err{grid-column:1/-1}
  .bar{display:none}
  footer{padding-bottom:64px}
  .mk{bottom:16px}
  .chipbar{bottom:22px}
  .roles{justify-content:center}
  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Belt and braces: the mobile action bar must never reach desktop. (The original cause was a
   stray closing brace after the reduced-motion block, which swallowed the entire 760px block.) */
@media(min-width:760px){.bar{display:none}}

/* ---------- the way it is now, card by card (ACT 3b) ---------- */
.prove{position:relative;padding-block:clamp(8px,2vw,24px) clamp(48px,7vw,90px)}
.prail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 24px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prail::-webkit-scrollbar{display:none}
.pcard{position:relative;scroll-snap-align:center;flex:0 0 min(88vw,1080px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.pcopy{position:relative;z-index:2;padding:24px 20px 16px}
.peyebrow{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--blue);margin:0 0 8px}
.pcard h3{font-size:clamp(24px,3.1vw,36px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
.pbody{color:var(--dim);font-size:clamp(15px,1.45vw,17px);line-height:1.45;margin:0}
/* phone first: the screen sits under the copy */
.pstage{position:relative;height:300px;margin:0 16px;overflow:hidden}
.pwin{position:absolute;inset:0 0 -2px 0;border:1px solid var(--line2);border-bottom:0;border-radius:14px 14px 0 0;
  overflow:hidden;background:#f5f7fa;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.pbar{height:24px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#e8ecf1;border-bottom:1px solid #d5dce4}
.pbar i{width:9px;height:9px;border-radius:99px;background:#c2cbd5}
.pview{position:absolute;inset:24px 0 0 0;overflow:hidden}
/* cover-crops the capture; --ox keeps the part that matters in view when the window is narrower than the screen */
.pview img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--ox,0%) 0%;display:block;
  transform-origin:var(--fx,50%) var(--fy,35%);transform:scale(1);transition:transform .9s ease}
.pcard.play .pview img{transform:scale(var(--zoom,1.16));transition:transform 6.2s cubic-bezier(.3,.1,.25,1) .5s}
.pcard[data-mode="crm"].play .pview img{animation:pcrm 7s cubic-bezier(.45,.05,.3,1) .3s both;transition:none}
@keyframes pcrm{0%{transform-origin:14% 10%;transform:scale(1)}22%{transform-origin:14% 10%;transform:scale(1.55)}
  45%{transform-origin:14% 10%;transform:scale(1.55)}100%{transform-origin:92% 42%;transform:scale(1.32)}}
.pstage-phone{height:340px;overflow:hidden}
.pphone{position:absolute;left:50%;top:16px;transform:translateX(-50%)}
.pphone .dphone{--pw:250px}
.pcard.play .pphone .device{animation:floaty 7s ease-in-out infinite}
.pproof{list-style:none;margin:16px 16px 22px;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pproof li{background:var(--raised);color:var(--ink);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;
  font-size:14.5px;line-height:1.3}
.pproof li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--blue);
  margin-right:9px;vertical-align:middle;position:relative;top:-1px}
/* desktop: copy and proof points on the left against the dark card, the screen on the right running off the edge */
@media(min-width:700px){
  .pcard{min-height:clamp(600px,56vw,650px)}
  .pcopy{padding:36px 38px 0;max-width:47%}
  .pstage{position:absolute;right:0;bottom:0;width:52%;height:min(540px,84%);margin:0;overflow:visible}
  .pwin{inset:0 -40px -2px 0}
  .pstage-phone{top:0;height:auto}
  .pphone{top:40px;left:46%}
  .pphone .dphone{--pw:clamp(270px,27vw,315px)}
  .pproof{position:absolute;left:38px;bottom:38px;z-index:3;margin:0;max-width:44%}
  .pproof li{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
  .pcard.play .pproof li{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
  .pcard.play .pproof li:nth-child(1){transition-delay:1.5s}
  .pcard.play .pproof li:nth-child(2){transition-delay:2.8s}
  .pcard.play .pproof li:nth-child(3){transition-delay:4.1s}
}
.pctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}
.pdots{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:12px 16px}
.pdot{width:8px;height:8px;border-radius:999px;background:var(--line2);position:relative;overflow:hidden;
  border:0;padding:0;cursor:pointer;transition:width .35s ease}
.pdot.on{width:44px}
.pdot.on::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;
  animation:pfill var(--pdur,7600ms) linear forwards}
.prove.paused .pdot.on::after{animation-play-state:paused}
@keyframes pfill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .pview img,.pcard.play .pview img{transform:none!important;animation:none!important;transition:none!important}
  .pproof li{opacity:1!important;transform:none!important;transition:none!important}
  .pcard.play .pphone .device{animation:none}
  .pdot.on::after{animation:none;transform:scaleX(1)}
}

/* ACT 3b on a phone: Apple's grammar — one short caption, one visual, air. The paragraph and
   the eyebrow hide; the three proof points become one quiet line that cycles at the foot of the card. */
@media(max-width:699px){
  .pcard{flex-basis:84vw;height:min(580px,76vh);min-height:0;text-align:center}
  .peyebrow,.pbody{display:none}
  .pcopy{padding:28px 22px 0}
  .pcard h3{font-size:clamp(20px,5.6vw,23px);line-height:1.25;font-weight:600;margin:0;text-wrap:balance}
  .pstage{position:absolute;left:20px;right:20px;top:50%;height:clamp(210px,58vw,250px);margin:0;transform:translateY(-44%)}
  .pwin{border-radius:12px;border-bottom:1px solid var(--line2);inset:0}
  .pbar{height:16px;padding:0 9px;gap:4px}.pbar i{width:6px;height:6px}
  .pview{inset:16px 0 0 0}
  .pcard.play .pview img,.pcard[data-mode="crm"].play .pview img{transform:none;animation:none}
  .pstage-phone{top:104px;bottom:0;height:auto;transform:none;left:0;right:0}
  .pphone{top:0}
  .pphone .dphone{--pw:min(200px,50vw)}
  .pproof{position:absolute;left:18px;right:18px;bottom:16px;height:44px;margin:0;z-index:4}
  .pproof li{position:absolute;left:0;right:0;bottom:0;background:none;border:0;padding:0;font-size:14px;color:var(--dim);
    text-align:center;opacity:0;transform:none;transition:none}
  .pproof li::before{display:none}
  .pcard[data-mode="phone"] .pproof{background:linear-gradient(transparent,var(--surface) 38%);bottom:0;height:72px;padding-bottom:16px}
  .pcard[data-mode="phone"] .pproof li{bottom:16px}
  .pcard.play .pproof li{animation:pline 7.6s ease both}
  .pcard.play .pproof li:nth-child(1){animation-delay:.3s}
  .pcard.play .pproof li:nth-child(2){animation-delay:2.7s}
  .pcard.play .pproof li:nth-child(3){animation-delay:5.1s}
  @keyframes pline{0%{opacity:0}5%{opacity:1}28%{opacity:1}33%{opacity:0}100%{opacity:0}}
  #chipbar.muted{opacity:0!important;visibility:hidden;pointer-events:none}
}
@media(max-width:699px) and (prefers-reduced-motion:reduce){
  .pproof li{animation:none!important;opacity:0!important}
  .pproof li:first-child{opacity:1!important}
}

#chipbar.muted{opacity:0!important;visibility:hidden;pointer-events:none!important}
/* phone: a taller window and a still zoom onto the part of the screen that proves the card */
@media(max-width:699px){
  .pstage{height:clamp(250px,74vw,300px)}
  .pview img,.pcard.play .pview img{transform:scale(var(--mzoom,1.7));transform-origin:var(--fx,50%) var(--fy,35%)}
  .pcard[data-mode="crm"] .pview img,.pcard[data-mode="crm"].play .pview img{transform-origin:10% 8%;transform:scale(1.9)}
}
@media(max-width:699px){
  .pcard[data-mode="crm"] .pview img,.pcard[data-mode="crm"].play .pview img{object-position:0% 0%;transform-origin:0% 6%;transform:scale(1.75)}
}

/* ACT 3 + 3b as ONE section: no full-screen height, the cards follow the copy closely, and one soft
   glow runs from behind the headline down behind the cards so the eye reads them as one piece. */
.bleed.nowsec{min-height:0;display:block;padding-block:clamp(64px,10vw,120px) clamp(40px,6vw,76px)}
.nowsec .inner{margin:0 auto}
.nowsec .bg img{display:none}
.nowsec .bg{background:
  radial-gradient(55% 38% at 50% 14%,rgba(28,167,236,.17),transparent 72%),
  radial-gradient(75% 50% at 50% 70%,rgba(28,167,236,.07),transparent 78%)}
.nowsec .bg::after{display:none}
.nowsec .prove{position:relative;z-index:1;margin-top:clamp(28px,4vw,48px);padding-block:0;text-align:left}
/* start and end with a card centred under the headline */
.nowsec .prail{padding-inline:max(var(--pad),calc((100vw - min(88vw,1080px)) / 2))}
@media(max-width:699px){
  .bleed.nowsec{padding-block:56px 36px}
  .nowsec .prail{padding-inline:8vw}
}

/* ---------- ACT 3c: the Grow Your Camp podcast banner ----------
   A coloured band (not black) so it reads as its own moment; video left, story + where to listen right. */
.podband{position:relative;padding-block:clamp(56px,8vw,96px);
  background:radial-gradient(70% 90% at 15% 50%,rgba(28,167,236,.22),transparent 70%),
             linear-gradient(135deg,#0B2536 0%,#0F3450 55%,#0B2A3E 100%);
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.podgrid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.yt:hover img{transform:scale(1.02);filter:brightness(.92)}
.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:52px;border-radius:14px;
  background:#FF0000;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.yt .play svg{width:28px;height:28px;fill:#fff}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.podcopy{text-align:center}
.podcopy .kick{color:#7FD3FF}
.podcopy .sub{margin-left:auto;margin-right:auto;max-width:46ch}
.podlead{color:var(--ink);margin:18px 0 0;font-size:16px}
.podlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.podlink{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--ink);
  font-family:var(--disp);font-weight:600;font-size:14.5px;transition:background .15s,border-color .15s}
.podlink:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.podlink .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.podlink .ico svg{width:21px;height:21px}
.podlink .ap{background:linear-gradient(180deg,#F452FF,#832BC1)}.podlink .ap svg{fill:#fff}
.podlink .sp{background:#000}.podlink .sp svg{fill:#1ED760}
.podlink .yt-ico{background:#fff}.podlink .yt-ico svg{fill:#FF0000}
.podfoot{color:var(--muted);font-size:13.5px;margin:18px auto 0;max-width:52ch}
.podfoot a{color:#7FD3FF;margin-left:4px}
@media(min-width:900px){
  .podgrid{grid-template-columns:1.15fr 1fr}
  .podcopy{text-align:left}
  .podcopy .sub{margin-left:0}
  .podlinks{justify-content:flex-start}
  .podfoot{margin-left:0}
}
.dept[data-dept="maintenance"] .deptbg{background-image:url('img/dept-maintenance.jpg');background-size:cover;background-position:center 45%}
.dept[data-dept="housekeeping"] .deptbg{background-image:url('img/dept-housekeeping.jpg');background-size:cover;background-position:62% center}
.dept[data-dept="scheduling"] .deptbg{background-image:url('img/dept-scheduling.jpg');background-size:cover;background-position:center 35%}
.dept[data-dept="groups"] .deptbg{background-image:url('img/dept-groups.jpg');background-size:cover;background-position:center 40%}
.dept[data-dept="leadership"] .deptbg{background-image:url('img/dept-leadership.jpg');background-size:cover;background-position:66% 55%}

/* ---------- ACT 4 + 5 as one scroll: the brain line, the bridge, then the phone ---------- */
.beat{position:absolute;inset:0;z-index:14;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--pad);pointer-events:none;opacity:var(--bo,0)}
.brain .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 16px}
.brain h2{font-size:clamp(36px,7vw,72px);max-width:13ch;line-height:1.04}
.brain .w{display:inline-block;opacity:var(--w,0);
  transform:translateY(calc((1 - var(--w,0)) * 22px));filter:blur(calc((1 - var(--w,0)) * 8px))}
.brain .bsub{opacity:var(--s,0);transform:translateY(calc((1 - var(--s,0)) * 14px))}
.bridge p{font-family:var(--disp);font-weight:700;font-size:clamp(34px,6.6vw,64px);line-height:1.08;letter-spacing:-.025em;margin:0}
.bridge .b1{color:var(--dim);opacity:var(--b1,0);transform:translateY(calc((1 - var(--b1,0)) * 18px))}
.bridge .b2{color:#fff;margin-top:.12em;opacity:var(--b2,0);transform:translateY(calc((1 - var(--b2,0)) * 18px))}

/* the pill's border that grows into the call card's border (the default handover) */
.ringframe{position:absolute;left:0;top:0;z-index:11;pointer-events:none;box-sizing:border-box;
  width:var(--gw,0px);height:var(--gh,0px);transform:translate(var(--gx,0px),var(--gy,0px));
  border:1px solid rgba(28,167,236,.5);border-radius:var(--gr,999px);background:rgba(9,14,20,var(--fbg,.94));
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 6px rgba(28,167,236,.07);opacity:var(--fop,0)}
.ring.bare{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.ringframe{display:none}}

/* the call card's callouts: curves draw out from the card to six labels either side of the phone */
.callsvg{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;overflow:visible}
.callsvg .cl{fill:none;stroke:#7FD3FF;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.callsvg .cd{fill:#7FD3FF;stroke:#04121C;stroke-width:2;opacity:0}
.callouts{position:absolute;inset:0;z-index:9;pointer-events:none}
.co{position:absolute;margin:0;max-width:250px;font-family:var(--disp);font-weight:600;font-size:clamp(14px,1.15vw,17px);
  line-height:1.3;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.75);opacity:0;transform:translateY(calc(-50% + var(--ty,0px)))}
.co[data-side="l"]{text-align:right}
@media(max-width:899px){
  .callsvg{display:none}
  .co{left:50%!important;right:auto!important;bottom:auto;transform:translateX(-50%);text-align:center!important;
    width:min(86vw,360px);max-width:none;background:rgba(9,14,20,.85);border:1px solid rgba(28,167,236,.35);border-radius:12px;padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){
  .callsvg{display:none}
  .callouts{position:relative;inset:auto;display:grid;gap:8px;margin-top:24px}
  .co{position:static;opacity:1!important;transform:none;text-align:center!important;max-width:none}
}

/* ACT 5b: "Why only The One App can do this" stays closed until someone asks */
.whysec{padding-block:clamp(28px,4vw,48px)}
.whysec .why{border:0;background:none;padding:0;text-align:center;max-width:860px;margin:0 auto}
.whybtn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;
  border:1px solid rgba(28,167,236,.45);background:rgba(28,167,236,.08);color:var(--ink);
  font-family:var(--disp);font-weight:600;font-size:16px;transition:background .2s,border-color .2s}
.whybtn:hover{background:rgba(28,167,236,.16);border-color:rgba(28,167,236,.7)}
.whybtn .chev{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease}
.why.open .whybtn .chev{transform:rotate(180deg)}
.whybody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.3,.1,.25,1)}
.why.open .whybody{grid-template-rows:1fr}
.whyinner{overflow:hidden;text-align:left}
.whyinner > :first-child{margin-top:28px}
.whyinner{border-radius:24px}
.why.open .whyinner{border:1px solid rgba(28,167,236,.34);padding:6px clamp(20px,4vw,40px) 30px;margin-top:22px;
  background:radial-gradient(90% 70% at 0% 0%,rgba(28,167,236,.10),transparent 60%),var(--surface)}
@media(prefers-reduced-motion:reduce){.whybody,.whybtn .chev{transition:none}}
.whyinner{min-height:0}

/* the "Why only" button closes the call section: the forest carries on below the phone, mirrored so
   its top edge meets the stage's bottom edge exactly, then fades to black */
.dolly .whysec{position:relative;overflow:hidden;padding-block:clamp(24px,4vh,44px) clamp(56px,8vw,96px);background:#000}
.dolly .whysec::before{content:"";position:absolute;left:0;right:0;top:0;height:100vh;z-index:0;pointer-events:none;
  background-image:url('img/forest-blur.jpg');background-size:cover;background-position:center 42%;transform:scaleY(-1)}
.dolly .whysec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,9,14,.74) 0%,rgba(0,0,0,.9) 70%,#000 100%)}
.dolly .whysec .wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.dolly .whysec::before,.dolly .whysec::after{display:none}}

/* ================= ACT 6: another example — Build my week =================
   Left: the story in four steps, lit in sync. Right: a laptop, cut by the right edge, whose screen
   is a faithful recreation of the Scheduling screen at a fixed 1180x740 design size, scaled to fit. */
.bw{position:relative;overflow:hidden;background:#000;padding-block:clamp(64px,9vw,120px)}
.bwgrid{display:grid;gap:clamp(28px,4vw,44px);padding-inline:var(--pad)}
.bwcopy h2{font-size:clamp(30px,3.7vw,50px);margin-top:4px}
.bwcopy .sub{margin:16px 0 0;max-width:44ch}
.bwsteps{list-style:none;margin:26px 0 0;padding:0;counter-reset:s;display:grid;gap:4px}
.bwsteps li{counter-increment:s;position:relative;padding:12px 14px 12px 54px;border-radius:14px;cursor:pointer;
  opacity:.5;transition:background .45s,opacity .45s}
.bwsteps li::before{content:counter(s);position:absolute;left:14px;top:11px;width:28px;height:28px;border-radius:99px;
  border:1.5px solid var(--line2);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13px;
  color:var(--dim);transition:background .45s,border-color .45s,color .45s}
.bwsteps li b{display:block;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink);line-height:1.5}
.bwsteps li span{display:block;font-size:14.5px;color:var(--dim);line-height:1.45;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s ease,opacity .45s ease,margin .45s}
.bwsteps li.on{opacity:1;background:rgba(28,167,236,.09)}
.bwsteps li.on::before{background:var(--blue);border-color:var(--blue);color:#04121C}
.bwsteps li.on span{max-height:96px;opacity:1;margin-top:3px}
.bwlap{position:relative}
.lap{position:relative;width:100%}
.lid{position:relative;background:#0c0e12;border-radius:clamp(14px,2vw,26px) clamp(14px,2vw,26px) 0 0;padding:2.1% 2.1% 3%;
  box-shadow:0 0 0 1.5px #2b3038,0 60px 140px -40px rgba(28,167,236,.30)}
.lid .cam{position:absolute;top:.8%;left:50%;width:7px;height:7px;border-radius:99px;background:#1d232b;transform:translateX(-50%)}
.scr{position:relative;aspect-ratio:1180/740;overflow:hidden;border-radius:4px;background:#f5f7fa}
.base{position:relative;height:clamp(10px,1.5vw,20px);margin:0 -5%;background:linear-gradient(180deg,#454b54,#1b1e23);border-radius:0 0 20px 20px}
.base i{position:absolute;left:50%;top:0;width:14%;height:45%;transform:translateX(-50%);background:#121418;border-radius:0 0 10px 10px}
@media(min-width:1000px){
  .bwgrid{grid-template-columns:minmax(330px,27%) 1fr;align-items:center;padding-right:0;
    padding-left:max(var(--pad),calc((100vw - 1400px) / 2))}
  .bwlap{margin-right:-16%}
}

/* the recreated app — design pixels, scaled by JS */
.cv{position:absolute;left:0;top:0;width:1180px;height:740px;transform-origin:0 0;background:#f5f7fa;color:#111827;
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.35;text-align:left}
.bapp{display:flex;height:100%}
.brail{width:60px;flex:none;background:#1f2937;display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:14px}
.rlogo{width:38px;height:38px;border-radius:10px;background:radial-gradient(circle at 50% 55%,#c98a12 0 38%,#fff 40%)}
.ric{width:24px;height:24px;border-radius:7px;border:2px solid #9ca3af;opacity:.65}
.ric.on{width:40px;height:40px;background:#f97316;border-color:#f97316;opacity:1}
.bmain{position:relative;flex:1;min-width:0;padding:20px 22px;overflow:hidden}
.bhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.bh1{font-family:Poppins,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.01em}
.bsub{color:#6b7280;font-size:13.5px;margin-top:1px}
.bctl{display:flex;gap:9px;align-items:center;flex:none}
.bweek{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 11px;font-weight:600;font-size:13.5px}
.bstatus{background:#fef3c7;color:#92400e;border-radius:99px;padding:5px 11px;font-size:12px;font-weight:600;transition:background .4s,color .4s}
.bstatus.pub{background:#dcfce7;color:#166534}
.bbtn{display:inline-flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;border-radius:10px;
  padding:9px 15px;font-weight:700;font-size:14px;transition:transform .12s,filter .12s;white-space:nowrap}
.bbtn.ghost{background:#fff;color:#111827;border:1px solid #d1d5db}
.bbtn.press{transform:scale(.94);filter:brightness(.88)}
.btabs{display:flex;gap:24px;margin:16px 0 12px;border-bottom:1px solid #e5e7eb;font-size:14px;color:#4b5563}
.btabs b{color:#2563eb;border-bottom:2px solid #2563eb;padding-bottom:8px;font-weight:600}
.btabs i{font-style:normal;background:#fee2e2;color:#b91c1c;border-radius:99px;padding:1px 7px;font-size:11px;font-weight:700;transition:background .4s,color .4s}
.btabs i.low{background:#fef3c7;color:#92400e}
.bbody{display:flex;gap:14px}
.bboard{flex:1;min-width:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.bgridhead,.brow{display:grid;grid-template-columns:186px repeat(5,minmax(0,1fr)) 72px}
.bgridhead{border-bottom:1px solid #e5e7eb;background:#fafafa}
.bwh{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7280;padding:12px 11px}
.bday{padding:7px 7px;display:flex;flex-direction:column;font-size:11px;color:#6b7280;line-height:1.25}
.bday b{color:#374151;font-size:11px}
.bday em{font-style:normal;font-weight:700;font-size:11px;transition:color .4s}
.bday em.cov{color:#16a34a}.bday em.short{color:#dc2626}
.bsec{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;padding:6px 11px;background:#f9fafb;border-bottom:1px solid #f1f5f9}
.brow{border-bottom:1px solid #f1f5f9;min-height:60px}
.bwho{display:flex;gap:8px;align-items:flex-start;padding:8px 9px}
.bav{width:27px;height:27px;border-radius:99px;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:none}
.bname{font-weight:600;font-size:13.5px;line-height:1.2}
.bcert{font-size:10.5px;color:#9ca3af;line-height:1.3;margin-top:2px;border-radius:5px;transition:box-shadow .35s,background .35s}
.bcert.bad{color:#b45309}.bcert.ok{color:#15803d}
.bcell{padding:5px 4px;border-left:1px solid #f3f4f6;min-width:0}
.bchip{border-left:3px solid #f97316;background:#f9fafb;border-radius:5px;padding:3px 5px;font-size:10px;line-height:1.22;margin-bottom:3px;overflow:hidden}
.bchip b{display:block;font-size:11px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bchip .bt,.bchip .bp{display:block;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bchip.bnew{border-left-color:#2563eb;background:#eff6ff;opacity:0;transform:scale(.6);
  transition:opacity .35s ease,transform .55s cubic-bezier(.3,1.6,.5,1),box-shadow 1.2s ease}
.bchip.bnew.in{opacity:1;transform:none;box-shadow:0 0 0 2px rgba(37,99,235,.45)}
.bchip.bnew.settled{box-shadow:0 0 0 0 rgba(37,99,235,0)}
.bhours{padding:9px 7px;font-size:12.5px;font-weight:700}
.bht{color:#9ca3af;font-weight:500;font-size:10.5px}
.bbar{display:block;height:4px;background:#e5e7eb;border-radius:9px;margin-top:5px;overflow:hidden}
.bbar i{display:block;height:100%;width:var(--b);background:#16a34a;transition:width .9s ease}
.cv.applied .bbar i{width:var(--a)}
.bside{width:236px;flex:none;display:flex;flex-direction:column;gap:12px}
.bcard{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:11px;transition:box-shadow .35s}
.bct{font-weight:700;font-size:13.5px}.bcs{font-size:11px;color:#9ca3af;margin:1px 0 8px}
.bun{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:6px 8px;margin-bottom:6px;font-size:10.5px;color:#7f1d1d;
  line-height:1.3;max-height:84px;overflow:hidden;transition:opacity .4s,max-height .5s,margin .5s,padding .5s,box-shadow .35s}
.bun b{display:block;color:#b91c1c;font-size:10.5px}
.bun.gone{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
.bkv{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#6b7280;margin-top:6px}.bkv b{color:#111827;text-align:right}
.bmodal{position:absolute;inset:0;background:rgba(17,24,39,.42);display:flex;align-items:flex-start;justify-content:center;padding-top:22px;
  opacity:0;pointer-events:none;transition:opacity .3s}
.bmodal.on{opacity:1}
.bmbox{width:640px;background:#fff;border-radius:16px;padding:18px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(12px);transition:transform .35s}
.bmodal.on .bmbox{transform:none}
.bmodal.sm{align-items:center;padding-top:0}.bmodal.sm .bmbox{width:480px}
.mh{font-family:Poppins,sans-serif;font-weight:700;font-size:19px}
.mp{color:#6b7280;font-size:12.5px;margin:4px 0 8px;line-height:1.45}
.mcap{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin:9px 0 4px}
.mcap.ok{color:#16a34a}.mcap.bad{color:#b91c1c}
.mpl{display:grid;grid-template-columns:132px 136px 96px 1fr;gap:6px;font-size:12px;padding:3px 6px;border-radius:6px;
  opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s,box-shadow .35s,background .35s}
.mpl.in{opacity:1;transform:none}
.md{color:#6b7280}
.missue{border-radius:8px;padding:6px 10px;font-size:11.5px;margin:4px 0;line-height:1.4;opacity:0;transition:opacity .35s,box-shadow .35s}
.missue.in{opacity:1}
.missue.bad{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d}
.missue.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.mhr{display:flex;gap:8px;font-size:11.5px;padding:1px 0;opacity:0;transition:opacity .3s}.mhr.in{opacity:1}
.mhr span{min-width:128px}.mhr em{font-style:normal;color:#9ca3af}
.mbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.cv .hl{box-shadow:0 0 0 3px rgba(28,167,236,.65)!important;background-color:rgba(28,167,236,.10)!important}

/* annotations, cursor and the phone notification sit OVER the scaled screen, at readable sizes */
.bwtags{position:absolute;inset:0;pointer-events:none;z-index:5}
.bwtags .tag{position:absolute;left:0;top:0;margin:0;max-width:240px;background:#0b1219;color:#fff;border:1px solid rgba(28,167,236,.65);
  border-radius:10px;padding:8px 11px;font-family:var(--disp);font-weight:600;font-size:clamp(11.5px,1vw,13.5px);line-height:1.3;
  box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transition:opacity .35s}
.bwtags .tag.on{opacity:1}
.bwtags .tag::before{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:99px;background:var(--blue);
  box-shadow:0 0 0 4px rgba(28,167,236,.28);transform:translateY(-50%)}
.bwtags .tag[data-side="r"]::before{left:-17px}.bwtags .tag[data-side="l"]::before{right:-17px}
.bwcur{position:absolute;left:0;top:0;width:24px;height:24px;z-index:6;pointer-events:none;will-change:transform}
.bwcur svg{width:24px;height:24px;fill:#fff;stroke:#111827;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.bwcur .ring{position:absolute;left:-12px;top:-13px;width:28px;height:28px;border-radius:99px;border:3px solid rgba(28,167,236,.95);opacity:0}
.bwcur.click .ring{animation:bwripple .55s ease-out}
@keyframes bwripple{0%{opacity:1;transform:scale(.25)}100%{opacity:0;transform:scale(1.9)}}
.bwnote{position:absolute;left:-3%;bottom:9%;width:min(300px,62%);z-index:8;background:rgba(242,247,252,.97);color:#111827;
  border-radius:18px;padding:11px 14px 12px;box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .45s,transform .55s cubic-bezier(.3,1.4,.5,1)}
.bwnote.on{opacity:1;transform:none}
.bwnote .nh{display:flex;align-items:center;gap:7px;font-size:11px;color:#6b7280;font-weight:600}
.bwnote .nh i{width:18px;height:18px;border-radius:5px;background:var(--grad)}.bwnote .nh span{margin-left:auto;font-weight:500}
.bwnote b{display:block;font-family:var(--disp);font-size:14.5px;margin-top:5px}
.bwnote>span{display:block;font-size:12.5px;color:#374151}
.bwnote em{display:block;font-style:normal;font-size:10.5px;color:#9ca3af;margin-top:4px}
@media(max-width:999px){ .bwnote{left:4%;bottom:auto;top:calc(100% - 4px);width:min(300px,88%)} .bwlap{margin-bottom:70px} }
@media(prefers-reduced-motion:reduce){
  .bwsteps li{opacity:1}.bwsteps li span{max-height:none;opacity:1}
  .bwcur{display:none}
}
/* ACT 6 on phones: headline, then the laptop, then the steps — so the screen and its step are seen together */
@media(max-width:999px){
  .bwcopy{display:contents}
  .bwgrid{display:flex;flex-direction:column;gap:18px}
  .bwcopy .bwlead{order:1}
  .bwcopy .sub{order:2;margin-top:0}
  .bwlap{order:3;margin-top:8px}
  .bwsteps{order:4;margin-top:6px}
  .bwtags .tag{max-width:170px;font-size:11px;padding:6px 9px}
}
.bwcap{display:none}
@media(max-width:999px){
  .bwtags{display:none}
  .bwcap{display:block;min-height:42px;margin:14px 8px 0;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.35;
    color:#fff;text-align:center;opacity:0;transition:opacity .3s}
  .bwcap.on{opacity:1}
  .bwcap::before{content:"";display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--blue);margin-right:8px;vertical-align:middle;
    box-shadow:0 0 0 4px rgba(28,167,236,.25)}
}

/* ACT 6 opener, matching the phone section's: blue kicker, big centred line */
.bwhead{text-align:center;padding-inline:var(--pad);margin:0 auto clamp(30px,4.5vw,60px);max-width:900px}
.bwhead .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 10px}
.bwhead h2{font-size:clamp(30px,5vw,56px)}
.bwlead{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0}
/* the copy sits at the top of its column, and the steps keep the room of their tallest open state,
   so opening a step never moves anything above or beside it */
@media(min-width:1000px){ .bwgrid{align-items:start} .bwlap{margin-top:6px} }
/* entrance: heading, then the words, then the laptop slides in from the right */
.bw .bwhead,.bw .bwlead,.bw .bwcopy .sub,.bw .bwsteps{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.bw .bwlap{opacity:0;transform:translateX(14%);transition:opacity 1s ease .45s,transform 1.25s cubic-bezier(.2,.75,.2,1) .45s}
.bw.in .bwhead,.bw.in .bwlead,.bw.in .bwcopy .sub,.bw.in .bwsteps,.bw.in .bwlap{opacity:1;transform:none}
.bw.in .bwlead{transition-delay:.2s}.bw.in .bwcopy .sub{transition-delay:.32s}.bw.in .bwsteps{transition-delay:.44s}
@media(prefers-reduced-motion:reduce){.bw .bwhead,.bw .bwlead,.bw .bwcopy .sub,.bw .bwsteps,.bw .bwlap{opacity:1;transform:none;transition:none}}
.bwsteps.measuring li,.bwsteps.measuring li span,.bwsteps.measuring li::before{transition:none!important}

/* ACT 7: what separate apps and spreadsheets cost */
.costsec h2{max-width:27ch;margin-inline:auto}
.costs{display:grid;gap:12px;margin:clamp(26px,4vw,40px) auto clamp(22px,3vw,34px);max-width:1080px}
@media(min-width:760px){.costs{grid-template-columns:repeat(3,1fr)}}
.cost{border:1px solid rgba(248,113,113,.35);background:linear-gradient(180deg,rgba(239,68,68,.12),rgba(239,68,68,.03));
  border-radius:18px;padding:18px 20px}
.cost b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:#FCA5A5;letter-spacing:-.01em}
.cost span{display:block;color:var(--dim);font-size:15px;margin-top:4px;line-height:1.45}
.card .costtags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.card .ct-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.card .ct{font-size:12px;font-weight:600;color:#FCA5A5;border:1px solid rgba(248,113,113,.45);background:rgba(239,68,68,.10);
  border-radius:99px;padding:2px 9px}
.card .lab.them{color:#F87171}

/* ================= ACT 8: Don't even open the app — Siri ================= */
.siri{position:relative;overflow:hidden;background:#000;padding-block:clamp(70px,10vw,130px)}
.siri::before{content:"";position:absolute;left:50%;top:38%;width:min(1100px,140vw);height:700px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(40% 45% at 62% 55%,rgba(164,91,255,.16),transparent 70%),radial-gradient(35% 40% at 70% 40%,rgba(54,209,255,.10),transparent 70%)}
.sirihead{position:relative;text-align:center;padding-inline:var(--pad);margin:0 auto clamp(34px,5vw,64px);max-width:860px}
.sirihead .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 10px}
.sirihead h2{font-size:clamp(34px,6vw,68px)}
.sirihead .sub{max-width:52ch}
.sirigrid{position:relative;display:grid;gap:clamp(30px,4vw,64px);padding-inline:var(--pad);max-width:1180px;margin:0 auto;align-items:center}
@media(min-width:960px){.sirigrid{grid-template-columns:1fr minmax(360px,420px)}}
.sirilead{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2vw,26px);margin:0 0 14px}
.siriqs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.siriqs li{cursor:pointer;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:rgba(255,255,255,.02);
  transition:border-color .35s,background .35s,transform .35s}
.siriqs li .qx{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.siriqs li b{display:block;font-family:var(--disp);font-weight:600;font-size:16.5px;color:var(--dim);margin-top:2px;transition:color .35s}
.siriqs li.on{border-color:rgba(164,91,255,.6);background:linear-gradient(90deg,rgba(164,91,255,.14),rgba(54,209,255,.06));transform:translateX(4px)}
.siriqs li.on b{color:#fff}
.siriqs li.on .qx{color:#C4B5FD}
.siritrust{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.siritrust li{font-size:14.5px;color:var(--dim);line-height:1.45;padding-left:22px;position:relative}
.siritrust li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:99px;background:var(--good)}
.siritrust b{color:var(--ink)}
.siristage{position:relative;display:grid;place-items:center;padding:20px 0}
.siriaura{position:absolute;inset:6% 4%;border-radius:40%;filter:blur(60px);opacity:.35;transition:opacity .8s;
  background:conic-gradient(from 0deg,#ff9a3c,#ff5ea8,#a45bff,#4f8cff,#36d1ff,#ff9a3c)}
.siristage.active .siriaura{opacity:.7}
.device.sp{--pw:min(370px,82vw)}
.sp .screen{aspect-ratio:1206/2622;background:#0b0d12;overflow:hidden;position:relative}
.sphome{position:absolute;inset:0;background:linear-gradient(160deg,#2a3a5f 0%,#3b2a55 45%,#12151d 100%)}
.spicons{position:absolute;inset:14% 9% auto 9%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 14px;filter:blur(1.5px)}
.spicons i{aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.22)}
.spicons i:nth-child(3n){background:rgba(28,167,236,.45)}.spicons i:nth-child(5n){background:rgba(255,154,60,.45)}
.spdim{position:absolute;inset:0;background:rgba(6,8,12,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.spstatus{position:absolute;top:3.1%;left:10%;right:9%;display:flex;justify-content:space-between;font:600 14px/1 -apple-system,BlinkMacSystemFont,Inter,sans-serif;color:#fff;z-index:4}
.spsig{width:42px;height:11px;background:linear-gradient(90deg,#fff 0 60%,transparent 60% 68%,#fff 68%);border-radius:3px;opacity:.9}
/* Siri's edge glow */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.spglow{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:7px;opacity:0;
  background:conic-gradient(from var(--ang),#ff9a3c,#ff5ea8,#a45bff,#4f8cff,#36d1ff,#ff9a3c);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(5px);transition:opacity .5s;animation:siriSpin 6s linear infinite}
.spglow.on{opacity:.9}.spglow.think{animation-duration:1.6s;opacity:1}.spglow.speak{animation-duration:3.5s}
@keyframes siriSpin{to{--ang:360deg}}
.spconv{position:absolute;left:6%;right:6%;top:13%;bottom:40%;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.bub{max-width:82%;padding:9px 13px;border-radius:18px;font:500 14px/1.3 -apple-system,BlinkMacSystemFont,Inter,sans-serif;
  opacity:0;transform:translateY(10px) scale(.97);transition:opacity .3s,transform .35s;display:none}
.bub.on{display:block;opacity:1;transform:none}
.bub.me{align-self:flex-end;background:#0a84ff;color:#fff;border-bottom-right-radius:6px}
.bub.siri{align-self:flex-start;background:rgba(255,255,255,.16);color:#fff;border-bottom-left-radius:6px}
.spthink{display:none;align-self:flex-start;gap:5px;padding:12px 14px;background:rgba(255,255,255,.12);border-radius:18px}
.spthink.on{display:flex}
.spthink i{width:7px;height:7px;border-radius:99px;background:#fff;opacity:.4;animation:spdot 1s infinite}
.spthink i:nth-child(2){animation-delay:.15s}.spthink i:nth-child(3){animation-delay:.3s}
@keyframes spdot{50%{opacity:1;transform:translateY(-3px)}}
.spans{display:none;background:rgba(245,247,250,.96);color:#111827;border-radius:22px;padding:13px 15px 14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:translateY(16px);opacity:0}
.spans.on{display:block;animation:spin .5s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes spin{to{transform:none;opacity:1}}
.sah{display:flex;align-items:center;gap:7px;font:600 11.5px/1 -apple-system,BlinkMacSystemFont,Inter,sans-serif;color:#6b7280;margin-bottom:8px}
.sai{width:20px;height:20px;border-radius:5px;background:var(--grad)}
.sah em{margin-left:auto;font-style:normal;color:#7c3aed}
.sabig{font-family:var(--disp);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.02em;color:#111827}
.satext{font:500 15px/1.35 -apple-system,BlinkMacSystemFont,Inter,sans-serif;margin-top:4px}
.sameta{font-size:12px;color:#6b7280;margin-top:6px}
.spinput{position:absolute;left:5%;right:5%;bottom:calc(31% + 10px);z-index:5;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:8px 12px;transition:bottom .45s cubic-bezier(.3,.8,.3,1)}
.sporb{width:22px;height:22px;border-radius:99px;flex:none;background:conic-gradient(#ff9a3c,#ff5ea8,#a45bff,#36d1ff,#ff9a3c);filter:saturate(1.2)}
.spfield{font:500 14px/1.2 -apple-system,BlinkMacSystemFont,Inter,sans-serif;color:#fff;min-height:17px;white-space:nowrap;overflow:hidden;position:relative;flex:1}
.spfield .caret{display:inline-block;width:2px;height:15px;background:#0a84ff;vertical-align:-2px;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.spfield .ph{position:absolute;left:0;top:0;color:rgba(255,255,255,.55)}.spfield .ph.hide{display:none}
.spkeys{position:absolute;left:0;right:0;bottom:0;height:31%;z-index:5;background:rgba(40,43,50,.92);padding:3% 1.5% 7%;display:flex;flex-direction:column;gap:6%;
  transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.spkeys.down{transform:translateY(102%)}
.sp .screen:has(.spkeys.down) .spinput{bottom:4%}
.kr{display:flex;justify-content:center;gap:1.4%;flex:1}
.kr i{flex:0 0 8.6%;border-radius:5px;background:rgba(255,255,255,.28);color:#fff;font:500 11px/1 -apple-system,BlinkMacSystemFont,sans-serif;
  display:grid;place-items:center;font-style:normal;transition:background .12s}
.kr i.hit{animation:keyhit .28s ease-out}
@keyframes keyhit{0%{background:rgba(255,255,255,.85);color:#111;transform:scale(1.12)}100%{background:rgba(255,255,255,.28);color:#fff;transform:none}}
.kr4 .wide{flex:0 0 18%;background:rgba(255,255,255,.14)}.kr4 .space{flex:0 0 52%}.kr4 .go{background:#0a84ff}
@media(max-width:959px){ .siristage{order:-1} }
/* entrance */
.siri .sirihead,.siri .siricopy{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}
.siri .siristage{opacity:0;transform:translateY(30px) scale(.97);transition:opacity 1s .3s,transform 1.1s cubic-bezier(.2,.75,.2,1) .3s}
.siri.in .sirihead,.siri.in .siricopy,.siri.in .siristage{opacity:1;transform:none}
.siri.in .siricopy{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){
  .siri .sirihead,.siri .siricopy,.siri .siristage{opacity:1;transform:none;transition:none}
  .spglow{animation:none}.spthink i,.caret{animation:none}
}

/* ACT 8: make it unmistakably an iPhone — titanium frame, iPhone corners, real buttons,
   Dynamic Island, iOS status bar, home indicator */
.device.sp{--pw:min(360px,80vw);overflow:visible;border:0;background:#000;padding:calc(var(--pw) * .032);
  border-radius:calc(var(--pw) * .18);
  box-shadow:0 0 0 calc(var(--pw) * .011) #8f9398,0 0 0 calc(var(--pw) * .016) #3c3f44,
    inset 0 0 0 1px rgba(255,255,255,.08),0 60px 110px rgba(0,0,0,.85)}
.device.sp::before{border-radius:inherit}
.sp .pill,.sp .glass{display:none}
.sp .screen{border-radius:calc(var(--pw) * .15)}
.sp .spglow{border-radius:calc(var(--pw) * .15)}
.sp .rail-l,.sp .rail-r{width:calc(var(--pw) * .012);background:linear-gradient(90deg,#6f7378,#b7bbc0 60%,#8a8e93);
  box-shadow:none;border-radius:3px}
.sp .rail-l{left:calc(var(--pw) * -.022)}.sp .rail-r{right:calc(var(--pw) * -.022)}
.sp .rail-l.a{top:15%;height:4.5%}.sp .rail-l.b{top:23%;height:8%}.sp .rail-l.c{top:33%;height:8%}.sp .rail-r.a{top:26%;height:12%}
.spisland{position:absolute;top:1.55%;left:50%;transform:translateX(-50%);width:33%;height:3.9%;border-radius:99px;background:#000;z-index:6}
.spstatus{top:2.05%;left:9%;right:8%;height:3%;align-items:center;font:600 15px/1 -apple-system,"SF Pro Text",BlinkMacSystemFont,Inter,sans-serif;letter-spacing:-.01em;z-index:5}
.sptime{padding-left:3%}
.spicons-r{display:flex;align-items:center;gap:5px;color:#fff}
.spicons-r svg{fill:currentColor;display:block}
.sb-sig{width:17px;height:11px}.sb-wifi{width:15px;height:11px}.sb-bat{width:25px;height:12px}
.spsig{display:none}
.sphomebar{position:absolute;left:50%;bottom:1.1%;transform:translateX(-50%);width:36%;height:.55%;min-height:4px;border-radius:99px;background:rgba(255,255,255,.85);z-index:7}
.sp .screen:has(.spkeys.down) .sphomebar{background:rgba(255,255,255,.85)}
.spkeys{padding-bottom:9%}
.siriintro{color:var(--dim);font-size:16px;line-height:1.5;margin:-6px 0 16px;max-width:52ch}

/* ACT 8 sub-section: widgets on the Home Screen and Lock Screen */
.siriwid{position:relative;max-width:1180px;margin:clamp(70px,9vw,120px) auto 0;padding-inline:var(--pad)}
.swhead{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,48px)}
.swhead .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 8px}
.swhead h3{font-size:clamp(26px,3.6vw,42px);line-height:1.1}
.swhead .sub{max-width:52ch}
.swphones{display:flex;justify-content:center;gap:clamp(28px,6vw,90px);flex-wrap:wrap}
.swp{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.swp figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.device.sp.wphone{--pw:min(300px,78vw)}
.wwall{position:absolute;inset:0;background:radial-gradient(90% 60% at 20% 10%,#ffb36b 0,transparent 55%),radial-gradient(80% 60% at 90% 40%,#8f6bff 0,transparent 60%),
  radial-gradient(90% 70% at 30% 100%,#2f9bd6 0,transparent 60%),#3a3f86}
.wwall.lockw{background:radial-gradient(80% 50% at 50% 0%,#5aa9e6 0,transparent 60%),radial-gradient(90% 70% at 50% 100%,#1f7a5a 0,transparent 60%),linear-gradient(#1b3b5a,#0f2a24)}
.wgridh{position:absolute;left:5.5%;right:5.5%;top:9%;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--pw) * .045);z-index:3}
.wdg{background:rgba(255,255,255,.93);color:#111827;border-radius:calc(var(--pw) * .075);padding:calc(var(--pw) * .04) calc(var(--pw) * .045);
  box-shadow:0 6px 18px rgba(0,0,0,.18);font-family:-apple-system,"SF Pro Text",BlinkMacSystemFont,Inter,sans-serif;position:relative;overflow:hidden;
  opacity:0;transform:scale(.9);transition:opacity .5s,transform .6s cubic-bezier(.2,1.3,.4,1)}
.siri.win .wdg{opacity:1;transform:none}
.siri.win .wdg:nth-child(2){transition-delay:.12s}.siri.win .wdg:nth-child(3){transition-delay:.24s}
.wdg.md{grid-column:1/-1}
.wdg.sm{aspect-ratio:1/1}
.wh{display:flex;align-items:center;gap:5px;font-size:calc(var(--pw) * .034);font-weight:600;color:#6b7280;margin-bottom:3px}
.wicon{width:calc(var(--pw) * .045);height:calc(var(--pw) * .045);border-radius:3px;background:var(--grad);flex:none}
.whl{font-weight:700;font-size:calc(var(--pw) * .085);line-height:1.05;letter-spacing:-.02em}
.whl small{font-size:calc(var(--pw) * .042);font-weight:600;color:#374151;letter-spacing:0}
.wsub{font-size:calc(var(--pw) * .036);color:#4b5563;margin-top:2px;line-height:1.25}
.wrows{display:flex;gap:10px;margin-top:6px;font-size:calc(var(--pw) * .035);color:#374151}
.wrows b{color:#6b7280;font-weight:600;margin-right:2px}
.wfoot{font-size:calc(var(--pw) * .031);color:#9ca3af;margin-top:5px}
.wrow{margin-top:5px;font-size:calc(var(--pw) * .034);line-height:1.2}
.wrow b{display:block;font-weight:600}.wrow em{font-style:normal;color:#b45309;font-size:calc(var(--pw) * .031);transition:color .3s}
.wrow em.done{color:#15803d}
.wbtn{position:absolute;left:calc(var(--pw) * .045);right:calc(var(--pw) * .045);bottom:calc(var(--pw) * .035);text-align:center;border-radius:99px;
  background:#0a84ff;color:#fff;font-size:calc(var(--pw) * .034);font-weight:600;padding:calc(var(--pw) * .014) 0;transition:transform .12s,background .3s}
.wbtn.tap{transform:scale(.92)}.wbtn.done{background:#34c759}
.wapps{position:absolute;left:8%;right:8%;top:62%;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--pw) * .07) calc(var(--pw) * .06);z-index:3}
.wapps i,.wdock i{aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.35);position:relative}
.wapps i.t1a{background:#0b1219 url('img/logo.png') center/78% no-repeat}
.wapps i.t1a span{position:absolute;left:50%;top:104%;transform:translateX(-50%);white-space:nowrap;font:500 calc(var(--pw) * .03)/1 -apple-system,Inter,sans-serif;color:#fff}
.wdock{position:absolute;left:5%;right:5%;bottom:3.2%;height:10.5%;border-radius:calc(var(--pw) * .09);background:rgba(255,255,255,.22);backdrop-filter:blur(10px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--pw) * .06);padding:0 calc(var(--pw) * .06);align-items:center;z-index:3}
.ldate{position:absolute;top:10%;left:0;right:0;text-align:center;font:600 calc(var(--pw) * .05)/1 -apple-system,Inter,sans-serif;color:rgba(255,255,255,.92);z-index:3}
.ltime{position:absolute;top:13.5%;left:0;right:0;text-align:center;font:700 calc(var(--pw) * .27)/1 -apple-system,"SF Pro Display",Inter,sans-serif;letter-spacing:-.02em;color:rgba(255,255,255,.95);z-index:3}
.lwids{position:absolute;top:33%;left:7%;right:7%;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--pw) * .035);z-index:3}
.lw{background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border-radius:calc(var(--pw) * .045);padding:calc(var(--pw) * .03) calc(var(--pw) * .035);color:#fff;
  font-family:-apple-system,Inter,sans-serif;opacity:0;transform:translateY(8px);transition:opacity .5s .3s,transform .6s .3s}
.siri.win .lw{opacity:1;transform:none}
.lw span{display:block;font-size:calc(var(--pw) * .03);opacity:.8}.lw b{display:block;font-size:calc(var(--pw) * .042);font-weight:600;line-height:1.15;margin-top:2px}
.lbtns{position:absolute;left:10%;right:10%;bottom:6%;display:flex;justify-content:space-between;z-index:3}
.lbtns i{width:calc(var(--pw) * .15);aspect-ratio:1;border-radius:99px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.swnote{text-align:center;color:var(--muted);font-size:14px;max-width:62ch;margin:26px auto 0}
@media(prefers-reduced-motion:reduce){.wdg,.lw{opacity:1;transform:none;transition:none}}
.wdg.sm{display:flex;flex-direction:column}
.wdg.sm .wh span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdg.sm .whl{font-size:calc(var(--pw) * .08)}
.wdg.sm .wrow{margin-top:3px}.wdg.sm .wrow em{display:none}
.wdg.sm .wbtn{position:relative;left:auto;right:auto;bottom:auto;z-index:2;display:block;margin-top:auto;flex:none;line-height:1.2}
.device.sp.wphone{--pw:min(320px,78vw)}

/* ================= ACT 9: Gizmos — no one at camp does just one job ================= */
.gz{position:relative;overflow:hidden;background:var(--ground);padding-block:clamp(70px,10vw,130px)}
.gzhead{text-align:center;max-width:860px;margin:0 auto clamp(34px,5vw,60px);padding-inline:var(--pad)}
.gzhead .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 10px}
.gzhead h2{font-size:clamp(32px,5.4vw,62px)}
.gzhead .sub{max-width:58ch}
.gzstage{position:relative;display:grid;gap:clamp(30px,5vw,80px);max-width:1180px;margin:0 auto;padding-inline:var(--pad);align-items:center}
@media(min-width:960px){.gzstage{grid-template-columns:minmax(0,1fr) auto}}
.gzdrawer{background:#fff;color:#111827;border-radius:26px;padding:22px 22px 18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}
@media(min-width:960px){.gzdrawer{min-width:0}}
.gzdh b{display:block;font-family:Poppins,sans-serif;font-size:24px;font-weight:700}
.gzdh span{font-size:13px;color:#6b7280}
.gzsearch{margin:12px 0 14px;background:#f3f4f6;border-radius:12px;padding:10px 14px;font-size:14px;color:#9ca3af}
.gzrows{display:grid;gap:10px}
@media(min-width:620px){.gzrows{grid-template-columns:1fr 1fr}}
.gzrow{display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;background:#fff;
  transition:transform .25s,box-shadow .25s,border-color .25s,opacity .3s}
.gzrow.grab{transform:scale(1.03);box-shadow:0 14px 30px rgba(0,0,0,.18);border-color:#93c5fd}
.gzico{width:34px;height:34px;border-radius:9px;flex:none}
.gzrt{min-width:0;flex:1}.gzrt b{display:block;font-size:14px;font-weight:600}
.gzrt span{display:block;font-size:11.5px;color:#6b7280;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gzadd{flex:none;background:#0ea5e9;color:#fff;font-size:12px;font-weight:700;border-radius:9px;padding:6px 10px;transition:background .3s}
.gzrow.added .gzadd{background:#22c55e}
.gzphonewrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.device.sp.gzphone{--pw:min(330px,80vw)}
.gzapp{position:absolute;inset:0;background:#f5f6f8;padding-top:13%;display:flex;flex-direction:column}
.gzbar{display:flex;align-items:center;gap:7px;padding:0 5%}
.gzlogo{width:30px;height:30px;border-radius:99px;background:#fff url('img/logo.png') center/80% no-repeat;box-shadow:0 0 0 1px #e5e7eb}
.gzready{font:600 11px/1 Inter,sans-serif;color:#6b7280;background:#fff;border:1px solid #e5e7eb;border-radius:99px;padding:5px 9px;margin-right:auto}
.gzplus{width:28px;height:28px;border-radius:8px;background:#0ea5e9;color:#fff;display:grid;place-items:center;font:700 18px/1 Inter,sans-serif}
.gzbell{width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid #e5e7eb}
.gzav{width:28px;height:28px;border-radius:99px;background:#f59e0b;color:#fff;display:grid;place-items:center;font:700 12px/1 Inter,sans-serif}
.gztabs{overflow:hidden;margin:10px 0 8px}
.gztrack{display:flex;gap:6px;padding-left:5%;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.gztab{flex:none;font:600 12px/1 Inter,sans-serif;color:#374151;background:#fff;border:1px solid #e5e7eb;border-radius:99px;padding:8px 11px;transition:background .4s,color .4s,border-color .4s}
.gztab i{font-style:normal;font-size:10px;background:#f3f4f6;color:#6b7280;border-radius:99px;padding:1px 6px;margin-left:3px}
.gztab.on{background:var(--c);border-color:var(--c);color:#fff}.gztab.on i{background:rgba(255,255,255,.25);color:#fff}
.gzboards{position:relative;flex:1}
.gzboard{position:absolute;inset:0 5%;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .45s}
.gzboard.on{opacity:1}
.gzc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06);visibility:hidden;opacity:0;transform:scale(.92);
  transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1)}
.gzc.in{visibility:visible;opacity:1;transform:none}
.gzh{display:flex;align-items:center;gap:7px;color:#fff;font:700 12.5px/1 Inter,sans-serif;padding:9px 11px}
.gzh i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.3);flex:none}
.gzh em{margin-left:auto;font-style:normal;opacity:.85;font-weight:600}
.gzb{padding:9px 11px 11px;font-family:Inter,sans-serif;color:#111827}
.gzbig{font-family:Poppins,sans-serif;font-weight:700;font-size:26px;line-height:1}.gzbig small{font-size:12px;font-weight:600;color:#4b5563;font-family:Inter,sans-serif}
.gzl{font-size:11.5px;color:#4b5563;margin-top:4px}.gzl b{color:#111827}
.gzr{display:flex;gap:8px;font-size:11.5px;padding:3px 0;border-top:1px solid #f3f4f6}.gzr:first-child{border-top:0}
.gzr b{min-width:52px;color:#111827}.gzr span{color:#4b5563}
.gzr.hot{background:#fff7ed;margin:0 -11px;padding:4px 11px}.gzr.hot b{color:#c2410c}
.gzwarn{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:8px;padding:6px 8px;font-size:11.5px;font-weight:600}
.gzcap{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--dim);margin:0}
.gzghost{position:absolute;left:0;top:0;z-index:20;pointer-events:none;border-radius:14px;overflow:hidden;background:#fff;opacity:0;
  box-shadow:0 30px 60px rgba(0,0,0,.45);transition:opacity .15s}
.gzghost.on{opacity:1}
.gzghost .gzh{height:100%;max-height:40px}
.gzfinger{position:absolute;left:0;top:0;z-index:21;width:34px;height:34px;border-radius:99px;pointer-events:none;
  background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:0;transition:opacity .25s,width .15s,height .15s}
.gzfinger.on{opacity:1}.gzfinger.press{background:rgba(28,167,236,.45);border-color:#fff}
.gzpoints{display:grid;gap:14px;max-width:1080px;margin:clamp(36px,5vw,60px) auto 0;padding-inline:var(--pad)}
@media(min-width:760px){.gzpoints{grid-template-columns:repeat(3,1fr)}}
.gzpoints div{border-top:2px solid var(--blue);padding-top:12px}
.gzpoints b{display:block;font-family:var(--disp);font-size:18px;color:var(--ink)}
.gzpoints span{display:block;color:var(--dim);font-size:15px;line-height:1.45;margin-top:4px}
@media(max-width:959px){ .gzrows{grid-template-columns:1fr 1fr;gap:8px} .gzrt span{display:none} .gzrow{padding:8px} .gzico{width:26px;height:26px} .gzrt b{font-size:12.5px} .gzadd{padding:5px 7px;font-size:11px} }
/* entrance */
.gz .gzhead,.gz .gzdrawer,.gz .gzpoints{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}
.gz .gzphonewrap{opacity:0;transform:translateX(40px);transition:opacity 1s .25s,transform 1.1s cubic-bezier(.2,.75,.2,1) .25s}
.gz.in .gzhead,.gz.in .gzdrawer,.gz.in .gzpoints,.gz.in .gzphonewrap{opacity:1;transform:none}
.gz.in .gzdrawer{transition-delay:.15s}.gz.in .gzpoints{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.gz .gzhead,.gz .gzdrawer,.gz .gzpoints,.gz .gzphonewrap{opacity:1;transform:none;transition:none}.gzc{visibility:visible;opacity:1;transform:none}}
.gzphone .spstatus{z-index:8;color:#111827}.gzphone .spicons-r{color:#111827}.gzphone .sphomebar{background:rgba(17,24,39,.8);z-index:8}
.gzrow{min-width:0}
@media(max-width:959px){
  .gzadd{font-size:0;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:8px}
  .gzadd::after{content:"+";font-size:17px;font-weight:700}
  .gzrow.added .gzadd::after{content:"\2713";font-size:13px}
  .gzdrawer{padding:16px 14px 14px}.gzdh b{font-size:20px}
}
@media(max-width:959px){ .gzrow{gap:6px;padding:8px 7px} .gzico{width:20px;height:20px;border-radius:6px} .gzrt b{font-size:12px} .gzadd{flex:none} }
@media(max-width:379px){ .gzrt b{font-size:11px} .gzdrawer{padding-inline:10px} }

/* ================= ACT 12: Stop being the person who chases — Automations ================= */
.au{position:relative;overflow:hidden;background:#000;padding-block:clamp(70px,10vw,130px)}
.au::before{content:"";position:absolute;left:50%;top:58%;width:min(1300px,160vw);height:760px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(40% 45% at 35% 50%,rgba(28,167,236,.13),transparent 70%),radial-gradient(30% 40% at 78% 55%,rgba(52,211,153,.10),transparent 70%)}
.auhd{position:relative;text-align:center;max-width:880px;margin:0 auto clamp(34px,5vw,64px);padding-inline:var(--pad)}
.auhd .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 10px}
.auhd h2{font-size:clamp(32px,5.4vw,62px)}
.auhd .sub{max-width:54ch;margin-inline:auto}
.auhd .sub.ink{color:var(--ink);max-width:48ch}
.augrid{position:relative;display:grid;gap:clamp(22px,3vw,40px);max-width:1360px;margin:0 auto;padding-inline:var(--pad);align-items:start}
@media(min-width:1000px){.augrid{grid-template-columns:1fr minmax(340px,380px)}}
.aulap{position:relative;min-width:0}
.aucap{margin:18px 0 0;text-align:center;color:var(--muted);font-size:14px}

/* the recreated builder — design pixels, scaled by JS (shares .cv/.bapp/.brail with ACT 6) */
.aumain{position:relative;flex:1;min-width:0;padding:16px 22px 0;overflow:hidden;background:#fff}
.auback{font-size:12.5px;font-weight:600;color:#4b5563}
.auhead{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.auh1{font-family:Poppins,sans-serif;font-weight:800;font-size:25px;color:#111827;display:flex;align-items:center;gap:12px}
.austatus{font-family:Inter,sans-serif;font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;background:#f3f4f6;color:#4b5563;transition:background .35s,color .35s}
.austatus.live{background:#dcfce7;color:#15803d}
.austatus.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:9px;background:#16a34a;margin-right:6px;vertical-align:middle}
.aubtns{display:flex;gap:8px}
.aub{border-radius:9px;padding:8px 16px;font-weight:600;font-size:14px;background:#1ca7ec;color:#fff;transition:transform .15s,background .3s}
.aub.ghost{background:#fff;color:#374151;border:1px solid #d1d5db}
.aub.press{transform:scale(.94);background:#178dc8}
.aub.done{background:#fff;color:#9ca3af;border:1px solid #e5e7eb}
.autabs{display:flex;gap:26px;border-bottom:1px solid #e5e7eb;margin-top:12px;font-size:14px;color:#6b7280;font-weight:500}
.autab{padding:8px 2px 9px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.autab.on{color:#178dc8;border-color:#1ca7ec}
.aubody{display:flex;gap:22px;margin-top:14px}
.aucol{width:330px;flex:none;display:flex;flex-direction:column;align-items:stretch}
.auwhen{border:1px solid #c5e8fa;background:linear-gradient(180deg,#e8f6fd,#f5fbff);border-radius:14px;padding:10px 14px 11px;box-shadow:0 1px 3px rgba(16,24,40,.08);transition:box-shadow .3s}
.auwh{font-size:11px;font-weight:700;letter-spacing:.08em;color:#178dc8;display:flex;align-items:center;gap:6px}
.auwh .bolt{width:9px;height:12px;background:#1ca7ec;clip-path:polygon(60% 0,0 58%,45% 58%,35% 100%,100% 40%,55% 40%)}
.auwempty{margin-top:6px;border:1.5px dashed #8fd4f5;border-radius:9px;padding:9px;text-align:center;font-size:13px;color:#178dc8;font-weight:600}
.auwset{display:none;margin-top:5px;font-size:13.5px;color:#1f2937;line-height:1.9}
.auchip{border:1px solid #c5e8fa;background:#fff;border-radius:99px;padding:2px 9px;color:#126fa0;font-weight:600;font-size:12.5px}
.auwnote{margin:6px 0 0;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:9px;padding:6px 10px;font-size:12px;line-height:1.45;color:#14532d}
.auwhen.set .auwempty{display:none}.auwhen.set .auwset{display:block}
.aulink{height:14px;display:flex;justify-content:center;opacity:0;transition:opacity .3s}
.aulink i{width:2px;background:#d1d5db;height:100%}
.aulink.in{opacity:1}
.aulink.add{opacity:1}
.aucard{position:relative;border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:7px 12px 8px;box-shadow:0 1px 2px rgba(16,24,40,.05);
  display:none;transition:border-color .3s,box-shadow .3s,background .3s}
.aucard.in{display:block;animation:auin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes auin{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.aucard.k-send{background:#f7fdf9}
.aucard b{font-size:13.5px;color:#111827;margin-left:6px}
.auline{display:block;font-size:12px;color:#6b7280;font-style:italic;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aukind{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-radius:99px;padding:2px 8px;vertical-align:1px}
.aukind.send{background:#15803d}.aukind.wait{background:#e18f00}.aukind.goal{background:#ec4899}.aukind.internal{background:#4b5563}
.aucard.sel,.auwhen.sel{border-color:#1ca7ec;box-shadow:0 0 0 3px rgba(28,167,236,.2)}
.aucard.fire{border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.22)}
.aucard.k-goal.fire{border-color:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.2)}
.aucard.k-internal.fire{border-color:#4b5563;box-shadow:0 0 0 4px rgba(75,85,99,.2)}
.aubadge{position:absolute;right:10px;top:8px;font-style:normal;font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;background:#e8f6fd;color:#126fa0;opacity:0;transition:opacity .3s}
.aubadge.on{opacity:1}
.aucard.k-goal .aubadge{background:#fce7f3;color:#be185d}
.auadd{align-self:center;width:24px;height:24px;border-radius:99px;border:1px solid #d1d5db;background:#fff;color:#6b7280;font-size:16px;line-height:21px;text-align:center;transition:transform .15s,opacity .3s}
.auadd.press{transform:scale(.85);background:#e8f6fd;border-color:#1ca7ec}
.auadd.gone,.aulink.add.gone{opacity:0}
.aupane{position:relative;flex:1;min-width:0;height:580px;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 3px rgba(16,24,40,.08);overflow:hidden}
.aup{position:absolute;inset:0;padding:18px 22px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
.aup.on{opacity:1;transform:none}
.aupk{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:#9ca3af;display:flex;align-items:center;gap:8px}
.aup h4{font-family:Poppins,sans-serif;font-weight:700;font-size:20px;color:#111827;margin:5px 0 10px}
.aucat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin:12px 0 6px}
.aupick{border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px;margin-bottom:6px;font-size:13.5px;font-weight:600;color:#1f2937;transition:border-color .3s,background .3s}
.aupick span{display:block;font-weight:400;font-size:12px;color:#6b7280;margin-top:1px}
.aupick.hl{border-color:#1ca7ec;background:#e8f6fd}
.aufl{font-size:12.5px;font-weight:600;color:#374151;margin:10px 0 5px}
.aufield{border:1px solid #d1d5db;border-radius:9px;padding:8px 12px;font-size:14px;color:#111827}
.aufield small{color:#6b7280;font-size:12.5px}
.auseg{display:flex;gap:6px}
.auseg span{border:1px solid #d1d5db;border-radius:99px;padding:4px 13px;font-size:12.5px;font-weight:600;color:#4b5563}
.auseg span.on{border-color:#1ca7ec;background:#e8f6fd;color:#126fa0}
.aumsg{border:1px solid #d1d5db;border-radius:10px;padding:10px 13px;font-size:13.5px;line-height:1.6;color:#1f2937}
.aumsg.sms{max-width:420px;background:#f9fafb}
.auv{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;color:#126fa0;background:#e8f6fd;border:1px solid #c5e8fa;border-radius:5px;padding:0 4px}
.aufilled{margin-top:10px;border:1px dashed #c5e8fa;border-radius:10px;padding:8px 13px;font-size:12.5px;color:#374151}
.aufilled b{color:#178dc8;font-size:12px}
.aufilled ul{margin:4px 0 0;padding-left:18px}
.aufilled li.ok::marker{content:"\2713  ";color:#16a34a}
.aufilled u{color:#1ca7ec}
.auhelp{font-size:12.5px;color:#6b7280;margin:10px 0 0;line-height:1.5}
.augoal{margin:14px 0 0;border:1px solid #fbcfe8;background:#fdf2f8;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.55;color:#831843}
.austats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.austats div{border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.austats em{display:block;font-style:normal;font-family:Poppins,sans-serif;font-weight:700;font-size:30px;color:#111827;line-height:1.1}
.austats .g em{color:#be185d}
.austats span{font-size:12px;color:#6b7280}
.aulog{display:flex;flex-direction:column;gap:6px}
.aulog p{margin:0;border:1px solid #f3f4f6;background:#f9fafb;border-radius:9px;padding:7px 11px;font-size:13px;color:#374151;animation:auin .4s ease}
.aulog p b{color:#111827}
.aulog p i{font-style:normal;color:#9ca3af;font-size:12px;margin-right:6px}

/* the Event's list, outside the laptop */
.aubrd{position:relative;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(20,30,41,.92),rgba(13,20,28,.92));border-radius:22px;padding:18px 18px 16px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.aubh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.aubh b{display:block;font-family:var(--disp);font-size:17px;color:var(--ink)}
.aubh span{display:block;font-size:12.5px;color:var(--muted)}
.auday{flex:none;font-family:var(--mono);font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;color:#7DD3FC!important;border:1px solid rgba(28,167,236,.45);
  background:rgba(28,167,236,.12);border-radius:99px;padding:4px 10px;transition:color .3s,background .3s,border-color .3s}
.auday.good{color:#6EE7B7!important;border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.12)}
.aucount{display:flex;align-items:baseline;gap:10px;margin:12px 0 10px}
.aucount em{font-style:normal;font-family:var(--disp);font-weight:700;font-size:44px;line-height:1;color:#FCD34D;transition:color .4s}
.aucount em.zero{color:var(--good)}
.aucount span{color:var(--dim);font-size:14px}
.aurows{display:grid;gap:6px}
.aurow{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:12px;padding:8px 11px;
  transition:opacity .5s,border-color .5s,background .5s}
.aurn b{display:block;font-size:14px;color:var(--ink);font-weight:600}
.aurn span{display:block;font-size:11.5px;color:var(--muted)}
.aureq{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.aureq i{font-style:normal;font-size:11px;font-weight:600;color:#FCD34D;border:1px solid rgba(252,211,77,.35);background:rgba(252,211,77,.08);border-radius:99px;padding:1px 8px;transition:all .4s}
.autouch{grid-column:1/-1;font-size:11px;color:#7DD3FC;height:0;opacity:0;overflow:hidden;transition:opacity .3s}
.autouch.on{height:auto;opacity:1}
.audone{display:none;grid-column:1/-1;font-size:11.5px;font-weight:600;color:var(--good)}
.aurow.done{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.06)}
.aurow.done .aureq i{color:var(--good);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08);text-decoration:line-through}
.aurow.done .autouch{display:none}
.aurow.done .audone{display:block}
.aurow.done .aurn,.aurow.done .aureq{opacity:.6}
.aumore{margin:8px 2px 0;font-size:12.5px;color:var(--muted)}
.aufoot{margin:10px 0 0;min-height:44px;border-top:1px solid var(--line);padding-top:10px;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.4;color:var(--ink)}
.aufoot.good{color:var(--good)}
.aupoints{position:relative;display:grid;gap:14px;max-width:1080px;margin:clamp(36px,5vw,60px) auto 0;padding-inline:var(--pad)}
@media(min-width:760px){.aupoints{grid-template-columns:repeat(3,1fr)}}
.aupoints div{border-top:2px solid var(--blue);padding-top:12px}
.aupoints b{display:block;font-family:var(--disp);font-size:18px;color:var(--ink)}
.aupoints span{display:block;color:var(--dim);font-size:15px;line-height:1.45;margin-top:4px}
/* entrance */
.au .auhd,.au .aubrd,.au .aupoints{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.au .aulap{opacity:0;transform:translateX(-10%);transition:opacity 1s ease .3s,transform 1.2s cubic-bezier(.2,.75,.2,1) .3s}
.au.in .auhd,.au.in .aubrd,.au.in .aupoints,.au.in .aulap{opacity:1;transform:none}
.au.in .aubrd{transition-delay:.6s}.au.in .aupoints{transition-delay:.8s}
@media(prefers-reduced-motion:reduce){.au .auhd,.au .aubrd,.au .aupoints,.au .aulap{opacity:1;transform:none;transition:none}}
@media(max-width:999px){ .aucap{font-size:13px} .aurow{padding:7px 10px} }
@media(max-width:999px){ .aurow:nth-child(n+6){display:none} }

/* ACT 12 rows keep one height for the whole loop: the second line swaps, it never adds */
.aurow{text-align:left}
.aurn{min-width:0}
.aurn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aus{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:16px;line-height:16px}
.aus.g{color:var(--muted)}
.aurow .autouch{display:none;grid-column:auto;height:16px;opacity:1;color:#7DD3FC}
.aurow .autouch.on{display:block;height:16px}
.aurow .autouch.on~.audone{display:none}
.aurow .aurn:has(.autouch.on) .g{display:none}
.aurow .audone{display:none;grid-column:auto;font-weight:600;color:var(--good)}
.aurow.done .aus.g,.aurow.done .autouch,.aurow.done .autouch.on{display:none}
.aurow.done .audone{display:block}
.aurow.done .aurn{opacity:1}.aurow.done .aurn b{opacity:.6}
@media(max-width:999px){ .aureq i{font-size:10px;padding:1px 6px} .aureq{max-width:52%} }
.aurow.done .aurn .audone{display:block!important}
.aureq i{white-space:nowrap}
.aufoot{min-height:54px}
@media(max-width:999px){ .aufoot{min-height:75px} }
.auday{white-space:nowrap}.aubh>div{min-width:0}

/* ================= ACT 12b: the line — your team comes together as one ================= */
.asone{position:relative;background:#000;text-align:center;padding:clamp(80px,13vw,170px) var(--pad)}
.asl{margin:0 auto;max-width:18ch;font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(28px,5vw,60px);color:var(--dim)}
.asl+.asl{margin-top:.35em}
.asl.big{color:#fff;font-size:clamp(36px,7vw,92px);margin-top:.5em;max-width:14ch}
.asl.big span{background:linear-gradient(135deg,#fff 30%,#7FD3FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.asl span{display:inline-block;opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity 1s ease,transform 1s ease,filter 1s ease}
.asone.in .asl span{opacity:1;transform:none;filter:none}
.asone.in .asl:nth-child(2) span{transition-delay:.9s}
.asone.in .asl:nth-child(3) span{transition-delay:1.9s}
@media(prefers-reduced-motion:reduce){.asl span{opacity:1;transform:none;filter:none;transition:none}}

/* ================= ACT 13: Pathways — one registration, one page at a time ================= */
.pw{position:relative;overflow:hidden;background:var(--ground);padding-block:clamp(70px,10vw,130px)}
.pw::before{content:"";position:absolute;left:50%;top:55%;width:min(1200px,160vw);height:800px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(35% 40% at 50% 50%,rgba(28,167,236,.16),transparent 70%)}
.pwhd{position:relative;text-align:center;max-width:880px;margin:0 auto clamp(30px,4vw,50px);padding-inline:var(--pad)}
.pwhd .tag{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--blue);margin:0 0 10px}
.pwhd h2{font-size:clamp(32px,5.4vw,62px)}
.pwhd .sub{max-width:56ch;margin-inline:auto}
.pwstage{position:relative;display:grid;place-items:center;padding:10px 0 20px}
.device.sp.pwphone{--pw:min(330px,76vw);z-index:3}
.pwphone .screen{background:#f1f5f9}
.pwphone .spstatus{z-index:8;color:#111827}.pwphone .spicons-r{color:#111827}
.pwphone .sphomebar{background:rgba(17,24,39,.75);z-index:8}
.pwreel{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.pwtrack{display:flex}
.pwtrack.front{position:absolute;inset:0;transition:transform .85s cubic-bezier(.65,0,.25,1)}
.pwtrack.back{position:absolute;left:0;top:50%;gap:var(--gap,30px);transition:transform .85s cubic-bezier(.65,0,.25,1)}
.pwtrack.back .pwpg{width:var(--sw,309px);height:var(--sh,672px);border-radius:calc(var(--sw,309px) * .16);opacity:.3;transform:translateY(-50%) scale(.9);
  filter:saturate(.7);box-shadow:0 30px 60px rgba(0,0,0,.5);transition:opacity .85s}
.pwtrack.back .pwpg.near{opacity:.42}
.pwtrack.nojump{transition:none!important}

/* one page of the Pathway — sized in container units so it scales with the phone */
.pwpg{flex:none;width:100%;height:100%;background:#f1f5f9;container-type:inline-size;overflow:hidden;position:relative}
.pwpgi{position:absolute;inset:0;padding:15cqw 4cqw 7cqw;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;color:#111827;text-align:left;line-height:1.3}
.pwcard{height:100%;background:#fff;border-radius:5cqw;border-top:2cqw solid #1ca7ec;box-shadow:0 3cqw 13cqw rgba(0,0,0,.08);
  padding:5cqw 5cqw 5cqw;display:flex;flex-direction:column;overflow:hidden}
.pwcamp{margin:0;font-size:2.8cqw;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.pwtitle{margin:1cqw 0 0;font-family:Poppins,sans-serif;font-size:6.2cqw;font-weight:700;color:#111827}
.pwmeta{display:flex;align-items:center;gap:2.4cqw;margin-top:2cqw}
.pwstep{font-size:3.3cqw;font-weight:600;color:#6b7280;background:#f3f4f6;border-radius:99px;padding:.8cqw 2.8cqw}
.pwname{font-family:Poppins,sans-serif;font-size:4.2cqw;font-weight:600;color:#374151}
.pwbar{height:1.3cqw;background:#f3f4f6;border-radius:9px;margin:3cqw 0 1cqw;overflow:hidden}
.pwbar i{display:block;height:100%;background:#1ca7ec;border-radius:9px}
.pwel{flex:1;min-height:0;display:flex;flex-direction:column;gap:2.6cqw;margin-top:2.6cqw}
.pwbox{border:1px solid #e5e7eb;border-radius:4cqw;padding:3.6cqw;display:flex;flex-direction:column;gap:2cqw}
.pwbt{font-family:Poppins,sans-serif;font-size:4.3cqw;font-weight:600;display:flex;align-items:center;gap:2cqw}
.pwbt.sm{font-size:3.7cqw}
.pwsel{position:relative;border:2px solid #e5e7eb;border-left:1.4cqw solid #c5e8fa;border-radius:3.4cqw;padding:2.4cqw 3cqw;display:flex;flex-direction:column}
.pwsel b{font-size:4cqw;font-weight:700}
.pwsel span{font-size:3.3cqw;color:#6b7280}
.pwsel em{font-style:normal;font-size:3.3cqw;font-weight:600;color:#126fa0;margin-top:.6cqw}
.pwsel.full{opacity:.55}.pwsel.full em{color:#b91c1c}
.pwsel.on{border-color:#1ca7ec;border-left-color:#1ca7ec;background:#f5fbff}
.pwsel .ck{position:absolute;right:3cqw;top:3cqw;width:5.4cqw;height:5.4cqw;border-radius:99px;background:#1ca7ec}
.pwsel .ck::after{content:"";position:absolute;left:1.9cqw;top:1.1cqw;width:1.3cqw;height:2.4cqw;border:solid #fff;border-width:0 .7cqw .7cqw 0;transform:rotate(45deg)}
.pwfor{margin:0;font-size:3.4cqw;color:#374151;background:#f5fbff;border:1px solid #c5e8fa;border-radius:3cqw;padding:2cqw 3cqw}
.pwfor u{color:#1ca7ec;text-decoration:none;font-weight:600;margin-left:1cqw}
.pwrow2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2cqw}
.pwf{display:block;border:1px solid #d1d5db;border-radius:2.6cqw;padding:2cqw 2.6cqw;font-size:3.7cqw;color:#111827;min-height:8.6cqw;white-space:nowrap;overflow:hidden}
.pwseg{display:flex;gap:1.4cqw}
.pwseg i{flex:1;font-style:normal;text-align:center;border:1px solid #d1d5db;border-radius:2.6cqw;padding:2cqw 1cqw;font-size:3.5cqw;font-weight:600;color:#4b5563}
.pwseg i.on{border-color:#1ca7ec;background:#e8f6fd;color:#126fa0}
.pwadd{margin:0;font-size:3.6cqw;font-weight:600;color:#1ca7ec}
.pwreq{font-family:Inter,sans-serif;font-size:2.8cqw;font-weight:700;color:#b45309;background:#fef3c7;border-radius:99px;padding:.4cqw 2cqw}
.pwfill{margin:0;font-size:3.4cqw;color:#374151;display:flex;align-items:center;gap:1.6cqw}
.pwfill i{font-style:normal;width:7.4cqw;height:7.4cqw;border-radius:99px;display:grid;place-items:center;font-size:2.8cqw;font-weight:700;background:#f3f4f6;color:#6b7280}
.pwfill i.dn{background:#dcfce7;color:#15803d}
.pwfill i.cur{background:#1ca7ec;color:#fff}
.pwpage{margin:0;font-size:3.2cqw;color:#6b7280}
.pwbox label{font-size:3.3cqw;font-weight:600;color:#374151;margin-bottom:-1cqw}
.pwtxt{margin:0;font-size:3.6cqw;color:#4b5563;line-height:1.45}
.pwdoc{display:flex;flex-direction:column;gap:1.8cqw;border:1px solid #f3f4f6;background:#f9fafb;border-radius:3cqw;padding:3.4cqw}
.pwdoc i{height:1.6cqw;border-radius:9px;background:#e5e7eb}.pwdoc i.s{width:70%}
.pwsig{position:relative;border:1.5px dashed #c5e8fa;border-radius:3cqw;background:#fff;padding:2cqw 3cqw 2cqw}
.pwsig svg{display:block;width:100%;height:16cqw;fill:none;stroke:#1e3a8a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:0}
.pwsig span{display:block;border-top:1px solid #e5e7eb;padding-top:1cqw;font-size:3cqw;color:#6b7280}
.pwskip{margin:0;font-size:3.4cqw;color:#6b7280;text-decoration:underline}
.pwchips{display:flex;flex-wrap:wrap;gap:1.6cqw}
.pwchips i{font-style:normal;font-size:3.4cqw;font-weight:600;border:1px solid #d1d5db;border-radius:99px;padding:1.2cqw 2.8cqw;color:#374151}
.pwchips i.on{border-color:#1ca7ec;background:#e8f6fd;color:#126fa0}
.pwsum{border:1px solid #e5e7eb;background:#f9fafb;border-radius:3.4cqw;padding:2.4cqw 3.4cqw}
.pwsum p{margin:0;display:flex;justify-content:space-between;font-size:3.6cqw;padding:.8cqw 0}
.pwsum p b{font-weight:700}.pwsum p:first-child b{font-size:4.6cqw}
.pwwal{background:#eff6ff;border:1px solid #bfdbfe;border-radius:3.4cqw;padding:2.6cqw 3.4cqw}
.pwwal span{display:block;font-size:3.2cqw;color:#1e40af;font-weight:600}
.pwwal b{display:block;font-family:Poppins,sans-serif;font-size:7.4cqw;font-weight:800;color:#1e3a8a}
.pwok{display:none;border:1px solid #bbe7cd;background:#ecfdf5;border-radius:3.4cqw;padding:2.6cqw 3.4cqw;font-size:3.9cqw;font-weight:700;color:#15803d}
.pwok span{display:block;font-weight:400;font-size:3.3cqw;color:#166534}
.pwlast b{display:block;font-family:Poppins,sans-serif;font-size:6.6cqw;font-weight:700;margin-top:2cqw}
.pwlast p{margin:1.4cqw 0 0;font-size:3.6cqw;color:#4b5563;line-height:1.45}
.pwrev{border:1px solid #e5e7eb;border-radius:4cqw;padding:1cqw 3.6cqw}
.pwrev p{margin:0;display:flex;justify-content:space-between;gap:3cqw;padding:2.6cqw 0;border-bottom:1px solid #f3f4f6;font-size:3.6cqw}
.pwrev p:last-child{border:0}.pwrev span{color:#6b7280}.pwrev b{text-align:right}
.pwdone{text-align:center;padding-top:8cqw}
.pwdone i{display:grid;place-items:center;margin:0 auto;width:18cqw;height:18cqw;border-radius:99px;background:#dcfce7;color:#16a34a;font-style:normal;font-size:9cqw;font-weight:700}
.pwdone b{display:block;font-family:Poppins,sans-serif;font-size:6.6cqw;margin-top:4cqw}
.pwdone p{margin:2.4cqw 0 0;font-size:3.7cqw;color:#4b5563;line-height:1.5}
.pwdone .pwnext{margin-top:5cqw;background:#f5fbff;border:1px solid #c5e8fa;border-radius:3.4cqw;padding:3cqw;color:#126fa0;font-weight:600}
.pwbtns{display:flex;gap:2.4cqw;margin-top:3cqw}
.pwbtns span{flex:1;text-align:center;border-radius:3cqw;padding:3.2cqw;font-size:4.2cqw;font-weight:700}
.pwback{background:#fff;border:1px solid #d1d5db;color:#374151}
.pwgo{background:#1ca7ec;color:#fff;transition:transform .15s}
.pwgo.wide{flex:1}
/* what happens on the page while it is in the phone */
.front .pwpg .pwg2{transition:opacity .5s,transform .5s}
.front .pwpg:not(.cur) .pwg2{opacity:0;transform:translateY(-3cqw)}
.front .pwpg.cur .pwg2{transition-delay:1.1s}
.front .pwpg .typing b{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0}
.front .pwpg.cur .typing b{max-width:100%;transition:max-width 1.3s steps(30) .9s}
.front .pwpg.cur .pwsig path{animation:pwsign 1.7s ease .6s both}
@keyframes pwsign{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.front .pwpg.cur .pwpay{animation:pwpress .3s ease 2.4s}
@keyframes pwpress{50%{transform:scale(.95);filter:brightness(.9)}}
.front .pwpg.cur .pwok{display:block;animation:pwpop .5s cubic-bezier(.2,.8,.2,1) 2s both}
@keyframes pwpop{from{opacity:0;transform:translateY(3cqw) scale(.97)}to{opacity:1;transform:none}}
.front .pwpg.cur .pwdone i{animation:pwpop .6s cubic-bezier(.2,.8,.2,1) .4s both}
.pwplaces{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:980px;margin:clamp(26px,3vw,40px) auto 0;padding-inline:var(--pad)}
.pwplace{position:relative;font-size:14px;font-weight:600;color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:7px 14px;transition:color .5s,opacity .5s,border-color .5s}
.pwplace::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:#F87171;transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.pwplace.on{color:#fff;border-color:rgba(28,167,236,.7)}
.pwplace.gone{opacity:.45}
.pwplace.gone::after{transform:scaleX(1)}
.pwone{font-size:14px;font-weight:700;color:#04121C;background:var(--grad);border-radius:99px;padding:7px 16px;opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s}
.pwone.on{opacity:1;transform:none}
.pwclose{position:relative;text-align:center;margin:22px auto 0;padding-inline:var(--pad);color:var(--ink);font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.8vw,21px)}
.pw .pwhd,.pw .pwstage,.pw .pwplaces,.pw .pwclose{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.pw.in .pwhd,.pw.in .pwstage,.pw.in .pwplaces,.pw.in .pwclose{opacity:1;transform:none}
.pw.in .pwstage{transition-delay:.3s}.pw.in .pwplaces{transition-delay:.55s}.pw.in .pwclose{transition-delay:.7s}
@media(prefers-reduced-motion:reduce){.pw .pwhd,.pw .pwstage,.pw .pwplaces,.pw .pwclose{opacity:1;transform:none;transition:none}}
@media(max-width:700px){ .pwplace,.pwone{font-size:12.5px;padding:6px 11px} }

/* ================= ACT 13b: Camper Portal — this section wears the portal's own look =================
   Tokens are the portal's (apps/portal/src/portal.css): the paper world + the Discovery Mountain theme. */
.cx{--p:#2f5233;--pd:#1f3d1f;--s:#c06a45;--sd:#7a3a22;--a:#fbc55c;--ad:#8a5a20;--ink:#1f3d1f;--soft:#dce8c8;--soft2:#e8f1de;--edge:#a8c48b;
  --paper:#fdfaf1;--cream:#fbf6ec;--sand:#ece3cf;--sandl:#e0d6ba;--bark:#6b4e3a;--barkm:#7a6a4c;--info:#1ca7ec;--ember:#ef4444;--ok:#16a34a;--warn:#f4a62b;
  --hand:'Caveat','Poppins',cursive;--dsp:'Poppins',-apple-system,sans-serif;--bdy:'Inter',-apple-system,sans-serif;
  position:relative;background:var(--cream);color:#1f2937;font-family:var(--bdy);text-align:left;overflow:hidden}
.cx *{box-sizing:border-box}
.cx h2,.cx h3,.cx h4,.cx h5{font-family:var(--dsp);color:var(--ink);letter-spacing:-.02em;margin:0}
.cxtop{position:relative;background:linear-gradient(180deg,#2f5233 0%,#6b8c5f 45%,#d48a3e 85%,#e8b668 100%);color:#fff;
  padding:clamp(80px,11vw,150px) var(--pad) clamp(120px,14vw,190px);text-align:center;overflow:hidden}
.cxstars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 16% 22%,rgba(255,240,200,.8),transparent),
  radial-gradient(2px 2px at 30% 12%,rgba(255,240,200,.6),transparent),radial-gradient(1.5px 1.5px at 62% 9%,rgba(255,240,200,.7),transparent),
  radial-gradient(2px 2px at 82% 20%,rgba(255,240,200,.5),transparent),radial-gradient(1.5px 1.5px at 45% 30%,rgba(255,240,200,.5),transparent)}
.cxsun{position:absolute;top:24px;right:38px;width:60px;height:60px;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle,#fff1c2,#fbc55c 55%,#c06a45 100%);box-shadow:0 0 70px rgba(251,197,92,.5)}
.cxsun.big{top:clamp(40px,7vw,90px);right:clamp(24px,12vw,220px);width:clamp(70px,9vw,130px);height:clamp(70px,9vw,130px);box-shadow:0 0 140px rgba(251,197,92,.55);
  animation:cxrise 1.8s cubic-bezier(.2,.8,.2,1) both paused}
.cx.in .cxsun.big{animation-play-state:running}
@keyframes cxrise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.cxtrees{position:absolute;left:0;right:0;bottom:0;height:84px;pointer-events:none;background:
  radial-gradient(46px 78px at 10% 100%,#1a3019 50%,transparent 52%),radial-gradient(58px 96px at 26% 100%,#24401f 50%,transparent 52%),
  radial-gradient(40px 64px at 42% 100%,#1a3019 50%,transparent 52%),radial-gradient(64px 104px at 60% 100%,#24401f 50%,transparent 52%),
  radial-gradient(46px 74px at 78% 100%,#1a3019 50%,transparent 52%),radial-gradient(54px 86px at 93% 100%,#24401f 50%,transparent 52%),linear-gradient(180deg,transparent,#1a3019)}
.cxtrees.big{height:clamp(120px,14vw,200px);background:
  radial-gradient(7% 90% at 4% 100%,#1a3019 50%,transparent 52%),radial-gradient(9% 100% at 17% 100%,#24401f 50%,transparent 52%),
  radial-gradient(6% 70% at 31% 100%,#1a3019 50%,transparent 52%),radial-gradient(10% 100% at 47% 100%,#24401f 50%,transparent 52%),
  radial-gradient(7% 80% at 63% 100%,#1a3019 50%,transparent 52%),radial-gradient(9% 95% at 79% 100%,#24401f 50%,transparent 52%),
  radial-gradient(7% 75% at 95% 100%,#1a3019 50%,transparent 52%),linear-gradient(180deg,transparent 70%,#1a3019)}
.cxtop::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:20px;background:var(--cream);border-top:2px dashed var(--edge)}
.cxtopin{position:relative;z-index:2;max-width:880px;margin:0 auto}
.cxeyebrow{display:inline-flex;align-items:center;gap:7px;font:700 11px var(--bdy);text-transform:uppercase;letter-spacing:.13em;color:#fff1c2;
  background:rgba(20,30,16,.4);padding:6px 13px;border-radius:999px;margin:0 0 16px;border:1px solid rgba(251,197,92,.3)}
.cxtop h2{font:900 clamp(38px,6.6vw,84px)/1.02 var(--dsp);color:#fff;letter-spacing:-.03em;text-wrap:balance}
.cx em{font-style:normal;color:#ffe2a6}
.cxlede{font:500 clamp(16px,1.6vw,20px)/1.5 var(--bdy);color:rgba(255,248,235,.95);max-width:56ch;margin:18px auto 0}
.cxscribble{font:700 clamp(21px,2.2vw,28px)/1.1 var(--hand);color:#fff1c2;margin:22px auto 0;transform:rotate(-2deg);max-width:30ch}
.cxpaper{position:relative;max-width:1240px;margin:0 auto;padding:clamp(30px,4vw,56px) var(--pad) clamp(80px,10vw,130px)}

/* role picker: taped paper cards */
.cxroles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);margin:0 auto clamp(26px,3vw,40px);max-width:980px}
.cxrole{position:relative;appearance:none;cursor:pointer;text-align:left;background:var(--paper);border:1.5px solid var(--sand);border-radius:20px;
  padding:18px 18px 16px;font-family:var(--bdy);box-shadow:0 3px 12px -6px rgba(31,45,20,.1);transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s,background .3s}
.cxrole b{display:block;font:800 clamp(15px,1.6vw,19px) var(--dsp);color:var(--ink)}
.cxrole span{display:block;font:500 13px var(--bdy);color:var(--barkm);margin-top:2px}
.cxrole em{position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:9px;background:var(--sand);overflow:hidden}
.cxrole em::after{content:"";position:absolute;inset:0;background:var(--s);transform:scaleX(0);transform-origin:left}
.cxrole.on{background:#fff;border-color:var(--s);transform:translateY(-4px) rotate(-.6deg);box-shadow:0 18px 40px -10px rgba(31,45,20,.3)}
.cxrole.on em::after{animation:cxfill var(--dur,8s) linear forwards}
.cxrole.on.hold em::after{animation:none;transform:scaleX(1)}
@keyframes cxfill{to{transform:scaleX(1)}}
.cxtape{position:absolute;top:-9px;left:22px;width:54px;height:17px;background:color-mix(in srgb,var(--s) 78%,transparent);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.1);border-radius:1px}
.cxtape.r{left:auto;right:22px;transform:rotate(4deg)}

/* the portal window */
.cxshow{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
@media(min-width:1000px){.cxshow{grid-template-columns:1fr 250px}}
.cxwin{position:relative;background:var(--cream);border:1.5px solid var(--sand);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(31,45,20,.45)}
.cxbar{display:flex;align-items:center;gap:6px;background:#ece5d3;padding:9px 14px;border-bottom:1.5px solid var(--sand)}
.cxbar i{width:10px;height:10px;border-radius:9px;background:#e0786a}.cxbar i:nth-child(2){background:#e8b44f}.cxbar i:nth-child(3){background:#7fb069}
.cxbar span{margin-left:10px;font:600 12px var(--bdy);color:var(--barkm)}
.cxviews{display:grid}
.cxview{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s,transform .5s,visibility 0s .5s}
.cxview.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s .1s,transform .5s .1s,visibility 0s}
.cxhead{display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--soft2);border-bottom:2px dashed var(--edge);flex-wrap:nowrap;overflow:hidden}
.cxmark{width:36px;height:36px;flex:none}
.cxname{line-height:1.05;flex:none}
.cxname b{display:block;font:800 15px var(--dsp);color:var(--ink)}
.cxname span{font:600 9.5px var(--bdy);color:var(--barkm);letter-spacing:.04em}
.cxnav{display:flex;gap:3px;margin-left:10px;overflow:hidden}
.cxnav i{font-style:normal;padding:7px 12px;border-radius:999px;font:600 12.5px var(--bdy);color:#374151;white-space:nowrap}
.cxnav i.on{background:var(--p);color:#fff;box-shadow:0 2px 0 var(--pd)}
.cxhero{position:relative;background:linear-gradient(180deg,#2f5233 0%,#6b8c5f 45%,#d48a3e 85%,#e8b668 100%);color:#fff;padding:24px 26px 70px;overflow:hidden}
.cxhi{position:relative;z-index:3}
.cxhero .cxeyebrow{font-size:10px;padding:4px 10px;margin-bottom:10px}
.cxhero h4{font:900 clamp(20px,2.4vw,28px)/1.08 var(--dsp);color:#fff;max-width:560px;text-wrap:balance;margin-bottom:12px}
.cxready{display:flex;align-items:center;gap:14px;background:rgba(253,250,241,.16);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:10px 16px;max-width:460px}
.cxready b{display:block;font:800 15px var(--dsp);color:#fff}
.cxready span{font:500 12.5px/1.4 var(--bdy);color:rgba(255,248,235,.92)}
.cxring{position:relative;flex:none;display:block}
.cxring svg{display:block;transform:rotate(-90deg)}
.cxring b{position:absolute;inset:0;display:flex!important;align-items:center;justify-content:center;font:800 var(--rs) var(--dsp)!important;color:var(--rc)!important}
.cxbody{padding:18px 22px 22px;display:grid;gap:18px}
@media(min-width:760px){.cxbody.two{grid-template-columns:1.25fr 1fr}}
.cxsec{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.cxsec h5{font:900 17px var(--dsp);color:var(--ink);white-space:nowrap}
.cxsec i{flex:1;border-top:2px dashed var(--sandl);margin-top:5px}
.cxtask{display:flex;align-items:center;gap:12px;background:var(--paper);border:1.5px solid var(--sand);border-radius:16px;padding:11px 13px;margin-bottom:8px}
.cxtask.due{border-left:4px solid var(--warn)}
.cxtico{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center}
.cxtico svg{width:21px;height:21px}
.cxtico.form{background:#fdf3df;color:#7a4a12}.cxtico.sign{background:#e8f6fd;color:#126fa0}.cxtico.pay{background:var(--soft);color:var(--p)}
.cxtb{flex:1;min-width:0}
.cxtb b{display:block;font:800 14px var(--dsp);color:var(--ink)}
.cxtb span{display:block;font:500 12px var(--bdy);color:var(--barkm);margin-top:1px}
.cxbtn{flex:none;font:700 12.5px var(--bdy);border-radius:10px;padding:8px 13px;background:var(--p);color:#fff;box-shadow:0 3px 0 var(--pd);white-space:nowrap}
.cxbtn.ghost{background:transparent;color:var(--p);border:1.5px solid var(--s);box-shadow:none}
.cxcrew{display:flex;align-items:center;gap:11px;background:var(--paper);border:1.5px solid var(--sand);border-radius:16px;padding:10px 12px;margin-bottom:8px}
.cxava{width:40px;height:40px;border-radius:13px;background:var(--soft);color:var(--p);font:800 17px var(--dsp);display:grid;place-items:center;flex:none}
.cxava.sm{width:30px;height:30px;border-radius:10px;font-size:13px}
.cxcrew div{flex:1;min-width:0}.cxcrew b{display:block;font:800 14.5px var(--dsp);color:var(--ink)}.cxcrew span{font:600 11.5px var(--bdy);color:var(--barkm)}
.cx em.ok,.cx em.warn,.cx em.due,.cxcrew em,.cxrost em{font-style:normal;font:700 10.5px var(--bdy);text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:999px;background:#fdf3df;color:#7a4a12;white-space:nowrap}
.cx em.ok{background:#e8f3df;color:#2f6b23}.cx em.due{background:#fff1f1;color:#b91c1c}
.cxrost em:not(.ok):not(.warn):not(.due){background:var(--sand);color:var(--bark)}
.cxwallet{display:flex;justify-content:space-between;align-items:center;background:var(--soft2);border:1.5px dashed var(--edge);border-radius:16px;padding:12px 14px;margin-top:4px}
.cxwallet span{font:700 13px var(--bdy);color:var(--ink)}.cxwallet b{font:900 20px var(--dsp);color:var(--p)}
.cxtabs{display:flex;gap:4px;padding:10px 18px 0;background:var(--cream);overflow:hidden;border-bottom:1.5px solid var(--sand)}
.cxtabs i{font-style:normal;font:600 12.5px var(--bdy);color:var(--barkm);padding:7px 11px 9px;white-space:nowrap;border-bottom:3px solid transparent}
.cxtabs i.on{color:var(--ink);border-color:var(--s)}
.cxneed{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:1.5px solid var(--sand);border-left:4px solid var(--warn);border-radius:16px;padding:11px 13px;margin-bottom:8px}
.cxneed b{font:800 14px var(--dsp);color:var(--ink)}
.cxstats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border:2px solid var(--sand);border-radius:16px;padding:8px;margin-top:10px}
.cxstats p{margin:0;text-align:center;border-right:1.5px dashed var(--sandl)}.cxstats p:last-child{border:0}
.cxstats b{display:block;font:900 22px var(--dsp);color:var(--p);line-height:1.1}.cxstats span{font:700 9.5px var(--bdy);text-transform:uppercase;letter-spacing:.06em;color:var(--bark)}
.cxrost{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1.5px dashed var(--sandl)}
.cxrost:last-child{border:0}.cxrost b{flex:1;font:700 14px var(--bdy);color:var(--ink)}
.cxroom{background:var(--paper);border:1.5px solid var(--sand);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.cxroom b{display:block;font:800 16px var(--dsp);color:var(--ink)}.cxroom span{font:600 12.5px var(--bdy);color:var(--barkm)}
.cxnote{position:relative;background:#fffbea;border:1.5px solid #f2e3b3;border-radius:14px;padding:12px 14px;transform:rotate(-.6deg)}
.cxnote p{margin:0;font:700 19px/1.2 var(--hand);color:var(--bark)}.cxnote span{display:block;margin-top:6px;font:600 11.5px var(--bdy);color:var(--barkm)}
.cxit{display:flex;gap:12px;padding:9px 2px;border-bottom:1.5px dashed var(--sandl)}
.cxit b{flex:none;width:78px;font:800 13px var(--dsp);color:var(--p)}
.cxit span{font:600 13.5px var(--bdy);color:#374151}
.cxit em{display:block;font-style:normal;font:600 11px var(--bdy);color:var(--s);margin-top:1px}
.cxit.lead{background:var(--soft2);border-radius:10px;padding-inline:8px}

/* handwritten notes beside the window */
.cxnotes{display:grid}
.cxhand{grid-area:1/1;opacity:0;transform:rotate(-2deg) translateY(10px);transition:opacity .5s,transform .5s}
.cxhand.on{opacity:1;transform:rotate(-2deg)}
.cxhand p{margin:0 0 6px;font:700 clamp(28px,2.6vw,34px)/1 var(--hand);color:var(--s)}
.cxhand ul{list-style:none;margin:0;padding:0}
.cxhand li{position:relative;font:700 clamp(20px,1.9vw,24px)/1.15 var(--hand);color:var(--ink);padding:5px 0 5px 26px}
.cxhand li::before{content:"";position:absolute;left:2px;top:12px;width:13px;height:7px;border:solid var(--p);border-width:0 0 3px 3px;transform:rotate(-45deg)}

/* the merge */
.cxmergehd{text-align:center;max-width:820px;margin:clamp(70px,9vw,120px) auto clamp(30px,4vw,50px)}
.cxkick{font:700 clamp(24px,2.4vw,30px)/1 var(--hand);color:var(--s);margin:0 0 6px;transform:rotate(-2deg)}
.cxmergehd h3{font:900 clamp(30px,4.6vw,54px)/1.05 var(--dsp);text-wrap:balance}
.cxmergehd h3 em{color:var(--s)}
.cxmergehd p{font:500 clamp(16px,1.5vw,18px)/1.55 var(--bdy);color:var(--bark);margin:14px auto 0;max-width:60ch}
.cxmergehd p b{color:var(--ink)}
.cxmerge{display:grid;gap:clamp(18px,2.4vw,34px);align-items:center}
@media(min-width:1000px){.cxmerge{grid-template-columns:1fr 330px 1fr}}
.cxpanel{position:relative;background:var(--paper);border:1.5px solid var(--sand);border-radius:20px;padding:22px 18px 18px;box-shadow:0 3px 12px -6px rgba(31,45,20,.1)}
.cxpanel.rc{border-top:5px solid var(--info)}.cxpanel.gr{border-top:5px solid var(--s)}
.cxpanel.rc .cxtape{background:color-mix(in srgb,var(--info) 60%,transparent)}
.cxph{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.cxpi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.cxpi svg{width:20px;height:20px}
.cxpi.rc{background:#e8f6fd;color:#126fa0}.cxpi.gr{background:#fbe9e0;color:var(--sd)}
.cxph b{display:block;font:800 17px var(--dsp);color:var(--ink)}.cxph span{font:600 12px var(--bdy);color:var(--barkm)}
.cxitem{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--sand);border-radius:14px;padding:10px 12px;margin-top:8px;transition:border-color .35s,box-shadow .35s,transform .35s}
.cxii{width:30px;height:30px;border-radius:9px;background:var(--cream);color:var(--bark);display:grid;place-items:center;flex:none}
.cxii svg{width:17px;height:17px}
.cxitem b{font:700 14.5px var(--bdy);color:var(--ink)}
.cxpanel.rc .cxitem.hot{border-color:var(--info);box-shadow:0 0 0 4px rgba(28,167,236,.18);transform:translateX(6px)}
.cxpanel.gr .cxitem.hot,.cxprice.hot{border-color:var(--s);box-shadow:0 0 0 4px rgba(192,106,69,.2);transform:translateX(-6px)}
.cxprice{background:#fff;border:1.5px dashed var(--sandl);border-radius:14px;padding:11px 13px;margin-top:10px;transition:border-color .35s,box-shadow .35s,transform .35s}
.cxpl{margin:0;font:700 10.5px var(--bdy);text-transform:uppercase;letter-spacing:.06em;color:var(--barkm)}
.cxprice>b{display:flex;justify-content:space-between;font:800 16px var(--dsp);color:var(--ink);margin:3px 0 6px}
.cxprice>b em{color:var(--p)!important}
.cxline{display:flex;justify-content:space-between;margin:0;font:500 12.5px var(--bdy);color:var(--bark);padding:2px 0}
.cxline.neg span:last-child{color:var(--ok);font-weight:700}
.cxphone{position:relative;justify-self:center;width:min(330px,86vw);background:#1a1d17;border-radius:44px;padding:11px;box-shadow:0 0 0 2px #50554a,0 40px 80px -20px rgba(31,45,20,.55)}
.cxphin{background:var(--cream);border-radius:34px;overflow:hidden;min-height:560px;padding:44px 14px 16px;position:relative}
.cxphin::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:34%;height:24px;border-radius:99px;background:#000}
.cxpt{background:linear-gradient(180deg,#2f5233,#6b8c5f);border-radius:18px;padding:13px 15px;color:#fff;margin-bottom:10px}
.cxpt span{display:block;font:700 10px var(--bdy);text-transform:uppercase;letter-spacing:.12em;color:#fff1c2}
.cxpt b{display:block;font:900 20px var(--dsp);color:#fff}
.cxpt em{display:block;font:500 12px var(--bdy);color:rgba(255,248,235,.9)!important}
.cxstep{display:flex;align-items:center;gap:10px;background:var(--paper);border:1.5px solid var(--sand);border-radius:14px;padding:9px 11px;margin-bottom:7px;
  opacity:.28;transform:scale(.98);transition:opacity .45s,transform .45s,border-color .45s,background .45s}
.cxstep.in{opacity:1;transform:none}
.cxstep.cur{border-color:var(--p);background:#fff;box-shadow:0 6px 16px -8px rgba(31,45,20,.35)}
.cxsn{width:24px;height:24px;border-radius:99px;background:var(--sand);color:var(--bark);display:grid;place-items:center;font:800 12px var(--dsp);flex:none}
.cxstep div{flex:1;min-width:0}
.cxstep b{display:block;font:800 13.5px var(--dsp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxfrom{display:inline-block;font:700 10px var(--bdy);text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:2px 8px;margin-top:2px;background:var(--sand);color:var(--bark)}
.cxfrom.rc{background:#e8f6fd;color:#126fa0}.cxfrom.gr{background:#fbe9e0;color:var(--sd)}
.cxck{width:20px;height:20px;border-radius:99px;border:2px solid var(--sand);flex:none;position:relative;transition:background .3s,border-color .3s}
.cxstep.dn .cxck{background:var(--ok);border-color:var(--ok)}
.cxstep.dn .cxck::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cxstep.dn .cxsn{background:var(--soft);color:var(--p)}
.cxdone{text-align:center;background:#e8f3df;border:1.5px solid #bfd9a8;border-radius:14px;padding:10px;margin-top:8px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.cxdone.on{opacity:1;transform:none}
.cxdone b{display:block;font:900 16px var(--dsp);color:#2f6b23}.cxdone span{font:700 17px var(--hand);color:var(--bark)}
.cxgets{display:grid;gap:clamp(16px,2.4vw,34px);max-width:980px;margin:clamp(34px,4vw,56px) auto 0}
@media(min-width:760px){.cxgets{grid-template-columns:1fr 1fr}}
.cxget{position:relative;background:var(--paper);border:1.5px solid var(--sand);border-radius:20px;padding:22px 20px 18px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s,border-color .5s}
.cxget.rc{border-top:5px solid var(--info)}.cxget.gr{border-top:5px solid var(--s)}
.cxget.rc .cxtape{background:color-mix(in srgb,var(--info) 60%,transparent)}
.cxget h4{font:900 20px var(--dsp);margin-bottom:8px}
.cxget ul{list-style:none;margin:0;padding:0}
.cxget li{position:relative;font:500 15px/1.4 var(--bdy);color:#374151;padding:6px 0 6px 26px;border-bottom:1.5px dashed var(--sandl)}
.cxget li:last-child{border:0}
.cxget li::before{content:"";position:absolute;left:3px;top:11px;width:12px;height:6px;border:solid var(--ok);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.cxgets.on .cxget{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 18px 40px -10px rgba(31,45,20,.3)}
.cxgets.on .cxget.gr{transform:translateY(-6px) rotate(.4deg)}
.cxclose{text-align:center;margin:clamp(40px,5vw,64px) auto 0;font:900 clamp(22px,2.6vw,32px)/1.2 var(--dsp);color:var(--ink);max-width:30ch}
.cxclose span{display:block;font:700 clamp(28px,3vw,40px)/1.1 var(--hand);color:var(--s);margin-top:6px;transform:rotate(-1.5deg)}
@media(max-width:759px){
  .cxroles{grid-template-columns:1fr;gap:8px}
  .cxrole{padding:12px 14px 14px}.cxrole span{display:none}.cxtape{display:none}
  .cxrole.on{transform:none}
  .cxnav{display:none}
  .cxhero{padding:18px 16px 56px}
  .cxbody{padding:14px}
  .cxsun:not(.big){width:42px;height:42px;top:16px;right:16px}
  .cxhand{transform:none}.cxhand.on{transform:none}
  .cxphin{min-height:0}
  .cxmerge .cxpanel.gr{order:2}.cxmerge .cxphone{order:3}
}
@media(prefers-reduced-motion:reduce){.cxview,.cxhand,.cxstep,.cxdone{transition:none}.cxsun.big{animation:none}}
/* the closed side panel's shadow showed on light sections */
.panel:not(.open){box-shadow:none}
.cxviews{grid-template-columns:minmax(0,1fr)}.cxview{min-width:0}
.cxshow>*{min-width:0}
@media(max-width:759px){ .cxhero h4{font-size:19px} .cxstats b{font-size:18px} .cxbody.two>div{min-width:0} }
/* ACT 13: each screen carries its own pill underneath, and the pill travels with it */
.pwstage{padding-bottom:86px}
.pwtrack.back .pwslot{flex:none;position:relative;width:var(--sw,309px);height:var(--sh,672px);transform:translateY(-50%)}
.pwtrack.back .pwslot .pwpg{transform:scale(.9)}
.pwtrack.back .pwslot.near .pwpg{opacity:.42}
.pwreel{bottom:-86px}
.pwtag{position:absolute;left:50%;top:calc(100% + var(--below,40px));transform:translateX(-50%) scale(.92);white-space:nowrap;
  font:600 15px var(--body);color:var(--dim);background:rgba(13,20,28,.85);border:1px solid var(--line2);border-radius:99px;padding:8px 17px;
  opacity:.5;transition:opacity .6s,color .6s,border-color .6s,box-shadow .6s,transform .6s}
.pwslot.cur .pwtag{opacity:1;color:#fff;border-color:rgba(28,167,236,.85);box-shadow:0 0 0 4px rgba(28,167,236,.16),0 10px 30px -8px rgba(28,167,236,.5);transform:translateX(-50%) scale(1)}
.pwtag.one{color:#04121C;background:var(--grad);border-color:transparent;font-weight:700}
.pwslot.cur .pwtag.one{color:#04121C}
@media(max-width:700px){ .pwtag{font-size:13px;padding:7px 13px} }

/* footer: official App Store badge + an Android download that walks people through the install */
.storebadge{display:inline-flex;align-items:center;height:48px;border-radius:9px;transition:transform .15s,box-shadow .2s}
.storebadge:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,0,0,.8)}
.storebadge.apple img{height:48px;width:auto;display:block}
.storebadge.droid{appearance:none;cursor:pointer;gap:9px;padding:0 16px 0 12px;background:#000;border:1px solid #a6a6a6;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;text-align:left}
.storebadge.droid svg{width:28px;height:28px;flex:none}
.storebadge.droid span{display:block;line-height:1.05}
.storebadge.droid small{display:block;font-size:10.5px;letter-spacing:.01em;color:#fff}
.storebadge.droid b{display:block;font-size:21px;font-weight:600;letter-spacing:-.01em;color:#fff}
.badges{align-items:center;gap:12px}
.tmline{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--muted);max-width:90ch}
.apkm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.apkm[hidden]{display:none}
.apkm-scrim{position:absolute;inset:0;background:rgba(2,4,6,.72);backdrop-filter:blur(4px)}
.apkm-panel{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:22px;
  padding:26px 24px 20px;color:var(--dim);font-size:15px;line-height:1.55;box-shadow:0 40px 90px -30px #000;animation:apkin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes apkin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.apkm-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.apkm-eye{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#3DDC84}
.apkm h2{font-size:clamp(22px,3vw,27px);color:var(--ink);margin:0 34px 10px 0}
.apkm-lede{color:var(--ink)}
.apkm p{margin:0 0 10px}
.apkm-steps{margin:14px 0;padding:0;list-style:none;counter-reset:s}
.apkm-steps li{counter-increment:s;position:relative;padding:8px 0 8px 40px;border-top:1px solid var(--line)}
.apkm-steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:99px;background:rgba(61,220,132,.14);color:#3DDC84;display:grid;place-items:center;font-weight:700;font-size:13px}
.apkm-steps b{color:var(--ink)}
.apkm-stop{border:1px solid rgba(245,165,36,.45);background:rgba(245,165,36,.08);border-radius:14px;padding:12px 14px;font-size:14px;margin:6px 0 16px}
.apkm-stop b{color:#FCD34D}.apkm-stop a{color:var(--ink);text-decoration:underline}
.apkm-acts{display:flex;gap:10px;flex-wrap:wrap}
.apkm-go{flex:1;min-width:180px;text-align:center;background:#3DDC84;color:#04210f;font-weight:700;border-radius:12px;padding:13px 16px}
.apkm-no{flex:none;appearance:none;cursor:pointer;background:transparent;border:1px solid var(--line2);color:var(--ink);border-radius:12px;padding:13px 16px;font:inherit}
.apkm-started{margin:12px 0 0!important;color:#3DDC84}
.apkm-meta{margin:12px 0 0!important;font-size:12.5px;color:var(--muted)}
/* Wide desktops (1200px+): the copy lines up with the page column instead of floating in the middle,
   and the slider keeps a centred stage (at most 1460px) that fades to black at its sides — so the
   headline and the phone read as one centred composition at every width. */
@media(min-width:1200px){
  .dept-hero .herogrid{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--pad)}
  .depts,.deptshade{left:50%;right:auto;width:min(100%,1460px);transform:translateX(-50%)}
  .depts{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .deptinner{width:calc(min(100vw,1460px) * .42)}
}


/* ================= Section breaks — one banner design, used three times =================
   "Built as One", "No modules. No second product." and "Nice words from others". A saturated
   brand-blue band so the black sections either side never run together. */
.act.brk{position:relative;overflow:hidden;padding:clamp(64px,9vw,112px) 0;
  background:radial-gradient(60% 120% at 85% 0%,rgba(125,211,252,.35),transparent 60%),
             radial-gradient(50% 100% at 0% 100%,rgba(6,182,212,.28),transparent 65%),
             linear-gradient(120deg,#07446A 0%,#0B5E8E 45%,#0C73AD 100%)}
.act.brk::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.act.brk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.act.brk>*{position:relative}
.brk .kick{display:inline-block;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:99px;
  padding:6px 15px;font-size:clamp(13px,1.4vw,15px);letter-spacing:.01em;margin-bottom:18px}
.brk h2{color:#fff;text-shadow:0 2px 30px rgba(3,30,48,.35)}
.brk .sub{color:rgba(240,249,255,.9)!important}
.brk .sub[style*="--ink"]{color:#fff!important;font-weight:500}
.brk .quotes{margin-top:clamp(26px,4vw,44px)}
.brk .q{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.brk .q p{color:#fff}
.brk .q .who{color:rgba(224,242,254,.85)}

/* phone section, phones only: the caption's line runs up the card's side, and what it names is outlined */
@media(max-width:899px){
  .callsvg{display:block!important}
  .callsvg .cl{stroke-width:1.8}
  .callui .cohl{outline:2px solid #7FD3FF;outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px rgba(127,211,255,.16);transition:outline-color .3s,box-shadow .3s}
  .co{z-index:10}
}
@media(max-width:899px) and (prefers-reduced-motion:reduce){ .callsvg{display:none!important} }
/* Widgets, phones only: the Home Screen and Lock Screen iPhones side by side. Everything inside them
   is already sized from --pw, so they simply get half the width each. */
@media(max-width:699px){
  .swphones{flex-wrap:nowrap;gap:12px;align-items:flex-start}
  .swp{flex:1 1 0;min-width:0;gap:10px}
  .device.sp.wphone{--pw:calc((100vw - 2 * var(--pad) - 12px) / 2)}
  .wphone .spstatus{font-size:calc(var(--pw) * .05)}
  .wphone .spstatus svg{height:calc(var(--pw) * .038);width:auto}
  .swp figcaption{font-size:9.5px;letter-spacing:.1em}
}
/* "The way it is now" cards on phones: the blue label is back, and each desktop screenshot shows its
   whole window (the window takes the screenshot's own proportions) instead of a zoomed-in corner. */
@media(max-width:699px){
  .pcard .peyebrow{display:block;font-size:13px;margin:0 0 6px}
  .pstage:not(.pstage-phone){height:calc((84vw - 40px) / 1.6 + 16px)}
  .pstage:not(.pstage-phone) .pview img,.pcard.play .pstage:not(.pstage-phone) .pview img,
  .pcard[data-mode="crm"] .pview img,.pcard[data-mode="crm"].play .pview img{transform:none!important;animation:none!important;object-position:0 0}
  .pstage-phone{top:124px}
}
/* Pathways: the pills ride ABOVE each screen */
.pwstage{padding-top:86px;padding-bottom:20px}
.pwreel{bottom:0}
.pwtag{top:auto;bottom:calc(100% + var(--above,40px))}
/* "The way it is now" cards on phones: the three points stack under the screenshot and stay,
   arriving one after another instead of flashing past one at a time. */
@media(max-width:699px){
  .pcard{height:540px}
  .pstage:not(.pstage-phone){top:148px;transform:none}
  .pproof,.pcard[data-mode="phone"] .pproof{top:auto;bottom:0;height:auto;display:grid;gap:9px;padding:0 0 20px}
  .pcard[data-mode="phone"] .pproof{left:0;right:0;padding:56px 18px 20px;background:linear-gradient(transparent,var(--surface) 34%)}
  .pproof li,.pcard[data-mode="phone"] .pproof li{position:relative;left:auto;right:auto;bottom:auto;font-size:13.5px;line-height:1.35;
    text-align:left;padding-left:16px;opacity:0;transform:translateY(6px);animation:none}
  .pproof li::before{display:block;content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:99px;background:var(--blue)}
  .pcard.play .pproof li{animation:pstay .6s ease both}
  .pcard.play .pproof li:nth-child(1){animation-delay:.4s}
  .pcard.play .pproof li:nth-child(2){animation-delay:1.3s}
  .pcard.play .pproof li:nth-child(3){animation-delay:2.2s}
  @keyframes pstay{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media(max-width:699px) and (prefers-reduced-motion:reduce){
  .pproof li,.pproof li:first-child{opacity:1!important;transform:none!important;animation:none!important}
}

/* ================= ACT 14: What it runs — never-ending rows of features ================= */
.mq{display:grid;gap:12px;margin-top:clamp(30px,4vw,46px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mqrow{overflow:hidden}
.mqtrack{display:flex;width:max-content;gap:10px;animation:mqslide var(--mqdur,70s) linear infinite;animation-delay:calc(var(--mqdur,70s) * var(--mqoff,0%) / 100%)}
.mqtrack span{flex:none;border:1px solid var(--line2);border-radius:999px;padding:10px 18px;font-size:15px;color:var(--dim);white-space:nowrap;
  background:rgba(255,255,255,.02);transition:border-color .25s,color .25s}
.mqtrack span:hover{border-color:var(--blue);color:var(--ink)}
.mqtrack .mqgap{padding:0;border:0;width:0;background:none}
.mq:hover .mqtrack{animation-play-state:paused}
@keyframes mqslide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 5px))}}
.mq-m{display:none}
@media(max-width:699px){
  .mq-d{display:none}.mq-m{display:grid;gap:9px}
  .mqtrack{gap:8px}.mqtrack span{padding:8px 14px;font-size:13.5px}
  @keyframes mqslide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 4px))}}
}
@media(prefers-reduced-motion:reduce){
  .mqtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .mqtrack span[aria-hidden]{display:none}
  .mq{-webkit-mask-image:none;mask-image:none;padding-inline:var(--pad)}
}
/* four testimonials: two by two on desktop */
@media(min-width:900px){ .brk .quotes{grid-template-columns:repeat(3,1fr);max-width:1080px;margin-inline:auto} }

/* the tour form: honeypot, and the calendar step */
.hpf{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hsmeet{margin-top:22px;min-height:660px;background:#fff;border-radius:16px;overflow:hidden}
.hsmeet:empty{display:none}
.hsmeet iframe{width:100%!important;min-height:660px;border:0}
.f button[disabled]{opacity:.7;cursor:progress}

/* Book a tour: its own band, so it reads as the next step and not more of "Why any of this works" */
.act.tourband{position:relative;overflow:hidden;
  background:radial-gradient(55% 60% at 50% 0%,rgba(28,167,236,.30),transparent 70%),
             radial-gradient(40% 50% at 100% 100%,rgba(6,182,212,.18),transparent 70%),
             linear-gradient(180deg,#0B2A42 0%,#0A2236 55%,#071826 100%);
  border-top:1px solid rgba(127,211,255,.22)}
.act.tourband>*{position:relative}
.tourband .kick{color:#7FD3FF}
.tourband .formwrap{background:rgba(6,14,22,.72);border-color:rgba(127,211,255,.22);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
.tourband .fld input,.tourband .fld textarea{background:rgba(0,0,0,.55)}

/* legal pages: Privacy Policy, Terms of Service -- same words as the old site, the new site's look */
.legalhero{padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px)}
.legalhero h1{color:#fff;font-size:clamp(38px,6vw,68px);margin:0;text-shadow:0 2px 30px rgba(3,30,48,.35)}
.legalhero .sub{max-width:54ch;margin:16px auto 0}
.legal{background:var(--ground);padding:clamp(40px,6vw,80px) var(--pad) clamp(70px,9vw,120px)}
.legalgrid{max-width:1120px;margin:0 auto;display:grid;gap:clamp(22px,3vw,40px);align-items:start}
@media(min-width:960px){.legalgrid{grid-template-columns:250px minmax(0,1fr)}}
.legaltoc{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:18px 18px 16px}
@media(min-width:960px){.legaltoc{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto}}
.legaltoc-h{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legaltoc nav{display:grid;gap:2px}
.legaltoc nav a{display:block;padding:7px 10px;border-radius:9px;font-size:14px;line-height:1.35;color:var(--dim);transition:background .2s,color .2s}
.legaltoc nav a:hover{background:rgba(28,167,236,.1);color:var(--ink)}
.legalother{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--blue)}
@media(max-width:959px){.legaltoc nav{grid-template-columns:1fr 1fr;gap:0 8px}.legaltoc nav a{font-size:13px;padding:6px 8px}}
.legalcard{border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:clamp(24px,4vw,52px)}
.legalbody{color:var(--dim);font-size:16.5px;line-height:1.75}
.legalbody h2{font-size:clamp(20px,2.1vw,25px);color:var(--ink);margin:40px 0 10px;letter-spacing:-.015em;scroll-margin-top:100px;
  padding-top:28px;border-top:1px solid var(--line)}
.legalbody h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legalbody p{margin:0 0 14px}
.legalbody ul,.legalbody ol{margin:0 0 16px;padding-left:22px}
.legalbody li{margin:6px 0}
.legalbody li::marker{color:var(--blue)}
.legalbody strong{color:var(--ink)}
.legalbody a{color:var(--blue);word-break:break-word}
.legalhelp{max-width:1120px;margin:clamp(24px,3vw,36px) auto 0;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;
  border:1px solid rgba(127,211,255,.22);border-radius:22px;padding:22px clamp(20px,3vw,32px);
  background:radial-gradient(60% 120% at 100% 0%,rgba(28,167,236,.22),transparent 60%),linear-gradient(120deg,#0B2A42,#0A2236)}
.legalhelp b{display:block;font-family:var(--disp);font-size:19px;color:#fff}
.legalhelp span{color:var(--dim);font-size:15px}
.legalhelp-acts{display:flex;flex-wrap:wrap;gap:10px}
footer p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* the footer's link style (display:block; padding 6px 0) was pushing the App Store badge 6px below the Android one */
.fcols .storebadge{display:inline-flex;padding:0}
.fcols .storebadge.apple{line-height:0}
.legalgrid>*{min-width:0}
@media(max-width:959px){.legaltoc nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.legaltoc nav a{overflow-wrap:anywhere}}
@media(max-width:420px){.legaltoc nav{grid-template-columns:minmax(0,1fr)}}
.legalbody em,.legalbody p{overflow-wrap:anywhere}

/* ---------- /tour: the page an ad lands on ----------------------------------------------------
   One screen. Headline (swapped by ?a=), three bullets, the three-field form, one testimonial
   beside it. Everything here reuses the home page's tokens and the existing .formwrap / .f /
   .fld / .q rules -- this is layout only, no second design system. */
.act.tourhero{padding:clamp(34px,5vw,66px) 0 clamp(44px,6vw,80px)}
.tourgrid{display:grid;gap:clamp(26px,4vw,44px);align-items:start}
@media(min-width:900px){.tourgrid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(34px,4vw,60px)}}
.tourcopy h1{color:#fff;font-size:clamp(31px,5.4vw,56px);text-shadow:0 2px 30px rgba(3,30,48,.35)}
.tourcopy .sub{margin:16px 0 0;max-width:40ch}
.tourpoints{list-style:none;margin:clamp(22px,3vw,30px) 0 0;padding:0;display:grid;gap:14px}
.tourpoints li{position:relative;padding-left:30px;color:var(--dim);font-size:16px;line-height:1.5}
.tourpoints li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:999px;
  background:var(--grad);box-shadow:0 0 0 4px rgba(28,167,236,.16)}
.tourpoints b{color:var(--ink);font-family:var(--disp);font-weight:600;display:block;font-size:16.5px;letter-spacing:-.01em}
.tourcall{margin:clamp(20px,3vw,28px) 0 0;font-family:var(--mono);font-size:14.5px;color:var(--dim)}
.tourcall a{color:#7FD3FF}
.tourquote{margin:clamp(22px,3vw,30px) 0 0;background:rgba(6,14,22,.55);border-color:rgba(127,211,255,.2)}
.tourquote p{margin:0 0 12px}
.tourform .formwrap{margin-top:0}
@media(min-width:900px){.tourform{position:sticky;top:78px}}
.tourform .formwrap>.fhead{margin:0 0 18px}
.fhead b{display:block;font-family:var(--disp);font-weight:600;font-size:19px;color:#fff;letter-spacing:-.015em}
.fhead span{display:block;margin-top:5px;font-size:14px;color:var(--dim)}
.fld label .opt{color:var(--muted);letter-spacing:.04em}
.fld label .rq{color:#7FD3FF;letter-spacing:0}
.f .offers{grid-column:1/-1}
/* the landing form sits in a ~420px column: one field per row reads better there than the home
   page's two, and it keeps the three required fields obviously three */
.tourform .f{grid-template-columns:minmax(0,1fr)}
.offers{margin:16px 0 0;padding:16px 17px;border:1px solid rgba(127,211,255,.24);border-radius:16px;
  background:rgba(28,167,236,.08);display:grid;gap:11px}
.offers p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.5}
.offers b{color:#fff;font-family:var(--disp);font-weight:600}
.offers .beta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* once the form is behind them the calendar gets the whole width -- 660px of iframe does not
   belong in a 420px column */
body.t1a-booked .tourgrid{grid-template-columns:minmax(0,1fr)}
body.t1a-booked .tourcopy{display:none}
body.t1a-booked .tourform{position:static}

/* ---------- the hero's offer line ----------------------------------------------------------
   The three offers, compressed to one sentence, sitting under the hero's button row so it reads
   as what you get if you press it -- not as a fourth headline competing with "Get out from
   behind the desk." The full version lives at the tour form.
   On phones the hero's own button row is hidden (the header and the pinned bottom bar carry
   Book a tour) and `.depts` is pulled up 60px, so this line becomes the last thing above the
   slider and needs its own clearance or the slider tucks over it. */
.heropromise{margin:22px auto 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--dim)}
.heropromise b{color:#fff;font-family:var(--disp);font-weight:600}
@media(min-width:760px){.herocopy .heropromise{margin-left:0}}
@media(max-width:759px){.dept-hero .herocopy .heropromise{margin-bottom:68px}}

/* the hero headline: the logo on desktop, the words on phones (the logo is already in the top bar there) */
.heroh1{margin:0 0 clamp(14px,2vw,22px)}
.herologo{display:none;width:min(520px,100%);height:auto}
@media(min-width:900px){
  .heroh1 .herowords{display:none}
  .herologo{display:block;margin:2px 0 6px}
}

/* ================= The offer, twice: under the thesis and again after Gizmos =================
   Same navy as the Book a tour section at the foot of the page, so the three read as one promise
   rather than three different asks. */
.act.ctaband{position:relative;overflow:hidden;padding:clamp(56px,7vw,92px) 0;
  background:radial-gradient(55% 60% at 50% 0%,rgba(28,167,236,.26),transparent 70%),
             radial-gradient(40% 50% at 100% 100%,rgba(6,182,212,.16),transparent 70%),
             linear-gradient(180deg,#0B2A42 0%,#0A2236 55%,#071826 100%);
  border-top:1px solid rgba(127,211,255,.22);border-bottom:1px solid rgba(127,211,255,.14)}
.act.ctaband>*{position:relative}
.ctaband .kick{color:#7FD3FF}
.ctaband h2{font-size:clamp(28px,4.4vw,52px)}
.ctaband .sub{max-width:56ch;margin-inline:auto}
/* The same offer strip in the /tour/ hero, where the copy column is left-aligned rather than
   centred. No new styling — only the alignment and the spacing change. */
.tourrisk{justify-content:flex-start;margin:clamp(16px,2vw,20px) 0 0}
@media (max-width:760px){.tourrisk{justify-content:center}}
.ctapoints{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:clamp(22px,3vw,30px) 0 0;padding:0}
.ctapoints li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink);
  border:1px solid rgba(127,211,255,.28);background:rgba(255,255,255,.05);border-radius:999px;padding:9px 16px}
.ctapoints li::before{content:"";width:13px;height:7px;border:solid var(--good);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg);margin-top:-4px}
.ctaacts{justify-content:center;margin-top:clamp(22px,3vw,30px)}
.ctacall{border:1px solid rgba(127,211,255,.45);color:var(--ink)}
.ctacall:hover{border-color:var(--blue)}
.ctafine{margin:16px auto 0;max-width:52ch;color:var(--muted);font-size:14.5px}
@media(max-width:600px){
  .ctapoints{gap:8px}.ctapoints li{font-size:13.5px;padding:8px 13px}
  .ctaacts{flex-direction:column;align-items:stretch}
  .ctaacts .btn{width:100%;text-align:center}
}

/* Video testimonial above the quote cards (ACT 16) */
.tvid{margin:clamp(26px,4vw,44px) auto 0;max-width:880px}
.tvid-frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b1a26;
  border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 60px rgba(3,30,48,.35)}
.tvid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tvid figcaption{text-align:center;margin-top:16px}
.tvid-line{display:block;font-family:var(--disp);font-weight:500;font-style:italic;color:#fff;font-size:clamp(16px,1.8vw,19px);line-height:1.45}
.tvid .who{display:block;font-family:var(--mono);font-size:11.5px;color:rgba(224,242,254,.85);margin-top:8px}