/* Hallmark · audit pass 10 Nov 2026 · brand-led build (BLOKK app) · pre-emit critique: P4 H4 E4 S5 R4 V3 */
/* BLOKK website redesign, November 2026. Colours are BLOKK's official colour sheet (Colours.pdf); shapes and type follow the live app. */
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(assets/fonts/roboto-latin.woff2) format('woff2')}
:root{
  --night:#04122E;      /* every page background (official) */
  --card:#0E2965;       /* cards and bands on Night (official) */
  --raised:#16398A;     /* fields and hover, a step up from Card */
  --well:#16398A;       /* round icon backgrounds */
  --shot-night:#071231; /* the navy inside the app screenshots, for parts drawn over them */
  --shot-card:#0B1F4D;
  --blue:#3266F1;       /* buttons, the octagon (official) */
  --blue-hover:#4B7BF5;
  --green:#00CC00;      /* switch on, only */
  --gold:#F9AF00;       /* MAX crown and Save badge, only */
  --red:#FF1A56;        /* a blocked item, only */
  --white:#FFFFFF;
  --soft:#99BDF8;       /* secondary text on navy (official light blue), 9:1 on Night */
  --line:#21407F;       /* solid hairlines */
  --r-card:12px;
  --r-btn:4px;
  --wrap:1200px;
  --ff:Roboto,'Noto Sans','Helvetica Neue',Arial,sans-serif; /* Latin, Cyrillic, Greek, Vietnamese. Other scripts are set per language at the end of this file */
  --side:clamp(20px,5vw,48px);
  --sec:clamp(64px,8vw,116px);
  --oct:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);      /* things arriving */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* things moving on screen */
  --glass:rgba(4,18,46,.78);                 /* the header over the page */
  --star:#F9AF00;
  --star-vpn:#FFFF00;                        /* VPN server ratings only, as in the app */
  --edge:#5E73AE;        /* outlines of ghost buttons and store buttons */
  --hint:#A9BAE6;        /* placeholder text */
  --on-gold:#1A1300;     /* text on gold */
  --switch-off:#F4F6FA;  /* a switch that is off */
  --store-hover:#10131c; /* store button, hover */
  --dev-bezel:#020308;   /* phone bezel */
  --dev-button:#2A2F3D;  /* phone side buttons */
  --arc:#7EA2FF;         /* lines on blue */
  --black:#000;       /* store buttons and the phone island */
  --dev-frame:linear-gradient(140deg,#8B93A8 0%,#3A4051 18%,#1B1F2A 50%,#3A4051 82%,#767E93 100%); /* phone edge */
  --shadow-1:rgba(1,6,22,.35);
  --shadow-2:rgba(1,6,22,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--night);color:var(--soft);font:400 17px/1.55 var(--ff);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:var(--white)}
img,svg{display:block;max-width:100%}
a{color:var(--white);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{overflow-wrap:anywhere;min-width:0;color:var(--white);margin:0;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(42px,5.6vw,80px);line-height:1}
h2{font-size:clamp(32px,4vw,52px);line-height:1.06}
h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
.wrap{max-width:calc(var(--wrap) + var(--side)*2);margin-inline:auto;padding-inline:var(--side)}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec)*.6)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:34em}
.small{font-size:14px;line-height:1.45}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hair{border:0;border-top:1px solid var(--line);margin:0}
.fa-crown{color:var(--gold)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-btn);border:1px solid var(--blue);background:var(--blue);color:var(--white);font:700 17px/1.2 var(--ff);text-decoration:none;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,scale .16s var(--ease-out)}
.btn:hover{background:var(--white);border-color:var(--white);color:var(--night)}
.btn:active{background:var(--soft);border-color:var(--soft);scale:.97}
.btn--ghost{background:transparent;border-color:var(--edge);color:var(--white)}
.btn--ghost:hover{background:var(--raised);border-color:var(--white);color:var(--white)}
.btn--sm{min-height:44px;padding:0 18px;font-size:15px}
.btn{white-space:nowrap}
.btn--wide{width:100%}

.store:active,.dl__item:active,.app:active,.topics a:active,.contact a:active,.help__nav a:active,.top__nav a:active{background:var(--raised)}
.faq summary:active::after{background:var(--blue)}

/* STORE BADGES (drawn with Font Awesome brand icons; the developer swaps in the official badge art) */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:6px 18px 6px 14px;border-radius:var(--r-card);background:var(--black);border:1px solid var(--edge);color:var(--white);text-decoration:none;transition:border-color .18s,background-color .18s}
.store:hover{border-color:var(--white);background:var(--store-hover)}
.store i{font-size:26px;width:28px;text-align:center}
.store span{display:block;font:400 11px/1.2 var(--ff);color:var(--soft)}
.store b{display:block;font:700 18px/1.15 var(--ff);letter-spacing:-.01em;white-space:nowrap}

/* HEADER */
.topmark{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}
.top{position:sticky;top:0;z-index:50;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid transparent;transition:border-color .2s}
.top.is-stuck{border-bottom-color:var(--line)}
.top__in{display:flex;align-items:center;gap:32px;height:72px}
.top__logo{display:flex;align-items:center;height:44px}
.top__logo img{width:112px;height:auto}
.top__nav{display:flex;gap:4px;margin-inline-start:auto}
.top__nav a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:var(--r-btn);color:var(--white);font-weight:500;font-size:16px;text-decoration:none}
.top__nav a:hover{background:var(--raised)}
.top__nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--blue);border-radius:0}
.top__menu{display:none;width:44px;height:44px;margin-inline-start:auto;border:0;border-radius:50%;background:var(--card);color:var(--white);font-size:18px;cursor:pointer}
.top__menu:hover{background:var(--raised)}
.sheet{display:none}
@media (max-width:860px){
  .top__in{height:64px;gap:10px}
  .top__nav{display:none}
  .top__menu{display:block;order:3;margin-inline-start:0}
  .top__dl{margin-inline-start:auto}
  .top__logo img{width:98px}
  .sheet{position:fixed;inset:64px 0 0;z-index:49;background:var(--night);padding:8px var(--side) 32px;overflow:auto}
  .sheet.is-open{display:block}
  .sheet a{display:flex;align-items:center;justify-content:space-between;min-height:60px;border-bottom:1px solid var(--line);color:var(--white);font:700 22px/1.2 var(--ff);text-decoration:none}
  .sheet a i{font-size:14px;color:var(--soft)}
  .sheet .stores{margin-top:28px}
}

/* PHONE (a real iPhone shape around a real app screenshot) */
.phone{container-type:inline-size;width:var(--pw,300px);max-width:100%;flex:none}
.phone__body{position:relative;padding:1cqw;border-radius:17.4cqw;background:var(--dev-frame);box-shadow:0 2.5cqw 4cqw var(--shadow-1),0 12cqw 22cqw var(--shadow-2)}
.phone__body::before,.phone__body::after{content:"";position:absolute;width:1cqw;background:var(--dev-button);border-radius:.6cqw}
.phone__body::before{left:-.7cqw;top:25%;height:8%;box-shadow:0 12cqw 0 var(--dev-button),0 -9cqw 0 0 var(--dev-button)}
.phone__body::after{right:-.7cqw;top:31%;height:13%}
.phone__bezel{position:relative;padding:2.5cqw;border-radius:16.4cqw;background:var(--dev-bezel)}
.phone__screen{position:relative;overflow:hidden;border-radius:13.9cqw;aspect-ratio:460/1000;background:var(--shot-night)}
.phone__screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ios{position:absolute;inset:0 0 auto;height:5.75%;background:var(--shot-night);color:var(--white);z-index:3}
.ios__time{position:absolute;left:13.5%;top:50%;translate:0 -42%;font:600 4.5cqw/1 -apple-system,"SF Pro Text",var(--ff);letter-spacing:-.01em}
.ios__island{position:absolute;left:50%;top:21%;translate:-50%;width:30%;height:66%;border-radius:5cqw;background:var(--black)}
.ios__icons{position:absolute;right:9%;top:50%;translate:0 -38%;height:3.4cqw;width:auto}
.ios--site{background:var(--night)}
.render{position:relative;display:block;width:var(--pw,300px);max-width:100%;flex:none;filter:drop-shadow(0 28px 36px var(--shadow-2))}
.render img{display:block;width:100%;height:auto}
.render__cover{position:absolute;left:79.6%;top:9.2%;width:11.6%;aspect-ratio:1;border-radius:50%;background:var(--shot-night)}
[hidden]{display:none!important}
.phone__home{position:absolute;left:50%;bottom:1.1%;translate:-50%;width:36%;height:1.4cqw;border-radius:1cqw;background:var(--white);z-index:3}

/* live parts drawn over the Home screenshot so the hero shows the Shield on */
.live-shield{position:absolute;left:4.35%;top:12.45%;width:91.3%;height:8.15%;border-radius:2cqw;background:var(--shot-card);display:flex;align-items:center;justify-content:space-between;padding:0 2.6% 0 2.9%;z-index:2}
.live-shield b{color:var(--white);font:700 4.45cqw/1 var(--ff)}
.sw{position:relative;display:block;flex:none;width:21cqw;height:9cqw;border-radius:5cqw;background:var(--switch-off);transition:background-color .35s}
.sw::after{content:"";position:absolute;top:1cqw;left:1cqw;width:7cqw;height:7cqw;border-radius:50%;background:var(--black);transition:translate .35s var(--ease),background-color .35s}
.is-on .sw{background:var(--green)}
.is-on .sw::after{translate:12cqw 0;background:var(--white)}
.live-n{position:absolute;right:6.6%;width:22%;height:3%;background:var(--shot-card);color:var(--white);font:700 4.1cqw/1 var(--ff);display:flex;align-items:center;justify-content:flex-end;z-index:2;font-variant-numeric:tabular-nums}
.live-n--t{top:57.5%}
.live-n--s{top:61%}

/* HERO A: the octagon stage */
.hero{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px)}
/* HERO BACKGROUND: Blue Bloom, the brand's blue fade (chosen by Archie, 10 Nov 2026). BLOKK Blue fading into Night:
   a wide, bright wash across the whole hero, brightest round the phone, fading to Night at the edges and the bottom,
   with the Night octagon sitting on it. It runs under the headline and the Download button; the header stays on Night.
   DO NOT shrink it to "behind the phone only": that turns it into a ring round a dark hole, which reads as a glow.
   Built after 21st.dev's "Animated Gradient Background" (hammamikhairi) in plain CSS: it is there from the first paint and breathes slowly.
   With reduced motion it does not move at all. */
@property --gw{syntax:'<percentage>';inherits:false;initial-value:125%}
.hero{position:relative;isolation:isolate;overflow:clip}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__bg i{position:absolute;inset:0;background:radial-gradient(calc(var(--gw)*.52) calc(var(--gw)*.78) at 72% 52%,var(--blue-hover) 0%,var(--blue) 16%,var(--raised) 40%,var(--card) 62%,var(--night) 100%)}
.hero__bg::after{content:"";position:absolute;inset:auto 0 0;height:12%;background:linear-gradient(transparent,var(--night))}
@media (prefers-reduced-motion:no-preference){.hero__bg i{animation:breathe 9s ease-in-out infinite alternate}}
@keyframes breathe{from{--gw:108%}to{--gw:132%}}
@media (max-width:860px){.hero__bg i{background:radial-gradient(var(--gw) calc(var(--gw)*.5) at 50% 74%,var(--blue-hover) 0%,var(--blue) 16%,var(--raised) 40%,var(--card) 62%,var(--night) 100%)}}
.hero .stage__oct{background:var(--night)}
/* The hero words settle in on load: quick, and with no script. */
@media (prefers-reduced-motion:no-preference){
  .hero__words>*{animation:rise .32s var(--ease-out) both}
  .hero__words>*:nth-child(2){animation-delay:.04s}
  .hero__words>*:nth-child(3){animation-delay:.08s}
}
@keyframes rise{from{opacity:0;translate:0 12px}}
[dir=rtl] .hero__bg i{transform:scaleX(-1)} /* the phone is on the other side in right to left pages, so the background follows it */
.hero__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1 span{display:block}
:lang(en) .hero h1 span{white-space:nowrap}
@media (max-width:350px){.hero h1{font-size:8.6vw}}
/* The Download button is on screen the moment the page opens, on short screens too */
@media (min-width:861px) and (max-height:760px){
  .hero{padding-top:12px}
  .hero h1{font-size:clamp(30px,7.2vh,56px)}
  .hero .lead{font-size:16px;margin-top:14px}
  .hero__act{margin-top:20px}
  .stage{max-width:min(560px,74vh)}
}
@media (max-width:860px) and (max-height:520px){
  .hero{padding-top:8px}
  .hero h1{font-size:clamp(24px,8.4vh,40px)}
  .hero .lead{font-size:15px;margin-top:8px}
  .hero__act{margin-top:12px}
  .hero__act .btn{min-height:44px}
}
.hero .lead{margin-top:clamp(18px,2vw,28px)}
.hero__act{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.stage{position:relative;aspect-ratio:1/1.1;max-width:560px;width:100%;margin-inline:auto;container-type:inline-size}
.stage__oct{position:absolute;inset:4% 3%;clip-path:var(--oct);background:var(--card)}
.stage__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage .phone,.stage .render{position:absolute;left:50%;top:50%;translate:-50% -50%;--pw:45cqw}
.stage .render{width:47cqw}

/* HERO B: the switch */
.heroB{padding-block:clamp(40px,6vw,88px) clamp(56px,7vw,96px);text-align:center}
.heroB h1{font-size:clamp(46px,8.6vw,124px);line-height:.95}
.heroB .lead{margin:clamp(18px,2vw,28px) auto 0}
.heroB__act{margin-top:clamp(26px,3vw,36px);display:flex;justify-content:center}
.appcard{container-type:inline-size;width:min(560px,100%);margin:clamp(36px,5vw,64px) auto 0;text-align:start}
.appcard__row{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:var(--r-card);padding:22px 24px;border:0;width:100%;cursor:pointer;color:var(--white);font:700 clamp(20px,5cqw,26px)/1.2 var(--ff)}
.appcard .sw{width:92px;height:40px;border-radius:22px}
.appcard .sw::after{top:4px;left:4px;width:32px;height:32px}
.appcard.is-on .sw::after{translate:52px 0}
.appcard__stats{margin-top:12px;background:var(--card);border-radius:var(--r-card);padding:20px 24px}
.appcard__stats b{display:block;color:var(--white);font-size:19px;margin-bottom:10px}
.appcard__stats div{display:flex;justify-content:space-between;align-items:center;padding:5px 0;color:var(--white);font-size:17px}
.appcard__stats div span{display:inline-flex;gap:10px;align-items:center}
.appcard__stats strong{font-variant-numeric:tabular-nums;font-weight:700}
.sample{margin-top:10px;font-size:13px;color:var(--soft);text-align:center}

/* PROOF FIGURES */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.figs>div{padding:clamp(24px,3vw,40px) clamp(16px,2.4vw,36px)}
.figs>div+div{border-inline-start:1px solid var(--line)}
.figs>div:first-child{padding-inline-start:0}
.figs b{display:block;color:var(--white);font:900 clamp(40px,5.2vw,68px)/1 var(--ff);letter-spacing:-.03em}
.figs b i{font-size:.5em;color:var(--gold);vertical-align:.25em;margin-inline-start:.15em}
.figs span{display:block;margin-top:10px;max-width:22em}
.figs b span{display:inline;margin:0}
.proofline{text-align:center;color:var(--white);font-size:18px;padding-block:22px;border-block:1px solid var(--line)}

/* SECTION HEADS */
.head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.head p{margin-top:16px;font-size:clamp(18px,1.4vw,20px);max-width:36em}
.head--c{margin-inline:auto;text-align:center}
.head--c p{margin-inline:auto}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:76px}
.steps li::before{content:counter(s);position:absolute;top:0;inset-inline-start:0;width:56px;height:56px;display:grid;place-items:center;background:var(--blue);clip-path:var(--oct);color:var(--white);font:900 24px/1 var(--ff)}
.steps li::after{content:"";position:absolute;top:28px;inset-inline-start:72px;inset-inline-end:calc(clamp(24px,3vw,48px)*-1 + 16px);border-top:1px solid var(--line)}
.steps li:last-child::after{display:none}
.steps p{margin-top:8px;max-width:26em}

/* FEATURE ROWS */
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.row+.row{margin-top:var(--sec)}
.row--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.row--flip .row__pic{order:-1}
.row__text{max-width:460px}
.row__text p{margin-top:16px}
.row__text .btn{margin-top:28px}
.row__pic{position:relative;display:flex;justify-content:center;align-items:flex-start;background:var(--card);border-radius:var(--r-card);padding:clamp(36px,4vw,56px) clamp(16px,3vw,40px) 0;overflow:hidden;height:clamp(420px,38vw,540px)}
.row__pic--low{padding-top:0}
.row__pic--night{background:var(--night)}
.row__pic .phone{--pw:clamp(220px,24vw,300px)}
.maxnote{display:flex;align-items:center;gap:8px;color:var(--white);font-weight:700;font-size:15px}
.points{display:flex;gap:clamp(16px,2.4vw,40px);align-items:stretch;justify-content:center;width:100%;height:100%}
.crop{display:flex;align-items:flex-end;overflow:hidden;height:calc(100% - 36px);padding:0 24px;flex:none}
.pin{position:absolute;left:39%;width:7.4cqw;height:7.4cqw;display:grid;place-items:center;background:var(--blue);clip-path:var(--oct);color:var(--white);font:700 3.6cqw/1 var(--ff);z-index:2}
.points ol{list-style:none;margin:0;padding:0;counter-reset:p;flex:0 1 270px;display:grid;gap:20px;align-content:center}
.points li{counter-increment:p;position:relative;padding-inline-start:40px;color:var(--soft);font-size:15px;line-height:1.4}
.points li b{display:block;color:var(--white);font-size:17px}
.points li::before{content:counter(p);position:absolute;inset-inline-start:0;top:0;width:28px;height:28px;display:grid;place-items:center;background:var(--blue);clip-path:var(--oct);color:var(--white);font:700 13px/1 var(--ff)}
.is-in .points li,.no-js .points li{opacity:1;translate:0 0}

/* MAP BAND */
.band{background:var(--card)}
.map{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:center}
.map__text p{margin-top:16px}
.map__fig{position:relative;margin:0}
.map__fig img{width:100%;height:auto}
.map__fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map__fig path{fill:none;stroke:var(--arc);stroke-width:.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease);transition-delay:calc(var(--i)*.18s)}
.map__fig.is-in path,.no-js .map__fig path{stroke-dashoffset:0}
.map__fig circle{fill:var(--white)}
.map__fig circle.home{fill:var(--green)}
.map__fig text{fill:var(--white);font:500 7px var(--ff)}
.map__fig figcaption{margin-top:14px;font-size:13px}

/* STATEMENT */
.say{text-align:center}
.say h2{font-size:clamp(36px,6vw,80px);line-height:1}
.say p{margin:24px auto 0;font-size:clamp(18px,1.5vw,21px);max-width:38em}

/* PLANS */
.plans{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
.plan{background:var(--card);border-radius:var(--r-card);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.plan--max{outline:1px solid var(--white);outline-offset:-1px;position:relative}
.plan h3{font-size:28px;font-weight:900;display:flex;align-items:center;gap:12px}
.plan__price{margin-top:14px;color:var(--white);font:900 clamp(40px,4.4vw,56px)/1 var(--ff);letter-spacing:-.03em}
.plan__price small{font:500 17px/1.2 var(--ff);letter-spacing:0;color:var(--soft);margin-inline-start:6px}
.plan__sub{margin-top:8px;min-height:1.5em}
.ticks{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
.ticks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.ticks li{position:relative;padding-inline-start:32px;color:var(--white)}
.ticks li::before{content:"\f00c";font:900 11px/20px "Font Awesome 6 Free";position:absolute;inset-inline-start:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--blue);color:var(--white);text-align:center}
.ticks li small{display:block;color:var(--soft);font-size:14px}
.plan .btn{margin-top:auto;align-self:flex-start}
.save{position:absolute;top:-12px;inset-inline-end:20px;background:var(--gold);color:var(--on-gold);font:700 14px/1 var(--ff);padding:7px 10px;border-radius:var(--r-btn)}
.under{margin-top:12px;font-size:14px}

/* QUOTES */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.quotes blockquote{margin:0;color:var(--white);font:700 clamp(22px,2.4vw,32px)/1.25 var(--ff);letter-spacing:-.01em}
.quotes blockquote i{display:block;color:var(--blue);font-size:28px;margin-bottom:18px}
.quotes cite{display:block;margin-top:16px;font:400 15px/1.4 var(--ff);color:var(--soft);letter-spacing:0}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}

/* FAQ */
.faq{max-width:820px}
.faq--c{margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:14px 0;color:var(--white);font:700 clamp(18px,1.6vw,21px)/1.3 var(--ff);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\2b";font:900 14px/36px "Font Awesome 6 Free";flex:none;width:36px;height:36px;border-radius:50%;background:var(--card);text-align:center;transition:rotate .25s var(--ease),background-color .18s}
.faq summary:hover::after{background:var(--blue)}
.faq details[open] summary::after{rotate:45deg}
.faq details>div{padding:0 56px 24px 0;max-width:42em}
.faq details>div p+p{margin-top:12px}
.faq__more{margin-top:28px}

/* CLOSING DOWNLOAD (replaces the pink card) */
.get{background:var(--card);border-radius:var(--r-card);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4.5vw,64px);position:relative;overflow:hidden}
.get::before{content:"";position:absolute;inset-inline-end:-90px;top:50%;translate:0 -50%;width:420px;aspect-ratio:1;background:var(--raised);clip-path:var(--oct);opacity:.55}
.get>*{position:relative}
.get p{margin-top:14px;max-width:30em}
.get .stores{margin-top:26px}
.qr{background:var(--white);border-radius:var(--r-card);padding:14px;width:196px;text-align:center}
.qr img{width:100%;height:auto;image-rendering:pixelated}
.qr span{display:block;margin-top:8px;color:var(--night);font:700 14px/1.25 var(--ff)}

/* FOOTER (a statement and one row of links; no pink card, no link columns) */
.foot{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) 28px;font-size:15px}
.foot__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.foot__top img{width:112px}
.foot__line{margin-top:16px;color:var(--white);font:900 clamp(28px,4vw,48px)/1.02 var(--ff);letter-spacing:-.02em}
.foot__social{display:flex;gap:8px}
.foot__side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.foot__social a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--card);font-size:17px;text-decoration:none}
.foot__social a:hover{background:var(--blue)}
.foot__links{list-style:none;margin:32px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:0 28px}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:none;white-space:nowrap}
.foot__links a:hover{text-decoration:underline}
.foot__legal{margin-top:16px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:13px;line-height:1.5}

/* PAGE HEADS (inner pages) */
.phead{padding-block:clamp(40px,6vw,88px) clamp(28px,4vw,48px)}
.phead h1{font-size:clamp(40px,5.6vw,72px);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.phead .lead{margin-top:18px}

/* DOWNLOAD PAGE */
.dl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.dl__list{display:grid;gap:12px}
.dl__item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--card);border-radius:var(--r-card);padding:20px 22px;text-decoration:none;color:var(--soft);transition:background-color .18s}
.dl__item:hover{background:var(--raised)}
.dl__item>i{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--well);color:var(--white);font-size:24px}
.dl__item b{display:block;color:var(--white);font-size:21px;line-height:1.2}
.dl__item em{font-style:normal;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-btn);background:var(--blue);color:var(--white);font-weight:700;font-size:15px;white-space:nowrap}
.dl__item.is-yours{outline:1px solid var(--white);outline-offset:-1px}
.dl__yours{display:none;color:var(--white);font-weight:700;font-size:13px;margin-top:4px}
.is-yours .dl__yours{display:block}
.dl__qr{background:var(--card);border-radius:var(--r-card);padding:clamp(24px,3vw,36px);display:grid;gap:20px;justify-items:center;text-align:center}
.dl__qr .qr{width:min(260px,100%);padding:18px}
.dl__qr h2{font-size:26px}
.dl__rating{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--white);font-size:15px}

/* MAX PAGE */
.maxhero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center}
.crown{width:64px;height:64px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:26px;margin-bottom:24px}
.pick{display:grid;gap:12px}
.pick label{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--card);border-radius:var(--r-card);padding:22px 22px;cursor:pointer;color:var(--white);outline:1px solid transparent;outline-offset:-1px;transition:outline-color .18s,background-color .18s}
.pick label:hover{background:var(--raised)}
.pick input{position:absolute;opacity:0}
.pick label::before{content:"";width:28px;height:28px;border-radius:50%;border:2px solid var(--white);background:transparent}
.pick label:has(input:checked){outline-color:var(--white)}
.pick label:has(input:checked)::before{background:var(--white);content:"\f00c";font:900 13px/24px "Font Awesome 6 Free";color:var(--night);text-align:center}
.pick label:has(input:focus-visible){outline:2px solid var(--white);outline-offset:3px}
.pick b{font-size:21px;display:block;line-height:1.2}
.pick span{font-size:15px;color:var(--soft)}
.pick strong{font-size:19px;font-weight:500;white-space:nowrap}
.pick .save{color:var(--on-gold);font-size:14px}
.pick .btn{margin-top:8px}
.cmp{width:100%;border-collapse:collapse;font-size:17px}
.cmp th,.cmp td{padding:18px 16px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp th:first-child,.cmp td:first-child{text-align:start;padding-inline-start:0;color:var(--white);width:56%}
.cmp td:first-child small{display:block;color:var(--soft);font-size:15px;font-weight:400;margin-top:2px}
.cmp thead th{border-top:0;color:var(--white);font-size:20px;font-weight:900;position:sticky;top:72px;background:var(--night);z-index:2}
.cmp tbody tr:last-child td{border-bottom:1px solid var(--line)}
.cmp .col-max{background:var(--card)}
.cmp thead .col-max{background:var(--card);border-radius:var(--r-card) var(--r-card) 0 0}
.yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:var(--white);font-size:12px}
.no{display:inline-block;width:14px;border-top:2px solid var(--edge);vertical-align:middle}

/* BLOG */
.thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--card);border-radius:var(--r-card);overflow:hidden;container-type:inline-size;text-decoration:none}
.thumb__oct{position:absolute;inset-inline-end:-11cqw;top:50%;translate:0 -50%;height:108%;aspect-ratio:1;background:var(--blue);clip-path:var(--oct);display:grid;place-items:center;transition:scale .5s var(--ease)}
.thumb__oct i{color:var(--white);font-size:18cqw;translate:-4cqw 0}
.thumb__word{position:absolute;inset-inline-start:6cqw;bottom:5cqw;color:var(--white);font:900 9.5cqw/.95 var(--ff);letter-spacing:-.03em;z-index:1}
.thumb__logo{position:absolute;inset-inline-start:6cqw;top:6cqw;width:15cqw}
a:hover>.thumb .thumb__oct,.thumb:hover .thumb__oct{scale:1.06}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(16px,2.4vw,32px)}
.post{display:block;text-decoration:none;color:var(--soft)}
.post h2,.post h3{font-size:clamp(20px,1.7vw,23px);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin-top:18px}
.post:hover h2,.post:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.post time{display:block;margin-top:10px;font-size:14px}
.post p{margin-top:8px;font-size:16px}
.post--lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:var(--sec)}
.post--lead h2{font-size:clamp(28px,3.2vw,44px);font-weight:900;line-height:1.08;margin-top:0;letter-spacing:-.02em}
.post--lead p{font-size:18px;margin-top:14px}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.topics a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-btn);background:var(--card);color:var(--white);font-weight:500;font-size:15px;text-decoration:none}
.topics a:hover{background:var(--raised)}
.topics a[aria-current]{background:var(--white);color:var(--night)}
.pager{margin-top:var(--sec);display:flex;justify-content:center}

/* ARTICLE */
.art{max-width:calc(736px + var(--side)*2);margin-inline:auto;padding-inline:var(--side)}
.art__back{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--white);text-decoration:none;font-weight:500;font-size:15px}
.art__back:hover{text-decoration:underline}
.art h1{font-size:clamp(28px,4.6vw,58px);line-height:1.06;margin-top:14px}
.art__meta{margin-top:18px;font-size:15px;display:flex;flex-wrap:wrap;gap:6px 18px}
.art__hero{max-width:calc(1000px + var(--side)*2);margin:clamp(28px,4vw,48px) auto;padding-inline:var(--side)}
.prose{font-size:18px;line-height:1.65}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15;margin-top:1.9em}
.prose strong{color:var(--white)}
.prose ul,.prose ol{padding-inline-start:1.2em;display:grid;gap:.5em}
.prose li::marker{color:var(--blue)}
.answers{background:var(--card);border-radius:var(--r-card);padding:clamp(22px,3vw,32px)}
.answers h2{margin-top:0;font-size:22px}
.answers dl{margin:14px 0 0;display:grid;gap:14px}
.answers dt{color:var(--white);font-weight:700}
.answers dd{margin:2px 0 0}
.finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin-block:2em}
.finds div{padding:22px 18px}
.finds div:first-child{padding-inline-start:0}
.finds div+div{border-inline-start:1px solid var(--line)}
.finds b{display:block;color:var(--white);font:900 clamp(30px,4vw,46px)/1 var(--ff);letter-spacing:-.03em}
.finds span{display:block;margin-top:8px;font-size:15px;line-height:1.4}
.pull{margin:2em 0;color:var(--white);font:700 clamp(22px,2.4vw,28px)/1.3 var(--ff)}
.pull i{display:block;color:var(--blue);font-size:26px;margin-bottom:14px}
.pull cite{display:block;margin-top:14px;font:400 15px/1.4 var(--ff);color:var(--soft)}
.inline-get{margin-block:2.2em;background:var(--card);border-radius:var(--r-card);padding:24px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:18px;align-items:center}
.inline-get img{width:64px;border-radius:14px}
.inline-get b{display:block;color:var(--white);font-size:20px;line-height:1.2}
.inline-get span{font-size:15px}
.share{margin-top:2.4em;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:15px}
.share span{margin-inline-end:8px}
.share a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--card);text-decoration:none}
.share a:hover{background:var(--blue)}

/* HELP */
.help{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.help__nav{position:sticky;top:96px;display:grid;gap:2px}
.help__nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-btn);color:var(--white);text-decoration:none;font-weight:500}
.help__nav a:hover{background:var(--card)}
.help h2{font-size:clamp(24px,2.4vw,30px);margin:0 0 14px}
.help section:not(:first-child){margin-top:clamp(40px,5vw,64px)}
.find{position:relative;max-width:560px;margin-top:28px}
.find input{width:100%;min-width:0;height:56px;border-radius:var(--r-card);border:1px solid transparent;background:var(--raised);color:var(--white);font:400 17px var(--ff);padding:0 20px 0 52px;caret-color:var(--white)}
.find input::placeholder{color:var(--hint)}
.find input:focus{outline:0;border-color:var(--white)}
.find i{position:absolute;inset-inline-start:20px;top:50%;translate:0 -50%;color:var(--white)}
.none{display:none;padding:24px 0;color:var(--white)}
.contact{max-width:820px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;background:var(--card);border-radius:var(--r-card);padding:20px;text-decoration:none;color:var(--soft);transition:background-color .18s}
.contact a:hover{background:var(--raised)}
.contact i{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:var(--white);font-size:18px}
.contact b{display:block;color:var(--white);font-size:19px}

/* HOME B extras */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px);justify-items:center}
.trio figure{margin:0;text-align:center;width:100%;display:grid;justify-items:center}
.trio .phone{--pw:min(270px,100%)}
.trio .render{width:min(282px,100%)}
.trio figcaption{margin-top:22px;max-width:20em}
.trio figcaption b{display:block;color:var(--white);font-size:20px;margin-bottom:4px}
.list2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}
.list2 div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.list2 div>i{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--well);color:var(--white);font-size:16px}
.list2 b{display:flex;align-items:center;gap:10px;color:var(--white);font-size:20px;line-height:1.3}
.list2 b i{font-size:14px}

/* APP TRACKER */
.tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-top:28px}
.tools .find{margin-top:0;max-width:none}
.pickers{display:flex;gap:12px}
.sel{display:grid;gap:4px;font-size:13px;color:var(--soft)}
.sel select{height:56px;min-width:0;width:100%;border-radius:var(--r-card);border:1px solid transparent;background:var(--raised);color:var(--white);font:500 16px var(--ff);padding:0 40px 0 16px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
.sel select:focus{outline:0;border-color:var(--white)}
.sel option{background:var(--card);color:var(--white)}
.samplenote{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:14px;color:var(--white)}
.samplenote i{color:var(--gold)}
.apps{display:grid;border-top:1px solid var(--line)}
.app{display:grid;grid-template-columns:52px minmax(0,2.4fr) repeat(3,minmax(0,.9fr)) 16px;gap:20px;align-items:center;padding:16px 8px;border-bottom:1px solid var(--line);color:var(--soft);text-decoration:none;font-size:14px;transition:background-color .18s}
.app:hover{background:var(--card)}
.band .app:hover{background:var(--raised)}
.app b{display:block;color:var(--white);font-size:18px;line-height:1.25}
.app__icon{width:52px;height:52px;border-radius:12px;background:var(--blue);color:var(--white);display:grid;place-items:center;font:900 24px/1 var(--ff)}
.app__icon--lg{width:84px;height:84px;border-radius:20px;font-size:40px;flex:none}
.app__n b{font-variant-numeric:tabular-nums}
.app>i{font-size:12px;color:var(--white)}
.apphead__top{display:flex;gap:20px;align-items:center;margin-top:16px}
.apphead h1{font-size:clamp(26px,4.4vw,56px);line-height:1.06}
.apphead__by{margin-top:8px;color:var(--white)}
.apphead .lead{max-width:40em}
.apphead .samplenote{margin:20px 0 0}
.apph2+.samplenote{margin:0 0 12px}
.appgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,64px);align-items:start}
.verdict{background:var(--card);border-radius:var(--r-card);padding:clamp(22px,3vw,32px)}
.verdict h2{font-size:clamp(24px,2.6vw,32px)}
.verdict p{margin-top:16px;max-width:38em}
.sharebar{height:10px;max-width:420px;margin-top:18px;border-radius:99px;background:var(--raised);overflow:hidden}
.sharebar i{display:block;height:100%;background:var(--blue)}
.figs--app{margin-top:24px}
.figs--app b{font-size:clamp(34px,4vw,52px)}
.apph2{font-size:clamp(24px,2.6vw,32px);margin:clamp(40px,5vw,64px) 0 16px}
.who th:first-child,.who td:first-child{width:auto}
.who thead th{position:static;font-size:14px;font-weight:500;color:var(--soft);text-align:start}
.who td,.who th{text-align:start}
.who td:nth-child(2){font-variant-numeric:tabular-nums;color:var(--white)}
.st{display:inline-block;padding:5px 10px;border-radius:var(--r-btn);background:var(--raised);color:var(--white);font-size:14px;font-weight:500}
.st--b{background:var(--blue)}
.kinds{display:grid;gap:14px}
.kind{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 44px;gap:16px;align-items:center;color:var(--white)}
.kind b{text-align:end;font-variant-numeric:tabular-nums}
.blockbox{position:sticky;top:96px;background:var(--card);border-radius:var(--r-card);padding:28px;display:grid;gap:16px}
.blockbox h2{font-size:26px}
.blockbox .store{flex:1 1 100%}

/* (The scroll reveal was removed on 10 Nov 2026: every section is fully drawn the moment it is reached.) */
/* REVEAL: parts rise in once as they arrive. Only with script and motion; never left hidden. */

/* REVIEWS (after 21st.dev's testimonial marquee, rebuilt in plain CSS) */
.revs{padding-bottom:calc(var(--sec)*.7)}
.revs__intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(28px,4vw,48px)}
.revs__score{grid-row:1/3;display:flex;align-items:center;gap:18px;padding:22px 26px;background:var(--card);border-radius:var(--r-card)}
.revs__score>b{color:var(--white);font:900 clamp(56px,6vw,84px)/1 var(--ff);letter-spacing:-.03em}
.revs__score div{display:grid;gap:6px;font-size:14px;max-width:11em;line-height:1.35}
.revs__intro p{font-size:clamp(17px,1.4vw,20px)}
.rcard__stars{color:var(--star);font-size:13px;letter-spacing:3px;white-space:nowrap}
.revs__rows{display:grid;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,var(--black) 8%,var(--black) 92%,transparent);mask-image:linear-gradient(90deg,transparent,var(--black) 8%,var(--black) 92%,transparent)}
.rrow{overflow:hidden}
/* Shown on every page that is not in English, where the reviews are translated. English pages show the reviews as written, so no note. */
.revs__note{margin-top:20px;font-size:14px;color:var(--soft)}
:lang(en) .revs__note{display:none}
.rrow__track{display:flex;gap:16px;width:max-content;animation:drift 56s linear infinite;animation-play-state:paused}
.rrow--back .rrow__track{animation-direction:reverse;animation-duration:66s}
.revs.is-live .rrow__track{animation-play-state:running}
.revs__rows:hover .rrow__track,.revs__rows:focus-within .rrow__track{animation-play-state:paused}
@keyframes drift{to{translate:calc(-50% - 8px) 0}}
.rcard{flex:none;width:min(360px,78vw);margin:0;padding:22px 24px;background:var(--card);border-radius:var(--r-card);display:flex;flex-direction:column;gap:12px}
.rcard blockquote{margin:0;color:var(--white);font-size:17px;line-height:1.45}
.rcard figcaption{margin-top:auto;font-size:14px;display:flex;gap:10px;align-items:baseline}
.rcard figcaption b{color:var(--white);font-size:15px}

/* FEATURE GRID: 21st.dev "Marketing Feature Bento" (isaiahbjork), rebuilt in plain CSS.
   A six-column grid; every card is a small working visual on top and its words underneath. */
.bhead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.bhead>div{display:grid;gap:20px;justify-items:start}
.bhead p{font-size:clamp(17px,1.35vw,19px);max-width:34em}
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.bento>li{display:flex;min-width:0}
.bento__lg{grid-column:span 4}
.bento__sm{grid-column:span 2}
.cell{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border-radius:var(--r-card);transition:background-color .2s var(--ease-out)}
.cell__vis{position:relative;flex:1;min-height:214px;display:flex;align-items:center;justify-content:center;padding:22px 22px 0;overflow:hidden}
.cell__vis>*{width:100%;max-width:440px}
.cell__text{padding:20px 24px 24px}
.cell h3{font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.cell h3 i{font-size:14px}
.cell p{margin-top:6px;max-width:34em}
.sw--on{background:var(--green)}
/* the live blocked list, drawn like the app's Activity */
.feed{max-width:640px!important;align-self:stretch;container-type:inline-size;background:var(--night);border-radius:var(--r-card);padding:16px 18px 10px;display:flex;flex-direction:column}
.feed__head{display:flex;align-items:center;justify-content:space-between;color:var(--white);font-size:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.feed .sw,.vpnui .sw{width:52px;height:28px;border-radius:14px;flex:none}
.feed .sw::after,.vpnui .sw::after{top:3px;left:3px;width:22px;height:22px;translate:24px 0;background:var(--white)}
.feed ul{list-style:none;margin:0;padding:0;display:grid}
.feed li span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.feed li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;transition:opacity .45s var(--ease-out),translate .5s var(--ease-out),filter .45s var(--ease-out)}
.feed li:last-child{border-bottom:0}
.feed li.is-new{opacity:0;translate:0 -14px;filter:blur(3px)}
.feed li i{width:10px;height:10px;border-radius:50%;background:var(--red)}
.feed li b{color:var(--white);font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.feed__note{margin-top:6px;font-size:12px}
/* no account: a sign-up form with every field struck out */
.noform{display:grid;gap:10px;max-width:300px!important}
.noform span{position:relative;display:flex;align-items:center;height:42px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--edge);color:var(--soft);font-size:15px}
.noform span::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:var(--white);scale:0 1;transform-origin:left;transition:scale .55s var(--ease-in-out)}
.noform span:nth-child(2)::after{transition-delay:.14s}
.noform span:nth-child(3)::after{transition-delay:.28s}
.noform span::after{scale:1 1}
/* VPN: the new Home's own rows */
.vpnui{display:grid;gap:10px;max-width:320px!important}
.vpnui__row,.vpnui__loc{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;color:var(--white)}
.vpnui__row>i{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--well);font-size:15px}
.vpnui__row b{display:block;font-size:17px;line-height:1.2}
.vpnui__row em{font-style:normal;font-size:13px;color:var(--green)}
.vpnui__loc{background:var(--night);border-radius:var(--r-card);padding:12px 14px;grid-template-columns:20px minmax(0,1fr) auto;font-size:16px}
.vpnui__loc i{font-size:13px;color:var(--soft)}
.vpnui__loc b{font-weight:700;transition:opacity .28s var(--ease-out),filter .28s var(--ease-out)}
.vpnui__loc b.is-out{opacity:0;filter:blur(4px)}
/* Blocking Level: the app's control, working */
.level{display:grid;gap:14px;max-width:340px!important}
.level__seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--night);border-radius:var(--r-card);padding:4px}
.level__thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px)/3);border-radius:calc(var(--r-card) - 4px);background:var(--blue);transition:translate .32s var(--ease-in-out)}
.level__seg button{position:relative;height:44px;border:0;background:none;color:var(--white);font:700 15px var(--ff);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:calc(var(--r-card) - 4px);transition:scale .16s var(--ease-out)}
.level__seg button:active{scale:.96}
.level__seg button i{font-size:12px}
.level__text{color:var(--white);font-size:15px;min-height:3em;text-align:center;transition:opacity .2s var(--ease-out),filter .2s var(--ease-out)}
.level__text.is-out{opacity:0;filter:blur(3px)}
.cell__vis--phone{align-items:flex-start;padding-top:26px;max-height:240px}
.cell__vis--phone .phone{--pw:200px;width:200px;max-width:none}
@media (hover:hover) and (pointer:fine){.cell:hover{background:var(--raised)}}

/* STEPS: 21st.dev "Feature Section" (ayushmxxn), rebuilt in plain CSS and JS.
   The steps advance by themselves with a progress line; the picture changes with them; any step can be pressed. */
.fsteps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.fsteps__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fsteps__list li{position:relative;opacity:.38;transition:opacity .5s var(--ease-out)}
.fsteps__list li.is-on,.fsteps__list li.is-done{opacity:1}
.no-js .fsteps__list li{opacity:1}
.fsteps__list button{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;align-items:center;width:100%;padding:18px 0;border:0;background:none;text-align:start;color:var(--soft);font:400 17px/1.5 var(--ff);cursor:pointer}
.fsteps__list button b{display:block;color:var(--white);font-size:clamp(20px,1.8vw,24px);line-height:1.25}
.fsteps__n{width:48px;height:48px;display:grid;place-items:center;clip-path:var(--oct);background:var(--raised);color:var(--white);font:900 20px/1 var(--ff);transition:background-color .3s var(--ease-out),scale .3s var(--ease-out)}
.fsteps__n i{display:none;font-size:16px}
.is-on .fsteps__n{background:var(--blue);scale:1.08}
.is-done .fsteps__n{background:var(--blue)}
.is-done .fsteps__n b{display:none}
.is-done .fsteps__n i{display:block}
.fsteps__bar{position:absolute;inset-inline-start:68px;inset-inline-end:0;bottom:0;height:2px;background:var(--line);overflow:hidden}
.fsteps__bar::after{content:"";position:absolute;inset:0;background:var(--white);scale:0 1;transform-origin:left}
.is-on .fsteps__bar::after{animation:fill var(--step,4s) linear forwards;animation-play-state:var(--play,paused)}
.is-done .fsteps__bar::after{scale:1 1}
@keyframes fill{to{scale:1 1}}
.fsteps__stage{position:relative;height:clamp(340px,34vw,440px);border-radius:var(--r-card);background:var(--night);overflow:hidden}
.fsteps__slide{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:36px;opacity:0;translate:0 60px;transition:opacity .45s var(--ease-in-out),translate .55s var(--ease-in-out);pointer-events:none}
.fsteps__slide.is-on{opacity:1;translate:0 0;pointer-events:auto}
.fsteps__slide.is-off{translate:0 -60px}
.fsteps__slide .render{width:230px}
.fsteps__slide .phone{--pw:230px}
.fsteps__get{align-self:center;display:grid;gap:20px;justify-items:center;margin-top:-36px}
.fsteps__get .stores{justify-content:center}
.fsteps__get .store{flex:0 0 auto;padding:6px 14px 6px 12px;gap:10px}
.fsteps__get .store b{font-size:16px;white-space:nowrap}

/* PRICING: 21st.dev "Pricing Section with Monthly/Yearly Toggle" (kedhareswer), rebuilt in plain CSS and JS.
   A sliding pill, a price that counts to its new value, and a bracketed featured plan. */
.ip__head{display:grid;justify-items:center;text-align:center;gap:14px;margin-bottom:clamp(28px,4vw,52px)}
.ip__head p{font-size:clamp(17px,1.35vw,19px)}
.ip__toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;background:var(--card);border-radius:var(--r-card);margin-top:6px}
.ip__toggle button{position:relative;z-index:1;height:44px;padding:0 20px;border:0;background:none;color:var(--soft);font:700 15px var(--ff);cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;transition:color .3s var(--ease-out)}
.ip__toggle button[aria-pressed=true]{color:var(--white)}
.ip__pill{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:calc(var(--r-card) - 4px);background:var(--blue);transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.ip.is-monthly .ip__pill{translate:100% 0}
.ip__save{background:var(--gold);color:var(--on-gold);font-size:12px;padding:3px 6px;border-radius:var(--r-btn)}
.ip__plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);max-width:920px;margin-inline:auto}
.ip__frame{position:relative;display:flex}
.ip__c{position:absolute;width:14px;height:14px;border:0 solid var(--white);pointer-events:none}
.ip__c--tl{top:-7px;left:-7px;border-top-width:2px;border-left-width:2px}
.ip__c--tr{top:-7px;right:-7px;border-top-width:2px;border-right-width:2px}
.ip__c--bl{bottom:-7px;left:-7px;border-bottom-width:2px;border-left-width:2px}
.ip__c--br{bottom:-7px;right:-7px;border-bottom-width:2px;border-right-width:2px}
.ip__plan{flex:1;display:flex;flex-direction:column;gap:16px;padding:28px 26px 26px;background:var(--card);border-radius:var(--r-card);transition:translate .45s cubic-bezier(.2,.8,.2,1),background-color .3s var(--ease-out)}
.ip__plan--hot{background:var(--raised)}
.ip__name{display:flex;align-items:center;gap:10px;color:var(--white);font:900 24px/1.1 var(--ff)}
.ip__badge{margin-inline-start:auto;font:700 13px/1 var(--ff);padding:6px 9px;border-radius:var(--r-btn);background:var(--night);color:var(--white)}
.ip__desc{min-height:3em}
.ip__price{display:flex;align-items:baseline;gap:8px;color:var(--white);font:900 clamp(48px,5vw,64px)/1 var(--ff);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ip__price small{font:500 16px/1 var(--ff);letter-spacing:0;color:var(--soft)}
.ip__saving{margin-top:-8px;font-size:14px;min-height:1.4em;color:var(--white)}
.ip__feats{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;color:var(--white);margin-bottom:8px}
.ip__plan--hot .ip__feats{border-top-color:var(--edge)}
.ip__feats li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.ip__feats i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--blue);font-size:10px;margin-top:2px}
.ip__plan .btn{margin-top:auto}
@media (hover:hover) and (pointer:fine){.ip__plan:hover{translate:0 -4px}}

/* COMPARE: BLOKK against the other kinds of tool */
.cmp3 th[scope=row]{text-align:start;padding-inline-start:0;color:var(--white);font-weight:500;width:34%}
.cmp3{table-layout:fixed}
.cmp3 thead th{font-size:17px}
.cmp3 thead th:first-child{width:34%}
.cmp3 thead img{display:inline-block;vertical-align:middle}
.cmp3 td{color:var(--white)}
.cmp3 td>*{vertical-align:middle}
.cmp3__t{margin-inline-start:10px;font-size:15px}
.cmp3__t:empty{display:none}
.cmp3__no{color:var(--soft);font-size:15px}
.cmp3__foot{margin-top:14px}

/* FLOW: how the Privacy Shield decides */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr) auto minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:stretch}
.flow>li:not(.flow__arrow):not(.flow__two),.flow__two>div{background:var(--night);border-radius:var(--r-card);padding:24px;display:grid;gap:10px;align-content:start}
.flow b{color:var(--white);font-size:19px;line-height:1.3}
.flow span{font-size:15px}
.flow__i{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--well);color:var(--white);font-size:19px!important}
.flow__i--blue{background:var(--blue)}
.flow__i--red{background:var(--red)}
.flow__i--green{background:var(--green);color:var(--night)}
.flow__arrow{display:grid;place-items:center;color:var(--white);font-size:18px}
.flow__two{display:grid;gap:12px}
.flow__two>div{grid-template-columns:48px minmax(0,1fr);align-items:center;padding:18px 20px}

/* PRIVACY SHIELD: its own big section */
.shieldui{container-type:inline-size}
.shieldui .feed{max-width:none!important;padding:22px 24px 14px;background:var(--card)}
.shieldui .feed__head{font-size:20px;border-bottom:0;padding-bottom:4px}
.feed__count{color:var(--soft);font-size:15px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.feed__count b{color:var(--white);font-size:17px}
.shieldui .feed li{padding:14px 0}
.shieldui .feed li b{font-size:16px}
#shield .row{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
#shield .ticks{margin:22px 0 28px}
.flow--in{margin-top:clamp(40px,5vw,72px)}
/* the picture has no words in it; the three captions are live text, so they can be translated */
.works{margin:0}
.works__title{text-align:center}
.works img{display:block;width:100%;max-width:1040px;height:auto;margin:clamp(12px,2vw,24px) auto 0;-webkit-mask-image:linear-gradient(90deg,transparent,var(--black) 7%,var(--black) 93%,transparent),linear-gradient(180deg,transparent,var(--black) 12%,var(--black) 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,var(--black) 7%,var(--black) 93%,transparent),linear-gradient(180deg,transparent,var(--black) 12%,var(--black) 88%,transparent);mask-composite:intersect}
.works figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px);max-width:1040px;margin:0 auto;padding-top:20px;border-top:1px solid var(--line)}
.works figcaption p{font-size:15px}
.works figcaption b{display:block;color:var(--white);font-size:18px;line-height:1.3;margin-bottom:6px}
.works figcaption p:nth-child(2){text-align:center}
.works figcaption p:nth-child(3){text-align:end}
.flow--in>li:not(.flow__arrow):not(.flow__two),.flow--in .flow__two>div{background:var(--card)}

/* VPN LOCATION: its own big section, with the country list */
.vloc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:center}
.vloc__map{position:relative;background:var(--night);border-radius:var(--r-card);padding:clamp(16px,3vw,40px)}
.vloc__world>img{display:block;width:100%;height:auto;opacity:.7}
.vloc__map{isolation:isolate}
.vloc__world{position:relative}
.vloc__pin{position:absolute;translate:-50% -50%;transition:left .7s var(--ease-in-out),top .7s var(--ease-in-out);z-index:1;pointer-events:none}
.vloc__pin i{display:block;width:16px;height:16px;border-radius:50%;background:var(--white);border:4px solid var(--blue);margin-inline:auto}
.vloc__pin b{position:absolute;bottom:22px;left:50%;translate:-50% 0;white-space:nowrap;background:var(--blue);color:var(--white);font-size:13px;padding:5px 9px;border-radius:var(--r-btn)}
.vloc__side{display:grid;gap:12px;min-width:0}
.vloc .find{margin-top:0;max-width:none}
.vloc .find input{background:var(--night)}
.vloc__list{list-style:none;margin:0;padding:6px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;background:var(--night);border-radius:var(--r-card);scrollbar-width:thin;scrollbar-color:var(--blue) var(--night)}
.vloc__title{font-size:20px;font-weight:700}
.vstars{display:flex;gap:2px;color:var(--star-vpn);font-size:12px;white-space:nowrap}
.vstars .is-off{color:var(--edge)}
.vloc__list button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;min-height:56px;padding:8px 12px;border:0;border-radius:calc(var(--r-card) - 4px);background:none;color:var(--soft);font:400 14px/1.3 var(--ff);text-align:start;cursor:pointer;transition:background-color .16s var(--ease-out)}
.vloc__list button b{display:block;color:var(--white);font-size:16px;font-weight:500}
.vloc__list button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vloc__list img{width:32px;height:24px;border-radius:3px;object-fit:cover}
.vloc__list button[aria-pressed=true]{background:var(--raised)}
.vloc__list button:active{background:var(--raised)}
@media (hover:hover) and (pointer:fine){.vloc__list button:hover{background:var(--card)}}
.vloc__none{padding:8px 0}

/* SUPPORTING GRID: three cards */
.bento__full{grid-column:1/-1}
.bento--3 .bento__sm{grid-column:span 2}
.bento--3 .bento__lg{grid-column:span 4}
.cell--wide{flex-direction:row;align-items:center}
.cell--wide .cell__vis{min-height:0;padding:28px 24px;flex:1 1 0}
.cell--wide .cell__text{flex:1 1 0;padding:28px 28px 28px 8px}
.cell__vis--phones{align-items:flex-start;gap:20px;padding-top:28px;max-height:300px}
.cell__vis--phones .phone{--pw:190px;width:190px;max-width:none}

/* AT A GLANCE: the plain facts about BLOKK, as text */
.glance dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.glance dl>div{padding:18px clamp(12px,2vw,28px);border-top:1px solid var(--line)}
.glance dl>div:nth-child(-n+3){border-top:0}
.glance dl>div:nth-child(3n+1){padding-inline-start:0}
.glance dl>div:not(:nth-child(3n+1)){border-inline-start:1px solid var(--line)}
.glance dt{font-size:14px}
.glance dd{margin:4px 0 0;color:var(--white);font-size:16px;line-height:1.4}
.foot__about{margin-top:12px;max-width:34em}
/* ARTICLE: findings as a table, the author */
.facts-t{font-size:16px}
.facts-t th,.facts-t td{text-align:start}
.facts-t th:first-child,.facts-t td:first-child{width:auto;color:var(--soft)}
.facts-t thead th{position:static;font-size:14px;font-weight:500;color:var(--soft)}
.facts-t td:last-child{color:var(--white);font-weight:700;white-space:nowrap}
.art__meta a{color:var(--white)}
.author{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;margin-top:2.4em;padding:20px;background:var(--card);border-radius:var(--r-card)}
.author__i{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:var(--white);font-weight:700}
.author p{font-size:15px}
.author b{display:block;color:var(--white);font-size:18px}

/* PHONE STICKY DOWNLOAD */
.dock{display:none}

/* RESPONSIVE */
@media (max-width:980px){
  .hero__in,.maxhero{grid-template-columns:minmax(0,1fr)}
  .stage{max-width:520px;margin-top:8px}
  .row,.map,.dl,.post--lead{grid-template-columns:minmax(0,1fr)}
  .row--flip .row__pic{order:0}
  .row__text{max-width:none}
  .plans{grid-template-columns:minmax(0,1fr)}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help{grid-template-columns:minmax(0,1fr)}
  .vloc,#shield .row{grid-template-columns:minmax(0,1fr)}
  .bento--3 .bento__sm,.bento--3 .bento__lg{grid-column:1/-1}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow__arrow{rotate:90deg;height:20px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__lg{grid-column:1/-1}
  .bento__sm{grid-column:span 1}
  .bento>li:last-child{grid-column:1/-1}
  .bhead,.fsteps{grid-template-columns:minmax(0,1fr)}
  .appgrid{grid-template-columns:minmax(0,1fr)}
  .blockbox{position:static}
  .tools{grid-template-columns:minmax(0,1fr)}
  .app{grid-template-columns:52px minmax(0,1.6fr) repeat(3,minmax(0,.7fr)) 16px;gap:12px}
  .help__nav{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .help__nav a{background:var(--card)}
  .cmp thead th{top:64px}
}
@media (max-width:640px){
  body{font-size:16px}
  .figs,.steps,.quotes,.posts,.finds,.trio,.list2,.contact{grid-template-columns:minmax(0,1fr)}
  .glance dl{grid-template-columns:minmax(0,1fr)}
  .glance dl>div:nth-child(n){padding:14px 0;border-inline-start:0;border-top:1px solid var(--line)}
  .glance dl>div:first-child{border-top:0}
  .facts-t td:last-child{white-space:normal}
  .figs>div{padding-inline:0}
  .figs>div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .finds div{padding-inline:0}
  .finds div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .steps li{padding-top:0;padding-inline-start:68px;min-height:52px}
  .steps li::before{width:48px;height:48px;font-size:20px}
  .steps li::after{display:none}
  .hero__act .btn,.heroB__act .btn{width:100%}
  .stage{aspect-ratio:1/1.16}
  .stage .phone{--pw:42cqw}
  .stage .render{width:44cqw}
  .row__pic{height:400px;padding-top:32px}
  .row__pic--low{height:auto;padding:0 20px 28px}
  .points{flex-direction:column;align-items:center;height:auto;gap:24px}
  .crop{height:330px}
  .points ol{flex:none;width:100%}
  .map__fig text{display:none}
  .ticks--2{grid-template-columns:minmax(0,1fr)}
  .plan .btn{align-self:stretch}
  .get{grid-template-columns:minmax(0,1fr)}
  .get .qr{display:none}
  .get::before{width:300px;inset-inline-end:-150px;top:auto;bottom:-120px;translate:none}
  .store{flex:1 1 150px}
  .dl__item{grid-template-columns:48px minmax(0,1fr);padding:16px}
  .dl__item>i{width:48px;height:48px;font-size:20px}
  .dl__item em{grid-column:1/-1;justify-content:center}
  .dl__qr{display:none}
  .pick label{padding:18px 16px;gap:12px}
  .cmp{font-size:15px}
  .cmp th,.cmp td{padding:14px 6px}
  .cmp{table-layout:fixed}
  .cmp th,.cmp td{overflow-wrap:anywhere;hyphens:auto}
  .cmp th:first-child,.cmp td:first-child{width:48%}
  .cmp thead th{font-size:16px}
  .inline-get{grid-template-columns:52px minmax(0,1fr)}
  .inline-get img{width:52px}
  .inline-get .btn{grid-column:1/-1}
  .faq details>div{padding-inline-end:0}
  .pickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .app{grid-template-columns:44px auto minmax(0,1fr) 12px;gap:6px 14px;padding:14px 0}
  .app__icon{width:44px;height:44px;font-size:20px;grid-row:1/3;align-self:start}
  .app__icon--lg{width:64px;height:64px;font-size:30px;grid-row:auto}
  .app__name{grid-column:2/4}
  .app>i{grid-column:4;grid-row:1/3}
  .app__n{grid-row:2}
  .app__n+.app__n+.app__n{display:none}
  .app__n b{display:inline;font-size:15px;margin-inline-end:5px}
  .apphead__top{align-items:flex-start;gap:14px}
  .kind{grid-template-columns:minmax(0,1fr) 44px}
  .kind .meter{grid-column:1/-1;grid-row:2}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento__lg,.bento__sm{grid-column:1/-1}
  .cell__vis{min-height:190px;padding:20px 18px 0}
  .ip__plans{grid-template-columns:minmax(0,1fr)}
  .fsteps__stage{height:380px;order:-1}
  .fsteps__list button{grid-template-columns:44px minmax(0,1fr);gap:14px;font-size:16px}
  .fsteps__n{width:44px;height:44px}
  .fsteps__bar{inset-inline-start:58px}
  .revs__intro{grid-template-columns:minmax(0,1fr)}
  .revs__score{grid-row:auto;justify-self:start}
  .cmp3,.cmp3 tbody,.cmp3 tr,.cmp3 th,.cmp3 td{display:block}
  .cmp3 thead{display:none}
  .cmp3 tr{padding:16px 0;border-top:1px solid var(--line)}
  .cmp3 th[scope=row]{width:auto;border:0;padding:0 0 10px;font-size:17px;font-weight:700}
  .cmp3 td{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:center;text-align:start;border:0;padding:8px 12px;border-radius:var(--r-btn)}
  .cmp3 td::before{content:attr(data-l);color:var(--soft);font-size:14px}
  .cmp3 td>*{justify-self:start}
  .cmp3 td .yes+.cmp3__t{margin:0}
  .cmp3 td:has(.yes){grid-template-columns:minmax(0,1fr) auto minmax(0,.9fr)}
  .cmp3 td:has(.cmp3__t:empty){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .vloc__list{max-height:300px}
  .works figcaption{grid-template-columns:minmax(0,1fr);gap:14px}
  .works figcaption p:nth-child(n){text-align:start}
  .cell--wide .cell__vis{flex:none}
  .cell--wide{flex-direction:column;align-items:stretch}
  .cell--wide .cell__text{padding:8px 24px 24px}
  .cell__vis--phones .phone{--pw:150px;width:150px}
  .cell__vis--phones{max-height:250px;gap:12px}
  .dock{position:fixed;inset:auto 0 0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px var(--side) calc(10px + env(safe-area-inset-bottom));background:var(--night);border-top:1px solid var(--line);translate:0 110%;visibility:hidden;transition:translate .3s var(--ease),visibility 0s .3s}
  .dock.is-up{translate:0 0;visibility:visible;transition:translate .3s var(--ease)}
  .dock img{width:40px;height:40px;border-radius:9px}
  .dock span{flex:1;min-width:0;color:var(--white);font-weight:700;font-size:15px;line-height:1.2}
  .dock span small{display:block;font-weight:400;font-size:13px;color:var(--soft)}
  body.has-dock{padding-bottom:72px}
}
@media (prefers-reduced-transparency:reduce){.top{background:var(--night);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .points li{opacity:1;translate:0 0}
  .fsteps__list li{opacity:1}
  .rrow__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .rrow__track [aria-hidden=true]{display:none}
  .revs__rows{-webkit-mask-image:none;mask-image:none;padding-inline:var(--side)}
  .map__fig path{stroke-dashoffset:0}
}
@media (max-width:380px){
  .top__in{gap:8px}
  .top__logo img{width:84px}
  .top__dl{padding:0 12px;font-size:14px}
  .store{padding-inline:10px 12px;gap:8px}
  .store b{font-size:16px}
}
@media (min-width:1800px){:root{--wrap:1360px}}

/* ---------------------------------------------------------------- LANGUAGES (38, see LANGUAGES.md) */
/* Language switcher: header (desktop), menu sheet (phone) and footer. Names are shown in their own script. */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:none;border:1px solid var(--edge);border-radius:var(--r-btn);color:var(--white);font:500 15px/1.2 var(--ff);cursor:pointer;transition:background-color .18s}
.lang__btn:hover{background:var(--card)}
.lang__btn .fa-chevron-down{font-size:11px;transition:rotate .2s var(--ease-out)}
.lang.is-open .lang__btn .fa-chevron-down{rotate:180deg}
.lang__menu{display:none;position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:60;margin:0;padding:8px;list-style:none;width:min(560px,calc(100vw - 2*var(--side)));max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.lang.is-open .lang__menu{display:grid}
.lang__menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-btn);color:var(--white);text-decoration:none;font-size:15px;line-height:1.4;text-align:start;overflow-wrap:anywhere}
.lang__menu a:hover,.lang__menu a:focus-visible{background:var(--raised)}
.lang__menu a[aria-current]{background:var(--blue)}
.lang--foot .lang__menu{top:auto;bottom:calc(100% + 8px)}
.lang--sheet{margin:16px 0}
.lang--sheet .lang__btn{width:100%;min-height:52px;font-size:17px}
.lang--sheet .lang__btn .lang__now{margin-inline-end:auto}
.lang--sheet .lang__menu{position:static;width:auto;max-height:none;margin-top:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.top .lang__now{display:none}
@media (min-width:1100px){.top .lang__now{display:inline}}
@media (max-width:860px){.lang--top{display:none}}
@media (max-width:640px){
  .foot__side{align-items:flex-start;width:100%}
  .lang--foot .lang__menu{inset-inline-end:auto;inset-inline-start:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}

.lang .lang__flag{flex:none;width:24px;height:18px;border-radius:2px;object-fit:cover}
.lang__menu span{min-width:0}

/* Fonts per script. Roboto has none of these letters, so each script names a Noto Sans family
   (same weights as Roboto) and then the fonts phones and computers already carry. */
:lang(ar),:lang(fa),:lang(ur),:lang(ps){--ff:Roboto,'Noto Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif}
:lang(he){--ff:Roboto,'Noto Sans Hebrew','Segoe UI','Arial Hebrew',Arial,sans-serif}
:lang(ja){--ff:Roboto,'Noto Sans JP','Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif}
:lang(zh){--ff:Roboto,'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}
:lang(ko){--ff:Roboto,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif}
:lang(th){--ff:Roboto,'Noto Sans Thai','Leelawadee UI',Thonburi,sans-serif}
:lang(hi),:lang(mr){--ff:Roboto,'Noto Sans Devanagari','Nirmala UI','Kohinoor Devanagari',sans-serif}
:lang(bn){--ff:Roboto,'Noto Sans Bengali','Nirmala UI','Bangla Sangam MN',sans-serif}
:lang(pa){--ff:Roboto,'Noto Sans Gurmukhi','Nirmala UI','Gurmukhi MN',sans-serif}
:lang(hy){--ff:Roboto,'Noto Sans Armenian','Segoe UI',sans-serif}

/* Tight letter spacing breaks joined and stacked scripts, and their marks need taller lines. */
:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(he),:lang(ja),:lang(zh),:lang(ko),:lang(th),:lang(hi),:lang(mr),:lang(bn),:lang(pa)) :not(i){letter-spacing:0!important}
:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(th),:lang(hi),:lang(mr),:lang(bn),:lang(pa)):is(h1,h2,h3,h4,.foot__line,blockquote){line-height:1.35}
:is(:lang(ja),:lang(zh),:lang(ko)):is(h1,h2,h3,h4,.foot__line){line-height:1.25}
:is(:lang(ja),:lang(zh)){line-break:strict}
:is(:lang(ja),:lang(ko)):is(h1,h2,h3,h4,.lead,.btn){word-break:auto-phrase}

/* Longer languages: buttons may take two lines, long words may break. */
html:not(:lang(en)) .btn{white-space:normal;text-align:center;padding-block:10px}
html:not(:lang(en)) :is(h1,h2,h3,h4,.btn,th,summary){hyphens:auto}

/* Right to left (Arabic, Hebrew, Urdu, Persian, Pashto). The page mirrors through logical sides;
   pictures of the app, the map and the moving review rows keep their own direction. */
.phone,.render,.stage,.vloc__world,.rrow,.sw,.ios{direction:ltr}
[dir=rtl] .rcard{direction:rtl}
[dir=rtl] :is(.fa-chevron-right,.fa-arrow-right,.fa-arrow-right-long,.fa-angle-right){scale:-1 1}
[dir=rtl] .ip.is-monthly .ip__pill{translate:-100% 0}
[dir=rtl] .works img{scale:-1 1} /* the picture has no words in it, so it can face the other way */
[dir=rtl] .fsteps__bar::after,[dir=rtl] .noform span::after{transform-origin:right}
[dir=rtl] .revs__rows{-webkit-mask-image:linear-gradient(270deg,transparent,var(--black) 8%,var(--black) 92%,transparent);mask-image:linear-gradient(270deg,transparent,var(--black) 8%,var(--black) 92%,transparent)}

/* Draft translation marker, test pages only */
.draftbar{background:var(--gold);color:var(--on-gold);font:700 14px/1.4 Roboto,Arial,sans-serif;text-align:center;padding:8px var(--side);direction:ltr}

.shotcover{position:absolute;left:23%;width:48%;height:5.3%;background:var(--night);z-index:1}
/* A LOOK INSIDE THE APP: real screens in a row that scrolls sideways and snaps */
.inside{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:8px max(var(--side),calc((100vw - var(--wrap))/2 + var(--side))) 28px;display:flex;gap:clamp(20px,3vw,44px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--side),calc((100vw - var(--wrap))/2 + var(--side)));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.inside::-webkit-scrollbar{display:none}
.inside li{flex:none;width:clamp(210px,19vw,244px);scroll-snap-align:start;display:grid;gap:6px;align-content:start}
.inside .phone,.inside .render{--pw:100%;width:100%;margin-bottom:14px}
.inside h3{font-size:19px}
.inside p{font-size:15px}
@media (min-width:1400px){.inside{justify-content:center;overflow:visible}}

/* THE BLUE FADE CARRIED DOWN THE PAGE: sections between stay flat navy so words stay readable; the same fade returns once,
   in the download box at the end of every page (same size and stops as the version Archie chose). */
.get{background:radial-gradient(90% 150% at 88% 50%,var(--blue) 0%,var(--raised) 34%,var(--card) 70%)}
[dir=rtl] .get{background:radial-gradient(90% 150% at 12% 50%,var(--blue) 0%,var(--raised) 34%,var(--card) 70%)}

/* SECTION ENTRANCE (Archie, 10 Nov 2026: not instant, but never slow).
   Each marked block fades and rises a little as it comes up from the bottom of the screen. It is tied to the scroll position
   itself, not to a script or a timer, and it is finished once the block is 140px into view. So:
   - jump to a section by a menu link, Page Down or a fast scroll and it is already fully drawn; it can never sit empty;
   - it works with scripts off;
   - browsers that do not support it (and anyone with reduced motion) simply see the content. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 0px entry 140px}
    .inside .rv,.get .rv,.sheet .rv{animation:none}
  }
}
@keyframes rv-in{from{opacity:0;translate:0 16px}}

/* TROUBLESHOOTING: words beside the app, twice, then questions */
.fix{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,96px);align-items:center}
.fix--flip .fix__pic{order:-1}
.fix__text{display:grid;gap:18px;max-width:38em}
.fix__text h2{font-size:clamp(28px,3vw,40px)}
.fix__pic{display:grid;justify-items:center}
.fix__pic .render{width:min(280px,70%)}
.fix__steps{margin:0;padding:0;list-style:none;counter-reset:f;display:grid;gap:12px}
.fix__steps li{counter-increment:f;position:relative;padding-inline-start:48px;min-height:32px;display:flex;align-items:center;color:var(--white)}
.fix__steps li::before{content:counter(f);position:absolute;inset-inline-start:0;top:0;width:32px;height:32px;display:grid;place-items:center;background:var(--blue);clip-path:var(--oct);color:var(--white);font:700 15px/1 var(--ff)}
.wrap--narrow{max-width:calc(860px + var(--side)*2)}
@media (max-width:860px){.fix{grid-template-columns:minmax(0,1fr)}.fix--flip .fix__pic{order:0}.fix__pic .render{width:min(240px,62%)}}

/* LEGAL: long text at a readable width, with a list of its sections that stays in view on a computer */
.legal{display:grid;grid-template-columns:minmax(0,260px) minmax(0,72ch);gap:clamp(28px,5vw,80px);align-items:start}
.legal__toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain;font-size:15px}
.legal__toc summary{color:var(--white);font-weight:700;font-size:16px;cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.legal__toc summary::-webkit-details-marker{display:none}
.legal__toc ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.legal__toc a{display:block;padding:7px 0;color:var(--soft);text-decoration:none;line-height:1.35}
.legal__toc a:hover,.legal__toc a:focus-visible{color:var(--white);text-decoration:underline}
.legal__body{font-size:17px;min-width:0;overflow-wrap:break-word}
.legal__body h2{font-size:clamp(22px,2.2vw,28px);scroll-margin-top:96px}
.legal__body a{color:var(--white)}
.legal__body b,.legal__body strong{color:var(--white)}
.legal__body table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.legal__body td,.legal__body th{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:start}
.legal__body .scroll{overflow-x:auto}
.legal__top{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.legal__top a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:500}
@media (max-width:860px){
  .legal{grid-template-columns:minmax(0,1fr)}
  .legal__toc{position:static;max-height:none;background:var(--card);border-radius:var(--r-card);padding:16px 18px}
  .legal__toc summary{border-bottom:0}
  .legal__toc details[open] summary{border-bottom:1px solid var(--line)}
}

/* APP CATEGORIES: every category as a card that leads into App Tracker */
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cats a{position:relative;display:grid;gap:6px;height:100%;padding:18px 44px 18px 20px;padding-inline:20px 44px;border-radius:var(--r-card);background:var(--card);text-decoration:none;color:var(--soft);transition:background-color .18s}
.cats h2{font-size:19px;line-height:1.25;font-weight:700}
.cats p{font-size:15px;line-height:1.4}
.cats i{position:absolute;inset-inline-end:18px;top:22px;font-size:13px;color:var(--white)}
@media (hover:hover) and (pointer:fine){.cats a:hover{background:var(--raised)}}
[data-none]{display:none}
.tools__cats{align-self:end}

/* HEADER FIT (11 Nov 2026, with the Blokk AI link added): menu items and the Download button never wrap. Between phone width and a wide
   laptop the header tightens and the language button shows its flag only, so it fits in every language. */
html .top .top__nav a,html .top a.top__dl{white-space:nowrap}
@media (min-width:861px) and (max-width:1240px){
  .top__in{gap:14px}
  .top__nav{gap:0}
  .top__nav a{padding:0 9px;font-size:15px}
  .lang--top .lang__now{display:none}
  html .top a.top__dl{padding:0 12px;font-size:14px}
}
@media (min-width:861px) and (max-width:960px){
  .top__in{gap:8px}
  .top__nav a{padding:0 6px;font-size:14px}
  .top__logo img{width:98px}
}
/* Smallest phones: the Yearly and Monthly switch fits its box in every language */
@media (max-width:400px){
  .ip__toggle{display:grid;max-width:100%}
  .ip__toggle button{padding:0 8px;font-size:13px;white-space:normal;line-height:1.15;min-width:0}
}

/* VPN LOCATION SCREEN, drawn (11 Nov 2026). Sizes are in the phone's own width units so it scales with the frame. */
.vscr{position:absolute;inset:0;padding:13cqw 4.4cqw 0;display:flex;flex-direction:column;gap:3cqw;background:var(--shot-night);color:var(--white);font-family:var(--ff);text-align:start}
.vscr__top{display:flex;align-items:center;justify-content:space-between;gap:2cqw;font-size:5.6cqw;line-height:1.15}
.vscr__top b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vscr__x{flex:none;display:grid;place-items:center;width:7.4cqw;height:7.4cqw;border-radius:50%;background:var(--white);color:var(--shot-night);font-size:3.8cqw}
.vscr__find{display:flex;align-items:center;gap:2.6cqw;height:10cqw;padding:0 3.4cqw;border-radius:2.6cqw;background:var(--shot-card);color:var(--soft);font-size:3.7cqw;white-space:nowrap;overflow:hidden}
.vscr__find span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vscr>*{flex:none;min-width:0;box-sizing:border-box;width:100%}
.vscr{box-sizing:border-box}
.vscr__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.6cqw}
.vscr__list li{box-sizing:border-box;width:100%;min-width:0;margin:0;display:grid;grid-template-columns:10cqw minmax(0,1fr) auto;gap:3.2cqw;align-items:center;padding:2.5cqw 2.6cqw;border-radius:2.8cqw}
.vscr__list li.is-on{background:var(--shot-card)}
.vscr__list img{width:10cqw;height:7.5cqw;border-radius:1cqw;object-fit:cover}
.vscr__list div{min-width:0;display:grid;gap:1cqw}
.vscr__list span{display:block;color:var(--soft);font-size:3.5cqw;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vscr__list span b{display:block;color:var(--white);font-size:4.2cqw;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.vscr .vstars{font-size:3cqw;gap:.5cqw}
.vscr__r{display:grid;place-items:center;width:5.6cqw;height:5.6cqw;border-radius:50%;border:.5cqw solid var(--edge);font-size:2.8cqw;color:var(--white)}
.is-on .vscr__r{background:var(--blue);border-color:var(--blue)}
.vscr::after{content:"";position:absolute;inset:auto 0 0;height:16cqw;background:linear-gradient(transparent,var(--shot-night) 78%)}
[dir=rtl] .vscr{direction:rtl}

/* live site only: keeps off-screen elements added by third party scripts from widening the page (seen with B2 analytics on right to left pages) */
body{position:relative}