/* Cosmetic Guide: editorial design system. Existing clinical and interactive
   components retain their semantics and behaviour. */
:root {
  --bg: #f8f7f3;
  --bg2: #eaf1ef;
  --ink: #173e47;
  --ink2: #526c70;
  --line: #d4dfdb;
  --accent: #135864;
  --accent2: #0b3e48;
  --accent-soft: #e0eeea;
  --gold: #d6b776;
  --gold-hover: #c5a15a;
  --serif: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
h1 { font-size: clamp(3.25rem, 5.3vw, 5.7rem); letter-spacing: -.045em; line-height: .99; }
h2 { letter-spacing: -.035em; }
.top { min-height: 100px; padding-block: 12px; background: rgba(248,247,243,.97); border-bottom: 1px solid var(--line); }
.brand { flex-direction: row; gap: 16px; align-items: center; }
.brand-logo { width: 105px; height: 65px; object-fit: cover; mix-blend-mode: multiply; }
.brand .brand-label { border-left: 1px solid #b9cbc5; padding-left: 16px; margin: 0; font-size: .68rem; letter-spacing: .14em; color: var(--ink); }
.top nav { gap: 34px; }
.top nav a { color: var(--ink); font-size: .84rem; }
.btn, .search-box, input, select { border-radius: 4px; }
#headerPlan { background: var(--ink); border-color: var(--ink); color: #fff; padding-inline: 20px; }
#headerPlan:hover { background: var(--accent); }
.atlas { max-width: 1440px; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(48px, 7vw, 110px); padding: 72px 48px 90px; }
.intro { padding-top: 30px; margin-bottom: 34px; }
.eyebrow { color: var(--accent); font-size: .69rem; letter-spacing: .16em; font-weight: 700; }
.intro .eyebrow::before { content: ''; display: inline-block; width: 30px; border-top: 1px solid currentColor; vertical-align: middle; margin-right: 12px; }
.intro p.lede { font-size: 1.13rem; max-width: 45ch; line-height: 1.75; color: var(--ink2); margin-top: 25px; }
.search-form { margin-top: 38px; }
.search-form > label { font-weight: 650; margin-bottom: 10px; }
.search-box { border: 1px solid #a7beb8; padding: 5px; background: #fff; box-shadow: 0 10px 32px #173e470a; }
.search-box input { min-height: 52px; padding-left: 15px; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: white; padding-inline: 23px; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.search-form .micro { margin: 10px 0 16px; }
.quick-paths { gap: 8px; }
.quick-paths button { background: #fff; border-color: #d2dfda; padding: 9px 15px; }
.filter-panel { margin-top: 18px; }
.catalogue-head { margin-top: 38px; margin-bottom: 20px; align-items: end; }
.catalogue-head h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
.treatment-grid { gap: 14px; }
.treatment-card { background: #fff; border: 1px solid #e0e8e4; border-radius: 4px; padding: 24px; gap: 13px; box-shadow: 0 8px 30px #173e4707; transition: border-color .2s, transform .2s, box-shadow .2s; }
.treatment-card:hover { transform: translateY(-3px); border-color: #a5beb5; box-shadow: 0 14px 35px #173e4710; }
.treatment-card h3 { font-size: 1.45rem; }
.treatment-card .card-category { color: var(--accent); font-weight: 700; letter-spacing: .12em; }
.treatment-card .save-btn { border-radius: 3px; }
.stage-pane { top: 28px; }
.stage-pane figure { border-radius: 180px 5px 5px 5px; background: #e6eeeb; }
.stage-pane figure img { aspect-ratio: 4/4.8; object-fit: cover; object-position: center 22%; }
.stage-pane figcaption { padding: 25px 30px 30px; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.24; color: var(--ink); }
.visual-controls { padding: 14px 0 18px; }
.companion-note { padding: 23px 26px; margin-top: 24px; border: 1px solid var(--line); background: #f1f5f1; }
.companion-note p:not(.eyebrow) { font-size: 1.04rem; margin: 10px 0; }
.companion-note span { color: var(--accent); }
.learn-section, .market-section, .agents-section { margin-top: 65px; }
.learn-section h2 { font-size: clamp(2.2rem, 3.5vw, 3.2rem); }
.learn-section summary { font-size: 1rem; }
.market-section, .plan-note { background: #e7efea; border-radius: 4px; padding: 30px; }
.agents-section blockquote { background: #fff; }
.detail h1, .comparison h1, .plan h1 { color: var(--ink); }
.detail section h2 { font-family: var(--serif); }
.facts { background: #eef3ef; padding: 0 18px; }
.steps button { border-radius: 4px; }
.tray { background: #e7efea; }
:focus-visible { outline: 3px solid #0b6775; outline-offset: 3px; }
@media (max-width: 900px) {
  .top { min-height: 80px; }
  .atlas { gap: 36px; padding: 36px 24px 70px; }
  .intro { padding-top: 0; }
  .stage-pane figure { border-radius: 100px 4px 4px 4px; }
}
@media (max-width: 600px) {
  .top { padding: 12px 18px; gap: 10px; }
  .brand-logo { width: 80px; height: 50px; }
  .brand .brand-label { font-size: .6rem; padding-left: 10px; }
  .atlas { padding: 30px 18px 60px; }
  h1 { font-size: clamp(3rem, 11vw, 4.25rem); }
  .intro p.lede { font-size: 1.05rem; }
  .search-form { margin-top: 28px; }
  .search-box button { min-width: 88px; padding-inline: 14px; }
  .treatment-card { padding: 20px; }
  .stage-pane figure img { aspect-ratio: 4/4.6; object-position: center 22%; }
  .stage-pane figcaption { padding: 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { .treatment-card { transition: none; } .treatment-card:hover { transform: none; } }
@media print { body { background: white; } .treatment-card { box-shadow: none; } }
/* The embedded guide can follow the host's dark appearance. */
html[data-theme="dark"] .top { background: var(--bg); }
html[data-theme="dark"] :is(.search-box, .quick-paths button, .treatment-card, .agents-section blockquote) { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] :is(.companion-note, .market-section, .plan-note, .facts, .tray, .stage-pane figure) { background: var(--bg2); }
html[data-theme="dark"] :is(.stage-pane figcaption, .brand .brand-label, .top nav a) { color: var(--ink); }
html[data-theme="dark"] .btn.primary, html[data-theme="dark"] #headerPlan { background: #b9dcd5; border-color: #b9dcd5; color: #123b42; }

/* Editorial direction: beauty on your terms. */
:root { --bg:#f6f3ec; --bg2:#e9eee7; --ink:#183f3b; --ink2:#506963; --line:#d5ddd3; --accent:#24665b; --accent2:#143f39; --accent-soft:#dcebe1; }
.top { background:#f6f3ec; min-height:92px; }
.atlas { max-width:1500px; padding-top:58px; gap:clamp(56px,7vw,112px); }
.intro { padding-top:38px; }
.intro h1 { font-size:clamp(4.1rem,6.3vw,6.9rem); line-height:.95; letter-spacing:-.055em; }
.intro h1 em { font-weight:400; color:#a35443; }
.intro p.lede { font-size:1.15rem; max-width:42ch; }
.stage-pane figure { border-radius:46% 46% 3px 3px; background:#dbe7dd; }
.stage-pane figure img { aspect-ratio:4/4.45; object-position:center 24%; }
.stage-pane figcaption { background:#e5ede5; font-size:clamp(1.55rem,2vw,2rem); padding:25px 30px 30px; }
.stage-pane figcaption em, .mobile-editorial figcaption em { color:#a35443; }
.guide-promise { display:flex; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:30px 0 38px; }
.guide-promise p { flex:1; margin:0; padding:15px 12px 15px 0; font-size:.77rem; font-weight:650; line-height:1.4; }
.guide-promise p + p { border-left:1px solid var(--line); padding-left:16px; }
.guide-promise span { display:block; font-family:var(--serif); font-size:1.08rem; font-weight:400; color:#a35443; margin-bottom:3px; }
.search-form { margin-top:0; }
.search-form > label { font-family:var(--serif); font-size:1.65rem; font-weight:400; letter-spacing:-.025em; }
.search-box { border-color:#9eb6a9; }
.path-label { font-size:.67rem; letter-spacing:.14em; font-weight:700; color:var(--accent); margin:20px 0 10px; }
.quick-paths button { background:transparent; border-color:#bdcfc4; }
.quick-paths button:hover { background:#e4eee6; }
.catalogue-head { border-top:1px solid var(--ink); padding-top:20px; }
.treatment-card { background:#fdfcf8; border-color:#dde3d9; border-radius:2px; }
.treatment-card h3 { font-size:1.55rem; }
.trust-strip { margin-top:46px; background:#183f3b; color:#f7f4e8; padding:24px 26px; display:grid; grid-template-columns:1fr auto; gap:10px 24px; align-items:start; }
.trust-strip span { grid-column:1/-1; font-size:.66rem; letter-spacing:.14em; font-weight:700; color:#c4d7c5; }
.trust-strip p { margin:0; max-width:52ch; font-size:.9rem; line-height:1.6; }
.trust-strip a { color:#fff; font-size:.8rem; white-space:nowrap; }
.mobile-editorial { display:none; }
@media(max-width:900px) {
 .atlas { padding-top:28px; }
 .intro { padding-top:0; }
 .intro h1 { font-size:clamp(3.8rem,10vw,5.7rem); }
 .mobile-editorial { display:block; margin:24px 0 0; background:#e5ede5; border-radius:48% 48% 3px 3px; overflow:hidden; }
 .mobile-editorial img { width:100%; aspect-ratio:4/3.7; object-fit:cover; object-position:center 24%; display:block; }
 .mobile-editorial figcaption { font-family:var(--serif); font-size:1.45rem; line-height:1.3; padding:20px 22px; }
 #editorialPortrait { display:none; }
 .stage-pane { margin-top:0; }
 .guide-promise { margin-top:24px; }
}
@media(max-width:600px) {
 .intro h1 { font-size:clamp(3.7rem,12vw,5rem); }
 .intro p.lede { font-size:1.05rem; }
 .guide-promise p { font-size:.7rem; }
 .guide-promise p + p { padding-left:9px; }
 .trust-strip { display:block; padding:22px; }
 .trust-strip p { margin:10px 0; }
 .search-form > label { font-size:1.45rem; }
}
html[data-theme="dark"] .top { background:var(--bg); }
html[data-theme="dark"] .mobile-editorial, html[data-theme="dark"] .stage-pane figcaption { background:var(--bg2); }
html[data-theme="dark"] .intro h1 em, html[data-theme="dark"] .stage-pane figcaption em, html[data-theme="dark"] .mobile-editorial figcaption em { color:#e4b2a3; }
@media(max-width:600px) {
 .top { gap:2px 8px; padding:8px 18px; }
 .top .brand { gap:7px; }
 .top .brand-logo { width:62px; height:40px; }
 .top .brand .brand-label { font-size:.56rem; padding-left:8px; }
 .top > #headerPlan { padding:8px 10px; font-size:.74rem; }
 .mobile-editorial { border-radius:110px 110px 3px 3px; }
 .mobile-editorial img { aspect-ratio:4/3.2; object-position:center 30%; }
}
.mobile-editorial img { height:auto; }
@media(max-width:600px) {
 .mobile-editorial { border-radius:70px 70px 3px 3px; }
 .mobile-editorial img { aspect-ratio:4/4.2; object-position:center top; }
}
/* Embedded app: preserve the editorial identity while fitting the host surface. */
.chatgpt-atlas .chatgpt-controls { border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:26px; }
.chatgpt-atlas .chatgpt-controls .actions { gap:8px; }
.chatgpt-atlas .chatgpt-controls .btn { min-height:42px; }
.chatgpt-atlas .intro { padding-top:0; }
.chatgpt-atlas .intro h1 { font-size:clamp(2.8rem,6vw,5rem); line-height:1; }
.chatgpt-atlas .atlas-welcome { margin:24px 0 30px; padding:24px; background:#e7eee6; border:1px solid #d5e1d5; border-radius:3px; }
.chatgpt-atlas .atlas-welcome h2 { font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.5rem); margin:8px 0 20px; }
.chatgpt-atlas .atlas-goals button { background:#fafaf5; border-radius:3px; color:#183f3b; min-height:110px; }
.chatgpt-atlas .atlas-goals button:hover, .chatgpt-atlas .atlas-goals button[aria-pressed="true"] { border-color:#24665b; background:#dcebe1; }
.chatgpt-atlas .atlas-goals strong { font-family:var(--serif); font-weight:400; font-size:1.2rem; }
.chatgpt-atlas .atlas-goals span { color:#506963; }
.chatgpt-atlas[data-theme="dark"] .atlas-welcome { background:var(--bg2); border-color:var(--line); }
.chatgpt-atlas[data-theme="dark"] .atlas-goals button { background:var(--bg); color:var(--ink); }
.chatgpt-atlas[data-theme="dark"] .atlas-goals span { color:var(--ink2); }
.chatgpt-atlas[data-theme="dark"] .atlas-goals button:hover, .chatgpt-atlas[data-theme="dark"] .atlas-goals button[aria-pressed="true"] { background:var(--accent-soft); }