:root {
  --navy: #182d3a; --teal: #236b67; --gold: #d9b87e;
  --cream: #f7f6f1; --ink: #263e45; --muted: #3f555b; --line: #dce2dc;
  --serif: Georgia, 'Times New Roman', serif;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; color: var(--ink); background: var(--cream);
  font-synthesis: none; color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; overflow-y: scroll; scrollbar-gutter: stable; }
body { margin: 0; line-height: 1.5; }
button, input { font: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, a, label { touch-action: manipulation; }
button, a { outline-offset: 4px; }
a { color: var(--teal); }
a:hover { text-decoration: underline; }
button { cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button svg { width: 19px; height: 19px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
[hidden] { display: none !important; }
.sr-only { position: absolute; clip: rect(0,0,0,0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -80px; padding: 12px; background: white; z-index: 10; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 16px; }
.brand { font-family: var(--serif); font-size: 28px; font-weight: bold; letter-spacing: -1px; display: flex; align-items: center; text-decoration: none; color: var(--navy); gap: 8px; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 34px; color: var(--teal); }
.brand-mark svg { width: 29px; height: 29px; }
.brand-dot { color: var(--teal); margin-left: -7px; }
.site-header nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.site-header nav > a { text-decoration: none; color: var(--ink); }
.site-header nav > a:hover { text-decoration: underline; }
.private-badge { display: flex; gap: 6px; align-items: center; border: 1px solid #cbd6cc; border-radius: 30px; padding: 5px 10px; color: #29463a; font-size: 14px; }
.private-badge svg { width: 14px; height: 14px; }
.intro { padding: 14px 0; text-align: center; }
.intro-detail { margin-top: 8px; }
.eyebrow { font-size: 11px; letter-spacing: 1.3px; font-weight: 700; line-height: 1.4; margin: 0 0 9px; color: var(--teal); }
.intro .eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 21px; letter-spacing: .7px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.intro .eyebrow > span { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,3vw,40px); letter-spacing: -.6px; line-height: 1.2; color: var(--navy); margin: 0; }
h1 em { font-weight: 400; color: var(--teal); }
.intro-copy { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--navy); margin: 0; }
.intro-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 15px; font-weight: 600; color: #294c3d; }
.intro-meta span { display: flex; align-items: center; gap: 5px; }
.intro-meta svg { width: 14px; height: 14px; color: var(--teal); }
.finder-layout { display: grid; grid-template-columns: minmax(0,1fr) 344px; align-items: start; gap: 20px; }
.finder-panel { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 6px 24px #182d3a04; }
.stepper { display: flex; margin: 0; padding: 10px 20px; list-style: none; border-bottom: 1px solid #e5eae4; border-radius: 13px 13px 0 0; gap: 14px; background: #fdfefb; }
.stepper li { display: flex; align-items: center; gap: 7px; color: #3d5850; font-size: 14px; flex: 1; position: relative; }
.stepper li:not(:last-child)::after { content: ''; flex: 1; height: 1px; background: var(--line); margin-left: 3px; }
.stepper li > span { width: 24px; height: 24px; border: 1px solid #c7d2ca; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: white; flex-shrink: 0; }
.stepper li b { font-weight: 500; }
.stepper [aria-current='step'] { color: var(--teal); }
.stepper [aria-current='step'] > span, .stepper .complete > span { background: var(--teal); color: white; border-color: var(--teal); }
.stepper [aria-current='step'] b { font-weight: 700; }
form { padding: 16px 20px; }

h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.5px; font-size: 29px; line-height: 1.2; margin: 0; color: var(--navy); }
h2:focus { outline: none; }
.step-desc { font-size: 16px; line-height: 1.4; color: var(--muted); margin: 5px 0 12px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 9px; font-size: 16px; font-weight: 600; color: var(--ink); }
legend small { color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 5px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { position: relative; display: grid; grid-template-columns: 25px minmax(0,1fr) 16px; align-content: center; column-gap: 10px; row-gap: 4px; border: 1px solid #d2ddd4; border-radius: 9px; padding: 8px 12px; cursor: pointer; transition: background .15s, border-color .15s; min-width: 0; min-height: 80px; background: #fff; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:has(input:checked) { border-color: var(--teal); background: #f0f7f4; box-shadow: inset 0 0 0 .5px var(--teal); }
.choice:hover { border-color: #74968a; }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.choice-top { display: contents; color: var(--teal); }
.choice-top > svg, .text-icon { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.choice-top svg { width: 24px; height: 24px; }
.radio-dot { grid-column: 3; grid-row: 1; align-self: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #9bafa3; background: white; }
.choice input:checked ~ .choice-top .radio-dot { border: 5px solid var(--teal); background: white; }
.choice strong { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.choice > span:last-child { grid-column: 2 / 4; grid-row: 2; font-size: 16px; line-height: 1.4; color: var(--muted); }
.text-icon { font-size: 27px; font-weight: 400; line-height: 1; }
.form-status { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); margin: 0; }
.form-actions { position: sticky; bottom: 10px; z-index: 3; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; box-shadow: 0 3px 16px #182d3a12; display: flex; align-items: center; gap: 12px; justify-content: space-between; }

.button { border: 0; min-height: 44px; border-radius: 7px; padding: 10px 18px; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; line-height: 1.4; }
.primary { background: var(--gold); color: var(--navy); }
.primary:hover { background: #d0ab6c; text-decoration: none; }
.primary:disabled { background: #ead6b0; color: #334249; cursor: not-allowed; box-shadow: inset 0 0 0 1px #cdae78; }
.secondary { border: 1px solid #bfcfc3; color: var(--teal); background: white; }
.secondary:hover { background: #f0f7f4; text-decoration: none; }
.routine-grid { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; }
.segmented { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.segmented label { flex: 1; min-width: 0; position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; text-align: center; border: 1px solid #cbd8cd; border-radius: 6px; padding: 8px 6px; font-size: 16px; }
.segmented input:checked + span { background: #eef6f2; color: var(--teal); border-color: var(--teal); font-weight: 600; }
.segmented input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }
.preference-list { display: flex; flex-direction: column; gap: 6px; }
.preference-list > label { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #d6e0d6; border-radius: 7px; padding: 10px; min-height: 44px; cursor: pointer; }
.preference-list > label:has(input:checked) { background: #f0f7f4; border-color: #8aa99b; }
.preference-list input { accent-color: var(--teal); margin: 3px 0 0; width: 18px; height: 18px; flex-shrink: 0; }
.preference-list strong { font-size: 16px; display: block; font-weight: 500; line-height: 1.4; }
.night-note { background: var(--navy); border-radius: 13px; padding: 16px; color: #d5e1db; min-width: 0; }
.night-note .eyebrow { color: #e1ecdf; font-size: 14px; letter-spacing: .7px; margin-bottom: 6px; }
.night-note h2 { color: #fbfbf3; font-size: 25px; line-height: 1.2; }
.category-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.category-list li { min-width: 0; }
.category-list a { display: flex; gap: 10px; align-items: center; min-height: 58px; padding: 6px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; color: #f2f6ed; }
.category-list a:hover { border-color: #8dafa663; background: #ffffff0b; }
.category-list a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; background: #ffffff0b; }
.category-icon { width: 34px; height: 36px; border: 1px solid #abc9be40; border-radius: 8px; display: grid; place-items: center; color: #c4e0d0; flex-shrink: 0; }
.category-icon svg { width: 23px; height: 23px; }
.category-copy { flex: 1; min-width: 0; }
.category-list strong { display: block; color: #fffef5; font-size: 17px; line-height: 1.3; font-weight: 600; }
.category-purpose { font-size: 15px; display: block; line-height: 1.35; color: #deeaeb; margin-top: 2px; }
.category-arrow { font-size: 16px; color: var(--gold); flex-shrink: 0; }
.finder-method { margin: 20px 0 16px; padding: 20px 24px; border: 1px solid #d2dfcf; border-radius: 10px; background: #eaf0e7; color: var(--ink); }
.finder-method .method-label { font-size: 15px; font-weight: 700; color: var(--teal); margin: 0 0 6px; }
.finder-method h2 { font-size: 25px; margin-bottom: 8px; }
.finder-method p { font-size: 16px; margin: 0; line-height: 1.6; }
.finder-method a { color: var(--teal); text-underline-offset: 3px; }
footer { display: grid; grid-template-columns: 1.1fr 1.3fr auto; align-items: start; gap: 12px 24px; border-top: 1px solid var(--line); padding-block: 18px 22px; font-size: 15px; color: #344f41; line-height: 1.6; }
footer a { color: var(--teal); text-underline-offset: 3px; }
.result-header { padding: 20px 24px 18px; background: #f5f9f3; border-bottom: 1px solid var(--line); border-radius: 13px 13px 0 0; }
.result-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: .6px; color: var(--teal); font-weight: 600; margin: 0 0 9px; }
.result-eyebrow svg { width: 17px; height: 17px; }
.result-intro { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 9px 0 12px; }
.answer-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.answer-tags span { font-size: 14px; border: 1px solid #cbdacc; border-radius: 20px; padding: 4px 8px; color: #3d5c49; background: #fff; }
.result-body { padding: 18px 24px 20px; }
.recommendation { border: 1px solid #d4dfd3; border-radius: 9px; margin-bottom: 12px; overflow: hidden; }
.rec-top { display: flex; align-items: center; gap: 12px; padding: 15px 18px 10px; }
.rec-top .category-icon { color: var(--teal); border-color: #cbdcca; background: #f0f6ed; }
.rec-kicker { font-size: 14px; letter-spacing: .9px; font-weight: 600; color: var(--teal); margin: 0 0 3px; }
.rec-top h3 { font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: -.4px; margin: 0; color: var(--navy); line-height: 1.2; }
.rec-copy { padding: 0 18px 4px; }
.rec-why { font-size: 16px; line-height: 1.55; margin: 0 0 12px; color: #435f57; }
.rec-copy dl { margin: 0; }
.rec-copy dt { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.rec-copy dd { font-size: 16px; line-height: 1.55; margin: 0 0 11px; color: var(--muted); }
.rec-links { background: #f9fbf7; border-top: 1px solid #dce6d6; padding: 8px 18px; display: flex; flex-direction: column; gap: 2px; }
.rec-links a { font-size: 16px; line-height: 1.5; padding-block: 6px; text-underline-offset: 3px; }
.notice { padding: 12px 15px; border: 1px solid #e0d3b8; background: #fbf6eb; border-radius: 8px; font-size: 15px; line-height: 1.6; color: #645233; margin: 0 0 14px; }
.notice strong { display: block; font-size: 16px; margin-bottom: 3px; }
.result-fine, .result-source { font-size: 15px; line-height: 1.6; color: var(--muted); }
.result-source { margin-top: 10px; }
.result-source summary { cursor: pointer; padding-block: 6px; color: var(--teal); }
.result-source a { color: var(--teal); }
.result-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.text-button { background: none; border: 0; min-height: 44px; padding: 10px 0; color: var(--teal); text-decoration: underline; text-underline-offset: 4px; font-size: 16px; }
@media (max-width: 1050px) {
  .finder-layout { grid-template-columns: minmax(0,1fr) 300px; gap: 16px; }
  .night-note { padding: 20px 16px; }
  .night-note h2 { font-size: 25px; }
  .category-list a { padding-inline: 4px; gap: 8px; }
  .category-list .category-icon { display: none; }
  .category-list strong { font-size: 17px; }
  .choice { grid-template-columns: 21px minmax(0,1fr) 16px; column-gap: 7px; padding: 8px 10px; }
  .choice-top svg { width: 21px; height: 21px; }
  form, .result-body { padding: 16px; }
  .stepper, .result-header { padding-inline: 18px; }
  .stepper { gap: 9px; }
}
@media (max-width: 850px) {
  .finder-layout { grid-template-columns: 1fr; }
  .intro { display: block; text-align: center; padding-block: 14px; }
  .intro .eyebrow, .intro-meta { justify-content: center; }
  .intro-detail { margin-top: 10px; }
  .intro-copy { font-size: 18px; }
  .night-note { padding: 18px; }
  .night-note h2 { font-size: 25px; }
  .night-note h2 br { display: none; }
  .category-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .category-list a { height: 100%; align-items: flex-start; padding: 10px; border-color: #abc9be35; }
  .category-list .category-icon { display: none; }
  .category-list strong { font-size: 17px; }
  footer { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 28px); }
  .site-header { min-height: 60px; gap: 12px; }
  .brand { font-size: 24px; gap: 6px; }
  .brand-mark { width: 25px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .site-header nav { gap: 12px; font-size: 13px; }
  .private-badge { font-size: 0; padding: 7px; }
  .intro { padding: 18px 0 16px; }
  h1 { font-size: 32px; letter-spacing: -.6px; }
  .intro-copy { font-size: 18px; }
  .intro-meta { font-size: 15px; gap: 6px 12px; margin-top: 9px; }
  .intro .eyebrow { font-size: 21px; }
  .stepper { padding: 12px 14px; gap: 8px; }
  .stepper li { font-size: 14px; gap: 6px; }
  .stepper li:not(:last-child)::after { display: none; }
  .stepper li > span { width: 22px; height: 22px; }
  .finder-panel { border-radius: 11px; }
  form, .result-body { padding: 16px; }
  .result-header { padding: 18px 16px; }
  h2 { font-size: 27px; }
  .step-desc { margin-bottom: 12px; }
  .choice { grid-template-columns: minmax(0,1fr) 16px; padding: 10px; gap: 5px; min-height: 96px; }
  .choice-top > svg, .text-icon { display: none; }
  .choice strong { grid-column: 1; font-size: 17px; }
  .radio-dot { grid-column: 2; }
  .choice > span:last-child { grid-column: 1 / 3; font-size: 16px; }
  .form-actions { gap: 8px 10px; flex-wrap: wrap; }
  .form-status { flex-basis: 100%; order: -1; }
  .form-actions .primary { margin-left: auto; }
  .button { padding-inline: 14px; font-size: 16px; gap: 8px; }
  .routine-grid { grid-template-columns: 1fr; gap: 14px; }
  .segmented { flex-direction: row; flex-wrap: wrap; }
  .segmented label { flex-basis: 40%; }
  .preference-list > label { padding: 10px; }
  .category-list { grid-template-columns: 1fr; gap: 5px; }
  .category-list a { align-items: center; min-height: 64px; gap: 10px; }
  .category-list .category-icon { display: grid; width: 34px; height: 36px; }
  .category-list strong { font-size: 17px; }
  .finder-method { padding: 18px 16px; }
  footer { gap: 10px; padding-block: 16px; }
  .rec-top { padding: 14px 15px 10px; }
  .rec-copy { padding-inline: 15px; }
  .rec-links { padding-inline: 15px; }
  .rec-top h3 { font-size: 24px; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 20px); }
  .brand { font-size: 22px; }
  .site-header nav > a { font-size: 12px; }
  .site-header nav { gap: 8px; }
  h1 { font-size: 30px; }
  .choice-grid { grid-template-columns: 1fr; gap: 8px; }
  .choice { min-height: 88px; }
  .stepper { padding-inline: 10px; }
  .stepper li { font-size: 13px; gap: 4px; }
  .result-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Four short screens; keep the original first-screen visual design. */
.position-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.position-options span{text-align:left;padding:13px 15px;min-height:82px;line-height:1.4}
.position-options strong{display:block;font-size:17px;font-weight:600}
.position-options small{display:block;font-size:15px;font-weight:400;color:var(--muted);margin-top:4px}
.result-categories{margin-bottom:18px}
.result-categories p{font-size:15px;margin:0 0 9px;color:var(--muted)}
.result-categories>div{display:flex;flex-wrap:wrap;gap:8px}
.category-switch{display:flex;align-items:center;gap:7px;border:1px solid #becfc4;background:#fff;color:var(--teal);border-radius:7px;padding:10px 12px;min-height:44px;font-size:15px}
.category-switch svg{width:19px;height:19px}
.category-switch[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}
.focused-advice{border:1px solid #d4dfd3;background:#f6f9f3;border-radius:10px;padding:18px;margin-bottom:24px}
.focus-heading{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.focus-heading .category-icon{color:var(--teal);background:#fff;border-color:#cbdcca}
.focus-heading h3,.shortlist>h3,.comparison>h3,.focused-guide-links h3{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:26px;line-height:1.2;letter-spacing:-.3px;margin:0 0 10px}
.focus-heading h3{margin:0}
.focused-advice>p{margin:0 0 15px;font-size:16px;line-height:1.6}
.decision-points{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #dce6d6;padding-top:14px}
.decision-points h4{font-size:16px;line-height:1.4;margin:0 0 6px}
.decision-points p{font-size:15px;line-height:1.6;margin:0;color:var(--muted)}
.shortlist-note,.comparison-note{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.product-card{display:flex;flex-direction:column;min-width:0;border:1px solid #cfdbd0;border-radius:9px;padding:17px;background:#fff;border-top:3px solid var(--gold)}
.product-card .product-badge{font-size:12px;letter-spacing:.7px;font-weight:700;color:var(--teal);margin:0 0 8px}
.product-card h4{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--navy);line-height:1.2;letter-spacing:-.3px;margin:0 0 9px}
.product-card p{font-size:15px;line-height:1.6;margin:0 0 12px;color:var(--muted)}
.product-card .product-design{font-weight:600;color:var(--ink)}
.product-caution{padding-bottom:10px;border-bottom:1px solid var(--line)}
.compare-choice{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.5;padding-block:8px;margin-top:auto;cursor:pointer;min-height:44px}
.compare-choice input{width:18px;height:18px;flex-shrink:0;margin:3px 0 0;accent-color:var(--teal)}
.product-links{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.product-links a,.focused-guide-links a{font-size:15px;line-height:1.5;text-underline-offset:3px;overflow-wrap:anywhere}
.product-links a:first-child{font-weight:600}
.comparison{margin-top:23px}
.comparison-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:9px}
.comparison-scroll:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.comparison table{border-collapse:collapse;width:100%;min-width:610px;font-size:15px;line-height:1.6}
.comparison th,.comparison td{vertical-align:top;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.comparison th:last-child,.comparison td:last-child{border-right:0}
.comparison thead th{background:#eaf2e8;color:var(--navy);font-weight:600;width:37%}
.comparison thead th:first-child{width:26%}
.comparison tbody th{background:#f7f9f3;color:var(--ink);font-weight:600}
.comparison tr:last-child>*{border-bottom:0}
.comparison-empty{font-size:16px;color:var(--muted);background:#f4f7f1;border-radius:8px;padding:15px}
.focused-guide-links{display:flex;flex-direction:column;gap:7px;padding-block:22px;margin-top:20px;border-top:1px solid var(--line)}
.focused-guide-links h3{font-size:23px;margin:0 0 3px}
@media(max-width:600px){.stepper{justify-content:space-between}.stepper li{flex:0 0 auto}.stepper li b{display:none}.stepper li[aria-current=step]{flex:1}.stepper li[aria-current=step] b{display:block;font-size:14px}.product-grid,.decision-points{grid-template-columns:1fr}.focused-advice{padding:15px}.position-options span{padding:11px;min-height:100px}.position-options small{font-size:14px}.product-card{padding:16px}.comparison th,.comparison td{padding:11px}.comparison table{min-width:580px}}

/* Concise results: one practical tip, two options and three comparison rows. */
.concise-advice{margin-bottom:20px;padding:16px 18px}
.concise-advice h3{font-size:19px;line-height:1.4;margin:0 0 6px;color:var(--navy)}
.concise-advice>p{margin:0 0 8px;line-height:1.6}
.concise-advice>a{font-size:15px;text-underline-offset:3px}
.product-card .product-reason{font-size:16px;line-height:1.55;margin-bottom:10px}

/* Match the live DreamQuietly palette and page rhythm. */
.dq-finder-preview{background:#faf8f2}
.dq-finder-preview .intro{padding-top:22px;padding-bottom:20px}
.dq-finder-preview .intro .eyebrow{font-size:16px;letter-spacing:1.5px;margin-bottom:8px}
.dq-finder-preview .intro h1{font-size:clamp(32px,3.2vw,42px)}
.dq-finder-preview .intro-copy{font-weight:400;font-size:18px;margin-top:9px}
.finder-guide-prompt{border-top:1px solid #ffffff30;padding-top:16px;margin-top:15px;font-size:16px}
.finder-guide-prompt p{margin:0 0 6px;color:#e3ece6}.finder-guide-prompt a{color:#ecd4a5;font-weight:600}

/* Compact, left-aligned finder introduction and matching navigation buttons. */
.dq-finder-preview .intro{text-align:left;padding:12px 0}
.dq-finder-preview .intro h1{font-size:clamp(28px,2.6vw,34px);line-height:1.2}
.dq-finder-preview .intro-detail{margin-top:5px}
.dq-finder-preview .intro-copy{font-size:17px;line-height:1.5;margin:0;text-align:left}
.form-actions .button{min-width:144px}
.form-actions #back{margin-left:0}
.button .back-arrow{transform:rotate(180deg)}
@media(max-width:600px){.form-actions .button{min-width:120px}.dq-finder-preview .intro{padding:12px 0}.dq-finder-preview .intro h1{font-size:28px}}

/* Open suggestions at the top of their panel, matching the approved view. */
#results{scroll-margin-top:8px}