/* ═══════════════════════════════════════════════════════════════════════
   SECTION DEVICES — the 20 options signed off on 5 September 2026.

   Loaded AFTER site.css, deliberately. site.css ends with a
   prefers-reduced-motion block and its own note: "Keep every override below
   what it overrides." Everything here overrides something there, so it lives
   in a later file rather than being spliced into the middle of one, and it
   carries its own reduced-motion block at the foot.

   The palette is unchanged. Not one new colour is introduced — every device
   below is built from tokens site.css already declares. That is the point:
   the problem was never the colours, it was that colour was the only variable
   in play.

   Option ids match design-options-decide.html.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --slab-r:24px;          /* A1 — slabs are architecture, cards are 8px      */
  --seam-h:132px;         /* A4 — how far a hatch transition runs            */
  --hatch-gap:9px;        /* A4 — pinstripe pitch                            */
}

/* ───────────────────────────────────────────────────────────────────────
   A1 · Rounded section slabs floating on a page ground
   ALL band sections become slabs (your choice).

   .band was `background:var(--off)` full-bleed. It becomes an inset slab
   with the white page showing as a margin around and between. The inner
   .wrap already carries padding-inline:var(--rail); inside a slab that
   would double up against the slab's own inset, so it is zeroed and the
   slab pads itself.
   ─────────────────────────────────────────────────────────────────────── */
.band{
  margin-inline:var(--rail);
  border-radius:var(--slab-r);
  padding-inline:clamp(16px,2.4vw,44px);
  position:relative;
  isolation:isolate;
}
.band > .wrap{padding-inline:0}

/* Some sections are a bare .wrap rather than a .band — the argument section on
   platform.html is one. .as-slab gives them the slab treatment without having
   to restructure the markup into a band wrapper. */
.as-slab{
  /* site.css sets .wrap{width:100%}. Adding a margin to a 100%-wide box makes
     it wider than its container — which is exactly how the heading in this
     section ended up 9px past the right edge at 390px. width:auto lets the
     margins do their job. */
  width:auto;
  margin-inline:var(--rail);
  border-radius:var(--slab-r);
  padding-inline:clamp(16px,2.4vw,44px);
  position:relative;
  isolation:isolate;
  background:var(--off);
}
@media (max-width:640px){
  .as-slab{border-radius:16px;margin-inline:12px;padding-inline:14px}
}

/* Consecutive slabs need air between them or they read as one long block. */
.band + .band{margin-top:clamp(20px,2.4vw,36px)}

/* Below 640px the rail is ~18px and a radius that size starts to look like a
   mistake rather than a decision. Slabs stay, tighter. */
@media (max-width:640px){
  .band{border-radius:16px;margin-inline:12px;padding-inline:14px}
}

/* ───────────────────────────────────────────────────────────────────────
   A2 · ONE accented slab per page, not a whole accented band
   Applied to the "why we build our own tools" argument on each page.

   A single deliberate exception. If this class ever appears twice on one
   page it has stopped working — the whole mechanism is that it is the only
   one. Wash is --deep→--teal at low alpha over the normal --off ground, so
   it reads as emphasis rather than as a second theme.
   ─────────────────────────────────────────────────────────────────────── */
.band--accent{
  background:
    radial-gradient(1100px 520px at 8% -10%, rgba(18,105,127,.15), transparent 64%),
    radial-gradient(880px 440px at 96% 108%, rgba(11,58,74,.13), transparent 62%),
    var(--off);
  border:1px solid rgba(18,105,127,.16);
}

/* ───────────────────────────────────────────────────────────────────────
   A6 · Soft radial glow — ADAPTED to our liquid theme, as you asked.

   Not AI Lab's hot accent orbs. These reuse the same two colours and the
   same off-canvas placement as .fleet-sky in site.css, so the static glow
   on a section reads as the same weather system as the animated hero.

   "Heavier where required, fainter where required" — three intensities:
     .glow-heavy  dark sections that carry a CTA
     .glow        dark sections generally
     .glow-faint  light slabs, where it is texture rather than light
   ─────────────────────────────────────────────────────────────────────── */
.glow::before,.glow-heavy::before,.glow-faint::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
}
.glow-heavy::before{
  background:
    radial-gradient(880px 460px at 14% 8%, rgba(95,216,242,.20), transparent 64%),
    radial-gradient(760px 400px at 88% 92%, rgba(240,196,105,.14), transparent 62%);
}
.glow::before{
  background:
    radial-gradient(760px 400px at 12% 10%, rgba(95,216,242,.13), transparent 64%),
    radial-gradient(660px 350px at 90% 90%, rgba(240,196,105,.09), transparent 62%);
}
.glow-faint::before{
  background:
    radial-gradient(900px 460px at 6% -8%, rgba(18,105,127,.075), transparent 66%),
    radial-gradient(720px 380px at 98% 104%, rgba(240,196,105,.05), transparent 64%);
}

/* .close already declares its own ::before glow in site.css. .glow-heavy on
   it would be a second, competing layer, so the existing one is upgraded in
   place here rather than stacked. */
.close::before{
  background:
    radial-gradient(880px 460px at 14% 8%, rgba(95,216,242,.20), transparent 64%),
    radial-gradient(760px 400px at 88% 92%, rgba(240,196,105,.14), transparent 62%);
}

/* ───────────────────────────────────────────────────────────────────────
   A4 · Vertical hatch strip as the transition between sections
   ONLY where a light section meets a dark one (your choice).

   A <div class="seam"> sits at the boundary. Vertical hairlines at the
   pitch above, masked so they fade to nothing at both ends — so the edge
   between two grounds becomes a gradient of texture rather than a line.

   .seam--down  light above, dark below  (lines are ink, fading downward)
   .seam--up    dark above, light below  (lines are light, fading upward)
   ─────────────────────────────────────────────────────────────────────── */
.seam{
  height:var(--seam-h);
  margin-block:calc(var(--seam-h) * -.18) 0;
  pointer-events:none;
  position:relative;
  z-index:1;
}
.seam--down{
  background:repeating-linear-gradient(90deg,
    var(--hair) 0 1px, transparent 1px var(--hatch-gap));
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 46%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 46%, transparent 100%);
}
.seam--up{
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.14) 0 1px, transparent 1px var(--hatch-gap));
  -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 48%, transparent 100%);
          mask-image:linear-gradient(0deg, transparent 0%, #000 48%, transparent 100%);
}
/* On a dark ground the seam needs the dark behind it, not the page white. */
.seam--up{background-color:var(--abyss)}
@media (max-width:640px){ :root{--seam-h:88px} }

/* ───────────────────────────────────────────────────────────────────────
   A7 · A shaped band edge instead of a hard horizontal line
   ONE per page, entering the closing CTA (your choice).

   One corner only. Both corners reads as a pill and dates immediately.
   ─────────────────────────────────────────────────────────────────────── */
.close{border-top-left-radius:clamp(48px,9vw,132px)}

/* ───────────────────────────────────────────────────────────────────────
   A5 · Vertical column rules + monospace micro-labels

   NOTE — this collides with A8 and was split. See the build note: A8 turns
   the six-tool grid into a mixed-size bento, and full-height column rules
   cannot survive a grid whose columns are no longer uniform. So:
     · the RULES go on the .steps grid (Assess / Build / Adopt), which is a
       genuinely uniform 3-up and is where they work as designed;
     · the MONO MICRO-LABELS go on the bento cards, preserving the intent.
   ─────────────────────────────────────────────────────────────────────── */
.steps{position:relative;column-gap:clamp(22px,3vw,48px)}
.steps .step{position:relative;padding-inline-start:clamp(16px,1.8vw,28px)}
.steps .step::before{
  content:"";position:absolute;left:0;top:-3px;bottom:8px;width:1px;
  background:linear-gradient(180deg,var(--hair-strong),var(--hair) 22%,transparent 96%);
}
/* The first column's rule would sit on the page edge and read as an accident. */
.steps .step:first-child::before{display:none}
.steps .step:first-child{padding-inline-start:0}
@media (max-width:760px){
  .steps .step::before{display:none}
  .steps .step{padding-inline-start:0}
}
.mono-label{
  display:block;font-family:var(--mono,ui-monospace,SFMono-Regular,Consolas,monospace);
  font-size:14px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}

/* ───────────────────────────────────────────────────────────────────────
   A8 · Bento grid, mixed sizes + per-card gradient wash
   FULL bento (your choice).

   Six equal rectangles told a visitor all six matter equally. They do not.
   Two get double width; the rest sit in a 3-up. Each card carries a
   different pale wash in one corner, drawn from --teal / --deep / --gold,
   so a grid of white cards stops reading as a spreadsheet.
   ─────────────────────────────────────────────────────────────────────── */
.tools-6.bento{
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
}
/* Mosaic over three rows, each summing to 6:
     4 + 2   ·   2 + 4   ·   3 + 3
   The alternation is what stops it reading as a grid with one odd card. */
.tools-6.bento > .tool{grid-column:span 2}
.tools-6.bento > .tool.t-3{grid-column:span 3}
.tools-6.bento > .tool.t-4{grid-column:span 4}
@media (max-width:1100px){
  .tools-6.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools-6.bento > .tool,
  .tools-6.bento > .tool.t-3,
  .tools-6.bento > .tool.t-4{grid-column:span 1}
}
@media (max-width:680px){
  .tools-6.bento{grid-template-columns:minmax(0,1fr)}
}

/* Per-card wash. Six variants so no two adjacent cards match. */
.tool{position:relative;isolation:isolate;overflow:hidden}
.tool::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.tool.w1::before{background:radial-gradient(420px 260px at 100% 0%, rgba(18,105,127,.10), transparent 66%)}
.tool.w2::before{background:radial-gradient(420px 260px at 0% 0%, rgba(240,196,105,.13), transparent 66%)}
.tool.w3::before{background:radial-gradient(420px 260px at 100% 100%, rgba(11,58,74,.09), transparent 66%)}
.tool.w4::before{background:radial-gradient(420px 260px at 0% 100%, rgba(18,105,127,.085), transparent 66%)}
.tool.w5::before{background:radial-gradient(460px 280px at 50% 0%, rgba(240,196,105,.10), transparent 68%)}
.tool.w6::before{background:radial-gradient(420px 260px at 100% 0%, rgba(11,58,74,.11), transparent 66%)}

/* ───────────────────────────────────────────────────────────────────────
   B1 · A solid filled category pill on every card (your choice)
   .tool-k was uppercase muted text. It becomes a filled pill.
   --teal with white measures 6.26:1 — passes AA at any size.
   ─────────────────────────────────────────────────────────────────────── */
/* SPECIFICITY, and it is load-bearing. site.css carries
   `.tool p{...;color:var(--ink-soft)}` at 0,1,1. Both .tool-k and .tool-h are
   <p> elements, so a plain `.tool-k` rule at 0,1,0 LOSES to it no matter how
   much later this file loads — which is how the pill first shipped as dark
   grey text on the dark teal fill, a 1.9:1 contrast failure that looked like
   a colour choice rather than a bug. The selectors below are `.tool p.tool-k`
   (0,1,2) so they actually win.

   This also fixes a pre-existing latent instance of the same collision:
   .tool-h asks for var(--deep) at 0,1,0 and was silently rendering as
   var(--ink-soft). */
.tool p.tool-k{
  display:inline-block;align-self:flex-start;
  background:var(--teal);color:#FFF;      /* 6.26:1 — passes AA at any size */
  font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;margin-bottom:2px;line-height:1.35;
}
/* The same collision was eating the title's SIZE as well as its colour:
   site.css asks for 21px/600/--deep at 0,1,0 and `.tool p` was serving
   16.5px/--ink-soft at 0,1,1. Every tool title on the site has been
   rendering four and a half pixels small since the card was written.
   Restated here at 0,1,2 with site.css's intended values. */
.tool p.tool-h{font-size:21px;font-weight:600;color:var(--deep);letter-spacing:-.014em}

/* ───────────────────────────────────────────────────────────────────────
   B2 · Colour-coded effort and impact line (both axes, your choice)

   Deliberately NOT their "Complexity · Impact". Ours answers the question a
   buyer of enablement actually asks: how much does it cost me to adopt, and
   what does it move. Every colour here already passes on white.
   ─────────────────────────────────────────────────────────────────────── */
.tool p.tool-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:14px;font-weight:700;margin-top:10px;max-width:52ch;
}
.tool-meta .sep{color:var(--hair-strong);font-weight:400}
.tool-meta .lo{color:#0A5C3C}      /* 7.7:1 on white */
.tool-meta .mid{color:#8A6212}     /* 5.5:1 on white */
.tool-meta .hi{color:#9B1C13}      /* 7.6:1 on white */
.tool-meta .up{color:var(--teal)}  /* 6.3:1 on white */
.tool-meta em{font-style:normal;font-weight:400;color:var(--muted)}

/* ───────────────────────────────────────────────────────────────────────
   B3 · An abstract line-art glyph per tool (your choice)

   PLACEHOLDERS. These are hand-built liquid-flow SVGs so the page is not
   broken while the real set is generated — see ICON-PROMPTS.md for the
   prompts to run through Grok or Gemini and what to do with the results.
   The frame, sizing and motion below are the FINAL contract: a replacement
   drops into the same 72×72 box and inherits currentColor.
   ─────────────────────────────────────────────────────────────────────── */
.tool-glyph{
  position:absolute;top:clamp(14px,1.4vw,20px);right:clamp(14px,1.4vw,20px);
  width:64px;height:64px;flex:none;pointer-events:none;z-index:1;
  color:var(--teal);opacity:.9;
}
.tool.w2 .tool-glyph,.tool.w5 .tool-glyph{color:var(--gold)}
.tool-glyph svg{display:block;width:100%;height:100%}
.tool-glyph .flow{
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.tool-glyph .flow-soft{opacity:.42}
.tool-glyph .node{fill:currentColor}
/* Keep the top-left content clear of the glyph in the top-right.
   The pill is sized by its text and CONSTRAINED by a max-width — giving it
   padding-right instead made the pill itself span the card. */
.tool p.tool-h{padding-right:74px}   /* clear of the glyph */
.tool p.tool-k{width:fit-content;max-width:calc(100% - 78px)}
.mono-label{max-width:calc(100% - 78px)}

@media (prefers-reduced-motion:no-preference){
  .tool-glyph .drift{
    animation:glyph-drift 9s var(--ease) infinite alternate;
    transform-origin:50% 50%;
  }
  .tool:nth-child(2n) .tool-glyph .drift{animation-duration:11s;animation-delay:-3s}
  .tool:nth-child(3n) .tool-glyph .drift{animation-duration:13s;animation-delay:-6s}
}
@keyframes glyph-drift{
  from{transform:translateY(-1.5px) scale(.985)}
  to  {transform:translateY(1.5px)  scale(1.015)}
}

/* ───────────────────────────────────────────────────────────────────────
   B4 · Tag row restyled — divider, lowercase, muted (your choice)
   Ours was already the best part of the card. It stops competing with the
   body copy and starts giving the card a bottom edge.
   ─────────────────────────────────────────────────────────────────────── */
.tool ul{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--hair);
  gap:7px 8px;
}
.tool li{
  flex:0 1 auto;justify-content:flex-start;text-align:left;
  font-size:14px;font-variant:normal;text-transform:lowercase;
  color:var(--muted);background:transparent;border:1px solid var(--hair);
  border-radius:999px;padding:3px 10px;
}

/* ───────────────────────────────────────────────────────────────────────
   A9 · Two-tone lead paragraph (three longest leads only, your choice)
   B5 · Two-tone heading, key word in --teal (your choice)

   B5 caution, kept in the stylesheet where it will be read: on their site
   this is the device that FAILS contrast — their orange on cream measures
   2.51:1 against a 3:1 minimum. --teal on white is 6.26:1 and on --off is
   5.78:1, so ours passes. Do not swap in a lighter accent without
   re-measuring.
   ─────────────────────────────────────────────────────────────────────── */
.lede-1{color:var(--ink);font-weight:600}
.sec-note .lede-1{color:var(--ink)}
h2.sec .kw,h1 .kw,h3 .kw{color:var(--teal)}
.dark h2.sec .kw,.close h2 .kw{color:var(--cyan-lift)}

/* ───────────────────────────────────────────────────────────────────────
   A3 · Inset panel as a stage for product visuals (every visual, your choice)
   A10 · One visual bleeds off the edge of its section (one per page)
   ─────────────────────────────────────────────────────────────────────── */
.stagepanel{
  background:var(--off);
  border:1px solid var(--hair);
  border-radius:var(--slab-r);
  padding:clamp(20px,3.2vw,56px);
  margin-top:clamp(24px,3vw,44px);
  position:relative;
}
.band .stagepanel{background:var(--surface)}
.stagepanel > img,.stagepanel > .fleet,.stagepanel > picture{
  border-radius:12px;overflow:hidden;display:block;width:100%;
}
.stagepanel-cap{
  font-size:var(--fs-meta);color:var(--muted);margin-top:14px;max-width:74ch;
}
/* A10 — the visual runs past the bottom of its panel into the section below.
   Off below 760px, where there is no room for it to read as intentional. */
@media (min-width:761px){
  .bleed{overflow:visible}
  .bleed > .stagepanel{padding-bottom:0}
  .bleed .bleed-art{
    margin-bottom:clamp(-120px,-7vw,-56px);
    position:relative;z-index:2;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   D2 · Footer rebuild
   ─────────────────────────────────────────────────────────────────────── */
footer{
  background:var(--abyss);color:rgba(255,255,255,.68);
  padding:clamp(44px,5vw,72px) var(--rail) clamp(30px,3.4vw,44px);
  margin-top:clamp(40px,5vw,80px);
}
.foot-top{
  display:grid;gap:clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  padding-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.foot-brand p{color:rgba(255,255,255,.62);max-width:44ch;margin-top:12px;font-size:15px}
.foot-h{
  font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-lift);margin-bottom:14px;
}
.foot-col a,.foot-col p{
  display:block;color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;
  padding:7px 0;min-height:44px;
}
.foot-col a{display:flex;align-items:center}
.foot-col a:hover{color:#FFF;text-decoration:underline}
.foot-col .sub{font-size:14px;color:rgba(255,255,255,.5);min-height:0;padding-top:0;margin-top:-4px}
.foot-links{
  padding-block:clamp(24px,3vw,36px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.foot-grid{
  display:grid;gap:2px clamp(16px,2.4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
.foot-grid a{
  color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;
  padding:9px 0;min-height:44px;display:flex;align-items:center;
}
.foot-grid a:hover{color:#FFF;text-decoration:underline}
.foot-base{padding-top:clamp(20px,2.4vw,30px);font-size:var(--fs-meta)}
.foot-base p{color:rgba(255,255,255,.56);max-width:82ch}
.foot-base p + p{margin-top:8px}
.foot-base a{color:rgba(255,255,255,.78)}
.foot-note{
  border-left:3px solid var(--gold-lift);padding-left:16px;margin-top:18px;
  color:rgba(255,255,255,.62);
}
/* site.css's .fl rules assumed a light footer. */
footer .fl{border-bottom-color:rgba(255,255,255,.14)}
footer .fl a{color:rgba(255,255,255,.82)}
footer .fl a:hover{color:#FFF}

/* ───────────────────────────────────────────────────────────────────────
   D1 · FAQ block
   Open <details>, not a JS accordion: findable with Ctrl+F, readable with
   no JavaScript, and every answer is in the DOM for a crawler and for an
   answer engine. That last part is the entire remaining point of an FAQ
   since Google stopped showing FAQ rich results on 7 May 2026.
   ─────────────────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(26px,3.2vw,44px);border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-size:clamp(17px,1.35vw,20px);font-weight:600;color:var(--deep);
  letter-spacing:-.01em;min-height:44px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  translate:0 -70%;rotate:45deg;transition:rotate .25s var(--ease);
}
.faq details[open] summary::after{rotate:225deg;translate:0 -30%}
.faq summary:hover{color:var(--teal)}
.faq .a{padding:0 0 22px;font-size:16.5px;line-height:1.62;color:var(--ink-soft);max-width:76ch}
.faq .a p + p{margin-top:12px}

/* ───────────────────────────────────────────────────────────────────────
   C1 · The capacity calculator
   Deliberately not their savings calculator — different question, different
   arithmetic, different language. See the block comment in index.html.
   ─────────────────────────────────────────────────────────────────────── */
.calc{
  display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  margin-top:clamp(24px,3vw,42px);align-items:start;
}
.calc-panel{
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--card-r);padding:clamp(20px,2.4vw,32px);
}
.calc-panel h3{
  font-family:var(--serif);font-size:23px;color:var(--deep);letter-spacing:-.018em;
  margin-bottom:6px;
}
.calc-panel > p.hint{font-size:14px;color:var(--muted);margin-bottom:20px;max-width:52ch}
.field{margin-bottom:22px}
.field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:15px;font-weight:600;color:var(--ink);margin-bottom:9px;
}
.field label .val{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:16px;
  font-weight:700;color:var(--teal);
}
.field .ends{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:5px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;
  cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--hair)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--hair)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--teal);border:3px solid #FFF;box-shadow:0 1px 4px rgba(14,20,24,.34);
  margin-top:-9px;
}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--teal);
  border:3px solid #FFF;box-shadow:0 1px 4px rgba(14,20,24,.34);
}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(18,105,127,.34)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(18,105,127,.34)}

.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{position:relative;margin:0}  /* the hidden input positions against this */
.choices input{position:absolute;opacity:0;width:1px;height:1px}
.choices span{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 15px;border:1px solid var(--hair-strong);border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--ink-soft);background:var(--surface);
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.choices span:hover{border-color:var(--teal);color:var(--teal)}
.choices input:checked + span{background:var(--teal);border-color:var(--teal);color:#FFF}
.choices input:focus-visible + span{outline:2.5px solid var(--teal);outline-offset:3px}

.switches{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.switch{display:flex;align-items:center;gap:11px;min-height:44px;cursor:pointer;font-size:14.5px;position:relative}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{
  width:46px;height:26px;border-radius:999px;background:var(--hair-strong);
  position:relative;transition:background .22s var(--ease);flex:none;
}
.switch .track::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#FFF;transition:translate .22s var(--ease);box-shadow:0 1px 3px rgba(14,20,24,.3);
}
.switch input:checked + .track{background:var(--teal)}
.switch input:checked + .track::after{translate:20px 0}
.switch input:focus-visible + .track{outline:2.5px solid var(--teal);outline-offset:3px}

.calc-out{background:var(--abyss);color:#FFF;border-color:transparent;position:relative;overflow:hidden}
.calc-out::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(620px 320px at 12% 6%, rgba(95,216,242,.16), transparent 64%),
    radial-gradient(520px 280px at 92% 94%, rgba(240,196,105,.10), transparent 62%);
}
.calc-out > *{position:relative;z-index:1}
.calc-out h3{color:#FFF}
.calc-out > p.hint{color:rgba(255,255,255,.6)}
.result{padding-block:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.result:last-of-type{border-bottom:0}
.result .k{font-size:14px;color:rgba(255,255,255,.7);font-weight:600}
.result .v{
  font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);line-height:1.06;
  letter-spacing:-.028em;margin-top:4px;
}
.result .v.up{color:var(--cyan-lift)}
.result .v.cost{color:var(--gold-lift)}
.result .n{font-size:14px;color:rgba(255,255,255,.56);margin-top:6px;max-width:44ch}
.meter{height:9px;border-radius:999px;background:rgba(255,255,255,.16);margin-top:12px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--cyan-lift);
  transition:width .4s var(--ease)}
.calc-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.calc-basis{
  margin-top:20px;font-size:14px;color:rgba(255,255,255,.56);
  border-left:3px solid var(--gold-lift);padding-left:14px;max-width:52ch;
}

/* ───────────────────────────────────────────────────────────────────────
   C2 · The engagement walkthrough — ADAPTED, ours not theirs.
   ─────────────────────────────────────────────────────────────────────── */
.walk{margin-top:clamp(26px,3.2vw,44px)}
.walk-nav{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:22px;
  scrollbar-width:thin;
}
.walk-nav button{
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;flex:none;
  min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--hair-strong);background:var(--surface);color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  display:flex;align-items:center;gap:9px;
}
.walk-nav button .st{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:14px;
  color:var(--muted);
}
.walk-nav button:hover{border-color:var(--teal);color:var(--teal)}
.walk-nav button[aria-selected=true]{background:var(--deep);border-color:var(--deep);color:#FFF}
.walk-nav button[aria-selected=true] .st{color:var(--cyan-lift)}
.walk-panel{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--card-r);
  padding:clamp(22px,2.8vw,40px);
}
.walk-panel[hidden]{display:none}
.walk-head{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:baseline;
  padding-bottom:18px;border-bottom:1px solid var(--hair);margin-bottom:20px}
.walk-stage{
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#FFF;background:var(--teal);padding:5px 11px;border-radius:999px;
}
.walk-head h3{font-family:var(--serif);font-size:clamp(23px,2.2vw,31px);color:var(--deep);
  letter-spacing:-.022em;flex:1 1 240px}
.walk-when{font-size:14px;color:var(--muted);font-weight:600}
.walk-cols{display:grid;gap:clamp(18px,2.4vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.walk-cols h4{font-size:14px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.walk-cols ul{list-style:none;display:grid;gap:11px}
.walk-cols li{display:flex;gap:11px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.walk-cols li::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);
  margin-top:8px;
}
.walk-gate{
  margin-top:22px;padding:16px 18px;border-radius:var(--card-r);max-width:82ch;
  background:var(--off);border-left:3px solid var(--gold-lift);
  font-size:15.5px;line-height:1.55;color:var(--ink-soft);
}
.walk-gate b{color:var(--deep)}
.walk-prog{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:14px;color:var(--muted);pointer-events:none}
.walk-prog .bar{flex:1;height:5px;border-radius:999px;background:var(--hair);overflow:hidden}
.walk-prog .bar i{display:block;height:100%;background:var(--teal);border-radius:999px;
  transition:width .35s var(--ease)}

/* ───────────────────────────────────────────────────────────────────────
   Reduced motion — last, so it wins on source order at equal specificity.
   Depth and colour are kept; only movement is dropped.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .tool-glyph .drift{animation:none}
  .meter i,.walk-prog .bar i,.switch .track::after,.faq summary::after{transition:none}
}

/* ───────────────────────────────────────────────────────────────────────
   D3 · Sector page template support — see _TEMPLATE-sector.html

   Three small components the template needs. The purpose box is the one
   that matters: it is the ai.gov.au device, and the whole point of it is
   that skimming only these boxes down a 3,000-word page yields a coherent
   document. Summary ABOVE the detail, never after it.
   ─────────────────────────────────────────────────────────────────────── */
.crumb{margin-bottom:clamp(18px,2vw,28px)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;
  font-size:var(--fs-meta);color:var(--muted);padding:0}
.crumb li{display:flex;align-items:center;gap:6px;margin:0}
.crumb li+li::before{content:"/";color:var(--hair-strong)}
.crumb a{color:var(--ink-soft);text-decoration:none;padding:6px 0;
  min-height:44px;display:inline-flex;align-items:center}
.crumb a:hover{color:var(--teal);text-decoration:underline}
.crumb [aria-current=page]{color:var(--muted)}

.purpose{
  background:var(--surface);border-left:3px solid var(--teal);
  border-radius:0 var(--card-r) var(--card-r) 0;
  padding:14px 18px;margin:0 0 22px;max-width:78ch;
  font-size:16.5px;line-height:1.6;color:var(--ink-soft);
}
.band .purpose{background:var(--surface)}
.wrap .purpose{background:var(--off)}

.byline{
  font-size:var(--fs-meta);color:var(--muted);margin-top:18px;
  padding-top:14px;border-top:1px solid var(--hair);max-width:74ch;
}
.byline a{color:var(--teal)}

/* ── Aside button: the third instance of one specificity collision ──────────
   `.aside a{color:var(--ink-soft); padding:10px 0; min-height:44px}` in
   site.css is 0,1,1. `.btn-ink{color:#FFF}` and `.btn{padding:15px 30px;
   min-height:52px}` are 0,1,0. The aside rule therefore wins on colour AND on
   box, regardless of load order — so the assessment button in every article
   aside has been rendering --ink-soft on --deep at about 1.3:1, and 46px tall
   instead of 52px.

   Measured on the live pillar page before any new page was added, so this is
   pre-existing rather than introduced by the generated pages. It is the same
   shape as the two collisions already recorded in DESIGN-DEVICES-REVIEW.md
   (the tool title, and the category pill): a correctly-written rule losing a
   specificity contest, which looks like a design choice and so gets read past.

   Fixed by out-specifying, never by reordering — reordering fixes it until
   somebody moves a file. */
.aside a.btn{padding:15px 30px; min-height:52px; border-bottom:0;
  display:inline-flex; align-items:center; justify-content:center}
.aside a.btn-ink,
.aside a.btn-ink:hover{color:#FFF}
.aside a.btn-solid,
.aside a.btn-solid:hover{color:var(--ink)}