/* Natchland. One structure, two themes.

   The palette is built from marks that were already ours: the amber from the
   old site and favicon, and the three product colours. Light is the default,
   dark follows the OS unless the toggle in the header says otherwise.

   No web fonts, no icon set, no third party CSS. */

:root {
  --ground: #FFFFFF;
  --tint: #F5F7F7;
  --panel: #FFFFFF;
  --edge: #DFE4E5;
  --edge2: #EDF0F0;
  --ink: #14191C;
  --body: #3E4750;
  --mute: #68727A;
  --amber: #D8A24A;
  --link: #16607F;
  --link2: #0F4257;
  --btn: #1D2B36;
  --btn2: #152029;
  --btntx: #FFFFFF;
  --focus: #16607F;
  --mc: #2F9BE0;
  --nn: #C026D3;
  --ws: #3FB27A;
  --shadow: 0 1px 2px rgba(16, 26, 34, .06), 0 8px 22px rgba(16, 26, 34, .06);
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1316;
    --tint: #151B1F;
    --panel: #141A1E;
    --edge: #283137;
    --edge2: #1E262B;
    --ink: #EDF0F1;
    --body: #B9C2C8;
    --mute: #8A959C;
    --link: #7FC0DC;
    --link2: #A7D6EB;
    --btn: #D8A24A;
    --btn2: #E8B45F;
    --btntx: #17120A;
    --focus: #7FC0DC;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .34);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0E1316;
  --tint: #151B1F;
  --panel: #141A1E;
  --edge: #283137;
  --edge2: #1E262B;
  --ink: #EDF0F1;
  --body: #B9C2C8;
  --mute: #8A959C;
  --link: #7FC0DC;
  --link2: #A7D6EB;
  --btn: #D8A24A;
  --btn2: #E8B45F;
  --btntx: #17120A;
  --focus: #7FC0DC;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

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

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

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

h1, h2, h3, h4 { color: var(--ink); margin: 0; }
p { margin: 0; }

.wr { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 10px 16px;
  border-radius: 7px;
  z-index: 40;
}

.skip:focus { left: 16px; }

/* Header */

.sitehead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
}

.top { border-bottom: 1px solid var(--edge); }

.top .wr { display: flex; align-items: center; gap: 34px; height: 68px; }

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.012em;
}

.mark:hover { text-decoration: none; color: var(--ink); }

.mark i { width: 12px; height: 12px; border-radius: 3px; background: var(--amber); display: block; }

.top nav { display: flex; gap: 26px; font-size: 15px; flex: 1; }

.top nav a { color: var(--body); }
.top nav a:hover { color: var(--ink); text-decoration: none; }
.top nav a.here { color: var(--ink); font-weight: 600; }

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

.themeswap {
  width: 38px;
  height: 38px;
  border: 1px solid var(--edge);
  background: transparent;
  border-radius: 7px;
  color: var(--body);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.themeswap:hover { color: var(--ink); border-color: var(--mute); background: var(--tint); }
.themeswap svg { display: block; }
.themeswap .moon { display: none; }
:root[data-theme="dark"] .themeswap .moon { display: block; }
:root[data-theme="dark"] .themeswap .sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themeswap .moon { display: block; }
  :root:not([data-theme="light"]) .themeswap .sun { display: none; }
}

.band { height: 3px; display: flex; }
.band i { flex: 1; display: block; }
.band i:nth-child(1) { background: var(--mc); }
.band i:nth-child(2) { background: var(--nn); }
.band i:nth-child(3) { background: var(--ws); }

/* Buttons */

.pbtn, .gbtn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 7px;
  border: 1px solid var(--btn);
  background: var(--btn);
  color: var(--btntx);
  line-height: 1.35;
  transition: background .12s, border-color .12s, color .12s;
}

.pbtn:hover { background: var(--btn2); border-color: var(--btn2); color: var(--btntx); text-decoration: none; }

.gbtn { background: transparent; color: var(--ink); border-color: var(--edge); }
.gbtn:hover { background: var(--tint); border-color: var(--mute); color: var(--ink); text-decoration: none; }

.pbtn.small, .gbtn.small { font-size: 14px; padding: 8px 15px; }

/* Hero */

.hero { padding: 62px 0 54px; }

.hero .wr { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }

.hero h1 {
  font-size: 39px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.022em;
  margin-bottom: 16px;
  max-width: 15ch;
}

.hero .stand { font-size: 18px; margin-bottom: 24px; max-width: 50ch; }

.hero .acts { display: flex; gap: 11px; flex-wrap: wrap; }

.said { font-size: 14.5px; color: var(--mute); margin-top: 18px; }
.said b { color: var(--ink); font-weight: 600; }

/* Screenshot panels */

.shot {
  border: 1px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.shot img { border-bottom: 1px solid var(--edge); width: 100%; }

.shot .under { font-size: 13.5px; color: var(--mute); padding: 10px 14px; background: var(--tint); }

.shot.crop { position: relative; }
.shot.crop .win { aspect-ratio: 21 / 9; overflow: hidden; border-bottom: 1px solid var(--edge); }
.shot.crop .win img { border-bottom: 0; }

/* Blocks */

.block { padding: 58px 0; border-top: 1px solid var(--edge2); }
.block.fill { background: var(--tint); border-top: 1px solid var(--edge); }
.block h2 { font-size: 27px; font-weight: 650; letter-spacing: -.018em; margin-bottom: 8px; }
.block .intro { font-size: 17px; max-width: 64ch; margin-bottom: 32px; }

/* Product cards */

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pcard {
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--panel);
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.pcard .tagmark { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.pcard .tagmark i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--pc);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
}

.pcard .tagmark span { font-size: 13px; color: var(--mute); }
.pcard h3 { font-size: 19px; font-weight: 650; margin-bottom: 6px; }
.pcard p { font-size: 15px; margin-bottom: 14px; }
.pcard ul { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14.5px; flex: 1; }
.pcard li { padding: 4px 0 4px 18px; position: relative; color: var(--body); }

.pcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 7px;
  height: 2px;
  background: var(--pc);
  border-radius: 1px;
}

.pcard .cost { font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 14px; }
.pcard .cost span { font-weight: 400; color: var(--mute); }

/* Product sections */

.psec { padding: 58px 0; border-top: 1px solid var(--edge2); scroll-margin-top: 80px; }
.psec.fill { background: var(--tint); border-top: 1px solid var(--edge); }

.phead { border-left: 3px solid var(--pc, var(--amber)); padding-left: 16px; margin-bottom: 26px; }
.phead h2 { font-size: 27px; font-weight: 650; letter-spacing: -.018em; margin-bottom: 6px; }
.phead p { font-size: 17px; max-width: 62ch; }

.pgrid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 44px; align-items: start; }

.side { display: grid; gap: 16px; }

.acts2 { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }

/* Fact tables */

.facts { width: 100%; border-collapse: collapse; font-size: 15px; }

.facts th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  width: 138px;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  border-top: 1px solid var(--edge2);
}

.facts td { padding: 11px 0; vertical-align: top; border-top: 1px solid var(--edge2); color: var(--body); }
.facts tr:first-child th, .facts tr:first-child td { border-top: 0; }
.facts b { color: var(--ink); font-weight: 600; }

/* Price tables */

.costs {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  border: 1px solid var(--edge);
  background: var(--panel);
  margin-top: 26px;
}

.costs th {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--tint);
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge);
}

.costs td { padding: 12px 16px; border-bottom: 1px solid var(--edge2); vertical-align: top; }
.costs tr:last-child td { border-bottom: 0; }
.costs td.nm, .costs td.amt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.costs .pbtn, .costs .gbtn { white-space: nowrap; }

/* Small print panel */

.aside {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  background: var(--panel);
  padding: 15px 18px;
  font-size: 15px;
  margin-top: 22px;
  max-width: 78ch;
}

.aside b { color: var(--ink); font-weight: 600; }

/* Four columns */

.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.four h4 { font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.four p { font-size: 15px; }

/* Feature list */

.feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.feats span {
  font-size: 14px;
  color: var(--body);
  border: 1px solid var(--edge);
  background: var(--panel);
  border-radius: 6px;
  padding: 5px 11px;
}

/* Call to action */

.call {
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--panel);
  padding: 30px 32px;
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}

.call h2 { font-size: 23px; margin-bottom: 6px; }
.call p { max-width: 56ch; font-size: 16px; }

/* Store page head */

.pagehead { padding: 52px 0 10px; }

.pagehead h1 {
  font-size: 35px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.022em;
  margin-bottom: 14px;
  max-width: 20ch;
}

.pagehead p { font-size: 18px; max-width: 66ch; }

.jump { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

.buyrow { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.buyrow .from { font-size: 15px; color: var(--mute); }
.buyrow .from b { color: var(--ink); font-weight: 600; font-size: 17px; }

/* Footer */

.foot { border-top: 1px solid var(--edge); background: var(--tint); padding: 44px 0 0; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.foot h4 { font-size: 15px; font-weight: 650; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; line-height: 2.05; }
.foot a { color: var(--body); }
.foot .about { font-size: 15px; max-width: 34ch; margin-top: 10px; }

.foot .end {
  border-top: 1px solid var(--edge);
  margin-top: 34px;
  padding: 18px 0 34px;
  font-size: 14px;
  color: var(--mute);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Small screens */

@media (max-width: 900px) {
  .hero .wr, .pgrid { grid-template-columns: 1fr; gap: 30px; }
  .three, .four, .foot .cols { grid-template-columns: 1fr 1fr; }
  .top nav { display: none; }
  .hero h1 { font-size: 32px; max-width: none; }
  .hero { padding: 44px 0 40px; }
  .block, .psec { padding: 44px 0; }
}

@media (max-width: 620px) {
  .three, .four, .foot .cols { grid-template-columns: 1fr; }
  .wr { padding: 0 20px; }
  .pagehead h1 { font-size: 29px; }
  /* Stack the price tables into readable blocks. The header row is dropped
     because every cell reads on its own once they are one per line. */
  .costs, .costs tbody, .costs tr, .costs td { display: block; width: 100%; }
  .costs tr:first-child { display: none; }
  .costs tr { border-bottom: 1px solid var(--edge); padding: 8px 0 12px; }
  .costs tr:last-child { border-bottom: 0; }
  .costs td { border-bottom: 0; padding: 4px 16px; }
  .costs td:empty { display: none; }
  .costs td.nm { padding-top: 10px; font-size: 17px; }
  .costs td.amt { padding-top: 8px; }
  .costs td:last-child { padding-top: 12px; }
}