/* Article-specific composition only. The canonical template remains unchanged. */
:root {
  /* Fallbacks for the canonical template's design-system import in this isolated worktree. */
  --ctm-bg: #fbf8f2;
  --ctm-surface: #fffdf9;
  --ctm-surface-muted: #f3ede2;
  --ctm-surface-sage: #dfe9e2;
  --ctm-surface-accent: #fff0eb;
  --ctm-surface-drawer: #fbfaf6;
  --ctm-surface-header: rgba(255, 253, 249, .96);
  --ctm-surface-warm: #faf6ef;
  --ctm-surface-warm-muted: #f7f3ec;
  --ctm-text: #0d2e29;
  --ctm-forest: #174b3e;
  --ctm-forest-dark: #0b342d;
  --ctm-terracotta-dark: #ab351f;
  --ctm-terracotta-action: #cf452a;
  --ctm-gold: #ad7a26;
  --ctm-border: #ded8cd;
  --ctm-border-subtle: #eee8df;
  --ctm-border-strong: #c8bdae;
  --ctm-border-header: rgba(222, 216, 205, .7);
  --ctm-forest-border: rgba(23, 75, 62, .48);
  --ctm-forest-border-soft: rgba(23, 75, 62, .16);
  --ctm-success: #237453;
  --ctm-warning-surface: #fff5d8;
  --ctm-warning-border: #d9b66f;
  --ctm-warning-ink: #503d19;
  --ctm-warning-text: #6f5535;
  --ctm-font-serif: "Iowan Old Style", Baskerville, "Times New Roman", Georgia, serif;
  --ctm-font-sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --ctm-focus-outline: 3px solid var(--ctm-terracotta-dark);
  --ctm-shadow-soft: 0 12px 32px rgba(25, 40, 34, .08);
  --ctm-shadow-float: 0 18px 50px rgba(7, 38, 31, .15);
  --ctm-shadow-panel: 0 14px 34px rgba(16, 44, 37, .055);
  --ctm-shadow-drawer: -24px 0 64px rgba(10, 31, 25, .22);
  --ctm-shadow-site-header: 0 4px 20px rgba(65, 52, 42, .04);
  --ctm-shadow-mobile-sheet: 0 -20px 54px rgba(10, 31, 25, .23);
  --ctm-shadow-accent-faint: 0 10px 24px rgba(211, 72, 43, .08);
}

.article-trust .article-trust__icon {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
}

.article-trust .article-trust__icon svg {
  display: block;
  margin: 0;
}

.concept-grid,
.scenario-grid {
  display: grid;
  margin-top: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.concept-card,
.scenario-card {
  padding: 20px;
  border: 1px solid var(--ctm-border);
  border-radius: 14px;
  background: var(--ctm-surface);
}

.concept-card small,
.scenario-card small {
  color: var(--ctm-terracotta-dark);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.concept-card h3,
.scenario-card h3 {
  margin: 7px 0 0;
  color: var(--ctm-forest-dark);
  font-family: var(--ctm-font-serif);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.28;
}

.concept-card p,
.scenario-card p {
  margin: 8px 0 0;
  color: var(--ctm-text-muted);
  font-size: .86rem;
  line-height: 1.62;
}

.scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenario-card {
  min-height: 250px;
}

.room-cycle {
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid var(--ctm-border);
  border-radius: 18px;
  background: linear-gradient(145deg, #f8f4ec 0%, #edf4ef 100%);
  box-shadow: var(--ctm-shadow-panel);
}

.room-cycle__head {
  padding: 16px 19px 14px;
  border-bottom: 1px solid rgba(23, 75, 62, .1);
}

.room-cycle__head > span {
  display: block;
  color: var(--ctm-terracotta-dark);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.room-cycle__head h3 {
  margin: 4px 0 0;
  color: var(--ctm-forest-dark);
  font-family: var(--ctm-font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
}

.room-cycle__track {
  display: grid;
  margin: 0;
  padding: 22px 22px 16px;
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.room-cycle__track > li {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 238px;
  padding: 15px 13px 13px;
  border: 1px solid rgba(23, 75, 62, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  flex-direction: column;
}

.room-cycle__track > li:not(:last-child)::after {
  position: absolute;
  top: 28px;
  right: -15px;
  z-index: 2;
  display: grid;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(23, 75, 62, .16);
  border-radius: 50%;
  background: var(--ctm-surface);
  color: var(--ctm-forest);
  content: "›";
  font-size: 1rem;
  font-weight: 800;
  place-items: center;
}

.room-cycle__number {
  color: var(--ctm-terracotta-dark);
  font-family: var(--ctm-font-serif);
  font-size: .78rem;
  font-weight: 700;
}

.room-cycle__track div { margin-top: 12px; }

.room-cycle__track strong {
  display: block;
  color: var(--ctm-forest-dark);
  font-family: var(--ctm-font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.24;
}

.room-cycle__track p {
  margin: 6px 0 0;
  color: var(--ctm-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.room-cycle__track small {
  margin-top: auto;
  padding-top: 12px;
  color: var(--ctm-text-subtle);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.room-cycle__recovery {
  display: flex;
  align-items: center;
  margin: 0 22px 17px;
  padding: 13px 15px;
  border: 1px solid rgba(211, 72, 43, .16);
  border-radius: 13px;
  background: rgba(255, 240, 234, .78);
  color: var(--ctm-text-muted);
  font-size: 13px;
  gap: 9px;
}

.room-cycle__recovery span { color: var(--ctm-terracotta-dark); font-weight: 800; }
.room-cycle__recovery strong { color: var(--ctm-forest-dark); font-weight: 700; }
.room-cycle__recovery i { color: var(--ctm-terracotta-dark); font-style: normal; }

.room-cycle figcaption {
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(23, 75, 62, .1);
  color: var(--ctm-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.steps .step-label {
  display: inline-block;
  margin-top: 10px;
  color: var(--ctm-terracotta-dark);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.steps .compact-points {
  display: grid;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  gap: 6px;
}

.steps .compact-points li {
  position: relative;
  padding-left: 15px;
  color: var(--ctm-text-muted);
  font-size: .83rem;
  line-height: 1.55;
}

.steps .compact-points li::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ctm-terracotta-action);
  content: "";
}

.phrase {
  display: inline-flex;
  align-items: baseline;
  margin: 0 .12em;
  color: var(--ctm-forest-dark);
  font-weight: 700;
  gap: 5px;
}

.phrase em {
  color: var(--ctm-text-faint);
  font-size: .82em;
  font-style: normal;
  font-weight: 600;
}

.source-note {
  margin-top: 10px;
  color: var(--ctm-text-faint);
  font-size: .78rem;
}

@media (max-width: 780px) {
  .concept-grid,
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-card { min-height: 0; }

  .room-cycle__track { padding: 14px; grid-template-columns: 1fr; gap: 9px; }
  .room-cycle__track > li { min-height: 0; padding: 14px; }
  .room-cycle__track > li:not(:last-child)::after { display: none; }
  .room-cycle__track p,
  .room-cycle__track small,
  .room-cycle__recovery,
  .room-cycle figcaption { font-size: 14px; }
  .room-cycle__track small { margin-top: 9px; padding-top: 0; }
  .room-cycle__recovery { align-items: flex-start; margin: 0 14px 14px; flex-direction: column; gap: 5px; }
  .room-cycle__recovery i { display: none; }

  .concept-card p,
  .scenario-card p,
  .requirements-list p,
  .steps p,
  .steps .compact-points li,
  .payment-options p,
  .best-for,
  .tip-grid p,
  .faq-answer p,
  .editorial-note span,
  .mobile-contents nav a,
  .article-trust span,
  .sheet-services small,
  .related-card__body span,
  .footer-brand > p,
  .footer-nav a { font-size: 14px; }
}

@media (max-width: 600px) {
  .room-cycle__head { padding: 15px 16px 14px; }
  .room-cycle__head h3 { font-size: 1.18rem; }
  .room-cycle figcaption { padding: 13px 16px 15px; }
}

@media (max-width: 1100px) {
  /* The sticky header's backdrop filter creates a fixed-position containing block. */
  .mobile-menu,
  .mobile-menu-backdrop {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
  }

  .mobile-menu { overflow-y: auto; }
}