/* ===========================================================
   Insight widgets: one small interactive per insight article
   (licence audit, adoption after go-live, engagement scope, 4 Cs).
   Loaded by the four public/insights/*.html pages, and lazily by
   article-overlay.js when an article opens in the /insights or Home
   overlay. Styled to the article card itself (Satoshi, ink, link
   green), sitting on whichever pastel the article uses. Motion is the
   sitewide "snap into place" vocabulary; transform/opacity only.
   =========================================================== */

.iw{
  --iw-ink: #11121A;
  --iw-ink-70: rgba(17,18,26,.7);
  --iw-ink-45: rgba(17,18,26,.55);
  --iw-line: rgba(17,18,26,.1);
  --iw-card: rgba(255,255,255,.55);
  --iw-card-hi: rgba(255,255,255,.85);
  --iw-green: var(--nav-hover-fg, #23BB16);
  --iw-snap: cubic-bezier(.34,1.45,.64,1);
  --iw-ease: cubic-bezier(.2,.7,.2,1);
  position: relative;
  margin: 2.75rem 0 3.25rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 1.5rem;
  background: var(--iw-card);
  box-shadow: inset 0 0 0 1px var(--iw-line);
  color: var(--iw-ink-70);
  font-family: var(--font-body, "Satoshi", system-ui, sans-serif);
}
/* Each article's widget takes that article's own colour (a deeper tone of
   its highlight colour, so it reads on the article's pastel): Why SMEs are
   rethinking consulting in gold, Everyone has an AI adviser in peach, The
   SaaS hostage situation in blue. Why SaaS implementations fail keeps its
   green. (The article pop-up carries the same article-page-* class.) */
.article-page-consulting .iw{ --iw-green: #E2B23A; }
.article-page-advisor .iw{ --iw-green: #E08A63; }
.article-page-lockin .iw{ --iw-green: #5B92D6; }
/* Resets against .article-content's long-form p/ul/li rules. */
.iw .iw-p, .iw p{ margin:0; font-size:0.9375rem; line-height:1.6; font-weight:600; color: var(--iw-ink-70); }
.iw .iw-list{ list-style:none; margin:0; padding:0; }
.iw .iw-list li{ margin:0; font-size:0.9375rem; line-height:1.5; }
.iw strong{ color: var(--iw-ink); font-weight:700; }

.iw .iw-eyebrow{
  display:flex; align-items:center; gap:0.625rem; margin:0 0 0.625rem;
  font-size:0.7813rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--iw-ink-45);
}
.iw-tile{ display:inline-block; flex:none; width:0.625rem; height:0.625rem; border-radius:2px; background: var(--iw-green); }
.iw-tile--ink{ background: var(--iw-ink); }
.iw-tile--line{ background: transparent; box-shadow: inset 0 0 0 1.5px rgba(17,18,26,.45); }
.iw-title{ font-size: clamp(1.3125rem, 2.1vw, 1.625rem); line-height:1.2; letter-spacing:-.01em; margin:0 0 0.5rem; color: var(--iw-ink); }
.iw .iw-lede{ max-width: 62ch; margin:0 0 1.625rem; }
.iw .iw-foot{ margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid var(--iw-line); font-size:0.8125rem; color: var(--iw-ink-45); }
.iw-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Shared controls ---------- */
.iw-btn{
  position:relative; display:inline-flex; align-items:center; gap:0.75rem;
  min-height:2.875rem; padding:0 1.25rem 0 1.375rem; border-radius:62.4375rem;
  background: var(--iw-ink); color: var(--paper, #F4F2ED);
  font: 600 0.9375rem/1 var(--font-body, "Satoshi", system-ui, sans-serif);
  cursor:pointer; -webkit-tap-highlight-color: transparent; isolation:isolate;
  transition: transform .45s var(--iw-snap), opacity .2s ease;
}
/* Matches the sitewide .btn motion: lift on hover/focus, soft shadow
   fading in on ::after, press to .97, and the brand star (style.css
   --bm-star, drawn on the .iw-tile span) snapping into place. */
.iw-btn::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; box-shadow: 0 0.875rem 1.5rem rgba(17,18,26,.14); opacity:0; transition: opacity .3s var(--iw-ease); }
.iw-btn:hover::after, .iw-btn:focus-visible::after{ opacity:1; }
.iw-btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:#fff; opacity:0; transition: opacity .25s ease; }
.iw-btn:hover::before{ opacity:.12; }
.iw-btn > *{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  .iw-btn:hover, .iw-btn:focus-visible{ transform: translateY(-2px); }
  .iw-btn:active{ transform: scale(.97); transition: transform .12s var(--iw-ease); }
}
/* Button and segment glyphs: the brand star instead of a square tile. */
.iw-btn .iw-tile, .iw-seg-btn .iw-tile{
  width:0.8125rem; height:0.8125rem; border-radius:0;
  -webkit-mask: var(--bm-star) center / contain no-repeat;
          mask: var(--bm-star) center / contain no-repeat;
}
.iw-btn .iw-tile{ transform: translate(-2px,2px) rotate(-30deg) scale(.78); transition: transform .55s var(--iw-snap); }
.iw-btn:hover .iw-tile, .iw-btn:focus-visible .iw-tile, .iw-btn[aria-pressed="true"] .iw-tile{ transform:none; }
.iw-btn--ghost{ background: transparent; color: var(--iw-ink); box-shadow: inset 0 0 0 1.5px rgba(17,18,26,.2); }
.iw-btn--ghost::before{ background: var(--iw-ink); }
.iw-btn--ghost:hover::before{ opacity:.06; }
.iw-btn--ghost .iw-tile{ background: var(--iw-ink); }
.iw-btn[disabled]{ opacity:.45; cursor:default; }
.iw-btn[disabled]:hover, .iw-btn[disabled]:active{ transform:none; }
.iw-btn[disabled]:hover::before, .iw-btn[disabled]::after{ opacity:0; }
.iw-btn[disabled] .iw-tile{ transform:none; }

.iw :focus-visible{ outline: 2px solid var(--iw-ink); outline-offset: 0.1875rem; }

/* Toggle chip: its small tile sits knocked off-square when off and
   snaps into its slot when on. */
.iw-chip{
  position:relative; display:flex; align-items:flex-start; gap:0.75rem; width:100%;
  padding:0.875rem 1rem; border-radius:1rem; text-align:left;
  background: transparent; color: var(--iw-ink);
  box-shadow: inset 0 0 0 1.5px rgba(17,18,26,.14);
  cursor:pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--iw-ease);
}
.iw-chip::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: var(--iw-card-hi); opacity:0; transition: opacity .25s ease; }
.iw-chip:hover::before{ opacity:.5; }
.iw-chip[aria-pressed="true"]::before{ opacity:1; }
.iw-chip:active{ transform: scale(.97); }
.iw-chip > *{ position:relative; }
.iw-chip-slot{ flex:none; position:relative; width:0.875rem; height:0.875rem; margin-top:0.1875rem; border-radius:0.1875rem; box-shadow: inset 0 0 0 1.5px rgba(17,18,26,.25); }
.iw-chip-slot .iw-tile{ position:absolute; inset:0; width:auto; height:auto; border-radius:0.1875rem; opacity:0; transform: translate(0.375rem,-0.4375rem) rotate(35deg) scale(.7); transition: transform .5s var(--iw-snap), opacity .2s ease; }
.iw-chip[aria-pressed="true"] .iw-chip-slot .iw-tile{ opacity:1; transform:none; }
.iw-chip-text{ display:flex; flex-direction:column; gap:0.1875rem; min-width:0; }
.iw-chip-name{ font-size:0.9375rem; font-weight:700; line-height:1.3; color: var(--iw-ink); }
.iw-chip-sub{ font-size:0.8438rem; font-weight:600; line-height:1.4; color: var(--iw-ink-45); }

/* ===========================================================
   1. Unused licences (the-saas-hostage-situation)
   =========================================================== */
.iw-audit-grid{ display:grid; grid-template-columns: minmax(14.375rem, 18.75rem) minmax(0,1fr); gap: clamp(1.375rem, 3vw, 2.5rem); align-items:start; }
.iw-audit-ctrl{ display:flex; flex-direction:column; gap:1.375rem; }
.iw-range{ display:flex; flex-direction:column; gap:0.625rem; cursor:pointer; }
.iw-range-top{ display:flex; justify-content:space-between; align-items:baseline; gap:0.75rem; font-size:0.875rem; font-weight:700; color: var(--iw-ink-70); }
.iw-range-top output{ font-size:1.125rem; font-weight:700; color: var(--iw-ink); font-variant-numeric: tabular-nums; }
.iw input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:1.5rem; margin:0; background:transparent; cursor:pointer;
  --p: 50%;
}
.iw input[type="range"]::-webkit-slider-runnable-track{ height:0.375rem; border-radius:0.375rem; background: linear-gradient(to right, var(--iw-ink) var(--p), rgba(17,18,26,.14) var(--p)); }
.iw input[type="range"]::-moz-range-track{ height:0.375rem; border-radius:0.375rem; background: rgba(17,18,26,.14); }
.iw input[type="range"]::-moz-range-progress{ height:0.375rem; border-radius:0.375rem; background: var(--iw-ink); }
.iw input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:1.375rem; height:1.375rem; margin-top:-0.5rem; border-radius:0.375rem; background: var(--iw-green); box-shadow: 0 0 0 0.1875rem #fff; transition: transform .3s var(--iw-snap); }
.iw input[type="range"]::-moz-range-thumb{ width:1.375rem; height:1.375rem; border:0; border-radius:0.375rem; background: var(--iw-green); box-shadow: 0 0 0 0.1875rem #fff; }
.iw input[type="range"]:active::-webkit-slider-thumb{ transform: rotate(45deg) scale(.9); }
.iw input[type="range"]:focus-visible{ outline: 2px solid var(--iw-ink); outline-offset: 0.25rem; border-radius:0.375rem; }

.iw-audit-vis{ min-width:0; }
.iw-legend{ display:flex; flex-wrap:wrap; gap:0.375rem 1rem; margin:0 0 0.75rem; font-size:0.8125rem; font-weight:600; color: var(--iw-ink-45); }
.iw-legend span{ display:inline-flex; align-items:center; gap:0.4375rem; }
.iw-seats{ display:flex; flex-wrap:wrap; gap:0.25rem; align-content:flex-start; }

.iw-seat{
  display:block; width:0.625rem; height:0.625rem; border-radius:2px; background: var(--iw-ink);
  transition: transform .5s var(--iw-snap) calc(var(--d, 0) * 1ms), opacity .25s ease calc(var(--d, 0) * 1ms);
}
.iw-seat.is-idle{ background: var(--iw-green); }
.iw-seat.is-new{ animation: iw-seat-in .45s var(--iw-snap) backwards; }
@keyframes iw-seat-in{ from{ opacity:0; transform: translateY(-0.5rem) rotate(30deg) scale(.4); } }
.iw-pre .iw-seat{ opacity:0; transform: translateY(-0.625rem) rotate(28deg) scale(.4); }

.iw-reads{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:0.75rem; margin:1.625rem 0 0; }
.iw-read{ position:relative; padding:1rem 1.125rem; border-radius:1rem; box-shadow: inset 0 0 0 1px var(--iw-line); min-width:0; }
.iw-read::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: var(--iw-card-hi); opacity:.5; transition: opacity .35s ease; }
.iw-read > *{ position:relative; }
.iw-read dt{ display:flex; align-items:center; gap:0.5rem; font-size:0.8125rem; font-weight:700; color: var(--iw-ink-45); }
.iw-read dd{ margin:0.375rem 0 0; }
.iw-num{ display:block; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight:700; letter-spacing:-.01em; line-height:1.15; color: var(--iw-ink); font-variant-numeric: tabular-nums; }
.iw-sub{ display:block; margin-top:0.375rem; font-size:0.8125rem; font-weight:600; line-height:1.4; color: var(--iw-ink-45); }
.iw-read--waste::before{ opacity:1; }
.iw-read--waste .iw-num{ color: var(--article-link, var(--iw-ink)); }

/* ===========================================================
   2. Adoption after go-live (why-saas-implementations-fail)
   =========================================================== */
.iw-adopt-grid{ display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.375rem, 3vw, 2.75rem); align-items:center; }
.iw-adopt-chart{ position:relative; margin:0; height: 15rem; padding-top:1.5rem; padding-bottom:1.625rem; }
.iw-adopt-y{ position:absolute; left:0; top:0; font-size:0.75rem; font-weight:700; color: var(--iw-ink-45); }
.iw-adopt-chart svg{ display:block; width:100%; height:100%; overflow:visible; }
.iw-adopt-grid-l{ stroke: var(--iw-line); stroke-width:1; vector-effect: non-scaling-stroke; }
.iw-adopt-line{ fill:none; stroke: var(--iw-ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect: non-scaling-stroke; }
.iw-adopt-area{ fill: var(--iw-green); opacity:.28; }
.is-all .iw-adopt-area{ opacity:.45; }
.iw-adopt-dot{ position:absolute; right:-0.4375rem; width:0.875rem; height:0.875rem; margin-top:-0.4375rem; border-radius:0.25rem; background: var(--iw-green); box-shadow: 0 0 0 0.1875rem #fff; }
.iw-adopt-x{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; font-size:0.75rem; font-weight:700; color: var(--iw-ink-45); }
.iw-adopt-ctrl{ display:flex; flex-direction:column; gap:1.125rem; }
.iw-adopt-toggles{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0.5rem; }
.iw-adopt-toggles .iw-chip{ align-items:center; padding:0.75rem 0.875rem; }
.iw-adopt-toggles .iw-chip-slot{ margin-top:0; }
.iw-adopt-out{ margin:0; display:flex; align-items:baseline; gap:0.75rem; }
.iw-adopt-out b{ font-size: clamp(2.5rem, 5vw, 3.5rem); line-height:1; letter-spacing:-.03em; color: var(--iw-ink); font-variant-numeric: tabular-nums; }
.iw-adopt-out span{ font-size:0.875rem; font-weight:700; line-height:1.3; color: var(--iw-ink-70); max-width:10rem; }

/* ===========================================================
   Segmented control (two-way switch)
   =========================================================== */
.iw-seg{ display:inline-flex; gap:0.25rem; padding:0.25rem; border-radius:62.4375rem; box-shadow: inset 0 0 0 1.5px rgba(17,18,26,.14); margin-bottom:1.5rem; max-width:100%; }
.iw-seg-btn{
  position:relative; display:inline-flex; align-items:center; gap:0.5625rem; min-height:2.5rem; padding:0 1rem; border-radius:62.4375rem;
  font-size:0.875rem; font-weight:700; color: var(--iw-ink-70); cursor:pointer; transition: transform .2s var(--iw-ease);
}
.iw-seg-btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: var(--iw-ink); opacity:0; transition: opacity .25s ease; }
.iw-seg-btn:hover::before{ opacity:.06; }
.iw-seg-btn[aria-pressed="true"]{ color: var(--paper, #F4F2ED); }
.iw-seg-btn[aria-pressed="true"]::before{ opacity:1; }
.iw-seg-btn:active{ transform: scale(.97); }
.iw-seg-btn > *{ position:relative; }

/* ===========================================================
   3. Who stays for which stages (why-smes-are-rethinking-consulting)
   The site's four stage tiles round the star (like What We Do's hero):
   Discover top left, Design top right, Build bottom right, Scale bottom
   left. Build and Scale drop out of their slots for traditional
   consulting, and the bridges and the star come in for Rethink Digital.
   =========================================================== */
.iw-stg-grid{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.375rem, 3vw, 2.75rem); align-items:center; }
.iw-stg-board{ position:relative; width: min(100%, 25rem); aspect-ratio:1; justify-self:center; }
.iw-stg-slot, .iw-st{ position:absolute; width:44%; height:44%; border-radius:16%; }
.iw-st--1{ left:3%; top:3%; } .iw-st--2{ left:53%; top:3%; } .iw-st--3{ left:53%; top:53%; } .iw-st--4{ left:3%; top:53%; }
.iw-stg-slot{ display:none; }
.iw-st{
  display:grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; align-content:start; padding:10% 10% 9%;
  background: var(--iw-green); box-shadow: 0 1px 0 rgba(17,18,26,.06), 0 0.875rem 1.5rem -1rem rgba(17,18,26,.45);
  transition: background-color .4s ease, box-shadow .4s ease, transform .6s var(--iw-snap);
}
.iw-st b{ font-size:0.75rem; letter-spacing:.12em; color: var(--iw-ink-70); }
.iw-st svg{ width:1.25rem; height:1.25rem; color: var(--iw-ink); }
.iw-st > span{ grid-column: 1 / -1; grid-row:3; font-size: clamp(1rem, 1.6vw, 1.1875rem); font-weight:700; color: var(--iw-ink); }
.iw-st em{ grid-column: 1 / -1; grid-row:4; margin-top:0.25rem; font-style:normal; font-size:0.8125rem; font-weight:600; line-height:1.3; color: var(--iw-ink-70); }
.iw-stg .iw-st em[data-mode="rd"], .iw-stg.is-rd .iw-st em[data-mode="trad"]{ display:none; }
.iw-stg.is-rd .iw-st em[data-mode="rd"]{ display:block; }
/* Traditional: Build and Scale stay in view as what's missing, ghosted
   with a dashed outline and "Not included" (struck, with a cross) */
.iw-stg:not(.is-rd) :is(.iw-st--3, .iw-st--4){ background: transparent; box-shadow: inset 0 0 0 1.5px rgba(17,18,26,.28); background-image: repeating-linear-gradient(135deg, rgba(17,18,26,.05) 0 0.375rem, transparent 0.375rem 0.75rem); }
.iw-stg:not(.is-rd) :is(.iw-st--3, .iw-st--4) :is(b, svg, > span){ opacity:.45; }
.iw-stg:not(.is-rd) :is(.iw-st--3, .iw-st--4) em[data-mode="trad"]{ display:inline-flex; align-items:center; gap:0.375rem; color: var(--iw-ink); font-weight:700; }
.iw-stg:not(.is-rd) :is(.iw-st--3, .iw-st--4) em[data-mode="trad"]::before{ content:""; width:0.75rem; height:0.75rem; flex:none; background: linear-gradient(45deg, transparent 43%, var(--iw-ink) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--iw-ink) 43% 57%, transparent 57%); }
.is-rd :is(.iw-st--3, .iw-st--4){ animation: iw-stg-in .6s var(--iw-snap) both; }
.is-rd .iw-st--4{ animation-delay:.08s; }
@keyframes iw-stg-in{ from{ transform: translateY(0.75rem) rotate(-4deg) scale(.92); } to{ transform:none; } }
.iw-stg-br{ position:absolute; background: var(--iw-ink); border-radius:62.4375rem; transform: scale(0); transition: transform .45s var(--iw-snap); }
.iw-stg-br--12{ left:47%; top:23.5%; width:6%; height:3%; }
.iw-stg-br--23{ left:73.5%; top:47%; width:3%; height:6%; }
.iw-stg-br--34{ left:47%; top:73.5%; width:6%; height:3%; }
.iw-stg-br--41{ left:23.5%; top:47%; width:3%; height:6%; }
.iw-stg-br--12{ transform:none; }
.is-rd .iw-stg-br{ transform:none; }
.is-rd .iw-stg-br--23{ transition-delay:.3s; } .is-rd .iw-stg-br--34{ transition-delay:.38s; } .is-rd .iw-stg-br--41{ transition-delay:.46s; }
.iw-stg-hub{ position:absolute; left:41%; top:41%; width:18%; height:18%; display:grid; place-items:center; border-radius:24%; background: var(--iw-ink); box-shadow: 0 0 0 0.375rem var(--iw-card); transform: scale(.4) rotate(-40deg); opacity:0; transition: transform .6s var(--iw-snap) .45s, opacity .25s ease .45s; }
.iw-stg-hub .iw-tile{ width:52%; height:52%; background:#fff; border-radius:0; -webkit-mask: var(--bm-star) center / contain no-repeat; mask: var(--bm-star) center / contain no-repeat; }
.is-rd .iw-stg-hub{ opacity:1; transform:none; }
.iw-stg-out{ display:flex; flex-direction:column; gap:0.75rem; }
.iw-stg-num{ margin:0; display:flex; align-items:baseline; gap:0.75rem; }
.iw-stg-num b{ font-size: clamp(2.5rem, 5vw, 3.5rem); line-height:1; letter-spacing:-.03em; color: var(--iw-ink); font-variant-numeric: tabular-nums; }
.iw-stg-num span{ font-size:0.9375rem; font-weight:700; color: var(--iw-ink-70); }
.iw .iw-stg-note{ font-size:1rem; color: var(--iw-ink); }

/* ===========================================================
   4. AI or an expert? (everyone-has-an-ai-adviser)
   =========================================================== */
.iw-risk-grid{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.375rem, 3vw, 2.75rem); align-items:center; }
.iw-risk-map{ position:relative; aspect-ratio: 1; max-width: 22rem; width:100%; justify-self:center; border-radius:1rem; overflow:hidden; box-shadow: inset 0 0 0 1px var(--iw-line); cursor:crosshair; touch-action:none; }
.iw-risk-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.iw-zone{ fill: var(--iw-green); transition: opacity .3s ease; }
.iw-zone--a{ opacity:.14; } .iw-zone--b{ opacity:.3; } .iw-zone--c{ opacity:.55; }
[data-zone="0"] .iw-zone--a, [data-zone="1"] .iw-zone--b, [data-zone="2"] .iw-zone--c{ opacity:.8; }
.iw-zone-name{ position:absolute; font-size:0.75rem; font-weight:700; color: var(--iw-ink); pointer-events:none; }
.iw-zone-name--a{ left:0.75rem; bottom:0.75rem; }
.iw-zone-name--b{ left:37.5%; top:58%; transform: translate(-50%, -50%); white-space:nowrap; }
.iw-band{ fill:none; stroke: rgba(17,18,26,.12); stroke-width:1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.iw-zone-name--c{ left:50%; top:16.5%; transform: translate(-50%, -50%); }
.iw-risk-axis{ position:absolute; font-size:0.6875rem; font-weight:700; color: var(--iw-ink-45); pointer-events:none; }
.iw-risk-axis--x{ right:0.75rem; bottom:0.625rem; }
.iw-risk-axis--y{ left:0.75rem; bottom:2.5rem; transform-origin:0 100%; transform: rotate(-90deg) translateY(100%); white-space:nowrap; }
.iw-risk-dot{ position:absolute; width:1.25rem; height:1.25rem; margin:-0.625rem 0 0 -0.625rem; border-radius:0.375rem; background: var(--iw-ink); box-shadow: 0 0 0 0.25rem #fff, 0 0.5rem 1rem -0.375rem rgba(17,18,26,.5); transition: left .15s ease, top .15s ease; pointer-events:none; }
.iw-risk-ctrl{ display:flex; flex-direction:column; gap:1.25rem; }
/* Where the slider's word changes: a small notch on the track at each
   band edge (--n bands: thirds or quarters) */
.iw-risk-ctrl .iw-range{ position:relative; }
.iw-ticks{ position:absolute; left:0.6875rem; right:0.6875rem; bottom:0; height:1.375rem; pointer-events:none; z-index:1; }
.iw-ticks i{ position:absolute; top:50%; width:2px; height:0.875rem; margin:-0.4375rem 0 0 -1px; border-radius:2px; background: rgba(17,18,26,.4); }
.iw-ticks i:nth-child(1){ left: calc(100% / var(--n)); }
.iw-ticks i:nth-child(2){ left: calc(200% / var(--n)); }
.iw-ticks i:nth-child(3){ left: calc(300% / var(--n)); }
.iw-risk-res{ padding:1rem 1.125rem; border-radius:1rem; background: var(--iw-card-hi); box-shadow: inset 0 0 0 1px var(--iw-line); }
.iw-risk-res .iw-res-name{ display:block; font-size:1.125rem; font-weight:700; color: var(--iw-ink); margin-bottom:0.25rem; }
.iw-risk-res .iw-list{ list-style:none; padding:0; margin:0.625rem 0 0; display:flex; flex-wrap:wrap; gap:0.375rem; }
.iw-risk-res .iw-list li{ padding:0.25rem 0.625rem; border-radius:62.4375rem; box-shadow: inset 0 0 0 1px rgba(17,18,26,.16); font-size:0.8125rem; font-weight:700; color: var(--iw-ink-70); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .iw-audit-grid, .iw-adopt-grid, .iw-risk-grid, .iw-stg-grid{ grid-template-columns: minmax(0,1fr); }
  .iw-adopt-chart{ height: 13rem; }
}
@media (max-width: 640px){
  .iw{ margin: 2.25rem 0 2.75rem; border-radius:1.25rem; }
  .iw-reads{ grid-template-columns: minmax(0,1fr); gap:0.5rem; }
  .iw-read{ padding:0.875rem 1rem; }
  .iw-read dd{ margin-top:0.25rem; }
  .iw-seat{ width:0.5625rem; height:0.5625rem; }
  .iw-seats{ gap:0.1875rem; }
  .iw-seg{ display:flex; }
  .iw-seg-btn{ flex:1; justify-content:center; padding:0 0.625rem; font-size:0.8438rem; }
}

/* ---------- Reduced motion: final states, instant changes ---------- */
@media (prefers-reduced-motion: reduce){
  .iw *, .iw *::before, .iw *::after{ transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
  .iw-pre .iw-seat{ opacity:1; transform:none; }
  .iw-btn .iw-tile, .iw-seg-btn .iw-tile{ transform:none; }
}
.iw [hidden]{ display:none !important; }

/* ---------- Phones: the sliders' labels and footnotes at a readable size ---------- */
@media (max-width: 560px){
  .iw-read dt, .iw-sub, .iw-legend{ font-size:0.875rem; }
}
@media (max-width: 640px){
  .iw .iw-foot{ font-size:0.875rem; }
  .iw-seg-btn{ min-height:2.75rem; }
  .iw input[type="range"]{ height:2.5rem; }
  .iw-range{ gap:0.25rem; }
}