/* ============================================================
   ACTIVELAYER HOMEPAGE · v1 preview
   Each section below is a self-contained pattern (al-*) that
   ports to a WP block pattern independently. Flat selectors,
   no deep descendant chains.
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--white); color:var(--ink-900);
  font-family:var(--font-sans); font-size:var(--text-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; }
a { color:var(--emerald-800); }
h1,h2,h3,h4 { margin:0; text-wrap:balance; }
p { margin:0; }
button { font-family:var(--font-sans); }
.icon { width:1em; height:1em; fill:currentColor; display:inline-block; vertical-align:-0.125em; flex:none; }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:4px; }

.al-container { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
@media (min-width:768px){ .al-container { padding:0 32px; } }

/* section header lockup */
.al-sechead { text-align:center; max-width:980px; margin:0 auto var(--sp-16); }
.al-eyebrow {
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--ink-600); display:block; margin-bottom:var(--sp-4);
}
.al-h2 { font-size:var(--text-h2); font-weight:800; letter-spacing:var(--track-h2); line-height:1.12; }
.al-sub { font-size:var(--text-lead); color:var(--ink-600); margin-top:var(--sp-4); line-height:1.55; }

/* buttons */
.al-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; cursor:pointer; text-decoration:none;
  border-radius:var(--r-control); border:2px solid transparent;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.al-btn:active { transform:translateY(1px); }
.al-btn .icon { transition:transform var(--dur-base) var(--ease-out); }
.al-btn:hover .icon { transform:translateX(3px); }
.al-btn--xl { font-size:17px; height:60px; padding:0 34px; }
.al-btn--lg { font-size:16px; height:52px; padding:0 26px; }
.al-btn--md { font-size:15px; height:44px; padding:0 20px; }
.al-btn--sm { font-size:14px; height:38px; padding:0 16px; }
.al-btn--xs { font-size:13.5px; height:34px; padding:0 14px; }
.al-btn--primary { background:var(--yellow-500); color:var(--ink-900); border-color:transparent; box-shadow:var(--shadow-1); font-weight:700; }
.al-btn--navy { background:var(--ink-900); color:var(--white); border-color:transparent; font-weight:600; }
.al-btn--navy:hover { background:transparent; border-color:var(--ink-900); color:var(--ink-900); }  /* see the filled-CTA hover rule below */
.al-btn--primary:hover { background:transparent; border-color:var(--yellow-500); color:var(--ink-900); box-shadow:none; }
.al-btn--on-dark { border-color:transparent; box-shadow:none; }
.al-btn--secondary { background:var(--white); color:var(--ink-900); border-color:var(--ink-200); }
.al-btn--secondary:hover { border-color:var(--ink-900); }

/* chips */
.al-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; border-radius:var(--r-pill); padding:4px 12px;
}
.al-chip .icon { width:12px; height:12px; }
.al-chip--safe { background:var(--safe-bg); color:var(--safe-text); }
.al-chip--spam { background:var(--spam-bg); color:var(--spam-text); }
.al-latency {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  color:var(--yellow-900); background:var(--yellow-100);
  border-radius:var(--r-pill); padding:5px 13px;
}
.al-latency i { width:7px; height:7px; border-radius:50%; background:var(--yellow-600); }
@keyframes al-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.al-latency i { animation:al-pulse 2s var(--ease-inout) infinite; }

/* scroll reveal */
.al-reveal { opacity:0; transform:translateY(12px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.al-reveal.is-in { opacity:1; transform:none; }

/* browser frame — shared mockup chrome */
.al-browser { border-radius:var(--r-media); overflow:hidden; border:1px solid var(--ink-100); box-shadow:var(--shadow-2); background:var(--white); }
.al-browser__bar { display:flex; align-items:center; gap:6px; background:var(--ink-50); border-bottom:1px solid var(--ink-100); padding:10px 14px; }
.al-browser__bar i { width:9px; height:9px; border-radius:50%; background:var(--ink-200); }
.al-browser__url {
  flex:1; margin-left:10px; background:var(--white); border:1px solid var(--ink-100);
  border-radius:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-500); padding:4px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================================
   PATTERN 01 · NAV
   ============================================================ */
.al-nav {
  position:fixed; top:0; left:0; right:0; z-index:50; background:transparent;
  transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.al-nav.is-scrolled { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--ink-100); }
.al-nav__row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4); height:72px; }
@media (min-width:960px){ .al-nav__row { grid-template-columns:1fr auto 1fr; } }
.al-nav__logo { justify-self:start; }
.al-nav__logo img { height:34px; width:auto; display:block; }
.al-nav__toggle, .al-nav__mobile-only { display:none; }
.al-nav__links { display:none; align-items:center; gap:var(--sp-6); list-style:none; padding:0; margin:0; }
/* Inactive nav sits on brand grey (ink-500, 4.70:1 on white); the current section
   is ink-900 at weight 700. That widens active-vs-inactive from 1.90:1 to 3.59:1. */
.al-nav__links a { font-size:15px; font-weight:600; color:var(--ink-500); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
.al-nav__links a:hover { color:var(--ink-900); }
.al-nav__links a.is-current { color:var(--ink-900); font-weight:700; }
.al-nav__right { display:flex; align-items:center; gap:var(--sp-6); justify-self:end; grid-column:3; }
.al-nav__login { display:none; font-size:15px; font-weight:600; color:var(--ink-600); text-decoration:none; }
.al-nav__login:hover { color:var(--ink-900); }
@media (min-width:960px){
  .al-nav__links { display:flex; }
  .al-nav__login { display:inline; }
}
@media (max-width:959px){
  .al-nav__row { grid-template-columns:1fr auto; }
  .al-nav__right { display:none; }
  .al-nav__toggle { display:flex; grid-column:2; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; border:1px solid var(--ink-200); border-radius:8px; background:var(--white); cursor:pointer; }
  .al-nav__toggle span { display:block; width:19px; height:2px; border-radius:2px; background:var(--ink-900); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
  .al-nav__toggle:focus-visible { outline:3px solid var(--emerald-600); outline-offset:3px; }
  .al-nav.is-menu-open .al-nav__toggle span:first-child { transform:translateY(7px) rotate(45deg); }
  .al-nav.is-menu-open .al-nav__toggle span:nth-child(2) { opacity:0; }
  .al-nav.is-menu-open .al-nav__toggle span:last-child { transform:translateY(-7px) rotate(-45deg); }
  .al-nav.is-menu-open { background:var(--white); box-shadow:var(--shadow-2); }
  .al-nav.is-menu-open .al-nav__links { display:flex; }
  .al-nav__links { position:absolute; top:72px; left:0; right:0; max-height:calc(100vh - 72px); overflow-y:auto; flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 22px; background:var(--white); box-shadow:var(--shadow-2); }
  .al-nav__links > li { padding:14px 0; border-bottom:1px solid var(--ink-100); }
  .al-nav__links > li > a { font-size:17px; color:var(--ink-900); }
  .al-nav__mobile-only { display:block; }
  .al-nav__mobile-only:last-child a { display:block; padding:12px; border-radius:8px; background:var(--yellow-500); text-align:center; }
}

/* ============================================================
   PATTERN 02 · HERO
   ============================================================ */
.al-hero {
  padding:calc(var(--sp-12) + 72px) 0 var(--sp-8); text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 75% 115% at 0% 0%, rgba(203,215,236,.4) 0%, rgba(203,215,236,0) 58%),
    linear-gradient(180deg, #EEF1F7 0%, #EDF0F6 45%, #FBFBFC 88%, var(--white) 100%);
}
.al-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("../img/noisy-texture-100x100.webp"); background-repeat:repeat;
  background-size:180px 180px; image-rendering:pixelated; opacity:.6;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
@media (min-width:768px){ .al-hero { padding-top:calc(56px + 72px); } }
/* soft light shafts, top-aligned with the header frame.
   ONE component, shared by the homepage hero (.al-hero) and every subpage
   header (.al-phero). Both headers already share an identical gradient +
   noise treatment; these rays complete it. Edit the values here only —
   every header inherits the change. */
.al-hero__rays, .al-phero__rays { position:absolute; inset:0; pointer-events:none; }
.al-hero__ray, .al-phero__ray {
  position:absolute; top:0; display:block; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  filter:blur(40px); transform-origin:50% 0;
}
.al-hero__ray--left,  .al-phero__ray--left  { left:calc(50% - 460px); top:-120px; width:clamp(140px,18vw,280px); height:135%; transform:rotate(-45deg); }
.al-hero__ray--right, .al-phero__ray--right { right:max(1%, calc((100% - 1200px)/2 + 112px)); top:-120px; width:clamp(120px,16vw,240px); height:120%; transform:rotate(-45deg); opacity:.85; }
.al-hero__ray--logo,  .al-phero__ray--logo  { left:max(-260px, calc((100% - 1200px)/2 - 335px)); top:-120px; width:clamp(120px,16vw,240px); height:90%; transform:rotate(-45deg); opacity:.85; }
.al-hero > .al-container { display:flex; flex-direction:column; position:relative; z-index:1; }
.al-hero__reviews {
  display:grid; grid-template-columns:1fr; gap:var(--sp-4);
  max-width:1020px; margin:var(--sp-8) auto var(--sp-4); width:100%; order:7;
}
@media (min-width:820px){
  .al-hero__reviews { grid-template-columns:repeat(3,1fr); margin:6px auto 66px; order:0; }
}
.al-review-card {
  background:transparent; border:none; box-shadow:none;
  padding:0 12px; text-align:center;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  opacity:0; filter:blur(12px);
  transition:transform var(--dur-slow) var(--ease-out),
             filter .9s var(--ease-out), opacity .9s var(--ease-out);
}
.al-reveal.is-in .al-review-card { opacity:1; filter:blur(0); }

.al-review-card:nth-child(2) { transition-delay:.15s; }
.al-review-card:nth-child(3) { transition-delay:.3s; }
.al-review-card footer { font-size:12.5px; color:var(--ink-500); }
.al-review-card footer b { color:var(--ink-700); font-weight:600; }
.al-review-card__stars { color:var(--yellow-500); display:flex; gap:2px; }
.al-review-card__stars .icon { width:17px; height:17px; }
.al-review-card blockquote { margin:0; font-size:15px; font-weight:700; color:var(--ink-900); line-height:1.5; }
.al-review-card footer { font-size:13px; color:var(--ink-500); margin-top:auto; }
.al-review-card footer b { color:var(--ink-700); font-weight:600; }
.al-hero__h1 { font-size:var(--text-display); font-weight:800; letter-spacing:var(--track-display); line-height:1.16; max-width:960px; margin:0 auto; }
.al-hero__sub { font-size:var(--text-lead); color:var(--ink-600); line-height:1.55; max-width:900px; margin:var(--sp-6) auto 0; }
.al-hero__ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-8); }
.al-hero__meta { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-6); padding:0; list-style:none; }
.al-hero__meta li { font-size:var(--text-small); font-weight:600; color:var(--ink-600); display:flex; align-items:center; gap:7px; }
.al-hero__meta .icon { color:var(--emerald-700); width:17px; height:17px; }

/* ============================================================
   PATTERN 03 · DEMO TABS (video-only under tabs)
   ============================================================ */
.al-demo { background:var(--white); padding:var(--sp-8) 0 var(--sp-12); }
.al-demo__head { text-align:center; max-width:var(--prose); margin:0 auto var(--sp-8); }
.al-tabs { display:flex; justify-content:safe center; overflow-x:auto; padding-bottom:2px; }
.al-tabs__track { display:inline-flex; flex:none; gap:4px; background:var(--ink-50); border:1px solid var(--ink-100); border-radius:var(--r-pill); padding:4px; }
.al-tab {
  font-size:14.5px; font-weight:500; color:var(--ink-400);
  padding:9px 20px; border-radius:var(--r-pill); border:none; background:transparent; cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.al-tab:hover { color:var(--ink-900); }
.al-tab[aria-selected="true"] { background:var(--white); color:var(--emerald-800); font-weight:700; box-shadow:var(--shadow-1); }
.al-demo__caption { text-align:center; font-size:18px; font-weight:600; color:var(--ink-600); margin:var(--sp-6) 0; }
.al-demo__stage { position:relative; max-width:1136px; margin:0 auto; }
.al-demo__panel { display:none; }
.al-demo__panel.is-active { display:block; animation:al-fadein var(--dur-base) var(--ease-out); }
@keyframes al-fadein { from{opacity:0} to{opacity:1} }
.al-demo__panel .al-browser { box-shadow:var(--shadow-3), var(--glow-yellow); }
.al-demo__video { display:block; width:100%; height:auto; aspect-ratio:16/9; }

/* demo mockup internals (stand-ins until video production) */
.al-mock {
  padding:clamp(20px,4vw,48px); min-height:clamp(380px,38vw,560px);
  display:flex; flex-direction:column; justify-content:center;
}
.al-mock__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-4); gap:var(--sp-4); flex-wrap:wrap; }
.al-mock__title { font-size:15px; font-weight:700; }
.al-mock__row {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  padding:12px 0; border-bottom:1px solid var(--ink-50); font-size:14px;
  opacity:0; transform:translateY(6px);
}
.al-mock__row span em { font-style:normal; color:var(--ink-500); }
.al-mock.is-anim .al-mock__row { animation:al-rowin .5s var(--ease-out) forwards; }
.al-mock.is-anim .al-mock__row:nth-child(2){animation-delay:.15s}
.al-mock.is-anim .al-mock__row:nth-child(3){animation-delay:.65s}
.al-mock.is-anim .al-mock__row:nth-child(4){animation-delay:1.15s}
.al-mock.is-anim .al-mock__row:nth-child(5){animation-delay:1.65s}
.al-mock.is-anim .al-mock__row:nth-child(6){animation-delay:2.15s}
@keyframes al-rowin { to{opacity:1; transform:none} }
.al-mock__toggle { width:40px; height:22px; border-radius:var(--r-pill); background:var(--ink-200); position:relative; transition:background .3s var(--ease-out); flex:none; }
.al-mock__toggle::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--white); transition:transform .3s var(--ease-out); }
.al-mock.is-anim .al-mock__toggle { background:var(--emerald-600); }
.al-mock.is-anim .al-mock__toggle::after { transform:translateX(18px); }
.al-code { background:#0E1F1A; color:#C9E5DA; border-radius:var(--r-control); padding:18px 20px; font-family:var(--font-mono); font-size:13px; line-height:1.75; overflow-x:auto; margin:0; }
.al-code .c{color:#6E8F82} .al-code .g{color:#6EE7B7} .al-code .y{color:#F8CF52} .al-code .b{color:#7FB2F0}
.al-mock--dev { display:grid; gap:var(--sp-6); align-content:center; }
@media (min-width:820px){ .al-mock--dev { grid-template-columns:1.3fr 1fr; align-items:start; } }
.al-mock__verdict { border:1px solid var(--ink-100); border-radius:var(--r-control); padding:var(--sp-4); font-family:var(--font-mono); font-size:13px; display:grid; gap:10px; opacity:0; }
.al-mock.is-anim .al-mock__verdict { animation:al-rowin .5s var(--ease-out) .9s forwards; }
.al-mock__verdict dt { color:var(--ink-500); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.al-mock__verdict dd { margin:2px 0 0; font-weight:600; }
.al-mock__bar { height:6px; border-radius:3px; background:var(--ink-50); overflow:hidden; }
.al-mock__bar i { display:block; height:100%; width:0; border-radius:3px; background:var(--spam); }
.al-mock.is-anim .al-mock__bar i { transition:width 1.2s var(--ease-out) .9s; width:98%; }

/* ============================================================
   PATTERN 04 · LOGO TRUST BAR
   ============================================================ */
.al-logos { padding:var(--sp-8) 0 var(--sp-16); }
.al-logos__line { text-align:center; font-size:20px; color:var(--ink-600); max-width:860px; margin:0 auto var(--sp-8); }
.al-logos__line b { font-family:var(--font-mono); font-weight:600; color:var(--emerald-800); }
.al-logos__row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-8) var(--sp-12); }
.al-logos__row img {
  height:26px; width:auto; opacity:0;
  filter:blur(12px);
  transition:filter .9s var(--ease-out), opacity .9s var(--ease-out);
}
.al-reveal.is-in .al-logos__row img { opacity:.55; filter:blur(0); }
.al-logos__row img:nth-child(2){transition-delay:.08s} .al-logos__row img:nth-child(3){transition-delay:.16s}
.al-logos__row img:nth-child(4){transition-delay:.24s} .al-logos__row img:nth-child(5){transition-delay:.32s}
.al-logos__row img:nth-child(6){transition-delay:.4s}
.al-reveal.is-in .al-logos__row img:hover { opacity:1; transition-delay:0s; }

/* ============================================================
   PATTERN 05 · FEATURES (icon-left rows, no cards)
   ============================================================ */
.al-features { padding:var(--sp-24) 0; }
.al-features__grid { display:grid; gap:var(--sp-12) var(--sp-12); }
@media (min-width:680px){ .al-features__grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .al-features__grid { grid-template-columns:1fr 1fr 1fr; column-gap:var(--sp-12); row-gap:56px; } }
.al-feature { display:flex; gap:var(--sp-4); align-items:flex-start; }
.al-feature__icon {
  flex:none; display:flex; align-items:flex-start; justify-content:center;
  color:var(--emerald-600); padding-top:2px;
}
.al-feature__icon .icon { width:26px; height:26px; }
.al-feature h4 { font-size:17px; font-weight:700; margin-bottom:4px; }
.al-feature p { font-size:var(--text-small); color:var(--ink-600); line-height:1.55; }

/* ============================================================
   PATTERN 06 · WHY TRUST (alternating rows)
   ============================================================ */
.al-trust { padding:var(--sp-24) 0; background:var(--bg-warm); }
.al-trust__row { display:grid; gap:var(--sp-8); align-items:center; }
.al-trust__row + .al-trust__row { margin-top:var(--sp-24); }
@media (min-width:880px){
  .al-trust__row { grid-template-columns:1fr 1.15fr; gap:var(--sp-16); }
  .al-trust__row--flip .al-trust__copy { order:2; }
  .al-trust__row--flip .al-trust__visual { order:1; }
}
.al-trust__copy h3 { font-size:var(--text-h3); font-weight:700; letter-spacing:-0.01em; line-height:1.25; margin-bottom:var(--sp-4); }
.al-trust__copy p { color:var(--ink-600); }
.al-trust__visual {
  background:var(--white); border:none; border-radius:10px;
  box-shadow:none; width:100%; max-width:480px; aspect-ratio:1.08/1;
  margin:0 auto; padding:18px; position:relative; overflow:hidden;
  opacity:0; filter:blur(14px);
  transition:filter .9s var(--ease-out), opacity .9s var(--ease-out);
  transition-delay:.15s;
}
.al-reveal.is-in .al-trust__visual { opacity:1; filter:blur(0); }

/* ---- per-concept graphic helpers ---- */
.al-g-panel {
  position:absolute; background:var(--bg-warm); border-radius:10px; padding:26px 28px;
}
.al-g-label { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
.al-g-num { font-family:var(--font-mono); font-size:54px; font-weight:600; letter-spacing:-0.03em; line-height:1; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.al-g-num small { font-size:21px; color:var(--emerald-700); }
.al-up { display:flex; gap:4px; margin:14px 0 10px; }
.al-up i { flex:1; height:34px; border-radius:4px; background:var(--emerald-500); }
.al-up i.blip { background:var(--yellow-600); }
.al-g-term {
  position:absolute; background:#0E1F1A; border-radius:10px; padding:24px 26px;
  font-family:var(--font-mono); font-size:13px; line-height:2; color:#C9E5DA;
  }
.al-g-term .k { color:#6E8F82; }
.al-g-term .r { color:#F27E92; }
.al-g-term .g { color:#6EE7B7; }
.al-g-term .hl { background:rgba(242,126,146,.12); border-radius:4px; padding:0 6px; margin:0 -6px; }
.al-scene .al-browser { position:absolute; }
.al-scene .al-browser .al-browser__bar { padding:7px 10px; }
.al-scene .al-browser .mini-body { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:600; }

/* ---- figure grammar: cropped photo + one soft UI card ---- */
.al-fig-photo { position:absolute; border-radius:10px; object-fit:cover; z-index:1; }
.al-fig-card {
  position:absolute; z-index:2; background:var(--bg-warm); border-radius:10px;
  padding:20px 22px;
}
.al-fig-head { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; }
.al-fig-head .icon { width:20px; height:20px; color:var(--emerald-800); }
.al-fig-meta { display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:12px; }
.al-fig-date { font-family:var(--font-mono); font-size:13px; color:var(--ink-400); }
.al-fig-inner {
  background:var(--white); border-radius:14px; padding:15px 18px; margin-top:12px;
  box-shadow:0 2px 6px rgba(20,27,56,.05);
}
.al-fig-row { display:flex; justify-content:space-between; align-items:baseline; font-size:16px; font-weight:600; gap:12px; }
.al-fig-row .val { font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; }
.al-fig-sub { font-family:var(--font-mono); font-size:12px; color:var(--ink-400); margin-top:5px; }
.al-fig-top { display:flex; align-items:center; gap:12px; }
.al-fig-tile {
  flex:none; width:38px; height:38px; border-radius:11px; background:var(--emerald-950);
  display:flex; align-items:center; justify-content:center; color:var(--white);
}
.al-fig-tile .icon { width:19px; height:19px; }
.al-fig-name { font-size:15.5px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-fig-amount { font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--emerald-700); font-variant-numeric:tabular-nums; }
.al-tl { margin-top:16px; }
.al-tl-row { display:flex; align-items:center; gap:12px; }
.al-tl-row + .al-tl-row { margin-top:2px; }
.al-tl-gap { width:26px; display:flex; justify-content:center; }
.al-tl-gap i { width:2px; height:12px; background:var(--emerald-200); border-radius:1px; display:block; }
.al-tl-badge {
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--emerald-700);
  display:flex; align-items:center; justify-content:center; color:var(--white);
}
.al-tl-badge .icon { width:12px; height:12px; }
.al-tl-badge--warn { background:var(--yellow-600); }
.al-tl-label { font-size:14.5px; font-weight:600; white-space:nowrap; }
.al-tl-time { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-400); margin-left:auto; }

/* ---- scene language: masked photo + floating UI ---- */
.al-scene { position:relative; width:100%; height:100%; }
/* photo-backed scenes scale the image past the frame to shift it — clip it or
   the overflow spills over the block below. */
.al-scene--clip { overflow:hidden; border-radius:10px; }
/* foot photo — the closing minicard becomes a photograph carrying the same
   key/value facts as floating pills. Pills wrap: nowrap chips have overflowed
   their band before. */
.al-fp { position:relative; margin:0; border-radius:10px; overflow:hidden; }
.al-fp__rows { position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.al-fp__kv { display:inline-flex; align-items:center; gap:8px; max-width:100%;
  background:var(--white); border-radius:8px; padding:7px 11px; font-size:12px;
  line-height:1.3; color:var(--ink-600); box-shadow:var(--shadow-2); }
.al-fp__kv b { flex:none; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--emerald-800); }
.al-fp__kv--title { font-weight:700; color:var(--ink-900); }
.al-scene__photo { position:absolute; object-fit:cover; border-radius:14px; }
.al-pill {
  position:absolute; background:var(--white); border-radius:10px;
  box-shadow:var(--shadow-2); padding:10px 14px; z-index:2;
}
.al-pill__title { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; }
.al-pill__title .icon { width:13px; height:13px; color:var(--emerald-600); }
.al-pill__sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-500); margin-top:3px; }
.al-pill--chip { border-radius:var(--r-pill); padding:7px 14px; }
.al-scene__label {
  position:absolute; z-index:2; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500);
  background:rgba(255,255,255,.9); border-radius:6px; padding:4px 9px; backdrop-filter:blur(4px);
}
.al-minicard {
  /* padding matches the panel above it (18/20) — the two stacked cards in a
     graphic were using different internal padding, which read as a spacing
     bug. Changing this changes the card's height, so --foot below moves too. */
  position:absolute; background:var(--white); border-radius:10px; border:1px solid var(--ink-100);
  padding:18px 20px; z-index:2; font-size:12.5px;
}
.al-minicard h6 { margin:0 0 8px; font-size:12px; font-weight:700; }
/* airy — opt-in looser row rhythm for blocks whose stacked cards read as
   cramped. graphics_lib referenced al-minicard--airy long before it had a rule.
   Raising row padding grows the card, so --foot is corrected further down. */
.al-minicard--airy h6 { margin-bottom:11px; }
.al-minicard--airy .al-vmock__kv { padding:12.5px 0; }
.al-tl--airy .al-tl-row + .al-tl-row { margin-top:5px; }
.al-tl--airy .al-tl-gap i { height:17px; }
.al-minirow { display:flex; align-items:center; gap:8px; margin-top:6px; }
.al-minirow .who { flex:none; width:76px; font-weight:600; font-size:11.5px; }
.al-minirow .track { flex:1; height:5px; border-radius:3px; background:var(--ink-50); overflow:hidden; }
.al-minirow .track i { display:block; height:100%; border-radius:3px; }
.al-minirow em { font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-500); flex:none; width:56px; text-align:right; }
/* transparency inspector */
.al-inspect {
  position:absolute; inset:auto 26px 26px 26px; top:64px; background:var(--white);
  border-radius:14px; box-shadow:var(--shadow-2); padding:20px 22px; z-index:1;
  font-family:var(--font-mono); font-size:13px;
}
.al-inspect__head { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-sans); font-weight:700; font-size:13.5px; margin-bottom:12px; }
.al-inspect__kv { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--ink-50); }
.al-inspect__kv:last-child { border-bottom:none; }
.al-inspect__kv b { font-weight:600; }
.al-inspect__meter { display:flex; align-items:center; gap:10px; flex:1; margin-left:18px; }
.al-inspect__meter .track { flex:1; height:6px; border-radius:3px; background:var(--ink-50); overflow:hidden; }
.al-inspect__meter .track i { display:block; height:100%; width:98%; background:var(--spam); border-radius:3px; }
.al-scene__grid {
  position:absolute; inset:0; border-radius:14px;
  background-image:radial-gradient(var(--ink-100) 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
}
/* status timeline (fallbacks) */
.al-status { display:grid; gap:0; }
.al-status__row { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:12px; }
.al-status__row i { flex:none; width:9px; height:9px; border-radius:50%; }
.al-status__row.ok i { background:var(--emerald-500); }
.al-status__row.warn i { background:var(--yellow-600); }
.al-status__row b { font-family:var(--font-mono); font-weight:600; font-size:11.5px; color:var(--ink-600); }
/* platform chips (one product) */
.al-scene__chips { position:absolute; z-index:2; display:flex; flex-wrap:wrap; gap:8px; }
.al-scene__chips span {
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  background:var(--white); box-shadow:var(--shadow-2); border-radius:7px; padding:6px 11px; color:var(--ink-700);
}
.al-trust__cta { margin-top:var(--sp-6); align-self:flex-start; border-radius:6px; }
.al-vmock { font-size:13px; }
.al-vmock__label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin-bottom:12px; }
.al-vmock__row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.al-vmock__row span:first-child { flex:none; width:96px; font-weight:600; font-size:12.5px; }
.al-vmock__row .al-mock__bar { flex:1; }
.al-vmock__row em { font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--ink-500); flex:none; width:66px; text-align:right; }
.al-vmock__bar-al i { width:4%; background:var(--yellow-500); }
.al-vmock__bar-slow1 i { width:62%; background:var(--ink-200); }
.al-vmock__bar-slow2 i { width:88%; background:var(--ink-200); }
.al-vmock__field { height:34px; border:1px solid var(--ink-100); border-radius:var(--r-control); background:var(--white); margin-bottom:10px; }
.al-vmock__captcha { border:1px dashed var(--spam); color:var(--spam-text); border-radius:var(--r-control); font-size:12px; padding:9px 12px; display:flex; align-items:center; gap:8px; background:var(--spam-bg); }
.al-vmock__grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:start; }
.al-vmock__card { background:var(--white); border:1px solid var(--ink-100); border-radius:var(--r-control); padding:14px; }
.al-vmock__card h5 { margin:0 0 8px; font-size:12px; font-weight:700; }
.al-vmock__kv { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; padding:9px 0; border-bottom:1px solid var(--ink-50); }
.al-vmock__kv:last-child { border-bottom:none; }
.al-vmock__kv b { font-weight:600; }
.al-vmock__chips { display:flex; flex-wrap:wrap; gap:8px; }
.al-vmock__chips span { font-family:var(--font-mono); font-size:11.5px; font-weight:600; background:var(--white); border:1px solid var(--emerald-200); color:var(--emerald-800); border-radius:6px; padding:4px 10px; }

/* ============================================================
   PATTERN 07 · VOICES (testimonials + wp.org strip)
   ============================================================ */
.al-voices { padding:var(--sp-24) 0; background:var(--white); }
.al-voices__grid { display:grid; gap:var(--sp-4); }
@media (min-width:880px){ .al-voices__grid { grid-template-columns:1.5fr 1fr; } }
.al-quote { background:var(--white); border:1px solid var(--ink-100); border-radius:var(--r-card); padding:var(--sp-8); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:var(--sp-6); }
.al-quote blockquote { margin:0; font-size:16px; font-weight:500; line-height:1.6; }
.al-quote--featured blockquote { font-size:clamp(18px,2vw,22px); line-height:1.55; }
.al-quote__who { display:flex; align-items:center; gap:12px; margin-top:auto; }
.al-quote__avatar { width:44px; height:44px; border-radius:50%; background:var(--ink-50); color:var(--ink-900); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; object-fit:cover; }
.al-quote__who b { display:block; font-size:14.5px; }
.al-quote__who span { font-size:13px; color:var(--ink-500); }
.al-voices__stack { display:grid; gap:var(--sp-4); }
.al-voices__stack .al-quote { padding:var(--sp-6); }
.al-voices__stack blockquote { font-size:14.5px; }

.al-wporg { margin-top:var(--sp-12); }
.al-wporg__head { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.al-wporg__lockup { display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; text-decoration:none; color:var(--ink-900); }
.al-wporg__stars { color:var(--yellow-500); display:flex; gap:2px; }
.al-wporg__stars .icon { width:18px; height:18px; }
.al-wporg__lockup b { font-family:var(--font-mono); font-weight:600; font-size:15px; }
.al-wporg__lockup span { font-size:14px; color:var(--ink-600); }
.al-wporg__controls { display:flex; align-items:center; gap:8px; }
.al-wporg__count { margin-right:8px; font-family:var(--font-mono); font-size:11px; color:var(--ink-500); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.al-wporg__arrow { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ink-100); border-radius:50%; background:var(--white); color:var(--emerald-800); font-size:22px; line-height:1; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.al-wporg__arrow:hover:not(:disabled) { background:var(--emerald-50); border-color:var(--emerald-400); transform:translateY(-2px); }
.al-wporg__arrow:disabled { opacity:.38; cursor:not-allowed; }
.al-wporg__arrow:focus-visible,.al-review a:focus-visible,.al-wporg__row:focus-visible { outline:2px solid var(--emerald-700); outline-offset:3px; }
.al-wporg__row { display:flex; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px; overscroll-behavior-x:contain; padding:2px 2px var(--sp-4); scrollbar-width:thin; scrollbar-color:var(--ink-200) transparent; }
.al-review { flex:0 0 calc((100% - 2 * var(--sp-4)) / 3); min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--ink-100); border-radius:var(--r-media); padding:var(--sp-6); font-size:14px; color:var(--ink-600); }
.al-review__stars { color:var(--yellow-500); display:flex; gap:1px; margin-bottom:12px; }
.al-review__stars .icon { width:13px; height:13px; }
.al-review h3 { margin:0 0 10px; font-size:17px; line-height:1.35; font-weight:700; color:var(--ink-900); }
.al-review p { line-height:1.55; margin:0 0 var(--sp-6); }
.al-review footer { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--ink-100); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-500); }
.al-review footer a { color:var(--emerald-800); font-weight:600; text-decoration:none; }
.al-review footer a:hover { text-decoration:underline; }
@media (max-width:879px) { .al-review { flex-basis:calc((100% - var(--sp-4)) / 2); } }
@media (max-width:639px) {
  .al-wporg__head { align-items:flex-start; flex-direction:column; }
  .al-wporg__controls { width:100%; justify-content:flex-end; }
  .al-wporg__count { margin-right:auto; }
  .al-review { flex-basis:88%; }
}
@media (prefers-reduced-motion:reduce) { .al-wporg__arrow { transition:none; } }

/* ============================================================
   PATTERN 08 · FAQ
   ============================================================ */
.al-faq { padding:var(--sp-24) 0; }
.al-faq__list { max-width:780px; margin:0 auto; }
.al-faq__contact { display:inline-flex; align-items:center; gap:8px; margin-top:var(--sp-4); font-weight:600; font-size:15px; text-decoration:none; }
.al-faq__item { border-bottom:1px solid var(--ink-100); }
.al-faq__q {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  background:none; border:none; text-align:left; cursor:pointer;
  font-size:17px; font-weight:600; color:var(--ink-900); padding:28px 4px;
}
.al-faq__q .icon { width:16px; height:16px; color:var(--emerald-800); }
.al-faq__ic-minus { display:none; }
.al-faq__item.is-open .al-faq__ic-plus { display:none; }
.al-faq__item.is-open .al-faq__ic-minus { display:inline-block; }
.al-faq__a { overflow:hidden; max-height:0; transition:max-height var(--dur-slow) var(--ease-out); }
.al-faq__a p { padding:0 4px 28px; color:var(--ink-600); font-size:15.5px; max-width:60ch; }

/* ============================================================
   PATTERN 09 · FINAL CTA
   ============================================================ */
.al-cta {
  background:var(--emerald-950);
  background-image:linear-gradient(rgba(248,199,62,.05) 1px, transparent 1px);
  background-size:100% 8px;
  padding:80px 0 20px; text-align:center; position:relative; overflow:hidden;
}
.al-cta__funnel { display:block; width:100%; height:auto; margin-top:40px; pointer-events:none; overflow:visible; }
@media (prefers-reduced-motion: reduce){ .al-cta__movers { display:none; } }
.al-cta__h2 { font-size:clamp(2.25rem,4vw,3.5rem); font-weight:800; letter-spacing:var(--track-h2); line-height:1.12; color:var(--white); max-width:1020px; margin:0 auto; }
.al-cta__sub { font-size:var(--text-lead); color:rgba(255,255,255,.75); max-width:720px; margin:var(--sp-4) auto var(--sp-8); line-height:1.55; }
.al-cta__meta { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-6); padding:0; list-style:none; }
.al-cta__meta li { font-size:var(--text-small); color:rgba(255,255,255,.65); display:flex; align-items:center; gap:7px; }
.al-cta__meta .icon { color:var(--emerald-400); width:15px; height:15px; }

/* ============================================================
   PATTERN 10 · FOOTER (white)
   ============================================================ */
.al-footer { background:var(--white); padding:var(--sp-16) 0 var(--sp-8); }
.al-footer__grid { display:grid; gap:var(--sp-8); }
@media (min-width:880px){ .al-footer__grid { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-12); } }
.al-footer__brand img { height:32px; width:auto; margin-bottom:var(--sp-4); }
.al-footer__brand p { font-size:14px; color:var(--ink-500); max-width:280px; line-height:1.6; }
.al-footer__social { display:flex; gap:var(--sp-4); margin-top:var(--sp-6); }
.al-footer__social a { color:var(--ink-500); transition:color var(--dur-base) var(--ease-out); }
.al-footer__social a:hover { color:var(--emerald-800); }
.al-footer__social .icon { width:20px; height:20px; }
.al-footer__col h5 {
  margin:0 0 var(--sp-4); font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-900);
}
.al-footer__col ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.al-footer__col a { font-size:14.5px; color:var(--ink-600); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
.al-footer__col a:hover { color:var(--ink-900); }
.al-footer__legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-4); border-top:1px solid var(--ink-50); margin-top:var(--sp-12); padding-top:var(--sp-6); font-size:14px; color:var(--ink-500); }
.al-footer__legal a { color:var(--ink-500); text-decoration:none; margin-left:var(--sp-4); }
.al-footer__legal a:hover { color:var(--ink-900); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .al-reveal { opacity:1; transform:none; }
  .al-mock__row, .al-mock__verdict { opacity:1 !important; transform:none !important; }
  .al-mock .al-mock__bar i { width:98%; }
}

/* ---- G2: CAPTCHA vs ActiveLayer comparison ---- */
.al-cmp-label { position:absolute; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; z-index:3; }
.al-cmp-card { position:absolute; background:var(--white); border:none; border-radius:10px; padding:13px; display:grid; gap:8px; z-index:2; }
.al-cmp-card--ghost { background:var(--ink-25); opacity:.85; }
.al-cmp-card--live { background:var(--bg-warm); }
.al-cmp-field { height:32px; border-radius:6px; background:var(--ink-50); border:1px solid var(--ink-100); font-size:11.5px; color:var(--ink-400); display:flex; align-items:center; padding:0 9px; }
.al-cmp-card--live .al-cmp-field { background:var(--white); }
.al-cmp-captcha { border:1.5px dashed var(--spam); background:var(--spam-bg); color:var(--spam-text); border-radius:6px; font-size:11.5px; font-weight:600; display:flex; gap:8px; align-items:center; padding:8px 10px; }
.al-cmp-captcha i { flex:none; width:12px; height:12px; border:1.5px solid var(--spam); border-radius:3px; background:var(--white); }
.al-cmp-btn { height:34px; border-radius:6px; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; }
.al-cmp-btn .icon { width:12px; height:12px; }
.al-cmp-btn--dead { background:var(--ink-100); color:var(--ink-400); }
.al-cmp-btn--go { background:var(--emerald-700); color:var(--white); }
.al-cmp-pill { position:absolute; font-size:12px; font-weight:700; background:var(--yellow-100); border:1px solid var(--yellow-200); border-radius:999px; padding:5px 12px; display:flex; gap:6px; align-items:center; z-index:3; white-space:nowrap; }
.al-cmp-pill .icon { width:12px; height:12px; }
/* the negative outcome uses the semantic spam red, not the yellow accent */
.al-cmp-pill--bad { background:var(--spam-bg); border-color:var(--spam); color:var(--spam-text); }
.al-vs { position:absolute; width:38px; height:38px; border-radius:50%; background:var(--white); border:1px solid var(--ink-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:600; z-index:4; }
.al-ring { position:absolute; border:1.5px dashed var(--ink-100); border-radius:50%; z-index:1; }
/* ---- G5: one-product orbit ---- */
.al-orb-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; background:var(--white); border:1px solid var(--emerald-200); display:flex; align-items:center; justify-content:center; z-index:3; }
.al-orb-center .icon { width:44px; height:44px; color:var(--emerald-600); }
.al-orb { position:absolute; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:var(--white); border:1px solid var(--ink-100); display:flex; align-items:center; justify-content:center; z-index:2; }
.al-orb img { width:36px; height:36px; object-fit:contain; display:block; }
.al-orb .icon { width:28px; height:28px; color:var(--ink-600); }

/* ============================================================
   PATTERN · PRICING PAGE
   ============================================================ */
.al-phero {
  padding:calc(48px + 72px) 0 40px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 75% 115% at 0% 0%, rgba(203,215,236,.4) 0%, rgba(203,215,236,0) 58%),
    linear-gradient(180deg, #EEF1F7 0%, #EDF0F6 45%, #FBFBFC 88%, var(--white) 100%);
}
.al-phero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("../img/noisy-texture-100x100.webp"); background-repeat:repeat;
  background-size:180px 180px; image-rendering:pixelated; opacity:.6;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
.al-phero .al-container { position:relative; z-index:1; }
.al-phero__h1 { font-size:clamp(2.25rem,4.4vw,3.5rem); font-weight:800; letter-spacing:var(--track-display); line-height:1.12; }
.al-billing { display:inline-flex; gap:4px; background:var(--ink-50); border:1px solid var(--ink-100); border-radius:var(--r-pill); padding:4px; }
/* The toggle belongs to the cards, not the hero. 58px below it leaves ~47px of
   clearance to the Most Popular badge, which protrudes 13px above the card. */
.al-plans__billing { text-align:center; margin-bottom:58px; }
.al-billing__opt {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-size:14.5px; font-weight:500; color:var(--ink-400); padding:9px 20px;
  border-radius:var(--r-pill); border:none; background:transparent; cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.al-billing__opt.is-on { background:var(--white); color:var(--emerald-800); font-weight:700; box-shadow:var(--shadow-1); }

.al-plans { padding:28px 0 var(--sp-24); background:var(--white); }
.al-plans__grid { display:grid; gap:var(--sp-6); align-items:stretch; }
@media (min-width:880px){ .al-plans__grid { grid-template-columns:1fr 1fr 1fr; } }
.al-plan {
  background:var(--bg-warm); border-radius:12px; padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
}
/* Pro card: same warm ground as the others, distinguished by a border and the
   badge instead of a dark fill. The emerald-950 fill forced white text on every
   child — worst on the tier dropdown, which was white-on-emerald-800 — and made
   the most important card the hardest one to read. */
.al-plan--featured {
  background:var(--bg-warm); position:relative;
  box-shadow:inset 0 0 0 2px var(--emerald-600), var(--shadow-2);
}
.al-plan__badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--yellow-500); color:var(--ink-900); font-size:12px; font-weight:700;
  border-radius:var(--r-pill); padding:4px 14px; white-space:nowrap;
}
.al-plan h3 { font-size:20px; font-weight:800; margin:0; }
.al-plan__price { font-family:var(--font-mono); font-size:44px; font-weight:600; letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; }
.al-plan__price small { font-size:14px; font-weight:500; color:inherit; opacity:.65; letter-spacing:0; }
.al-plan__meta { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-500); min-height:18px; }
/* This select only ever appears on the dark featured card. White read as a
   pasted-on block, so it uses brand green (emerald-800 = 1.97:1 against the
   card, white text at 7.68:1) and draws its own chevron — the native arrow's
   right-hand spacing is not controllable, which caused the gap. */
.al-plan__tier select {
  width:100%; height:42px; font-family:var(--font-sans); font-size:14.5px; font-weight:600;
  border:none; border-radius:8px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  padding:0 42px 0 14px;
  color:var(--ink-900);
  background-color:var(--white);
  box-shadow:inset 0 0 0 1px var(--ink-200);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23434960' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:15px 15px;
  transition:background-color var(--dur-base) var(--ease-out);
}
.al-plan__tier select:hover { box-shadow:inset 0 0 0 1px var(--emerald-600); }
.al-plan__tier select:focus-visible { outline:var(--focus-ring); outline-offset:2px; }
.al-plan__tier select option { color:var(--ink-900); background:var(--white); }
.al-plan__list { list-style:none; padding:0; margin:4px 0 0; display:grid; gap:9px; }
.al-plan__list li { font-size:14.5px; color:var(--ink-700); display:flex; align-items:center; gap:9px; }
.al-plan__list .icon { color:var(--emerald-600); width:15px; height:15px; flex:none; }
/* featured list icons now inherit the standard emerald-600 */
.al-plan__for { font-size:13px; color:var(--ink-500); margin-top:auto; padding-top:6px; }

.al-compare { padding:0 0 var(--sp-24); background:var(--white); }
.al-compare__wrap { overflow-x:auto; border-radius:12px; background:var(--bg-warm); padding:8px; }
.al-compare__table { border-collapse:collapse; width:100%; font-size:14.5px; min-width:560px; }
.al-compare__table th { font-size:15px; font-weight:800; text-align:left; padding:16px 20px; border-bottom:1px solid var(--ink-100); }
.al-compare__table td { padding:14px 20px; border-bottom:1px solid rgba(20,27,56,.05); color:var(--ink-700); }
.al-compare__table tr:last-child td { border-bottom:none; }
.al-compare__table td:first-child { font-weight:600; color:var(--ink-900); }
/* No tinted Pro column — all three read on the same bg-warm ground. */
.al-compare__table .hl { background:transparent; }
.al-compare__table .icon { color:var(--emerald-600); width:15px; height:15px; }

/* footer CTA hover: label + arrow go yellow on the dark band */
/* ── Filled-CTA hover, global rule ───────────────────────────────────────
   Every filled button hovers to a ghost of itself: the fill drops to
   transparent and the border takes the colour the fill just had, so the
   button keeps the exact same footprint and never appears to vanish.
   The text colour has to follow the GROUND, not the button — ink on light,
   the fill colour on dark — or the label disappears instead of the box.
   The icon keeps its translateX nudge from .al-btn:hover .icon. */
.al-cta .al-btn--primary:hover { color:var(--yellow-500); border-color:var(--yellow-500); }
.al-cta .al-btn--navy:hover,
.al-cta .al-btn--on-dark:hover { background:transparent; border-color:var(--white); color:var(--white); }

.al-orb-center img { width:44px; height:auto; display:block; }

.al-footer__viewall { text-decoration:underline; text-underline-offset:3px; font-weight:700 !important; color:var(--ink-900) !important; display:inline-flex; align-items:center; gap:6px; }
.al-footer__viewall .icon { width:14px; height:14px; }

/* ============================================================
   PATTERN · HOW IT WORKS — process steps
   ============================================================ */
.al-steps { padding:var(--sp-24) 0; background:var(--white); }
.al-steps__grid { display:grid; gap:var(--sp-6); }
@media (min-width:760px){ .al-steps__grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .al-steps__grid { grid-template-columns:repeat(4,1fr); gap:var(--sp-4); } }
.al-step {
  --step-pad-y:28px; --step-pad-x:24px;
  position:relative; background:var(--bg-warm); border-radius:12px;
  padding:var(--step-pad-y) var(--step-pad-x);
}
/* The numeral is optically aligned to the content box, not to its glyph box:
   measured at 102px, the digit sits 12.1px below the box top with 4.9px of
   right side bearing (0.119em / 0.048em). Subtracting those in em keeps the
   digit's ink flush with the icon top and the text right edge at any size. */
.al-step__n {
  /* -3px cancels the SVG's bleed margin (see step_numeral.py) so the stroke,
     not the box, sits flush with the card padding */
  position:absolute; top:calc(var(--step-pad-y) - 16px); right:calc(var(--step-pad-x) - 16px);
  z-index:0; pointer-events:none; overflow:visible;
}
/* The numeral is an outlined SVG, stroked entirely OUTSIDE the glyph via a
   mask (see step_numeral.py). A centred stroke — which is all
   -webkit-text-stroke can do — closed up the counters of 3 and 4 at this
   weight. The SVG box is the ink box plus the stroke, so it sits flush
   against the card padding with no optical compensation. */
.al-step__n text {
  /* NOT tabular-nums: tabular figures have different metrics from the
     proportional ones the INK table in step_numeral.py was measured from,
     which pushed 2/3/4 past the right edge of their own viewBox. Each
     numeral is its own SVG sized to its own glyph, so there is no column
     of figures to align and nothing to gain from tabular. */
  font-family:var(--font-sans); font-size:68px; font-weight:800;
}
.al-step__n > text { stroke:rgba(20,27,56,.16); }

/* the numeral is a watermark — content sits above it */
.al-step__icon, .al-step h3, .al-step p { position:relative; z-index:1; }
.al-step__icon { display:flex; align-items:center; color:var(--emerald-600); margin-bottom:18px; }
.al-step__icon .icon { width:28px; height:28px; }
.al-step h3 { font-size:17px; font-weight:700; line-height:1.3; margin-bottom:8px; max-width:16ch; }
.al-step p { font-size:14.5px; color:var(--ink-600); line-height:1.55; }

/* AI explainer tabs */
/* top padding was 0 — the tab section sat flush against the steps band above */
.al-ai { padding:var(--sp-24) 0; background:var(--white); }
.al-ai__stage { max-width:1000px; margin:var(--sp-8) auto 0; }
/* Stable stage height: every panel occupies the SAME grid cell, so the stage is
   always as tall as the tallest panel and switching tabs cannot shift the page.
   Deliberately not a hardcoded px height — that would silently go wrong the
   moment any tab's copy changes. Inactive panels use visibility (not display)
   so they still contribute height, but leave the a11y tree and take no clicks. */
.al-ai__stage { display:grid; }
.al-aipanel {
  grid-area:1 / 1; visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
}
.al-aipanel.is-active { visibility:visible; opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .al-aipanel { transition:none; } }
.al-aipanel__grid { display:grid; gap:var(--sp-8); background:var(--bg-warm); border-radius:12px; padding:36px 34px; }
@media (min-width:840px){ .al-aipanel__grid { grid-template-columns:1fr 1fr; gap:var(--sp-12); } }
/* All four tab panels share one height so the stage does not jump between tabs.
   Border-box value: the grid carries 36px of padding top and bottom, so this is
   the tallest panel's content area (535px) + 72px. Each --fill photo band and
   the behavior comparison shots absorb their own leftover, so no panel is left
   with a hole. Scoped to the 2-column breakpoint — stacked, panels size freely. */
@media (min-width:840px){ .al-ai .al-aipanel__grid { min-height:607px; } }
.al-aipanel h3 { font-size:var(--text-h3); font-weight:700; letter-spacing:-0.01em; line-height:1.25; margin-bottom:12px; }
.al-aipanel p { font-size:15.5px; color:var(--ink-600); line-height:1.6; }
.al-aipanel__list { list-style:none; padding:0; margin:0; display:grid; gap:12px; align-content:start; }
.al-aipanel__list li { font-size:14.5px; color:var(--ink-700); display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.al-aipanel__list .icon { color:var(--emerald-600); width:15px; height:15px; flex:none; margin-top:3px; }

/* ============================================================
   PATTERN · INTEGRATION / USE-CASE CARD GRIDS
   ============================================================ */
.al-icards { padding:var(--sp-24) 0; background:var(--white); }
.al-icards__head { max-width:720px; margin:0 auto var(--sp-12); text-align:center; }
.al-icards__grid { display:grid; gap:12px; }
@media (min-width:680px){ .al-icards__grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .al-icards__grid { grid-template-columns:repeat(3,1fr); } }
.al-icard {
  display:flex; align-items:flex-start; gap:14px; text-decoration:none;
  background:var(--white); border:1px solid var(--ink-100); border-radius:10px; padding:var(--icard-pad,18px);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.al-icards[style] .al-icard { background:var(--white); }
.al-icard:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.al-icard__icon {
  flex:none; width:36px; height:36px; border-radius:8px; background:var(--emerald-50);
  display:flex; align-items:center; justify-content:center; color:var(--emerald-700);
}
.al-icard__icon .icon { width:18px; height:18px; }
.al-icard b { display:block; font-size:15px; color:var(--ink-900); margin-bottom:3px; }
.al-icard > div span { font-size:13.5px; color:var(--ink-600); line-height:1.5; display:block; }
.al-icard__go { margin-left:auto; align-self:center; color:var(--ink-400); }
.al-icard__go .icon { width:15px; height:15px; }
.al-icard:hover .al-icard__go { color:var(--emerald-700); }

.al-ucards { padding:var(--sp-24) 0; background:var(--white); }
/* on the warm band the cards must invert, or card and section are the same
   colour and the cards vanish (the For Developers grid did exactly that). */
.al-ucards--warm { background:var(--bg-warm); }
.al-ucards--warm .al-ucard { background:var(--white); }
.al-ucards__grid { display:grid; gap:var(--sp-4); }
@media (min-width:720px){ .al-ucards__grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .al-ucards__grid { grid-template-columns:repeat(3,1fr); } }
/* 2-up: four cards in a 3-column grid leave an orphan on the second row.
   Used where a section has exactly four. */
.al-ucards__grid--2up { grid-template-columns:1fr; }
@media (min-width:720px){ .al-ucards__grid--2up { grid-template-columns:1fr 1fr; } }
.al-ucard {
  display:flex; flex-direction:column; gap:10px; text-decoration:none;
  background:var(--bg-warm); border-radius:12px; padding:28px 26px;
  transition:transform var(--dur-base) var(--ease-out);
}
.al-ucard:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.al-ucard__icon { display:flex; color:var(--emerald-600); }
.al-ucard__icon .icon { width:28px; height:28px; }
.al-ucard h3 { font-size:18px; font-weight:700; color:var(--ink-900); }
.al-ucard p { font-size:14.5px; color:var(--ink-600); line-height:1.55; }
.al-ucard__go { margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; color:var(--emerald-800); display:inline-flex; align-items:center; gap:7px; }
.al-ucard__go .icon { width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out); }
.al-ucard:hover .al-ucard__go .icon { transform:translateX(3px); }

/* ============================================================
   PATTERN · OUR STORY (editorial)
   ============================================================ */
.al-phero__byline { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-500); margin-top:28px; }
.al-story { padding:var(--sp-24) 0; background:var(--white); }
.al-story__head { max-width:760px; margin:0 auto 40px; text-align:center; }
.al-story__lede { max-width:var(--prose); margin:0 auto 40px; background:var(--bg-warm); border-radius:12px; padding:30px 32px; }
.al-story__author { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.al-story__avatar {
  width:46px; height:46px; border-radius:50%; flex:none; background:var(--emerald-950); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
  overflow:hidden;   /* the photo is square — clip it to the circle */
}
.al-story__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.al-story__author b { display:block; font-size:15px; }
.al-story__author span { font-size:13px; color:var(--ink-500); }
.al-story__lede p { font-size:16.5px; color:var(--ink-700); line-height:1.62; }
.al-story__lede p + p { margin-top:14px; }
.al-story__body { max-width:var(--prose); margin:0 auto; }
.al-story__body h3 { font-size:23px; font-weight:800; letter-spacing:-0.015em; line-height:1.25; margin:44px 0 14px; }
.al-story__body p { font-size:17px; color:var(--ink-700); line-height:1.7; margin-bottom:16px; }
.al-story__body p b { color:var(--ink-900); font-weight:700; }

.al-values { padding:0 0 var(--sp-24); background:var(--white); }
.al-values__grid { display:grid; gap:12px; }
@media (min-width:720px){ .al-values__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .al-values__grid { grid-template-columns:repeat(5,1fr); } }
.al-value { background:var(--bg-warm); border-radius:12px; padding:24px 22px; display:flex; flex-direction:column; gap:8px; }
.al-value__icon { color:var(--emerald-600); display:flex; }
.al-value__icon .icon { width:24px; height:24px; }
.al-value b { font-size:15.5px; }
.al-value span { font-size:13.5px; color:var(--ink-600); line-height:1.55; }

/* ============================================================
   PATTERN · CONTACT
   ============================================================ */
.al-contact { padding:var(--sp-12) 0 var(--sp-24); background:var(--white); }
.al-contact__grid { display:grid; gap:var(--sp-8); }
@media (min-width:920px){ .al-contact__grid { grid-template-columns:1.4fr 1fr; gap:var(--sp-12); align-items:start; } }
.al-contact__form { background:var(--bg-warm); border-radius:12px; padding:32px 30px; display:grid; gap:18px; }
.al-field { display:grid; gap:7px; font-size:14px; font-weight:600; color:var(--ink-900); }
/* Row wrapper only — the two labels inside are each their own .al-field, so they
   inherit the same 7px label gap and 14px/600 label type as Email/Topic. They
   previously had no class at all, which left them 16px text with line-based
   spacing: 68px tall against the other fields' 75px. */
.al-field--split { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .al-field--split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.al-input {
  width:100%; height:46px; padding:0 14px; font-family:var(--font-sans); font-size:15px; font-weight:400;
  color:var(--ink-900); background:var(--white); border:1px solid transparent; border-radius:8px;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.al-input::placeholder { color:var(--ink-400); }
.al-input:focus { outline:none; border-color:var(--emerald-600); box-shadow:0 0 0 3px rgba(6,120,87,.14); }
.al-input--area { height:auto; padding:12px 14px; line-height:1.55; resize:vertical; }
/* The native select arrow cannot be positioned, so it sat at a different inset
   from every other control in the form. Draw our own. */
.al-input--select {
  -webkit-appearance:none; appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7387' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:15px 15px;
}
.al-contact__note { font-size:13px; color:var(--ink-500); }
.al-contact__side { display:grid; gap:12px; }
/* A flat 9px gap set every element the same distance apart and read cramped.
   Rhythm instead: the eyebrow stays tight to its heading, the body sits a step
   away, and the CTA gets clear air before it. */
.al-contact__card { background:var(--white); border:1px solid var(--ink-100); border-radius:12px; padding:28px 24px; display:grid; gap:12px; justify-items:start; }
.al-contact__card h3 { font-size:17px; font-weight:700; margin-top:-3px; }
.al-contact__card p { font-size:14px; color:var(--ink-600); line-height:1.6; }
.al-contact__card .al-btn { margin-top:8px; }

/* Keep the existing WPForms submission flow inside the review contact card. */
.al-contact__wpforms { display:block; }
.al-contact__wpforms .wpforms-container { width:100%; max-width:none; margin:0; }
.al-contact__wpforms .wpforms-form { width:100%; }
.al-contact__wpforms .wpforms-field-label { color:var(--ink-900); font-family:var(--font-sans); font-weight:600; }
.al-contact__wpforms .wpforms-form input:not([type="hidden"]),
.al-contact__wpforms .wpforms-form select,
.al-contact__wpforms .wpforms-form textarea { width:100%; max-width:100%; border-radius:8px; font-family:var(--font-sans); }
.al-contact__wpforms .wpforms-form button[type="submit"] { width:100%; min-height:48px; border:0; border-radius:8px; background:var(--yellow-500); color:var(--ink-900); font-family:var(--font-sans); font-weight:700; cursor:pointer; }
.al-contact__wpforms .wpforms-form button[type="submit"]:hover { background:var(--yellow-400); }
.al-contact__wpforms .wpforms-form button[type="submit"]:focus-visible { outline:3px solid var(--emerald-600); outline-offset:3px; }
.al-contact__wpforms { display:grid; gap:18px; }
.al-contact__wpforms #wpforms-105 { margin:0; }
.al-contact__wpforms #wpforms-form-105 .wpforms-field-container { display:grid; gap:18px; }
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-email,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-select,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-textarea { padding:0; margin:0; }
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name fieldset { border:0; padding:0; margin:0; min-width:0; }
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name legend {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name .wpforms-field-row {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  width:100%; max-width:none;
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name .wpforms-field-row::before,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name .wpforms-field-row::after { display:none; }
@media (max-width:559px){
  .al-contact__wpforms #wpforms-form-105 .wpforms-field-name .wpforms-field-row { grid-template-columns:1fr; }
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name .wpforms-field-row-block {
  display:flex; flex-direction:column; width:100%; min-width:0; padding:0; margin:0;
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name .wpforms-field-sublabel {
  order:-1; margin:0 0 7px; font-size:14px; line-height:22px; font-weight:600; color:var(--ink-900);
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-label {
  display:block; margin:0 0 7px; font-size:14px; line-height:22px; font-weight:600; color:var(--ink-900);
}
.al-contact__wpforms #wpforms-form-105 .wpforms-required-label { display:none; }
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name input,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-email input,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-select select,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-textarea textarea {
  width:100%; max-width:none; border:1px solid transparent; border-radius:8px;
  background:var(--white); padding:0 14px; color:var(--ink-900);
  font:400 15px var(--font-sans);
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name input,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-email input,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-select select { height:46px; }
.al-contact__wpforms #wpforms-form-105 .wpforms-field-textarea textarea {
  height:142px; min-height:142px; padding:12px 14px; line-height:1.55;
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-select select {
  appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7387' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px 15px;
}
.al-contact__wpforms #wpforms-form-105 .wpforms-field-name input:focus,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-email input:focus,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-select select:focus,
.al-contact__wpforms #wpforms-form-105 .wpforms-field-textarea textarea:focus {
  outline:none; border-color:var(--emerald-600); box-shadow:0 0 0 3px rgba(6,120,87,.14);
}
.al-contact__wpforms #wpforms-form-105 .wpforms-submit-container { margin:18px 0 0; padding:0; }
.al-contact__wpforms #wpforms-form-105 button[type="submit"] {
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; font-size:16px; background:var(--yellow-500) !important; color:var(--ink-900) !important;
}
.al-contact__wpforms #wpforms-form-105 button[type="submit"]:hover { background:var(--yellow-400) !important; }
.al-contact__wpforms #wpforms-form-105 button[type="submit"]::after { content:"→"; font-size:20px; line-height:1; }
.al-contact__wpforms .al-contact__note { margin:0; text-align:center; }

/* Enterprise keeps its editor copy and WPForms form while using the contact layout. */
.al-enterprise__hero { padding-bottom:24px; }
.al-enterprise__form { display:block; }
.al-enterprise__card { align-content:start; }
.al-enterprise__copy { display:grid; gap:16px; }
.al-enterprise__copy p { margin:0; }
.al-enterprise__copy ul { list-style:none; display:grid; gap:11px; margin:0; padding:0; }
.al-enterprise__copy li { position:relative; padding-left:26px; font-size:14px; line-height:1.6; color:var(--ink-700); }
.al-enterprise__copy li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--emerald-600); font-weight:800; }
.al-enterprise__copy a { color:var(--emerald-700); text-underline-offset:3px; }
.al-enterprise__copy a:hover { color:var(--emerald-600); }
.al-enterprise__form #wpforms-799 { margin:0; max-width:none; }
.al-enterprise__form #wpforms-form-799 .wpforms-field-container { display:grid; gap:18px; }
.al-enterprise__form #wpforms-form-799 :is(.wpforms-field-name,.wpforms-field-email,.wpforms-field-url,.wpforms-field-select,.wpforms-field-textarea) { margin:0; padding:0; }
.al-enterprise__form #wpforms-form-799 .wpforms-field-label { display:block; margin:0 0 7px; color:var(--ink-900); font:600 14px/22px var(--font-sans); }
.al-enterprise__form #wpforms-form-799 .wpforms-required-label { color:var(--emerald-600); }
.al-enterprise__form #wpforms-form-799 :is(.wpforms-field-name input,.wpforms-field-email input,.wpforms-field-url input,.wpforms-field-select select,.wpforms-field-textarea textarea) {
  width:100%; max-width:none; border:1px solid transparent; border-radius:8px; background:var(--white);
  padding:0 14px; color:var(--ink-900); font:400 15px var(--font-sans);
}
.al-enterprise__form #wpforms-form-799 :is(.wpforms-field-name input,.wpforms-field-email input,.wpforms-field-url input,.wpforms-field-select select) { height:46px; }
.al-enterprise__form #wpforms-form-799 .wpforms-field-textarea textarea { min-height:142px; padding:12px 14px; line-height:1.55; }
.al-enterprise__form #wpforms-form-799 .wpforms-field-select select {
  appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7387' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px 15px;
}
.al-enterprise__form #wpforms-form-799 :is(.wpforms-field-name input,.wpforms-field-email input,.wpforms-field-url input,.wpforms-field-select select,.wpforms-field-textarea textarea):focus {
  outline:none; border-color:var(--emerald-600); box-shadow:0 0 0 3px rgba(6,120,87,.14);
}
.al-enterprise__form #wpforms-form-799 .wpforms-field-description { margin-top:8px; color:var(--ink-500); font-size:13px; line-height:1.5; }
.al-enterprise__form #wpforms-form-799 .wpforms-submit-container { margin:20px 0 0; padding:0; }
.al-enterprise__form #wpforms-form-799 button[type="submit"] {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:52px; border:0; border-radius:8px;
  background:var(--yellow-500) !important; color:var(--ink-900) !important;
  font:700 16px var(--font-sans); cursor:pointer;
}
.al-enterprise__form #wpforms-form-799 button[type="submit"]:hover { background:var(--yellow-400) !important; }
.al-enterprise__form #wpforms-form-799 button[type="submit"]:focus-visible { outline:3px solid var(--emerald-600); outline-offset:3px; }
.al-enterprise__form #wpforms-form-799 button[type="submit"]::after { content:"→"; font-size:20px; line-height:1; }
@media (max-width:559px){ .al-enterprise__form { padding:24px 18px; } }

/* Existing legal, enterprise and later editorial pages use the new shell. */
.al-legacy-content .al-prose { max-width:860px; margin:0 auto; padding-bottom:var(--sp-24); }

/* detail-template code block */
.al-codeblock { max-width:760px; margin:0 auto; }
.al-codeblock .al-g-term { border-radius:12px; padding:28px 30px; font-size:13.5px; line-height:1.9; }

/* ---- demo tabs: restored value copy + integration chips ---- */
.al-demo__value { max-width:1000px; margin:36px auto 0; text-align:left; }
.al-demo__value > p { font-size:16.5px; color:var(--ink-600); line-height:1.6; max-width:820px; margin:0 auto; text-align:center; }
.al-demo__value ul { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px 32px; }
@media (min-width:820px){ .al-demo__value ul { grid-template-columns:1fr 1fr; } }
.al-demo__value li { font-size:14.5px; color:var(--ink-700); display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.al-demo__value .icon { color:var(--emerald-600); width:15px; height:15px; flex:none; margin-top:3px; }

/* ---- demo tabs v2: content left / video right ---- */
.al-demo__panel { gap:40px; align-items:start; }
@media (min-width:940px){
  .al-demo__panel { grid-template-columns:400px 1fr; }
}
.al-demo__panel.is-active {
  display:grid;
  animation:al-panelin var(--dur-slow) var(--ease-out);
}
@keyframes al-panelin { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.al-demo__value { max-width:none; margin:0; text-align:left; }
.al-demo__value h3 { font-size:var(--text-h3); font-weight:700; letter-spacing:-0.01em; line-height:1.25; margin-bottom:14px; }
.al-demo__value > p { font-size:15.5px; text-align:left; margin:0; max-width:none; }
.al-demo__value ul { grid-template-columns:1fr !important; gap:11px; margin-top:20px; }
.al-demo__value li { font-size:14px; }
@media (prefers-reduced-motion: reduce){ .al-demo__panel.is-active { animation:none; } }

/* ---- demo tabs v2 fixes: stable height, tab gap, per-tab chips ---- */
.al-demo__stage { margin-top:48px; }
.al-demo__value { align-self:center; }
.al-demo__panel .al-browser { align-self:start; }
/* ============================================================
   PATTERN · NAV MEGA-MENU
   ============================================================ */
.al-nav__has-mm { position:relative; }
.al-nav__has-mm > a { display:inline-flex; align-items:center; gap:6px; }
.al-nav__has-mm > a::after {
  content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.55;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.al-nav__has-mm.is-open > a::after { transform:rotate(225deg) translateY(-2px); opacity:1; }
.al-nav__has-mm.is-open > a { color:var(--ink-900); }

.al-mm {
  position:absolute; top:calc(100% + 26px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:max-content; max-width:calc(100vw - 32px);
  background:var(--white); border:1px solid var(--ink-100); border-radius:14px;
  box-shadow:var(--shadow-3); padding:22px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.al-mm::before { content:""; position:absolute; top:-26px; left:0; right:0; height:26px; }
.al-nav__has-mm.is-open .al-mm {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.al-mm__grid { display:grid; gap:26px; grid-auto-flow:column; align-items:start; }
.al-mm__grid--2 { grid-template-columns:1fr 1fr; grid-auto-flow:row; gap:32px; }
.al-mm__grid--1 { grid-template-columns:1fr; }
.al-mm__label {
  display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-400); margin-bottom:12px;
}
.al-mm__col ul { list-style:none; padding:0; margin:0; display:grid; gap:2px; min-width:158px; }
.al-mm__col ul a {
  display:block; font-size:14.5px; font-weight:600; color:var(--ink-700);
  text-decoration:none; padding:7px 10px; border-radius:7px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.al-mm__col ul a:hover { background:var(--bg-warm); color:var(--ink-900); }

.al-mm__item {
  display:flex; gap:11px; align-items:flex-start; text-decoration:none;
  padding:9px 10px; border-radius:8px; min-width:236px;
  transition:background var(--dur-fast) var(--ease-out);
}
.al-mm__item:hover { background:var(--bg-warm); }
.al-mm__item b { display:block; font-size:14.5px; color:var(--ink-900); }
.al-mm__item em { font-style:normal; font-size:12.5px; color:var(--ink-500); }

.al-mm__feature {
  display:flex; flex-direction:column; gap:7px; text-decoration:none;
  background:var(--emerald-950); border-radius:11px; padding:20px; width:212px;
}
.al-mm__ficon { color:var(--emerald-400); }
.al-mm--wide .al-mm__ficon {
  width:36px; height:36px; border-radius:9px; background:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.al-mm--wide .al-mm__ficon .icon { width:23px; height:23px; }
.al-mm__ficon .icon { width:26px; height:26px; }
.al-mm__feature b { font-size:15.5px; color:var(--white); margin-top:4px; }
.al-mm__feature > span:not(.al-mm__ficon):not(.al-mm__fgo) { font-size:13px; color:rgba(255,255,255,.72); line-height:1.5; }
.al-mm__fgo { margin-top:auto; padding-top:10px; font-size:13px; font-weight:700; color:var(--yellow-500); display:inline-flex; align-items:center; gap:6px; }
.al-mm__fgo .icon { width:13px; height:13px; transition:transform var(--dur-base) var(--ease-out); }
.al-mm__feature:hover .al-mm__fgo .icon { transform:translateX(3px); }

.al-mm__foot {
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:20px -22px -22px; padding:15px; border-top:1px solid var(--ink-100);
  background:var(--bg-warm); border-radius:0 0 14px 14px;
  font-size:13.5px; font-weight:700; color:var(--ink-900); text-decoration:none;
}
.al-mm__foot .icon { width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out); }
.al-mm__foot:hover .icon { transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){ .al-mm { transition-duration:.01ms; } }

/* ---- integrations mega-menu: two blocks, card right at full height ---- */
.al-mm__split { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:stretch; }
.al-mm__main { display:flex; flex-direction:column; }
.al-mm__main .al-mm__grid { flex:1; }
/* labels share the links' 10px inset so headings and items align on one edge */
.al-mm__col .al-mm__label { padding:0 10px; }
/* footer link lives inside the left block, aligned to the same edge */
.al-mm__main .al-mm__foot {
  margin:16px 0 0; padding:14px 10px 0; justify-content:flex-start;
  background:none; border-radius:0; border-top:1px solid var(--ink-100);
}
.al-mm--wide .al-mm__feature { height:100%; width:236px; box-sizing:border-box; }

/* ---- use-cases / resources menus: labels align to item titles, warm icon tiles ---- */
/* integrations footer: keep the filled bar treatment, slightly bolder */
.al-mm__main .al-mm__foot {
  margin:18px 0 0; padding:15px; justify-content:center;
  background:var(--bg-warm); border-radius:10px; border-top:none;
  font-size:14.5px; font-weight:800;
}


/* ---- blog index ---- */
.al-posts { padding:var(--sp-12) 0 var(--sp-24); background:var(--white); }
.al-post {
  display:flex; flex-direction:column; gap:10px; text-decoration:none;
  background:none; border-radius:var(--r-card); padding:0;
  transition:transform var(--dur-base) var(--ease-out);
}
.al-post:hover { transform:translateY(-2px); }
.al-post__tag {
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--emerald-800);
}
.al-post h3, .al-post--media h2 { font-size:17.5px; font-weight:700; color:var(--ink-900); line-height:1.3; }
.al-post p { font-size:14px; color:var(--ink-600); line-height:1.55; }
.al-post__go { margin-top:2px; padding-top:0; font-size:13.5px; font-weight:700; color:var(--emerald-800); display:inline-flex; align-items:center; gap:7px; }
.al-post__go .icon { width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out); }
.al-post:hover .al-post__go .icon { transform:translateX(3px); }
.al-post--lead { background:none; padding:0; margin-bottom:var(--sp-6); }
.al-post--lead h2 { font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:800; color:var(--ink-900); letter-spacing:-0.02em; line-height:1.15; }



.al-posts__grid { display:grid; gap:16px; }
@media (min-width:700px){ .al-posts__grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .al-posts__grid { grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   REFINEMENT · interior-page typography, flat cards, warm tints
   No decorative green tints anywhere — warm/yellow only.
   Semantic verdict colours (safe/spam) are product language and stay.
   ============================================================ */
.al-phero .al-hero__sub { font-size:18px; }
/* The global 900px cap suits the long integration-page intros (~320 chars) but
   leaves a short blog sub (~109 chars) running nearly edge to edge. Scoped, not
   global — narrowing .al-phero .al-hero__sub everywhere would push those long
   intros to five lines. */
.al-phero--narrow .al-hero__sub { max-width:620px; }
.al-icards__head { max-width:880px; }
.al-sub--tight { font-size:17px; }
.al-sub--sm { font-size:16px; }
@media (min-width:900px){
  .al-sub--tight, .al-sub--sm { white-space:nowrap; }
}

/* integration / framework cards: warm, borderless, white icon wells */
.al-icard { background:var(--bg-warm); border:none; --icard-pad:18px; --icard-inset:14px; }
.al-icards[style] .al-icard { background:var(--white); }
.al-icard:hover { border:none; }
/* Related-integration cards sit on a bg-warm band, so they stay 100% white at all
   times. Hover lifts them with a soft shadow — the old rule swapped the background
   to bg-warm, which matched the band exactly and made the card vanish. */
.al-icards[style] .al-icard {
  background:var(--white);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.al-icards[style] .al-icard:hover {
  background:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-2);
}
.al-icard__icon {
  background:var(--white); border:none; color:var(--emerald-700);
  width:40px; height:40px; border-radius:9px;
  /* The well sits --icard-inset (14px) from the card's top and left edges. The card's
     own padding is larger, so the well is pulled back out by the difference. Change
     --icard-inset on .al-icard to retune; the calc keeps both edges identical. */
  margin-top:calc(var(--icard-inset) - var(--icard-pad));
  margin-left:calc(var(--icard-inset) - var(--icard-pad));
}
.al-icards[style] .al-icard__icon { background:var(--bg-warm); }
.al-icard__icon img { width:22px; height:22px; object-fit:contain; display:block; }
.al-icard__icon .icon { width:18px; height:18px; }

/* Emerald stays the ICON + BORDER language. Only FILLED backgrounds go warm.
   Semantic verdict fills (safe/spam chips) are product language and keep their colour. */
.al-feature__icon { color:var(--emerald-600); }
.al-ucard__icon { color:var(--emerald-600); }
.al-step__icon { color:var(--emerald-600); }
.al-value__icon { color:var(--emerald-600); }
.al-post__tag { color:var(--emerald-800); }
.al-fig-tile { background:var(--ink-900); }              /* was an emerald fill */
.al-pill--chip, .al-scene__chips span { border-color:var(--emerald-200); color:var(--emerald-800); background:var(--white); }
.al-latency { background:var(--bg-warm); color:var(--emerald-800); }   /* warm fill, emerald text */
.al-latency i { background:var(--emerald-500); }

/* ---- integration / use-case steps: one grouped white panel ---- */
.al-steps__panel {
  background:var(--white); border-radius:14px; padding:8px;
  display:grid; gap:0;
}
@media (min-width:860px){
  .al-steps__panel { grid-template-columns:repeat(3, 1fr); }
}
/* Dividers are drawn as pseudo-elements inset by the card padding, so they
   match the content height instead of the stretched grid cell. Measured:
   cell 279px vs tallest content 211px — a border-left ran 68px too long. */
.al-steps__panel > .al-step + .al-step::after {
  content:""; position:absolute; background:var(--ink-100);
}
@media (min-width:860px){
  .al-steps__panel > .al-step + .al-step::after {
    left:0; top:var(--step-pad-y); bottom:var(--step-pad-y); width:1px;
  }
}
@media (max-width:859px){
  .al-steps__panel > .al-step + .al-step::after {
    top:0; left:var(--step-pad-x); right:var(--step-pad-x); height:1px;
  }
}
.al-steps__panel > .al-step {
  --step-pad-y:34px; --step-pad-x:30px;
  background:none; border-radius:0; padding:var(--step-pad-y) var(--step-pad-x);
}
/* panel cards set their own padding; the numeral follows it via the vars */

/* ═══════════════════════════════════════════════════════════════════
   Integration-page graphic primitives.
   Every composition in graphics_lib.py is assembled from these; each is
   sized for the 444x408 .al-scene canvas inside .al-trust__visual.
   ═══════════════════════════════════════════════════════════════════ */

.al-g-term .s { color:#9FD3BE; }
.al-caret { display:inline-block; width:7px; height:15px; background:#6EE7B7; vertical-align:-3px; margin-left:2px; }
.al-chip--warn { background:var(--warn-bg); color:var(--warn-text); }

/* seats — a directory grid where the bot rows are struck out in place */
.al-seats { display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin-top:14px; }
.al-seat {
  aspect-ratio:1; border-radius:6px; background:var(--emerald-100);
  display:flex; align-items:center; justify-content:center;
}
.al-seat .icon { width:11px; height:11px; color:var(--emerald-700); }
.al-seat--bot { background:var(--ink-50); }
.al-seat--bot .icon { color:var(--ink-200); }

/* review moderation cards */
/* cards hug their content — `flex:1` stretched all three to equal height,
   which left dead space under the shortest one */
.al-rev { background:var(--bg-warm); border-radius:10px; padding:10px 12px 11px; }
.al-rev__av { width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover; display:block; }
.al-rev__av--ph { background:var(--ink-100); color:var(--ink-400); display:inline-flex; align-items:center; justify-content:center; }
.al-rev__av--ph .icon { width:14px; height:14px; }
.al-rev--spam .al-rev__av--ph { background:rgba(220,38,38,.10); color:var(--spam); }
.al-rev--spam { background:var(--spam-bg); }
.al-rev--spam p { color:var(--ink-400); text-decoration:line-through; }
.al-rev__top { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.al-rev__top b { flex:1; min-width:0; }
.al-rev__stars { font-size:11px; color:var(--yellow-600); letter-spacing:1px; }
.al-rev p { font-size:12px; color:var(--ink-600); margin:6px 0 7px; line-height:1.45; }
.al-rev .al-chip { font-size:10.5px; padding:2px 8px; }

/* chokepoint flow: stranger -> gate, then the two outcomes */
.al-flow { position:absolute; left:0; right:0; top:0; display:flex; align-items:stretch; gap:9px; }
.al-flow__node {
  flex:1; background:var(--bg-warm); border-radius:10px; padding:13px 14px;
  display:flex; flex-direction:column; gap:3px;
}
.al-flow__node--gate { background:var(--emerald-tint); }
.al-flow__ic { display:block; }
.al-flow__ic .icon { width:19px; height:19px; color:var(--emerald-700); }
.al-flow__node b { font-size:13px; color:var(--ink-900); }
.al-flow__node em { font-style:normal; font-size:11.5px; color:var(--ink-500); }
.al-flow__arrow { align-self:center; }
.al-flow__arrow .icon { width:15px; height:15px; color:var(--ink-200); }
.al-branch { position:absolute; left:0; right:0; top:108px; display:flex; flex-direction:column; gap:8px; }
.al-branch__row {
  display:flex; align-items:center; gap:9px; padding:11px 13px;
  border-radius:9px; font-size:12.5px; color:var(--ink-700);
}
.al-branch__row b { margin-left:auto; font-family:var(--font-mono); font-size:12px; }
.al-branch__row .icon { width:13px; height:13px; flex:none; }
.al-branch__row--go { background:var(--emerald-tint); }
.al-branch__row--go .icon { color:var(--emerald-700); }
.al-branch__row--no { background:var(--spam-bg); color:var(--ink-500); }
.al-branch__row--no .icon { color:var(--spam); }

/* accuracy dial */
.al-dial {
  /* 84/64 could not hold a range like "60–120ms" — it wrapped mid-number */
  width:104px; height:104px; border-radius:50%; flex:none;
  background:conic-gradient(var(--emerald-500) calc(var(--pct)*1%), var(--ink-100) 0);
  display:flex; align-items:center; justify-content:center;
}
.al-dial b {
  width:82px; height:82px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  font-family:var(--font-mono); font-size:15px; color:var(--ink-900);
}
.al-dial small { font-size:11px; color:var(--emerald-700); }

/* two-column legend used by the IP-reputation comparison */
.al-lgd { font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.al-lgd--bad { background:var(--spam-bg); color:var(--spam-text); }
.al-lgd--good { background:var(--emerald-100); color:var(--emerald-800); }

/* entry points — the named hooks in their framework */
.al-eps { position:absolute; left:0; right:0; top:26px; display:flex; flex-direction:column; gap:8px; }
.al-ep { display:flex; align-items:center; gap:11px; background:var(--bg-warm); border-radius:10px; padding:12px 14px; }
.al-ep__ic { width:40px; height:40px; border-radius:10px; background:var(--white); flex:none;
  display:flex; align-items:center; justify-content:center; }
.al-ep__ic .icon { width:21px; height:21px; }
/* only where the stack has room: 4 rows at this tile size overrun the footer */
.al-eps--lg .al-ep__ic { width:58px; height:58px; border-radius:14px; }
.al-eps--lg .al-ep__ic .icon { width:30px; height:30px; }
/* type scaled to the 58px tile — at the base 13px/11.5px the labels read as an
   afterthought beside it. Only the 3-row variant; --sm needs its small text to fit. */
.al-eps--lg .al-ep { gap:14px; padding:14px 16px 14px 14px; }
.al-eps--lg .al-ep b { font-size:17px; line-height:1.25; }
.al-eps--lg .al-ep em { font-size:13.5px; }
/* 4-row stacks overran the footer card by ~32px even at the original tile size —
   a pre-existing bug on the framework pages. Tighter rows and a deeper reserve. */
/* .al-scene prefix needed: a later `.al-eps { bottom:96px }` rule has equal
   specificity and would win on source order. */
.al-scene .al-eps--sm { bottom:120px; }
/* flex:1 cannot shrink these below min-content, so min-content itself has to
   come down: 4 rows need <=59px each to fit the 262px stack. */
/* left inset matches the vertical inset so the icon tile sits in a square
   well; the right side keeps its wider inset for the text. */
.al-eps--sm .al-ep { padding:7px 12px 7px 7px; min-height:0; }
.al-eps--sm .al-ep b { font-size:13.5px; line-height:1.2; }
.al-eps--sm .al-ep em { font-size:11px; line-height:1.25; }
.al-eps--sm .al-ep__ic { width:46px; height:46px; border-radius:12px; }
.al-eps--sm .al-ep__ic .icon { width:24px; height:24px; }
.al-ep__ic .icon { width:15px; height:15px; color:var(--emerald-700); }
.al-ep b { display:block; font-size:13px; color:var(--ink-900); }
.al-ep em { font-style:normal; font-size:11.5px; color:var(--ink-500); }

/* editor autocomplete popup */
.al-hint {
  position:absolute; left:24px; right:24px; top:41%; background:var(--bg-warm);
  border-radius:10px; overflow:hidden; z-index:3;
}
.al-hint__head { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-600); padding:9px 13px; border-bottom:1px solid var(--ink-100); }
.al-hint__row { display:flex; justify-content:space-between; gap:10px; padding:7px 13px; font-family:var(--font-mono); font-size:12px; }
.al-hint__row.is-sel { background:var(--white); }
.al-hint__k { color:var(--ink-900); }
.al-hint__t { color:var(--emerald-700); }

/* deploy targets */
.al-tgts { position:absolute; left:0; right:0; top:26px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.al-tgt { background:var(--bg-warm); border-radius:10px; padding:13px 14px; }
.al-tgt__ic { display:block; margin-bottom:6px; }
.al-tgt__ic .icon { width:17px; height:17px; color:var(--emerald-700); }
.al-tgt b { display:block; font-size:12.5px; color:var(--ink-900); }
.al-tgt em { font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-500); }

/* packages collapsing into one */
.al-pkg { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; color:var(--ink-500); }
.al-pkg .icon { width:13px; height:13px; color:var(--ink-200); flex:none; }
.al-pkg span { flex:1; font-family:var(--font-mono); }
.al-pkg em { font-style:normal; font-family:var(--font-mono); font-size:11px; }
.al-merge { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) rotate(90deg); z-index:3;
  width:26px; height:26px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center; }
.al-merge .icon { width:13px; height:13px; color:var(--emerald-700); }

/* runtimes strip */
.al-rts { position:absolute; left:0; right:0; top:42%; display:flex; gap:8px; }
.al-rt { flex:1; background:var(--bg-warm); border-radius:9px; padding:11px 12px; text-align:center; }
.al-rt__n { display:block; font-size:12.5px; font-weight:700; color:var(--ink-900); }
.al-rt__v { display:block; font-family:var(--font-mono); font-size:11px; color:var(--emerald-700); margin-top:3px; }

/* Awesome Motive product row */
.al-amrow { position:absolute; left:0; right:0; top:41%; display:flex; flex-wrap:wrap; gap:10px 16px;
  align-items:center; justify-content:center; padding:0 6px; }
.al-amrow img { opacity:.55; filter:grayscale(1); }

/* stack grid */
.al-sgs { position:absolute; left:0; right:0; top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
/* the grid stretches these cards well past their content, so centre it rather
   than letting it cling to the top. Logo and fallback-icon cards share one
   media height, or their labels sit on different baselines (20px vs 18px). */
.al-sg { background:var(--bg-warm); border-radius:9px; padding:11px 8px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.al-sg img { height:20px; width:auto; margin:0; display:block; }
.al-sg .icon { width:20px; height:20px; color:var(--emerald-700); margin:0; display:block; }
.al-sg span { font-size:11px; color:var(--ink-600); }

/* two transports, one gate */
.al-dual { position:absolute; left:0; right:0; top:0; display:flex; gap:9px; }
.al-dual__in { flex:1; background:var(--bg-warm); border-radius:10px; padding:12px 14px; text-align:center; }
.al-dual__in span { display:block; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-900); }
.al-dual__in em { font-style:normal; font-size:11px; color:var(--ink-500); }
.al-dual__gate {
  position:absolute; left:22%; right:22%; top:124px; background:var(--emerald-tint);
  border-radius:10px; padding:14px; text-align:center;
}
.al-dual__gate b { display:block; font-size:13px; color:var(--ink-900); margin-top:4px; }
.al-dual__gate em { font-style:normal; font-size:11.5px; color:var(--ink-500); }
.al-dual__gate .al-flow__ic .icon { width:20px; height:20px; }

/* rate limiting: identical ticks, no reading */
.al-ticks { display:flex; gap:4px; }
.al-ticks i { flex:1; height:26px; border-radius:3px; background:var(--ink-200); }

/* client-weight columns */
.al-wt { display:flex; align-items:flex-end; gap:14px; height:108px; margin-top:14px; }
.al-wt__col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.al-wt__bar { width:100%; border-radius:5px 5px 0 0; }
.al-wt__bar--nil { height:3px; background:var(--emerald-500); border-radius:2px; }
.al-wt__col b { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-900); margin-top:7px; }
.al-wt__col em { font-style:normal; font-size:10.5px; color:var(--ink-500); }

/* cascading surfaces, one gate */
.al-cw {
  position:absolute; width:74%; background:var(--bg-warm); border-radius:9px;
  padding:10px 12px; display:flex; align-items:center; gap:9px;
}
.al-cw__bar { display:flex; gap:3px; flex:none; }
.al-cw__bar i { width:5px; height:5px; border-radius:50%; background:var(--ink-100); }
.al-cw__t { flex:1; font-size:12px; color:var(--ink-700); }
.al-cw .al-chip { font-size:10px; padding:2px 7px; }

/* form re-rendered with an inline block message */
.al-ff { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:7px;
  background:var(--ink-25); margin-bottom:6px; font-size:12px; }
.al-ff.is-bad { background:var(--spam-bg); }
.al-ff__l { color:var(--ink-500); }
.al-ff__v { color:var(--ink-700); font-family:var(--font-mono); }
.al-ff__err { font-size:11.5px; color:var(--spam-text); margin:-2px 0 8px 10px; }

/* field tagging */
.al-fts { position:absolute; left:0; right:0; top:26px; display:flex; flex-direction:column; gap:7px; }
.al-ft { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg-warm); border-radius:9px; padding:11px 13px; }
.al-ft__l { font-size:12.5px; color:var(--ink-700); }
.al-ft__tag { font-family:var(--font-mono); font-size:11px; color:var(--emerald-800);
  background:var(--emerald-100); border-radius:5px; padding:3px 8px; }

/* privacy ledger */
.al-badges { position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:7px; }
.al-badge { display:inline-flex; align-items:center; gap:6px; background:var(--emerald-50);
  color:var(--emerald-800); border-radius:var(--r-pill); padding:7px 12px; font-size:11.5px; font-weight:600; }
.al-badge .icon { width:12px; height:12px; }

/* latency gauge */
.al-gg { position:relative; width:170px; height:92px; margin:14px auto 4px; }
.al-gg__arc { position:absolute; inset:0; border-radius:170px 170px 0 0;
  background:conic-gradient(from 270deg, var(--emerald-500) 0deg 18deg, var(--ink-100) 18deg 180deg);
  -webkit-mask:radial-gradient(circle at 50% 100%, transparent 56px, #000 57px);
  mask:radial-gradient(circle at 50% 100%, transparent 56px, #000 57px); }
.al-gg__tick { position:absolute; left:50%; bottom:0; height:100%; transform-origin:bottom center;
  transform:rotate(calc(var(--a) - 90deg)); }
.al-gg__tick em { position:absolute; top:-3px; left:-15px; width:30px; text-align:center;
  font-style:normal; font-family:var(--font-mono); font-size:9px; color:var(--ink-400);
  transform:rotate(calc(90deg - var(--a))); }
.al-gg__needle { position:absolute; left:50%; bottom:2px; width:2px; height:58px; background:var(--ink-900);
  border-radius:2px; transform-origin:bottom center; transform:rotate(calc(var(--a) - 90deg)); }
.al-gg__v { position:absolute; left:0; right:0; bottom:6px; text-align:center;
  font-family:var(--font-mono); font-size:24px; color:var(--ink-900); }
.al-gg__v small { font-size:12px; color:var(--emerald-700); }

/* ---- graphic primitive fixes (verified against rendered output) ---- */
/* .al-mock__bar has no intrinsic width; inside a flex row it collapsed to 0 */
.al-minirow .al-mock__bar { flex:1; }
/* the toggle only turned on inside .al-mock.is-anim — give it a standalone state */
.al-mock__toggle--on { background:var(--emerald-600); }
.al-mock__toggle--on::after { transform:translateX(18px); }
/* SVG product logos have no intrinsic height in this context */
.al-amrow img { height:22px; width:auto; }
/* panels that sit above a footer minicard fill the frame and spread their rows */
.al-scene .al-fill { display:flex; flex-direction:column; }
.al-scene .al-rows { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; margin-top:10px; }
.al-scene .al-rows > * { margin-top:0; }
/* stacked card lists stretch to the footer instead of leaving a void */
.al-eps, .al-fts, .al-tgts, .al-sgs { bottom:96px; }
.al-eps, .al-fts { display:flex; flex-direction:column; }
.al-ep, .al-ft { flex:1; }
.al-tgts, .al-sgs { display:grid; }
.al-rts { top:auto; bottom:96px; }
/* detection-signal chips wrap in a row instead of colliding at fixed offsets */
.al-sigs { position:absolute; left:14px; right:14px; top:40px; display:flex; flex-wrap:wrap; gap:6px; z-index:4; }
.al-sigs span { font-family:var(--font-mono); font-size:10.5px; color:var(--emerald-800);
  background:var(--white); border:1px solid var(--emerald-200); border-radius:var(--r-pill); padding:5px 10px; }
/* autocomplete popup was overflowing the frame */
.al-hint { top:auto; bottom:8px; }
/* filled panels centre their content; where .al-rows exists it absorbs the space */
.al-scene .al-fill { justify-content:center; }
/* label column was too narrow for names like "reCAPTCHA v2" */
.al-scene .al-minirow .who { width:104px; }   /* fits the longest label, e.g. httpx.AsyncClient */
/* weight columns fill the panel instead of sitting in a 108px band */
.al-scene .al-wt { flex:1; height:auto; min-height:96px; }
/* branch outcomes and cascading surfaces fill down to the footer card */
.al-branch { bottom:96px; justify-content:center; }
.al-cws { position:absolute; left:0; right:0; top:38px; bottom:var(--foot); }   /* clears the scene label */
.al-cws .al-cw { top:50%; }
/* footer card heights measured in-browser: 86 / 117 / 147px for 1 / 2 / 3 rows.
   Panels above it use bottom:var(--foot); render() tags the scene. */
/* re-measured after the minicard padding went 14/16 -> 18/20 (+8px height):
   94 / 125 / 155px for 1 / 2 / 3 rows, plus a 10px gap. */
/* foot reserve tracks the card height: 9px kv padding adds 8px per row */
.al-scene { --foot:112px; }
.al-scene--foot2 { --foot:151px; }
.al-scene--foot2:has(.al-minicard--airy) { --foot:166px; }
.al-scene--foot3 { --foot:198px; }
.al-eps, .al-fts, .al-tgts, .al-sgs, .al-rts, .al-branch, .al-cws { bottom:var(--foot); }
/* comparison pills must not run past the frame edge */
.al-scene .al-cmp-pill { max-width:100%; }   /* now scoped inside its own card */
/* the orbit gets its own area below the caption so orbs never sit under it */
.al-orbit { position:absolute; left:0; right:0; top:34px; bottom:6px; }

/* ============================================================
   PATTERN · HOW IT WORKS v2 — pipeline, tab graphics, paths,
   verdict inspector. Graphics: white frame, bg-warm inner
   cards, emerald glyphs, no emerald fills, no drop shadows.
   ============================================================ */

/* -- 4-stage pipeline above the process cards -- */
.al-pipe {
  /* Inverted when the section went white: the panel takes the warm ground so the
     flow still reads as ONE grouped unit (it sits above four separate step cards
     below, and loose blocks would read as a second set of four). */
  display:grid; gap:12px; align-items:stretch;
  background:var(--bg-warm); border-radius:14px; padding:22px;
}
@media (min-width:1000px){
  .al-pipe { grid-template-columns:1fr auto 1fr auto 1fr auto 1.25fr; align-items:center; }
}
.al-pipe__node {
  background:var(--white); border-radius:11px; padding:16px 18px;
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.al-pipe__ic { color:var(--emerald-600); display:block; margin-bottom:6px; }
.al-pipe__ic .icon { width:20px; height:20px; }
.al-pipe__node b { font-size:14.5px; color:var(--ink-900); }
.al-pipe__node em { font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-500); }
/* Dark core node — these MUST follow the base rules above: `.al-pipe__node--core b`
   and `.al-pipe__node b` have identical specificity (one class + one type), so
   source order decides. Listed first, the label rendered navy-on-navy. */
.al-pipe__node--core { background:var(--ink-900); }
.al-pipe__node--core b { color:var(--white); }
.al-pipe__node--core em { color:rgba(255,255,255,.72); }
.al-pipe__node--core .al-pipe__ic { color:var(--emerald-400); }
.al-pipe__link { display:flex; align-items:center; justify-content:center; color:var(--ink-200); }
.al-pipe__link i { display:none; }
.al-pipe__link .icon { width:16px; height:16px; }
@media (max-width:999px){ .al-pipe__link { transform:rotate(90deg); } }
.al-pipe__out { display:grid; gap:8px; align-content:center; }
.al-pipe__row {
  /* white like the nodes — these sit inside the warm panel too */
  display:flex; align-items:center; gap:9px; font-size:13px;
  background:var(--white); border-radius:9px; padding:11px 13px; color:var(--ink-700);
}
.al-pipe__row b { margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-900); }
.al-pipe__row--ok .icon { color:var(--emerald-600); width:14px; height:14px; }
.al-pipe__row--no .icon { color:var(--spam); width:14px; height:14px; }
.al-pipe__row--no b { color:var(--ink-500); }

/* -- shared frame for every how-it-works graphic -- */
.al-hg { background:var(--white); border-radius:13px; padding:16px; height:100%; display:flex; flex-direction:column; }
.al-hg--flush { margin-top:18px; }
.al-hg__head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.al-hg__label {
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-400);
}
.al-hg__tag {
  margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--emerald-800);
  background:var(--bg-warm); border-radius:var(--r-pill); padding:3px 9px; white-space:nowrap;
}
/* flex, not grid: the footer uses margin-top:auto to pin to the frame bottom, and
   a grid with align-content:start leaves no free space for auto margins to eat. */
.al-hg__body { display:flex; flex-direction:column; gap:12px; flex:1; }
.al-hg__body--rows { gap:9px; }
.al-hg__msg {
  background:var(--bg-warm); border-radius:10px; padding:14px 15px;
  font-size:13.5px; line-height:1.62; color:var(--ink-700);
}
.al-hg__m { background:var(--warn-bg,#FDF3D7); color:var(--ink-900); border-radius:4px; padding:0 3px; font-weight:600; }
.al-hg__sigs, .al-hg__pills { display:flex; flex-wrap:wrap; gap:7px; }
.al-hg__sig {
  font-family:var(--font-mono); font-size:11px; color:var(--spam-text,#9F1239);
  background:var(--spam-bg); border-radius:6px; padding:4px 9px;
}
.al-hg__pill {
  font-family:var(--font-mono); font-size:11px; color:var(--emerald-800);
  background:var(--bg-warm); border-radius:6px; padding:4px 9px;
}
/* No hairline: every tab footer sits under a card or code block that already
   provides its own edge, so the rule read as a stray line. */
.al-hg__foot {
  display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px;
  font-size:12.5px; color:var(--ink-500);
}
.al-hg__foot b { margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-900); display:inline-flex; align-items:center; gap:5px; }
.al-hg__foot b .icon { width:12px; height:12px; color:var(--emerald-600); }
.al-hg__code {
  background:var(--ink-900); border-radius:10px; padding:14px 15px; margin:0; overflow-x:auto;
  font-family:var(--font-mono); font-size:12px; line-height:1.65; color:rgba(255,255,255,.82);
  white-space:pre;
}
.al-hg__code .k { color:var(--yellow-400); font-weight:600; }
.al-hg__code .s { color:var(--emerald-400); }
.al-hg__code .v { color:#A5D8FF; }
.al-hg__code .c { color:rgba(255,255,255,.42); }

/* reputation rows */
/* 4 columns since the avatar was added — with the old 3-column track list the
   sender address fell into the 74px bar column and wrapped one character wide. */
.al-rep { display:grid; grid-template-columns:34px 1fr 58px auto; gap:11px; align-items:center;
  background:var(--bg-warm); border-radius:9px; padding:11px 13px; }
.al-rep__id b { display:block; font-family:var(--font-mono); font-size:12px; color:var(--ink-900); }
.al-rep__id em { font-style:normal; font-size:11.5px; color:var(--ink-500); }
.al-rep__bar { display:block; height:5px; border-radius:3px; background:var(--ink-100); overflow:hidden; }
.al-rep__bar i { display:block; height:100%; border-radius:3px; }
.al-rep__v { font-family:var(--font-mono); font-size:11px; color:var(--ink-500); white-space:nowrap; }
.al-rep__v--ok { color:var(--emerald-700); }
.al-rep__v--no { color:var(--spam); }

/* behavioural comparison */
.al-beh { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; align-items:stretch; }
.al-beh__col { background:var(--bg-warm); border-radius:10px; padding:13px; display:flex; flex-direction:column; gap:7px; justify-content:space-between; }
.al-beh__who { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.al-beh__who--no { color:var(--spam); }
.al-beh__who--ok { color:var(--emerald-700); }
.al-beh__kv { display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--ink-500); }
.al-beh__kv b { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--ink-900); }

/* feedback entry */
.al-hg__entry { display:flex; align-items:center; gap:11px; background:var(--bg-warm); border-radius:10px; padding:12px 13px; }
.al-hg__entry b { display:block; font-size:13.5px; color:var(--ink-900); }
.al-hg__entry em { font-style:normal; font-size:12px; color:var(--ink-500); }
.al-hg__ic { color:var(--warn-text); display:flex; }
.al-hg__ic .icon { width:18px; height:18px; }
.al-hg__entry .al-hg__pill { margin-left:auto; }

/* -- tab panel: copy + list left, graphic right -- */
.al-aipanel__gfx { display:flex; }
/* centred, not top-packed: the graphic fills the full panel height, so a
   top-aligned copy stack sat visibly high against it. */
.al-aipanel__copy { display:grid; gap:12px; align-content:center; }
/* 12px grid gap + 12px here = the same 24px rhythm as title->description
   (which gets 12px gap + the h3's 12px margin-bottom). */
.al-aipanel__copy .al-aipanel__list { margin-top:12px; }
/* Same CTA as the homepage left/right rows. The copy column is a grid, so the
   button needs justify-self:start to hug its label (a grid item stretches by
   default), and 12px instead of --sp-6 because the 12px grid gap already
   contributes — netting the homepage's 24px. */
.al-aipanel__copy .al-trust__cta { justify-self:start; margin-top:12px; }

/* -- two paths: three live concepts rebuilt in our system, laid out on the
      homepage's alternating al-trust rows -- */
.al-paths { background:var(--bg-warm); }
.al-paths .al-trust__visual { background:var(--white); }
.al-tp__list { margin-top:14px; }

/* No warm ground on the graphic itself — warm is applied inside the individual
   cards/chips instead, so each composition reads as elements on white. */
.al-tp { position:relative; width:100%; height:100%; min-height:338px; overflow:hidden;
  border-radius:12px; background:transparent; }

/* floating pill vocabulary shared by all three */
.al-tp__badge {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--yellow-500); color:var(--ink-900); border-radius:var(--r-pill);
  padding:6px 13px; font-size:12px; font-weight:700; white-space:nowrap;
  box-shadow:var(--shadow-2);
}
.al-tp__badge .icon { width:13px; height:13px; }


/* ① hub and spoke — one plugin covers every form plugin */
/* --orbit-y shifts the ring, the logo chips and the mark as one unit, so the
   orbit can be nudged without re-deriving every position. */
.al-tp--orbit { display:flex; align-items:center; justify-content:center; --orbit-y:-20px; }
.al-tp__ring {
  position:absolute; top:calc(50% + var(--orbit-y, 0px)); left:50%; width:282px; height:282px; margin:-141px 0 0 -141px;
  border:1.5px dashed var(--ink-200); border-radius:50%;
}
/* Just a dotted ring around the mark — no white disc, no shadow. */
.al-tp__core {
  position:relative; z-index:2; width:116px; height:116px; border-radius:50%;
  background:transparent; box-shadow:none;
  border:1.5px dotted var(--ink-200);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(var(--orbit-y, 0px));
}
.al-tp__core img { width:46px; height:48px; display:block; }   /* mark scaled with the chips */
.al-tp__core .icon { width:28px; height:28px; color:var(--emerald-600); }
.al-tp__core em {
  font-style:normal; font-family:var(--font-mono); font-size:8.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-500);
}
/* Positioned by angle on the orbit radius: rotate out, then counter-rotate the
   chip so the logo stays upright. Even 72deg spacing, so nothing clusters. */
.al-tp__sat {
  position:absolute; top:calc(50% + var(--orbit-y, 0px)); left:50%; z-index:2;
  width:66px; height:66px; border-radius:50%;
  background:var(--bg-warm); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-1);
  /* radius stays 141px — the chips grow, the orbit does not */
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-141px) rotate(calc(-1 * var(--a)));
}
.al-tp__sat img { width:36px; height:36px; object-fit:contain; display:block; }
/* wordmark satellites: product logos are horizontal lockups, so a 36px round
   chip renders them unreadable. Pill chips let the real logo be legible. */
.al-tp--wordmarks .al-tp__sat {
  width:auto; height:34px; border-radius:999px; padding:0 13px;
}
.al-tp--wordmarks .al-tp__sat img { width:auto; height:15px; max-width:88px; }
/* full-bleed photo carrying floating elements */
.al-pf__veil {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,27,56,.34) 0%, rgba(20,27,56,.12) 46%, rgba(20,27,56,0) 72%);
}
.al-pf__veil--r {
  background:linear-gradient(270deg, rgba(20,27,56,.34) 0%, rgba(20,27,56,.12) 46%, rgba(20,27,56,0) 72%);
}
/* Floating elements sit on photography, not on a white panel: --shadow-2 at
   .10 alpha disappears against a busy image. A tight contact shadow plus a
   softer spread separates them from whatever is behind. */
.al-pf .al-pill, .al-pf__stat {
  box-shadow:0 2px 6px rgba(20,27,56,.18), 0 14px 30px -8px rgba(20,27,56,.30);
}
.al-pf .al-pill { position:absolute; z-index:2; }
.al-pf__stat {
  /* shadow comes from the shared .al-pf rule above — declaring --shadow-2 here
     re-overrode it on source order and left the card flat on the photo */
  position:absolute; z-index:2; background:var(--white); border-radius:12px;
  padding:14px 18px; text-align:left;
}
.al-pf__stat b { display:block; font-size:30px; font-weight:800; color:var(--ink-900); line-height:1; letter-spacing:-0.02em; }
.al-pf__stat em {
  font-style:normal; display:block; margin-top:5px; font-family:var(--font-mono);
  font-size:11.5px; color:var(--ink-500);
}

/* orbit core as a solid brand-navy disc carrying a wordmark, for the pages
   whose story is the company rather than the product */
.al-tp__core--solid { background:var(--ink-900); border-color:var(--ink-900); }
/* a real brand mark fills the disc — the AM logo already carries its navy
   ground, so the disc just clips it to a circle */
.al-tp__core--brand { border:none; overflow:hidden; background:var(--ink-900); width:92px; height:92px; }
.al-tp__core--brand img { width:100%; height:100%; object-fit:cover; display:block; }
.al-tp__core--solid em {
  font-style:normal; font-weight:800; font-size:12.5px; line-height:1.15;
  color:var(--white); text-align:center; letter-spacing:-0.01em; padding:0 8px;
}

/* ② three-step request flow — one API call */
/* Live's 3 horizontal steps kept, but the response payload moves to a full-width
   block beneath them — at 444px the third card could not hold readable JSON. */
/* Even distribution now the numbered badges are gone (they needed clearance above
   each card). Pill sits higher: bottom:40px against the 74px reserved below. */
/* One gap value between every major component, so the stack reads as an even
   rhythm rather than three differently-spaced blocks. */
.al-tp--flow { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:22px 18px 64px; }
.al-tp--flow .al-tp__badge--c { top:auto; bottom:22px; }
.al-tp__steps { display:flex; align-items:stretch; gap:5px; }
.al-tp__sk { display:none; }
.al-tp__endpoint {
  align-self:center; font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--emerald-800); background:var(--bg-warm); border-radius:var(--r-pill); padding:6px 14px;
}
.al-tp__step {
  position:relative; flex:1; min-width:0; background:var(--bg-warm); border-radius:11px;
  padding:18px 13px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.al-tp__ic .icon { width:20px; height:20px; color:var(--emerald-600); }
.al-tp__ic--mark img { width:19px; height:20px; display:block; }
.al-tp__ic--ok .icon { color:var(--emerald-700); }
.al-tp__step b { font-size:13px; color:var(--ink-900); }
.al-tp__step em {
  font-style:normal; font-family:var(--font-mono); font-size:10px; color:var(--ink-500);
  line-height:1.3;
}
.al-tp__step code {
  font-family:var(--font-mono); font-size:11px; color:var(--emerald-800);
  background:var(--bg-warm); border-radius:6px; padding:4px 9px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.al-tp__sk { display:block; width:78%; height:6px; border-radius:3px; background:var(--ink-100); }
.al-tp__sk--s { width:52%; }
.al-tp__dots { display:flex; gap:5px; }
.al-tp__dots i { width:5px; height:5px; border-radius:50%; background:var(--emerald-400); }
.al-tp__dots i:nth-child(2) { background:var(--emerald-500); }
.al-tp__dots i:nth-child(3) { background:var(--emerald-600); }
.al-tp__json {
  margin:0; width:100%; box-sizing:border-box; background:var(--ink-900); border-radius:9px;
  padding:12px 14px; font-family:var(--font-mono); font-size:9.5px; line-height:1.55;
  color:rgba(255,255,255,.8); white-space:pre; overflow:hidden;
}
.al-tp__json .s { color:var(--emerald-400); }
.al-tp__json .v { color:#A5D8FF; }
.al-tp__arrow { align-self:center; color:var(--ink-200); flex:none; }
.al-tp__arrow .icon { width:15px; height:15px; }

/* ③ failsafe, photo-first: the image fills the frame and the UI floats over it.
   Elements are placed top-left / centre-left / bottom-right so they read as a
   diagonal, never a cluster, and never cross the subject's face (upper right). */
.al-tp--safe { padding:0; }
/* This row's visual carries a photo, so it loses the 18px white inset and the
   graphic fills the frame corner to corner. */
.al-trust__visual--bleed { padding:0; }
.al-trust__visual--bleed .al-tp { border-radius:inherit; }
.al-tp--safe > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.al-tp__float {
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-radius:var(--r-pill); padding:9px 15px; box-shadow:var(--shadow-2);
  font-size:12.5px; font-weight:600; color:var(--ink-900); white-space:nowrap;
}
.al-tp__float .icon { width:14px; height:14px; color:var(--emerald-600); }
.al-tp__float--tl { top:18px; left:18px; }
/* The outcome pill, matching G1/G2's yellow badge: same yellow-500 ground,
   navy label, weight 700. Navy on yellow-500 is 10.64:1. */
.al-tp__float--br {
  bottom:18px; right:18px; background:var(--yellow-500); color:var(--ink-900);
  font-weight:700;
}
.al-tp__float--br .icon { color:var(--ink-900); }
/* the two outcomes: one small card, mid-left, clear of the subject */
.al-tp__float--ml {
  top:50%; left:18px; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:stretch; gap:7px;
  border-radius:12px; padding:12px; white-space:normal;
}
.al-tp__frow { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-700); }
.al-tp__frow .icon { width:13px; height:13px; flex:none; }
.al-tp__frow b { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-900); }
.al-tp__frow--warn .icon { color:var(--warn-text); }

/* -- verdict inspector -- */
.al-verdict { padding:var(--sp-24) 0; background:var(--white); }
.al-verdict__split { display:grid; gap:var(--sp-8); align-items:start; }
@media (min-width:960px){ .al-verdict__split { grid-template-columns:1fr 1fr; gap:var(--sp-12); } }
.al-vx { position:sticky; top:96px; }
.al-vx__code { font-size:12.5px; padding:22px 22px; }
.al-verdict__cards { display:grid; gap:12px; }
.al-vcard { background:var(--bg-warm); border-radius:12px; padding:20px 22px; position:relative; }
.al-vcard__n { position:absolute; top:18px; right:20px; font-size:18px; color:var(--emerald-600); }
.al-vcard h3 { font-size:16.5px; font-weight:700; margin-bottom:7px; padding-right:28px; }
.al-vcard p { font-size:14px; color:var(--ink-600); line-height:1.6; }

/* ============================================================
   PATTERN · BLOG INDEX (editorial)
   Featured post + 2-up article grid in the main column, topics
   and most-read in a sticky RIGHT rail, newsletter before footer.
   Reuses .al-post / .al-post--lead so cards stay identical to the
   rest of the site; only layout and scale are new here.
   ============================================================ */
.al-blog { padding:var(--sp-12) 0 var(--sp-24); background:var(--white); }
.al-blog__wrap { display:grid; gap:var(--sp-12); align-items:start; }
@media (min-width:1000px){
  /* main column first, rail second — rail sits on the RIGHT */
  .al-blog__wrap { grid-template-columns:minmax(0,1fr) 288px; gap:64px; }
}
.al-blog__main { min-width:0; }

/* ---- Latest / Featured toggle, top-left of the content area ---- */
.al-blog__views {
  display:inline-flex; gap:3px; margin-bottom:var(--sp-8);
  background:var(--ink-50); border:1px solid var(--ink-100);
  border-radius:var(--r-pill); padding:3px;
}
.al-blog__view {
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-600);
  background:none; border:none; border-radius:var(--r-pill); cursor:pointer;
  padding:6px 14px;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.al-blog__view:hover { color:var(--ink-900); }
.al-blog__view.is-on { background:var(--white); color:var(--emerald-800); font-weight:700; box-shadow:var(--shadow-1); }

/* ---- featured: full width of the main column, one column, larger ---- */
.al-blog .al-post--lead { padding:0; margin-bottom:var(--sp-12); }
.al-blog .al-post--lead h2 { font-size:clamp(1.5rem,2.2vw,1.95rem); line-height:1.18; }

.al-blog__leadmeta {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--emerald-800);
}
.al-blog__leadmeta i { width:3px; height:3px; border-radius:50%; background:var(--ink-200); font-style:normal; }

/* ---- post cover images, pulled from the live site ---- */
.al-post__media {
  display:block; margin:0 0 6px; border-radius:12px; overflow:hidden;
  background:var(--ink-50); aspect-ratio:1024/538;
}
.al-post__media img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.al-post:hover .al-post__media img { transform:scale(1.03); }
.al-blog .al-post--lead .al-post__media { margin:0 0 12px; border-radius:var(--r-card); }

/* ---- 2-up article grid ---- */
.al-blog__grid { display:grid; gap:40px 28px; }
@media (min-width:620px){ .al-blog__grid { grid-template-columns:1fr 1fr; } }
.al-blog__grid .al-post[hidden] { display:none; }
.al-blog__meta { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-400); text-transform:uppercase; }

/* ---- show more ---- */
.al-blog__more { display:flex; justify-content:center; margin-top:var(--sp-8); }
.al-blog__more[hidden] { display:none; }

/* ---- right rail ---- */
@media (min-width:1000px){ .al-blog__side { position:sticky; top:88px; } }
.al-blog__block + .al-blog__block { margin-top:var(--sp-8); }

/* ---- search, top of the rail ---- */
.al-blog__search {
  display:flex; align-items:center; gap:9px;
  background:var(--bg-warm); border:1px solid var(--ink-100);
  border-radius:var(--r-control); padding:0 12px;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.al-blog__search-button {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  padding:0; border:0; background:none; color:var(--ink-400); cursor:pointer;
}
.al-blog__search-button:hover, .al-blog__search:focus-within .al-blog__search-button { color:var(--emerald-700); }
.al-blog__search-button .icon { width:16px; height:16px; }
.al-blog__search:focus-within { border-color:var(--emerald-600); background:var(--white); box-shadow:0 0 0 3px rgba(5,150,105,.14); }
.al-blog__search > .icon { width:16px; height:16px; color:var(--ink-400); flex:none; }
.al-blog__search:focus-within > .icon { color:var(--emerald-700); }
.al-blog__search input {
  flex:1; min-width:0; font:inherit; font-size:14px; color:var(--ink-900);
  background:none; border:none; padding:10px 0;
}
.al-blog__search input::placeholder { color:var(--ink-400); }
.al-blog__search input:focus { outline:none; box-shadow:none; }
.al-blog__search input::-webkit-search-cancel-button { display:none; }
.al-blog__clear {
  flex:none; background:none; border:none; cursor:pointer; padding:2px;
  display:inline-flex; color:var(--ink-400); line-height:0;
}
.al-blog__clear[hidden] { display:none; }
.al-blog__clear:hover { color:var(--ink-900); }
.al-blog__clear .icon { width:14px; height:14px; }
.al-blog__pagination { margin-top:var(--sp-12); }
.al-blog__pagination .nav-links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.al-blog__pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 10px; border-radius:var(--r-control); color:var(--ink-600);
  font-size:14px; font-weight:600; text-decoration:none;
}
.al-blog__pagination a.page-numbers:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-blog__pagination .page-numbers.current { background:var(--ink-900); color:var(--white); }

/* ---- social, bottom of the rail ---- */
.al-blog__social { display:flex; gap:8px; }
.al-blog__social a {
  width:38px; height:38px; border-radius:var(--r-control);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-warm); color:var(--ink-500);
  transition:color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.al-blog__social a:hover { background:var(--ink-50); color:var(--emerald-800); }
.al-blog__social .icon { width:18px; height:18px; }

/* ---- empty state ---- */
.al-blog__empty { font-size:15px; color:var(--ink-500); padding:var(--sp-8) 0; }
.al-blog__empty[hidden] { display:none; }
.al-blog__label {
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:14px;
}
.al-blog__topics { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.al-blog__topic {
  width:100%; text-align:left; cursor:pointer; font:inherit;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:none; border:none; border-radius:var(--r-control); padding:9px 12px;
  font-size:14.5px; color:var(--ink-600);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
/* filled states go warm — emerald is reserved for icons and borders */
.al-blog__topic:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-blog__topic span { font-family:var(--font-mono); font-size:12px; color:var(--ink-400); }
.al-blog__topic[aria-pressed="true"] { background:var(--bg-warm); color:var(--ink-900); font-weight:700; }
.al-blog__topic[aria-pressed="true"] span { color:var(--ink-600); }

.al-blog__read { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.al-blog__read li + li { border-top:1px solid var(--ink-100); }
.al-blog__read a { display:flex; gap:12px; padding:14px 0; text-decoration:none; align-items:flex-start; }
.al-blog__read b {
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-400);
  flex:none; padding-top:1px;
}
.al-blog__read p { font-size:14px; line-height:1.4; color:var(--ink-700); font-weight:600; }
.al-blog__read a:hover p { color:var(--emerald-800); }

/* ---- newsletter, in place of the product CTA ---- */
.al-news { padding:0 0 var(--sp-24); background:var(--white); }
.al-news__inner {
  /* identical treatment to .al-cta — emerald-950 plus the same scanline */
  background:var(--emerald-950);
  background-image:linear-gradient(rgba(248,199,62,.05) 1px, transparent 1px);
  background-size:100% 8px;
  border-radius:var(--r-card);
  padding:var(--sp-16) var(--sp-8); text-align:center;
  position:relative; overflow:hidden;
}
.al-news__icon {
  width:48px; height:48px; border-radius:var(--r-card); background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.al-news__icon .icon { width:23px; height:23px; color:var(--yellow-500); }
.al-news__h2 {
  font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; color:var(--white);
  letter-spacing:var(--track-h2); line-height:1.14; max-width:19ch; margin:0 auto;
}
.al-news__sub { font-size:17px; color:rgba(255,255,255,.75); line-height:1.55; max-width:52ch; margin:16px auto 0; }
.al-news__form { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:var(--sp-8) auto 0; max-width:520px; }
.al-news__input {
  flex:1 1 260px; min-width:0; font:inherit; font-size:15px; color:var(--white);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-control);
  padding:13px 16px; transition:border-color var(--dur-base) var(--ease-out);
}
.al-news__input::placeholder { color:rgba(255,255,255,.45); }
.al-news__input:focus { outline:none; border-color:var(--yellow-500); }
.al-news__note {
  margin-top:16px; font-size:13px; color:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.al-news__note .icon { width:14px; height:14px; color:var(--emerald-400); }

/* ---- integration / use-case pages: tighten the 3-steps -> why transition ----
   Both bands are bg-warm and directly adjacent, so the stock 96+96px read as one
   192px void. Now 60+60 = 120px total (literal, not a token: the scale has no 60). MUST stay after `.al-steps`:
   `.al-steps--tight` has the same specificity, so source order decides. */
.al-steps--tight { padding-bottom:60px; }
.al-steps--tight + .al-trust { padding-top:60px; }

/* ---- AI tab graphics: contextual photography inside the UI frame ---- */
.al-hg__shot {
  /* fixed band, NOT flex:1 — a flex item sized "auto" around an image resolves
     to the image's intrinsic height, and a portrait photo blew the panel from
     ~550px to 1023px. */
  position:relative; margin:0; border-radius:10px; overflow:hidden;
  flex:0 0 auto; height:104px;
}
.al-hg__shot img { width:100%; height:100%; object-fit:cover; display:block; }
/* Photo band that absorbs whatever vertical slack its panel has, so no graphic
   leaves a hole under its content. `flex:1 1 0` + min-height:0 is what makes this
   safe: the earlier blowout (panel 550px -> 1023px) came from an AUTO-sized flex
   item resolving to a portrait image's intrinsic height. Sizing from zero and
   pinning the img to height:100% ignores intrinsic size entirely. */
.al-hg__shot--fill { flex:1 1 0; min-height:184px; height:auto; }
/* a soft scrim so the pin stays legible whatever the photo does underneath */
.al-hg__shot::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,27,56,0) 42%, rgba(20,27,56,.42) 100%);
}
.al-hg__pin {
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--white); border-radius:var(--r-pill); padding:6px 12px;
  box-shadow:var(--shadow-2); font-size:11.5px; font-weight:600; color:var(--ink-900);
}
.al-hg__pin .icon { width:13px; height:13px; color:var(--emerald-600); }
/* reputation rows: the sender is a person, not just a string */
.al-rep__av {
  width:34px; height:34px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--bg-warm); display:flex; align-items:center; justify-content:center;
}
.al-rep__av img { width:100%; height:100%; object-fit:cover; display:block; }
.al-rep__av .icon { width:15px; height:15px; color:var(--ink-400); }
.al-rep__av--bot { background:var(--spam-bg); }
.al-rep__av--bot .icon { color:var(--spam); }
/* behaviour columns get parallel headers: a bot tile vs a real hand on a phone */
/* Grows with the panel but capped: uncapped it reached 296px, which turned the
   dark 'headless' cell into a large void. Leftover goes to the rows below. */
.al-beh__shot { border-radius:8px; overflow:hidden; flex:1 1 0; min-height:104px;
  max-height:196px; margin-bottom:2px; position:relative; }
.al-beh__who, .al-beh__kv { flex:none; }
/* Crop shifted 50px left inside the frame. There is 87px of cover overflow per
   side at this box size, so the frame stays fully covered (37px spare).
   Only the human cell has an <img> — the bot cell holds a <code> chip. */
.al-beh__shot img { width:100%; height:100%; object-fit:cover; display:block;
  object-position:calc(50% - 50px) center; }
.al-beh__shot--bot { background:#0E1F1A; display:flex; align-items:center; justify-content:center; }
.al-beh__shot--bot code {
  font-family:var(--font-mono); font-size:10.5px; color:#6EE7B7; letter-spacing:.04em;
}

/* ============================================================
   PATTERN · integration / use-case hero — two-column split
   Copy left, contextual photo composition right. Overrides the
   centred .al-phero defaults rather than forking the section.
   ============================================================ */
.al-phero--split { text-align:left; }
.al-phero--split .al-container { display:grid; gap:var(--sp-10,40px); align-items:center; }
@media (min-width:960px){
  /* content-focused split: the h1 + 4 meta items need more room than the figure */
  .al-phero--split .al-container { grid-template-columns:1.08fr 1fr; gap:var(--sp-12); }
}
.al-phero--split .al-hero__sub { max-width:56ch; margin:16px 0 0; }
.al-phero--split .al-hero__meta { justify-content:flex-start; gap:var(--sp-2) var(--sp-6); color:var(--ink-600); }
@media (min-width:960px){
  /* Two even columns, two checks each. Flex-wrap left the fourth item
     orphaned on its own row (3 + 1) once the copy column narrowed; a fixed
     2-up grid keeps both columns aligned and the block balanced under the CTA.
     Styling, icons, type and gaps are untouched — only the flow changes. */
  .al-phero--split .al-hero__meta {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    /* both columns fill the copy column, separated by the standard --sp-6
       column gap inherited from the rule above */
  }
}
.al-phero--split .al-phero__cta { margin-top:var(--sp-8); }
.al-phero--split .al-phero__h1 { font-size:clamp(2rem,3.3vw,3rem); }

/* the figure: photo base + one floating product card (homepage figure grammar) */
.al-phero__figure { position:relative; width:100%; max-width:520px; margin-left:auto; }
@media (max-width:959px){ .al-phero__figure { margin:0 auto; } }
.al-hvis { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1.16/1; box-shadow:var(--shadow-2); }
.al-hvis__photo { width:100%; height:100%; object-fit:cover; display:block; }
.al-hvis__card {
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-2);
}
.al-hvis__logo {
  flex:none; width:40px; height:40px; border-radius:10px; background:var(--bg-warm);
  display:flex; align-items:center; justify-content:center;
}
.al-hvis__logo img { width:26px; height:26px; object-fit:contain; display:block; }
.al-hvis__logo .icon { width:22px; height:22px; color:var(--emerald-700); }
.al-hvis__t { min-width:0; display:block; }
.al-hvis__t b { display:block; font-size:14.5px; font-weight:700; color:var(--ink-900); line-height:1.25; }
.al-hvis__t em {
  font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-500);
  display:block; margin-top:2px;
}
/* the on-state toggle carries the "enabled" claim */
.al-hvis__tog {
  margin-left:auto; flex:none; width:36px; height:20px; border-radius:var(--r-pill);
  background:var(--emerald-600); position:relative;
}
.al-hvis__tog::after {
  content:""; position:absolute; top:2px; left:18px; width:16px; height:16px;
  border-radius:50%; background:var(--white);
}

/* ═══════════════════════════════════════════════════════════════════
   Hero figures (integration + use-case pages).
   Replaces the old photo-plus-toggle, which showed a setting rather than
   an outcome. Frame is 520 x 448; every composition tells one story at a
   glance: what was coming in, what ActiveLayer did, what the reader keeps.
   Warm ground, white cards, emerald = kept, spam red = stopped.
   ═══════════════════════════════════════════════════════════════════ */
.al-hfig {
  position:relative; border-radius:16px; aspect-ratio:1.16/1;
  background:var(--bg-warm); box-shadow:var(--shadow-2);
  padding:20px; display:flex; flex-direction:column; gap:12px; overflow:hidden;
}
.al-hfig__top { display:flex; align-items:center; gap:10px; }
.al-hfig__logo {
  width:30px; height:30px; border-radius:8px; background:var(--white); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1);
}
.al-hfig__logo img { width:19px; height:19px; object-fit:contain; }
.al-hfig__logo .icon { width:16px; height:16px; color:var(--emerald-600); }
.al-hfig__name { font-size:13.5px; font-weight:700; color:var(--ink-900); }
.al-hfig__label {
  margin-left:auto; font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400);
}
/* the stack of rows that carries the story */
.al-hfig__list { background:var(--white); border-radius:12px; padding:8px 4px; flex:1;
  display:flex; flex-direction:column; justify-content:space-evenly; }
/* the response block fills whatever the code leaves, so no dead space */
.al-hfig .al-hkv { flex:1; align-content:center; }
.al-hrow { display:flex; align-items:center; gap:10px; padding:11px 12px; }
.al-hrow__av { width:26px; height:26px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--ink-50); display:flex; align-items:center; justify-content:center; }
.al-hrow__av img { width:100%; height:100%; object-fit:cover; display:block; }
.al-hrow__av .icon { width:12px; height:12px; color:var(--ink-400); }
.al-hrow__t { flex:1; min-width:0; font-size:12.5px; color:var(--ink-800,#2C324C);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-hrow__t em { font-style:normal; display:block; font-size:11px; color:var(--ink-500); }
.al-hrow--out .al-hrow__t { color:var(--ink-400); text-decoration:line-through; }
.al-hrow--out .al-hrow__av { background:var(--spam-bg); }
.al-hrow--out .al-hrow__av .icon { color:var(--spam); }
.al-hrow__v { font-family:var(--font-mono); font-size:10.5px; font-weight:600; flex:none;
  padding:4px 9px; border-radius:var(--r-pill); }
.al-hrow__v--ok { background:var(--emerald-100); color:var(--emerald-800); }
.al-hrow__v--no { background:var(--spam-bg); color:var(--spam-text); }
/* one honest number, pinned bottom */
.al-hfig__foot { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-600); }
.al-hfig__foot b { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--ink-900); }
.al-hfig__foot .icon { width:14px; height:14px; color:var(--emerald-600); flex:none; }
/* floating pill, used sparingly — one per figure at most */
.al-hpill {
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:var(--white); border-radius:var(--r-pill); padding:7px 13px;
  box-shadow:var(--shadow-2); font-size:11.5px; font-weight:600; color:var(--ink-900);
}
.al-hpill .icon { width:13px; height:13px; color:var(--emerald-600); }
/* code + response, for framework pages */
.al-hcode { background:#0E1F1A; border-radius:12px; padding:15px 16px; font-family:var(--font-mono);
  font-size:11.5px; line-height:1.8; color:#C9E5DA; overflow:hidden; word-break:break-word; }
.al-hcode .k { color:#6E8F82; } .al-hcode .g { color:#6EE7B7; } .al-hcode .s { color:#9FD3BE; }
.al-hkv { background:var(--white); border-radius:12px; padding:12px 14px; display:grid; gap:7px; }
.al-hkv__r { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-500); }
.al-hkv__r b { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-900); }
/* flow: arrives -> gate */
.al-hflow { display:flex; align-items:stretch; gap:9px; }
.al-hflow__in, .al-hflow__gate { flex:1; background:var(--white); border-radius:11px; padding:12px 13px;
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-900); font-weight:600; }
.al-hflow__gate { background:var(--emerald-tint); }
.al-hflow__in em, .al-hflow__gate em { display:block; font-style:normal; font-size:11px; font-weight:400; color:var(--ink-500); }
.al-hflow__in .icon, .al-hflow__gate .icon { width:17px; height:17px; color:var(--emerald-600); flex:none; }
.al-hflow__arrow { align-self:center; }
.al-hflow__arrow .icon { width:15px; height:15px; color:var(--ink-200); }
/* metric */
.al-hnum { font-family:var(--font-mono); font-size:52px; font-weight:600; letter-spacing:-.03em;
  line-height:1; color:var(--ink-900); text-align:center; padding-top:14px; }
.al-hnum small { font-size:20px; color:var(--emerald-700); }
.al-hnum__sub { text-align:center; font-size:12.5px; color:var(--ink-500); margin-top:7px; }
.al-hbar { display:flex; align-items:center; gap:9px; margin-top:7px; font-size:11.5px; color:var(--ink-600); }
.al-hbar span { width:88px; flex:none; }
.al-hbar i { flex:1; height:5px; border-radius:3px; background:var(--ink-50); overflow:hidden; }
.al-hbar i b { display:block; height:100%; border-radius:3px; }
.al-hbar em { font-style:normal; font-family:var(--font-mono); font-size:10.5px; width:52px; text-align:right; flex:none; }
/* compare */
.al-hcmp { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; }
.al-hcmp__col { background:var(--white); border-radius:11px; padding:14px; display:flex; flex-direction:column; gap:8px; justify-content:space-between; }
.al-hcmp__col--bad { background:var(--ink-25); }
.al-hcmp__h { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.al-hfield { height:24px; border-radius:6px; background:var(--ink-50); display:block; }
.al-hcmp__col--bad .al-hfield { background:var(--ink-100); }
.al-hfield--captcha { height:28px; background:var(--spam-bg); border:1.5px dashed var(--spam);
  font-style:normal; font-size:10.5px; color:var(--spam-text); display:flex; align-items:center; justify-content:center; }
.al-hfield--go { height:28px; background:var(--emerald-600); color:var(--white); font-style:normal;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; }
.al-hfield--go .icon { width:12px; height:12px; color:var(--white); }
.al-hcmp__v { font-family:var(--font-mono); font-size:11.5px; font-weight:600; }
.al-hcmp__v--bad { color:var(--spam-text); }
.al-hcmp__v--ok { color:var(--emerald-800); }
/* surfaces */
.al-hwins { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:9px; }
.al-hwin { background:var(--white); border-radius:10px; padding:11px 13px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-1); }
.al-hwin__d { display:flex; gap:3px; flex:none; }
.al-hwin__d i { width:5px; height:5px; border-radius:50%; background:var(--ink-100); }
.al-hwin__t { flex:1; font-size:12.5px; color:var(--ink-700); }
/* stack */
.al-hcells { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-content:center; }
.al-hcell { background:var(--white); border-radius:10px; padding:13px 8px; text-align:center; }
.al-hcell img { height:22px; width:auto; margin:0 auto 7px; display:block; }
.al-hcell .icon { width:19px; height:19px; color:var(--emerald-600); margin:0 auto 7px; display:block; }
.al-hcell span { font-size:11px; color:var(--ink-600); }

/* ═══════════════════════════════════════════════════════════════════
   Hero figures v2 — photo-led.
   v1 built a standalone UI composition per page: accurate but too detailed,
   and the message did not land. Now the contextual photo carries the frame
   and only the few elements that state the outcome float over it.
   Hierarchy: photo -> logo -> 2-4 floating elements -> nothing else.
   ═══════════════════════════════════════════════════════════════════ */
.al-hf { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1.16/1;
  box-shadow:var(--shadow-2); background:var(--bg-warm); }
.al-hf__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* legibility scrim — floating white elements need a darker ground under them */
.al-hf::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(115deg, rgba(20,27,56,.42) 0%, rgba(20,27,56,.14) 46%, rgba(20,27,56,.30) 100%);
}
.al-hf > * { position:absolute; z-index:2; }
/* the integration's own mark, top-left */
.al-hf__logo {
  top:16px; left:16px; display:flex; align-items:center; gap:9px;
  background:var(--white); border-radius:var(--r-pill); padding:7px 14px 7px 8px;
  box-shadow:var(--shadow-2); font-size:12.5px; font-weight:700; color:var(--ink-900);
}
.al-hf__logo span { width:24px; height:24px; border-radius:7px; background:var(--bg-warm); flex:none;
  display:flex; align-items:center; justify-content:center; }
.al-hf__logo img { width:16px; height:16px; object-fit:contain; }
.al-hf__logo .icon { width:14px; height:14px; color:var(--emerald-600); }
/* a submission / member / review, stated in one line */
.al-hf__chip {
  /* no nowrap and no width of its own: the cluster's max-width is the
     face-safe zone, and a chip that refused to wrap overflowed straight
     back onto the face it was meant to avoid. */
  display:flex; align-items:center; gap:9px; max-width:100%;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  border-radius:11px; padding:8px 11px; box-shadow:var(--shadow-2);
  font-size:12px; line-height:1.3; color:var(--ink-900);
}
.al-hf__chip em { font-style:normal; color:var(--ink-500); }
.al-hf__chip--out { background:rgba(255,255,255,.9); }
.al-hf__chip--out b { color:var(--ink-400); text-decoration:line-through; font-weight:400; }
.al-hf__chip b { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.al-hf__v { font-family:var(--font-mono); font-size:10px; font-weight:700; padding:3px 8px;
  border-radius:var(--r-pill); flex:none; }
.al-hf__v--ok { background:var(--emerald-100); color:var(--emerald-800); }
.al-hf__v--no { background:var(--spam-bg); color:var(--spam-text); }
/* a small verdict / response card */
.al-hf__card {
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:12px; padding:11px 13px; box-shadow:var(--shadow-3); display:grid; gap:6px; min-width:0;
}
.al-hf__card .r { display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:11.5px; color:var(--ink-500); }
.al-hf__card .r b { font-family:var(--font-mono); font-size:11.5px; }
/* a small dark code snippet */
.al-hf__code {
  background:rgba(14,31,26,.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-3);
  font-family:var(--font-mono); font-size:10.5px; line-height:1.7; color:#C9E5DA;
  max-width:100%; overflow-wrap:anywhere;
}
.al-hf__code .k { color:#6E8F82; } .al-hf__code .g { color:#6EE7B7; } .al-hf__code .s { color:#9FD3BE; }
/* one number, when the number is the point */
.al-hf__stat {
  /* max-width caps the widest caption (44 chars on the AI page pushed this to
     250px); the shorter captions on the other stat pages sit well under it and
     are unaffected. */
  background:var(--white); border-radius:13px; padding:12px 16px; box-shadow:var(--shadow-3);
  text-align:left; max-width:196px;
}
.al-hf__stat b { display:block; font-family:var(--font-mono); font-size:32px; font-weight:600;
  letter-spacing:-.03em; line-height:1; color:var(--ink-900); }
.al-hf__stat b small { font-size:15px; color:var(--emerald-700); }
.al-hf__stat em { font-style:normal; display:block; font-size:11px; color:var(--ink-500); margin-top:5px; }

/* Elements are grouped, not scattered. Kabir's note: "Real" and "Blocked" are
   related and were landing in opposite corners, so the frame took two passes to
   read. One cluster, tight gaps, small jog — scans in a single glance.
   The cluster sits in a zone computed to miss the faces (see photos.py). */
.al-hf__group {
  position:absolute; z-index:2; display:flex; flex-direction:column;
  gap:7px; align-items:flex-start; max-width:74%;
}
.al-hf__group--right { align-items:flex-end; }
.al-hf__group > * { position:static !important; }

/* The original toggle card, brought back at a compact size.
   Same concept as the first hero (logo · name · "Spam protection enabled" ·
   on-state toggle) but auto-width instead of edge-to-edge, so it floats in the
   composition rather than spanning it. Replaces the plain logo pill. */
.al-hf__toggle {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-radius:12px; padding:9px 12px; box-shadow:var(--shadow-2);
}
.al-hf__toggle .tile {
  flex:none; width:30px; height:30px; border-radius:8px; background:var(--bg-warm);
  display:flex; align-items:center; justify-content:center;
}
.al-hf__toggle .tile img { width:19px; height:19px; object-fit:contain; display:block; }
.al-hf__toggle .tile .icon { width:16px; height:16px; color:var(--emerald-700); }
.al-hf__toggle .txt { min-width:0; display:block; }
.al-hf__toggle .txt b { display:block; font-size:13px; font-weight:700; color:var(--ink-900); line-height:1.25; }
.al-hf__toggle .txt em {
  font-style:normal; font-family:var(--font-mono); font-size:10px; color:var(--ink-500);
  display:block; margin-top:2px; white-space:nowrap;
}
.al-hf__toggle .tog {
  margin-left:6px; flex:none; width:32px; height:18px; border-radius:var(--r-pill);
  background:var(--emerald-600); position:relative;
}
.al-hf__toggle .tog::after {
  content:""; position:absolute; top:2px; left:16px; width:14px; height:14px;
  border-radius:50%; background:var(--white);
}

/* use-case pages: label only, no switch (nothing to enable) */
/* use-case hero pill: the icon and label read as two separate objects at the
   shared 10px gap. Tightened here only — integration heroes keep 10px because
   their pill also carries a toggle on the right. Padding and size unchanged. */
.al-hf__toggle--plain { padding:8px 14px 8px 10px; gap:8px; }
/* no tile behind the icon: the 30px warm square also added ~5px of slack
   around a 19px logo, so it collapses to the icon's own box and the 4px gap
   becomes the real distance between mark and label */
.al-hf__toggle--plain .tile { background:none; width:auto; height:auto; border-radius:0; }
.al-hf__toggle--plain .txt b { font-size:13.5px; }

/* Fixed hero composition: identity top-left, everything else bottom-left. */
.al-hf__group--tl { left:18px; top:18px; max-width:265px; }
.al-hf__group--bl { left:18px; bottom:18px; top:auto; max-width:250px; }
/* Slightly tighter corners across every floating component. */
.al-hf { border-radius:14px; }
.al-hf__toggle { border-radius:10px; }
.al-hf__toggle .tile { border-radius:7px; }
.al-hf__chip { border-radius:9px; }
.al-hf__card { border-radius:10px; }
.al-hf__code { border-radius:10px; }
.al-hf__stat { border-radius:10px; }

/* bare hero figure: no overlays, so no legibility scrim either */
.al-hf--bare::after { display:none; }

/* The yellow CTA goes borderless — its fill carries it. The white one keeps
   the stock --ink-200 outline, since white on --bg-warm is a 1.03:1 edge and
   would otherwise read as text rather than a button. */
.al-plan .al-btn--primary:not(:hover) { border-color:transparent; }
/* Contact Form 7's own inline responses — the real strings CF7 shows */
.al-cf7r { display:flex; align-items:flex-start; gap:8px; border-radius:8px; padding:9px 11px;
  font-size:11.5px; line-height:1.4; }
.al-cf7r .icon { width:13px; height:13px; flex:none; margin-top:1px; }
.al-cf7r--ok { background:var(--emerald-50); color:var(--emerald-800); }
.al-cf7r--ok .icon { color:var(--emerald-600); }
.al-cf7r--no { background:var(--spam-bg); color:var(--spam-text); }
.al-cf7r--no .icon { color:var(--spam); }
/* A CTA is never a flexible item — inside .al-mock's flex column the signup
   button was shrinking from its 34px to 19px and read as broken. */
.al-cmp-btn { flex:none; }
/* Audit card on the warm ground, spread to fill rather than floating in a
   band of empty dotted grid. */
.al-inspect--warm {
  /* starts below the signal chips (they run to y=69) instead of under them —
     the 13px overlap came out of the card's own 69px of top slack, which
     space-evenly redistributes, so nothing is lost. No shadow: the card sits
     on the warm ground as a panel, not a floating object. */
  background:var(--bg-warm); inset:82px 20px 20px 20px; box-shadow:none;
  display:flex; flex-direction:column; justify-content:space-evenly;
}
/* entry_table compact: the table centres as one group instead of stretching,
   for graphics where the rows are the whole composition */
.al-mock--compact { justify-content:center; }
.al-mock--compact .al-mock__row:last-child { border-bottom:none; }

/* Opt-in stacked scene: the panel and its footer become normal flow, each
   hugging its own content, and the pair centres in the frame. Turns a
   stretched panel with a dead band inside it into a compact composition.
   Opt-in (`stack=True` in the spec) so approved integration graphics keep
   their existing full-frame treatment. */
.al-scene--stack { display:flex; flex-direction:column; justify-content:center; gap:13px; }
.al-scene--stack > * { position:static !important; inset:auto !important; flex:0 0 auto !important;
  transform:none !important; }
.al-scene--stack .al-fill { justify-content:flex-start; }
.al-scene--stack .al-rows { flex:0 0 auto; gap:7px; }

/* gauge v2 — computed SVG arc. Replaces a conic-gradient ring with rotated tick
   arms, which printed the labels over the ring and let the needle cross the value. */
.al-gg2 { display:block; width:100%; max-width:262px; margin:2px auto 0; overflow:visible; }
.al-gg2 .gg-track  { fill:none; stroke:var(--ink-100); stroke-width:20; stroke-linecap:round; }
/* thinner than the track and centred inside it: at a near-zero value a full-width
   fill reads as a block sitting on the track rather than progress along it. */
.al-gg2 .gg-fill   { fill:none; stroke:var(--emerald-500); stroke-width:11; stroke-linecap:round; }
.al-gg2 .gg-needle { stroke:var(--ink-900); stroke-width:2.5; stroke-linecap:round; }
.al-gg2 .gg-hub    { fill:var(--ink-900); }
.al-gg2 .gg-t {
  font-family:var(--font-mono); font-size:10px; fill:var(--ink-400);
  text-anchor:middle; dominant-baseline:middle;
}
.al-gg2 .gg-v {
  font-family:var(--font-mono); font-size:30px; fill:var(--ink-900);
  text-anchor:middle; font-weight:600;
}
.al-gg2 .gg-u { font-size:13px; fill:var(--emerald-700); }

/* honeypot signal pills floating over the photo variant */
.al-hp__pill {
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  border-radius:var(--r-pill); padding:6px 11px; box-shadow:var(--shadow-2);
  font-size:11.5px; font-weight:600; color:var(--ink-900); white-space:nowrap;
}
.al-hp__pill .icon { width:12px; height:12px; color:var(--emerald-600); flex:none; }
/* G4 signal chips: dark emerald instead of an outline */
.al-sigs--dark span {
  background:var(--emerald-950); border-color:var(--emerald-950); color:var(--white);
}

/* hero chip avatar — mirrors the review-card treatment so kept vs blocked reads
   the same way in the hero as it does in the graphic below */
.al-hf__av { width:24px; height:24px; border-radius:50%; flex:none; object-fit:cover; display:block; }
.al-hf__av--ph { background:var(--ink-100); color:var(--ink-400); display:inline-flex; align-items:center; justify-content:center; }
.al-hf__av--ph .icon { width:13px; height:13px; }
.al-hf__chip--out .al-hf__av--ph { background:rgba(223,42,74,.12); color:var(--spam); }


/* ═══════════════════════════════════════════════════════════════════
   GRAPHIC FRAMES SCALE AS ONE UNIT
   Every graphic child is placed with absolute px offsets and fixed px type
   against a 444x408.44 canvas (the 480x444.44 frame less its 18px padding).
   Shrinking the frame therefore reflowed each element independently:
   measured at a 375px viewport the frame fell to 312px and pills broke the
   frame edge by up to 34px while rows collapsed into each other.

   The frame is now an inline-size container and the graphic keeps its design
   canvas, reduced by a single transform. The whole composition changes size
   together — aspect ratio, internal positions and relative type sizes are
   all preserved: the bitmap-like behaviour we want.

   scale = 100cqw / 480px, so a 480px frame gives exactly 1 and desktop is
   pixel-identical (verified by diff). The frame's max-width caps cqw at 480,
   so a graphic never scales past its design size.

   Scoped to `> *`, not `> .al-scene`: every frame holds exactly one child,
   but it is .al-scene on most pages and .al-tp on the orbit/flow graphics
   (how-it-works, and the 4th block of every framework page). Scoping to
   .al-scene stripped the frame padding from the orbits and let them bleed
   to the frame edge — caught by a desktop pixel diff, not by eye.

   The 18px inset is a scaled top/left, NOT padding on the child: an
   absolutely positioned element resolves against its ancestor's PADDING
   box, so padding here would hand every descendant a 480x444 containing
   block instead of 444x408 and shift the whole composition (measured: the
   bleed photo moved 18px left and grew 17px wide). top/left must be scaled
   by hand because an element's own transform does not scale its offsets.

   @supports guard: calc() length/length division (CSS Values 4) is what
   yields the unitless ratio. Where it is unsupported the block is skipped
   entirely and the old reflow behaviour stands — imperfect, but never a
   graphic clipped at a fixed 480px inside a narrower frame.
   ═══════════════════════════════════════════════════════════════════ */
@supports (transform: scale(calc(100cqw / 480px))) {
  .al-trust__visual { container-type: inline-size; padding: 0; }

  .al-trust__visual > * {
    --al-s: calc(100cqw / 480px);
    --al-pad: 18px;
    position: absolute;
    top: calc(var(--al-pad) * var(--al-s));
    left: calc(var(--al-pad) * var(--al-s));
    width: calc(480px - var(--al-pad) * 2);          /* 444    */
    height: calc(480px / 1.08 - var(--al-pad) * 2);  /* 408.44 */
    transform: scale(var(--al-s));
    transform-origin: top left;
  }

  /* the bleed variant has no frame padding, so its canvas is the full frame */
  .al-trust__visual--bleed > * { --al-pad: 0px; }
}

/* ---- numbered pagination (replaces Show More) ---- */
.al-pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:var(--sp-12); }
.al-pager[hidden] { display:none; }
.al-pager__nums { display:flex; gap:6px; }
.al-pager__n {
  min-width:36px; height:36px; padding:0 10px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink-600); background:none; border:1px solid transparent; border-radius:var(--r-control);
  cursor:pointer; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.al-pager__n:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-pager__n.is-on { background:var(--ink-900); color:var(--white); font-weight:700; }
.al-pager__arrow {
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--ink-100); border-radius:var(--r-control);
  color:var(--ink-600); cursor:pointer; transition:border-color var(--dur-base) var(--ease-out);
}
.al-pager__arrow:hover:not(:disabled) { border-color:var(--ink-200); color:var(--ink-900); }
.al-pager__arrow:disabled { opacity:.35; cursor:default; }
.al-pager__arrow .icon { width:15px; height:15px; }
.al-pager__arrow--prev .icon { transform:rotate(180deg); }

/* ---- single post ---- */
.al-phero--post .al-phero__h1 { max-width:20ch; margin:0 auto; }
.al-post__back {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:18px;
  font-size:13.5px; font-weight:600; color:var(--ink-500); text-decoration:none;
}
.al-post__back:hover { color:var(--ink-900); }
.al-post__back .icon { width:14px; height:14px; transform:rotate(180deg); }

/* no bottom padding: the author card below sets its own 24px gap, matching the
   24px between the card and the share row */
.al-article { padding:0; background:var(--white); }
.al-article .al-container { max-width:760px; }
.al-article__hero { margin:0 0 var(--sp-12); border-radius:var(--r-card); overflow:hidden; }
.al-article__hero img { width:100%; height:auto; display:block; }
.al-article__body { font-size:17px; line-height:1.7; color:var(--ink-700); }
.al-article__body p { margin:0 0 22px; }
.al-article__body h2 {
  font-size:clamp(1.4rem,2.4vw,1.85rem); font-weight:800; color:var(--ink-900);
  letter-spacing:var(--track-h2); line-height:1.2; margin:44px 0 14px;
}
.al-article__body h3 { font-size:1.2rem; font-weight:700; color:var(--ink-900); margin:32px 0 10px; }
.al-article__body ul, .al-article__body ol { margin:0 0 22px; padding-left:22px; }
.al-article__body li { margin-bottom:9px; }
.al-article__body a:not(.al-btn) { color:var(--emerald-800); text-decoration:underline; text-underline-offset:2px; }
.al-article__body a.al-btn { text-decoration:none; }
.al-article__body strong { color:var(--ink-900); font-weight:700; }
.al-article__body blockquote {
  margin:0 0 22px; padding:2px 0 2px 20px; border-left:3px solid var(--emerald-200);
  color:var(--ink-600); font-style:normal;
}
@media (min-width:1040px){ .al-blog__grid--three { grid-template-columns:repeat(3,1fr); } }

/* ---- in-body article figures ----
   The imported artwork is two different things: designed illustrations on a
   mint ground, and raw wp-admin captures. Their own backgrounds are baked into
   the PNGs (no alpha), so they cannot be recoloured here. What unifies them is
   the frame: one warm panel, one radius, one inset, matching the graphic
   panels used across the rest of the site. */
.al-article__fig { margin:0 0 30px; }
.al-article__fig > span {
  display:block; background:var(--bg-warm); border-radius:var(--r-card);
  padding:18px; border:1px solid var(--ink-100);
}
.al-article__fig img {
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:var(--shadow-1);
}
.al-article__fig figcaption {
  margin-top:12px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
  line-height:1.5; color:var(--ink-500); text-align:center;
}
/* Newer WordPress posts use native image and button blocks inside the article shell. */
.al-article__body .wp-block-image {
  margin:0 0 30px; padding:18px; background:var(--bg-warm);
  border:1px solid var(--ink-100); border-radius:var(--r-card);
}
.al-article__body .wp-block-image img { display:block; width:100%; height:auto; border-radius:10px; }
.al-article__body .wp-block-buttons { margin:0 0 22px; }
.al-article__body a.wp-block-button__link {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 20px; border-radius:var(--r-control); background:var(--ink-900);
  color:var(--white); font-size:14px; font-weight:700; text-decoration:none;
}
.al-article__body a.wp-block-button__link:hover { background:var(--emerald-800); color:var(--white); }

/* ---- blog + post headers: left-aligned, matching every other page header ---- */
.al-phero--narrow { text-align:left; }
.al-phero--narrow .al-phero__h1 { max-width:22ch; margin:0; }
.al-phero--narrow .al-hero__sub { max-width:58ch; margin-left:0; margin-right:0; }
/* the post header shares the article's 760px measure, not the wide container,
   so the back link, category and title line up with the body text below */
.al-phero--post .al-container { max-width:760px; }
.al-phero--post .al-phero__h1 { max-width:100%; margin:0; }
.al-phero--post .al-eyebrow { display:block; }

/* ═══════════════════════════════════════════════════════════════════
   DOCS — a three-column shell that scales past a handful of articles:
   persistent sidebar (grouped article nav), content column, in-page TOC.
   Sidebar + TOC collapse away below 1100px / 1400px respectively.
   ═══════════════════════════════════════════════════════════════════ */
/* the docs index hero sits above a nav shell, so it runs shorter than a
   standalone page hero and drops the ray backdrop. */
.al-phero--tight { padding-bottom:0; }
.al-phero--tight .al-phero__h1 { font-size:clamp(30px,4.2vw,44px); }
.al-docs { padding:40px 0 var(--sp-24); }
/* the header is position:fixed (72px). On an article page the docs shell is
   the first thing in <main>, so it has to clear the header itself — the
   index gets that clearance from the hero above it. */
main > .al-docs:first-child { padding-top:calc(40px + 72px); }
/* minmax(0,1fr) not 1fr: a plain 1fr track has min-width:auto, so a wide
   table inside the article stretches the whole column past the viewport
   and drags the sidebar out with it on mobile. */
.al-docs__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start; }
@media (min-width:1000px){ .al-docs__grid { grid-template-columns:236px minmax(0,1fr); gap:44px; } }

/* ── sidebar ───────────────────────────────────────────────────── */
.al-dnav { position:sticky; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; }
@media (max-width:999px){ .al-dnav { position:static; max-height:none; } }
/* a rule between groups, so the nav reads as sections rather than one run */
.al-dnav__group + .al-dnav__group { margin-top:20px; padding-top:20px;
  border-top:1px solid var(--ink-100); }
/* the filter heads the sidebar. No rule under it: the extra padding grew the
   wrapper past the input, and the icon centres on the wrapper. */
.al-dnav .al-dfilter { margin-bottom:22px; }
.al-dnav .al-dfilter input { padding:9px 12px 9px 34px; font-size:13.5px; border-radius:9px; }
.al-dnav .al-dfilter .icon { left:11px; width:14px; height:14px; }
/* Below the two-column breakpoint the sidebar sits above the article. Left
   as a single stack it ate most of a screen before the content started, so
   it lays out as compact columns instead. */
@media (max-width:999px){
  .al-dnav { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:4px 28px; align-items:start; padding-bottom:22px; border-bottom:1px solid var(--ink-100); }
  .al-dnav .al-dfilter { grid-column:1 / -1; margin-bottom:10px; }
  .al-dnav__group + .al-dnav__group { margin-top:0; padding-top:0; border-top:none; }
}
.al-dnav__label { display:block; padding-left:12px; font-family:var(--font-mono); font-size:10.5px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin-bottom:9px; }
.al-dnav__link { display:block; padding:7px 12px; border-radius:7px;
  font-size:14px; line-height:1.45; color:var(--ink-600); text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-dnav__link:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-dnav__link.is-current { background:var(--bg-warm); color:var(--emerald-800); font-weight:600; }

/* ── index: compact rows, not big cards — 60 articles stay scannable ── */
.al-dsec + .al-dsec { margin-top:34px; }
/* docs cards sit in a narrower column than the hub's, so they run a little
   tighter and keep the CTA pinned to the bottom regardless of copy length. */
.al-dcard { padding:22px 22px 20px; }
.al-dcard h3 { font-size:16.5px; }
.al-dcard p { font-size:14px; }
/* a lone card keeps the same width as a paired one rather than spanning, so
   card size stays constant no matter how many articles a group holds. */
.al-dsec__head { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.al-dsec__head h2 { font-size:19px; font-weight:700; color:var(--ink-900); }
.al-dsec__count { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-400); }
.al-dlist { border-top:1px solid var(--ink-100); }
.al-drow { display:flex; align-items:flex-start; gap:14px; padding:15px 12px 15px 4px;
  border-bottom:1px solid var(--ink-100); text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out); }
.al-drow:hover { background:var(--bg-warm); }
.al-drow__ic { flex:none; width:34px; height:34px; border-radius:9px; background:var(--bg-warm);
  display:flex; align-items:center; justify-content:center; margin-top:1px; }
.al-drow__ic .icon { width:17px; height:17px; color:var(--emerald-700); }
.al-drow__b { min-width:0; flex:1; }
.al-drow__b b { display:block; font-size:15px; font-weight:600; color:var(--ink-900); line-height:1.35; }
.al-drow__b span { display:block; font-size:13.5px; color:var(--ink-500); line-height:1.5; margin-top:3px; }
.al-drow__go { flex:none; align-self:center; color:var(--ink-300); display:flex; }
.al-drow__go .icon { width:16px; height:16px; }
.al-drow:hover .al-drow__go { color:var(--emerald-700); }
.al-drow__ext { flex:none; align-self:center; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); }

/* ── filter ────────────────────────────────────────────────────── */
.al-dfilter { position:relative; margin-bottom:26px; }
.al-dfilter input { width:100%; padding:12px 14px 12px 40px; font:inherit; font-size:14.5px;
  color:var(--ink-900); background:var(--white); border:1px solid var(--ink-200); border-radius:10px; }
.al-dfilter input:focus { outline:none; border-color:var(--emerald-600); box-shadow:0 0 0 3px rgba(6,120,87,.14); }
.al-dfilter .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-400); pointer-events:none; }
.al-dempty { display:none; padding:18px 4px; font-size:14px; color:var(--ink-500); }

/* ── docs archive ───────────────────────────────────────────────────
   No sidebar here: at ~30 articles it duplicated the listing below it.
   Search lives in the hero; entries sit in a 3-up grid of tiles. */
.al-phero--docs { padding-bottom:52px; }
.al-dfilter--hero { max-width:520px; margin:30px auto 0; }
.al-dfilter--hero input { padding:14px 16px 14px 46px; font-size:15px; border-radius:12px;
  background:var(--white); border-color:var(--ink-100); box-shadow:var(--shadow-1); }
.al-dfilter--hero .icon { left:17px; width:17px; height:17px; }

.al-docs--archive { padding-top:52px; }
/* category grid — the page is the categories, so it stays one screen whether
   the library holds 30 articles or 300. Four across on desktop. */
.al-dcat-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:560px){ .al-dcat-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .al-dcat-grid { grid-template-columns:repeat(4,1fr); } }
.al-dcat-card { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:108px; padding:24px 18px; text-align:center; text-decoration:none;
  background:var(--white); border:1px solid var(--ink-100); border-radius:10px;
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
/* one step darker than the resting border (ink-100 #E8E8EB -> ink-200 #D0D1D7),
   not an accent colour — the card should firm up on hover, not change hue */
.al-dcat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.al-dcat-card h3 { font-size:15.5px; font-weight:700; color:var(--ink-900); line-height:1.35; }
.al-dcat-card__n { font-family:var(--font-mono); font-size:11px; color:var(--emerald-800);
  background:var(--bg-warm); border-radius:var(--r-pill); padding:4px 11px; }

.al-dhelp { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px;
  margin-top:26px; padding:20px 24px; background:var(--bg-warm); border-radius:var(--r-card);
  font-size:14.5px; color:var(--ink-700); }

/* featured list: two columns of plain rows, the way a docs index reads */
.al-dfeat { margin-top:44px; padding:26px 28px; border:1px solid var(--ink-100); border-radius:var(--r-card); }
.al-dartrow[hidden] { display:none; }
.al-dfeat__empty { font-size:14px; color:var(--ink-500); }
.al-dfeat__empty[hidden] { display:none; }
.al-dfeat__cols { display:grid; gap:2px 32px; grid-template-columns:1fr; }
@media (min-width:760px){ .al-dfeat__cols { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .al-dfeat__cols { grid-template-columns:repeat(3,1fr); } }
.al-dartrow { display:flex; align-items:center; gap:10px; padding:9px 8px 9px 0;
  font-size:14.5px; color:var(--ink-700); text-decoration:none; border-radius:6px;
  transition:color var(--dur-fast) var(--ease-out); }
.al-dartrow:hover { color:var(--emerald-800); }
.al-dartrow .icon { width:15px; height:15px; flex:none; color:var(--ink-300); }
.al-dartrow:hover .icon { color:var(--emerald-600); }
/* the archive rail: category browsing without scrolling the listing. It is not
   a duplicate of the grid any more — the grid shows a curated subset. */
.al-dbrowse { position:sticky; top:96px; display:flex; flex-direction:column; align-items:stretch; }
@media (max-width:999px){ .al-dbrowse { position:static; margin-bottom:26px;
  padding-bottom:22px; border-bottom:1px solid var(--ink-100); } }
.al-dnavbtn { display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:7px 12px; margin-left:-12px; border:none; background:none;
  border-radius:7px; font:inherit; font-size:13.5px; line-height:1.45; text-align:left;
  color:var(--ink-600); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-dnavbtn:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-dnavbtn.is-current { background:var(--bg-warm); color:var(--emerald-800); font-weight:600; }
.al-dnavbtn em { flex:none; font-style:normal; font-family:var(--font-mono); font-size:11px;
  color:var(--ink-400); }
.al-dnavbtn.is-current em { color:var(--emerald-700); }
/* two-up beside the rail, rather than the three-up used when it spanned full width */
.al-dgrid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:680px){ .al-dgrid { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .al-dgrid { grid-template-columns:repeat(3,1fr); } }
/* must follow the 3-col rule above: same specificity, so source order decides.
   Beside the category rail there is only room for two. */
@media (min-width:1000px){ .al-dgrid--2 { grid-template-columns:1fr 1fr; } }

/* hover matches .al-ucard, the site's other warm card: a lift, nothing else.
   Swapping background or border made these read as a different component. */
.al-dtile { display:flex; align-items:flex-start; gap:12px; padding:16px 16px 17px;
  background:var(--bg-warm); border-radius:11px; text-decoration:none;
  transition:transform var(--dur-base) var(--ease-out); }
.al-dtile:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.al-dtile__ic { flex:none; width:30px; height:30px; border-radius:8px; background:var(--white);
  display:flex; align-items:center; justify-content:center; margin-top:1px; }
.al-dtile__ic .icon { width:15px; height:15px; color:var(--emerald-700); }
.al-dtile__b { min-width:0; }
.al-dtile__b b { display:block; font-size:14.5px; font-weight:600; color:var(--ink-900); line-height:1.35; }
/* two lines then ellipsis, so a long summary cannot make one tile tower over
   its neighbours in the same row */
.al-dtile__b span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:4px; font-size:13px; color:var(--ink-500); line-height:1.5; }

/* ── article ───────────────────────────────────────────────────── */
.al-dcrumb { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-500); margin-bottom:14px; }
/* right-pointing chevron, same border construction as the collapse chevrons */
.al-dcrumb__sep { flex:none; width:5px; height:5px; margin-right:1px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); opacity:.6; }
.al-dcrumb a { color:var(--ink-500); text-decoration:none; }
.al-dcrumb a:hover { color:var(--emerald-800); }
.al-dart__h1 { font-size:clamp(30px,4vw,40px); font-weight:800; letter-spacing:-.02em;
  line-height:1.12; color:var(--ink-900); }
.al-dart__lead { margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--ink-600); }
.al-dart__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-bottom:26px;
  border-bottom:1px solid var(--ink-100); }
.al-dart__updated { margin-top:10px; font-family:var(--font-mono); font-size:12px;
  color:var(--ink-500); }
/* the three doc actions: buttons, not pills — same shape and weight as the
   site's small secondary CTA so they read as clickable */
.al-docact { display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  font-size:13.5px; font-weight:600; line-height:1; color:var(--ink-900);
  background:var(--white); border:1px solid var(--ink-200); border-radius:var(--r-pill);
  text-decoration:none; cursor:pointer; font-family:inherit;
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.al-docact:hover { border-color:var(--ink-400); background:var(--bg-warm); }
.al-docact .icon { width:15px; height:15px; flex:none; color:var(--emerald-700); }
.al-docact-wrap { position:relative; display:inline-flex; }
.al-docact__cv { width:5px; height:5px; margin-left:1px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.5; }
.al-docact[aria-expanded="true"] .al-docact__cv { transform:rotate(225deg) translateY(-2px); }
.al-docmenu { position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:170px;
  padding:6px; background:var(--white); border:1px solid var(--ink-100);
  border-radius:10px; box-shadow:var(--shadow-2); }
.al-docmenu[hidden] { display:none; }
.al-docmenu__item { display:block; padding:8px 11px; border-radius:7px; font-size:13.5px;
  color:var(--ink-700); text-decoration:none; }
.al-docmenu__item:hover { background:var(--bg-warm); color:var(--ink-900); }

/* ── in-page TOC ───────────────────────────────────────────────── */
.al-dtoc { }
.al-dtoc__label { display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin-bottom:10px; }
/* the article rail carries two blocks: the docs categories (which leave the
   page) and this page's own sections (which do not). Different link styling so
   the two are not mistaken for one list. */
/* overflow-y:auto forces overflow-x to auto too, and the children sit at
   margin-left:-12px — outside the box, so they were clipped and the chevron
   could be cut. Pad the rail by the same amount, plus a little on the right. */
.al-drail { position:sticky; top:96px; max-height:calc(100vh - 120px);
  overflow-y:auto; overflow-x:hidden;
  padding-left:12px; margin-left:-12px; padding-right:6px; }
.al-drail__block + .al-drail__block { margin-top:26px; padding-top:22px; border-top:1px solid var(--ink-100); }
/* <details> for the collapse: keyboard and screen-reader behaviour comes free.
   The marker is replaced by a rotating arrow. */
.al-drail__sum { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-right:2px;
  cursor:pointer; list-style:none; margin-bottom:10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-400); }
.al-drail__sum::-webkit-details-marker { display:none; }
.al-drail__sum:hover { color:var(--ink-600); }
/* same chevron the nav dropdowns use (.al-nav__has-mm > a::after): two borders
   rotated, rather than a sprite icon. Points down closed, up when open. */
.al-drail__sum::after {
  content:""; flex:none; width:5px; height:5px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform var(--dur-base) var(--ease-out);
}
.al-drail__block[open] > .al-drail__sum::after { transform:rotate(225deg) translateY(-2px); }
.al-dcat { display:block; padding:6px 12px; margin-left:-12px; border-radius:7px; font-size:13.5px;
  line-height:1.45; color:var(--ink-600); text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-dcat:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-dcat.is-current { color:var(--emerald-800); font-weight:600; }
@media (max-width:999px){ .al-drail { position:static; max-height:none;
  padding-bottom:22px; border-bottom:1px solid var(--ink-100); } }
.al-dtoc a { display:block; padding:6px 0 6px 12px; border-left:2px solid var(--ink-100);
  font-size:13.5px; line-height:1.45; color:var(--ink-600); text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.al-dtoc a:hover { color:var(--ink-900); border-left-color:var(--ink-300); }
.al-dtoc a.is-current { color:var(--emerald-800); border-left-color:var(--emerald-500); font-weight:600; }

/* ── prose: the long-form body itself ──────────────────────────── */
.al-prose { padding-top:30px; font-size:15.5px; line-height:1.72; color:var(--ink-700); }
.al-prose > * + * { margin-top:17px; }
.al-prose h2 { margin-top:46px; font-size:24px; font-weight:700; letter-spacing:-.01em;
  line-height:1.25; color:var(--ink-900); scroll-margin-top:100px; }
.al-prose h3 { margin-top:32px; font-size:17px; font-weight:700; color:var(--ink-900); scroll-margin-top:100px; }
.al-prose h2 + *, .al-prose h3 + * { margin-top:12px; }
.al-prose strong { color:var(--ink-900); font-weight:700; }
.al-prose a { color:var(--emerald-800); text-decoration:underline; text-underline-offset:2px; }
.al-prose ul, .al-prose ol { padding-left:22px; }
.al-prose li + li { margin-top:7px; }
.al-prose ul { list-style:disc; }
.al-prose ol { list-style:decimal; }
.al-prose code { font-family:var(--font-mono); font-size:.88em; color:var(--emerald-800);
  background:var(--bg-warm); border-radius:5px; padding:2px 6px; overflow-wrap:break-word; }
.al-prose pre { background:#0E1F1A; border-radius:12px; padding:18px 20px; overflow-x:auto;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.75; color:#C9E5DA; }
.al-prose pre code { background:none; color:inherit; padding:0; font-size:inherit; }
/* wide tables scroll inside their own box rather than pushing the page */
.al-prose table { display:block; overflow-x:auto; width:100%; border-collapse:collapse; font-size:13.5px; }
.al-prose thead th { text-align:left; font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500);
  border-bottom:1px solid var(--ink-200); padding:9px 14px 9px 0; white-space:nowrap; }
.al-prose tbody td { border-bottom:1px solid var(--ink-100); padding:11px 14px 11px 0; vertical-align:top; }
.al-prose tbody tr:last-child td { border-bottom:none; }
/* screenshots inside a doc: framed so they read as UI captures rather than
   floating bitmaps, and never wider than the column */
.al-prose img { display:block; max-width:100%; height:auto; border-radius:10px;
  border:1px solid var(--ink-100); background:var(--bg-warm); }
.al-prose img + em, .al-prose figcaption { display:block; margin-top:8px; font-style:normal;
  font-size:12.5px; color:var(--ink-500); }
.al-prose hr { border:none; border-top:1px solid var(--ink-100); margin:34px 0; }
.al-prose h4 { margin-top:26px; font-size:15px; font-weight:700; color:var(--ink-900); }
.al-prose blockquote { border-left:3px solid var(--emerald-500); padding:2px 0 2px 16px;
  color:var(--ink-600); }
.al-prose ul ul, .al-prose ol ol, .al-prose ul ol, .al-prose ol ul { margin-top:7px; }

/* ── prev / next ───────────────────────────────────────────────── */
.al-dpn { display:grid; gap:12px; margin-top:52px; padding-top:26px; border-top:1px solid var(--ink-100); }
@media (min-width:640px){ .al-dpn { grid-template-columns:1fr 1fr; } }
.al-dpn a { display:block; padding:15px 17px; border:1px solid var(--ink-100); border-radius:11px;
  text-decoration:none; transition:border-color var(--dur-fast) var(--ease-out); }
.al-dpn a:hover { border-color:var(--emerald-500); }
.al-dpn em { display:block; font-style:normal; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.al-dpn b { display:block; margin-top:5px; font-size:14.5px; font-weight:600; color:var(--ink-900); }
.al-dpn a.is-next { text-align:right; }

/* ---- post byline: author + date under the title ---- */
.al-byline { display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--ink-600); }
.al-byline__who { font-weight:700; color:var(--ink-900); }
.al-byline__lab { color:var(--ink-500); }
.al-byline i { width:1px; height:13px; background:var(--ink-200); border-radius:0; }
.al-byline time { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-500); }
@media (max-width:620px){
  .al-byline { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:5px 10px; }
  .al-byline i { display:none; }
}

/* ---- end of post: share + author bio ---- */
.al-postend { padding:0 0 var(--sp-16); background:var(--white); }
.al-postend .al-container { max-width:760px; }
.al-share {
  /* sits below the author card now, so it needs clearance — its top rule was
     landing flush against the card's edge and reading as a doubled line */
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:24px; padding:0;
}
.al-share__label {
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}
.al-share__row { display:flex; gap:8px; }
.al-share__btn {
  width:38px; height:38px; border-radius:var(--r-control); border:1px solid var(--ink-100);
  background:var(--white); color:var(--ink-600); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.al-share__btn:hover { background:var(--bg-warm); color:var(--ink-900); }
.al-share__btn.is-copied { background:var(--emerald-tint); color:var(--emerald-800); }
.al-share__btn .icon { width:17px; height:17px; }

.al-authorbio {
  /* 36px renders as a 24px visual gap — 12px is absorbed by the article's
     trailing paragraph. 24px is what sits below the card (.al-share margin-top),
     so the card is evenly seated. Measure before changing this number. */
  display:flex; gap:16px; align-items:flex-start; margin-top:36px;
  background:var(--bg-warm); border-radius:var(--r-card); padding:22px 24px;
}
.al-authorbio__av {
  width:48px; height:48px; border-radius:50%; background:var(--white); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.al-authorbio b { display:block; font-size:15px; color:var(--ink-900); margin-bottom:5px; }
.al-authorbio p { font-size:14.5px; line-height:1.6; color:var(--ink-600); }

/* the article closes with a plain button, sitting in the text flow rather than
   in a banner — same left edge and rhythm as the paragraphs above it */
/* flex, so the paragraph hugs the button — as an inline box it carried ~10px
   of descender space that widened the gap to the author card below */
.al-article__cta { margin:30px 0 0; display:flex; }

/* Compact cards share a two-pixel lift and shadow. Larger blog cards keep
   the lift but use a padded surface and a lower, softer shadow. */
.al-icard, .al-ucard, .al-dtile, .al-dcat-card, .al-post {
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.al-icard:hover, .al-ucard:hover, .al-dtile:hover, .al-dcat-card:hover {
  transform:translateY(-2px); box-shadow:var(--shadow-2);
}
/* Taller blog cards need their shadow lower and wider than compact tiles. */
.al-post:hover { box-shadow:0 20px 36px -18px rgba(20,27,56,.13); }
/* Keep the hover shadow outside the artwork and copy, with breathing room between them. */
.al-post--media, .al-blog .al-post--lead { padding:16px; background:var(--white); border-radius:20px; }
@media (max-width:619px){ .al-blog .al-post--lead { padding:0; box-shadow:none; } }

/* A compact mobile navigation sits beside the unchanged desktop mega menus. */
.al-nav__submenu-toggle, .al-nav__mobile-submenu { display:none; }
@media (max-width:959px){
  .al-nav__links { height:calc(100dvh - 72px); box-sizing:border-box; max-height:calc(100dvh - 72px); overflow-x:hidden; overscroll-behavior:contain; }
  .al-nav__links > li { padding:0; }
  .al-nav__links > li > a { display:flex; align-items:center; min-height:56px; }
  .al-nav__links > li:last-child { margin-top:auto; border-bottom:0; }
  .al-nav__has-mm { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; }
  .al-nav__has-mm > a { grid-column:1; }
  .al-nav__has-mm > a::after { display:none; }
  .al-nav__submenu-toggle {
    display:flex; grid-column:2; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; border:0; border-radius:8px;
    background:transparent; color:var(--ink-600); cursor:pointer;
  }
  .al-nav__submenu-toggle:hover { background:var(--bg-warm); }
  .al-nav__submenu-toggle:focus-visible { outline:3px solid var(--emerald-600); outline-offset:2px; }
  .al-nav__submenu-toggle span {
    width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg); transition:transform var(--dur-base) var(--ease-out);
  }
  .al-nav__submenu-toggle[aria-expanded="true"] span { transform:translateY(2px) rotate(225deg); }
  .al-nav__mobile-submenu:not([hidden]) {
    display:block; grid-column:1 / -1; list-style:none;
    margin:0 0 12px 2px; padding:2px 0 2px 16px;
    border-left:2px solid var(--emerald-600);
  }
  .al-nav__mobile-submenu a {
    display:flex; align-items:center; min-height:42px; padding:7px 12px;
    border-radius:8px; font-size:14px; font-weight:600; color:var(--ink-700);
  }
  .al-nav__mobile-submenu a:hover, .al-nav__mobile-submenu a:focus-visible {
    background:var(--bg-warm); color:var(--emerald-800);
  }
  .al-nav__links .al-mm, .al-nav__links .al-nav__has-mm.is-open .al-mm { display:none; }
  .al-nav__mobile-only:last-child a {
    display:flex; align-items:center; justify-content:center; min-height:48px;
    margin:10px 0; padding:0 12px;
  }
}