/* RoTunneling Protect page (templates/protect.tpl, protect_en.tpl; js/protect.js). DESIGN.md tokens via css/site.css (--s-*).
   Inner page, wide and left-aligned (css/pageband.css): the band is the shared page band, every section uses .lp-wrap (the
   same 1200px box as the band and the footer) and its head is left-aligned under the left-aligned title.
   #contentWrapper carries legacy h2/h3/p rules (css/style.css, css/revamp.css), so every rule here is scoped to
   #contentWrapper.prot to win them without !important.
   Sections (redesign 2026-11-12, fix round 1): three ways (white, a compact explanatory strip right under the band) ->
   recommender (soft) -> what it does, explainer (white) -> malware and phishing (soft) -> details (white, split like the
   FAQ) -> navy CTA -> FAQ (white). */

/* ---------- band: Free badge (the green tint pill of .lp-plan__save) ---------- */
.rt-page-title .prot-free {
  display: inline-block; vertical-align: 0.3em; margin-left: 10px; padding: 4px 12px; border-radius: 999px;
  background: #E7F4E8; color: var(--s-action, #2E7D32);
  font-size: 15px; font-weight: 800; letter-spacing: 0; line-height: 1.2; white-space: nowrap;
}
/* the official extension icon before the title. It comes last in the markup (the H1 text still starts with the name) and is
   placed in a hanging indent, so the title's first-line top and size stay those of every other band (94_band_align) */
#pageHeaderWrapper .rt-page-title.prot-h1 { position: relative; padding-left: 1.3em; }
.rt-page-title .prot-h1-ic {
  position: absolute; left: 0; top: 0.05em; top: calc((1lh - 1em) / 2); width: 1em; height: 1em;
  border-radius: 0.22em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 16px rgba(11, 26, 51, 0.22);
}

/* ---------- sections ---------- */
#contentWrapper.prot { padding: 0; }
#contentWrapper.prot .prot-sec { padding: clamp(56px, 7vw, 96px) 0; background: #fff; }
#contentWrapper.prot .prot-sec--soft { background: var(--s-soft); }
#contentWrapper.prot .prot-sec:first-child { padding-top: clamp(32px, 3.5vw, 44px); }
#contentWrapper.prot .prot-head { max-width: 760px; margin: 0 0 clamp(28px, 3.5vw, 44px); text-align: left; }
#contentWrapper.prot .prot-head h2,
#contentWrapper.prot .prot-rec__head h2 {
  margin: 0; color: var(--s-ink); font-size: clamp(28px, 3vw, 38px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; text-align: left; text-wrap: balance;
}
#contentWrapper.prot .prot-head p { margin: 14px 0 0; max-width: 62ch; color: var(--s-ink-2); font-size: 18px; line-height: 1.6; }
/* .prot.prot: beats revamp.css body:not(:has(.rt-hero)) div#contentWrapper h3 (its 28px top margin and 19px size) */
#contentWrapper.prot.prot h3 {
  margin: 0; color: var(--s-ink); font-size: 20px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; text-align: left;
}
#contentWrapper.prot p { margin: 0; color: var(--s-ink-2); font-size: 16px; line-height: 1.65; }
#contentWrapper.prot strong { color: var(--s-ink); }
#contentWrapper.prot code {
  padding: 2px 6px; border-radius: 8px; background: var(--s-blue-50); color: var(--s-ink);
  font-size: 0.92em; overflow-wrap: anywhere; white-space: normal;
}
#contentWrapper.prot ::selection { background: var(--s-blue-100); color: var(--s-ink); }
#contentWrapper.prot a:not(.lp-btn) { text-underline-offset: 3px; }
#contentWrapper.prot a:not(.lp-btn):focus-visible,
#contentWrapper.prot button:focus-visible,
#contentWrapper.prot summary:focus-visible { outline: 2px solid var(--s-blue-500); outline-offset: 3px; border-radius: 8px; }
#contentWrapper.prot .lp-btn:focus-visible { outline: 2px solid var(--s-blue-500); outline-offset: 3px; }
#contentWrapper.prot.prot .prot-sub { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
/* visually hidden, still in the accessible text and textContent. It stays an inline box (no absolute position, no
   inline-block): either of those makes the accessible name read "Phishing :" with a space (checked in Chromium and WebKit
   with Playwright's ARIA snapshot); zero font size takes its width away and the clip keeps any glyph from painting */
#contentWrapper.prot .prot-vh { display: inline; font-size: 0; line-height: 0; clip-path: inset(50%); }

/* ---------- 1. recommender ---------- */
#contentWrapper.prot .prot-rec { display: flex; flex-direction: column; }
#contentWrapper.prot .prot-rec__head { max-width: 860px; }
/* the heading promises a recommendation only when the script made one; without JS it says "Toate variantele" */
#contentWrapper.prot .prot-rec.is-js .prot-if-nojs,
#contentWrapper.prot .prot-rec:not(.is-js) .prot-if-js { display: none; }
#contentWrapper.prot .prot-rec__device {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px;
  color: var(--s-ink); font-size: 18px; font-weight: 700; line-height: 1.4;
}
/* "Am detectat: [mark] Windows · [mark] Chrome": each item keeps its mark and name together */
.prot-rec__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.prot-rec__item .prot-pick__ic { width: 20px; height: 20px; color: var(--s-navy-700); }
.prot-rec__sep { padding: 0 4px; color: var(--s-ink-3); font-weight: 800; }
#contentWrapper.prot .prot-rec:not(.is-js) .prot-rec__device { color: var(--s-ink-2); font-weight: 500; }
.prot-rec__change {
  padding: 0 2px; border: 0; background: none; color: var(--s-blue); font: inherit; font-size: 15.5px; font-weight: 750;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.prot-rec__change[hidden] { display: none; }

/* OS tabs and browser chips: one soft toolbar */
#contentWrapper.prot .prot-pick[hidden] { display: none; }
#contentWrapper.prot .prot-pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 20px 0 22px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--s-line); border-radius: 16px;
}
.prot-pick__group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prot-pick__group[hidden] { display: none; }
.prot-pick__label { flex: 0 0 auto; color: var(--s-ink-3); font-size: 13.5px; font-weight: 800; }
.prot-pick__row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.prot-pick__row button {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff;
  color: var(--s-ink-2); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.prot-pick__row button:hover { border-color: var(--s-ink-3); color: var(--s-ink); }
.prot-pick__row button[aria-pressed="true"] { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
.prot-pick__row button[hidden] { display: none; }
.prot-pick__ic { width: 18px; height: 18px; flex: 0 0 auto; }
/* the visitor's own system and browser: a small marker that stays when another tab is chosen */
.prot-pick__det {
  margin-left: 1px; padding: 3px 7px; border-radius: 999px; background: var(--s-blue-50); color: var(--s-navy-700);
  font-size: 11.5px; font-weight: 800; line-height: 1; letter-spacing: 0.01em;
}
.prot-pick__row button[aria-pressed="true"] .prot-pick__det { background: rgba(255, 255, 255, 0.18); color: #fff; }
.prot-pick__row--browsers button[aria-pressed="true"] .prot-pick__det { background: #fff; color: var(--s-navy-700); }
.prot-pick__row--browsers button[aria-pressed="true"] { background: var(--s-blue-50); border-color: var(--s-blue-500); color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-blue-500); }

/* option cards: text (.prot-opt__body) + actions (.prot-opt__act) */
.prot-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: stretch; }
#contentWrapper.prot .prot-rec:not(.is-js) .prot-opts { margin-top: 28px; }
#contentWrapper.prot .prot-opt {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: 24px; background: #fff; border: 1px solid var(--s-line); border-radius: 20px; box-shadow: var(--s-shadow-sm);
}
#contentWrapper.prot .prot-opt[hidden] { display: none; }
#contentWrapper.prot .prot-opt__body { display: flex; flex-direction: column; gap: 10px; }
#contentWrapper.prot .prot-opt__act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; }
#contentWrapper.prot .prot-opt__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prot-opt__rec { display: none; }
#contentWrapper.prot .prot-opt[data-recommended="1"] .prot-opt__rec,
.prot-way-tag, .prot-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 750; line-height: 1; white-space: nowrap;
}
#contentWrapper.prot .prot-opt[data-recommended="1"] .prot-opt__rec { background: var(--s-blue-500); color: #fff; font-weight: 800; }
.prot-way-tag { background: #fff; color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-line); }
.prot-way-tag svg, .prot-way-tag img { width: 18px; height: 18px; margin-left: -3px; --ic-d: #DDE8FF; }
.prot-way-tag img { border-radius: 4px; }
.prot-tag { background: var(--s-blue-50); color: var(--s-navy-700); box-shadow: inset 0 0 0 1px var(--s-blue-100); }
#contentWrapper.prot .prot-opt p { font-size: 15.5px; line-height: 1.6; }
#contentWrapper.prot .prot-opt .prot-opt__note { color: var(--s-ink-3); font-size: 14px; line-height: 1.45; }
#contentWrapper.prot .prot-opt .lp-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; min-height: 46px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.prot-soon {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--s-soft); color: var(--s-ink-2); font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--s-line);
}

/* the featured card (the recommendation): text left, an action panel right */
#contentWrapper.prot .prot-rec__main:empty { display: none; }
#contentWrapper.prot .prot-rec__main .prot-opt {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 3.5vw, 40px); border-color: transparent; box-shadow: 0 0 0 3px var(--s-blue-500), var(--s-shadow);
}
#contentWrapper.prot.prot .prot-rec__main h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
#contentWrapper.prot .prot-rec__main .prot-opt__body { gap: 14px; }
#contentWrapper.prot .prot-rec__main .prot-opt__body p { font-size: 17px; }
#contentWrapper.prot .prot-rec__main .prot-opt__act {
  align-items: stretch; align-self: stretch; justify-content: center; gap: 14px; margin: 0;
  padding: clamp(20px, 2.5vw, 28px); background: var(--s-soft); border-radius: 16px;
}
#contentWrapper.prot .prot-rec__main .prot-opt__act .lp-btn { min-height: 54px; font-size: 16.5px; }
#contentWrapper.prot .prot-rec__main .prot-opt__act .prot-opt__note { text-align: center; }
#contentWrapper.prot .prot-rec__main .prot-soon { align-self: flex-start; }
#contentWrapper.prot .prot-rec__main .prot-steps { border-top: 0; }
#contentWrapper.prot .prot-rec__main .prot-steps summary { padding-top: 0; }

/* the other options: two columns under their own heading (only with JS; without it every card is in one grid) */
#contentWrapper.prot.prot .prot-rec__more { margin: clamp(32px, 4vw, 44px) 0 16px; font-size: 18px; font-weight: 800; }
#contentWrapper.prot .prot-rec:not(.is-js) .prot-rec__more { display: none; }
#contentWrapper.prot .prot-rec.is-js .prot-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
#contentWrapper.prot .prot-rec.is-js .prot-opts .prot-opt__act { margin-top: 0; }

/* DoH steps inside a card */
#contentWrapper.prot .prot-steps { width: 100%; border-top: 1px solid var(--s-line); }
#contentWrapper.prot .prot-steps summary {
  position: relative; display: block; padding: 14px 32px 2px 0; cursor: pointer; list-style: none;
  color: var(--s-blue); font-size: 15.5px; font-weight: 750;
}
.prot-steps summary::-webkit-details-marker { display: none; }
.prot-steps summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -3px;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease;
}
.prot-steps[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
#contentWrapper.prot .prot-steps > p, #contentWrapper.prot .prot-steps > .prot-copy { margin-top: 12px; }
#contentWrapper.prot .prot-steps > p { font-size: 15px; overflow-wrap: anywhere; }

/* DoH address + copy */
#contentWrapper.prot .prot-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; }
#contentWrapper.prot .prot-copy code { padding: 8px 10px; background: #fff; font-size: 14px; line-height: 1.35; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--s-blue-100); }
.prot-copy__btn {
  height: 36px; padding: 0 14px; border: 1.5px solid var(--s-ink); border-radius: 999px; background: #fff;
  color: var(--s-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.prot-copy__btn:hover { background: var(--s-ink); color: #fff; }
.prot-copy__btn[hidden] { display: none; }
.prot-copy__ok { color: var(--s-ink-2); font-size: 14px; font-weight: 700; }
.prot-copy__ok:empty { display: none; }

/* ---------- 2. three ways: a compact, explanatory strip (the recommendation itself is only in the recommender) ---------- */
#contentWrapper.prot .prot-ways-sec { padding: clamp(28px, 3.5vw, 44px) 0 clamp(32px, 4vw, 48px); }
#contentWrapper.prot .prot-ways-sec .prot-head { margin-bottom: 20px; }
#contentWrapper.prot .prot-ways-sec .prot-head h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; }
#contentWrapper.prot .prot-ways-sec .prot-head p { margin-top: 8px; font-size: 16px; }
#contentWrapper.prot .prot-ways {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--s-line); border-radius: 20px; background: #fff;
}
#contentWrapper.prot .prot-way { position: relative; display: flex; gap: 16px; margin: 0; padding: 22px 24px; min-width: 0; }
#contentWrapper.prot .prot-way + .prot-way { border-left: 1px solid var(--s-line); }
/* icon tiles: the .lp-ic tile of the home page use cases (site.css .lp-use__head), a size down in the strip */
#contentWrapper.prot .prot-way__ic { width: 48px; height: 48px; padding: 9px; border-radius: 13px; }
/* the extension way shows the extension's own icon (a full tile already) */
#contentWrapper.prot .prot-way__ic--img { flex: 0 0 auto; padding: 0; border-radius: 12px; }
#contentWrapper.prot .prot-way__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#contentWrapper.prot.prot .prot-way h3 { font-size: 17px; font-weight: 800; line-height: 1.3; }
#contentWrapper.prot .prot-way__facts { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#contentWrapper.prot .prot-way__facts div { line-height: 1.5; }
#contentWrapper.prot .prot-way__facts dt { display: inline; color: var(--s-ink-3); font-size: 14px; font-weight: 700; }
#contentWrapper.prot .prot-way__facts dt::after { content: ": "; }
#contentWrapper.prot .prot-way__facts dd { display: inline; margin: 0; color: var(--s-ink); font-size: 14px; font-weight: 500; line-height: 1.5; }
#contentWrapper.prot .prot-way__note { color: var(--s-ink-3); font-size: 13.5px; line-height: 1.45; }
.prot-ways-scroll:focus-visible { outline: 2px solid var(--s-blue-500); outline-offset: 4px; border-radius: 20px; }
#contentWrapper.prot .prot-av .lp-ic { width: 56px; height: 56px; padding: 10px; border-radius: 14px; }

/* ---------- 3. explainer ---------- */
#contentWrapper.prot .prot-explain { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
#contentWrapper.prot .prot-explain .prot-head { margin-bottom: 28px; }
#contentWrapper.prot .prot-explain__steps { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: pa; }
#contentWrapper.prot .prot-explain__steps li {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 36px; margin: 0; padding: 0 0 0 52px; counter-increment: pa;
}
#contentWrapper.prot .prot-explain__steps li::before {
  content: counter(pa); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--s-navy-800); color: #fff; font-size: 15px; font-weight: 800;
}
#contentWrapper.prot .prot-explain__steps strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; padding-top: 6px; }
#contentWrapper.prot .prot-explain__steps span { color: var(--s-ink-2); font-size: 15.5px; line-height: 1.55; }

/* the box: one story read top to bottom, as HTML text (no SVG text, so it stays readable on a phone).
   1 you open a link -> 2 RoTunneling Protect checks the address -> 3 two outcomes: the safe page opens, the known phishing page
   is stopped with a warning. The markup is the final frame (no JS, reduced motion, print). */
.prot-explain__fig {
  --pa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pa-soft: #B4C2D9;       /* on-navy-soft, 8.9:1 on navy-900 */
  --pa-blue: #9CC1FF;       /* link-on-navy */
  --pa-stop: #F97066;       /* danger-on-navy, 6.2:1 on navy-900 */
  --pa-ok: #2E7D32;         /* action green: the success state only */
  --pa-card: #18335E;
  container-type: inline-size;
  margin: 0; padding: clamp(24px, 3vw, 36px) clamp(16px, 3vw, 36px);
  border-radius: 24px; color: #F4F7FC;
  background: radial-gradient(60% 70% at 85% 0%, rgba(45, 111, 227, 0.22), transparent 70%), #0B1A33;
}
.pf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf svg { display: block; overflow: visible; }
.pf__stage { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 30ch; }
.pf__icon {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--pa-card); box-shadow: inset 0 0 0 1px rgba(180, 194, 217, 0.35);
}
.pf__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--pa-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf__icon .pf__ln { stroke: rgba(180, 194, 217, 0.55); }
.pf__icon--shield { width: 64px; height: 64px; border-radius: 50%; background: rgba(45, 111, 227, 0.22); box-shadow: inset 0 0 0 1.5px var(--pa-blue); }
.pf__icon--shield svg { width: 34px; height: 34px; }
.pf__icon--shield .pf__shield { fill: rgba(45, 111, 227, 0.35); stroke: var(--pa-blue); }
.pf__icon--shield .pf__tick { stroke: #fff; stroke-width: 2.6; }
.pf__ring { position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pa-blue); opacity: 0; }
#contentWrapper.prot .pf__label { margin: 0; color: #F4F7FC; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
#contentWrapper.prot .pf__label strong { color: #fff; font-weight: 800; }

/* connectors: a dashed guide with a solid fill that is drawn by the animation */
.pf__wire {
  position: relative; display: block; width: 2px; height: 30px; margin: 10px 0;
  background: repeating-linear-gradient(to bottom, rgba(180, 194, 217, 0.4) 0 3px, transparent 3px 8px);
}
.pf__wire::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--pa-blue); transform-origin: top; }
.pf__dot { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(156, 193, 255, 0.35); opacity: 0; }
/* the stem under the check runs 2px into the branch row, so it covers the point where the two branches meet */
.pf__wire--out { z-index: 1; height: 24px; margin: 10px 0 -2px; }
/* the two branches: the first grid row of .pf__outs, one cell per card, so each branch is sized from its own card column.
   Each is one bordered box: its top border runs from the gap centre (= the stem, the box centre) to its card's centre,
   its side border runs down to the card's top edge. Both overlap the stem by 1px, no fixed offsets. */
.pf__branch { position: relative; display: block; height: 22px; }
.pf__branch::before { content: ""; position: absolute; top: 0; bottom: 0; border-top: 2px solid; }
.pf__branch--ok::before {
  left: calc(50% - 1px); right: calc(var(--pf-gap) / -2 - 1px);
  border-left: 2px solid; border-top-left-radius: 10px; border-color: var(--pa-blue);
}
.pf__branch--bad::before {
  left: calc(var(--pf-gap) / -2 - 1px); right: calc(50% - 1px);
  border-right: 2px solid; border-top-right-radius: 10px; border-color: var(--pa-stop);
}

/* the two outcomes: browser windows with the address in the bar and a labelled result */
.pf__outs { --pf-gap: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 var(--pf-gap); width: 100%; text-align: left; }
.pf-out { overflow: hidden; border-radius: 14px; background: var(--pa-card); box-shadow: inset 0 0 0 1.5px var(--pa-blue), 0 10px 24px rgba(0, 0, 0, 0.18); }
.pf-out--bad { box-shadow: inset 0 0 0 1.5px var(--pa-stop), 0 10px 24px rgba(0, 0, 0, 0.18); }
.pf-out__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(180, 194, 217, 0.22); background: rgba(11, 26, 51, 0.35); }
.pf-out__dots { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(180, 194, 217, 0.55); box-shadow: 10px 0 rgba(180, 194, 217, 0.55); margin-right: 10px; }
#contentWrapper.prot .pf-url { min-width: 0; color: #F4F7FC; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pf-out__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
#contentWrapper.prot .pf-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; border-radius: 999px;
  font-size: 14px; font-weight: 800; line-height: 1.3; background: var(--pa-ok); color: #fff;
}
#contentWrapper.prot .pf-out--bad .pf-pill { background: var(--pa-stop); color: #0B1A33; }
.pf-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#contentWrapper.prot .pf-out__note { color: var(--pa-soft); font-size: 15px; font-weight: 600; line-height: 1.4; }
.pf-warn {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; border-radius: 10px;
  background: rgba(249, 112, 102, 0.12); box-shadow: inset 0 0 0 1px rgba(249, 112, 102, 0.45);
}
.pf-warn svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--pa-stop); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-warn > span { display: flex; flex-direction: column; gap: 2px; }
#contentWrapper.prot .pf-warn strong { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; }
#contentWrapper.prot .pf-warn span span { color: var(--pa-soft); font-size: 14px; font-weight: 600; line-height: 1.35; }

/* narrow box (phones): the two outcomes stay side by side so each branch still lands on its own card; tighter padding,
   the address wraps at its hyphen, the warning icon sits above its text */
@container (max-width: 500px) {
  .pf__outs { --pf-gap: 10px; }
  .pf-out__dots { display: none; }
  .pf-out__bar { padding: 9px 10px; }
  .pf-out__body { gap: 8px; padding: 10px; }
  #contentWrapper.prot .pf-url { font-size: 14px; line-height: 1.3; overflow-wrap: normal; }
  .pf-warn { flex-direction: column; gap: 6px; padding: 9px 10px; }
  #contentWrapper.prot .pf__label { font-size: 16px; }
}

/* motion (js/protect.js): .is-armed is the start frame (the link and every actor visible, the check and the outcomes dimmed,
   the results not yet shown); .is-on plays once, about 2.8s: the request travels down to the check, the shield pulses,
   the routes split, the safe page opens and the phishing page is stopped with its warning */
.prot-anim.is-armed .pf__stage--check, .prot-anim.is-armed .pf-out { opacity: 0.4; }
.prot-anim.is-armed .pf__wire::after { transform: scaleY(0); }
.prot-anim.is-armed .pf__branch::before { clip-path: inset(0 0 100% 0); }
.prot-anim.is-armed .pf-pill, .prot-anim.is-armed .pf-out__note, .prot-anim.is-armed .pf-warn { opacity: 0; }
.prot-anim.is-on .pf__wire::after { animation: pf-fill 0.5s var(--pa-ease) 0.15s both; }
.prot-anim.is-on .pf__wire--out::after { animation-delay: 1.15s; }
.prot-anim.is-on .pf__dot { animation: pf-travel 0.6s cubic-bezier(0.5, 0, 0.3, 1) 0.1s both; }
.prot-anim.is-on .pf__stage--check { animation: pf-wake 0.4s var(--pa-ease) 0.6s both; }
.prot-anim.is-on .pf__icon--shield { animation: pf-pulse 0.55s var(--pa-ease) 0.65s both; }
.prot-anim.is-on .pf__ring { animation: pf-ring 0.9s var(--pa-ease) 0.7s both; }
/* each branch draws from the stem outwards along its top border, then down to its card (clip-path, so the final frame is
   the plain border: nothing is left dashed or clipped once it ends) */
.prot-anim.is-on .pf__wire--out::after { animation-duration: 0.3s; }
.prot-anim.is-on .pf__branch--ok::before { animation: pf-branch-ok 0.5s cubic-bezier(0.45, 0, 0.25, 1) 1.4s both; }
.prot-anim.is-on .pf__branch--bad::before { animation: pf-branch-bad 0.5s cubic-bezier(0.45, 0, 0.25, 1) 1.5s both; }
.prot-anim.is-on .pf-out--ok { animation: pf-wake 0.4s var(--pa-ease) 1.8s both; }
.prot-anim.is-on .pf-out--bad { animation: pf-wake 0.4s var(--pa-ease) 1.95s both; }
.prot-anim.is-on .pf-out--ok .pf-pill { animation: pf-pop 0.4s var(--pa-ease) 1.9s both; }
.prot-anim.is-on .pf-out--ok .pf-out__note { animation: pf-fade 0.4s var(--pa-ease) 2.05s both; }
.prot-anim.is-on .pf-out--bad .pf-pill { animation: pf-pop 0.4s var(--pa-ease) 2.1s both; }
.prot-anim.is-on .pf-warn { animation: pf-reveal 0.55s var(--pa-ease) 2.25s both; }
@keyframes pf-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pf-travel { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }
@keyframes pf-wake { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes pf-pulse { from { transform: scale(1); } 45% { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes pf-ring { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes pf-branch-ok { from { clip-path: inset(0 0 calc(100% - 2px) 100%); } 60% { clip-path: inset(0 0 calc(100% - 2px) 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-branch-bad { from { clip-path: inset(0 100% calc(100% - 2px) 0); } 60% { clip-path: inset(0 0 calc(100% - 2px) 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pf-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-reveal { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0 round 10px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 10px); } }
@media (prefers-reduced-motion: reduce) {
  .prot-anim *, .prot-anim *::before, .prot-anim *::after { animation: none !important; }
}
@media print {
  .prot-anim.is-armed * { opacity: 1 !important; }
  .prot-anim.is-armed .pf__wire::after { transform: none; }
  .prot-anim.is-armed .pf__branch::before { clip-path: none; }
}

/* ---------- 4. malware and phishing ---------- */
/* each threat: name (its colon visually hidden), the optional tag (brackets visually hidden), then the description on a line of
   its own (li::after is a zero-height full-width flex item ordered before the description text); the accessible text and
   textContent read "Name: (tag) description" as the original copy (tests/e2e/94_transparency.spec.js T5) */
#contentWrapper.prot .prot-threats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px);
  margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--s-line);
}
#contentWrapper.prot .prot-threats li {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 10px;
  margin: 0; padding: 16px 0 17px; border-bottom: 1px solid var(--s-line);
  color: var(--s-ink-2); font-size: 15px; line-height: 1.55;
}
#contentWrapper.prot .prot-threats li::after { content: ""; order: -1; flex-basis: 100%; height: 4px; }
#contentWrapper.prot .prot-threats strong {
  order: -3; color: var(--s-ink); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35;
}
#contentWrapper.prot .prot-threats .prot-threats__tag { order: -2; }
/* inline-block, not inline-flex: flex would make the hidden brackets separate items ("( DoH … )" in the accessible text) */
.prot-threats__tag {
  display: inline-block; height: 22px; padding: 0 9px; border-radius: 999px; line-height: 22px;
  background: var(--s-blue-50); color: var(--s-navy-700); font-size: 12.5px; font-weight: 750; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px var(--s-blue-100); white-space: nowrap;
}
#contentWrapper.prot .prot-note { display: flex; gap: 10px; max-width: 92ch; margin-top: 18px; color: var(--s-ink-2); font-size: 14.5px; line-height: 1.55; }
#contentWrapper.prot .prot-note svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--s-blue-500); }

#contentWrapper.prot .prot-src {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
#contentWrapper.prot .prot-list { margin: 0; padding: 0; list-style: none; }
#contentWrapper.prot .prot-list li {
  position: relative; margin: 0; padding: 7px 0 7px 28px; color: var(--s-ink-2); font-size: 15px; line-height: 1.55;
}
/* list bullets are green checks (DESIGN.md inner pages) */
#contentWrapper.prot .prot-list li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 11px; height: 6px;
  border-left: 2.4px solid var(--s-action); border-bottom: 2.4px solid var(--s-action); transform: rotate(-45deg);
}
#contentWrapper.prot .prot-src__fit { margin-top: 12px; color: var(--s-ink-3); font-size: 14.5px; }
#contentWrapper.prot .prot-av {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--s-line); border-radius: 20px; box-shadow: var(--s-shadow-sm);
}
#contentWrapper.prot .prot-av p { color: var(--s-ink-2); font-size: 17px; line-height: 1.6; }

/* ---------- 5. details (split like the FAQ: head left, list right) ---------- */
#contentWrapper.prot .lp-faq .prot-head { margin: 0; }
#contentWrapper.prot .prot-tech .lp-faq__item summary { color: var(--s-ink); }
#contentWrapper.prot .prot-tech .lp-faq__item summary:hover { color: var(--s-blue); }
#contentWrapper.prot .prot-tech__body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 24px; max-width: 75ch; }
#contentWrapper.prot .prot-tech__body:has(.prot-table) { max-width: none; }
.prot-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.prot-table th, .prot-table td { padding: 11px 12px; border-bottom: 1px solid var(--s-line); text-align: left; vertical-align: top; }
.prot-table thead th { color: var(--s-ink); font-size: 14px; font-weight: 800; border-bottom: 1.5px solid var(--s-ink-3); }
.prot-table tbody th { width: 28%; color: var(--s-ink); font-weight: 700; }
.prot-table td { color: var(--s-ink-2); }

/* ---------- 6. CTA (.lp-end from site.css) and 7. FAQ ---------- */
#contentWrapper.prot .prot-end h2 { margin: 0; color: #fff; font-size: clamp(28px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
#contentWrapper.prot .prot-end p { margin: 12px 0 0; max-width: 46ch; color: var(--s-on-navy-soft); font-size: 18px; line-height: 1.6; }
/* the upsell: heading, lead and buttons left, the Protect vs VPN table right (owner's reference, store slide 06) */
#contentWrapper.prot .prot-end__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
#contentWrapper.prot .prot-end .lp-end__actions { margin-top: 28px; }
.prot-vs-wrap {
  padding: 8px clamp(16px, 2.4vw, 28px) 4px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(180, 194, 217, 0.22);
}
.prot-vs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.prot-vs th, .prot-vs td { padding: 15px 8px; border-bottom: 1px solid rgba(180, 194, 217, 0.16); vertical-align: middle; }
.prot-vs tbody tr:last-child th, .prot-vs tbody tr:last-child td { border-bottom: 0; }
/* the two product headers are built the same: one 44px navy tile (top-aligned), a two-line name, a subtitle block of equal
   height; equal column widths, everything centred over the tick column */
.prot-vs thead th { width: 23%; padding: 14px 6px 16px; text-align: center; vertical-align: top; border-bottom-color: rgba(180, 194, 217, 0.3); }
.prot-vs thead th:first-child { width: auto; }
.prot-vs__tile {
  display: block; width: 44px; height: 44px; margin: 0 auto 10px; overflow: hidden; border-radius: 10px;
  background: #0B1A33; box-shadow: 0 0 0 1px rgba(244, 247, 252, 0.22);
}
.prot-vs__tile img { display: block; width: 100%; height: 100%; }
.prot-vs__tile--vpn { display: grid; place-items: center; }
.prot-vs__tile--vpn svg { width: 32px; height: 32px; --ic-d: #fff; --ic-s: #fff; --ic-a: #0B1A33; }
.prot-vs__name { display: block; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.prot-vs__name > span { display: block; white-space: nowrap; }
.prot-vs__sub { display: block; min-height: calc(2 * 1.35em); margin-top: 4px; color: var(--s-on-navy-soft); font-size: 13px; font-weight: 500; line-height: 1.35; }
.prot-vs tbody th { padding-left: 0; color: #F4F7FC; font-size: 16px; font-weight: 650; line-height: 1.4; text-align: left; }
.prot-vs td { text-align: center; }
.prot-vs__ic { display: block; width: 24px; height: 24px; margin: 0 auto; }
.prot-vs__ic--no { color: var(--s-on-navy-soft); }
#contentWrapper.prot .prot-end p.prot-vs-note { margin: 0; padding: 12px 0 14px; border-top: 1px solid rgba(180, 194, 217, 0.16); color: var(--s-on-navy-soft); font-size: 14px; line-height: 1.5; max-width: none; }
#contentWrapper.prot .lp-faq__item summary { color: var(--s-ink); }
#contentWrapper.prot .lp-faq__item p { margin: -6px 0 22px; max-width: 70ch; }
#contentWrapper.prot .prot-tech__body p { margin: 0; }
#contentWrapper.prot .lp-faq__head p { margin-top: 16px; font-size: 16px; }

/* ---------- responsive ---------- */
/* touch screens: tabs, chips and the copy button reach the 44px target */
@media (pointer: coarse) {
  .prot-pick__row button, .prot-copy__btn { height: 44px; }
}
@media (max-width: 1000px) {
  #contentWrapper.prot .prot-ways { grid-template-columns: 1fr; }
  #contentWrapper.prot .prot-way + .prot-way { border-left: 0; border-top: 1px solid var(--s-line); }
  #contentWrapper.prot .prot-way { padding: 16px 18px; }
  #contentWrapper.prot .prot-explain { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* recommender: the featured card first, then the tabs (behind "Alt dispozitiv?"), then the other options */
  #contentWrapper.prot .prot-rec__main { order: 2; margin-top: 20px; }
  #contentWrapper.prot .prot-pick { order: 3; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; margin: 24px 0 0; padding: 14px 0 12px; }
  #contentWrapper.prot .prot-rec__more { order: 4; }
  #contentWrapper.prot .prot-opts { order: 5; }
  #contentWrapper.prot .prot-rec.is-js .prot-opts { grid-template-columns: 1fr; }
  .prot-pick__group { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .prot-pick__label { padding: 0 14px; }
  /* one row per group that scrolls sideways instead of wrapping into a wall of pills */
  .prot-pick__row {
    flex-wrap: nowrap; overflow-x: auto; padding: 2px 14px; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent);
  }
  .prot-pick__row::-webkit-scrollbar { display: none; }
  .prot-pick__row button { flex: 0 0 auto; }
  #contentWrapper.prot .prot-rec__main .prot-opt { grid-template-columns: 1fr; }
  #contentWrapper.prot .prot-threats { grid-template-columns: 1fr; }
  #contentWrapper.prot .prot-src { grid-template-columns: 1fr; }
  #contentWrapper.prot .prot-end__grid { grid-template-columns: 1fr; }
  /* the buttons follow the table on phones and tablets: read the comparison, then act */
  #contentWrapper.prot .prot-end__text { display: contents; }
  #contentWrapper.prot .prot-end .lp-end__actions { order: 2; margin-top: 0; }
  #contentWrapper.prot .prot-end__grid { gap: 24px; }
  #contentWrapper.prot .prot-end__grid h2 + p { margin-top: -12px; }
}
@media (max-width: 640px) {
  .prot-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prot-table, .prot-table tbody, .prot-table tr, .prot-table th, .prot-table td { display: block; width: auto; }
  .prot-table tbody tr { padding: 12px 0; border-bottom: 1px solid var(--s-line); }
  .prot-table tbody th { width: auto; padding: 0 0 6px; border: 0; }
  .prot-table td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; padding: 3px 0; border: 0; }
  .prot-table td::before { content: attr(data-label); color: var(--s-ink-3); font-weight: 700; }
  #contentWrapper.prot .prot-av { grid-template-columns: 1fr; gap: 12px; }
  #contentWrapper.prot .prot-av .lp-ic { width: 48px; height: 48px; padding: 8px; border-radius: 12px; }
}
@media (max-width: 480px) {
  .prot-explain__fig { margin: 0 -16px; border-radius: 0; }
  .rt-page-title .prot-free { font-size: 13px; margin-left: 6px; }
  #contentWrapper.prot .prot-opt { padding: 20px 18px; }
  #contentWrapper.prot .prot-rec__main .prot-opt { padding: 22px 18px; }
  #contentWrapper.prot .prot-rec__main .prot-opt__act { margin: 0 -6px -4px; padding: 18px 16px; }
  #contentWrapper.prot .prot-way { gap: 14px; padding: 14px 16px; }
  #contentWrapper.prot .prot-way__ic { width: 40px; height: 40px; padding: 7px; border-radius: 11px; }
  /* the band lead is the owner's copy, kept whole; a step smaller on phones so the recommendation sits nearer the fold */
  #pageHeaderWrapper.prot-band div.pageHeader .rt-page-lead { font-size: 15px; line-height: 1.5; }
  /* phones: the strip becomes one row of three cards that scrolls sideways (the next card peeks in), each way in one short
     paragraph (labels stay for screen readers), so the recommendation comes sooner */
  /* the wrapper scrolls (focusable region, so a keyboard reaches the cards off screen); the list is the flex row */
  .prot-ways-scroll {
    margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .prot-ways-scroll::-webkit-scrollbar { display: none; }
  .prot-ways-scroll:focus-visible { outline-offset: -2px; border-radius: 16px; }
  #contentWrapper.prot .prot-ways { display: flex; gap: 10px; width: max-content; max-width: none; border: 0; border-radius: 0; background: none; }
  #contentWrapper.prot .prot-way, #contentWrapper.prot .prot-way + .prot-way {
    flex: 0 0 calc((100vw - 32px) * 0.8); width: calc((100vw - 32px) * 0.8); border: 1px solid var(--s-line); border-radius: 16px; background: #fff; scroll-snap-align: start;
  }
  #contentWrapper.prot .prot-sec--rec { padding-top: 36px; }
  #contentWrapper.prot .prot-ways-sec .prot-head { margin-bottom: 14px; }
  #contentWrapper.prot .prot-ways-sec .prot-head p { display: none; }
  #contentWrapper.prot .prot-way__txt { gap: 4px; }
  #contentWrapper.prot .prot-way__facts { display: block; color: var(--s-ink-2); font-size: 14px; line-height: 1.5; }
  #contentWrapper.prot .prot-way__facts div { display: inline; }
  #contentWrapper.prot .prot-way__facts div + div::before { content: " · "; color: var(--s-ink-3); }
  #contentWrapper.prot .prot-way__facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #contentWrapper.prot .prot-way__facts dd { color: var(--s-ink-2); }
  #contentWrapper.prot .prot-rec__device { font-size: 17px; }
  .prot-vs-wrap { margin: 0 -6px; padding: 4px 12px 0; }
  .prot-vs thead th { width: 27%; padding: 12px 4px 14px; }
  .prot-vs__name { font-size: 13px; }
  .prot-vs__tile { width: 40px; height: 40px; border-radius: 9px; }
  .prot-vs__tile--vpn svg { width: 29px; height: 29px; }
  .prot-vs__sub { font-size: 12px; }
  .prot-vs tbody th { font-size: 15px; }
  .prot-vs th, .prot-vs td { padding-top: 13px; padding-bottom: 13px; }
}