/* ---------- The type ----------

   Self-hosted from /fonts rather than linked to Google, because style-src and
   font-src are both 'self' and widening either would loosen the policy on
   every HTML response in the product to serve one page. See fonts/README.txt.

   `swap` on purpose: this page is read, not interacted with, and a pastor on a
   slow connection should get the words immediately in the fallback rather than
   a blank rectangle. The fallbacks are metrically close enough that the swap
   does not throw the layout about. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/fonts/source-serif-4-300-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/public-sans-300-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- The marketing palette ----------

   Every name is prefixed. The app already owns --paper, --paper-sunk, --ink,
   --accent and --line, at different values and with a dark-mode pair; this
   page wants its own warm ground and its own violet, and neither may be
   allowed to mean something new anywhere else in the product. Nothing here
   leaves this stylesheet, which only the home page loads.

   One accent, one warm neutral ramp, two grounds. No gradients, no second
   accent, no coloured shadows. */
:root {
  --mk-paper:        #faf8f3;
  --mk-paper-sunk:   #f4f1ea;
  --mk-surface:      #ffffff;
  --mk-surface-tint: #fcfbf8;

  --mk-ink:     #1c1a17;
  --mk-ink-70:  rgba(28, 26, 23, .70);
  --mk-ink-66:  rgba(28, 26, 23, .66);
  --mk-ink-65:  rgba(28, 26, 23, .65);
  --mk-ink-60:  rgba(28, 26, 23, .60);
  --mk-ink-55:  rgba(28, 26, 23, .55);
  --mk-ink-45:  rgba(28, 26, 23, .45);
  --mk-ink-40:  rgba(28, 26, 23, .40);
  --mk-ink-38:  rgba(28, 26, 23, .38);

  --mk-rule:        rgba(28, 26, 23, .12);
  --mk-rule-soft:   rgba(28, 26, 23, .09);
  --mk-rule-strong: rgba(28, 26, 23, .16);

  --mk-accent:       #4a3f8f;
  --mk-accent-hover: #413781;
  --mk-accent-link:  #332b66;

  --mk-on-ink:      #faf8f3;
  --mk-on-ink-60:   rgba(250, 248, 243, .60);
  --mk-on-ink-50:   rgba(250, 248, 243, .50);
  --mk-on-ink-45:   rgba(250, 248, 243, .45);
  --mk-on-ink-rule: rgba(250, 248, 243, .16);

  /* The stage ramp, in the marketing page's own hue. The in-app archive views
     draw the same five steps off the product's teal accent — see
     calendar.css. One hue at five intensities, so a year reads as a gradient
     of readiness rather than a set of unrelated colours. */
  --mk-stage-1: rgba(74, 63, 143, .16);
  --mk-stage-2: rgba(74, 63, 143, .30);
  --mk-stage-3: rgba(74, 63, 143, .50);
  --mk-stage-4: rgba(74, 63, 143, .72);
  --mk-stage-5: rgba(74, 63, 143, .96);
  --mk-stage-0: rgba(28, 26, 23, .07);

  --mk-serif: 'Source Serif 4', Georgia, serif;
  --mk-sans:  'Public Sans', system-ui, -apple-system, sans-serif;
  --mk-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mk-radius:      4px;
  --mk-radius-card: 5px;
  --mk-ease:        140ms ease;
}

/* ---------- The page ----------

   Light-first and quiet. Separation is done with hairline rules, not shadows
   and not cards that lift: there is exactly one shadow on this page and it is
   under the product mock.

   The product has a dark mode and a toggle sitting in this page's own header,
   so the palette has a dark pair. The handoff is light-only and gives the
   inversion for the stage ramp alone; the rest follows the same logic —
   grounds swap, the accent lifts to stay legible on a dark ground. A toggle
   that does nothing on the page it is on reads as a broken control. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mk-paper:        #17161a;
    --mk-paper-sunk:   #100f13;
    --mk-surface:      #1e1c23;
    --mk-surface-tint: #232028;

    --mk-ink:     #f2f0f7;
    --mk-ink-70:  rgba(242, 240, 247, .70);
    --mk-ink-66:  rgba(242, 240, 247, .66);
    --mk-ink-65:  rgba(242, 240, 247, .65);
    --mk-ink-60:  rgba(242, 240, 247, .60);
    --mk-ink-55:  rgba(242, 240, 247, .55);
    --mk-ink-45:  rgba(242, 240, 247, .45);
    --mk-ink-40:  rgba(242, 240, 247, .40);
    --mk-ink-38:  rgba(242, 240, 247, .38);

    --mk-rule:        rgba(242, 240, 247, .14);
    --mk-rule-soft:   rgba(242, 240, 247, .10);
    --mk-rule-strong: rgba(242, 240, 247, .20);

    --mk-accent:       #a094e1;
    --mk-accent-hover: #b3a9e8;
    --mk-accent-link:  #c3bbee;

    --mk-on-ink:      #f2f0f7;
    --mk-on-ink-60:   rgba(242, 240, 247, .60);
    --mk-on-ink-50:   rgba(242, 240, 247, .50);
    --mk-on-ink-45:   rgba(242, 240, 247, .45);
    --mk-on-ink-rule: rgba(242, 240, 247, .16);

    --mk-stage-1: rgba(160, 148, 225, .16);
    --mk-stage-2: rgba(160, 148, 225, .30);
    --mk-stage-3: rgba(160, 148, 225, .50);
    --mk-stage-4: rgba(160, 148, 225, .72);
    --mk-stage-5: rgba(160, 148, 225, .96);
    --mk-stage-0: rgba(250, 248, 243, .10);
  }
}
:root[data-theme="dark"] {
  --mk-paper: #17161a; --mk-paper-sunk: #100f13; --mk-surface: #1e1c23; --mk-surface-tint: #232028;
  --mk-ink: #f2f0f7;
  --mk-ink-70: rgba(242,240,247,.70); --mk-ink-66: rgba(242,240,247,.66); --mk-ink-65: rgba(242,240,247,.65);
  --mk-ink-60: rgba(242,240,247,.60); --mk-ink-55: rgba(242,240,247,.55); --mk-ink-45: rgba(242,240,247,.45);
  --mk-ink-40: rgba(242,240,247,.40); --mk-ink-38: rgba(242,240,247,.38);
  --mk-rule: rgba(242,240,247,.14); --mk-rule-soft: rgba(242,240,247,.10); --mk-rule-strong: rgba(242,240,247,.20);
  --mk-accent: #a094e1; --mk-accent-hover: #b3a9e8; --mk-accent-link: #c3bbee;
  --mk-on-ink: #f2f0f7;
  --mk-on-ink-60: rgba(242,240,247,.60); --mk-on-ink-50: rgba(242,240,247,.50); --mk-on-ink-45: rgba(242,240,247,.45);
  --mk-on-ink-rule: rgba(242,240,247,.16);
  --mk-stage-1: rgba(160,148,225,.16); --mk-stage-2: rgba(160,148,225,.30); --mk-stage-3: rgba(160,148,225,.50);
  --mk-stage-4: rgba(160,148,225,.72); --mk-stage-5: rgba(160,148,225,.96); --mk-stage-0: rgba(250,248,243,.10);
}

body { background: var(--mk-paper); color: var(--mk-ink); font-family: var(--mk-sans); }

/* The content column.
 *
 * Held by the section's own padding rather than by a max-width and an auto
 * margin on each child, because a child that sets `margin: 0` — and several
 * legitimately do, to control their vertical rhythm — silently throws the auto
 * away and slides itself to the left of the column. That is precisely what
 * happened: the closing heading, its line underneath, the hero's fine print
 * and the archive strip's lede were each 110px left of where they belonged
 * while everything around them was centred, and the shorthand that broke them
 * looked entirely innocent.
 *
 * Padding cannot be overridden from the inside. Every child now starts at the
 * column's left edge whatever it does with its own margins, and centring is
 * text-align's job, which is what text-align is for. */
:root { --mk-gutter: clamp(20px, 5vw, 56px); --mk-column: 1180px; }
.mk-band, .mk-hero, .mk-final, .mk-mock-wrap, .home-header, .home-footer {
  padding-inline: max(var(--mk-gutter), (100% - var(--mk-column)) / 2);
}
.mk-band, .mk-hero, .mk-final { padding-block: 78px; }

/* ---------- Header ---------- */

.home-header {
  display: flex; align-items: center; gap: 28px;
  padding-block: 20px;
  border-bottom: 1px solid var(--mk-rule-soft);
  background: var(--mk-paper);
}
.home-header .brand { font-family: var(--mk-serif); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.home-header .brand .dot, .home-header .brand .tld { color: var(--mk-accent); }
.home-nav { display: flex; gap: 28px; margin: 0 auto; }
.home-nav a {
  font-size: 13.5px; line-height: 1; color: var(--mk-ink-70); text-decoration: none;
  transition: color var(--mk-ease);
}
.home-nav a:hover { color: var(--mk-ink); }
.home-header-right { display: flex; align-items: center; gap: 10px; margin-left: 0; }
.mk-signin { font-size: 13.5px; color: var(--mk-ink-70); text-decoration: none; transition: color var(--mk-ease); }
.mk-signin:hover { color: var(--mk-ink); }
@media (max-width: 860px) { .home-nav { display: none; } .home-header-right { margin-left: auto; } }

/* ---------- Buttons ----------

   Three, and the inversion is deliberate: the header's is the accent and the
   hero's is ink, so the one accent button stays the loudest thing on the page
   at rest. Nothing scales and nothing lifts. */
.mk-btn {
  font-family: var(--mk-sans); font-weight: 500; line-height: 1;
  border-radius: var(--mk-radius); text-decoration: none; border: 1px solid transparent;
  transition: background var(--mk-ease), color var(--mk-ease), border-color var(--mk-ease);
}
.mk-btn-accent { background: var(--mk-accent); color: #fff; font-size: 13px; padding: 10px 16px; }
.mk-btn-accent:hover { background: var(--mk-accent-hover); color: #fff; }
.mk-btn-ink { background: var(--mk-ink); color: var(--mk-paper); font-size: 14px; padding: 14px 22px; }
.mk-btn-ink:hover { background: var(--mk-ink); opacity: .88; color: var(--mk-paper); }
.mk-btn-outline {
  background: none; color: var(--mk-ink); font-size: 14px; padding: 14px 20px;
  border-color: rgba(28, 26, 23, .2);
}
:root[data-theme="dark"] .mk-btn-outline { border-color: var(--mk-rule-strong); }
.mk-btn-outline:hover { background: rgba(28, 26, 23, .04); color: var(--mk-ink); }
.mk-btn:focus-visible, .home-nav a:focus-visible, .mk-signin:focus-visible {
  outline: 2px solid var(--mk-accent); outline-offset: 2px;
}

/* ---------- Hero ---------- */

.mk-hero { padding-block: 92px 72px; text-align: center; }

.mk-eyebrow, .mk-label {
  display: block; font-family: var(--mk-mono); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mk-accent);
}
.mk-hero h1 {
  margin: 26px auto 24px; max-width: 760px;
  font-family: var(--mk-serif); font-weight: 400; font-size: clamp(2.25rem, 5.2vw, 62px);
  line-height: 1.06; letter-spacing: -.025em; text-wrap: pretty;
}
.mk-lede {
  margin: 0 auto 34px; max-width: 520px;
  font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--mk-ink-66);
}
.mk-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mk-fineprint { margin: 16px 0 0; font-size: 12.5px; line-height: 1; color: var(--mk-ink-45); }

/* ---------- The product mock ----------

   Cropped at the bottom by the section: no bottom border, radius on the top
   corners only, so it reads as a window continuing below the fold. The one
   shadow on the page is here. */
.mk-mock-wrap { padding-block: 0 84px; }
.mk-mock {
  border: 1px solid var(--mk-rule); border-bottom: none; border-radius: 6px 6px 0 0;
  background: var(--mk-surface); box-shadow: 0 -1px 40px rgba(28, 26, 23, .06);
  overflow: hidden;
}
.mk-mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--mk-rule-soft);
}
.mk-dots { display: flex; gap: 8px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(28, 26, 23, .14); display: block; }
:root[data-theme="dark"] .mk-dots i { background: var(--mk-rule-strong); }
.mk-mock-file { margin-left: 12px; font-family: var(--mk-mono); font-size: 11.5px; line-height: 1; color: var(--mk-ink-45); }

.mk-mock-body { display: grid; grid-template-columns: 196px minmax(0, 1fr) 224px; min-height: 360px; }
.mk-mock-rail { border-right: 1px solid var(--mk-rule-soft); padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.mk-label { font-size: 10.5px; letter-spacing: .1em; color: var(--mk-ink-38); }
.mk-rail-list { display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.35; color: rgba(28, 26, 23, .72); }
:root[data-theme="dark"] .mk-rail-list { color: var(--mk-ink-70); }
.mk-rail-list [data-current="true"] { color: var(--mk-accent); font-weight: 500; }

.mk-mock-page { padding: 30px 34px; }
.mk-mock-ref { font-family: var(--mk-mono); font-size: 13px; line-height: 1; color: var(--mk-accent); margin-bottom: 14px; }
.mk-mock-page h3 {
  margin: 0 0 16px; font-family: var(--mk-serif); font-weight: 400; font-size: 27px;
  line-height: 1.2; letter-spacing: -.015em;
}
.mk-mock-page p {
  margin: 0 0 12px; font-family: var(--mk-serif); font-weight: 400; font-size: 14.5px;
  line-height: 1.75; color: rgba(28, 26, 23, .82);
}
:root[data-theme="dark"] .mk-mock-page p { color: var(--mk-ink-70); }
.mk-mock-writing { color: rgba(28, 26, 23, .35) !important; }
:root[data-theme="dark"] .mk-mock-writing { color: var(--mk-ink-40) !important; }
.mk-caret {
  display: inline-block; width: 1.5px; height: 16px; background: var(--mk-accent);
  vertical-align: -3px; margin-left: 3px; animation: mk-blink 1.1s step-end infinite;
}
/* A cursor that will not stop blinking is exactly the thing this setting is
   for. It stays, solid, so the line still reads as being written. */
@media (prefers-reduced-motion: reduce) { .mk-caret { animation: none; } }
@keyframes mk-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.mk-mock-study { border-left: 1px solid var(--mk-rule-soft); padding: 18px 16px; background: var(--mk-surface-tint); }
.mk-mock-study .mk-label { margin-bottom: 14px; }
.mk-card {
  border: 1px solid rgba(28, 26, 23, .1); border-radius: var(--mk-radius);
  padding: 11px; margin-bottom: 10px; background: var(--mk-surface);
}
:root[data-theme="dark"] .mk-card { border-color: var(--mk-rule); }
.mk-card-label {
  font-family: var(--mk-mono); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink-40); margin-bottom: 6px;
}
.mk-card-body { font-size: 12px; line-height: 1.5; color: var(--mk-ink-60); }

/* ---------- Section furniture ---------- */

.mk-band-sunk { background: var(--mk-paper-sunk); border-top: 1px solid var(--mk-rule); }
.mk-band-ink { background: var(--mk-ink); color: var(--mk-on-ink); }
.mk-label-ink { color: var(--mk-on-ink-45); margin-bottom: 34px; }

.mk-band-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 40px;
  border-top: 1px solid var(--mk-rule); padding-top: 22px; margin-bottom: 40px;
}
.mk-band-head h2, .mk-strip-head h2, .mk-faq-head h2, .mk-final h2 {
  margin: 0; font-family: var(--mk-serif); font-weight: 400; font-size: clamp(1.625rem, 3.4vw, 34px);
  line-height: 1.12; letter-spacing: -.02em;
}
.mk-band-head h2 { max-width: 420px; }
.mk-band-head p { margin: 0; max-width: 330px; font-weight: 300; font-size: 14.5px; line-height: 1.65; color: var(--mk-ink-60); }
@media (max-width: 760px) { .mk-band-head { flex-direction: column; gap: 14px; } .mk-band-head h2, .mk-band-head p { max-width: none; } }

/* ---------- Five verbs ----------

   A hairline grid, not spaced cards: one container border and 1px gaps
   showing the container's own background through. It has to stay that way
   when it wraps, or the interior rules double up. */
.mk-verbs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--mk-rule); border: 1px solid var(--mk-rule);
}
.mk-verb { background: var(--mk-paper); padding: 26px 22px 30px; }
.mk-num { font-family: var(--mk-mono); font-weight: 500; font-size: 11px; line-height: 1; color: var(--mk-accent); margin-bottom: 16px; }
.mk-verb h3 { margin: 0 0 10px; font-family: var(--mk-serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.mk-verb p { margin: 0; font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--mk-ink-65); }
@media (max-width: 1100px) { .mk-verbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .mk-verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mk-verbs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How the week goes ---------- */

.mk-week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.mk-day-rule { height: 1px; background: var(--mk-on-ink-rule); margin-bottom: 18px; }
.mk-day[data-first="true"] .mk-day-rule { background: var(--mk-accent); }
.mk-day-name { font-family: var(--mk-mono); font-size: 13px; line-height: 1; color: var(--mk-on-ink-50); margin-bottom: 12px; }
.mk-day h3 { margin: 0 0 10px; font-family: var(--mk-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.mk-day p { margin: 0; font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--mk-on-ink-60); }
@media (max-width: 900px) { .mk-week { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }
@media (max-width: 520px) { .mk-week { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Twenty years of Sundays ----------

   The same drawing as the app's all-years view, so the page is an honest
   preview of the product rather than a picture of something better. */
.mk-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 10px; flex-wrap: wrap; }
.mk-views { display: flex; gap: 6px; }
.mk-views span {
  font-family: var(--mk-mono); font-weight: 500; font-size: 11.5px; line-height: 1;
  padding: 8px 12px; border-radius: 3px;
  border: 1px solid var(--mk-rule-strong); color: var(--mk-ink-60);
}
.mk-views [data-current="true"] { background: var(--mk-accent); border-color: var(--mk-accent); color: #fff; }
.mk-strip-lede { margin: 0 0 30px; max-width: 560px; font-weight: 300; font-size: 14.5px; line-height: 1.65; color: var(--mk-ink-60); }

.mk-yrs { border: 1px solid rgba(28, 26, 23, .14); background: var(--mk-paper); padding: 22px 24px 18px; }
:root[data-theme="dark"] .mk-yrs { border-color: var(--mk-rule); }
.mk-yrs-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 4px; }
.mk-yrs-year {
  font-family: var(--mk-mono); font-size: 11.5px; line-height: 1; color: var(--mk-ink-45);
  text-align: right; font-variant-numeric: tabular-nums;
  position: sticky; left: 0; background: var(--mk-paper);
}
.mk-yrs-weeks { display: grid; grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px; }
.mk-yrs-week { aspect-ratio: 1; border-radius: 2px; background: var(--mk-stage-0); display: block; }

.mk-yrs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 12px 0 0 60px; padding-top: 14px; border-top: 1px solid rgba(28, 26, 23, .10);
}
:root[data-theme="dark"] .mk-yrs-foot { border-top-color: var(--mk-rule); }
.mk-key { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk-key-label, .mk-yrs-count {
  font-family: var(--mk-mono); font-size: 10.5px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink-40);
}
.mk-yrs-count { letter-spacing: 0; text-transform: none; }
.mk-key-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mk-mono); font-size: 10.5px; line-height: 1; color: var(--mk-ink-45); }
.mk-key-dot { width: 9px; height: 9px; border-radius: 2px; display: block; }

/* Fifty-three squares across a phone would be sub-pixel, and dropping years to
   fit would remove the thing the view is for. It scrolls, with the year labels
   pinned so they stay readable while the weeks move under them. */
@media (max-width: 900px) {
  .mk-yrs { overflow-x: auto; }
  .mk-yrs-row, .mk-yrs-foot { min-width: 620px; }
}

/* ---------- FAQ ----------

   <details name> rather than scripted buttons: single-open, first open on
   load, click the open one to close it, arrow and Enter and Space — all of it
   native, and none of it able to arrive broken because a script did not. */
.mk-faq-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
.mk-faq-head p { margin: 12px 0 0; font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--mk-ink-60); }
.mk-faqs { border-top: 1px solid rgba(28, 26, 23, .14); }
:root[data-theme="dark"] .mk-faqs { border-top-color: var(--mk-rule); }
.mk-faq { border-bottom: 1px solid rgba(28, 26, 23, .1); }
:root[data-theme="dark"] .mk-faq { border-bottom-color: var(--mk-rule); }
.mk-faq > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-family: var(--mk-serif); font-weight: 400; font-size: 18px; line-height: 1.35;
}
.mk-faq > summary::-webkit-details-marker { display: none; }
.mk-faq > summary:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-faq-mark { font-family: var(--mk-mono); font-size: 16px; line-height: 1; color: var(--mk-accent); flex: none; }
.mk-faq-mark::before { content: '+'; }
.mk-faq[open] .mk-faq-mark::before { content: '\2212'; }
.mk-faq > p { margin: 0 0 20px; max-width: 560px; font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--mk-ink-70); }
@media (max-width: 860px) { .mk-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- The last word ---------- */

.mk-final { text-align: center; border-top: 1px solid var(--mk-rule); }
.mk-final p { margin: 12px 0 30px; font-weight: 300; font-size: 16px; color: var(--mk-ink-60); }

.home-footer { background: var(--mk-ink); color: var(--mk-on-ink); padding-block: 40px; }
.home-footer .inner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--mk-on-ink-45);
}
.home-footer .brand { color: var(--mk-on-ink); font-family: var(--mk-serif); font-weight: 600; }
.home-footer .brand .dot, .home-footer .brand .tld { color: var(--mk-on-ink-60); }
.home-footer .copy { margin-right: auto; }
.home-footer .links { display: flex; gap: 24px; }
.home-footer .links a { color: var(--mk-on-ink-45); text-decoration: none; transition: color var(--mk-ease); }
.home-footer .links a:hover { color: var(--mk-on-ink); }

/* ---------- Arriving ----------

   The one movement on the page, and it is a fade. No parallax, no stagger, no
   reveal that has to finish before a sentence can be read. */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 640px) {
  .mk-band, .mk-hero, .mk-final { padding-block: 48px; }
  .mk-hero { padding-top: 56px; }
  .mk-mock-body { grid-template-columns: minmax(0, 1fr); }
  .mk-mock-rail, .mk-mock-study { display: none; }
  .mk-mock-page { padding: 24px 22px; }
}

/* ---------- What it will and will not do ----------

   Two columns of equal weight. The refusals are not smaller type or a
   footnote: they are half the section, because on this product they are half
   the promise. */
.mk-assist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--mk-rule); border: 1px solid var(--mk-rule);
}
.mk-assist-col { background: var(--mk-paper); padding: 26px 24px 30px; }
.mk-assist-col .mk-label { margin-bottom: 18px; }
.mk-assist-col[data-refusal="true"] .mk-label { color: var(--mk-ink-45); }
.mk-assist-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.mk-assist-col li {
  font-family: var(--mk-serif); font-weight: 400; font-size: 15px; line-height: 1.55;
  color: var(--mk-ink-70); padding-left: 20px; position: relative;
}
.mk-assist-col li::before {
  content: '·'; position: absolute; left: 4px; color: var(--mk-accent); font-weight: 700;
}
.mk-assist-col[data-refusal="true"] li::before { content: '×'; color: var(--mk-ink-38); font-weight: 400; }
@media (max-width: 700px) { .mk-assist { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Terms and Privacy ----------

   One column at reading width. A document a pastor is expected to actually
   read is set like a document, not like a wall of small print. */
.mk-doc { --mk-column: 720px; padding-block: 64px 96px; }
.mk-doc h1 {
  margin: 0 0 6px; font-family: var(--mk-serif); font-weight: 400;
  font-size: clamp(2rem, 5vw, 44px); line-height: 1.1; letter-spacing: -.025em;
}
.mk-doc-updated {
  margin: 0 0 28px; font-family: var(--mk-mono); font-size: 11px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink-45);
}
.mk-doc-lede {
  margin: 0 0 12px; padding-bottom: 34px; border-bottom: 1px solid var(--mk-rule);
  font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--mk-ink-66);
}
.mk-doc section { margin-top: 38px; }
.mk-doc h2 {
  margin: 0 0 14px; font-family: var(--mk-serif); font-weight: 400; font-size: 22px;
  line-height: 1.25; letter-spacing: -.015em;
}
.mk-doc p { margin: 0 0 14px; font-weight: 300; font-size: 15.5px; line-height: 1.72; color: var(--mk-ink-70); }
.mk-doc p:last-child { margin-bottom: 0; }
.mk-doc strong { font-weight: 500; color: var(--mk-ink); }
.mk-doc code {
  font-family: var(--mk-mono); font-size: .875em;
  background: var(--mk-paper-sunk); border-radius: 3px; padding: 1px 5px;
}
.home-nav a[aria-current="page"] { color: var(--mk-ink); }
@media (max-width: 640px) { .mk-doc { padding-block: 40px 64px; } }