/* ==========================================================================
   Gitea Integration for Jira — public site
   Design system: cool paper + slate panel, Jira-blue accent, hairline rules,
   editorial left-rail sections. No dependencies, no webfonts, no scripts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
 color-scheme: light dark;

 /* Type families — system stacks only */
 --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, sans-serif;
 --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
  "Liberation Mono", monospace;

 /* Type scale */
 --text-2xs: 0.6875rem;
 --text-xs: 0.78125rem;
 --text-sm: 0.9375rem;
 --text-base: 1.0625rem;
 --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
 --text-lg: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
 --text-xl: clamp(1.5rem, 1.26rem + 1.1vw, 2.125rem);
 --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);

 /* Spacing — 4px base */
 --space-1: 0.25rem;
 --space-2: 0.5rem;
 --space-3: 0.75rem;
 --space-4: 1rem;
 --space-5: 1.5rem;
 --space-6: 2rem;
 --space-7: 3rem;
 --space-8: 4rem;
 --space-9: 6rem;

 /* Structure */
 --measure: 66ch;
 --shell: 74rem;
 --gutter: clamp(1.25rem, 5vw, 3rem);
 --radius-1: 3px;
 --radius-2: 8px;
 --radius-3: 16px;

 /* Motion — exponential-ish ease out, never elastic */
 --dur: 150ms;
 --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

 /* Light palette — cool neutrals, never pure black or white */
 --paper: #f3f5f8;
 --surface: #fbfcfd;
 --sunken: #e7ebf0;
 --ink: #12161d;
 --ink-2: #4a5360;
 --ink-3: #616b78;
 --rule: #d5dbe3;
 --rule-strong: #b7c0cb;
 --accent: #1868db;
 --accent-ink: #fbfcfd;
 --accent-soft: #e4eefb;
 --ok: #146b3a;
 --warn: #8a4b00;
 --danger: #a31621;
 --focus: #1868db;

 /* Brand slate panel — constant across themes */
 --panel: #101820;
 --panel-ink: #e8eef4;
 --panel-ink-2: #a7b6c4;
 --panel-rule: #243140;
 --panel-accent: #7ad06a;
 --panel-ok: #5fd79a;
 --panel-warn: #f0b357;
}

@media (prefers-color-scheme: dark) {
 :root {
  --paper: #071018;
  --surface: #0c1822;
  --sunken: #050b11;
  --ink: #e8eef4;
  --ink-2: #a3b4c4;
  --ink-3: #8b9db0;
  --rule: #1c2d3c;
  --rule-strong: #2c4254;
  --accent: #6aa8ff;
  --accent-ink: #041018;
  --accent-soft: #102536;
  --ok: #5fd79a;
  --warn: #f0b357;
  --danger: #ff8e86;
  --focus: #6aa8ff;
  --panel: #15202b;
 }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 -webkit-text-size-adjust: 100%;
 scroll-behavior: smooth;
 scroll-padding-top: var(--space-6);
}

body {
 margin: 0;
 background: var(--paper);
 color: var(--ink);
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: 1.6;
 font-synthesis-weight: none;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
}

img,
svg {
 display: block;
 max-width: 100%;
}

h1,
h2,
h3,
h4 {
 margin: 0;
 font-weight: 620;
 line-height: 1.14;
 letter-spacing: -0.018em;
 text-wrap: balance;
}

h1 {
 font-size: var(--text-2xl);
 letter-spacing: -0.032em;
}

h2 {
 font-size: var(--text-xl);
 letter-spacing: -0.024em;
}

h3 {
 font-size: var(--text-lg);
}

h4 {
 font-size: var(--text-md);
 letter-spacing: -0.01em;
}

p,
ul,
ol,
dl,
figure {
 margin: 0;
}

p {
 text-wrap: pretty;
}

a {
 color: var(--accent);
 text-decoration-thickness: from-font;
 text-underline-offset: 0.18em;
 transition: color var(--dur) var(--ease);
}

a:hover {
 color: var(--ink);
}

:focus-visible {
 outline: 3px solid var(--focus);
 outline-offset: 3px;
 border-radius: var(--radius-1);
}

::selection {
 background: var(--accent);
 color: var(--accent-ink);
}

strong {
 font-weight: 640;
}

code,
kbd,
.mono {
 font-family: var(--font-mono);
 font-variant-numeric: tabular-nums;
}

code {
 font-size: 0.9em;
 background: var(--sunken);
 border-radius: var(--radius-1);
 padding: 0.1em 0.36em;
}

hr {
 border: 0;
 border-top: 1px solid var(--rule);
 margin: var(--space-6) 0;
}

.skip-link {
 position: absolute;
 left: var(--space-4);
 top: var(--space-4);
 z-index: 10;
 transform: translateY(-200%);
 background: var(--ink);
 color: var(--paper);
 padding: var(--space-2) var(--space-4);
 border-radius: var(--radius-2);
 font-size: var(--text-sm);
 font-weight: 600;
 text-decoration: none;
 transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
 transform: translateY(0);
 color: var(--paper);
}

.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip-path: inset(50%);
 white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
 width: min(100% - var(--gutter) * 2, var(--shell));
 margin-inline: auto;
}

.prose {
 max-width: var(--measure);
}

.prose>*+* {
 margin-top: var(--space-4);
}

.prose h3 {
 margin-top: var(--space-6);
}

.prose h4 {
 margin-top: var(--space-5);
 margin-bottom: calc(var(--space-4) * -1 + var(--space-2));
}

.prose ul,
.prose ol {
 padding-left: 1.15em;
}

.prose li+li {
 margin-top: var(--space-2);
}

.stack-4>*+* {
 margin-top: var(--space-4);
}

.stack-5>*+* {
 margin-top: var(--space-5);
}

.stack-6>*+* {
 margin-top: var(--space-6);
}

.section {
 border-top: 1px solid var(--rule);
 padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

.section--tight {
 padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}

.section--flush {
 border-top: 0;
}

.section__inner {
 display: grid;
 gap: var(--space-5);
}

@media (min-width: 62rem) {
 .section__inner {
  grid-template-columns: 13rem minmax(0, 1fr);
  column-gap: var(--space-7);
  align-items: start;
 }
}

.section__label {
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink-3);
 padding-top: 0.35em;
}

@media (min-width: 62rem) {
 .section__label {
  position: sticky;
  top: var(--space-5);
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
 }
}

.section__body>*+* {
 margin-top: var(--space-5);
}

.section__body>h2+p {
 margin-top: var(--space-4);
}

.lede {
 font-size: var(--text-md);
 color: var(--ink-2);
 max-width: var(--measure);
}

.meta {
 font-size: var(--text-sm);
 color: var(--ink-3);
}

.disclaimer {
 max-width: 40ch;
 line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Masthead
   -------------------------------------------------------------------------- */

.masthead {
 border-bottom: 1px solid var(--rule);
 background: var(--paper);
}

.masthead__inner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3) var(--space-5);
 padding-block: var(--space-4);
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: var(--space-3);
 color: var(--ink);
 text-decoration: none;
 font-weight: 640;
 letter-spacing: -0.015em;
}

.brand:hover {
 color: var(--ink);
}

.brand:hover .brand__name {
 text-decoration: underline;
 text-underline-offset: 0.2em;
}

.brand__mark {
 width: 34px;
 height: 34px;
 border-radius: 9px;
 box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
 flex: none;
}

.brand__name {
 font-size: var(--text-md);
}

.brand__suffix {
 color: var(--ink-3);
 font-weight: 480;
}

.nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-1) var(--space-5);
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: var(--text-sm);
}

.nav a {
 display: inline-block;
 color: var(--ink-2);
 text-decoration: none;
 padding-block: var(--space-1);
 border-bottom: 2px solid transparent;
 transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav a:hover {
 color: var(--ink);
 border-bottom-color: var(--rule-strong);
}

.nav a[aria-current="page"] {
 color: var(--ink);
 font-weight: 620;
 border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
 padding-block: clamp(var(--space-7), 8vw, var(--space-9)) clamp(var(--space-6), 6vw, var(--space-8));
}

.hero__grid {
 display: grid;
 gap: var(--space-6);
}

@media (min-width: 62rem) {
 .hero__grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: start;
 }
}

.eyebrow {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink-3);
 margin-bottom: var(--space-4);
}

.eyebrow::after {
 content: "";
 flex: 1;
 height: 1px;
 background: var(--rule);
}

.hero h1 {
 max-width: 18ch;
}

.hero__lede {
 font-size: var(--text-lg);
 line-height: 1.42;
 color: var(--ink-2);
 max-width: 46ch;
 margin-top: var(--space-5);
 letter-spacing: -0.012em;
}

.hero__actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-3) var(--space-5);
 margin-top: var(--space-6);
}

.hero__aside {
 display: grid;
 gap: var(--space-5);
 justify-items: start;
}

.appicon {
 width: 104px;
 height: 104px;
 border-radius: 23px;
 box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* --------------------------------------------------------------------------
   6. Buttons & inline links
   -------------------------------------------------------------------------- */

.button {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 padding: 0.7em 1.15em;
 border-radius: var(--radius-2);
 background: var(--accent);
 color: var(--accent-ink);
 font-size: var(--text-sm);
 font-weight: 620;
 text-decoration: none;
 border: 1px solid transparent;
 transition: background-color var(--dur) var(--ease),
  color var(--dur) var(--ease);
}

.button:hover {
 background: color-mix(in srgb, var(--accent) 82%, var(--ink));
 color: var(--accent-ink);
}

.button--quiet {
 background: transparent;
 color: var(--ink);
 border-color: var(--rule-strong);
}

.button--quiet:hover {
 background: var(--sunken);
 color: var(--ink);
}

.link-arrow {
 font-weight: 560;
 text-decoration: none;
 border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
 padding-bottom: 0.1em;
}

.link-arrow::after {
 content: " \203A";
 font-weight: 400;
}

.link-arrow:hover {
 border-bottom-color: var(--ink);
}

/* --------------------------------------------------------------------------
   7. Spec list (dl)
   -------------------------------------------------------------------------- */

.specs {
 width: 100%;
 border-top: 2px solid var(--ink);
 font-size: var(--text-sm);
}

.specs>div {
 display: grid;
 grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.3fr);
 gap: var(--space-3);
 padding-block: var(--space-3);
 border-bottom: 1px solid var(--rule);
}

.specs dt {
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ink-3);
 padding-top: 0.15em;
}

.specs dd {
 margin: 0;
 color: var(--ink);
}

.specs--wide>div {
 grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 2fr);
}

/* --------------------------------------------------------------------------
   8. Brand panel + connection diagram
   -------------------------------------------------------------------------- */

.panel {
 background: var(--panel);
 color: var(--panel-ink);
 border-radius: var(--radius-3);
 border: 1px solid var(--panel-rule);
 padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.panel h2,
.panel h3 {
 color: var(--panel-ink);
}

.panel p {
 color: var(--panel-ink-2);
}

.panel .section__label {
 color: var(--panel-ink-2);
}

.diagram {
 --dg-body: #12283f;
 --dg-line: #7d94ad;
 --dg-ink: #e9eef6;
 --dg-screen: #061426;
 --dg-accent: #6fc0ff;
 --dg-ok: #5fd79a;
 --dg-chip: #6fc0ff;
 --dg-chip-ink: #03121f;
 --dg-bg: var(--panel);
 width: 100%;
 height: auto;
}

.diagram__figure {
 margin: 0;
}

.diagram__caption {
 margin-top: var(--space-5);
 padding-top: var(--space-4);
 border-top: 1px solid var(--panel-rule);
 font-size: var(--text-sm);
 color: var(--panel-ink-2);
}

.legend {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
 counter-reset: legend;
}

@media (min-width: 48rem) {
 .legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
 }
}

.legend li {
 display: grid;
 grid-template-columns: 1.65rem minmax(0, 1fr);
 gap: var(--space-3);
 align-items: baseline;
 counter-increment: legend;
 font-size: var(--text-sm);
 color: var(--panel-ink-2);
}

.legend li::before {
 content: counter(legend);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 line-height: 1.65rem;
 height: 1.65rem;
 border-radius: 50%;
 background: var(--panel-accent);
 color: #03121f;
 text-align: center;
 align-self: start;
}

.legend b {
 color: var(--panel-ink);
 font-weight: 620;
}

/* --------------------------------------------------------------------------
   9. Ordered flow (the DATA-first sequence)
   -------------------------------------------------------------------------- */

.section__body>.panel+.flow {
 margin-top: clamp(var(--space-6), 4vw, var(--space-7));
}

.flow {
 list-style: none;
 margin: 0;
 padding: 0;
 counter-reset: flow;
}

.flow>li {
 position: relative;
 counter-increment: flow;
 display: grid;
 grid-template-columns: 2.5rem minmax(0, 1fr);
 column-gap: var(--space-4);
 padding-bottom: var(--space-6);
}

.flow>li:last-child {
 padding-bottom: 0;
}

/* vertical rail */
.flow>li::before {
 content: "";
 position: absolute;
 left: 1.24rem;
 top: 2.5rem;
 bottom: 0;
 width: 2px;
 background: var(--rule);
}

.flow>li:last-child::before {
 display: none;
}

.flow__num {
 grid-column: 1;
 grid-row: 1 / span 2;
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 font-weight: 700;
 background: var(--ink);
 color: var(--paper);
 position: relative;
 z-index: 1;
}

.flow__title {
 grid-column: 2;
 align-self: center;
 min-height: 2.5rem;
 display: flex;
 align-items: center;
}

.flow__body {
 grid-column: 2;
 margin-top: var(--space-2);
 max-width: var(--measure);
 color: var(--ink-2);
}

.flow__body>*+* {
 margin-top: var(--space-3);
}

@media (min-width: 62rem) {
 .flow>li {
  grid-template-columns: 2.5rem minmax(0, 15rem) minmax(0, 1fr);
  column-gap: var(--space-5);
 }

 .flow__title {
  grid-column: 2;
  grid-row: 1;
 }

 .flow__body {
  grid-column: 3;
  grid-row: 1;
  margin-top: 0;
 }
}

.flow__note {
 font-size: var(--text-sm);
 color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   10. Cable comparison
   -------------------------------------------------------------------------- */

.cables {
 display: grid;
 gap: var(--space-5);
}

@media (min-width: 48rem) {
 .cables {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
 }
}

.cable {
 --cb-jacket: #4e5661;
 --cb-shell: #8d939c;
 --cb-power: #8a4b00;
 --cb-data: #0b4cc4;
 --cb-void: #a31621;
 --cb-bg: var(--paper);
 margin: 0;
 border-top: 2px solid var(--ink);
 padding-top: var(--space-4);
}

@media (prefers-color-scheme: dark) {
 .cable {
  --cb-jacket: #6f7d8d;
  --cb-shell: #93a3b5;
  --cb-power: #f0b357;
  --cb-data: #6fc0ff;
  --cb-void: #ff8e86;
  --cb-bg: var(--paper);
 }
}

.cable svg {
 width: 100%;
 height: auto;
}

.cable figcaption {
 margin-top: var(--space-3);
}

.verdict {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 font-weight: 700;
}

.verdict--yes {
 color: var(--ok);
}

.verdict--no {
 color: var(--danger);
}

.verdict::before {
 content: "";
 width: 0.65rem;
 height: 0.65rem;
 border-radius: 50%;
 background: currentColor;
}

.cable p {
 margin-top: var(--space-2);
 font-size: var(--text-sm);
 color: var(--ink-2);
 max-width: 44ch;
}

/* --------------------------------------------------------------------------
   11. Checklist
   -------------------------------------------------------------------------- */

.checklist {
 list-style: none;
 margin: 0;
 padding: 0;
 border-top: 1px solid var(--rule);
 max-width: var(--measure);
}

.checklist li {
 display: grid;
 grid-template-columns: 1.5rem minmax(0, 1fr);
 gap: var(--space-3);
 align-items: start;
 padding-block: var(--space-3);
 border-bottom: 1px solid var(--rule);
}

.checklist li::before {
 content: "";
 width: 1.15rem;
 height: 1.15rem;
 margin-top: 0.24em;
 border: 1.5px solid var(--rule-strong);
 border-radius: var(--radius-1);
 background: var(--surface);
}

/* --------------------------------------------------------------------------
   12. In-app status readout
   -------------------------------------------------------------------------- */

.readout {
 border: 1px solid var(--rule);
 border-radius: var(--radius-2);
 background: var(--surface);
 padding: var(--space-4) var(--space-5);
 max-width: 34rem;
}

.readout__title {
 font-family: var(--font-mono);
 font-size: var(--text-2xs);
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-3);
 padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--rule);
}

.states {
 list-style: none;
 margin: 0;
 padding: 0;
 font-family: var(--font-mono);
 font-size: var(--text-sm);
}

.states li {
 display: grid;
 grid-template-columns: 0.85rem minmax(0, 1fr);
 gap: var(--space-3);
 align-items: baseline;
 padding-block: var(--space-2);
}

.states li+li {
 border-top: 1px dotted var(--rule);
}

.states li::before {
 content: "";
 width: 0.55rem;
 height: 0.55rem;
 border-radius: 50%;
 background: var(--rule-strong);
 transform: translateY(-0.1em);
}

.states li[data-state="active"]::before {
 background: var(--accent);
}

.states li[data-state="done"]::before {
 background: var(--ok);
}

.states li[data-state="fault"]::before {
 background: var(--danger);
}

.states small {
 grid-column: 2;
 display: block;
 font-family: var(--font-sans);
 font-size: var(--text-sm);
 color: var(--ink-2);
 margin-top: 0.1em;
}

/* --------------------------------------------------------------------------
   13. Callout
   -------------------------------------------------------------------------- */

.callout {
 border-left: 3px solid var(--accent);
 background: var(--accent-soft);
 padding: var(--space-4) var(--space-5);
 border-radius: 0 var(--radius-2) var(--radius-2) 0;
 max-width: var(--measure);
}

.callout__title {
 font-weight: 640;
 margin-bottom: var(--space-2);
}

.callout p {
 color: var(--ink-2);
}

.callout--warn {
 border-left-color: var(--warn);
 background: color-mix(in srgb, var(--warn) 9%, var(--paper));
}

/* --------------------------------------------------------------------------
   14. Troubleshooting disclosure
   -------------------------------------------------------------------------- */

.faq {
 border-top: 1px solid var(--rule);
 max-width: 58rem;
}

.faq details {
 border-bottom: 1px solid var(--rule);
}

.faq summary {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 1.5rem;
 gap: var(--space-4);
 align-items: baseline;
 padding-block: var(--space-4);
 cursor: pointer;
 font-size: var(--text-md);
 font-weight: 600;
 letter-spacing: -0.01em;
 list-style: none;
 transition: color var(--dur) var(--ease);
}

.faq summary::-webkit-details-marker {
 display: none;
}

.faq summary:hover {
 color: var(--accent);
}

.faq summary::after {
 content: "";
 justify-self: end;
 width: 0.7rem;
 height: 0.7rem;
 border-right: 2px solid currentColor;
 border-bottom: 2px solid currentColor;
 transform: translateY(-0.15em) rotate(45deg);
 transform-origin: center;
 transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
 transform: translateY(0.12em) rotate(225deg);
}

.faq__answer {
 padding-bottom: var(--space-5);
 max-width: var(--measure);
 color: var(--ink-2);
}

.faq__answer>*+* {
 margin-top: var(--space-3);
}

.faq__answer ol {
 padding-left: 1.2em;
}

.faq__answer li+li {
 margin-top: var(--space-2);
}

.faq__cause {
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */

.contact {
 display: grid;
 gap: var(--space-5);
}

@media (min-width: 48rem) {
 .contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
 }
}

.contact__card {
 border-top: 2px solid var(--ink);
 padding-top: var(--space-4);
}

.contact__label {
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--ink-3);
}

.contact__value {
 margin-top: var(--space-2);
 font-size: var(--text-md);
 font-weight: 560;
 letter-spacing: -0.01em;
}

.contact__value a {
 text-decoration-thickness: 1px;
}

.contact address {
 font-style: normal;
 margin-top: var(--space-2);
 font-size: var(--text-md);
 line-height: 1.5;
}

.contact__note {
 margin-top: var(--space-2);
 font-size: var(--text-sm);
 color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
 margin-top: var(--space-8);
 background: var(--panel);
 color: var(--panel-ink-2);
 border-top: 1px solid var(--panel-rule);
 padding-block: var(--space-7) var(--space-6);
 font-size: var(--text-sm);
}

.footer__grid {
 display: grid;
 gap: var(--space-6);
}

@media (min-width: 48rem) {
 .footer__grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-6);
 }
}

.footer h2 {
 font-size: var(--text-xs);
 font-family: var(--font-mono);
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--panel-ink);
 margin-bottom: var(--space-3);
}

.footer a {
 color: var(--panel-accent);
}

.footer a:hover {
 color: var(--panel-ink);
}

.footer address {
 font-style: normal;
 line-height: 1.6;
}

.footer ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.footer li+li {
 margin-top: var(--space-2);
}

.footer__legal {
 margin-top: var(--space-7);
 padding-top: var(--space-5);
 border-top: 1px solid var(--panel-rule);
 font-size: var(--text-xs);
 line-height: 1.6;
 color: var(--panel-ink-2);
 display: grid;
 gap: var(--space-3);
}

.footer__legal p {
 max-width: 78ch;
 color: inherit;
}

.footer__legal strong {
 color: var(--panel-ink);
 font-weight: 640;
}

/* --------------------------------------------------------------------------
   17. Accessibility & output modes
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }

 *,
 *::before,
 *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
 }
}

@media (prefers-contrast: more) {
 :root {
  --ink-2: var(--ink);
  --ink-3: var(--ink);
  --rule: var(--rule-strong);
 }
}

@media (forced-colors: active) {

 .panel,
 .footer {
  background: Canvas;
  color: CanvasText;
  border: 1px solid CanvasText;
 }

 .diagram {
  --dg-body: Canvas;
  --dg-line: CanvasText;
  --dg-ink: CanvasText;
  --dg-screen: Canvas;
  --dg-accent: LinkText;
  --dg-ok: CanvasText;
  --dg-chip: CanvasText;
  --dg-chip-ink: Canvas;
  --dg-bg: Canvas;
 }

 .cable {
  --cb-jacket: CanvasText;
  --cb-shell: CanvasText;
  --cb-power: CanvasText;
  --cb-data: LinkText;
  --cb-void: CanvasText;
  --cb-bg: Canvas;
 }

 .flow__num,
 .legend li::before,
 .button {
  forced-color-adjust: none;
  background: CanvasText;
  color: Canvas;
 }
}

@media print {

 .masthead,
 .skip-link,
 .hero__actions {
  display: none;
 }

 body {
  background: #fff;
  color: #000;
  font-size: 11pt;
 }

 .panel,
 .footer {
  background: #fff;
  color: #000;
  border: 1px solid #000;
 }

 .faq details {
  break-inside: avoid;
 }

 .faq details:not([open])>*:not(summary) {
  display: revert;
 }

 a::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  color: #333;
 }

 .nav a::after,
 .brand::after {
  content: "";
 }
}