/* =========================================================================
   betterflai — interior pages
   One stylesheet for every page that is not the homepage: method,
   comparison, pricing, blog index, article, legal. Adding a page should
   need markup, never new CSS.
   ========================================================================= */

/* ------------------------------------------------------------- page head */

/* Same reason as the homepage hero: the bloom has to reach up behind the
   transparent header, or there is a hard line under the navigation. */
.page-head {
  position: relative;
  overflow: clip;
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + clamp(3.5rem, 9vh, 6rem)) clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--border);
}
.page-head .shell { position: relative; z-index: 1; }
.page-head h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.036em;
  max-width: 20ch;
}
.page-head .lede { margin-top: 1.25rem; max-width: 54ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }

/* Breadcrumbs, doubling as the structured-data trail. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-subtle);
  margin-bottom: 1.5rem;
}
.crumbs a { text-decoration: none; color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs svg { width: 12px; height: 12px; opacity: 0.6; }

/* ------------------------------------------------------------- long read */

.read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.read__body { max-width: 68ch; }
.read__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  margin-top: 3rem;
  margin-bottom: 1rem;
  scroll-margin-top: 6rem;
}
.read__body h2:first-child { margin-top: 0; }
.read__body h3 {
  font-size: 1.125rem;
  letter-spacing: -0.022em;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}
.read__body p { margin-bottom: 1.1em; line-height: 1.68; }
.read__body p:last-child { margin-bottom: 0; }
.read__body ul { margin: 0 0 1.4em; }
.read__body ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55em;
  line-height: 1.62;
}
.read__body ul li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-peach);
}
.read__body ol { margin: 0 0 1.4em; counter-reset: step; }
.read__body ol li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.8em;
  line-height: 1.62;
  counter-increment: step;
}
.read__body ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.read__body blockquote {
  margin: 1.75em 0;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.read__body blockquote p:last-child { margin-bottom: 0; }
.read__body figure { margin: 2em 0; }
.read__body figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-subtle); }
.read__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}

.read__body pre {
  margin: 0 0 1.6em;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: pre;
}
.read__body pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.read__body > pre { max-width: none; }
.read__body .cmp-wrap { margin-bottom: 1.6em; }

/* Aside rail: table of contents, facts, whatever a page needs. */
.rail { position: sticky; top: 6rem; }
.rail h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: 0.85rem;
}
.rail ul li { margin-bottom: 0.5rem; }
.rail a {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 0.9062rem;
  line-height: 1.4;
  display: block;
  transition: color 0.18s var(--ease-soft);
}
.rail a:hover { color: var(--ink); }
.rail__note {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: var(--brand-blue-soft);
  border-radius: var(--radius-card);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .read { grid-template-columns: 1fr; }
  .rail { position: static; order: -1; }
  .rail__note { margin-top: 1rem; }
}

/* ------------------------------------------------------------ comparison */

.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.cmp th, .cmp td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cmp thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
/* Vendor columns get a real lockup instead of a tracked-out label: at 11px
   uppercase a favicon reads as a smudge. */
.vendor {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}
.vendor img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.vendor img[data-mark] { border-radius: 0; box-shadow: none; background: none; }
.cmp thead .is-us .vendor { color: var(--accent); }

.cmp tbody th { font-weight: 500; color: var(--ink); width: 34%; }
.cmp td { color: var(--ink-muted); }
.cmp .is-us { background: var(--brand-blue-soft); }
.cmp thead .is-us { color: var(--accent); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------- posts
   A front page, not a card grid. One face, one ink, hairline column rules:
   the play is all in scale, case and tracking. Nothing here is a costume —
   no fake edition numbers, no rag-right serif pastiche.
   -------------------------------------------------------------------- */

.dateline {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.dateline .sep { color: var(--border-strong); }

.paper__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 0;
  /* The heavy rule the masthead used to carry now opens the front page. */
  border-top: 2px solid var(--ink);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.paper__col {
  border-left: 1px solid var(--border);
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  margin-left: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
}

.story { display: block; text-decoration: none; }
.story h2 { margin-top: 0.85rem; }
.story h2 a { text-decoration: none; }
.story:hover h2 a,
.story h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.11em; }

.story--lead { padding-right: clamp(0rem, 2vw, 2rem); }
.story--lead h2 {
  font-size: clamp(2rem, 4.4vw, 3.45rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  max-width: 18ch;
}
.story--lead .standfirst {
  margin-top: 1.1rem;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
}

.story--brief { padding-block: clamp(1.25rem, 2.5vw, 1.75rem); }
.story--brief:first-child { padding-top: 0; }
.story--brief + .story--brief { border-top: 1px solid var(--border); }
.story--brief h2 {
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: 22ch;
}
.story--brief p:not(.dateline) {
  margin-top: 0.6rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.story__more {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 500;
}
.story__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.story:hover .story__more svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .paper__grid { grid-template-columns: 1fr; }
  .paper__col {
    border-left: none;
    border-top: 2px solid var(--ink);
    padding-left: 0;
    margin-left: 0;
    margin-top: 2rem;
    padding-top: 2rem;
  }
  .story--lead { padding-right: 0; }
}

/* ------------------------------------------------------------- article
   One column, one measure, and enough air that the type can be read the
   way it was set. The only ornament is a drop cap.
   -------------------------------------------------------------------- */

/* Left-aligned, not centred: the header above it starts at the shell's left
   edge like every other page, and a centred body under a left-aligned head
   reads as two different layouts stacked. */
.article { max-width: 44rem; }

/* The article's title and standfirst live in the shared page header, so a
   post opens exactly like every other page on the site. */
.page-head .dateline { margin-bottom: 1.1rem; }
.page-head .article__standfirst { max-width: 46ch; }
.article__standfirst {
  margin-top: 1.25rem;
  font-style: italic;
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 40ch;
}
.article__body { font-size: 1.125rem; line-height: 1.72; }
.article__body > p { margin-bottom: 1.15em; }
.article__body > p:last-child { margin-bottom: 0; }

/* The one flourish, and only where it can land on an actual letter:
   ::first-letter swallows leading punctuation, so a paragraph opening on a
   quotation mark would get a giant curly quote. The generator decides. */
.article__body[data-dropcap] > h2:first-child + p::first-letter {
  float: left;
  font-size: 3.65em;
  line-height: 0.82;
  font-weight: 600;
  letter-spacing: -0.04em;
  padding-right: 0.08em;
  padding-top: 0.04em;
}

.article__body > h2:first-child { margin-top: 0; }
.article__body h2 {
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  scroll-margin-top: 6rem;
  max-width: 24ch;
}
.article__body h3 { font-size: 1.125rem; letter-spacing: -0.022em; margin-top: 2rem; margin-bottom: 0.5rem; }

.article__body ul, .article__body ol { margin: 0 0 1.4em; }
.article__body ul li { position: relative; padding-left: 1.35rem; margin-bottom: 0.5em; }
.article__body ul li::before {
  content: '';
  position: absolute; left: 0.2rem; top: 0.78em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-peach);
}
.article__body ol { counter-reset: step; }
.article__body ol li { position: relative; padding-left: 2.1rem; margin-bottom: 0.7em; counter-increment: step; }
.article__body ol li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.24em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-muted); color: var(--ink-muted);
  font-size: 0.75rem; font-weight: 600;
  display: grid; place-items: center;
}

/* A pull quote, not a boxed callout. */
.article__body blockquote {
  margin: 2.25em 0;
  padding: 1.5rem 0;
  border-block: 1px solid var(--border);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: -0.024em;
  font-style: italic;
  color: var(--ink);
}
.article__body blockquote p { margin: 0; }

.article__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}

.article__foot {
  max-width: 44rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
}
.article__foot h4 {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 1.25rem;
}
.next-list { display: grid; gap: 1px; }
.next-list a {
  text-decoration: none;
  display: block;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.18s var(--ease-soft);
}
.next-list a:first-child { border-top: none; }
.next-list a:hover { color: var(--accent); }

/* ---------------------------------------------------------- legal pages */

.legal { max-width: 70ch; }
.legal > p:first-child { font-size: 1.0625rem; }
.legal h2 + p, .legal h3 + p { margin-top: 0; }
.legal h3 {
  font-size: 1rem;
  letter-spacing: -0.018em;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}
.legal ol { margin-bottom: 1.2em; counter-reset: clause; }
.legal ol li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.6em;
  color: var(--ink-muted);
  line-height: 1.62;
  counter-increment: clause;
}
.legal ol li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-subtle);
  font-size: 0.9375rem;
}
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.legal a:hover { text-decoration-color: var(--accent); }

/* Definition rows and the data tables in the privacy statement. */
.legal .table-wrap { overflow-x: auto; margin-bottom: 1.6em; }
.legal table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
  line-height: 1.5;
}
.legal thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
.legal tbody td:first-child { color: var(--ink); }
.legal .version {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* A long document needs a way in. */
.rail--toc ul { max-height: min(62vh, 640px); overflow-y: auto; padding-right: 0.5rem; }
.rail--toc a { font-size: 0.875rem; padding-block: 0.1rem; }
.legal h2 {
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  scroll-margin-top: 6rem;
  color: var(--ink);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 1em; line-height: 1.68; color: var(--ink-muted); }
.legal p strong { color: var(--ink); font-weight: 600; }
.legal ul { margin-bottom: 1.2em; }
.legal ul li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5em; color: var(--ink-muted); }
.legal ul li::before {
  content: '';
  position: absolute; left: 0.3rem; top: 0.72em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong);
}

/* --------------------------------------------------------------- close */

.page-cta {
  text-align: center;
  padding-block: clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--border);
}
.page-cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.35rem); letter-spacing: -0.03em; max-width: 20ch; margin-inline: auto; }
.page-cta p { margin-top: 1rem; color: var(--ink-muted); max-width: 44ch; margin-inline: auto; }
.page-cta .row { justify-content: center; margin-top: 1.75rem; }

/* =========================================================================
   WordPress
   In de statische site stond een brede tabel buiten .read, als los kind van
   .shell. Uit een editor komt alles als één stroom, dus de maatregel van
   68ch verhuist hier van de container naar de tekstelementen zelf. Daardoor
   kan een tabel of een brede afbeelding wél de volle kolom pakken, terwijl
   een alinea nog steeds op leesbreedte blijft.
   ========================================================================= */

.read__body { max-width: none; }
.read__body > * { max-width: 68ch; }
.read__body > .cmp-wrap,
.read__body > table,
.read__body > figure,
.read__body > .wp-block-table,
.read__body > .wp-block-image,
.read__body > .alignwide,
.read__body > .alignfull { max-width: none; }

/* De notitie in de rechterkolom komt uit een veld, niet uit de tekst. */
.rail__note:first-child { margin-top: 0; }

@media (max-width: 860px) {
  .read__body > * { max-width: none; }
}

/* Het antwoordblok boven de prijskaarten staat op leesbreedte, niet op de
   volle breedte van het raster — anders leest het als een banner in plaats
   van als een antwoord. */
.band--tight > .shell > .answer-box { max-width: 68ch; margin-bottom: 2.5rem; }

/* De notitie onder de prijskaarten, als de pagina verder geen lopende tekst
   heeft. Rustig en gecentreerd: het is een terzijde, geen tweede boodschap. */
.plans__note {
  max-width: 52ch;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}