/* DeckNotes Marketing — editorial layer, scoped under .is-marketing */

:root {
  /* --serif-display lives in application.css (loaded before this file on
     every layout that includes marketing). Marketing inherits it so the
     app and marketing pages share one source of truth for the display
     typeface. Don't redeclare here. */

  /* Marketing display scale. Extends, doesn't replace, the app's --fs-* tokens.
     Sizes use clamp() so they breathe between mobile and desktop. */
  --fs-display-1: clamp(4rem, 9vw, 8rem);    /* hero headline */
  --fs-display-2: clamp(2.25rem, 4.5vw, 4rem); /* page-level openers */
  --fs-display-3: 1.75rem;                    /* pull-quotes, marginalia */

  /* Marketing spacing — generous editorial breath. */
  --space-mkt-section: clamp(4rem, 8vw, 8rem);
  --space-mkt-gutter:  clamp(1.5rem, 4vw, 4rem);

  /* Yellow-on-cream rule color; punctuation, not background. */
  --rule-accent: var(--accent);
}

/* ------- Marketing body scope -------
   Every marketing-layout body gets .is-marketing. Every marketing component
   nests under it. This keeps the editorial register out of the app shell. */
body.is-marketing {
  background: var(--surface-warm);
  background-image: url("/marketing/grain.svg");
  background-repeat: repeat;
  background-size: 240px 240px;
  color: var(--text);
  font-family: var(--sans);
}

/* ------- Eyebrow → headline → subhead pattern -------
   The signature typographic stack used at the top of hero, page openers,
   and section starts. */
.is-marketing .mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-5);
}
.is-marketing .mkt-eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--rule-accent);
  flex: 0 0 auto;
}

.is-marketing .mkt-headline-display {
  font-family: var(--serif-display);
  font-size: var(--fs-display-1);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--text);
  margin: 0;
  /* Auto-balance line breaks so "Thanks for the feedback." breaks at a
     pleasing point regardless of viewport width. Modern browsers handle
     this gracefully; older ones fall back to word-wrap defaults. */
  text-wrap: balance;
  hanging-punctuation: first last; /* Safari progressive enhancement */
}
.is-marketing .mkt-headline-display .mkt-quote {
  color: var(--text-4);
  font-weight: 400;
}
/* Hanging punctuation for the leading quote — pulls it into the left
   margin so the first letter of the headline aligns with the body text
   underneath. Falls back gracefully where unsupported. */
.is-marketing .mkt-headline-display .mkt-quote--lead {
  display: inline-block;
  margin-left: -0.55em;
}

.is-marketing .mkt-headline-section {
  font-family: var(--serif-display);
  font-size: var(--fs-display-2);
  font-weight: 500;
  font-variation-settings: "opsz" 80;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--text);
  margin: 0 0 var(--space-5);
}
@media (max-width: 600px) {
  .is-marketing .mkt-headline-section { display: none; }
}

.is-marketing .mkt-subhead {
  font-family: var(--sans);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 36rem;
  margin: 0 0 var(--space-6);
}

/* ------- Pull-quote (marginalia) -------
   Used for sample comments revealed under the panel strip and as section
   pull-quotes on the about page. */
.is-marketing .mkt-pull-quote {
  font-family: var(--serif-display);
  font-size: var(--fs-display-3);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  line-height: 1.35;
  color: var(--text);
  max-width: 40rem;
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule-accent);
}
.is-marketing .mkt-pull-quote-attribution {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ------- Trust microcopy footnote -------
   Small mono-spaced footnote with a yellow rule prefix. Used under the
   primary CTA and as section footnotes. */
.is-marketing .mkt-footnote {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-4);
  max-width: 32rem;
  margin: var(--space-4) 0 0;
}
.is-marketing .mkt-footnote::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--rule-accent);
  margin-top: 0.6em;
  flex: 0 0 auto;
}

/* ------- Primary CTA -------
   Yellow-on-ink, no shadow, sharp 4px radius. Yellow as punctuation. */
.is-marketing .mkt-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.is-marketing .mkt-cta-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.is-marketing .mkt-cta-primary:active { transform: translateY(0); }

/* Compact CTA — used for header sign-in button. Smaller padding,
   keeps the same yellow-on-ink discipline. */
.is-marketing .mkt-cta-primary--compact {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
}

/* Wide CTA — used for the hero Try It Now button. Sized to match the
   secondary "See the demo" button so the pair reads as parallel actions. */
.is-marketing .mkt-cta-primary--wide {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  font-weight: 500;
}
.is-marketing .mkt-cta-primary__icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
}
.is-marketing .mkt-cta-primary__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Outline variant — accent border, no fill. Used for active-but-secondary
   buttons (e.g. Free tier "Get started" — entry point, not the conversion
   target). Hovers fill in to reinforce that it's clickable. */
.is-marketing .mkt-cta-primary--outline {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.is-marketing .mkt-cta-primary--outline:hover {
  background: var(--accent);
  color: var(--ink-on-accent);
}

.is-marketing .mkt-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.is-marketing .mkt-cta-secondary:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ------- Section container -------
   Marketing pages run a single content column with generous max-width and
   editorial breath between sections. */
.is-marketing .mkt-section {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-mkt-section) var(--space-mkt-gutter);
}
.is-marketing .mkt-section--narrow {
  max-width: 52rem;
}

/* ------- Numbered editorial caption -------
   The contact-sheet caption used under each panelist portrait. */
.is-marketing .mkt-caption-number {
  font-family: var(--serif-display);
  font-size: 0.875rem;
  font-weight: 500;
  font-variation-settings: "opsz" 14;
  color: var(--text-3);
  margin: 0;
  letter-spacing: 0.02em;
}
/* Name sits ABOVE the portrait now — display-serif size, intimate scale.
   The previous numeric caption is no longer rendered. */
.is-marketing .mkt-caption-name {
  font-family: var(--serif-display);
  font-size: 1.125rem;
  font-weight: 500;
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin: 0 0 var(--space-2);
  line-height: 1.1;
}
.is-marketing .mkt-caption-role {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-3);
  margin: var(--space-2) 0 0;
}
.is-marketing .mkt-caption-role em {
  font-style: italic;
  font-weight: 500;
  color: var(--text-2);
}
.is-marketing .mkt-caption-question {
  font-family: var(--serif-display);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  color: var(--text-2);
  line-height: 1.35;
  margin: var(--space-1) 0 0;
}

/* ------- Panelist tile (contact-sheet unit) -------
   No card chrome. Photograph sits on cream paper. Click target is the
   whole tile. Active state is photographic (color stays; siblings desaturate). */
.is-marketing .mkt-panelist-tile {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.is-marketing .mkt-panelist-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0 var(--space-3);
  transition: filter var(--dur-slow) var(--ease-standard);
}
/* Custom-seat silhouette — gray figure on muted surface, framed like
   the photographic portraits. */
.is-marketing .mkt-panelist-portrait--silhouette {
  background: #C8BFB1;
  display: block;
  overflow: hidden;
  color: #948B7E;
}
.is-marketing .mkt-panelist-portrait--silhouette svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sibling-hover desaturation — when the parent strip is hovered, all
   tiles desaturate; the specific hovered tile undoes it. */
.is-marketing .mkt-panelist-row:hover .mkt-panelist-portrait {
  filter: grayscale(1);
}
.is-marketing .mkt-panelist-row .mkt-panelist-tile:hover .mkt-panelist-portrait,
.is-marketing .mkt-panelist-row .mkt-panelist-tile:focus-visible .mkt-panelist-portrait,
.is-marketing .mkt-panelist-tile.is-selected .mkt-panelist-portrait {
  filter: grayscale(0);
}
.is-marketing .mkt-panelist-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ------- Comment-rail mock -------
   The static hero asset. A simulated Slides editor with a slide thumb
   on the left and a comment rail on the right. Pure white surface for
   the rail (matches real Slides chrome); cream paper holds the page. */
.is-marketing .mkt-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
@media (max-width: 720px) {
  .is-marketing .mkt-rail { grid-template-columns: 1fr; }
}

/* Hero carousel — three .mkt-rail samples stacked, only the .is-active
   one is visible. Cross-fade keeps the swap calm. Controls (arrows + a
   row of named dots) live below the stage. */
.is-marketing .mkt-rail-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.is-marketing .mkt-rail-carousel-stage {
  position: relative;
  display: grid;
}
.is-marketing .mkt-rail-carousel-stage > .mkt-rail {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.is-marketing .mkt-rail-carousel-stage > .mkt-rail.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.is-marketing .mkt-rail-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.is-marketing .mkt-rail-carousel-arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.is-marketing .mkt-rail-carousel-arrow:hover {
  color: var(--text);
  border-color: var(--accent);
}
.is-marketing .mkt-rail-carousel-dots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-2);
}
.is-marketing .mkt-rail-carousel-dot {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.is-marketing .mkt-rail-carousel-dot:hover { color: var(--text); }
.is-marketing .mkt-rail-carousel-dot.is-active {
  color: var(--ink-on-accent);
  background: var(--accent);
}
@media (max-width: 560px) {
  .is-marketing .mkt-rail-carousel-dot-label { display: none; }
  .is-marketing .mkt-rail-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    background: var(--border);
  }
  .is-marketing .mkt-rail-carousel-dot.is-active { background: var(--accent); }
}

/* Slide thumbnail */
.is-marketing .mkt-rail-slide {
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-4);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.is-marketing .mkt-rail-slide-frame {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-5) var(--space-4);
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  min-height: 0;
}
.is-marketing .mkt-rail-slide-title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--sans-display);
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.01em;
}
.is-marketing .mkt-rail-slide-anchor {
  background: linear-gradient(transparent 65%, rgba(251, 188, 4, 0.45) 65%);
  padding: 0 0.05em;
}
.is-marketing .mkt-rail-slide-bullets {
  list-style: disc;
  padding-left: 1.1em;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(0.7rem, 1vw, 0.875rem);
  line-height: 1.45;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  align-self: start;
}
.is-marketing .mkt-rail-slide-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 100%;
  width: clamp(40px, 8vw, 80px);
  align-self: end;
  padding: var(--space-2) var(--space-1) 0;
  border-bottom: 1px solid var(--border);
}
.is-marketing .mkt-rail-slide-chart span {
  flex: 1;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  display: block;
  opacity: 0.85;
}
.is-marketing .mkt-rail-slide-chart span:nth-child(1) { background: var(--text-3); opacity: 0.5; }
.is-marketing .mkt-rail-slide-chart span:nth-child(2) { background: var(--accent); opacity: 1; }
.is-marketing .mkt-rail-slide-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.is-marketing .mkt-rail-slide-meta-icon { color: var(--accent-ink); }

/* Layout-specific slide elements --------------------------------------- */

/* Subtitle line — used by overstuffed and any layout with a deck-eyebrow */
.is-marketing .mkt-rail-slide-subtitle {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  color: var(--text-3);
  margin: -0.25em 0 0;
  font-style: italic;
}
.is-marketing .mkt-rail-slide-footnote {
  grid-column: 1 / -1;
  align-self: end;
  font-family: var(--sans);
  font-size: clamp(0.6rem, 0.75vw, 0.7rem);
  color: var(--text-4);
  margin: var(--space-2) 0 0;
  border-top: 1px solid var(--border);
  padding-top: var(--space-1-5);
}
.is-marketing .mkt-rail-slide-bullets--dense { grid-column: 1 / -1; }

/* KPI tiles — board-update scorecard. Span both grid columns of the
   slide-frame so the tiles get full slide width (no chart sits on the
   right in this layout). */
.is-marketing .mkt-rail-slide-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-self: start;
}
.is-marketing .mkt-rail-kpi {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.is-marketing .mkt-rail-kpi-label {
  font-family: var(--sans);
  font-size: clamp(0.55rem, 0.7vw, 0.65rem);
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.is-marketing .mkt-rail-kpi-value {
  font-family: var(--serif-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  color: var(--text);
  margin: 0;
  line-height: 1;
}
.is-marketing .mkt-rail-kpi-delta {
  font-family: var(--sans);
  font-size: clamp(0.6rem, 0.75vw, 0.72rem);
  margin: 2px 0 0;
}
.is-marketing .mkt-rail-kpi--good .mkt-rail-kpi-delta { color: #188038; }
.is-marketing .mkt-rail-kpi--flat .mkt-rail-kpi-delta { color: var(--text-3); }
.is-marketing .mkt-rail-kpi--bad  .mkt-rail-kpi-delta { color: #D93025; }

/* Two-column compare — pitch trade-off slides. Spans the full slide
   width like the KPI grid. */
.is-marketing .mkt-rail-slide-compare {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  align-self: start;
}
.is-marketing .mkt-rail-compare-col {
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--border-soft);
}
.is-marketing .mkt-rail-compare-col--good { background: rgba(24, 128, 56, 0.06); border-color: rgba(24, 128, 56, 0.25); }
.is-marketing .mkt-rail-compare-col--bad  { background: rgba(217, 48, 37, 0.05);  border-color: rgba(217, 48, 37, 0.20); }
.is-marketing .mkt-rail-compare-heading {
  font-family: var(--sans);
  font-size: clamp(0.6rem, 0.75vw, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-1);
}
.is-marketing .mkt-rail-compare-col--good .mkt-rail-compare-heading { color: #188038; }
.is-marketing .mkt-rail-compare-col--bad  .mkt-rail-compare-heading { color: #D93025; }
.is-marketing .mkt-rail-compare-points {
  list-style: disc;
  padding-left: 1em;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  line-height: 1.4;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Overstuffed — the kitchen-sink slide. Tighter title wraps, denser
   bullets, content visibly crammed into the same 16:9 frame as every
   other sample. A bottom fade hints that more would have been there. */
.is-marketing .mkt-rail--overstuffed .mkt-rail-slide-title {
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  line-height: 1.3;
}
.is-marketing .mkt-rail-slide-bullets--dense {
  font-size: clamp(0.6rem, 0.78vw, 0.72rem);
  line-height: 1.35;
  gap: var(--space-1);
}
.is-marketing .mkt-rail--overstuffed .mkt-rail-slide-frame {
  position: relative;
}
.is-marketing .mkt-rail--overstuffed .mkt-rail-slide-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--space-6);
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}

/* Comment rail */
.is-marketing .mkt-rail-aside {
  background: var(--surface);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  max-height: 480px;
  overflow-y: auto;
}
.is-marketing .mkt-rail-thread {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 6px);
  box-shadow: var(--shadow-1);
}
.is-marketing .mkt-rail-thread::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 3px;
  background: var(--mkt-stripe, var(--text-3));
  border-radius: 2px;
}
.is-marketing .mkt-rail-thread-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2-5);
  align-items: center;
  margin-bottom: var(--space-2);
}
.is-marketing .mkt-rail-thread-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.is-marketing .mkt-rail-thread-meta { min-width: 0; }
.is-marketing .mkt-rail-thread-name {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin: 0;
  color: var(--text);
  line-height: 1.2;
}
.is-marketing .mkt-rail-thread-role {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin: 1px 0 0;
  font-style: italic;
}
.is-marketing .mkt-rail-thread-resolve {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-4);
}
.is-marketing .mkt-rail-thread-anchor {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin: 0 0 var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  background: var(--accent-bg);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
  font-style: italic;
}
.is-marketing .mkt-rail-thread-body {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

/* ------- Hero section -------
   Single-column vertical stack. Eyebrow + single-line headline at top.
   Subhead + Try It Now button share a row, button right-aligned to the
   shared content edge. Mock card sits below, matching the same right edge. */
.is-marketing .mkt-hero {
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--space-mkt-section) var(--space-mkt-gutter) var(--space-12);
  display: grid;
  gap: var(--space-8);
}
/* In hero context: the headline is single-line. Override the default
   display-1 clamp so "Thanks for the feedback." fits without breaking,
   and undo the hanging-quote offset so quotes are typographically
   centered around the headline. */
.is-marketing .mkt-hero .mkt-headline-display {
  font-size: clamp(2.75rem, 6.5vw, 5.75rem);
  font-variation-settings: "opsz" 120, "SOFT" 50;
  line-height: 1;
  white-space: nowrap;
  overflow-x: visible;
  hanging-punctuation: none;
}
.is-marketing .mkt-hero .mkt-headline-display .mkt-quote--lead {
  margin-left: 0;
}
/* Subhead + CTA row: explainer on the left, button right-aligned so its
   right edge matches the right edge of the mock card below. */
.is-marketing .mkt-hero-pitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.is-marketing .mkt-hero-pitch .mkt-subhead {
  flex: 1 1 28rem;
  max-width: 36rem;
  margin: 0;
}
.is-marketing .mkt-hero-pitch .mkt-cta-primary {
  flex: 0 0 auto;
  margin-left: auto;
}
.is-marketing .mkt-hero-mock {
  margin-top: var(--space-2);
}

/* Hero action row — two buttons side-by-side. "See the demo" sits to
   the left as a quieter, glyph-led secondary; "Try It Now" stays the
   filled primary on the right. */
.is-marketing .mkt-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.is-marketing .mkt-cta-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.is-marketing .mkt-cta-secondary-btn:hover,
.is-marketing .mkt-cta-secondary-btn:focus-visible {
  color: var(--text);
  border-color: var(--text-3);
  background: var(--surface-2);
  outline: none;
}
.is-marketing .mkt-cta-secondary-btn__icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  color: var(--accent-ink);
}
.is-marketing .mkt-cta-secondary-btn__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ------- Panel strip — 5×2 contact-sheet grid on the landing page.
   On phones, flips to a horizontal scroller showing ~2.5 tiles to cue
   that more reviewers are off-screen to the right. */
.is-marketing .mkt-panel-strip-wrap { margin-top: var(--space-10); }
.is-marketing .mkt-panel-strip-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-10) var(--space-4);
}
.is-marketing .mkt-panel-strip-cell { min-width: 0; }

@media (max-width: 600px) {
  .is-marketing .mkt-panel-strip-row {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed past the page gutter so the first/last tile aren't clipped
       awkwardly against the section padding. */
    margin-inline: calc(-1 * var(--space-mkt-gutter));
    padding-inline: var(--space-mkt-gutter);
    scroll-padding-inline: var(--space-mkt-gutter);
  }
  .is-marketing .mkt-panel-strip-row::-webkit-scrollbar { display: none; }
  .is-marketing .mkt-panel-strip-cell {
    flex: 0 0 38%;
    scroll-snap-align: start;
  }
}

/* ------- Panel grid (/panel page) -------
   2×5 tiles on the left, detail pane on the right. Mobile stacks. */
.is-marketing .mkt-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-mkt-gutter);
  margin-top: var(--space-10);
  align-items: start;
}
@media (max-width: 880px) {
  .is-marketing .mkt-panel-grid { grid-template-columns: 1fr; }
}
.is-marketing .mkt-panel-grid-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.is-marketing .mkt-panel-grid-detail {
  position: sticky;
  top: var(--space-6);
}

.is-marketing .mkt-panelist-detail {
  display: grid;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.is-marketing .mkt-panelist-detail-portrait {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.is-marketing .mkt-panelist-detail-role {
  font-family: var(--serif-display);
  color: var(--text-3);
  font-weight: 400;
  font-style: italic;
}
.is-marketing .mkt-panelist-detail-block { display: grid; gap: var(--space-2); }
.is-marketing .mkt-panelist-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text);
}
.is-marketing .mkt-panelist-detail-list li {
  padding-left: var(--space-4);
  position: relative;
}
.is-marketing .mkt-panelist-detail-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-ink);
}
.is-marketing .mkt-panelist-detail-quotes {
  display: grid;
  gap: var(--space-4);
}

/* ------- Pricing tier cards ------- */
.is-marketing .mkt-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  align-items: stretch;
}
/* Stack only on small phones; tablets and up keep 3-across so the row
   reads as a single comparison strip. */
@media (max-width: 600px) {
  .is-marketing .mkt-tier-grid { grid-template-columns: 1fr; }
}
.is-marketing .mkt-tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  position: relative;
}
.is-marketing .mkt-tier-card > .mkt-cta-primary,
.is-marketing .mkt-tier-card > .mkt-cta-disabled {
  margin-top: auto;
}
.is-marketing .mkt-tier-card.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-2);
}
.is-marketing .mkt-tier-badge {
  position: absolute;
  top: -10px;
  left: var(--space-6);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  margin: 0;
}
.is-marketing .mkt-tier-head { display: grid; gap: var(--space-1); }
.is-marketing .mkt-tier-name {
  font-family: var(--serif-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-variation-settings: "opsz" 30;
  margin: 0;
  color: var(--text);
}
.is-marketing .mkt-tier-price {
  font-family: var(--serif-display);
  font-size: 2.25rem;
  font-weight: 500;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
  line-height: 1;
}
.is-marketing .mkt-tier-period {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin: 0;
}
.is-marketing .mkt-tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text);
}
.is-marketing .mkt-tier-features li {
  padding-left: var(--space-4);
  position: relative;
}
.is-marketing .mkt-tier-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-ink);
}
.is-marketing .mkt-cta-disabled {
  background: var(--surface-3);
  color: var(--text-4);
  cursor: not-allowed;
}
.is-marketing .mkt-cta-disabled:hover {
  background: var(--surface-3);
  transform: none;
}

/* ------- Trust strip ------- */
.is-marketing .mkt-trust-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: var(--space-8);
}
@media (max-width: 720px) {
  .is-marketing .mkt-trust-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}
.is-marketing .mkt-trust-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--space-2);
}
@media (max-width: 720px) {
  .is-marketing .mkt-trust-item { grid-template-rows: none; grid-row: auto; }
}
.is-marketing .mkt-trust-rule {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--rule-accent);
  margin-bottom: var(--space-2);
}
.is-marketing .mkt-trust-heading {
  font-family: var(--serif-display);
  font-size: 1.375rem;
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  color: var(--text);
  margin: 0;
}
.is-marketing .mkt-trust-body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

/* ------- How-it-works steps ------- */
.is-marketing .mkt-step-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-10) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: var(--space-8);
}
@media (max-width: 720px) {
  .is-marketing .mkt-step-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}
.is-marketing .mkt-step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: var(--space-2);
}
@media (max-width: 720px) {
  .is-marketing .mkt-step { grid-template-rows: none; grid-row: auto; }
}
.is-marketing .mkt-step-numeral {
  font-family: var(--serif-display);
  font-size: 2.5rem;
  font-weight: 500;
  font-variation-settings: "opsz" 80;
  color: var(--accent-ink);
  margin: 0;
  line-height: 1;
}
.is-marketing .mkt-step-heading {
  font-family: var(--serif-display);
  font-size: 1.375rem;
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  color: var(--text);
  margin: var(--space-1) 0 var(--space-1);
}
.is-marketing .mkt-step-body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.is-marketing .mkt-step-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding: 0 2px;
  transition: background-size var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.is-marketing .mkt-step-link:hover,
.is-marketing .mkt-step-link:focus-visible {
  background-size: 100% 100%;
  color: var(--ink-on-accent);
  outline: none;
}
.is-marketing .mkt-step-thumb {
  margin: var(--space-4) 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  aspect-ratio: 16 / 10;
}
.is-marketing .mkt-step-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Click-to-copy inline token (e.g. panel@decknotes.app). Behaves like a
   chip embedded in body copy — underlined dotted, monospaced for the address
   feel, flashes "Copied" on click via [data-flash]. */
.is-marketing .mkt-copy-token {
  display: inline;
  position: relative;
  font: inherit;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  background: var(--accent-soft, rgba(251, 188, 4, 0.18));
  color: var(--text);
  padding: 0.05em 0.35em;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.is-marketing .mkt-copy-token:hover,
.is-marketing .mkt-copy-token:focus-visible {
  background: var(--accent);
  color: var(--ink-on-accent);
  outline: none;
}
.is-marketing .mkt-copy-token.is-copied::after {
  content: attr(data-flash);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}

/* ------- Closing CTA section ------- */
.is-marketing .mkt-closing {
  text-align: left;
  padding-top: var(--space-12);
  padding-bottom: var(--space-mkt-section);
  border-top: 1px solid var(--border-soft);
}

/* ------- FAQ rows ------- */
.is-marketing .mkt-faq-list {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.is-marketing .mkt-faq-item {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-4);
}
.is-marketing .mkt-faq-q {
  font-family: var(--sans-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.is-marketing .mkt-faq-a {
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  max-width: 48rem;
}

/* ------- Marketing layout chrome ------- */
.is-marketing .mkt-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 253, 247, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.is-marketing .mkt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-mkt-gutter);
}
.is-marketing .mkt-logotype {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.is-marketing .mkt-mark {
  width: 22px;
  height: 22px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.is-marketing .mkt-wordmark {
  font-family: var(--serif-display);
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: "opsz" 30;
  color: var(--text);
  letter-spacing: -0.01em;
}
.is-marketing .mkt-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.is-marketing .mkt-nav-link {
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.is-marketing .mkt-nav-link:hover { color: var(--text); }

.is-marketing .mkt-main {
  display: block;
}

.is-marketing .mkt-footer {
  border-top: 1px solid var(--border-soft);
  margin-top: var(--space-mkt-section);
}
.is-marketing .mkt-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-mkt-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}
@media (max-width: 720px) {
  .is-marketing .mkt-footer-inner { grid-template-columns: 1fr; }
}
.is-marketing .mkt-footer-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
/* ------- Demo video modal ------- */
.is-marketing .mkt-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.is-marketing .mkt-demo-modal[hidden] { display: none; }
.is-marketing .mkt-demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: mkt-demo-fade var(--dur-slow) var(--ease-standard);
}
.is-marketing .mkt-demo-modal-dialog {
  position: relative;
  width: min(960px, 100%);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  padding: var(--space-3);
  animation: mkt-demo-rise var(--dur-slow) var(--ease-standard);
}
.is-marketing .mkt-demo-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-2);
}
.is-marketing .mkt-demo-modal-close:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.is-marketing .mkt-demo-modal-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #14120E;
}
.is-marketing .mkt-demo-modal-placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at center, rgba(251,188,4,0.12) 0%, transparent 60%),
    repeating-linear-gradient(45deg, #1A1814 0 12px, #16140F 12px 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--accent);
}
.is-marketing .mkt-demo-modal-play {
  display: inline-flex;
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 4px 24px rgba(251,188,4,0.35));
}
.is-marketing .mkt-demo-modal-play svg {
  width: 100%;
  height: 100%;
  display: block;
}
.is-marketing .mkt-demo-modal-caption {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
@keyframes mkt-demo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mkt-demo-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------- Get-started modal — four steps + sign in.
   Paper-toned dialog with the same grain overlay and soft border the
   rest of the marketing surface uses, so the popover reads as part of
   the page rather than a generic OS chrome. */
.is-marketing .mkt-get-started-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.is-marketing .mkt-get-started-modal[hidden] { display: none; }
.is-marketing .mkt-get-started-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: mkt-demo-fade var(--dur-slow) var(--ease-standard);
}
.is-marketing .mkt-get-started-modal-dialog {
  position: relative;
  width: min(360px, 100%);
  background-color: var(--surface-warm);
  background-image: url("/marketing/grain.svg");
  background-size: 240px;
  background-repeat: repeat;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(20, 18, 14, 0.35);
  padding: var(--space-10) var(--space-8) var(--space-8);
  animation: mkt-demo-rise var(--dur-slow) var(--ease-standard);
}
.is-marketing .mkt-get-started-body { display: flex; flex-direction: column; gap: var(--space-5); }
.is-marketing .mkt-get-started-title {
  font-family: var(--serif-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  font-variation-settings: "opsz" 60;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.is-marketing .mkt-get-started-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text);
}
.is-marketing .mkt-get-started-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.is-marketing .mkt-get-started-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  background: var(--accent);
  color: var(--ink-on-accent);
  border-radius: 999px;
  font-family: var(--serif-display);
  font-weight: 500;
  font-variation-settings: "opsz" 30;
  font-size: 0.95rem;
  line-height: 1;
}
.is-marketing .mkt-get-started-step-final {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

/* ------- Demo placeholder ------- */
.is-marketing .mkt-demo-placeholder {
  margin-top: var(--space-8);
  padding: var(--space-10) var(--space-6);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
}

/* ------- Pricing teaser (small landing-page tier strip) ------- */
.is-marketing .mkt-pricing-teaser .mkt-tier-grid {
  margin-top: var(--space-8);
}

/* ------- Long-form prose (about page) ------- */
.is-marketing .mkt-prose {
  display: grid;
  gap: var(--space-5);
  max-width: 42rem;
  margin-top: var(--space-6);
}
.is-marketing .mkt-prose p {
  font-family: var(--sans);
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.is-marketing .mkt-prose em {
  font-style: italic;
  color: var(--text);
}
.is-marketing .mkt-prose-h {
  font-family: var(--serif-display);
  font-size: 1.375rem;
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  color: var(--text);
  margin: var(--space-4) 0 0;
}

/* button_to wrappers used by marketing sign-in CTAs. The omniauth CSRF
   gem requires POST, so each "Sign in" link is a tiny inline form. */
.mkt-inline-form {
  display: inline;
  margin: 0;
}
.mkt-inline-form > button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}