/* CocoLabs product pages. Shared by cocoroute.html, cocomio.html and cocotrado.html; generated pages, edit products-data.js and build-products.js instead. */
:root{
  --bg:#ffffff; --panel:#FAF8F4; --ink:#2A2438; --muted:#5B5470; --line:#EFEAE2; --dot:#E4DCCF;
  --chip:#F7F3EC; --card:#ffffff; --shadow:rgba(42,36,56,.28);
  --mio:#58cc02; --mio-dark:#46a302; --mio-on:#10330a; --mio-text:#235a00; --mio-tint:#F2FBEA; --mio-line:#D9F2C4;
  --trado:#6B3FE0; --trado-dark:#4B26B8; --trado-on:#ffffff; --trado-text:#4B26B8; --trado-tint:#F5F1FF; --trado-line:#E3DAFF;
  --route:#1C7ED6; --route-dark:#1462A8; --route-on:#ffffff; --route-text:#1864AB; --route-tint:#E7F1FC; --route-line:#C3DDF7;
  --night:#2A2438; --night-sub:#D5CFE3; --warn:#B45309; --warn-tint:#FFF4E5;
  --display:'Fredoka',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,5vw,80px);
  --bounce:cubic-bezier(.34,1.56,.64,1); --spring:cubic-bezier(.68,-.55,.27,1.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#16131D; --panel:#1E1A28; --ink:#F3F0F8; --muted:#B7B0C6; --line:#302A3C; --dot:#433B52;
    --chip:#241F30; --card:#1B1724; --shadow:rgba(0,0,0,.55);
    --mio-text:#9BE36A; --mio-tint:#1B2716; --mio-line:#2F4A22;
    --trado-text:#C4B2FF; --trado-tint:#221B38; --trado-line:#3B2F66;
    --route-text:#74B6F2; --route-tint:#0F1E30; --route-line:#1F3A5C;
    --night:#0F0D14; --night-sub:#B7B0C6; --warn:#F5B36B; --warn-tint:#2E2116;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16131D; --panel:#1E1A28; --ink:#F3F0F8; --muted:#B7B0C6; --line:#302A3C; --dot:#433B52;
  --chip:#241F30; --card:#1B1724; --shadow:rgba(0,0,0,.55);
  --mio-text:#9BE36A; --mio-tint:#1B2716; --mio-line:#2F4A22;
  --trado-text:#C4B2FF; --trado-tint:#221B38; --trado-line:#3B2F66;
  --route-text:#74B6F2; --route-tint:#0F1E30; --route-line:#1F3A5C;
  --night:#0F0D14; --night-sub:#B7B0C6; --warn:#F5B36B; --warn-tint:#2E2116;
}
/* the product in view lends its colour to the page; the chrome stays CocoLabs */
body[data-product="route"]{--acc:var(--route);--acc-dark:var(--route-dark);--acc-on:var(--route-on);--acc-text:var(--route-text);--acc-tint:var(--route-tint);--acc-line:var(--route-line)}
body[data-product="mio"]{--acc:var(--mio);--acc-dark:var(--mio-dark);--acc-on:var(--mio-on);--acc-text:var(--mio-text);--acc-tint:var(--mio-tint);--acc-line:var(--mio-line)}
body[data-product="trado"]{--acc:var(--trado);--acc-dark:var(--trado-dark);--acc-on:var(--trado-on);--acc-text:var(--trado-text);--acc-tint:var(--trado-tint);--acc-line:var(--trado-line)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;transition:background-color .6s ease,color .6s ease}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;line-height:1.05}
p{margin:0}
:focus-visible{outline:3px solid var(--acc,#6B3FE0);outline-offset:3px;border-radius:12px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header (same as the main site) */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s,background-color .6s ease}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:26px;font-weight:700}
.brand-mark{width:40px;height:40px;display:block;flex-shrink:0}
.nav{display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px}
.nav > a,.nav-products-btn{padding:10px 14px;border-radius:12px;color:var(--muted)}
.nav > a:hover,.nav-products-btn:hover{color:var(--ink);background:var(--chip)}
.nav-products{position:relative}
.nav-products-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;background:none;border:0;cursor:pointer;color:var(--ink)}
.nav-products-btn[aria-expanded="true"]{background:var(--chip)}
.nav-products-btn svg{transition:transform .2s}
.nav-products-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);width:min(680px,90vw);background:var(--card);border:2px solid var(--line);border-radius:28px;box-shadow:0 40px 80px -30px var(--shadow);padding:14px;display:flex;flex-direction:column;gap:4px}
.menu-label{padding:8px 14px 4px;font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--muted)}
.menu-item{display:flex;align-items:center;gap:16px;padding:14px;border-radius:20px;width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.menu-item:hover,.menu-item:focus-visible,.menu-item.now{background:var(--panel)}
.menu-item .txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-item .name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--display);font-size:22px;font-weight:700}
.menu-item .desc{font-size:15px;color:var(--muted)}
.menu-item .dom{font-size:14px;font-weight:800;white-space:nowrap}
.menu-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding:12px 14px;border-top:2px solid var(--line);font-size:15px;color:var(--muted)}
.menu-foot a{font-weight:800;color:var(--ink)}
.head-cta{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;width:48px;height:48px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.mobile-nav{border-top:1px solid var(--line);padding-block:12px 20px;display:flex;flex-direction:column;gap:6px}
.mobile-nav a,.mobile-nav button{padding:12px 4px;font-weight:700;font-size:17px;background:none;border:0;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.mobile-nav .m-prod{display:flex;align-items:center;gap:12px;padding:10px 4px}
.mobile-nav .m-prod small{display:block;font-weight:600;color:var(--muted);font-size:13px}

/* Buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:18px;font-weight:800;font-size:16px;border:0;cursor:pointer;font-family:var(--body);transition:transform .08s,box-shadow .08s;color:inherit}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 transparent!important}
.btn-dark{background:var(--night);color:#fff;box-shadow:0 4px 0 #120F1A}
:root[data-theme="dark"] .btn-dark{background:#F3F0F8;color:#16131D;box-shadow:0 4px 0 #9d96ad}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-dark{background:#F3F0F8;color:#16131D;box-shadow:0 4px 0 #9d96ad}}
.btn-acc{background:var(--acc);color:var(--acc-on);box-shadow:0 5px 0 var(--acc-dark)}
.btn-ghost{background:var(--card);color:var(--ink);border:2px solid var(--line);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:var(--chip);font-weight:700;font-size:14px;color:var(--muted)}
.tag{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.04em}
.t-mio{color:var(--mio-text)}.t-trado{color:var(--trado-text)}.t-route{color:var(--route-text)}
.bg-mio{background:var(--mio-tint)}.bg-trado{background:var(--trado-tint)}.bg-route{background:var(--route-tint)}
.t-acc{color:var(--acc-text)}.bg-acc{background:var(--acc-tint)}

/* day / night switch */
.daynight{background:none;border:0;padding:4px;cursor:pointer;border-radius:99px}
.dn-track{position:relative;display:block;width:80px;height:42px;border-radius:99px;background:#9FDBFF;box-shadow:inset 0 3px 0 rgba(0,0,0,.08);overflow:hidden;transition:background-color .6s ease}
.dn-knob{position:absolute;top:5px;left:5px;width:32px;height:32px;border-radius:99px;background:#FFC83D;box-shadow:0 0 0 4px rgba(255,200,61,.35),0 3px 0 #D99A00;transition:transform .6s var(--spring),background-color .4s}
.dn-crater{position:absolute;border-radius:99px;background:#C9C3DD;opacity:0;transition:opacity .4s ease .2s}
.dn-crater.c1{width:9px;height:9px;left:7px;top:8px}.dn-crater.c2{width:6px;height:6px;left:17px;top:18px}
.dn-cloud{position:absolute;right:8px;top:14px;width:26px;height:10px;border-radius:99px;background:#fff;box-shadow:6px -5px 0 -1px #fff;transition:transform .6s var(--bounce),opacity .4s}
.dn-star{position:absolute;width:4px;height:4px;border-radius:99px;background:#fff;opacity:0;transform:scale(0);transition:opacity .4s ease,transform .5s var(--bounce)}
.dn-star.s1{left:14px;top:10px}.dn-star.s2{left:24px;top:24px;width:3px;height:3px}.dn-star.s3{left:34px;top:13px;width:3px;height:3px}
.daynight[aria-checked="true"] .dn-track{background:#2B2350}
.daynight[aria-checked="true"] .dn-knob{transform:translateX(38px) rotate(200deg);background:#EDE9F7;box-shadow:0 0 0 4px rgba(237,233,247,.15),0 3px 0 #9d96ad}
.daynight[aria-checked="true"] .dn-crater{opacity:1}
.daynight[aria-checked="true"] .dn-cloud{transform:translateY(30px);opacity:0}
.daynight[aria-checked="true"] .dn-star{opacity:1;transform:scale(1)}

/* Product hero */
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted);flex-wrap:wrap}
.crumb b{color:var(--acc-text)}
.p-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:44px 56px;min-height:calc(100svh - 81px)}
.p-hero::before{content:"";position:absolute;inset:-20px calc(50% - 50vw) 0;z-index:-1;background:linear-gradient(180deg,var(--acc-tint),var(--bg));transition:background .6s ease}
.p-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.p-copy .plogo{width:84px;height:84px;filter:drop-shadow(0 12px 16px var(--shadow));animation:popIn .7s var(--bounce) both}
.p-copy h1{font-size:clamp(36px,5.2vw,64px)}
.p-copy .lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:600px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.for{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.for .lab{font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--muted);margin-right:4px}
.for .pill{background:var(--card);border:2px solid var(--acc-line);color:var(--ink)}
.p-copy .w{display:inline-block;animation:dropIn .9s var(--bounce) both;animation-delay:calc(var(--d) * .08s + .1s)}
.preview{position:relative;display:flex;justify-content:center}
.screen{width:min(100%,420px);background:var(--card);border:2px solid var(--line);border-radius:28px;padding:18px;box-shadow:0 40px 80px -30px var(--shadow);display:flex;flex-direction:column;gap:12px;animation:popIn .7s var(--bounce) both .25s, bob 5s ease-in-out infinite 1s}
.screen .bar{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:18px}
.screen .bar i{width:10px;height:10px;border-radius:99px;background:var(--line);display:inline-block}
.screen .bar i:first-child{background:var(--acc)}
.mini{display:flex;flex-direction:column;gap:8px}
.mini .row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--panel);font-size:14px;font-weight:600}
.mini .row .av{width:30px;height:30px;border-radius:99px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;color:#fff;background:var(--acc);flex-shrink:0}
.mini .row .r{margin-left:auto;font-weight:800;color:var(--acc-text);white-space:nowrap}
.mini .row.hi{background:var(--acc-tint);border:2px solid var(--acc-line)}
.mini .big{font-family:var(--display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.mini .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini .col{background:var(--panel);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:110px}
.mini .col b{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.mini .card{background:var(--card);border:2px solid var(--line);border-radius:10px;padding:6px 8px;font-size:12px;font-weight:700;line-height:1.2}
.mini .card.hi{border-color:var(--acc);background:var(--acc-tint)}
.punch{width:110px;height:110px;border-radius:99px;background:var(--acc);color:var(--acc-on);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px;box-shadow:0 7px 0 var(--acc-dark);margin:6px auto;position:relative}
.punch::after{content:"";position:absolute;inset:-10px;border-radius:99px;border:3px solid var(--acc);opacity:.5;animation:ring 1.8s ease-out infinite}
.spark{position:absolute;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--card);border:2px solid var(--acc-line);box-shadow:0 10px 20px -8px var(--shadow);animation:bob 4s ease-in-out infinite;color:var(--acc-text)}
.spark.a{left:-6px;top:24px;--r:-6deg}.spark.b{right:-4px;top:40%;--r:5deg;animation-delay:.8s}.spark.c{left:8%;bottom:10px;--r:4deg;animation-delay:1.6s}

/* Sections */
.sec{padding-block:56px}
.sec.alt{position:relative;isolation:isolate}
.sec.alt::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--panel);transition:background-color .6s ease}
.sec-h{display:flex;flex-direction:column;gap:10px;max-width:760px;margin-bottom:32px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-text)}
.sec-h h2{font-size:clamp(30px,3.6vw,46px)}
.sec-h p{color:var(--muted);font-size:18px}

/* Today vs with the product */
.shift{display:flex;flex-direction:column;gap:14px}
.shift-row{display:grid;grid-template-columns:1fr 56px 1fr;gap:12px;align-items:stretch}
.shift .box{border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;transition:transform .25s var(--bounce)}
.shift .box b{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.15}
.shift .box p{color:var(--muted);font-size:15px}
.shift .today{background:var(--card);border:2px solid var(--line)}
.shift .today .lab{color:var(--muted)}
.shift .after{background:var(--acc-tint);border:2px solid var(--acc-line)}
.shift .after p{color:var(--ink)}
.shift .lab{font-size:11px;font-weight:800;letter-spacing:.08em}
.shift .after .lab{color:var(--acc-text)}
.shift .arrow{display:grid;place-items:center;color:var(--acc);font-size:0}
.shift .arrow svg{width:28px;height:28px}
.shift-row:hover .after{transform:translateY(-3px)}

/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:24px;background:var(--card);border:2px solid var(--line);box-shadow:0 6px 0 var(--line);cursor:pointer;transition:transform .25s var(--bounce),box-shadow .25s,border-color .25s;min-width:0}
.feat:hover{transform:translateY(-4px)}
.feat:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.feat[aria-expanded="true"]{border-color:var(--acc);box-shadow:0 6px 0 var(--acc-line)}
.feat .ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--acc-tint);color:var(--acc-text)}
.feat .ic svg{width:26px;height:26px}
.feat[aria-expanded="true"] .ic{background:var(--acc);color:var(--acc-on);animation:jelly .5s var(--bounce)}
.feat h3{font-size:20px}
.feat .short{color:var(--muted);font-size:15px}
.feat .more{display:none;flex-direction:column;gap:8px;padding-top:10px;border-top:2px dashed var(--line);font-size:15px}
.feat[aria-expanded="true"] .more{display:flex;animation:rise .4s ease both}
.feat .more .who{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--acc-text)}
.feat .hint{margin-top:auto;font-size:13px;font-weight:800;color:var(--acc-text);display:flex;align-items:center;gap:6px}
.feat .hint svg{width:14px;height:14px;transition:transform .2s}
.feat[aria-expanded="true"] .hint svg{transform:rotate(180deg)}

/* Roles */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.role{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:24px;background:var(--card);border:2px solid var(--line)}
.role .who{display:flex;align-items:center;gap:12px}
.role .av{width:46px;height:46px;border-radius:99px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px;color:#fff;background:var(--acc);flex-shrink:0}
.role h3{font-size:20px}
.role .sub{font-size:13px;font-weight:700;color:var(--muted)}
.role ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px}
.role li{display:flex;gap:10px;align-items:flex-start}
.role li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:3px;border-radius:99px;background:var(--acc-tint);border:2px solid var(--acc-line)}

/* A day with the product: a small vertical timeline, like the main page */
.day{position:relative;display:flex;flex-direction:column;gap:18px;max-width:820px;margin-inline:auto;padding-block:8px}
.day::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:99px;background:var(--acc)}
.step{display:grid;grid-template-columns:1fr 48px 1fr;gap:12px;align-items:center}
.step .t{font-family:var(--display);font-weight:700;font-size:22px;color:var(--acc-text);font-variant-numeric:tabular-nums}
.step .dotm{position:relative;z-index:1;width:22px;height:22px;border-radius:99px;background:var(--acc);border:4px solid var(--bg);box-shadow:0 0 0 3px var(--acc-line);justify-self:center;transition:transform .3s var(--bounce)}
.step:hover .dotm{transform:scale(1.35)}
.step .cardm{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:16px 18px;font-size:15px;display:flex;flex-direction:column;gap:4px}
.step .cardm b{font-family:var(--display);font-size:18px;font-weight:700}
.step .cardm p{color:var(--muted)}
.step .t{text-align:right}
.step.flip .t{grid-column:3;text-align:left;grid-row:1}
.step.flip .cardm{grid-column:1;grid-row:1}
.step.flip .dotm{grid-column:2;grid-row:1}

/* Facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.fact{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--card);border:2px solid var(--line);font-size:15px}
.fact .ck{flex-shrink:0;width:28px;height:28px;border-radius:99px;background:var(--acc);color:var(--acc-on);display:grid;place-items:center}
.fact .ck svg{width:16px;height:16px}
.fact b{display:block;font-family:var(--display);font-size:17px;font-weight:700}
.fact span{color:var(--muted)}

/* FAQ */
.faq{max-width:820px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:0 20px;transition:border-color .2s}
.faq details[open]{border-color:var(--acc-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-family:var(--display);font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:28px;height:28px;border-radius:99px;background:var(--acc-tint);color:var(--acc-text);display:grid;place-items:center;font-size:20px;line-height:1;transition:transform .3s var(--bounce)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--acc);color:var(--acc-on)}
.faq .ans{padding:0 0 18px;color:var(--muted);font-size:16px;max-width:66ch}

/* Other products */
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.other{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;background:var(--card);border:2px solid var(--line);cursor:pointer;transition:transform .25s var(--bounce),border-color .2s}
.other:hover{transform:translateY(-3px)}
.other:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.other .logo{width:52px;height:52px;flex-shrink:0}
.other .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.other b{font-family:var(--display);font-size:20px;font-weight:700}
.other small{font-size:14px;color:var(--muted)}
.other .go{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap}

/* CTA band */
.cta-band{margin-block:8px 64px;border-radius:32px;background:var(--acc);color:var(--acc-on);padding:clamp(28px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band h2{font-size:clamp(28px,3.4vw,42px)}
.cta-band p{opacity:.85;font-size:17px;max-width:520px}
.cta-band .btn-dark{background:var(--night);color:#fff;box-shadow:0 4px 0 #120F1A}
.cta-band .btn-ghost{background:rgba(255,255,255,.92);color:#2A2438;border-color:transparent}
.cta-band .blob{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:99px;background:rgba(255,255,255,.14);animation:bob 6s ease-in-out infinite}

/* Company details: label and value rows */
.kv{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);margin:0;border:2px solid var(--line);border-radius:20px;overflow:hidden}
.kv dt,.kv dd{margin:0;padding:14px 18px;border-top:1px solid var(--line)}
.kv dt{font-weight:800;font-size:15px;color:var(--muted);background:var(--panel)}
.kv dt:first-of-type,.kv dt:first-of-type+dd{border-top:0}
.kv a{font-weight:700;text-decoration:underline}
@media (max-width: 600px){.kv{grid-template-columns:1fr}.kv dd{border-top:0;padding-top:0}.kv dt{background:none;padding-bottom:4px}}

/* Footer (same as the main site) */
.site-foot{border-top:2px solid var(--line);padding-block:48px 32px;font-size:15px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot-brand p{max-width:300px}
.foot-mail{font-weight:800;color:var(--ink)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-h{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.foot-col a{font-weight:700;color:var(--ink)}
.foot-col a:hover,.foot-mail:hover{text-decoration:underline}
.foot-base{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
@media (max-width: 860px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
@media (max-width: 520px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Reveal on scroll (armed by JS only) */
.rv{opacity:0;transform:translateY(22px) scale(.98)}
.rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--bounce)}
@keyframes popIn{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-60px) rotate(-4deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) * -1))}}
@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.12,.9)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}100%{transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.swap{animation:rise .5s ease both}

@media (max-width: 1100px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 960px){
  .nav,.head-cta .btn{display:none}
  .menu-toggle{display:inline-flex}
  .p-hero{grid-template-columns:1fr;gap:28px;padding-block:28px 40px}
  .preview{order:2}
  .shift-row{grid-template-columns:1fr;gap:6px}
  .shift .arrow svg{transform:rotate(90deg)}
  .day::before{left:11px;margin:0}
  .step,.step.flip{grid-template-columns:26px 1fr;gap:10px}
  .step .t,.step.flip .t{grid-column:2;grid-row:1;text-align:left;font-size:16px}
  .step .dotm,.step.flip .dotm{grid-column:1;grid-row:1/3;align-self:start;margin-top:4px}
  .step .cardm,.step.flip .cardm{grid-column:2;grid-row:2}
}
@media (max-width: 600px){.feat-grid{grid-template-columns:1fr}.ctas .btn{width:100%}.cta-band .ctas{width:100%}.spark{display:none}.mini .row{font-size:13px}.mini .row .r{white-space:normal;text-align:right}}