/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
::selection { color: white; background: black; }
::-moz-selection { color: white; background: black; }

:root {
  --color-text: 0, 0, 0;
  --color-background: 255, 255, 255;
  --color-link: 0, 0, 0;
  --type-base: calc(1.6em + 0.5vw);
  --type-xxxx-small: 30%;
  --type-xxx-small: 55%;
  --type-xx-small: 65%;
  --type-x-small: 75%;
  --type-small: 85%;
  --type-medium: 100%;
  --type-large: 120%;
  --type-x-large: 160%;
  --type-xx-large: 200%;
  --type-xxx-large: 300%;
}

/* ─── BASE ──────────────────────────────────────────── */
html { font-size: 16px; }
@supports (display: grid) { html { font-size: 10px; } }

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: var(--type-base);
  color: rgb(var(--color-text));
  background: rgb(var(--color-background));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 1.5em 0 0 0;
  padding: 0;
  font-weight: bold;
  line-height: 1.2;
}

h1 { font-size: var(--type-xx-large); }
h2 { font-size: var(--type-x-large); }
h3 { font-size: var(--type-large); margin-bottom: -0.25em; }
h4 { font-size: var(--type-small); margin-top: 1.25em; }

p {
  margin: 1em 0 0 0;
  font-size: var(--type-medium);
  line-height: 1.5;
}

ul, ol {
  margin: 1em 0 0 1em;
  padding: 0;
  line-height: 1.5;
}
ol ul, ul ul { margin-top: 0; }

a { color: rgb(var(--color-link)); }
a:hover { color: rgb(var(--color-link)); }
a:visited { color: rgb(var(--color-link)); }

hr {
  height: 0;
  margin: 3em 0;
  border: 0;
  border-top: 0.1rem solid rgb(var(--color-text));
}

code {
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  background: rgba(var(--color-link), 0.075);
  font-size: var(--type-x-small);
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

img { max-width: 100%; border-radius: 1rem; }

table {
  margin: 1em 0 0 0;
  border-collapse: collapse;
  font-size: var(--type-small);
  width: 100%;
}
th, td {
  padding: 0.5em 1em;
  text-align: left;
  border: 0.1rem solid rgb(var(--color-text));
  border-width: 0 0 0.1rem 0;
}
th { font-weight: bold; }
tr:last-child td { border-bottom: 0; }

/* ─── PAGE GRID ─────────────────────────────────────── */
.page {
  width: 100%;
  margin: 0 auto;
  padding: 1.5em;
  display: grid;
  grid-template-areas: 'sidebar' 'content';
  grid-template-columns: auto;
}

/* ─── SIDEBAR ───────────────────────────────────────── */
.sidebar { grid-area: sidebar; }

.sidebar__inner {
  position: relative;
  top: 1.5em;
}

.sidebar__brand {
  margin: 0;
  font-size: var(--type-large);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.sidebar__tagline {
  margin: 0.25em 0 0 0;
  font-size: var(--type-xx-small);
  font-style: italic;
}

.sidebar__nav {
  margin: 1.5em 0 0 0;
  list-style: none;
}

.sidebar__link {
  display: block;
  margin: 0.5em 0 0 0;
  font-size: var(--type-small);
  font-style: italic;
  text-decoration: none;
}
.sidebar__link:hover { text-decoration: underline; }

.sidebar__next {
  margin: 2em 0 0 0;
  font-size: var(--type-small);
}
.sidebar__next a {
  text-decoration: none;
}
.sidebar__next a:hover { text-decoration: underline; }

/* Language switcher */
.sidebar__lang {
  margin: 2em 0 0 0;
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: flex-end;
}
.lang-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.lang-link:hover { opacity: 1; }
.lang-link--active {
  opacity: 1;
  border: 0.1rem solid rgb(var(--color-text));
  padding: 0.1em;
}
.flag {
  width: 1.5em;
  height: auto;
  display: block;
  border: 0.05rem solid rgba(var(--color-text), 0.2);
}

/* ─── CONTENT ───────────────────────────────────────── */
.content {
  grid-area: content;
  margin: 0;
  padding: 0;
}

/* ─── HERO ──────────────────────────────────────────── */
.hero {
  margin: 0;
  padding: 2em 0;
  border-bottom: 0.1rem solid rgb(var(--color-text));
}

.hero__inner h1 {
  margin: 0;
  font-size: var(--type-xxx-large);
  line-height: 1.15;
}

.hero__sub {
  margin: 0.75em 0 0 0;
  font-size: var(--type-large);
  line-height: 1.4;
}

.hero__usp {
  margin: 1.5em 0 0 0;
  padding: 0.75em 1em;
  border: 0.1rem solid rgb(var(--color-text));
  font-size: var(--type-medium);
  font-style: italic;
  background: rgba(var(--color-link), 0.03);
}

/* ─── SECTIONS ──────────────────────────────────────── */
.section {
  margin: 0;
  padding: 2em 0;
  border-bottom: 0.1rem solid rgb(var(--color-text));
}

.section__header {
  margin: 0;
}

.section__masthead {
  display: block;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-size: var(--type-xx-small);
}

.section__masthead + h2 { margin: 0; }

.section__intro {
  margin: 0.5em 0 0 0;
  font-style: italic;
  font-size: var(--type-medium);
}

.section__outro {
  margin: 2em 0 0 0;
  font-size: var(--type-small);
  font-style: italic;
}

.section__cta {
  margin: 2em 0 0 0;
}
.section__cta a {
  font-weight: bold;
  text-decoration: none;
}
.section__cta a:hover { text-decoration: underline; }

/* ─── TIER CARDS ────────────────────────────────────── */
.tier-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
  margin: 1em 0 0 0;
}

.tier-card {
  padding: 1.5em 1.5em 0.5em 1.5em;
  border: 0.1rem solid rgb(var(--color-text));
  break-inside: avoid;
}

.tier-card h3 {
  margin: 0;
}

.tier-card h3 a {
  text-decoration: none;
}
.tier-card h3 a:hover { text-decoration: underline; }

.tier-card__subtitle {
  margin: 0.25em 0 0 0;
  font-size: var(--type-small);
  font-style: italic;
}

.tier-card__price {
  margin: 0.5em 0 0 0;
  font-size: var(--type-large);
  font-weight: bold;
}

.tier-card__features {
  margin: 0.75em 0 0 0;
  font-size: var(--type-small);
}
.tier-card__features li {
  margin: 0.25em 0;
}

.tier-card__cta {
  margin: 1em 0 0 0;
  font-size: var(--type-small);
}
.tier-card__cta a {
  text-decoration: none;
  font-weight: bold;
}
.tier-card__cta a:hover { text-decoration: underline; }

/* ─── BUTTON ────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.75em;
  border: 0.2rem solid rgb(var(--color-link));
  background: rgb(var(--color-link));
  color: rgb(var(--color-background));
  border-radius: 1.25em;
  font-size: inherit;
  font-family: inherit;
  font-weight: bold;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
}
.button:hover,
.button:active,
.button:visited { color: rgb(var(--color-background)); }

/* ─── FOOTER ────────────────────────────────────────── */
.footer {
  margin: 3em 0 0 0;
  padding: 1em 0;
  border-top: 0.1rem solid rgb(var(--color-text));
}

.footer__copy {
  font-size: var(--type-small);
  font-weight: bold;
}

.footer__detail {
  margin: 0;
  font-size: var(--type-x-small);
  font-style: italic;
}

/* ─── RESPONSIVE ────────────────────────────────────── */
@media screen and (min-width: 50em) {
  :root { --type-base: calc(0.9em + 0.9vw); }

  .page {
    margin: 0;
    padding: 2em;
    grid-template-areas: 'sidebar content';
    grid-template-columns: 0.85fr 2.5fr;
  }

  .sidebar__inner {
    position: -webkit-sticky;
    position: sticky;
    top: 2em;
    text-align: right;
  }

  .sidebar__nav {
    margin-top: 2em;
  }

  .content {
    padding: 2.65em 6em 0 3.5em;
  }

  .hero__inner h1 {
    font-size: var(--type-xxx-large);
  }

  /* Tiers side-by-side on desktop */
  .tier-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 100em) {
  :root { --type-base: 2.75em; }
  .page { max-width: 250rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: 255, 255, 255;
    --color-background: 0, 0, 0;
    --color-link: 255, 255, 255;
  }
}