/* ==========================================================================
   Ask Nell — marketing surface
   "The Correspondence Desk": deep espresso ink, cream editorial serif,
   copper wax-seal accent. Letters, ledgers, and a secretary's calm.
   Shares font stack + button DNA with the product so screenshots feel native.
   ========================================================================== */

body.mk {
  /* Marketing-scope tokens — deeper + warmer than the app shell. */
  --mk-bg: #14100D;
  --mk-bg-deep: #0E0B09;
  --mk-surface: #1D1712;
  --mk-surface-2: #241C16;
  --mk-ink: #F0E7DA;
  --mk-body-c: #B5AA9B;
  --mk-muted: #8B8072;
  --mk-copper: #D0925E;
  --mk-copper-hi: #E8B07A;
  --mk-copper-dim: rgba(208, 146, 94, 0.55);
  --mk-hairline: rgba(208, 146, 94, 0.14);
  --mk-hairline-strong: rgba(208, 146, 94, 0.30);
  --mk-wax: #B4703E;
  --mk-good: #7FA37F;
  --mk-serif: 'Source Serif 4', Georgia, serif;
  --mk-sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --mk-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --mk-max: 1120px;

  display: block;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 78% -140px, rgba(208, 146, 94, 0.11), transparent 62%),
    radial-gradient(900px 700px at -180px 32%, rgba(208, 146, 94, 0.05), transparent 60%),
    var(--mk-bg);
  color: var(--mk-body-c);
  font-family: var(--mk-sans);
  -webkit-font-smoothing: antialiased;
}

/* Paper grain over everything — the letterpress feel. */
body.mk::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
body.mk > * { position: relative; z-index: 1; }

.mk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mk-copper);
  color: var(--mk-bg-deep);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 50;
}
.mk-skip:focus { left: 12px; top: 12px; }

::selection { background: rgba(208, 146, 94, 0.35); color: var(--mk-ink); }

/* --- header ------------------------------------------------------------ */

.mk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(16px, 4vw, 40px);
  transition: background 240ms ease, border-color 240ms ease, padding 240ms ease;
  border-bottom: 1px solid transparent;
}
.mk-header.scrolled {
  background: rgba(14, 11, 9, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--mk-hairline);
  padding-top: 12px;
  padding-bottom: 12px;
}

.mk-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mk-ink);
}
.mk-brand .nell-seal { width: 30px; height: 30px; color: var(--mk-copper); transition: transform 400ms cubic-bezier(.34,1.56,.64,1); }
.mk-brand:hover .nell-seal { transform: rotate(-8deg) scale(1.06); }

.mk-wordmark {
  font-family: var(--mk-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mk-ink);
}
.mk-wordmark em {
  font-style: italic;
  font-weight: 400;
  color: var(--mk-copper);
}
.mk-wordmark.small { font-size: 1.1rem; }

.mk-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); }
.mk-nav > a:not(.mk-btn) {
  color: var(--mk-body-c);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  position: relative;
  padding: 4px 0;
}
.mk-nav > a:not(.mk-btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--mk-copper);
  transition: right 220ms ease;
}
.mk-nav > a:not(.mk-btn):hover { color: var(--mk-ink); }
.mk-nav > a:not(.mk-btn):hover::after { right: 0; }

/* --- buttons ------------------------------------------------------------ */

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mk-sans);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease,
              border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.mk-btn:active { transform: translateY(1px) scale(0.99); }

.mk-btn-primary {
  background: linear-gradient(180deg, var(--mk-copper-hi), var(--mk-copper) 55%, #B87A46);
  color: #1A120B;
  box-shadow: 0 2px 14px rgba(208, 146, 94, 0.25), inset 0 1px 0 rgba(255,255,255,0.28);
}
.mk-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(208, 146, 94, 0.38), inset 0 1px 0 rgba(255,255,255,0.28);
}
/* sheen sweep */
.mk-btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 245, 230, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 500ms ease;
}
.mk-btn-primary:hover::after { left: 125%; }

.mk-btn-ghost {
  background: transparent;
  color: var(--mk-ink);
  border-color: var(--mk-hairline-strong);
}
.mk-btn-ghost:hover {
  border-color: var(--mk-copper);
  color: var(--mk-copper-hi);
  transform: translateY(-2px);
}

.mk-btn-big { padding: 16px 32px; font-size: 1.02rem; }
.mk-btn-small { padding: 10px 18px; font-size: 0.85rem; }

/* --- flashes ------------------------------------------------------------- */

.mk-flashes { max-width: var(--mk-max); margin: 12px auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.mk-flash {
  background: var(--mk-surface-2);
  border: 1px solid var(--mk-hairline-strong);
  border-left: 3px solid var(--mk-copper);
  color: var(--mk-ink);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

/* --- shared section furniture -------------------------------------------- */

.mk-main {
  max-width: var(--mk-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.lp-section {
  padding: clamp(64px, 10vw, 120px) 0;
  border-top: 1px solid var(--mk-hairline);
}
.lp-section-head { max-width: 680px; margin-bottom: clamp(28px, 5vw, 52px); }

.lp-eyebrow {
  font-family: var(--mk-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mk-copper);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.lp-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--mk-copper-dim);
  flex-shrink: 0;
}

.lp-h1 {
  font-family: var(--mk-serif);
  font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--mk-ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.lp-h2 {
  font-family: var(--mk-serif);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--mk-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.lp-ink {
  font-style: italic;
  color: var(--mk-copper-hi);
  position: relative;
  white-space: nowrap;
}
/* hand-drawn underline on the marked phrase */
.lp-ink::after {
  content: "";
  position: absolute;
  left: 0.02em; right: 0.05em;
  bottom: -0.06em;
  height: 0.09em;
  background: var(--mk-copper);
  opacity: 0.5;
  border-radius: 999px;
  transform: rotate(-0.6deg);
}

.lp-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 0 8px;
}
.lp-sub strong { color: var(--mk-ink); }
.lp-note {
  font-family: var(--mk-mono);
  font-size: 0.78rem;
  color: var(--mk-muted);
  letter-spacing: 0.02em;
  margin-top: 18px;
}
.lp-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- hero ----------------------------------------------------------------- */

.mk-hero.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 9vw, 110px);
}
.lp-hero-copy .lp-sub { font-size: clamp(1.05rem, 2.2vw, 1.22rem); }

/* the sealed-letter tableau */
.lp-hero-aside { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lp-envelope {
  position: relative;
  width: min(380px, 88%);
  aspect-ratio: 5 / 3.4;
  background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(240, 231, 218, 0.05);
}
.lp-env-flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #2B221A, #241C16 78%);
  border-radius: 12px 12px 0 0;
  z-index: 3;
}
.lp-env-letter {
  position: absolute;
  left: 7%;
  right: 7%;
  top: -14%;
  bottom: 30%;
  background: #F0E7DA;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  padding: 9% 8% 0;
  display: flex;
  flex-direction: column;
  gap: 11%;
  z-index: 2;
  animation: lp-letter-breathe 7s ease-in-out infinite;
}
.lp-env-line {
  display: block;
  height: 6%;
  min-height: 4px;
  border-radius: 999px;
  background: rgba(30, 22, 15, 0.24);
}
.lp-env-line.w80 { width: 80%; }
.lp-env-line.w70 { width: 70%; }
.lp-env-line.w60 { width: 60%; }
.lp-env-line.w50 { width: 50%; }
.lp-env-line.w40 { width: 40%; }
.lp-env-seal {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 34% 30%, #D28A52, var(--mk-wax) 58%, #8E5228);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 2px 5px rgba(255, 220, 180, 0.35), inset 0 -3px 6px rgba(60, 30, 10, 0.5);
  animation: lp-seal-pulse 7s ease-in-out infinite;
}
.lp-env-seal .nell-seal { width: 72%; height: 72%; color: #34200F; }
.lp-hero-caption {
  font-family: var(--mk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.lp-hero-caption strong { color: var(--mk-copper); font-weight: 500; }

@keyframes lp-letter-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}
@keyframes lp-seal-pulse {
  0%, 88%, 100% { transform: translate(-50%, -50%) scale(1); }
  93% { transform: translate(-50%, -50%) scale(1.07); }
}

/* --- reveal-on-scroll ------------------------------------------------------ */

[data-reveal],
[data-reveal-child] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].revealed,
[data-reveal-child].revealed { opacity: 1; transform: none; }
/* Stagger children via inline --d set by JS */
[data-reveal-child] { transition-delay: var(--d, 0ms); }

/* No-JS + reduced motion: everything visible, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  body.mk *, body.mk *::before, body.mk *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body.mk.no-js [data-reveal],
body.mk.no-js [data-reveal-child] { opacity: 1; transform: none; }

/* --- triage demo ----------------------------------------------------------- */

.lp-triage-desk {
  background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 30px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
.lp-triage-list { list-style: none; margin: 0; padding: 0; }
.lp-triage-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  grid-template-areas: "from subject chip" "from detail chip";
  align-items: center;
  column-gap: 18px;
  row-gap: 2px;
  padding: 14px 10px;
  border-bottom: 1px dashed var(--mk-hairline);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 480ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-triage-row:last-child { border-bottom: none; }
.lp-triage-row.in { opacity: 1; transform: none; }
.lp-triage-from { grid-area: from; font-weight: 700; color: var(--mk-ink); font-size: 0.92rem; }
.lp-triage-subject {
  grid-area: subject;
  font-size: 0.92rem;
  color: var(--mk-body-c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-triage-detail {
  grid-area: detail;
  font-family: var(--mk-mono);
  font-size: 0.72rem;
  color: var(--mk-muted);
}
.lp-triage-chip {
  grid-area: chip;
  justify-self: end;
  font-family: var(--mk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-triage-row.stamped .lp-triage-chip { opacity: 1; transform: scale(1); }
.chip-needs-you { color: var(--mk-copper-hi); border-color: var(--mk-copper); background: rgba(208, 146, 94, 0.12); }
.chip-drafted { color: var(--mk-good); border-color: rgba(127, 163, 127, 0.5); background: rgba(127, 163, 127, 0.08); }
.chip-scheduled { color: #9DB4C4; border-color: rgba(157, 180, 196, 0.45); background: rgba(157, 180, 196, 0.08); }
.chip-filed { color: var(--mk-muted); border-color: rgba(139, 128, 114, 0.4); background: rgba(139, 128, 114, 0.08); }

.lp-triage-ledger {
  margin: 16px 10px 0;
  padding-top: 14px;
  border-top: 1px solid var(--mk-hairline);
  font-family: var(--mk-mono);
  font-size: 0.78rem;
  color: var(--mk-muted);
}

/* --- seal section ----------------------------------------------------------- */

.lp-seal {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.lp-seal-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.lp-seal-paper {
  width: min(320px, 90%);
  background: #F0E7DA;
  border-radius: 8px;
  padding: 34px 30px 68px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.6deg);
}
.lp-seal-paper .lp-env-line { height: 9px; }
.lp-seal-sig {
  font-family: var(--mk-serif);
  font-style: italic;
  color: rgba(30, 22, 15, 0.55);
  font-size: 0.95rem;
  margin-top: 6px;
}
.lp-seal-stamp {
  position: absolute;
  right: 14%;
  bottom: 6%;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 34% 30%, #D28A52, var(--mk-wax) 58%, #8E5228);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 3px 7px rgba(255, 220, 180, 0.35), inset 0 -4px 8px rgba(60, 30, 10, 0.5);
  transform: translateY(-56px) scale(1.45) rotate(9deg);
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 300ms ease;
}
.lp-seal-stamp .nell-seal { width: 66%; height: 66%; color: #34200F; }
.lp-seal-stage.stamped .lp-seal-stamp { transform: translateY(0) scale(1) rotate(-4deg); opacity: 1; }
/* impact ring */
.lp-seal-stage::after {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 6%;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 2px solid var(--mk-copper);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
.lp-seal-stage.stamped::after { animation: lp-ring 700ms ease-out 420ms; }
@keyframes lp-ring {
  0% { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1.7); }
}

.lp-seal-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.lp-seal-points li {
  position: relative;
  padding-left: 30px;
  color: var(--mk-ink);
  font-size: 0.97rem;
}
.lp-seal-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--mk-copper);
  font-weight: 700;
}

/* --- features ---------------------------------------------------------------- */

.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.lp-feature {
  background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-hairline);
  border-radius: 14px;
  padding: 28px 26px;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.lp-feature:hover {
  transform: translateY(-4px);
  border-color: var(--mk-hairline-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.lp-feature-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(208, 146, 94, 0.1);
  border: 1px solid var(--mk-hairline-strong);
  color: var(--mk-copper);
  margin-bottom: 18px;
}
.lp-feature-icon svg { width: 24px; height: 24px; }
.lp-feature h3 {
  font-family: var(--mk-serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--mk-ink);
  margin: 0 0 10px;
}
.lp-feature p { font-size: 0.94rem; line-height: 1.62; margin: 0; }

/* --- showcase ------------------------------------------------------------------ */

.lp-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}
.lp-shot { margin: 0; }
.lp-shot-frame {
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--mk-bg-deep);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.lp-shot:hover .lp-shot-frame {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55);
}
.lp-shot-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mk-hairline);
  background: var(--mk-surface);
}
.lp-shot-bar span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mk-hairline-strong);
}
.lp-shot-bar span:first-child { background: rgba(208, 146, 94, 0.55); }
.lp-shot-frame img { display: block; width: 100%; height: auto; }
.lp-shot figcaption {
  font-family: var(--mk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mk-muted);
  margin-top: 12px;
  padding-left: 2px;
}

/* --- video ------------------------------------------------------------------ */

.lp-video-frame {
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--mk-bg-deep);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lp-video-frame video { display: block; width: 100%; height: auto; }
.lp-video-caption { text-align: center; }

/* --- how (steps) --------------------------------------------------------------- */

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(22px, 4vw, 40px);
  counter-reset: lpstep;
}
.lp-steps li { position: relative; padding-top: 58px; }
.lp-step-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mk-hairline-strong);
  background: rgba(208, 146, 94, 0.08);
  color: var(--mk-copper);
  font-family: var(--mk-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
}
.lp-steps h3 {
  font-family: var(--mk-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mk-ink);
  margin: 0 0 8px;
}
.lp-steps p { font-size: 0.94rem; line-height: 1.62; margin: 0; }

/* --- trust ----------------------------------------------------------------------- */

.lp-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
}
.lp-trust-point {
  border-left: 2px solid var(--mk-hairline-strong);
  padding: 6px 0 6px 20px;
}
.lp-trust-point h3 {
  font-family: var(--mk-serif);
  font-size: 1.05rem;
  color: var(--mk-ink);
  margin: 0 0 6px;
}
.lp-trust-point p { font-size: 0.92rem; line-height: 1.6; margin: 0; }

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

.lp-faq-list { max-width: 760px; }
.lp-faq-item {
  border-bottom: 1px solid var(--mk-hairline);
  padding: 4px 0;
}
.lp-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-family: var(--mk-serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--mk-ink);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: "+";
  font-family: var(--mk-mono);
  color: var(--mk-copper);
  transition: transform 200ms ease;
}
.lp-faq-item[open] summary::after { transform: rotate(45deg); }
.lp-faq-item p { margin: 0 0 20px; font-size: 0.95rem; line-height: 1.65; max-width: 640px; }

/* --- final CTA ------------------------------------------------------------------------- */

.lp-cta-final { text-align: center; }
.lp-cta-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 80px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(500px 260px at 50% -80px, rgba(208, 146, 94, 0.16), transparent 70%),
    linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 20px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5);
}
.lp-cta-card .lp-ctas { justify-content: center; }
.lp-cta-card .lp-sub { margin-left: auto; margin-right: auto; }
.lp-cta-seal { display: flex; justify-content: center; margin-bottom: 20px; }
.lp-cta-seal .nell-seal { width: 54px; height: 54px; color: var(--mk-copper); }

/* --- pricing page ------------------------------------------------------------------------ */

.mk-price-hero { padding: clamp(40px, 7vw, 80px) 0 clamp(20px, 4vw, 40px); max-width: 760px; }

body.mk .plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  align-items: stretch;
}
body.mk .plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-hairline);
  border-radius: 16px;
  padding: 30px 28px;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
body.mk .plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4);
}
body.mk .plan-card.hero {
  border-color: var(--mk-copper);
  box-shadow: 0 0 0 1px var(--mk-copper), 0 24px 60px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(340px 180px at 50% -60px, rgba(208, 146, 94, 0.14), transparent 70%),
    linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
}
body.mk .plan-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--mk-copper);
  color: #1A120B;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
}
body.mk .plan-card h2 {
  font-family: var(--mk-serif);
  font-size: 1.3rem;
  color: var(--mk-ink);
  margin: 0 0 10px;
}
body.mk .plan-price {
  font-family: var(--mk-serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--mk-ink);
  letter-spacing: -0.02em;
}
body.mk .plan-price span { font-size: 1rem; font-weight: 400; color: var(--mk-muted); font-family: var(--mk-sans); }
body.mk .plan-credits { font-size: 0.88rem; line-height: 1.5; margin: 8px 0 18px; }
body.mk .plan-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
}
body.mk .plan-features li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  color: var(--mk-body-c);
}
body.mk .plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mk-copper);
  font-weight: 700;
}
body.mk .plan-trial {
  font-family: var(--mk-mono);
  font-size: 0.74rem;
  color: var(--mk-copper-hi);
  margin: 0 0 12px;
}
body.mk .plan-card .mk-btn { width: 100%; }

.mk-credit-note {
  max-width: 640px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--mk-muted);
}

.mk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mk-compare {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  background: var(--mk-surface);
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 14px;
  overflow: hidden;
}
.mk-compare th,
.mk-compare td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--mk-hairline);
  text-align: center;
}
.mk-compare td:first-child { text-align: left; color: var(--mk-body-c); }
.mk-compare th {
  font-family: var(--mk-serif);
  font-size: 1.05rem;
  color: var(--mk-ink);
  background: var(--mk-surface-2);
}
.mk-compare tr:last-child td { border-bottom: none; }
.mk-compare .hero-col { background: rgba(208, 146, 94, 0.09); color: var(--mk-ink); }

/* --- auth pages (login / register / reset / verify / unsubscribe) ------------- */

.mk-auth-wrap {
  display: flex;
  justify-content: center;
  padding: clamp(32px, 7vw, 80px) 0 clamp(48px, 8vw, 100px);
}
.mk-auth {
  width: min(420px, 100%);
  background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 18px;
  padding: clamp(28px, 5vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.mk-auth-seal { display: flex; justify-content: center; margin-bottom: 16px; }
.mk-auth-seal .nell-seal { width: 46px; height: 46px; color: var(--mk-copper); }
.mk-auth h1 {
  font-family: var(--mk-serif);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mk-ink);
  text-align: center;
  margin: 0 0 8px;
}
.mk-auth .mk-auth-lede {
  text-align: center;
  font-size: 0.92rem;
  color: var(--mk-muted);
  margin: 0 0 22px;
  line-height: 1.55;
}
.mk-auth form { display: grid; gap: 14px; margin: 0 0 18px; }
.mk-auth label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-auth input {
  width: 100%;
  box-sizing: border-box;
  background: var(--mk-bg-deep);
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 10px;
  color: var(--mk-ink);
  font-family: var(--mk-sans);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mk-auth input:focus {
  outline: none;
  border-color: var(--mk-copper);
  box-shadow: 0 0 0 3px rgba(208, 146, 94, 0.18);
}
.mk-auth .mk-btn { width: 100%; }
.mk-auth-links {
  text-align: center;
  font-size: 0.88rem;
  color: var(--mk-muted);
  margin: 8px 0 0;
}
.mk-auth-links a { color: var(--mk-copper-hi); text-decoration: none; }
.mk-auth-links a:hover { text-decoration: underline; }

/* Social sign-in buttons. Colours per each provider's branding guidelines
   (Google: white/#747775/#1F1F1F; Apple: black/white; Microsoft: white/
   #8C8C8C/#5E5E5E + fixed 4-square palette) — the shared pill shape is
   ours, the palettes and logos are theirs. */
.mk-sso { display: grid; gap: 10px; }
.mk-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.mk-sso-btn:hover { transform: translateY(-1px); filter: brightness(0.97); }
.mk-sso-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(208, 146, 94, 0.35);
}
.mk-sso-icon { display: inline-flex; align-items: center; }
.mk-sso-google { background: #ffffff; border: 1px solid #747775; color: #1f1f1f; }
/* The marketing surface is dark (#0E0B09): Apple's HIG mandates the WHITE
   button variant on dark backgrounds (black is for light pages only). */
.mk-sso-apple { background: #ffffff; border: 1px solid #ffffff; color: #000000; }
.mk-sso-microsoft { background: #ffffff; border: 1px solid #8c8c8c; color: #5e5e5e; }

/* Loading state: swap the provider mark for a spinner the moment the
   button is clicked — the OAuth redirect can take a beat and a silent
   button reads as broken. */
.mk-sso-btn.is-loading { pointer-events: none; opacity: 0.8; }
.mk-sso-btn.is-loading .mk-sso-icon svg { display: none; }
.mk-sso-btn.is-loading .mk-sso-icon::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mk-spin 0.8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mk-sso-btn.is-loading .mk-sso-icon::after { animation-duration: 1.6s; }
}

.mk-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--mk-muted);
  font-family: var(--mk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mk-auth-divider::before,
.mk-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--mk-hairline); }

/* --- footer ----------------------------------------------------------------------- */

.mk-footer {
  border-top: 1px solid var(--mk-hairline);
  margin-top: clamp(56px, 9vw, 110px);
  padding: clamp(36px, 6vw, 60px) clamp(16px, 4vw, 40px);
  background: var(--mk-bg-deep);
}
.mk-footer-inner {
  max-width: var(--mk-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}
.mk-footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.mk-footer-brand .nell-seal { width: 34px; height: 34px; color: var(--mk-copper); flex-shrink: 0; margin-top: 2px; }
.mk-footer-line { margin: 6px 0 2px; font-size: 0.85rem; color: var(--mk-body-c); }
.mk-footer-fine { margin: 0; font-size: 0.75rem; color: var(--mk-muted); }
.mk-footer-nav { display: flex; gap: 24px; }
.mk-footer-nav a { color: var(--mk-muted); text-decoration: none; font-size: 0.85rem; }
.mk-footer-nav a:hover { color: var(--mk-copper-hi); }

/* --- small screens ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .mk-hero.lp-hero { grid-template-columns: 1fr; padding-top: 32px; }
  .lp-hero-aside { order: -1; }
  .lp-envelope { width: min(300px, 82%); }
  .lp-seal { grid-template-columns: 1fr; }
  .lp-seal-stage { min-height: 260px; order: 1; margin-top: 8px; }
}

@media (max-width: 640px) {
  .mk-header { padding-left: 16px; padding-right: 16px; }
  .mk-nav > a:not(.mk-btn):not([href*="login"]) { display: none; }
  .lp-ctas .mk-btn-big { width: 100%; }
  .lp-triage-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "from chip" "subject chip" "detail chip";
  }
  .mk-footer-inner { flex-direction: column; }
}

/* --- Conversational signup (register page): scripted Nell interview ---- */
/* .mk-auth form sets display:grid, which defeats the hidden attribute —
   the conversational mode toggles the classic form away with [hidden]. */
.mk-auth form[hidden] { display: none !important; }
.mk-chat-toggle[hidden] { display: none !important; }

.mk-chat-toggle {
  display: block;
  width: 100%;
  margin: 14px 0 4px;
  background: none;
  border: none;
  color: var(--mk-copper-hi);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: center;
}
.mk-chat-toggle:hover { text-decoration: underline; }
.mk-chat-signup[hidden] { display: none !important; }
.mk-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 2px 10px;
}
.mk-chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.mk-chat-msg.nell {
  align-self: flex-start;
  background: var(--mk-surface-2);
  border: 1px solid var(--mk-hairline-strong);
  color: var(--mk-ink);
  border-bottom-left-radius: 4px;
}
.mk-chat-msg.user {
  align-self: flex-end;
  background: var(--mk-copper);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.mk-chat-cta { display: flex; justify-content: center; padding: 6px 0; }
.mk-chat-composer {
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;
}
.mk-chat-composer[hidden] { display: none !important; }
.mk-chat-composer input {
  flex: 1;
  min-width: 0;
  background: var(--mk-surface);
  border: 1px solid var(--mk-hairline-strong);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--mk-ink);
  font: inherit;
  font-size: 0.92rem;
}
.mk-chat-composer input:focus { outline: 1px solid var(--mk-copper); }

/* --- legal pages (privacy, terms) -------------------------------------- */

.mk-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px) 80px;
  font-family: var(--mk-serif);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--mk-body-c);
}
.mk-legal h2 {
  font-family: var(--mk-sans);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--mk-ink);
  margin: 2.4em 0 0.6em;
  letter-spacing: -0.01em;
}
.mk-legal h2:first-child { margin-top: 0; }
.mk-legal h3 {
  font-family: var(--mk-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--mk-copper-hi);
  margin: 1.6em 0 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-legal p { margin: 0.6em 0; }
.mk-legal ul {
  margin: 0.6em 0;
  padding-left: 1.4em;
}
.mk-legal li {
  margin: 0.35em 0;
}
.mk-legal li::marker { color: var(--mk-copper-dim); }
.mk-legal strong { color: var(--mk-ink); font-weight: 600; }
.mk-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-family: var(--mk-sans);
  font-size: 0.9rem;
  line-height: 1.5;
}
.mk-legal th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--mk-hairline-strong);
  color: var(--mk-ink);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mk-legal td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--mk-hairline);
  vertical-align: top;
}
.mk-legal-email {
  font-family: var(--mk-mono);
  font-size: 0.92em;
  color: var(--mk-copper);
}
@media (max-width: 600px) {
  .mk-legal table { font-size: 0.82rem; }
  .mk-legal th, .mk-legal td { padding: 6px 8px; }
}