/* ==========================================================================
   Z-Networks
   Palette: soft light blue + gray blue. Value/savings signal: soft teal.
   Type:    Bricolage Grotesque (display) / Inter Tight (body) / JetBrains Mono (data)
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --ink:        #14202B;   /* deepest text */
  --slate:      #2D4759;   /* gray blue, headings */
  --slate-soft: #5C7D99;   /* gray blue, secondary text */
  --current:    #1E86C7;   /* light blue accent - "current" as in electrical */
  --current-lo: #E8F2FA;   /* accent wash */
  --mist:       #F2F6FA;   /* page background */
  --haze:       #DCE7F0;   /* hairlines, panel edges */
  --surface:    #FFFFFF;
  --value:      #2FA396;   /* soft teal - money saved, value created */
  --value-lo:   #E6F5F3;
  --warn:       #B7791F;

  /* --- type -------------------------------------------------------------- */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- rhythm ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 32, 43, .04), 0 12px 28px -18px rgba(20, 32, 43, .28);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--slate);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--current); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  font-weight: 700;
}

h1 { font-size: clamp(2.05rem, 4.1vw, 3.15rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.012em; }
p  { margin: 0 0 1rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band--tint { background: var(--surface); border-block: 1px solid var(--haze); }
.band--deep { background: var(--slate); color: #C9DCEA; }
.band--deep h2, .band--deep h3 { color: #fff; }

/* Section eyebrow: encodes the section's role in the argument, not decoration */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--current);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--haze);
}
.band--deep .eyebrow { color: #7FC4EE; }
.band--deep .eyebrow::after { background: rgba(255,255,255,.16); }

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: var(--slate-soft);
  max-width: 60ch;
}
.band--deep .lede { color: #B4CEE0; }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--slate);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo__z { color: var(--ink); }
.logo__bolt {
  width: .78em;
  height: 1.15em;
  margin-inline: .04em -.02em;
  flex: none;
}
.logo__bolt path { fill: var(--current); }
.logo--lg { font-size: 2rem; }
.logo--invert { color: #E4EFF7; }
.logo--invert .logo__z { color: #fff; }
.logo--invert .logo__bolt path { fill: #6FC0EC; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242, 246, 250, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--haze);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: .95rem;
}
.nav a { color: var(--slate); }
.nav a:hover { color: var(--current); text-decoration: none; }

.nav__links { display: flex; gap: 1.6rem; }

/* declared after .nav__links so it actually wins */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav { gap: .6rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  padding: .72rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 470px) {
  .masthead .btn--sm { font-size: .8rem; padding: .46rem .78rem; }
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--current); color: #fff; }
.btn--primary:hover { background: #1670A8; }
.btn--ghost {
  background: transparent;
  color: var(--slate);
  border-color: var(--haze);
}
.btn--ghost:hover { border-color: var(--current); color: var(--current); }
.btn--sm { padding: .42rem .85rem; font-size: .82rem; }

/* --------------------------------------------------------------------------
   HERO  +  signature element: the cost traceroute
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 1rem; }
.hero h1 em {
  font-style: normal;
  color: var(--current);
}
.hero__kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 1.4rem;
  display: block;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

.hero__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 1rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--haze);
}
@media (max-width: 620px) {
  .hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.proof__n {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
  display: block;
  line-height: 1.1;
}
.proof__l {
  font-family: var(--mono);
  font-size: .615rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

/* --- terminal ----------------------------------------------------------- */

.trace {
  background: #0F1B24;
  border: 1px solid #21384A;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(20, 32, 43, .55);
  overflow: hidden;
  font-family: var(--mono);
}
.trace__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  background: #16252F;
  border-bottom: 1px solid #21384A;
  font-size: .7rem;
  color: #6E8CA3;
  letter-spacing: .05em;
}
.trace__dot { width: 9px; height: 9px; border-radius: 50%; background: #34506A; }
.trace__dot:nth-child(2) { background: #3E6480; }
.trace__dot:nth-child(3) { background: #4A7C9B; }
.trace__title { margin-left: auto; }

.trace__body {
  padding: 1.1rem 1rem 1.3rem;
  font-size: clamp(.68rem, 1.02vw, .765rem);
  line-height: 1.9;
  color: #A7C4D8;
  overflow-x: auto;
}
.trace__cmd { color: #6FC0EC; white-space: nowrap; }
.trace__cmd b { color: #fff; font-weight: 500; }

.hop {
  display: grid;
  grid-template-columns: 1.35rem minmax(9rem, 1fr) 4.4rem 3.2rem auto;
  gap: .5rem;
  align-items: center;
  opacity: 0;
  transform: translateY(4px);
  white-space: nowrap;
}
.hop.is-in { opacity: 1; transform: none; transition: opacity .38s ease, transform .38s ease; }
.hop__n { color: #4E7591; }
.hop__host { color: #C6DDEC; overflow: hidden; text-overflow: ellipsis; }
.hop__rate { color: #fff; text-align: right; }
.hop__bar { height: 7px; border-radius: 3px; background: #2B4A61; }
.hop__meta { color: #6E8CA3; font-size: .9em; }

/* On narrow screens drop the bar so the cost note stays readable */
@media (max-width: 560px) {
  .hop { grid-template-columns: 1.2rem minmax(7rem, 1fr) 3.7rem auto; }
  .hop > span:nth-child(4) { display: none; }
  .trace__cmd { white-space: normal; }
  .trace__body { padding-inline: .85rem; }
}

.hop--win .hop__host { color: #7FE3D5; }
.hop--win .hop__rate { color: #7FE3D5; font-weight: 700; }
.hop--win .hop__bar { background: #2FA396; }
.hop--win .hop__meta { color: #7FE3D5; }
.hop--slow .hop__meta { color: #D6A756; }

.trace__end {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px dashed #26404F;
  color: #7FE3D5;
  font-size: .78rem;
  opacity: 0;
}
.trace__end.is-in { opacity: 1; transition: opacity .5s ease; }

.trace__quote {
  margin-top: .9rem;
  font-size: .78rem;
  color: #A7C4D8;
  opacity: 0;
}
.trace__quote.is-in { opacity: 1; transition: opacity .5s ease; }
.trace__quote .q {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto;
  gap: .8rem;
  padding-left: 1.1rem;
}
.trace__quote .q span:last-child { color: #7FE3D5; font-weight: 700; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hop, .trace__end, .trace__quote { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--haze);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--haze);
}
.panel__title { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.panel__body { padding: 1.35rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.chip {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .34rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--haze);
  background: var(--mist);
  color: var(--slate-soft);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--current-lo);
  border-color: var(--current);
  color: var(--current);
}

/* --- bar chart --------------------------------------------------------- */

.bars { display: grid; gap: 1.05rem; }
.bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .38rem;
}
.bar__name { font-size: .93rem; font-weight: 600; color: var(--ink); }
.bar__save {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  color: var(--value);
  background: var(--value-lo);
  padding: .12rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.bar__rail { display: grid; gap: .3rem; }
.bar__row { display: grid; grid-template-columns: 4.9rem 1fr 4.4rem; gap: .6rem; align-items: center; }
.bar__lbl {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.bar__track { background: var(--mist); border-radius: 4px; height: 15px; overflow: hidden; }
.bar__fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.bar__fill--na { background: #A6C0D4; }
.bar__fill--latam { background: var(--current); }
.bar__val { font-family: var(--mono); font-size: .78rem; color: var(--ink); text-align: right; }
.bar__note { font-size: .83rem; color: var(--slate-soft); margin-top: .3rem; }

.legend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.legend span { display: flex; align-items: center; gap: .4rem; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* --- table ------------------------------------------------------------- */

.tablewrap { overflow-x: auto; }
table.rates {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 620px;
}
table.rates th, table.rates td {
  text-align: right;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--haze);
  white-space: nowrap;
}
table.rates th {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-soft);
  font-weight: 500;
}
table.rates th:first-child, table.rates td:first-child {
  text-align: left; white-space: normal; min-width: 15rem;
}
table.rates td { font-family: var(--mono); color: var(--slate); }
table.rates td:first-child { font-family: var(--body); color: var(--ink); font-weight: 500; }
table.rates tbody tr:hover { background: var(--mist); }
td.is-save { color: var(--value); font-weight: 700; }

/* --------------------------------------------------------------------------
   Calculator
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.35rem; }
.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
.field output {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--current);
  font-weight: 600;
}
.field select {
  width: 100%;
  font-family: var(--body);
  font-size: .93rem;
  padding: .6rem .7rem;
  border: 1px solid var(--haze);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
input[type="range"] {
  width: 100%;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: var(--haze);
  outline-offset: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--current);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(20,32,43,.3);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--current);
  border: 3px solid #fff;
  cursor: pointer;
}

.readout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
@media (max-width: 520px) { .readout { grid-template-columns: 1fr; } }

.stat {
  border: 1px solid var(--haze);
  border-radius: var(--radius-sm);
  padding: .95rem 1rem;
  background: var(--mist);
}
.stat--hero { grid-column: 1 / -1; background: var(--value-lo); border-color: #BEE5E0; }
.stat__l {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-soft);
  display: block;
  margin-bottom: .3rem;
}
.stat__v {
  display: block;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.stat--hero .stat__v { font-size: clamp(2rem, 4.4vw, 2.9rem); color: #1B6F66; }
.stat__sub { font-size: .8rem; color: var(--slate-soft); margin-top: .25rem; }

.spark { margin-top: 1.1rem; }
.spark svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.1rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--haze);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .93rem; color: var(--slate-soft); margin-bottom: .7rem; }
.card p:last-child { margin-bottom: 0; }

.card__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--current-lo);
  color: var(--current);
  display: grid;
  place-items: center;
  margin-bottom: .95rem;
}
.card__icon svg { width: 20px; height: 20px; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.tag {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
  padding: .2rem .5rem;
  border-radius: 4px;
  background: var(--mist);
  color: var(--slate-soft);
  border: 1px solid var(--haze);
}

/* --- scenario card ------------------------------------------------------ */

.case { display: flex; flex-direction: column; }
.case__co { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.case__profile { font-size: .84rem; color: var(--slate-soft); margin-bottom: 1rem; }
.case__q {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: .3rem;
}
.case__txt { font-size: .89rem; margin-bottom: 1rem; }
.case__team { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.case__line {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-size: .82rem;
  padding-bottom: .3rem;
  border-bottom: 1px dashed var(--haze);
}
.case__line b { font-family: var(--mono); font-weight: 600; color: var(--value); }
.case__total {
  margin-top: auto;
  background: var(--mist);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  display: grid;
  gap: .15rem;
}
.case__big {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #1B6F66;
  line-height: 1.1;
}
.case__sm { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-soft); }

/* --- bench (skills) ---------------------------------------------------- */

.bench { display: grid; gap: 0; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; }
.bench__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.bench__row:last-child { border-bottom: 0; }
.bench__skill { font-family: var(--display); font-weight: 700; color: #fff; font-size: 1rem; }
.bench__desc { font-size: .88rem; color: #B4CEE0; }
.bench__rate { font-family: var(--mono); font-size: .78rem; color: #7FE3D5; white-space: nowrap; text-align: right; }
@media (max-width: 760px) {
  .bench__row { grid-template-columns: 1fr; gap: .35rem; }
  .bench__rate { text-align: left; }
}

/* --- steps ------------------------------------------------------------- */

.steps { counter-reset: s; display: grid; gap: 1.1rem; }
.step { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; }
.step__n {
  counter-increment: s;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--current);
  background: var(--current-lo);
  border-radius: 8px;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
}
.step__n::before { content: counter(s, decimal-leading-zero); }
.step h3 { font-size: 1rem; margin-bottom: .25rem; }
.step p { font-size: .9rem; color: var(--slate-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Contact + footer
   -------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

.reach { display: grid; gap: .7rem; }
.reach a {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  color: #fff;
  transition: background .16s ease, border-color .16s ease;
}
.reach a:hover { background: rgba(255,255,255,.12); border-color: #7FC4EE; text-decoration: none; }
.reach svg { width: 20px; height: 20px; flex: none; color: #7FC4EE; }
.reach__l {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8FB4CC;
}
.reach__v { font-family: var(--mono); font-size: 1rem; color: #fff; }

.foot {
  background: #0F1B24;
  color: #7C99AD;
  padding-block: 2.2rem;
  font-size: .84rem;
}
.foot__in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.foot a { color: #A7C4D8; }

.fineprint { font-size: .78rem; color: var(--slate-soft); margin-top: 1.2rem; max-width: 70ch; }
.band--deep .fineprint { color: #8FB4CC; }

/* --------------------------------------------------------------------------
   Language switch
   -------------------------------------------------------------------------- */

.lang {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--slate-soft);
  border: 1px solid var(--haze);
  border-radius: 999px;
  padding: .32rem .62rem;
  line-height: 1;
}
.lang:hover { color: var(--current); border-color: var(--current); text-decoration: none; }