/* Mattress-selection guide: isolated so a DEV preview does not alter other pages. */
.ff-guide { overflow: clip; }
.ff-guide__hero { background: var(--ff-color-panel); border-bottom: 1px solid var(--ff-color-border); }
.ff-guide__hero-grid { display: grid; min-height: 424px; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); align-items: stretch; }
.ff-guide__hero-copy { display: flex; padding: clamp(40px, 6vw, 80px) clamp(0px, 4vw, 56px) clamp(40px, 6vw, 80px) 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.ff-guide__hero-copy h1 { max-width: 11ch; margin-bottom: 18px; }
.ff-guide__hero-copy > p:not(.ff-eyebrow) { max-width: 38rem; margin-bottom: 0; color: var(--ff-color-text-muted); font-size: var(--ff-fs-body-lg); text-wrap: pretty; }
.ff-guide__hero-actions,
.ff-guide__closing-actions { display: flex; margin-top: 28px; flex-wrap: wrap; gap: 10px; }
.ff-guide__route { display: grid; margin: 0; padding: clamp(32px, 5vw, 64px); align-content: center; gap: 16px; color: #fff; background: var(--ff-color-text); list-style: none; }
.ff-guide__route li { display: grid; padding-bottom: 16px; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-weight: 700; line-height: 1.25; }
.ff-guide__route li:last-child { padding-bottom: 0; border-bottom: 0; }
.ff-guide__route span { color: #f5899a; font-size: var(--ff-fs-caption); font-weight: 800; letter-spacing: 0.08em; }
.ff-guide__start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ff-guide__start-card { overflow: hidden; min-height: 0; padding: 0; background: #fff; border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-md); }
.ff-guide__card-visual { margin: 0; overflow: hidden; background: #f7f5f2; border-bottom: 1px solid var(--ff-color-border); }
.ff-guide__card-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ff-guide__card-copy { padding: 22px 24px 26px; }
.ff-guide__card-number { display: grid; width: 34px; height: 34px; margin-bottom: 20px; place-items: center; color: var(--ff-color-brand); background: #fff5f6; border: 1px solid #f5c8d0; border-radius: 50%; font-size: var(--ff-fs-caption); font-weight: 800; }
.ff-guide__start-card h3 { margin-bottom: 9px; }
.ff-guide__start-card p,
.ff-guide__steps-list p,
.ff-guide__compare-grid p { margin: 0; color: var(--ff-color-text-muted); text-wrap: pretty; }
.ff-guide__steps-grid { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 8vw, 120px); }
.ff-guide__steps-intro { padding-top: 4px; }
.ff-guide__steps-intro h2 { max-width: 9ch; }
.ff-guide__steps-intro > p:not(.ff-eyebrow) { max-width: 27rem; color: var(--ff-color-text-muted); }
.ff-guide__steps-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ff-guide__steps-list li { display: grid; padding: 22px 0; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; border-top: 1px solid var(--ff-color-border); }
.ff-guide__steps-list li:last-child { border-bottom: 1px solid var(--ff-color-border); }
.ff-guide__steps-list h3 { margin-bottom: 7px; }
.ff-guide__step-number { display: grid; width: 34px; height: 34px; place-items: center; color: var(--ff-color-brand); background: var(--ff-color-panel); border-radius: 50%; font-size: var(--ff-fs-small); font-weight: 800; }
.ff-guide__firmness { background: #f8f5f0; }
.ff-guide__firmness-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr); align-items: center; gap: clamp(36px, 8vw, 120px); }
.ff-guide__firmness-grid h2 { max-width: 13ch; }
.ff-guide__firmness-grid > div > p:not(.ff-eyebrow) { max-width: 37rem; color: var(--ff-color-text-muted); text-wrap: pretty; }
.ff-guide__note { margin-top: 22px !important; padding-left: 14px; border-left: 3px solid var(--ff-color-brand); font-size: var(--ff-fs-small); }
.ff-guide__firmness-table { overflow-x: auto; background: #fff; border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-md); }
.ff-guide__firmness-table:focus-visible { outline: 3px solid var(--ff-color-brand); outline-offset: 3px; }
.ff-guide__firmness-table table { width: 100%; min-width: 320px; border-collapse: collapse; }
.ff-guide__firmness-table th,
.ff-guide__firmness-table td { padding: 17px 20px; border-bottom: 1px solid var(--ff-color-border); text-align: left; }
.ff-guide__firmness-table thead th { color: var(--ff-color-text-muted); background: #fbfaf8; font-size: var(--ff-fs-caption); letter-spacing: 0.04em; text-transform: uppercase; }
.ff-guide__firmness-table tbody tr:last-child th,
.ff-guide__firmness-table tbody tr:last-child td { border-bottom: 0; }
.ff-guide__firmness-table tbody th { width: 28%; color: var(--ff-color-brand); font-size: 1.1rem; }
.ff-guide__compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ff-guide__compare-grid article { padding: 22px; background: var(--ff-color-panel); border: 1px solid var(--ff-color-border); border-radius: var(--ff-radius-md); }
.ff-guide__compare-grid .ff-guide__compare-card { overflow: hidden; padding: 0; background: #fff; }
.ff-guide__compare-card .ff-guide__card-copy { padding: 20px 20px 22px; }
.ff-guide__compare-grid h3 { min-height: 2.3em; margin-bottom: 10px; }
.ff-guide__closing { padding-top: var(--ff-space-8); }
.ff-guide__closing-card { display: flex; padding: clamp(28px, 5vw, 56px); align-items: center; justify-content: space-between; gap: 36px; background: var(--ff-color-text); border-radius: var(--ff-radius-lg); }
.ff-guide__closing-card h2 { max-width: 16ch; margin-bottom: 12px; color: #fff; }
.ff-guide__closing-card p:not(.ff-eyebrow) { max-width: 42rem; margin: 0; color: rgba(255, 255, 255, 0.72); text-wrap: pretty; }
.ff-guide__closing-card .ff-eyebrow { color: #f5899a; }
.ff-guide__closing-actions { margin: 0; flex: 0 0 auto; }
.ff-guide__closing-card .ff-button--secondary { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.5); }
.ff-guide__closing-card .ff-button--secondary:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: #fff; }

@media (max-width: 1040px) {
	.ff-guide__hero-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr); }
	.ff-guide__steps-grid,
	.ff-guide__firmness-grid { gap: 48px; }
	.ff-guide__compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.ff-guide__hero-grid,
	.ff-guide__steps-grid,
	.ff-guide__firmness-grid { grid-template-columns: 1fr; }
	.ff-guide__hero-copy { padding: 48px 0 34px; }
	.ff-guide__route { padding: 28px 0 38px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: transparent; color: var(--ff-color-text); }
	.ff-guide__route li { display: block; padding: 14px 12px; border: 1px solid var(--ff-color-border); background: #fff; font-size: var(--ff-fs-small); }
	.ff-guide__route li:last-child { border-bottom: 1px solid var(--ff-color-border); }
	.ff-guide__route span { display: block; margin-bottom: 8px; color: var(--ff-color-brand); }
	.ff-guide__start-grid { grid-template-columns: 1fr; }
	.ff-guide__steps-intro h2,
	.ff-guide__firmness-grid h2 { max-width: none; }
	.ff-guide__closing-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
	.ff-guide__hero-copy { padding-top: 38px; }
	.ff-guide__hero-copy h1 { max-width: 9ch; }
	.ff-guide__hero-actions,
	.ff-guide__hero-actions .ff-button,
	.ff-guide__closing-actions,
	.ff-guide__closing-actions .ff-button { width: 100%; }
	.ff-guide__route,
	.ff-guide__compare-grid { grid-template-columns: 1fr; }
	.ff-guide__compare-grid h3 { min-height: 0; }
	.ff-guide__firmness-table th,
	.ff-guide__firmness-table td { padding: 14px 16px; }
	.ff-guide__closing-card { padding: 28px 22px; }
}