/* ============================================================================
   Alt.Access — site design system ("dark premium").
   ONE place to tune the whole look: edit the tokens in :root, every component
   derives from them. No web fonts, no external assets — the site loads in a
   single request and must stay that way (CDNs are unreachable from RU anyway).
   ============================================================================ */

:root{
  /* ---------- BRAND (the main vibe levers) ---------- */
  --brand-1:#4f7cff;                 /* primary accent — the logo blue        */
  --brand-2:#7c5cff;                 /* secondary accent, used sparingly      */
  --grad:linear-gradient(135deg,#5b85ff 0%,#4f7cff 55%,#6a63ff 100%);

  /* ---------- SURFACES (dark layers, back → front) ---------- */
  --bg:#05070d;                      /* page base                             */
  --bg2:#080b13;                     /* deep sections                         */
  --panel:#0b0f1a;                   /* cards / panels                        */
  --panel2:#101623;                  /* insets / inputs                       */
  --border:rgba(255,255,255,.07);    /* hairlines                             */
  --border-hi:rgba(255,255,255,.16); /* hover / focus                         */
  --glass:rgba(255,255,255,.03);     /* barely-there fill over the page glow  */
  /* fixed backdrop: one cool halo up top, nothing busy */
  --page-glow:radial-gradient(900px 520px at 50% -8%, rgba(79,124,255,.16) 0%, rgba(79,124,255,0) 65%),
              radial-gradient(700px 400px at 90% 12%, rgba(124,92,255,.10) 0%, rgba(124,92,255,0) 60%),
              linear-gradient(180deg,#070a12 0%, #05070d 55%);

  /* ---------- TEXT ---------- */
  --text:#eef2fb;
  --muted:#93a0bd;
  --dim:#6c7997;

  /* ---------- SEMANTIC ---------- */
  --accent:var(--brand-1);
  --accent2:var(--brand-2);
  --ok:#3ddc97;

  /* ---------- RADIUS SCALE ---------- */
  --r-sm:10px;
  --r-md:12px;                       /* buttons / inputs                      */
  --r-lg:18px;                       /* cards / panels                        */
  --r-pill:999px;

  /* ---------- SHADOW ---------- */
  --sh-pop:0 18px 48px rgba(0,0,0,.55);
  --sh-card:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.35);
  --sh-btn:0 8px 24px rgba(79,124,255,.35);

  /* ---------- TYPOGRAPHY ---------- */
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Consolas, monospace;
  --lh:1.62;
  --fs-hero:clamp(32px, 6.2vw, 60px);
  --fs-h2:clamp(23px, 3.4vw, 33px);
  --fs-price:34px;
  --fs-body:16px;
  --fs-sm:14px;
  --fw-med:600;
  --fw-bold:750;

  /* ---------- MOTION ---------- */
  --tr:.18s cubic-bezier(.4,0,.2,1);

  /* ---------- LAYOUT ---------- */
  --maxw:1080px;
  --gut:24px;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);line-height:var(--lh);
     font-size:var(--fs-body);letter-spacing:-.005em;position:relative;
     background:var(--bg);min-height:100vh;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* The backdrop glow lives on its own fixed layer instead of
   background-attachment:fixed — that one repaints the whole page on every
   scroll frame (visibly janky on phones). */
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
            background-image:var(--page-glow)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:rgba(79,124,255,.35)}

/* ---------- top nav ---------- */
.nav{display:flex;align-items:center;gap:14px;
     padding:14px var(--gut);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;
     background:rgba(5,7,13,.72);backdrop-filter:blur(14px) saturate(150%)}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{height:32px;width:auto;display:block}
.brand-word{height:22px;width:auto;display:block}
.nav nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav nav>a{padding:8px 13px;border-radius:var(--r-sm);color:var(--muted);font-size:15px;
           transition:color var(--tr),background var(--tr)}
.nav nav>a:hover{color:var(--text);background:var(--glass);text-decoration:none}
.nav nav>a.cta{color:#fff;background:var(--grad);box-shadow:var(--sh-btn);font-weight:var(--fw-med)}
.nav nav>a.cta:hover{filter:brightness(1.08)}

/* ---------- mobile header: two real buttons + a sheet ---------- */
/* The sheet is a sibling of <header>, so it never inherits the header's
   backdrop-filter compositing — which is what made the old dropdown render
   see-through over the page. */
.mnav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.m-actions{display:none;align-items:center;gap:8px;margin-left:auto}
.m-btn{padding:9px 14px;border-radius:var(--r-sm);font-size:14px;font-weight:var(--fw-med);
       white-space:nowrap;line-height:1.1}
.m-btn.primary{background:var(--grad);color:#fff;box-shadow:var(--sh-btn)}
.m-btn.ghost{color:var(--text);border:1px solid var(--border-hi)}
.m-btn:hover{text-decoration:none;filter:brightness(1.08)}
.menu-btn{display:none;cursor:pointer;padding:10px 12px;border-radius:var(--r-sm);
          border:1px solid var(--border);background:var(--panel);color:var(--text);
          align-items:center;justify-content:center;flex:0 0 auto}
.menu-btn .bars{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
                position:relative;transition:background var(--tr)}
.menu-btn .bars:before,.menu-btn .bars:after{content:"";position:absolute;left:0;width:18px;
                height:2px;background:currentColor;border-radius:2px;transition:transform var(--tr)}
.menu-btn .bars:before{top:-6px}
.menu-btn .bars:after{top:6px}
/* open state: the burger becomes an X */
.mnav-toggle:checked ~ .nav .menu-btn .bars{background:transparent}
.mnav-toggle:checked ~ .nav .menu-btn .bars:before{transform:translateY(6px) rotate(45deg)}
.mnav-toggle:checked ~ .nav .menu-btn .bars:after{transform:translateY(-6px) rotate(-45deg)}

.sheet-scrim{display:none;position:fixed;inset:0;z-index:28;background:rgba(3,5,10,.6);
             backdrop-filter:blur(2px)}
/* Full-height panel rather than a floating dropdown: it covers everything below
   the header, so no page text can ever show through it — the old dropdown read
   as transparent on iOS Safari because it overflowed a backdrop-filtered header. */
.menu-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:29;
            background:#0b0f1a;                    /* fully opaque on purpose */
            box-shadow:var(--sh-pop);padding:12px 12px calc(24px + env(safe-area-inset-bottom));
            overflow-y:auto;overscroll-behavior:contain;
            /* own compositing layer + no inherited backdrop work: belt and braces
               for iOS Safari, which is where the transparent menu was reported */
            isolation:isolate;transform:translateZ(0);-webkit-backdrop-filter:none;
            backdrop-filter:none}
.menu-sheet a{display:flex;align-items:center;justify-content:space-between;
              padding:16px 14px;border-radius:var(--r-md);color:var(--text);
              font-size:16.5px;border-bottom:1px solid rgba(255,255,255,.06)}
.menu-sheet a:after{content:"";width:7px;height:7px;flex:0 0 auto;opacity:.45;
                    border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;
                    transform:rotate(45deg)}
.sheet-langs a:after{display:none}
.menu-sheet a:last-of-type{border-bottom:none}
.menu-sheet a:active{background:var(--panel2);text-decoration:none}
.sheet-langs{display:flex;gap:8px;margin-top:12px;padding-top:12px;
             border-top:1px solid var(--border)}
.sheet-langs a{flex:1;text-align:center;border:1px solid var(--border);border-bottom:1px solid var(--border);
               padding:11px 8px;font-size:14px;color:var(--muted)}
.sheet-langs a.on{color:var(--text);border-color:var(--accent);background:var(--panel2)}

@media (max-width:820px){
  .nav nav{display:none}
  .nav .lang{display:none}          /* language moves into the sheet */
  .m-actions{display:flex}
  .menu-btn{display:inline-flex}
  .mnav-toggle:checked ~ .sheet-scrim{display:block}
  .mnav-toggle:checked ~ .menu-sheet{display:block;top:var(--nav-h,60px)}
  .mnav-toggle:checked ~ .menu-sheet{animation:sheet-in .18s cubic-bezier(.22,1,.36,1) both}
  @keyframes sheet-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
@media (max-width:420px){
  .brand-word{display:none}         /* keep the two buttons comfortable */
  .m-btn{padding:9px 12px;font-size:13.5px}
}

/* language switcher */
.lang{position:relative;list-style:none;flex:0 0 auto}
.lang>summary{cursor:pointer;list-style:none;color:var(--muted);font-size:14px;
              padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
              white-space:nowrap;user-select:none;background:var(--panel);
              display:inline-flex;align-items:center;gap:6px;transition:border-color var(--tr)}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:""}
.lang>summary:hover,.lang[open]>summary{color:var(--text);border-color:var(--border-hi)}
.lang .globe{font-size:15px;line-height:1}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);
           border:1px solid var(--border);border-radius:12px;padding:6px;min-width:150px;
           z-index:30;box-shadow:var(--sh-pop)}
.lang-menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);color:var(--muted);font-size:14px}
.lang-menu a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.lang-menu a.on{color:var(--text);background:var(--panel2)}

/* ---------- layout ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:40px var(--gut) 80px}
.banner{background:rgba(124,92,255,.10);border-bottom:1px solid var(--border);
        color:#cdb8ff;padding:11px var(--gut);text-align:center;font-size:14px}
footer{color:var(--muted);font-size:13px;padding:34px var(--gut);
       border-top:1px solid var(--border);margin-top:24px;background:rgba(0,0,0,.25)}
footer .foot-in{max-width:var(--maxw);margin:0 auto;display:flex;gap:14px 18px;flex-wrap:wrap;
                align-items:center;justify-content:space-between}
footer a{color:var(--muted);margin:0 8px 0 0}
footer a:hover{color:var(--text)}

/* ---------- typography ---------- */
.hero{padding:56px 0 8px}
.hero h1{font-size:var(--fs-hero);margin:0 0 18px;font-weight:var(--fw-bold);
         letter-spacing:-.03em;line-height:1.06;max-width:16ch}
.hero h1 .hl{background:linear-gradient(100deg,#7aa2ff 0%,#a78bff 100%);
             -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{color:var(--muted);font-size:clamp(16px,2.1vw,20px);margin:0 0 30px;max-width:56ch}
h2{font-weight:var(--fw-bold);letter-spacing:-.02em;font-size:var(--fs-h2);line-height:1.2}
h3{letter-spacing:-.01em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;
         text-transform:uppercase;letter-spacing:.12em;margin:0 0 20px;
         padding:6px 14px;border:1px solid var(--border);border-radius:var(--r-pill);
         background:var(--glass)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
              box-shadow:0 0 0 4px rgba(61,220,151,.15)}
@media (max-width:560px){
  .eyebrow{font-size:10.5px;letter-spacing:.09em;padding:5px 11px;gap:6px}
}
.section{margin-top:76px}
.section-head{margin-bottom:26px}
/* section kicker — NOT .eyebrow: that name already belongs to the hero badge pill,
   and reusing it dressed every section label in the pill's full-width box */
.kicker{display:inline-block;font-size:11.5px;font-weight:var(--fw-med);letter-spacing:.16em;
        text-transform:uppercase;margin-bottom:8px;
        background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
        -webkit-background-clip:text;background-clip:text;color:transparent}
.section-head h2{margin:0}
.section-head p{color:var(--muted);margin:8px 0 0;max-width:60ch}

/* ---------- cards / grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:linear-gradient(180deg,var(--glass) 0%,rgba(255,255,255,0) 100%),var(--panel);
      border:1px solid var(--border);border-radius:var(--r-lg);
      padding:26px;transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr);
      position:relative}
.card:hover{border-color:rgba(124,146,255,.38);transform:translateY(-3px);
            box-shadow:var(--sh-card),0 18px 44px rgba(79,124,255,.10)}
.card h3{margin:0 0 4px;font-size:17px;font-weight:var(--fw-med)}
/* the recommended plan */
.card.featured{border-color:rgba(79,124,255,.45);
               box-shadow:0 0 0 1px rgba(79,124,255,.15),0 18px 44px rgba(79,124,255,.14)}
/* Marks the longest plan. The card is already outlined and lifted — the tag only
   has to name why, so it stays a quiet label: no gradient fill, no glow, no shouting
   in capitals. The ring in --bg is what keeps it from sitting on the card's border. */
.card-tag{position:absolute;top:-11px;left:24px;
          /* Green, like «−45%» and «Экономия 826 ₽» below it: the tag is part of the
             savings story, so it reads as a benefit rather than as decoration. Solid
             fill on dark text carries at a glance; the old version shouted the same
             thing in a neon-blue gradient and capitals, which read as an ad banner. */
          background:var(--ok);color:#04241a;
          /* Same weight and size as .badge-save («−45%») a few lines down: 750 is the
             heading weight and at 12px on a light fill the letters close up. */
          font-size:12px;font-weight:var(--fw-med);letter-spacing:.015em;
          padding:4px 12px;border-radius:var(--r-pill);
          box-shadow:0 0 0 4px var(--bg),0 4px 14px rgba(61,220,151,.30);
          /* The featured card's rotating conic border (.card.featured:after) is a
             pseudo-element, so it paints AFTER this tag and its light swept straight
             across the text once every 7s. Stacking the tag above it keeps the ring
             running behind the label instead of through it. */
          z-index:2}
.price{font-size:var(--fs-price);font-weight:var(--fw-bold);margin:10px 0 2px;
       letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.price .per{font-size:14px;font-weight:400;color:var(--dim);letter-spacing:0}
.muted{color:var(--muted);font-size:14px}
.save{display:inline-block;margin-top:8px;color:var(--ok);font-size:13px;font-weight:var(--fw-med)}

/* feature + step cards on the landing */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px}
.feat .item{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
            padding:24px;transition:border-color var(--tr),transform var(--tr)}
.feat .item:hover{border-color:var(--border-hi);transform:translateY(-3px)}
.feat .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
           line-height:0;
           background:rgba(79,124,255,.12);border:1px solid rgba(79,124,255,.22);
           margin-bottom:14px;font-size:19px}
.feat h3{margin:0 0 6px;font-size:16.5px;font-weight:var(--fw-med)}
.feat p{margin:0;color:var(--muted);font-size:14.5px}
@media (max-width:720px){
  .feat .item{display:grid;grid-template-columns:42px 1fr;column-gap:14px;padding:18px}
  .feat .ico{margin-bottom:0}
  .feat h3{grid-column:2;align-self:center;margin:0}
  .feat p{grid-column:2;margin-top:6px}
}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps .step{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
             padding:22px 22px 24px}
.steps .step .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
                background:var(--grad);color:#fff;font-size:14px;font-weight:var(--fw-bold);
                margin-bottom:12px;box-shadow:var(--sh-btn)}
.steps .step p{margin:0;color:var(--muted);font-size:14.5px}
.steps .step b{color:var(--text);font-weight:var(--fw-med)}

/* trust chips under the hero */
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
@media (max-width:560px){
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .trust span{padding:8px 10px;font-size:12.5px;justify-content:flex-start}
}
.trust span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:13.5px;
            color:var(--muted);border:1px solid var(--border);border-radius:var(--r-pill);
            background:var(--glass)}
/* what unblocks */
.works{display:flex;flex-wrap:wrap;gap:10px}
.works span{padding:9px 15px;border:1px solid var(--border);border-radius:var(--r-pill);
            font-size:14px;color:var(--muted);background:var(--panel)}

/* the 1-rouble trial — the best-converting offer on the page, drawn like it */
.trial-strip{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;
             margin:0 0 22px;padding:20px 24px;border-radius:var(--r-lg);position:relative;
             border:1px solid rgba(79,124,255,.35);
             background:radial-gradient(400px 140px at 12% 0%,rgba(79,124,255,.16),rgba(79,124,255,0) 70%),var(--panel)}
.trial-strip .ts-body{display:flex;align-items:center;gap:18px;flex:1 1 320px}
.trial-strip .ts-price{font-size:30px;font-weight:var(--fw-bold);letter-spacing:-.02em;
             background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
             flex:0 0 auto}
.trial-strip h3{margin:0 0 3px;font-size:16.5px;font-weight:var(--fw-med)}
.trial-strip p{margin:0;color:var(--muted);font-size:14px;max-width:56ch}
@media (max-width:560px){.trial-strip .btn{width:100%;text-align:center}}

/* the line under the plan grid that says what every plan includes */
.plans-common{margin:18px 2px 0;color:var(--muted);font-size:13.5px;max-width:72ch}

/* closing call to action */
.cta-band{margin-top:76px;border:1px solid var(--border);border-radius:22px;padding:44px 34px;
          text-align:center;position:relative;overflow:hidden;
          background:radial-gradient(600px 240px at 30% 0%,rgba(79,124,255,.20),rgba(79,124,255,0) 70%),
                     radial-gradient(500px 220px at 78% 100%,rgba(124,92,255,.14),rgba(124,92,255,0) 70%),
                     var(--panel)}
.cta-band:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
                 background:linear-gradient(90deg,transparent,rgba(124,146,255,.55),transparent)}
.cta-band h2{margin:0 0 10px}
.cta-band p{color:var(--muted);margin:0 auto 24px;max-width:52ch}
.cta-band .cta-row{justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--grad);color:#fff;border:none;
     padding:14px 26px;border-radius:var(--r-md);font-size:15.5px;cursor:pointer;
     font-weight:var(--fw-med);letter-spacing:.005em;box-shadow:var(--sh-btn);
     position:relative;overflow:hidden;
     transition:transform var(--tr),filter var(--tr),box-shadow var(--tr)}
.btn:after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
           background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
           transform:skewX(-18deg);transition:left .5s ease;pointer-events:none}
.btn:hover:after{left:125%}
.btn.secondary:after,.btn.ghost:after{content:none}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none;
           box-shadow:0 10px 30px rgba(79,124,255,.45)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border-hi);
               box-shadow:none}
.btn.secondary:hover{border-color:var(--text);filter:none}
.btn.block{display:block;width:100%;text-align:center}
.btn.hi-cta{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}
.btn.sm{padding:10px 18px;font-size:14px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- panels / code / inputs ---------- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
       padding:26px;margin:16px 0}
.code{font-family:var(--font-mono);font-size:21px;letter-spacing:1px;background:var(--panel2);
      border:1px dashed var(--accent);border-radius:var(--r-sm);padding:14px 18px;
      display:inline-block;margin:8px 0;user-select:all}
.input{width:100%;padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--border);
       background:var(--panel2);color:var(--text);font-size:16px;transition:border-color var(--tr)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,255,.18)}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;list-style:none;padding:19px 22px;font-weight:var(--fw-med);
             display:flex;align-items:center;justify-content:space-between;gap:16px;
             transition:background var(--tr)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{background:var(--panel2)}
.faq summary:after{content:"+";color:var(--muted);font-size:20px;line-height:1;flex:0 0 auto;
                   transition:transform var(--tr)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--muted);font-size:15px;margin:0}

/* ---------- alerts ---------- */
.warn{color:#e7d8ad;background:rgba(180,140,40,.10);border:1px solid #4a3d12;
      border-radius:var(--r-md);padding:13px 17px;font-size:14px}
.error{color:#ffb4b4;background:rgba(180,40,40,.10);border:1px solid #4a1f1f;
       border-radius:var(--r-md);padding:13px 17px;font-size:14px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
td,th{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
th{color:var(--muted);font-weight:var(--fw-med)}
tr:last-child td{border-bottom:none}

/* ---------- tabs / pills / stats ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.tab{padding:10px 17px;border:1px solid var(--border);border-radius:var(--r-sm);
     color:var(--muted);cursor:pointer;font-size:14px;background:var(--panel);
     transition:color var(--tr),border-color var(--tr)}
.tab:hover{color:var(--text);text-decoration:none}
.tab.on{color:var(--text);border-color:var(--accent);background:var(--panel2)}
.acct-nav{flex-wrap:wrap;margin:2px 0 20px}
.acct-nav .tab{white-space:nowrap}
@media (max-width:720px){
  .acct-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
            scrollbar-width:none;margin-left:-16px;margin-right:-16px;
            padding:2px 16px 6px}
  .acct-nav::-webkit-scrollbar{display:none}
}
.qa{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.stat{display:flex;gap:20px;flex-wrap:wrap}
.stat .v{font-size:25px;font-weight:var(--fw-bold);letter-spacing:-.02em}
.stat .k{color:var(--muted);font-size:13px}
.pill{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);font-size:11px;
      font-weight:var(--fw-med);text-transform:uppercase;letter-spacing:.07em;
      border:1px solid var(--border);color:var(--muted);background:var(--glass)}
.pill.ok{color:var(--ok);border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.08)}

/* subscription time remaining, as a bar — a number answers "how many", the bar
   answers "should I worry" without reading */
.meter{height:6px;border-radius:4px;background:var(--panel2);overflow:hidden;margin-top:9px}
.meter i{display:block;height:100%;border-radius:4px;background:var(--grad)}
.meter.low i{background:linear-gradient(90deg,#ff9a5b,#ff6b6b)}

/* payment history rows: an icon well + coloured amounts */
.rows-list .r{display:flex;align-items:center;gap:14px;justify-content:space-between;
              padding:14px 2px;border-bottom:1px solid var(--border)}
.rows-list .r:last-child{border-bottom:none}
.rows-list .rico{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;
                 place-items:center;background:rgba(79,124,255,.10);
                 border:1px solid rgba(79,124,255,.20);color:var(--accent)}
.rows-list .rico.up{background:rgba(61,220,151,.10);border-color:rgba(61,220,151,.22);
                    color:var(--ok)}
.rows-list .body{flex:1 1 auto;min-width:0}
.rows-list .t{font-weight:var(--fw-med);font-size:15px}
.rows-list .m{color:var(--dim);font-size:12.5px;margin-top:2px}
.rows-list .side{text-align:right;flex:0 0 auto}
.rows-list .side a{font-size:12.5px;color:var(--muted)}
.rows-list .amt{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;white-space:nowrap}
.rows-list .amt.up{color:var(--ok)}

/* ---------- iOS-style toggle ---------- */
.switch{position:relative;display:inline-block;width:48px;height:28px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--border);border-radius:28px;
               transition:.2s;cursor:pointer}
.switch .track:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;
                      background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.track{background:var(--ok)}
.switch input:checked+.track:before{transform:translateX(20px)}
.toggle-row{display:flex;align-items:center;gap:12px;margin:4px 0}

/* ---------- entrance motion (cheap, and off for reduced-motion users) ------ */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .5s cubic-bezier(.22,1,.36,1) both}
  .rise-2{animation-delay:.06s}
  .rise-3{animation-delay:.12s}
  .rise-4{animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- phones / tablets ---------- */
@media (max-width:820px){
  .nav nav{display:none}
  .menu{display:block}
}
@media (max-width:640px){
  :root{--gut:16px}
  .nav{padding:11px var(--gut);gap:10px}
  .brand-mark{height:28px}
  .brand-word{height:19px}
  main{padding:26px var(--gut) 60px}
  .hero{padding:30px 0 4px}
  .hero h1{max-width:none}
  .hero .lead{margin-bottom:24px}
  .cta-row .btn{width:100%;text-align:center}
  .trust{gap:8px}
  .trust span{padding:7px 11px;font-size:12.5px;gap:6px}
  .works span{padding:8px 13px;font-size:13.5px}
  .section{margin-top:52px}
  .panel{padding:20px}
  .card{padding:22px}
  .price{font-size:29px}
  .code{font-size:15px;padding:12px 14px;letter-spacing:.5px}
  td,th{padding:10px 6px;font-size:13px;word-break:break-word}
  .panel .btn{margin:3px 6px 3px 0}
  .panel form{margin-bottom:6px}
  .panel a.btn+a.btn{margin-top:6px}
  .tabs{gap:6px}
  .tab{padding:9px 13px;font-size:13px}
  .cta-band{padding:32px 20px;margin-top:52px}
  .faq summary{padding:16px 18px}
  .faq .a{padding:0 18px 18px}
  footer{padding:26px var(--gut)}
  footer .foot-in{justify-content:center;text-align:center}
}

/* ---------- hero: copy on the left, product visual on the right ---------- */
.hero-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
           gap:48px;align-items:center}
.hero-visual{position:relative}
/* a mock of the connected app — pure CSS, so it costs no extra request */
.appcard{border:1px solid var(--border);border-radius:22px;padding:22px;
         background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),var(--panel);
         box-shadow:var(--sh-pop);position:relative;overflow:hidden}
.appcard:before{content:"";position:absolute;inset:-40% -10% auto;height:70%;
                background:radial-gradient(closest-side,rgba(79,124,255,.35),rgba(79,124,255,0));
                pointer-events:none}
.appcard .top{display:flex;align-items:center;justify-content:space-between;gap:12px;
              position:relative}
.appcard .name{font-weight:var(--fw-med);letter-spacing:.02em}
.appcard .state{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ok);
                border:1px solid rgba(61,220,151,.35);border-radius:var(--r-pill);padding:4px 11px;
                background:rgba(61,220,151,.08)}
.appcard .state i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.appcard .rows{display:grid;gap:9px;position:relative}
.appcard .row{display:flex;align-items:flex-start;gap:11px;
              border:1px solid var(--border);border-radius:12px;padding:12px 14px;
              background:var(--panel2);font-size:14px;line-height:1.45}
.appcard .row svg{flex:0 0 auto;margin-top:3px}
.appcard .loc{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;
              margin:16px 0 14px;position:relative}

/* live service numbers — every figure is a COUNT from our own database */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.stats .s{border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;
          background:linear-gradient(180deg,var(--glass),rgba(255,255,255,0)),var(--panel)}
.stats .n{font-size:28px;font-weight:var(--fw-bold);letter-spacing:-.03em;
          font-variant-numeric:tabular-nums}
.stats .l{color:var(--muted);font-size:13.5px;margin-top:2px}
.stats-note{color:var(--dim);font-size:12.5px;margin-top:12px}

/* price anchor chip in the hero */
.from-price{display:inline-flex;align-items:baseline;gap:7px;margin-left:2px;color:var(--muted);
            font-size:14.5px}
.from-price b{color:var(--text);font-size:17px;font-weight:var(--fw-bold);letter-spacing:-.02em}

/* ---------- plan cards: what is included ---------- */
.card .feats{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.card .feats li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--muted)}
.card .feats svg{flex:0 0 auto;margin-top:3px}
.badge-save{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:var(--r-pill);
            font-size:12px;font-weight:var(--fw-med);color:var(--ok);
            background:rgba(61,220,151,.10);border:1px solid rgba(61,220,151,.30)}

/* payment / guarantee reassurance under the plans */
.reassure{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;color:var(--muted);font-size:13.5px}
.reassure span{display:inline-flex;align-items:center;gap:8px}

/* ---------- sticky buy bar (phones only) ---------- */
.buybar{display:none}
@media (max-width:820px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:12px;
          align-items:center;justify-content:space-between;padding:11px 16px;
          background:rgba(5,7,13,.92);backdrop-filter:blur(14px);
          border-top:1px solid var(--border);
          padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  .buybar .txt{font-size:13px;color:var(--muted);line-height:1.25}
  .buybar .txt b{display:block;color:var(--text);font-size:15px;font-weight:var(--fw-med)}
  .buybar .btn{padding:12px 18px;font-size:14.5px;white-space:nowrap}
  body{padding-bottom:76px}
}

/* skip link for keyboard users */
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--text);
      padding:12px 18px;border-radius:0 0 var(--r-md) 0;z-index:50}
.skip:focus{left:0}

@media (max-width:900px){
  .hero-wrap{grid-template-columns:1fr;gap:34px}
  .hero-visual{max-width:420px}
}

/* ============================================================================
   Inner pages (account, checkout, auth) — the same kit everywhere so every tab
   looks like one product instead of eight different forms.
   ============================================================================ */

/* page header: title, one line of context, actions on the right */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
           flex-wrap:wrap;margin:0 0 20px}
.page-head h1{font-size:clamp(26px,3.6vw,34px);margin:0;letter-spacing:-.025em;line-height:1.15}
.page-head .sub{margin:7px 0 0;color:var(--muted);font-size:14.5px}
.page-head .acts{display:flex;gap:10px;flex-wrap:wrap}

/* account section nav — one scrollable segmented control */
.acct-nav{display:flex;gap:4px;overflow-x:auto;padding:5px;margin:0 0 24px;
          border:1px solid var(--border);border-radius:14px;background:var(--panel);
          scrollbar-width:none;-webkit-overflow-scrolling:touch;
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent);
          -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent)}
/* once scrolled to the end nothing is clipped, so nothing should fade */
.acct-nav.at-end{mask-image:none;-webkit-mask-image:none}
.acct-nav::-webkit-scrollbar{display:none}
.acct-nav .tab{border:none;background:transparent;white-space:nowrap;padding:9px 15px;
               border-radius:10px;font-size:14.5px}
.acct-nav .tab:hover{background:var(--glass);color:var(--text)}
.acct-nav .tab.on{background:var(--panel2);color:var(--text);
                  box-shadow:0 0 0 1px var(--border-hi) inset}

/* key → value grid, used for subscription facts and order summaries */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.kv>div{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r-md);
        padding:12px 14px}
.kv .k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.kv .v{font-size:16px;font-weight:var(--fw-med);margin-top:5px}
.kv .v.big{font-size:24px;font-weight:var(--fw-bold);letter-spacing:-.02em}

/* one card per subscription / device / anything with a status */
.item{border:1px solid var(--border);border-radius:var(--r-lg);
      background:linear-gradient(180deg,var(--glass) 0%,rgba(255,255,255,0) 100%),var(--panel);
      box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
      padding:24px;margin:14px 0}
.item>.head h3{font-size:18px}
.item .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.item .head h3{margin:0;font-size:17.5px;font-weight:var(--fw-med)}
.item .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.item .acts .btn{flex:1 1 0;min-width:150px;text-align:center;white-space:nowrap}
@media (max-width:560px){
  .item .acts{flex-direction:column}
  .item .acts .btn{width:100%;min-width:0}
}
/* the renewal-method chooser: forms wrap the buttons, so size the FORMS equally
   and let each button fill its form — otherwise the row can never line up */
.item .fold form{flex:1 1 0;min-width:150px}
.item .fold form .btn{width:100%;text-align:center;white-space:nowrap}
@media (max-width:560px){
  .item .fold form{flex-basis:100%}
}
.item .fold{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}

/* hiddify key row: actions on the left, a scannable QR on the right (desktop) —
   the phone takes the key straight off the screen */
.hi-row{display:flex;gap:22px;align-items:flex-start}
.hi-main{flex:1 1 auto;min-width:0}
.hi-qr{flex:0 0 148px;text-align:center}
.hi-qr svg{width:148px;height:148px;border-radius:12px;background:#fff;padding:6px;display:block}
.hi-qr .cap{color:var(--dim);font-size:11.5px;margin-top:7px;line-height:1.35}
@media (max-width:640px){.hi-qr{display:none}} /* pointless to scan the screen you hold */

/* copy-me control: the value and its button read as one object */
.copy{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:12px;
      background:var(--panel2);overflow:hidden}
.copy input{flex:1 1 auto;min-width:0;border:none;background:transparent;color:var(--text);
            padding:12px 14px;font-size:13px;font-family:var(--font-mono)}
.copy input:focus{outline:none}
.copy button{flex:0 0 auto;border:none;border-left:1px solid var(--border);cursor:pointer;
             background:var(--glass);color:var(--text);padding:0 18px;font-size:14px;
             font-weight:var(--fw-med);font-family:var(--font);transition:background var(--tr)}
.copy button:hover{background:var(--panel)}

/* nothing here yet */
.empty{text-align:center;padding:38px 20px;color:var(--muted)}
.empty .big{color:var(--text);font-weight:var(--fw-med);font-size:17px;margin-bottom:6px}
.empty .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* forms */
.field{margin:16px 0}
.field>label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:7px}
.field .hint{font-size:12.5px;color:var(--dim);margin-top:7px}
textarea.input{resize:vertical;font-family:var(--font);line-height:1.5}
/* selectable option row (device count, plan choice, payment method) */
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);
     border-radius:12px;padding:13px 15px;margin:9px 0;cursor:pointer;background:var(--panel2);
     transition:border-color var(--tr),background var(--tr)}
.opt:hover{border-color:var(--border-hi)}
.opt:has(input:checked){border-color:var(--accent);background:rgba(79,124,255,.09)}
.opt input{margin-top:4px;accent-color:var(--brand-1);flex:0 0 auto}
.opt .t{font-weight:var(--fw-med)}
.opt .d{color:var(--muted);font-size:13.5px;margin-top:2px}
.opt .p{margin-left:auto;font-weight:var(--fw-med);white-space:nowrap}

/* simple record list (payments, tickets) */
.rows-list .r{display:flex;justify-content:space-between;align-items:center;gap:14px;
              padding:15px 0;border-bottom:1px solid var(--border)}
.rows-list .r:last-child{border-bottom:none}
.rows-list .t{font-weight:var(--fw-med)}
.rows-list .m{color:var(--muted);font-size:12.5px;margin-top:2px}
.rows-list .side{text-align:right;white-space:nowrap;flex:0 0 auto}
.rows-list .amt{font-weight:var(--fw-bold);font-size:17px;letter-spacing:-.02em}

/* auth / single-purpose pages sit in one narrow card */
.auth{max-width:470px;margin:28px auto}
.auth h1{margin:0 0 6px;font-size:27px;letter-spacing:-.025em}
.auth .lead-sm{color:var(--muted);font-size:14.5px;margin:0 0 20px}

/* status pills beyond .ok */
.pill.warn{color:#e7c46b;border-color:rgba(231,196,107,.35);background:rgba(231,196,107,.08)}
.pill.bad{color:#ff9b9b;border-color:rgba(255,155,155,.35);background:rgba(255,155,155,.08)}
.pill.ok{background:rgba(61,220,151,.08)}

/* success / info callouts */
.ok-note{color:#b8f0cf;background:rgba(61,220,151,.09);border:1px solid rgba(61,220,151,.30);
         border-radius:var(--r-md);padding:13px 17px;font-size:14px}

@media (max-width:640px){
  .item{padding:18px}
  /* eight tabs on a phone: keep them all visible, just tighter */
  .acct-nav{padding:4px;gap:2px}
  .acct-nav .tab{padding:8px 11px;font-size:13.5px}
  .kv{gap:13px}
  .rows-list .r{align-items:flex-start}
  .copy input{font-size:12px;padding:11px 12px}
  .copy button{padding:0 14px}
  .page-head .acts{width:100%}
  .page-head .acts .btn{flex:1 1 auto;text-align:center}
}

/* ============================================================================
   Guide (/help) and long-form pages
   ============================================================================ */

/* step 0 — pick the app. Two real cards, not two words in a row: choosing the
   app is the single most important decision on this page. */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
             margin:8px 0 30px}
.choice{position:relative;display:block;cursor:pointer;border:1px solid var(--border);
        border-radius:var(--r-lg);padding:22px;background:var(--panel);
        transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.choice:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .top{display:flex;align-items:center;gap:12px}
.choice .logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
              background:rgba(79,124,255,.12);border:1px solid rgba(79,124,255,.22);
              font-weight:var(--fw-bold);font-size:18px;color:#9dbaff}
.choice h3{margin:0;font-size:18px;font-weight:var(--fw-med)}
.choice p{margin:12px 0 0;color:var(--muted);font-size:14.5px}
.choice .plats{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.choice .plats span{font-size:12.5px;color:var(--muted);border:1px solid var(--border);
                    border-radius:var(--r-pill);padding:4px 11px}
.choice .rec{position:absolute;top:-11px;right:20px;background:var(--grad);color:#fff;
             font-size:11.5px;font-weight:var(--fw-med);letter-spacing:.05em;text-transform:uppercase;
             padding:4px 11px;border-radius:var(--r-pill);box-shadow:0 0 0 5px var(--bg)}
.choice .mark{position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;
              border:1.5px solid var(--border-hi);display:grid;place-items:center;opacity:0;
              transition:opacity var(--tr)}
.choice.on{border-color:var(--accent);background:linear-gradient(180deg,rgba(79,124,255,.10),
           rgba(79,124,255,0)),var(--panel);
           box-shadow:0 0 0 1px rgba(79,124,255,.25),0 16px 40px rgba(79,124,255,.12)}
.choice.on .mark{opacity:1;background:var(--accent);border-color:var(--accent)}
.choice.on .logo{background:rgba(79,124,255,.20)}

/* segmented control (iOS / Android / PC) */
.seg{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--border);border-radius:13px;
     background:var(--panel);margin:0 0 20px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border:none;background:transparent;color:var(--muted);cursor:pointer;
            font:inherit;font-size:14.5px;padding:9px 18px;border-radius:10px;white-space:nowrap;
            transition:background var(--tr),color var(--tr)}
.seg button:hover{color:var(--text)}
.seg button[aria-selected="true"]{background:var(--panel2);color:var(--text);
                                  box-shadow:0 0 0 1px var(--border-hi) inset}

/* numbered walkthrough with a rail down the left */
.howto{list-style:none;margin:0;padding:0;position:relative}
.howto>li{position:relative;padding:0 0 26px 52px}
.howto>li:before{content:counter(step);counter-increment:step;position:absolute;left:0;top:0;
                 width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
                 background:var(--grad);color:#fff;font-weight:var(--fw-bold);font-size:14px;
                 box-shadow:var(--sh-btn)}
.howto{counter-reset:step}
.howto>li:after{content:"";position:absolute;left:17px;top:38px;bottom:6px;width:1px;
                background:var(--border)}
.howto>li:last-child{padding-bottom:0}
.howto>li:last-child:after{display:none}
.howto .t{font-size:15.5px;line-height:1.55}
.howto .t b{font-weight:var(--fw-med)}
.howto code{background:var(--panel2);border:1px solid var(--border);border-radius:6px;
            padding:1px 6px;font-family:var(--font-mono);font-size:13px}

/* screenshots inside a phone frame — a bare PNG on a dark page reads as a glitch */
.shots{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 2px}
.phone{width:186px;border-radius:24px;border:1px solid var(--border-hi);padding:8px;
       background:linear-gradient(180deg,#151b28,#0b0f1a);box-shadow:var(--sh-card);flex:0 0 auto}
.phone .bar{height:4px;width:46px;border-radius:3px;background:var(--border-hi);margin:2px auto 7px}
.phone img{display:block;width:100%;height:auto;border-radius:17px}
.phone .cap{color:var(--muted);font-size:12px;text-align:center;margin-top:9px;line-height:1.35}

/* desktop screenshots — a window frame rather than a phone one, and wider, because a
   Windows dialog squeezed into a 186px phone body is unreadable */
.win{width:360px;max-width:100%;border-radius:12px;border:1px solid var(--border-hi);padding:8px;
     background:linear-gradient(180deg,#151b28,#0b0f1a);box-shadow:var(--sh-card);flex:0 0 auto}
.win img{display:block;width:100%;height:auto;border-radius:7px}
.win .cap{color:var(--muted);font-size:12px;text-align:center;margin-top:9px;line-height:1.35}

/* the one step people skip: give it a visible weight the others do not have */
.howto>li.accent .t{border-left:2px solid var(--accent);padding-left:14px}
.howto>li.accent:before{background:var(--accent)}

/* the backup app's badge must not read as a recommendation */
.choice .rec.backup{background:var(--panel2);color:var(--muted);border:1px solid var(--border-hi)}

/* callout used for "where do I get the key" and warnings inside the guide */
.callout{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);
         border-radius:var(--r-lg);background:var(--panel2);padding:18px 20px;margin:22px 0}
.callout .ico{flex:0 0 auto;font-size:20px;line-height:1.2}
.callout h4{margin:0 0 4px;font-size:15.5px;font-weight:var(--fw-med)}
.callout p{margin:0;color:var(--muted);font-size:14.5px}

/* long-form legal text */
.prose{max-width:74ch}
.prose h2{margin:34px 0 10px;font-size:21px}
.prose h3{margin:24px 0 8px;font-size:17px;font-weight:var(--fw-med)}
.prose p,.prose li{color:var(--muted);font-size:15px}
.prose li{margin:6px 0}
.prose a{text-decoration:underline;text-underline-offset:2px}
.toc{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--panel);
     padding:18px 22px;margin:0 0 28px}
.toc ol{margin:8px 0 0;padding-left:20px}
.toc li{margin:5px 0;font-size:14.5px}

@media (max-width:640px){
  .choice{padding:18px}
  .howto>li{padding-left:46px}
  .phone{width:150px}
  .shots{gap:12px}
  .callout{padding:15px 16px}
}

/* ---------- inline icon sprite ---------- */
.i{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
   stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.i.lg{width:22px;height:22px}
.trust span .i,.reassure span .i{color:var(--accent);opacity:.9}
.callout .ico .i{width:22px;height:22px;color:var(--accent)}

/* ---------- depth: a soft glow behind the hero visual ---------- */
.hero-visual:before{content:"";position:absolute;inset:-12% -8% -18%;z-index:-1;pointer-events:none;
                    background:radial-gradient(closest-side,rgba(79,124,255,.20),rgba(79,124,255,0) 70%);
                    filter:blur(6px)}
/* No float on the card: 8px over 7 seconds moves slower than a pixel per frame,
   so the eye catches it stepping instead of gliding — worse than no motion at all.
   The breathing status dot stays: small, fast enough to read as alive. */
@media (prefers-reduced-motion:no-preference){
  .appcard .state i{animation:statePulse 2.2s ease-in-out infinite}
}
@keyframes statePulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.45)}
                      55%{box-shadow:0 0 0 6px rgba(61,220,151,0)}}

/* ---------- section rhythm: a hairline above each section title ---------- */
.section>.section-head{position:relative;padding-top:26px}
.section>.section-head:before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;
                              border-radius:2px;background:var(--grad)}

/* ---------- scroll reveal (skipped for reduced-motion users) ---------- */
/* Only hide sections when JavaScript is actually running (the `js` class is set
   by an inline script in <head>) — otherwise a script error would leave the page
   blank instead of merely un-animated. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(10px);
              transition:opacity .3s ease-out, transform .3s ease-out}
  .js .reveal.in{opacity:1;transform:none}
}

/* ---------- footer with real columns ---------- */
.foot-cols{max-width:var(--maxw);margin:0 auto;display:grid;
           grid-template-columns:1.4fr repeat(2,minmax(120px,1fr));gap:26px}
.foot-cols h5{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
              color:var(--dim);font-weight:var(--fw-med)}
.foot-cols a{display:block;margin:0 0 8px;color:var(--muted);font-size:14px}
.foot-cols a:hover{color:var(--text)}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.foot-brand img{height:26px;width:auto}
.foot-note{color:var(--dim);font-size:12.5px;max-width:42ch;margin:0}
.foot-bottom{max-width:var(--maxw);margin:24px auto 0;padding-top:18px;
             border-top:1px solid var(--border);display:flex;gap:14px;flex-wrap:wrap;
             justify-content:space-between;color:var(--dim);font-size:12.5px}

@media (max-width:640px){
  .foot-cols{grid-template-columns:1fr;gap:22px}
  .section>.section-head{padding-top:22px}
}

/* ============================================================================
   Finish: the details that separate "clean" from "expensive". Everything here
   is CSS-only — no fonts, no images, no requests. Motion is disabled wholesale
   for prefers-reduced-motion further down.
   ============================================================================ */

/* 1. Aurora: two slow-drifting colour fields behind the page. This is the layer
      that makes a flat dark page feel lit. */
body:after{content:"";position:fixed;inset:-30% -10% auto;height:90vh;z-index:-1;
           pointer-events:none;opacity:.55;
           background:radial-gradient(38% 42% at 22% 30%,rgba(79,124,255,.30),transparent 70%),
                      radial-gradient(34% 38% at 78% 20%,rgba(124,92,255,.24),transparent 70%),
                      radial-gradient(30% 34% at 60% 60%,rgba(61,220,151,.10),transparent 70%);
           filter:blur(28px)}
@media (prefers-reduced-motion:no-preference){
  body:after{animation:aurora 26s ease-in-out infinite alternate}
  @keyframes aurora{
    0%{transform:translate3d(-2%,0,0) scale(1)}
    50%{transform:translate3d(3%,2%,0) scale(1.06)}
    100%{transform:translate3d(-1%,-2%,0) scale(1.02)}
  }
}

/* 2. Grain: a 140-byte SVG noise tile. Kills the "flat vector" look on big
      dark surfaces and hides gradient banding on cheap phone screens. */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
       background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.nav,footer,.buybar{position:relative;z-index:1}

/* 3. Gradient hairline on top of every card — light catching an edge. */
.card,.item,.feat .item,.faq,.appcard,.cta-band,.choice{position:relative}
.card:before,.feat .item:before,.appcard:before,.cta-band:before,.choice:before{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  opacity:.7;pointer-events:none}
.appcard:before{left:8%;right:8%}

/* 4. The recommended plan gets a slowly rotating conic border. */
/* the ring is masked to the 1px edge — a bare conic gradient would flood the card */
.card.featured:after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ang,0deg),rgba(79,124,255,.9),rgba(124,92,255,.6),
             rgba(79,124,255,0) 42%,rgba(79,124,255,0) 58%,rgba(124,92,255,.6),rgba(79,124,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@media (prefers-reduced-motion:no-preference){
  .card.featured:after{animation:spin 7s linear infinite}
  @keyframes spin{to{--ang:360deg}}
}

/* 5. Buttons get a light sweep on hover. */
.btn{position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
            transform:skewX(-18deg);pointer-events:none;
            background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
            transition:left .55s cubic-bezier(.4,0,.2,1)}
.btn:hover:before{left:130%}
.btn.secondary:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}

/* 6. Cards lift toward the cursor: a soft spotlight follows the pointer.
      --mx/--my are set by a tiny script in base.html. */
.card:hover,.feat .item:hover,.choice:hover{
  background-image:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
                   rgba(79,124,255,.12),transparent 60%)}

/* 7. Live connection dot in the hero card actually pulses. */
@media (prefers-reduced-motion:no-preference){
  .appcard .state i{animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}
    70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}
    100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
  }
}

/* 8. Reading progress line under the sticky header. */
.progress{display:none}

/* 9. Hero headline: a slow shimmer across the highlighted words. */
@media (prefers-reduced-motion:no-preference){
  .hero h1 .hl{background:linear-gradient(100deg,#7aa2ff 0%,#a78bff 35%,#e6ecff 50%,
               #a78bff 65%,#7aa2ff 100%);background-size:250% 100%;
               -webkit-background-clip:text;background-clip:text;
               -webkit-text-fill-color:transparent;animation:shimmer 7s ease-in-out infinite}
  @keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
}

@media (prefers-reduced-motion:reduce){
  body:after{animation:none}
}