/* ===== ShopGrade subpages =====
   /for-agencies/, /for-brands/ and /sample-report/ share the home page's
   system: they load home.css for the tokens, type, nav, buttons, sections,
   pen marks, permissions columns, FAQ, the closing card and the footer, and
   this file for the parts only they have. Same rules as the home page:
   ink is the interface, the four data colours mean what they mean in the
   report, and the brand magenta is used sparingly, as a pen and an accent. */

/* ---------- page hero: the home page's white stage, shorter ---------- */
.phero{ position:relative; padding:64px 0 104px; isolation:isolate; overflow:clip;
  background:linear-gradient(180deg, var(--stage) 55%, var(--stage-end)); border-bottom:1px solid rgba(236,0,95,.1); }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 38% 48% at 80% 34%, rgba(236,0,95,.07), transparent 70%); }
.phero .hero__grid{ height:100%; }
.phero__inner{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center; }
.phero__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.phero__title{ margin-top:24px; font-size:clamp(38px, 4.6vw, 66px); line-height:1.02; letter-spacing:-.046em; }
.phero__sub{ margin-top:26px; max-width:580px; font-size:19px; line-height:1.55; color:var(--ink-3); }
.phero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.phero__note{ display:flex; align-items:flex-start; gap:10px; margin-top:22px; max-width:520px; font-size:14px; line-height:1.5; color:var(--muted); }
.phero__note svg{ flex:none; width:18px; height:18px; margin-top:1px; padding:3px; border-radius:50%; color:#fff; background:var(--brand); }
.phero__vis{ position:relative; }
.phero--center .phero__inner{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
.phero--center .phero__copy{ align-items:center; max-width:880px; }
.phero--center .phero__sub{ max-width:680px; }
.phero--center .phero__cta{ justify-content:center; }
.phero__ticks{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:26px; font-size:14.5px; color:var(--ink-2); }
.phero__ticks li{ display:inline-flex; align-items:center; gap:8px; }
.phero__ticks svg{ flex:none; width:16px; height:16px; padding:2px; border-radius:50%; color:#fff; background:var(--brand); }
/* The copy (kicker, headline, lede, buttons, note, ticks) is painted finished,
   with no entrance of its own. It used to rise in on keyframes filled `both`
   behind .js-motion, which home.js only adds from the end of <body>: on a slow
   connection the hero painted, emptied when the class landed, then rose back.
   The entrances left in the hero are decoration, and they key off
   `scripting`, which is already known at the first frame, never off
   .js-motion, so nothing a visitor has seen is taken away when the script
   arrives. With scripts off, under reduced motion, or in a browser without
   the media feature, the hero is simply the finished picture. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .phero__vis{ animation:visIn 1.3s var(--ease) .25s both; }
}
@keyframes visIn{ from{ opacity:0; transform:translateY(40px) scale(.97); } }

/* ---------- agencies hero: one report, re-skinned in your brand ----------
   --ac is registered as a colour so the whole document can glide from one
   agency palette to the next; every accent in it is computed from --ac. */
@property --ac{ syntax:"<color>"; inherits:true; initial-value:#1F7A5C; }
.wl{ position:relative; --ac:#1F7A5C; animation:wlTint 14s ease-in-out infinite; }
@keyframes wlTint{
  0%, 21%{ --ac:#1F7A5C; } 25%, 46%{ --ac:#2456C9; } 50%, 71%{ --ac:#B5134F; } 75%, 96%{ --ac:#C2591B; } 100%{ --ac:#1F7A5C; }
}
.wl__doc{ position:relative; background:#fff; border:1px solid var(--line-2); border-radius:22px; overflow:hidden;
  box-shadow:0 0 0 8px rgba(17,17,19,.03), var(--sh-3); }
.wl__doc::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--ac); }
.wl__top{ display:flex; align-items:center; gap:14px; padding:24px 26px 20px; border-bottom:1px solid var(--line); }
.wl__logo{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; background:var(--ac); color:#fff;
  font:600 16px/1 var(--font); letter-spacing:-.02em; }
.wl__who{ min-width:0; }
.wl__who b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.wl__who small{ display:block; margin-top:3px; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl__pdf{ margin-left:auto; flex:none; font:500 11px/1 var(--mono); letter-spacing:.06em; padding:7px 9px; border-radius:7px;
  color:var(--ac); background:color-mix(in srgb, var(--ac) 10%, #fff); }
.wl__body{ display:flex; align-items:center; gap:24px; padding:26px; }
.wl__ring{ position:relative; flex:none; display:grid; place-items:center; width:116px; height:116px; }
.wl__ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.wl__ring circle{ fill:none; stroke-width:10; }
.wl__track{ stroke:var(--paper-2); }
.wl__arc{ stroke:var(--ac); stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:104.5; }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .wl__arc{ animation:arcIn 1.6s var(--ease) .9s both; }
}
@keyframes arcIn{ from{ stroke-dashoffset:326.7; } }
.wl__ring b{ font-size:38px; font-weight:600; letter-spacing:-.05em; line-height:1; margin-top:-6px; }
.wl__ring small{ position:absolute; bottom:28px; font:500 9.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.wl__txt{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.wl__txt b{ font-size:21px; font-weight:600; letter-spacing:-.03em; line-height:1.15; }
.wl__txt > span{ font-size:14.5px; line-height:1.5; color:var(--ink-3); }
.wl__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.wl__chips i{ font-style:normal; font-size:12.5px; padding:5px 9px; border-radius:7px; background:var(--paper); color:var(--ink-3); }
.wl__rows{ display:flex; flex-direction:column; padding:0 26px 8px; }
.wl__rows span{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); }
.wl__rows i{ display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:7px; font:600 12px/1 var(--font); font-style:normal;
  color:var(--ac); background:color-mix(in srgb, var(--ac) 11%, #fff); }
.wl__rows b{ margin-left:auto; font:500 11px/1 var(--mono); color:var(--muted); padding:5px 7px; border:1px solid var(--line); border-radius:6px; }
.wl__foot{ display:flex; justify-content:space-between; gap:12px; padding:16px 26px; background:var(--paper); font-size:13px; color:var(--muted); }
.wl__foot b{ color:var(--ac); font-weight:600; }
/* the settings card that "drives" the document */
/* sits under the document, tucked into its bottom padding only, so it never
   covers a line of the report */
.wl__panel{ position:relative; z-index:1; margin:-12px 0 0 24px; display:flex; flex-direction:column; gap:12px; width:236px; padding:16px 18px 18px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:16px;
  box-shadow:0 1px 2px rgba(17,17,19,.06), 0 24px 50px -20px rgba(17,17,19,.4); translate:calc(var(--ppx, 0) * 10px) calc(var(--ppy, 0) * 8px); }
.wl__ph{ font:500 11px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.wl__sw{ position:relative; display:flex; gap:10px; }
.wl__sw i{ position:relative; width:26px; height:26px; border-radius:50%; background:var(--c); }
.wl__sw i::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--c); opacity:0; animation:swOn 14s step-end infinite; animation-delay:var(--d); }
/* the ring moves the moment the cursor clicks (21%, 46%, 71% and 96% of the
   loop), which is also when the document starts gliding to the new colour */
.wl__sw i:nth-child(1)::after{ --d:-.56s; } .wl__sw i:nth-child(2)::after{ --d:2.94s; } .wl__sw i:nth-child(3)::after{ --d:6.44s; } .wl__sw i:nth-child(4)::after{ --d:9.94s; }
@keyframes swOn{ 0%{ opacity:1; } 25%, 100%{ opacity:0; } }
.wl__field{ display:flex; flex-direction:column; gap:5px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; font-weight:500; }
.wl__field small{ font-size:11.5px; font-weight:400; color:var(--muted); }

/* ---------- brands hero: your product page, and the list it produced ---------- */
.bv{ position:relative; display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); align-items:center; }
.bv__phone{ position:relative; z-index:1; grid-area:1 / 1; width:100%; max-width:270px; aspect-ratio:780 / 1280; overflow:hidden;
  border:9px solid #111113; border-radius:40px; background:#111113; box-shadow:var(--sh-3); rotate:-4deg;
  translate:calc(var(--ppx, 0) * 6px) calc(var(--ppy, 0) * 5px); }
.bv__phone img{ width:100%; height:auto; border-radius:31px; }
.bv__plan{ position:relative; z-index:2; grid-area:1 / 1 / 2 / 3; margin-left:38%; background:#fff; border:1px solid var(--line-2); border-radius:20px;
  box-shadow:0 0 0 8px rgba(17,17,19,.03), var(--sh-3); overflow:hidden; }
.bv__h{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.bv__h img{ width:30px; height:30px; border-radius:8px; }
.bv__h b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; }
.bv__h small{ display:block; font-size:12.5px; color:var(--muted); }
.bv__rows{ display:flex; flex-direction:column; padding:4px 20px 10px; }
.bv__r{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:6px 12px; padding:13px 0; border-top:1px solid var(--line); }
.bv__r:first-child{ border-top:0; }
.bv__r > i{ grid-row:span 2; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--paper); font:600 12px/1 var(--font); font-style:normal; }
.bv__r > span{ font-size:14px; font-weight:500; line-height:1.35; letter-spacing:-.01em; }
.bv__tags{ display:flex; flex-wrap:wrap; gap:5px; }
.bv__tags em{ font:500 11px/1 var(--font); font-style:normal; padding:4px 7px; border-radius:6px; color:var(--ink-3); background:var(--paper); }
.bv__tags .t--h{ color:var(--high); background:var(--high-bg); }
.bv__tags .t--m{ color:var(--med); background:var(--med-bg); }
.bv__tags .t--q{ color:var(--ok); background:var(--ok-bg); }
.bv .hchip{ opacity:1; transform:none; z-index:3; }
.bv .hchip--l{ left:-8px; top:auto; bottom:6%; }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .bv__r{ animation:rowIn .7s var(--ease) both; animation-delay:calc(var(--i) * 110ms + .9s); }
  .bv .hchip{ animation:rise .8s var(--ease) 1.8s both; }
}
@keyframes rowIn{ from{ opacity:0; transform:translateX(14px); } }

/* ---------- a four-step flow: the engagement, the loop ---------- */
.flow{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; counter-reset:none; }
.flow::before{ content:""; position:absolute; left:24px; right:24px; top:29px; height:1px; background:var(--line-2); }
.flow__s{ position:relative; display:flex; flex-direction:column; gap:12px; padding:0 8px 0 0; }
.flow__n{ position:relative; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--card);
  border:1px solid var(--line-2); font:500 14px/1 var(--mono); color:var(--ink); box-shadow:var(--sh-1); transition:background-color .4s ease, color .4s ease, border-color .4s ease; }
.flow__s:hover .flow__n, .flow:not(.is-tracked) .flow__s.in:first-child .flow__n, .flow__s.is-on .flow__n{ background:var(--ink); border-color:var(--ink); color:#fff; }
.flow__s h3{ margin-top:14px; font-size:23px; font-weight:500; letter-spacing:-.03em; }
.flow__s p{ font-size:15px; line-height:1.6; color:var(--muted); }
.flow__tag{ align-self:flex-start; margin-top:4px; display:inline-flex; align-items:center; gap:7px; font:500 11.5px/1 var(--mono); letter-spacing:.04em;
  font-style:normal; padding:7px 9px; border-radius:7px; background:var(--card); border:1px solid var(--line); color:var(--ink-3); }
.flow__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.flow__s:nth-child(2){ transition-delay:.08s; } .flow__s:nth-child(3){ transition-delay:.16s; } .flow__s:nth-child(4){ transition-delay:.24s; }
.flow__foot{ margin-top:44px; font-size:14.5px; color:var(--muted); }

/* ---------- a ledger of rows: chapters, numbers ---------- */
.matrix{ border-top:1px solid var(--line-2); }
.matrix__row{ position:relative; display:grid; grid-template-columns:56px minmax(0,300px) minmax(0,1fr) auto; gap:8px 28px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--line); transition:background-color .3s ease; }
.matrix__row::before{ content:""; position:absolute; inset:0 -18px; z-index:-1; border-radius:14px; background:transparent; transition:background-color .3s ease; }
.matrix__row:hover::before{ background:rgba(255,255,255,.75); }
.matrix__n{ font:500 12.5px/1 var(--mono); letter-spacing:.04em; color:var(--muted); }
.matrix__k{ display:flex; align-items:center; gap:11px; font-size:17.5px; font-weight:500; letter-spacing:-.02em; line-height:1.3; }
.matrix__k svg{ flex:none; width:20px; height:20px; color:var(--ink-3); }
.matrix__v{ font-size:15px; line-height:1.6; color:var(--muted); }
.matrix__v b{ color:var(--ink); font-weight:600; }
.matrix__as{ display:block; margin-top:8px; font-size:13px; color:var(--muted); }
.matrix__as b{ font-weight:500; color:var(--ink-2); }
.matrix__tag{ justify-self:end; white-space:nowrap; font:500 11px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:6px 8px; border-radius:6px; }
.matrix__tag--all{ color:var(--ok); background:var(--ok-bg); }
.matrix__tag--paid{ color:#A1084A; background:#FDE7F0; }
.matrix__tag--ref{ color:var(--ink-3); background:var(--paper); }
/* cards variant: the same rows, laid out as a grid */
.matrix--cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; border-top:0; }
.matrix--cards .matrix__row{ grid-template-columns:minmax(0,1fr); align-content:start; gap:14px; padding:26px 26px 28px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .3s ease, box-shadow .3s ease, translate .3s var(--ease); }
.matrix--cards .matrix__row::before{ display:none; }
.matrix--cards .matrix__row:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); translate:0 -2px; }
.matrix--cards .matrix__k{ font-size:20px; padding-right:30px; }
.matrix--cards .matrix__k svg{ width:40px; height:40px; padding:9px; border-radius:11px; background:var(--paper); color:var(--ink); }
.matrix--cards .matrix__n{ position:absolute; top:28px; right:26px; }
.matrix--two{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* dark variant, for the numbers */
.section--dark .matrix{ border-color:var(--dark-line-2); }
.section--dark .matrix__row{ border-color:var(--dark-line); }
.section--dark .matrix__row:hover::before{ background:rgba(255,255,255,.04); }
.section--dark .matrix__k{ color:#fff; }
.section--dark .matrix__k svg{ color:var(--dark-muted); }
.section--dark .matrix__n, .section--dark .matrix__v{ color:var(--dark-muted); }
.section--dark .matrix__v b{ color:#fff; }

/* ---------- the workspace: one lead card, six beside it ---------- */
.fgrid{ display:grid; grid-template-columns:minmax(0,1.1fr) repeat(2, minmax(0,1fr)); gap:16px; }
.fcard{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .3s ease, box-shadow .3s ease, translate .3s var(--ease); }
.fcard:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); translate:0 -2px; }
.fcard svg{ width:40px; height:40px; padding:9px; border-radius:11px; background:var(--paper); color:var(--ink); }
.fcard h3{ margin-top:6px; font-size:18.5px; font-weight:500; letter-spacing:-.02em; }
.fcard p{ font-size:14.5px; line-height:1.6; color:var(--muted); }
.fcard--lead{ grid-row:span 3; justify-content:space-between; gap:28px; padding:32px; background:var(--dark); border-color:var(--dark); color:var(--dark-text); overflow:hidden; isolation:isolate; }
.fcard--lead::before{ content:""; position:absolute; inset:auto -30% -40% auto; width:120%; aspect-ratio:1; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(236,0,95,.32), transparent); }
.fcard--lead:hover{ border-color:var(--dark); }
.fcard--lead h3{ color:#fff; font-size:22px; }
.fcard--lead p{ color:var(--dark-muted); }
.fcard__big{ display:flex; align-items:baseline; gap:12px; }
.fcard__big b{ font-size:clamp(84px, 9vw, 132px); font-weight:500; line-height:.85; letter-spacing:-.06em; color:#fff; }
.fcard__big span{ font:500 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dark-muted); }
.seats{ display:flex; gap:8px; margin-top:22px; }
.seats i{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--dark-3); border:1px solid var(--dark-line-2);
  font:500 13px/1 var(--font); font-style:normal; color:#fff; }
.seats i:nth-child(1){ background:#B5134F; border-color:#B5134F; }
.pool{ position:relative; height:8px; margin-top:16px; border-radius:99px; background:var(--dark-3); overflow:hidden; }
.pool i{ position:absolute; top:0; bottom:0; border-radius:99px; }
.pool i:nth-child(1){ left:0; width:34%; background:#FF5C9A; }
.pool i:nth-child(2){ left:34%; width:22%; background:#FF9EC2; }
.pool i:nth-child(3){ left:56%; width:14%; background:#FFD3E3; }
.js-motion .reveal .pool i{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.js-motion .reveal.in .pool i{ transform:none; }
.js-motion .reveal.in .pool i:nth-child(2){ transition-delay:.3s; } .js-motion .reveal.in .pool i:nth-child(3){ transition-delay:.6s; }
.pool__key{ display:flex; justify-content:space-between; margin-top:10px; font:500 11px/1 var(--mono); letter-spacing:.05em; color:var(--dark-muted); }

/* ---------- the client deck, dealt ---------- */
.deckwrap{ position:relative; overflow:clip; overflow-clip-margin:14px; }
.deckwrap .deck{ height:auto; aspect-ratio:1754 / 1320; margin-right:0; }
.deckwrap .deck__s{ width:86%; box-shadow:0 2px 4px rgba(17,17,19,.05), 0 30px 60px -30px rgba(17,17,19,.45); }
.deckwrap .deck__s--1{ left:0; top:30%; }
.deckwrap .deck__s--2{ left:7%; top:15%; }
.deckwrap .deck__s--3{ left:14%; top:0; }
.deckwrap:hover .deck__s--1{ transform:translate(-8px, 12px) rotate(-4deg); }
.deckwrap:hover .deck__s--2{ transform:translate(8px, -2px) rotate(1.5deg); }
.deckwrap:hover .deck__s--3{ transform:translate(22px, -14px) rotate(5.5deg); }
.caps{ display:flex; flex-direction:column; margin-top:34px; border-top:1px solid var(--line-2); }
.caps li{ display:flex; align-items:baseline; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:16.5px; font-weight:500; letter-spacing:-.015em; }
.caps span{ font:500 12px/1 var(--mono); color:var(--muted); }
.note{ margin-top:28px; max-width:760px; font-size:14px; line-height:1.6; color:var(--muted); }
.note--c{ margin-inline:auto; text-align:center; }

/* ---------- white label: two columns of rules ---------- */
.perm--wl{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
.perm--wl .perm__col--yes .rules{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:32px; }
.perm--wl .perm__col--no .rules{ display:block; }
.perm--wl .perm__col--no{ background:linear-gradient(180deg, #fff, var(--paper)); }
.rules div b{ display:block; font-weight:500; }
.perm--wl .rules .no svg{ color:var(--ok); background:var(--ok-bg); }
.perm__col--wide{ grid-column:1 / -1; }

/* ---------- cost: a big number beside the ledger ---------- */
.cost{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:56px; align-items:start; }
.cost__big{ position:sticky; top:112px; padding:34px; border:1px solid var(--dark-line-2); border-radius:var(--r-xl); background:var(--dark-2); }
.cost__big small{ font:500 11.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--dark-muted); }
.cost__big b{ display:block; margin-top:18px; font-size:clamp(64px, 7vw, 104px); font-weight:500; line-height:.9; letter-spacing:-.06em; color:#fff; }
.cost__big p{ margin-top:16px; font-size:15px; line-height:1.55; color:var(--dark-muted); }
.cost__math{ display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid var(--dark-line); font:500 13px/1.4 var(--mono); color:var(--dark-text); }
.cost__math i{ font-style:normal; color:var(--dark-muted); }
.cost .matrix__row{ grid-template-columns:36px minmax(0,190px) minmax(0,1fr); gap:8px 20px; }
.cta-line{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }

/* ---------- a finding, in full ---------- */
.find{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--sh-2); }
.find::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#D93025; }
.find__top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:26px 30px 0; }
.find__sev{ font:500 11.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:6px 8px; border-radius:6px; color:var(--high); background:var(--high-bg); }
.find__area{ font-size:13px; color:var(--muted); }
.find h3{ padding:16px 30px 0; font-size:clamp(22px, 2.2vw, 28px); font-weight:500; letter-spacing:-.03em; line-height:1.2; }
.find__def{ display:flex; flex-direction:column; gap:12px; padding:24px 30px 0; }
.find__def > div{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px; padding:16px 18px; border-radius:14px; background:var(--paper); }
.find__def > div:last-child{ background:var(--ok-bg); }
.find__def dt{ font:500 11px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.find__def > div:last-child dt{ color:var(--ok); }
.find__def dd{ font-size:15px; line-height:1.6; color:var(--ink-2); }
.find__evidence{ font-family:var(--mono); font-size:13.5px !important; }
.find__foot{ display:flex; align-items:center; gap:10px; margin-top:22px; padding:16px 30px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.find__foot svg{ width:16px; height:16px; color:var(--ok); }

/* ---------- the revenue panel (for brands) ---------- */
.walkrow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.walkrow__step{ display:inline-block; font:500 11.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; padding:7px 9px; border-radius:7px;
  color:var(--ink-3); background:var(--card); border:1px solid var(--line-2); }
.walkrow h3{ margin-top:22px; font-size:clamp(28px, 3.2vw, 42px); line-height:1.08; letter-spacing:-.04em; }
.walkrow__copy p{ margin-top:20px; font-size:16.5px; line-height:1.65; color:var(--ink-3); }
.walkrow__copy .walkrow__note{ font-size:14px; color:var(--muted); padding-left:16px; border-left:2px solid var(--brand); }

/* ---------- three sources (sample report) ---------- */
.src3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.src3 article{ position:relative; display:flex; flex-direction:column; gap:12px; padding:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .3s ease, box-shadow .3s ease, translate .3s var(--ease); }
.src3 article:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); translate:0 -2px; }
.src3 article:nth-child(2){ transition-delay:.08s; } .src3 article:nth-child(3){ transition-delay:.16s; }
.src3 svg{ width:42px; height:42px; padding:10px; border-radius:12px; color:#fff; background:var(--ink); }
.src3 article:nth-child(2) svg{ background:var(--low-dot); }
.src3 article:nth-child(3) svg{ background:var(--brand); }
.src3 h3{ margin-top:8px; font-size:20px; letter-spacing:-.025em; }
.src3 p{ font-size:15px; line-height:1.6; color:var(--muted); }

/* ---------- the framed report (sample report) ---------- */
.rstage{ position:relative; margin-top:-64px; padding-bottom:40px; }
.rframe{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line-2); border-radius:18px;
  box-shadow:0 0 0 8px rgba(17,17,19,.035), var(--sh-3); }
.rframe__bar{ display:flex; align-items:center; gap:16px; height:52px; padding:0 14px 0 18px; background:#F1F0EB; border-bottom:1px solid var(--line); }
.rframe__dots{ display:flex; gap:7px; }
.rframe__dots i{ width:11px; height:11px; border-radius:50%; background:#DAD9D2; }
.rframe__tab{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:9px; background:#fff; border:1px solid var(--line);
  font-size:13px; color:var(--ink-3); white-space:nowrap; }
.rframe__tab img{ width:16px; height:16px; border-radius:4px; }
.rframe__url{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; height:34px; padding:0 14px; border-radius:99px; background:#fff; border:1px solid var(--line);
  font-size:13px; color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.rframe__url svg{ flex:none; width:13px; height:13px; color:var(--muted); }
.rframe__open{ flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:9px; background:var(--ink); color:#fff;
  font-size:13.5px; font-weight:500; transition:background-color .2s ease; }
.rframe__open:hover{ background:#2A2A30; }
.rframe__open .arrow{ width:14px; height:14px; transition:transform .25s var(--ease); }
.rframe__open:hover .arrow{ transform:translate(2px,-2px); }
.rframe__doc{ display:block; width:100%; height:min(860px, 82vh); min-height:560px; border:0; background:#F6F0F2; }
.samplebar{ position:fixed; left:50%; bottom:18px; z-index:60; translate:-50% 0; width:min(680px, calc(100vw - 32px));
  background:rgba(17,17,19,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-radius:16px; color:#fff;
  box-shadow:0 20px 50px -18px rgba(17,17,19,.55); animation:barIn .8s var(--ease) 1.4s both; }
@keyframes barIn{ from{ opacity:0; translate:-50% 30px; } }
.samplebar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 10px 10px 20px !important; }
.samplebar p{ font-size:14px; line-height:1.4; color:var(--dark-muted); }
.samplebar p b{ color:#fff; font-weight:600; }
.samplebar .btn{ flex:none; }
.samplebar .btn--light{ height:40px; padding:0 16px; font-size:14px; border-radius:10px; }

/* ===== Motion that shows the product doing its job =====
   Every loop below acts out something the extension or the report really
   does: a brand colour being picked, a page being scanned, the popup being
   clicked, a list being worked through. All of it is decorative and
   aria-hidden, and with scripts off or reduced motion the markup is already
   the finished picture. */

/* agencies: a cursor picks each swatch, and the document follows it */
.wl__cur{ display:none; position:absolute; left:0; top:0; z-index:2; width:20px; height:20px; pointer-events:none; }
.wl__cur svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 2px 3px rgba(17,17,19,.32)); transform-origin:21% 12%; }
.js-motion .wl__cur{ display:block; animation:wlCur 14s cubic-bezier(.65,0,.35,1) infinite; }
.js-motion .wl__cur svg{ animation:wlClick 14s ease infinite; }
@keyframes wlCur{
  0%, 13%{ transform:translate(11.8px, 14.5px); }
  19.5%, 38%{ transform:translate(47.8px, 14.5px); }
  44.5%, 63%{ transform:translate(83.8px, 14.5px); }
  69.5%, 88%{ transform:translate(119.8px, 14.5px); }
  94.5%, 100%{ transform:translate(11.8px, 14.5px); }
}
@keyframes wlClick{
  0%, 20%, 22.5%, 45%, 47.5%, 70%, 72.5%, 95%, 97.5%, 100%{ transform:none; }
  21%, 46%, 71%, 96%{ transform:scale(.8); }
}
/* the field shows a caret, as if the name had just been typed */
.js-motion .wl__name::after{ content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:2px; vertical-align:-.15em; background:var(--ac); animation:caret 1.1s step-end infinite; }
@keyframes caret{ 50%{ opacity:0; } }

/* brands: a scan line passes down the product page and boxes what it measures */
.bv__scan, .bv__box{ display:none; }
/* the boxes are placed on the screenshot's own proportions (780 by 1600), so
   they land on the same pixels whatever the frame's aspect does */
.bv__layer{ position:absolute; left:0; top:0; width:100%; aspect-ratio:780 / 1600; z-index:1; pointer-events:none; }
.js-motion .bv__scan{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none; animation:bvScan 9s cubic-bezier(.45,0,.55,1) 1.2s infinite both; }
.bv__scan::before{ content:""; position:absolute; left:0; right:0; top:0; height:64px; translate:0 -100%; background:linear-gradient(180deg, transparent, rgba(236,0,95,.18)); }
.bv__scan::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--brand); box-shadow:0 0 14px 2px rgba(236,0,95,.6); }
@keyframes bvScan{
  0%{ transform:translateY(0); opacity:0; }
  3%{ opacity:1; }
  30%{ transform:translateY(100%); opacity:1; }
  34%, 100%{ transform:translateY(100%); opacity:0; }
}
.js-motion .bv__box{ display:block; position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); z-index:1; pointer-events:none;
  border:1.5px solid var(--brand); border-radius:6px; background:rgba(236,0,95,.07); opacity:0; animation:bvBox 9s var(--ease) var(--d) infinite both; }
.bv__box em{ position:absolute; left:6px; top:-8px; font:500 9px/1 var(--mono); font-style:normal; letter-spacing:.03em; padding:3px 5px; border-radius:4px;
  background:var(--brand); color:#fff; white-space:nowrap; }
.bv__box--miss{ border-style:dashed; border-color:var(--high); background:rgba(197,34,31,.07); }
.bv__box--miss em{ background:var(--high); }
@keyframes bvBox{
  0%{ opacity:0; transform:scale(1.05); }
  4%, 60%{ opacity:1; transform:none; }
  68%, 100%{ opacity:0; transform:none; }
}
/* each box's --d is when the line reaches its top edge: the scan starts at
   1.2s and takes 2.7s to cross the screen */
/* the roadmap is read top to bottom, one row at a time */
.bv__r{ position:relative; }
.bv__r::before{ content:""; position:absolute; inset:2px -12px; z-index:-1; border-radius:10px; background:var(--paper); opacity:0; }
.bv__rows{ position:relative; isolation:isolate; }
.js-motion .bv__r::before{ animation:bvRead 12s ease infinite; animation-delay:calc(var(--i) * 2s + 4s); }
@keyframes bvRead{ 0%, 100%{ opacity:0; } 3%, 14%{ opacity:1; } 18%{ opacity:0; } }

/* install: the cursor opens the popup and starts a report */
.xv__go{ position:relative; }
.xv__go > span{ grid-area:1 / 1; display:inline-flex; align-items:center; gap:8px; }
.xv__go-b{ opacity:0; }
.xv__go-b i{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
.xv__cur{ display:none; position:absolute; left:0; top:0; z-index:6; width:22px; height:22px; pointer-events:none; }
.xv__cur svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 2px 3px rgba(17,17,19,.32)); transform-origin:21% 12%; }
/* --xv-at is where the loop starts: 0, or a little past the popup opening
   when it was already on screen as home.js landed (see initInstall). Every
   part takes the same delay so the cursor, popup and button stay in step;
   the cursor fades in wherever that puts it. */
.xv.is-live .xv__cur{ display:block; animation:xvCur 10s cubic-bezier(.65,0,.35,1) var(--xv-at, 0s) infinite; }
.xv.is-live .xv__cur svg{ animation:xvClick 10s ease var(--xv-at, 0s) infinite, xvCurIn .4s ease both; }
.xv.is-live .xv__ext{ animation:xvExt 10s ease var(--xv-at, 0s) infinite; }
.xv.is-live .xv__pop{ animation:xvPop 10s var(--ease) var(--xv-at, 0s) infinite; transform-origin:calc(100% - 24px) -16px; }
.xv.is-live .xv__go{ animation:xvPress 10s ease var(--xv-at, 0s) infinite; }
.xv.is-live .xv__go-a{ animation:xvA 10s step-end var(--xv-at, 0s) infinite; }
.xv.is-live .xv__go-b{ animation:xvB 10s step-end var(--xv-at, 0s) infinite; }
@keyframes xvCurIn{ from{ opacity:0; } }
@keyframes xvCur{
  0%, 6%{ transform:translate(var(--rx), var(--ry)); opacity:0; }
  9%{ opacity:1; }
  18%, 30%{ transform:translate(var(--ex), var(--ey)); }
  42%, 82%{ transform:translate(var(--bx), var(--by)); opacity:1; }
  94%, 100%{ transform:translate(var(--rx), var(--ry)); opacity:0; }
}
@keyframes xvClick{ 0%, 18.5%, 21%, 43.5%, 46%, 100%{ transform:none; } 19.5%, 44.5%{ transform:scale(.8); } }
@keyframes xvExt{ 0%, 18.5%, 22%, 100%{ transform:none; } 19.5%{ transform:scale(.86); } }
@keyframes xvPop{
  0%, 21%{ opacity:0; transform:translateY(-8px) scale(.96); }
  27%, 82%{ opacity:1; transform:none; }
  88%, 100%{ opacity:0; transform:translateY(-6px) scale(.98); }
}
@keyframes xvPress{ 0%, 44%, 47%, 100%{ transform:none; filter:none; } 45%{ transform:scale(.97); filter:brightness(.9); } }
@keyframes xvA{ 0%{ opacity:1; } 45.5%{ opacity:0; } 90%{ opacity:1; } }
@keyframes xvB{ 0%{ opacity:0; } 45.5%{ opacity:1; } 90%{ opacity:0; } }

/* a four-step flow fills as it scrolls through the screen */
.flow::after{ content:""; position:absolute; left:24px; top:29px; width:calc(100% - 48px); height:1.5px; margin-top:-.25px; background:var(--ink);
  transform-origin:left; transform:scaleX(var(--fp, 0)); display:none; }
.flow.is-scrub::after{ display:block; }
.flow__s.is-on .flow__n{ animation:nPop .55s var(--ease); }
@keyframes nPop{ 45%{ transform:scale(1.1); } }

/* a long ledger marks the row being read */
.matrix__n, .matrix__k svg{ transition:color .3s ease; }
.matrix__row::before{ transition:background-color .3s ease, box-shadow .3s ease; }
.matrix__row.is-read::before{ background:rgba(255,255,255,.8); box-shadow:inset 3px 0 0 var(--brand), 0 1px 2px rgba(17,17,19,.04); }
.matrix__row.is-read .matrix__n, .matrix__row.is-read .matrix__k svg{ color:var(--brand); }
.section--dark .matrix__row.is-read::before{ background:rgba(255,255,255,.05); }
.section--dark .matrix__row.is-read .matrix__n, .section--dark .matrix__row.is-read .matrix__k svg{ color:#FF7AAE; }
.perms__k svg{ transition:background-color .35s ease, color .35s ease; }
.perms__row.is-read .perms__k svg{ background:#FDEEF4; color:var(--brand); }

/* brands: each area's score, as the sample report printed it */
.matrix--cards .matrix__row:has(.meter){ grid-template-rows:auto 1fr auto; }
.meter{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:10px 10px; margin-top:6px; padding-top:18px; border-top:1px solid var(--line); }
.meter b{ font-size:32px; font-weight:600; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.meter em{ font-style:normal; font-size:13px; font-weight:600; color:var(--c); }
.meter i{ grid-column:1 / -1; position:relative; height:6px; border-radius:99px; background:var(--paper-2); overflow:hidden; }
.meter i::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--c); transform-origin:left; transform:scaleX(var(--v)); }
.meter--h{ --c:var(--high); } .meter--m{ --c:var(--med); } .meter--ok{ --c:var(--ok); }
.js-motion .reveal .meter i::after{ transform:scaleX(0); transition:transform 1.4s var(--ease) .35s; }
.js-motion .reveal.in .meter i::after{ transform:scaleX(var(--v)); }

/* brands: the finding assembles itself, and its evidence types out */
.js-motion .find::before{ transform:scaleY(0); transform-origin:top; transition:transform 1.1s var(--ease) .2s; }
.js-motion .find.in::before{ transform:none; }
.js-motion .find .find__def > div{ opacity:0; translate:0 12px; transition:opacity .6s ease, translate .8s var(--ease); }
.js-motion .find.in .find__def > div{ opacity:1; translate:none; }
.js-motion .find.in .find__def > div:nth-child(1){ transition-delay:.3s; }
.js-motion .find.in .find__def > div:nth-child(2){ transition-delay:.55s; }
.js-motion .find.in .find__def > div:nth-child(3){ transition-delay:.8s; }
.find__evidence .ch{ opacity:0; }
.find.in .find__evidence .ch{ animation:chIn .01s linear both; animation-delay:calc(var(--c) * 16ms + 1s); }
@keyframes chIn{ to{ opacity:1; } }

/* agencies: the three seats draw on the pool in turn */
.pool__key span:first-child{ display:flex; gap:12px; }
.pool__key i{ display:inline-flex; align-items:center; gap:6px; font-style:normal; }
.pool__key i::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sc); }
.pool__key i:nth-child(1), .seats i:nth-child(1){ --sc:#FF5C9A; }
.pool__key i:nth-child(2), .seats i:nth-child(2){ --sc:#FF9EC2; }
.pool__key i:nth-child(3), .seats i:nth-child(3){ --sc:#FFD3E3; }
.seats i:nth-child(1){ background:var(--sc); border-color:var(--sc); }
.seats i:nth-child(2), .seats i:nth-child(3){ background:var(--sc); border-color:var(--sc); color:var(--ink); }
.js-motion .reveal .seats i{ transition:background-color .5s ease, border-color .5s ease, color .5s ease, transform .5s var(--ease); }
.js-motion .reveal:not(.in) .seats i{ background:var(--dark-3); border-color:var(--dark-line-2); color:#fff; transform:scale(.9); }
.js-motion .reveal.in .seats i:nth-child(2){ transition-delay:.3s; } .js-motion .reveal.in .seats i:nth-child(3){ transition-delay:.6s; }

/* sample report: the three sources, each doing its own thing */
.src3 svg path{ transform-box:fill-box; transform-origin:center; }
.src3 article:nth-child(1)::after{ content:""; position:absolute; left:28px; top:28px; width:42px; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, #FF7AAE 30%, #FF7AAE 70%, transparent); opacity:0; }
.js-motion .src3 article.in:nth-child(1)::after{ animation:srcScan 2.6s ease-in-out .6s infinite; }
@keyframes srcScan{ 0%{ opacity:0; transform:translateY(4px); } 15%{ opacity:1; } 85%{ opacity:1; transform:translateY(36px); } 100%{ opacity:0; transform:translateY(36px); } }
.js-motion .src3 article.in:nth-child(2) .mer{ animation:mer 3.2s ease-in-out infinite; }
@keyframes mer{ 50%{ transform:scaleX(-1); } }
.js-motion .src3 article.in:nth-child(3) svg path{ animation:twinkle 2.8s ease-in-out infinite; }
@keyframes twinkle{ 50%{ transform:scale(.78) rotate(45deg); } }

/* support: what to include, ticked off before you hit send */
.contact__r li > i{ position:relative; }
.contact__r li > i::after{ content:""; position:absolute; left:50%; top:46%; width:6px; height:11px; margin:-6px 0 0 -3px; border:solid #fff; border-width:0 2px 2px 0;
  opacity:0; transform:rotate(45deg) scale(.4); }
.js-motion .contact.in .contact__r li > i{ animation:tickBox .45s var(--ease) both; animation-delay:var(--td); }
.js-motion .contact.in .contact__r li > i::after{ animation:tickMark .45s var(--ease) both; animation-delay:var(--td); }
.contact__r li:nth-child(1){ --td:.8s; } .contact__r li:nth-child(2){ --td:1.25s; } .contact__r li:nth-child(3){ --td:1.7s; } .contact__r li:nth-child(4){ --td:2.15s; }
@keyframes tickBox{ to{ background:var(--ok); color:transparent; } }
@keyframes tickMark{ to{ opacity:1; transform:rotate(45deg) scale(1); } }

@media (prefers-reduced-motion:reduce){
  .wl__cur, .bv__scan, .bv__box, .xv__cur, .wl__name::after, .src3 article::after{ display:none !important; }
  .bv__r::before{ animation:none !important; opacity:0; }
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .phero{ padding:56px 0 80px; }
  .phero__inner{ grid-template-columns:minmax(0,1fr); gap:48px; }
  .phero__vis{ width:100%; max-width:640px; margin-inline:auto; zoom:.9; }
  .bv{ max-width:600px; margin-inline:auto; }
  .fgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fcard--lead{ grid-column:1 / -1; grid-row:auto; }
  .cost{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .cost__big{ position:static; }
  .walkrow{ grid-template-columns:minmax(0,1fr); gap:44px; }
}
@media (max-width:980px){
  .matrix__row{ grid-template-columns:48px minmax(0,210px) minmax(0,1fr); }
  .matrix__tag{ grid-column:3; justify-self:start; }
  .flow{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px; }
  .flow::before{ display:none; }
  .matrix--cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .perm--wl{ grid-template-columns:minmax(0,1fr); }
  .src3{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  /* a phone gets the hero's message and a smaller rendering of its demo,
     not a desktop mockup two screens tall */
  .phero{ padding:30px 0 56px; }
  .phero__inner{ gap:36px; }
  .phero__title{ margin-top:18px; }
  .phero__sub{ margin-top:18px; font-size:17px; }
  .phero__cta{ margin-top:26px; }
  .phero__note{ margin-top:16px; }
  .phero__vis{ zoom:.86; }
  .phero--center .phero__ticks{ flex-direction:column; align-items:center; gap:8px; }
  .matrix__row, .cost .matrix__row{ grid-template-columns:40px minmax(0,1fr); }
  .matrix__row::before{ inset:0 -10px; }
  .matrix__v{ grid-column:2; }
  .matrix__tag{ grid-column:2; justify-self:start; }
  .matrix--cards, .matrix--two{ grid-template-columns:minmax(0,1fr); }
  .matrix--cards .matrix__row{ grid-template-columns:minmax(0,1fr); }
  .matrix--cards .matrix__v, .matrix--cards .matrix__tag{ grid-column:auto; }
  .perm--wl .perm__col--yes .rules{ grid-template-columns:minmax(0,1fr); }
  .find__def > div{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .rstage{ margin-top:-48px; }
  .rframe__tab{ display:none; }
  .rframe__doc{ height:76vh; min-height:480px; }
  .wl__panel{ width:auto; max-width:300px; margin:-12px 0 0 14px; }
  .bv{ grid-template-columns:minmax(0,1fr); }
  .bv__phone{ max-width:200px; justify-self:start; align-self:start; }
  .js-motion .bv__layer .bv__box:first-child{ display:none; }
  .bv .hchip--l{ left:auto; right:12px; bottom:-18px; }
  .bv__plan{ grid-area:1 / 1; margin:42% 0 0 18%; }
}
@media (max-width:520px){
  .phero__cta .btn, .cta-line .btn, .icard__side .btn{ flex:1 1 100%; }
}
/* The narrowest phones (320-380px) cannot hold the longest label on one line:
   "See exactly what each permission is for" ran 4px past the screen at 320
   and dragged the whole page sideways. In these rows a button may wrap; one
   that fits keeps its single line and its 46px height. */
@media (max-width:380px){
  .phero__cta .btn, .cta-line .btn, .icard__side .btn{ height:auto; min-height:46px; padding-block:12px; white-space:normal; line-height:1.25; text-align:center; }
}
@media (max-width:560px){
  /* a vertical timeline: the number beside the step, one rule joining them */
  .flow{ grid-template-columns:minmax(0,1fr); row-gap:30px; }
  .flow::before{ display:none; }
  .flow__s:not(:last-child)::after{ content:""; position:absolute; left:21.5px; top:50px; bottom:-24px; width:1px;
    background:linear-gradient(var(--ink), var(--ink)) top / 100% 0% no-repeat, var(--line-2); transition:background-size .8s var(--ease); }
  .flow__s.is-done::after{ background-size:100% 100%; }
  .flow__s{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:16px; row-gap:8px; padding:0; }
  .flow__n{ grid-row:span 3; width:44px; height:44px; font-size:13px; }
  .flow__s h3{ margin-top:9px; font-size:20px; }
  .flow__s p, .flow__tag{ grid-column:2; }
  .flow__tag{ justify-self:start; }
  .fgrid{ grid-template-columns:minmax(0,1fr); }
  .wl__body{ gap:18px; padding:20px 22px; }
  .wl__rows b{ display:none; }
  .wl__txt > span:not(.wl__chips){ display:none; }
  .phero__vis{ zoom:.8; }
  .wl__foot span{ display:none; }
  .bv__phone{ display:none; }
  .bv__plan{ margin:0; }
  .bv .hchip--l{ left:auto; right:12px; bottom:-18px; }
  .samplebar p span{ display:none; }
  .samplebar p{ font-size:13px; }
  .samplebar__in{ padding-left:16px !important; }
  .rframe__url{ display:none; }
  .rframe__bar{ justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce){
  .wl, .wl__sw i::after{ animation:none !important; }
  .wl__sw i:first-child::after{ opacity:1; }
}

/* ---------- small joins with home.css ---------- */
.phero.is-pointer .hero__grid::before{ opacity:1; }
/* the hero's pen mark draws itself a beat after the first frame, on the same
   `scripting` clock as the visual (see .phero__vis). home.css blanks every
   mark under .js-motion until its section is revealed, which in the hero
   would wipe an underline already on screen whenever home.js lands after the
   first paint, so here the mark is held drawn under .js-motion. */
.js-motion .phero .mk > svg path{ stroke-dashoffset:0; opacity:1; transition:none; }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .phero .mk > svg path{ animation:penDraw 1s cubic-bezier(.65,0,.25,1) 1s both; }
  .phero .mk > svg path + path{ animation-delay:1.45s; }
}
.section--dark .kick{ color:var(--dark-muted); }
.section--dark .kick b{ color:var(--dark-text); border-color:var(--dark-line-2); background:transparent; }
.section--dark .btn--light .arrow{ color:var(--ink); }
.samplebar{ transition:opacity .35s ease, translate .5s var(--ease); }
.samplebar.is-away{ opacity:0; translate:-50% 24px; pointer-events:none; }

/* ===== The long documents: /privacy/, /terms/, /refunds/ =====
   Same reading discipline as before (a ~736px measure, a hairline and a long
   run-up before every numbered section, an index beside the prose on a wide
   screen and a single tappable bar on a phone), now on white. */
.legal-hero{ position:relative; padding:72px 0 40px; text-align:center; overflow:clip; isolation:isolate;
  background:linear-gradient(180deg, var(--stage) 40%, var(--stage-end)); border-bottom:1px solid rgba(236,0,95,.1); }
.legal-hero__glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--stage-line) 1px, transparent 1px);
  background-size:72px 72px; background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 0%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 90% at 50% 0%, #000 20%, transparent 75%); }
.legal-hero .container{ position:relative; }
.legal-hero .eyebrow, .page-eyebrow{ display:inline-flex; align-items:center; gap:8px; font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:7px 10px; border:1px solid var(--line-2); border-radius:7px; background:var(--card); }
.legal-hero .eyebrow svg{ width:14px; height:14px; color:var(--brand); }
.legal-hero h1{ margin-top:22px; font-size:clamp(36px, 5vw, 64px); line-height:1.02; letter-spacing:-.045em; }
.legal-hero__meta{ margin-top:18px; font-size:14px; line-height:1.6; color:var(--muted); }
.legal{ max-width:736px; margin-inline:auto; padding:40px 24px 120px; counter-reset:law; }
.legal-card{ position:relative; overflow:hidden; margin-bottom:16px; padding:26px 28px 28px; border:1px solid #F3D3E1; border-radius:var(--r-lg);
  background:radial-gradient(120% 130% at 0% 0%, rgba(236,0,95,.06), transparent 60%), #fff; box-shadow:var(--sh-1); }
.legal-card b{ display:block; margin-bottom:12px; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#A1084A; }
.legal-card p{ margin:0; font-size:15.5px; line-height:1.78; color:var(--ink-2); }
.legal-card a, .legal a, .legal-note a, .prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(236,0,95,.4); text-underline-offset:3px; }
.legal-card a:hover, .legal a:hover, .legal-note a:hover, .prose a:hover{ text-decoration-color:var(--brand); }
.legal h2{ counter-increment:law; display:block; scroll-margin-top:110px; margin:72px 0 0; padding-top:34px; border-top:1px solid var(--line);
  font-size:clamp(21px, 2.2vw, 26px); line-height:1.25; letter-spacing:-.03em; font-weight:500; }
.legal h2::before{ content:counter(law, decimal-leading-zero); display:block; margin-bottom:12px; font:500 12px/1 var(--mono); letter-spacing:.06em; color:var(--brand); font-variant-numeric:tabular-nums; }
.legal h3{ margin:30px 0 10px; font-size:18px; font-weight:500; letter-spacing:-.02em; }
.legal h2 + p, .legal h2 + ul{ margin-top:20px; }
.legal p{ margin:0 0 18px; font-size:16px; line-height:1.8; color:var(--ink-3); }
.legal strong{ font-weight:600; color:var(--ink); }
.legal ul{ display:flex; flex-direction:column; gap:12px; margin:0 0 22px; }
.legal ul li{ position:relative; padding-left:24px; font-size:16px; line-height:1.75; color:var(--ink-3); }
.legal ul li::before{ content:""; position:absolute; left:6px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.legal p:last-child, .legal ul:last-child{ margin-bottom:0; }
.legal-note{ margin-top:56px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:var(--paper); font-size:13.5px; line-height:1.7; color:var(--muted); }
.legal-shell{ max-width:1132px; margin-inline:auto; padding-inline:24px; }
.legal-shell .legal{ max-width:none; margin-inline:0; padding-inline:0; }
.legal-toc{ margin:26px 0 4px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--sh-1); }
.legal-toc__title{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; cursor:pointer; list-style:none;
  -webkit-user-select:none; user-select:none; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color .18s ease; }
.legal-toc__title::-webkit-details-marker{ display:none; }
.legal-toc__title:hover{ color:var(--ink); }
.legal-toc__title::after{ content:""; flex:none; width:7px; height:7px; margin-right:3px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .22s ease; }
.legal-toc[open] .legal-toc__title::after{ transform:translateY(1px) rotate(-135deg); }
.legal-toc__list{ counter-reset:toc; display:flex; flex-direction:column; gap:1px; padding:0 8px 10px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.legal-toc__list a{ counter-increment:toc; display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:9px; font-size:13.5px; line-height:1.45;
  color:var(--ink-3); transition:color .18s ease, background-color .18s ease; }
.legal-toc__list a::before{ content:counter(toc, decimal-leading-zero); flex:none; font:500 10.5px/1 var(--mono); letter-spacing:.04em; color:var(--faint); font-variant-numeric:tabular-nums; }
.legal-toc__list a:hover{ color:var(--ink); background:var(--paper); }
.legal-toc__list a.is-active{ color:#A1084A; background:#FDEEF4; }
.legal-toc__list a.is-active::before{ color:var(--brand); }
@media (max-width:1023px){
  .legal-toc__list{ max-height:min(54vh, 380px); }
  .legal-toc__list a{ padding:10px; font-size:14px; }
}
@media (min-width:1024px){
  .legal-shell{ display:grid; grid-template-columns:252px minmax(0,1fr); gap:0 72px; align-items:start; }
  .legal-shell .legal{ max-width:736px; padding-top:40px; }
  .legal-toc{ position:sticky; top:100px; margin:40px 0 0; }
  .legal-toc__list{ max-height:calc(100vh - 200px); }
}
@media (max-width:520px){
  .legal-shell{ padding-inline:16px; }
}
@media (max-width:640px){
  .legal-hero{ padding-top:52px; }
  .legal{ padding:26px 20px 84px; }
  .legal-card{ padding:22px 20px 24px; }
  .legal h2{ margin-top:56px; padding-top:28px; }
  .legal p, .legal ul li{ font-size:15.5px; }
}

/* ===== /security/: each permission, and what it is (and is not) for ===== */
.perms{ border-top:1px solid var(--line-2); }
.perms__row{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:12px 48px; padding:30px 0; border-bottom:1px solid var(--line); }
.perms__k{ display:flex; flex-direction:column; gap:10px; }
.perms__k b{ display:flex; align-items:center; gap:12px; font-size:19px; font-weight:500; letter-spacing:-.02em; line-height:1.3; }
.perms__k svg{ flex:none; width:40px; height:40px; padding:9px; border-radius:11px; background:var(--paper); color:var(--ink); }
.perms__k code{ align-self:flex-start; font:500 11.5px/1 var(--mono); padding:6px 8px; border-radius:6px; color:var(--ink-3); background:var(--card); border:1px solid var(--line-2); }
.perms__row--wide .perms__k svg{ background:#FDEEF4; color:var(--brand); }
.perms__v p{ font-size:15.5px; line-height:1.7; color:var(--ink-3); }
.perms__v p + p{ margin-top:12px; }
.perms__v strong{ font-weight:600; color:var(--ink); }
.prose{ max-width:760px; }
.prose h3{ margin-top:40px; font-size:22px; letter-spacing:-.025em; }
.prose h3:first-child{ margin-top:0; }
.prose p{ margin-top:14px; font-size:16px; line-height:1.75; color:var(--ink-3); }
.facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.facts article{ display:flex; flex-direction:column; gap:12px; padding:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.facts h3{ font-size:20px; letter-spacing:-.025em; }
.facts p{ font-size:15px; line-height:1.65; color:var(--muted); }
.facts svg{ width:42px; height:42px; padding:10px; border-radius:12px; color:#fff; background:var(--ink); }
.facts article:nth-child(2) svg{ background:var(--low-dot); }
.facts article:nth-child(3) svg{ background:var(--brand); }

/* ===== /support/: one address, and what to put in the message ===== */
.contact{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0; overflow:hidden; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); }
.contact__l{ position:relative; display:flex; flex-direction:column; gap:16px; padding:40px; background:var(--dark); color:var(--dark-text); isolation:isolate; overflow:hidden; }
.contact__l::before{ content:""; position:absolute; inset:auto -30% -50% auto; width:110%; aspect-ratio:1; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(236,0,95,.3), transparent); }
.contact__l .kick{ color:var(--dark-muted); }
.contact__l h2{ font-size:clamp(28px, 3vw, 40px); line-height:1.05; letter-spacing:-.04em; color:#fff; }
.contact__l p{ font-size:16px; line-height:1.6; color:var(--dark-muted); }
.contact__l .btn{ align-self:flex-start; margin-top:auto; }
.contact__r{ display:flex; flex-direction:column; padding:18px 40px; }
.contact__r li{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 14px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact__r li:last-child{ border-bottom:0; }
.contact__r li > i{ grid-row:span 2; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--paper); font:500 12px/1 var(--mono); font-style:normal; color:var(--ink-3); }
.contact__r b{ font-size:16px; font-weight:500; letter-spacing:-.015em; }
.contact__r span{ font-size:14.5px; line-height:1.6; color:var(--muted); }
.contact__foot{ grid-column:1 / -1; padding:18px 40px; border-top:1px solid var(--line); background:var(--paper); font-size:14px; color:var(--muted); }

/* ===== /chrome-extension/: the toolbar, the icon, the popup ===== */
.xv{ position:relative; padding:0 0 30px; }
.xv__bar{ display:flex; align-items:center; gap:14px; height:58px; padding:0 18px; background:#F1F0EB; border:1px solid var(--line-2); border-radius:18px 18px 0 0; }
.xv__dots{ display:flex; gap:7px; }
.xv__dots i{ width:11px; height:11px; border-radius:50%; background:#DAD9D2; }
.xv__addr{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; height:36px; padding:0 14px; border-radius:99px; background:#fff; border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.xv__addr svg{ flex:none; width:13px; height:13px; color:var(--muted); }
.xv__tools{ display:flex; align-items:center; gap:10px; color:var(--muted); }
.xv__tools > svg{ width:22px; height:22px; }
.xv__ext{ position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(236,0,95,.1); }
.xv__ext img{ width:22px; height:22px; border-radius:6px; }
.xv__ext::after{ content:""; position:absolute; inset:-6px; border-radius:14px; border:2px solid var(--brand); opacity:0; animation:extPing 2.4s var(--ease) 1.2s infinite; }
@keyframes extPing{ 0%{ opacity:.9; transform:scale(.8); } 70%, 100%{ opacity:0; transform:scale(1.25); } }
.xv__page{ position:relative; height:330px; overflow:hidden; border:1px solid var(--line-2); border-top:0; border-radius:0 0 18px 18px; background:#FAF7F2; box-shadow:var(--sh-3); }
.xv__page img{ width:100%; height:auto; filter:saturate(.85); }
.xv__pop{ position:absolute; top:12px; right:14px; width:300px; background:#fff; border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  box-shadow:0 2px 4px rgba(17,17,19,.05), 0 30px 60px -24px rgba(17,17,19,.45); translate:calc(var(--ppx, 0) * -8px) calc(var(--ppy, 0) * -6px); }
.xv__pop-h{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14.5px; font-weight:600; letter-spacing:-.015em; }
.xv__pop-h img{ width:20px; height:20px; border-radius:5px; }
.xv__pop-b{ display:flex; flex-direction:column; gap:8px; padding:16px; }
.xv__pop-b .sp__detect{ font-size:14px; }
.xv__pop-b .sp__host{ font-size:12.5px; }
.xv__go{ margin-top:6px; display:grid; place-items:center; height:42px; border-radius:10px; background:var(--brand); color:#fff; font-size:14.5px; font-weight:500; }
.xv .hchip{ opacity:1; transform:none; }
.xv .hchip--l{ left:-18px; top:auto; bottom:6px; }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .xv__pop{ animation:popIn .8s var(--ease) 1s both; }
}
@keyframes popIn{ from{ opacity:0; transform:translateY(-10px) scale(.96); } }
.req{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.req li{ display:flex; flex-direction:column; gap:10px; padding:26px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.req svg{ width:30px; height:30px; padding:6px; border-radius:50%; }
.req .yes svg{ color:var(--ok); background:var(--ok-bg); }
.req .no svg{ color:var(--high); background:var(--high-bg); }
.req b{ font-size:17px; font-weight:500; letter-spacing:-.02em; line-height:1.3; }
.req span{ font-size:14.5px; line-height:1.6; color:var(--muted); }
.icard{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; padding:40px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--sh-2); }
.icard h2{ font-size:clamp(28px, 3vw, 40px); line-height:1.06; letter-spacing:-.04em; }
.icard p{ margin-top:14px; font-size:16px; line-height:1.7; color:var(--ink-3); }
.icard p strong{ font-weight:600; color:var(--ink); }
.icard__side{ display:flex; flex-direction:column; gap:12px; padding:26px; border-radius:var(--r-lg); background:var(--paper); }
.icard__side .phero__note{ margin-top:0; }

@media (max-width:980px){
  .req{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .facts{ grid-template-columns:minmax(0,1fr); }
  .contact{ grid-template-columns:minmax(0,1fr); }
  .icard{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:760px){
  .perms__row{ grid-template-columns:minmax(0,1fr); }
  .contact__l, .contact__r{ padding-inline:24px; }
  .contact__foot{ padding-inline:24px; }
  .icard{ padding:26px 22px; }
  .xv__pop{ width:250px; }
  .xv__page{ height:280px; }
  .xv .hchip--l{ left:8px; bottom:0; }
}
@media (max-width:380px){
  /* The install card nests a padded panel in a padded card, which left its
     button 190px on the narrowest phones: "View desktop listing" broke onto
     two lines. */
  .icard{ padding:22px 16px; }
  .icard__side{ padding:20px 16px; }
}
@media (max-width:560px){
  .req{ grid-template-columns:minmax(0,1fr); }
  .xv__addr{ display:none; }
  .xv__bar{ justify-content:space-between; }
}
a.ulink, .faq__a a, .icard p a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(236,0,95,.4); text-underline-offset:3px; }
a.ulink:hover, .faq__a a:hover, .icard p a:hover{ text-decoration-color:var(--brand); }
.contact__l .kick{ color:var(--dark-muted); }
/* the example panel's label can wrap on a phone */
.walkrow .wcalc__tag{ line-height:1.4; }