/* ============================================================
   Broker Genius — main.css
   Converted from Claude Design "Broker Genius Homepage v2"
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --ink: #0B0B0B;
  --paper: #F7F4EC;      /* page background */
  --paper-2: #F4F1EA;    /* nav + hero background */
  --card: #FFFDF8;       /* card surfaces */
  --tint: #EDE9DF;       /* tinted sections */
  --accent: #FBCE6C;     /* brand yellow */
  --accent-deep: #E0A82F;
  --brown: #8A6100;      /* brand brown (links, kickers) */
  --brown-shadow: #7A6320;
  --green: #0F7A57;
  --muted: #4A4F5E;
  --muted-2: #7B8090;
  --muted-3: #5A5F6E;
  --sand: #9A9484;       /* mono micro-labels */
  --sand-2: #B9B4A6;
  --line: #DED8CA;       /* hairline rules on light */
  --line-soft: #EFE9DC;
  --line-dash: #D6D0C2;
  --footer-text: #A7AEC2;
  --footer-muted: #6B7288;

  --font-sans: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brown); }

img { max-width: 100%; }

h1, h2, h3, p { margin: 0; }

.container { max-width: 1280px; margin: 0 auto; }

/* ---------- Keyframes (from the design) ---------- */
@keyframes bg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The stamp rides the same 10s cycle as the rail and the form. It waits until
   the declaration is actually complete (the rail lands at 48.5%), thumps down,
   holds, then lifts with everything else at 88%. Previously it fired once at
   1.5s — before the form had filled — and never again. */
@keyframes bg-stamp {
  0%      { opacity: 0; transform: rotate(-14deg) scale(2.2); }
  48.5%   { opacity: 0; transform: rotate(-14deg) scale(2.2);
            animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); }
  51.8%   { opacity: 1; transform: rotate(-9deg) scale(0.94); }
  52.9%   { opacity: 1; transform: rotate(-9deg) scale(1.04); }
  54%     { opacity: 1; transform: rotate(-9deg) scale(1); }
  88%     { opacity: 1; transform: rotate(-9deg) scale(1); }
  88.01%  { opacity: 0; transform: rotate(-14deg) scale(2.2); }
  100%    { opacity: 0; transform: rotate(-14deg) scale(2.2); }
}
@keyframes bg-typein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bg-blink { 50% { opacity: 0.25; } }
/* Drives the item rail. A registered custom property is the only way to make
   a number animate; every tab reads the same value, so the list builds in step
   and clears together instead of each tab keeping its own phase. */
@property --asyc-scan {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes bg-railscan {
  0%      { --asyc-scan: 0; }
  53%     { --asyc-scan: 22; }  /* 1, 2, 3 … 21 land, ~250ms apart */
  88%     { --asyc-scan: 22; }  /* the full list holds */
  88.01%  { --asyc-scan: 0; }   /* and clears in one go */
  100%    { --asyc-scan: 0; }
}

/* Value bars wiping in, so the declaration reads as being filled rather
   than as having always been full. */
/* Drives the form the same way --asyc-scan drives the rail: one shared number
   every bar reads, so the declaration fills box by box, holds complete, then
   clears in one go rather than each bar clearing on its own phase. Both run
   10s from page load, so the rail and the form stay in step — the form
   completes a little over half a second ahead of the rail, then both hold and
   clear together.

   Named --asyc-written, not --asyc-fill: registering a name here forces its
   syntax everywhere, so reusing the colour token's name made #E8F4EA invalid
   and every tinted box went transparent. */
@property --asyc-written {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes bg-formfill {
  0%      { --asyc-written: 0; }
  46%     { --asyc-written: 30; }  /* values land in reading order */
  88%     { --asyc-written: 30; }  /* the finished declaration holds */
  88.01%  { --asyc-written: 0; }   /* and clears with the rail */
  100%    { --asyc-written: 0; }
}

/* ---------- Shared type ---------- */
.kicker {
  font: 600 11.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown);
}

.micro-label {
  font: 600 9.5px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--sand);
}

.mono-note {
  font: 500 12.5px var(--font-mono);
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

.section-title {
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-stretch: 92%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-size: 16px;
  border: 2px solid var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  font-weight: 700;
  color: var(--ink);
  background: var(--accent);
  padding: 16px 28px;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary:hover { color: var(--ink); background: var(--accent-deep); box-shadow: 1px 1px 0 var(--ink); }

.btn-ghost {
  font-weight: 600;
  padding: 16px 26px;
}
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* Variants on the dark pricing band */
.btn-primary--dark { box-shadow: 4px 4px 0 var(--brown-shadow); padding: 17px 30px; }
.btn-primary--dark:hover { background: #fff; box-shadow: 1px 1px 0 var(--brown-shadow); }

.btn-ghost--dark {
  font-weight: 600;
  color: #fff;
  padding: 17px 28px;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost--dark:hover { color: #fff; border-color: #fff; }

/* ============================================================
   Nav
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  padding: 0 28px;
}

.site-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 70px;
  min-width: 0;
}

.site-nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-nav__logo img { height: 30px; width: auto; display: block; }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 18px;
  font: 500 12.5px var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav__links > a { color: var(--muted-3); white-space: nowrap; }
.site-nav__links > a:hover,
.site-nav__links > a.is-active { color: var(--ink); }

.nav-drop { position: relative; height: 70px; display: flex; align-items: center; }

.nav-drop__label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--muted-3);
  white-space: nowrap;
}
.nav-drop__label .caret { font-size: 9px; }
.nav-drop:hover .nav-drop__label,
.nav-drop.is-active .nav-drop__label { color: var(--ink); }

.nav-drop__menu {
  position: absolute;
  top: 70px;
  left: -16px;
  display: none;
  min-width: 290px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(16, 22, 42, 0.18);
  padding: 8px 0;
}
.nav-drop--narrow .nav-drop__menu { min-width: 230px; }
.nav-drop:hover .nav-drop__menu { display: block; }

.nav-drop__menu a {
  display: block;
  padding: 11px 18px;
  font: 500 13px var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}
.nav-drop__menu a:hover { background: var(--accent); color: var(--ink); }

.site-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.site-nav__login { font: 500 12.5px var(--font-mono); text-transform: uppercase; color: var(--muted-3); white-space: nowrap; }
.site-nav__login:hover { color: var(--ink); }
.site-nav__cta { font-size: 14px; padding: 11px 20px; box-shadow: 3px 3px 0 var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  border-bottom: 2px solid var(--ink);
  padding: 0 28px;
  background: var(--paper-2);
  /* The stamp's entry animation holds scale(2.2) through its 1.5s delay,
     and a transform still counts toward scrollable overflow — which pushed
     the page sideways on phones. clip contains it without creating a
     scroll container of its own. */
  overflow-x: clip;
}

.hero__grid {
  /* Full-bleed: the hero runs edge to edge on both sides, inside the section's
     own 28px gutter, rather than being capped at a centred 1280. The width
     that used to sit in the side margins goes to the copy and the sheet. This
     deliberately breaks alignment with the centred sections below — the hero
     reads as its own band, which is the point. */
  max-width: none;
  margin: 0;
  display: grid;
  /* The declaration takes the wider half, as in the design. 0.88fr is the
     limit: with the gutters below, anything narrower drops "Your brokers
     should" onto a second line at 1280px, and the headline outranks the
     card. */
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
}

/* The gutters around the divider are kept tight: every pixel taken out of
   them goes into the declaration's width, and the sheet is a panoramic
   document that reads better wide. */
.hero__copy { padding: 72px 36px 72px 0; border-right: 2px solid var(--ink); container-type: inline-size; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 11.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  border: 1.5px solid var(--green);
  padding: 7px 12px;
}
.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: bg-blink 1.8s ease-in-out infinite;
}

.hero__title {
  /* Sized so the headline holds three lines without orphaning a word. */
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-stretch: 96%;
  margin-top: 28px;
  text-wrap: balance;
}
.hero__title-mark {
  display: inline-block;
  line-height: 1;
  padding: 4px 12px 8px;
  background: var(--accent);
}

.hero__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 26px;
  max-width: 44ch;
  text-wrap: pretty;
}

/* The closing line under the lede: the hero's thesis, so it carries
   more weight than the paragraph above it. */
.hero__lede--close { color: var(--ink); font-weight: 600; margin-top: 16px; }

/* Two-column state only: the copy column is now as wide as the page allows,
   so the type is sized off that column rather than fixed — the headline grows
   to meet the divider instead of leaving a third of the column empty, and the
   paragraphs run to the same edge. Below 1080 the copy goes full width and
   these would run away, so the fixed sizes there stand. */
@media (min-width: 1081px) {
  /* The floor is deliberately low: at 1120px the copy column is only ~460px
     and a 56px floor pushed "Your brokers should" onto a fourth line. The
     fluid term should govern across this whole range. */
  .hero__title { font-size: clamp(44px, 11.4cqw, 96px); }
  .hero__lede { max-width: none; }
}

.hero__ctas { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.hero__fineprint { margin-top: 20px; }

/* --- ASYCUDA World declaration card ---
   A mock of the declaration screen brokers file into. The box numbering
   follows the real SAD layout, tinted boxes are the ones the extractor
   filled, and the bars stand in for values rather than spelling them out —
   the point is the shape of the form, not its contents.

   Three parts, as on the real screen: the item rail down the left, the ruled
   sheet, and the document tabs along the bottom. Type and spacing are sized
   in cqw off the card's own width, so the sheet holds its proportions at any
   column width instead of growing tall as labels wrap. */
.hero__doc-wrap { padding: 52px 0 52px 24px; position: relative; }

.asyc {
  --asyc-fill: #E8F4EA;      /* box the extractor filled */
  --asyc-frame: #111;        /* the form's own ruling */
  --asyc-bar: #C9C9C9;       /* value placeholder */
  --asyc-bar-key: #2C5F8A;   /* value carried from the invoice */
  --asyc-bar-ok: #6FAF85;    /* value checked against the tariff */
  --asyc-text: #16211A;
  --asyc-rule: max(1.5px, 0.19cqw);

  border-radius: 14px;
  background: #FCFCFB;
  box-shadow: 0 10px 26px rgba(16, 22, 42, 0.10), 0 2px 6px rgba(16, 22, 42, 0.05);
  overflow: hidden;
  container-type: inline-size;
}

/* --- window chrome --- */
.asyc__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1.5cqw 1.7cqw;
  border-bottom: 1px solid #E4E2DA;
}
.asyc__brand { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; }
.asyc__mark {
  width: max(20px, 2.7cqw);
  height: max(20px, 2.7cqw);
  border: max(1.5px, 0.19cqw) solid #5C7BA8;
  border-radius: 50%;
  background: #DCE6F5;
  flex: none;
}
.asyc__brandname {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: max(13px, 2.3cqw);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.asyc__chrome-right { display: flex; align-items: center; gap: 2cqw; flex: none; }
.asyc__rule { width: 1px; height: max(14px, 1.9cqw); background: #DDDAD1; }
.asyc__dots { display: flex; gap: 0.7cqw; margin-left: 0.6cqw; }
.asyc__dot { width: max(8px, 1.05cqw); height: max(8px, 1.05cqw); border-radius: 50%; }
.asyc__dot--red { background: #EE5A47; }
.asyc__dot--amber { background: #F2B531; }
.asyc__dot--green { background: #35C453; }

/* --- item rail + sheet --- */
.asyc__body { display: flex; align-items: stretch; gap: 0.5cqw; padding: 1.4cqw 1.7cqw 0; }

/* One tab per item on the declaration; the open one is flagged. The rail
   stretches to the sheet's height and the tabs divide it, so the two line up
   however tall the form ends up. */
.asyc__rail {
  flex: 0 0 3.6%;
  display: flex;
  flex-direction: column;
  gap: max(1px, 0.08cqw);
  animation: bg-railscan 10s linear infinite;
}
/* Legacy beveled tabs: hard 1px edge, a light top-left / dark bottom-right
   inset, and only the left corners rounded, the way the client draws them. */
.asyc__item {
  /* How far the scan has moved past this tab. 0 while it is the newest one on
     the list, 1 once the next tab has taken over — the ×6 makes that handover
     quick, so only one tab is red at a time. */
  --past: clamp(0, calc((var(--asyc-scan, 99) - var(--i, 0) - 1) * 6), 1);

  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 1px solid;
  border-radius: max(2px, 0.32cqw) 0 0 max(2px, 0.32cqw);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7),
              inset -1px -1px 0 rgba(0, 0, 0, 0.26);
  font-size: max(6px, 0.8cqw);
  font-weight: 700;
  line-height: 1;
  /* Red while this is the number just added, grey once the next one lands, so
     the marker walks down the list as it builds. */
  background: color-mix(in srgb, #CFCFCF calc(var(--past) * 100%), #EA1B2D);
  border-color: color-mix(in srgb, #4A4A4A calc(var(--past) * 100%), #96101C);
  color: color-mix(in srgb, #111 calc(var(--past) * 100%), #fff);
  /* Snaps on in a fifth of a step rather than fading across a whole one: at
     the slower fade the tab was still translucent while it held the red, so
     the marker never read solid before the next number took it. The fallback
     keeps every tab visible if the browser will not register the property. */
  opacity: clamp(0, calc((var(--asyc-scan, 99) - var(--i, 0)) * 5), 1);
}
/* The page actually open stays flagged once the list is complete — and is the
   one tab still red when the scan cannot run at all. */
.asyc__item--on {
  background: #EA1B2D;
  border-color: #96101C;
  color: #fff;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45),
              inset -1px -1px 0 rgba(0, 0, 0, 0.3);
}

.asyc__sheet {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  border: var(--asyc-rule) solid var(--asyc-frame);
  background: #fff;
}
/* The two blank columns down the left edge of the printed form. */
.asyc__margin { flex: 0 0 1.5%; border-right: var(--asyc-rule) solid var(--asyc-frame); }
.asyc__grid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  animation: bg-formfill 10s linear infinite;
}

/* A band is a tall party box beside its own stack of sub-rows. */
.asyc__band { display: flex; border-bottom: var(--asyc-rule) solid var(--asyc-frame); }
.asyc__party {
  flex: 0 0 50%;
  min-width: 0;
  position: relative;
  padding: 1.35cqw 1.2cqw 1.5cqw;
  border-right: var(--asyc-rule) solid var(--asyc-frame);
}
.asyc__stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.asyc__srow { display: flex; }
.asyc__srow--grow { flex: 1 1 auto; }
.asyc__srow:not(:last-child) { border-bottom: var(--asyc-rule) solid var(--asyc-frame); }

.asyc__row { display: flex; border-bottom: var(--asyc-rule) solid var(--asyc-frame); }
.asyc__row--last { border-bottom: 0; }

.asyc__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.25cqw 1.1cqw 1.4cqw;
}
.asyc__cell:not(:last-child) { border-right: var(--asyc-rule) solid var(--asyc-frame); }
.asyc__fill { background: var(--asyc-fill); }

/* --- type --- */
.asyc__label,
.asyc__head {
  /* break-word, not anywhere: only split a word that genuinely cannot fit,
     so "Registration" wraps whole instead of shearing mid-syllable. */
  overflow-wrap: break-word;
  font-size: max(8px, 1.15cqw);
  line-height: 1.3;
  font-weight: 500;
  color: var(--asyc-text);
}
.asyc__label--gap { margin-top: 1.1cqw; }
.asyc__head { display: flex; justify-content: space-between; gap: 1cqw; }
.asyc__head > span { min-width: 0; }
.asyc__tin { text-align: right; white-space: nowrap; flex: none; }

.asyc__value { font-size: max(8.5px, 1.25cqw); font-weight: 700; margin-top: 0.5cqw; }
.asyc__cell--regime { display: flex; align-items: center; justify-content: center; text-align: center; }
.asyc__cell--select { flex: 0 0 20%; display: flex; align-items: center; }

/* --- value bars --- */
.asyc__bar {
  height: max(4px, 0.62cqw);
  background: var(--asyc-bar);
  margin-top: 0.85cqw;
  transform-origin: left center;
  /* Full once the fill passes this bar's place in the form. clamp does the
     work the keyframes used to; the fallback leaves every bar written in if
     the browser will not register the property above. */
  transform: scaleX(clamp(0, calc(var(--asyc-written, 99) - var(--i, 0)), 1));
}
.asyc__bar--key { background: var(--asyc-bar-key); }
.asyc__bar--ok { background: var(--asyc-bar-ok); }
.asyc__bar--indent { margin-left: 12%; }

.asyc__select {
  width: 100%;
  height: max(14px, 1.9cqw);
  background: #EDE0FA;
  border: max(1px, 0.13cqw) solid #B99CE0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.5cqw;
}
.asyc__caret { font-size: max(7px, 0.95cqw); color: #6E4C86; line-height: 1; }

/* --- footer + document tabs --- */
.asyc__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1.2cqw 1.9cqw 0.9cqw;
  font: 500 max(8px, 1.12cqw) var(--font-mono);
  letter-spacing: 0.07em;
  color: var(--muted-2);
}
.asyc__ok { color: var(--green); }

.asyc__tabs { display: flex; gap: 0.7cqw; padding: 0 1.9cqw 1.6cqw; }
.asyc__tab {
  border: var(--asyc-rule) solid var(--asyc-frame);
  background: #EFEEE8;
  padding: 0.75cqw 1.1cqw;
  font-size: max(8px, 1.15cqw);
  font-weight: 600;
  color: var(--asyc-text);
  white-space: nowrap;
}
/* The sheet on screen is the S.A.D.; the rest are the documents filed with it. */
.asyc__tab--on { background: #fff; font-weight: 700; }

/* Under ~430px the floors above stop the type shrinking, so the ruling has to
   give instead: thinner rules and tighter boxes keep the sheet in proportion. */
@container (max-width: 430px) {
  .asyc { --asyc-rule: 1px; }
  .asyc__cell, .asyc__party { padding: 4px 3px 5px; }
  /* A step under the 8px floor: at this width "Pages" was breaking mid-word in
     the number boxes, which reads worse than slightly smaller type. */
  .asyc__label, .asyc__head { font-size: 7.5px; }
  /* The rail's numbers stop being legible before the boxes do; keep the strip
     as a rhythm down the edge and drop the digits. */
  .asyc__item { font-size: 0; }
  .asyc__tabs { flex-wrap: wrap; }
}

.hero__stamp {
  position: absolute;
  right: -6px;
  bottom: 6px;
  border: 3px solid var(--ink);
  color: var(--ink);
  padding: 10px 18px;
  background: rgba(251, 206, 108, 0.9); /* #FBCE6CE6 */
  transform: rotate(-9deg);
  animation: bg-stamp 10s linear infinite both;
  text-align: center;
}
.hero__stamp-word {
  font: 800 26px var(--font-sans);
  font-stretch: 118%;
  letter-spacing: 0.06em;
  line-height: 1;
}
.hero__stamp-sub { font: 600 10px var(--font-mono); letter-spacing: 0.18em; margin-top: 4px; }

/* Typed-in reveals (delays set inline per element, from the design) */
.typein { animation: bg-typein 0.35s steps(18) both; }

/* ============================================================
   Logo marquee band
   ============================================================ */
.logo-band {
  background: var(--ink);
  color: #fff;
  border-bottom: 2px solid var(--ink);
  padding: 26px 0;
  overflow: hidden;
}

.logo-band__head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.logo-band__head-label {
  font: 600 11.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-band__head-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.35); }

.marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: bg-marquee 46s linear infinite; }

.marquee__item {
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.marquee__tile {
  width: 100%;
  height: 64px;
  background: var(--card);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.marquee__tile img {
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

/* ============================================================
   Stats
   ============================================================ */
.stats { border-bottom: 2px solid var(--ink); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 28px; }
.stats__grid { max-width: 1280px; margin: 0 auto; }

.stat { padding: 44px 36px 44px 0; }
.stat:not(:last-child) { border-right: 2px solid var(--ink); }
.stat__box { font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; color: var(--sand); }
.stat__value {
  font-size: 66px;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-top: 14px;
}
.stat__value--accent { color: var(--accent); }
.stat__label { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 12px; max-width: 30ch; }

/* ============================================================
   Flow (One invoice in. One entry out.)
   ============================================================ */
.flow { border-bottom: 2px solid var(--ink); padding: 80px 28px; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.section-head--wrap { flex-wrap: wrap; }
.section-head__blurb { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 40ch; }

.flow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 52px;
  border: 2px solid var(--ink);
  background: var(--card);
}

.step { padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.step:not(:last-child) { border-right: 1px solid var(--line); }

.step__head { display: flex; align-items: center; gap: 12px; }
.step__num {
  width: 34px;
  height: 34px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px var(--font-mono);
}
.step__num--accent { background: var(--accent-deep); }
.step__num--green { background: var(--green); }
.step__dash { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line-dash) 0 6px, transparent 6px 12px); }
.step__title { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; margin-top: 6px; }
.step__body { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.step__meta { margin-top: auto; padding-top: 16px; font: 500 11.5px var(--font-mono); color: var(--brown); letter-spacing: 0.04em; }

/* ============================================================
   Roles (Who it's for)
   ============================================================ */
.roles { border-bottom: 2px solid var(--ink); padding: 80px 28px; background: var(--tint); }
.roles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }

.role-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 32px;
  box-shadow: 6px 6px 0 var(--ink);
}
.role-card__tag { font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; color: var(--sand); }
.role-card__title { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; margin-top: 16px; }
.role-card__body { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 14px 0 24px; }
.role-card__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.role-card__list-item { padding: 12px 0; font-size: 14.5px; }
.role-card__list-item:not(:last-child) { border-bottom: 1px solid var(--line); }
/* Pinned to the foot of the card so the links line up across the row. */
.role-card__link { display: inline-block; margin-top: auto; padding-top: 26px; font-size: 15px; font-weight: 700; color: var(--brown); }
.role-card__link:hover { color: var(--brown); }

/* ============================================================
   Coverage
   ============================================================ */
.coverage { border-bottom: 2px solid var(--ink); padding: 80px 28px; background: var(--tint); }
.coverage .section-title { margin-top: 18px; max-width: 18ch; }
.coverage__blurb { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-top: 18px; max-width: 50ch; }
.coverage__ctas { display: flex; gap: 14px; }
.coverage__ctas .btn-primary { font-size: 15px; padding: 15px 24px; }
.coverage__ctas .btn-ghost { font-size: 15px; padding: 15px 22px; }
.coverage__map {
  margin-top: 40px;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(16, 22, 42, 0.12);
  background: var(--tint);
}
.coverage__map iframe { display: block; width: 100%; height: 540px; border: 0; }

/* ============================================================
   Comparison table
   ============================================================ */
.compare { border-bottom: 2px solid var(--ink); padding: 80px 28px; }
.compare__legend { font: 500 12px/1.7 var(--font-mono); color: var(--muted-2); text-align: right; white-space: nowrap; }
.compare__table { margin-top: 44px; border: 2px solid var(--ink); background: var(--card); }

.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 130px 130px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
  font-size: 15px;
}
.compare__row--head {
  padding: 16px 24px;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.1em;
}
.compare__row--head .col-bg { color: var(--accent); }
.compare__row--head .col-other { color: var(--footer-text); }
.compare__row--head > div:not(:first-child) { text-align: center; }

.compare__mark-bg { text-align: center; font: 700 17px var(--font-mono); color: var(--green); background: #E7F3ED; }
.compare__mark { text-align: center; font: 500 16px var(--font-mono); color: var(--sand); }

.compare__footnote { font: 500 12px var(--font-mono); color: var(--sand); margin-top: 14px; }

/* ============================================================
   Quotes (From the field)
   ============================================================ */
.quotes { border-bottom: 2px solid var(--ink); padding: 80px 28px; background: var(--tint); }
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }

.quote-card {
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.quote-card__metric { font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; color: var(--brown); }
.quote-card__text { font-size: 21px; line-height: 1.4; letter-spacing: -0.02em; font-weight: 600; margin-top: 16px; }
.quote-card__attribution { margin-top: auto; padding-top: 26px; font-size: 14px; color: var(--muted); }
.quote-card__name { font-weight: 700; color: var(--ink); }

/* ============================================================
   Demo booking
   ============================================================ */
.demo { border-bottom: 2px solid var(--ink); padding: 80px 28px; }
.demo .section-title { margin-top: 18px; max-width: 17ch; }
.demo__blurb { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-top: 18px; max-width: 46ch; text-wrap: pretty; }
.demo__aside { font: 500 12.5px/1.9 var(--font-mono); color: var(--sand); letter-spacing: 0.04em; text-align: right; }

.booking {
  margin-top: 44px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 8px 8px 0 rgba(16, 22, 42, 0.10);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.85fr);
}

.booking__col { display: flex; flex-direction: column; }
.booking__col:not(:last-child) { border-right: 2px solid var(--ink); }

.booking__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 2px solid var(--ink);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.12em;
}
.booking__bar--dark { background: var(--ink); color: #fff; }
.booking__bar--dark .hint { color: var(--accent); }

.cal__daynames { display: grid; grid-template-columns: repeat(7, 1fr); padding: 14px 20px 6px; }
.cal__dayname { font: 600 9.5px var(--font-mono); letter-spacing: 0.1em; color: var(--sand); text-align: center; }

.cal__cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px 20px 20px; }

.cal__cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 600 14px var(--font-sans);
  cursor: pointer;
  padding: 0;
}
.cal__cell .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.cal__cell--blank { border-color: transparent; background: transparent; cursor: default; }
.cal__cell--blank .dot { background: transparent; }
.cal__cell--full { border-color: var(--line-soft); color: var(--sand-2); cursor: not-allowed; }
.cal__cell--full .dot { background: var(--line-dash); }
.cal__cell--selected { border-color: var(--ink); background: var(--accent); }
.cal__cell--selected .dot { background: var(--ink); }

.cal__legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px 18px;
  font: 500 11px var(--font-mono);
  color: var(--sand);
  letter-spacing: 0.06em;
}
.cal__legend span { display: flex; align-items: center; gap: 6px; }
.cal__legend .dot { width: 6px; height: 6px; border-radius: 50%; }
.cal__legend .dot--open { background: var(--green); }
.cal__legend .dot--full { background: var(--line-dash); }

.slots { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; }

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 600 14px var(--font-mono);
  cursor: pointer;
}
.slot__tag { font: 500 10.5px var(--font-mono); letter-spacing: 0.1em; opacity: 0.65; }
.slot--selected { background: var(--ink); color: var(--card); box-shadow: 3px 3px 0 var(--accent); }

.booking__form { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.booking__when { font-size: 16px; font-weight: 700; margin-top: 6px; line-height: 1.35; }
.booking__form input {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 2px solid var(--ink);
  background: var(--card);
  font: 400 14px var(--font-sans);
  color: var(--ink);
}
.booking__confirm {
  margin-top: auto;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--accent);
  padding: 15px 20px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  font-family: var(--font-sans);
}
.booking__confirm:hover { background: var(--accent-deep); box-shadow: 1px 1px 0 var(--ink); }
.booking__fineprint { font: 500 11px var(--font-mono); color: var(--sand); letter-spacing: 0.04em; text-align: center; }

/* ============================================================
   Pricing band (dark)
   ============================================================ */
.pricing-band {
  border-bottom: 2px solid var(--ink);
  padding: 88px 28px;
  background: var(--ink);
  color: #fff;
}
.pricing-band__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}
.pricing-band__title {
  font-size: 60px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-stretch: 92%;
  max-width: 15ch;
}
.pricing-band__blurb { font-size: 18px; line-height: 1.6; color: var(--sand-2); margin-top: 22px; max-width: 48ch; }
.pricing-band__ctas { display: flex; gap: 14px; margin-top: 34px; }

.plans {
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(16, 22, 42, 0.35);
}
.plans__bar { padding: 14px 20px; border-bottom: 2px solid var(--ink); font: 600 11px var(--font-mono); letter-spacing: 0.12em; }
.plan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.plan__name { font-size: 16px; font-weight: 700; }
.plan__note { font-size: 13px; color: var(--muted-2); margin-top: 3px; }
.plan__pricing { text-align: right; white-space: nowrap; }
.plan__price { font: 700 17px var(--font-mono); }
.plan__rate { font: 500 11.5px var(--font-mono); color: var(--brown); margin-top: 3px; }
.plans__footnote { padding: 15px 20px; font-size: 13.5px; color: var(--muted); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink); color: var(--footer-text); padding: 64px 28px 28px; }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.site-footer__logo { height: 30px; width: auto; display: block; }
.site-footer__blurb { font-size: 14.5px; line-height: 1.6; margin-top: 18px; max-width: 34ch; }
.site-footer__cta {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--accent);
  padding: 12px 20px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--brown-shadow);
  white-space: nowrap;
}
.site-footer__cta:hover { color: var(--ink); background: #fff; box-shadow: 1px 1px 0 var(--brown-shadow); }

.site-footer__heading { font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; color: var(--footer-muted); }
.site-footer__links { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; font-size: 14.5px; }
.site-footer__links a { color: var(--footer-text); }
.site-footer__links a:hover { color: #fff; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font: 500 12px var(--font-mono);
  color: var(--footer-muted);
  letter-spacing: 0.06em;
}
.site-footer__legal { display: flex; gap: 22px; }
.site-footer__legal a { color: var(--footer-muted); }
.site-footer__legal a:hover { color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { border-right: 0; padding-right: 0; }
  .hero__doc-wrap { padding-left: 0; }
  .hero__title { font-size: 60px; }
  /* Full width again below the copy, so the form keeps its printed proportions. */
  .asyc { max-width: 620px; }
  .flow__steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .quotes__grid { grid-template-columns: 1fr; }
  .roles__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { padding-right: 0; }
  .stat:not(:last-child) { border-right: 0; border-bottom: 2px solid var(--ink); }
  .booking { grid-template-columns: 1fr; }
  .booking__col:not(:last-child) { border-right: 0; border-bottom: 2px solid var(--ink); }
  .pricing-band__grid { grid-template-columns: 1fr; gap: 44px; }
  .section-head { flex-wrap: wrap; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .site-nav__links { display: none; }
  .roles__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 36px; }
  /* The box type scales off the card's own width (see the container query),
     so only the chrome and the stamp need adjusting here. */
  .asyc__sheet { margin-inline: 9px; }
  .asyc__brandname { font-size: 15px; }
  .asyc__crest { width: 22px; height: 22px; }
  .asyc__chrome-right { gap: 14px; }
  .asyc__footer { font-size: 9px; letter-spacing: 0.05em; padding-inline: 12px; }
  /* Keep the stamp clear of the "SCHEMA VALID" line it would otherwise sit on. */
  .hero__stamp { bottom: -18px; right: 0; padding: 8px 14px; }
  .hero__stamp-word { font-size: 21px; }
  .hero__stamp-sub { font-size: 9px; }
  .section-title { font-size: 38px; }
  .pricing-band__title { font-size: 42px; }
  .compare__row { grid-template-columns: minmax(0, 1fr) 90px 70px 70px; padding: 12px 14px; font-size: 13px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   WordPress extras (theme-only)
   ============================================================ */
.post__content { font-size: 17px; line-height: 1.75; color: #33383F; }
.post__content > p:first-child { font-size: 20px; line-height: 1.65; color: var(--ink); }
.post__content p { margin-top: 20px; }
.post__content h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 700; margin-top: 40px; color: var(--ink); }
.post__content h3 { font-size: 22px; letter-spacing: -0.025em; font-weight: 700; margin-top: 32px; color: var(--ink); }
.post__content ul, .post__content ol { margin: 20px 0 0; padding-left: 26px; }
.post__content li { margin-top: 8px; }
.post__content a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.post__content img { border: 2px solid var(--ink); height: auto; }
.post__content blockquote { border-left: 4px solid var(--accent); margin: 24px 0 0; padding: 4px 0 4px 20px; font-weight: 600; color: var(--ink); }
.post__content figure { margin: 24px 0 0; }
.post__content figcaption { font: 500 12px var(--font-mono); color: var(--sand); margin-top: 8px; }

.alignwide, .alignfull { max-width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.wp-caption { max-width: 100%; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Footer social ---------- */
.site-footer__social { display: flex; gap: 10px; margin-top: 26px; }

.site-footer__social-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text);
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.site-footer__social-link:hover {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
.site-footer__social-link svg { display: block; }

/* ============================================================
   Mobile navigation
   ============================================================
   Below 720px the desktop link bar hides. Without this the site
   had no navigation at all on a phone — only the logo and the
   two action buttons.
   ============================================================ */
.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  margin-left: auto;
  padding: 0;
  background: var(--card);
  border: 2px solid var(--ink);
  cursor: pointer;
}
.site-nav__toggle:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.site-nav__toggle-bars { display: block; width: 18px; }
.site-nav__toggle-bars span {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.site-nav__toggle-bars span + span { margin-top: 4px; }
/* Bars become a cross while the panel is open. */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav__panel {
  display: none;
  border-top: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 8px 28px 22px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.site-nav__group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.site-nav__group:last-of-type { border-bottom: 0; }
.site-nav__group-label {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 8px;
}
.site-nav__panel a {
  display: block;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.site-nav__panel a.is-active { color: var(--brown); }
.site-nav__panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.site-nav__panel-login {
  font: 500 13px var(--font-mono);
  text-transform: uppercase;
  color: var(--muted-3);
}
.site-nav__panel-actions .btn-primary { padding: 13px 22px; font-size: 15px; }

@media (max-width: 720px) {
  .site-nav { padding: 0; }
  .site-nav__inner { padding: 0 20px; gap: 14px; }
  .site-nav__toggle { display: flex; }
  /* The header keeps the trial CTA; Log in moves into the panel. */
  .site-nav__actions { margin-left: 0; }
  .site-nav__login { display: none; }
  .site-nav__cta { font-size: 13px; padding: 9px 14px; box-shadow: 2px 2px 0 var(--ink); }
  .site-nav__panel.is-open { display: block; }
}

/* The panel is a mobile affordance; never show it on wider screens. */
@media (min-width: 721px) {
  .site-nav__panel { display: none !important; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
/* The hero's entrance motion is decoration — the stamp, the blinking status
   dot and the bars filling in. Hold the end state for anyone who asks for
   less movement. */
@media (prefers-reduced-motion: reduce) {
  .asyc__bar,
  .asyc__rail,
  .asyc__grid,
  .hero__stamp,
  .hero__badge-dot,
  .typein { animation: none !important; }
  .asyc__bar { transform: none; }
  /* Without the scan running, the opacity above would resolve to 0 and the
     rail would vanish entirely. Show the finished list instead. */
  .asyc__item { opacity: 1; }
}