/* Natchland Studios.

   Its own look, apart from every product's. Warm black and cream with no
   colour accent at all, because each product already owns one (MC Server
   Manager blue, NatchGSM lime, NatchPlay amber, NotNatch teal, NatchHosting
   vermilion) and their screenshots carry them. Picked by Natchland on
   2026-10-27 from six mocked directions.

   Dark is the site. Light is there only for anyone who switches to it.
   Familjen Grotesk for text, Azeret Mono for labels, numbers and prices, both
   self-hosted. Cream fills the buttons, emphasis otherwise comes from weight,
   size and the hairlines. Radii 3 to 6px.

   Deliberately absent: gradients, glass, coloured card grids, side bars,
   per-product hues on the page, emoji as icons, centred-everything layouts. */

:root {
  --bg: #0F0E0D;         /* alternate sections */
  --surface: #161513;    /* the page */
  --primary: #1E1C19;    /* panels */
  --secondary: #2A2723;
  --border: #2D2A26;
  --text: #EDE6D8;
  --mute: #9C958A;       /* 6.3:1 on --surface */
  --accent: #EDE6D8;     /* button fill */
  --accent2: #FFFFFF;    /* hover, focus, links */
  --btntx: #161513;
  --hover: #24221E;
  --success: #8DBF7A;
  --danger: #E0786A;
  --dangertx: #E8907F;
  --warning: #D9B26A;
  --goodlow: rgba(141, 191, 122, .12);
  --badlow: rgba(224, 120, 106, .13);
  --warnlow: rgba(217, 178, 106, .12);
  --acclow: rgba(237, 230, 216, .07);
  --imgshadow: 0 24px 60px rgba(0, 0, 0, .5);
  --sans: "Familjen Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: "Azeret Mono", Consolas, "Cascadia Mono", ui-monospace, monospace;
  --r: 4px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #EAE4D8;
  --surface: #F4F0E8;
  --primary: #FBF8F2;
  --secondary: #E2DBCD;
  --border: #D6CEBF;
  --text: #1A1816;
  --mute: #665F55;
  --accent: #1A1816;
  --accent2: #000000;
  --btntx: #F4F0E8;
  --hover: #ECE6DA;
  --success: #3E6B2F;
  --danger: #A8382F;
  --dangertx: #9A3128;
  --warning: #7A5A14;
  --goodlow: rgba(62, 107, 47, .1);
  --badlow: rgba(168, 56, 47, .09);
  --warnlow: rgba(122, 90, 20, .1);
  --acclow: rgba(26, 24, 22, .05);
  --imgshadow: 0 2px 6px rgba(26, 24, 22, .08), 0 22px 50px rgba(26, 24, 22, .16);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Form controls don't inherit the page font by default, and they'd fall
   back to the system face without this. */
button, input, select, textarea { font: inherit; }
code, pre, kbd, samp { font-family: var(--mono); }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text); }

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

h1, h2, h3, h4 { color: var(--text); margin: 0; font-weight: 600; }
p { margin: 0; }

/* margin-inline, never the margin shorthand. These land on elements that set
   their own margin-top, and the shorthand silently wiped it. */
.wrap { max-width: 1200px; margin-inline: auto; padding: 0 24px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 10px;
  background: var(--primary);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--r);
  z-index: 40;
}

.skip:focus { left: 18px; }

/* Mono label, used for section numbers, captions, kickers and spec keys */

.kick {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  display: block;
}

/* Header */

.top {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}

.top .in { display: flex; align-items: center; gap: 30px; height: 62px; }
.top .in > nav { flex: 1; }

.mark {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.mark:hover { color: var(--text); }
.mark b { color: var(--mute); font-weight: 700; }

.top nav { display: flex; gap: 22px; font-size: 14px; }

.top nav a {
  color: var(--mute);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.top nav a:hover { color: var(--text); border-bottom-color: var(--border); }
.top nav a.here { color: var(--text); border-bottom-color: var(--accent); }

.acts { display: flex; align-items: center; gap: 12px; }

.swap {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--mute);
  border-radius: var(--r);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.swap:hover { color: var(--text); border-color: var(--mute); background: var(--hover); }
.swap svg { display: block; }

/* Dark is the base, so the moon shows by default. Light flips it. */
.swap .sun { display: none; }
.swap .moon { display: block; }
:root[data-theme="light"] .swap .sun { display: block; }
:root[data-theme="light"] .swap .moon { display: none; }

/* Menu button. Hidden until the nav row runs out of width to sit in. */

.menu {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: var(--r);
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.menu:hover { border-color: var(--mute); background: var(--hover); }
.menu svg { display: block; }
.menu .shut { display: none; }
.top[data-nav="open"] .menu .open { display: none; }
.top[data-nav="open"] .menu .shut { display: block; }

/* Buttons, same shape as the app site's .btn */

.fill, .out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--btntx);
  border-radius: var(--r);
  line-height: 1.35;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}

.fill:hover { background: var(--accent2); border-color: var(--accent2); color: var(--btntx); }

.out { background: transparent; color: var(--text); border-color: var(--border); }
.out:hover { border-color: var(--mute); color: var(--text); background: var(--hover); }

.sm { font-size: 13px; padding: 8px 15px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.t { margin-top: 26px; }

/* Hero */

.hero { padding: 88px 0 0; }

/* The heading and pitch on the left, real figures on the right, both starting
   on the same line. */
.hero .split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: end; }

.hero h1 {
  font-size: 60px;
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 19ch;
  margin-bottom: 24px;
}

.hero .stand {
  font-size: 18px;
  line-height: 1.6;
  max-width: 54ch;
  color: var(--mute);
}

.hero .stand + .stand { margin-top: 13px; }

/* Figures. A 2px rule in the text colour on top, hairlines between rows. */
.facts { border-top: 2px solid var(--text); }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.facts dt { font-size: 15px; color: var(--mute); white-space: nowrap; }
.facts dd { margin: 0; font-family: var(--mono); font-size: 13.5px; font-weight: 500; text-align: right; }
.facts dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.facts dd a:hover { border-bottom-color: var(--text); }

.rated { margin-top: 24px; font-family: var(--mono); font-size: 12.5px; color: var(--mute); }
.rated b { color: var(--text); font-weight: 500; }
.rated a { color: var(--mute); }
.rated a:hover { color: var(--text); }

/* Imagery. Real product captures doing the visual work, each in its own
   product's colours, on a 1px edge. */

/* margin-top only. The shorthand would reset the margin-inline: auto that
   .wrap uses to centre this figure, same trap as before. */
.shot { margin-top: 54px; }
.shot img { box-shadow: var(--imgshadow); border: 1px solid var(--border); border-radius: 6px; width: 100%; }
.shot figcaption { font-family: var(--mono); font-size: 12px; color: var(--mute); margin-top: 14px; }

/* Sections alternate the page and the darker ground. */

.sec { padding: 88px 0; }
.sec.alt { background: var(--bg); }
.sec.line { border-top: 1px solid var(--border); }

.sec > .wrap > .kick { margin-bottom: 13px; }

.sec h2 {
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.03em;
  max-width: 28ch;
}

/* The product catalogue. A comparison, so a table, stacked into rows on phones. */
.catalog { width: 100%; border-collapse: collapse; margin-top: 40px; }
.catalog th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 0 18px 11px 0; border-bottom: 1px solid var(--text); }
.catalog td { padding: 20px 18px 20px 0; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.catalog th:last-child, .catalog td:last-child { padding-right: 0; text-align: right; }
.catalog .name a { font-weight: 600; font-size: 19px; letter-spacing: -.015em; color: var(--text); text-decoration: none; white-space: nowrap; }
.catalog .name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.catalog .what { color: var(--mute); font-size: 15.5px; }
.catalog .state, .catalog .price { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.catalog .state { color: var(--mute); }
.catalog .state.on { color: var(--text); }

.sec .lede {
  font-size: 17px;
  line-height: 1.65;
  max-width: 70ch;
  margin-top: 16px;
  color: var(--mute);
}

.sec .lede + .lede { margin-top: 13px; }

/* The index. The products as a contents list, not as cards. */

.index { margin-top: 40px; border-top: 1px solid var(--border); }

.index a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 12px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--mute);
}

.index a:hover { background: var(--primary); color: var(--mute); }
.index a:hover h3 { color: var(--accent2); }
.index h3 { font-size: 20px; letter-spacing: -.018em; margin-bottom: 4px; }
.index p { font-size: 15px; max-width: 52ch; }
.index .tag { font-family: var(--mono); font-size: 11.5px; color: var(--mute); text-align: right; white-space: nowrap; }
.index .tag b { display: block; color: var(--text); font-weight: 500; font-size: 13px; margin-bottom: 3px; }

/* Two columns */

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 38px; }
.cols p { font-size: 15.5px; }
.cols p + p { margin-top: 13px; }

/* Spec list. Mono key left, prose right, hairline between. No table look. */

.spec { margin-top: 40px; border-top: 1px solid var(--border); }

.spec > div { padding: 19px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 11rem 1fr; gap: 30px; }

.spec .lab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 3px;
}

.spec .val { margin: 0; font-size: 15.5px; color: var(--mute); }
.spec .val strong { color: var(--text); font-weight: 600; }

/* Aside note. A hairline box, the same one the app site uses for a callout,
   with no coloured bar down its edge. */

.note {
  margin-top: 32px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--primary);
  font-size: 15px;
  color: var(--mute);
  max-width: 80ch;
}

.note strong { color: var(--text); font-weight: 600; }

/* Plan table. A comparison is a table, so NatchHosting's plans get one. */

.plans { margin-top: 30px; width: 100%; border-collapse: collapse; font-size: 15px; }
.plans th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 400; text-align: left; padding: 0 14px 10px 0; border-bottom: 1px solid var(--border); }
.plans td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--border); color: var(--mute); }
.plans td:first-child { color: var(--text); font-weight: 500; }
.plans .num { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.plans .amt { font-family: var(--mono); font-size: 14px; color: var(--text); text-align: right; padding-right: 0; white-space: nowrap; }
.plans th.amt { color: var(--mute); }
.tablewrap { overflow-x: auto; }

/* Mono spec strip */

.strip { margin-top: 42px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.strip div { background: var(--surface); padding: 17px 19px 19px; }
.strip dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent2); margin-bottom: 6px; }
.strip dd { margin: 0; font-size: 14px; color: var(--mute); line-height: 1.55; }

/* Hire */

.hire { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: end; }
.hire p { font-size: 16px; max-width: 62ch; margin-top: 16px; color: var(--mute); }

/* Store page */

.pagetop { padding: 70px 0 0; }

.pagetop h1 { font-size: 40px; line-height: 1.15; letter-spacing: -.026em; max-width: 24ch; margin-bottom: 18px; }
.pagetop .stand { font-size: 17px; max-width: 68ch; color: var(--mute); }
.pagetop .stand + .stand { margin-top: 13px; }

.jump { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 28px; }

/* Price rows. Editorial, not a card grid. */

.tiers { margin-top: 38px; border-top: 1px solid var(--border); }

.tier { padding: 25px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 12rem 1fr 11rem; gap: 32px; align-items: start; }

.tier .who h3 { font-size: 18px; letter-spacing: -.016em; margin-bottom: 4px; }
.tier .who p { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); line-height: 1.6; }
.tier .what { font-size: 15.5px; color: var(--mute); }
.tier .what p + p { margin-top: 10px; }
.tier .buy { text-align: right; }
.tier .buy .amt { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--text); display: block; margin-bottom: 2px; }
.tier .buy .per { font-family: var(--mono); font-size: 11px; color: var(--mute); display: block; margin-bottom: 13px; }
.tier .buy .fill, .tier .buy .out { width: 100%; }

/* Small print, four plain columns of prose, no boxes */

.print { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 38px; }
.print h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 400; margin-bottom: 8px; }
.print p { font-size: 15px; color: var(--mute); }

/* Footer */

.foot { border-top: 1px solid var(--border); background: var(--bg); padding: 54px 0 0; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-top: 0; }
.foot h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 400; margin-bottom: 11px; }
.foot ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.foot a { color: var(--mute); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot .about { font-size: 15px; max-width: 38ch; margin-top: 11px; color: var(--mute); }

.foot .end {
  border-top: 1px solid var(--border);
  margin-top: 42px;
  padding: 19px 0 38px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* Narrower */

@media (max-width: 1024px) {
  .hero h1 { font-size: 44px; max-width: none; }
  .hero .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sec h2 { font-size: 29px; }
  .pagetop h1 { font-size: 36px; }
  .sec { padding: 64px 0; }
  .hero { padding: 56px 0 0; }
  .cols { grid-template-columns: 1fr; gap: 0; }
  .cols > div + div { margin-top: 34px; }
  .hire { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .print { grid-template-columns: 1fr 1fr; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .tier { grid-template-columns: 1fr; gap: 15px; }
  .tier .buy { text-align: left; }
  .tier .buy .amt { display: inline; margin-right: 7px; }
  .tier .buy .per { display: inline; }
  .tier .buy .row { margin-top: 13px; }
  .tier .buy .fill, .tier .buy .out { width: auto; margin-top: 12px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .hero h1 { font-size: 36px; letter-spacing: -.03em; }
  .sec h2 { font-size: 26px; }
  .pagetop h1 { font-size: 30px; }
  .catalog thead { display: none; }
  .catalog, .catalog tbody, .catalog tr, .catalog td { display: block; }
  .catalog tr { padding: 18px 0; border-bottom: 1px solid var(--border); }
  .catalog td { border: 0; padding: 3px 0; }
  .catalog td:last-child { text-align: left; }
  .catalog .state, .catalog .price { display: inline-block; margin-right: 14px; }
  .hero .stand, .sec .lede, .pagetop .stand { font-size: 16px; }
  .spec > div { grid-template-columns: 1fr; gap: 7px; }
  .spec .lab { padding-top: 0; }
  .index a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  /* Stacked, the tag is a whole line of prose. Keeping it nowrap here pushes
     the grid track wider than a 320px phone. */
  .index .tag { text-align: left; white-space: normal; }
  .plans { font-size: 14px; }
  .plans th, .plans td { padding-right: 10px; }
  .index .tag b { white-space: nowrap; }
  .print { grid-template-columns: 1fr; gap: 24px; }
  .foot .cols { grid-template-columns: 1fr; gap: 26px; }
  .strip { grid-template-columns: 1fr; }
}

/* Under 760 the four links stop fitting next to the wordmark, so they move
   into a panel that drops out of the header. Same hairline, same surface, it
   reads as the header getting taller rather than a new piece of furniture. */

@media (max-width: 760px) {
  .menu { display: grid; }

  .top .in > nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .top[data-nav="open"] .in > nav { display: flex; }

  .top nav a {
    padding: 13px 24px;
    font-size: 15.5px;
    color: var(--text);
    border-bottom: 0;
    border-left: 2px solid transparent;
  }

  .top nav a:hover { background: var(--hover); border-bottom-color: transparent; }
  .top nav a.here { border-left-color: var(--accent); border-bottom-color: transparent; }
}

/* Below the 620 block further up, on purpose. These override the 760 rules
   above, so they have to come after them. */

@media (max-width: 620px) {
  .top .in { gap: 14px; }
  .top nav a { padding-left: 20px; padding-right: 20px; }
  .acts { gap: 9px; }
  .acts .fill.sm { padding: 8px 12px; font-size: 12.5px; }
}