/* Comfort.ly — Marketing site
   Faithful port of comfortly-prototype (~/Work/comfortly-prototype/marketing).
   Loads after core.css and uses its --color-* design tokens (the marketing layout
   links core then marketing). Scoped under .marketing so nothing leaks into the
   authenticated app.
   Source of truth: app/assets/tailwind/application.css (pre-migration .marketing block).
*/

/* Page frame — replaces the layout's Tailwind h-full/flex utilities + bg-paper/text-ink */
.marketing__frame {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.marketing__main {
  flex: 1;
}
.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(250 246 238 / 85%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px dashed rgb(31 31 31 / 18%);
}
.marketing-nav__shell {
  display: flex;
  align-items: center;
  padding: 18px 36px;
  gap: 28px;
}
.marketing-nav__brand {
  text-decoration: none;
}
.marketing-nav__links {
  display: flex;
  gap: 22px;
  margin-left: 24px;
  font-size: 14px;
}
.marketing-nav__actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Content container: centers at the brand max-width with paper-grain z-index handling */
.marketing .shell {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 36px;
  padding-right: 36px;
}

@media (width <= 700px) {
  .marketing .shell {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Dashed rules */
.marketing .dashed-rule {
  border: 0;
  border-top: 1.5px dashed rgb(31 31 31 / 25%);
  margin: 0;
  opacity: 0.85;
}
.marketing .dashed-rule-soft {
  border: 0;
  border-top: 1px dashed rgb(31 31 31 / 18%);
  margin: 0;
}
.marketing .dashed-rule-on-dark {
  border: 0;
  border-top: 1.5px dashed rgb(250 246 238 / 22%);
  margin: 0;
}

/* ═════════════════════════════════════════════════════════
 * Marketing site — faithful port of comfortly-prototype.
 * Scoped under .marketing so it never affects the authenticated app.
 * ═════════════════════════════════════════════════════════ */

.marketing {
  --shadow-paper: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 18px 40px -20px rgb(60 40 15 / 25%);

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

.marketing .serif {
  font-family: Fraunces, Georgia, serif;
  font-optical-sizing: auto;
}
.marketing .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.marketing h1,
.marketing h2,
.marketing h3,
.marketing h4 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

.marketing h1 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.marketing h2 {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.marketing h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
}
.marketing h1 em,
.marketing h2 em,
.marketing h3 em,
.marketing h4 em {
  font-style: italic;
  font-weight: 400;
}
.marketing p {
  line-height: 1.55;
  text-wrap: pretty;
}

.marketing .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.marketing .eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-ink);
}
.marketing .eyebrow.no-rule::before {
  display: none;
}

.marketing .rule {
  border: 0;
  border-top: 1.5px dashed var(--color-rule);
  margin: 0;
  opacity: 0.55;
}

/* buttons */
.marketing .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.marketing .btn:hover {
  transform: translateY(-1px);
}
.marketing .btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.marketing .btn-primary:hover {
  background: var(--color-black);
}
.marketing .btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: rgb(31 31 31 / 25%);
}
.marketing .btn-ghost:hover {
  background: rgb(31 31 31 / 5%);
  border-color: rgb(31 31 31 / 50%);
}
.marketing .btn-accent {
  background: var(--color-terra-500);
  color: var(--color-white);
}
.marketing .btn.marketing-nav__button {
  padding: 10px 16px;
  font-size: 14px;
}
.marketing .btn.marketing-nav__button--primary {
  padding: 10px 18px;
  font-size: 14px;
}

/* tape & card */
.marketing .tape {
  position: absolute;
  width: 90px;
  height: 22px;
  background: rgb(232 116 60 / 35%);
  border-left: 1px dashed rgb(0 0 0 / 15%);
  border-right: 1px dashed rgb(0 0 0 / 15%);
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.marketing .card {
  background: var(--color-paper-card);
  border: 1px solid rgb(31 31 31 / 12%);
  border-radius: 14px;
  box-shadow: var(--shadow-paper);
}

.marketing .alt-paper {
  background: var(--color-paper-2);
}

/* Marketing homepage */
.marketing .marketing-hero {
  padding-top: 60px;
  padding-bottom: 80px;
  position: relative;
}
.marketing .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.marketing .hero-eyebrow {
  margin-bottom: 24px;
  display: inline-flex;
}
.marketing .marketing-hero__title {
  margin-top: 22px;
}
.marketing .marketing-hero__emphasis {
  font-style: italic;
  font-weight: 400;
}
.marketing .marketing-hero__copy {
  font-size: 19px;
  color: var(--color-ink-2);
  max-width: 540px;
  margin-top: 26px;
  margin-bottom: 32px;
}
.marketing .marketing-hero__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.marketing .marketing-hero__proof {
  margin-top: 36px;
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 13px;
  color: var(--color-ink-2);
  flex-wrap: wrap;
}
.marketing .marketing-hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.marketing .marketing-hero__proof-separator {
  width: 1px;
  height: 14px;
  background: rgb(31 31 31 / 20%);
}
.marketing .hero-mock-wrap {
  position: relative;
  min-height: 480px;
}
.marketing .hero-calendar-card {
  position: relative;
  transform: rotate(-1.2deg);
  z-index: 1;
}
.marketing .hero-rate-card {
  position: absolute;
  bottom: -30px;
  right: -10px;
  width: 72%;
  transform: rotate(2.5deg);
  z-index: 4;
}
.marketing .marketing-hero__tape {
  top: -10px;
  left: 80px;
  transform: rotate(-4deg);
  z-index: 2;
}

.marketing .pricing-teaser {
  padding: 40px 0;
}
.marketing .pricing-teaser-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 40px 48px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: 18px;
  position: relative;
}
.marketing .pricing-teaser__eyebrow {
  color: rgb(250 246 238 / 60%);
}
.marketing .pricing-teaser__eyebrow-rule {
  width: 24px;
  height: 1px;
  background: rgb(250 246 238 / 60%);
  display: inline-block;
  margin-right: 10px;
}
.marketing .pricing-teaser__price {
  font-size: 38px;
  line-height: 1.05;
  margin-top: 12px;
  letter-spacing: -0.02em;
}
.marketing .pricing-teaser__amount {
  color: var(--color-terra-500);
}
.marketing .pricing-teaser__divider {
  width: 1px;
  height: 70px;
  background: rgb(250 246 238 / 18%);
}
.marketing .pricing-teaser__copy {
  font-size: 15px;
  line-height: 1.55;
  color: rgb(250 246 238 / 78%);
}

.marketing .marketing-section--relative {
  position: relative;
}
.marketing .marketing-section--ruled {
  border-top: 1px dashed rgb(31 31 31 / 18%);
  border-bottom: 1px dashed rgb(31 31 31 / 18%);
}
.marketing .marketing-section--ruled-strong {
  border-top: 1px dashed rgb(31 31 31 / 24%);
  border-bottom: 1px dashed rgb(31 31 31 / 18%);
}
.marketing .marketing-section--top-ruled {
  border-top: 1px dashed rgb(31 31 31 / 18%);
}
.marketing .marketing-section-heading {
  max-width: 800px;
  margin-bottom: 60px;
}
.marketing .marketing-section-title {
  margin-top: 18px;
}
.marketing .marketing-section-copy {
  margin-top: 22px;
  font-size: 18px;
  color: var(--color-ink-2);
  max-width: 460px;
}
.marketing .marketing-section-copy--narrow {
  max-width: 360px;
  font-size: 17px;
}
.marketing .marketing-section-copy--intro {
  margin-top: 20px;
  max-width: 640px;
}
.marketing .marketing-sticky {
  position: sticky;
  top: 100px;
}
.marketing .marketing-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
}
.marketing .marketing-strong {
  color: var(--color-ink);
}
.marketing .marketing-grid {
  display: grid;
  gap: 56px;
  align-items: start;
}
.marketing .marketing-grid--familiar {
  grid-template-columns: 1fr 1.3fr;
}
.marketing .marketing-grid--switching {
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
}
.marketing .marketing-grid--faq {
  grid-template-columns: 0.6fr 1.4fr;
  gap: 64px;
}
.marketing .marketing-feature-sections {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.marketing .pains-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.marketing .pain-card {
  padding: 22px 22px 20px;
  transform: rotate(var(--pain-rotate));
  position: relative;
}
.marketing .pain-card__quote {
  font-size: 22px;
  line-height: 1.2;
  font-style: italic;
  color: var(--color-ink);
}
.marketing .pain-card__caption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgb(31 31 31 / 20%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing .different-list {
  display: flex;
  flex-direction: column;
}
.marketing .different-row {
  display: grid;
  grid-template-columns: 120px 1fr 1.2fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px dashed rgb(31 31 31 / 25%);
  align-items: start;
}
.marketing .different-row__number {
  font-size: 56px;
  line-height: 1;
  color: var(--color-terra-500);
  font-style: italic;
  font-weight: 400;
}
.marketing .different-row__title {
  font-size: 30px;
  line-height: 1.1;
}
.marketing .different-row__copy {
  font-size: 17px;
  color: var(--color-ink-2);
}

.marketing .product-tour-intro {
  margin-bottom: 64px;
}
.marketing .product-tour-title {
  margin-top: 18px;
  max-width: 880px;
}

/* operations */
.marketing .operations-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  gap: 48px;
  align-items: start;
}

.marketing .operations-intro {
  position: sticky;
  top: 100px;
}

.marketing .operations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.marketing .operations-card {
  padding: 22px 22px 20px;
  min-height: 218px;
  position: relative;
  background: var(--operations-card-bg);
  transform: translate(var(--operations-card-x), var(--operations-card-y))
    rotate(var(--operations-card-rotate));
  z-index: var(--operations-card-z);
}
.marketing .operations-card__tape {
  top: -11px;
  left: var(--operations-tape-left);
  width: var(--operations-tape-width);
  transform: translateX(-50%) rotate(var(--operations-tape-rotate));
}
.marketing .operations-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.marketing .operations-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgb(232 116 60 / 12%);
  color: var(--color-terra-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.marketing .operations-card__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.marketing .operations-card__title {
  font-size: 24px;
  line-height: 1.12;
}
.marketing .operations-card__copy {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 15px;
  color: var(--color-ink-2);
}

/* folded cards: the SVG (.card-bg) draws the shape, fill, fold and shadow,
   so strip the div's own border / shadow / rounding */
.marketing .operations-card.is-folded {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.marketing .operations-card.is-folded > .card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}

@media (width <= 900px) {
  .marketing .operations-layout {
    grid-template-columns: 1fr;
  }
  .marketing .operations-intro {
    position: static;
  }
}

.marketing section {
  position: relative;
  z-index: 2;
}
.marketing .section-y {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
.marketing a {
  color: inherit;
}

/* tools-stack visual: desktop by default, simplified version on mobile */
.marketing .tools-stack-desktop {
  display: grid;
  margin-top: 96px;
  margin-bottom: 120px;
  grid-template-columns: 1.05fr 0.4fr 0.55fr;
  gap: 24px;
  align-items: center;
}
.marketing .tools-stack-mobile {
  display: none;
  margin-top: 48px;
  margin-bottom: 64px;
}

.marketing .switching-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 24px 0;
}
.marketing .switching-step + .switching-step {
  border-top: 1px dashed rgb(31 31 31 / 25%);
}
.marketing .switching-step__number {
  font-size: 22px;
  font-style: italic;
  color: var(--color-terra-500);
}
.marketing .switching-step__title {
  font-size: 24px;
  line-height: 1.1;
}
.marketing .switching-step__copy {
  margin-top: 8px;
  color: var(--color-ink-2);
  font-size: 16px;
}

.marketing .pricing-shell {
  max-width: 980px;
}
.marketing .pricing-header {
  text-align: center;
  margin-bottom: 50px;
}
.marketing .pricing-header__title {
  margin-top: 18px;
}
.marketing .pricing-card {
  padding: 0;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.marketing .pricing-card__tape {
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 2;
}
.marketing .pricing-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
}
.marketing .pricing-card__price-panel {
  padding: 50px 44px;
  border-right: 1px dashed rgb(31 31 31 / 20%);
}
.marketing .pricing-card__features-panel {
  padding: 50px 44px;
  background: var(--color-paper-soft);
}
.marketing .pricing-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.marketing .pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}
.marketing .pricing-card__price {
  font-size: 88px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.marketing .pricing-card__suffix {
  font-size: 18px;
  font-style: italic;
  color: var(--color-ink-2);
  font-weight: 400;
}
.marketing .pricing-card__sub {
  font-size: 14px;
  color: var(--color-ink-2);
  margin-top: 6px;
}
.marketing .pricing-card__divider {
  margin: 24px 0;
}
.marketing .pricing-card__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.marketing .pricing-card__check {
  display: flex;
  gap: 10px;
}
.marketing .pricing-card__cta {
  margin-top: 32px;
}
.marketing .pricing-card__features {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.marketing .pricing-card__feature {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--color-ink);
}
.marketing .pricing-card__dash {
  color: var(--color-terra-500);
  flex-shrink: 0;
}
.marketing .pricing-note {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--color-ink-2);
  max-width: 540px;
  margin-inline: auto;
}

.marketing .founders-shell {
  max-width: 920px;
}
.marketing .founders-card {
  padding: 72px 80px;
  position: relative;
}
.marketing .founders-card__tape-left {
  top: -12px;
  left: 80px;
  transform: rotate(-3deg);
}
.marketing .founders-card__tape-right {
  top: -12px;
  right: 80px;
  transform: rotate(2deg);
}
.marketing .founders-letter {
  margin-top: 32px;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.marketing .founders-letter p {
  margin: 0 0 22px;
}
.marketing .founders-letter__lead {
  font-size: 28px;
  line-height: 1.3;
}
.marketing .founder-row {
  margin-top: 36px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: nowrap;
}
.marketing .founders-actions {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.marketing .faq-row {
  border-top: 1px dashed rgb(31 31 31 / 25%);
}
.marketing .faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 24px 0;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
}
.marketing .faq-q__number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-terra-500);
  min-width: 26px;
}
.marketing .faq-q__text {
  flex: 1;
}
.marketing .faq-plus {
  transition: transform 0.25s ease;
  color: var(--color-ink-2);
  font-size: 24px;
  font-weight: 300;
  font-family: var(--font-sans);
}
.marketing .faq-a {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
  padding-left: 42px;
  font-size: 16px;
  color: var(--color-ink-2);
  line-height: 1.55;
}
.marketing .faq-a__inner {
  padding-bottom: 24px;
}
.marketing .faq-end-rule {
  border-top: 1px dashed rgb(31 31 31 / 25%);
}

.marketing .cta-card {
  background: var(--color-terra-500);
  border-radius: 20px;
  padding: 90px 60px;
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.marketing .cta-card__eyebrow {
  color: rgb(255 255 255 / 85%);
  justify-content: center;
}
.marketing .cta-card__rule {
  width: 24px;
  height: 1px;
  background: rgb(255 255 255 / 85%);
  display: inline-block;
  margin-right: 10px;
}
.marketing .cta-card__title {
  margin-top: 22px;
  font-size: clamp(40px, 5vw, 68px);
  color: var(--color-white);
}
.marketing .cta-card__copy {
  font-size: 19px;
  opacity: 0.9;
  max-width: 560px;
  margin-inline: auto;
  margin-top: 20px;
}
.marketing .cta-card__button {
  background: var(--color-white);
  color: var(--color-terra-500);
  margin-top: 32px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 500;
}

.marketing .marketing-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  direction: var(--marketing-feature-direction);
}

.marketing .marketing-feature__content,
.marketing .marketing-feature__mock {
  direction: ltr;
}
.marketing .marketing-feature__title {
  margin-top: 16px;
  font-size: 36px;
  line-height: 1.1;
}
.marketing .marketing-feature__copy {
  margin-top: 16px;
  font-size: 16px;
  color: var(--color-ink-2);
}
.marketing .marketing-feature__bullets {
  margin-top: 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.marketing .marketing-feature__bullet {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
}
.marketing .marketing-feature__bullet-mark {
  color: var(--color-terra-500);
}

.marketing .marketing-check-icon {
  color: var(--color-terra-500);
  flex-shrink: 0;
}
.marketing .marketing-icon {
  flex-shrink: 0;
}
.marketing .founder-sig {
  display: flex;
  align-items: center;
  gap: 12px;
}
.marketing .founder-sig__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgb(31 31 31 / 12%);
}
.marketing .founder-sig__name {
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.marketing .founder-sig__role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.marketing .marketing-footer {
  padding: 60px 0 40px;
  border-top: 1px dashed rgb(31 31 31 / 25%);
}
.marketing .footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.marketing .marketing-footer__intro {
  font-size: 13px;
  color: var(--color-ink-2);
  margin-top: 14px;
  max-width: 280px;
}
.marketing .marketing-footer__bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed rgb(31 31 31 / 18%);
  font-size: 12px;
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.marketing .footer-col__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.marketing .footer-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.marketing .footer-col__item {
  font-size: 14px;
}
.marketing .footer-col__link {
  text-decoration: none;
  color: var(--color-ink-2);
}

.marketing .mock-chrome {
  background: var(--color-paper-card);
  border: 1px solid rgb(31 31 31 / 14%);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 60%) inset,
    0 28px 60px -28px rgb(60 40 15 / 35%),
    0 4px 14px -4px rgb(60 40 15 / 12%);
  overflow: hidden;
}
.marketing .mock-chrome__bar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgb(31 31 31 / 8%);
  background: linear-gradient(#fbf7ee, #f5efe0);
}
.marketing .mock-chrome__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.marketing .mock-chrome__dot--red {
  background: var(--color-destructive);
}
.marketing .mock-chrome__dot--yellow {
  background: var(--color-butter-500);
}
.marketing .mock-chrome__dot--green {
  background: var(--color-sage-500);
}
.marketing .mock-chrome__title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 50%);
  letter-spacing: 0.05em;
}

.marketing .mock-panel {
  font-family: var(--font-sans);
}
.marketing .mock-panel--padded {
  padding: 16px;
}
.marketing .mock-panel--compact {
  padding: 14px;
}
.marketing .mock-panel--calendar {
  padding: 14px 16px 18px;
}
.marketing .mock-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.marketing .mock-panel__title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.marketing .mock-chip-row {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.marketing .mock-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.1;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mock-chip-color);
  border: 1px solid var(--mock-chip-color);
  background: transparent;
  padding: 3px 7px;
  border-radius: 999px;
}
.marketing .mock-chip--terra {
  --mock-chip-color: var(--color-terra-500);
}
.marketing .mock-chip--sage {
  --mock-chip-color: var(--color-sage-500);
}
.marketing .mock-chip--muted {
  --mock-chip-color: rgb(31 31 31 / 55%);
}

.marketing .mock-arrivals__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marketing .mock-arrivals__row {
  display: grid;
  grid-template-columns: 20px 1.4fr 1fr 0.8fr 1.1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-white);
  border: 1px solid rgb(31 31 31 / 6%);
  border-radius: 6px;
  font-size: 12px;
}
.marketing .mock-arrivals__row:nth-child(even) {
  background: var(--color-paper-soft);
}
.marketing .mock-arrivals__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-sage-500);
}
.marketing .mock-arrivals__status--arriving {
  background: var(--color-terra-500);
}
.marketing .mock-arrivals__name {
  font-weight: 500;
}
.marketing .mock-arrivals__room {
  color: rgb(31 31 31 / 65%);
}
.marketing .mock-arrivals__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 55%);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.marketing .mock-arrivals__flag {
  font-style: italic;
  color: var(--color-terra-500);
  font-size: 11px;
}
.marketing .mock-arrivals__flag--empty {
  color: transparent;
}

.marketing .mock-calendar__controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.marketing .mock-calendar__pill {
  background: var(--color-paper-soft);
  border: 1px solid rgb(31 31 31 / 12%);
  border-radius: 6px;
  padding: 0 8px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  font-size: 11px;
  cursor: default;
  font-family: inherit;
}
.marketing .mock-calendar__pill--narrow {
  width: 26px;
  padding: 0;
}
.marketing .mock-calendar__legend {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.marketing .mock-calendar__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.marketing .mock-calendar__legend-dot--confirmed {
  background: var(--color-terra-500);
}
.marketing .mock-calendar__legend-dot--checked-in {
  background: var(--color-sage-500);
  margin-left: 8px;
}
.marketing .mock-calendar__legend-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 55%);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marketing .mock-calendar__days {
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(0, 1fr));
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 55%);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.marketing .mock-calendar__day {
  padding: 4px 6px;
  text-align: center;
}
.marketing .mock-calendar__grid {
  position: relative;
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(5, 36px);
  border: 1px solid rgb(31 31 31 / 10%);
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;
}
.marketing .mock-calendar__room {
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  border-right: 1px solid rgb(31 31 31 / 8%);
  border-top: 1px solid rgb(31 31 31 / 6%);
  background: var(--color-paper-soft);
}
.marketing .mock-calendar__room--first {
  border-top: 0;
}
.marketing .mock-calendar__cell {
  border-top: 1px dashed rgb(31 31 31 / 8%);
  border-right: 1px solid rgb(31 31 31 / 5%);
  position: relative;
}
.marketing .mock-calendar__cell--first-row {
  border-top: 0;
}
.marketing .mock-calendar__cell--last-day {
  border-right: 0;
}
.marketing .mock-calendar__booking {
  position: absolute;
  top: var(--booking-top);
  height: 26px;
  left: calc(92px + (100% - 92px) / 7 * var(--booking-start) + 4px);
  width: calc((100% - 92px) / 7 * var(--booking-span) - 8px);
  background: var(--booking-color);
  border: none;
  color: var(--color-white);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding-left: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}
.marketing .mock-calendar__booking--block {
  background: transparent;
  border: 1.5px dashed rgb(31 31 31 / 45%);
  color: rgb(31 31 31 / 70%);
  box-shadow: none;
}

.marketing .mock-channels {
  padding: 18px;
}
.marketing .mock-channels__header {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.marketing .mock-channels__title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}
.marketing .mock-channels__status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-sage-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.marketing .mock-channels__row {
  display: grid;
  grid-template-columns: 24px 1fr 90px 80px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgb(31 31 31 / 12%);
  font-size: 13px;
}
.marketing .mock-channels__row--last {
  border-bottom: 0;
}
.marketing .mock-channels__badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--channel-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
}
.marketing .mock-channels__name {
  font-weight: 500;
}
.marketing .mock-channels__last {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 55%);
}
.marketing .mock-channels__bookings {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
}

.marketing .mock-money__summary {
  display: flex;
  align-items: flex-start;
  gap: 10px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.marketing .mock-money__summary-main {
  flex: 1 1 220px;
  min-width: 0;
}
.marketing .mock-money__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(31 31 31 / 55%);
}
.marketing .mock-money__amount {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}
.marketing .mock-money__chips {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.marketing .mock-money__row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1.2fr 100px;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px dashed rgb(31 31 31 / 12%);
  color: var(--color-ink);
}
.marketing .mock-money__row--last {
  border-bottom: 0;
}
.marketing .mock-money__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 55%);
}
.marketing .mock-money__name {
  font-weight: 500;
}
.marketing .mock-money__kind {
  color: rgb(31 31 31 / 65%);
}
.marketing .mock-money__amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.marketing .mock-money__amt--negative {
  color: var(--color-terra-500);
}
.marketing .mock-money__note {
  margin-top: 14px;
  padding: 10px;
  background: var(--color-paper-soft);
  border-radius: 8px;
  font-size: 11px;
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}
.marketing .mock-money__note-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sage-500);
}

.marketing .mock-rate-chat {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.marketing .mock-rate-chat__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.marketing .mock-rate-chat__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-terra-500);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
}
.marketing .mock-rate-chat__title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
}
.marketing .mock-rate-chat__beta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 55%);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.marketing .mock-rate-chat__bubble {
  max-width: 85%;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
}
.marketing .mock-rate-chat__bubble--user {
  align-self: flex-end;
  background: var(--color-ink);
  color: var(--color-paper);
}
.marketing .mock-rate-chat__bubble--bot {
  align-self: flex-start;
  background: var(--color-paper-soft);
  border: 1px solid rgb(31 31 31 / 12%);
}
.marketing .mock-rate-chat__table {
  align-self: flex-start;
  max-width: 92%;
  background: var(--color-paper-soft);
  border: 1px solid rgb(31 31 31 / 12%);
  border-radius: 10px;
  padding: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.marketing .mock-rate-chat__table-head {
  display: grid;
  grid-template-columns: 1fr 70px 70px;
  gap: 4px;
  color: rgb(31 31 31 / 55%);
  border-bottom: 1px dashed rgb(31 31 31 / 18%);
  padding-bottom: 4px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.marketing .mock-rate-chat__new-label {
  color: var(--color-sage-500);
}
.marketing .mock-rate-chat__table-row {
  display: grid;
  grid-template-columns: 1fr 70px 70px;
  gap: 4px;
  padding: 3px 0;
  color: var(--color-ink);
}
.marketing .mock-rate-chat__was {
  color: rgb(31 31 31 / 50%);
}
.marketing .mock-rate-chat__new {
  color: var(--color-sage-500);
  font-weight: 600;
}
.marketing .mock-rate-chat__input {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid rgb(31 31 31 / 18%);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgb(31 31 31 / 50%);
}
.marketing .mock-rate-chat__placeholder {
  flex: 1;
}
.marketing .mock-rate-chat__send {
  background: var(--color-ink);
  color: var(--color-paper);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.marketing .tools-stack {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: center;
}
.marketing .tools-stack__left {
  position: relative;
  height: 360px;
}
.marketing .tools-stack__tool {
  position: absolute;
  left: var(--tool-left);
  top: var(--tool-top);
  transform: rotate(var(--tool-rotate));
  width: 150px;
  background: var(--tool-bg);
  border: 1px solid rgb(31 31 31 / 14%);
  border-radius: 12px;
  padding: 12px 12px 10px;
  box-shadow:
    0 12px 26px rgb(31 31 31 / 12%),
    0 2px 4px rgb(31 31 31 / 6%);
}
.marketing .tools-stack__tool-icon {
  height: 28px;
  display: flex;
  align-items: center;
}
.marketing .tools-stack__tool-icon img {
  max-width: 92px;
  max-height: 24px;
  object-fit: contain;
}
.marketing .tools-stack__tool-name {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}
.marketing .tools-stack__tool-tag {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(31 31 31 / 55%);
}
.marketing .tools-stack__callout {
  position: absolute;
  transform: rotate(var(--callout-rotate));
  background: var(--color-paper-card);
  border: 1px solid rgb(31 31 31 / 16%);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 12px 24px rgb(31 31 31 / 12%);
  font-size: 13px;
  font-style: italic;
  max-width: 230px;
}
.marketing .tools-stack__callout--top-left {
  top: 8px;
  left: 10px;
}
.marketing .tools-stack__callout--top-right {
  top: 8px;
  right: 10px;
}
.marketing .tools-stack__callout--bottom-left {
  bottom: 38px;
  left: 10px;
}
.marketing .tools-stack__callout--bottom-right {
  bottom: 28px;
  right: 10px;
}
.marketing .tools-stack__tail {
  position: absolute;
  inset: var(--tail-top) var(--tail-right) var(--tail-bottom) var(--tail-left);
  width: 34px;
  height: 40px;
  overflow: visible;
}
.marketing .tools-stack__tail path {
  stroke: var(--color-terra-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marketing .tools-stack__right {
  position: relative;
}
.marketing .tools-stack__right-eyebrow {
  position: absolute;
  top: -22px;
  left: 4px;
}
.marketing .tools-stack__comfortly-card {
  background: var(--color-paper);
  border: 1px solid rgb(31 31 31 / 18%);
  border-radius: 14px;
  padding: 22px 24px 20px;
  box-shadow:
    0 18px 30px rgb(31 31 31 / 10%),
    0 3px 6px rgb(31 31 31 / 6%);
  transform: rotate(-1.5deg);
}
.marketing .tools-stack__wordmark {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
.marketing .tools-stack__wordmark-dot {
  color: var(--color-terra-500);
}
.marketing .tools-stack__subline {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(31 31 31 / 60%);
  margin-top: 6px;
}
.marketing .tools-stack__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--color-ink-2);
}
.marketing .tools-stack__list-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.marketing .tools-stack__check {
  color: var(--color-sage-500);
}
.marketing .tools-stack-mobile__eyebrow {
  margin-bottom: 16px;
  display: inline-flex;
}
.marketing .tools-stack-mobile__cloud {
  position: relative;
  margin-top: 18px;
}
.marketing .tools-stack-mobile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.marketing .tools-stack-mobile__tool {
  background: var(--tool-bg);
  border: 1px solid rgb(31 31 31 / 18%);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 4px 10px rgb(31 31 31 / 6%);
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: 8px;
}
.marketing .tools-stack-mobile__tool-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-white);
  border: 1px solid rgb(31 31 31 / 10%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.marketing .tools-stack-mobile__tool-icon img {
  display: block;
  object-fit: contain;
}
.marketing .tools-stack-mobile__tool-copy {
  min-width: 0;
}
.marketing .tools-stack-mobile__tool-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
}
.marketing .tools-stack-mobile__tool-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(31 31 31 / 55%);
  margin-top: 4px;
}
.marketing .tools-stack-mobile__cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.marketing .tools-stack-mobile__caption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(31 31 31 / 60%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.marketing .tools-stack-mobile__arrow {
  display: flex;
  justify-content: center;
  margin: 32px 0 18px;
}
.marketing .tools-stack-mobile__comfortly-card {
  margin-top: 12px;
  background: var(--color-paper);
  border: 1px solid rgb(31 31 31 / 18%);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow:
    0 12px 24px rgb(31 31 31 / 8%),
    0 2px 4px rgb(31 31 31 / 6%);
}
.marketing .tools-stack-mobile__wordmark {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.marketing .tools-stack-mobile__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--color-ink-2);
}
.marketing .tools-stack-desktop__left {
  position: relative;
}
.marketing .tools-stack-desktop__label {
  margin-bottom: 18px;
}
.marketing .tools-stack-desktop__mess {
  position: relative;
  padding-top: 64px;
  padding-bottom: 96px;
}
.marketing .tools-stack-desktop__tools {
  position: relative;
  height: 320px;
}
.marketing .tools-stack-desktop__tool {
  position: absolute;
  left: var(--tool-left);
  top: var(--tool-top);
  transform: rotate(var(--tool-rotate));
  background: var(--tool-bg);
  border: 1px solid rgb(31 31 31 / 18%);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow:
    0 6px 14px rgb(31 31 31 / 8%),
    0 1px 2px rgb(31 31 31 / 6%);
  font-family: var(--font-sans);
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.marketing .tools-stack-desktop__tool-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--color-white);
  border: 1px solid rgb(31 31 31 / 10%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.marketing .tools-stack-desktop__tool-icon img {
  display: block;
  object-fit: contain;
}
.marketing .tools-stack-desktop__tool-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
}
.marketing .tools-stack-desktop__tool-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(31 31 31 / 55%);
  margin-top: 4px;
}
.marketing .tools-stack-desktop__cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.marketing .tools-stack-desktop__callout {
  position: absolute;
  transform: rotate(var(--callout-rotate));
  width: 220px;
  z-index: 3;
  pointer-events: none;
}
.marketing .tools-stack-desktop__callout--top-left {
  top: 8px;
  left: 10px;
}
.marketing .tools-stack-desktop__callout--top-right {
  top: 8px;
  right: 10px;
}
.marketing .tools-stack-desktop__callout--bottom-left {
  bottom: 38px;
  left: 10px;
}
.marketing .tools-stack-desktop__callout--bottom-right {
  bottom: 38px;
  right: 10px;
}
.marketing .tools-stack-desktop__callout-card {
  background: var(--color-paper);
  border: 1.5px solid var(--color-ink);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-align: center;
}
.marketing .tools-stack-desktop__tail {
  position: absolute;
  inset: var(--tail-top) var(--tail-right) var(--tail-bottom) var(--tail-left);
  overflow: visible;
  pointer-events: none;
}
.marketing .tools-stack-desktop__caption {
  position: absolute;
  bottom: 12px;
  left: 4px;
  right: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgb(31 31 31 / 60%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.marketing .tools-stack-desktop__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.marketing .tools-stack-desktop__arrow-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-terra-500);
}
.marketing .tools-stack-desktop__arrow svg {
  display: block;
}

/* ── Mobile responsiveness (overrides inline grid styles via !important) ── */
@media (width >= 821px) and (width <= 1180px) {
  .marketing .hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1.1fr) !important;
    gap: 34px !important;
  }
  .marketing .hero-mock-wrap {
    min-height: 450px !important;
    isolation: isolate;
  }
  .marketing .hero-calendar-card {
    z-index: 1 !important;
  }
  .marketing .hero-rate-card {
    width: min(106%, 420px) !important;
    right: 0 !important;
    bottom: -18px !important;
    z-index: 4 !important;
  }
  .marketing .hero-mock-wrap .tape {
    z-index: 2 !important;
  }
}

@media (width <= 820px) {
  .marketing .stack-on-mobile {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    direction: ltr !important;
  }
  .marketing .stack-on-mobile > * {
    direction: ltr !important;
  }
  .marketing .hero-eyebrow {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    width: 100%;
    gap: 4px !important;
    text-align: center;
  }
  .marketing .hero-eyebrow::before,
  .marketing .hero-eyebrow-separator {
    display: none !important;
  }
  .marketing .founder-row {
    flex-wrap: wrap !important;
    gap: 20px 28px !important;
  }
  .marketing .unstick-on-mobile {
    position: static !important;
    top: auto !important;
  }
  .marketing .tools-stack-desktop {
    display: none !important;
  }
  .marketing .tools-stack-mobile {
    display: block !important;
  }
  .marketing .hero-grid {
    gap: 48px !important;
  }
  .marketing .hero-mock-wrap {
    min-height: 0 !important;
    max-width: 560px;
    margin: 18px auto 0;
    isolation: isolate;
  }
  .marketing .hero-calendar-card {
    z-index: 1 !important;
    width: min(100%, 520px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  .marketing .hero-calendar-card > * {
    transform: scale(0.92) !important;
    transform-origin: top center !important;
  }
  .marketing .hero-rate-card {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: min(94%, 420px) !important;
    margin: -64px auto 0 !important;
    transform: rotate(1.2deg) !important;
    z-index: 4 !important;
  }
  .marketing .hero-mock-wrap .tape {
    z-index: 2 !important;
  }
  .marketing .hide-on-mobile {
    display: none !important;
  }
  .marketing .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .marketing .different-row {
    grid-template-columns: 80px 1fr !important;
    gap: 16px 24px !important;
    padding: 32px 0 !important;
  }
  .marketing .different-row > p {
    grid-column: 1 / -1 !important;
  }
  .marketing #pricing-teaser {
    padding-top: 28px !important;
  }
  .marketing .pricing-teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 26px 28px 32px !important;
  }
  .marketing .pricing-teaser-grid .eyebrow::before {
    display: none !important;
  }
  .marketing .pricing-teaser-grid > div:nth-child(2) {
    width: 100% !important;
    height: 1px !important;
  }
}

@media (width <= 768px) {
  .marketing .section-y {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .marketing .section-y-tight {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .marketing .mock-shrinkwrap {
    max-width: 100% !important;
    overflow-x: auto;
  }
  .marketing .mock-shrinkwrap > * {
    transform: scale(0.85);
    transform-origin: top left;
  }
  .marketing #what .mock-shrinkwrap {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100% !important;
    overflow: hidden;
  }
  .marketing #what .mock-shrinkwrap > * {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: scale(0.88) !important;
    transform-origin: top center !important;
  }
  .marketing #what .mock-shrinkwrap * {
    min-width: 0;
  }
}

@media (width <= 1180px) {
  .marketing .nav-links,
  .marketing nav .btn-primary {
    display: none !important;
  }
}

@media (width <= 700px) {
  .marketing nav .shell {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .marketing nav .btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .marketing .founders-card {
    padding: 36px 24px !important;
  }
  .marketing .cta-card {
    padding: 56px 24px !important;
  }
}

@media (width <= 640px) {
  .marketing .pains-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (width <= 480px) {
  .marketing .hero-calendar-card > * {
    transform: scale(0.88) !important;
  }
  .marketing .hero-rate-card {
    width: 100% !important;
    margin-top: -46px !important;
    transform: none !important;
  }
  .marketing .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═════════════════════════════════════════════════════════
 * Per-page feature classes (marketing content pages).
 * ═════════════════════════════════════════════════════════ */
@layer ds-features {
  /* Footer easter-egg: a paw that fades in on hover */
  .marketing-footer__egg {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .marketing-footer__egg:hover {
    opacity: 1;
  }
  .marketing-footer__egg svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* ── Shared content-page building blocks ──────────────────────
     Centered content column with the standard responsive gutters
     (was Tailwind max-w-* mx-auto px-4 sm:px-6 lg:px-8). */
  .marketing-container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  .marketing-container--narrow {
    max-width: 48rem;
  }

  @media (width >= 640px) {
    .marketing-container {
      padding-inline: 1.5rem;
    }
  }

  @media (width >= 1024px) {
    .marketing-container {
      padding-inline: 2rem;
    }
  }

  /* Full-bleed dashed divider, centered at the content width */
  .marketing-divider {
    border: 0;
    border-top: 1.5px dashed rgb(31 31 31 / 25%);
    margin: 0 auto;
    max-width: 72rem;
  }
  .marketing-divider--narrow {
    max-width: 48rem;
  }

  /* Section vertical rhythm (was py-20) */
  .marketing-section {
    padding-block: 5rem;
    padding-inline: 1rem;
  }

  @media (width >= 640px) {
    .marketing-section {
      padding-inline: 1.5rem;
    }
  }

  @media (width >= 1024px) {
    .marketing-section {
      padding-inline: 2rem;
    }
  }

  /* Two-column responsive split (was grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20) */
  .marketing-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  @media (width >= 768px) {
    .marketing-split {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
    }
  }
  .marketing-split--center {
    align-items: center;
  }
  .marketing-split--start {
    align-items: start;
  }

  /* Lede / hero text column (was space-y-5) */
  .marketing-prose-col > * + * {
    margin-top: 1.25rem;
  }

  /* Framed product screenshot (was rounded-2xl overflow-hidden shadow-sm border border-warm-200 bg-warm-50) */
  .marketing-figure {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    border: 1px solid var(--color-paper-2);
    background: var(--color-paper);
  }
  .marketing-figure__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Serif terra accent inside ledes (was em.text-primary.font-serif) */
  .marketing-accent {
    color: var(--color-terra-500);
    font-family: var(--font-serif);
  }

  /* ── Pricing page ───────────────────────────────────────────── */
  .pricing-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  .pricing-page > * + * {
    margin-top: 3rem;
  }
  .pricing-page__intro {
    text-align: center;
    max-width: 48rem;
    color: var(--color-ink-2);
  }
  .pricing-page__lede {
    padding-top: 1.5rem;
    font-size: 1.125rem;
  }

  /* Calculator form */
  .pricing-calc {
    background: var(--color-white);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    width: 100%;
  }
  .pricing-calc__layout {
    display: flex;
    flex-direction: column;
  }
  .pricing-calc__inputs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
    padding: 2.5rem;
    border-bottom: 1px solid var(--color-paper-2);
  }
  .pricing-calc__results {
    flex: 1;
    padding: 2.5rem;
    background: var(--color-terra-50);
    border-radius: 0 0 0.75rem 0.75rem;
  }

  @media (width >= 768px) {
    .pricing-calc__layout {
      flex-direction: row;
    }
    .pricing-calc__inputs {
      border-bottom: 0;
      border-right: 1px solid var(--color-paper-2);
    }
    .pricing-calc__results {
      border-radius: 0 0.75rem 0.75rem 0;
    }
  }
  .pricing-calc__table {
    width: 100%;
  }
  .pricing-calc__row td {
    padding-block: 0.25rem;
  }
  .pricing-calc__row--spaced td {
    padding-top: 0.25rem;
    padding-bottom: 1rem;
  }
  .pricing-calc__row--rule {
    border-top: 1px solid rgb(31 31 31 / 18%);
  }
  .pricing-calc__row--total td {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pricing-calc__num {
    text-align: right;
  }
  .pricing-calc__highlight {
    color: var(--color-white);
  }
  .pricing-calc__highlight td {
    padding: 0.5rem;
    background: var(--color-ink-blue);
  }
  .pricing-calc__highlight td:first-child {
    border-top-left-radius: 0.75rem;
  }
  .pricing-calc__highlight td:last-child {
    border-top-right-radius: 0.75rem;
    text-align: right;
  }
  .pricing-calc__highlight--roi {
    border-top: 1px solid var(--color-terra-50);
  }
  .pricing-calc__highlight--roi td:first-child {
    border-radius: 0 0 0 0.75rem;
    border-top-left-radius: 0;
  }
  .pricing-calc__highlight--roi td:last-child {
    border-radius: 0 0 0.75rem;
    border-top-right-radius: 0;
    font-weight: 700;
  }

  /* Pricing comparison table (3 tier cards) */
  @media (width >= 768px) {
    .pricing-table {
      padding-block: 2.5rem;
    }
  }
  .pricing-table__subtitle {
    color: var(--color-terra-500);
  }
  .pricing-table__cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media (width >= 768px) {
    .pricing-table__cards {
      flex-direction: row;
      gap: 1rem;
    }
  }
  .pricing-table__card {
    flex: 1;
    border: 2px solid;
    border-radius: 0.75rem;
  }
  .pricing-table__card--primary {
    border-color: var(--color-terra-500);
  }
  .pricing-table__card--complementary {
    border-color: var(--color-ink-blue);
  }
  .pricing-table__card--contrast {
    border-color: var(--color-ink);
  }
  .pricing-table__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 12rem;
    padding: 2rem;
    color: var(--color-white);
  }
  .pricing-table__head--primary {
    background: var(--color-terra-500);
  }
  .pricing-table__head--complementary {
    background: var(--color-ink-blue);
  }
  .pricing-table__head--contrast {
    background: var(--color-ink);
  }
  .pricing-table__head-icon {
    width: 2rem;
    height: 2rem;
  }
  .pricing-table__head-title {
    padding-top: 1.25rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
  }
  .pricing-table__features {
    padding: 2rem;
    list-style: none;
    margin: 0;
  }
  .pricing-table__features > li {
    padding-block: 1rem;
    border-top: 1px dashed rgb(31 31 31 / 18%);
  }
  .pricing-table__features > li:first-child {
    padding-top: 0;
    padding-bottom: 2rem;
    font-style: italic;
    border-top: 0;
  }
  .pricing-table__cta {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pricing-table__cta-btn {
    margin-top: 2rem;
    padding: 1rem 3rem 1rem 4rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .pricing-table__cta-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 2rem;
  }

  /* Lede paragraph (was text-lg); line-height comes from .marketing p */
  .marketing-lede {
    font-size: 1.125rem;
  }
  .marketing-lede--hero {
    padding-top: 1rem;
  }

  /* Centered band with heading + content (reputation testimonial, review examples) */
  .marketing-quote-band {
    padding-block: 5rem;
    text-align: center;
    color: var(--color-ink-2);
  }

  /* ── Testimonial quote card (reviews + reputation) ──────────── */
  .marketing-testimonial {
    position: relative;
    margin-top: 2.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-paper-2);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    text-align: left;
  }

  @media (width >= 1024px) {
    .marketing-testimonial {
      padding: 3rem;
    }
  }
  .marketing-testimonial__mark {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-family: var(--font-serif);
    color: var(--color-ink-mute);
    font-size: 3.75rem;
    line-height: 1;
  }
  .marketing-testimonial__body {
    position: relative;
    z-index: 1;
  }
  .marketing-testimonial__quote {
    font-family: var(--font-serif);
    color: var(--color-ink-2);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
  }

  @media (width >= 1024px) {
    .marketing-testimonial__quote {
      font-size: 1.5rem;
    }
  }
  .marketing-testimonial__cite-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgb(31 31 31 / 18%);
  }
  .marketing-testimonial__logo {
    height: 3.5rem;
    width: auto;
  }
  .marketing-testimonial__cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .marketing-testimonial__name {
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .marketing-testimonial__link {
    font-size: 0.875rem;
    text-decoration: underline;
  }

  /* ── About us ───────────────────────────────────────────────── */
  .about-intro {
    padding-top: 4rem;
    padding-bottom: 2rem;
    text-align: center;
    color: var(--color-ink-2);
  }
  .about-body {
    padding-block: 5rem;
  }
  .about-photo {
    position: relative;
  }
  .about-photo__tape {
    position: absolute;
    top: -0.75rem;
    right: 3rem;
    pointer-events: none;
    transform: rotate(-3deg);
    height: 1.25rem;
    width: 6rem;
    background: rgb(232 116 60 / 35%);
    border-left: 1px dashed rgb(31 31 31 / 15%);
    border-right: 1px dashed rgb(31 31 31 / 15%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  }
  .about-prose {
    max-width: 65ch;
  }
  .about-prose__actions {
    margin-top: 2rem;
  }

  /* ── Reputation management ──────────────────────────────────── */
  .reputation-hero {
    padding-top: 4rem;
    padding-bottom: 3rem;
    color: var(--color-ink-2);
  }
  .reputation-photo {
    display: flex;
    justify-content: center;
  }
  .reputation-photo__img {
    max-width: 20rem;
    border-radius: 1rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    border: 1px solid var(--color-paper-2);
  }
  .reputation-feature {
    padding-block: 5rem;
    color: var(--color-ink-2);
  }

  /* reversed rows: image sits last on mobile, first on desktop (was order-last md:order-first) */
  .reputation-feature__media--reverse {
    order: 99;
  }

  @media (width >= 768px) {
    .reputation-feature__media--reverse {
      order: -1;
    }
  }

  /* ── Reviews ────────────────────────────────────────────────── */
  .reviews-intro {
    padding-top: 4rem;
    padding-bottom: 3rem;
    text-align: center;
    color: var(--color-ink-2);
  }
  .reviews-actions {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  @media (width >= 640px) {
    .reviews-actions {
      flex-direction: row;
    }
  }
  .reviews-cta-icon {
    width: 1rem;
    height: 1rem;
    margin-left: 0.75rem;
  }

  /* ── Lead-capture pages (reputation help / booking-url generator) ── */
  .lead-page {
    color: var(--color-ink-2);
  }
  .lead-page--reputation {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  .lead-page--booking-url {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }
  .lead-form {
    padding: 2rem;
  }
  .lead-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .lead-form__actions {
    display: flex;
    justify-content: flex-end;
  }

  /* Reputation help — extra content bands */
  .review-callout {
    padding-block: 5rem;
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .review-callout__inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  .review-callout__icon {
    width: 2rem;
    height: 2rem;
    margin-top: 0.5rem;
    color: var(--color-terra-400);
    flex-shrink: 0;
  }
  .review-callout__text {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-paper);
  }

  @media (width >= 768px) {
    .review-callout__text {
      font-size: 1.875rem;
    }
  }
  .review-callout__accent {
    color: var(--color-terra-400);
  }
  .review-examples__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .review-examples__img {
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    border: 1px solid var(--color-paper-2);
  }

  /* ── Blog ───────────────────────────────────────────────────── */
  .blog-intro {
    padding-top: 4rem;
    padding-bottom: 3rem;
    text-align: center;
    color: var(--color-ink-2);
  }
  .blog-toolbar {
    max-width: 48rem;
    margin: 2rem auto;
  }
  .blog-search {
    margin-bottom: 2rem;
    padding-inline: 1rem;
  }
  .blog-search__form > * + * {
    margin-top: 1rem;
  }
  .blog-search__row {
    display: flex;
  }
  .blog-search__field {
    position: relative;
    z-index: 1;
    flex: 1;
  }
  .blog-search__input {
    display: block;
    width: 100%;
    padding: 1rem;
    border: 1px solid rgb(31 31 31 / 18%);
    border-radius: 0.75rem 0 0 0.75rem;
  }
  .blog-search__input:hover {
    border-color: rgb(31 31 31 / 55%);
  }
  .blog-search__input:focus {
    outline: none;
    border-color: var(--color-terra-500);
    box-shadow: 0 0 0 1px var(--color-terra-500);
  }
  .blog-search__clear {
    position: absolute;
    inset-block: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
  }
  .blog-search__clear-link {
    color: var(--color-ink-mute);
    padding: 0.5rem;
    border-radius: 9999px;
  }
  .blog-search__clear-link:hover {
    background: var(--color-paper-2);
    color: var(--color-ink-2);
  }
  .blog-search__clear-icon {
    width: 1rem;
    height: 1rem;
  }
  .blog-search__submit {
    border-radius: 0 0.375rem 0.375rem 0;
    margin-left: -1px;
  }
  .blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .blog-categories__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-2);
    font-size: 10.5px;
    letter-spacing: 0.16em;
  }
  .blog-pill {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .blog-pill--active {
    background: var(--color-terra-500);
    color: var(--color-white);
  }
  .blog-pill--inactive {
    background: var(--color-paper-2);
    color: var(--color-ink-2);
  }
  .blog-pill--inactive:hover {
    background: rgb(31 31 31 / 18%);
  }
  .blog-results {
    padding-inline: 1rem;
    margin-bottom: 1rem;
  }
  .blog-results__text {
    font-size: 0.875rem;
    color: var(--color-ink-2);
  }
  .blog-results__clear {
    text-decoration: underline;
    margin-left: 0.5rem;
  }
  .blog-list {
    display: flex;
    flex-direction: column;
  }
  .blog-list > * + * {
    border-top: 1px dashed rgb(31 31 31 / 18%);
  }
  .blog-post-row {
    display: block;
    padding-block: 2.5rem;
    padding-inline: 1rem;
    transition: background-color 0.15s;
  }

  @media (width >= 768px) {
    .blog-post-row {
      padding-inline: 2.5rem;
    }
  }
  .blog-post-row:hover {
    background: rgb(243 236 221 / 50%);
  }
  .blog-post-row__cat {
    margin-bottom: 0.75rem;
  }
  .blog-post-row__cat-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    background: var(--color-terra-100);
    color: var(--color-terra-700);
    border-radius: 9999px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .blog-post-row__title {
    text-align: center;
    color: var(--color-ink-2);
    transition: color 0.15s;
  }
  .blog-post-row:hover .blog-post-row__title {
    color: var(--color-ink);
  }
  .blog-post-row__summary {
    text-align: center;
    font-size: 1.125rem;
  }

  /* Demo video (turbo stream into the modal) */
  .demo-video {
    width: 100vw;
    max-width: 100%;
  }

  @media (width >= 1280px) {
    .demo-video {
      max-width: 80rem;
    }
  }
  .demo-video__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* Booking-url result (turbo stream) */
  .booking-url-result {
    background: var(--color-complementary-light);
    color: var(--color-white);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
  }
  .booking-url-result__label {
    font-weight: 700;
  }
  .booking-url-result__input {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgb(31 31 31 / 18%);
    padding: 0.75rem;
    color: var(--color-ink-2);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* Blog post / long-form prose wrappers (off Tailwind at cutover). */
@layer ds-features {
  .marketing-prose {
    margin-inline: auto;
  }
  .marketing-post {
    max-width: 48rem;
    margin-inline: auto;
    margin-block: 5rem;
    padding-inline: 1rem;
  }
  .marketing-post__title {
    margin-bottom: 4rem;
    font-weight: 700;
    text-align: center;
  }
}

@media (width >= 640px) {
  .marketing-post {
    padding-inline: 1.5rem;
  }
}

/* components/marketing/blog_image_component.rb (Tailwind-cutover straggler) */
.marketing .marketing-blog-image {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}
.marketing .marketing-blog-image__img {
  width: 100%;
}