/* CloudWish Abuse API landing page (/abuse/). Loads on that page only, after site.css, whose tokens it reuses.
   Motion uses transform and opacity only. Every animation has a static final state, and reduced motion gets that state. */

.ab-page {
  --ab-red: #FF7A8E;      /* threat, on dark */
  --ab-red-ink: #B3213B;  /* threat, on light */
  --ab-green: #52D6A2;
  --ab-amber: var(--star);
  overflow-x: clip;
}
.ab-page :focus-visible { outline-color: var(--blue-deep); }
.ab-hero :focus-visible, .band--night :focus-visible, .closing :focus-visible { outline-color: var(--star); }
.ab-page code { font-family: var(--f-mono); }
.ab-page .h-section { max-width: 22ch; text-wrap: balance; }
.ab-page h3 { text-wrap: balance; }

/* ---------- Reveal on scroll (only while abuse.js is alive: html.ab-js) ---------- */
.ab-js .ab-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.ab-js .ab-rv.is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.ab-hero.phero {
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(48% 70% at 84% 42%, rgba(51,106,246,.45), transparent 70%),
    radial-gradient(34% 44% at 4% 100%, rgba(255,122,142,.11), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, #0D1B52 100%);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.ab-hero.phero::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(26% 32% at 20% 34%, rgba(51,106,246,.26), transparent 70%),
    radial-gradient(20% 26% at 74% 74%, rgba(255,200,87,.10), transparent 70%);
  animation: ab-drift 18s ease-in-out infinite alternate;
}
@keyframes ab-drift { to { transform: translate3d(4%, -3%, 0) scale(1.07); } }
.ab-hero .wrap { z-index: 1; }
.ab-hero a:not(.btn) { color: var(--white); text-underline-offset: 3px; }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ab-hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 3.7vw, 4.25rem); line-height: .98; max-width: 14ch;
}
.ab-hero h1 mark {
  color: inherit; padding: 0 .04em;
  background: linear-gradient(var(--star), var(--star)) 0 94% / 100% .075em no-repeat;
}
.ab-hero__lede { margin-top: 1.3rem; font-size: var(--t-lede); color: rgba(255,255,255,.82); max-width: 50ch; }
.ab-kicker {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .28rem .8rem .28rem .3rem;
  border-radius: 999px; font: 500 .82rem/1 var(--f-mono); letter-spacing: .01em; color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.ab-kicker__new { padding: .28rem .6rem; border-radius: 999px; background: var(--star); color: var(--night); font: 700 .72rem/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.ab-hero .phero__cta .btn { transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.ab-hero .btn--wish:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,200,87,.34); }
.ab-hero .btn--ghost:hover { transform: translateY(-2px); }
.ab-proof { list-style: none; margin: 1.8rem 0 0; padding: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); font-size: .95rem; }
.ab-proof li { display: flex; align-items: center; gap: .55rem; }
.ab-proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--star); flex: none; }

/* ---------- The scan visual ---------- */
.ab-scan { position: relative; width: 100%; max-width: 560px; margin-inline: auto; isolation: isolate; --ab-o: 1; }
.ab-scan::before {
  content: ""; position: absolute; inset: -10% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 56% at 50% 46%, rgba(51,106,246,.5), transparent 72%); filter: blur(12px);
}
.ab-win { border-radius: 20px; overflow: hidden; background: #0E1B4F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 40px 90px rgba(3,8,30,.55); }
.ab-win__bar { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); font: 500 .76rem/1.2 var(--f-mono); color: rgba(255,255,255,.72); }
.ab-dots { display: flex; gap: 6px; flex: none; }
.ab-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.ab-win__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-win__status { margin-left: auto; flex: none; display: grid; white-space: nowrap; }
.ab-st { grid-area: 1 / 1; padding: .2rem .65rem; border-radius: 999px; text-align: center; }
.ab-st--scan { background: rgba(255,200,87,.16); color: var(--star); opacity: 0; }
.ab-st--done { background: rgba(82,214,162,.14); color: var(--ab-green); }
.ab-scan.is-run .ab-st--scan { animation: ab-scan-out 2.6s both; }
.ab-scan.is-run .ab-st--done { animation: ab-done-in 2.6s both; }
@keyframes ab-scan-out { 0%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ab-done-in { 0%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }

.ab-stage { display: grid; }
.ab-msg { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.ab-msg.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.ab-mail { position: relative; isolation: isolate; overflow: hidden; flex: 1; margin: 1rem 1rem 0; padding: 1rem 1.1rem 1.1rem; border-radius: 14px 14px 0 0; background: var(--white); color: var(--ink); font-size: .9rem; line-height: 1.5; }
.ab-dir { position: absolute; top: .9rem; right: 1rem; padding: .12rem .5rem; border-radius: 999px; font: 500 .68rem/1.5 var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); background: var(--sky); }
.ab-mail__head { margin: 0; display: grid; gap: .3rem; padding: 0 0 .8rem; border-bottom: 1px solid var(--line); }
.ab-mail__head > div { display: grid; grid-template-columns: 3.7rem minmax(0, 1fr); gap: .5rem; }
.ab-mail__head > div:first-child dd { padding-right: 4.6rem; }
.ab-mail__head dt { font: 500 .72rem/1.9 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: #5A6684; }
.ab-mail__head dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.ab-mail__body { margin: .8rem 0 0; overflow-wrap: anywhere; }
[dir="rtl"].ab-mail__body, .ab-mail__head dd[dir="rtl"] { text-align: start; }

/* A flagged phrase: an overlay that fades in as the beam passes. Text stays put. */
.ab-flag { position: relative; display: inline-block; max-width: 100%; background: none; color: inherit; font-weight: 600; }
.ab-flag::after {
  content: ""; position: absolute; inset: 0 -3px; z-index: -1; border-radius: 5px; pointer-events: none;
  background: rgba(255,122,142,.24); box-shadow: inset 0 -2px 0 #E5484D; opacity: var(--ab-o);
}
.ab-beam { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(51,106,246,0) 0%, rgba(51,106,246,0) 60%, rgba(51,106,246,.16) 94%, rgba(51,106,246,.9) 100%);
  border-bottom: 2px solid #5B8BFF; box-shadow: 0 10px 26px rgba(51,106,246,.55);
}
.ab-scan.is-run .ab-beam { animation: ab-sweep 1.55s cubic-bezier(.55, .05, .35, 1) both; }
@keyframes ab-sweep { 0% { opacity: 1; transform: translateY(-100%); } 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
.ab-scan.is-run .ab-flag::after { animation: ab-fade .35s ease-out var(--t, .6s) both; }
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }

.ab-out { margin: 0 1rem 1rem; padding: .9rem 1.1rem 1rem; border-radius: 0 0 14px 14px; background: #0A143F; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ab-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.2rem; align-content: flex-start; }
.ab-chips li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem; border-radius: 999px; font: 500 .8rem/1.2 var(--f-body);
  color: rgba(255,255,255,.94); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); opacity: var(--ab-o);
}
.ab-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ab-chips .is-hi { background: rgba(255,122,142,.13); box-shadow: inset 0 0 0 1px rgba(255,122,142,.42); }
.ab-chips .is-hi::before { background: var(--ab-red); }
.ab-chips .is-mid { background: rgba(255,200,87,.1); box-shadow: inset 0 0 0 1px rgba(255,200,87,.34); }
.ab-chips .is-mid::before { background: var(--star); }
.ab-chips .is-ok { background: rgba(82,214,162,.1); box-shadow: inset 0 0 0 1px rgba(82,214,162,.36); }
.ab-chips .is-ok::before { background: var(--ab-green); }
.ab-chips .is-lang { color: rgba(255,255,255,.72); font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; }
.ab-chips .is-lang::before { display: none; }
.ab-scan.is-run .ab-chips li { animation: ab-pop .45s var(--ease) calc(1.55s + var(--i, 0) * .13s) both; }
@keyframes ab-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

.ab-verdict { margin: .8rem 0 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .9rem; opacity: var(--ab-o); }
.ab-verdict__word { font: 800 1.35rem/1 var(--f-display); letter-spacing: .01em; text-transform: uppercase; }
.ab-verdict__score { justify-self: end; font: 500 .82rem/1 var(--f-mono); color: rgba(255,255,255,.7); }
.ab-meter { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ab-meter i { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--s, 1)); }
.ab-verdict--block .ab-verdict__word { color: var(--ab-red); }
.ab-verdict--block .ab-meter i { background: linear-gradient(90deg, #E5484D, var(--ab-red)); }
.ab-verdict--review .ab-verdict__word { color: var(--star); }
.ab-verdict--review .ab-meter i { background: linear-gradient(90deg, #E0A63A, var(--star)); }
.ab-verdict--allow .ab-verdict__word { color: var(--ab-green); }
.ab-verdict--allow .ab-meter i { background: var(--ab-green); }
.ab-scan.is-run .ab-verdict { animation: ab-pop .5s var(--ease) 2.15s both; }
.ab-scan.is-run .ab-meter i { animation: ab-fill .9s var(--ease) 2.3s both; }
@keyframes ab-fill { from { transform: scaleX(0); } to { transform: scaleX(var(--s, 1)); } }

/* Before the first run (JS on): the pre-scan state. Without JS, or with reduced motion, the final state stays. */
.ab-js .ab-scan:not(.is-run) { --ab-o: 0; }
.ab-js .ab-scan:not(.is-run) .ab-meter i { transform: scaleX(0); }
.ab-js .ab-scan:not(.is-run) .ab-st--scan { opacity: 1; }
.ab-js .ab-scan:not(.is-run) .ab-st--done { opacity: 0; }

.ab-tabs { display: none; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.ab-js .ab-tabs { display: flex; }
.ab-tabs button {
  position: relative; min-height: 40px; padding: 0 .95rem; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  font: 500 .88rem/1 var(--f-body); color: rgba(255,255,255,.86); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ab-tabs button:hover { background: rgba(255,255,255,.16); }
.ab-tabs button[aria-pressed="true"] { background: var(--white); color: var(--night); box-shadow: none; }
.ab-tabs .ab-pause { margin-left: auto; color: rgba(255,255,255,.7); }
.ab-tabs .ab-pause[aria-pressed="true"] { background: var(--star); color: var(--night); }
.ab-tabs [data-pick]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--star); transform: scaleX(0); transform-origin: left center; }
.ab-scan.is-run:not(.is-stopped) .ab-tabs [data-pick][aria-pressed="true"]::after { animation: ab-progress var(--ab-cycle, 7.6s) linear both; }
@keyframes ab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ab-scan__note { margin-top: .8rem; font-size: .8rem; color: rgba(255,255,255,.55); }

/* ---------- Shared section pieces ---------- */
.ab-eyebrow { margin: 0 0 .9rem; font: 500 .82rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--star); }
.ab-t__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--sky); color: var(--blue-deep); flex: none; }
.ab-t__icon svg { width: 24px; height: 24px; }

/* ---------- What it catches: an uneven bento ---------- */
.ab-types-band { padding-bottom: clamp(3rem, 6vw, 5rem); }
.ab-types { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ab-t {
  position: relative; display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.3rem, 2.4vw, 1.8rem); border-radius: var(--r-lg);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line); grid-column: span 2; overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.ab-t h3 { font-size: 1.3rem; font-weight: 650; letter-spacing: -.012em; margin-top: .5rem; }
.ab-t p { color: var(--ink-2); max-width: 52ch; }
@media (hover: hover) { .ab-t:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-3px); } }
.ab-t--phish, .ab-t--bec, .ab-t--cold, .ab-t--lang { grid-column: span 3; }
.ab-t--phish { background: linear-gradient(160deg, var(--night) 30%, var(--night-2)); color: var(--white); box-shadow: none; }
.ab-t--phish p { color: rgba(255,255,255,.78); }
.ab-t--phish .ab-t__icon { background: rgba(255,255,255,.1); color: var(--star); }
.ab-t--phish::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(51,106,246,.5), transparent 70%); pointer-events: none; }
.ab-url { margin-top: auto; padding-top: .8rem; font: 500 .9rem/1.3 var(--f-mono); color: rgba(255,255,255,.7); word-break: break-all; }
.ab-t p.ab-url { color: rgba(255,255,255,.7); }
.ab-url b { color: var(--ab-red); font-weight: 700; text-decoration: underline wavy var(--ab-red) 1px; text-underline-offset: 4px; }
.ab-t--bec { background: linear-gradient(160deg, var(--sky), #F6F9FF 70%); box-shadow: inset 0 0 0 1px #CBD7F7; }
.ab-thread { margin-top: auto; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--white); box-shadow: inset 0 0 0 1px #CBD7F7; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.ab-t p.ab-thread { color: var(--ink-2); }
.ab-thread b { color: var(--ab-red-ink); font-weight: 600; background: rgba(255,122,142,.2); box-shadow: inset 0 -2px 0 #E5484D; padding: 0 .25rem; border-radius: 3px; }
.ab-t--lang { background: linear-gradient(160deg, var(--blue-deep), var(--night-2)); color: var(--white); box-shadow: none; }
.ab-t--lang p { color: rgba(255,255,255,.84); }
.ab-t--lang .ab-t__icon { background: rgba(255,255,255,.14); color: var(--white); }
.ab-langs { margin-top: auto; padding-top: .8rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.ab-t p.ab-langs { color: var(--white); }
.ab-langs > span:not(.ab-tipwrap) { padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-weight: 600; font-size: .95rem; }

/* ---------- How it works: reuses the site's .how band; the connectors draw in when it scrolls into view ---------- */
.ab-how .how__steps { margin-top: 2.6rem; }
.ab-js .ab-how .how__steps li:not(:last-child)::after { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .35s; }
.ab-js .ab-how .how__steps.is-in li:not(:last-child)::after { transform: scaleX(1); }
.ab-js .ab-how .how__steps li:nth-child(2)::after { transition-delay: .7s; }
.ab-how .how__steps li::before { text-shadow: 0 6px 20px rgba(51,106,246,.25); }

/* ---------- Docs: quick start ---------- */
.ab-docs { position: relative; overflow: hidden; }
.ab-docs::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 22px 22px, radial-gradient(50% 60% at 100% 0%, rgba(51,106,246,.32), transparent 70%); }
.ab-docs__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ab-docs .lede code, .ab-fields code { font-size: .9em; padding: .1em .4em; border-radius: 5px; background: rgba(255,255,255,.1); color: var(--white); }
.ab-fields { margin: 1.8rem 0 0; display: grid; gap: 0; max-width: 46ch; }
.ab-fields > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.ab-fields dt, .ab-fields dd { margin: 0; }
.ab-fields dd { color: rgba(255,255,255,.78); }
.ab-docs__cta { margin-top: 1.8rem; }
.ab-code { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px rgba(3,8,30,.45); }
.ab-code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .8rem .55rem 1rem; }
.ab-code__tabs { display: flex; gap: .3rem; }
.ab-code figcaption button { min-height: 36px; padding: 0 .85rem; border: 0; border-radius: 999px; cursor: pointer; font: 500 .84rem/1 var(--f-body); color: rgba(255,255,255,.75); background: transparent; transition: background-color .2s var(--ease), color .2s var(--ease); }
.ab-code figcaption button:hover { background: rgba(255,255,255,.1); color: var(--white); }
.ab-code figcaption button[aria-selected="true"] { background: rgba(255,255,255,.14); color: var(--white); }
.ab-code .ab-copy { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.ab-code .ab-copy[hidden] { display: none; }
.ab-code pre { font-size: .84rem; line-height: 1.7; }
.ab-code pre:focus-visible { outline-offset: -3px; }
.ab-js .ab-code [role="tabpanel"][hidden] { display: none; }
.ab-code [role="tabpanel"] + [role="tabpanel"] { border-top: 1px dashed rgba(255,255,255,.12); }
.ab-js .ab-code [role="tabpanel"] + [role="tabpanel"] { border-top: 0; }
.ab-code__res { border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.ab-code__label { padding: .7rem 1.2rem 0; font: 500 .74rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ab-code__res pre { padding-top: .6rem; }
.c-p { color: #9FB6FF; }
.c-n { color: var(--star); }

/* ---------- Integrations ---------- */
.ab-int__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 2.4rem; }
.ab-int__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ab-card { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 1.1rem; row-gap: .15rem; padding: 1.3rem 1.4rem; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
@media (hover: hover) { .ab-card:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateX(4px); } }
.ab-card .ab-t__icon { grid-row: 1 / 4; }
.ab-card h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.ab-card p { color: var(--ink-2); font-size: .98rem; }
.ab-tag { justify-self: start; font: 500 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
.ab-flow { margin: 0; padding: clamp(1rem, 3vw, 1.6rem); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--night), var(--night-2)); box-shadow: 0 30px 60px rgba(20,38,107,.22); }
.ab-flow svg { width: 100%; height: auto; overflow: visible; }
.ab-flow text { font: 600 12px var(--f-body); fill: var(--white); }
.ab-flow .ab-flow__sub { font: 400 9.5px var(--f-mono); fill: rgba(255,255,255,.66); }
.ab-flow .ab-flow__cap { font: 500 10px var(--f-mono); fill: rgba(255,255,255,.6); letter-spacing: .06em; text-transform: uppercase; }
.ab-flow__node rect { fill: #13205A; stroke: rgba(255,255,255,.16); }
.ab-flow__node--hub rect { fill: #1D338F; stroke: #5B8BFF; stroke-width: 1.5; }
.ab-flow__line { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.ab-flow__line--back { stroke: rgba(82,214,162,.4); }
.ab-flow__dot { fill: var(--star); }
.ab-flow__dot--back { fill: var(--ab-green); }
.ab-flow__dot--out { animation: ab-dot-out 2.8s var(--ease) infinite; }
.ab-flow__dot--back { animation: ab-dot-back 2.8s var(--ease) 1.4s infinite; opacity: 0; }
@keyframes ab-dot-out { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(80px); } }
@keyframes ab-dot-back { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(-80px); } }
.ab-flow__verdicts rect { fill: none; stroke-width: 1.2; }
.ab-flow__verdicts text { font: 500 11px var(--f-mono); }
.ab-flow__verdicts .is-allow { stroke: var(--ab-green); }
.ab-flow__verdicts .is-review { stroke: var(--star); }
.ab-flow__verdicts .is-block { stroke: var(--ab-red); }

/* ---------- Pricing teaser ---------- */
.ab-price__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; margin-top: 2.4rem; }
.ab-price__card { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: clamp(1.5rem, 3.4vw, 2.4rem); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px #CBD7F7; }
.ab-price__card p { color: var(--ink-2); max-width: 46ch; }
.ab-price__card h3 { font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.ab-price__card .btn { margin-top: auto; }
.ab-price__tag { font: 500 .78rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
.ab-price__card--free { background: linear-gradient(160deg, var(--night) 20%, var(--night-2)); color: var(--white); box-shadow: 0 30px 60px rgba(20,38,107,.25); }
.ab-price__card--free .ab-price__tag { color: var(--star); }
.ab-price__card--free .checks li::before { color: var(--ab-green); }
.ab-price__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; color: var(--white) !important; max-width: none !important; }
.ab-price__num b { font: 800 clamp(3.2rem, 2rem + 5vw, 5.6rem)/.95 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ab-price__num span { font: 500 1.15rem var(--f-body); color: rgba(255,255,255,.8); }
.ab-price__card--free .btn { background: var(--star); color: var(--ink); }
.ab-price__card--free .btn:hover { background: #FFD884; }

/* ---------- Privacy and security ---------- */
.ab-priv__grid { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.ab-priv__grid li { padding-top: 1.3rem; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: .5rem; }
.ab-priv__grid h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.008em; margin-top: .5rem; }
.ab-priv__grid p { color: var(--ink-2); font-size: .98rem; }
.ab-priv__more { margin-top: 2rem; color: var(--ink-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .ab-hero__grid, .ab-docs__grid, .ab-int__grid, .ab-price__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-hero h1 { max-width: 16ch; }
  .ab-scan { max-width: 620px; margin-inline: 0; }
  .ab-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-t, .ab-t--bec, .ab-t--cold { grid-column: span 1; }
  .ab-t--phish, .ab-t--lang { grid-column: span 2; }
  .ab-priv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-flow { max-width: 460px; }
}
@media (max-width: 680px) {
  .ab-hero.phero { padding-top: 104px; }
  .ab-hero h1 { font-size: clamp(2.15rem, 9.6vw, 2.8rem); }
  .ab-types { grid-template-columns: minmax(0, 1fr); }
  .ab-t, .ab-t--phish, .ab-t--bec, .ab-t--cold, .ab-t--lang { grid-column: auto; }
  .ab-priv__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-win__url { display: none; }
  .ab-url { font-size: .76rem; }
  .ab-mail { margin: .7rem .7rem 0; padding: .9rem .9rem 1rem; font-size: .86rem; }
  .ab-out { margin: 0 .7rem .7rem; padding: .8rem .9rem .9rem; }
  .ab-mail__head > div { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .35rem; }
  .ab-mail__head > div:first-child dd { padding-right: 0; }
  .ab-dir { position: static; display: inline-block; margin-bottom: .6rem; }
  .ab-tabs button { min-height: 44px; }
  .ab-tabs .ab-pause { margin-left: 0; }
  .ab-fields > div { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .ab-code figcaption { padding-left: .6rem; }
  .ab-card { padding: 1.1rem; column-gap: .9rem; }
}

/* ---------- Reduced motion: the final state, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .ab-js .ab-rv { opacity: 1; transform: none; transition: none; }
  .ab-hero.phero::after, .ab-flow__dot { animation: none !important; }
  .ab-js .ab-how .how__steps li::after { transition: none; transform: none; }
  .ab-flow__dot { opacity: 1; }
  .ab-flow__dot--back { display: none; }
  .ab-js .ab-scan:not(.is-run) { --ab-o: 1; }
  .ab-js .ab-scan:not(.is-run) .ab-meter i { transform: scaleX(var(--s, 1)); }
  .ab-js .ab-scan:not(.is-run) .ab-st--scan { opacity: 0; }
  .ab-js .ab-scan:not(.is-run) .ab-st--done { opacity: 1; }
  .ab-scan *, .ab-scan *::before, .ab-scan *::after { animation: none !important; }
  .ab-msg { transition: none; }
  .ab-t, .ab-card { transition: box-shadow .01ms; }
  .ab-t:hover, .ab-card:hover { transform: none !important; }
}

/* ---------- Docs: minimal-first samples, "what you send" levels, and the fuller privacy block (added 2026-09-29). Logical properties throughout. ---------- */
.ab-code__note { margin: 0; padding-block: 0 1rem; padding-inline: 1.2rem; font: 400 .84rem/1.5 var(--f-body); color: rgba(255,255,255,.66); }

.ab-levels { position: relative; margin-block-start: clamp(3rem, 6vw, 4.6rem); padding-block-start: clamp(2.2rem, 4vw, 3rem); border-block-start: 1px solid rgba(255,255,255,.14); scroll-margin-block-start: 90px; }
.ab-levels__head { max-width: 62ch; }
.ab-levels__head h3 { font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--white); text-wrap: balance; }
.ab-levels__head p { margin-block-start: .7rem; color: rgba(255,255,255,.78); }
.ab-levels__list { list-style: none; margin-block: 1.8rem 0; margin-inline: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-level { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: clamp(1.2rem, 2.4vw, 1.6rem); border-radius: var(--r-lg); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ab-level--1 { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,200,87,.55); }
.ab-level__k { display: inline-flex; align-items: center; gap: .6rem; font: 500 .74rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.ab-level__meter { display: inline-flex; gap: 3px; }
.ab-level__meter i { width: 14px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.2); }
.ab-level--1 .ab-level__meter i, .ab-level--2 .ab-level__meter i:nth-child(-n+2), .ab-level--3 .ab-level__meter i:first-child { background: var(--star); }
.ab-level h4 { margin: .15rem 0 0; font: 650 1.2rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--white); }
.ab-level p { margin: 0; font-size: .98rem; color: rgba(255,255,255,.8); }
.ab-level .ab-level__best { padding: .22rem .7rem; border-radius: 999px; font: 600 .78rem/1.3 var(--f-body); color: var(--ink); background: var(--star); }
.ab-level code { font-size: .9em; padding: .1em .4em; border-radius: 5px; background: rgba(255,255,255,.1); color: var(--white); }
.ab-level__chips { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ab-level__chips li { padding: .3rem .72rem; border-radius: 999px; font: 500 .82rem/1.25 var(--f-body); color: rgba(255,255,255,.92); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.ab-levels__note { margin-block-start: 1.3rem; max-width: 66ch; color: rgba(255,255,255,.84); }
.ab-levels__note a { font-weight: 600; text-underline-offset: 3px; }

.ab-priv .lede { max-width: 62ch; margin-block-start: 1rem; }
.ab-priv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.6rem, 3vw, 2.6rem); }
.ab-priv__more a { text-underline-offset: 3px; }

@media (max-width: 1020px) {
  .ab-priv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ab-levels__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .ab-priv__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-code__note { padding-inline: 1rem; }
}

/* ---------- Languages: "See all languages" trigger, tooltip and modal (added 2026-09-29). Motion is opacity/transform only. Logical properties throughout. ---------- */
.ab-t--lang { overflow: visible; }
.ab-tipwrap { position: relative; display: inline-block; }
.ab-langbtn { font: inherit; color: inherit; cursor: pointer; }
.ab-langs .ab-langbtn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border: 0; border-radius: 999px;
  background: var(--star); color: var(--ink); font-weight: 600; font-size: .95rem;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.ab-langs .ab-langbtn::after { content: ""; width: .42em; height: .42em; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); }
[dir="rtl"] .ab-langs .ab-langbtn::after { transform: rotate(-45deg); }
.ab-langs .ab-langbtn:hover { background: #FFD884; transform: translateY(-1px); }
.ab-t--lang :focus-visible { outline-color: var(--white); }
.ab-hero__lede .ab-langbtn {
  padding: 0; border: 0; background: none; color: var(--white); text-align: inherit;
  text-decoration: underline dotted var(--star) 2px; text-underline-offset: 5px;
}
.ab-hero__lede .ab-langbtn:hover { text-decoration-style: solid; }
.ab-hero__lede .ab-tipwrap { white-space: nowrap; }

.ab-tip {
  position: absolute; z-index: 5; inset-inline-start: 0; inset-block-end: calc(100% + 10px); width: max-content; max-width: min(17rem, calc(100vw - 3rem));
  padding: .5rem .75rem; border-radius: 10px; background: var(--ink); color: var(--white); box-shadow: 0 10px 28px rgba(3,8,30,.38), inset 0 0 0 1px rgba(255,255,255,.16);
  font: 500 .84rem/1.35 var(--f-body); letter-spacing: 0; text-align: start; text-transform: none; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
.ab-tip::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; height: 12px; } /* keeps the tooltip open while the pointer crosses the gap (WCAG 1.4.13) */
.ab-langbtn:focus-visible + .ab-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .ab-tipwrap:hover .ab-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.ab-tipwrap.is-off .ab-tip { opacity: 0 !important; visibility: hidden !important; }
/* In the card, on wide screens, the tooltip sits beside the button so it does not cover the language pills. */
@media (min-width: 681px) {
  .ab-langs .ab-tip { inset-block-start: 50%; inset-block-end: auto; inset-inline-start: calc(100% + 12px); transform: translate(-4px, -50%); }
  .ab-langs .ab-tip::before { inset: 0 auto 0 auto; inset-inline-end: 100%; width: 14px; height: auto; }
  .ab-langs .ab-langbtn:focus-visible + .ab-tip, .ab-langs .ab-tipwrap:hover .ab-tip { transform: translate(0, -50%); }
}

html.ab-lock { overflow: hidden; scrollbar-gutter: stable; }
.ab-modal {
  --ab-modal-h: min(84vh, 46rem);
  margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); width: min(46rem, calc(100vw - 1.5rem)); max-width: none; max-height: none;
  background: var(--white); color: var(--ink); box-shadow: 0 40px 100px rgba(3,8,30,.5); overflow: hidden;
}
.ab-modal[open] { display: flex; animation: ab-modal-in .28s var(--ease); }
.ab-modal::backdrop { background: rgba(6,13,44,.66); }
.ab-modal[open]::backdrop { animation: ab-modal-fade .28s var(--ease); }
@keyframes ab-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes ab-modal-fade { from { opacity: 0; } }
.ab-modal__box { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: var(--ab-modal-h); }
.ab-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem) 1rem; border-block-end: 1px solid var(--line); }
.ab-modal__head h2 { font: 700 clamp(1.3rem, 1.1rem + 1vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.ab-modal__head p { margin-block-start: .45rem; max-width: 52ch; font-size: .95rem; color: var(--ink-2); }
.ab-modal__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease); }
.ab-modal__x:hover { background: var(--line); }
.ab-modal__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .3rem clamp(1.1rem, 3vw, 1.8rem) 1.4rem; }
.ab-modal__scroll:focus-visible { outline-offset: -3px; }
.ab-lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
.ab-lang-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block: .6rem; border-block-end: 1px solid var(--line); }
.ab-lang-list bdi { font-weight: 600; }
.ab-lang-list span { font-size: .9rem; color: var(--ink-2); text-align: end; }
@media (max-width: 760px) { .ab-lang-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .ab-modal { --ab-modal-h: calc(100dvh - 1rem); width: calc(100vw - 1rem); }
  .ab-lang-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-modal[open], .ab-modal[open]::backdrop { animation: none; }
  .ab-tip, .ab-langs .ab-langbtn { transition: none; }
  .ab-langs .ab-langbtn:hover { transform: none; }
}