:root{
    --bg:#ffffff;
    --surface:#f3f3f8;
    --surface-2:#ececf2;
    --field:#ececf2;
    --text:#050506;
    --secondary:#85858f;
    --secondary-2:#6b6b72;
    --divider:#dbdbdf;
    --accent:#FF3B30;
    --accent-2:#FF6A33;
    --accent-soft:rgba(255,59,48,.10);
    --accent-softer:rgba(255,59,48,.05);
    --shadow:rgba(0,0,0,.10);
    --ring:rgba(255,59,48,.32);
    --r:24px;
    --max:1120px;
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --ease:cubic-bezier(.2,.8,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.4,.5,1);
    --ease-smooth:cubic-bezier(.45,0,.15,1);
    --ease-amb:cubic-bezier(.37,0,.63,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font);background:var(--bg);color:var(--text);
    -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
    text-rendering:optimizeLegibility}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--accent);color:#fff}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

  /* page load progress */
  .page-load-progress{position:fixed;top:0;left:0;height:2px;width:100%;
    transform:scaleX(0);transform-origin:0 50%;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    z-index:100;box-shadow:0 0 12px var(--ring);
    transition:transform .25s var(--ease-out),opacity .35s var(--ease-out)}

  /* focus rings */
  a:focus-visible,button:focus-visible,.pill:focus-visible,.tcard:focus-visible,
  .faq .qh:focus-visible,.icon-tile:focus-visible,.widget-demo:focus-visible,.detail-card:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

  /* scroll reveal */
  .reveal{opacity:0;transform:translate3d(0,24px,0);will-change:opacity,transform}
  /* :not(.reveal-done) outranks component transitions (e.g. .detail-card's) so the
     entrance actually fades; afterwards hover transitions take back over */
  .reveal:not(.reveal-done){transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
    transition-delay:var(--reveal-delay,0ms)}
  .reveal.in{opacity:1;transform:none}
  .reveal.in.reveal-done{will-change:auto}
  @keyframes floatPhone{0%,100%{transform:rotate(-2deg) translate3d(0,0,0)}50%{transform:rotate(-1.4deg) translate3d(0,-10px,0)}}
  @keyframes sheetRise{0%{transform:translateY(34px);opacity:.4}100%{transform:translateY(0);opacity:1}}
  @keyframes scrollCue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateY(10px);opacity:0}}
  @keyframes heroIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* hero load-in stagger */
  .hero .wrap > *{animation:heroIn .85s var(--ease-out) both}
  .hero .eyebrow{animation-delay:.08s}
  .hero h1{animation-delay:.16s}
  .hero .lede{animation-delay:.24s}
  .hero .cta-row{animation-delay:.32s}
  .hero .phone-stage{animation-delay:.44s}
  .hero .scroll-cue{animation-delay:.56s}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  }

  /* shared icon */
  .ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,#fff,var(--surface));
    border:1px solid var(--divider);display:flex;align-items:center;justify-content:center;margin-bottom:20px;
    color:var(--accent);box-shadow:0 6px 16px -10px rgba(0,0,0,.25)}
  .ico svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

  /* nav — liquid glass */
  nav{position:sticky;top:0;z-index:50;transition:padding .5s var(--ease-out)}
  .nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:60px;
    border-radius:0;isolation:isolate;
    /* always a full transparent border so the box-model never reflows during transition */
    border:1px solid transparent;
    background:transparent;
    box-shadow:0 1px 0 0 rgba(219,219,223,.6);
    transition:max-width .55s var(--ease-out),margin .55s var(--ease-out),
      border-radius .55s var(--ease-out),border-color .45s var(--ease-out),
      box-shadow .55s var(--ease-out),height .45s var(--ease-out),padding .45s var(--ease-out)}
  /* layer 1: blurred/tinted glass body */
  .nav::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    background:rgba(255,255,255,.72);
    transform:translateZ(0);-webkit-transform:translateZ(0);
    will-change:border-radius,background;
    transition:background .55s var(--ease-out),box-shadow .55s var(--ease-out)}
  /* layer 2: specular sheen + inner top highlight (the "liquid" depth) */
  .nav::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),
      radial-gradient(120% 90% at 50% -30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
    box-shadow:inset 0 1px 0 0 rgba(255,255,255,.6);
    opacity:0;transition:opacity .55s var(--ease-out)}

  nav.scrolled{padding:12px 0}
  nav.scrolled .nav{max-width:980px;margin-left:auto;margin-right:auto;height:54px;
    border-radius:22px;border-color:rgba(255,255,255,.5);
    box-shadow:
      0 14px 38px -16px rgba(0,0,0,.26),
      0 4px 12px -6px rgba(0,0,0,.10),
      inset 0 0 0 .5px rgba(255,255,255,.45)}
  nav.scrolled .nav::before{background:rgba(255,255,255,.82);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  nav.scrolled .nav::after{opacity:1}
  .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em}
  .brand-icon{width:28px;height:28px;border-radius:8px;display:block;object-fit:cover;
    box-shadow:0 4px 12px -6px rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.10),inset 0 0 0 .5px rgba(255,255,255,.6);
    transition:transform .25s var(--ease-spring),box-shadow .25s}
  /* primary nav links — centered between brand and actions */
  .navlinks{display:flex;gap:30px;font-size:14px;font-weight:500;color:var(--secondary);
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .navlinks a{position:relative;padding:4px 0;transition:color .2s}
  .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
    background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform .3s var(--ease-out)}
  .navlinks a.active::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1)}
  .navlinks a.active,.navlinks a[aria-current="page"]{color:var(--text);font-weight:600}
  /* right-side actions cluster */
  .nav-actions{display:flex;align-items:center;gap:10px}
  .lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--divider);
    border-radius:999px;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
  .lang-switch.lang-switch-desktop{gap:4px;padding:0;border:0;background:transparent;box-shadow:none}
  .lang-switch button{font-family:inherit;height:30px;min-width:42px;padding:0 10px;border:0;border-radius:999px;
    background:transparent;color:var(--secondary-2);font-size:12px;font-weight:700;letter-spacing:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .18s var(--ease-spring)}
  .lang-switch button:active{transform:scale(.96)}
  .lang-switch button.is-active{background:var(--text);color:#fff}
  .lang-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .lang-switch-mobile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 6px 6px;padding:4px;
    border-radius:14px;background:var(--surface)}
  .lang-switch-mobile button{height:38px;font-size:13px}
  /* mobile hamburger toggle */
  .nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--divider);border-radius:12px;
    background:rgba(255,255,255,.6);align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
    -webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,transform .2s var(--ease-spring)}
  .nav-toggle:active{transform:scale(.94)}
  .nav-toggle .bars{position:relative;width:18px;height:14px;display:block}
  .nav-toggle .bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--text);
    transition:transform .3s var(--ease-out),opacity .2s var(--ease-out),top .3s var(--ease-out)}
  .nav-toggle .bars span:nth-child(1){top:0}
  .nav-toggle .bars span:nth-child(2){top:6px}
  .nav-toggle .bars span:nth-child(3){top:12px}
  body.nav-open .nav-toggle .bars span:nth-child(1){top:6px;transform:rotate(45deg)}
  body.nav-open .nav-toggle .bars span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle .bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
  /* mobile dropdown menu */
  .nav-mobile{position:fixed;left:0;right:0;top:0;z-index:45;padding:76px 20px 22px;
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
    border-bottom:1px solid var(--divider);box-shadow:0 24px 48px -28px rgba(0,0,0,.3);
    transform:translateY(-100%);opacity:0;pointer-events:none;visibility:hidden;
    transition:transform .42s var(--ease-out),opacity .3s var(--ease-out),visibility 0s linear .42s}
  body.nav-open .nav-mobile{transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible;
    transition:transform .42s var(--ease-out),opacity .3s var(--ease-out),visibility 0s}
  .nav-mobile a{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:600;
    letter-spacing:-.01em;padding:15px 6px;border-bottom:1px solid var(--divider);color:var(--text);
    transition:color .2s,padding-left .2s var(--ease)}
  .nav-mobile a:last-of-type{border-bottom:none}
  .nav-mobile a::after{content:"\2192";color:var(--secondary);font-weight:400;transition:transform .25s var(--ease),color .2s}
  .nav-mobile a[aria-current="page"]{color:var(--accent)}
  .nav-mobile .pill{margin-top:18px;width:100%}
  .nav-scrim{position:fixed;inset:0;z-index:44;background:rgba(5,5,6,.34);opacity:0;pointer-events:none;
    transition:opacity .35s var(--ease-out)}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;
    background:var(--text);color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .22s var(--ease-spring),box-shadow .28s var(--ease-out),background .2s}
  .pill:active{transform:translate3d(0,0,0) scale(.97);transition-duration:.08s}
  .pill.ghost{background:transparent;color:var(--text);border:1px solid var(--divider)}
  .pill.accent{background:var(--accent)}
  .pill.lg{height:52px;padding:0 26px;font-size:16px}
  .pill svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

  /* hero */
  header.hero{padding:94px 0 56px;text-align:center;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0 0 auto;height:560px;
    background:
      radial-gradient(60% 50% at 50% 8%,rgba(255,59,48,.10),transparent 70%),
      linear-gradient(90deg,rgba(5,5,6,.035) 1px,transparent 1px),
      linear-gradient(180deg,rgba(5,5,6,.035) 1px,transparent 1px);
    background-size:auto,64px 64px,64px 64px;z-index:-1;pointer-events:none;
    -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000 40%,transparent 90%);
    mask-image:radial-gradient(80% 70% at 50% 30%,#000 40%,transparent 90%)}
  .eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
  .eyebrow::before,.eyebrow::after{content:"";width:24px;height:1.5px;border-radius:2px;background:currentColor;opacity:.9}
  h1{font-size:82px;line-height:1.0;letter-spacing:-.04em;font-weight:700;max-width:13ch;margin:0 auto}
  h1 .accent{color:var(--accent)}
  .lede{font-size:20px;color:var(--secondary-2);max-width:54ch;margin:26px auto 0;line-height:1.45}
  .cta-row{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}

  /* scroll cue */
  .scroll-cue{margin:48px auto 0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--secondary)}
  .scroll-cue span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .scroll-cue .mouse{width:22px;height:36px;border:1.5px solid var(--divider);border-radius:12px;position:relative}
  .scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
    background:var(--accent);transform:translateX(-50%);animation:scrollCue 1.8s var(--ease) infinite}

  /* real app screenshots */
  .phone-stage{display:flex;justify-content:center;margin-top:72px;perspective:1600px;position:relative}
  .device-shot{width:300px;aspect-ratio:1206/2622;border-radius:48px;background:linear-gradient(180deg,#1a1a1c,#050506);padding:7px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.04);
    transform:rotate(-2deg);transition:transform .65s var(--ease-out),box-shadow .65s var(--ease-out);
    animation:floatPhone 8s var(--ease-amb) infinite;
    overflow:hidden;margin:0 auto;will-change:transform}
  .device-shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:42px}
  .device-shot.hero-shot{width:320px}
  .device-shot.sm{width:250px;border-radius:42px;padding:6px;animation:none;transform:rotate(-1.5deg)}
  .device-shot.sm img{border-radius:36px}
  .device-shot.alt{transform:rotate(1deg)}
  .device-shot.sheet-shot{transform:rotate(-1deg)}

  /* search-style mock panel (feature spotlights) */
  .app-today{font-size:10px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;
    background:var(--accent-soft);padding:5px 10px;border-radius:999px}
  .searchbar{padding:14px 18px 8px}
  .searchbar .sb{background:var(--field);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;color:var(--secondary);font-size:13px}
  .searchbar .sb svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
  .filters{display:flex;gap:8px;padding:4px 18px 12px}
  .filters span{font-size:11px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--field);color:var(--secondary)}
  .filters span.on{background:var(--accent);color:#fff}
  .res-list{padding:0 18px 18px;overflow:hidden}
  .res-list .r{display:flex;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid var(--field)}
  .res-list .r .sw{width:8px;height:26px;border-radius:3px;background:var(--accent)}
  .res-list .r .sw.g{background:#34C759}.res-list .r .sw.o{background:#FF9500}.res-list .r .sw.p{background:#AF52DE}.res-list .r .sw.b{background:#0A84FF}
  .res-list .r .rt{font-size:13px;font-weight:600}.res-list .r .rs{font-size:11px;color:var(--secondary)}

  /* trust */
  .trust{padding:72px 0 0;text-align:center}
  .trust p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);margin-bottom:22px;
    display:inline-flex;align-items:center;gap:10px}
  .trust p::before,.trust p::after{content:"";width:24px;height:1px;background:var(--divider)}
  .trust .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-weight:600;font-size:14px;align-items:center}
  .trust .row span{border:1px solid var(--divider);background:rgba(255,255,255,.74);border-radius:999px;padding:9px 16px;color:var(--text);
    transition:border-color .25s,transform .25s var(--ease)}
  .stars{color:var(--accent);letter-spacing:.05em}

  /* section base */
  section{padding:110px 0}
  .sec-head{text-align:center;max-width:60ch;margin:0 auto 56px}
  .sec-head .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
    display:inline-flex;align-items:center;gap:8px}
  .sec-head .tag::before{content:"";width:18px;height:1.5px;background:var(--accent);border-radius:2px}
  .sec-head h2{font-size:50px;letter-spacing:-.03em;line-height:1.06;font-weight:700}
  .sec-head p{color:var(--secondary-2);font-size:18px;margin-top:16px}

  /* walkthrough */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;position:relative}
  .steps::before{content:"";position:absolute;top:16px;left:16%;right:16%;height:2px;
    background:linear-gradient(90deg,transparent,var(--divider) 12%,var(--divider) 88%,transparent);
    z-index:0}
  .step{text-align:center;position:relative;z-index:1}
  .step .num{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--accent);font-size:15px;font-weight:700;
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;border:1.5px solid var(--accent);
    box-shadow:0 0 0 6px var(--bg);position:relative}
  .step .phone-wrap{display:flex;justify-content:center;margin-bottom:24px}
  .step h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .step p{color:var(--secondary-2);font-size:15px;max-width:26ch;margin:0 auto}

  /* feature spotlight rows */
  .spotlight{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:40px 0}
  .spotlight.flip{direction:rtl}.spotlight.flip>*{direction:ltr}
  .sp-text .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
    display:inline-flex;align-items:center;gap:8px}
  .sp-text .tag::before{content:"";width:18px;height:1.5px;background:var(--accent);border-radius:2px}
  .sp-text h2{font-size:44px;letter-spacing:-.03em;line-height:1.08;font-weight:700}
  .sp-text p{color:var(--secondary-2);font-size:17px;margin-top:18px;max-width:46ch}
  .sp-text ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:14px}
  .sp-text li{display:flex;gap:12px;align-items:flex-start;font-size:15px;transition:transform .2s var(--ease)}
  .sp-text li svg{width:20px;height:20px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
    flex:0 0 auto;margin-top:1px}
  .sp-text li b{font-weight:600}.sp-text li span{color:var(--secondary-2)}

  /* mock panel */
  .panel{background:linear-gradient(180deg,var(--surface),#fff);border-radius:28px;padding:28px;border:1px solid rgba(219,219,223,.6);
    box-shadow:0 30px 70px -34px var(--shadow);position:relative;overflow:hidden}
  .panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.42),transparent 60%);
    transform:translateX(-110%);transition:transform .8s var(--ease)}
  .panel .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
  .panel .ph .pt{font-size:18px;font-weight:600;letter-spacing:-.01em}.panel .ph .pt b{font-size:10px;color:var(--secondary);font-weight:600;margin-left:8px}

  /* product detail list */
  .details{background:#fff}
  .detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 56px;max-width:980px;margin:0 auto;
    border-top:1px solid var(--divider)}
  .detail-card{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:14px;padding:28px 0 30px;
    border-bottom:1px solid var(--divider);background:transparent;position:relative;overflow:visible;
    transition:color .2s var(--ease-out)}
  .detail-card::before{content:none}
  .detail-card .mini-ico{width:22px;height:22px;border:0;border-radius:0;background:transparent;box-shadow:none;
    margin:1px 0 0;color:var(--accent)}
  .detail-card .mini-ico svg{width:19px;height:19px;stroke-width:2}
  .detail-card h3{font-size:18px;line-height:1.2;letter-spacing:-.01em;margin:0}
  .detail-card p{grid-column:2;font-size:14px;color:var(--secondary-2);line-height:1.62;margin-top:8px}

  /* card surfaces used on support/help pages */
  .help-card{border:1px solid rgba(219,219,223,.72);border-radius:22px;background:var(--surface);padding:26px;
    display:flex;flex-direction:column;position:relative;overflow:hidden;
    transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s,border-color .3s}
  .help-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--ease-out)}
  .mini-ico{width:42px;height:42px;border-radius:13px;background:linear-gradient(180deg,#fff,var(--surface));
    border:1px solid var(--divider);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px;
    transition:transform .3s var(--ease-spring),box-shadow .3s}
  .mini-ico svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .help-card h3{font-size:19px;letter-spacing:-.01em;margin-bottom:9px}
  .help-card p{font-size:14px;color:var(--secondary-2);line-height:1.58}

  /* widget gallery */
  #widgets{padding-top:80px}
  #widgets .sec-head{margin-bottom:46px}
  .widgets-grid{display:grid;grid-template-columns:minmax(250px,320px) minmax(280px,320px);grid-template-areas:"today month" "agenda month";
    gap:24px;max-width:700px;margin:0 auto;align-items:center}
  .widget-demo{display:flex;flex-direction:column;gap:14px;align-items:flex-start;position:relative;
    transition:transform .3s var(--ease-out)}
  .widget-demo.today{grid-area:today;width:min(100%,160px);justify-self:center}
  .widget-demo.agenda{grid-area:agenda}
  .widget-demo.month{grid-area:month}
  .widget-demo img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 42px rgba(0,0,0,.14));
    transition:filter .3s var(--ease-out),transform .3s var(--ease-out)}
  .widget-demo figcaption{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 4px}
  .widget-demo figcaption b{font-size:15px;line-height:1.2;letter-spacing:-.01em}
  .widget-demo figcaption span{font-size:13px;line-height:1.45;color:var(--secondary-2)}

  /* under-the-hood: minimal row list */
  .hood-list{border-top:1px solid var(--divider)}
  .hood-row{display:grid;grid-template-columns:44px minmax(180px,300px) 1fr;gap:36px;align-items:center;
    padding:40px 0;border-bottom:1px solid var(--divider);position:relative}
  .hood-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));transform:scaleY(0);transform-origin:50% 50%;
    transition:transform .45s var(--ease-out)}
  .hr-idx{font-size:13px;font-weight:700;color:var(--secondary);font-variant-numeric:tabular-nums;
    letter-spacing:.02em;transition:color .3s var(--ease-out),transform .3s var(--ease-out)}
  .hr-copy{display:flex;flex-direction:column;gap:9px}
  .hr-copy h3{font-size:22px;letter-spacing:-.02em;line-height:1.15}
  .hr-copy .bp{font-size:13px;color:var(--secondary);margin-top:2px}
  .hr-visual{transition:transform .45s var(--ease-out)}
  .hr-stack{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .hr-stack li{padding:12px 0;border-top:1px solid var(--field);transition:transform .25s var(--ease)}
  .hr-stack li:nth-child(-n+2){border-top:none;padding-top:0}
  .hr-stack li b{display:block;font-size:14px;letter-spacing:-.01em}
  .hr-stack li span{display:block;font-size:12px;color:var(--secondary-2);line-height:1.45;margin-top:3px}
  .notif-mock{display:flex;gap:12px;align-items:flex-start}
  .notif-mock img{width:38px;height:38px;border-radius:9px;display:block;flex:0 0 auto;
    box-shadow:0 4px 10px -5px rgba(0,0,0,.35)}
  .notif-mock .nm-body{flex:1;min-width:0}
  .nm-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--secondary)}
  .nm-top b{font-weight:700;color:var(--text);letter-spacing:.02em;text-transform:uppercase;font-size:11px}
  .nm-title{font-size:13px;font-weight:700;margin-top:2px}
  .nm-text{font-size:12px;color:var(--secondary-2);line-height:1.45;margin-top:1px}
  .done-list{display:flex;flex-direction:column}
  .done-row{display:flex;gap:11px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--field);font-size:13px;
    transition:transform .25s var(--ease)}
  .done-row:last-child{border-bottom:none}
  .done-row .dr-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--divider);flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s,border-color .25s}
  .done-row .dr-check svg{width:11px;height:11px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .done-row.is-done .dr-check{background:var(--accent);border-color:var(--accent)}
  .done-row.is-done .dr-text{color:var(--secondary);text-decoration:line-through;text-decoration-color:rgba(255,59,48,.5)}
  .gest-rows{display:flex;flex-direction:column;gap:14px}
  .gest-row{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;font-size:13px;color:var(--secondary-2)}
  .gest-row .gr-track{height:6px;border-radius:3px;background:var(--field);position:relative}
  .gest-row .gr-track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s var(--ease-out)}
  .gest-row .gr-track i::after{content:"";position:absolute;right:-8px;top:50%;width:16px;height:16px;border-radius:50%;
    background:#fff;transform:translateY(-50%);box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.06);
    transition:transform .25s var(--ease-spring)}

  /* themes */
  .themes{background:var(--surface);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
  .theme-deck{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 24px;scroll-snap-type:x mandatory}
  .theme-deck::-webkit-scrollbar{height:6px}.theme-deck::-webkit-scrollbar-thumb{background:var(--divider);border-radius:3px}
  .theme-deck.wheel-ready{display:block;width:100vw;height:520px;margin:8px 0 0 calc(50% - 50vw);padding:0;overflow:hidden;
    scroll-snap-type:none;position:relative;isolation:isolate;touch-action:pan-y;cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .theme-deck.wheel-ready.is-dragging{cursor:grabbing}
  .theme-deck.wheel-ready::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
    background:linear-gradient(180deg,rgba(243,243,248,0),rgba(243,243,248,.68) 78%,rgba(243,243,248,.94));
    pointer-events:none;z-index:1}
  .tcard{flex:0 0 244px;min-height:326px;border-radius:22px;padding:18px;scroll-snap-align:start;
    background:var(--theme-bg);color:var(--theme-text);border:1px solid var(--theme-divider);
    box-shadow:0 18px 42px -32px var(--theme-shadow);display:flex;flex-direction:column;gap:16px;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease);cursor:pointer}
  .theme-deck.wheel-ready .tcard{position:absolute;left:0;top:0;width:244px;transform-origin:50% 62%;
    transform:translate(var(--scene-x,0px),calc(var(--scene-y,0px) + var(--hover-y,0px))) rotate(var(--card-r,var(--scene-r,0deg))) scale(var(--card-s,var(--scene-s,1)));
    opacity:var(--scene-o,1);filter:saturate(var(--scene-sat,1)) contrast(var(--scene-contrast,1)) brightness(var(--scene-bright,1)) blur(var(--scene-blur,0));
    z-index:var(--scene-layer,1);pointer-events:var(--scene-events,auto);
    will-change:transform,opacity;transition:transform .55s var(--ease-out),opacity .34s ease,filter .34s ease,box-shadow .34s ease,border-color .34s ease}
  .theme-deck.wheel-ready .tcard.is-active{border-width:3px;border-color:var(--theme-accent);box-shadow:0 48px 96px -34px var(--theme-shadow),0 24px 52px -30px rgba(0,0,0,.34)}
  .theme-deck.wheel-ready .tcard:focus-visible{outline:3px solid var(--theme-accent);outline-offset:5px}
  .theme-indicators{--indicator-fill:0;display:none;align-items:center;justify-content:center;gap:8px;margin:-36px auto 0;position:relative;z-index:3}
  .theme-deck.wheel-ready + .theme-indicators{display:flex}
  .theme-indicators button{position:relative;width:7px;height:7px;border:0;border-radius:999px;background:rgba(5,5,6,.22);cursor:pointer;overflow:hidden;
    padding:0;transition:width .28s var(--ease),background .28s var(--ease),opacity .28s var(--ease);opacity:.72}
  .theme-indicators button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--indicator-accent,var(--accent));
    transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:transform .08s linear,opacity .18s var(--ease);pointer-events:none}
  .theme-indicators button.is-active{width:34px;background:rgba(5,5,6,.16);opacity:1}
  .theme-indicators button.is-active::before{opacity:1;transform:scaleX(var(--indicator-fill,0))}
  .theme-indicators button:focus-visible{outline:2px solid var(--indicator-accent,var(--accent));outline-offset:4px}
  .tcard .theme-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
  .tcard .tname{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .tcard .tdesc{font-size:12px;color:var(--theme-secondary);margin-top:2px;line-height:1.35}
  .tcard .theme-icon{width:54px;height:54px;border-radius:14px;display:block;box-shadow:0 14px 28px -18px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.05);background:#fff;flex:0 0 auto}
  .tcard .swatches{display:flex;gap:6px}
  .tcard .swatches i{width:18px;height:18px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.08);transition:transform .2s var(--ease)}
  .tcard .theme-meta{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.58}
  .theme-preview{margin-top:auto;border-radius:16px;padding:12px;background:var(--theme-bg);border:1px solid var(--theme-divider)}
  .theme-preview .tp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .theme-preview .tp-head span{font-size:13px;font-weight:600;letter-spacing:0;color:var(--theme-text)}
  .theme-preview .tp-head i{width:16px;height:16px;border-radius:50%;background:var(--theme-field);display:block;position:relative}
  .theme-preview .tp-head i::after{content:"";position:absolute;inset:5px;border:1px solid var(--theme-secondary);border-radius:50%;opacity:.8}
  .theme-preview .tp-week,.theme-preview .tp-grid{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
  .theme-preview .tp-week{gap:5px;margin-bottom:7px}
  .theme-preview .tp-week span{font-size:6px;font-weight:700;color:var(--theme-secondary)}
  .theme-preview .tp-week span:first-child{color:var(--theme-accent)}
  .theme-preview .tp-grid{gap:5px;margin-bottom:12px}
  .theme-preview .tp-grid span{font-size:6px;font-weight:500;color:var(--theme-secondary);font-variant-numeric:tabular-nums}
  .theme-preview .tp-grid span.hot{color:var(--theme-accent);font-weight:700}
  .theme-preview .tp-event{display:flex;align-items:center;gap:7px}
  .theme-preview .tp-mark{width:16px;height:16px;border-radius:4px;background:var(--theme-accent);display:block}
  .theme-preview .tp-lines{display:grid;gap:4px}
  .theme-preview .tp-lines i{height:5px;border-radius:999px;background:var(--theme-field);display:block}
  .theme-preview .tp-lines i:first-child{width:42px}
  .theme-preview .tp-lines i:last-child{width:30px}
  .tl{--theme-bg:#fff;--theme-surface:#f3f3f8;--theme-field:#ececf2;--theme-text:#050506;--theme-secondary:#85858f;--theme-divider:#dbdbe3;--theme-accent:#FF3B30;--theme-shadow:rgba(0,0,0,.10)}
  .td{--theme-bg:#0e0f10;--theme-surface:#1d1e22;--theme-field:#323238;--theme-text:#f5f5fa;--theme-secondary:#a8a8b3;--theme-divider:#474752;--theme-accent:#FF453A;--theme-shadow:rgba(0,0,0,.30)}
  .tm{--theme-bg:#fffbf4;--theme-surface:#fff0db;--theme-field:#ffe6c2;--theme-text:#26180d;--theme-secondary:#8a6640;--theme-divider:#e8c9a0;--theme-accent:#FF9F0A;--theme-shadow:rgba(115,64,20,.12)}
  .tmi{--theme-bg:#090b12;--theme-surface:#141824;--theme-field:#252c3e;--theme-text:#edf2ff;--theme-secondary:#94a3c2;--theme-divider:#38425c;--theme-accent:#64D2FF;--theme-shadow:rgba(0,0,0,.34)}
  .tdu{--theme-bg:#fbf5ee;--theme-surface:#ece0d4;--theme-field:#deccba;--theme-text:#291d16;--theme-secondary:#756354;--theme-divider:#c7b39e;--theme-accent:#B1785B;--theme-shadow:rgba(66,46,31,.12)}
  .tor{--theme-bg:#fff7e3;--theme-surface:#f5dfb8;--theme-field:#e6c288;--theme-text:#211608;--theme-secondary:#7a5224;--theme-divider:#cca870;--theme-accent:#E85D04;--theme-shadow:rgba(92,51,15,.14)}
  .tca{--theme-bg:#fdf7ff;--theme-surface:#f0e4fa;--theme-field:#e2d1f0;--theme-text:#21132a;--theme-secondary:#735c80;--theme-divider:#ccbade;--theme-accent:#AF52DE;--theme-shadow:rgba(46,20,61,.12)}
  .tmt{--theme-bg:#f5fdf9;--theme-surface:#dff2e7;--theme-field:#cfe8d9;--theme-text:#0d2116;--theme-secondary:#4f7861;--theme-divider:#b3d6c2;--theme-accent:#34C759;--theme-shadow:rgba(13,51,31,.10)}
  .tbk{--theme-bg:#000;--theme-surface:#111111;--theme-field:#29292b;--theme-text:#f5f5f5;--theme-secondary:#9e9ea3;--theme-divider:#3d3d40;--theme-accent:#8E8E93;--theme-shadow:rgba(0,0,0,.44)}
  .tve{--theme-bg:#fff7f9;--theme-surface:#ffe3e8;--theme-field:#fbd1da;--theme-text:#2b0d13;--theme-secondary:#8a4f5c;--theme-divider:#e0adba;--theme-accent:#BF5AF2;--theme-shadow:rgba(71,13,23,.12)}
  .tcard .swatches i:nth-child(1){background:var(--theme-bg)}
  .tcard .swatches i:nth-child(2){background:var(--theme-surface)}
  .tcard .swatches i:nth-child(3){background:var(--theme-field)}
  .tcard .swatches i:nth-child(4){background:var(--theme-accent)}

  /* alt app icon gallery */
  .icons-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:48px;position:relative;z-index:2}
  .icon-tile{text-align:center;transition:transform .3s var(--ease-out)}
  .icon-tile img{width:100%;aspect-ratio:1;display:block;border-radius:22%;object-fit:cover;margin-bottom:12px;
    box-shadow:0 12px 32px -18px rgba(0,0,0,.46),0 0 0 1px rgba(0,0,0,.05);background:#fff;
    transition:box-shadow .3s,transform .3s var(--ease-spring)}
  .icon-tile .nm{font-size:13px;font-weight:600;letter-spacing:-.01em}
  .icon-tile .hx{font-size:11px;color:var(--secondary);margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:.02em}

  /* privacy band */
  .privacy{background:linear-gradient(180deg,#fff,var(--surface));border-top:1px solid rgba(219,219,223,.62)}
  .privacy-wrap{text-align:center;max-width:980px}
  .privacy-head{margin:0 auto 34px;text-align:center}
  .privacy-copy h2{font-size:48px;letter-spacing:-.03em;line-height:1.06}
  .privacy-copy p{color:var(--secondary-2);font-size:17px;margin:18px auto 0;max-width:48ch}
  .privacy-orbit{width:min(1040px,96vw);margin:46px auto 0}
  .privacy-cluster{display:flex;flex-direction:column;align-items:center;gap:22px}
  .pc-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px 28px;width:100%}
  .pc-row.r1,.pc-row.r7{max-width:46%}
  .pc-row.r2,.pc-row.r6{max-width:64%}
  .pc-row.r3,.pc-row.r5{max-width:86%}
  .pc-row.r4{max-width:100%}
  /* the core stays put: it's the one fixed, locked anchor. everything else breathes gently around it */
  .privacy-core{display:inline-flex;align-items:center;gap:11px;color:var(--accent);font-size:36px;font-weight:800;
    letter-spacing:.01em;line-height:1.1;white-space:nowrap;text-transform:uppercase;margin-inline:26px}
  .privacy-core svg{width:29px;height:29px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
  /* every other word breathes on its own clock, just slightly, so it never falls into visible lockstep */
  @keyframes wordBreathe{0%,100%{transform:translateY(0) scale(1);color:var(--secondary-2)}
    50%{transform:translateY(-2px) scale(var(--peak,1.07));color:var(--text)}}
  .privacy-word{--peak:1.07;color:var(--secondary-2);font-weight:700;letter-spacing:.02em;line-height:1.15;
    white-space:nowrap;text-align:center;text-transform:uppercase;transform-origin:center;
    animation:wordBreathe var(--dur,6s) var(--ease-smooth) infinite;animation-delay:var(--delay,0s)}
  .wsz-lg{font-size:19px;--peak:1.05}
  .wsz-md{font-size:15px;--peak:1.06}
  .wsz-sm{font-size:12.5px;--peak:1.08}
  .privacy-note{color:var(--secondary-2);font-size:15px;max-width:42ch;margin:14px auto 0;line-height:1.6}

  /* stats band */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:940px;margin:0 auto}
  .stat{text-align:center;padding:6px 24px;position:relative}
  .stat + .stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:58px;
    background:linear-gradient(180deg,transparent,var(--divider) 28%,var(--divider) 72%,transparent)}
  .stat b{font-size:52px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1;font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,var(--text),var(--secondary-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .stat span{font-size:13px;color:var(--secondary-2);margin-top:12px;display:block;letter-spacing:.01em}

  /* FAQ */
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq{background:var(--surface);border:1px solid rgba(219,219,223,.5);border-radius:18px;overflow:hidden;
    transition:background .25s,border-color .25s,box-shadow .25s}
  .faq.open{background:#fff;border-color:rgba(255,59,48,.25);box-shadow:0 14px 36px -28px rgba(255,59,48,.4)}
  .faq .qh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;cursor:pointer;
    font-size:17px;font-weight:600;letter-spacing:-.01em;transition:padding .25s var(--ease-out)}
  .faq .qh .chev{width:22px;height:22px;flex:0 0 auto;transition:transform .35s var(--ease-spring),color .25s;
    color:var(--secondary);display:flex;align-items:center;justify-content:center}
  .faq.open .chev{transform:rotate(135deg);color:var(--accent)}
  .faq .chev svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
  .faq .qa{max-height:0;overflow:hidden;opacity:0;transition:max-height .42s var(--ease-out),opacity .3s ease}
  .faq.open .qa{opacity:1}
  .faq .qa p{padding:0 24px 24px;color:var(--secondary-2);font-size:15px;line-height:1.6}

  /* availability cards */
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto}
  .price{background:linear-gradient(180deg,var(--surface),#fff);border:1px solid rgba(219,219,223,.5);border-radius:var(--r);padding:34px;
    position:relative;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s}
  .price.feat{background:linear-gradient(180deg,#1a1a1c,#050506);color:#fff;border-color:transparent}
  .price.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
  .price .pl{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
  .price.feat .pl{color:var(--accent)}
  .price .pp{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1}
  .price .pp small{font-size:16px;font-weight:500;color:var(--secondary);letter-spacing:0}
  .price.feat .pp small{color:rgba(255,255,255,.6)}
  .price .pd{font-size:14px;color:var(--secondary-2);margin-top:8px;min-height:40px}
  .price.feat .pd{color:rgba(255,255,255,.6)}
  .price ul{list-style:none;margin:24px 0;display:flex;flex-direction:column;gap:13px;flex:1}
  .price li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
  .price li svg{width:18px;height:18px;stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:2px}
  .price.feat li svg{stroke:var(--accent)}
  .price .pill{width:100%;margin-top:8px}

  /* big quote */
  .quote{padding:120px 0;text-align:center;position:relative}
  .quote::before{content:"\201C";position:absolute;top:30px;left:50%;transform:translateX(-50%);
    font-size:140px;line-height:1;color:var(--accent);opacity:.12;font-weight:700;pointer-events:none}
  .quote q{font-size:42px;font-weight:500;letter-spacing:-.02em;line-height:1.2;max-width:24ch;display:inline-block;position:relative}
  .quote q::before,.quote q::after{content:none}
  .quote .by{margin-top:26px;color:var(--secondary-2);font-size:14px;letter-spacing:.04em}
  .quote .by::before{content:"— "}

  /* cta */
  .cta-final{padding:130px 0;text-align:center;background:var(--text);color:#fff;position:relative;overflow:hidden}
  .cta-final::before{content:"";position:absolute;inset:0;
    background:
      radial-gradient(60% 60% at 50% 0%,rgba(255,59,48,.32),transparent 60%),
      linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
      linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:auto,58px 58px,58px 58px;
    -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000 30%,transparent 85%);
    mask-image:radial-gradient(70% 70% at 50% 30%,#000 30%,transparent 85%)}
  .cta-final .wrap{position:relative}
  .cta-final h2{font-size:58px;letter-spacing:-.04em;line-height:1.04;max-width:16ch;margin:0 auto}
  .cta-final p{color:rgba(255,255,255,.7);font-size:18px;margin:20px auto 0;max-width:48ch}
  .cta-final .cta-row{margin-top:40px}
  .cta-final .pill{background:#fff;color:var(--text)}
  .cta-final .pill.accent{background:var(--accent);color:#fff}

  footer{padding:72px 0 80px;border-top:1px solid var(--divider);background:linear-gradient(180deg,#fff,var(--surface))}
  .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .foot .brand{margin-bottom:16px}
  .foot p{color:var(--secondary-2);font-size:14px;max-width:34ch;margin-top:14px;line-height:1.55}
  .foot .cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--secondary);margin-bottom:14px}
  .foot .cols a{position:relative;display:block;width:fit-content;max-width:100%;font-size:14px;padding:5px 0;color:var(--text);transition:color .2s}
  .foot .cols a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;opacity:.65;transition:transform .22s var(--ease-out),opacity .2s}
  .foot .social{display:flex;gap:10px;margin-top:18px}
  .foot .social a{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;
    padding:0;transition:transform .25s var(--ease-spring),background .25s}
  .foot .social svg{width:16px;height:16px;stroke:var(--text);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
  .copy{margin-top:56px;color:var(--secondary);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-top:28px;border-top:1px solid var(--divider)}

  /* =====================================================================
     Hover effects — hover-capable pointers only.
     Without this guard, taps on touch devices leave cards stuck in their
     hover state (lifted, recolored) until the next tap elsewhere.
     any-hover (not hover) so a cursor still gets hover effects on devices
     whose primary input is touch — e.g. iPad with a trackpad paired.
     ===================================================================== */
  @media(any-hover:hover){
    .brand:hover .brand-icon{transform:scale(1.06) rotate(-3deg);box-shadow:0 8px 18px -6px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.12)}
    .navlinks a:hover{color:var(--text)}
    .navlinks a:hover::after{transform:scaleX(1)}
    .lang-switch button:hover{color:var(--text)}
    .nav-toggle:hover{border-color:var(--text)}
    .nav-mobile a:hover{color:var(--accent);padding-left:10px}
    .nav-mobile a:hover::after{transform:translateX(4px);color:var(--accent)}
    .pill:hover{transform:translate3d(0,-2px,0)}
    .pill.ghost:hover{border-color:var(--text);box-shadow:0 6px 18px -10px rgba(0,0,0,.3)}
    .pill.accent:hover{box-shadow:0 10px 28px -8px rgba(255,59,48,.55)}
    .device-shot:hover{transform:rotate(0deg) translate3d(0,-10px,0)!important;animation-play-state:paused;
      box-shadow:0 56px 110px -34px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.04)}
    .trust .row span:hover{border-color:rgba(255,59,48,.4);transform:translateY(-2px)}
    .sp-text li:hover{transform:translateX(4px)}
    .panel:hover::after{transform:translateX(110%)}
    .detail-card:hover h3{color:var(--accent)}
    .detail-card:hover .mini-ico{color:var(--accent-2)}
    .help-card:hover{transform:translate3d(0,-6px,0);background:#fff;box-shadow:0 22px 54px -36px rgba(0,0,0,.45);border-color:rgba(255,59,48,.2)}
    .help-card:hover::before{transform:scaleX(1)}
    .help-card:hover .mini-ico{transform:scale(1.08) rotate(-4deg);box-shadow:0 10px 22px -10px rgba(255,59,48,.4)}
    .widget-demo:hover{transform:translate3d(0,-8px,0)}
    .widget-demo:hover img{transform:translate3d(0,-3px,0);filter:drop-shadow(0 34px 48px rgba(0,0,0,.18))}
    .hood-row:hover::before{transform:scaleY(1)}
    .hood-row:hover .hr-idx{color:var(--accent);transform:translateX(3px)}
    .hood-row:hover .hr-visual{transform:translateX(6px)}
    .hr-stack li:hover{transform:translateX(4px)}
    .done-row:hover{transform:translateX(4px)}
    .gest-row:hover .gr-track i::after{transform:translateY(-50%) scale(1.15)}
    .theme-deck:not(.wheel-ready) .tcard:hover{transform:translateY(-6px);box-shadow:0 28px 58px -36px var(--theme-shadow)}
    /* hover straightens + pops the side card forward */
    .theme-deck.wheel-ready .tcard:not(.is-active):hover{
      --card-r:0deg;--card-s:1.06;--hover-y:-22px;
      opacity:1;z-index:60;
      box-shadow:0 44px 88px -28px var(--theme-shadow),0 0 0 3px var(--theme-accent)}
    .tcard .swatches i:hover{transform:scale(1.18)}
    .icon-tile:hover{transform:translate3d(0,-6px,0)}
    .icon-tile:hover img{box-shadow:0 20px 44px -18px rgba(0,0,0,.5),0 0 0 1px rgba(255,59,48,.2);transform:scale(1.04)}
    .privacy-orbit:hover .privacy-core{color:var(--accent-2)}
    .price:hover{transform:translateY(-6px);box-shadow:0 24px 54px -36px rgba(0,0,0,.4)}
    .cta-final .pill.accent:hover{box-shadow:0 12px 32px -8px rgba(255,59,48,.7)}
    .foot .cols a:hover{color:var(--text)}
    .foot .cols a:hover::after{transform:scaleX(1);opacity:1}
    .foot .social a:hover{background:var(--accent);transform:translateY(-3px)}.foot .social a:hover svg{stroke:#fff}
  }

  @media(max-width:980px){
    .widgets-grid{grid-template-columns:minmax(230px,310px) minmax(260px,310px);max-width:670px}
    .detail-grid{grid-template-columns:repeat(2,1fr)}
    .icons-grid{grid-template-columns:repeat(4,1fr)}
    .hood-row{grid-template-columns:40px minmax(160px,240px) 1fr;gap:24px}
  }
  @media(max-width:860px){
    .navlinks{display:none}
    .nav-toggle{display:flex}
    /* keep the download CTA out of the cramped bar; it lives in the mobile menu */
    .nav-actions .pill{display:none}
    .steps{grid-template-columns:1fr;gap:60px}
    .steps::before{display:none}
    .spotlight{grid-template-columns:1fr;gap:40px;direction:ltr}
    .stats{grid-template-columns:repeat(2,1fr);gap:44px 0}
    .stat + .stat::before{display:none}
    .price-grid{grid-template-columns:1fr}
    .widgets-grid{grid-template-columns:1fr;grid-template-areas:"today" "agenda" "month";max-width:430px}
    .widget-demo{justify-self:center;width:100%}
    .widget-demo.today{width:min(100%,190px)}
    .detail-grid{grid-template-columns:1fr}
    .hood-row{grid-template-columns:36px 1fr;column-gap:20px;row-gap:20px;padding:32px 0}
    .hood-row .hr-idx{grid-column:1;grid-row:1}
    .hood-row .hr-copy{grid-column:2;grid-row:1}
    .hood-row .hr-visual{grid-column:1/-1;grid-row:2}
    .icons-grid{grid-template-columns:repeat(3,1fr)}
    .scroll-cue{display:none}
    h1{font-size:54px}
    .sec-head h2{font-size:40px}
    .sp-text h2,.privacy-copy h2{font-size:36px}
    .quote q{font-size:32px}
    .cta-final h2{font-size:42px}
    .privacy-orbit{width:100%;margin:28px auto 0;padding:0 16px}
    .privacy-cluster{gap:12px}
    .pc-row.r1,.pc-row.r2,.pc-row.r3,.pc-row.r4,.pc-row.r5,.pc-row.r6,.pc-row.r7{max-width:100%}
    .privacy-core{margin-inline:14px}
  }
  @media(max-width:560px){
    header.hero{padding-top:64px}
    .hr-stack{grid-template-columns:1fr}
    .hr-stack li:nth-child(2){border-top:1px solid var(--field);padding-top:12px}
    h1{font-size:44px;letter-spacing:-.03em}
    .lede{font-size:17px}
    .stats{grid-template-columns:1fr}
    .icons-grid{grid-template-columns:repeat(2,1fr)}
    .foot .cols{gap:32px}
    .sec-head h2{font-size:32px}
    .sp-text h2,.privacy-copy h2{font-size:30px}
    .quote q{font-size:26px}
    .cta-final h2{font-size:34px}
    .privacy-orbit{margin-top:20px}
    .privacy-cluster{gap:10px}
    .pc-row{gap:8px 16px}
    .privacy-core{font-size:16px;margin-inline:16px}
    .privacy-core svg{width:14px;height:14px}
    .privacy-word{font-size:12px;--peak:1.07}
    .wsz-lg{font-size:14.5px}
    .wsz-md{font-size:13px}
    .wsz-sm{font-size:11px}
  }
  @media(max-width:759px){
    .theme-deck.wheel-ready{width:100vw;height:370px;margin:0 0 0 calc(50% - 50vw);
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
    .theme-deck.wheel-ready::after{height:44%}
    .theme-deck.wheel-ready .tcard{width:210px;min-height:292px;border-radius:20px;padding:16px}
    .theme-deck.wheel-ready .tcard .theme-icon{width:46px;height:46px;border-radius:12px}
    .theme-deck.wheel-ready .theme-preview{border-radius:14px;padding:10px}
    .theme-indicators{margin:-22px auto 0}
  }