/* ============================================================
   BessWave — design tokens
   Extracted from the live besswave.com build. Every color, size
   and spacing value below is defined once here and referenced
   by name, so a change to the brand is a change to one line.
   ============================================================ */
:root {
  color-scheme: light;

  /* Brand */
  --bw-blue:        #1976D2;   /* primary */
  --bw-blue-hover:  #1565C0;
  --bw-blue-text:   #2D72D9;   /* pill and link text */
  --bw-blue-deep:   #0D47A1;   /* brand dark blue */
  --bw-green:       #0F9D58;   /* answer confirmation */

  /* Ink */
  --bw-ink:         #1A222B;   /* headings */
  --bw-ink-theme:   #000000;   /* Squarespace theme text (see notes) */
  --bw-body:        #3A4A5A;
  --bw-muted:       #6B7B8A;
  --bw-muted-soft:  #8C9BAB;

  /* Surfaces */
  --bw-white:       #FFFFFF;
  --bw-surface:     #F4F7FB;   /* question box, tag fill */
  --bw-surface-alt: #F8FAFD;   /* pill fill, icon well */
  --bw-page:        #DADDE3;   /* page ground and closing band */

  /* Lines */
  --bw-line:        #E5E9F0;
  --bw-line-blue:   #E4EDF7;
  --bw-line-blue-2: #DDE8F4;

  /* Type */
  --bw-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-display: 76px;                              /* hero h1 */
  --fs-section: clamp(28px, calc(16.38px + 2.52vw), 56px);  /* fluid section headings */
  --fs-lead:    calc(16.04px + 0.24vw);            /* fluid body and nav */
  --lh-section: 1.0992;

  /* Shadows */
  --shadow-blue:       0 15px 35px -5px rgba(25, 118, 210, 0.5);
  --shadow-blue-hover: 0 20px 40px -5px rgba(25, 118, 210, 0.6);
  --shadow-card:       0 25px 50px -12px rgba(26, 34, 43, 0.08);
  --shadow-tile:       0 10px 20px -10px rgba(26, 34, 43, 0.02);
  --shadow-tile-hover: 0 15px 30px -10px rgba(26, 34, 43, 0.08);

  /* Layout */
  --gutter: clamp(20px, 4vw, 58px);
  --col-narrow: 760px;   /* centered text column */
  --col-wide: 1100px;    /* cards and feature grid */

  /* Showcase carousel geometry. The gutter is the clear space on each
     side of the card, which is where the arrows sit. The pad is the
     track's own inside padding, there so the card's shadow is not
     clipped by the scroll container; it must stay smaller than the gap,
     or the next card starts showing through it. */
  --carousel-gutter: 100px;
  --carousel-gap: 30px;
  --carousel-pad: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bw-page);
  font-family: var(--bw-font);
  color: var(--bw-ink);
  /* Matches the theme's inherited line height, which the live build
     relies on for pills, tags, buttons and captions. */
  line-height: calc(1.5 * var(--fs-lead));
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bw-ink);
  color: var(--bw-white);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 2px solid var(--bw-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- shared wrappers ---------- */
.band { background: var(--bw-white); }
.band--closing { background: var(--bw-page); }

.wrap {
  max-width: calc(var(--col-wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--full {
  max-width: none;
  padding-inline: var(--gutter);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  background: var(--bw-white);
  position: relative;
  z-index: 20;
}
.header-inner {
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 46px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-nav a {
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--bw-ink-theme);
  text-decoration: none;
  padding: 4px 6px;
}
.site-nav a:hover { color: var(--bw-blue); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--bw-ink);
}
.nav-toggle svg { display: block; }

/* ============================================================
   Buttons and pills
   ============================================================ */
.pill {
  display: inline-block;
  background: var(--bw-surface-alt);
  color: var(--bw-blue-text);
  border: 1px solid var(--bw-line-blue);
  border-radius: 50px;
  padding: 8px 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}
.pill--showcase { color: var(--bw-blue); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bw-font);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.btn--primary {
  background: var(--bw-blue);
  color: var(--bw-white);
  border: 2px solid var(--bw-blue);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
  background: var(--bw-blue-hover);
  border-color: var(--bw-blue-hover);
  box-shadow: var(--shadow-blue-hover);
  transform: translateY(-2px);
}
/* The closing button is taller than the hero button on the live site. */
.btn--tall { padding: 19.4px 40px; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn, .feature { transition: none; }
  .btn--primary:hover, .feature:hover { transform: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { text-align: center; }
.hero-inner {
  padding: 20px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2.5px;
  color: var(--bw-ink);
  margin: 30px 0 0;
  text-wrap: balance;
}
.hero .accent { color: var(--bw-blue); }
.hero-sub {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bw-muted);
  max-width: 720px;
  margin: 25px 0 40px;
}
.hero .microcopy {
  font-size: 14px;
  color: var(--bw-muted-soft);
  margin: 20px 0 0;
}
.hero-btns { display: flex; justify-content: center; width: 100%; }

/* ============================================================
   Showcase — two workspace cards
   ============================================================ */
.showcase { text-align: center; }
/* 1130 - 30 of padding = the 1100px card row on the live site. */
.showcase-inner {
  max-width: 1130px;
  margin-inline: auto;
  padding: 60px 15px;
}
.showcase-sub {
  font-size: 18px;
  color: var(--bw-muted);
  line-height: 1.6;
  font-weight: 400;
  max-width: 750px;
  margin: 25px auto 34px;
}
.showcase-note {
  font-size: 15px;
  color: var(--bw-muted-soft);
  margin: 12px 0 0;
}

/* ------------------------------------------------------------
   Carousel. One card at a time. The track is a scroll-snap row
   narrowed by a gutter on each side, and it clips at its own edge,
   so the cards on either side are off screen rather than half
   visible. Arrows and dots are added only once the script has run,
   so with no JavaScript the row is still a readable, swipeable
   list of all six examples.
   ------------------------------------------------------------ */
.showcase-carousel { position: relative; }

.showcase-track {
  display: flex;
  gap: var(--carousel-gap);
  text-align: left;
  max-width: calc(100% - (2 * var(--carousel-gutter)));
  margin-inline: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--carousel-pad);
  /* room for the card shadow, which the scroll container would clip */
  padding-block: 16px 44px;
  scrollbar-width: none;
}
.showcase-track::-webkit-scrollbar { display: none; }

/* The card fills the track's content box. A percentage flex-basis
   resolves against that box, so 100% is exactly one card per view. The
   next card begins one gap later, and the gap is wider than the track's
   padding, so no part of it shows. */
.showcase-track > .card {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.showcase-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bw-line);
  background: var(--bw-white);
  box-shadow: var(--shadow-tile);
  color: var(--bw-muted);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.showcase-inner.is-enhanced .showcase-arrow { display: flex; }
.showcase-arrow svg { width: 20px; height: 20px; }
.showcase-arrow:hover { color: var(--bw-blue); box-shadow: var(--shadow-tile-hover); }
.showcase-arrow:disabled { opacity: 0.35; cursor: default; }
.showcase-arrow:disabled:hover { color: var(--bw-muted); box-shadow: var(--shadow-tile); }
/* centered in the gutter the track leaves free */
.showcase-arrow--prev { left: calc((var(--carousel-gutter) - 44px) / 2); }
.showcase-arrow--next { right: calc((var(--carousel-gutter) - 44px) / 2); }

.showcase-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.showcase-inner.is-enhanced .showcase-dots { display: flex; }
.showcase-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: var(--bw-line-blue-2);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.showcase-dot:hover { background: var(--bw-muted-soft); }
.showcase-dot.is-active { width: 24px; background: var(--bw-blue); }

.showcase-trace {
  font-size: 13px;
  color: var(--bw-muted-soft);
  margin: 18px 0 0;
}

.card {
  background: var(--bw-white);
  border: 1px solid var(--bw-line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-head {
  border-bottom: 1px solid var(--bw-line);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
.dots { display: flex; gap: 8px; }
.dots span { width: 11px; height: 11px; border-radius: 50%; }
.dots span:nth-child(1) { background: #FF5F56; }
.dots span:nth-child(2) { background: #FFBD2E; }
.dots span:nth-child(3) { background: #27C93F; }

.card-head-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 500;
  color: var(--bw-muted);
}
.workspace-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--bw-blue);
  background: var(--bw-surface);
  padding: 6px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.card-body { padding: 30px; flex-grow: 1; }
.question {
  background: var(--bw-surface);
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 25px;
}
.question-label,
.answer-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bw-muted-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.question-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--bw-ink);
  line-height: 1.5;
  margin: 0;
}
.answer-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bw-green);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}
.answer-label svg { width: 18px; height: 18px; flex: none; }
.answer-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--bw-ink);
  line-height: 1.6;
  margin: 0 0 25px;
}
.answer-text b {
  color: var(--bw-blue);
  font-weight: 600;
}
.card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.source-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--bw-blue);
  background: var(--bw-white);
  border: 1px solid var(--bw-line-blue-2);
  padding: 6px 14px;
  border-radius: 50px;
}
.trace {
  font-size: 13px;
  color: var(--bw-muted-soft);
  margin-top: 5px;
}

/* ============================================================
   Centered copy blocks (Squarespace theme type)
   ============================================================ */
.copy { text-align: center; }
/* At weight 800 the section heading needs 763px where the 760px text column
   gave it 760, so it broke to two lines. The heading gets a wider column;
   the paragraph is pinned back to --col-narrow so its measure is unchanged. */
.copy-inner {
  max-width: calc(var(--col-narrow) + 120px);
  margin-inline: auto;
  padding: 1px 20px 2px;
}
.copy-inner .lead {
  max-width: var(--col-narrow);
  margin: 0 auto;
}
/* Unified 2026-09-08: the Squarespace theme rendered section headings at
   weight 500 in pure black while the hero and cards used weight 800 in
   --bw-ink. One treatment now, matching the hero. Letter-spacing moved
   from -0.05em to -0.03em because -0.05em is too tight at weight 800;
   -0.03em matches the hero (-2.5px at 76px) and .page-title (-1.5px at
   56px) proportionally. */
.section-title {
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: var(--lh-section);
  letter-spacing: -0.03em;
  color: var(--bw-ink);
  margin: 0 0 21.5px;
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--bw-ink-theme);
  margin: 0;
}

/* ============================================================
   Feature grid
   ============================================================ */
/* 1130 - 30 of padding = 1100px, the same content width as the card row
   above it. The live Squarespace build gave this grid 1070px; aligned
   2026-09-08. */
.features-inner {
  max-width: 1130px;
  margin-inline: auto;
  padding: 42px 15px 41px;
}
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.feature {
  background: var(--bw-white);
  border: 1.5px solid var(--bw-line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-tile);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-tile-hover);
  border-color: var(--bw-line-blue-2);
}
.feature-icon {
  width: 40px;
  height: 40px;
  background: var(--bw-surface-alt);
  border: 1px solid var(--bw-line-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--bw-ink);
  letter-spacing: -0.3px;
  margin: 0 0 12px;
}
.feature p {
  font-size: 15px;
  font-weight: 400;
  color: var(--bw-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Closing band and footer
   ============================================================ */
.closing { text-align: center; }
.closing-inner {
  max-width: calc(var(--col-narrow) + 40px);
  margin-inline: auto;
  padding: 47px 20px 87px;
}
.closing .section-title,
.closing .heading-3 { margin-bottom: 43px; }

.site-footer {
  background: var(--bw-white);
  padding: 2px 0;
  text-align: center;
}
.site-footer p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.0116em;
  color: var(--bw-ink-theme);
  margin: 0;
}
.site-footer a { text-decoration: underline; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .header-inner { height: 110px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bw-white);
    border-top: 1px solid var(--bw-line);
    box-shadow: 0 20px 30px -20px rgba(26, 34, 43, 0.25);
    padding: 8px var(--gutter) 20px;
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--bw-line); }
  .site-nav a:last-child { border-bottom: 0; }

  :root { --carousel-gutter: 0px; }
  .showcase-inner.is-enhanced .showcase-arrow { display: none; }
  .card-head-title { display: none; }
  .question-text, .answer-text { font-size: 16px; }
  .showcase-inner { padding: 40px 10px; }
}

@media (max-width: 767px) {
  :root { --fs-display: 44px; --carousel-pad: 10px; }
  .hero h1 { letter-spacing: -1.5px; }
  .hero-sub {
    font-size: 16px;
    padding: 0 10px;
    margin: 20px 0 30px;
  }
  .hero-btns { max-width: 320px; margin: 0 auto; }
  .btn { width: 100%; padding: 16px 20px; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feature { padding: 24px; }
  .closing-inner { padding: 40px 20px 56px; }
  .closing .section-title,
  .closing .heading-3 { margin-bottom: 28px; }
}

/* ============================================================
   Heading scale beyond the section title
   Measured off the live Squarespace theme at two viewport widths
   each, so these track the original as the window resizes.
   ============================================================ */
:root {
  --fs-h3:         calc(16.29px + 1.92vw);
  --fs-h4:         calc(16.18px + 1.20vw);
  --fs-h5:         calc(16.10px + 0.48vw);
  --fs-page-title: 56px;   /* custom, non-fluid: Pricing and About */
}

.page-title {
  font-size: var(--fs-page-title);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--bw-ink);
  margin: 0 0 15px;
  text-wrap: balance;
}
.heading-3, .heading-4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bw-ink);
  text-wrap: balance;
  margin: 0;
}
.heading-3 { font-size: var(--fs-h3); line-height: 1.1232; }
.heading-4 { font-size: var(--fs-h4); line-height: 1.152; }

/* The page-label pill is a touch larger than the hero pill on the
   live site. Reproduced rather than unified; see the notes. */
.pill--page { font-size: 12px; letter-spacing: 1.5px; }

/* ============================================================
   Shared page furniture
   ============================================================ */
.page-head { text-align: center; }
.page-head-inner {
  max-width: 1000px;
  margin-inline: auto;
  padding: 60px 20px 0;
}
.page-head .lead-muted {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bw-muted);
  max-width: 751px;
  margin: 25px auto 0;
}

.prose {
  max-width: 791px;
  margin-inline: auto;
  padding: 40px 20px 20px;
  text-align: left;
}
.prose h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--bw-ink);
  letter-spacing: -0.3px;
  margin: 44px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bw-body);
  margin: 0 0 18px;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-inner {
  max-width: 930px;
  margin-inline: auto;
  padding: 60px 15px;
  text-align: center;
}
.pricing-sub {
  font-size: 20px;
  font-weight: 400;
  color: var(--bw-muted);
  margin: 0 0 40px;
}

.billing-toggle {
  display: inline-flex;
  background: var(--bw-surface-alt);
  border: 1px solid var(--bw-line-blue);
  border-radius: 50px;
  padding: 5px;
  margin-bottom: 45px;
}
.billing-toggle button {
  background: transparent;
  border: 0;
  padding: 10px 24px;
  border-radius: 50px;
  font-family: var(--bw-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--bw-muted);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-toggle button[aria-pressed="true"] {
  background: var(--bw-white);
  color: var(--bw-blue);
  box-shadow: 0 4px 15px rgba(26, 34, 43, 0.05);
}
.badge {
  background: var(--bw-blue);
  color: var(--bw-white);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
}

.price-card {
  background: #F9FBFE;
  border: 1px solid #EAF0F6;
  border-radius: 16px;
  padding: 45px 40px;
  max-width: 480px;
  margin-inline: auto;
  box-shadow: 0 20px 40px -10px rgba(26, 34, 43, 0.05);
}
.price-brand {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--bw-blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
}
.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--bw-ink);
  margin-bottom: 15px;
  font-variant-numeric: tabular-nums;
}
.price-currency { font-size: 32px; font-weight: 700; margin-right: 2px; }
.price-number { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.price-frequency { font-size: 20px; font-weight: 400; color: var(--bw-muted); margin-left: 8px; }

.billing-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bw-muted);
  margin: 0 0 5px;
}
.billing-desc strong { color: var(--bw-blue); font-weight: 600; }
.billing-min {
  font-size: 15px;
  color: var(--bw-muted);
  margin: 0 0 30px;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 35px;
  text-align: left;
  display: grid;
  gap: 18px;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bw-ink);
}
.price-features svg { flex: none; width: 18px; height: 18px; margin-top: 3px; }

.pricing-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bw-muted-soft);
  max-width: 600px;
  margin: 50px auto 0;
}

/* ============================================================
   Founder
   ============================================================ */
.founder-inner {
  max-width: 940px;
  margin-inline: auto;
  padding: 20px 20px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
/* Every selector below is `.founder-bio > p` plus one class, so the
   role and the name outrank the body rule instead of fighting it.
   The previous version had `.founder-inner p:not(.founder-name)`
   silently overriding .founder-role down to 16px. */
.founder-bio > p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--bw-body);
  margin: 0 0 18px;
}
.founder-bio > p:last-child { margin-bottom: 0; }
.founder-bio > p.founder-role {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bw-ink);
  letter-spacing: -0.4px;
  margin: 0;
}
.founder-bio > p.founder-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--bw-ink-theme);
  margin: 4px 0 20px;
}
.founder-photo {
  width: 100%;
  /* The width/height attributes on <img> are presentational hints that map
     to the width and height properties. Author CSS overrode width but not
     height, so aspect-ratio was ignored and the photo rendered 348x1000.
     height:auto hands control back to aspect-ratio. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--bw-line);
  box-shadow: var(--shadow-tile);
}

/* ============================================================
   Contact form
   ============================================================ */
.form-inner {
  max-width: 680px;
  margin-inline: auto;
  padding: 40px 20px 70px;
}
.contact-form { display: grid; gap: 20px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bw-ink);
  letter-spacing: 0.02em;
}
.field .req { color: var(--bw-muted-soft); font-weight: 400; }
.field input,
.field textarea {
  font-family: var(--bw-font);
  font-size: 16px;
  color: var(--bw-ink);
  background: var(--bw-white);
  border: 1px solid var(--bw-line);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bw-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bw-muted-soft);
  margin: 0;
}
.form-status {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bw-ink);
  background: var(--bw-surface);
  border: 1px solid var(--bw-line-blue-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
}

/* ============================================================
   Library
   ============================================================ */
.library-inner {
  max-width: 791px;
  margin-inline: auto;
  padding: 40px 20px 20px;
}
.library-intro {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--bw-ink-theme);
  margin: 14px 0 0;
}
.papers { display: grid; gap: 24px; margin-top: 36px; }
.paper {
  background: var(--bw-white);
  border: 1.5px solid var(--bw-line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-tile);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.paper:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-tile-hover);
  border-color: var(--bw-line-blue-2);
}
.paper h3 {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--bw-ink);
  letter-spacing: -0.3px;
  margin: 0 0 12px;
}
.paper p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bw-muted);
  margin: 0 0 20px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bw-blue);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.text-link:hover { color: var(--bw-blue-hover); text-decoration: underline; }
.text-link svg { width: 15px; height: 15px; }

.journey { background: var(--bw-surface); }
.journey-inner {
  max-width: 791px;
  margin-inline: auto;
  padding: 56px 20px;
  text-align: center;
}
.journey-inner .lead { margin: 16px 0 24px; }

/* ============================================================
   Legal
   ============================================================ */
.legal-inner {
  max-width: 791px;
  margin-inline: auto;
  padding: 40px 20px 70px;
}
.docs { display: grid; gap: 20px; margin-top: 36px; }
.doc {
  border: 1.5px solid var(--bw-line);
  border-radius: 12px;
  padding: 28px 32px;
  display: grid;
  gap: 10px;
}
.doc h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--bw-ink);
  letter-spacing: -0.3px;
  margin: 0;
}
.doc p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bw-muted);
  margin: 0;
}
.doc-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--bw-muted-soft);
  letter-spacing: 0.02em;
}

/* ============================================================
   Responsive additions
   ============================================================ */
@media (max-width: 767px) {
  :root { --fs-page-title: 42px; }
  .page-title { letter-spacing: -1px; }
  .page-head .lead-muted { font-size: 17px; }
  .pricing-sub { font-size: 17px; }
  .price-card { padding: 35px 25px; }
  .price-number { font-size: 54px; }
  .price-currency { font-size: 28px; }
  .price-frequency { font-size: 16px; }
  .billing-toggle {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
  }
  .billing-toggle button { justify-content: center; border-radius: 8px; padding: 14px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .prose h2 { font-size: 24px; }
  .founder-bio > p.founder-role { font-size: 26px; }
  .founder-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-bottom: 48px;
  }
  /* Lead with the face on a phone, where the columns stack. */
  .founder-photo { order: -1; max-width: 320px; }
  .paper, .doc { padding: 24px; }
}

/* ============================================================
   Fixes
   ============================================================ */
/* `.btn { display: inline-flex }` outranks the browser's own
   [hidden] { display: none }, so a hidden button still rendered.
   Scoped selectors rather than !important. */
.btn[hidden],
.text-link[hidden],
[hidden] { display: none; }

/* A disabled submit must look disabled, or the page lies about itself. */
.btn:disabled,
.btn[disabled] {
  background: var(--bw-line);
  border-color: var(--bw-line);
  color: var(--bw-muted-soft);
  box-shadow: none;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--bw-line);
  border-color: var(--bw-line);
  box-shadow: none;
  transform: none;
}

/* The live site renders the founder name in the theme's black, not blue. */
.founder-name { color: var(--bw-ink-theme); }

/* ============================================================
   The Journey — index
   ============================================================ */
.journey-index-inner {
  max-width: 1130px;
  margin-inline: auto;
  padding: 40px 15px 20px;
}
.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.journey-card {
  display: flex;
  flex-direction: column;
  background: var(--bw-white);
  border: 1.5px solid var(--bw-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-tile);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.journey-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-tile-hover);
  border-color: var(--bw-line-blue-2);
}
.journey-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--bw-line);
}
.journey-card-body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
}
.post-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bw-muted-soft);
  margin: 0;
}
.journey-card h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--bw-ink);
  margin: 0;
  text-wrap: balance;
}
.journey-card p:not(.post-date) {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--bw-muted);
  margin: 0;
}
.journey-card .text-link { margin-top: auto; padding-top: 6px; }

/* ============================================================
   The Journey — a single post
   ============================================================ */
.post-head-inner {
  max-width: 800px;
  margin-inline: auto;
  padding: 56px 20px 0;
  text-align: center;
}
.post-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--bw-ink);
  margin: 14px 0 0;
  text-wrap: balance;
}
.post-hero {
  max-width: 900px;
  margin: 40px auto 0;
  padding-inline: 20px;
}
.post-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--bw-line);
  box-shadow: var(--shadow-tile);
}
.post-body {
  max-width: 760px;
  margin-inline: auto;
  padding: 44px 20px 12px;
}
.post-body p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--bw-body);
  margin: 0 0 24px;
}
.post-body p:last-child { margin-bottom: 0; }
.post-body a { color: var(--bw-blue); text-decoration: underline; }
.post-body a:hover { color: var(--bw-blue-hover); }

.post-nav {
  max-width: 760px;
  margin-inline: auto;
  padding: 40px 20px 70px;
  border-top: 1px solid var(--bw-line);
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.post-nav-slot { max-width: 46%; display: flex; flex-direction: column; gap: 6px; }
.post-nav-slot--next { text-align: right; margin-left: auto; }
.post-nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bw-muted-soft);
}
.post-nav a {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bw-ink);
  text-decoration: none;
}
.post-nav a:hover { color: var(--bw-blue); }

.post-back {
  max-width: 760px;
  margin-inline: auto;
  padding: 0 20px 8px;
}

/* Old-URL landing pages, kept so shared links still resolve. */
.redirect-inner {
  max-width: 620px;
  margin-inline: auto;
  padding: 120px 20px 140px;
  text-align: center;
}

@media (max-width: 767px) {
  .journey-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .journey-card-body { padding: 22px 22px 24px; }
  .post-head-inner { padding-top: 40px; }
  .post-body { padding-top: 32px; }
  .post-body p { font-size: 17px; }
  .post-nav { flex-direction: column; }
  .post-nav-slot, .post-nav-slot--next { max-width: none; text-align: left; margin-left: 0; }
}

/* ============================================================
   Contact — reasons to write, not a list of channels
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin-inline: auto;
  padding: 44px 15px 60px;
}
.contact-card {
  background: var(--bw-white);
  border: 1.5px solid var(--bw-line);
  border-radius: 12px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-tile);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-tile-hover);
  border-color: var(--bw-line-blue-2);
}
.contact-card h2 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--bw-ink);
  margin: 0;
}
.contact-card p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--bw-muted);
  margin: 0;
}
.contact-card .text-link { margin-top: auto; padding-top: 10px; }

.ask-band { background: var(--bw-surface); }
.ask-inner {
  max-width: 800px;
  margin-inline: auto;
  padding: 64px 20px 70px;
  text-align: center;
}
.ask-question {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--bw-body);
  max-width: 660px;
  margin: 18px auto 32px;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 44px; }
}
@media (max-width: 767px) {
  .contact-card { padding: 24px 22px; }
  .ask-inner { padding: 48px 20px 54px; }
  .ask-question { font-size: 18px; }
}