@font-face { font-family: "Sofia Sans"; src: url(/fonts/sofia-sans.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Sofia Sans Condensed"; src: url(/fonts/sofia-sans-condensed.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url(/fonts/sofia-sans-extra-condensed.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }

:root {
  --paper: #fff;
  --ink: #0b3b2e;
  --soft: #4a6b60;
  --mint: #eaf1ec;
  --line: #c9d6ce;
  --amber: #ffb400;
  --error: #b3261e;
  --text: "Sofia Sans", system-ui, sans-serif;
  --narrow: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --head: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.55 var(--text); }
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--amber); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* header, footer */
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem; }
.brand { font: 800 2rem/1 var(--head); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-family: var(--narrow); }
nav a { text-decoration: none; }
nav a:hover, nav a[aria-current] { text-decoration: underline 3px var(--amber); }
.foot { margin-top: 6rem; padding-bottom: 3rem; color: var(--soft); }
.foot nav { border-top: 1px solid var(--ink); padding-top: 2rem; }
.foot p { margin: 1rem 0 0; font-size: 1rem; }

/* type */
h1, h2 { font-family: var(--head); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(3.25rem, 9vw, 7rem); line-height: .9; margin: 3rem 0 1.5rem; max-width: 15ch; }
h1.sub { font-size: clamp(2.75rem, 6vw, 4.5rem); max-width: 20ch; }
h2 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1; margin: 4.5rem 0 1rem; }
h3 { font: 600 1.35rem/1.25 var(--narrow); margin: 2.5rem 0 .5rem; }
p, ul, ol, dl { max-width: 40rem; margin-block: 0 1rem; }
li { margin-bottom: .4rem; }
.lead { font-size: 1.35rem; line-height: 1.4; max-width: 34rem; }
.note { color: var(--soft); font-size: 1rem; }
code { font: inherit; background: var(--mint); padding: .1em .35em; }

.btn { display: inline-block; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: .8rem 1.5rem; font: 600 1.125rem/1 var(--narrow); text-decoration: none; cursor: pointer; }
.btn:hover { background: #062a20; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-block: 2rem 3.5rem; max-width: none; }
.cta .note { margin: 0; }

/* list tables */
.list { width: 100%; border-collapse: collapse; font: 400 1.125rem/1.35 var(--narrow); font-variant-numeric: tabular-nums; margin-block: 1.5rem 2rem; }
.list th, .list td { text-align: left; vertical-align: baseline; padding: .7rem 1.5rem .7rem 0; border-bottom: 1px solid var(--line); }
.list thead th { font-weight: 400; color: var(--soft); border-bottom-color: var(--ink); }
.list tbody tr:hover { background: var(--mint); }
.list tbody th { font-weight: 600; white-space: nowrap; }
.list .num { text-align: right; white-space: nowrap; }
.list :last-child { padding-right: 0; }
.list.big { max-width: 56rem; }
.list.big tbody th { font: 700 2rem/1 var(--head); width: 15rem; }
.list.big td { font-family: var(--text); line-height: 1.5; }

.bar { display: inline-block; width: 8rem; height: .6rem; background: var(--mint); margin-right: .75rem; }
.bar i { display: block; height: 100%; background: var(--amber); transition: width .9s linear; }
tr:hover .bar { background: var(--paper); }
.st { white-space: nowrap; min-width: 13.5rem; }

/* plans: capacity bars drawn to scale */
.plan { display: grid; grid-template-columns: 7rem 1fr 11rem 8.5rem; gap: .5rem 2rem; align-items: center; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.plan h2 { margin: 0; font-size: 2.25rem; }
.plan p { margin: 0; font-family: var(--narrow); }
.plan .price { text-align: right; font: 700 2.25rem/1 var(--head); }
.plan .price small { font: 400 1rem var(--narrow); color: var(--soft); }
.cap { display: flex; align-items: center; gap: .75rem; font: 600 1.125rem var(--narrow); white-space: nowrap; }
.cap i { height: 1.5rem; background: var(--ink); flex: none; }

/* forms */
form { max-width: 24rem; }
label { display: block; font: 600 1.05rem var(--narrow); margin: 1.25rem 0 .35rem; }
input, select, textarea { width: 100%; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--ink); border-radius: 3px; padding: .65rem .75rem; }
form .btn { margin-top: 1.5rem; }
.msg { margin-top: 1.25rem; }
.msg.err { color: var(--error); }

@media (max-width: 44rem) {
  .wide { display: none; }
  .list th, .list td { padding-right: .75rem; overflow-wrap: anywhere; }
  .bar { width: 2.5rem; margin-right: .4rem; }
  .st { min-width: 0; }
  .list.big tbody th, .list.big td { display: block; padding-right: 0; }
  .list.big tbody th { border: 0; padding-bottom: 0; }
  .plan { grid-template-columns: 1fr auto; }
  .plan .capwrap { grid-column: 1 / -1; grid-row: 2; }
  .plan .who { grid-column: 1 / -1; }
  .plan .price { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .bar i { transition: none; } }