@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --black: #0B0B0C;
  --white: #FFFFFF;
  --orange: #E94E1B;
  --paper: #F4F2EE;
  --line: #D9D5CC;
  --muted: #6B6862;
  --col: min(1240px, 100% - 2rem);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--black);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: var(--col); margin-inline: auto; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 .75rem;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.03em; margin: 0 0 1.5rem;
}
h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 700;
     letter-spacing: -.02em; line-height: 1.1; margin: 0 0 1rem; }
h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; }

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line);
}
.masthead img { height: 26px; width: auto; display: block; }
.lang { display: flex; gap: .25rem; font-family: 'IBM Plex Mono', monospace;
        font-size: .8rem; }
.lang a {
  padding: .3rem .6rem; text-decoration: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 2px;
}
.lang a[aria-current="true"] { background: var(--black); color: var(--white);
                               border-color: var(--black); }

section { padding-block: clamp(3rem, 7vw, 6rem); }
section + section { border-top: 1px solid var(--line); }

.concept { display: grid; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 900px) {
  .concept { grid-template-columns: 1.15fr .85fr; align-items: start; }
}
.concept img {
  width: 100%; height: auto; display: block; border: 1px solid var(--line);
  background: var(--white);
}
.concept-num {
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem;
  color: var(--orange);
}
.strength {
  border-left: 2px solid var(--orange); padding-left: 1rem;
  color: var(--muted); margin: 1rem 0 1.5rem;
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--black); color: var(--white); text-decoration: none;
  padding: .85rem 1.4rem; font-weight: 600; border-radius: 2px;
}
.btn:hover { background: var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

dl.shared { display: grid; gap: 0; margin: 0; }
dl.shared > div {
  display: grid; gap: .25rem 2rem; padding-block: 1rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) { dl.shared > div { grid-template-columns: 200px 1fr; } }
dl.shared dt { font-family: 'IBM Plex Mono', monospace; font-size: .8rem;
               text-transform: uppercase; letter-spacing: .06em;
               color: var(--muted); margin: 0; }
dl.shared dd { margin: 0; }

.cmp-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .95rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line);
         vertical-align: top; }
thead th { font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
           text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
           font-weight: 500; }
tbody th { font-weight: 700; }

ol.decide, ul.needs { padding-left: 0; list-style: none; margin: 0; }
ol.decide li, ul.needs li {
  padding: .9rem 0 .9rem 2.6rem; border-top: 1px solid var(--line);
  position: relative;
}
ol.decide { counter-reset: d; }
ol.decide li { counter-increment: d; }
ol.decide li::before {
  content: counter(d, decimal-leading-zero);
  position: absolute; left: 0; top: .9rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--orange);
}
ul.needs li::before {
  content: "—"; position: absolute; left: 0; top: .9rem; color: var(--orange);
}

footer {
  border-top: 1px solid var(--line); padding-block: 2rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important;
                                              animation: none !important; } }