/* Home v3 (25 Oct 2026): the /work/ "Readout" language applied to the business-systems home page.
   Loaded after systems.css and work.css. Restyles only: the dashboards, run logs, tooltips and contact form
   keep systems.js's behaviour. Brand rules kept: Archivo only, square corners, amber on graphite. */

.rd { font-size: 18px; }

/* ── hero (built from work.css's wall + sweep) ───────────────────────── */

.rd-h1 { max-width: 15ch; font-size: clamp(44px, 6.3vw, 112px); }
/* 10 Nov 2026: the h1 kicker here is plain text (work.css styles .wk-h1__kicker as the home page's link) */
.rd-h1 .wk-h1__kicker { text-decoration: none; }

.rd-hero__links { margin-top: 24px; font-size: 15px; line-height: 1.6; color: rgba(244, 246, 247, 0.62); }
.rd-hero__links .link { color: var(--paper); }

/* the ring dashboard: the ORB's rings as a readout of the day, filling from the six o'clock datum */
.rd .wk-hero__copy .rd-h1 { max-width: 11ch; font-size: clamp(44px, 5.2vw, 88px); }   /* 88px cap keeps the last line clear of the gauge at 1920 */
.rd .wk-hero__copy .wk-hero__sub { max-width: 44ch; }

.rd-gauge {
  position: absolute;
  z-index: 2;
  right: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
  top: 47%;
  transform: translateY(-50%);
  width: min(30vw, 430px);
  margin: 0;
}

.rd-gauge::before {   /* a pool of shadow so the legend reads over the wall of screens */
  content: "";
  position: absolute;
  inset: -14% -16% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(11, 14, 17, 0.9), rgba(11, 14, 17, 0.6) 60%, rgba(11, 14, 17, 0));
  pointer-events: none;
}

.rd-gauge__dial { position: relative; aspect-ratio: 1; }
.rd-gauge__dial .wk-sweep__beam { inset: 2%; }
.rd-gauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd-gauge__track { stroke: rgba(244, 246, 247, 0.08); stroke-width: 13; }
.rd-gauge__arc { stroke-width: 13; stroke-dasharray: var(--v) 100; stroke-dashoffset: 0; }
.rd-gauge__arc--1 { stroke: var(--amber); }
.rd-gauge__arc--2 { stroke: #F4F6F7; }
.rd-gauge__arc--3 { stroke: #8E979F; }
.rd-gauge__arc--4 { stroke: #C97A12; }
.rd-gauge__datum { stroke: var(--amber); stroke-width: 2; }

.rd-gauge__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.rd-gauge__centre span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 70, "wght" 600;
  color: rgba(244, 246, 247, 0.6);
}

.rd-gauge__centre b {
  font-size: clamp(54px, 5.6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.rd-gauge__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 22px;
  padding: 0 14px;
  background: rgba(11, 14, 17, 0.92);   /* a solid plate: the legend and caption must read over any wall tile */
  border-top: 1px solid rgba(244, 246, 247, 0.14);
}

.rd-gauge__legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 246, 247, 0.1);
  font-size: 13px;
  color: rgba(244, 246, 247, 0.7);
}

.rd-gauge__legend i { width: 9px; height: 9px; }
.rd-gauge__legend .k1 { background: var(--amber); }
.rd-gauge__legend .k2 { background: #F4F6F7; }
.rd-gauge__legend .k3 { background: #8E979F; }
.rd-gauge__legend .k4 { background: #C97A12; }
.rd-gauge__legend b { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-gauge figcaption { padding: 10px 14px; font-size: 12px; color: rgba(244, 246, 247, 0.7); background: rgba(11, 14, 17, 0.92); }

/* the rings fill once on load (armed pages only) */
.wk-js .rd-gauge__arc { stroke-dashoffset: var(--v); animation: rd-fill 2.2s var(--ease) 0.5s forwards; }
.wk-js .rd-gauge__arc--2 { animation-delay: 0.7s; }
.wk-js .rd-gauge__arc--3 { animation-delay: 0.9s; }
.wk-js .rd-gauge__arc--4 { animation-delay: 1.1s; }
@keyframes rd-fill { to { stroke-dashoffset: 0; } }

@media (min-width: 961px) and (max-width: 1300px) {
  .rd-gauge__legend { grid-template-columns: 1fr; }   /* two columns can overlap their values below ~1300px */
}

@media (max-width: 960px) {
  .rd-gauge { position: relative; z-index: 3; order: 2; top: auto; right: auto; transform: none; width: min(calc(100% - 2 * var(--pad)), 420px); margin: 56px var(--pad) 0; }
  .rd .wk-hero__readout { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-js .rd-gauge__arc { stroke-dashoffset: 0; animation: none; }
}

/* ── bands ───────────────────────────────────────────────────────────── */

.rd .band { padding-block: clamp(110px, 12vw, 200px); }

.rd .band--graphite { --muted: rgba(244, 246, 247, 0.68); }

.rd .band--alloy {
  background: #ECEEF0;
  --accent: #9A5A08;   /* amber that reads as text on the light band: 4.7:1 */
  --muted: rgba(14, 18, 21, 0.64);
  --hair: rgba(14, 18, 21, 0.13);
}

.rd .band--joined { border-top-color: rgba(14, 18, 21, 0.1); }

/* ── headings, ledes, the readout eyebrow ───────────────────────────── */

.rd .h2 {
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 800;
  font-variation-settings: "wdth" 114, "wght" 800;
  max-width: 15ch;
}

.rd .h2--wide { max-width: 19ch; }

.rd .lede {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 42ch;
}

.rd .sys-lede { margin-top: 30px; }

.rd-eye { margin-bottom: 26px; }
.rd-eye b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }

/* ── 01 the problem: big statements, counted ─────────────────────────── */

.rd .sys-pains { grid-template-columns: 1fr; margin-top: 64px; border-top-color: var(--hair); counter-reset: pain; }

.rd .sys-pains li {
  counter-increment: pain;
  padding: 26px 0 26px 76px;
  border-bottom-color: var(--hair);
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 102, "wght" 560;
}

.rd .sys-pains li::before {
  content: counter(pain, decimal-leading-zero);
  width: auto;
  height: auto;
  top: 36px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variation-settings: "wdth" 72, "wght" 600;
}

.rd .sys-after { margin-top: 48px; font-style: italic; font-variation-settings: "wdth" 94, "wght" 400; }

/* ── 02 what we build: a numbered spec grid ──────────────────────────── */

.rd .sys-feats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gutter);
  margin-top: 64px;
  border-top: 0;
  counter-reset: feat;
}

.rd .sys-feats div { counter-increment: feat; padding: 28px 0 36px; border-top: 1px solid var(--hair); border-bottom: 0; }

.rd .sys-feats dt { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; font-variation-settings: "wdth" 104, "wght" 700; }

.rd .sys-feats dt::before {
  content: counter(feat, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--amber);
  font-variation-settings: "wdth" 72, "wght" 600;
}

.rd .sys-feats dd { margin-top: 12px; }

/* ── 03 dashboards: the panel sits like a screen on a stage ──────────── */

.rd .dash { margin-top: 64px; box-shadow: 0 80px 140px -60px rgba(14, 18, 21, 0.55); }

/* ── 04 automation ───────────────────────────────────────────────────── */

.rd .flows { margin-top: 56px; }
.rd .flow__kind { letter-spacing: 0.16em; font-variation-settings: "wdth" 70, "wght" 600; }

/* ── 05 integrations, 06 industries ──────────────────────────────────── */

.rd .integ { margin-top: 56px; }
.rd .sys-inds { margin-top: 56px; }
.rd .sys-ind { border-top-width: 2px; }
.rd .sys-ind .h3 { font-size: clamp(21px, 1.7vw, 25px); font-variation-settings: "wdth" 104, "wght" 700; }

/* ── 07 proof ────────────────────────────────────────────────────────── */

.rd .sys-built__shot img { border: 0; box-shadow: 0 0 0 1px rgba(244, 246, 247, 0.08), 0 80px 140px -60px rgba(0, 0, 0, 0.6); }
.rd .sys-built .h2 { font-size: clamp(36px, 4vw, 66px); max-width: 12ch; }

/* ── 08 how it works ─────────────────────────────────────────────────── */

.rd .steps { margin-top: 56px; border-top-color: var(--hair); }
.rd .step { grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 1fr); padding: 40px 0; border-bottom-color: var(--hair); }
.rd .step::before {   /* outlined numerals, as on /work/; decorative, the order is in the list itself */
  font-size: clamp(64px, 7vw, 120px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-variation-settings: "wdth" 125, "wght" 800;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(14, 18, 21, 0.62);   /* about 4.6:1 on the light band: the step order reads */
}
.rd .step h3 { font-size: clamp(21px, 1.8vw, 27px); letter-spacing: -0.015em; font-variation-settings: "wdth" 104, "wght" 700; }

.rd-when {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 70, "wght" 600;
  color: var(--accent);
}

.rd .step .rd-when + h3 { margin-top: 0; }

/* ── 09 your data ────────────────────────────────────────────────────── */

.rd .rd-promises dt { font-size: clamp(22px, 1.9vw, 28px); }

/* ── 10 who you deal with + questions ────────────────────────────────── */

.rd .sys-cols { margin-top: 56px; }
.rd .sys-cols .h3 { font-size: clamp(21px, 1.7vw, 25px); font-variation-settings: "wdth" 104, "wght" 700; }
.rd .faq { margin-top: clamp(96px, 10vw, 160px); }

/* ── 10 contact ──────────────────────────────────────────────────────── */

.rd #contact .btn { padding: 18px 32px; font-size: 16px; }

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .rd .sys-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .rd .sys-feats { grid-template-columns: 1fr; }
  .rd .sys-pains li { padding-left: 52px; }
  .rd .sys-pains li::before { top: 32px; }
}

/* ── the 30 (27 Oct 2026): the name explained, and the starting menu of 30 numbers. Never "close" next to a ring (Apple AU mark) ── */

.t30 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(30vw, 340px);
  gap: 40px 72px;
  align-items: center;
}

.t30__dial { position: relative; margin: 0; aspect-ratio: 1; }
.t30__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t30__hair { stroke: rgba(244, 246, 247, 0.14); stroke-width: 1.5; }
.t30__tick { stroke: var(--amber); stroke-width: 4; }
.t30__datum { stroke: var(--amber); stroke-width: 2; }

/* the ticks sweep to amber, one by one, from the datum (armed pages only; static and full without JS) */
.wk-js .t30__dial .t30__tick { stroke: rgba(244, 246, 247, 0.2); transition: stroke 0.35s var(--ease) calc(0.5s + var(--i) * 45ms); }
.wk-js .t30__dial.is-in .t30__tick { stroke: var(--amber); }

.t30__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
}

.t30__centre b {
  font-size: clamp(64px, 7vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.t30__centre span {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 246, 247, 0.6);
}

.t30__groups {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.t30__g { padding: 22px 20px 20px; background: var(--graphite); }

.t30__g h3 {   /* the range sits on its own line, so the five headings stay level at every width */
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}

.t30__g h3 span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

.t30__g ul { margin-top: 14px; }

.t30__g li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--hair);
  font-size: 16px;
  line-height: 1.4;
}

.t30__n { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }

.t30__fine { margin-top: 28px; }

@media (max-width: 960px) {
  .t30 { grid-template-columns: 1fr; }
  .t30__dial { width: min(100%, 300px); margin-inline: auto; }
  .t30__groups { margin-top: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t30__g:last-child { grid-column: span 2; }
}

@media (max-width: 480px) {
  .t30__groups { grid-template-columns: 1fr; }
  .t30__g:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-js .t30__dial .t30__tick { stroke: var(--amber); transition: none; }
}