/* DormHost: night and lamp.
   Indigo is a sleeping app; amber is a woken one. Every accent decision
   descends from that pair, because it is the mechanic the price rests on. */
:root {
  --night:      #161A38;
  --night-deep: #10132B;
  --night-soft: #232948;
  --lamp:       #E8963A;
  --lamp-lit:   #F9CE87;
  --lamp-dim:   #8A6033;
  --lamp-wash:  #FDF3E6;
  --lamp-edge:  #F1DBB8;
  --paper:      #F3F5FA;
  --surface:    #FFFFFF;
  --ink:        #171A2B;
  --muted:      #5B6379;
  --faint:      #8B93A6;
  --rule:       #DFE3EC;
  --live:       #1F8A62;
  --danger:     #B4443B;

  /* On the dark band, where --muted and --faint have no contrast. */
  --on-night:      #C7CCE4;
  --on-night-dim:  #98A0C4;
  --on-night-rule: #2C3357;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 64rem;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Horizontal padding only, as longhand. `.wrap` outranks the element selectors
   below it, so a `padding` shorthand here would silently zero out every
   section's vertical rhythm and strip the hero's gutter on narrow screens. For
   the same reason, everything that sets vertical padding on a `.wrap` element
   sets padding-top / padding-bottom rather than the shorthand. */
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: 1.5rem; padding-right: 1.5rem;
}

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--lamp); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { letter-spacing: -.025em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 6.5vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 750; }
h3 { font-size: 1.05rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

code {
  font-family: var(--mono); font-size: .88em;
  background: rgba(22,26,56,.055); border-radius: 3px; padding: .1em .32em;
}

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.3rem 0; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; letter-spacing: -.02em; font-size: 1.08rem;
  text-decoration: none; color: inherit;
}
.brand-mark { display: block; width: 1.55rem; height: 1.55rem; flex: none; }
/* align-items matters: without it the children stretch, which is invisible on
   plain text links and obvious the moment one has a background. */
.nav-links { display: flex; align-items: center; gap: .9rem; font-size: .93rem; flex-wrap: wrap; }
@media (min-width: 34rem) { .nav-links { gap: 1.4rem; } }
.nav-links a { text-decoration: none; color: var(--muted); }
/* The only way into the product from here. Lamp rather than night, so it reads
   as a way in without competing with the hero's dark button. */
.nav-cta {
  display: inline-flex; align-items: center; line-height: 1.35;
  color: var(--night) !important; font-weight: 650;
  border: 1px solid rgba(232,150,58,.55); border-radius: 999px;
  padding: .34rem .9rem;
  background: linear-gradient(180deg, #FEF6EA, #FBE7CB);
  box-shadow: 0 1px 0 rgba(232,150,58,.2);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nav-cta:hover {
  border-color: var(--lamp);
  background: linear-gradient(180deg, #FBE7CB, #F7D5A6);
  box-shadow: 0 3px 10px rgba(232,150,58,.26);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .nav-cta:hover { transform: none; } }
.nav-links a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- hero */
.hero { padding-top: 2.25rem; padding-bottom: 3rem; }
.hero-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }

.hero p.lead { font-size: 1.16rem; color: var(--muted); max-width: 34rem; margin-top: 1.2rem; }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; margin: 1.8rem 0 .3rem; }
.price-alt {
  font-family: var(--mono); font-size: .88rem; color: var(--faint);
  padding-left: .6rem; border-left: 1px solid var(--rule);
}
.price {
  font-family: var(--mono); font-size: clamp(2.6rem, 7vw, 3.6rem);
  font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.price-unit { color: var(--muted); font-size: 1rem; }
.price-note { color: var(--faint); font-size: .9rem; margin: 0; max-width: 30rem; }

/* The objection most students have is the card, so it gets a badge rather
   than a footnote. */
.no-card {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 1rem 0 .6rem; padding: .4rem .85rem .4rem .62rem;
  background: var(--night); color: #fff; border-radius: 999px;
  font-size: .85rem; font-weight: 650; letter-spacing: -.005em;
}
.no-card-icon { width: 1.05rem; height: 1.05rem; color: var(--lamp); flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* The languages, named. "Any language" is the promise; these are the words
   people actually type into a search box. */
.runtimes { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.runtimes-label {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.runtimes-icon { width: 1rem; height: 1rem; flex: none; color: var(--lamp); }
.runtime-list, .chip-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.runtime-list li, .chip-list li {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .84rem; color: var(--muted); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px; padding: .18rem .7rem;
}
/* The narrower left gutter is for the icon, so a text-only chip keeps both. */
.runtime-list li:has(.chip-icon),
.chip-list li:has(.chip-icon) { padding-left: .5rem; }
/* Scoped, not !important: the `li` selectors above already outrank a bare class. */
.runtime-list .runtime-more,
.chip-list .runtime-more { color: var(--faint); border-style: dashed; }
/* The marks are in their own colours, so they carry no currentColor. */
.chip-icon { width: 1rem; height: 1rem; flex: none; }
/* The hero row sits under its own label; these follow a paragraph. */
.chip-list { margin: .85rem 0 1.5rem; }
.btn {
  display: inline-block; padding: .78rem 1.5rem; border-radius: 6px;
  font-weight: 650; font-size: .96rem; text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease;
}
.btn-primary { background: var(--night); color: #fff; }
.btn-primary:hover { background: var(--night-deep); transform: translateY(-1px); }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--night); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* -------------------------------------------------- the window (signature) */
.window {
  position: relative; background: var(--night); border-radius: 12px; padding: 1.6rem;
  box-shadow: 0 24px 60px -30px rgba(16,19,43,.6);
}
.window-label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: #6E77A0; margin-bottom: 1rem;
}
.panes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
/* Dark glass, not an empty box: a graded pane plus one diagonal reflection is
   what makes the asleep state read as a window you could look through. */
.pane {
  aspect-ratio: 3 / 4; border-radius: 5px; position: relative; overflow: hidden;
  background: linear-gradient(158deg, #2E3560 0%, #1C2147 54%, #262C4E 100%);
  border: 1px solid #343C69;
  transition: background .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.pane { display: grid; place-items: center; }
.pane::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,.075) 0 34%, rgba(255,255,255,0) 34%);
}
.pane-icon {
  position: relative; z-index: 1; /* above the glass reflection */
  width: 52%; max-width: 2.3rem; height: auto; aspect-ratio: 1;
  color: #626DA8; transition: color .5s ease;
}
.pane.lit .pane-icon { color: #7C4A11; animation: pane-wake .42s ease both; }
@keyframes pane-wake {
  0%   { transform: scale(.72); opacity: .35; }
  62%  { transform: scale(1.09); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Asleep, the window snores. It is the one bit of whimsy on the page and it
   stops the idle state looking like a loading failure. */
.zzz {
  position: absolute; top: 1.15rem; right: 1.5rem;
  display: flex; align-items: flex-end; gap: .12rem;
  font-family: var(--mono); color: var(--lamp); line-height: 1;
  transition: opacity .3s ease;
}
.zzz span { opacity: 0; animation: snore 3.2s ease-in-out infinite; }
.zzz span:nth-child(1) { font-size: .68rem; animation-delay: 0s; }
.zzz span:nth-child(2) { font-size: .84rem; animation-delay: .38s; }
.zzz span:nth-child(3) { font-size: 1rem; animation-delay: .76s; }
@keyframes snore {
  0%   { opacity: 0; transform: translate(0, 5px); }
  22%  { opacity: .9; }
  65%  { opacity: .45; transform: translate(3px, -7px); }
  100% { opacity: 0; transform: translate(6px, -14px); }
}
.window.awake .zzz { opacity: 0; }
.pane.lit {
  background: linear-gradient(180deg, #F9CE87 0%, var(--lamp) 100%);
  border-color: var(--lamp);
  box-shadow: 0 0 26px -4px rgba(232,150,58,.55);
}

/* The sill catches the light when the app wakes, the same way it does in the
   logo. Asleep it is just the ledge the window sits on. */
.sill {
  position: relative; height: .5rem; margin-top: .9rem; border-radius: 3px;
  background: #262C4E; border: 1px solid #343C69;
  transition: background .5s ease, border-color .5s ease;
}
.sill .spill {
  position: absolute; left: 0; right: 0; top: 100%; height: 2.4rem;
  background: linear-gradient(180deg, rgba(232,150,58,.32), rgba(232,150,58,0));
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.sill.lit {
  background: linear-gradient(90deg, #8A6033 0%, #F9CE87 50%, #8A6033 100%);
  border-color: var(--lamp);
}
.sill.lit .spill { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pane, .sill, .sill .spill, .pane-icon, .zzz { transition: none; }
  .pane.lit .pane-icon { animation: none; }
  .zzz span { animation: none; opacity: .6; }
}

.window-readout {
  position: relative; z-index: 1; /* above the light spilling off the sill */
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .6rem 1rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--on-night-rule);
  font-family: var(--mono); font-size: .82rem; color: var(--on-night-dim);
}
.readout-state { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: #4B5480; flex: none; }
.dot.awake { background: var(--live); box-shadow: 0 0 0 3px rgba(31,138,98,.22); }
.dot.ok { background: var(--live); box-shadow: 0 0 0 3px rgba(31,138,98,.22); }
.dot.bad { background: var(--danger); box-shadow: 0 0 0 3px rgba(180,68,59,.22); }
.dot.unknown { background: var(--faint); }
.ms { color: #fff; font-variant-numeric: tabular-nums; }
.window button {
  font: inherit; font-family: var(--mono); font-size: .8rem;
  background: transparent; color: var(--lamp); border: 1px solid var(--lamp-dim);
  border-radius: 5px; padding: .4rem .85rem; cursor: pointer;
}
.window button:hover { background: rgba(232,150,58,.1); }
.window button[disabled] { opacity: .45; cursor: default; }
.window-caption { color: var(--faint); font-size: .85rem; margin: .9rem 0 0; }

/* ---------------------------------------------------------------- sections */
section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
@media (min-width: 48rem) { section { padding-top: 3rem; padding-bottom: 3rem; } }
.section-head { margin-bottom: 1.6rem; max-width: 40rem; }
.section-head p { color: var(--muted); margin: .6rem 0 0; }

.page-head { padding-top: 2.5rem; padding-bottom: 1rem; max-width: 42rem; }
.page-head h1 { font-size: clamp(2.1rem, 5.4vw, 3.1rem); }
.page-head .lead { color: var(--muted); font-size: 1.1rem; margin-top: 1rem; }

.steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* Repo, build, site. The arrow is a pseudo-element on every node but the
   first, so the row and the stacked column need no extra markup. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .flow { grid-template-columns: repeat(3, 1fr); gap: 2.8rem; } }
.flow-node {
  position: relative; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.3rem 1.4rem 1.2rem;
}
.flow-node + .flow-node::before {
  content: "↓"; position: absolute; left: 50%; top: -1.75rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: 1.05rem; line-height: 1; color: var(--lamp);
}
@media (min-width: 46rem) {
  .flow-node + .flow-node::before {
    content: "→"; left: -1.9rem; top: 50%; transform: translateY(-50%);
  }
}
/* The last node is the lit one, the same way the window is when it wakes. */
.flow-live { border-color: var(--lamp-edge); background: var(--lamp-wash); }
.flow-icon { width: 1.35rem; height: 1.35rem; color: var(--lamp); display: block; }
.flow-label { font-weight: 700; margin: .7rem 0 .2rem; }
.flow-note { color: var(--muted); font-size: .92rem; margin: 0 0 .9rem; }
.flow-code {
  display: block; background: none; padding: 0;
  font-size: .78rem; color: var(--faint); word-break: break-all;
}

.step { position: relative; padding-top: 1.9rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: .78rem; color: var(--lamp);
  border-top: 2px solid var(--lamp); padding-top: .45rem; width: 100%;
}
/* Same cards, no numbers: these are things to do when you need them, not an
   order to do them in. */
.steps-plain .step::before { content: ""; }
.step h3 { display: flex; align-items: center; gap: .5rem; }
.step-icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--lamp); }
.step p { color: var(--muted); font-size: .95rem; margin: .4rem 0 0; }

/* ------------------------------------------------- the dark band (the pitch) */
section.band {
  background: var(--night); color: #fff;
  padding-top: 3.25rem; padding-bottom: 3.5rem;
  margin: .5rem 0;
}
.band .section-head { max-width: 44rem; }
.band .section-head h2 { color: #fff; }
.band .section-head p { color: var(--on-night); }
.eyebrow-dim { color: #6E77A0; }

.diffs { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .diffs { grid-template-columns: repeat(2, 1fr); } }
.diff { padding: 1.5rem 0; border-top: 1px solid var(--on-night-rule); }
@media (min-width: 46rem) {
  .diff { padding: 1.6rem 2.2rem 1.6rem 0; }
  .diff:nth-child(2n) { padding-right: 0; padding-left: 2.2rem; border-left: 1px solid var(--on-night-rule); }
}
.diff h3 {
  display: flex; align-items: flex-start; gap: .5rem;
  color: var(--lamp-lit); margin-bottom: .5rem;
}
.diff-icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--lamp); transform: translateY(-.02rem); }
.diff p { color: var(--on-night); font-size: .95rem; margin: 0; }
.diff strong { color: #fff; }

/* ---------------------------------------------------------------- ai band */
.ai-points { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin: 0 0 2rem; }
@media (min-width: 48rem) { .ai-points { grid-template-columns: repeat(3, 1fr); } }
.ai-point h3 {
  display: flex; align-items: flex-start; gap: .5rem;
  color: var(--lamp-lit); margin-bottom: .5rem; font-size: 1.02rem;
}
.ai-point p { color: var(--on-night); font-size: .95rem; margin: 0; }
.ai-point a { color: var(--lamp-lit); }
.ai-code {
  overflow-x: auto; margin: 0 0 1.2rem; padding: 1rem 1.2rem;
  border: 1px solid var(--on-night-rule); border-radius: .6rem;
  font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  color: var(--on-night); background: rgba(0, 0, 0, .25);
}
/* The page's code style is a dark tint on white, which is invisible here. */
.band code { background: rgba(255,255,255,.09); color: var(--lamp-lit); }
.band .tier-foot { color: var(--on-night-dim); }
.band .tier-foot a { color: var(--on-night); }

/* ---------------------------------------------------------------- pricing */
/* stretch, not start: both cards run to the height of the taller one, so the
   prices line up and the buttons sit on the same baseline. */
.tiers { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 52rem) {
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .tiers-2 { grid-template-columns: repeat(2, 1fr); }
}
.tier {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.5rem; position: relative;
  display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--night); box-shadow: 0 12px 34px -22px rgba(22,26,56,.5); }
/* Overlaid on the card's top edge rather than sitting in the flow, so the
   featured card's price still lines up with its neighbour's. */
.tier-flag {
  position: absolute; top: -.7rem; left: 1.5rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--night);
  border-radius: 4px; padding: .22rem .55rem; margin: 0; white-space: nowrap;
}
.tier-name { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0; }
.tier-price {
  font-family: var(--mono); font-size: 2rem; font-weight: 700;
  margin: .5rem 0 .15rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.tier-per { font-size: .9rem; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.tier-alt { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin: 0 0 .35rem; }
.tier-year { font-size: .85rem; color: var(--muted); margin: 0 0 .7rem; }
.tier-sub { color: var(--faint); font-size: .88rem; margin: 0 0 1rem; }

/* The spec strip: the four numbers people actually compare, given icons so
   they read at a glance rather than as another bullet list. */
.specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem .9rem;
  padding: .95rem 0; margin: 0 0 1.1rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.spec { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--muted); }
/* An odd number of specs would leave a gap, so the last one spans the row. */
.spec:last-child:nth-child(odd) { grid-column: 1 / -1; }
.spec-icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--lamp); }
/* auto, not a fixed gap: with the feature list gone the button is what holds
   the two cards to the same height, so both sit on the same baseline. */
.tier-cta { margin-top: auto; width: 100%; text-align: center; }
.tier-foot { margin-top: 1.2rem; font-size: .9rem; color: var(--faint); }

/* --------------------------------------------------------- product detail */
.products { display: grid; gap: 1.25rem; grid-template-columns: 1fr; padding: 1.5rem 0 0; }
.product {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.8rem;
}
.product-featured { border-color: var(--night); box-shadow: 0 14px 38px -26px rgba(22,26,56,.5); }
.product-head {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--rule); padding-bottom: 1.1rem; margin-bottom: 1.2rem;
}
.product-head h2 { font-size: 1.6rem; }
.product-summary { color: var(--muted); font-size: .95rem; margin: .35rem 0 0; }
.product-price { text-align: left; }
@media (min-width: 40rem) { .product-price { text-align: right; } }
.product-monthly {
  font-family: var(--mono); font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.035em; margin: 0; font-variant-numeric: tabular-nums;
}
.product-monthly span { font-size: .9rem; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.product-alt { font-family: var(--mono); font-size: .85rem; color: var(--muted); margin: .25rem 0 0; }
.product-yearly { font-size: .9rem; color: var(--muted); margin: .45rem 0 0; }
.product-yearly span { color: var(--faint); font-size: .85rem; }
.product-desc { color: var(--muted); font-size: .97rem; max-width: 46rem; }
.product-sub {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
  margin: 1.6rem 0 .8rem;
}
.product-list {
  list-style: none; margin: 0; padding: 0; font-size: .93rem; color: var(--muted);
  display: grid; gap: 0; grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .product-list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
.product-list li { padding: .4rem 0 .4rem 1.15rem; border-top: 1px solid var(--rule); position: relative; }
.product-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: .35rem; height: .35rem; border-radius: 1px; background: var(--lamp);
}

/* ------------------------------------------------------------ when not to */
.notfor { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.notfor-row { padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 46rem) {
  .notfor-row { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
}
.notfor-row h3 { display: flex; align-items: flex-start; gap: .5rem; }
.notfor-icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--faint); margin-top: .05rem; }
.notfor-row p { color: var(--muted); font-size: .95rem; margin: .3rem 0 0; }
@media (min-width: 46rem) { .notfor-row p { margin: 0; } }

/* ---------------------------------------------------------------- blog */
.posts { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.4rem 1.5rem 1.3rem;
}
.post-card:hover { border-color: var(--lamp); }
.post-date { font-family: var(--mono); font-size: .78rem; color: var(--faint); margin: 0; }
.post-card h2 { font-size: 1.12rem; line-height: 1.35; margin: 0; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--lamp); }
.post-lede { color: var(--muted); font-size: .92rem; margin: 0; }
.post-read { margin: auto 0 0; }
.post-read a { color: var(--lamp-dim); font-weight: 650; text-decoration-color: var(--lamp); }
.post-read a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- faq */
.faq { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .faq { grid-template-columns: repeat(2, 1fr); } }
.faq p { color: var(--muted); font-size: .95rem; margin: .35rem 0 0; }

/* ---------------------------------------------------------------- features */
.features { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 44rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  padding: 1.5rem 1.5rem 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) {
  .feature { padding-right: 2rem; }
  .feature:nth-child(2n) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
}
@media (min-width: 68rem) {
  .feature:nth-child(2n) { padding-left: 0; border-left: none; }
  .feature:not(:nth-child(3n+1)) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
}
.feature h3 { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .4rem; }
.feature p { color: var(--muted); font-size: .93rem; margin: 0; }
.feature-icon {
  width: 1.2rem; height: 1.2rem; flex: none; color: var(--lamp);
  transform: translateY(-.02rem);
}

/* ------------------------------------------------------------------ status */
.status-components { border-top: 1px solid var(--rule); }
.status-row { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.status-row-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.status-row-head strong { font-size: .95rem; }
.status-pct { margin-left: auto; font-size: .82rem; color: var(--muted); }
.status-days { display: flex; flex-wrap: wrap; gap: 2px; }
.status-day {
  width: 8px; height: 20px; border-radius: 2px; flex: none;
  background: var(--rule);
}
.status-day-up { background: var(--live); }
.status-day-partial { background: var(--lamp); }
.status-day-down { background: var(--danger); }

.status-incident {
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem; background: var(--surface);
}
.status-incident-resolved { opacity: .72; }
.status-incident-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.status-pill {
  font-size: .72rem; text-transform: capitalize; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .55rem;
}
.status-update { font-size: .87rem; color: var(--muted); margin: 0 0 .4rem; }
.status-update:last-child { margin-bottom: 0; }
.status-update-status { font-weight: 700; text-transform: capitalize; color: var(--ink); }
.status-update-time { display: block; font-size: .74rem; color: var(--faint); margin-top: .1rem; }

/* ---------------------------------------------------------------- regions */
.regions { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .regions { grid-template-columns: repeat(2, 1fr); } }
.region {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.3rem 1.4rem; display: flex; align-items: flex-start; gap: 1rem;
}
.region-icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--lamp); margin-top: .1rem; }
.region-dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 3px rgba(31,138,98,.18); flex: none;
}
.region h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .2rem; }
.region p { color: var(--muted); font-size: .92rem; margin: 0; }
.region .ping { font-family: var(--mono); font-size: .8rem; color: var(--faint); }

/* ---------------------------------------------------------------- contact */
.contact-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 1.5rem 0 0; }
@media (min-width: 50rem) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.4rem;
}
.contact-card h2 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: .7rem;
}
.contact-icon { width: .95rem; height: .95rem; flex: none; color: var(--lamp); }
.contact-card p { color: var(--muted); font-size: .9rem; margin: .6rem 0 0; }
.contact-value { font-size: 1.02rem; color: var(--ink); font-weight: 600; margin: 0; }
.contact-value a { color: var(--ink); }
.contact-address { font-weight: 500; font-size: .95rem; line-height: 1.5; }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 44rem; padding-top: 2rem; padding-bottom: 3rem; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: .4rem; }
.prose h2 { font-size: 1.25rem; margin: 2.6rem 0 .7rem; }
.prose h3 { font-size: 1rem; margin: 1.8rem 0 .4rem; }
.prose p, .prose li, .prose td { color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--ink); }
.updated { font-family: var(--mono); font-size: .8rem; color: var(--faint); margin-bottom: 2rem; }

.callout {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--lamp);
  border-radius: 0 8px 8px 0; padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.callout p { margin: 0 0 .6rem; font-size: .95rem; }
.callout p:last-child { margin-bottom: 0; }
.callout-address { line-height: 1.5; }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .93rem; }
.table th, .table td {
  text-align: left; vertical-align: top; padding: .6rem .8rem .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.table th { color: var(--ink); font-weight: 650; white-space: nowrap; }
.table td { color: var(--muted); }
.table thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.table tbody th { width: 12rem; }
/* The green tick / red cross in a comparison table. The icon leads the cell
   and the colour carries the verdict, so the table still scans if colours are
   not available. */
.cmp-icon { width: .95rem; height: .95rem; flex: none; vertical-align: -.14em; margin-right: .45rem; }
.cmp-ok { color: var(--live); }
.cmp-bad { color: var(--danger); }
/* A 12rem nowrap header plus a cell does not fit a small phone, so let them
   both wrap rather than pushing the page sideways. */
@media (max-width: 40rem) {
  .table th { white-space: normal; }
  .table tbody th { width: auto; }
}

/* ---------------------------------------------------------------- footer */
footer { background: var(--night); color: #A8AFCF; padding: 2.5rem 0 2rem; margin-top: 1.5rem; }
footer a { color: #D5DAEE; text-decoration-color: #3A4269; }
footer a:hover { text-decoration-color: var(--lamp); }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.foot-grid h4 {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: #6E77A0; margin: 0 0 .8rem; font-weight: 500;
}
.foot-links { display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.foot-links a { display: flex; align-items: center; gap: .5rem; }
.foot-blurb { margin-top: .8rem; max-width: 24rem; font-size: .92rem; }
.foot-contact { margin-top: .9rem; font-size: .92rem; line-height: 1.9; }
.foot-contact a { display: inline-flex; align-items: center; gap: .45rem; }
footer .brand { color: #fff; }

/* vertical-align matters for the one that sits inline in a paragraph rather
   than in a flex row. */
.foot-head-icon { width: .95rem; height: .95rem; flex: none; color: #6E77A0; }
.foot-icon { width: .95rem; height: .95rem; flex: none; color: var(--lamp); vertical-align: -.16em; }

.foot-legal { border-top: 1px solid var(--on-night-rule); margin-top: 2rem; padding-top: 1.4rem; }
.foot-legal p { font-size: .85rem; color: #8891B8; margin: 0 0 .6rem; line-height: 1.6; }
.foot-legal strong { color: #C7CCE4; font-weight: 600; }

/* White badges: several of these marks carry dark or colour-critical ink
   that the night background would wash out. */
.foot-payments { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: .3rem; padding: .3rem .55rem;
}
.pay-badge img { display: block; height: 16px; width: auto; }
.foot-note { color: #6E77A0; margin-bottom: 0; }
/* Quiet on purpose: it is here so a bug report can name a build, not to be read. */
.foot-version { font-family: var(--mono); font-size: .8em; opacity: .65; }

/* ---------------------------------------------------------------- regions map
   Land is one path from Natural Earth (public domain), simplified and cropped
   north of Antarctica. Markers sit in percent so they stay on their coastline
   at any width, with no script. */
/* figure carries a browser default margin of 1em 40px and this stylesheet has
   no reset, so without this the map sits inset from every other block. */
.map-figure { margin: 0; padding-top: .5rem; }
.map-frame {
  position: relative;
  background: var(--night-deep);
  border: 1px solid var(--night-soft);
  border-radius: 12px;
  padding: clamp(.75rem, 3vw, 1.75rem);
  overflow: hidden;
}
.map-plot { position: relative; }
.map-svg { display: block; width: 100%; height: auto; }
.map-land { fill: #222A50; stroke: #2E376A; stroke-width: .6; }

.map-pin { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.map-dot {
  display: block; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 0 4px rgba(232,150,58,.22);
}
.map-label {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; line-height: 1.15;
  white-space: nowrap; font-size: .78rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(16,19,43,.9);
}
.map-id {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  color: var(--lamp-lit); letter-spacing: .02em;
}

.map-key {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  margin-top: .9rem; font-size: .8rem; color: var(--muted);
}
.map-key-item { display: inline-flex; align-items: center; gap: .45rem; }
.map-key .map-dot { width: .55rem; height: .55rem; box-shadow: none; }

/* Six labels cannot fit beside six dots at phone width without overlapping,
   and an unreadable map is worse than none. The cards carry the same facts. */
@media (max-width: 40rem) {
  .map-label { display: none; }
}

.region-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 1.5rem 0 0; }
@media (min-width: 50rem) { .region-cards { grid-template-columns: repeat(3, 1fr); } }
.region-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.4rem;
}
.region-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.region-head h3 { margin: 0; font-size: 1.05rem; }
.region-id {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 6px; padding: .1rem .4rem;
}
.region-where { margin: .4rem 0 0; font-size: .78rem; color: var(--faint); }
.region-note { margin: .7rem 0 0; color: var(--muted); }
.region-since {
  margin: .9rem 0 0; font-size: .8rem; color: var(--muted);
  display: flex; align-items: center; gap: .45rem;
}