/* ==========================================================================
   AIM Transparency > full rebuild in the BentoML design language
   --------------------------------------------------------------------------
   Every token below is measured from www.bentoml.com (computed styles, not
   eyeballed) and then re-hued to AIM's brand. The structure is the reference's:
   a light field, everything living on rounded cards inset from the page edge,
   a labelled-slab pattern (coloured outer card + nested dark inner card + pill
   tags), and one deep-green ground that recurs as the anchor.

   Reference measurements kept as-is:
     page #f8f8f8 | deep #152822 | lime #abea93 | olive #495945 | grey #ebebeb
     lilac #d7d1e4 | deep purple #180d3d | footer #d0e6d6 | ink #19192c
     radii 20px cards, 25px large, 10px small, 5px tags, 9999px pills
     container 1280, inner slab 1024, slab inner padding 28px, section pad 80px
     h1 50.6/700/1.15 | h2 42/700/1.15 | h3 24/400 | h4 32/400 | body 16/1.5
   ========================================================================== */

@import url("/fonts/fonts.css");

/* ---- tokens -------------------------------------------------------------- */
:root {
  /* grounds */
  --page:      #f8f8f8;
  --card:      #ffffff;
  --grey:      #ebebeb;
  --deep:      #14261f;   /* the anchor ground, AIM's green at the reference's depth */
  --olive:     #3f5a4e;   /* the mid card that sits on --deep */
  --foot:      #d0e6d6;

  /* brand */
  --lime:      #9fe3c1;   /* AIM mint, in the reference's lime role */
  --lime-lift: #b7ecd2;
  --teal:      #0f7d73;
  --mint-soft: #e7f5ed;

  /* the three slab families, each an outer colour + a dark inner + an accent */
  --s1-out: #9fe3c1;  --s1-in: #14261f;  --s1-acc: #9fe3c1;
  --s2-out: #f0dcae;  --s2-in: #2a2113;  --s2-acc: #eac97d;
  --s3-out: #d7d1e4;  --s3-in: #191234;  --s3-acc: #bdabed;

  /* ink */
  --ink:       #19192c;
  --muted:     #5c5c66;
  --on-deep:   #ffffff;
  --on-deep-2: rgba(255,255,255,.74);

  /* lines */
  --line:      rgba(25,25,44,.10);
  --line-deep: rgba(255,255,255,.14);

  /* geometry */
  --r-lg:   25px;
  --r:      20px;
  --r-sm:   10px;
  --r-xs:   5px;
  --r-pill: 999px;
  --gap:    clamp(10px, 1.1vw, 16px);   /* the inset every page-level card sits on */
  --wrap:   1280px;
  --slab:   1024px;
  --pad:    clamp(24px, 3vw, 40px);
  --sec:    clamp(56px, 6vw, 80px);

  /* type */
  --disp: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }        /* clip, never hidden: hidden kills sticky */
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ---- type scale ---------------------------------------------------------- */
.h1 {
  font-family: var(--disp);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
}
.h2 {
  font-family: var(--disp);
  font-size: clamp(29px, 3.1vw, 42px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.018em;
}
.h3 {
  font-family: var(--disp);
  font-size: clamp(22px, 1.9vw, 26px);
  font-weight: 600; line-height: 1.25; letter-spacing: -.012em;
}
.h4 {
  font-family: var(--disp);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600; line-height: 1.16; letter-spacing: -.014em;
}
.h5 { font-family: var(--disp); font-size: 20px; font-weight: 600; line-height: 1.3; }
.lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--muted); }
.small { font-size: 14px; line-height: 1.5; }
.tiny  { font-size: 13px; line-height: 1.45; }
.mono  { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }

/* the reference's two-tone headline: rest of the line in the accent */
.tint { color: var(--teal); }
.on-deep .tint, .slab-in .tint { color: var(--lime); }

/* ---- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sec  { padding-block: var(--sec); }

/* every page-level band is a card inset from the page edge */
.band {
  margin: var(--gap);
  border-radius: var(--r-lg);
  overflow: clip;
  position: relative;
  isolation: isolate;
}
.band.on-deep { background: var(--deep); color: var(--on-deep); }
.band.on-deep .lede { color: var(--on-deep-2); }

/* section heading blocks: centred is the reference's default for the big ones */
.head-c { max-width: 660px; margin-inline: auto; text-align: center; }
.head-c .lede { margin-top: 16px; }
.head-l { max-width: 640px; }
.head-l .lede { margin-top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.on-deep .eyebrow, .slab-in .eyebrow { color: var(--on-deep-2); }
.on-deep .eyebrow::before, .slab-in .eyebrow::before { background: var(--lime); }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px;
  border-radius: var(--r-pill);
  font: 600 15px/1 var(--font);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.btn-primary { background: var(--lime); color: #10261a; }
.btn-primary:hover { background: var(--lime-lift); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--card); }
.on-deep .btn-ghost { color: #fff; border-color: var(--line-deep); }
.on-deep .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* the reference's square arrow chip, used on the corner cards */
.arrow {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: none;
  background: var(--deep); color: var(--lime);
  transition: transform .18s ease;
}
.arrow svg { width: 16px; height: 16px; }
.card-cta:hover .arrow { transform: translateX(3px); }
.arrow.on-lime { background: var(--lime); color: #10261a; }

/* ---- pill tags: the reference's connective tissue ------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  border-radius: var(--r-xs);
  font: 500 13px/1.2 var(--font);
  background: var(--grey); color: var(--ink);
}
.tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.slab-in .tag, .on-deep .tag {
  background: rgba(255,255,255,.09);
  color: #fff;
}
.slab-in .tag::before { background: var(--acc, var(--lime)); }
.on-deep .tag::before { background: var(--lime); }

/* a plain chip with no dot, for language codes and the like */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--r-xs);
  font: 500 13px/1.2 var(--font);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
}

/* ==========================================================================
   THE LABELLED SLAB  >  the reference's signature block
   A coloured outer card carries only a small label; a dark inner card nests
   inside it, offset down so the label strip stays visible above.
   ========================================================================== */
.slab {
  max-width: var(--slab);
  margin-inline: auto;
  border-radius: var(--r);
  padding: 0 1px 1px;
  background: var(--out);
}
.slab + .slab { margin-top: 28px; }
.slab-label {
  display: block;
  padding: 19px 24px;
  font: 600 16px/1 var(--font);
  color: #14261f;
}
.slab-in {
  background: var(--in);
  color: #fff;
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 28px);
}
.slab-in .h4 { color: #fff; }
.slab-in .h4 .tint { color: var(--acc); }
.slab-in p { color: rgba(255,255,255,.78); }
.slab-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px);
}
.slab-col .h4 { margin-bottom: 10px; }
.slab-col .tags { margin-top: 18px; }

.slab.s1 { --out: var(--s1-out); --in: var(--s1-in); --acc: var(--s1-acc); }
.slab.s2 { --out: var(--s2-out); --in: var(--s2-in); --acc: var(--s2-acc); }
.slab.s3 { --out: var(--s3-out); --in: var(--s3-in); --acc: var(--s3-acc); }

/* ---- generic cards ------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--pad);
}
.card-grey { background: var(--grey); border-color: transparent; }
.card-deep { background: var(--deep); border-color: transparent; color: #fff; }
.card-deep p, .card-deep .lede { color: var(--on-deep-2); }
.card-lime { background: var(--lime); border-color: transparent; color: #10261a; }
.card-lime p { color: #1c4433; }
.card-olive { background: var(--olive); border-color: transparent; color: #fff; }
.card-olive p { color: rgba(255,255,255,.8); }

/* the reference's four-up: icon at the top, title in the middle, caption pinned
   to the bottom, with the space between doing the work */
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.quad .card { display: flex; flex-direction: column; min-height: 300px; }
.quad .q-ico {
  width: 34px; height: 34px; margin-bottom: auto;
  display: grid; place-items: center;
}
.quad .q-ico svg { width: 22px; height: 22px; }
.quad .h5 { margin-top: 28px; }
.quad .q-mid { font-size: 14.5px; line-height: 1.45; margin-top: 8px; }
.quad .q-foot {
  margin-top: 26px; padding-top: 0;
  font-size: 13.5px; line-height: 1.45;
}
.card .q-mid { color: var(--muted); }
.card-lime .q-mid, .card-lime .q-foot { color: #1c4433; }
.card-deep .q-mid, .card-deep .q-foot, .card-olive .q-mid, .card-olive .q-foot { color: rgba(255,255,255,.78); }

/* ---- bento grid: the asymmetric arrangement ------------------------------ */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.bento .card { display: flex; flex-direction: column; }
.bento .b-foot { margin-top: auto; padding-top: 22px; }
.bento-col { display: grid; gap: 16px; align-content: stretch; }
.bento-tall { display: grid; place-items: center; min-height: 380px; }

/* ---- tab strip ----------------------------------------------------------- */
.tabs { display: flex; gap: 12px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 12px;
  flex: 1 1 0; min-width: 210px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--grey); color: var(--ink);
  font: 500 15px/1.2 var(--font);
  transition: background .16s ease, color .16s ease;
}
.tab i {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--olive); display: block;
}
.tab:hover { background: #e2e2e2; }
.tab[aria-selected="true"] { background: var(--deep); color: #fff; }
.tab[aria-selected="true"] i { background: var(--lime); }
.tab-panel { margin-top: 16px; }
.tab-panel[hidden] { display: none; }

/* the panel: grey card, copy left with hairline-separated rows, art right */
.panel {
  background: var(--grey);
  border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 28px);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}
.panel-rows { margin-top: 26px; }
.panel-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(25,25,44,.13);
}
.panel-row:first-child { border-top: 0; }
.panel-row .pr-t { font: 600 15px/1.3 var(--font); }
.panel-row .pr-d { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.panel-row .pr-i {
  width: 30px; height: 30px; border-radius: 7px; flex: none; margin-left: auto;
  background: var(--lime); display: grid; place-items: center;
}
.panel-row .pr-i svg { width: 15px; height: 15px; color: #10261a; }
.panel-art {
  background: var(--card); border-radius: 15px; padding: 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.panel-art img { width: 100%; height: auto; border-radius: 9px; }

/* ---- product art in a dark frame, the reference's screenshot treatment --- */
.frame {
  background: var(--deep);
  border-radius: var(--r);
  padding: clamp(12px, 1.4vw, 18px);
}
.frame img { width: 100%; height: auto; border-radius: 12px; }

/* ---- marquee ------------------------------------------------------------- */
.marquee {
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: mq 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.marquee-item::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--lime);
}
@keyframes mq { to { transform: translateX(-50%); } }

/* ---- accordion ----------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 600 17px/1.35 var(--font);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319192c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .2s ease;
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding: 0 46px 24px 0; color: var(--muted); font-size: 15.5px; line-height: 1.62; }

/* ---- pricing ------------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier { display: flex; flex-direction: column; position: relative; }
.tier .t-name { font: 600 20px/1.2 var(--disp); }
.tier .t-sub  { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.tier .t-price { font-family: var(--disp); font-size: 40px; font-weight: 700; line-height: 1; margin-top: 22px; letter-spacing: -.02em; }
.tier .t-price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.tier .t-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.tier ul { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.tier li { display: flex; gap: 10px; font-size: 13.8px; line-height: 1.45; }
.tier li::before {
  content: ''; width: 15px; height: 15px; flex: none; margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  color: var(--teal);
}
.tier .btn { margin-top: 22px; width: 100%; }
.tier.feat { background: var(--deep); border-color: transparent; color: #fff; }
.tier.feat .t-sub, .tier.feat .t-note, .tier.feat .t-price small { color: rgba(255,255,255,.72); }
.tier.feat ul { border-top-color: var(--line-deep); }
.tier.feat li::before { color: var(--lime); }
.tier.feat .t-price { color: var(--lime); }
.t-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--deep); color: var(--lime);
  font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.bill { display: inline-flex; gap: 4px; padding: 5px; background: var(--grey); border-radius: var(--r-pill); }
.bill button { padding: 9px 18px; border-radius: var(--r-pill); font: 600 14px/1 var(--font); color: var(--muted); }
.bill button[aria-pressed="true"] { background: var(--deep); color: #fff; }

/* ---- nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: var(--gap); z-index: 60;
  margin: var(--gap) var(--gap) 0;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.nav-in {
  display: flex; align-items: center; gap: 18px;
  height: 66px; padding: 0 14px 0 18px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
/* the container is the live site's rounded square in the accent, with a rim
   light and a diagonal fall so it reads as a solid object, not a flat swatch */
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; flex: none;
  color: #fff;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--teal) 84%, #fff) 0%,
    var(--teal) 58%,
    color-mix(in srgb, var(--teal) 86%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.16);
}
.brand-mark svg { width: 28px; height: 28px; }
.brand-name { font: 700 17px/1 var(--disp); letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
/* direct children only: the mega menu lives inside .nav-links, so an
   unscoped rule here gave every menu link a 999px radius (the featured card
   rendered as a circle) and white-space:nowrap (no description ever wrapped). */
.nav-links > a {
  padding: 9px 13px; border-radius: var(--r-pill);
  font: 500 14.5px/1 var(--font); color: var(--muted); white-space: nowrap;
  transition: background .14s, color .14s;
}
.nav-links > a:hover { background: rgba(25,25,44,.05); color: var(--ink); }
.nav-act { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-act .btn { height: 40px; padding: 0 18px; font-size: 14.5px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); }
.nav-toggle:hover { background: var(--grey); }

/* ---- announcement strip -------------------------------------------------- */
.ann {
  margin: var(--gap) var(--gap) 0;
  border-radius: var(--r-sm);
  background: var(--foot);
  padding: 11px 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13.5px; color: #14261f; text-align: center;
}
.ann a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---- hero ---------------------------------------------------------------- */
.hero { padding: clamp(30px, 4vw, 54px) 0 0; }
.hero-card {
  background: var(--deep); color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 52px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 3vw, 44px);
  align-items: center;
  position: relative;
}
.hero-card .h1 { max-width: 13ch; }
.hero-card .hero-lede { margin-top: 22px; max-width: 46ch; color: var(--on-deep-2); font-size: 17px; line-height: 1.55; }
.hero-card .hero-lede strong { color: #fff; font-weight: 600; }
.hero-art { border-radius: var(--r); overflow: clip; background: rgba(255,255,255,.05); }
.hero-art img { width: 100%; height: auto; }

/* the reference notches its CTA cards into the hero's bottom-left corner */
.hero-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 264px)); gap: 12px; margin-top: 12px; }
.card-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px; border-radius: var(--r);
  font-family: var(--disp); font-size: 19px; font-weight: 600; line-height: 1.2;
  min-height: 104px;
  transition: transform .18s ease;
}
.card-cta:hover { transform: translateY(-2px); }
.card-cta.lime { background: var(--lime); color: #10261a; }
.card-cta.olive { background: var(--olive); color: #fff; }

/* the scan field, carried in the hero */
.scan {
  display: flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 7px 7px 7px 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-deep);
  border-radius: var(--r-pill);
  max-width: 440px;
}
.scan input {
  flex: 1; min-width: 0; background: none; border: 0; color: #fff;
  font: 400 15px/1 var(--font); padding: 12px 0;
}
.scan input::placeholder { color: rgba(255,255,255,.5); }
.scan input:focus { outline: none; }

/* ---- footer -------------------------------------------------------------- */
.foot {
  margin: var(--gap) var(--gap) 0;
  background: var(--foot);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: clamp(44px, 5vw, 76px) var(--pad) 40px;
}
.foot-in { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot h4 { font: 600 14px/1 var(--font); margin-bottom: 16px; color: #14261f; }
.foot li { margin-bottom: 10px; }
.foot li a { font-size: 14px; color: #2c4a3b; }
.foot li a:hover { color: #14261f; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal {
  max-width: var(--wrap); margin: 44px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(20,38,31,.16);
  font-size: 12.5px; line-height: 1.6; color: #3c5a4b;
}

/* ---- scroll reveal ------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(18px); }
.armed .rise {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--n, 0) * 70ms);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .quad  { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-card { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; }
  .slab-cols { grid-template-columns: 1fr; gap: 28px; }
  .split { grid-template-columns: 1fr !important; }
}
/* The bar switches to the sheet at 1000px, not 720. Between 721 and 999 the
   desktop bar rendered while Download and Get Pro overhung it by up to 286px,
   off-screen, with the toggle hidden and html/body clipping overflow: every
   tablet in portrait had no navigation and no call to action at all. */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; place-items: center; margin-left: auto; }
  .nav-act .btn.hide-sm { display: none; }
}

@media (max-width: 720px) {
  :root { --gap: 8px; --r-lg: 18px; --r: 16px; }
  .nav-in { padding-inline: 12px; }
  .quad, .tiers, .bento { grid-template-columns: 1fr; }
  .hero-cta { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .bento-tall { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .armed .rise, .rise { transition: none !important; opacity: 1; transform: none; }
}

/* ---- mobile nav sheet ---------------------------------------------------- */
@media (max-width: 1080px) {
  .myths { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .myths { grid-template-columns: 1fr !important; }
}
/* the sheet's base box. It has to live on the NAV breakpoint, not the layout
   one: left at 720 it gave .nav-links.open no display at all between 721 and
   1000, so the toggle opened a sheet with no box. */
@media (max-width: 1000px) {
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    margin: 0; padding: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: 0 18px 44px rgba(25,25,44,.16);
  }
  .nav-links.open > a { padding: 13px 14px; font-size: 15.5px; }
}

/* ==========================================================================
   PASS 2 — fidelity corrections measured against the reference
   ========================================================================== */

/* 1. The nav, the announcement and the footer must share the CONTENT width,
   not the full page bleed. On the reference every card, nav included, lines up
   on the same left and right edge. Mine had the nav ~120px wider each side. */
.ann, .nav, .foot {
  width: min(100% - var(--gap) * 2, calc(var(--wrap) - var(--pad) * 2));
  margin-inline: auto;
}
.foot { margin-bottom: 0; }

/* 2. The signature notch: the two CTA cards cut into the hero card's
   bottom-left corner, separated from it by a gutter in the page colour. */
.hero-notch {
  position: relative; z-index: 2;
  width: max-content; max-width: 100%;
  margin-top: calc(var(--notch) * -1);
  padding: 12px 12px 0 0;
  background: var(--page);
  border-radius: 0 var(--r-lg) 0 0;
}
.hero-notch .hero-cta { margin-top: 0; }
.hero { --notch: 116px; }
.hero-card { padding-bottom: calc(clamp(28px, 3.4vw, 52px) + var(--notch)); }
/* AIM's headline is nine words where the reference's is three, so the h1 sits
   at the reference's 50px rather than scaling past it, and the column keeps its
   full grid width. Capping the column at 30ch put it on seven lines. */
.hero-card .h1 { max-width: none; font-size: clamp(33px, 3.4vw, 48px); }
.hero-card { grid-template-columns: 1.15fr .85fr; }
/* .hero-card is a deep ground but carries no .on-deep class, so .tint was
   resolving to the dark teal and going muddy against it. */
.hero-card .tint { color: var(--lime); }

/* 3. Pricing: the CTA belongs at the foot of every card, whatever the list
   length, or the four buttons stagger down the row. */
/* `.tier ul + .btn` is more specific than `.tier .btn`, so a margin-top there
   silently defeats the auto and the four buttons stagger. Gap goes on the ul. */
.tier ul { margin-bottom: 22px; }
.tier .btn { margin-top: auto; }
.tiers { padding-top: 14px; }                 /* room for the flag to sit proud */

/* 4. The statement line was breaking at 24ch and orphaning "the file." */
.statement {
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--disp);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700; line-height: 1.14; letter-spacing: -.018em;
  text-wrap: balance;
}

/* 5. Roadmap and language cards read hollow when the only content is a short
   list; let the tag block sit under the title instead of stretching. */
.bento .card > .tags:last-child { margin-bottom: auto; }

@media (max-width: 900px) { .hero-card { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .hero { --notch: 0px; }
  .hero-card { padding-bottom: clamp(28px, 3.4vw, 52px); }
  .hero-notch { margin-top: 12px; width: 100%; padding: 0; background: none; }
}

/* ---- narrow widths: the pill-shaped scan field cannot hold both ---------- */
/* At 390 the button ate the field and the placeholder truncated to
   "yourwebsit". Below 560 the field stacks instead of sharing the row. */
@media (max-width: 560px) {
  .scan {
    flex-wrap: wrap;
    border-radius: var(--r);
    padding: 10px;
    max-width: none;
  }
  .scan input { flex: 1 1 100%; padding: 12px 10px; }
  .scan .btn { width: 100%; }
  .ann { flex-direction: column; gap: 4px; padding: 12px 16px; }
}

/* The four-up cards are ~288px wide, so the 40px page padding leaves a 208px
   measure and AIM's step copy (longer than the reference's captions) breaks
   every three or four words. The reference uses tighter padding on this row. */
.quad .card { padding: 24px; }
.quad .h5 { font-size: 19px; }
.quad .q-foot { font-size: 13px; line-height: 1.5; }

/* the small cut carries a solid middle plate, so it wants a touch more weight */


/* ==========================================================================
   PASS 3 — corrections from the blind parity critique
   ========================================================================== */

/* A. The pill is one component, so it must read one way on every dark ground.
   .card-deep / .card-olive / .tier.feat were falling through to the light
   default and rendering as near-white chips on near-black. And on a grey card
   the default grey chip has no fill at all against its own ground. */
.card-deep .tag, .card-olive .tag, .tier.feat .tag, .bento-tall .tag {
  background: rgba(255,255,255,.09);
  color: #fff;
}
.card-deep .tag::before, .card-olive .tag::before,
.tier.feat .tag::before, .bento-tall .tag::before { background: var(--lime); }
.card-grey .tag, .panel .tag { background: var(--card); }

/* B. The slabs were stacking 28px apart; the reference leaves 96px, which is
   what makes each read as a discrete object rather than a stripe in a block. */
.slab + .slab { margin-top: clamp(40px, 5vw, 90px); }

/* C. The four-up row lost the reference's middle void, so the shortest card's
   title floated 12px above the other three. Icon at a fixed offset, deks on a
   common two-line height, caption pinned to the floor, void in between. */
.quad .q-ico { margin-bottom: 26px; }
.quad .h5 { margin-top: 0; }
.quad .q-mid { min-height: 2.9em; }
.quad .q-foot { margin-top: auto; padding-top: 26px; }

/* D. The tab panel's left column floated to the top and left ~150px of bare
   grey under it. The reference bottom-aligns it and puts the slack mid-column. */
.panel > div:first-child { display: flex; flex-direction: column; }
.panel .panel-rows { margin-top: auto; }

/* E. Equal-height stretching left two roadmap cards ~70% empty. The reference's
   bento sizes short cards to their content instead. */
#roadmap .bento { align-items: start; }
#roadmap .bento .card { min-height: 0; }

/* F. Left-aligned deks were running ~80 characters. */
.head-l .lede { max-width: 56ch; }
.statement { max-width: 26ch; }

/* G. The hero art held 41% of the card height and left the lower-right dead. */
.hero-art { align-self: stretch; display: flex; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* H. Screenshots that stop mid-row read as accidents; a fade makes the cut
   deliberate, which is how the reference frames its product shots. */
.frame, .panel-art { position: relative; }
.frame img, .panel-art img {
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}

/* I. Mint dots on the page field were invisible. */
.marquee-item::before { background: color-mix(in srgb, var(--deep) 45%, transparent); }

/* J. The footer ran smaller and looser than the reference's, and the legal
   paragraph stretched the full 1200px container. */
.foot li a { font-size: 15px; }
.foot li { margin-bottom: 8px; }
.foot-legal { max-width: 92ch; }

/* K. The language chips jogged row to row; a grid makes the columns straight. */
.chip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.chip-grid .chip { justify-content: center; padding-inline: 4px; }

/* L. The dark "Badge, live" tile was over half empty with its pills zig-zagging
   2/1/2/1. One pill per row, spread down the card, fills it and squares it up. */
.badge-live { display: flex; flex-direction: column; height: 100%; width: 100%; }
.badge-live .tags {
  flex-direction: column; align-items: stretch;
  justify-content: space-between; flex: 1; gap: 10px;
}
.badge-live .tag { justify-content: flex-start; padding: 11px 14px; }

/* M. The deep ground was carrying four full-bleed bands. The site checker sits
   between two white-card sections, so it becomes the pale one and the deep
   ground goes back to hero, engine and close. */

/* ---- site-checker: beta chip + compact scope note ---- */
.beta-chip {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 3px 8px 4px;
  border: 1px solid rgba(15,125,115,.30); border-radius: 999px;
  background: rgba(255,255,255,.55);
  font: 600 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.scan-note {
  margin: 20px 0 0; max-width: 54ch;
  padding-left: 14px; border-left: 2px solid rgba(15,125,115,.30);
  font-size: 12.5px; line-height: 1.6; color: #3c5a4b;
}
.scan-note b  { color: #14261f; font-weight: 600; }
.scan-note em { font-style: italic; }

.band-pale { background: var(--foot); color: #14261f; }
.band-pale .lede { color: #2c4a3b; }
.band-pale .eyebrow { color: #2c4a3b; }
.band-pale .eyebrow::before { background: var(--teal); }
.band-pale .tint { color: var(--teal); }
.band-pale .scan {
  background: var(--card);
  border-color: var(--line);
}
.band-pale .scan input { color: var(--ink); }
.band-pale .scan input::placeholder { color: var(--muted); }
.band-pale .tag { background: rgba(20,38,31,.09); color: #14261f; }
.band-pale .tag::before { background: var(--teal); }

/* The bottom-align above did nothing because .panel sets align-items:start, so
   the left column never stretched and margin-top:auto had no slack to consume. */
.panel { align-items: stretch; }
.panel-art { align-self: start; }

/* 26ch still split the accent phrase across a line break. */
.statement { max-width: 30ch; }

/* ==========================================================================
   PASS 4 — container width, the three-layer scroll stack, roadmap
   ========================================================================== */

/* 1. WIDTH. Measured on the reference: the content container is NOT capped at
   1280. It runs min(100vw - 160px, 1440px), so 1280 at a 1440 viewport (the
   80px gutter biting) and a full 1440 from 1680 up. Mine capped at 1200. */
:root { --gut: clamp(16px, 5.5vw, 80px); --wrap: 1440px; }
.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); padding-inline: 0; margin-inline: auto; }
.ann, .nav, .foot { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.foot { padding-inline: var(--pad); }

/* 2. THE THREE-LAYER STACK.
   Each slab sticks a little lower than the one before, so they pile up as you
   scroll and the section reads as three physical layers coming to rest. The
   covered card scales back slightly, driven by --cover from bento.js. */
.slab-stack .slab { --cover: 0; }

@media (min-width: 900px) {
  .slab-stack .slab {
    position: sticky;
    top: calc(104px + var(--n, 0) * 26px);
    transform: scale(calc(1 - var(--cover) * .05));
    transform-origin: 50% 0;
    transition: transform .12s linear;
    box-shadow: 0 -1px 0 rgba(25,25,44,.06), 0 24px 48px -28px rgba(20,38,31,calc(var(--cover) * .55));
  }
  .slab-stack .slab + .slab { margin-top: clamp(56px, 7vw, 110px); }
  /* the last card needs run-out so the stack finishes before the section ends */
  .slab-stack { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .slab-stack .slab { position: static; transform: none; box-shadow: none; }
}

/* 3. ROADMAP. One dense column beside two sparse ones read as a mistake once
   the cards sized to content. The reference's answer is an asymmetric bento:
   the heavy card takes two columns and lists in two, the two light ones stack
   in the third. Each row carries its own free/Pro standing. */
.rm { display: grid; grid-template-columns: 1.85fr 1fr; gap: 16px; align-items: start; }
.rm-side { display: grid; gap: 16px; align-content: start; }
.rm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rm-count {
  font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.card-lime .rm-count { color: #1c4433; }
.card-deep .rm-count { color: rgba(255,255,255,.62); }
.rm-list { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.rm-side .rm-list { grid-template-columns: 1fr; }
.rm-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.45;
}
.card-deep .rm-list li { border-top-color: var(--line-deep); }
.card-lime .rm-list li { border-top-color: rgba(16,38,26,.16); }
/* two columns, filled ROW-first, so the top row is children 1 and 2. The old
   rule cleared the border on child 7, which only starts a column if the grid
   fills column-first - it does not, so at 14 items it blanked a rule mid-list. */
.rm-list li:nth-child(-n+2) { border-top: 0; }
.rm-side .rm-list li:nth-child(2) { border-top: 1px solid var(--line-deep); }
.rm-list .rm-when {
  margin-left: auto; flex: none; align-self: center;
  font: 600 10px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--r-xs);
  background: var(--grey); color: var(--muted);
}
.rm-list .rm-when.pro { background: var(--deep); color: var(--lime); }
.card-lime .rm-list .rm-when { background: rgba(16,38,26,.12); color: #1c4433; }
.card-deep .rm-list .rm-when { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }

@media (max-width: 1080px) {
  .rm { grid-template-columns: 1fr; }
  .rm-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .rm-list { grid-template-columns: 1fr; }
  /* one column here, so only the very first item loses its rule */
  .rm-list li:nth-child(2) { border-top: 1px solid var(--line); }
  .rm-side { grid-template-columns: 1fr; }
}

/* ---- hero slider: the live site's mascot scenes ------------------------- */
.hero-art { position: relative; align-self: stretch; display: block; overflow: clip; border-radius: var(--r); }
.ha-track { position: relative; width: 100%; height: 100%; min-height: 300px; }
.ha-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  opacity: 0; transition: opacity .7s ease;
}
.ha-slide.on { opacity: 1; }
.ha-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(10,22,17,.62) 100%);
}
.ha-label {
  position: absolute; left: 16px; bottom: 16px;
  font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; padding: 9px 12px; border-radius: var(--r-xs);
  background: rgba(10,22,17,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ha-dots { position: absolute; right: 16px; bottom: 18px; display: flex; gap: 7px; }
.ha-dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.42);
  transition: background .2s ease, width .2s ease;
}
.ha-dots button[aria-pressed="true"] { background: var(--lime); width: 22px; border-radius: 999px; }

/* ---- the live badge preview -------------------------------------------- */
.ld-live { display: flex; flex-direction: column; gap: 14px; }
.ld-code {
  font: 700 11px/1 var(--mono); letter-spacing: .12em;
  padding: 6px 9px; border-radius: var(--r-xs);
  background: rgba(255,255,255,.1); color: var(--lime);
}
.ld-shot { position: relative; margin: 0; flex: 1; min-height: 190px; border-radius: 14px; overflow: clip; }
.ld-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ld-badge {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12.5px/1 var(--font);
  padding: 9px 12px; border-radius: 999px;
  background: rgba(10,15,12,.82); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  max-width: calc(100% - 24px);
  animation: ld-pop .32s cubic-bezier(.22,1,.36,1);
}
.ld-badge::before {
  content: 'AI'; flex: none;
  font: 700 9.5px/1 var(--font); letter-spacing: .06em;
  padding: 4px 5px; border-radius: 3px;
  background: var(--lime); color: #10261a;
}
@keyframes ld-pop { from { opacity: 0; transform: translateY(-5px) scale(.96); } }
.ld-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ld-name { font: 600 16px/1.2 var(--disp); color: #fff; }
.ld-hint { font-size: 11.5px; color: rgba(255,255,255,.5); }

.ld-picker .chip { cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.ld-picker .chip:hover { background: var(--mint-soft); border-color: transparent; }
.ld-picker .chip[aria-pressed="true"] {
  background: var(--deep); color: #fff; border-color: transparent;
}
.pay-once {
  font: 700 9.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 3px; margin-left: 6px;
  background: var(--lime); color: #10261a;
}
@media (prefers-reduced-motion: reduce) {
  .ha-slide { transition: none; }
  .ld-badge { animation: none; }
}

/* ==========================================================================
   PASS 5 — hero art bleed, the live badge slider, myths, site checker
   ========================================================================== */

/* 1. HERO. The art now takes the whole right half at the card's full height and
   bleeds to its edges, so the hero reads as one object split down the middle
   rather than a picture floating in a dark box. The notch still cuts the
   bottom-left, so the art's bottom margin has to clear the notch padding too. */
.hero-card {
  --hp: clamp(28px, 3.4vw, 52px);
  padding: var(--hp);
  padding-bottom: calc(var(--hp) + var(--notch));
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(22px, 2.6vw, 40px);
  align-items: center;
  overflow: clip;
}
.hero-art {
  align-self: stretch;
  margin: calc(var(--hp) * -1) calc(var(--hp) * -1) calc((var(--hp) + var(--notch)) * -1) 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  min-height: 420px;
}
.hero-art .ha-track { height: 100%; }
.ha-label { left: auto; right: 16px; bottom: 16px; }
.ha-dots { right: auto; left: 20px; bottom: 20px; }

/* the headline: three clean lines, balanced, with the accent phrase intact */
.hero-card .h1 { text-wrap: balance; max-width: 15ch; }

@media (max-width: 900px) {
  .hero-art {
    margin: 0; border-radius: var(--r); min-height: 280px;
  }
}

/* 2. THE LIVE BADGE PANEL.
   Upper half is the language-scene slider carrying the real plugin badge;
   lower half keeps the six sample strings it had before. */
.ld-live { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: clip; }
.ld-shot {
  position: relative; margin: 0;
  aspect-ratio: 16 / 10; overflow: clip;
  background: #eee;
}
.ld-slides { position: absolute; inset: 0; }
.ld-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .7s ease;
}
.ld-slide.on { opacity: 1; }

/* the real plugin badge: dark pill, official EU mark, 11px/600 */
.aicl-badge {
  position: absolute; top: 0; left: 0; margin: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: #111; color: #fff;
  font: 600 11px/1.4 var(--font); letter-spacing: .02em;
  white-space: nowrap; max-width: calc(100% - 24px);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.aicl-badge img { width: 15px; height: 15px; flex: none; }
.aicl-badge span { overflow: hidden; text-overflow: ellipsis; }
.aicl-badge.swap { opacity: 0; transition: opacity .16s ease; }

.ld-dots { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.ld-dots button {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: rgba(17,17,17,.32);
}
.ld-dots button[aria-pressed="true"] { background: #111; width: 18px; border-radius: 999px; }

.ld-body { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ld-body .tags { flex-direction: column; align-items: stretch; gap: 8px; }
.ld-body .tag { justify-content: flex-start; }
.ld-code {
  font: 700 11px/1 var(--mono); letter-spacing: .12em;
  padding: 6px 9px; border-radius: var(--r-xs);
  background: rgba(255,255,255,.1); color: var(--lime);
}

/* the official EU label set, as the plugin ships it */
.eu-set { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.eu-set .cap {
  display: block; font: 600 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 12px;
}
.eu-set .set { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.eu-set .set img { height: 26px; width: auto; }

/* 3. MYTHS. The claim now reads as a quoted belief with the correction landing
   in a tinted block at the card's foot, instead of three flat paragraphs. */
.myth { display: flex; flex-direction: column; }
.myth-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  font: 700 10px/1 var(--font); letter-spacing: .11em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-xs);
  background: var(--grey); color: var(--muted);
}
.myth-claim {
  margin-top: 16px;
  font-family: var(--disp); font-size: 19px; font-weight: 600; line-height: 1.28;
  letter-spacing: -.01em; color: var(--ink);
}
.myth-why { margin-top: 10px; font-size: 13.8px; line-height: 1.55; color: var(--muted); }
.myth-fix {
  margin-top: auto; display: flex; gap: 10px; align-items: flex-start;
  background: var(--mint-soft); border-radius: 12px;
  padding: 14px; margin-top: 22px;
}
.myths .card { padding: 24px; }
.myth-fix .mf-i {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  background: var(--teal); color: #fff; display: grid; place-items: center;
}
.myth-fix .mf-i svg { width: 12px; height: 12px; }
.myth-fix p { font-size: 13.5px; line-height: 1.5; font-weight: 500; color: #123c34; }

/* 4. SITE CHECKER. A claim about scanning is more convincing with the result
   next to it, so the band splits copy-left / sample-result-right. */
.scan-result {
  background: var(--card); border-radius: var(--r);
  padding: 14px; overflow: clip;
}
.scan-result img { width: 100%; height: auto; border-radius: 12px; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.scan-result .sr-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 4px 2px;
  font-size: 12.5px; color: var(--muted);
}
.scan-result .sr-live {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--teal);
}
.scan-result .sr-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}
@media (prefers-reduced-motion: reduce) { .ld-slide { transition: none; } }

/* ---- comparison table ---------------------------------------------------- */
.cmp { border-radius: var(--r); }
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 130px 190px;
  gap: 18px; align-items: center;
  padding: 14px clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.cmp-row:first-child { border-top: 0; }
.cmp-row:not(.cmp-head):hover { background: #fbfbfb; }
.cmp-head {
  position: sticky; top: 96px; z-index: 2;
  background: var(--grey);
  padding-block: 16px;
}
.cmp-head .cmp-f { font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmp-head .cmp-c { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.cmp-head b { font: 700 15px/1 var(--disp); }
.cmp-head i { font: 500 11.5px/1 var(--font); font-style: normal; color: var(--muted); }
.cmp-f { font-size: 14.5px; line-height: 1.45; }
.cmp-c { display: flex; justify-content: center; align-items: center; text-align: center; }
.cmp-c.yes svg { width: 17px; height: 17px; color: var(--teal); }
.cmp-c.no { color: #c3c3c8; font-size: 16px; }
.cmp-c.txt { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 720px) {
  .cmp-row { grid-template-columns: 1fr 62px 62px; gap: 10px; padding-inline: 14px; }
  .cmp-head { top: 78px; }
  .cmp-head i { display: none; }
  .cmp-f { font-size: 13.5px; }
  .cmp-c.txt { font-size: 11px; }
}

/* ---- footer -------------------------------------------------------------- */
.foot-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  max-width: var(--wrap); margin-inline: auto;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(20,38,31,.15);
}
.foot-brand { max-width: 46ch; }
.foot-blurb { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: #2c4a3b; }
.foot-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font: 600 12px/1 var(--font); letter-spacing: .04em; color: #14261f;
  background: rgba(255,255,255,.6); border-radius: var(--r-pill); padding: 9px 14px;
}
.fs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.foot-cta { min-width: 250px; background: var(--deep); color: #fff; }
.foot-cta .arrow { background: var(--lime); color: #10261a; }
.foot-in { margin-top: 40px; grid-template-columns: repeat(4, 1fr); }
.foot-bar {
  max-width: var(--wrap); margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(20,38,31,.15);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.foot-legal { max-width: 88ch; margin: 0; font-size: 12.5px; line-height: 1.6; color: #3c5a4b; }
.foot-copy { font-size: 12.5px; color: #3c5a4b; white-space: nowrap; margin: 0; }

@media (max-width: 1080px) { .foot-in { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 720px)  { .foot-cta { min-width: 0; width: 100%; } }

/* ---- headline breaks ----------------------------------------------------- */
/* "AI-generated" was breaking at its hyphen and "Article 50" was splitting
   across lines, orphaning the numeral. Both are single reading units. */
.nb { white-space: nowrap; }
/* 48px left 24 characters to the line, one short of "images, and meet Article 50",
   which is what forced the bad break. 44px fits it. */
.hero-card .h1 { font-size: clamp(31px, 3.1vw, 44px); max-width: none; text-wrap: balance; }

/* At 1920 the balancer left "Label your" alone on line one. The hero headline
   is short enough to set its own breaks; below 900 it wraps naturally again. */
.hb { display: none; }
@media (min-width: 900px) {
  .hb { display: inline; }
  .hero-card .h1 { text-wrap: initial; }
}

/* ---- myths: one height, and the interiors on shared baselines ------------ */
/* The grid already equalises card height; what did not line up was the inside.
   The claim gets a two-line box so every "why" starts at the same y, and the
   correction stays pinned to the floor, so all four read as one row. */
.myths .card { height: 100%; }
.myth-claim { min-height: 2.56em; }
.myth-why { min-height: 6.2em; }

/* ---- mobile hero art ----------------------------------------------------- */
/* The art measured 0 wide at 390: the stacked card gives it a grid cell, but
   nothing in the box establishes an inline size once it is no longer stretched. */
@media (max-width: 900px) {
  .hero-art { width: 100%; display: block; }
  .hero-art .ha-track { min-height: 280px; }
}

/* ==========================================================================
   PASS 6 — scan panel, comparison table, footer, brutalist shadow trial
   ========================================================================== */

/* the pass-5 .hero-card rule sits after the 900px media query, so it was
   overriding it and the card stayed two-column on mobile (art measured 50px) */
@media (max-width: 900px) { .hero-card { grid-template-columns: 1fr; } }

/* ---- site checker result panel ------------------------------------------ */
.scan-out {
  background: var(--card); border-radius: var(--r);
  padding: 8px; overflow: clip;
}
.so-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 13px;
}
.so-url { font: 500 13.5px/1 var(--mono); color: var(--ink); }
.so-live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.so-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  animation: so-pulse 1.7s ease-in-out infinite;
}
@keyframes so-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
.so-list { border-radius: 13px; overflow: clip; background: #fafbfa; }
.so-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.so-list li:first-child { border-top: 0; }
.so-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.so-dot.warn { background: #d98324; }
.so-dot.ok   { background: var(--teal); }
.so-name { display: flex; flex-direction: column; gap: 3px; font: 600 13.5px/1.25 var(--font); }
.so-name em { font: 400 11.5px/1 var(--mono); font-style: normal; color: var(--muted); letter-spacing: .01em; }
.so-state {
  margin-left: auto; flex: none;
  font: 600 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-xs);
}
.so-state.warn { background: #fdf0dd; color: #8a5410; }
.so-state.ok   { background: var(--mint-soft); color: #0e5f57; }
.so-foot { padding: 13px 16px 10px; font-size: 12px; color: var(--muted); }

/* ---- comparison table ---------------------------------------------------- */
.cmp {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: clip;
  position: relative;
}
/* the Pro column runs as one tinted band the whole height, the way the
   reference marks its featured tier, instead of per-cell shading */
.cmp::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 210px;
  background: var(--mint-soft); z-index: 0; pointer-events: none;
}
.cmp-row, .cmp-group {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 150px 210px;
  align-items: center;
  padding: 0 0 0 clamp(18px, 2vw, 28px);
}
.cmp-row { border-top: 1px solid var(--line); }
.cmp-row .cmp-f { padding: 15px 20px 15px 0; font-size: 14.5px; line-height: 1.45; }
.cmp-c { align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; }
.cmp-head { border-top: 0; padding-block: 6px; }
.cmp-head .cmp-f { font: 600 11.5px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.cmp-head .cmp-c { flex-direction: column; gap: 4px; padding-block: 22px; }
.cmp-head b { font: 700 16px/1 var(--disp); }
.cmp-head i { font: 500 11.5px/1 var(--font); font-style: normal; color: var(--muted); }
.cmp-head .cmp-c.pro b { color: #0e5f57; }

.cmp-group { border-top: 1px solid var(--line); background: #fbfbfb; }
.cmp-group .cmp-f {
  padding: 11px 0; font: 700 10.5px/1 var(--font);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cmp-group .cmp-c.pro { background: color-mix(in srgb, var(--mint-soft) 62%, #fbfbfb); }

.cmp-c .tick {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mint-soft); color: #0e5f57;
}
.cmp-c.pro .tick { background: var(--lime); color: #10261a; }
.cmp-c .tick svg { width: 12px; height: 12px; }
.cmp-c .dash { color: #c8c8cd; font-size: 15px; }
.cmp-c .txt { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cmp-c.pro .txt { color: #16564d; }
.cmp-row:not(.cmp-head):not(.cmp-foot):hover { background: #fcfcfc; }

.cmp-foot { background: #fbfbfb; }
.cmp-foot .cmp-f { font-size: 13.5px; color: var(--muted); }
.cmp-foot .btn { height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }

@media (max-width: 860px) {
  .cmp::after { width: 96px; }
  .cmp-row, .cmp-group { grid-template-columns: 1fr 72px 96px; padding-left: 14px; }
  .cmp-row .cmp-f { font-size: 13.5px; padding-right: 12px; }
  .cmp-head i { display: none; }
  .cmp-c .txt { font-size: 10.5px; }
  .cmp-foot .btn { padding: 0 10px; font-size: 12px; }
}

/* ---- footer: one rule per division, never two ---------------------------- */
/* .foot-legal carried its own border-top from the first pass and now sits
   inside .foot-bar, which has one too. That was the doubled line. */
.foot-legal { border-top: 0; padding-top: 0; margin: 0; }
.foot-top { padding-bottom: 36px; }
.foot-in { margin-top: 36px; }
.foot-bar { margin-top: 36px; padding-top: 22px; }
.foot h4 {
  font: 700 11px/1 var(--font); letter-spacing: .11em; text-transform: uppercase;
  color: #2c4a3b; margin-bottom: 14px;
}
.foot li a { color: #16382a; }

/* ==========================================================================
   BRUTALIST SHADOW TRIAL  >  one variable. Set --bs to `none` to drop it.
   ========================================================================== */
:root {
  /* a very faded mint rather than black: the hard offset still gives the
     brutalist edge without punching a near-black shape onto the light field.
     Mint read as a colour cast rather than a shadow, so it is a soft grey. */
  --bs:      7px 7px 0 rgba(25, 25, 44, .10);
  --bs-edge: rgba(25, 25, 44, .12);
}
.myths .card,
.quad .card,
.bento > .card, .bento-col > .card,
.rm > .card, .rm-side > .card,
.tier,
.slab,
.cmp,
.panel,
.frame,
.scan-out,
.card-cta,
.hero-card {
  box-shadow: var(--bs);
}
.myths .card, .quad .card, .bento > .card, .bento-col > .card,
.rm > .card, .rm-side > .card, .tier, .cmp, .scan-out {
  border-color: var(--bs-edge);
}
/* the stack writes its own shadow as cards cover each other, so it opts out */
.slab-stack .slab { box-shadow: var(--bs); }
@media (max-width: 720px) { :root { --bs: 4px 4px 0 var(--deep); } }

/* ---- CTA cards: one line, no forced break -------------------------------- */
/* "Download the free plugin" split as "Download the / free plugin", which read
   badly. The labels are now short enough to sit on one line at this size. */
.card-cta { font-size: 18px; gap: 14px; min-height: 96px; }
.card-cta > span:first-child { text-wrap: balance; }
.hero-cta { grid-template-columns: repeat(2, minmax(0, 246px)); }
.foot-cta { background: var(--deep); color: #fff; min-width: 264px; }
.foot-cta .arrow { background: var(--lime); color: #10261a; }

/* 246px left 154px of measure after the arrow chip and padding, and the label
   needs ~165px. Widen the pair and drop a point rather than let it wrap. */
.card-cta { font-size: 17px; }
.hero-cta { grid-template-columns: repeat(2, minmax(0, 272px)); }

/* A grey en-dash measured 1.67:1 and, carrying an aria-label, counted as text.
   A hollow ring says the same thing visually, and the label moves off-screen
   for screen readers instead of being painted at failing contrast. */
.cmp-c .dash {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #d2d2d8;
  display: block;
}
.cmp-c.pro .dash { border-color: rgba(20,38,31,.18); }

/* The first table pass made the header sticky; the redesign restyled it but
   never reset `position`, so it floated over the first data row. */
/* NOT static: the tinted Pro band is a positioned ::after at z-index 0, and a
   positioned element paints above a static sibling's inline text, which blanked
   the "Pro / from EUR59/yr" label. Relative + z-index 1 keeps it above the band. */
.cmp-head { position: relative; top: auto; z-index: 1; background: transparent; }

/* The hero opts out entirely. Its bottom-left is cut by the notch, so a hard
   offset on the card AND on the two cards sitting in the cutout stacked three
   overlapping shapes across the white gutter. Nothing there reads as one edge. */
.hero-card, .hero-notch .card-cta { box-shadow: none; }

/* the rotating panel crossfades rather than snapping, so the change reads */
.tab-panel:not([hidden]) { animation: panel-in .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.tab { position: relative; overflow: clip; }
/* a hairline timer on the active tab shows the rotation is deliberate */
.tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--lime);
  animation: tab-timer 6s linear both;
}
@keyframes tab-timer { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .tab-panel:not([hidden]) { animation: none; }
  .tab[aria-selected="true"]::after { animation: none; width: 100%; }
}

/* ---- universal badge coverage card --------------------------------------- */
/* It was carrying four treatments at once: an icon header, a paragraph, three
   hairline rows and eight loose pills. Now it is one structure: header, a
   checked grid of the surfaces, and the technical notes in a footer. */
.cov { padding: 0; overflow: clip; }
.cov-head { display: flex; align-items: flex-start; gap: 13px; padding: 22px 24px 16px; }
.cov-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--lime); color: #10261a; display: grid; place-items: center;
}
.cov-title { flex: 1; min-width: 0; }
.cov-title h3 { font-size: 18px; }
.cov-title p { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cov-count {
  flex: none; align-self: center;
  font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 9px; border-radius: var(--r-xs);
  background: var(--card); color: var(--muted);
}
.cov-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 22px; padding: 0 24px 18px;
}
.cov-grid li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; font-size: 13.5px; line-height: 1.35;
  border-top: 1px solid rgba(25,25,44,.09);
}
.cov-grid li:nth-child(1), .cov-grid li:nth-child(2) { border-top: 0; }
.cov-grid .ck {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  background: var(--card); color: var(--teal); display: grid; place-items: center;
}
.cov-grid .ck svg { width: 10px; height: 10px; }
.cov-notes {
  background: rgba(255,255,255,.62);
  border-top: 1px solid rgba(25,25,44,.09);
  padding: 6px 24px 14px;
}
.cov-notes p {
  padding: 11px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  border-top: 1px solid rgba(25,25,44,.08);
}
.cov-notes p:first-child { border-top: 0; }
.cov-notes code {
  font: 400 11.5px/1 var(--mono);
  background: rgba(25,25,44,.06); padding: 3px 5px; border-radius: 4px;
}
@media (max-width: 520px) { .cov-grid { grid-template-columns: 1fr; }
  .cov-grid li:nth-child(2) { border-top: 1px solid rgba(25,25,44,.09); } }

/* the count sat beside the block and squeezed the dek into a two-word wrap */
.cov-count { align-self: baseline; margin-left: 8px; vertical-align: 3px; }
.cov-title h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cov-title h3 .cov-count { margin-left: 0; vertical-align: 0; }

/* ---- hero notch: the pull-up must equal the notch's own height ----------- */
/* --notch was 116px but the notch measures 12px gutter + 96px card = 108px,
   so 8px of dark hero card showed as a sliver under the CTA cards. Deriving it
   from the card height keeps them flush with the hero's bottom edge. */
.hero { --cta-h: 96px; --notch: calc(var(--cta-h) + 12px); }
.card-cta { min-height: var(--cta-h, 96px); }
@media (max-width: 720px) { .hero { --notch: 0px; } }

/* ---- nested radius, badge, EU set, scan groups --------------------------- */
/* .ld-shot kept a 14px radius from an earlier pass while its card is 10px, so
   a larger curve sat inside a smaller one. The card's clip does the rounding. */
.ld-shot { border-radius: 0; }

/* the real plugin badge is a dark pill with a 7px dot and the translated text.
   The EU assets are 370x71 pills, not icons, so one could never be an inline
   mark; it rendered as a crushed fragment. It belongs in the label set below. */
.aicl-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .85; flex: none;
}
.aicl-badge img { display: none; }

/* the official labels keep their own aspect ratio and get a plate so they read
   as supplied assets rather than white shapes floating on the dark card */
.eu-set .set img {
  height: 30px; width: auto;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 3px 6px;
}

/* scan result groups */
.so-group + .so-group { margin-top: 6px; }
.so-art {
  padding: 12px 16px 8px;
  font-size: 11.5px; line-height: 1.4; color: var(--muted);
}
.so-art b { color: var(--ink); font-weight: 700; letter-spacing: .01em; }
.so-list .so-name { flex: 1; font: 600 13.5px/1.3 var(--font); }
.so-n {
  flex: none; font: 600 11px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-xs);
  background: #fdf0dd; color: #8a5410;
}
.so-n.none { background: var(--mint-soft); color: #0e5f57; }

/* the closing band sits on the deep ground, so the mark lifts off it */
.band.on-deep .brand-mark { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 6px 16px -8px rgba(0,0,0,.6); }
.foot .brand-mark { width: 40px; height: 40px; border-radius: 12px; }
.foot .brand-mark svg { width: 25px; height: 25px; }

/* ==========================================================================
   RESOURCES MEGA MENU
   Nine real destinations, grouped, each with the one-liner from its own page.
   ========================================================================== */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-t {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--r-pill);
  font: 500 14.5px/1 var(--font); color: var(--muted); white-space: nowrap;
  transition: background .14s, color .14s;
}
.nav-dd-t:hover, .nav-dd-t[aria-expanded="true"] { background: rgba(25,25,44,.05); color: var(--ink); }
.dd-caret { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-dd-t[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  z-index: 80;
  width: min(92vw, 880px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -24px rgba(25,25,44,.28), 0 2px 8px rgba(25,25,44,.06);
  padding: 20px;
  animation: mega-in .22s cubic-bezier(.22,1,.36,1) both;
}
.mega[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
.mega::before {                       /* keeps the pointer path from the button */
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.mega-in { display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 8px; }
.mega-col { display: flex; flex-direction: column; }
.mega-h {
  font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 10px;
}
.mega-col a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  transition: background .14s ease;
}
.mega-col a:hover { background: #f4f6f5; }
.mega-i {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--mint-soft); color: var(--teal);
  display: grid; place-items: center;
}
.mega-i svg { width: 15px; height: 15px; }
.mega-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-t b  { font: 600 13.5px/1.2 var(--font); color: var(--ink); }
.mega-t em { font: 400 11.5px/1.4 var(--font); font-style: normal; color: var(--muted); }

.mega-feat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--r-sm);
  background: var(--deep); color: #fff;
}
.mega-feat .mf-tag {
  align-self: flex-start;
  font: 700 9.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 4px; background: var(--lime); color: #10261a;
}
.mega-feat b  { font: 700 15px/1.25 var(--disp); letter-spacing: -.01em; }
.mega-feat em { font: 400 12px/1.5 var(--font); font-style: normal; color: rgba(255,255,255,.72); }
.mega-feat .mf-go {
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12.5px/1 var(--font); color: var(--lime);
}
.mega-feat .mf-go svg { width: 14px; height: 14px; transition: transform .18s ease; }
.mega-feat:hover .mf-go svg { transform: translateX(3px); }

@media (max-width: 1180px) {
  .mega { width: min(94vw, 720px); }
  .mega-in { grid-template-columns: 1fr 1fr; }
  .mega-feat { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
  .mega-feat .mf-go { margin: 0 0 0 auto; padding: 0; }
}
@media (max-width: 1000px) {
  .nav-dd { width: 100%; }
  .nav-dd-t { width: 100%; justify-content: space-between; padding: 13px 14px; }
  .mega {
    position: static; transform: none; width: 100%;
    box-shadow: none; border: 0; padding: 4px 0 8px; animation: none;
  }
  .mega-in { grid-template-columns: 1fr; gap: 2px; }
  .mega-feat { display: none; }
}

/* ==========================================================================
   PASS 7 — mega menu overflow, header polish, pricing note
   ========================================================================== */

/* Grid items default to min-width:auto, so each column refused to shrink below
   its longest line: 413+335+301 = 1049px of columns inside an 840px panel. The
   PROJECT column spilled past the panel's own background onto the hero (which
   read as the panel being transparent) and the featured card was pushed out. */
.mega-col, .mega-t, .mega-feat { min-width: 0; }
.mega-t b, .mega-t em { overflow-wrap: anywhere; }

/* The trigger sits near the right of the bar, so centring the panel on it hangs
   it off the viewport. Anchor it to the trigger's right edge instead. */
.mega { left: auto; right: -12px; transform: none; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---- header polish ------------------------------------------------------- */
.nav-in { gap: 10px; padding: 0 12px 0 16px; }
.nav-links { gap: 1px; }
.nav-links > a, .nav-dd-t { padding: 9px 12px; font-size: 14px; }
/* a hairline parts navigation from the actions, so the bar reads in two halves */
.nav-act { position: relative; padding-left: 14px; }
.nav-act::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--line);
}
.nav-act .btn { height: 38px; padding: 0 16px; font-size: 14px; }
/* the bar lifts off the page once it is stuck, rather than floating flatly */
.nav {
  transition: box-shadow .2s ease, background .2s ease;
  box-shadow: 0 1px 2px rgba(25,25,44,.04);
}
.nav.stuck {
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px -14px rgba(25,25,44,.22), 0 1px 2px rgba(25,25,44,.06);
}
.brand-name { font-size: 16.5px; }
@media (max-width: 1240px) {
  .nav-links > a, .nav-dd-t { padding: 9px 9px; font-size: 13.5px; }
  .brand-name { display: none; }
}

/* ---- pricing note on one line ------------------------------------------- */
.price-note { font-size: 12px; line-height: 1.5; }
@media (min-width: 1180px) {
  .price-note { white-space: nowrap; font-size: 11.5px; }
}

/* the descriptions must be free to wrap inside their 138px column */
.mega-col a { white-space: normal; border-radius: var(--r-sm); padding: 9px 10px; font: inherit; }
.mega-t { flex: 1 1 0; }

/* ==========================================================================
   PASS 8 — wider mega menu, Badge Studio, signature motion
   ========================================================================== */
.mega { width: min(94vw, 1060px); }
.mega-in { grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 12px; }
.mega-t em { font-size: 12px; }

/* ---- badge studio -------------------------------------------------------- */
.studio { display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(18px, 2.2vw, 32px); align-items: start; }
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-item { margin: 0; }
.demo-fig {
  position: relative; aspect-ratio: 4 / 5; overflow: clip;
  border-radius: var(--r); background: var(--grey);
  box-shadow: var(--bs);
}
.demo-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.demo-layer.on { opacity: 1; }
.demo-item figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.tg {
  font: 700 10px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 8px; border-radius: var(--r-xs);
}
.tg.t-ai   { background: var(--mint-soft); color: #0e5f57; }
.tg.t-real { background: var(--grey); color: var(--muted); }

/* the badge itself: three styles, four corners */
.demo-badge {
  position: absolute; margin: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  font: 600 11.5px/1.4 var(--font); letter-spacing: .02em; white-space: nowrap;
  background: #111; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: opacity .18s ease, top .28s cubic-bezier(.22,1,.36,1),
              left .28s cubic-bezier(.22,1,.36,1), right .28s cubic-bezier(.22,1,.36,1),
              bottom .28s cubic-bezier(.22,1,.36,1);
}
.demo-badge .db-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.demo-badge.tl { top: 0; left: 0; }
.demo-badge.tr { top: 0; right: 0; }
.demo-badge.bl { bottom: 0; left: 0; }
.demo-badge.br { bottom: 0; right: 0; }
.demo-badge.swap { opacity: 0; }
.demo-badge.s-eu { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.demo-badge.s-eu .db-dot, .demo-badge.s-eu #demoBadgeText { display: none; }
.demo-badge.s-eu img { display: block; height: 26px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.demo-badge img { display: none; }
.demo-badge.s-custom { background: var(--lime); color: #10261a; }

/* the control card */
.controls { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px,2.2vw,26px); }
.controls .sc {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--teal);
}
.controls .sc i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  animation: so-pulse 1.9s ease-in-out infinite; }
.controls .sub { font-size: 13px; color: var(--muted); margin-top: -10px; }
.ctrl { display: flex; flex-direction: column; gap: 9px; }
.cl { font: 700 10.5px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--grey); border-radius: var(--r-sm); align-self: flex-start; }
.seg button {
  padding: 8px 14px; border-radius: 7px;
  font: 600 13px/1 var(--font); color: var(--muted);
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--deep); color: #fff; }
.posgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 92px; }
.posgrid button {
  aspect-ratio: 4 / 3; border-radius: 6px;
  background: var(--grey); position: relative;
  transition: background .15s;
}
.posgrid button::after {
  content: ''; position: absolute; width: 30%; height: 22%; border-radius: 2px;
  background: rgba(25,25,44,.28); margin: 5px;
}
.posgrid button[data-pos="tl"]::after { top: 0; left: 0; }
.posgrid button[data-pos="tr"]::after { top: 0; right: 0; }
.posgrid button[data-pos="bl"]::after { bottom: 0; left: 0; }
.posgrid button[data-pos="br"]::after { bottom: 0; right: 0; }
.posgrid button:hover { background: #e2e2e2; }
.posgrid button[aria-pressed="true"] { background: var(--deep); }
.posgrid button[aria-pressed="true"]::after { background: var(--lime); }
.eu-strip { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.eu-strip .set { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eu-strip .set img { height: 24px; width: auto; }
.controls .note { font-size: 12px; line-height: 1.5; color: var(--muted); }
.controls .note a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .studio { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stage { grid-template-columns: 1fr; }
}

/* ---- signature motion ---------------------------------------------------- */
/* figures count up once, when they arrive */
.count { font-variant-numeric: tabular-nums; }

@keyframes spark { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .demo-layer, .demo-badge { transition: none; }
  .controls .sc i { animation: none; }
}

/* ==========================================================================
   PASS 9 — mega menu, badge studio DNA, checker, directory
   ========================================================================== */

/* ---- mega menu: wider, aligned to the bar, softer arrival ---------------- */
.mega {
  width: min(94vw, 1180px);
  padding: 22px;
  border-radius: var(--r);
  /* aligned to the nav's own right edge rather than the trigger, so it reads
     as a panel belonging to the bar instead of hanging off one item */
  right: -14px;
  transform-origin: 88% 0;
  animation: mega-in .26s cubic-bezier(.16, 1, .3, 1) both;
  box-shadow: 0 32px 70px -30px rgba(20,38,31,.36), 0 2px 10px rgba(25,25,44,.06);
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
}
.mega-in { grid-template-columns: 1fr 1fr 1fr 1.32fr; gap: 14px; }
.mega-col { padding-right: 6px; }
.mega-col + .mega-col { border-left: 1px solid var(--line); padding-left: 14px; }
.mega-h { padding: 4px 10px 12px; }
.mega-col a { padding: 10px; gap: 12px; align-items: center; }
.mega-i { width: 32px; height: 32px; border-radius: 9px; }
.mega-i svg { width: 16px; height: 16px; }
.mega-t b  { font-size: 14px; }
.mega-t em { font-size: 12px; line-height: 1.45; }
.mega-col a:hover .mega-i { background: var(--lime); color: #10261a; }
.mega-i { transition: background .16s ease, color .16s ease; }

/* the in-force panel gets the mascot behind it rather than a flat green box */
.mega-feat {
  position: relative; overflow: clip;
  padding: 22px; border-radius: var(--r-sm);
  background: var(--deep);
  isolation: isolate;
}
.mega-feat::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url("/images/scene-provenance-light.webp") center 28% / cover no-repeat;
  opacity: .5;
}
.mega-feat::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(165deg, rgba(20,38,31,.42) 0%, rgba(20,38,31,.88) 58%, rgba(20,38,31,.97) 100%);
}
.mega-feat b  { font-size: 16px; line-height: 1.22; }
.mega-feat em { color: rgba(255,255,255,.8); }
.mega-feat .mf-tag { box-shadow: 0 1px 3px rgba(0,0,0,.3); }

@media (max-width: 1180px) {
  .mega { width: min(94vw, 760px); }
  .mega-in { grid-template-columns: 1fr 1fr; }
  .mega-col + .mega-col { border-left: 0; padding-left: 0; }
  .mega-col:nth-child(3) { border-top: 1px solid var(--line); padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }

/* Anchored to the trigger, a 1180px panel ran off the left edge (left: -89).
   Making .nav-dd static promotes .nav (position: sticky) to the containing
   block, so the panel aligns to the BAR's right edge and stays inside it. */
.nav-dd { position: static; }
.mega { top: calc(100% + 12px); right: 0; transform-origin: 82% 0; }
@media (max-width: 1000px) {
  .nav-dd { position: relative; }
  .mega { top: auto; right: auto; }
}

/* ---- badge studio, in the slab frame the rest of the page uses ----------- */
.studio-slab { max-width: none; }
.studio-in { padding: clamp(18px, 2vw, 26px); }
.studio-in .studio { gap: clamp(16px, 2vw, 26px); }
/* the stage sits on the deep ground, so its cards carry a light edge instead
   of the page's grey offset shadow, which would vanish here */
.studio-in .demo-fig { box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); background: rgba(255,255,255,.06); }
.studio-in .demo-item figcaption { color: rgba(255,255,255,.72); }
.studio-in .tg.t-ai { background: var(--lime); color: #10261a; }
.studio-in .tg.t-real { background: rgba(255,255,255,.12); color: rgba(255,255,255,.82); }
/* the control card stays light, so the controls read as the product UI */
.studio-in .controls { background: var(--card); border-color: transparent; box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); }

/* ---- the landing's sample report ---------------------------------------- */
.so-score { display: flex; align-items: center; gap: 16px; padding: 14px 16px 4px; }
.so-gauge { position: relative; width: 76px; height: 76px; flex: none; }
.so-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.so-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 22px/1 var(--disp); color: #8a5410; font-variant-numeric: tabular-nums;
}
.so-hd { font: 600 14.5px/1.3 var(--font); }
.so-sb { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.so-list li { gap: 12px; }
.so-name em { font: 400 11px/1 var(--mono); font-style: normal; color: var(--muted); display: block; margin-top: 3px; }

/* ---- skip link ----------------------------------------------------------- */
/* Off-screen until focused, so keyboard users can jump the nav. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--deep); color: #fff;
  font: 600 14px/1 var(--font);
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

/* ---- the landing's sample report, in the checker's language -------------- */
.so-score { display: flex; align-items: center; gap: 16px; padding: 16px 16px 6px; }
.so-pill {
  display: inline-block; margin-top: 10px;
  font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-xs);
  background: #fdf0dd; color: #8a5410;
}
.so-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 12px;
}
.so-facts div { padding: 12px 16px; }
.so-facts div + div { border-left: 1px solid var(--line); }
.so-facts b { display: block; font: 600 14px/1.2 var(--disp); }
.so-facts span { display: block; margin-top: 5px; font: 600 9.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.so-art { padding: 14px 16px 6px; font-size: 11.5px; color: var(--muted); }
.so-art b { color: var(--ink); font-weight: 700; }
.so-list { background: none; border-radius: 0; }
.so-list li { padding: 10px 16px; }
.so-list li:first-child { border-top: 0; }

/* ==========================================================================
   MOBILE HEADER
   The bar had room for the name but hid it, showed the actions divider with
   nothing to divide, and the menu was a dropdown that ran off the screen with
   no scroll: "Resources" and everything under it was unreachable.
   ========================================================================== */
@media (max-width: 1000px) {
  /* the name is hidden at 1240 because the link row crowds it. On mobile the
     row is gone, so the brand gets its name back. */
  .brand-name { display: block; font-size: 16px; }
  .nav-act::before { display: none; }
  .nav-act { padding-left: 0; gap: 6px; }
  .nav-in { height: 60px; gap: 10px; padding: 0 10px 0 12px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand-mark svg { width: 24px; height: 24px; }
  .nav-act .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

  .nav-toggle { width: 40px; height: 40px; border: 1px solid var(--line); }
  .nav-toggle[aria-expanded="true"] { background: var(--deep); color: #fff; border-color: transparent; }
  .nav-toggle .ico-close { display: none; }
  .nav-toggle[aria-expanded="true"] .ico-open { display: none; }
  .nav-toggle[aria-expanded="true"] .ico-close { display: block; }

  /* a sheet that fits the screen and scrolls, not a dropdown that overflows it */
  .nav-links.open {
    position: fixed;
    top: calc(var(--gap) + 60px + 8px);
    left: var(--gap); right: var(--gap);
    max-height: calc(100dvh - var(--gap) - 60px - 20px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px;
    box-shadow: 0 24px 60px -20px rgba(25,25,44,.3);
  }
  .nav-links.open > a {
    padding: 15px 14px; font-size: 16px; font-weight: 500;
    border-radius: var(--r-sm); color: var(--ink);
  }
  .nav-links.open > a:active { background: var(--grey); }

  /* Resources reads as a labelled group rather than a dead-end control */
  .nav-dd-t { display: none; }
  .mega { display: block !important; }
  .mega[hidden] { display: block !important; }
  .mega-in::before {
    content: 'Resources';
    grid-column: 1 / -1;
    padding: 16px 14px 8px;
    font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
    border-top: 1px solid var(--line);
    margin-top: 6px;
  }
  .mega-h { display: none; }
  .mega-col a { padding: 12px 14px; }
  .mega-t b { font-size: 15px; }
  .mega-t em { display: none; }

  /* the sheet carries the download CTA the bar cannot fit */
  .nav-sheet-cta {
    display: flex; gap: 8px; padding: 10px 6px 4px;
    border-top: 1px solid var(--line); margin-top: 6px;
  }
  .nav-sheet-cta .btn { flex: 1; height: 46px; }
}
@media (min-width: 1001px) { .nav-sheet-cta { display: none; } }
/* The page must not scroll behind the open sheet.

   overflow:hidden on html was the wrong lock. It destroys the scroll container,
   scrollTop collapses to 0, and the sticky bar drops back to its static position
   at the top of the document -- so opening the menu part-way down the page threw
   the whole header out of view. Locking the body at a negative offset keeps the
   page exactly where it was, and the bar goes position:fixed for the duration so
   it no longer depends on a scroll container that is not there. bento.js writes
   --lock-y and restores the scroll position on close. */
html.menu-open body {
  position: fixed;
  top: var(--lock-y, 0px); left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 1000px) {
  html.menu-open .nav {
    position: fixed;
    top: var(--gap); left: var(--gap); right: var(--gap);
  }
}

/* backdrop-filter makes .nav a containing block, so the fixed sheet anchored to
   the BAR rather than the viewport and ran off the bottom. aim-works §10 also
   records this filter causing a sticky-header compositing glitch on iOS, and
   prescribes the same fix: drop it, use a near-solid background. */
@media (max-width: 1000px) {
  .nav {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255, 255, 255, .98);
  }
  .nav-links.open {
    top: calc(var(--gap) + 60px + 8px);
    max-height: calc(100dvh - var(--gap) - 60px - 24px);
  }
}

/* ---- mobile sheet: measured off the bar, single column ------------------- */
@media (max-width: 1000px) {
  /* The bar is sticky, so its viewport position changes with scroll. A fixed
     offset put the sheet OVER the bar on load. bento.js measures the bar and
     writes --sheet-top, so the sheet always begins just under it. */
  .nav-links.open {
    top: var(--sheet-top, 84px);
    max-height: calc(100dvh - var(--sheet-top, 84px) - 16px);
  }
  /* one column: two made "Developers" wrap mid-word */
  .mega-in { grid-template-columns: 1fr !important; gap: 0; }
  .mega-col + .mega-col { border-left: 0; padding-left: 0; border-top: 0; padding-top: 0; }
  .mega-col:nth-child(3) { border-top: 0; padding-top: 0; }
  /* flatten the panel: inside the sheet it is a section, not a floating card */
  .mega {
    position: static; width: auto; padding: 0;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    animation: none; transform: none;
  }
  .mega::before { content: none; }
  .mega-t b { font-size: 15.5px; font-weight: 500; }
  .mega-col a { padding: 14px; gap: 12px; }
  .mega-i { width: 30px; height: 30px; }
}

/* ==========================================================================
   MOBILE POLISH
   Last block in the file on purpose. The nav and doc-grid bugs both came from
   an unconditional rule landing after a max-width rule of equal specificity and
   quietly winning, so anything added here must be inside a media query.
   ========================================================================== */
@media (max-width: 720px) {
  /* Footer links were 19px tall: eighteen of them, stacked, on a phone. */
  .foot li { margin-bottom: 2px; }
  .foot li a { display: block; padding: 10px 0; }
  .foot h4 { margin-bottom: 8px; }

  /* Indicator dots are 8px of paint and were 8px of hit area. Padding grows the
     target to 32px; background-clip keeps the dot itself the size it was. */
  .ha-dots, .ld-dots { gap: 0; }
  .ha-dots button, .ld-dots button {
    padding: 12px; background-clip: content-box;
    box-sizing: content-box;
  }

  /* Nothing reads below 11px on a phone. These are uppercase tracked labels,
     so they lose the least from a small bump. */
  .so-live, .so-pill, .pc-tag, .myth-tag, .cov-count, .cl, .t-flag,
  .tg, .cmp-head .cmp-f, .kicker { font-size: 11px; }
  .so-stat .k, .so-foot { font-size: 11px; }
  .so-facts span { font-size: 11px; }
  .cmp-group .cmp-f, .cmp-c .txt { font-size: 11px; }

  /* segmented controls sat at 29px; a thumb wants at least the mid-30s */
  .seg button { min-height: 34px; }
}

/* ==========================================================================
   HEADER, FINAL PASS
   Seven separate max-width:720px blocks had accumulated for the nav, each
   patching the one before. This block is last in the file and is the one that
   decides how the bar and sheet behave; earlier nav rules only supply the
   pieces it does not restate. Keep additions HERE rather than starting an
   eighth layer above.
   ========================================================================== */

/* the bar reads as one solid object at every width, so nothing scrolls
   through it. .92 alpha let the announcement strip show straight through. */
.nav { background: rgba(255, 255, 255, .97); }

@media (max-width: 1000px) {
  .nav {
    background: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(25, 25, 44, .04);
  }

  /* brand takes the room that is left; the actions stay pinned right, and the
     name truncates rather than pushing Get Pro and the toggle off the edge */
  .nav-in { gap: 10px; padding: 0 10px 0 12px; height: 60px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-act { flex: none; margin-left: auto; gap: 8px; }
  .nav-act .btn { height: 38px; padding: 0 15px; font-size: 14px; }
  .nav-toggle { flex: none; margin-left: 0; }

  /* One panel from just under the bar to the bottom of the screen. As a
     floating card it left the page's own hero and breadcrumb showing in the
     gap beneath it, which read as two competing surfaces. */
  .nav-links.open {
    top: var(--sheet-top, 76px);
    bottom: var(--gap);
    max-height: none; height: auto;
    background: #fff;
    border-radius: var(--r-sm);
    box-shadow: 0 20px 50px -18px rgba(25, 25, 44, .28);
  }
  .nav-links.open > a { padding: 14px; }
}

/* the featured card's headline balances rather than orphaning its last word */
.mega-feat b { text-wrap: balance; }

/* ---- the keeper, standing on the closing band --------------------------- */
/* the asset is already a waist-up bust, so it needs no clipping: sitting its
   base on the band's top edge reads as standing behind it */
.cta-wrap { position: relative; }
/* the band paints OVER the mascot's waist, so it reads as standing behind the
   card rather than perched on its edge. That needs the band to own the higher
   layer: an in-flow sibling does not cover a positioned element by default. */
.cta-wrap > .band { position: relative; z-index: 1; }
.cta-mascot {
  position: absolute; right: clamp(20px, 7vw, 96px); bottom: 100%;
  width: clamp(132px, 15vw, 216px); height: auto;
  margin-bottom: -22px; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 14px 22px rgba(10, 30, 24, .18));
}
@media (max-width: 760px) {
  /* at this width it would sit on top of the heading rather than beside it */
  .cta-mascot { width: 112px; right: 12px; }
}
@media (max-width: 480px) { .cta-mascot { display: none; } }

/* ---- sample report: separate each article group ------------------------- */
/* The card reads as one undivided run because only list ITEMS carry a rule:
   .so-list li has border-top and :first-child clears it, so the heading that
   starts a new article group sits flush against the previous group's last row.
   Ruling the heading instead of the item puts the line where the grouping
   actually changes, and the closing line keeps the footer from floating. */
.so-list + .so-art { border-top: 1px solid var(--line); margin-top: 0; }
.so-list + .so-foot { border-top: 1px solid var(--line); }

/* --- We label our own AI images ---------------------------------------------
   Every container here holds an AI-generated render, and this plugin exists to
   argue that such images should say so. It lives in bento.css deliberately:
   these rules were previously in page.css, which the HOMEPAGE does not load, so
   the hero slider went unlabelled while every guide card was labelled correctly.
   bento.css is loaded by every page, so a new page cannot silently miss out.

   NOT applied to .panel-art (dashboard screenshots, which are not AI images) or
   .demo-fig, which pairs an AI render with a real photograph and would be
   actively misleading under a blanket badge.

   phero-art is scoped to the DIV: the guide's <header> carries the same class as
   the image wrapper inside it, so an unscoped rule painted a second stray badge
   on the section background where there is no image at all. */
/* .ld-slides is deliberately NOT in this list. It is already `position: absolute; inset: 0`
   (see above), which is a positioning context in its own right, so ::before anchors to it
   fine. Forcing `relative` here overrode that, collapsed it to zero height, and its
   absolutely-positioned .ld-slide children rendered at 0px: the language slider showed no
   image at all while the files loaded correctly. */
.ha-track, .pc-thumb, div.phero-art { position: relative; }
.ha-track::before,
.pc-thumb::before,
div.phero-art::before,
.ld-slides::before {
	content: 'AI';
	position: absolute;
	top: 11px;
	right: 11px;
	z-index: 5;
	font: 800 10px/1 var(--font);
	letter-spacing: .1em;
	padding: 4px 8px;
	border-radius: 7px;
	color: #0e5f57;
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(15, 125, 115, .30);
	backdrop-filter: blur(4px);
	pointer-events: none;
}