/* ============================================================
   /agencies — page-scoped styling.

   WHY A SEPARATE FILE, and not more rules in css/style.css. Everything
   here exists for exactly one page: the agency landing page Ehan sends
   to studios directly. css/style.css is loaded by all 20 pages, and
   ~14KB of single-page components on every one of them is a cost paid
   by nineteen pages that never render any of it. Same reasoning that
   promoted guides/guides.css out of a scoped <style> block.

   IT DEFINES NO COLOURS OF ITS OWN. Every value below is a token from
   css/style.css's :root — --canvas / --surface / --raised / --raised-2,
   --text / --dim / --faint, --acc and its family, --line / --line-strong,
   --r / --r-lg, and the three font stacks. That is the entire reason
   this page works in the light theme without a single rule under
   [data-theme="light"]: the tokens re-polarise and everything here
   follows. ⚠️ Do not introduce a raw hex or rgba() literal — the moment
   one appears, this page needs its own light-theme block and starts
   drifting from the site around it.

   The one exception is `color-mix()` and `rgba(var(--ink-rgb), a)`,
   which are token-derived by construction and re-polarise for free.

   ONE ACCENT, STILL. --acc electric lime is the only hue. Depth comes
   from the four-rung luminance ladder, not from a second colour.
   ============================================================ */

/* ====================================================================
   1. THE SECTION RAIL — a fixed table of contents down the left margin

   Desktop only, and that is a measurement rather than a preference: it
   is positioned in the gutter OUTSIDE .wrap's max-width, so it needs a
   viewport wide enough to have a gutter. Below 1280px there isn't one
   and it would sit on top of the copy, so it is display:none and the
   page reads exactly as it would have without it.

   It is built by js/agencies.js from the <section data-rail> elements
   themselves, so adding a section to the page needs no edit here and no
   edit there — the rail cannot drift out of step with the page it
   indexes. With no JS there is no rail at all, which is the correct
   fallback for a navigation aid.
   ==================================================================== */
.ag-rail{
  position:fixed;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  display:none;
  flex-direction:column;
  gap:2px;
  padding:14px 10px;
  border-radius:var(--r-lg);
  /* No background and no border at rest. A permanently-outlined panel in
     the margin competes with the content for attention every second of
     the visit; the rail should read as an instrument you notice when you
     look for it. The panel materialises on hover, below. */
  background:transparent;
  border:1px solid transparent;
  transition:background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
@media (min-width:1280px){
  .ag-rail{ display:flex; }
}
.ag-rail:hover,
.ag-rail:focus-within{
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  border-color:var(--line);
  backdrop-filter:blur(14px);
}
.ag-rail-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 6px;
  border-radius:var(--r);
  text-decoration:none;
  color:var(--faint);
  transition:color .2s ease;
}
.ag-rail-item:hover{ color:var(--text); }
.ag-rail-item:focus-visible{
  outline:2px solid var(--acc-edge, var(--acc));
  outline-offset:2px;
}
/* The tick is the whole rail at rest — 14px of hairline per section.
   It grows and takes the accent when its section is the one on screen,
   which is the only state change the rail makes at rest. */
.ag-rail-tick{
  display:block;
  width:14px;
  height:2px;
  flex:0 0 auto;
  border-radius:2px;
  background:var(--line-strong);
  transition:width .32s cubic-bezier(.22,1,.36,1), background-color .32s ease;
}
.ag-rail-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  /* Clipped rather than display:none, so the link keeps its accessible
     name in both states — the same rule the app dock follows. A screen
     reader gets "The demand", not an unlabelled link. */
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width .34s cubic-bezier(.22,1,.36,1), opacity .24s ease;
}
.ag-rail:hover .ag-rail-label,
.ag-rail:focus-within .ag-rail-label{
  max-width:190px;
  opacity:1;
}
.ag-rail-item.is-current{ color:var(--text); }
.ag-rail-item.is-current .ag-rail-tick{
  width:26px;
  background:var(--acc);
}

/* ==== the hero's technical strapline ================================
   Deliberately NOT css/style.css's `.hero-meta`, which looks like the
   right class and is not: that one is a homepage component, right
   aligned and capped at a measured 132px tuned to its own wording, and
   it renders as a narrow centred column under this page's left-aligned
   h1. Same trap as borrowing `.side-t` for the admin dock. */
.ag-hero-meta{
  margin:22px 0 0;
  font-family:var(--font-mono);
  font-size:0.63rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.9;
  color:var(--text-on-wash);
  text-align:left;
  max-width:62ch;
}

/* ====================================================================
   2. THE STANCE BLOCK — "what an agency already has / what it lacks"

   Two panels, and the second is the accented one. Deliberately NOT the
   .vs-stance component from the comparison pages: that one is a
   like-for-like of two products, this is a before/after of one reader's
   own situation, and reusing it would make the page read as a
   competitor comparison to anybody who had seen /vs.
   ==================================================================== */
.ag-stance{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr));
}
.ag-stance-card{
  position:relative;
  min-width:0;
  padding:26px 26px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--raised);
  overflow:clip;
}
.ag-stance-card.is-us{
  border-color:var(--acc-line);
  /* A wash, not a fill. The accent as a flat panel background would be
     a second brand colour by volume; as a corner bloom it stays light. */
  background:
    radial-gradient(120% 90% at 100% 0%, var(--acc-soft), transparent 62%),
    var(--raised);
}
.ag-stance-k{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:4px 10px;
  margin-bottom:16px;
}
.ag-stance-card.is-us .ag-stance-k{
  color:var(--acc-ink);
  background:var(--acc);
  border-color:transparent;
}
.ag-stance-card h3{
  margin:0 0 12px;
  font-size:1.28rem;
  line-height:1.25;
  letter-spacing:-0.02em;
}
.ag-stance-card p{
  margin:0 0 14px;
  color:var(--dim);
  font-size:0.97rem;
  line-height:1.62;
}
.ag-stance-card p:last-child{ margin-bottom:0; }
.ag-stance-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.ag-stance-list li{
  position:relative;
  padding-left:22px;
  color:var(--dim);
  font-size:0.93rem;
  line-height:1.55;
}
.ag-stance-list li::before{
  content:'';
  position:absolute;
  left:2px; top:.6em;
  width:7px; height:7px;
  border-radius:2px;
  background:var(--line-strong);
}
.ag-stance-card.is-us .ag-stance-list li::before{ background:var(--acc); }

/* ====================================================================
   3. THE PIPELINE STEPPER — five stages, one detail panel

   The interactive centrepiece of the "how it runs" section. Click or
   arrow-key a stage; the panel below it swaps.

   ⚠️ EVERY STAGE'S PANEL IS IN THE MARKUP, and the inactive ones are
   `hidden`. Not built by script. A crawler, a reader with JS off and a
   reader with a script error all get all five stages stacked as ordinary
   prose — which is the entire content of this section, so losing it to
   a script failure would lose the section. js/agencies.js hides four of
   them at setup and takes over from there; that is the same fail-open
   pattern .acts-pinned and html.js use.
   ==================================================================== */
.ag-steps{
  display:flex;
  gap:8px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
  /* The five buttons are a real horizontal set; below the breakpoint at
     the bottom of this block they wrap into a grid instead of scrolling.
     A scrolling tab strip that needs a gradient to explain itself is the
     component .subnav was deleted for. */
  flex-wrap:wrap;
}
.ag-step-btn{
  flex:1 1 150px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:13px 15px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  color:var(--dim);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .22s ease, background-color .22s ease,
             color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.ag-step-btn:hover{
  border-color:var(--line-strong);
  background:var(--raised-2);
  color:var(--text);
  transform:translateY(-2px);
}
.ag-step-btn:focus-visible{
  outline:2px solid var(--acc-edge, var(--acc));
  outline-offset:2px;
}
.ag-step-btn[aria-selected="true"]{
  border-color:var(--acc-line);
  background:
    linear-gradient(180deg, var(--acc-soft), transparent 70%),
    var(--raised);
  color:var(--text);
}
.ag-step-n{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--faint);
}
.ag-step-btn[aria-selected="true"] .ag-step-n{ color:var(--acc-text); }
.ag-step-t{
  font-size:0.99rem;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.2;
}
.ag-step-panel{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--raised);
  padding:26px 28px 24px;
}
.ag-step-panel h3{
  margin:0 0 10px;
  font-size:1.3rem;
  letter-spacing:-0.02em;
  line-height:1.25;
}
.ag-step-panel > p{
  margin:0 0 18px;
  max-width:68ch;
  color:var(--dim);
  font-size:1rem;
  line-height:1.65;
}
/* The two real allowance figures per stage. They are the reason this
   section is more than a diagram: an agency reading it wants the
   quantity, not the verb. */
.ag-step-figs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.ag-step-fig{
  flex:1 1 190px;
  min-width:0;
  padding:13px 15px;
  border:1px solid var(--line);
  border-left:2px solid var(--acc-line);
  border-radius:var(--r);
  background:var(--surface);
}
.ag-step-fig b{
  display:block;
  font-family:var(--font-mono);
  font-size:1.32rem;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1.1;
}
.ag-step-fig span{
  display:block;
  margin-top:5px;
  font-size:0.82rem;
  line-height:1.45;
  color:var(--faint);
}
/* Reduced motion still gets the swap — the panel is the content. What it
   loses is the entrance, which is decoration. */
.ag-step-panel.is-swapping{ animation:ag-swap .34s cubic-bezier(.22,1,.36,1); }
@keyframes ag-swap{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .ag-step-panel.is-swapping{ animation:none; }
  .ag-step-btn:hover{ transform:none; }
}
@media (max-width:640px){
  .ag-steps{ display:grid; grid-template-columns:1fr 1fr; }
  .ag-step-btn{ flex:none; }
  .ag-step-panel{ padding:22px 20px 20px; }
}

/* ====================================================================
   4. THE CALCULATOR — "run your own numbers"

   ⚠️ IT IS ARITHMETIC ON THREE FIGURES THE READER TYPES, AND THE PAGE
   SAYS SO IN VISIBLE COPY. It is deliberately NOT a projection, a
   forecast or an ROI estimate: this site carries no earnings claim
   anywhere by standing policy, and the ASA has repeatedly banned
   implied-ease and implied-income claims for this category of product
   (see the marketing teardown §9). Every output below is a direct
   consequence of an input the reader chose — nothing is assumed on
   their behalf, and no default is presented as typical.

   The one figure it supplies itself is the PLAN PRICE, which is a real
   published price, and the coin arithmetic, which is the real product
   rule (1 coin a preview, 3 a full site).
   ==================================================================== */
.ag-calc{
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items:start;
}
@media (max-width:900px){
  .ag-calc{ grid-template-columns:1fr; }
}
.ag-calc-in,
.ag-calc-out{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 24px 22px;
  min-width:0;
}
.ag-calc-in{ background:var(--surface); }
.ag-calc-out{
  background:
    radial-gradient(110% 80% at 100% 0%, var(--acc-soft), transparent 58%),
    var(--raised);
  border-color:var(--acc-line);
}
.ag-calc-h{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 18px;
}
.ag-field{ margin-bottom:22px; }
.ag-field:last-child{ margin-bottom:0; }
.ag-field-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.ag-field label{
  font-size:0.93rem;
  color:var(--text);
  font-weight:500;
  line-height:1.35;
}
.ag-field-val{
  font-family:var(--font-mono);
  font-size:1.05rem;
  color:var(--acc-text);
  letter-spacing:-0.01em;
  flex:0 0 auto;
  /* Tabular so the number does not jog the label left and right as the
     slider moves through 1 / 10 / 100. */
  font-variant-numeric:tabular-nums;
}
.ag-field-note{
  margin:8px 0 0;
  font-size:0.8rem;
  line-height:1.5;
  color:var(--faint);
}

/* ---- the range input, styled in both engines ----------------------
   A native <input type="range"> rather than a hand-built slider, so it
   is keyboard-operable, announced correctly, and works under every
   assistive technology for free. Only the furniture is restyled. */
.ag-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:22px;
  background:transparent;
  cursor:pointer;
  display:block;
}
.ag-range:focus{ outline:none; }
.ag-range:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 45%, transparent);
}
.ag-range:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 45%, transparent);
}
.ag-range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:var(--line-strong);
}
.ag-range::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:var(--line-strong);
}
.ag-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px; height:18px;
  margin-top:-7px;
  border-radius:50%;
  background:var(--acc);
  border:2px solid var(--canvas);
  transition:transform .16s ease, box-shadow .16s ease;
}
.ag-range::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--acc);
  border:2px solid var(--canvas);
  transition:transform .16s ease, box-shadow .16s ease;
}
.ag-range:hover::-webkit-slider-thumb{ transform:scale(1.14); }
.ag-range:hover::-moz-range-thumb{ transform:scale(1.14); }
@media (prefers-reduced-motion: reduce){
  .ag-range::-webkit-slider-thumb{ transition:none; }
  .ag-range::-moz-range-thumb{ transition:none; }
}

/* ---- the output side ---------------------------------------------- */
.ag-verdict{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.ag-verdict-plan{
  font-size:1.55rem;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
}
.ag-verdict-price{
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--acc-text);
  font-variant-numeric:tabular-nums;
}
.ag-verdict-note{
  flex:1 1 100%;
  margin:2px 0 0;
  font-size:0.85rem;
  line-height:1.5;
  color:var(--dim);
}
/* The over-capacity state. --bad is a FUNCTIONAL status hue and is
   exempt from the one-accent rule, same as --ok/--warn elsewhere. */
.ag-verdict.is-over .ag-verdict-price{ color:var(--bad); }

.ag-out-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:clip;
}
@media (max-width:420px){
  .ag-out-grid{ grid-template-columns:1fr; }
}
.ag-out-cell{
  background:var(--raised);
  padding:15px 16px 14px;
  min-width:0;
}
.ag-out-n{
  display:block;
  font-family:var(--font-mono);
  font-size:1.42rem;
  letter-spacing:-0.025em;
  line-height:1.1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ag-out-l{
  display:block;
  margin-top:6px;
  font-size:0.79rem;
  line-height:1.45;
  color:var(--faint);
}
.ag-calc-fine{
  margin:16px 0 0;
  font-size:0.8rem;
  line-height:1.6;
  color:var(--dim);
}

/* ====================================================================
   5. THE TERRITORY DIAGRAM — the one thing only the two agency plans buy

   A 5x4 grid of cells. Three are "held by you" (accent), the rest are
   open. Pure CSS/markup — no canvas, no data, nothing that could claim
   to be a real map of a real place. It is captioned as a diagram.
   ==================================================================== */
.ag-terr{
  display:grid;
  gap:20px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:820px){
  .ag-terr{ grid-template-columns:1fr; }
}
.ag-terr-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.ag-cell{
  aspect-ratio:1;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--raised);
  position:relative;
  transition:background-color .3s ease, border-color .3s ease;
}
.ag-cell.is-held{
  border-color:var(--acc-line);
  background:
    linear-gradient(150deg, var(--acc-soft), transparent 70%),
    var(--raised-2);
}
.ag-cell.is-held::after{
  content:'';
  position:absolute;
  inset:auto 6px 6px auto;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--acc);
}
.ag-terr-key{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.ag-terr-key li{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
.ag-terr-key i{
  width:12px; height:12px;
  border-radius:3px;
  border:1px solid var(--line);
  background:var(--raised);
  flex:0 0 auto;
}
.ag-terr-key i.held{
  border-color:var(--acc-line);
  background:var(--acc-soft);
}

/* ====================================================================
   6. THE DELIVERABLE LIST — what an agency actually hands the client
   ==================================================================== */
.ag-ship{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(270px,100%), 1fr));
  margin:0;
  padding:0;
  list-style:none;
}
.ag-ship li{
  min-width:0;
  padding:19px 20px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--raised);
  transition:border-color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.ag-ship li:hover{
  border-color:var(--acc-line);
  transform:translateY(-3px);
}
@media (prefers-reduced-motion: reduce){
  .ag-ship li:hover{ transform:none; }
}
.ag-ship b{
  display:block;
  margin-bottom:7px;
  font-size:1rem;
  letter-spacing:-0.01em;
  color:var(--text);
}
.ag-ship span{
  display:block;
  font-size:0.9rem;
  line-height:1.58;
  color:var(--dim);
}
.ag-ship-file{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.07em;
  color:var(--acc-text);
}

/* ====================================================================
   7. THE CLOSING CTA PAIR — two routes out of the page
   ==================================================================== */
.ag-close{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:26px;
}
.ag-close .btn{ flex:0 0 auto; }

/* A quiet strip of onward links, so the page ends by pointing at the
   rest of the site rather than at a dead stop. */
.ag-more{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
  margin:0;
  padding:0;
  list-style:none;
}
.ag-more a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-size:0.94rem;
  transition:border-color .2s ease, background-color .2s ease;
}
.ag-more a:hover{
  border-color:var(--acc-line);
  background:var(--raised-2);
}
.ag-more a .arr{
  color:var(--acc-text);
  flex:0 0 auto;
  transition:transform .2s ease;
}
.ag-more a:hover .arr{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .ag-more a:hover .arr{ transform:none; }
}