/* RDZ Media case studies — stylesheet. Palette: black / cream / orange rgb(211,84,0). Inter + IBM Plex Mono. */
:root {
  --orange: #e85d04;
  --orange-ink: #fff;
  --orange-soft: #fff3ee;
  --orange-line: #f6c4a8;
  --black: #0d1b2a;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --ink: #111111;
  --muted: #555e6b;
  --line: #e3e8ee;
  --line-strong: #c9d2dc;
  --ok: #2e7d4f;
  --hero-bg: #0d1b2a;
  --hero-ink: #f4f6f9;
  --hero-muted: #a9b4c2;
  --hero-line: #1e2d3d;
  --knot: #3e4f63;
  --sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 12px;
  --gutter: clamp(16px, 5vw, 48px);
  --maxw: 1120px;
  --measure: 66ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --orange: #f07a2a; --orange-ink: #1a0d04; --orange-soft: #2a1a10; --orange-line: #6b3a16;
    --bg: #0a1628; --surface: #112236; --surface-2: #16293f; --ink: #e8edf3; --muted: #9aa7b6;
    --line: #24364b; --line-strong: #33475e; --ok: #5fbf86;
    --hero-bg: #0a1628; --hero-ink: #f4f6f9; --hero-muted: #9aa7b6; --hero-line: #1e2d3d; --knot: #4a5d73;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --orange: #f07a2a; --orange-ink: #1a0d04; --orange-soft: #2a1a10; --orange-line: #6b3a16;
  --bg: #0a1628; --surface: #112236; --surface-2: #16293f; --ink: #e8edf3; --muted: #9aa7b6;
  --line: #24364b; --line-strong: #33475e; --ok: #5fbf86;
  --hero-bg: #0a1628; --hero-ink: #f4f6f9; --hero-muted: #9aa7b6; --hero-line: #1e2d3d; --knot: #4a5d73;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); font-feature-settings: "ss01", "cv11"; }
img, video, svg { max-width: 100%; height: auto; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kicker { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.measure { max-width: var(--measure); }
.lede { font-size: 19px; color: var(--muted); max-width: var(--measure); }

/* badges: Measured (filled) / Estimated (outlined) — nothing reads as proven without a source */
.badge { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; white-space: nowrap; vertical-align: middle; }
.badge.measured { background: var(--orange); color: var(--orange-ink); }
.badge.estimated { border: 1px solid var(--orange); color: var(--orange); }
.badge.neutral { border: 1px solid var(--line-strong); color: var(--muted); }
.hero .badge.estimated, .hero .badge.neutral { border-color: var(--hero-muted); color: var(--hero-muted); }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--black); color: #f4f6f9; border-bottom: 1px solid #1e2d3d; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #f4f6f9; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: auto; display: block; }
.brand b { font-weight: 800; letter-spacing: 0.02em; font-size: 16px; }
.brand span { color: #a9b4c2; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.nav .links { display: flex; align-items: center; gap: 18px; }
.nav .links > a { color: #d5dce5; font-size: 14.5px; }
.nav .links > a:hover { color: #fff; text-decoration: none; }
.nav .links > a.hide-sm { display: none; }
@media (min-width: 720px) { .nav .links > a.hide-sm { display: inline; } }
.lang { display: inline-flex; border: 1px solid #2b3b4d; border-radius: 999px; overflow: hidden; flex: none; }
.lang a { padding: 5px 11px; font: 700 12px/1.4 var(--sans); letter-spacing: 0.08em; color: #a9b4c2; }
.lang a.on { background: var(--orange); color: #fff; }
.lang a:hover { text-decoration: none; color: #fff; }

/* ---- hero (black band) ---- */
.hero { background: var(--hero-bg); color: var(--hero-ink); border-bottom: 1px solid var(--hero-line); overflow: hidden; }
.hero .wrap { display: grid; gap: 28px; padding-block: 44px 40px; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding-block: 64px 56px; } }
.hero h1 { font-size: clamp(32px, 5.2vw, 58px); letter-spacing: -0.03em; line-height: 1.04; }
.hero .outcome { font-size: clamp(17px, 2vw, 21px); color: var(--hero-muted); margin-top: 18px; max-width: 58ch; }
.hero .client { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 13px/1.4 var(--mono); color: var(--hero-muted); }
.hero .client::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); flex: none; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; align-items: center; }
.hero .meta .kicker { color: var(--orange); }
.hero .meta .idx { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; color: var(--hero-muted); }
.knot-box { position: relative; aspect-ratio: 5 / 4; max-width: 100%; }
.knot-box svg { width: 100%; height: 100%; display: block; overflow: visible; }
.knot-box .lbl { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hero-muted); }
.knot-box .lbl.a { left: 2%; bottom: 4%; }
.knot-box .lbl.b { right: 2%; bottom: 4%; color: var(--orange); }
.kpis { grid-column: 1 / -1; display: grid; gap: 1px; background: var(--hero-line); border: 1px solid var(--hero-line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { background: var(--hero-bg); padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.kpi .v { font: 500 clamp(26px, 3.4vw, 38px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--hero-ink); }
.kpi .v .arrow { color: var(--orange); margin-inline: 0.15em; }
.kpi .l { font-size: 14px; color: var(--hero-muted); line-height: 1.4; }
.kpi .s { font: 400 11px/1.4 var(--mono); color: var(--hero-muted); opacity: 0.8; }

/* ---- section nav ---- */
.subnav { position: sticky; top: 60px; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 0; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 12px 10px; font: 500 13px/1 var(--sans); color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { text-decoration: none; color: var(--ink); }
.subnav a.on { color: var(--orange); border-bottom-color: var(--orange); }

/* ---- sections ---- */
.sec { padding-block: clamp(44px, 7vw, 84px); border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.sec:last-of-type { border-bottom: 0; }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.sec-head h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.025em; }
.sec-head .lede { font-size: 18px; }
.two { display: grid; gap: 28px; }
@media (min-width: 880px) { .two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }

/* before: role cards */
.roles { display: grid; gap: 14px; }
@media (min-width: 720px) { .roles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.role { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; }
.role .who { font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.role h3 { font-size: 17px; }
.role p { color: var(--muted); font-size: 15px; }
.role .cost { margin-top: 4px; font: 500 13px/1.4 var(--mono); color: var(--orange); }

/* system: flow diagram */
.flow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 2.5vw, 28px); }
.flow svg { width: 100%; height: auto; display: block; }
.flow .node rect { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.flow .node text { fill: var(--ink); font: 500 12.5px var(--sans); }
.flow .node .tag { fill: var(--muted); font: 500 9.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.flow .node.agent rect { fill: var(--surface); stroke: var(--line-strong); }
.flow .node.gate rect { fill: var(--orange-soft); stroke: var(--orange); stroke-width: 1.5; }
.flow .node.gate text { fill: var(--ink); font-weight: 600; }
.flow .node.gate .tag { fill: var(--orange); }
.flow .node.output rect { fill: var(--black); stroke: var(--black); }
.flow .node.output text { fill: #f4f6f9; }
.flow .node.output .tag { fill: #a9b4c2; }
.flow .edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.flow .dot { fill: var(--orange); }
.flow .gate-ring { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .flow .gate-ring { animation: ring 2.4s ease-out infinite; } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.flow-list { display: none; }
@media (max-width: 719px) { .flow svg { display: none; } .flow-list { display: grid; gap: 0; } }
.flow-list .st { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-block: 10px; position: relative; }
.flow-list .st::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.flow-list .st i { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--line-strong); position: relative; z-index: 1; margin-top: 2px; }
.flow-list .st.gate i { background: var(--orange-soft); border-color: var(--orange); }
.flow-list .st.output i { background: var(--black); border-color: var(--black); }
.flow-list .st b { display: block; font-size: 15px; }
.flow-list .st span { font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.steps { counter-reset: s; display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.step { counter-increment: s; display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 2px solid var(--line-strong); }
.step::before { content: counter(s, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--orange); letter-spacing: .08em; }
.step h3 { font-size: 16.5px; }
.step p { font-size: 15px; color: var(--muted); }
.step.gate { border-top-color: var(--orange); }

/* example: timeline */
.tl { display: grid; gap: 0; position: relative; max-width: 760px; }
.ev { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-block: 14px; position: relative; }
@media (max-width: 520px) { .ev { grid-template-columns: 1fr; gap: 4px; } }
.ev::before { content: ""; position: absolute; left: 112px; top: 0; bottom: 0; width: 1px; background: var(--line); }
@media (max-width: 520px) { .ev::before { display: none; } }
.ev .t { font: 500 12.5px/1.6 var(--mono); color: var(--muted); letter-spacing: .02em; padding-top: 2px; }
.ev .b { position: relative; padding-left: 26px; display: grid; gap: 4px; }
@media (max-width: 520px) { .ev .b { padding-left: 0; } }
.ev .b::before { content: ""; position: absolute; left: -4px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong); transition: background .5s, box-shadow .5s; }
@media (max-width: 520px) { .ev .b::before { display: none; } }
.ev.in .b::before, .ev.agent .b::before { background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.ev .who { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev.human .who { color: var(--orange); }
.ev .b p { font-size: 15.5px; }
.ev .quote { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 14.5px; margin-top: 4px; white-space: pre-line; }
.ev.human .quote { border-color: var(--orange-line); background: var(--orange-soft); }

/* demo video */
.video { background: var(--black); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hero-line); max-width: 960px; }
.video video { width: 100%; display: block; aspect-ratio: 16 / 9; background: var(--black); }
.video-note { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: var(--measure); }

/* time saved */
.tsum { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
@media (min-width: 640px) { .tsum { grid-template-columns: repeat(3, 1fr); } }
.tsum div { background: var(--surface); padding: 18px 20px; display: grid; gap: 6px; }
.tsum b { font: 500 clamp(26px, 3vw, 34px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tsum b small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.tsum div > span { font-size: 13.5px; color: var(--muted); }
.tsum .big { background: var(--black); color: #f4f6f9; }
.tsum .big b { color: var(--orange); }
.tsum .big > span { color: #a9b4c2; }
.tsum .big b small { color: #a9b4c2; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.time { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14.5px; }
table.time th { text-align: left; font: 600 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.time td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.time tr:last-child td { border-bottom: 0; }
table.time .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.time .task b { display: block; font-size: 15px; }
table.time .task span { font-size: 13px; color: var(--muted); }
table.time .task .basis { display: block; font: 400 12px/1.4 var(--mono); color: var(--muted); margin-top: 4px; }
table.time .bars { min-width: 150px; }
.bar { display: grid; grid-template-columns: 1fr; gap: 4px; }
.bar i { display: block; height: 7px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 55%, transparent); width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bar i.after { background: var(--orange); }
.in .bar i { width: var(--w); }
@media (prefers-reduced-motion: reduce) { .bar i { width: var(--w); transition: none; } }
table.time tr.oneoff td { background: var(--surface-2); }
table.time .saved { color: var(--orange); font-weight: 500; }
.how { margin-top: 18px; max-width: var(--measure); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.how summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 10px; }
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: "+"; font: 500 16px/1 var(--mono); color: var(--orange); width: 14px; }
.how[open] summary::before { content: "−"; }
.how .body { padding: 0 16px 16px; font-size: 14.5px; color: var(--muted); display: grid; gap: 8px; }
.how .body ul { margin: 0; padding-left: 18px; }

/* human decides + stack */
.decide { display: grid; gap: 12px; }
.decide li { list-style: none; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; font-size: 15.5px; }
.decide ul { margin: 0; padding: 0; display: grid; gap: 10px; }
.decide li::before { content: "✓"; color: var(--orange); font-weight: 700; font-family: var(--mono); }
.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.stack span { font: 500 12.5px/1 var(--mono); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); }
.stack-l { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 26px; }

/* CTA */
.cta { background: var(--black); color: #f4f6f9; }
.cta .wrap { display: grid; gap: 20px; padding-block: clamp(44px, 6vw, 72px); }
@media (min-width: 880px) { .cta .wrap { grid-template-columns: 1fr auto; align-items: center; gap: 40px; } }
.cta h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.025em; }
.cta p { color: #a9b4c2; max-width: 60ch; margin-top: 10px; font-size: 17px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange); color: #fff; font-weight: 700; padding: 14px 26px; border-radius: 8px; border: 0; cursor: pointer; font-size: 16px; white-space: nowrap; }
.btn:hover { background: #d44f00; text-decoration: none; }
.btn.ghost { background: transparent; color: #f4f6f9; border: 1.5px solid #3a4b5e; }
.btn.ghost:hover { background: #111111; }
.cta .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* more cases */
.cards { display: grid; gap: 14px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards.four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; align-content: start; color: var(--ink); position: relative; transition: border-color .2s, transform .2s; }
.card:hover { text-decoration: none; border-color: var(--orange); transform: translateY(-2px); }
.card .kicker { display: flex; justify-content: space-between; gap: 10px; }
.card .kicker em { font-style: normal; color: var(--muted); }
.card h3 { font-size: 19px; letter-spacing: -0.01em; }
.card .num { font: 500 30px/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.card .num small { display: block; font: 400 13px/1.4 var(--sans); color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.card .hrs { font: 500 12.5px/1.4 var(--mono); color: var(--orange); }
.card .go { position: absolute; right: 18px; top: 18px; color: var(--orange); font: 500 14px var(--mono); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filters button { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; }
.filters button[aria-pressed="true"] { background: var(--black); color: #f4f6f9; border-color: var(--black); }
.card[hidden] { display: none; }

/* index: principles */
.principles { display: grid; gap: 14px; }
@media (min-width: 760px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); align-content: start; }
.principle .n { font: 500 12px/1 var(--mono); color: var(--orange); letter-spacing: .08em; }
.principle h3 { font-size: 18px; }
.principle p { font-size: 15px; color: var(--muted); }

/* footer */
footer.foot { background: var(--black); color: #a9b4c2; font-size: 14px; }
footer.foot .wrap { display: grid; gap: 18px; padding-block: 34px; }
@media (min-width: 760px) { footer.foot .wrap { grid-template-columns: 1fr auto; align-items: start; } }
footer.foot a { color: #d5dce5; }
footer.foot .brand { margin-bottom: 8px; }
footer.foot nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
footer.foot button { background: none; border: 0; color: #d5dce5; cursor: pointer; padding: 0; text-decoration: underline; font-size: 14px; }
footer.foot .legal { font-size: 12.5px; color: #7f8b9a; max-width: 70ch; }

/* reveal */
.rv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s; transform: translateY(10px); opacity: .75; }
  .rv.in { transform: none; opacity: 1; }
  .no-io .rv { transform: none; opacity: 1; }
}

.cnum { font: inherit; color: inherit; letter-spacing: inherit; }
.tsum.two { }
@media (min-width: 640px) { .tsum.two { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 899px) { .knot-box { aspect-ratio: 5 / 2.2; max-height: 200px; margin-inline: auto; width: 100%; } }

/* hand-drawn "before" art beside the Before heading */
.before-head { display: grid; gap: 24px; align-items: center; margin-bottom: clamp(24px, 4vw, 40px); }
.before-head .sec-head { margin-bottom: 0; }
@media (min-width: 880px) { .before-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
.before-art { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #ffffff; }
.before-art img { display: block; width: 100%; height: auto; aspect-ratio: 1216 / 896; object-fit: cover; }
:root[data-theme="dark"] .before-art img { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .before-art img { filter: brightness(.92); } }
/* index hero: Europe constellation behind the headline */
.hero-index { position: relative; }
.hero-index::before { content: ""; position: absolute; inset: 0; background: url('../img/before/index.webp') right center / auto 100% no-repeat; opacity: .55; pointer-events: none; }
.hero-index .wrap { position: relative; }
@media (max-width: 899px) { .hero-index::before { background-size: cover; opacity: .3; } }
.hero-index .knot-box { visibility: hidden; }
@media (max-width: 899px) { .hero-index .knot-box { display: none; } }

/* case hero: the hand-drawn illustration sits BEHIND the animated string, inverted to light ink on black,
   faded and feathered at the edges so it melts into the hero background */
.knot-box { isolation: isolate; }
.knot-box svg { position: relative; z-index: 1; }
.knot-bg { position: absolute; inset: -12% -8%; width: 116%; height: 124%; max-width: none; object-fit: cover; z-index: 0; pointer-events: none;
  filter: invert(1) hue-rotate(180deg) blur(1.2px) saturate(1.2); opacity: .32; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 35%, transparent 78%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 35%, transparent 78%); }
@media (prefers-reduced-motion: no-preference) { .knot-bg { animation: knotbg 2.4s ease-out both; } }
@keyframes knotbg { from { opacity: 0; transform: scale(1.04); } to { opacity: .32; transform: none; } }
@media (max-width: 899px) { .knot-bg { opacity: .26; } }

/* hand-drawn cut-outs: the same drawing, paper removed, dropped beside a section heading at a tilt */
.ink-head { display: grid; gap: 8px; align-items: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ink-head .sec-head { margin-bottom: 0; }
@media (min-width: 880px) { .ink-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; } }
.ink { margin: 0; justify-self: center; width: 100%; max-width: 380px; pointer-events: none; }
.ink.small { max-width: 300px; }
.ink img { display: block; width: 100%; height: auto; }
.ink.tilt-l { transform: rotate(-9deg); }
.ink.tilt-r { transform: rotate(11deg); }
.ink.rv.in.tilt-l { transform: rotate(-9deg); }
.ink.rv.in.tilt-r { transform: rotate(11deg); }
@media (max-width: 879px) { .ink { max-width: 240px; margin-top: 8px; } .ink.small { max-width: 200px; } }
/* dark themes: ink becomes light lines, orange stays orange */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink img { filter: invert(1) hue-rotate(180deg); opacity: .85; } }
:root[data-theme="dark"] .ink img { filter: invert(1) hue-rotate(180deg); opacity: .85; }
.ink img { -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 58%, transparent 100%); }

/* ================= motion layer (2026-10-03) =================
   Every element below is written in its FINAL state. Keyframes only run under .js, with
   no-preference for motion, and stay paused until JS adds .play when the figure scrolls into view. */

/* scroll progress under the sticky nav (case pages) */
.sprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.sprog i { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---- "In one picture" ---- */
.sig { margin: 0; display: grid; gap: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3vw, 32px); align-items: center; }
@media (min-width: 760px) { .sig { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; } }
.sig-stage { position: relative; min-width: 0; }
.sig-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sig-svg text { font-family: var(--sans); fill: var(--ink); }
.sig-svg .t-s { font-size: 16px; fill: var(--muted); font-weight: 500; }
.sig-svg .t-xs { font: 500 13px var(--mono); fill: var(--muted); letter-spacing: .04em; }
.sig-svg .t-m { font: 500 13px var(--mono); fill: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.sig-svg .t-big { font: 500 24px var(--mono); fill: var(--orange); }
.sig-read { display: grid; gap: 8px; align-content: center; min-width: 0; }
.sig-big { font: 500 clamp(34px, 5vw, 54px)/1.05 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--orange); display: flex; flex-wrap: wrap; align-items: baseline; }
.sig-big .was { color: var(--muted); font-size: .55em; letter-spacing: -0.01em; }
.sig-big .arrow { color: var(--muted); font-size: .55em; margin-inline: .3em; }
.sig-big.dim { color: var(--ink); }
.sig-lbl { font-size: 15px; color: var(--muted); max-width: 32ch; }
.sig-sub { font: 500 13px/1.3 var(--mono); color: var(--ink); }
.sig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sig-pair .sig-big { font-size: clamp(30px, 4vw, 44px); }

/* paid media: bar + stamp */
.pm-ghost { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 6 6; }
.pm-bar { fill: var(--orange); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--s)); }
.pm-tick { stroke: var(--orange); stroke-width: 2; }
.sig-stamp { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 2px solid var(--orange); border-radius: 6px; color: var(--orange); background: var(--surface); font: 600 clamp(11px, 1.6vw, 13px)/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-7deg); max-width: 70%; }
.sig-stamp svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* content engine: page cards */
.ce-card { transform-box: fill-box; transform-origin: center; }
.ce-card rect { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.ce-card path { stroke-width: 3; stroke-linecap: round; }
.ce-l1 { stroke: var(--orange); }
.ce-l { stroke: var(--line-strong); }

/* follow-up: phone thread */
.fu-phone { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 2; }
.fu-notch { fill: var(--line-strong); }
.fu-out rect { fill: var(--orange-soft); stroke: var(--orange-line); stroke-width: 1.5; }
.fu-out path, .fu-in path { stroke-width: 4; stroke-linecap: round; }
.fu-out path { stroke: color-mix(in srgb, var(--orange) 55%, transparent); }
.fu-in rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.fu-in path { stroke: var(--line-strong); }
.fu-out, .fu-in { transform-box: fill-box; }
.fu-out { transform-origin: 100% 100%; }
.fu-in { transform-origin: 0 100%; }
.fu-ticks path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fu-bar { fill: var(--surface); stroke: var(--line); }

/* lead capture: streams into a ledger */
.lc-p { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.lc-ledger { fill: var(--surface-2); stroke: var(--orange); stroke-width: 2; }
.lc-rows { stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; }
.lc-dots circle { fill: var(--orange); }
.lc-dots circle.dup { fill: var(--muted); }

/* weekly reporting: sources → chart, gauge */
.wr-grid { stroke: var(--line); stroke-width: 1; }
.wr-src { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wr-line { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wr-end { fill: var(--orange); }
.gauge, .ring { width: 132px; height: auto; display: block; overflow: visible; }
.g-track, .g-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.g-track { stroke: var(--line); }
.g-fill { stroke: var(--orange); stroke-dasharray: 32 100; }
.g-needle { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transform-box: view-box; transform-origin: 60px 62px; transform: rotate(var(--a)); }
.g-hub { fill: var(--ink); }

/* voice agent: waveform */
.va-g rect { fill: var(--ink); }
.va-a rect { fill: var(--orange); }
.va-g { transform: translateX(78px); }
.va-a { transform: translateX(-78px); }
.va-gap { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.va-gapl { opacity: 0; }
.meter { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); margin-top: 6px; max-width: 320px; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; width: var(--w); }
.meter .m-was { background: transparent; border-right: 2px dashed var(--muted); border-radius: 0; }
.meter .m-now { background: var(--orange); }

/* listing data: cards and price tags */
.ld-box { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.ld-ph { fill: var(--line); }
.ld-slot { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ld-tag { fill: var(--orange); transform-box: fill-box; transform-origin: 0 50%; }
.r-track, .r-fill { fill: none; stroke-width: 10; }
.r-track { stroke: var(--line); }
.r-fill { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 8; transform: rotate(-90deg); transform-origin: 50px 50px; }

/* ernest: ring of signals */
.em-ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.em-d { fill: var(--ok); }
.em-sil { fill: var(--line-strong); stroke: var(--muted); stroke-width: 1.5; }
.em-pulse { fill: none; stroke: var(--muted); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.em-lead { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.em-lab { fill: var(--ink); font-weight: 600; }
.em-c { font: 500 13px var(--mono); fill: var(--muted); letter-spacing: .14em; }

@media (prefers-reduced-motion: no-preference) {
  .js .sig .pm-bar { animation: pmShrink 2s cubic-bezier(.6,0,.2,1) .3s both; }
  .js .sig .pm-after, .js .sig .pm-tick { animation: fadeIn .5s 2.1s both; }
  .js .sig .sig-stamp { animation: stamp .45s cubic-bezier(.3,1.6,.5,1) 2.6s both; }
  .js .sig .ce-card { animation: fan .9s cubic-bezier(.2,.7,.2,1) var(--d) both; }
  .js .sig .ce-card path { animation: fadeIn .4s calc(var(--d) + 900ms) both; }
  .js .sig .fu-out { animation: pop .45s cubic-bezier(.3,1.4,.5,1) .2s both; }
  .js .sig .fu-ticks path { animation: tickGrey 1.4s .5s both; }
  .js .sig .fu-in1 { animation: pop .45s cubic-bezier(.3,1.4,.5,1) 1.8s both; }
  .js .sig .fu-in2 { animation: pop .45s cubic-bezier(.3,1.4,.5,1) 2.5s both; }
  .js .sig .lc-ledger { animation: glow 3.6s .4s both; }
  .js .sig .wr-src { animation: draw 1.1s ease-out var(--d) both; }
  .js .sig .wr-line { animation: draw 1.8s cubic-bezier(.4,0,.2,1) 1.1s both; }
  .js .sig .wr-end { animation: fadeIn .3s 2.9s both; }
  .js .sig .g-needle { animation: needle 2.2s cubic-bezier(.4,0,.2,1) 1s both; }
  .js .sig .g-fill { animation: gfill 2.2s cubic-bezier(.4,0,.2,1) 1s both; }
  .js .sig .va-g { animation: vaG 1.2s cubic-bezier(.6,0,.2,1) 1.4s both; }
  .js .sig .va-a { animation: vaA 1.2s cubic-bezier(.6,0,.2,1) 1.4s both; }
  .js .sig .va-gap { animation: vaGap 1.2s cubic-bezier(.6,0,.2,1) 1.4s both; }
  .js .sig .va-gapl { animation: vaGapL 1.6s .2s both; }
  .js .sig .va-closed { animation: fadeIn .5s 2.6s both; }
  .js .sig .m-now { animation: meter 2s cubic-bezier(.4,0,.2,1) 1.4s both; }
  .js .sig .ld-new { animation: tag .4s cubic-bezier(.3,1.4,.5,1) var(--d) both; }
  .js .sig .r-fill { animation: ringFill 3s cubic-bezier(.4,0,.2,1) .5s both; }
  .js .sig .em-d { animation: emOn .4s var(--d) both; }
  .js .sig .em-pulse { animation: emPulse 1.6s ease-out 3.4s infinite; }
  .js .sig .em-lead, .js .sig .em-lab { animation: fadeIn .5s 3.2s both; }
  .js .sig:not(.play), .js .sig:not(.play) * { animation-play-state: paused !important; }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pmShrink { from { transform: scaleX(1); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-20deg) scale(1.8); } }
@keyframes fan { from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } }
@keyframes tickGrey { 0%, 70% { stroke: var(--line-strong); } }
@keyframes glow { 0% { stroke-width: 2; } 50% { stroke-width: 4; } 100% { stroke-width: 2; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes needle { from { transform: rotate(var(--a0)); } }
@keyframes gfill { from { stroke-dasharray: 23 100; } }
@keyframes vaG { from { transform: none; } }
@keyframes vaA { from { transform: none; } }
@keyframes vaGap { from { opacity: 1; transform: none; } to { opacity: 0; transform: scaleX(0); } }
@keyframes vaGapL { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes meter { from { width: var(--w0); } }
@keyframes tag { from { opacity: 0; transform: scaleX(0); } }
@keyframes ringFill { from { stroke-dashoffset: 35; } }
@keyframes emOn { from { fill: var(--line-strong); } }
@keyframes emPulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---- "One real run": live replay ---- */
.ev .t { display: inline-flex; align-items: flex-start; gap: 6px; }
.clk { width: 14px; height: 14px; flex: none; margin-top: 3px; overflow: visible; }
.clk circle { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.clk path { stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; transform-origin: 8px 8px; }
.clk .mh { transform: rotate(var(--a)); }
@media (prefers-reduced-motion: no-preference) {
  .tl.rp .ev { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
  .tl.rp .ev.on { opacity: 1; transform: none; }
  .tl.rp .ev .clk .mh { transform: rotate(calc(var(--a) - 150deg)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
  .tl.rp .ev.on .clk .mh { transform: rotate(var(--a)); }
  .tl.rp .ev .quote { position: relative; transition: color .3s; }
  .tl.rp .ev:not(.typed) .quote { color: transparent; }
  .tl.rp .ev:not(.typed) .quote::after { content: ""; position: absolute; left: 14px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); box-shadow: 10px 0 0 var(--muted), 20px 0 0 var(--muted); animation: typing 1s steps(3) infinite; }
}
@keyframes typing { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }

/* ---- "Time given back": clock beside the hours ---- */
.tsum .big b { display: inline-flex; align-items: center; gap: 10px; }
.tclock { width: 26px; height: 26px; flex: none; overflow: visible; }
.tclock circle { fill: none; stroke: #a9b4c2; stroke-width: 1.6; }
.tclock path { stroke: var(--orange); stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; }
.tclock .mh { transform: rotate(120deg); }
.tclock .hh { transform: rotate(40deg); }
@media (prefers-reduced-motion: no-preference) {
  .tsum.sweep .tclock .mh { animation: sweepM 1.4s cubic-bezier(.2,.7,.2,1); }
  .tsum.sweep .tclock .hh { animation: sweepH 1.4s cubic-bezier(.2,.7,.2,1); }
}
@keyframes sweepM { from { transform: rotate(-960deg); } }
@keyframes sweepH { from { transform: rotate(-40deg); } }

/* ---- ernest: real screen in a browser frame ---- */
.screen-sec { background: var(--hero-bg); padding-block: 8px clamp(36px, 6vw, 64px); overflow: hidden; }
.browser-fig { margin: 0 auto; max-width: 980px; perspective: 1600px; }
.browser { border-radius: 12px; overflow: hidden; background: #1b1a17; border: 1px solid #24364b; box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--orange) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--orange) 18%, transparent); transform: rotateX(7deg) scale(.98); transform-origin: 50% 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.browser-fig:hover .browser { transform: none; }
.bbar { display: flex; gap: 7px; padding: 10px 14px; background: #24221e; border-bottom: 1px solid #24364b; }
.bbar i { width: 10px; height: 10px; border-radius: 50%; background: #33475e; }
.bbar i:first-child { background: var(--orange); }
.browser img { display: block; width: 100%; height: auto; }
.browser-fig figcaption { margin-top: 14px; text-align: center; font: 500 12.5px/1.4 var(--mono); color: var(--hero-muted); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .browser { transform: none; transition: none; } }

/* ---- index: words, twinkles, tilting cards ---- */
.hero-index .twk { position: absolute; inset: 0; pointer-events: none; }
.twk i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--orange) 60%, transparent); opacity: .7; }
@media (max-width: 899px) { .twk i { opacity: .45; } }
@media (prefers-reduced-motion: no-preference) {
  .twk i { animation: twinkle 3.2s ease-in-out var(--d) infinite; }
  .js .hero-index h1 .w { display: inline-block; animation: wordIn .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms + 120ms) both; }
  .card.tilt { transition: border-color .2s, transform .12s ease-out; }
}
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .95; transform: scale(1.25); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(.4em); filter: blur(4px); } }
/* phones: the SVG scales down, so its labels scale up to stay readable */
@media (max-width: 560px) {
  .sig-svg .t-s { font-size: 24px; }
  .sig-svg .t-xs { font-size: 19px; }
  .sig-svg .t-m { font-size: 16px; }
  .sig-svg .pm-after { font-size: 22px; }
  .sig-svg .t-big { font-size: 30px; }
  .sig-svg .em-lab { font-size: 22px; }
  .sig-svg .em-c { font-size: 17px; }
  .sig-stamp { position: static; display: inline-flex; margin-top: 10px; transform: rotate(-4deg); }
}

/* rdz-media.com rhythm: white and cool-grey sections alternate */
main > .sec:nth-of-type(even) { background: var(--surface-2); }
/* ink drawings: paper normalised to pure white, then multiplied into the section colour (white or grey),
   so only the ink shows; dark themes invert to light ink and screen it onto navy */
.ink img { mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; opacity: .9; } }
:root[data-theme="dark"] .ink img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; opacity: .9; }
/* blend at the tilted frame level (a transform isolates blending on the img), feather the rectangle away */
.ink { mix-blend-mode: multiply; }
.ink img { mix-blend-mode: normal; -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 62%, transparent 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink { mix-blend-mode: screen; } :root:not([data-theme="light"]) .ink img { mix-blend-mode: normal; } }
:root[data-theme="dark"] .ink { mix-blend-mode: screen; }
:root[data-theme="dark"] .ink img { mix-blend-mode: normal; }

/* header: logo only; turns white on scroll like the rdz-media.com header */
.nav .brand.logo-only img { width: 34px; height: auto; }
.nav .brand .mk-b { display: none; }
.nav { transition: background .25s, border-color .25s, box-shadow .25s; }
.nav.scrolled { background: #ffffff; border-bottom-color: #e3e8ee; box-shadow: 0 4px 18px rgba(13, 27, 42, .08); }
.nav.scrolled .brand .mk-w { display: none; }
.nav.scrolled .brand .mk-b { display: block; }
.nav.scrolled .links > a { color: #111111; }
.nav.scrolled .links > a:hover { color: #e85d04; }
.nav.scrolled .lang { border-color: #d5dce5; }
.nav.scrolled .lang a { color: #555e6b; }
.nav.scrolled .lang a.on { color: #fff; }
.nav.scrolled .lang a:not(.on):hover { background: #f5f7fa; color: #111111; }

/* FAQ (case + index pages) */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 600; font-size: 16px; display: flex; gap: 12px; align-items: flex-start; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; font: 500 18px/1.2 var(--mono); color: var(--orange); width: 14px; flex: none; }
.faq-item[open] summary::before { content: "\2212"; }
.faq-a { padding: 0 18px 16px 44px; color: var(--muted); font-size: 15.5px; max-width: var(--measure); }
/* for-ai page */
.fa-hero { grid-template-columns: 1fr !important; }
.measure-wrap > * { max-width: 760px; }
.fa-list { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; }
.fa-h { font-size: 22px; margin: 26px 0 12px; }
.fa-relay { margin: 0 0 10px; padding: 16px 20px; border-left: 3px solid var(--orange); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 15.5px; }
.fa-note { margin-top: 24px; font-size: 14px; color: var(--muted); }