/* ============================================================
   AdAway Community - site styles
   Dark-first, bold editorial, charged with the app's real red.
   ============================================================ */

/* ---------- fonts ----------
   Self-hosted on purpose: a site about blocking third-party requests
   should not make one to load its own typefaces, and privacy blockers
   commonly break the Google Fonts request anyway. Variable files, so a
   single file per family covers every weight used here.
   -------------------------------------------------------------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --red:#E53935;
  --red-deep:#C62828;
  --red-soft:rgba(229,57,53,.14);
  --red-line:rgba(229,57,53,.32);

  --bg:#0B0B0D;
  --bg-alt:#101014;
  --surface:#141419;
  --surface-2:#1A1A21;
  --line:#26262F;
  --line-soft:#1E1E26;
  --fg:#F4F4F7;
  --fg-mid:#B6B6C2;
  --fg-dim:#82828F;

  --blue:#90CAF9; --blue-bg:#1E2A3A;
  --amber:#FFCC80; --amber-bg:#33291A;
  --green:#A5D6A7; --green-bg:#1E3322;
  --grey:#B0BEC5;  --grey-bg:#263238;

  --r-sm:10px; --r:16px; --r-lg:24px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

[data-theme="light"]{
  --red:#C62828;
  --red-deep:#B71C1C;
  --red-soft:rgba(198,40,40,.09);
  --red-line:rgba(198,40,40,.24);

  --bg:#FBFBFC;
  --bg-alt:#F3F3F6;
  --surface:#FFFFFF;
  --surface-2:#F7F7FA;
  --line:#E4E4EC;
  --line-soft:#EDEDF3;
  --fg:#121216;
  --fg-mid:#4E4E5A;
  --fg-dim:#77778A;

  --blue:#1565C0; --blue-bg:#E3F2FD;
  --amber:#EF6C00; --amber-bg:#FFF1DE;
  --green:#2E7D32; --green-bg:#E3F6E8;
  --grey:#455A64;  --grey-bg:#ECEFF1;
}

/* ---------- scrollbar ----------
   A 6px bar with no arrow buttons, a faint track tinted with the accent and
   a gradient thumb. The thumb gradient is deliberately the same in both
   themes (AdAway's vivid red into its deep red) so the bar keeps one
   identity; only the track tint and the hover direction shift, since a thumb
   that darkens on hover reads well on a light page and needs to brighten
   instead to stay visible on a dark one.
   -------------------------------------------------------------- */
:root{
  --grad-from:#E53935;
  --grad-to:#C62828;
  --scroll-track:color-mix(in srgb,var(--red) 22%,transparent);
  --scroll-thumb:linear-gradient(180deg,var(--grad-from),var(--grad-to));
  --scroll-thumb-hover:linear-gradient(180deg,
    color-mix(in srgb,var(--grad-from) 80%,#fff),
    color-mix(in srgb,var(--grad-to) 80%,#fff));
}
[data-theme="light"]{
  --scroll-track:color-mix(in srgb,var(--red) 16%,transparent);
  --scroll-thumb-hover:linear-gradient(180deg,
    color-mix(in srgb,var(--grad-from) 82%,#000),
    color-mix(in srgb,var(--grad-to) 82%,#000));
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-button{display:none;height:0;width:0}
::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}

/* Firefox has no ::-webkit-scrollbar, and scrollbar-color needs solid
   colours, so it gets the flat accent rather than the gradient. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--red) var(--scroll-track)}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Where an anchor jump comes to rest.
   The header is sticky, so the landing has to clear it. But stopping at the
   top of the section stops on its padding, not on its text: the sections carry
   up to 104px of space above the title, which together with the header buried
   a fifth of the screen under nothing at all. Subtracting that padding back out
   lands the title a constant 32px below the header whatever the width, which is
   why this is a calc against the same clamp the padding uses rather than a
   number, and why it goes negative on a wide screen. */
#main,.hero{scroll-margin-top:80px}
.sec{scroll-margin-top:calc(95px - clamp(64px,8.5vw,104px))}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
.display{
  font-family:var(--disp);font-weight:700;
  font-size:min(clamp(2.9rem,7.2vw,5.3rem),8.6vh);
  line-height:.98;letter-spacing:-.035em;margin:0 0 min(22px,2.6vh);
}
.grad{
  background:linear-gradient(105deg,var(--red) 0%,#FF6B57 55%,var(--red-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.h2{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.08;letter-spacing:-.028em;margin:0 0 16px;
}
.kicker{
  display:inline-block;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin-bottom:14px;
}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--fg-mid);max-width:56ch;margin:0 0 min(32px,3.6vh)}
.sec-lead{font-size:1.03rem;color:var(--fg-mid);max-width:64ch;margin:0}
.micro{font-size:.83rem;color:var(--fg-dim);margin:min(26px,3vh) 0 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--red);color:#fff;font-weight:600;font-size:.93rem;
  padding:11px 20px;border-radius:100px;border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 10px 26px -8px var(--red)}
.btn-lg{padding:14px 26px;font-size:1rem}
.btn-sm{padding:9px 16px;font-size:.86rem}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--red-line);color:var(--fg);box-shadow:none}

.icon-b{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  background:transparent;border:1px solid var(--line);border-radius:11px;
  color:var(--fg-mid);cursor:pointer;transition:.18s var(--ease);
}
.icon-b:hover{color:var(--red);border-color:var(--red-line)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s;
}
.nav.stuck{border-bottom-color:var(--line-soft)}
.nav-in{display:flex;align-items:center;gap:20px;height:68px}

.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;flex:0 0 auto}
.brand img{border-radius:8px}
.brand em{font-style:normal;color:var(--red);margin-left:5px}

.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.9rem;color:var(--fg-mid);font-weight:500}
.nav-links a{position:relative;padding:4px 0;transition:color .18s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--red);transition:width .22s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{width:100%}

.nav-tools{display:flex;align-items:center;gap:10px;margin-left:8px}

/* ---------- language picker ----------
   One button showing the current language, opening the full list. Written with
   logical properties (inset-inline, text-align:start) so it mirrors itself in
   the right-to-left languages instead of needing a second set of rules.
   -------------------------------------------------------------- */
.lang{position:relative}
.lang-b{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;max-width:180px;
  background:transparent;border:1px solid var(--line);border-radius:11px;
  color:var(--fg-mid);cursor:pointer;font:inherit;font-size:.85rem;font-weight:500;
  transition:.18s var(--ease);
}
.lang-b:hover,.lang-b[aria-expanded="true"]{color:var(--fg);border-color:var(--red-line)}
.lang-b svg{flex:0 0 auto}
.lang-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-code{display:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.lang-chev{transition:transform .18s var(--ease)}
.lang-b[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}

.lang-pop{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:120;
  width:260px;max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 26px 64px -22px rgba(0,0,0,.62);
}
.lang-pop[hidden]{display:none}
.lang-opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 11px;background:transparent;border:0;border-radius:9px;
  color:var(--fg-mid);font:inherit;font-size:.88rem;text-align:start;cursor:pointer;
  transition:background .14s,color .14s;
}
.lang-opt:hover{background:var(--surface-2);color:var(--fg)}
.lang-opt small{font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);flex:0 0 auto}
.lang-opt[aria-selected="true"]{background:var(--red);color:#fff}
.lang-opt[aria-selected="true"] small{color:rgba(255,255,255,.78)}

[data-theme="light"] .i-moon,[data-theme="dark"] .i-sun{display:none}

.menu-b{display:none;margin-left:auto}

/* ---------- hero ---------- */
/* The hero used to be sized off the viewport WIDTH only, which made it a fixed
   947px tall on every desktop: on a laptop that left an empty band under the
   header and pushed the download buttons below the fold. Every vertical figure
   here is now also capped against the viewport HEIGHT, so a short screen gets a
   tighter hero rather than a cropped one. min() keeps it continuous: on a tall
   display the height term never wins and nothing changes. */
.hero{
  position:relative;overflow:hidden;
  padding:min(clamp(64px,10vw,112px),8vh) 0 min(clamp(72px,9vw,110px),8vh);
}
.hero-glow{
  position:absolute;top:-38%;left:50%;transform:translateX(-50%);
  width:min(1100px,135vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,var(--red-soft) 0%,transparent 62%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 32%,#000 12%,transparent 74%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 32%,#000 12%,transparent 74%);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero-copy{min-width:0}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red-soft);border:1px solid var(--red-line);color:var(--red);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;margin-bottom:min(26px,3vh);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

.cta{display:flex;flex-wrap:wrap;gap:12px}

/* the block feed: signature visual */
.feed{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:0 32px 70px -34px rgba(0,0,0,.55);min-width:0;
}
.feed-top{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;border-bottom:1px solid var(--line-soft)}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.feed-title{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.feed-count{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--fg-dim)}
.feed-count b{color:var(--red);font-weight:500}

.feed-list{list-style:none;margin:0;padding:12px 0 0;display:flex;flex-direction:column;gap:2px}
.feed-list li{
  display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:.8rem;color:var(--fg-mid);
  animation:slide .38s var(--ease) backwards;
}
@keyframes slide{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.feed-list li .d{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-list li.b{color:var(--fg-dim)}
.feed-list li.b .d{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px}
.f-tag{font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:100px;flex:0 0 auto}
.f-b{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.f-o{background:var(--green-bg);color:var(--green)}
@media (prefers-reduced-motion:reduce){
  .feed-list li{animation:none}
  .dot{animation:none}
}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8.5vw,104px) 0;position:relative}
.sec-alt{background:var(--bg-alt);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sec-head{max-width:72ch;margin-bottom:52px}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px 28px;position:relative;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.why-card::before{
  content:"";position:absolute;top:0;left:26px;right:26px;height:2px;
  background:linear-gradient(90deg,var(--red),transparent);opacity:0;transition:opacity .22s;
}
.why-card:hover{border-color:var(--red-line);transform:translateY(-3px)}
.why-card:hover::before{opacity:1}
.num{font-family:var(--mono);font-size:.76rem;color:var(--red);letter-spacing:.1em}
.why-card h3{font-family:var(--disp);font-size:1.14rem;font-weight:600;letter-spacing:-.015em;margin:14px 0 10px}
.why-card p{margin:0;color:var(--fg-mid);font-size:.94rem}

.note{
  display:flex;gap:12px;align-items:flex-start;margin:32px 0 0;
  padding:18px 20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);
  color:var(--fg-mid);font-size:.9rem;max-width:88ch;
}
.note svg{flex:0 0 auto;margin-top:3px;color:var(--red)}

/* how */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:52px}
.mode{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;
  transition:border-color .22s var(--ease);
}
.mode:first-child{border-color:var(--red-line);background:linear-gradient(180deg,var(--red-soft) 0%,var(--surface) 46%)}
.mode:hover{border-color:var(--red-line)}
.mode-top{margin-bottom:16px}
.pill{
  display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;background:var(--surface-2);border:1px solid var(--line);color:var(--fg-dim);
}
.pill-red{background:var(--red);border-color:var(--red);color:#fff}
.mode h3{font-family:var(--disp);font-size:1.34rem;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.mode p{margin:0;color:var(--fg-mid);font-size:.96rem}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.steps::before{
  content:"";position:absolute;top:19px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,var(--red-line),var(--line),var(--red-line));
}
.steps li{position:relative;display:flex;flex-direction:column;gap:16px}
.step-n{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  background:var(--bg-alt);border:1px solid var(--red-line);border-radius:50%;
  font-family:var(--mono);font-size:.86rem;color:var(--red);position:relative;z-index:1;
}
.steps h4{font-family:var(--disp);font-size:1.05rem;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--fg-mid);font-size:.93rem}

/* features bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;grid-column:span 2;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.cell-wide{grid-column:span 4}
.cell:hover{border-color:var(--red-line);transform:translateY(-3px)}
.cell h3{font-family:var(--disp);font-size:1.12rem;font-weight:600;letter-spacing:-.015em;margin:16px 0 9px}
.cell p{margin:0;color:var(--fg-mid);font-size:.94rem}
.ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px}
.ic-red{background:var(--red-soft);color:var(--red)}
.ic-blue{background:var(--blue-bg);color:var(--blue)}
.ic-amber{background:var(--amber-bg);color:var(--amber)}
.ic-green{background:var(--green-bg);color:var(--green)}
.ic-grey{background:var(--grey-bg);color:var(--grey)}

/* screenshots */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:880px;margin:0 auto}
.shot{margin:0}
.shot figcaption{margin-top:18px;text-align:center;color:var(--fg-dim);font-size:.88rem;max-width:34ch;margin-left:auto;margin-right:auto}

/* The captures already carry their own device frame (phone bezel, TV stand),
   so the page adds no chrome of its own: a second frame around the first
   looks doubled, and cropping to a fixed aspect ratio would eat into the
   bezel. The image sets its own height, which also keeps the layout correct
   whatever size the captures are re-exported at. */
.phone,.tvframe{position:relative}
.phone img,.tvframe img{
  width:100%;height:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.45));
}
.shot-tv{margin-top:44px}
.tvframe{max-width:920px;margin:0 auto}

/* theme-paired screenshots: instant swap, never animated */
[data-theme="dark"] .s-light,[data-theme="light"] .s-dark{display:none}

/* graceful state when a screenshot has not been added yet: it has to carry
   its own ratio, since there is no framed box reserving the space now */
.shot-missing{
  display:grid;place-items:center;width:100%;aspect-ratio:9/19.5;border-radius:22px;
  background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,var(--bg-alt) 12px,var(--bg-alt) 24px);
  color:var(--fg-dim);font-family:var(--mono);font-size:.72rem;text-align:center;padding:16px;
}
.tvframe .shot-missing{aspect-ratio:16/9;border-radius:11px}

/* ---------- languages ----------
   The two rows drift in opposite directions. Each track holds the same list
   twice and slides by exactly half its width, so the loop has no seam; the
   spacing is a margin on each chip rather than a gap on the track, because a
   gap would add one extra space that half the width does not account for.
   -------------------------------------------------------------- */
.marquee{
  display:none;margin:48px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee.ready{display:block}
.marquee-row{display:flex;overflow:hidden;padding:5px 0}
.marquee-track{display:flex;flex:0 0 auto;animation:drift 68s linear infinite}
.marquee-rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.chip{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;margin-inline-end:10px;
  padding:9px 15px;border-radius:100px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);color:var(--fg-mid);font-size:.89rem;
}
.chip b{
  font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-dim);
}
.chip-on{background:var(--red);border-color:var(--red);color:#fff}
.chip-on b{color:rgba(255,255,255,.76)}

/* A visitor who asked for less movement gets the same list, still scrollable
   by hand, but nothing moving on its own. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee-row{overflow-x:auto}
  /* Standing still the second row is only the first one repeated, so it goes. */
  .marquee-rev{display:none}
}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.fact b{
  display:block;font-family:var(--disp);font-weight:700;line-height:1;
  font-size:clamp(1.9rem,3.6vw,2.5rem);letter-spacing:-.03em;color:var(--red);
}
.fact span{display:block;margin-top:9px;color:var(--fg-dim);font-size:.9rem}

/* install */
.gets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gets-2{grid-template-columns:repeat(2,1fr);margin-top:20px}
.get{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.get:not(.get-static):hover{border-color:var(--red-line);transform:translateY(-3px)}
.get-n{font-family:var(--mono);font-size:.76rem;color:var(--red);letter-spacing:.1em}
.get h3{font-family:var(--disp);font-size:1.12rem;font-weight:600;letter-spacing:-.015em;margin:14px 0 9px}
.get p{margin:0 0 20px;color:var(--fg-mid);font-size:.94rem}
.get-go{margin-top:auto;font-size:.86rem;font-weight:600;color:var(--red);display:inline-flex;align-items:center;gap:6px}
.get-go::after{content:"→";transition:transform .2s var(--ease)}
.get:hover .get-go::after{transform:translateX(4px)}
.get-go-off{color:var(--fg-dim)}
.get-go-off::after{content:"✓"}

/* footer */
.foot{background:var(--bg-alt);border-top:1px solid var(--line-soft);padding:60px 0 0}
.foot-in{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;padding-bottom:44px}
.foot-brand{display:flex;gap:13px;align-items:center}
.foot-brand img{border-radius:9px}
.foot-brand strong{display:block;font-family:var(--disp);font-size:1rem;letter-spacing:-.015em}
.foot-brand span{font-size:.85rem;color:var(--fg-dim)}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h4{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);margin:0 0 5px;font-weight:500;
}
.foot-col a{font-size:.9rem;color:var(--fg-mid);transition:color .18s}
.foot-col a:hover{color:var(--red)}
.foot-bot{border-top:1px solid var(--line-soft);padding-top:24px;padding-bottom:34px}
.foot-bot p{margin:0;font-size:.82rem;color:var(--fg-dim);max-width:90ch}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:48px}
  .why-grid,.gets,.gets-2,.facts{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:30px}
  .steps::before{display:none}
  .steps li{flex-direction:row;align-items:flex-start;gap:18px}
  .bento{grid-template-columns:1fr}
  .cell,.cell-wide{grid-column:auto}
  .shots{grid-template-columns:1fr;gap:44px;max-width:390px;margin:0 auto}
  .modes{grid-template-columns:1fr}
}
/* The header row gives way in two steps, and the widths are measured rather
   than guessed: with every label translated it needs up to 1060px complete,
   and 930px once the download button steps aside. Below those it used to
   simply overflow and push the whole page sideways. The button goes first,
   since the hero right underneath carries the same call to action. */
@media (max-width:1060px){
  .nav-tools .btn{display:none}
}
@media (max-width:930px){
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;gap:0;padding:8px 24px 20px;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .nav-links a::after{display:none}
  .nav-tools{margin-left:auto}
  .menu-b{display:grid;margin-left:0}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .nav-in{height:60px;gap:10px}
  /* The header is 8px shorter here, so the landing follows it up. */
  #main,.hero{scroll-margin-top:70px}
  .sec{scroll-margin-top:calc(87px - clamp(64px,8.5vw,104px))}
  .nav-links{top:60px}
  /* "Community" is dropped from the mark here so the row still fits a
     narrow phone without the menu button being pushed off-screen. */
  .brand em{display:none}
  .brand span{font-size:.98rem}
  .nav-tools{gap:8px}
  /* Only the language code fits next to the menu button on a phone. The list
     itself is anchored to the viewport instead of the button so a long name
     never pushes it off-screen. */
  .lang-name{display:none}
  .lang-code{display:block}
  .lang-b{padding:0 9px;gap:5px}
  .lang-pop{position:fixed;top:66px;inset-inline:18px;width:auto;max-height:min(70vh,460px)}
  .cta .btn{width:100%;justify-content:center}
  .foot-cols{gap:36px}
}

/* ---------- right-to-left ----------
   Arabic, Persian, Hebrew, Urdu and Pashto. Flex and grid mirror themselves
   once dir="rtl" is set; what follows is the handful of places that pin a
   physical side, plus the letter-spacing, which breaks the cursive joining of
   Arabic-script text and has to go back to zero there.
   -------------------------------------------------------------- */
[dir="rtl"] .skip{left:auto;right:-9999px}
[dir="rtl"] .skip:focus{right:0;border-radius:0 0 0 var(--r-sm)}
[dir="rtl"] .brand em{margin-left:0;margin-right:5px}
[dir="rtl"] .nav-links{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-links a::after{left:auto;right:0}
[dir="rtl"] .nav-tools{margin-left:0;margin-right:8px}
[dir="rtl"] .feed-count{margin-left:0;margin-right:auto}
[dir="rtl"] .note{border-left-width:1px;border-right:3px solid var(--red)}
[dir="rtl"] .get-go::after{content:"←"}
[dir="rtl"] .get:hover .get-go::after{transform:translateX(-4px)}
[dir="rtl"] .marquee{
  -webkit-mask-image:linear-gradient(-90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(-90deg,transparent,#000 7%,#000 93%,transparent);
}
[dir="rtl"] .kicker,[dir="rtl"] .pill,[dir="rtl"] .feed-title,
[dir="rtl"] .foot-col h4,[dir="rtl"] .f-tag,[dir="rtl"] .shot-missing{letter-spacing:0}
@media (max-width:930px){
  [dir="rtl"] .nav-tools{margin-right:auto;margin-left:0}
  [dir="rtl"] .menu-b{margin-right:0}
}