@import url("aal-dot.css?v=20261026g"); /* grey dot token (Coop, 26 Oct 2026) */
/* Headline gradient ball (brand rule, Shane 23 Oct 2026). ONE shared pattern for every headline (H1, hero, section H2).
   Markup (written at build time by handoff-build/headdot.py, kept right at runtime by js/hdot.js):
     statement   ...words<span class="hdot">.</span>             the real "." stays in the text (transparent), a ball is drawn on it
     question    ...words<span class="hq">?</span>               the real "?" hook is drawn without its dot, the ball replaces the dot
     exclamation ...words<span class="hq hq-x">!</span>          same for "!"
     in a gradient phrase (.g) the mark sits just outside the .g span; .hq-g gives the hook the solid end colour of the text gradient.
   Accessibility: the punctuation is ordinary text, so screen readers read it and copy/paste keeps it. The ball is a CSS
   pseudo-element with empty content (not in the accessibility tree). Forced-colours (Windows contrast themes) shows the
   plain glyph instead. Ball = icons/ball.svg of the 23 Oct kit (red #C8102E bottom-left to yellow #FEE21F top-right,
   warm rim shade, white highlight top-left), sized like an Inter ExtraBold full stop and sitting on the baseline.
   Metrics are Inter's (all weights share them): ascent .96875em, descent .2412em; "." dot centre .1763em; "?" dot centre
   .2661em; "!" dot centre .1792em; the "?"/"!" dot top is .169em and the hook/bar bottom .2256em above the baseline. */
.hdot,.hq{
  --hb-d:.2em;                          /* ball diameter (Inter 800 "." dot is .185em wide; a round ball reads smaller, so a touch bigger) */
  --hb-desc:.2412em;                    /* content-area bottom to baseline (Inter descent) */
  --hb-over:.0103em;                    /* round overshoot below the baseline, like the glyph */
  --hb-cut:.77175em;                    /* .96875em ascent - .197em: top of content area to the gap between hook and dot */
  --aal-ball:var(--aal-dot,linear-gradient(135deg,#B4B4B9 15%,#7C7C80 85%));   /* matt grey dot (Coop, 26 Oct 2026); was the orange-yellow ball */
  position:relative;display:inline;font-style:normal;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.hdot{color:transparent;-webkit-text-fill-color:transparent;background:none}
.hq{-webkit-text-fill-color:transparent;
  background:linear-gradient(var(--hq-ink,currentColor),var(--hq-ink,currentColor)) 0 0/100% var(--hb-cut) no-repeat;
  -webkit-background-clip:text;background-clip:text}
.hq-g{--hq-ink:#F55328}                 /* hook after a gradient phrase: the text gradient's end colour (see .g) */
.hdot::after,.hq::after{content:"";position:absolute;pointer-events:none;
  width:var(--hb-d);height:var(--hb-d);border-radius:50%;
  bottom:calc(var(--hb-desc) - var(--hb-over));
  background:var(--aal-ball);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.hdot::after{left:calc(.1763em - var(--hb-d) / 2)}
.hq::after{left:calc(.2661em - var(--hb-d) / 2)}
.hq-x::after{left:calc(.1792em - var(--hb-d) / 2)}
@media (forced-colors:active){
  .hdot,.hq{color:inherit;-webkit-text-fill-color:currentColor;background:none}
  .hdot::after,.hq::after{display:none}}