@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #14213D;
  --ink-soft: #3B4664;
  --paper: #FAF8F4;
  --paper-alt: #F1ECE2;
  --line: #DDD5C7;
  --gold: #B08D3F;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, .brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Long German compounds ("Widerrufsbelehrung") must not push the page wider
     than the screen. This only takes effect when a word genuinely won't fit. */
  overflow-wrap: break-word;
}

a { color: inherit; }

/* Headings follow one system instead of per-page inline sizes: a section
   heading is 22px, the closing call to action is 24px, and the gap underneath
   is set by what comes next. The gap is put on the following element rather
   than under the heading, so it can't be swallowed by margin collapsing. */
section .wrap > h2 {
  font-size: 22px;
  margin: 0;
}

section .wrap > h2 + * { margin-top: 8px; }          /* a paragraph follows */
section .wrap > h2 + blockquote { margin-top: 16px; }
section .wrap > h2 + ul,
section .wrap > h2 + ol,
section .wrap > h2 + .pillars,
section .wrap > h2 + .faq,
section .wrap > h2 + .check-group,
section .wrap > h2 + .stats { margin-top: 24px; }

section .wrap.cta > h2 { font-size: 24px; }
section .wrap.cta > h2 + * { margin-top: 12px; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
}

header.site {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.brand {
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
}

.brand span {
  color: var(--gold);
}

.tagline {
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* Flex + gap rather than margins: the row keeps its rhythm whatever the
   labels are, so the longer German nav lines up with the English one. */
nav.site {
  display: flex;
  align-items: center;
  gap: 24px;
}

nav.site a {
  text-decoration: none;
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}

nav.site a:hover { color: var(--ink); }

nav.site a.lang {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  opacity: 0.75;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

nav.site a.lang:hover { opacity: 1; color: var(--ink); }

/* Below this width brand + nav no longer fit on one line, so they stack:
   brand on top, nav underneath, language toggle flush right. */
@media (max-width: 620px) {
  header.site { padding: 20px 0; }

  header.site .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  nav.site {
    width: 100%;
    gap: 20px;
  }

  nav.site a.lang {
    margin-left: auto;
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 400px) {
  .wrap { padding: 0 20px; }
  nav.site { gap: 16px; }
  nav.site a { font-size: 14px; }
  .hero h1 { font-size: 28px; }
  .hero h1.page-title { font-size: 24px; }
}

.hero {
  padding: 72px 0 56px;
}

/* A hero without a cover image gets the same bottom gap on every page,
   rather than 24px here and 32px there. */
.hero:not(.split) {
  padding-bottom: 32px;
}

/* Bold disclosure line sitting above a call to action (the German pages use
   it to say the guide itself is English-only). */
.notice {
  font-weight: 600;
  margin: 0 0 16px;
}

.hero h1 {
  font-size: 42px;
  line-height: 1.15;
  margin: 0 0 18px;
}

/* Legal-page headings: smaller than a marketing h1, and able to shrink on
   phones so long compounds still fit on one line. */
.hero h1.page-title {
  font-size: 32px;
}

.hero p.lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 60ch;
}

.hero.split .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

.hero.split .hero-copy > *:first-child { margin-top: 0; }

.cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.28),
              0 18px 40px -16px rgba(20, 33, 61, 0.45);
}

/* Author photograph in the About hero. Not a book, so no book shadow. */
.portrait-figure { margin: 0; }

.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* Pages from the guide, shown on the sales page. */
.inside-figure {
  margin: 24px 0 0;
}

.inside-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.cover-figure {
  margin: 0;
}

.cover-figure figcaption {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 14px;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper) !important;
  padding: 14px 28px;
  /* Transparent border, so a solid-bordered .btn.secondary next to it is
     exactly the same height rather than 2px taller. */
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 8px;
  text-align: center;
}

/* Two buttons side by side: equal width, and they drop onto separate lines
   cleanly instead of keeping a stray left margin when they wrap. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.btn-row .btn {
  /* basis 0 so the two share the row exactly evenly rather than in
     proportion to their label lengths; min-width keeps them from
     squeezing the text instead of wrapping onto separate lines. */
  flex: 1 1 0;
  min-width: max-content;
  margin-top: 0;
}

/* A button that stands on its own takes its width from the layout, not from
   the length of its label. That matches the pair on the guide page, and it
   means the English and German versions of a page are the same size — nothing
   moves when the language is switched.

   --btn-w is the width of the hero text column at the 760px page maximum
   (760 - 56 padding - 52 gap, split 1.4/1), so a centred button and a hero
   button come out identical. */
:root { --btn-w: 380px; }

.hero-copy > .btn {
  display: block;
  width: 100%;
}

.wrap.cta .btn {
  display: block;
  width: 100%;
  max-width: var(--btn-w);
  margin-left: auto;
  margin-right: auto;
}

.btn:hover { background: var(--ink-soft); }

.btn.secondary {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid var(--ink);
}

.btn.secondary:hover { background: var(--paper-alt); }

.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[aria-disabled="true"]:hover { background: var(--ink); }

:where(a, input, button):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.consent {
  max-width: 48ch;
  /* 16px + the button's own 8px margin-top = 24px, matching the gap below it. */
  margin: 0 auto 16px;
  text-align: left;
}

.consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

.consent input {
  /* Drop the browser's default 4px/3px side margins so the gap to the text is
     the flex gap and nothing else, and centre the box on the first text line
     rather than hanging it off the top. */
  margin: 5px 0 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}

.price-tag {
  display: inline-block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}

section {
  padding: 48px 0;
}

section.alt {
  background: var(--paper-alt);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}

.pillar h3 {
  font-size: 17px;
  margin: 0 0 8px;
}

.pillar p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

.pillar .num {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--gold);
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

section p a:not(.btn) {
  color: var(--ink);
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

/* A short call-to-action link at the end of a sentence moves to the next line
   as one piece, instead of breaking across it. */
.inline-cta {
  white-space: nowrap;
}

.name-head {
  margin: 34px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}

.name-note {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

.name-note em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: normal;
  color: var(--ink);
}

blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding-left: 22px;
  margin: 0;
}

.stats {
  display: flex;
  gap: 40px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.stat .n {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  display: block;
}

.stat .l {
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.split-head {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 36px 0 0;
}

.split-head + .stats {
  margin-top: 14px;
}

.contents-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contents-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.contents-list li:last-child { border-bottom: none; }

.contents-list .tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}

.contents-list h3 {
  margin: 0 0 6px;
  font-size: 19px;
}

.contents-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* Year photographs in the About timeline. The aspect-ratio box reserves the
   space before the file loads, so the page does not jump while scrolling. */
.contents-list figure {
  margin: 16px 0 0;
}

.contents-list figure img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-alt);
}

.contents-list figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Narrow screens: even 2:1 gets thin, so open it up to the full frame. */
@media (max-width: 600px) {
  .contents-list figure img { aspect-ratio: 3 / 2; }
}

.faq h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.faq div {
  margin-bottom: 22px;
}

.faq p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.note {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 18px;
}

/* Free checklist page */
.check-group {
  margin: 0 0 34px;
}

.check-group:last-child { margin-bottom: 0; }

.check-group h3 {
  font-size: 17px;
  margin: 0 0 14px;
}

ul.check {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.check li {
  position: relative;
  padding-left: 34px;
  margin: 0 0 14px;
  color: var(--ink-soft);
}

ul.check li:last-child { margin-bottom: 0; }

ul.check li::before {
  content: "";
  position: absolute;
  left: 0;
  /* centres the 18px box on a 17px/1.65 line box */
  top: 5px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  background: #fff;
}

.check-lead {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* The legal page you are already on: same position and label, but not a link. */
footer.site [aria-current="page"] {
  opacity: 0.6;
}

/* Social row, under the legal links and in the same fine print. Small
   monochrome icons keep it scannable without shouting. TikTok is the only
   live link; Instagram and YouTube are shown dimmed with a "soon" tag until
   those channels exist. */
.footer-social {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  text-decoration: none;
}

a.social-link:hover { color: var(--ink); }

.social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

.social-link.soon {
  opacity: 0.55;
}

.social-link .tag-soon {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 760px) {
  .hero.split .wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero.split .cover-figure,
  .hero.split .portrait-figure {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* The checklist tells people to print it, so make the printout usable:
   no navigation, no footer, no calls to action, and no split items. */
@media print {
  header.site,
  footer.site,
  .no-print { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  .wrap { max-width: none; padding: 0; }

  section { padding: 10px 0; }
  section.alt { background: transparent; }

  .hero { padding: 0 0 10px; }
  .hero h1 { font-size: 20pt; }
  .check-group h3 { font-size: 12pt; }

  ul.check li,
  .check-group { break-inside: avoid; page-break-inside: avoid; }

  ul.check li::before { border-color: #000; }

  a { text-decoration: none; color: #000; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .hero h1.page-title { font-size: 28px; }
  .pillars { grid-template-columns: 1fr; }
  .stats { gap: 24px; }
}