/* Marketing pages (loaded by the landing chrome only, after shell.css).
   Interior-page building blocks for /features, /how-it-works, /pricing,
   /creator-studio, /channel-analytics plus the rebuilt homepage sections and
   the marketing footer. Reuses shell.css primitives (.or-btn, .or-eyebrow,
   .cr-h, .home-steps, .home-faq, .wcta, .shot) and the porcelain palette. */

/* ---- sticky header: solid after 20px scroll (class set by landing.html) ---- */
.landing-body .landing-top {
  position: sticky; top: 0; z-index: 400; background: transparent;
  border-bottom: 1px solid transparent; padding-bottom: 12px;
}
.landing-body .landing-top.is-scrolled {
  background: rgba(255, 255, 255, .96); border-bottom-color: var(--or-line);
}
@supports (backdrop-filter: blur(4px)) {
  .landing-body .landing-top.is-scrolled { background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); }
}

/* ---- interior page hero (centered; narrower than the homepage split hero) ---- */
.mkt-hero { text-align: center; padding: 40px 0 14px; }
.mkt-hero .or-eyebrow { justify-content: center; }
.mkt-hero h1 {
  font-family: var(--or-serif); font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12;
  max-width: 22ch; margin: 10px auto 14px;
}
.mkt-hero-sub { color: var(--or-muted); font-size: 1.08rem; line-height: 1.6; max-width: 58ch; margin: 0 auto 22px; }
.mkt-micro { color: var(--or-muted); font-size: .88rem; margin-top: 12px; }

/* ---- shared layout utilities (replace per-section inline styles) ---- */
.mkt-center { text-align: center; }
/* Centered eyebrow opening a new section; the band/rev variants skip the gap. */
.or-eyebrow.mkt-eyebrow-c { justify-content: center; }
.or-eyebrow.mkt-gap-top { margin-top: 56px; }
/* Section heading directly under an eyebrow sits tight against it. */
.landing-wide .cr-h.mkt-h-tight { margin-top: 8px; }
/* Centered lead paragraph under a section heading. */
.mkt-lead { color: var(--or-muted); line-height: 1.6; text-align: center; max-width: 62ch; margin: 0 auto 18px; }
.landing-wide .mkt-lead { text-align: center; margin: 0 auto 18px; }
.mkt-cta-row { text-align: center; margin-bottom: 8px; }

/* ---- coming-soon badge (unshipped capabilities named in copy) ---- */
.mkt-soon {
  display: inline-block; vertical-align: middle; margin-left: 2px;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--or-accent); background: var(--or-shade);
  border: 1px solid var(--or-line); border-radius: 999px; padding: 2px 8px;
}

/* ---- alternating screenshot/copy rows ---- */
.mkt-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 44px; align-items: center; margin: 54px 0;
}
.mkt-row.flip .mkt-row-copy { order: 2; }
.mkt-row.flip .mkt-row-shot { order: 1; }
.mkt-row-copy h3 { font-family: var(--or-serif); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0 0 10px; }
.mkt-row-copy > p { color: var(--or-muted); line-height: 1.62; margin: 0 0 14px; }
.mkt-bullets { list-style: none; margin: 0 0 14px; padding: 0; }
.mkt-bullets li { padding: 5px 0 5px 26px; position: relative; line-height: 1.5; font-size: .96rem; }
.mkt-bullets li::before {
  content: "✓"; position: absolute; left: 2px; top: 5px;
  color: var(--or-accent); font-weight: 700;
}
.mkt-row-cta { font-weight: 600; font-size: .95rem; color: var(--or-accent); }
.mkt-row-cta:hover { color: var(--or-coral); }
.mkt-row-shot .shot { width: 100%; }
/* Copy-only rows (screenshot pending) keep a readable measure. */
.mkt-row:not(:has(.mkt-row-shot)) { display: block; max-width: 640px; }
@media (max-width: 780px) {
  .mkt-row, .mkt-row.flip { display: block; margin: 40px 0; }
  .mkt-row-shot { margin-top: 18px; }
}

/* ---- pricing ---- */
.mkt-price-card {
  max-width: 460px; margin: 26px auto; padding: 30px 30px 26px;
  background: var(--or-surface); border: 1px solid var(--or-line); border-radius: 18px;
  box-shadow: 0 24px 60px -38px rgba(20, 30, 25, .4);
}
.mkt-price-card .plan { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; color: var(--or-accent); }
.mkt-price-card .price { font-family: var(--or-serif); font-weight: 600; font-size: 2.6rem; margin: 6px 0 2px; }
.mkt-price-card .price small { font-size: 1rem; color: var(--or-muted); font-family: var(--or-sans, inherit); font-weight: 500; }
.mkt-price-card .sub { color: var(--or-muted); font-size: .95rem; margin: 0 0 16px; }
.mkt-price-card .mkt-bullets { margin-bottom: 18px; }
.mkt-price-card .fee-line {
  border-top: 1px solid var(--or-line); margin-top: 4px; padding-top: 14px;
  font-size: .95rem; font-weight: 600;
}
.mkt-price-card .or-btn { display: block; text-align: center; margin-top: 16px; }
.mkt-price-card .foot { color: var(--or-muted); font-size: .84rem; margin: 12px 0 0; text-align: center; }

/* Earnings + comparison tables (shared look). Wide content scrolls inside
   its own container — the page never scrolls sideways. */
.mkt-table-wrap { overflow-x: auto; margin: 22px 0; }
.mkt-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.mkt-table th, .mkt-table td { padding: 10px 14px; border-bottom: 1px solid var(--or-line); text-align: left; }
.mkt-table th { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--or-muted); }
.mkt-table td.num, .mkt-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-table td.payout { font-weight: 700; color: var(--or-accent); }
.mkt-table .yes { color: var(--or-accent); font-weight: 700; }
.mkt-table .no { color: var(--or-muted); }
.mkt-disclaimer { color: var(--or-muted); font-size: .85rem; max-width: 68ch; }

/* Revenue calculator (client-side what-if; fees come from data attributes). */
.mkt-calc {
  max-width: 640px; margin: 24px auto; padding: 24px 26px;
  background: var(--or-surface); border: 1px solid var(--or-line); border-radius: 18px;
}
.mkt-calc label { display: block; font-size: .88rem; font-weight: 600; margin: 14px 0 4px; }
.mkt-calc label:first-of-type { margin-top: 0; }
.mkt-calc input[type="range"] { width: 100%; accent-color: var(--or-accent); }
.mkt-calc .val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--or-accent); }
.mkt-calc .mkt-disclaimer { margin-top: 14px; }
.mkt-calc-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.mkt-calc-out .cell { background: #fff; border: 1px solid var(--or-line); border-radius: 12px; padding: 12px 14px; }
.mkt-calc-out .cell .k { font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--or-muted); }
.mkt-calc-out .cell .v { font-family: var(--or-serif); font-size: 1.4rem; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mkt-calc-out .cell.payout .v { color: var(--or-accent); }
@media (max-width: 520px) { .mkt-calc-out { grid-template-columns: 1fr; } }

/* ---- stack-replacement two-column list (homepage §9) ---- */
.mkt-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 8px; }
.mkt-stack .col { border: 1px solid var(--or-line); border-radius: 16px; padding: 20px 22px; background: var(--or-surface); }
.mkt-stack .col.ours { border-color: var(--or-accent); box-shadow: 0 18px 44px -30px rgba(54, 116, 110, .5); }
.mkt-stack h4 { margin: 0 0 10px; font-size: 1.05rem; }
.mkt-stack ul { list-style: none; margin: 0; padding: 0; }
.mkt-stack li { padding: 6px 0 6px 24px; position: relative; font-size: .95rem; line-height: 1.45; }
.mkt-stack .col.theirs li::before { content: "•"; position: absolute; left: 6px; color: var(--or-muted); }
.mkt-stack .col.ours li::before { content: "✓"; position: absolute; left: 2px; color: var(--or-accent); font-weight: 700; }
@media (max-width: 620px) { .mkt-stack { grid-template-columns: 1fr; } }

/* ---- methodology / plain prose section (channel-analytics) ---- */
.mkt-method {
  border: 1px solid var(--or-line); border-radius: 16px; background: var(--or-shade);
  padding: 22px 26px; margin: 40px 0; max-width: 760px;
}
.mkt-method h3 { font-family: var(--or-serif); font-weight: 600; font-size: 1.25rem; margin: 0 0 8px; }
.mkt-method p { color: var(--or-muted); line-height: 1.6; margin: 0; }
.mkt-method ul { margin: 0; padding-left: 20px; }
.mkt-method li { color: var(--or-muted); line-height: 1.6; font-size: .93rem; padding: 3px 0; }

/* ---- homepage: kitchen-preview tabs strip + product grid tweaks ---- */
.mkt-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }
.mkt-tabs span {
  font-size: .88rem; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--or-line); color: var(--or-muted); background: var(--or-surface);
}
.mkt-tabs span.on { color: #fff; background: var(--or-accent); border-color: var(--or-accent); }

/* ---- 4-column marketing footer ---- */
/* The landing body is a flex column (shell.css): keep the footer unshrunk and
   full-width like the .landing-foot it replaces. */
.mkt-foot { border-top: 1px solid var(--or-line); margin-top: 60px; width: 100%; flex-shrink: 0; }
.mkt-foot-grid {
  max-width: 1160px; margin: 0 auto; padding: 40px 28px 8px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px;
}
.mkt-foot-brand p { color: var(--or-muted); font-size: .9rem; line-height: 1.55; max-width: 34ch; margin: 10px 0 0; }
.mkt-foot h4 { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--or-muted); margin: 4px 0 10px; }
.mkt-foot-grid ul { list-style: none; margin: 0; padding: 0; }
.mkt-foot-grid li { padding: 4px 0; }
.mkt-foot-grid li a { color: var(--or-ink); font-weight: 500; font-size: .92rem; }
.mkt-foot-grid li a:hover { color: var(--or-accent); }
.mkt-foot-bottom {
  max-width: 1160px; margin: 0 auto; padding: 18px 28px 40px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .85rem; color: var(--or-muted);
}
@media (max-width: 780px) { .mkt-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mkt-foot-grid { grid-template-columns: 1fr; } }

/* ---- reduced motion: the sticky header class-toggle is instant already;
   kill any smooth-scroll behavior for anchor CTAs. ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}