/* AI Rank Suite — airanksuite.com
   One stylesheet, no framework, no build step. Dark hero, light body, real
   product screenshots. Everything sized in clamp() so there is one layout
   rather than four breakpoints arguing with each other. */

/* The one webfont, served from this domain. Variable weights, so both
   files cover 400 to 700 without a request per weight. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(/assets/fonts/dmsans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(/assets/fonts/dmsans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:#6753ff; --brand-2:#8b7bff; --brand-h:#5240e0;
  --ink:#0e1116; --ink2:#4a5361; --ink3:#77808d;
  --bg:#fff; --alt:#f0f0fa; --line:#e2e2ef;
  --dark:#0b0e14; --dark2:#141926; --dark-ink:#e8ecf3; --dark-ink2:#98a3b5;
  --good:#12a150; --warn:#d08700; --bad:#e0393f;
  --r:18px; --r-sm:10px;
  --wrap:1160px;
  --shadow:0 1px 2px rgba(14,17,22,.04),0 8px 24px rgba(14,17,22,.06);
  --shadow-brand:0 12px 32px -12px rgba(60,33,171,.14),0 2px 8px -4px rgba(18,24,38,.08);
  --shadow-lg:0 24px 60px -12px rgba(14,17,22,.28),0 8px 20px -8px rgba(14,17,22,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16.5px/1.65 "DM Sans",-apple-system,system-ui,Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-h)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:clamp(72px,10vw,128px) 0}
.sec.alt{background:var(--alt)}
.sec.dark{background:var(--dark);color:var(--dark-ink)}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .lede,.sec.dark p{color:var(--dark-ink2)}

h1,h2,h3{margin:0 0 .45em;line-height:1.12;font-weight:680;letter-spacing:-.025em}
h1{font-size:clamp(36px,5.6vw,62px);font-weight:760;letter-spacing:-.035em}
h2{font-size:clamp(27px,3.6vw,42px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.3}
p{margin:0 0 1.05em}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink2);max-width:60ch}
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:end;
  margin-bottom:clamp(36px,5vw,60px)}
.intro h2{margin-bottom:0}
.intro .lede{margin:0}
@media(max-width:860px){.intro{grid-template-columns:1fr;align-items:start;gap:18px}}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px}
.sec.dark .eyebrow{color:var(--brand-2)}
.tiny{font-size:12.5px;line-height:1.55;color:var(--ink3)}
.small{font-size:14px}
.center{text-align:center}
.mx{margin-left:auto;margin-right:auto}

/* ---------- header ------------------------------------------------------ */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.top.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
.top .wrap{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:720;font-size:17.5px;color:var(--ink);
  letter-spacing:-.02em;white-space:nowrap;flex:none}
.brand .mark{width:30px;height:30px;border-radius:8px;flex:none;display:block}
.navlinks{display:flex;gap:26px;margin-left:auto;font-size:15px}
.navlinks a{color:var(--ink2);font-weight:500}
.navlinks a:hover{color:var(--ink)}
@media(max-width:1100px){.navlinks{display:none}}

/* Solutions menu: fourteen industries is too many for a nav bar, so they
   live one hover away. It opens on hover and on keyboard focus, and the
   label itself is a link, which is what a touch device follows. */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop-btn{display:inline-flex;align-items:center;gap:5px}
.navdrop-btn span{font-size:10px;opacity:.7;transition:transform .15s ease}
.navdrop:hover .navdrop-btn span{transform:rotate(180deg)}
.navdrop-menu{position:absolute;top:100%;left:50%;z-index:60;width:480px;
  margin-top:10px;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:18px 18px 14px;
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease}
/* An invisible bridge over the gap, so the menu survives the trip to it. */
.navdrop-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.navdrop-h{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
.navdrop-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.navdrop-cols a{display:block;padding:7px 10px;border-radius:9px;font-size:14px;
  color:var(--ink2);font-weight:500}
.navdrop-cols a:hover{background:var(--alt);color:var(--brand)}
.navdrop-foot{display:flex;gap:16px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line)}
.navdrop-foot a{font-size:13.5px;font-weight:600;color:var(--brand)}
/* At phone width the bar held a wordmark, a language switch and two buttons,
   and the last one hung 20px off the right edge — which is what makes a page
   scroll sideways on a phone. The secondary button goes; the one that matters
   stays, and the language switch stays because the site is sold in two. */
.lbl-narrow{display:none}
@media(max-width:620px){
	.top .wrap{gap:10px;height:60px}
	.lbl-wide{display:none}
	.lbl-narrow{display:inline}
	.top .btn:not(.btn-primary){display:none}
	.brand{font-size:16px}
	.brand .mark{width:26px;height:26px;font-size:13px}
	.btn{padding:0 16px;font-size:14.5px;min-height:42px}
	.langsw a{padding:5px 9px}
}
@media(max-width:400px){
	.top .wrap{gap:8px;padding:0 14px}
	.brand{font-size:15px;gap:7px}
	.btn{padding:0 13px;font-size:13.5px}
	.langsw{font-size:11.5px}
	.langsw a{padding:5px 7px}
}
.langsw{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  font-size:12.5px;font-weight:700;background:#fff}
.langsw a{padding:5px 11px;color:var(--ink3);line-height:1.55}
.langsw a:hover{color:var(--ink)}
.langsw a[aria-current]{background:var(--ink);color:#fff}

/* ---------- buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:15px;font-weight:620;cursor:pointer;font-family:inherit;
  white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s,border-color .16s}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink);border-color:var(--brand-2)}
.btn-primary:hover{background:var(--brand-h);border-color:transparent}
.btn-primary{background:var(--brand);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px -3px rgba(103,83,255,.5)}
.btn-primary:hover{color:#fff;box-shadow:0 10px 26px -6px rgba(103,83,255,.55)}
.btn-lg{min-height:54px;padding:0 28px;font-size:16.5px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.22);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;background:var(--dark);color:var(--dark-ink);overflow:hidden;
  padding:clamp(64px,8vw,104px) 0 clamp(220px,22vw,300px)}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(60% 55% at 22% 8%,rgba(103,83,255,.34),transparent 62%),
             radial-gradient(45% 45% at 82% 0%,rgba(139,123,255,.28),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%)}
.hero .wrap{position:relative;z-index:2;text-align:center}
/* One centred column for the copy. Each part gets its own comfortable
   measure and is centred by auto margins, so the pill, the headline, the
   lede, the buttons, the price line and the trust row all share one axis. */
.hero h1,.hero .lede,.hero .hero-price{margin-left:auto;margin-right:auto}
/* The headline gets room to breathe: 17ch broke it over three short lines
   and made the hero look narrower than the page it sits on. */
.hero h1{color:#fff;max-width:20ch;margin-bottom:22px}
.hero .lede{color:var(--dark-ink2);max-width:62ch;font-size:clamp(17px,1.7vw,20.5px)}
.hero .grad{background:linear-gradient(100deg,#7db4ff,#b49bff 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 15px;font-size:13px;
  font-weight:600;color:var(--dark-ink2);margin-bottom:26px}
.dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;flex:none;box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.trust{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:30px;
  font-size:13.5px;color:var(--dark-ink2)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{flex:none;color:#3ddc84}

/* the screenshot that overlaps the hero and the section under it */
.shotwrap{position:relative;z-index:3;margin-top:clamp(-260px,-20vw,-190px);margin-bottom:8px}
.browser{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f2f4f7;border-bottom:1px solid var(--line)}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#dfe3e9;display:block}
.browser .url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:4px 12px;font-size:12px;color:var(--ink3);max-width:340px;overflow:hidden;white-space:nowrap}
/* height:auto is not optional once the tag carries width/height: without
   it the attribute height wins and the screenshot is squashed. */
.browser img{width:100%;height:auto;display:block}

/* The hero screenshot floats a little, and three small fact cards float
   around it. The cards restate facts from the page itself (the GEO score
   gauge, llms.txt + Google audit, 31 AI crawlers) — pure decoration, so
   they are aria-hidden in the markup and gone below 860px. */
@keyframes float-shot{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes float-badge{from{translate:0 0}to{translate:0 -9px}}
.shotwrap .browser{animation:float-shot 6s ease-in-out infinite alternate;
  box-shadow:var(--shadow-lg),0 40px 90px -18px rgba(103,83,255,.38)}
.hero-badges{position:absolute;inset:0;z-index:4;pointer-events:none}
.fbadge{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:640;
  color:var(--ink);white-space:nowrap;letter-spacing:-.01em;
  box-shadow:0 14px 34px -10px rgba(14,17,22,.28),0 3px 10px rgba(103,83,255,.14)}
.fb-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 3px rgba(18,161,80,.16)}
.fb-tick{color:var(--good);font-weight:700}
.fb1{top:-16px;left:4px;transform:rotate(-2deg);animation:float-badge 5.2s .2s ease-in-out infinite alternate}
.fb2{top:-14px;right:8px;transform:rotate(2deg);animation:float-badge 6.6s 1s ease-in-out infinite alternate}
.fb3{bottom:13%;right:2px;transform:rotate(-2deg);animation:float-badge 5.8s .6s ease-in-out infinite alternate}
@media(max-width:860px){.hero-badges{display:none}}

/* ---------- logos / stats ----------------------------------------------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:800px){.statrow{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.stat b{display:block;font-size:34px;font-weight:740;letter-spacing:-.03em;line-height:1;margin-bottom:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:13.5px;color:var(--ink2);line-height:1.45;display:block}

/* ---------- feature rows ------------------------------------------------ */
.row{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,70px);align-items:center}
.row+.row{margin-top:clamp(56px,7vw,96px)}
.row.flip>div:first-child{order:2}
@media(max-width:900px){.row,.row.flip{grid-template-columns:1fr}.row.flip>div:first-child{order:0}}
.row h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;margin-bottom:14px}
.row p{color:var(--ink2);font-size:16.5px}
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 56px -20px rgba(14,17,22,.18)}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);background:rgba(103,83,255,.09);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.tag.pro{color:#8b7bff;background:rgba(139,123,255,.1)}

/* ---------- cards ------------------------------------------------------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:940px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -16px rgba(103,83,255,.25);border-color:rgba(103,83,255,.35)}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--ink2);font-size:15px}
.ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;background:linear-gradient(135deg,rgba(103,83,255,.12),rgba(139,123,255,.12));color:var(--brand)}
.sec.dark .card{background:var(--dark2);border-color:rgba(255,255,255,.08)}
.sec.dark .card p{color:var(--dark-ink2)}

/* ---------- the money comparison ---------------------------------------- */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;max-width:940px}
@media(max-width:800px){.vs{grid-template-columns:1fr}}
.vs .mid{display:flex;align-items:center;justify-content:center;font-weight:750;color:var(--ink3);font-size:15px}
.pricecard{border-radius:var(--r);padding:28px;border:1px solid var(--line);background:#fff}
.pricecard.win{border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 18px 44px -14px rgba(103,83,255,.55)}
.pricecard.win h3,.pricecard.win .amt{color:#fff}
.pricecard .amt{font-size:46px;font-weight:760;letter-spacing:-.035em;line-height:1;margin:10px 0 4px}
.pricecard ul{list-style:none;margin:18px 0 0;padding:0;font-size:15px}
.pricecard li{padding:6px 0 6px 26px;position:relative;color:var(--ink2)}
.pricecard.win li{color:rgba(255,255,255,.94)}
.pricecard li::before{content:"\2717";position:absolute;left:0;top:6px;color:var(--bad);font-weight:700}
.pricecard.win li::before{content:"\2713";color:#9ff5c4}
.pricecard .sub{font-size:13.5px;color:var(--ink3);margin:0}
.pricecard.win .sub{color:rgba(255,255,255,.8)}

/* ---------- table ------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:900px;font-size:14.5px}
th,td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:#fbfcfe;font-size:13px;font-weight:700;white-space:nowrap;color:var(--ink2)}
thead th.us{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:14px}
tbody th{font-weight:600;width:210px;color:var(--ink)}
td.us{background:rgba(103,83,255,.05);font-weight:600}
tr:last-child td,tr:last-child th{border-bottom:0}
.yes{color:var(--good);font-weight:700}
.no{color:var(--bad);font-weight:700}
.mid2{color:var(--warn);font-weight:700}

/* The #compare table is where the sell happens — SEOPress-style, scoped to
   .cmp so the plain admin table stays plain. The AI Rank Suite column reads
   as a lifted card inside the table: pill header, tinted lane, 2px purple
   frame, a touch wider. Values are centred, ticks are chips, rows are roomy
   with a whisper of zebra. Row labels stay put while the table scrolls
   sideways on small screens (with a fade as the scroll hint); on desktop
   the wrapper lets overflow go so the header row can pin below the site
   header. */
.cmp-outer{position:relative}
table.cmp{border-collapse:separate;border-spacing:0;min-width:940px}
.cmp th,.cmp td{padding:19px 18px;vertical-align:middle}
.cmp td{text-align:center}
.cmp thead th{text-align:center;font-size:14px;color:var(--ink);padding-top:16px;padding-bottom:16px}
.cmp tbody tr:nth-child(even) th,.cmp tbody tr:nth-child(even) td:not(.us){background:var(--alt)}
.cmp tbody tr:first-child td{font-weight:700;font-size:15.5px}
.cmp thead th:first-child{text-align:left;border-top-left-radius:calc(var(--r) - 1px)}
.cmp thead th:last-child{border-top-right-radius:calc(var(--r) - 1px)}
.cmp tr:last-child th{border-bottom-left-radius:calc(var(--r) - 1px)}
.cmp tr:last-child td:last-child{border-bottom-right-radius:calc(var(--r) - 1px)}
.cmp thead th:first-child,.cmp tbody th{position:sticky;left:0;z-index:3}
.cmp tbody th{background:#fff}
.cmp thead th:first-child{z-index:4;background:#fbfcfe}
/* the winner column: a card inside the table */
.cmp thead th.us{background:rgba(103,83,255,.07);color:var(--ink);
  border:2px solid var(--brand);border-bottom:0;border-radius:12px 12px 0 0}
.cmp thead th.us,.cmp td.us{min-width:184px}
.cmp .us-pill{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 8px 18px -6px rgba(103,83,255,.55)}
.cmp td.us{background:rgba(103,83,255,.07);font-weight:600;
  border-left:2px solid var(--brand);border-right:2px solid var(--brand);
  border-bottom-color:rgba(103,83,255,.16)}
.cmp tr:last-child td.us{border-bottom:2px solid var(--brand);border-radius:0 0 12px 12px}
/* ticks and crosses as round chips — green leads, grey concedes */
.cmp .yes,.cmp .no,.cmp .mid2{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;line-height:1;vertical-align:middle}
.cmp .yes{background:var(--good);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 5px 12px -3px rgba(18,161,80,.45)}
.cmp .no{background:var(--alt);color:var(--ink3);font-size:13px;font-weight:600}
.cmp tbody tr:nth-child(even) .no{background:#fff}
.cmp .mid2{background:rgba(208,135,0,.14);color:var(--warn);font-size:9px}
.cmp .good-txt{color:var(--good);font-weight:700}
.cmp .bad-txt{color:var(--ink3);font-weight:600}
.cmp-outer::after{content:"";position:absolute;top:1px;bottom:1px;right:1px;width:56px;pointer-events:none;
  border-radius:0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 82%)}
@media(max-width:1009px){
  .cmp tbody th,.cmp thead th:first-child{box-shadow:8px 0 16px -8px rgba(14,17,22,.12)}
}
@media(max-width:700px){
  .cmp tbody th{width:148px;min-width:148px;font-size:13.5px}
  .cmp th,.cmp td{padding:15px 13px}
}
@media(min-width:1010px){
  .cmp-outer::after{display:none}
  .cmp-outer .tablewrap{overflow:visible}
  .cmp thead th{position:sticky;top:67px;z-index:5}
  .cmp thead th:first-child{z-index:6}
}

/* ---------- lists ------------------------------------------------------- */
.checks{list-style:none;margin:16px 0 0;padding:0;font-size:15px;color:var(--ink2)}
.checks li{padding:7px 0 7px 28px;position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;
  border-left:2.2px solid var(--good);border-bottom:2.2px solid var(--good);transform:rotate(-45deg)}
.sec.dark .checks li{color:var(--dark-ink2)}

/* ---------- pricing ----------------------------------------------------- */
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column}
.plan.best{border-color:transparent;box-shadow:0 0 0 2px var(--brand),var(--shadow);position:relative}
.plan .amt{font-size:42px;font-weight:760;letter-spacing:-.035em;margin:8px 0 2px;line-height:1}
.plan .btn{margin-top:auto;width:100%}
.ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 13px;border-radius:999px}

/* ---------- forms ------------------------------------------------------- */
.gate{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px;max-width:520px;margin:0 auto;
  box-shadow:var(--shadow)}
label{display:block;font-size:13.5px;font-weight:640;margin:0 0 7px}
input[type=email],input[type=text],input[type=password]{width:100%;min-height:48px;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:15.5px;background:#fbfcfe;color:var(--ink)}
input:focus{outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(103,83,255,.16)}
.field+.field{margin-top:16px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink2);font-weight:400;margin:18px 0 0}
.check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--brand)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin-top:16px;padding:13px 16px;border-radius:var(--r-sm);font-size:14.5px}
.msg.ok{background:#e9f9ef;color:#0b6b38;border:1px solid #a9e5c2}
.msg.err{background:#fdeced;color:#a4262c;border:1px solid #f3bcbf}

/* ---------- faq --------------------------------------------------------- */
details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
details[open]{box-shadow:var(--shadow)}
summary{padding:19px 22px;font-weight:640;cursor:pointer;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--ink3);
  border-bottom:2px solid var(--ink3);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
details[open] summary::after{transform:rotate(225deg);margin-top:2px}
details .body{padding:0 22px 20px;color:var(--ink2);font-size:15.5px;max-width:76ch}

/* ---------- cta band ---------------------------------------------------- */
.band{position:relative;overflow:hidden;border-radius:22px;padding:clamp(40px,6vw,68px);
  background:linear-gradient(135deg,#132a4d,#221a45);color:#fff;text-align:center}
.band::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;
  background:radial-gradient(50% 60% at 50% 0%,rgba(139,123,255,.35),transparent 70%)}
.band>*{position:relative}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.78)}

/* ---------- footer ------------------------------------------------------ */
footer{background:var(--dark);color:var(--dark-ink2);padding:60px 0 40px;font-size:14.5px}
footer a{color:#a9c6ee}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;margin-bottom:38px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
.fbar{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:center;
  align-items:center;text-align:center;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:#6f7b8d}
footer .brand{color:#fff}

/* ---------- scroll reveal ---------------------------------------------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
	.btn-buy{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
  .shotwrap .browser,.fbadge{animation:none}
  html{scroll-behavior:auto}
}
[hidden]{display:none!important}

/* Launch promo band above the header. */
/* ---------- launch offer bar -------------------------------------------- */
.promo{position:relative;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  font-size:13.5px;font-weight:500;overflow:hidden}
.promo-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  width:100%;margin:0;padding:9px 16px;border:0;background:none;cursor:pointer;
  color:#fff;font:inherit;font-family:inherit;text-align:center}
@media(hover:hover){.promo-bar:hover .promo-line{text-decoration:underline}}
.promo-bar:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.promo-tag{background:rgba(255,255,255,.2);border-radius:999px;padding:2px 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.promo-left{background:rgba(0,0,0,.2);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
.promo-caret{font-size:11px;transition:transform .2s ease}
.promo-bar[aria-expanded="true"] .promo-caret{transform:rotate(180deg)}
.promo-panel{background:#1b1440;color:#e8e6ff;border-top:1px solid rgba(255,255,255,.14);
  animation:promo-open .25s ease both}
@keyframes promo-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.promo-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:center;
  padding-top:22px;padding-bottom:22px}
.promo-h{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#b9b0ff}
.promo-feats ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.promo-feats li{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.45;
  border-left:2px solid rgba(255,255,255,.18);padding-left:12px}
.promo-feats b{font-size:14px;color:#fff}
.promo-feats span{color:#b6b1d8}
.promo-buy{text-align:center;border-left:1px solid rgba(255,255,255,.14);padding-left:28px}
.promo-price{margin:0;font-size:22px;color:#fff}
.promo-price b{font-weight:700}
.promo-was{text-decoration:line-through;opacity:.55;font-size:16px;margin-right:6px}
.promo-note{margin:6px 0 14px;font-size:12.5px;color:#b6b1d8;line-height:1.5}
.promo-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-quiet{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-quiet:hover{background:rgba(255,255,255,.18);color:#fff}
/* On a phone the full sentence ran to three lines and pushed the page
   down before it had said anything; the short version carries the code. */
.promo-short{display:none}
@media(max-width:720px){
  .promo-line{display:none}
  .promo-short{display:inline}
  .promo-bar{gap:8px;padding:8px 14px;font-size:13px}
}
@media(max-width:820px){
  .promo-inner{grid-template-columns:1fr;gap:20px}
  .promo-buy{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0;padding-top:18px}
  .promo-feats ul{grid-template-columns:1fr}
  .promo-tag{display:none}
}
/* Confetti: dots the browser animates and we throw away when they land. */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:0;width:8px;height:12px;border-radius:2px;opacity:0}

/* Partner section: three equal offers. */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:34px}

/* Launch offer modal. */
#offer{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
#offer[hidden]{display:none}
.offer-back{position:absolute;inset:0;background:rgba(11,14,20,.62);backdrop-filter:blur(3px)}
.offer-card{position:relative;background:#fff;border-radius:16px;max-width:440px;width:100%;
  padding:34px 30px 26px;box-shadow:var(--shadow-lg)}
.offer-card mark{background:rgba(103,83,255,.14);color:var(--brand);padding:0 5px;border-radius:5px}
.offer-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;line-height:1;
  color:var(--ink3);cursor:pointer;padding:6px}
.offer-x:hover{color:var(--ink)}
.offer-cd{display:flex;gap:10px;justify-content:center}
.offer-cd div{background:var(--alt);border:1px solid var(--line);border-radius:9px;min-width:64px;
  padding:10px 6px;text-align:center}
.offer-cd b{display:block;font-size:24px}
.offer-cd span{font-size:11.5px;color:var(--ink3)}
@media (max-width:420px){.offer-cd div{min-width:56px}.offer-card{padding:28px 20px 22px}}

/* Five-column footer, SEOPress-scale. */
.fgrid-5{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr 1fr;gap:32px}
@media(max-width:1000px){.fgrid-5{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.fgrid-5{grid-template-columns:1fr 1fr}}

/* Mobile navigation. Below 900px the desktop link row is hidden, so the
   whole site has to be reachable from this panel — including the pages that
   never fit in the top bar. */
.navtoggle{display:none;margin-left:auto;width:42px;height:42px;padding:0;border:1px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;flex:none}
.navtoggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilemenu{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 24px 20px}
.mobilemenu[hidden]{display:none}
.mobilemenu nav{display:flex;flex-direction:column}
.mobilemenu nav a{padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500;font-size:16px}
.mobilemenu nav a:last-child{border-bottom:0}
.mobilemenu-cta{display:flex;gap:10px;margin-top:16px}
.mobilemenu-cta .btn{flex:1;justify-content:center}
@media(max-width:1100px){
	.navtoggle{display:flex}
	.mobilemenu:not([hidden]){display:block}
}

/* Below 620px the bar carries brand + primary CTA + toggle and nothing else:
   with the language switch in the row the header was 43px wider than the
   phone. It moves into the panel, where it has room to be a real control. */
.langsw-mobile{display:none}
@media(max-width:620px){
	.top > .wrap > .langsw{display:none}
	.langsw-mobile{display:inline-flex;margin-top:16px}
}

/* The same floating badges as the hero, over a module page's screenshot.
   Two facts, one per corner; hidden where the screenshot gets too small for
   anything to sit on top of it without covering the thing it points at. */
.shotframe{position:relative}
.shot-badges{position:absolute;inset:0;pointer-events:none}
.shot-badges .fbadge{position:absolute;white-space:nowrap}
.shot-badges .fb-a{top:-14px;left:22px;transform:rotate(-2deg)}
.shot-badges .fb-b{bottom:-14px;right:22px;transform:rotate(2deg)}
@media(max-width:860px){.shot-badges{display:none}}

/* The price board: every vendor's published list price in one row, ours
   marked. Numbers only — the judgement belongs in the table below it. */
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px}
.boardcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center}
.boardcard.win{border:2px solid var(--brand);background:rgba(103,83,255,.05)}
.boardname{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:8px;min-height:2.4em;
  display:flex;align-items:center;justify-content:center;line-height:1.25}
.boardcard.win .boardname{color:var(--brand)}
.boardamt{font-size:26px;font-weight:750;letter-spacing:-.02em;line-height:1.1}
.boardsub{font-size:12px;color:var(--ink3);margin-top:7px;line-height:1.4;min-height:3.2em}
@media(max-width:1000px){.board{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.board{grid-template-columns:repeat(2,1fr)}.boardamt{font-size:22px}}

/* The guarantee, stated the same way on every page that closes with a CTA. */
.guarantee{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:7px 16px;border-radius:999px;background:rgba(18,161,80,.12);color:var(--good)}
.sec.dark .guarantee{background:rgba(18,161,80,.18);color:#5fd48f}
.trustrow{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  padding:0;margin:30px 0 0;font-size:13.5px;color:var(--ink3)}
.sec.dark .trustrow{color:var(--dark-ink2)}
.trustrow li::before{content:"✓";color:var(--good);font-weight:700;margin-right:7px}

/* The founder block: a monogram instead of a stock photo, because a wrong
   photo says less than no photo. */
.founder{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
  background:var(--alt);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.founder-mark{width:76px;height:76px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:24px;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
@media(max-width:620px){.founder{grid-template-columns:1fr;gap:18px;padding:24px}}

/* Credibility strip under the hero: four facts and a way into the story.
   A link, not a banner — the person behind the plugin is the argument. */
.creds{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0;align-items:center;
  margin:-28px auto 0;position:relative;z-index:5;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:18px 8px;color:var(--ink)}
.creds:hover{color:var(--ink);border-color:rgba(103,83,255,.4);box-shadow:0 18px 40px -18px rgba(103,83,255,.3)}
.creds span{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
  padding:0 14px;font-size:12.5px;color:var(--ink3);line-height:1.35}
.creds span + span{border-left:1px solid var(--line)}
.creds b{font-size:17px;color:var(--ink);letter-spacing:-.01em}
.creds-more{color:var(--brand)!important;font-weight:600;font-size:13.5px!important;white-space:nowrap}
@media(max-width:900px){
	.creds{grid-template-columns:1fr 1fr;gap:16px 0;margin-top:20px;padding:20px 8px}
	.creds span:nth-child(odd) + span{border-left:1px solid var(--line)}
	.creds span:nth-child(3){border-left:0}
	.creds-more{grid-column:1 / -1;border-left:0!important;padding-top:6px}
}

/* ---------- keyboard focus ---------------------------------------------- */
/* The site had no visible focus ring anywhere: tabbing through the header,
   the pricing cards or the comparison table left you guessing where you
   were. One ring for every control, drawn outside the box so nothing
   reflows, and on :focus-visible only so a mouse click stays quiet. No
   radius is set — browsers already follow each element's own corners, and
   forcing one here would deform pills and cards while they are focused. */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
.card[href]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
/* Two containers clip their overflow (details, the language pill group),
   so their rings have to be drawn on the inside or they get cut off. */
summary:focus-visible{outline-offset:-3px}
.langsw a:focus-visible{outline-offset:-2px}
/* Inline text links have no shape of their own — round the ring a little. */
.prose a:focus-visible,.navlinks a:focus-visible,footer a:focus-visible,
.mobilemenu a:focus-visible{border-radius:var(--r-sm)}
/* On the dark surfaces --brand only reaches 3.9:1; --brand-2 reaches 5.9:1,
   and on the purple promo bar only white separates from the gradient. */
.hero :focus-visible,.sec.dark :focus-visible,.band :focus-visible,
footer :focus-visible,.sec.dark .card[href]:focus-visible{outline-color:var(--brand-2)}
.promo :focus-visible{outline-color:var(--bg)}

/* ---------- long-form typography ---------------------------------------- */
/* Blog, help, story and why set their own size inline; what was missing is
   the rhythm. A measure short enough to track back to the next line, an h2
   that opens a section instead of floating inside one, and — the real bug —
   an h2 that was rendering larger than the article's own h1. Links have to
   look like links inside a paragraph, which the global a{text-decoration:
   none} took away. */
.prose{max-width:68ch}
.prose>:first-child{margin-top:0}
.prose h2{margin-top:1.6em;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.prose h3{margin-top:1.5em;margin-bottom:.4em;font-size:1.1em;letter-spacing:-.012em}
.prose p{margin:0 0 1.15em}
.prose a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(103,83,255,.45);
  transition:color .15s ease,text-decoration-color .15s ease}
.prose a:not(.btn):hover{color:var(--brand-h);text-decoration-color:var(--brand-h)}
.prose strong{color:var(--ink);font-weight:680}
.prose em{font-style:italic;font-weight:inherit;color:inherit}
.prose code{background:var(--alt);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.1em .4em;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.4em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--ink3)}

/* ---------- section rhythm ---------------------------------------------- */
/* A flat colour block butting against a white one gives every alt section a
   hard edge. A hairline that fades out towards both margins turns that edge
   into a seam you feel rather than see. Pseudo-elements, so the existing
   background stays exactly as it is; two alt sections in a row simply share
   one seam. */
.sec.alt{position:relative}
.sec.alt::before,.sec.alt::after{content:"";position:absolute;left:0;right:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(226,226,239,0),var(--line) 22%,var(--line) 78%,rgba(226,226,239,0))}
.sec.alt::before{top:0}
.sec.alt::after{bottom:0}

/* ---------- micro-states ------------------------------------------------ */
/* Hover already lifts cards and buttons, so a press has to give — without a
   down state a click on a card reads as nothing happening. The primary
   button gains a second, wider and much fainter purple bloom underneath:
   lit, not neon, and it disappears while the button is pressed. */
.btn-primary{box-shadow:0 4px 14px -3px rgba(103,83,255,.5),
  0 10px 34px -12px rgba(103,83,255,.42)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:.07s}
.card:active{transform:translateY(-1px);transition-duration:.08s}
.creds:active{transform:translateY(1px)}

/* ---------- dark text contrast ------------------------------------------ */
/* Checked rather than changed: --dark-ink2 (#98a3b5) on --dark (#0b0e14) is
   7.58:1 and on the --dark2 cards 6.89:1 — both well past AA, so the colour
   stays as it is. */

/* ---------- screenshots -------------------------------------------------- */
/* Product shots are exported at 2x and drawn at half size, so smooth
   downscaling is what we want (crisp-edges would show stair-stepping). The
   1px white rim sits just inside the frame: most shots have a white toolbar,
   and without it the top edge dissolves into a light section. */
.shot{image-rendering:auto;outline:1px solid rgba(255,255,255,.55);outline-offset:-2px}

/* ---------- selection + scrollbar ---------------------------------------- */
/* Selection in the brand tint instead of the OS blue, one variant per
   surface. The scrollbar rule is scoped to html on purpose: the comparison
   table scrolls sideways and needs to keep its native bar as the hint that
   there is more to the right. Styling a WebKit scrollbar also switches macOS
   out of overlay mode, so the track stays transparent and only the thumb is
   drawn — a rail of colour down every page would be louder than the bar. */
::selection{background:rgba(103,83,255,.2);color:var(--ink)}
.hero ::selection,.sec.dark ::selection,.band ::selection,footer ::selection{
  background:rgba(139,123,255,.38);color:var(--bg)}
/* Everything added above that moves has to answer to the same switch as the
   rest of the page. */
@media(prefers-reduced-motion:reduce){
  .btn:active,.card:active,.creds:active{transform:none}
  .prose a:not(.btn){transition:none}
}

/* Two buttons side by side that may fall onto two lines on a phone. The
   pairs used to be joined by   and pushed the second button off-screen. */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.card .btnrow,.guide-cta .btnrow,.btnrow.left{justify-content:flex-start}
.sec .btnrow{margin:26px 0 0}
.wrap>.btnrow:first-child{margin-top:0}
@media(max-width:480px){.btnrow .btn{width:100%;justify-content:center}}

/* Screenshots carry their intrinsic size in the tag now (so nothing jumps
   while they load) — CSS keeps them fluid inside their column. */
.shot{width:100%;height:auto}
.shot-doc{margin-top:26px}

/* Photographs in the story. A real face does more for trust than any badge,
   so it gets the same care as a product screenshot: fixed ratio, soft frame. */
.storyshot{margin:34px auto;padding:0;max-width:380px}
.storyshot img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 24px 56px -22px rgba(14,17,22,.28)}
.storyshot figcaption{font-size:12.5px;text-align:center;color:var(--ink3);margin-top:10px;line-height:1.5}
.storyshot-lead{margin:-34px auto 0;max-width:300px;position:relative;z-index:4}
.storyshot-small{max-width:260px}
.founder-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid #fff;box-shadow:0 10px 24px -10px rgba(14,17,22,.4)}
@media(max-width:620px){.founder-photo{width:72px;height:72px}.storyshot-lead{margin-top:-18px;max-width:240px}.storyshot{max-width:280px}}

/* The long guide: a table of contents that stays readable, and product
   breaks that look like an offer rather than an interruption. */
.guide-toc{background:var(--alt);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px}
.guide-toc h2{font-size:17px;margin:0 0 12px}
.guide-toc ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15.5px}
.guide-toc a{color:var(--ink2)}
.guide-toc a:hover{color:var(--brand)}
.guide-cta{background:linear-gradient(180deg,rgba(103,83,255,.07),rgba(103,83,255,.03));
  border:1px solid rgba(103,83,255,.25);border-radius:var(--r);padding:26px 28px;margin:38px 0}
.guide-cta h3{margin:0 0 8px;font-size:18px}
.guide-cta p{margin:0 0 16px;color:var(--ink2);font-size:15.5px}
.guide h2{scroll-margin-top:90px}
.guide table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px}
.guide th,.guide td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.guide th{background:var(--alt);font-weight:600}

/* Two photographs side by side: a portrait alone reads as a press release,
   a pair reads as a workplace. Stacks on a phone. */
.storypair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.storypair .storyshot{margin:0;max-width:none}
/* One portrait beside one landscape looked like an accident; a shared frame
   with the subject centred makes it a pair. */
.storypair .storyshot img{aspect-ratio:4/3;object-fit:cover;object-position:center}
.storypair-lead{margin-top:-34px;position:relative;z-index:4}
@media(max-width:640px){.storypair{grid-template-columns:1fr;gap:16px}.storypair-lead{margin-top:-18px}}

/* Pricing cards in the anatomy buyers know from other WordPress SEO plugins:
   mark, name, tier, one sentence, price, terms, button, feature list. Equal
   height so no card ends in dead space. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;max-width:1060px;margin:0 auto}
.plans .plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:30px 28px;position:relative;text-align:left}
.plans .plan.best{border:2px solid var(--brand);box-shadow:0 22px 50px -24px rgba(103,83,255,.45)}
.plans .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 16px;border-radius:999px;white-space:nowrap}
.plan-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.plan-mark{border-radius:9px;flex:none}
.plan-name{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.plan-tier{font-size:14px;color:var(--brand);font-weight:600;margin-top:2px}
.plan-desc{font-size:14.5px;color:var(--ink2);margin:0 0 20px;min-height:3.2em;line-height:1.5}
.plan-price{font-size:46px;font-weight:750;letter-spacing:-.035em;line-height:1}
.plan-price span{font-size:15px;font-weight:500;color:var(--ink3);letter-spacing:0;margin-left:7px}
.plan-terms{font-size:13px;color:var(--ink3);margin:8px 0 20px}
.plan-cta{width:100%;justify-content:center}
.plan-feat{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;font-size:14.5px;flex:1}
.plan-feat li{display:flex;gap:10px;align-items:flex-start;line-height:1.45;color:var(--ink2)}
.plan-feat li::before{content:"";flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%;
  background:rgba(18,161,80,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312a150' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.plan-compare{display:inline-block;margin-top:20px;font-size:14px;font-weight:600;color:var(--brand)}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:460px}.plan-desc{min-height:0}}

/* Mobile header: brand on the left, the call to action and the menu button
   together on the right. The toggle used to take the auto margin, which
   parked the button against the logo and left a hole in the middle. */
@media(max-width:1100px){
	.top .wrap > .btn-primary{margin-left:auto}
	.top .wrap > .navtoggle{margin-left:0}
}
@media(max-width:420px){
	.top .wrap{gap:8px}
	.top .wrap > .btn-primary{padding:0 14px;font-size:14.5px}
}

/* Our own plans, feature by feature. Same visual grammar as the vendor
   table, but the highlighted column is a plan rather than a product. */
.plancmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;min-width:640px}
.plancmp th,.plancmp td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.plancmp thead th{font-size:15px;font-weight:700;padding-bottom:16px;white-space:nowrap}
.plancmp thead th span{display:block;font-size:12.5px;font-weight:500;color:var(--ink3);margin-top:3px}
.plancmp tbody th{text-align:left;font-weight:500;color:var(--ink2);line-height:1.4;min-width:280px}
.plancmp tbody tr:nth-child(even) th,.plancmp tbody tr:nth-child(even) td{background:var(--alt)}
.plancmp .pc-best{background:rgba(103,83,255,.07)}
.plancmp thead .pc-best{border-top:2px solid var(--brand);border-left:2px solid var(--brand);
  border-right:2px solid var(--brand);border-radius:12px 12px 0 0;color:var(--brand)}
.plancmp tbody .pc-best{border-left:2px solid var(--brand);border-right:2px solid var(--brand)}
.plancmp tbody tr:last-child .pc-best{border-bottom:2px solid var(--brand);border-radius:0 0 12px 12px}
.plancmp tbody tr:nth-child(even) .pc-best{background:rgba(103,83,255,.1)}
.pc-yes,.pc-no{display:inline-block;width:22px;height:22px;border-radius:50%}
.pc-yes{background:rgba(18,161,80,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312a150' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.pc-no{background:var(--alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377808d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat}
.plancmp .pc-cta td{padding-top:20px;border-bottom:0}
.plancmp .pc-cta .btn{width:100%;justify-content:center;min-height:40px;font-size:14px}

/* Vendor tiles: a typographic mark per product, ours outlined. Six across on
   a wide screen, two on a phone — never a half-empty row. */
.vendors{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.vendor{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 14px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}
.vendor.is-us{border:2px solid var(--brand);box-shadow:0 18px 40px -22px rgba(103,83,255,.5)}
.vendor .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);
  color:#fff;font-size:11px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.vendor-tile{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.01em;margin-bottom:12px}
.vendor-name{font-size:14px;font-weight:600;line-height:1.25;min-height:2.5em;display:flex;align-items:center}
.vendor-price{font-size:24px;font-weight:750;letter-spacing:-.02em;margin-top:6px}
.vendor-price span{display:block;font-size:11.5px;font-weight:500;color:var(--ink3);letter-spacing:0}
.vendor-sub{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.35}
.vendor-note{font-size:11.5px;color:var(--ink3);margin-top:8px;line-height:1.4;min-height:2.8em}
@media(max-width:1000px){.vendors{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.vendors{grid-template-columns:repeat(2,1fr)}.vendor-name{min-height:0}.vendor-note{min-height:0}}

/* A vendor's own mark where we have the file, the letter tile where we do not. */
.vendor-logo{width:44px;height:44px;object-fit:contain;border-radius:10px;margin-bottom:12px;flex:none}

/* Cards in a row: the text may differ in length, the buttons must not drift.
   The card becomes a column and whatever ends it is pushed to the bottom. */
.g2 .card,.g3 .card,.g4 .card,.partner-grid .card{display:flex;flex-direction:column}
.g2 .card > .card-b,.g3 .card > .card-b,.g4 .card > .card-b,.partner-grid .card > .card-b{
  display:flex;flex-direction:column;flex:1}
.card > p:last-child:has(> .btn),
.card > .btnrow:last-child,
.card > .btn:last-child,
.card-b > p:last-child:has(> .btn),
.card-b > .btnrow:last-child,
.card-b > .btn:last-child{margin-top:auto}

/* Three offers, three columns — a two-column row left one cell empty. */
@media(min-width:860px){.partner-grid{grid-template-columns:repeat(3,1fr)}}

/* The launch code, wherever it appears in a sentence: amber from the mark,
   bold, and never broken across two lines. */
.promo-code{font-weight:700;letter-spacing:.03em;color:#8a5a00;background:rgba(240,163,37,.22);
  padding:2px 9px;border-radius:7px;white-space:nowrap}
.promo .promo-code,.sec.dark .promo-code,.offer-card .promo-code{color:#ffd27a;background:rgba(240,163,37,.2)}
.offer-card .promo-code{color:#8a5a00;background:rgba(240,163,37,.25)}

/* Numbered reasons: the number carries the structure, the bold line carries
   the claim, and the paragraph explains it. Four dense paragraphs did not. */
.reasons{list-style:none;counter-reset:r;margin:24px 0;padding:0;display:grid;gap:18px}
.reasons li{counter-increment:r;position:relative;padding:20px 22px 20px 62px;background:var(--alt);
  border:1px solid var(--line);border-radius:14px;line-height:1.6}
.reasons li::before{content:counter(r);position:absolute;left:20px;top:20px;width:28px;height:28px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.reasons b{display:block;margin-bottom:5px;font-size:16.5px}
@media(max-width:520px){.reasons li{padding:18px 18px 18px 18px}.reasons li::before{position:static;margin-bottom:10px}}

/* Hero: two doors, both loud enough to be seen on a phone in daylight. */
.btn-xl{min-height:60px;padding:0 32px;font-size:17.5px;font-weight:700;border-radius:9px}
.hero-cta{gap:14px;justify-content:center}
.hero-price{margin-top:16px;font-size:15px;color:var(--dark-ink2);max-width:64ch}
@media(max-width:560px){.hero-cta .btn{width:100%;justify-content:center}.btn-xl{font-size:16.5px;padding:0 20px}}

/* Comparison table, calmer: more room per column so a price stops wrapping
   into three lines, lighter zebra, and a legend for the middle state. */
.cmp{min-width:1080px}
.cmp th,.cmp td{padding:16px 14px;font-size:14px;line-height:1.45}
.cmp tbody tr:nth-child(even) th,.cmp tbody tr:nth-child(even) td{background:rgba(240,240,250,.55)}
.cmp thead th{font-size:14.5px}
.cmp tbody th{min-width:210px}
.cmp td{min-width:150px}
.cmp-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;
  font-size:12.5px;color:var(--ink3)}
.cmp-legend span{display:flex;align-items:center;gap:7px}

/* The buy button: a sales green that reads as "yes" next to the violet
   primary, with a slow pulse instead of a blink — a blinking element is
   unreadable and, for some people, physically unpleasant. */
.btn-buy{background:#12a150;border-color:#12a150;color:#fff;box-shadow:0 6px 18px -6px rgba(18,161,80,.55)}
.btn-buy:hover{background:#0f8b45;border-color:#0f8b45;color:#fff}
.btn-buy{animation:buy-pulse 2.4s ease-in-out infinite}
@keyframes buy-pulse{
	0%,100%{box-shadow:0 6px 18px -6px rgba(18,161,80,.55),0 0 0 0 rgba(18,161,80,.45)}
	50%{box-shadow:0 6px 22px -6px rgba(18,161,80,.65),0 0 0 12px rgba(18,161,80,0)}
}
/* The code has to stay legible on the dark hero, where amber on near-black
   turned muddy. */
.hero .promo-code,.sec.dark .promo-code{color:#ffd98a;background:rgba(240,163,37,.26)}

/* Provider groups. The local group is marked because "runs on your own
   machine" is the answer to the question every NDA raises. */
/* Masonry columns, not a grid: the groups hold different numbers of
   providers, and a grid would stretch every card to the tallest one and
   leave dead white space under the short ones. */
.modelgrid{columns:3;column-gap:18px;margin-top:34px}
.modelcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 18px}
.modelcard.is-local{border:2px solid var(--brand);background:rgba(103,83,255,.05)}
.modelcard h3{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:8px}
.modelcard h3 span{font-size:12px;font-weight:700;color:#fff;background:var(--brand);
  border-radius:999px;padding:3px 9px;flex:none}
.modelcard p{font-size:14px;color:var(--ink2);margin:0 0 14px;line-height:1.5}
.modelcard ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.modelcard li{font-size:12.5px;background:var(--alt);border:1px solid var(--line);
  border-radius:7px;padding:5px 10px;color:var(--ink2);white-space:nowrap}
.modelcard.is-local li{background:#fff;border-color:rgba(103,83,255,.3)}
@media(max-width:980px){.modelgrid{columns:2}}
@media(max-width:640px){.modelgrid{columns:1}}

/* ---------- industry packs ---------------------------------------------- */
/* Columns rather than a grid: the summaries differ in length, and a grid
   would stretch every card to the tallest one in its row. */
.packgrid{columns:4 250px;column-gap:18px;margin-top:34px}
.packcard{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;
  color:inherit;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.packcard:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.packicon{font-size:24px;line-height:1;display:block;margin-bottom:10px}
.packcard h3{font-size:16px;margin:0 0 6px}
.packcard p{font-size:13.5px;color:var(--ink2);margin:0 0 10px;line-height:1.5}
.packcard .packq{font-size:13px;color:var(--brand);font-style:italic;margin:0 0 12px}
.packschema{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.packschema li{font-size:11.5px;font-weight:600;color:var(--ink3);background:var(--alt);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px}
@media(max-width:640px){.packgrid{columns:1}}

/* The pack box on an industry page: what this one industry actually gets. */
.packbox{background:var(--alt);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;margin-top:40px}
.packbox h3{margin:0 0 4px;font-size:19px;display:flex;align-items:center;gap:10px}
.packbox>p{margin:0 0 18px;color:var(--ink2);font-size:15px}
.packcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.packcols h4{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
.packcols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.packcols li{font-size:14px;color:var(--ink2);line-height:1.45;padding-left:16px;position:relative}
.packcols li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--brand);opacity:.5}
.packcols .packschema{flex-direction:row;flex-wrap:wrap}
.packcols .packschema li{padding-left:7px}
.packcols .packschema li::before{display:none}
@media(max-width:640px){.packcols{grid-template-columns:1fr}}

/* Label and value rows in a card. They had no rule at all, so a <span>
   followed by a <b> rendered as "Version0.0.5" — the label and the value with
   nothing between them. */
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.kv:last-of-type{border-bottom:0}
.kv > span{color:var(--ink2)}
.kv > b{color:var(--ink);font-weight:600;text-align:right}
@media(max-width:520px){.kv{flex-direction:column;gap:2px}.kv > b{text-align:left}}

/* The WordPress line, last thing on every page. The directory listing is
   still in review, and the wording says so rather than implying otherwise. */
/* Centred, mark above the text. Side by side it wrapped the paragraph into a
   narrow column against the left edge of a very wide footer, which read as a
   layout accident rather than a closing line. */
.wpbar{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.wpmark{flex:none;color:rgba(255,255,255,.5)}
.wpbar p{margin:0 auto;font-size:13px;line-height:1.7;color:var(--dark-ink2);max-width:68ch}
.wpbar strong{color:#fff}
.wpbar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.wpbar{gap:12px}.wpmark{width:26px;height:26px}}

/* The industry overview: fourteen cards, three across, each only as tall
   as its own text. */
.indgrid{columns:3 300px;column-gap:20px;margin-top:36px}
.indgrid .card{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 20px;display:block}
.indgrid .card h3{font-size:17px;line-height:1.3}
.indgrid .card p{font-size:14px}
@media(max-width:680px){.indgrid{columns:1}}

/* The industry column in the footer holds fourteen links, so it takes two
   of the five tracks and splits them itself. */
.fgrid-5 .fcol-wide{grid-column:span 2}
.find{columns:2;column-gap:18px}
.find li{break-inside:avoid}
@media(max-width:900px){.fgrid-5 .fcol-wide{grid-column:auto}.find{columns:2}}
@media(max-width:520px){.find{columns:1}}

/* ---------- the loop: ask, measure, fix, ask again ----------------------- */
/* Four panels that carry the whole argument before anybody reads a paragraph.
   Nested radii — a wide soft container, tighter cards inside it — and a
   brand-tinted lift rather than a grey one, so a card belongs to the page
   instead of sitting on top of it. */
.loop{list-style:none;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:loop}
.loopstep{position:relative;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);border-radius:26px;padding:24px 20px 20px;
  box-shadow:var(--shadow-brand);display:flex;flex-direction:column;gap:8px}
.loopnum{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:14px;font-weight:700;flex:none}
.loopstep h3{margin:2px 0 0;font-size:17px}
.loopstep>p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
/* The inner card is the "screen": tighter radius, flat, no competing shadow. */
.loopcard{margin-top:auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px;font-size:13.5px;line-height:1.5}
.loopcard p{margin:0}
.loopcard.is-chat{background:var(--alt);border-color:transparent}
.loopask{font-size:15px;font-weight:600;color:var(--ink)}
.loopcard.is-answer p:first-child{color:var(--ink2)}
.loopcard b{color:var(--ink);font-weight:650}
.loopverdict{display:flex;align-items:center;gap:7px;margin-top:12px !important;
  padding-top:10px;border-top:1px solid var(--line);font-weight:650;font-size:13px}
.loopverdict.is-no{color:var(--bad)}
.loopverdict.is-yes{color:var(--good)}
.loopcard.is-fix ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.loopcard.is-fix li{padding-left:16px;position:relative;color:var(--ink2)}
.loopcard.is-fix li::before{content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;border-radius:50%;background:var(--warn)}
.loopfixed{margin-top:12px !important;padding-top:10px;border-top:1px solid var(--line);
  color:var(--good);font-weight:650}
.loopnote{max-width:70ch;margin:22px auto 0;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--ink3)}
@media(max-width:1000px){.loop{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.loop{grid-template-columns:1fr}}

/* The assistants, breathing.
   One stroke weight, one baseline, five different phases — the row looks
   alive without any single mark blinking at the reader. `prefers-reduced-
   motion` stops it dead, because a pulsing row is exactly what that setting
   exists to switch off. */
.assistants{display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,54px);
  margin:30px 0 10px;padding:26px 0 18px;
  background:linear-gradient(180deg,rgba(103,83,255,.07),rgba(103,83,255,0));
  border-radius:26px}
.asst{display:inline-flex}
/* The real marks are solid single paths, not strokes: fill, no stroke. */
.asst svg{width:clamp(26px,3.4vw,32px);height:auto;fill:var(--ink2);stroke:none;
  opacity:.55;animation:asst-breathe 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * .42s)}
.asst:hover svg{opacity:.9}
@keyframes asst-breathe{
  0%,100%{opacity:.42;transform:translateY(0)}
  50%    {opacity:.78;transform:translateY(-2px)}
}
.assistants-label{margin:0;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
@media (prefers-reduced-motion: reduce){
  .asst svg{animation:none;opacity:.7}
}

/* ---------- one question, five assistants ------------------------------- */
/* "Are you in the answer" is not one verdict. ChatGPT can name you while
   Claude does not, and which of them matters depends on where the customers
   are — so the row shows all five and the summary names the gaps. */
.matrix{margin:30px auto 0;max-width:980px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:26px;padding:26px 22px 22px;
  box-shadow:var(--shadow-brand);text-align:center}
.matrix-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.matrix-q{margin:8px 0 22px;font-size:clamp(18px,2.2vw,23px);font-weight:650;
  letter-spacing:-.02em;color:var(--ink)}
.matrix-row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:14px}
.matrix-row li{display:flex;flex-direction:column;align-items:center;gap:5px}
.matrix-name{font-size:14px;font-weight:600}
.matrix-verdict{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.matrix-verdict.is-yes{color:var(--good)}
.matrix-verdict.is-no{color:var(--bad)}
.matrix-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.matrix-sum{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.matrix-sum span{color:var(--ink3)}
@media(max-width:700px){.matrix-row{grid-template-columns:repeat(2,1fr);gap:18px}}

/* ---------- the questions people actually type --------------------------- */
/* Three rows drifting in alternating directions. Each track holds its items
   twice, so the loop has no seam; one transform per row, which costs nothing
   even on a phone. Held still under prefers-reduced-motion. */
.askstream{margin:30px 0 6px;display:grid;gap:10px;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.askrow{overflow:hidden}
.asktrack{display:flex;gap:10px;width:max-content;animation:ask-drift 46s linear infinite}
.askrow.is-reverse .asktrack{animation-direction:reverse;animation-duration:54s}
.askchip{flex:none;background:rgba(255,255,255,.9);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.sec.dark .askchip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  color:var(--dark-ink2)}
@keyframes ask-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .asktrack{animation:none}
  .askstream{mask-image:none;-webkit-mask-image:none}
}