/*
 * Marketing surface stylesheet -- loaded ONLY by layouts/marketing.html.erb (see that
 * layout's stylesheet_link_tag), never by layouts/application.html.erb. The public
 * landing page (D-03) uses a deliberately different visual LANGUAGE from the internal
 * app -- Outfit/Space Grotesk fonts, this page's own --mkt-* custom properties (below),
 * ported from docs/madeto-landing-mockup.html -- kept structurally independent of
 * tokens.css even though a post-launch retheme (user direction) moved tokens.css's own
 * --color-* values onto this same spruce-green/ink/paper palette: two copies of similar
 * values, not one shared source, so either surface's palette can still evolve on its own
 * without forcing a change on the other. This file therefore does NOT consume or
 * redefine any --color-*, --space-*, --radius-*, --text-*, or --shadow-* custom property
 * from tokens.css: making one design system inherit the other's tokens would mean every
 * future change to either fights the other. Every custom property below is scoped under
 * .shell--marketing (never :root), so the names can never collide with tokens.css's, and
 * every rule's selector is likewise scoped under .shell--marketing so this stylesheet
 * has zero effect if it were ever accidentally loaded alongside components.css on the
 * same page (it never is -- test/views/view_hygiene_test.rb's "marketing surface
 * isolation" group pins all of this).
 *
 * A few class names below (.btn, .btn--primary, .field, .flash/.flash--notice/
 * .flash--alert) deliberately reuse names components.css already uses -- the .flash
 * trio because layouts/marketing.html.erb intentionally renders the identical markup
 * application.html.erb does (the waitlist redirect lands on this page); .btn/
 * .btn--primary/.field because marketing/_waitlist_form.html.erb (plan 02-02) was built
 * once, against that BEM-ish vocabulary, and is rendered unmodified on this page. The
 * .shell--marketing scoping on every rule is what makes the reuse safe: this page never
 * loads components.css, and the app never renders .shell--marketing, so the two
 * same-named rule sets never coexist against the same element.
 *
 * Task 1 ports only what the nav and hero need. Plan 02-08 ports the mockup's remaining
 * sections into this same file; task 3 of this plan adds the isolation rules above as an
 * enforced regression gate, not just a comment.
 */

.shell--marketing {
  /* Ported from docs/madeto-landing-mockup.html's :root block, renamed --mkt-* and
     re-scoped under .shell--marketing so nothing here can ever be mistaken for (or
     collide with) a tokens.css design-token name. */
  --mkt-ink: #1B1F24;
  --mkt-paper: #FBFAF7;
  --mkt-spruce: #1E6F5C;
  --mkt-spruce-deep: #155445;
  --mkt-leaf: #D52B1E;
  --mkt-fog: #E2DFD7;
  --mkt-slate: #5B6570;
  --mkt-max: 1080px;

  /* Dark-section palette (post-launch, user direction) -- the page alternates dark/light
     background sections starting at the hero, the same treatment "Trust, built in"
     already used on its own. These four are that section's own literal values, lifted
     here as named custom properties so every dark section (hero, how-it-works, trust,
     pricing, faq) shares one definition instead of five copies of the same literals. */
  --mkt-dark-bg: var(--mkt-ink);
  --mkt-dark-text: #F4F3EF;
  --mkt-dark-muted: #B9BEC4;
  --mkt-dark-kicker: #7BC4B1;
  --mkt-dark-border: #3C444E;

  display: block;
  margin: 0;
  font-family: "Outfit", -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--mkt-ink);
  background: var(--mkt-paper);
  line-height: 1.6;
  font-size: 17px;
}

.shell--marketing * {
  box-sizing: border-box;
}

.shell--marketing a {
  color: inherit;
}

.shell--marketing a:focus-visible,
.shell--marketing button:focus-visible {
  outline: 3px solid var(--mkt-spruce);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Container -- docs/madeto-landing-mockup.html's .wrap, renamed to avoid a generic name
   colliding in spirit (if not in actual selector match) with any future marketing class. */
.shell--marketing .mkt-wrap {
  max-width: var(--mkt-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- flash (waitlist redirect lands on this page) ---------- */

.shell--marketing .flash {
  padding: 14px 18px;
  margin: 0;
  font-size: 15px;
  text-align: center;
}

.shell--marketing .flash--notice {
  background: #EAF3F0;
  color: var(--mkt-spruce-deep);
}

.shell--marketing .flash--alert {
  background: #FBEAEA;
  color: #B4574B;
}

/* ---------- nav (docs/madeto-landing-mockup.html lines 197-208) ---------- */

.shell--marketing .mkt-nav {
  border-bottom: 1px solid var(--mkt-fog);
  background: var(--mkt-paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.shell--marketing .mkt-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}

.shell--marketing .mkt-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* The shared shared/icons/_wordmark partial's own .platform-brand__logo class carries no
   size/color rules of its own (those live in layout.css, not loaded here) -- this page
   supplies its own. */
.shell--marketing .mkt-logo .platform-brand__logo {
  height: 48px;
  width: auto;
  display: block;
  color: var(--mkt-ink);
}

.shell--marketing .mkt-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15.5px;
}

.shell--marketing .mkt-nav-links a {
  text-decoration: none;
  color: var(--mkt-slate);
}

.shell--marketing .mkt-nav-links a:hover {
  color: var(--mkt-ink);
}

.shell--marketing .mkt-nav-links a.btn {
  color: #fff;
}

.shell--marketing .mkt-nav-links a.btn:hover {
  color: #fff;
}

@media (max-width: 720px) {
  .shell--marketing .mkt-nav-links a:not(.btn) {
    display: none;
  }
}

/* ---------- buttons (docs/madeto-landing-mockup.html's .btn/.ghost, renamed to this
   app's --modifier convention; the mockup's .big is no longer used -- every
   call-to-action button on the page is now the same plain .btn.btn--primary size for
   visual consistency, post-launch user direction) ---------- */

.shell--marketing .btn {
  display: inline-block;
  background: var(--mkt-spruce);
  color: #fff;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15.5px;
  border: none;
  cursor: pointer;
}

.shell--marketing .btn:hover {
  background: var(--mkt-spruce-deep);
  color: #fff;
}

.shell--marketing .btn--primary {
  background: var(--mkt-spruce);
  color: #fff;
}

.shell--marketing .btn--ghost {
  background: transparent;
  color: var(--mkt-ink);
  border: 1.5px solid var(--mkt-fog);
}

.shell--marketing .btn--ghost:hover {
  background: transparent;
  border-color: var(--mkt-slate);
}

/* ---------- waitlist form (marketing/_waitlist_form.html.erb, plan 02-02) ---------- */

.shell--marketing #waitlist {
  margin-top: 4px;
}

.shell--marketing .field {
  margin-bottom: 16px;
}

.shell--marketing .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mkt-ink);
}

.shell--marketing input[type="email"] {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 11px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--mkt-ink);
  background: #fff;
  border: 1.5px solid var(--mkt-fog);
  border-radius: 8px;
}

.shell--marketing input[type="email"]:focus {
  outline: none;
  border-color: var(--mkt-spruce);
  box-shadow: 0 0 0 3px rgba(30, 111, 92, 0.15);
}

/* 05.2-03: the static-export-only consent checkbox row
   (marketing/_waitlist_form.html.erb's `.field.field--consent`, 05.2-01) -- checkbox and
   label share one row, aligned to the label's first line of text, rather than the
   block-stacked checkbox/label the rest of .field uses. max-width matches the email
   input above so the row never runs wider than the rest of the form. */
.shell--marketing .field--consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 320px;
}

.shell--marketing .field--consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
}

.shell--marketing .field--consent label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
}

.shell--marketing .field--consent label a {
  text-decoration: underline;
}

/* ---------- hero (docs/madeto-landing-mockup.html lines 210-248) ---------- */

/* Dark (post-launch, user direction): the page now alternates dark/light section
   backgrounds starting here, the same treatment "Trust, built in" already used --
   dark-hero, light-problem, dark-how, light-features, dark-trust, light-scale,
   dark-pricing, light-cta, dark-faq, light-footer. The .ticket order-mockup card and the
   waitlist form's white input/green button are unaffected -- a light card/input already
   reads fine floating on a dark section (the same pattern .trail already used inside
   Trust), so only the section's own text needs a dark-appropriate color. */
.shell--marketing .hero {
  padding: 88px 0 96px;
  background: var(--mkt-dark-bg);
  color: var(--mkt-dark-text);
}

.shell--marketing .hero h1 {
  color: #fff;
}

.shell--marketing .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.shell--marketing h1 {
  font-size: clamp(38px, 5.2vw, 58px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 26px;
}

.shell--marketing .hero p.sub {
  margin: 0 0 18px;
  font-size: 19px;
  color: var(--mkt-dark-muted);
  max-width: 32em;
  font-weight: 300;
}

.shell--marketing .hero p.value-prop {
  margin: 0 0 30px;
  font-size: 17px;
  color: var(--mkt-dark-muted);
  max-width: 34em;
}

.shell--marketing .hero .actions {
  margin-bottom: 22px;
}

.shell--marketing .hero .actions .field label {
  color: var(--mkt-dark-text);
}

/* 05.2-03: the consent row's checkbox+label (rules above) default to the light-section
   ink/underline colors, which disappear against the hero's dark background -- overridden
   here the same way .actions .field label above already overrides the ordinary email
   field label for this one dark section. */
.shell--marketing .hero .field--consent label,
.shell--marketing .hero .field--consent label a {
  color: var(--mkt-dark-text);
}

.shell--marketing .hero .note {
  margin-top: 22px;
  font-size: 15px;
  color: var(--mkt-dark-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Same outlined-on-dark treatment Trust's own .role pills already use, rather than the
   light-card-on-light-paper look this had before the hero became a dark section. */
.shell--marketing .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  border: 1px solid var(--mkt-dark-border);
  background: transparent;
  border-radius: 99px;
  padding: 6px 15px;
  font-size: 14px;
  color: var(--mkt-dark-muted);
}

.shell--marketing .status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mkt-spruce);
  flex: none;
}

/* Order-ticket visual */

/* color: var(--mkt-ink) below is load-bearing, not decorative -- this is a white card
   that several of its own children (.ticket-head b, .row's value span) never gave an
   explicit color of their own, always relying on inheriting one from an ambient
   container. That was harmless while every section was the same light paper background,
   but the hero going dark (post-launch, user direction) made those children inherit the
   hero's off-white text color instead -- nearly invisible against this card's own white
   background. A self-contained light card must set its own text-color baseline rather
   than assume its ambient container's. */
.shell--marketing .ticket {
  background: #fff;
  color: var(--mkt-ink);
  border: 1px solid var(--mkt-fog);
  border-radius: 14px;
  font-family: "Space Grotesk", monospace, sans-serif;
  font-size: 13.5px;
  box-shadow: 0 24px 48px -32px rgba(27, 31, 36, .25);
  overflow: hidden;
}

.shell--marketing .ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mkt-fog);
}

.shell--marketing .ticket-head b {
  font-weight: 500;
}

.shell--marketing .pill {
  background: #EAF3F0;
  color: var(--mkt-spruce-deep);
  border-radius: 99px;
  padding: 3px 11px;
  font-size: 12px;
}

.shell--marketing .ticket-body {
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}

.shell--marketing .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.shell--marketing .row span:first-child {
  color: var(--mkt-slate);
}

.shell--marketing .stages {
  display: flex;
  border-top: 1px solid var(--mkt-fog);
}

.shell--marketing .stage {
  flex: 1;
  text-align: center;
  padding: 12px 4px;
  font-size: 12px;
  color: var(--mkt-slate);
  border-right: 1px solid var(--mkt-fog);
}

.shell--marketing .stage:last-child {
  border-right: none;
}

.shell--marketing .stage.done {
  color: var(--mkt-spruce-deep);
  background: #EAF3F0;
}

.shell--marketing .stage .tick {
  display: block;
  font-size: 14px;
}

.shell--marketing .audit {
  background: #F6F5F1;
  border-top: 1px solid var(--mkt-fog);
  padding: 12px 18px;
  font-size: 12px;
  color: var(--mkt-slate);
  line-height: 1.9;
}

.shell--marketing .audit b {
  color: var(--mkt-ink);
  font-weight: 500;
}

@media (max-width: 860px) {
  .shell--marketing .hero {
    padding: 56px 0 64px;
  }

  .shell--marketing .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---------- sections (docs/madeto-landing-mockup.html's generic section/.two-col rules,
   first used by "the problem" -- every later mockup section plan 02-08 ports reuses
   these same two rule sets) ---------- */

.shell--marketing section {
  padding: 96px 0;
}

.shell--marketing .two-col {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
}

.shell--marketing h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.shell--marketing .kicker {
  color: var(--mkt-spruce);
  font-weight: 500;
  margin-bottom: 14px;
  font-size: 16px;
}

/* :where(:not(.kicker)) -- a bare ".two-col p" is more specific than the base ".kicker"
   rule above (both are 2 classes, but this one adds a type selector), so it was silently
   winning the cascade for any kicker nested in a .two-col wrapper (the "problem" and
   "trust" sections) and greying it out to --mkt-slate instead of the intended spruce
   green. :where() wraps the exclusion so it contributes ZERO specificity of its own
   (unlike a bare :not(), which counts as a class) -- a first attempt using bare
   :not(.kicker) fixed the kicker but silently created a NEW bug: it also raised this
   rule's specificity enough to outrank .trust's own more-specific-looking `.trust p`
   override instead of losing to it on source order like before, so Trust's paragraph
   text rendered as illegible dark slate on its near-black background until that was
   caught and fixed by switching to :where() here instead. */
.shell--marketing .two-col p:where(:not(.kicker)) {
  color: var(--mkt-slate);
  margin-bottom: 18px;
  max-width: 36em;
}

/* "The problem" section's before/after list (docs/madeto-landing-mockup.html's
   .before) -- the ✕ mark is a generated pseudo-element, not an image, so no separate
   asset or aria concern. */
.shell--marketing .before {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--mkt-fog);
}

.shell--marketing .before li {
  padding: 14px 0;
  border-bottom: 1px solid var(--mkt-fog);
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--mkt-ink);
}

.shell--marketing .before li::before {
  content: "✕";
  color: #B4574B;
  font-size: 13px;
  flex: none;
}

@media (max-width: 860px) {
  .shell--marketing .two-col {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .shell--marketing section {
    padding: 72px 0;
  }
}

/* ---------- flow / how-it-works (docs/madeto-landing-mockup.html lines 273-303) ---------- */

/* Dark (post-launch, user direction, position 3 in the hero-onward alternation): .steps/
   .step are exclusive to this section (only _how_it_works.html.erb renders them), so
   their colors are overridden directly rather than through an extra section-scoped
   selector the way the shared .flow-head/.kicker rules below need to be. */
.shell--marketing .flow {
  background: var(--mkt-dark-bg);
  color: var(--mkt-dark-text);
}

.shell--marketing .flow h2 {
  color: #fff;
}

.shell--marketing .flow .kicker {
  color: var(--mkt-dark-kicker);
}

.shell--marketing .flow-head {
  max-width: 38em;
  margin-bottom: 56px;
}

/* :where(:not(.kicker)) -- see .two-col p's own comment above for why the exclusion is
   wrapped in :where() (zero specificity) rather than a bare :not() -- same specificity
   collision this rule had with the base .kicker rule for every kicker nested in a
   .flow-head wrapper (how-it-works, features, faq), greying all three out to
   --mkt-slate. */
.shell--marketing .flow-head p:where(:not(.kicker)) {
  color: var(--mkt-slate);
  margin-top: 16px;
}

/* Wins over the shared rule above on specificity (.flow adds a class the shared rule
   doesn't have) -- features and faq also reuse .flow-head but stay off this dark-scoped
   override. */
.shell--marketing .flow .flow-head p:where(:not(.kicker)) {
  color: var(--mkt-dark-muted);
}

.shell--marketing .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--mkt-dark-border);
}

.shell--marketing .step {
  padding: 28px 24px 8px 0;
  border-right: 1px solid var(--mkt-dark-border);
  margin-right: 24px;
}

.shell--marketing .step:last-child {
  border-right: none;
  margin-right: 0;
}

.shell--marketing .step .n {
  color: var(--mkt-dark-kicker);
  font-weight: 500;
  font-size: 15px;
}

.shell--marketing .step h3 {
  font-size: 19px;
  font-weight: 500;
  margin: 10px 0 8px;
  color: #fff;
}

.shell--marketing .step p {
  font-size: 15.5px;
  color: var(--mkt-dark-muted);
}

@media (max-width: 860px) {
  .shell--marketing .steps {
    grid-template-columns: 1fr;
  }

  .shell--marketing .step {
    border-right: none;
    margin-right: 0;
    border-bottom: 1px solid var(--mkt-fog);
    padding: 22px 0;
  }

  .shell--marketing .step:last-child {
    border-bottom: none;
  }
}

/* ---------- feature tabs (docs/madeto-landing-mockup.html lines 305-386) ---------- */

.shell--marketing .features {
  border-top: 1px solid var(--mkt-fog);
}

.shell--marketing .features .flow-head {
  margin-bottom: 40px;
}

.shell--marketing .tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--mkt-fog);
  flex-wrap: wrap;
}

.shell--marketing .tab {
  font: inherit;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--mkt-slate);
  background: none;
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
}

.shell--marketing .tab:hover {
  color: var(--mkt-ink);
}

.shell--marketing .tab[aria-selected="true"] {
  color: var(--mkt-ink);
  border-bottom-color: var(--mkt-spruce);
}

.shell--marketing .panel {
  display: none;
  padding-top: 44px;
}

.shell--marketing .panel.active {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.shell--marketing .panel h3 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.shell--marketing .panel p {
  color: var(--mkt-slate);
  max-width: 34em;
  margin-bottom: 14px;
}

.shell--marketing .mini {
  background: #fff;
  border: 1px solid var(--mkt-fog);
  border-radius: 12px;
  overflow: hidden;
  font-family: "Space Grotesk", monospace, sans-serif;
  font-size: 13.5px;
}

.shell--marketing .mini-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--mkt-fog);
  font-weight: 500;
}

.shell--marketing .mini-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--mkt-fog);
}

.shell--marketing .mini-row:last-child {
  border-bottom: none;
}

.shell--marketing .mini-row span:first-child {
  color: var(--mkt-slate);
}

.shell--marketing .mini-row .warn {
  color: #A0522D;
}

.shell--marketing .mini-row.sel {
  background: #EAF3F0;
}

.shell--marketing .mini-row .radio {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--mkt-slate);
  margin-right: 9px;
  vertical-align: -2px;
}

.shell--marketing .mini-row.sel .radio {
  border-color: var(--mkt-spruce);
  background: radial-gradient(circle, var(--mkt-spruce) 40%, transparent 45%);
}

.shell--marketing .int-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shell--marketing .int {
  border: 1px solid var(--mkt-fog);
  background: #fff;
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 14.5px;
}

/* The mockup expresses this one variant tag inline (style="border-color:...;color:...")
   -- ViewHygieneTest forbids style= attributes under app/views, so it becomes its own
   class here instead. */
.shell--marketing .int--api {
  border-color: var(--mkt-spruce);
  color: var(--mkt-spruce-deep);
}

.shell--marketing .planned-note {
  font-size: 14px;
  color: var(--mkt-slate);
  margin-top: 16px;
}

@media (max-width: 860px) {
  .shell--marketing .panel.active {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- trust (dark) (docs/madeto-landing-mockup.html lines 388-412) ---------- */

.shell--marketing .trust {
  background: var(--mkt-dark-bg);
  color: var(--mkt-dark-text);
}

.shell--marketing .trust h2 {
  color: #fff;
}

.shell--marketing .trust .kicker {
  color: var(--mkt-dark-kicker);
}

.shell--marketing .trust p {
  color: var(--mkt-dark-muted);
}

/* The mockup expresses this section's lead-in paragraph's extra top margin inline
   (style="margin-top:18px") -- ViewHygieneTest forbids style= attributes, so it becomes
   its own class here instead. */
.shell--marketing .trust p.lead {
  margin-top: 18px;
}

.shell--marketing .trail {
  background: #242A31;
  border: 1px solid #343B44;
  border-radius: 12px;
  font-family: "Space Grotesk", monospace, sans-serif;
  font-size: 13.5px;
  line-height: 2.05;
  padding: 20px 24px;
  color: #B9BEC4;
}

.shell--marketing .trail b {
  color: #fff;
  font-weight: 500;
}

.shell--marketing .trail .t {
  color: #7BC4B1;
}

.shell--marketing .roles {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.shell--marketing .role {
  border: 1px solid #3C444E;
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 14px;
  color: #D5D8DC;
}

/* ---------- scale (docs/madeto-landing-mockup.html lines 414-420) ---------- */

/* Generic (not .scale-scoped) -- _pricing.html.erb (plan 02-08 Task 3, no mockup
   counterpart) reuses this same lede-paragraph treatment. */
.shell--marketing .lede {
  color: var(--mkt-slate);
  max-width: 38em;
  margin-top: 16px;
}

/* Dark (post-launch, user direction, position 7 in the hero-onward alternation). ID
   selectors win outright over the shared base .kicker/.lede rules above, so no extra
   :not()/specificity juggling is needed the way the .flow-head-sharing sections needed. */
.shell--marketing #pricing {
  background: var(--mkt-dark-bg);
  color: var(--mkt-dark-text);
}

.shell--marketing #pricing h2 {
  color: #fff;
}

.shell--marketing #pricing .kicker {
  color: var(--mkt-dark-kicker);
}

.shell--marketing #pricing .lede {
  color: var(--mkt-dark-muted);
}

/* .lede has no bottom margin of its own (unlike .cta p's 34px), so the pricing section's
   "Join the waitlist" link needs its own top spacing off the paragraph above it. */
.shell--marketing #pricing .btn {
  margin-top: 8px;
}

/* ---------- cta (docs/madeto-landing-mockup.html lines 432-438) ---------- */

.shell--marketing .cta {
  text-align: left;
  padding: 110px 0;
}

.shell--marketing .cta h2 {
  max-width: 16em;
}

/* :where(:not(.kicker)) -- see .two-col p's own comment for why the exclusion is
   wrapped in :where(): without it this rule wins over the base .kicker rule on both
   color and margin, greying the kicker out and giving it this paragraph's much larger
   bottom margin. */
.shell--marketing .cta p:where(:not(.kicker)) {
  color: var(--mkt-slate);
  margin: 20px 0 34px;
  max-width: 34em;
}

/* ---------- footer (docs/madeto-landing-mockup.html lines 440-445) ---------- */

.shell--marketing footer {
  border-top: 1px solid var(--mkt-fog);
  padding: 34px 0;
  font-size: 14.5px;
  color: var(--mkt-slate);
}

.shell--marketing .foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- faq (D-09, no mockup counterpart -- plan 02-10) ---------- */

/* Dark (post-launch, user direction, position 9 in the hero-onward alternation). */
.shell--marketing #faq {
  background: var(--mkt-dark-bg);
  color: var(--mkt-dark-text);
}

.shell--marketing #faq h2 {
  color: #fff;
}

.shell--marketing #faq .kicker {
  color: var(--mkt-dark-kicker);
}

.shell--marketing #faq .flow-head p:where(:not(.kicker)) {
  color: var(--mkt-dark-muted);
}

.shell--marketing .faq-list {
  margin: 0;
  border-top: 1px solid var(--mkt-dark-border);
}

.shell--marketing .faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--mkt-dark-border);
}

.shell--marketing .faq-item dt {
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}

.shell--marketing .faq-item dd {
  margin: 0;
  color: var(--mkt-dark-muted);
  max-width: 44em;
}

/* ---------- prose (05.2-07, D-10) -- standalone long-form pages: the privacy page
   today, the blog (05.2-04) reuses the same rules. A single readable column, not the
   landing page's alternating dark/light section rhythm. No font-size on `.prose h2` --
   ViewHygieneTest's "no section-scoped h2 selector overrides font-size" gate applies to
   any selector ending in " h2", not just the landing page's own sections. */

.shell--marketing .prose {
  max-width: 40em;
  margin: 0 auto;
  padding: 64px 0;
}

.shell--marketing .prose h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 8px;
}

.shell--marketing .prose p {
  color: var(--mkt-slate);
  margin: 0 0 18px;
}

.shell--marketing .prose h2 {
  margin: 40px 0 12px;
}

.shell--marketing .prose h3 {
  margin: 28px 0 10px;
}

.shell--marketing .prose ul,
.shell--marketing .prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--mkt-slate);
}

.shell--marketing .prose li {
  margin-bottom: 8px;
}

.shell--marketing .prose a {
  text-decoration: underline;
}

.shell--marketing .prose code {
  font-family: "Space Grotesk", monospace, sans-serif;
  background: #F6F5F1;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.shell--marketing .prose pre {
  background: #F6F5F1;
  border: 1px solid var(--mkt-fog);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
}

.shell--marketing .prose pre code {
  background: none;
  padding: 0;
}

.shell--marketing .prose blockquote {
  border-left: 3px solid var(--mkt-fog);
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--mkt-slate);
}

.shell--marketing .prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
}

.shell--marketing .prose th,
.shell--marketing .prose td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--mkt-fog);
}

/* ---------- outcome (05.2-07 Task 1, D-03) -- the four waitlist outcome pages: one
   centered-left message and a single action link, vertically padded like .cta. */

.shell--marketing .outcome {
  padding: 110px 0;
  text-align: left;
}

.shell--marketing .outcome .lede {
  margin-bottom: 28px;
  max-width: 40em;
}

/* ---------- blog (05.2-08, D-22/D-23) -- .post-list is the index page's list of posts;
   .post-meta is the date + reading-time line shared by both the index (per list item) and
   the post page itself (below its h1). Neither selector sets font-size on an h2 -- no h2
   appears in either block -- so ViewHygieneTest's font-size gate is untouched by this
   addition. */

.shell--marketing .post-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.shell--marketing .post-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--mkt-fog);
}

.shell--marketing .post-list li:first-child {
  border-top: 1px solid var(--mkt-fog);
}

.shell--marketing .post-list a {
  font-weight: 500;
  font-size: 19px;
  text-decoration: none;
}

.shell--marketing .post-list a:hover {
  text-decoration: underline;
}

.shell--marketing .post-meta {
  color: var(--mkt-slate);
  font-size: 14px;
  margin: 6px 0 10px;
}

/* ---------- post share row (blog/_share.html.erb) -- a wrapping row of pill links below
   the post body. The .post-share__link rules reset .prose a's underline, and the copy
   button's "Copied" swap keys off .copy-value--copied, the class the shared clipboard
   Stimulus controller toggles for 1.5s after a copy. */

.shell--marketing .post-share {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--mkt-fog);
}

.shell--marketing .prose .post-share__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--mkt-ink);
  margin: 0 0 12px;
}

.shell--marketing .prose .post-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shell--marketing .prose .post-share__list li {
  margin: 0;
}

.shell--marketing .prose .post-share__link {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 9px 14px;
  border: 1px solid var(--mkt-fog);
  border-radius: 999px;
  background: #fff;
  color: var(--mkt-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.shell--marketing .prose .post-share__link:hover {
  border-color: var(--mkt-spruce);
  color: var(--mkt-spruce);
}

.shell--marketing .post-share__copied-label {
  display: none;
}

.shell--marketing .copy-value--copied .post-share__copy-label {
  display: none;
}

.shell--marketing .copy-value--copied .post-share__copied-label {
  display: inline;
}

.shell--marketing .prose .post-share__copy.copy-value--copied {
  border-color: var(--mkt-spruce);
  color: var(--mkt-spruce);
}