/* AwardsCapture brand stylesheet: THE single source of styling truth.
 * Tokens are section 4 of assets/brand/design-system.md, verbatim; the hex
 * values are contrast-tested and never substituted. Components use the
 * semantic aliases, never raw scale values. This file replaced 13 duplicated
 * per-page :root blocks (stage B1); pages hold no color of their own.
 */

/* ---- fonts: self-hosted, no external calls at runtime (SIL OFL) ---- */
/* ONE FACE. Inter carries the body, the headings and every figure.
   Inter Tight and IBM Plex Mono are no longer declared: nothing asks for them
   now that headings use the body face and figures use tabular numerals, and a
   declared face nobody uses is four files a browser may still fetch. The .woff2
   files stay on disk rather than being deleted, so restoring one is a line
   here and not a hunt.
   THE MARKETING LEDE'S SERIF is a system stack. A serif is wanted for one
   sentence on the public pages, and shipping a whole webfont file for one
   sentence costs every visitor a download for something Georgia already does
   well on the platforms that read it. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---- the palette. design-system.md section 4. ----
 *
 * EIGHT VALUES ARE REAL; everything else is derived from Ink and Page with
 * color-mix, so a grey cannot drift out of step with the two colours it sits
 * between. Change Ink or Page and the whole neutral range follows.
 *
 * RED IS RARE, and that is a rule rather than a preference. It appears on the
 * brand mark, the active navigation indicator, the foundation source tick and
 * the primary marketing invitation. Nowhere else. A red button on an ordinary
 * control means the rule has been broken: the ordinary control is navy.
 * Urgency has its own red (--ac-urgent) which is a different value and a
 * different job, and it is the only red allowed to appear in a list.
 */
:root {
  /* the eight */
  --ac-primary: #192A56;   /* buttons, links, federal tick, progress, active chips */
  --ac-deep:    #0E1A36;   /* sidebar, public marketing panels */
  --ac-accent:  #A80505;   /* brand mark, active nav, foundation tick, marketing CTA */
  --ac-urgent:  #E5484D;   /* overdue, closing within days */
  --ac-warning: #B07D0A;   /* approaching deadlines */
  --ac-good:    #0A7D42;   /* submitted, won, completed */
  --ac-page:    #FAFAFA;   /* page background */
  --ac-ink:     #171717;   /* body text */

  /* NEUTRALS, DERIVED. n-0 is pure white for surfaces that must sit above the
     page; everything between is Ink mixed into Page, so the ramp is one
     decision rather than eleven. */
  --ac-n-0:   #FFFFFF;
  --ac-n-25:  var(--ac-page);
  --ac-n-50:  color-mix(in srgb, var(--ac-ink) 4%,  var(--ac-page));
  --ac-n-100: color-mix(in srgb, var(--ac-ink) 8%,  var(--ac-page));
  --ac-n-200: color-mix(in srgb, var(--ac-ink) 16%, var(--ac-page));
  --ac-n-300: color-mix(in srgb, var(--ac-ink) 34%, var(--ac-page));
  --ac-n-400: color-mix(in srgb, var(--ac-ink) 52%, var(--ac-page));
  --ac-n-500: color-mix(in srgb, var(--ac-ink) 66%, var(--ac-page));
  --ac-n-600: color-mix(in srgb, var(--ac-ink) 80%, var(--ac-page));
  --ac-n-700: color-mix(in srgb, var(--ac-ink) 90%, var(--ac-page));
  --ac-n-800: var(--ac-ink);

  /* NAVY, derived from Primary and Deep. The old scale's names are kept
     because the whole product refers to them; only the values move. */
  --ac-navy: var(--ac-primary);
  --ac-navy-50:  color-mix(in srgb, var(--ac-primary) 5%,  var(--ac-page));
  --ac-navy-100: color-mix(in srgb, var(--ac-primary) 10%, var(--ac-page));
  --ac-navy-200: color-mix(in srgb, var(--ac-primary) 20%, var(--ac-page));
  --ac-navy-300: color-mix(in srgb, var(--ac-primary) 38%, var(--ac-page));
  --ac-navy-400: color-mix(in srgb, var(--ac-primary) 58%, var(--ac-page));
  --ac-navy-500: color-mix(in srgb, var(--ac-primary) 78%, var(--ac-page));
  --ac-navy-600: var(--ac-primary);
  --ac-navy-700: color-mix(in srgb, var(--ac-deep) 55%, var(--ac-primary));
  --ac-navy-800: color-mix(in srgb, var(--ac-deep) 80%, var(--ac-primary));
  --ac-navy-900: var(--ac-deep);

  /* RED. The scale exists because components refer to it; the values are the
     brand accent and its tints, and the RULE about where it may appear is
     above, not in these names. */
  --ac-red: var(--ac-accent);
  --ac-red-50:  color-mix(in srgb, var(--ac-accent) 5%,  var(--ac-page));
  --ac-red-100: color-mix(in srgb, var(--ac-accent) 10%, var(--ac-page));
  --ac-red-200: color-mix(in srgb, var(--ac-accent) 20%, var(--ac-page));
  --ac-red-300: color-mix(in srgb, var(--ac-accent) 38%, var(--ac-page));
  --ac-red-400: color-mix(in srgb, var(--ac-accent) 58%, var(--ac-page));
  --ac-red-500: color-mix(in srgb, var(--ac-accent) 80%, var(--ac-page));
  --ac-red-600: var(--ac-accent);
  --ac-red-700: color-mix(in srgb, #000 18%, var(--ac-accent));
  --ac-red-800: color-mix(in srgb, #000 34%, var(--ac-accent));
  --ac-red-900: color-mix(in srgb, #000 52%, var(--ac-accent));

  /* supporting */
  --ac-gold: var(--ac-warning);
  /* Warning on the deep navy measures 4.74:1, which passes but reads dim at
     the 12px caps the marketing eyebrow uses. This is the same hue lifted
     toward white until it is comfortable rather than merely legal: 8.10:1. */
  --ac-gold-on-dark: color-mix(in srgb, #FFF 38%, var(--ac-warning));
  --ac-gold-400: color-mix(in srgb, var(--ac-warning) 55%, var(--ac-page));
  --ac-gold-600: color-mix(in srgb, #000 15%, var(--ac-warning));
  --ac-success: var(--ac-good);
  --ac-error:   #9B1C1C;

  /* TEXT-SAFE URGENCY AND WARNING, and the reason they exist.
     Urgent (#E5484D) measures 3.75:1 on the page and Warning (#B07D0A) 3.48:1.
     Both clear the 3:1 that non-text needs, so the ticks, the bars and the
     marker shapes may use them as given. NEITHER CLEARS 4.5:1, so neither may
     be small body text, and shipping them as label colours would mean shipping
     a deadline warning somebody cannot read.
     These are the same hues darkened until they do clear it: 4.50:1 and
     4.51:1. Colour is never the only signal either way, so a reader who sees
     neither still gets the word and the shape. */
  --ac-urgent-ink:  color-mix(in srgb, #000 10%, var(--ac-urgent));
  --ac-warning-ink: color-mix(in srgb, #000 14%, var(--ac-warning));
  --ac-info:    var(--ac-primary);
  --ac-focus:   var(--ac-primary);

  /* semantic backgrounds, mixed from their own colour so a tint cannot drift */
  --ac-success-bg: color-mix(in srgb, var(--ac-good) 8%,    var(--ac-page));
  --ac-warning-bg: color-mix(in srgb, var(--ac-warning) 10%, var(--ac-page));
  --ac-error-bg:   color-mix(in srgb, var(--ac-urgent) 9%,   var(--ac-page));
  --ac-info-bg:    color-mix(in srgb, var(--ac-primary) 7%,  var(--ac-page));

  /* semantic aliases: use these in components, not raw scale values */
  --ac-bg:              var(--ac-n-0);
  --ac-bg-alt:          var(--ac-page);
  --ac-bg-dark:         var(--ac-deep);
  --ac-surface:         var(--ac-n-50);
  --ac-border:          var(--ac-n-100);
  --ac-border-strong:   var(--ac-n-200);
  /* HAIRLINE. One pixel of Ink at low mix, which is what replaces a box. */
  --ac-hairline:        color-mix(in srgb, var(--ac-ink) 12%, var(--ac-page));
  --ac-text:            var(--ac-ink);
  --ac-text-muted:      var(--ac-n-400);
  --ac-text-heading:    var(--ac-ink);
  --ac-text-on-dark:    var(--ac-n-0);
  --ac-text-muted-dark: color-mix(in srgb, var(--ac-n-0) 62%, var(--ac-deep));
  /* One step quieter again, for text that qualifies a claim rather than making
     one. 5.00:1 on --ac-navy-800, the only ground it is used on. */
  --ac-text-faint-dark: color-mix(in srgb, var(--ac-n-0) 50%, var(--ac-deep));
  --ac-link:            var(--ac-primary);
  --ac-link-hover:      var(--ac-navy-700);

  /* typography */
  --ac-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --ac-font-body: "Inter", system-ui, -apple-system, sans-serif;
  /* THE MARKETING LEDE ONLY. Nothing in the product uses it. */
  --ac-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  /* FIGURES ARE NOT MONOSPACED. Kept as a name because components refer to it,
     and pointed at the body face: tabular-nums on the body aligns columns
     without a second typeface, so a figure matches the sentence around it. */
  --ac-font-mono: "Inter", system-ui, -apple-system, sans-serif;

  /* spacing, 4px base */
  --ac-1:4px;  --ac-2:8px;  --ac-3:12px; --ac-4:16px; --ac-5:20px;
  --ac-6:24px; --ac-8:32px; --ac-10:40px; --ac-12:48px; --ac-16:64px;
  --ac-20:80px; --ac-24:96px; --ac-32:128px;

  /* radius */
  --ac-r-sm:4px; --ac-r-md:8px; --ac-r-lg:14px; --ac-r-xl:20px; --ac-r-full:999px;

  /* elevation, ink-tinted rather than navy: the product is grey and white and
     a coloured shadow reads as a tint nobody asked for */
  --ac-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ac-ink) 7%, transparent);
  --ac-shadow-md: 0 4px 12px color-mix(in srgb, var(--ac-ink) 9%, transparent);
  --ac-shadow-lg: 0 12px 32px color-mix(in srgb, var(--ac-ink) 13%, transparent);

  /* THE NINTH VALUE, added deliberately and not substituted for any of the
     eight. The marketing pages needed a supporting hue for icon and accent
     work: navy is the structure, red is rationed to the brand mark and the
     one invitation, and neither can carry a row of capability icons without
     either disappearing or shouting. Every other colour on this site is still
     derived from the eight.
     MEASURED, not estimated: 4.68:1 on Page and 4.88:1 on n-0, so it clears
     4.5:1 as body text on either surface. The soft tint and the hero wash are
     mixed from it, so all three move together. */
  /* THE SUPPORTING BLUE. Intelligent and product actions: Ask AI, Analyze,
     View Matches, search controls, active tabs, selected filters.
     TWO VALUES, BECAUSE ONE WILL NOT CARRY TEXT. Measured, not assumed:
       #4E82EF with a white label   3.64:1   fails AA for a button label
       #4E82EF as text on white     3.64:1   fails AA for a label
       #4E82EF as an ICON on white  3.64:1   clears the 3:1 non-text bar
       #4E82EF on the soft tint     3.30:1   clears 3:1, fails as text
     So #4E82EF is the ACCENT: selected states, active tab rules, focus rings,
     icons, borders. Anything that is a shape rather than a word.
     #3567D8 is the same hue carried far enough to hold a word: 5.14:1 with a
     white label, 5.14:1 as text on white, 4.66:1 as text on the soft tint. It
     is what a filled blue button and blue link text use.
     The specified hover #3D72E6 reaches 4.42:1 with white, which is still
     under AA, so the filled button hovers to #2F5FCB (5.80:1) instead and
     #3D72E6 is kept for hovering the non-text accent. */
  --ac-blue:        #4E82EF;
  --ac-blue-hover:  #3D72E6;
  --ac-blue-strong: #3567D8;
  --ac-blue-strong-hover: #2F5FCB;
  --ac-blue-soft:   #EEF4FF;

  /* THE MARKETING SET (owner's ruling, 7 September 2026). Public routes
     paint with these and nothing else: navy for headings and body copy, deep
     navy for the dark close, action blue for the one conversion action and
     for links, three surfaces, the secondary text colour, and white. Brand
     red appears on public pages only in the logo and the brand mark. No
     gold, no teal, no green wash. tests/colour-gate.js reads the rendered
     pages and refuses any colour outside this set. */
  --ac-mkt-navy:      #0F2346;
  --ac-mkt-navy-deep: #0B1E3B;
  --ac-mkt-action:    #2F6FE6;
  --ac-mkt-surface-1: #F7F9FC;
  --ac-mkt-surface-2: #EEF4FF;
  --ac-mkt-surface-3: #E9EEF6;
  --ac-mkt-text-2:    #536078;
  /* The old marketing alias, kept pointing at the accent so nothing that
     referred to it has to change in the same commit. */
  --ac-mkt-blue: var(--ac-blue);
  --ac-mkt-blue-soft: var(--ac-blue-soft);
  /* THE HERO WASH IS A TINT, NOT A SIGNAL, and that is the whole reason it is
     allowed to be green. Green means success in this product: submitted, won,
     completed, strong fit. A green BUTTON would make a customer decide
     whether the thing they are looking at is a state or a control. A wash at
     4% behind a whole section cannot be mistaken for a status pill, and it
     never sits next to one. Derived from the success hue so it moves with it
     rather than becoming a second green. */
  /* The green wash the light hero carried is retired (7 September 2026): no
     colour outside the marketing set on a public route. */
  --ac-mkt-wash: var(--ac-mkt-surface-2);

  /* The tick shape, once. Used as a mask so the colour comes from the rule
     that applies it, and so a screen reader never reads it as punctuation. */
  --ac-tickmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2l3 3 6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* motion */
  --ac-ease: cubic-bezier(.4,0,.2,1);
  --ac-fast: 150ms; --ac-base: 220ms; --ac-slow: 400ms;

  /* layout */
  --ac-container: 1200px;
  --ac-gutter: clamp(20px, 4vw, 56px);
}

/* ---- base ---- */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--ac-font-body); font-size:16px; line-height:1.65;
  color:var(--ac-text); background:var(--ac-bg);
  -webkit-font-smoothing:antialiased;
  /* EVERY FIGURE, EVERYWHERE, IN THE BODY FACE.
     Set here rather than on the classes that hold numbers, because the numbers
     are not all in classes: they are in sentences, table cells, counts,
     amounts, dates and identifiers written by a dozen different renderers.
     Tabular figures line up in a column the way a monospace face does, without
     the second typeface that made every EIN and every dollar amount look like
     a different document from the words beside it. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
h1,h2,h3{font-family:var(--ac-font-display); color:var(--ac-text-heading); margin:0}
h1{font-weight:700; font-size:clamp(32px,4vw,44px); line-height:1.1; letter-spacing:-.025em}
h2{font-weight:700; font-size:30px; line-height:1.15; letter-spacing:-.02em}
h3{font-weight:600; font-size:21px; line-height:1.25; letter-spacing:-.01em}
a{color:var(--ac-link)}
a:hover{color:var(--ac-link-hover)}
/* .ac-mono no longer means monospace. It marks a FIGURE or an identifier, and
   what that now buys is tabular alignment and a little tracking, in the body
   face. The class is kept because it is on several hundred elements and it
   still names the right thing: this is a number, treat it as one. */
.ac-mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-weight:450; letter-spacing:.005em; font-variant-ligatures:none}

/* THE MARKETING LEDE, and nothing else. */
.ac-serif{font-family:var(--ac-font-serif); font-weight:400; letter-spacing:-.005em}

/* focus visible on every interactive element; white ring on navy surfaces */
:focus-visible{outline:3px solid var(--ac-focus); outline-offset:2px}
.ac-dark :focus-visible{outline-color:var(--ac-n-0)}

/* ---- auth / shell card pages (login, signup, locked, cancelled, ...) ---- */
.ac-authbody{
  background:var(--ac-bg-dark);
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--ac-8) var(--ac-5);
}
.ac-card{
  background:var(--ac-n-0); border-radius:var(--ac-r-lg); box-shadow:var(--ac-shadow-lg);
  width:420px; max-width:100%; padding:var(--ac-8) var(--ac-8) var(--ac-6);
}
.ac-card--wide{width:600px}
.ac-logo{display:block; margin:0 0 var(--ac-6)}
.ac-logo img{display:block; width:240px; max-width:100%; height:auto}
.ac-lead{font-size:14px; line-height:1.6; color:var(--ac-n-500); margin:0 0 var(--ac-4)}
.ac-hint{font-size:14px; line-height:1.55; color:var(--ac-text-muted); margin:0 0 var(--ac-3)}

label{display:block; font-family:var(--ac-font-body); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ac-text-muted); margin:0 0 var(--ac-2)}
input,select,textarea{
  width:100%; padding:12px 14px; background:var(--ac-surface);
  border:1px solid var(--ac-border-strong); border-radius:var(--ac-r-md);
  font-family:inherit; font-size:15px; color:var(--ac-text); margin-bottom:var(--ac-4);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--ac-navy-600); box-shadow:0 0 0 3px rgba(37,99,235,.25);
}
input.ac-invalid{border-color:var(--ac-error); box-shadow:0 0 0 3px rgba(155,28,28,.2)}

.ac-btn{
  display:inline-block; padding:14px 26px; border:none; border-radius:var(--ac-r-md);
  background:var(--ac-navy-600); color:var(--ac-n-0); font-family:inherit; font-size:15px;
  font-weight:600; cursor:pointer; text-align:center; text-decoration:none;
  transition:background var(--ac-fast) var(--ac-ease), transform var(--ac-fast) var(--ac-ease), box-shadow var(--ac-fast) var(--ac-ease);
}
.ac-btn:hover{background:var(--ac-navy-700); transform:translateY(-1px); box-shadow:var(--ac-shadow-md); color:var(--ac-n-0)}
.ac-btn:active{background:var(--ac-navy-800); transform:none}
.ac-btn--block{display:block; width:100%}
.ac-btn--accent{background:var(--ac-accent)}          /* ONE per viewport */
.ac-btn--accent:hover{background:var(--ac-red-700)}
.ac-btn--accent:active{background:var(--ac-red-800)}
.ac-btn--secondary{background:transparent; border:1.5px solid var(--ac-navy-600); color:var(--ac-navy-600); padding:12.5px 24.5px}
.ac-btn--secondary:hover{background:var(--ac-navy-50); color:var(--ac-navy-600); transform:none; box-shadow:none}
.ac-btn--danger{background:transparent; border:1.5px solid var(--ac-border-strong); color:var(--ac-error); padding:12.5px 24.5px}
.ac-btn--danger:hover{background:var(--ac-error-bg); color:var(--ac-error); transform:none; box-shadow:none}
.ac-btn--sm{padding:9px 16px; font-size:13.5px}
.ac-btn--sm.ac-btn--secondary,.ac-btn--sm.ac-btn--danger{padding:7.5px 14.5px}

/* SIGN IN WITH A PROVIDER, and the divider between it and the form. No new
   colours and no new button: the provider button IS .ac-btn--secondary with
   the provider's mark in front of its label. The rule below only lays the two
   out on one line and draws the "or" between the two ways in. */
.ac-btn--provider{display:flex; align-items:center; justify-content:center; gap:10px}
.ac-btn--provider img{display:block; width:18px; height:18px; flex:0 0 auto}
.ac-or{display:flex; align-items:center; gap:var(--ac-3); margin:var(--ac-4) 0;
  font-family:var(--ac-font-mono); font-weight:500; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ac-text-muted)}
.ac-or::before,.ac-or::after{content:""; flex:1 1 auto; height:1px; background:var(--ac-border-strong)}

/* messages */
.ac-msg{display:none; border-radius:var(--ac-r-md); padding:12px 14px; font-size:14px;
  line-height:1.5; margin:0 0 var(--ac-4); border:1px solid}
.ac-msg.on{display:block}
.ac-msg--error{background:var(--ac-error-bg); color:var(--ac-error); border-color:var(--ac-red-200)}
.ac-msg--success{background:var(--ac-success-bg); color:var(--ac-success); border-color:var(--ac-success)}
.ac-msg--info{background:var(--ac-info-bg); color:var(--ac-info); border-color:var(--ac-info)}
.ac-msg--warning{background:var(--ac-warning-bg); color:var(--ac-warning); border-color:var(--ac-warning)}
/* state classes the page scripts toggle: default/bad = error, good/ok = success */
.ac-msg{background:var(--ac-error-bg); color:var(--ac-error); border-color:var(--ac-red-200)}
.ac-msg.good,.ac-msg.ok{background:var(--ac-success-bg); color:var(--ac-success); border-color:var(--ac-success)}
.ac-msg.bad{background:var(--ac-error-bg); color:var(--ac-error); border-color:var(--ac-red-200)}

/* panels and rows (billing) */
.ac-panel{background:var(--ac-n-0); border:1px solid var(--ac-border); border-radius:var(--ac-r-lg); padding:var(--ac-6); margin:0 0 var(--ac-4)}
.ac-panel--tint{background:var(--ac-bg-alt)}
.ac-panel--dark{background:var(--ac-navy-800); border-color:var(--ac-navy-700); color:var(--ac-text-on-dark)}
.ac-panel--dark .ac-row .k{color:var(--ac-text-muted-dark)}
.ac-panel--dark .ac-row .v{color:var(--ac-n-0)}
.ac-row{display:flex; justify-content:space-between; gap:var(--ac-3); font-size:14px; padding:4px 0}
.ac-row .k{color:var(--ac-text-muted)}
.ac-row .v{color:var(--ac-text); text-align:right}
.ac-row .v.ac-mono{font-size:13.5px}

table.ac-table{width:100%; border-collapse:collapse; font-size:13.5px}
.ac-table th{text-align:left; font-family:var(--ac-font-mono); font-weight:500; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ac-text-muted);
  padding:6px 8px; border-bottom:1px solid var(--ac-border)}
.ac-table td{padding:8px; border-bottom:1px solid var(--ac-border); color:var(--ac-text)}
.ac-table td.r,.ac-table th.r{text-align:right}

.ac-tiercard{display:block; border:1px solid var(--ac-border); border-radius:var(--ac-r-md);
  padding:var(--ac-3) var(--ac-4); margin-bottom:var(--ac-2); cursor:pointer;
  transition:border-color var(--ac-fast) var(--ac-ease);
  /* tier cards are <label> elements, but they are PRODUCT COPY, not eyebrow
     labels: body face, sentence case. Mono stays on the price figures and
     the contract-data types the design document enumerates. */
  font-family:var(--ac-font-body); font-weight:400; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--ac-text)}
.ac-tiercard:hover{border-color:var(--ac-navy-500)}
.ac-tiercard input{width:auto; margin:0 var(--ac-2) 0 0}
.ac-foot{margin-top:var(--ac-5); text-align:center; font-size:12px; color:var(--ac-text-muted)}
.ac-foot a{color:var(--ac-link); text-decoration:none}

/* ===================== THE SHARED PIECES (14 September 2026) ==============
   Nine pieces every product screen draws from, kept in the one stylesheet so
   the next screen finds them here and does not draw its own. Each is written
   up in assets/brand/design-system.md, section 7a, with the rule it follows.
   Every colour below is a token from the :root block above; nothing types a
   value, and nothing carries a fallback inside var().
   ======================================================================== */

/* 1. STATUS PILL. A word in a soft tint. The stage pill is the one navy;
      Won takes the green a state earns; Lost is grey. Warning is the gold bar
      colour on its own tint with the ink-safe text variant, urgent likewise. */
.ac-pill{display:inline-block; padding:2px 9px; border-radius:var(--ac-r-full); font-size:11.5px; font-weight:600;
  letter-spacing:.02em; line-height:1.5; white-space:nowrap; background:var(--ac-n-100); color:var(--ac-n-600)}
.ac-pill--stage{background:var(--ac-navy-100); color:var(--ac-navy-700)}
.ac-pill--won,.ac-pill--good{background:var(--ac-success-bg); color:var(--ac-good)}
.ac-pill--lost{background:var(--ac-n-100); color:var(--ac-n-500)}
.ac-pill--warn{background:var(--ac-warning-bg); color:var(--ac-warning-ink)}
.ac-pill--urgent{background:var(--ac-error-bg); color:var(--ac-urgent-ink)}

/* 2. DATE TREATMENT. Overdue is the urgent ink, bold. Due soon is bold and
      full ink: weight tells it apart, not a new colour. Everything else is
      plain. The words beside the date say what the weight says. */
.ac-date{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ac-text-muted)}
.ac-date--soon{color:var(--ac-text); font-weight:600}
.ac-date--overdue{color:var(--ac-urgent-ink); font-weight:600}

/* 3. OWNER AVATAR. Initials in a circle. Nobody named is a dashed, empty
      circle beside the word Unassigned; the circle is never shown alone. */
.ac-avatar{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none;
  border-radius:var(--ac-r-full); background:var(--ac-navy-100); color:var(--ac-navy-700);
  font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; vertical-align:middle}
.ac-avatar--none{background:transparent; border:1.5px dashed var(--ac-n-300); color:var(--ac-n-400)}
.ac-avatar--sm{width:22px; height:22px; font-size:10px}

/* 4. ICON TILE. A small rounded square holding one line icon. Neutral by
      default, urgent on the urgent tint, the product blue for an ordinary
      action, green for something reached. Decorative: the words beside it
      say what it is. */
.ac-tile{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
  border-radius:var(--ac-r-md); background:var(--ac-n-100); color:var(--ac-n-600)}
.ac-tile svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ac-tile--urgent{background:var(--ac-error-bg); color:var(--ac-urgent-ink)}
.ac-tile--blue{background:var(--ac-blue-soft); color:var(--ac-blue-strong)}
.ac-tile--good{background:var(--ac-success-bg); color:var(--ac-good)}

/* 5. PAGE HEADER. The title, one supporting line built from real counts,
      the primary action, and a quiet secondary beside it. */
.ac-pagehead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px}
.ac-pagehead h1{margin:0; font-family:var(--ac-font-display); font-size:22px; font-weight:600; line-height:1.25; color:var(--ac-text)}
.ac-pagehead__sub{margin:4px 0 0; font-size:13px; color:var(--ac-text-muted)}
.ac-pagehead__acts{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.ac-pagehead__quiet{font-size:13px; color:var(--ac-text-muted); text-decoration:underline; text-underline-offset:2px}

/* 6. ATTENTION STRIP. One line to read before the page below it. The
      product blue for information, the urgent edge for something late, the
      warning bar for something approaching. */
.ac-attn{display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:var(--ac-r-md);
  background:var(--ac-blue-soft); border-left:3px solid var(--ac-blue); font-size:13.5px; color:var(--ac-text); margin:0 0 16px}
.ac-attn--urgent{background:var(--ac-error-bg); border-left-color:var(--ac-urgent)}
.ac-attn--warn{background:var(--ac-warning-bg); border-left-color:var(--ac-warning)}
.ac-attn a{color:var(--ac-link); text-decoration:underline; text-underline-offset:2px; white-space:nowrap}

/* 7. SUMMARY STRIP. Compact tiles: an icon, a label and a number. The one
      needing attention is tinted, with its number in the urgent ink and the
      urgency edge; a zero is faded; a tile is a link only where a
      destination or a filter exists. */
.ac-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 24px}
.ac-strip__tile{display:flex; align-items:center; gap:10px; min-width:0; padding:12px 14px; border:1px solid var(--ac-border);
  border-radius:var(--ac-r-lg); background:var(--ac-n-0); color:inherit; text-decoration:none}
a.ac-strip__tile:hover{border-color:var(--ac-blue)}
.ac-strip__txt{min-width:0}
.ac-strip__k{display:block; font-size:12px; color:var(--ac-text-muted); overflow-wrap:anywhere}
.ac-strip__n{display:block; font-family:var(--ac-font-display); font-size:22px; font-weight:600; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--ac-text)}
.ac-strip__tile--attention{background:var(--ac-error-bg); box-shadow:inset 3px 0 0 var(--ac-urgent)}
.ac-strip__tile--attention .ac-strip__n{color:var(--ac-urgent-ink)}
.ac-strip__tile--zero .ac-strip__n,.ac-strip__tile--zero .ac-strip__k,.ac-strip__tile--zero .ac-tile{opacity:.55}

/* 8. TABLE. table.ac-table above gives the header row and the separators;
      these add the urgency edge on a late row and the selected row. The edge
      is an inset shadow so a row that becomes late does not move. */
.ac-table tr.is-urgent td:first-child{box-shadow:inset 3px 0 0 var(--ac-urgent)}
.ac-table tr.is-selected td{background:var(--ac-navy-50)}
.ac-table td.ac-cell-quiet{color:var(--ac-text-muted)}

/* 9. EMPTY STATE is .ac-state, further down this file with the failed
      state: one sentence and the action that fills it. */

/* 10. PROGRESS RING (15 September 2026). How far through something, as an
       arc with the percentage inside it. The track is the hairline neutral,
       the arc the one navy; nothing about its colour carries meaning, the
       number does, and the element is an image with an accessible name
       saying what the number is of. An empty ring says so in words beside
       it, never with a guessed arc. */
.ac-ring{position:relative; display:inline-grid; place-items:center; width:56px; height:56px; flex:none}
.ac-ring svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.ac-ring circle{fill:none; stroke-width:5}
.ac-ring__track{stroke:var(--ac-n-100)}
.ac-ring__arc{stroke:var(--ac-navy-600); stroke-linecap:round; transition:stroke-dashoffset var(--ac-slow) var(--ac-ease)}
.ac-ring__n{font-family:var(--ac-font-display); font-size:13px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; color:var(--ac-text)}
.ac-ring--sm{width:28px; height:28px}
.ac-ring--sm circle{stroke-width:3.5}
.ac-ring--sm .ac-ring__n{font-size:8.5px}
.ac-ring--empty .ac-ring__n{color:var(--ac-n-400); font-size:11px}
.ac-ring--sm.ac-ring--empty .ac-ring__n{font-size:8px}

/* 11. FILTER CHIPS. A row of state chips with their real counts; the pressed
       one is filled with the one navy, the rest are outlined. Buttons, so
       the keyboard already knows them, and aria-pressed says which is on. */
.ac-chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ac-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ac-border-strong); background:var(--ac-n-0);
  color:var(--ac-n-600); font:inherit; font-size:12.5px; font-weight:500; padding:4px 11px; border-radius:var(--ac-r-full); cursor:pointer; line-height:1.4}
.ac-chip:hover{border-color:var(--ac-navy-300); color:var(--ac-text)}
.ac-chip[aria-pressed=true]{background:var(--ac-navy-600); border-color:var(--ac-navy-600); color:var(--ac-text-on-dark)}
.ac-chip__n{font-variant-numeric:tabular-nums; opacity:.85}

/* The page header's actions: the primary is the product's own .btn.acc on
   the application, and the quiet secondary is one underlined word. */
.ac-pagehead__acts .btn{white-space:nowrap}

/* ========================= POST-AWARD (15 September 2026) =================
   One card per award, built from the shared pieces: the page header, the
   attention line, the status pill, the date treatment, the owner avatar,
   the progress ring, the icon tile, the empty state. Every colour is a
   token from the top of this file. The urgent colour appears on the alert
   line, the overdue edge and the word Unassigned, and nowhere else. */
.pa-tools{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 14px}
.pa-search{flex:1 1 260px; min-width:0; margin:0}
.pa-search input{width:100%}
.pa-cards{display:flex; flex-direction:column; gap:10px}
.pa-card{border:1px solid var(--ac-border); border-radius:var(--ac-r-lg); background:var(--ac-n-0); padding:0}
.pa-card[open]{border-color:var(--ac-border-strong); box-shadow:var(--ac-shadow-sm)}
.pa-sum{list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px 14px; align-items:center;
  padding:12px 16px; cursor:pointer; border-radius:var(--ac-r-lg)}
.pa-sum::-webkit-details-marker{display:none}
.pa-sum:hover{background:var(--ac-n-25)}
.pa-sum:focus-visible{outline:2px solid var(--ac-focus); outline-offset:-2px}
.pa-sum>*{min-width:0}
.pa-sum__ring{display:flex; align-items:center}
.pa-sum__main{display:flex; flex-direction:column; gap:3px}
.pa-sum__row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pa-sum__title{font-family:var(--ac-font-display); font-size:15px; font-weight:600; color:var(--ac-text); line-height:1.3; overflow-wrap:anywhere}
.pa-card[open] .pa-sum__title{font-size:17px}
.pa-byhand{font-size:11.5px; color:var(--ac-n-500); border:1px dashed var(--ac-n-300); border-radius:var(--ac-r-full); padding:1px 8px; white-space:nowrap}
.pa-sum__line,.pa-sum__meta{font-size:13px; color:var(--ac-n-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pa-sum__meta{white-space:normal; display:none}
.pa-sum__meta .ac-avatar{margin:0 4px 0 2px}
.pa-card[open] .pa-sum__line{display:none}
.pa-card[open] .pa-sum__meta{display:block}
/* The ring is small on a closed row and full size on the open card: the
   same element, so nothing is drawn twice. */
.pa-sum__ring .ac-ring{width:28px; height:28px}
.pa-sum__ring .ac-ring circle{stroke-width:3.5}
.pa-sum__ring .ac-ring__n{font-size:8.5px}
.pa-card[open] .pa-sum__ring .ac-ring{width:56px; height:56px}
.pa-card[open] .pa-sum__ring .ac-ring circle{stroke-width:5}
.pa-card[open] .pa-sum__ring .ac-ring__n{font-size:13px}
.pa-sum__side{display:none; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; font-size:13px; color:var(--ac-n-500); white-space:nowrap}
.pa-card[open] .pa-sum__side{display:flex}
.pa-sum__left{font-size:13px}
.pa-body{padding:4px 16px 16px}

/* THE FIGURES: four tiles in a row, two rows on a phone. A figure the
   product does not hold says so in words and is never drawn as a number. */
.pa-figs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:6px 0 4px}
.pa-fig{border:1px solid var(--ac-border); border-radius:var(--ac-r-md); padding:10px 12px; background:var(--ac-n-25); min-width:0}
.pa-fig__k{display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ac-n-500)}
.pa-fig__n{display:block; margin-top:2px; font-family:var(--ac-font-display); font-size:20px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--ac-text); overflow-wrap:anywhere}
.pa-fig__none{font-size:13px; font-weight:500; color:var(--ac-n-400)}

.pa-block{margin:18px 0 0; padding:12px 0 0; border-top:1px solid var(--ac-n-100)}
.pa-block .rsechead h3{font-size:14px; margin:0; font-weight:600}
.pa-panelhost:empty{display:none}
.pa-panel{border:1px solid var(--ac-border-strong); border-radius:var(--ac-r-md); padding:12px 14px; margin:10px 0; background:var(--ac-n-0)}
.pa-panel h2,.pa-panel h3{font-size:15px; margin:0 0 8px}
.pa-danger{color:var(--ac-urgent-ink)}

/* THE ONE LIST. A tile, the words, the date and its state, the actions. An
   overdue line carries the urgent edge and says how overdue beside it. A
   done line is struck through and faded and says when and by whom. */
.pa-lines{list-style:none; margin:8px 0 0; padding:0}
.pa-line{display:grid; grid-template-columns:32px minmax(0,1fr) auto 28px; gap:10px 12px; align-items:center;
  padding:9px 0 9px 10px; border-bottom:1px solid var(--ac-n-100); border-left:3px solid transparent; font-size:13.5px}
.pa-line:last-child{border-bottom:0}
.pa-line>*{min-width:0}
.pa-line--over{border-left-color:var(--ac-urgent)}
.pa-line__words{display:flex; flex-direction:column; gap:2px}
.pa-line__title{font-weight:600; color:var(--ac-text); line-height:1.35; overflow-wrap:anywhere}
.pa-line--done .pa-line__title{text-decoration:line-through; color:var(--ac-n-400); font-weight:500}
.pa-line--done .ac-tile{opacity:.55}
.pa-line--done .pa-line__sub,.pa-line--done .pa-line__when{color:var(--ac-n-400)}
.pa-line__sub{font-size:12.5px; color:var(--ac-n-500); overflow-wrap:anywhere}
.pa-line__sub .ac-avatar{margin:0 3px 0 1px}
.pa-line__note{font-size:12.5px; color:var(--ac-n-500)}
.pa-line__when{display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right}
.pa-line__state{font-size:12px; color:var(--ac-n-500)}
.pa-line__state--over{color:var(--ac-urgent-ink); font-weight:600}
.pa-tpl{color:var(--ac-link); text-decoration:underline; text-underline-offset:2px}

/* THE PER-LINE MENU and the add menu: disclosures, so the keyboard already
   knows them; the summary is the only thing shown until it is opened. */
.pa-more,.pa-addmenu{position:relative}
.pa-more summary{list-style:none; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--ac-r-md); color:var(--ac-n-500); font-size:16px; line-height:1; font-weight:600; letter-spacing:-.05em}
.pa-more summary::-webkit-details-marker,.pa-addmenu summary::-webkit-details-marker{display:none}
.pa-addmenu summary{list-style:none; display:inline-block}
.pa-more summary:hover{background:var(--ac-n-100); color:var(--ac-text)}
.pa-more summary:focus-visible,.pa-addmenu summary:focus-visible{outline:2px solid var(--ac-focus); outline-offset:2px}
.pa-more__menu{position:absolute; right:0; top:32px; z-index:30; min-width:200px; background:var(--ac-n-0);
  border:1px solid var(--ac-border-strong); border-radius:var(--ac-r-md); box-shadow:var(--ac-shadow-md); padding:6px}
.pa-more__menu button{display:block; width:100%; text-align:left; border:0; background:transparent; font:inherit; font-size:13px;
  color:var(--ac-text); padding:7px 10px; border-radius:var(--ac-r-sm); cursor:pointer}
.pa-more__menu button:hover{background:var(--ac-n-50)}

/* TASK CHIPS: the title, the owner's initials and the date, linking to the
   task on the board. */
.pa-tasks{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center}
.pa-chip{display:inline-flex; align-items:center; gap:8px; max-width:100%; border:1px solid var(--ac-border); border-radius:var(--ac-r-full);
  padding:4px 10px 4px 12px; font-size:12.5px; color:var(--ac-text); text-decoration:none; background:var(--ac-n-0)}
.pa-chip:hover{border-color:var(--ac-navy-300)}
.pa-chip--over{border-left:3px solid var(--ac-urgent)}
.pa-chip--more{color:var(--ac-link); border-style:dashed}
.pa-chip__t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:28ch}
.pa-chip .ov-owner--none{color:var(--ac-urgent-ink); font-weight:600; font-size:12px}
.pa-links{margin:14px 0 0; line-height:1.7}
.pa-notes{display:block; color:var(--ac-n-600); white-space:pre-wrap}
.pa-editline{margin:6px 0 0; font-size:13px}

@media (max-width:767px){
  .pa-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pa-sum{grid-template-columns:auto minmax(0,1fr); padding:10px 12px}
  .pa-card[open] .pa-sum__side{grid-column:1 / -1; align-items:flex-start; text-align:left; white-space:normal}
  .pa-body{padding:2px 12px 12px}
  .pa-line{grid-template-columns:32px minmax(0,1fr) 28px; grid-template-areas:"tile words more" "tile when more"; row-gap:4px}
  .pa-line>.ac-tile{grid-area:tile}
  .pa-line__words{grid-area:words}
  .pa-line__when{grid-area:when; align-items:flex-start; text-align:left; flex-direction:row; gap:8px; flex-wrap:wrap}
  .pa-line>.pa-more{grid-area:more}
  .pa-sum__line{white-space:normal}
}

/* ========================= THE DASHBOARD (14 September 2026) ===============
   Built from the shared pieces above; the ids the tests read are local to
   views/dashboard.html. Sections stack on a phone and the strip wraps. */
.ov{max-width:1120px; padding:2px 0 64px}

/* 1. THE HEADER is the shared .ac-pagehead (15 September 2026): the
      greeting as the title, the position sentence beneath it as plain
      supporting text, one action on the right. The navy band it replaced
      read as decoration. The catalog stamp moved to the foot line. */
/* 2. THE SUMMARY STRIP is the shared .ac-strip. */
.ov-counts{margin-bottom:26px}

/* 3. THE COLUMNS. Left: what needs you, the pipeline, the pursuits. Right:
      what is new, and setting up while anything is left. */
.ov-cols{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:36px; align-items:start}
.ov-stack{min-width:0; display:flex; flex-direction:column; gap:30px}
.ov-col{min-width:0}
.ov-col>h2{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ac-n-500); margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--ac-n-100)}
.ov-col>h2 .ov-h2act{font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ac-link); text-decoration:none}
.ov-col>h2 .ov-h2act:hover{text-decoration:underline}
.ov-sub{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ac-n-400); margin:14px 0 0}
.ov-empty{font-size:13px; color:var(--ac-n-500); margin:14px 0 0; max-width:64ch}
.ov-empty a,.ov-foot a,.ov-more a,.ov-hidden a{color:var(--ac-link); text-decoration:underline; text-underline-offset:2px}

/* THE TIMEFRAME CONTROL: two words, one of them pressed. */
.ov-seg{display:inline-flex; border:1px solid var(--ac-border-strong); border-radius:var(--ac-r-md); overflow:hidden}
.ov-seg button{border:0; background:var(--ac-n-0); color:var(--ac-n-600); font:inherit; font-size:12px; font-weight:500;
  padding:4px 10px; cursor:pointer; letter-spacing:0; text-transform:none}
.ov-seg button+button{border-left:1px solid var(--ac-border-strong)}
.ov-seg button[aria-pressed=true]{background:var(--ac-navy-600); color:var(--ac-text-on-dark)}

/* THE ROWS of what needs you: a tile, the words, the timing, the hide
   control. The urgency edge is the left border: urgent for overdue, today
   and tomorrow; the product blue otherwise; faded once an item is more than
   a fortnight overdue. The words say what the edge says. */
.ov-rows{list-style:none; margin:12px 0 0; padding:0}
.ov-row{display:grid; gap:12px; align-items:center; padding:9px 0 9px 12px; border-bottom:1px solid var(--ac-n-100);
  font-size:13px; border-left:3px solid var(--ac-blue)}
.ov-row:last-child{border-bottom:0}
.ov-row>*{min-width:0}
.ov-need{grid-template-columns:32px minmax(0,1fr) auto 28px; grid-template-areas:"tile words time dm"}
.ov-need>.ac-tile{grid-area:tile}
.ov-words{grid-area:words}
.ov-time{grid-area:time; text-align:right; white-space:nowrap}
.ov-dm{grid-area:dm; position:relative}
.ov-u-over{border-left-color:var(--ac-urgent)}
.ov-u-later{border-left-color:var(--ac-blue)}
.ov-u-old{border-left-color:var(--ac-n-300)}
.ov-act{display:block; font-weight:600; color:var(--ac-text); line-height:1.35}
.ov-kind{font-size:10.5px; color:var(--ac-n-400); letter-spacing:.06em; text-transform:uppercase; margin-left:6px; font-weight:500}
.ov-rec{display:block; font-size:12.5px; color:var(--ac-n-500); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ov-title{color:var(--ac-text); text-decoration:none}
.ov-title:hover{text-decoration:underline; color:var(--ac-link-hover)}
.ov-owner{color:var(--ac-n-500)}
.ov-owner--none{color:var(--ac-urgent-ink); font-weight:600}
.ov-timing{display:block; font-size:12.5px; font-weight:600; color:var(--ac-text)}
.ov-u-over .ov-timing{color:var(--ac-urgent-ink)}
.ov-u-old .ov-timing{color:var(--ac-n-500)}
.ov-when{display:block; font-size:11.5px; color:var(--ac-n-500); font-variant-numeric:tabular-nums}

/* THE HIDE CONTROL: a disclosure, so the keyboard already knows it. */
.ov-dm summary{list-style:none; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--ac-r-md); color:var(--ac-n-500); font-size:18px; line-height:1; font-weight:600}
.ov-dm summary::-webkit-details-marker{display:none}
.ov-dm summary:hover{background:var(--ac-n-100); color:var(--ac-text)}
.ov-dm__menu{position:absolute; right:0; top:32px; z-index:30; min-width:236px; background:var(--ac-n-0);
  border:1px solid var(--ac-border-strong); border-radius:var(--ac-r-md); box-shadow:var(--ac-shadow-md); padding:6px}
.ov-dm__menu button{display:block; width:100%; text-align:left; border:0; background:transparent; font:inherit; font-size:13px;
  color:var(--ac-text); padding:7px 10px; border-radius:var(--ac-r-sm); cursor:pointer}
.ov-dm__menu button:hover{background:var(--ac-n-50)}
.ov-dm__note{margin:4px 10px 6px; font-size:11.5px; color:var(--ac-n-500); line-height:1.4}
.ov-hidden,.ov-more{margin:10px 0 0; font-size:12.5px; color:var(--ac-n-500)}
.ov-linkbtn{border:0; background:transparent; font:inherit; font-size:inherit; color:var(--ac-link);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0}

/* 4. THE PIPELINE BAR. One bar; its segments take the depths of the one
      navy in stage order, Won the green a state earns, Lost grey. The legend
      names each segment with its count, so colour never stands alone. */
.ov-bar{display:flex; height:14px; border-radius:var(--ac-r-full); overflow:hidden; gap:2px; margin:14px 0 10px; background:var(--ac-n-100)}
.ov-bar span{display:block; min-width:3px; background:var(--ac-navy-400)}
.ov-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ac-n-600)}
.ov-legend li{display:flex; align-items:center; gap:6px}
.ov-legend i{display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; font-style:normal; background:var(--ac-navy-400)}
.ov-legend a{color:inherit; text-decoration:none}
.ov-legend a:hover{text-decoration:underline}
.ov-st-identified{background:var(--ac-navy-200)}
.ov-st-reviewing{background:var(--ac-navy-300)}
.ov-st-pursuing{background:var(--ac-navy-400)}
.ov-st-drafting{background:var(--ac-navy-500)}
.ov-st-submitted{background:var(--ac-navy-600)}
.ov-st-won{background:var(--ac-good)}
.ov-st-lost{background:var(--ac-n-300)}

/* 5. PRIORITY PURSUITS: the shared table. */
/* THE PURSUITS TABLE NEVER SCROLLS SIDEWAYS (owner, 15 September 2026). A
   fixed table: Stage, Owner and Due are set widths that sit under their
   headings whatever the title says, and the title column takes what is
   left. A title wraps to two lines and then ends in an ellipsis, with the
   whole of it on the link's title. The column is a size container, so
   when it is too narrow for four columns (the phone, or a narrow left
   column at 1024) the rows stack instead, by the column's own width and
   not the window's. */
.ov-col{container-type:inline-size}
.ov-pursuits{margin-top:10px; table-layout:fixed; width:100%}
.ov-pursuits__c-stage{width:104px}
.ov-pursuits__c-owner{width:140px}
.ov-pursuits__c-due{width:168px}
.ov-pursuits th,.ov-pursuits td{padding:8px 8px 8px 10px; vertical-align:middle; min-width:0; overflow:hidden}
.ov-pursuits th{letter-spacing:.06em; font-size:11px}
.ov-pursuits .ov-title{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; max-width:100%; line-height:1.35}
.ov-pursuits td.ov-owner-cell{white-space:nowrap; text-overflow:ellipsis}
.ov-pursuits .ac-date{white-space:nowrap}
.ov-pursuits .ac-avatar{margin-right:6px}
@container (max-width:560px){
  .ov-pursuits thead{display:none}
  .ov-pursuits,.ov-pursuits tbody{display:block; width:100%}
  .ov-pursuits colgroup{display:none}
  .ov-pursuits tr{display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 0 8px 10px; border-bottom:1px solid var(--ac-border); align-items:center}
  .ov-pursuits tr.is-urgent{box-shadow:inset 3px 0 0 var(--ac-urgent)}
  .ov-pursuits tr.is-urgent td:first-child{box-shadow:none}
  .ov-pursuits td{display:block; border:0; padding:0; max-width:100%}
  .ov-pursuits td:first-child{flex:1 0 100%}
}

/* 6. NEW FOR YOU: a tinted panel, one action. */
.ov-newpanel{background:var(--ac-navy-50); border-radius:var(--ac-r-lg); padding:6px 16px 14px; margin-top:12px}
.ov-newpanel .ov-rows{margin-top:6px}
.ov-newrow{grid-template-columns:32px minmax(0,1fr) auto; border-left:0; padding-left:0; border-bottom-color:var(--ac-navy-100)}
.ov-newrow .ov-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.ov-newrow .ov-when{font-size:12.5px; color:var(--ac-n-600); font-weight:600}
.ov-newpanel .ov-empty{margin-top:8px}
.ov-newact{margin:12px 0 0}

/* 7. FINISH SETTING UP, while anything is left. Done items are struck
      through and faded; the count is "1 of 3", never a percentage. */
.ov-setup{list-style:none; margin:12px 0 0; padding:0; font-size:13px}
.ov-setup li{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--ac-n-100)}
.ov-setup li:last-child{border-bottom:0}
.ov-setup .ov-box{width:16px; height:16px; flex:none; border-radius:var(--ac-r-sm); border:1.5px solid var(--ac-n-300);
  display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1}
.ov-setup li.done .ov-box{background:var(--ac-good); border-color:var(--ac-good); color:var(--ac-n-0)}
.ov-setup li.done{color:var(--ac-n-400); text-decoration:line-through}
.ov-setup a{color:var(--ac-text); text-decoration:none}
.ov-setup a:hover{text-decoration:underline}
.ov-setup li.done a{color:var(--ac-n-400)}

/* THE FOOT LINE: what the catalog did while you were away, and, since the
   band went (15 September 2026), the stamp: the organization, the last
   pull and the moment the page was drawn, in Eastern. */
.ov-foot{margin:32px 0 0; padding-top:14px; border-top:1px solid var(--ac-n-100); font-size:12.5px; color:var(--ac-n-500)}
.ov-foot__stamp{display:block; margin-top:4px; color:var(--ac-n-400)}
.ov-head{margin-top:8px}

@media (max-width:900px){ .ov-cols{grid-template-columns:minmax(0,1fr); gap:28px} }
@media (max-width:767px){
  .ac-strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .ac-strip__n{font-size:20px}
  .ov-need{grid-template-columns:32px minmax(0,1fr) 28px; grid-template-areas:"tile words dm" "tile time dm"; row-gap:2px}
  .ov-time{text-align:left; display:flex; gap:8px; align-items:baseline; white-space:normal}
  .ov-rec{white-space:normal; overflow:visible}
}
@media (max-width:359px){ .ac-strip{grid-template-columns:minmax(0,1fr)} }

/* ------------------- B3: public site (marketing) layer -------------------
   Same tokens, same faces. Eyebrows: red-600 on light, gold on dark (gold on
   white is forbidden at 2.56:1; red-600 on navy-900 is forbidden at 2.67:1).
   Body measure caps at 68 characters. One accent button per viewport. */
.pub-body{margin:0; background:var(--ac-bg)}
.pub-inner{max-width:var(--ac-container); margin:0 auto; padding:0 var(--ac-gutter)}
.pub-measure{max-width:68ch}

.pub-nav{background:var(--ac-n-0); border-bottom:1px solid var(--ac-border)}
.pub-nav .pub-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.pub-nav-logo img{display:block; width:240px; max-width:56vw; height:auto}
.pub-nav-links{display:flex; align-items:center; gap:var(--ac-6)}
.pub-nav-links a{color:var(--ac-n-600); font-size:15px; font-weight:500; text-decoration:none}
.pub-nav-links a:hover{color:var(--ac-navy-600)}
/* B6: narrow screens collapse the nav into a dependency-free disclosure */
.pub-nav-m{display:none}
@media (max-width:900px){
  .pub-nav-links{display:none}
  .pub-nav-m{display:block; position:relative}
  .pub-nav-m summary{list-style:none; cursor:pointer; font-size:15px; font-weight:500;
    color:var(--ac-n-600); padding:8px 14px; border:1px solid var(--ac-border-strong); border-radius:var(--ac-r-md)}
  .pub-nav-m summary::-webkit-details-marker{display:none}
  .pub-nav-m[open] summary{background:var(--ac-n-50)}
  .pub-nav-m-links{position:absolute; right:0; top:calc(100% + 8px); background:var(--ac-n-0);
    border:1px solid var(--ac-border); border-radius:var(--ac-r-md); box-shadow:var(--ac-shadow-md);
    padding:var(--ac-3); display:flex; flex-direction:column; gap:var(--ac-1); min-width:230px; z-index:10}
  .pub-nav-m-links a{color:var(--ac-n-600); font-size:15px; font-weight:500; text-decoration:none; padding:7px 10px}
}

/* B6: long-form article pages: the home numeral treatment, one column */
.pub-article{max-width:68ch}
.pub-advice{font-size:14px; color:var(--ac-text-muted); margin:0 0 var(--ac-6)}
.pub-artsteps{margin:var(--ac-8) 0 0; padding:0; list-style:none}
.pub-artsteps li{margin:0 0 var(--ac-10)}
.pub-artsteps b{display:block; font-family:var(--ac-font-display); font-weight:700; font-size:56px;
  line-height:1; color:var(--ac-navy-200); margin:0 0 var(--ac-2)}
.pub-artsteps h2{margin:0 0 var(--ac-2); font-size:17px}
.pub-artsteps p{margin:0}
.pub-crosslink{margin-top:var(--ac-8); padding-top:var(--ac-5); border-top:1px solid var(--ac-border)}
/* AN ADDRESS TO COPY. The connector pages show the one address a customer
   pastes into an assistant; it is text to select, never a form field, and it
   must not run off a narrow screen. */
.pub-address{display:inline-block; max-width:100%; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95em; background:var(--ac-n-50); border:1px solid var(--ac-border); border-radius:6px; padding:6px 10px;
  user-select:all; -webkit-user-select:all}

/* RELATED PAGES. The same block on every content page, so a reader who
   finished one has somewhere to go and a crawler can reach every page from
   any other in one hop. A list of links, not a card grid: these are
   destinations, and dressing them up as products would overstate them. */
.pub-related h2{font-size:clamp(18px,2vw,22px); margin:0 0 var(--ac-4)}
.pub-related ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--ac-3) var(--ac-8)}
.pub-related li{padding:var(--ac-3) 0; border-top:1px solid var(--ac-hairline)}
.pub-related a{font-weight:600}

/* PRODUCT IMAGERY. A screenshot beside the sentence it proves, alternating
   sides so the eye is not scanning a column of identical rows. The image is a
   plain framed rectangle: no perspective, no device mockup, no drop shadow
   pretending to be a laptop. */
.pub-showcase{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:var(--ac-10) var(--ac-12); align-items:center; padding:var(--ac-10) 0;
  border-top:1px solid var(--ac-hairline)}
.pub-showcase:first-of-type{border-top:0}
.pub-showcase--flip .pub-showcase-t{order:2}
.pub-showcase-t h3{margin:0 0 var(--ac-3); font-size:clamp(19px,2vw,23px)}
.pub-showcase-t p{margin:0; max-width:52ch; color:var(--ac-text-muted)}
.pub-showcase figure{margin:0}
.pub-showcase .pub-shot img{display:block; width:100%; height:auto; border-radius:var(--ac-r-md);
  border:1px solid var(--ac-border-strong)}
@media (max-width:820px){
  .pub-showcase{grid-template-columns:1fr}
  .pub-showcase--flip .pub-showcase-t{order:0}
}

/* THE STEP DIAGRAMS. Shapes, drawn in the palette already declared, showing
   the shape of each step rather than a picture of a thing. No icon set. */
.pub-dia{display:block; width:120px; height:60px; margin:0 0 var(--ac-3)}
.pub-dia .d-fill-soft{fill:var(--ac-navy-100)}
.pub-dia .d-fill-mid{fill:var(--ac-navy-300)}
.pub-dia .d-fill-strong{fill:var(--ac-navy-600)}
.pub-dia .d-line{stroke:var(--ac-navy-400); stroke-width:2; fill:none; stroke-linecap:round}
.pub-dia .d-line-on{stroke:var(--ac-gold-on-dark); stroke-width:2; stroke-linecap:round}
.pub-dia .d-arrow{stroke:var(--ac-navy-600)}
.pub-dia .d-tick{stroke:var(--ac-good); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.pub-dia .d-label{fill:var(--ac-text-muted); font-size:12px; font-weight:600; letter-spacing:.06em}

/* THE COVERAGE MAP. One square per jurisdiction, shaded from stored counts. */
.pub-cvwrap{margin-top:var(--ac-10); padding-top:var(--ac-8); border-top:1px solid rgba(255,255,255,.12)}
.pub-cvwrap h3{margin:0 0 var(--ac-3)}
.pub-section--dark .pub-cvwrap h3{color:var(--ac-n-0)}
.pub-cvmap{display:block; width:100%; max-width:560px; height:auto; margin:var(--ac-8) 0 var(--ac-5)}
.pub-cvmap text{font-family:var(--ac-font-body)}
.pub-cvkey{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--ac-3) var(--ac-8);
  font-size:12.5px; color:var(--ac-text-muted-dark)}
.pub-cvkey li{display:flex; align-items:center; gap:7px}
.pub-cvkey i{width:14px; height:14px; border-radius:4px; display:inline-block; flex:none}
.pub-cvkey i.pub-cvdot{width:9px; height:9px; border-radius:var(--ac-r-full); background:var(--ac-warning);
  margin:0 2px}

/* THE BLOG. An index of entries and one long-form page, built from the same
   article measure and the same hairline rules as the guides, so a post reads
   as part of the site rather than as a bolted-on section. No new colour and no
   new type scale: everything here is the tokens already declared above. */
.pub-crumbs{font-size:13px; color:var(--ac-text-muted); margin:0 0 var(--ac-5)}
.pub-crumbs span{margin:0 6px; color:var(--ac-n-200)}

.pub-postlist{display:grid; gap:var(--ac-10)}
.pub-post{display:grid; grid-template-columns:200px 1fr; gap:var(--ac-8); align-items:start;
  padding-top:var(--ac-8); border-top:1px solid var(--ac-hairline)}
.pub-post:first-child{border-top:0; padding-top:0}
/* A post with no cover gives its column back rather than leaving a gap. */
.pub-post:has(.pub-post-cover:empty){grid-template-columns:1fr}
.pub-post:has(.pub-post-cover:empty) .pub-post-cover{display:none}
.pub-post-cover img{width:100%; height:auto; border-radius:var(--ac-r-md); display:block}
.pub-post-body h2{margin:0 0 var(--ac-3); font-size:clamp(20px,2.2vw,26px)}
.pub-post-body h2 a{color:var(--ac-text-heading); text-decoration:none}
.pub-post-body h2 a:hover{color:var(--ac-link); text-decoration:underline}
.pub-post-body p{margin:0 0 var(--ac-3)}
.pub-post-meta{display:flex; align-items:center; gap:var(--ac-4); margin:0 0 var(--ac-2);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-text-muted)}
.pub-post-cat{color:var(--ac-navy-600); font-weight:600}
.pub-post-more a{font-weight:600}
.pub-postempty{max-width:68ch; color:var(--ac-text-muted)}
@media (max-width:640px){.pub-post{grid-template-columns:1fr}}

.pub-post-byline{font-size:14px; color:var(--ac-text-muted); margin:0 0 var(--ac-5)}
.pub-post-byline span{margin:0 6px; color:var(--ac-n-200)}
.pub-postcover{margin:0 0 var(--ac-8)}
.pub-postcover img{width:100%; height:auto; border-radius:var(--ac-r-md); display:block}
/* The rendered markdown. Headings, paragraphs, lists and quotes only, which is
   the whole of what the renderer emits. */
.pub-postbody h2{margin:var(--ac-10) 0 var(--ac-4)}
.pub-postbody h3{margin:var(--ac-8) 0 var(--ac-3)}
.pub-postbody h4,.pub-postbody h5{margin:var(--ac-6) 0 var(--ac-2); font-size:16px}
.pub-postbody p,.pub-postbody ul,.pub-postbody ol{margin:0 0 var(--ac-5)}
.pub-postbody li{margin:0 0 var(--ac-2)}
.pub-postbody img{max-width:100%; height:auto; border-radius:var(--ac-r-md); margin:var(--ac-5) 0}
.pub-postbody blockquote{margin:var(--ac-6) 0; padding-left:var(--ac-5);
  border-left:2px solid var(--ac-gold-400); color:var(--ac-text-muted)}
.pub-postbody blockquote p{margin:0}
.pub-postbody code{font-size:.92em; background:var(--ac-n-50); padding:1px 5px; border-radius:4px}
.pub-postbody pre{background:var(--ac-n-50); padding:var(--ac-5); border-radius:var(--ac-r-md); overflow-x:auto}
.pub-postbody pre code{background:none; padding:0}
.pub-postbody hr{border:0; border-top:1px solid var(--ac-hairline); margin:var(--ac-8) 0}
.pub-postnext{margin-top:var(--ac-10); padding-top:var(--ac-6); border-top:1px solid var(--ac-hairline)}
.pub-postnext h2{margin:0 0 var(--ac-4); font-size:18px}
.pub-postnext ul{margin:0 0 var(--ac-4); padding-left:var(--ac-5)}

.pub-section{padding:var(--ac-20) 0}
.pub-section--alt{background:var(--ac-bg-alt)}
/* B4 fix: uniform section rhythm: a section's last content element adds no
   trailing margin, so every content-to-content gap is the two paddings */
.pub-section .pub-inner > :last-child{margin-bottom:0}
.pub-section--dark{background:var(--ac-navy-800); color:var(--ac-text-on-dark)}
.pub-section--dark h2,.pub-section--dark h3{color:var(--ac-n-0)}
.pub-section--dark p{color:var(--ac-text-muted-dark)}
.pub-section h2{margin:0 0 var(--ac-6)}
.pub-section h3{margin:0 0 var(--ac-2)}
.pub-section p{margin:0 0 var(--ac-4)}

/* WARMER OUTSIDE: more room than the product gets, and one clear invitation
   rather than a row of equal choices. */
.pub-hero{background:var(--ac-bg-dark); color:var(--ac-text-on-dark); padding:var(--ac-32) 0 var(--ac-24)}
.pub-hero h1{color:var(--ac-n-0); font-size:clamp(40px,6vw,68px); line-height:1.03; letter-spacing:-.03em; margin:0 0 var(--ac-5)}
/* THE MARKETING LEDE, and the only serif in the product or out of it. One
   sentence set in a serif is the whole of "warmer outside": it says a person
   wrote this, where the index inside says a machine keeps it. */
.pub-hero .pub-lead{color:var(--ac-navy-200); font-family:var(--ac-font-serif);
  font-size:clamp(19px,2.2vw,24px); line-height:1.55; max-width:56ch; letter-spacing:-.003em}

.pub-eyebrow{font-family:var(--ac-font-mono); font-weight:500; font-size:12px; line-height:1.7;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ac-red-600); margin:0 0 var(--ac-4)}
.pub-hero .pub-eyebrow,.pub-section--dark .pub-eyebrow,.pub-cta-final .pub-eyebrow{color:var(--ac-gold-on-dark)}

.pub-lead{font-size:19px; line-height:1.6; color:var(--ac-n-500); max-width:68ch; margin:0 0 var(--ac-6)}
.pub-small{font-size:14px; line-height:1.55; color:var(--ac-text-muted)}

.pub-cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--ac-4); margin-top:var(--ac-8)}
.pub-cta-note{flex-basis:100%; font-size:14px; color:var(--ac-navy-300); margin:var(--ac-2) 0 0}
.ac-btn--ghost{background:transparent; border:1.5px solid rgba(255,255,255,.4); color:var(--ac-n-0); padding:12.5px 24.5px}
.ac-btn--ghost:hover{background:transparent; border-color:rgba(255,255,255,1); color:var(--ac-n-0); transform:none; box-shadow:none}

.pub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--ac-8)}
.pub-grid p{margin:0}

/* B4: capability / audience / scope cards: the section 7 recipe */
.pub-cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--ac-5); margin-top:var(--ac-8)}
.pub-card{background:var(--ac-n-0); border:1px solid var(--ac-border); border-radius:var(--ac-r-lg);
  padding:var(--ac-6); transition:transform var(--ac-fast) var(--ac-ease), box-shadow var(--ac-fast) var(--ac-ease)}
/* ONE pixel, not two. A page of cards that all leap is harder to read. */
.pub-card:hover{transform:translateY(-1px); box-shadow:var(--ac-shadow-md)}
.pub-card h3{margin:0 0 var(--ac-2)}
.pub-card p{margin:0}
.pub-icon{display:block; width:32px; height:32px; color:var(--ac-navy-600); margin:0 0 var(--ac-4)}
/* five cards: 3 across, then 2 at the SAME width, left-aligned (the
   centered-narrower row read indecisive; equal modules read intentional) */
@media (min-width:980px){
  .pub-cardgrid--5{grid-template-columns:repeat(6,1fr)}
  .pub-cardgrid--5>*{grid-column:span 2}
  .pub-cardgrid--5>*:nth-child(4){grid-column:1/3}
  .pub-cardgrid--5>*:nth-child(5){grid-column:3/5}
}

/* B4 fix: entries, not boxes: for lists whose bodies are single clauses
   (audience, scope). A hairline top rule gives each entry structure without
   hollow card chrome. */
.pub-entrygrid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--ac-8) var(--ac-12); margin-top:var(--ac-8)}
.pub-entrygrid--3{grid-template-columns:repeat(3,1fr)}
.pub-entry{border-top:1px solid var(--ac-border-strong); padding-top:var(--ac-4)}
.pub-entry h3{margin:0 0 var(--ac-1)}
.pub-entry p{margin:0}
@media (max-width:700px){.pub-entrygrid,.pub-entrygrid--3{grid-template-columns:1fr}}

/* B4: the stats band: three counts and one status, not four numerals.
   Addendum polish: each figure is a framed measurement (thin gold-400 rule
   above, tracked label, breathing room); the numerals count up on first
   entry (script in home.html, dead under prefers-reduced-motion); the
   attribution drops to a footnote voice under a hairline. */
.pub-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ac-8) var(--ac-16); margin:var(--ac-10) 0 var(--ac-8)}
@media (max-width:700px){.pub-stats{grid-template-columns:1fr}}
.pub-stat{border-top:1px solid var(--ac-gold-400); padding-top:var(--ac-5)}
.pub-stat b{display:block; font-family:var(--ac-font-mono); font-weight:600; font-size:clamp(26px,3vw,38px);
  letter-spacing:.01em; color:var(--ac-gold); margin:0 0 var(--ac-2)}
.pub-stat span{font-size:13px; letter-spacing:.06em; color:var(--ac-text-muted-dark)}
/* The date a figure was counted. Quieter than the label above it, because it
   qualifies the claim rather than making one. */
.pub-stat em{display:block; margin-top:var(--ac-2); font-style:normal; font-size:12px;
  letter-spacing:.08em; color:var(--ac-text-faint-dark)}
.pub-live{display:flex; align-items:center; gap:var(--ac-3); padding-top:var(--ac-5);
  border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:var(--ac-text-muted-dark)}
.pub-live-pill{display:inline-flex; align-items:center; gap:var(--ac-2); font-family:var(--ac-font-mono);
  font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ac-gold);
  border:1px solid var(--ac-gold-600); border-radius:var(--ac-r-full); padding:4px 12px}
.pub-live-dot{width:6px; height:6px; border-radius:var(--ac-r-full); background:var(--ac-gold);
  animation:pub-pulse 2s var(--ac-ease) infinite}
@keyframes pub-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pub-stats-note{max-width:68ch; margin-top:var(--ac-8); padding-top:var(--ac-5);
  border-top:1px solid rgba(255,255,255,.12); font-size:14px; line-height:1.55}
.pub-section--dark .pub-stats-note{color:var(--ac-text-muted-dark)}

/* B4: numbered steps. A real <ol> carries the sequence semantically; the
   oversized numerals are decorative ground (aria-hidden, navy-100), which
   is what lets them sit below the text-contrast floor. */
.pub-stepgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--ac-8);
  margin:var(--ac-8) 0 0; padding:0; list-style:none}
.pub-step b{display:block; font-family:var(--ac-font-display); font-weight:700; font-size:56px;
  line-height:1; color:var(--ac-navy-200); margin:0 0 var(--ac-3)}
.pub-step p{margin:0}

.pub-steps{margin:0; padding-left:1.2em; max-width:68ch}
.pub-steps li{margin:0 0 var(--ac-4)}
.pub-list{margin:0; padding-left:1.2em; max-width:68ch}
.pub-list li{margin:0 0 var(--ac-3)}

/* final CTA + footer read as ONE continuous dark block (design note): same
   surface, no border between them, the footer carries the separation. */
/* THE CLOSE, WITH A HORIZON BEHIND IT (13 September 2026).
   The reference had a mountain photograph here; it was dropped as invented
   artwork and the page ended flat. Drawn in tokens instead.

   EVERY GRADIENT STOP IS A WHOLE TOKEN OR TRANSPARENT, deliberately. A
   color-mix() stop resolves to a colour the design system does not name, and
   the colour gate reads computed gradient stops, so it would be a finding and
   it would be RIGHT to be one. The softness comes from opacity instead, which
   the gate treats the way it says it does: navy at forty percent is still
   navy.

   Zero layout shift: the glow is a background and the ridges are absolutely
   positioned, so neither occupies space in a band whose height is already
   fixed by its own padding. */
.pub-cta-final{position:relative; overflow:hidden;
  background:
    radial-gradient(120% 78% at 50% 100%, var(--ac-mkt-action), transparent 58%),
    var(--ac-bg-dark);
  color:var(--ac-text-on-dark); padding:var(--ac-20) 0 var(--ac-12)}
/* The glow is the token at full strength, dimmed here rather than pre-blended. */
.pub-cta-final{background-blend-mode:soft-light, normal}
.pub-cta-final > .pub-inner{position:relative; z-index:1}
.pub-horizon{position:absolute; left:0; right:0; bottom:0; width:100%; height:190px;
  display:block; pointer-events:none; z-index:0;
  /* The svg element's own fill defaults to black. It paints nothing, because
     each path carries its own fill, but the colour gate reads computed styles
     and a black is a black wherever it is declared. It caught this one. */
  fill:none}
.pub-horizon .h-far{fill:var(--ac-mkt-action); opacity:.16}
.pub-horizon .h-near{fill:var(--ac-mkt-navy); opacity:.55}
/* A phone gets a shallower horizon: at 190px the ridges crowd the buttons. */
@media (max-width:640px){ .pub-horizon{height:120px} }
.pub-cta-final h2{color:var(--ac-n-0)}
.pub-cta-final p{color:var(--ac-navy-200); max-width:68ch}

/* THE FOOTER IS LIGHT NOW. It was deep navy, which put a second large dark
   block directly under the dark closing panel and left the page ending on two
   of them in a row. The dark ground is reserved for the close, so the page
   reads light, light, dark, light and the invitation is the only heavy thing
   near the bottom. The lockup moves with it: the white-knockout mark only
   belongs on a dark ground, so the public pages carry the light one and the
   dashboard keeps the knockout for its navy sidebar. */
.pub-footer{background:var(--ac-n-0); color:var(--ac-n-600); border-top:1px solid var(--ac-border);
  padding:var(--ac-12) 0 var(--ac-8)}
.pub-footer-logo img{display:block; width:200px; height:auto; margin:0}
.pub-footer-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--ac-8);
  margin-top:var(--ac-10)}
.pub-footer h2{color:var(--ac-navy-900); font-size:15px; margin:0 0 var(--ac-3)}
.pub-footer ul{list-style:none; margin:0; padding:0}
.pub-footer li{margin:0 0 var(--ac-2)}
.pub-footer a{color:var(--ac-n-500); text-decoration:none; font-size:15px}
.pub-footer a:hover{color:var(--ac-navy-900); text-decoration:underline}
.pub-footer-bar{border-top:1px solid var(--ac-border); margin-top:var(--ac-10); padding-top:var(--ac-6);
  font-size:14px; color:var(--ac-text-muted)}

/* B4 addendum 2: the media frame lives in the hero's right column (~45% at
   desktop, stacked below the text on mobile). The brand icon is the
   placeholder; B2's capture replaces it in the same frame. */
.pub-hero-grid{display:grid; grid-template-columns:9fr 11fr; gap:var(--ac-10); align-items:center}
@media (max-width:900px){.pub-hero-grid{grid-template-columns:1fr; gap:var(--ac-8)}}
.pub-shot{aspect-ratio:16/10; background:var(--ac-surface); border:1px solid var(--ac-border);
  border-radius:var(--ac-r-lg); box-shadow:var(--ac-shadow-lg); overflow:hidden}
.pub-shot img{display:block; width:100%; height:100%; object-fit:cover}
.pub-shot--placeholder{display:flex; align-items:center; justify-content:center}
.pub-shot--placeholder img{width:96px; height:96px; object-fit:contain}

/* B4: scroll-entry motion. The pre-entry hidden state exists ONLY under the
   .js class the page's first script sets, so a visitor without JavaScript
   sees everything: content is never held hostage to a script. Collapsed by
   the prefers-reduced-motion rule at the end of this file. */
.js .pub-anim{opacity:0; transform:translateY(12px);
  transition:opacity var(--ac-base) var(--ac-ease), transform var(--ac-base) var(--ac-ease)}
.js .pub-anim.in{opacity:1; transform:none}
.js .pub-cardgrid .pub-card:nth-child(2){transition-delay:60ms}
.js .pub-cardgrid .pub-card:nth-child(3){transition-delay:120ms}
.js .pub-cardgrid .pub-card:nth-child(4){transition-delay:180ms}
.js .pub-cardgrid .pub-card:nth-child(5){transition-delay:240ms}

/* B4: composition. Two-axis sections so the container's full width works
   while prose keeps its 68ch measure. */
.pub-split{display:grid; grid-template-columns:2fr 3fr; gap:var(--ac-10); align-items:start}
@media (max-width:900px){.pub-split{grid-template-columns:1fr; gap:var(--ac-6)}}
.pub-center{text-align:center}
.pub-center .pub-lead{margin-left:auto; margin-right:auto}
.pub-center .pub-cta{justify-content:center}
.pub-center .pub-measure,.pub-center p{margin-left:auto; margin-right:auto}

/* pricing page */
/* B4: a proper segmented control: one pill container, the active segment
   a filled navy pill. */
.pub-toggle{display:flex; width:max-content; margin:0 auto var(--ac-10); background:var(--ac-surface);
  border:1px solid var(--ac-border); border-radius:var(--ac-r-full); padding:4px; gap:2px}
.pub-toggle button{border:none; background:transparent; color:var(--ac-n-600); font-family:inherit;
  font-size:14px; font-weight:500; padding:8px 22px; cursor:pointer; border-radius:var(--ac-r-full);
  transition:background var(--ac-fast) var(--ac-ease), color var(--ac-fast) var(--ac-ease)}
.pub-toggle button[aria-pressed="true"]{background:var(--ac-navy-600); color:var(--ac-n-0)}
.pub-plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--ac-5); margin:0 0 var(--ac-10)}
/* THE SPACE IS RESERVED BEFORE THE PRICES ARRIVE (12 September 2026).
   The plan cards, the enterprise line and the comparison table all render
   from /pricing/data after the page has painted, out of three containers
   that start empty. Everything below them was pushed down when they filled,
   and the measured Cumulative Layout Shift on this page was 0.50, which is
   twice the threshold at which a page is called poor. The home page, which
   injects nothing, measured 0.0005.
   :empty is the whole trick: the reservation applies only while the
   container is empty and disappears the instant it is filled, so it can
   never over-reserve or fight the real content. The heights are the measured
   rendered heights at each width, rounded down slightly: reserving a little
   less than the content needs leaves a shift too small to count, while
   reserving more would leave a visible gap on a page that failed to load. */
/* AND THE RESERVATION SURVIVES THE LOADING TREATMENT (13 September 2026).
   Putting the treatment inside the plans box stopped it being :empty, which
   took the reservation away with it and would have brought the 0.50 shift
   straight back. .is-loading carries the same height while the treatment is
   in there, and the renderer takes the class off in the same statement that
   writes the real plans, so the two can never disagree. The treatment itself
   sits inside that reserved height rather than setting one of its own. */
/* THE :empty RULE KEEPS ITS OWN DECLARATION. Folding it into a selector list
   with .is-loading read the same to a browser and did not read the same to
   the gate, which looks for this exact rule and failed on a page whose
   reservation was intact. A guard that can be broken by a comma is worth
   keeping legible rather than clever. */
.pub-plans:empty{min-height:500px}
#entPlan:empty{min-height:90px}
#planTable:empty{min-height:770px; display:block}
.pub-plans.is-loading{min-height:500px; display:block}
.pub-plans.is-loading .awards-loader{min-height:500px}
@media (max-width:720px){
  .pub-plans:empty{min-height:1780px}
  #entPlan:empty{min-height:250px}
  #planTable:empty{min-height:860px}
  .pub-plans.is-loading{min-height:1780px}
  .pub-plans.is-loading .awards-loader{min-height:1780px}
}
.pub-plan{position:relative; background:var(--ac-n-0); border:1px solid var(--ac-border); border-radius:var(--ac-r-lg); padding:var(--ac-6); display:flex; flex-direction:column}
.pub-plan h3{margin:0 0 var(--ac-3)}
/* B4: the featured tier: gold badge (gold as BACKGROUND with navy-900
   text, the compliant inversion of the 6.98:1 gold-on-navy-900 pairing;
   gold is never type on white), stronger border, deeper shadow, slight
   scale at desktop only. */
.pub-plan--featured{border:1.5px solid var(--ac-navy-600); box-shadow:var(--ac-shadow-lg)}
@media (min-width:980px){.pub-plan--featured{transform:scale(1.03)}}
.pub-plan-badge{position:absolute; top:-11px; left:var(--ac-6); background:var(--ac-gold); color:var(--ac-navy-900);
  font-family:var(--ac-font-mono); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:3px 12px; border-radius:var(--ac-r-full)}
/* B4 r2: the Enterprise band: a fifth offer different in kind, so it sits
   as a full-width band under the four cycle-priced cards rather than
   squeezing them to five across. Words, not figures: no mono. */
.pub-plan--ent{flex-direction:row; align-items:center; gap:var(--ac-8); margin:0 0 var(--ac-10)}
.pub-plan-ent-head{flex:0 0 auto; min-width:180px}
.pub-plan--ent h3{margin:0 0 2px}
.pub-plan-price--custom{font-family:var(--ac-font-display); font-weight:600; font-size:17px; color:var(--ac-text-heading)}
.pub-plan--ent .pub-plan-sentence{flex:1 1 auto; margin:0}
.pub-plan--ent .ac-btn{flex:0 0 auto}
@media (max-width:800px){.pub-plan--ent{flex-direction:column; align-items:flex-start}}
.pub-plan-price{font-family:var(--ac-font-mono); font-weight:600; font-size:34px; letter-spacing:.01em; color:var(--ac-text-heading)}
.pub-plan-cycle{font-size:14px; color:var(--ac-text-muted); margin:0 0 var(--ac-3)}
.pub-plan-sentence{font-size:14px; line-height:1.55; color:var(--ac-text); margin:0 0 var(--ac-5); flex:1}
/* B4: the allowance table: zebra rows, sticky header. Sticky needs the
   page to be the scroll container, so the wrap scrolls horizontally only
   below 900px (where sticky is given up for reachability). */
.pub-tablewrap{margin:0 0 var(--ac-3)}
@media (max-width:900px){.pub-tablewrap{overflow-x:auto} .pub-tablewrap .ac-table{min-width:640px}}
.pub-tablewrap .ac-table td.num{font-family:var(--ac-font-mono); letter-spacing:.01em}
.pub-tablewrap .ac-table thead th{position:sticky; top:0; background:var(--ac-n-0); z-index:1}
.pub-tablewrap .ac-table tbody tr:nth-child(odd) td{background:var(--ac-bg-alt)}
/* band labels sit in their own tbody so each band's zebra starts fresh;
   this rule follows the zebra rule to win the tie */
.pub-tablewrap .ac-table tbody tr td.pub-bandlabel{font-family:var(--ac-font-mono); font-weight:500;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ac-text-muted);
  background:var(--ac-n-50); padding:10px 8px}
.pub-check{width:18px; height:18px; color:var(--ac-navy-600); display:inline-block; vertical-align:middle}
/* B4: included list flows in two columns at desktop; FAQ becomes a
   two-column grid of question/answer pairs. */
.pub-cols2{columns:2; column-gap:var(--ac-12); max-width:none}
@media (max-width:900px){.pub-cols2{columns:1; max-width:68ch}}
.pub-faqgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--ac-12)}
@media (max-width:900px){.pub-faqgrid{grid-template-columns:1fr}}
/* THIS USED TO SIZE THE QUESTIONS. The pricing FAQ's questions were h2s; they
   are summary elements inside accordions now, so the only h2 left under
   .pub-faq is the section's own heading, and 17px was shrinking it to look
   like a stray line of bold text. The faq page is .pub-faqpage and never
   matched this rule. */
.pub-faq h2{margin:0 0 var(--ac-6); font-size:32px; letter-spacing:-.02em}
.pub-faq p{max-width:68ch}

/* long-form legal pages (terms, privacy) */
.pub-legal{max-width:68ch}
.pub-legal h2{font-size:21px; line-height:1.25; margin:var(--ac-8) 0 var(--ac-3)}
.pub-legal p,.pub-legal li{font-size:16px}

/* ======================= THE ARCHIVAL INDEX =========================
 *
 * Inside the product the shape is an index, not a set of cards: HAIRLINES
 * instead of boxes, dense rows, figures large and quiet, labels small and
 * grey. A box around a group says "these belong together" and a page of boxes
 * says nothing at all, so the rule is one rule deep: a hairline separates, a
 * box encloses, and nothing encloses a thing that is already enclosed.
 *
 * Applied through the token layer wherever possible, so the markup does not
 * have to change to get it.
 */

/* A SOURCE TICK: three pixels of colour at the left edge of a row, saying
   where the row came from. Colour is never the only signal, so the legend
   below names each one in words and every row still carries its source label
   in text. */
.ac-tick{position:relative; padding-left:calc(var(--ac-3) + 3px)}
.ac-tick::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ac-n-200); border-radius:0;
}
.ac-tick--federal::before{background:var(--ac-primary)}
.ac-tick--foundation::before{background:var(--ac-accent)}
.ac-tick--state::before{background:var(--ac-warning)}
.ac-tick--found::before{background:var(--ac-n-300)}
/* The legend that makes the ticks readable to somebody who has not been told
   what they mean, and to somebody who cannot separate the colours. */
.ac-legend{display:flex; flex-wrap:wrap; gap:var(--ac-4); align-items:center;
  font-size:12px; color:var(--ac-text-muted); margin:var(--ac-2) 0}
.ac-legend span{display:inline-flex; align-items:center; gap:6px}
.ac-legend i{width:3px; height:12px; display:inline-block; background:var(--ac-n-200)}

/* FIGURES LARGE AND QUIET, labels small and grey. */
.ac-figure{font-size:26px; line-height:1.15; font-weight:600; color:var(--ac-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.015em}
.ac-figlabel{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ac-text-muted)}

/* ===================== MICRO-INTERACTIONS =========================
 *
 * With purpose and nothing decorative. A row shifts a couple of pixels and
 * lightens under the pointer so the eye can hold its place. An action that
 * belongs to one row appears on hover and is invisible otherwise, so a dense
 * list is not also a wall of buttons. A button gives under the press. A card
 * lifts one pixel, once.
 *
 * ALL OF IT DIES under prefers-reduced-motion, which is the block at the end
 * of this file, and none of it is load-bearing: every hover-revealed control
 * is still reachable by keyboard and still announced, because :focus-within
 * reveals it too.
 */
.ac-row-i{transition:transform var(--ac-fast) var(--ac-ease), background-color var(--ac-fast) var(--ac-ease)}
.ac-row-i:hover{transform:translateX(2px); background:var(--ac-n-50)}

/* An action that appears on hover. Opacity, not display, so it keeps its space
   and the row does not jump; and :focus-within so a keyboard reaches it. */
.ac-onhover{opacity:0; transition:opacity var(--ac-fast) var(--ac-ease)}
.ac-row-i:hover .ac-onhover,
.ac-row-i:focus-within .ac-onhover,
.ac-onhover:focus-visible{opacity:1}

/* Press. A button gives slightly and comes back; nothing travels. */
.ac-btn{transition:background var(--ac-fast) var(--ac-ease), transform var(--ac-fast) var(--ac-ease), box-shadow var(--ac-fast) var(--ac-ease)}
.ac-btn:active{transform:scale(.98)}

/* A card lifts one pixel. One, not four: a page of cards that all leap is a
   page that is harder to read, not easier. */
.ac-lift{transition:transform var(--ac-fast) var(--ac-ease), box-shadow var(--ac-fast) var(--ac-ease)}
.ac-lift:hover{transform:translateY(-1px); box-shadow:var(--ac-shadow-md)}

/* ===================== WARMER OUTSIDE =========================
 * The public pages get more room and one clear invitation, rather than the
 * product's austerity. */
.pub-lede{font-family:var(--ac-font-serif); font-size:clamp(20px,2.4vw,26px);
  line-height:1.5; color:var(--ac-n-600); max-width:56ch; margin:0 0 var(--ac-6)}
.pub-section{padding-top:var(--ac-20); padding-bottom:var(--ac-20)}

/* motion: collapse everything when the user asks for less */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
  /* Transforms are not transitions: a reduced-motion reader must not be
     shifted at all, so the movement itself is removed rather than hurried. */
  .ac-row-i:hover,.ac-lift:hover,.ac-btn:active{transform:none !important}
  /* The hover-revealed actions stay revealed rather than fading, so nothing
     depends on an animation that is no longer running. */
  .ac-onhover{opacity:1}
}

/* ============ WHERE GRANT MONEY GOES: the field distribution ==============
   A chart made of two elements and a width. No library, and none needed: the
   shape of a distribution is a row of bars, and a bar is a box. The colours
   are brand tokens rather than a palette invented for this page, so it reads
   as part of the site rather than as an embedded widget.

   Every bar is drawn against the LARGEST field, so the eye reads relative
   size; the figure and the percentage are text beside it, so a reader with a
   screen reader, or a crawler, gets the number rather than the picture. The
   bar itself is aria-hidden for exactly that reason. */
.pub-narrow{max-width:820px}
.pub-quiet{color:var(--ac-n-500); font-size:14px}
.pub-gf{list-style:none; margin:var(--ac-6) 0; padding:0}
.pub-gf-row{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr) 8.5rem 3.5rem;
  gap:var(--ac-4); align-items:center; padding:7px 0; border-bottom:1px solid var(--ac-n-200)}
.pub-gf-row:last-child{border-bottom:0}
.pub-gf-k{font-size:14.5px; color:var(--ac-ink); min-width:0}
.pub-gf-bar{display:block; height:10px; background:var(--ac-n-100); border-radius:999px; overflow:hidden}
.pub-gf-bar i{display:block; height:100%; background:var(--ac-deep); border-radius:999px}
.pub-gf-v{font-size:14px; color:var(--ac-ink); text-align:right; font-variant-numeric:tabular-nums}
.pub-gf-p{font-size:13px; color:var(--ac-n-500); text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:720px){
  /* The bar is the first thing to go: the figure and the label carry the
     meaning, and a 40px bar carries none. */
  .pub-gf-row{grid-template-columns:minmax(0,1fr) 7.5rem 3.2rem; gap:var(--ac-3)}
  .pub-gf-bar{display:none}
}

/* ==========================================================================
   THE MARKETING PAGES, 2026 REVISION.
   ==========================================================================
   Everything below extends the pub- system rather than replacing it, and
   every value is a token. Three rules drove the revision:

   THE HERO IS LIGHT NOW. It was deep navy with a light application
   screenshot sitting on it, so the two brightest things on the page competed
   and the product lost. A pale wash behind a white surface lets the
   screenshot be the thing you look at.

   RED STAYS RARE. The marketing CTA is one of the four places the brand red
   is allowed, and it is used here for exactly that: the primary invitation
   and the one highlighted phrase in the headline. Nothing else on these
   pages is red.

   A SUPPORTING BLUE IS ADDED, not substituted. The eight contrast-tested
   values are untouched. This is one further hue for icon and accent work on
   the marketing pages, mixed from Primary so it stays in the same family
   rather than arriving from another palette.
   ====================================================================== */
/* ---- header ---- */
.pub-nav--mkt{position:sticky; top:0; z-index:40; border-bottom:1px solid transparent;
  transition:border-color var(--ac-fast) var(--ac-ease), box-shadow var(--ac-fast) var(--ac-ease)}
.pub-nav--mkt.stuck{border-bottom-color:var(--ac-border); box-shadow:0 1px 2px rgba(23,23,23,.04)}
.pub-nav--mkt .pub-inner{display:flex; align-items:center; gap:var(--ac-6); min-height:72px}
.pub-nav--mkt .pub-nav-links{margin-left:auto}
.pub-nav-act{display:flex; align-items:center; gap:var(--ac-4)}
.pub-nav-signin{font-size:15px; color:var(--ac-navy-700); text-decoration:none}
.pub-nav-signin:hover{color:var(--ac-navy-900); text-decoration:underline}
@media (max-width:900px){.pub-nav-act{display:none}}

/* ---- hero ---- */
.pub-hero--light{background:
    radial-gradient(95% 120% at 72% 0%, var(--ac-mkt-wash), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--ac-good) 5%, var(--ac-n-0)), var(--ac-n-0) 78%),
    var(--ac-n-0);
  color:var(--ac-ink); padding:var(--ac-24) 0 var(--ac-20); min-height:650px; display:flex; align-items:center}
.pub-hero--light h1{color:var(--ac-navy-900); font-size:clamp(42px,5.4vw,64px); line-height:1.02;
  letter-spacing:-.032em; margin:0 0 var(--ac-5)}
.pub-hl{color:var(--ac-accent)}
/* The red phrase is one thought and breaks badly in two. It is held on one
   line only where there is room for it; below that the headline is allowed to
   wrap wherever it needs to. */
@media (min-width:1024px){.pub-hero--light .pub-hl{white-space:nowrap}}
/* The lede loses the serif here. The serif was the whole of "warmer outside"
   on a navy hero; against a light hero next to a product screenshot it reads
   as a different page rather than a warmer one. */
.pub-hero--light .pub-lead{color:var(--ac-n-500); font-family:var(--ac-font-body);
  font-size:clamp(17px,1.5vw,19px); line-height:1.62; max-width:52ch}
.pub-hero--light .pub-eyebrow{color:var(--ac-accent)}
.pub-hero--light .pub-cta{margin-top:var(--ac-8)}

.pub-trust{list-style:none; display:flex; flex-wrap:wrap; gap:var(--ac-2) var(--ac-6);
  margin:var(--ac-6) 0 0; padding:0; font-size:13.5px; color:var(--ac-n-500)}
.pub-trust li{display:flex; align-items:center; gap:7px}
/* The tick is drawn, not a character, so it cannot be read out by a screen
   reader as punctuation. NAVY, not green: green in this product means a state
   somebody reached (submitted, won, completed), and a marketing tick
   confirming a trial term is not a state. Reserving the hue keeps it worth
   something where it does mean that. */
.pub-trust li::before{content:""; flex:none; width:14px; height:14px; border-radius:50%;
  background:var(--ac-navy-600); -webkit-mask:var(--ac-tickmask) center/9px 9px no-repeat;
  mask:var(--ac-tickmask) center/9px 9px no-repeat}

.pub-hero-media{position:relative}
/* A soft lift behind the screenshot, so the white surface separates from the
   white page without needing a heavier border. */
.pub-shot--hero{position:relative; border-radius:18px;
  box-shadow:0 25px 60px rgba(11,31,58,.12), 0 4px 16px rgba(11,31,58,.08)}
.pub-shot--hero::before{content:""; position:absolute; inset:8% -6% -10% -6%; z-index:-1;
  border-radius:50%; background:color-mix(in srgb, var(--ac-good) 13%, transparent); filter:blur(46px)}
.pub-shotnote{margin:var(--ac-4) 0 0; text-align:center; font-size:13px; color:var(--ac-text-muted)}

/* ---- cards ---- */
.pub-cardgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pub-cardgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.pub-cardgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pub-cardgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pub-cardgrid--4,.pub-cardgrid--3{grid-template-columns:1fr}}
.pub-card{border-radius:16px; box-shadow:0 1px 2px rgba(11,31,58,.02), 0 8px 28px rgba(11,31,58,.05)}
.pub-card:hover{transform:translateY(-2px); box-shadow:0 12px 35px rgba(11,31,58,.08)}
/* THE ICONS ARE BLUE, not one colour each. A grid where every card carries a
   different bright square is decoration standing in for hierarchy. */
.pub-card .pub-icon{width:38px; height:38px; padding:8px; border-radius:10px;
  background:var(--ac-mkt-blue-soft); color:var(--ac-mkt-blue); box-sizing:border-box}

.pub-value h3{margin:0 0 var(--ac-2); color:var(--ac-navy-900)}
.pub-value p{margin:0; color:var(--ac-n-500)}
.pub-value{padding-top:var(--ac-4); border-top:2px solid var(--ac-mkt-blue)}

/* THE BENEFIT LIST loses its bullets for drawn ticks, which is the one place
   these pages spend the brand red on something that is not a button. */
.pub-split .pub-list{list-style:none; padding-left:0; margin-top:var(--ac-6)}
.pub-split .pub-list li{position:relative; padding-left:30px; margin:0 0 var(--ac-4); color:var(--ac-n-600)}
.pub-split .pub-list li::before{content:""; position:absolute; left:0; top:2px; width:19px; height:19px;
  border-radius:50%; background:color-mix(in srgb, var(--ac-accent) 10%, var(--ac-n-0));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ac-accent) 22%, transparent)}
.pub-split .pub-list li::after{content:""; position:absolute; left:5px; top:7px; width:9px; height:9px;
  background:var(--ac-accent); -webkit-mask:var(--ac-tickmask) center/9px 9px no-repeat;
  mask:var(--ac-tickmask) center/9px 9px no-repeat}

.pub-proof{margin:0; display:flex; flex-direction:column}
.pub-proof figcaption{margin-top:var(--ac-4); font-size:14px; line-height:1.55; color:var(--ac-n-500)}
.pub-proof figcaption b{display:block; color:var(--ac-navy-900); font-weight:600; margin-bottom:2px}
.pub-datanote{margin-top:var(--ac-12); text-align:center}

/* ---- the design audit, 2026: proof large enough to read ----
   One lead screen across the whole width, then two focused crops of real
   captures. The crops are CSS: the same image files, a square box, and
   object-position aimed at the panel that makes the point. Nothing is
   invented and the 2x file supplies the detail the crop enlarges. */
.pub-proofgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ac-8) var(--ac-6); margin-top:var(--ac-8)}
.pub-proof--lead{grid-column:1/-1}
.pub-proof--lead .pub-shot{aspect-ratio:auto}
.pub-proof--lead .pub-shot img{height:auto}
.pub-shot--crop{aspect-ratio:5/4}
.pub-shot--crop-right img{object-position:100% 0}
.pub-shot--crop-board img{object-position:49% 0}
@media (max-width:640px){.pub-proofgrid{grid-template-columns:1fr}}
/* The hero shot at laptop widths and up: a 4:3 window onto the decision
   content (the closing-soon list and its overdue count) instead of the whole
   application shell shrunk to fit, so the text in it is legible. */
@media (min-width:1280px){
  .pub-shot--hero{aspect-ratio:7/5}
  .pub-shot--hero img{object-position:64% 0}
}

/* The audience list: hairline rows in two columns, one outcome and one link
   each, so the page is not three equal card grids in a row. */
.pub-audlist{list-style:none; margin:var(--ac-8) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--ac-10)}
.pub-audlist li{padding:var(--ac-5) 0; border-top:1px solid var(--ac-border)}
.pub-audlist h3{margin:0 0 var(--ac-2)}
.pub-audlist p{margin:0 0 var(--ac-2); color:var(--ac-n-500)}
.pub-audlist a{font-weight:500; color:var(--ac-blue-strong)}
@media (max-width:760px){.pub-audlist{grid-template-columns:1fr}}

/* The trust block: six labelled facts. Mono labels at the 12px floor. */
.pub-trustgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ac-6) var(--ac-8); margin:var(--ac-8) 0 0}
.pub-trustgrid dt{font-family:var(--ac-font-mono); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ac-text-muted); margin:0 0 var(--ac-2)}
.pub-trustgrid dd{margin:0; font-size:15px; line-height:1.55; color:var(--ac-text)}
.pub-trustgrid a{color:var(--ac-blue-strong)}
@media (max-width:900px){.pub-trustgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pub-trustgrid{grid-template-columns:1fr}}

/* Plan cards: who the plan is for, from its real limits, and the launch to
   list transition as structure rather than only inside the sentence. */
.pub-plan-fit{font-size:14px; line-height:1.5; color:var(--ac-n-500); margin:0 0 var(--ac-4)}
.pub-plan-then{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--ac-text-muted); margin:0 0 var(--ac-4)}
.pub-plan-then b{color:var(--ac-text-heading); font-family:var(--ac-font-mono); font-weight:500; font-size:13px}
.pub-plan-tag{font-family:var(--ac-font-mono); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ac-blue-strong); background:var(--ac-blue-soft); padding:2px 8px; border-radius:var(--ac-r-full)}
.pub-glossary{margin:var(--ac-3) 0 0; max-width:72ch}
.pub-glossary dt{display:inline; font-weight:600; color:var(--ac-text-heading)}
.pub-glossary dd{display:inline; margin:0}
.pub-glossary dd::after{content:""; display:block; height:var(--ac-2)}
.pub-billsum{list-style:none; margin:0 auto var(--ac-6); padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ac-2) var(--ac-6); font-size:14px}
.pub-cta-final .pub-billsum{color:color-mix(in srgb, var(--ac-n-0) 82%, transparent)}

.pub-footer-tag{margin:var(--ac-4) 0 0; font-size:14px; color:var(--ac-text-muted)}

/* ---- the supporting blue in use ----
   MARKETING: red carries the one conversion action, blue carries the
   secondary, navy is the structure. INSIDE THE PRODUCT the split inverts and
   red is not a button at all: navy is primary, blue is the intelligent
   action, red is urgency and the brand mark only. The reason is that a
   product screen shows deadlines, and a red Add-to-Pipeline button beside a
   red overdue pill makes the one signal that matters unreadable. */
.pub-cta .ac-btn--secondary{border-color:var(--ac-blue-strong); color:var(--ac-blue-strong)}
.pub-cta .ac-btn--secondary:hover{background:var(--ac-blue-soft); color:var(--ac-blue-strong)}

/* THE INTELLIGENT ACTION, filled. #4E82EF cannot hold a white label at 3.64:1,
   so the fill is the same hue carried to 5.14:1 and the accent value is kept
   for the shapes: selected states, active rules, icons, focus. */
.ac-btn--intel{background:var(--ac-blue-strong); color:var(--ac-n-0); border:1.5px solid transparent}
.ac-btn--intel:hover{background:var(--ac-blue-strong-hover); color:var(--ac-n-0)}

/* ---- the pricing page, 2026 revision ---- */
/* The hero takes the same pale ground as the homepage so the two pages read
   as one site rather than two that happen to share a logo. */
.pub-prichero{background:
    radial-gradient(90% 130% at 50% 0%, var(--ac-mkt-wash), transparent 68%),
    var(--ac-n-0);
  padding-top:var(--ac-16)}
.pub-prichero h1{color:var(--ac-navy-900); font-size:clamp(34px,4.2vw,48px); line-height:1.06;
  letter-spacing:-.03em; margin:0 0 var(--ac-4)}
.pub-prichero .pub-lead{color:var(--ac-n-500); max-width:60ch}

/* THE CURRENT PAGE, marked with a rule rather than a colour alone, so it is
   not carried by hue for anybody who cannot separate the two. */
.pub-nav-links a.on{color:var(--ac-navy-900); font-weight:600; position:relative}
.pub-nav-links a.on::after{content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px; background:var(--ac-accent)}

/* THE FAQ OPENS RATHER THAN SHOUTS. Eight answers laid open is a wall of
   text; the questions are what somebody scans and the answer is what they
   choose to read. */
.pub-faqitem{background:var(--ac-n-0); border:1px solid var(--ac-border); border-radius:12px;
  padding:16px 20px; margin:0}
.pub-faqitem + .pub-faqitem{margin-top:var(--ac-3)}
.pub-faqitem > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  font-weight:600; font-size:16px; color:var(--ac-navy-900)}
.pub-faqitem > summary::-webkit-details-marker{display:none}
.pub-faqitem > summary::after{content:""; margin-left:auto; flex:none; width:9px; height:9px;
  border-right:2px solid var(--ac-n-400); border-bottom:2px solid var(--ac-n-400);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--ac-fast) var(--ac-ease)}
.pub-faqitem[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.pub-faqitem > p{margin:12px 0 0; color:var(--ac-n-500); font-size:15px; line-height:1.6}
.pub-faqgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--ac-3) var(--ac-5); align-items:start}
@media (max-width:900px){.pub-faqgrid{grid-template-columns:1fr}}
/* The comparison sits on its own surface with a name, rather than as a bare
   grid hanging off the bottom of the cards. */
.pub-compare{background:var(--ac-n-0); border:1px solid var(--ac-border); border-radius:16px;
  padding:var(--ac-8); margin-top:var(--ac-10);
  box-shadow:0 1px 2px rgba(11,31,58,.02), 0 8px 28px rgba(11,31,58,.05)}
.pub-compare h2{margin:0 0 var(--ac-2); font-size:24px}
.pub-compare .pub-measure{color:var(--ac-n-500); font-size:15px; margin:0 0 var(--ac-6)}
/* THE FEATURED PLAN LIFTS, by a little. The brief allows four to eight pixels
   and means it: a card that leaps off the row stops reading as one of four
   comparable things. */
.pub-plan--featured{transform:translateY(-6px)}
@media (max-width:640px){.pub-plan--featured{transform:none}}


/* ==========================================================================
   THE PUBLIC SCOPE (owner's ruling, 7 September 2026).
   ==========================================================================
   Every public route paints with the marketing set and nothing else: the
   colour gate reads the rendered pages and refuses any other value. Rather
   than rewriting each pub- rule, the tokens those rules read are re-pointed
   here, inside the public bodies only, so a derived scale step can never
   reach a public page: each step resolves to one of the seven named colours
   or to white. The product keeps its own set on signed-in routes.

   Red: revoked as the marketing conversion action on 7 September 2026 (the
   5 September allowance is withdrawn, see assets/brand/design-system.md).
   The one conversion action is action blue. Red stays in the logo files.
   Gold and green: not on a public route at all. */
body.pub-body, body.pub-auth {
  --ac-ink: var(--ac-mkt-navy);
  --ac-text: var(--ac-mkt-navy);
  --ac-text-heading: var(--ac-mkt-navy);
  --ac-text-muted: var(--ac-mkt-text-2);
  --ac-primary: var(--ac-mkt-navy);
  --ac-deep: var(--ac-mkt-navy-deep);
  --ac-bg-dark: var(--ac-mkt-navy-deep);
  --ac-page: var(--ac-mkt-surface-1);
  --ac-bg: var(--ac-n-0);
  --ac-bg-alt: var(--ac-mkt-surface-1);
  --ac-surface: var(--ac-mkt-surface-1);
  --ac-border: var(--ac-mkt-surface-3);
  --ac-border-strong: var(--ac-mkt-surface-3);
  --ac-hairline: var(--ac-mkt-surface-3);
  --ac-n-25: var(--ac-mkt-surface-1);
  --ac-n-50: var(--ac-mkt-surface-1);
  --ac-n-100: var(--ac-mkt-surface-3);
  --ac-n-200: var(--ac-mkt-surface-3);
  --ac-n-300: var(--ac-mkt-text-2);
  --ac-n-400: var(--ac-mkt-text-2);
  --ac-n-500: var(--ac-mkt-text-2);
  --ac-n-600: var(--ac-mkt-navy);
  --ac-n-700: var(--ac-mkt-navy);
  --ac-n-800: var(--ac-mkt-navy);
  --ac-navy: var(--ac-mkt-navy);
  --ac-navy-50: var(--ac-mkt-surface-2);
  --ac-navy-100: var(--ac-mkt-surface-2);
  --ac-navy-200: var(--ac-mkt-surface-2);
  --ac-navy-300: var(--ac-mkt-text-2);
  --ac-navy-400: var(--ac-mkt-text-2);
  --ac-navy-500: var(--ac-mkt-navy);
  --ac-navy-600: var(--ac-mkt-navy);
  --ac-navy-700: var(--ac-mkt-navy);
  --ac-navy-800: var(--ac-mkt-navy-deep);
  --ac-navy-900: var(--ac-mkt-navy);
  --ac-text-on-dark: var(--ac-n-0);
  --ac-text-muted-dark: var(--ac-n-0);
  --ac-text-faint-dark: var(--ac-n-0);
  --ac-link: var(--ac-mkt-action);
  --ac-link-hover: var(--ac-mkt-navy);
  --ac-focus: var(--ac-mkt-action);
  --ac-info: var(--ac-mkt-action);
  --ac-info-bg: var(--ac-mkt-surface-2);
  --ac-accent: var(--ac-mkt-action);
  --ac-red: var(--ac-mkt-action);
  --ac-red-50: var(--ac-mkt-surface-2);
  --ac-red-100: var(--ac-mkt-surface-2);
  --ac-red-200: var(--ac-mkt-surface-2);
  --ac-red-600: var(--ac-mkt-action);
  --ac-red-700: var(--ac-mkt-navy);
  --ac-red-800: var(--ac-mkt-navy);
  --ac-red-900: var(--ac-mkt-navy-deep);
  --ac-blue: var(--ac-mkt-action);
  --ac-blue-hover: var(--ac-mkt-navy);
  --ac-blue-strong: var(--ac-mkt-action);
  --ac-blue-strong-hover: var(--ac-mkt-navy);
  --ac-blue-soft: var(--ac-mkt-surface-2);
  --ac-mkt-blue: var(--ac-mkt-action);
  --ac-mkt-blue-soft: var(--ac-mkt-surface-2);
  --ac-gold: var(--ac-mkt-action);
  --ac-gold-on-dark: var(--ac-n-0);
  --ac-gold-400: var(--ac-mkt-surface-3);
  --ac-gold-600: var(--ac-mkt-action);
  --ac-warning: var(--ac-mkt-action);
  --ac-warning-ink: var(--ac-mkt-navy);
  --ac-warning-bg: var(--ac-mkt-surface-2);
  --ac-good: var(--ac-mkt-action);
  --ac-success: var(--ac-mkt-action);
  --ac-success-bg: var(--ac-mkt-surface-2);
  --ac-urgent: var(--ac-mkt-navy);
  --ac-urgent-ink: var(--ac-mkt-navy);
  --ac-error-bg: var(--ac-mkt-surface-2);
  color: var(--ac-mkt-navy);
}
/* Buttons on the public routes: the one conversion action is action blue,
   its hover is navy, and the secondary control is navy on white. */
body.pub-body .ac-btn--accent, body.pub-auth .ac-btn--accent{background:var(--ac-mkt-action); border-color:var(--ac-mkt-action); color:var(--ac-n-0)}
body.pub-body .ac-btn--accent:hover, body.pub-auth .ac-btn--accent:hover{background:var(--ac-mkt-navy); border-color:var(--ac-mkt-navy); color:var(--ac-n-0)}
body.pub-body .ac-btn--secondary, body.pub-auth .ac-btn--secondary{background:var(--ac-n-0); border-color:var(--ac-mkt-navy); color:var(--ac-mkt-navy)}
body.pub-body .ac-btn--secondary:hover, body.pub-auth .ac-btn--secondary:hover{background:var(--ac-mkt-surface-2); color:var(--ac-mkt-navy)}
body.pub-body .pub-cta .ac-btn--secondary{border-color:var(--ac-mkt-navy); color:var(--ac-mkt-navy)}
body.pub-body .pub-cta .ac-btn--secondary:hover{background:var(--ac-mkt-surface-2); color:var(--ac-mkt-navy)}
/* The featured plan's badge: action blue with a white label, never gold. */
body.pub-body .pub-plan-badge{background:var(--ac-mkt-action); color:var(--ac-n-0)}
/* The active-page underline in the nav follows the action colour. */
body.pub-body .pub-nav-links a.on::after{background:var(--ac-mkt-action)}
/* The public auth pages: light, one column, the marketing surfaces. */
body.pub-auth{background:var(--ac-mkt-surface-1)}
body.pub-auth .ac-card{background:var(--ac-n-0); border:1px solid var(--ac-mkt-surface-3); box-shadow:none}
body.pub-auth input, body.pub-auth select, body.pub-auth textarea{border-color:var(--ac-mkt-surface-3); background:var(--ac-n-0); color:var(--ac-mkt-navy)}
body.pub-auth input:focus, body.pub-auth select:focus, body.pub-auth textarea:focus{border-color:var(--ac-mkt-action)}
/* SVG on the public pages: shapes take the action colour, never the product blue. */
body.pub-body .pub-icon{color:var(--ac-mkt-action); background:var(--ac-mkt-surface-2)}
body.pub-body .pub-check{color:var(--ac-mkt-navy); fill:none}

/* ---- the public navigation menus (7 September 2026) ----
   Three disclosure menus and one link. Built on details/summary so they work
   without the script; the script only closes one when another opens. Mobile
   first: below 900px the top links are hidden and the single Menu disclosure
   carries the same items in groups. */
.pub-nav-links{gap:var(--ac-5)}
.pub-menu{position:relative}
.pub-menu > summary{list-style:none; cursor:pointer; color:var(--ac-mkt-navy); font-size:15px; font-weight:500;
  padding:6px 2px; display:flex; align-items:center; gap:6px}
.pub-menu > summary::-webkit-details-marker{display:none}
.pub-menu > summary::after{content:""; width:7px; height:7px; border-right:1.5px solid var(--ac-mkt-text-2);
  border-bottom:1.5px solid var(--ac-mkt-text-2); transform:rotate(45deg) translateY(-2px)}
.pub-menu[open] > summary{color:var(--ac-mkt-action)}
.pub-menu[open] > summary::after{transform:rotate(-135deg) translateY(2px)}
.pub-menu-panel{position:absolute; left:0; top:calc(100% + 10px); min-width:260px; background:var(--ac-n-0);
  border:1px solid var(--ac-mkt-surface-3); border-radius:12px; padding:8px; display:flex; flex-direction:column;
  box-shadow:0 12px 32px color-mix(in srgb, var(--ac-mkt-navy) 12%, transparent); z-index:50}
.pub-menu-panel a{display:block; padding:9px 12px; border-radius:8px; color:var(--ac-mkt-navy); font-size:15px;
  font-weight:500; text-decoration:none; white-space:nowrap}
.pub-menu-panel a:hover{background:var(--ac-mkt-surface-2); color:var(--ac-mkt-navy)}
.pub-menu-panel a.pub-menu-guide{border-top:1px solid var(--ac-mkt-surface-3); border-radius:0; margin-top:4px; padding-top:12px; color:var(--ac-mkt-text-2); font-weight:500}
.pub-menu-panel a.pub-menu-guide + a.pub-menu-guide{border-top:0; margin-top:0; padding-top:9px}
.pub-nav-m-links b{display:block; padding:10px 10px 4px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac-mkt-text-2)}
@media (max-width:900px){
  .pub-nav-m-links{max-height:calc(100vh - 100px); overflow-y:auto; min-width:260px}
}

/* ==========================================================================
   THE PUBLIC SHELL, 7 September 2026 REDESIGN.
   ==========================================================================
   Navy carries the structure: the header, the footer and the closing band.
   Action blue carries the one conversion action. Every value below is a
   marketing-set token, so the colour gate stays green, and every alpha is a
   color-mix of a named colour rather than a literal rgba.

   THE HEADER IS NAVY. The white header put the brand and the page on the
   same surface; a navy band gives the site an edge to hang from and the
   knockout lockup its proper ground. The footer is deep navy, and the
   closing band and the footer read as one continuous dark block with a
   hairline between them (the section-rhythm rule in design-system.md was
   amended the same day: the one permitted dark adjacency is this pair).

   THE LOGO FOLLOWS THE GROUND: the knockout lockup (lockup-dark-*) on the
   navy header, footer and closing band; the navy lockup (lockup-light-*) on
   every light surface, which on the public pages means the auth cards. */
.pub-nav--mkt{background:linear-gradient(90deg, var(--ac-mkt-navy), var(--ac-mkt-navy-deep)); color:var(--ac-n-0);
  border-bottom:1px solid color-mix(in srgb, var(--ac-n-0) 8%, transparent)}
.pub-nav--mkt.stuck{border-bottom-color:color-mix(in srgb, var(--ac-n-0) 12%, transparent);
  box-shadow:0 6px 24px color-mix(in srgb, var(--ac-mkt-navy-deep) 28%, transparent)}
.pub-nav--mkt .pub-inner{min-height:74px}
/* The knockout lockup carries its own clear space; the negative margin keeps
   the visible mark inside the 74px band rather than stretching it. */
.pub-nav--mkt .pub-nav-logo img{width:200px; max-width:52vw; margin:-8px 0}
.pub-nav--mkt .pub-nav-links a{color:var(--ac-n-0); font-size:15px; font-weight:500; opacity:.86}
.pub-nav--mkt .pub-nav-links a:hover{color:var(--ac-n-0); opacity:1}
.pub-nav--mkt .pub-nav-links a.on{color:var(--ac-n-0); opacity:1; font-weight:600}
.pub-nav--mkt .pub-menu > summary{color:var(--ac-n-0); opacity:.86}
.pub-nav--mkt .pub-menu > summary:hover, .pub-nav--mkt .pub-menu[open] > summary{color:var(--ac-n-0); opacity:1}
.pub-nav--mkt .pub-menu > summary::after{border-color:var(--ac-n-0)}
/* THE TWO ACTIONS. Sign in is a quiet outline on the navy; Get started is
   the filled action blue, the same button the hero uses. */
.pub-nav--mkt .pub-nav-signin{display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--ac-n-0) 38%, transparent); color:var(--ac-n-0); font-size:14px; font-weight:600}
.pub-nav--mkt .pub-nav-signin:hover{color:var(--ac-n-0); border-color:var(--ac-n-0); text-decoration:none}
.pub-nav--mkt .pub-nav-act .ac-btn--sm{height:40px; display:inline-flex; align-items:center; border-radius:10px; padding:0 18px; font-size:14px}
.pub-nav--mkt .pub-nav-m > summary{color:var(--ac-n-0); border-color:color-mix(in srgb, var(--ac-n-0) 38%, transparent)}
.pub-nav--mkt .pub-nav-m[open] > summary{background:color-mix(in srgb, var(--ac-n-0) 10%, transparent)}
/* Focus on a navy surface is a white ring, as the design system requires. */
.pub-nav--mkt :focus-visible, .pub-footer :focus-visible, .pub-cta-final :focus-visible{outline-color:var(--ac-n-0)}

/* ---- the closing band ---- */
.pub-cta-final{background:
    radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--ac-mkt-action) 26%, transparent), transparent 30%),
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--ac-mkt-action) 18%, transparent), transparent 26%),
    linear-gradient(135deg, var(--ac-mkt-navy), var(--ac-mkt-navy-deep));
  color:var(--ac-n-0); padding:var(--ac-20) 0}
.pub-cta-final h2{color:var(--ac-n-0); font-size:clamp(28px,3.4vw,38px); letter-spacing:-.025em}
.pub-cta-final p, .pub-cta-final .pub-measure{color:var(--ac-mkt-surface-3)}
.pub-cta-final .pub-eyebrow{color:var(--ac-mkt-surface-2)}
.pub-cta-final .pub-cta-note{color:var(--ac-mkt-surface-3)}
.pub-cta-final .pub-billsum{color:var(--ac-mkt-surface-3)}
.pub-cta-final .pub-cta{margin-top:var(--ac-6)}
.pub-cta-final.pub-cta-final--center, .pub-cta-final .pub-center{text-align:center}
.pub-cta-final .pub-center .pub-cta{justify-content:center}
.pub-cta-final .pub-center .pub-measure{margin-left:auto; margin-right:auto}
body.pub-body .ac-btn--ghost{background:color-mix(in srgb, var(--ac-n-0) 4%, transparent);
  border:1.5px solid color-mix(in srgb, var(--ac-n-0) 44%, transparent); color:var(--ac-n-0)}
body.pub-body .ac-btn--ghost:hover{background:color-mix(in srgb, var(--ac-n-0) 10%, transparent); border-color:var(--ac-n-0); color:var(--ac-n-0)}

/* ---- the footer ---- */
.pub-footer{background:var(--ac-mkt-navy-deep); color:var(--ac-mkt-surface-3);
  border-top:1px solid color-mix(in srgb, var(--ac-n-0) 10%, transparent); padding:var(--ac-12) 0 var(--ac-6)}
.pub-footer-top{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:var(--ac-8); align-items:start}
.pub-footer-logo img{width:200px; margin:-12px 0 0 -10px}
.pub-footer-tag{color:var(--ac-mkt-surface-3); font-size:14px; margin:var(--ac-2) 0 0; max-width:26ch}
.pub-footer-cols{display:contents}
.pub-footer h2{color:var(--ac-n-0); font-size:14px; font-weight:600; margin:0 0 var(--ac-3)}
.pub-footer a{color:var(--ac-mkt-surface-3); font-size:14px}
.pub-footer a:hover{color:var(--ac-n-0)}
.pub-footer-bar{border-top:1px solid color-mix(in srgb, var(--ac-n-0) 10%, transparent); margin-top:var(--ac-10); padding-top:var(--ac-5);
  font-size:13px; color:var(--ac-mkt-surface-3); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--ac-2) var(--ac-6)}
@media (max-width:980px){.pub-footer-top{grid-template-columns:repeat(3,1fr)} .pub-footer-top > :first-child{grid-column:1/-1}}
@media (max-width:560px){.pub-footer-top{grid-template-columns:repeat(2,1fr)}}

/* ---- page headers on the secondary pages ----
   One treatment for About, FAQ, Contact, the blog, the guides and the demo:
   the pale wash the pricing hero uses, the eyebrow, the heading and one
   lede, so every page opens the same way. */
.pub-pagehead{background:
    radial-gradient(90% 130% at 50% 0%, var(--ac-mkt-wash), transparent 68%),
    var(--ac-n-0);
  padding:var(--ac-16) 0 var(--ac-12)}
.pub-pagehead h1{font-size:clamp(34px,4.2vw,48px); line-height:1.06; letter-spacing:-.03em; margin:0 0 var(--ac-4)}
.pub-pagehead .pub-lead{margin-bottom:0}
.pub-pagehead .pub-eyebrow{color:var(--ac-mkt-action)}
.pub-body .pub-eyebrow{color:var(--ac-mkt-action)}
.pub-pagehead--center{text-align:center}
.pub-pagehead--center .pub-lead, .pub-pagehead--center .pub-article{margin-left:auto; margin-right:auto}
/* A form on a public page sits in a card on the wash, not loose on the page. */
.pub-formcard{background:var(--ac-n-0); border:1px solid var(--ac-mkt-surface-3); border-radius:16px; padding:var(--ac-6);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ac-mkt-navy-deep) 2%, transparent), 0 8px 28px color-mix(in srgb, var(--ac-mkt-navy-deep) 5%, transparent)}
.pub-formcard .ac-btn{width:100%}
.pub-contactlist{list-style:none; margin:var(--ac-6) 0 0; padding:0; display:grid; gap:var(--ac-3)}
.pub-contactlist li{display:flex; gap:var(--ac-3); align-items:flex-start; padding:var(--ac-3) 0; border-top:1px solid var(--ac-mkt-surface-3)}
.pub-contactlist b{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-mkt-text-2); font-weight:600; margin-bottom:2px}
/* The FAQ page is the pricing FAQ's accordion, in one column. */
.pub-faqpage .pub-faqitem{max-width:none}
.pub-faqpage .pub-faqitem > p{max-width:68ch}
.pub-faqpage h2.pub-faqgroup{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-mkt-text-2); font-weight:600; margin:var(--ac-8) 0 var(--ac-3)}
.pub-faqpage h2.pub-faqgroup:first-child{margin-top:0}

/* ---- the audience cards ----
   Four cards, one drawn visual each, one descriptor and one link to a page
   that exists. The class name is the audience list's, kept so the section is
   found by the same name it was pinned under. */
.pub-audlist--cards{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ac-5)}
.pub-audlist--cards li{border:1px solid var(--ac-mkt-surface-3); border-radius:16px; background:var(--ac-n-0); padding:var(--ac-6);
  display:flex; flex-direction:column; box-shadow:0 1px 2px color-mix(in srgb, var(--ac-mkt-navy-deep) 2%, transparent), 0 8px 28px color-mix(in srgb, var(--ac-mkt-navy-deep) 5%, transparent);
  transition:transform var(--ac-fast) var(--ac-ease), box-shadow var(--ac-fast) var(--ac-ease)}
.pub-audlist--cards li:hover{transform:translateY(-2px); box-shadow:0 12px 35px color-mix(in srgb, var(--ac-mkt-navy-deep) 8%, transparent)}
.pub-audlist--cards p{flex:1}
.pub-audlist--cards a{margin-top:var(--ac-3); font-size:14px}
.pub-audvis{display:block; width:100%; height:auto; aspect-ratio:5/2; border-radius:10px; background:var(--ac-mkt-surface-2); margin:0 0 var(--ac-5); fill:none}
.pub-audvis .v-line{stroke:var(--ac-mkt-action); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.pub-audvis .v-soft{fill:var(--ac-n-0)}
.pub-audvis .v-mid{fill:var(--ac-mkt-surface-3)}
.pub-audvis .v-strong{fill:var(--ac-mkt-action)}
.pub-audvis .v-navy{fill:var(--ac-mkt-navy)}
@media (max-width:1080px){.pub-audlist--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pub-audlist--cards{grid-template-columns:1fr}}

/* ---- the benefit blocks ---- */
.pub-value{border-top:2px solid var(--ac-mkt-action)}
.pub-value .pub-icon{width:36px; height:36px; padding:8px; border-radius:10px; box-sizing:border-box; margin-bottom:var(--ac-3)}
/* The trust block sits on cards so the six facts read as six, not as prose. */
.pub-trustgrid > div{background:var(--ac-n-0); border:1px solid var(--ac-mkt-surface-3); border-radius:12px; padding:var(--ac-5)}
.pub-hero--light .pub-trust{font-size:14px}

/* ---- the pricing cards, restructured ----
   Name, fit, one dominant price, one launch line, three bullets, one button.
   The long pricing sentence leaves the card: the FAQ and the checkout carry
   it, and a card that repeats it four times is the wall the brief refused. */
.pub-plan{border-radius:18px; padding:var(--ac-6);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ac-mkt-navy-deep) 2%, transparent), 0 10px 24px color-mix(in srgb, var(--ac-mkt-navy-deep) 5%, transparent)}
.pub-plan h3{font-size:22px; margin:0 0 var(--ac-1)}
.pub-plan-fit{min-height:44px}
.pub-plan-pricerow{display:flex; align-items:flex-end; gap:6px; margin:var(--ac-2) 0 var(--ac-2)}
.pub-plan-price{font-size:44px; line-height:1; font-weight:700; letter-spacing:-.03em; color:var(--ac-mkt-navy-deep)}
.pub-plan-cycle{margin:0 0 5px}
.pub-plan-then{margin:0 0 var(--ac-5); min-height:24px}
.pub-plan-bullets{list-style:none; margin:0 0 var(--ac-6); padding:0; display:grid; gap:9px; font-size:14px; flex:1}
.pub-plan-bullets li{display:flex; gap:9px; align-items:flex-start; color:var(--ac-mkt-navy)}
.pub-plan-bullets li i{flex:none; width:18px; height:18px; border-radius:50%; background:var(--ac-mkt-surface-2); display:inline-flex;
  align-items:center; justify-content:center; margin-top:1px}
.pub-plan-bullets li i::after{content:""; width:9px; height:9px; background:var(--ac-mkt-action);
  -webkit-mask:var(--ac-tickmask) center/9px 9px no-repeat; mask:var(--ac-tickmask) center/9px 9px no-repeat}
.pub-plan .ac-btn{margin-top:auto}
/* The recommended plan: a two-pixel action-blue border, the badge centred on
   the top edge, a filled action-blue button, and a small lift at desktop. */
.pub-plan--featured{border:2px solid var(--ac-mkt-action); box-shadow:0 16px 34px color-mix(in srgb, var(--ac-mkt-action) 13%, transparent)}
body.pub-body .pub-plan-badge{left:50%; transform:translateX(-50%); top:-13px; padding:5px 14px; font-size:12px; letter-spacing:.08em; font-weight:600}
.pub-plan--ent{border-radius:16px; padding:18px 22px}
.pub-plan--ent .pub-plan-price--custom{color:var(--ac-mkt-text-2); font-size:14px; font-weight:600}
.pub-prichero .pub-lead{margin-left:auto; margin-right:auto; text-align:center}
.pub-toggle{background:var(--ac-mkt-surface-3); border-color:var(--ac-mkt-surface-3)}
.pub-toggle button{color:var(--ac-mkt-text-2); font-weight:600; font-size:13px}
.pub-toggle button[aria-pressed="true"]{background:var(--ac-mkt-navy); color:var(--ac-n-0)}
.pub-included{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ac-5); margin-top:var(--ac-6)}
.pub-included > div{background:var(--ac-n-0); border:1px solid var(--ac-mkt-surface-3); border-radius:14px; padding:var(--ac-5)}
.pub-included h3{font-size:16px; margin:0 0 var(--ac-2)}
.pub-included p{margin:0; font-size:14px; color:var(--ac-mkt-text-2)}
@media (max-width:900px){.pub-included{grid-template-columns:1fr}}
/* A form's submit on a public page is the one action on that page: action blue. */
body.pub-body .pub-formcard .ac-btn{background:var(--ac-mkt-action)}
body.pub-body .pub-formcard .ac-btn:hover{background:var(--ac-mkt-navy)}
/* An uploaded audience picture takes the drawing's frame: same size, cropped to fit. */
img.pub-audvis{object-fit:cover}

/* ------- THE 12 SEPTEMBER 2026 HOME PAGE: capability illustrations ---------
 * Eight cards, each carrying a DRAWN illustration rather than a screenshot.
 * The illustrations are inline SVG for one reason that is not aesthetic: a CSS
 * custom property does not cross into an external file loaded through an img
 * element, so an external illustration would have to carry its colours baked
 * in, which is a hex literal by another name. Inline, every fill and stroke
 * resolves to a token, and the colour gate can read them.
 *
 * The class names are the ones the audience visuals already use (v-soft,
 * v-mid, v-strong, v-navy, v-line), so there is one vocabulary for drawings on
 * this site rather than two.
 */
.pub-capvis{display:block; width:100%; height:auto; aspect-ratio:5/3; border-radius:12px;
  background:var(--ac-mkt-surface-2); margin:0 0 var(--ac-5); fill:none}
.pub-capvis .v-line{stroke:var(--ac-mkt-action); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.pub-capvis .v-soft{fill:var(--ac-n-0)}
.pub-capvis .v-mid{fill:var(--ac-mkt-surface-3)}
.pub-capvis .v-strong{fill:var(--ac-mkt-action)}
.pub-capvis .v-navy{fill:var(--ac-mkt-navy)}

.pub-caplist{list-style:none; margin:var(--ac-8) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ac-6)}
.pub-caplist li{border:1px solid var(--ac-mkt-surface-3); border-radius:16px;
  background:var(--ac-n-0); padding:var(--ac-5)}
.pub-caplist h3{margin:0 0 var(--ac-2); font-size:16px}
.pub-caplist p{margin:0; color:var(--ac-mkt-text-2); font-size:14px}
@media (max-width:1100px){.pub-caplist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pub-caplist{grid-template-columns:1fr}}

/* ------- the lifecycle band: five stages, drawn, never a screenshot ------- */
.pub-lifecycle{list-style:none; margin:var(--ac-8) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--ac-5); position:relative}
/* The connecting rule sits BEHIND the dots and stops at the first and last,
   so it reads as one run rather than a line that escapes the row. */
.pub-lifecycle::before{content:""; position:absolute; left:10%; right:10%; top:11px; height:2px;
  background:var(--ac-mkt-surface-3)}
.pub-lifecycle li{position:relative; text-align:center; padding-top:var(--ac-8)}
.pub-lc-dot{position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--ac-mkt-action);
  box-shadow:0 0 0 4px var(--ac-mkt-surface-1)}
.pub-lifecycle b{display:block; color:var(--ac-mkt-navy); margin-bottom:var(--ac-2)}
.pub-lifecycle span:not(.pub-lc-dot){display:block; color:var(--ac-mkt-text-2); font-size:14px}
@media (max-width:860px){
  .pub-lifecycle{grid-template-columns:1fr; gap:var(--ac-6); text-align:left}
  .pub-lifecycle::before{left:7px; right:auto; top:10px; bottom:10px; width:2px; height:auto}
  .pub-lifecycle li{text-align:left; padding-top:0; padding-left:var(--ac-8)}
  .pub-lc-dot{top:4px; left:0; transform:none}
}

/* ------- a glimpse inside: three cropped views, never a whole screen ------ */
.pub-glimpse{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ac-6); margin-top:var(--ac-8)}
@media (max-width:900px){.pub-glimpse{grid-template-columns:1fr}}
/* THE HERO SHOT IS A PANEL, AND THE SIDEBAR IS CUT OFF.
   A screenshot of the whole application shell names every module we have down
   the left edge, which is a contents page for anyone deciding what to build.
   The first capture of this redesign still showed it. The image is laid out
   wider than its frame and pulled left by exactly the sidebar's share of the
   width (160 of 960), so the window starts at the content and the navigation
   is outside it. Not a new image: the same capture, framed. */
.pub-shot--panel{aspect-ratio:16/9; overflow:hidden}
.pub-shot--panel img{width:120%; max-width:none; margin-left:-20%; object-position:0 0}
.pub-shot--crop-top img{object-position:50% 0}

/* A GLIMPSE, NOT A SPECIFICATION.
   object-position alone can only slide the window; in a three column grid the
   window is already as small as the column, so sliding it still showed most of
   a screen: every count, a ten row list with its columns, and the panel beside
   it. That is a field list, which is the thing this section is explicitly not
   allowed to publish.
   Scaling the image inside its frame is what actually shows LESS. The zoom and
   the point it zooms about are two numbers per figure, set where the figure is
   so the crop lives beside the caption it belongs to. No new image is made:
   this is the same capture, framed tighter. */
.pub-shot--zoom{aspect-ratio:4/3; overflow:hidden}
.pub-shot--zoom img{transform:scale(var(--z,1.8)); transform-origin:var(--zo,50% 0)}


/* THE MENU PANELS ARE LIGHT, AND SAY SO EXPLICITLY (owner's report,
   7 September 2026). The white link rule on the navy header outranked the
   panel rule by specificity, so the panels opened white on white and a link
   showed only on hover. Every panel link is navy on the light surface; hover
   and focus take surface 2; the current page's item is underlined in action
   blue. A panel is sized to its items, with 8px of padding and no empty
   space. The mobile Menu disclosure gets the same treatment. */
.pub-nav--mkt .pub-nav-links .pub-menu-panel{background:var(--ac-n-0); padding:8px; min-width:0; width:max-content}
.pub-nav--mkt .pub-nav-links .pub-menu-panel a{color:var(--ac-mkt-navy); opacity:1; font-weight:500; white-space:nowrap}
.pub-nav--mkt .pub-nav-links .pub-menu-panel a:hover,
.pub-nav--mkt .pub-nav-links .pub-menu-panel a:focus-visible{background:var(--ac-mkt-surface-2); color:var(--ac-mkt-navy); outline-color:var(--ac-mkt-action)}
.pub-nav--mkt .pub-nav-links .pub-menu-panel a.on{text-decoration:underline; text-decoration-color:var(--ac-mkt-action); text-decoration-thickness:2px; text-underline-offset:4px; font-weight:600}
.pub-nav--mkt .pub-nav-links .pub-menu-panel a.pub-menu-guide{color:var(--ac-mkt-text-2)}
.pub-nav--mkt .pub-nav-m-links{background:var(--ac-n-0); padding:8px; border:1px solid var(--ac-mkt-surface-3)}
.pub-nav--mkt .pub-nav-m-links a{color:var(--ac-mkt-navy); border-radius:8px}
.pub-nav--mkt .pub-nav-m-links a:hover,
.pub-nav--mkt .pub-nav-m-links a:focus-visible{background:var(--ac-mkt-surface-2); color:var(--ac-mkt-navy); outline-color:var(--ac-mkt-action)}
.pub-nav--mkt .pub-nav-m-links a.on{text-decoration:underline; text-decoration-color:var(--ac-mkt-action); text-decoration-thickness:2px; text-underline-offset:4px; font-weight:600}
.pub-nav--mkt .pub-nav-m-links a.ac-btn{color:var(--ac-n-0); border-radius:10px}
.pub-nav--mkt .pub-nav-m-links a.ac-btn:hover{background:var(--ac-mkt-navy); color:var(--ac-n-0)}

/* THE MOBILE MENU IS HIERARCHICAL (owner's request, 7 September 2026): the
   top level shows Product, Solutions and Resources as groups and the plain
   items beneath them; a group opens on a tap and its pages appear inside
   it. Same tokens as the desktop panels. */
.pub-nav-m-group{border-radius:8px}
.pub-nav-m-group > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:9px 10px; border-radius:8px; color:var(--ac-mkt-navy); font-size:15px; font-weight:600}
.pub-nav-m-group > summary::-webkit-details-marker{display:none}
.pub-nav-m-group > summary::after{content:""; width:7px; height:7px; border-right:1.5px solid var(--ac-mkt-navy);
  border-bottom:1.5px solid var(--ac-mkt-navy); transform:rotate(45deg) translateY(-2px); margin-right:4px}
.pub-nav-m-group[open] > summary{background:var(--ac-mkt-surface-2)}
.pub-nav-m-group[open] > summary::after{transform:rotate(-135deg) translateY(2px)}
.pub-nav-m-group > summary:hover, .pub-nav-m-group > summary:focus-visible{background:var(--ac-mkt-surface-2); outline-color:var(--ac-mkt-action)}
.pub-nav-m-group > div{display:flex; flex-direction:column; padding:2px 0 6px 12px}
.pub-nav-m-group > div a{font-weight:500}
/* The group headers inside the mobile Menu are navy on the light panel: the
   white Menu button rule above is scoped to the button alone. */
.pub-nav--mkt .pub-nav-m .pub-nav-m-group > summary{color:var(--ac-mkt-navy); border:0}
.pub-nav--mkt .pub-nav-m .pub-nav-m-group[open] > summary{background:var(--ac-mkt-surface-2)}

/* ---- the three-step signup (8 September 2026) ----
   Light ground, one column, a 640px card, the step indicator above it and
   a Back link inside it on steps 2 and 3. The marketing set only: navy for
   words, action blue for the one button and the active step, the light
   surfaces for everything else. No red button, no gold, no dark card. */
body.su-body{display:block; padding:0; min-height:100vh; background:var(--ac-mkt-surface-1)}
.su-head{display:flex; justify-content:center; padding:28px 20px 8px}
.su-head img{display:block; width:200px; height:auto}
.su-main{width:100%; max-width:640px; margin:0 auto; padding:8px 20px 48px; box-sizing:border-box}
.su-steps{margin:0 0 14px}
.su-steps ol{list-style:none; margin:0 0 8px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.su-steps li{height:5px; border-radius:3px; background:var(--ac-mkt-surface-3); overflow:hidden; font-size:0; color:transparent}
.su-steps li.done,.su-steps li.on{background:var(--ac-mkt-action)}
.su-stepline{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0; font-size:13px; color:var(--ac-mkt-text-2)}
.su-stepline b{color:var(--ac-mkt-navy); font-weight:600}
.su-card{background:var(--ac-n-0); border:1px solid var(--ac-mkt-surface-3); border-radius:14px; padding:32px}
.su-card h1{font-family:var(--ac-font-display); font-size:26px; line-height:1.2; color:var(--ac-mkt-navy); margin:0 0 6px}
.su-lead{font-size:15px; line-height:1.55; color:var(--ac-mkt-text-2); margin:0 0 20px}
.su-back{display:inline-block; margin:0 0 12px; font-size:14px; color:var(--ac-mkt-action); text-decoration:none}
.su-back:hover{text-decoration:underline}
.su-card .ac-msg{margin:0 0 16px}
.su-row{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:10px}
.su-check{display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; font-family:var(--ac-font-body); font-size:14px; line-height:1.5; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ac-mkt-navy)}
.su-check input{width:auto; margin:3px 0 0; flex:0 0 auto}
.su-check a{color:var(--ac-mkt-action)}
.su-search{position:relative}
.su-list{list-style:none; margin:-12px 0 16px; padding:0; border:1px solid var(--ac-mkt-surface-3); border-radius:10px; background:var(--ac-n-0); overflow:hidden}
.su-list li{padding:10px 14px; cursor:pointer; font-size:14px; line-height:1.35; color:var(--ac-mkt-navy); border-top:1px solid var(--ac-mkt-surface-3)}
.su-list li:first-child{border-top:0}
.su-list li:hover,.su-list li.on{background:var(--ac-mkt-surface-2)}
.su-list .su-meta{display:block; font-size:12px; color:var(--ac-mkt-text-2); margin-top:2px}
.su-linked{font-size:13px; color:var(--ac-mkt-text-2); margin:-8px 0 14px}
.su-foot{text-align:center; font-size:14px; color:var(--ac-mkt-text-2); margin:18px 0 0}
.su-foot a{color:var(--ac-mkt-action)}
.su-trial{font-size:13px; line-height:1.5; color:var(--ac-mkt-text-2); margin:10px 0 0; text-align:center}
/* The cycle switch: one pill, two choices. */
.su-cycle{display:inline-flex; position:relative; border:1px solid var(--ac-mkt-surface-3); border-radius:999px; padding:3px; margin:0 0 16px; background:var(--ac-mkt-surface-1)}
.su-cyc{position:relative; margin:0; font-family:var(--ac-font-body); font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ac-mkt-navy); cursor:pointer}
.su-cyc input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.su-cyc span{display:block; padding:7px 18px; border-radius:999px}
.su-cyc input:checked + span{background:var(--ac-mkt-navy); color:var(--ac-n-0)}
.su-cyc input:focus-visible + span{outline:3px solid var(--ac-mkt-action); outline-offset:1px}
/* The four plans, one choice, Pro featured. */
.su-plans{display:grid; gap:10px; margin:0 0 16px}
.su-plan{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--ac-mkt-surface-3); border-radius:12px; padding:14px 16px; margin:0; cursor:pointer; background:var(--ac-n-0); font-family:var(--ac-font-body); font-size:14px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ac-mkt-navy)}
.su-plan:hover{border-color:var(--ac-mkt-navy)}
.su-plan.on{border-color:var(--ac-mkt-action); box-shadow:0 0 0 1px var(--ac-mkt-action)}
.su-plan--featured{background:var(--ac-mkt-surface-2)}
.su-plan input{width:auto; margin:4px 0 0; flex:0 0 auto}
.su-plan-body{flex:1 1 auto; min-width:0}
.su-plan-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.su-plan-top strong{font-family:var(--ac-font-display); font-size:16px; font-weight:600; color:var(--ac-mkt-navy)}
.su-plan-badge{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--ac-mkt-action); color:var(--ac-n-0); border-radius:999px; padding:3px 9px}
.su-plan-price{margin-left:auto; font-size:16px; font-weight:500; color:var(--ac-mkt-navy)}
.su-plan-price small{font-size:12px; font-weight:400; color:var(--ac-mkt-text-2)}
.su-plan-meta{font-size:13px; color:var(--ac-mkt-text-2); margin-top:3px}
.su-plan-sent{font-size:12.5px; line-height:1.45; color:var(--ac-mkt-text-2); margin-top:3px}
@media (max-width:480px){
  .su-card{padding:22px 18px}
  .su-card h1{font-size:22px}
  .su-row{grid-template-columns:1fr}
  .su-plan-price{margin-left:0; flex-basis:100%}
}

/* ==========================================================================
   THE AWARDS LOADER (13 September 2026, owner's brief)
   --------------------------------------------------------------------------
   ONE loading system, four variants, three sizes, three presentation modes.
   It replaces the single treatment written earlier the same day; there is no
   second loader and no second piece of loading logic anywhere in the product.

   THE MARK IS assets/brand/icon.svg AND NOTHING ELSE. Referenced by src at
   every site; never copied into markup, never redrawn, never recoloured,
   never rotated, never stretched. The earlier treatment used icon-dark.svg,
   which is the KNOCKOUT export made for the navy sidebar: on the light page
   surface its white brackets were invisible and only the red star showed.
   That was a real defect and this is where it is fixed.

   WHICH VARIANT MEANS WHAT
     orbit     the default. A page, a dashboard, a sign-in, a workspace.
     scan      looking for something: grants, contracts, funders, eligibility.
     pipeline  a longer process with steps: a report, a document, an import.
     pulse     a quick action: a save, a stage move, a filter.

   MOTION IS transform AND opacity ONLY. Nothing here animates a property
   that would make the browser lay the page out again, and nothing changes
   the size of the box it sits in, so a loader appearing or clearing cannot
   move the content around it.

   COLOUR IS THE EXISTING PALETTE. The navy and the red are the brand tokens
   already defined at the top of this file; no new colour is introduced.
   ========================================================================== */

/* ---------------------------------------------------------------- the shell */
.awards-loader{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--ac-3); padding:var(--ac-6) var(--ac-4); text-align:center;
  font-family:var(--ac-font-body);
}
.awards-loader-message{
  margin:0; max-width:44ch; font-size:13px; line-height:1.55; color:var(--ac-n-500);
}
/* THE ICON AND WHATEVER MOVES AROUND IT share one square box. Its size is the
   only thing the size tokens change, so every variant scales together. */
.awards-loader-visual{
  position:relative; flex:none; display:flex; align-items:center; justify-content:center;
  width:var(--awl-box); height:var(--awl-box);
}
.awards-loader-icon{
  display:block; width:var(--awl-icon); height:var(--awl-icon);
  /* The proportions are the file's own. */
  object-fit:contain;
}

/* ------------------------------------------------------------------- sizes */
.awards-loader{ --awl-box:56px; --awl-icon:26px; --awl-dot:5px; }        /* medium */
.awards-loader[data-loader-size="small"]{ --awl-box:32px; --awl-icon:16px; --awl-dot:4px; }
.awards-loader[data-loader-size="large"]{ --awl-box:88px; --awl-icon:42px; --awl-dot:7px; }
.awards-loader[data-loader-size="small"] .awards-loader-message{font-size:12.5px}
.awards-loader[data-loader-size="large"] .awards-loader-message{font-size:14px}

/* --------------------------------------------------------- presentation modes */
/* Beside something rather than instead of it: a button's work, a row being
   written, a message slot in a form. */
.awards-loader[data-loader-mode="inline"]{
  flex-direction:row; justify-content:flex-start; text-align:left;
  gap:var(--ac-3); padding:var(--ac-3) 0;
}
/* Filling the region the content will occupy. The height is a floor, not a
   fixed size, so a container that already reserves its own height keeps it. */
.awards-loader[data-loader-mode="block"]{ min-height:184px }
/* Over the whole page, for a transition that replaces everything. */
.awards-loader[data-loader-mode="page"]{
  position:fixed; inset:0; z-index:9100; min-height:0;
  background:var(--ac-bg-alt); gap:var(--ac-4);
}
/* THERE IS NO ON-NAVY MODE, AND THAT IS A DECISION RATHER THAN AN OMISSION.
   icon.svg is the mark drawn for light grounds: its brackets are navy, and on
   a navy surface they vanish, leaving a red star floating. The knockout
   export exists (icon-dark.svg, which the collapsed sidebar uses) but the
   brief for this system names ONE file and forbids recolouring it, and a
   loader nobody can see is worse than no variant. Nothing in the product
   loads on a navy surface today, so nothing needs one. If a navy surface ever
   has to show a loader, that is a decision about which mark it carries, and
   it should be taken deliberately rather than by adding a modifier here. */

/* ====================================================== 1. CAPTURE ORBIT ==
   A red point and a navy point travelling a circular path around the mark.
   Deliberately NOT a ring that spins: the mark sits still inside a path that
   two points move along, which is a different thing to look at and does not
   read as a generic spinner. The mark breathes, very slightly, and never
   turns. */
.awards-loader-orbit{
  position:absolute; inset:0; border-radius:50%;
  animation:awl-orbit 2.6s linear infinite;
}
.awards-loader-orbit-dot{
  position:absolute; top:0; left:50%;
  width:var(--awl-dot); height:var(--awl-dot); margin-left:calc(var(--awl-dot) / -2);
  border-radius:50%;
}
.awards-loader-orbit-dot--red{background:var(--ac-accent)}
/* The second point rides the same path, half a turn behind. */
.awards-loader-orbit-dot--navy{
  background:var(--ac-primary);
  top:auto; bottom:0;
}
/* The faint track the two points travel, so the shape reads even at the
   moment a point is behind the mark. */
.awards-loader[data-loader-variant="orbit"] .awards-loader-visual::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--ac-n-100);
}
.awards-loader[data-loader-variant="orbit"] .awards-loader-icon{
  animation:awl-breathe 3.2s ease-in-out infinite;
}
@keyframes awl-orbit{ to{ transform:rotate(360deg) } }
@keyframes awl-breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.045) } }

/* ==================================================== 2. OPPORTUNITY SCAN ==
   A thin red line travelling down the mark, the way a reader's eye goes down
   a notice. The line is clipped to the square, so it never paints outside the
   box and never changes its size. */
.awards-loader[data-loader-variant="scan"] .awards-loader-visual{
  overflow:hidden; border-radius:var(--ac-r-sm, 6px);
}
.awards-loader-scanline{
  position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--ac-accent), transparent);
  animation:awl-scan 1.9s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform;
}
/* A faint navy frame, so the square reads as an area being looked at. */
.awards-loader[data-loader-variant="scan"] .awards-loader-visual::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid var(--ac-n-100);
}
@keyframes awl-scan{
  0%{ transform:translateY(0); opacity:0 }
  12%{ opacity:1 }
  88%{ opacity:1 }
  100%{ transform:translateY(calc(var(--awl-box) - 2px)); opacity:0 }
}

/* ==================================================== 3. PIPELINE PROGRESS ==
   Three points under the mark, lighting in turn: a process with steps, still
   going. Where the server can say how far through it is, a bar is shown as
   well; where it cannot, there is no bar and no number, because a percentage
   nobody measured is a lie that gets found out at ninety per cent. */
.awards-loader-dots{
  display:flex; gap:6px; align-items:center; justify-content:center;
  min-height:var(--awl-dot);
}
.awards-loader-dot{
  width:var(--awl-dot); height:var(--awl-dot); border-radius:50%;
  background:var(--ac-navy-500);
  animation:awl-step 1.35s ease-in-out infinite;
}
.awards-loader-dot:nth-child(2){ animation-delay:.18s }
.awards-loader-dot:nth-child(3){ animation-delay:.36s; }
/* The last of the three is the red one: the step that is about to finish. */
.awards-loader-dot:nth-child(3){ background:var(--ac-accent) }
@keyframes awl-step{
  0%,100%{ transform:scale(.7); opacity:.3 }
  40%{ transform:scale(1.15); opacity:1 }
}
/* THE BAR IS DRAWN ONLY WHEN A REAL NUMBER IS GIVEN. It is scaled with a
   transform rather than sized with a width, so moving it lays nothing out. */
.awards-loader-progress{
  width:min(260px, 70vw); height:4px; border-radius:4px;
  background:var(--ac-n-100); overflow:hidden;
}
.awards-loader-progress-bar{
  height:100%; border-radius:4px; background:var(--ac-primary);
  transform-origin:left center; transform:scaleX(0);
  transition:transform .3s ease;
}
.awards-loader-progress-text{
  font-size:12px; color:var(--ac-n-400); font-variant-numeric:tabular-nums;
}

/* ==================================================== 4. ACHIEVEMENT PULSE ==
   The compact one. Smaller, quieter, and used only for something that will be
   over in a moment: a save, a stage move, a filter. No orbit, no line, no
   dots; the mark itself breathes. */
.awards-loader[data-loader-variant="pulse"]{ gap:var(--ac-2, 8px) }
.awards-loader[data-loader-variant="pulse"] .awards-loader-icon{
  animation:awl-pulse 1.25s ease-in-out infinite;
}
@keyframes awl-pulse{
  0%,100%{ transform:scale(.94); opacity:.55 }
  50%{ transform:scale(1); opacity:1 }
}
/* AND WHEN IT IS DONE it hands over to the tick the product already has,
   rather than to a second success system. The loader carries the state for
   one beat and then the caller removes it. */
.awards-loader[data-loader-state="done"] .awards-loader-visual{ display:none }
.awards-loader[data-loader-state="done"] .awards-loader-message{ color:var(--ac-good) }

/* ============================================================ REDUCED MOTION
   The orbit stops, the line stops, the steps stop. What does NOT stop is the
   loader: the mark stays, the message stays, and the page still says plainly
   that it is working. The only thing taken away is the movement. */
@media (prefers-reduced-motion: reduce){
  .ac-ring__arc{ transition:none }
  .awards-loader-orbit{ animation:none }
  .awards-loader-scanline{ animation:none; top:50%; opacity:1 }
  .awards-loader-dot{ animation:none; opacity:.8; transform:none }
  .awards-loader[data-loader-variant="orbit"] .awards-loader-icon,
  .awards-loader[data-loader-variant="pulse"] .awards-loader-icon{
    animation:awl-fade 4s ease-in-out infinite;
  }
  .awards-loader-progress-bar{ transition:none }
}
/* A very slow, very small change of opacity: enough to say "still running"
   to somebody who has asked for less movement, and nothing more. */
@keyframes awl-fade{ 0%,100%{ opacity:1 } 50%{ opacity:.72 } }

/* ------------------------------------------------------------------- phone */
@media (max-width:480px){
  .awards-loader{ padding:var(--ac-5, 20px) var(--ac-3) }
  .awards-loader-message{ max-width:34ch }
  .awards-loader[data-loader-mode="page"]{ padding:var(--ac-4) }
}

/* THE OTHER TWO STATES. Loading is one of three, and the other two are the
   ones that get forgotten: a region with nothing in it and no sentence is
   indistinguishable from a region that is broken.
   EMPTY says there is nothing here yet AND what to do about it.
   FAILED says it did not work, in words, and offers the way to try again.
   Neither one ever prints a message from a library, a file path or a query:
   what the customer reads is a sentence written for them. */
.ac-state{padding:40px 16px; text-align:center; min-height:184px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px}
.ac-state h3{margin:0; font-family:var(--ac-font-display); font-size:16px; font-weight:600; color:var(--ac-n-700)}
.ac-state p{margin:0; max-width:48ch; font-family:var(--ac-font-body); font-size:13.5px; line-height:1.55; color:var(--ac-n-500)}
.ac-state .ac-state-do{margin-top:8px}
.ac-state--inline{padding:18px 2px; min-height:0; align-items:flex-start; text-align:left}
/* The one row in the organization typeahead that is not a choice: it says the
   directory is being searched, and it is replaced by the results. Not
   selectable, and never mistaken for a result. */
.su-searching{cursor:default; pointer-events:none; padding:0 !important}
.su-searching .awards-loader{padding:10px 12px}

/* A REFUSAL AT THE FIELD (15 September 2026). The required mark comes from
   the control's own required attribute (assets/form.js); the sentence sits
   under the control it names, and the control is marked. */
/* The mark is navy, not red: the public pages paint with the marketing set,
   which has no red in it, and a mark that is always on the page must pass
   the same gate the page does. The sentence itself follows .ac-msg. */
.ac-req{color:var(--ac-mkt-navy); margin-left:4px; font-weight:600; letter-spacing:0}
.ac-fielderr{font-size:14px; line-height:1.5; color:var(--ac-error); margin:-8px 0 14px}
.su-check + .ac-fielderr,.su-plans + .ac-fielderr{margin-top:-6px}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--ac-error); box-shadow:0 0 0 3px rgba(155,28,28,.2)}
/* How did you hear about us, on the last signup step: one optional question. */
.su-heard{border:1px solid var(--ac-mkt-surface-3); border-radius:12px; padding:14px 16px 4px; margin:0 0 16px}
.su-heard legend{font-family:var(--ac-font-body); font-weight:600; font-size:14px; letter-spacing:0; text-transform:none; color:var(--ac-mkt-navy); padding:0 6px}
.su-heard legend .ac-hint{display:inline; margin:0 0 0 6px; font-weight:400}
.su-heard .su-check{margin:0 0 8px}
.su-heard input[type="text"]{margin:4px 0 12px}