/* Native hero typography and photo-based recommendation cards. */
.hero.salon-hero{position:relative;isolation:isolate;padding:38px 0 64px;overflow:hidden;color:#101b24}
.salon-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 92% 45%,#fbe3eb 0,transparent 56%),radial-gradient(ellipse at 70% 100%,#fff2f5,transparent 48%)}
.salon-hero-grid{width:calc(100% - 96px);max-width:1480px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:center}
.salon-hero-copy{min-width:0}.salon-hero-label{display:table;padding:8px 28px;border:1px solid #ff3575;border-radius:40px;color:#f52262;font-size:17px;letter-spacing:.1em;margin:0 0 30px}
.salon-hero-kicker{font-size:clamp(23px,2.1vw,32px);font-weight:750;margin:0 0 12px}
.hero.salon-hero h1{font-family:var(--font-display);font-size:clamp(34px,3.55vw,58px);font-weight:850;line-height:1.48;letter-spacing:-.045em;margin:0;color:#101b24;white-space:nowrap}
.salon-hero h1 em{font-style:normal;color:#ed2b64}
.salon-hero-lead{font-size:clamp(16px,1.5vw,23px);font-weight:550;line-height:1.8;color:#596171;margin:26px 0 16px;letter-spacing:0}
.salon-hero-description{font-size:clamp(15px,1.35vw,21px);line-height:1.8;color:#596171;margin:0 0 28px}
.salon-hero-cta{display:flex;align-items:center;justify-content:center;gap:28px;min-height:64px;max-width:500px;background:#ed2d66;color:white;border-radius:15px;font-size:clamp(18px,1.45vw,22px);font-weight:750;text-decoration:none;box-shadow:0 10px 24px #db285e20;transition:background .2s,transform .2s;padding:14px 20px}.salon-hero-cta:hover{background:#d92158;transform:translateY(-2px)}.salon-hero-cta>span{font-size:26px;font-weight:400}
.salon-hero-benefits{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:clamp(15px,1.4vw,21px);color:#596171;line-height:1.5}.salon-hero-benefits li{display:flex;align-items:flex-start;gap:12px}.salon-hero-benefits li:first-child{grid-column:1/-1;font-weight:750;color:#101b24;font-size:clamp(16px,1.53vw,23px)}.salon-hero-benefits li::before{content:"✓";flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff0f5;color:#f22362;font-size:23px}
.salon-hero-visual{min-width:0;margin:0;padding:0 8px}.salon-hero-questions{display:flex;flex-direction:column;gap:14px;margin:0 0 35px;transform:rotate(-5deg)}.salon-hero-questions p{position:relative;background:white;border-radius:22px;padding:17px 20px;display:flex;gap:15px;align-items:center;font-size:clamp(15px,1.45vw,23px);font-weight:600;box-shadow:0 10px 25px #7333490c;width:max-content;max-width:100%;margin:0}.salon-hero-questions p:first-child{align-self:flex-start;margin-left:24px}.salon-hero-questions p:last-child{align-self:flex-end}.salon-hero-questions p::after{content:"";position:absolute;bottom:-11px;left:20px;border-top:15px solid white;border-right:15px solid transparent}.salon-hero-questions p:last-child::after{left:auto;right:20px;transform:scaleX(-1)}.salon-hero-questions i{display:block;flex:0 0 19px;width:19px;height:19px;border:2px solid #ff2870;border-radius:50%;position:relative;margin-right:4px}.salon-hero-questions i::after{content:"";position:absolute;width:9px;height:2px;background:#ff2870;right:-7px;bottom:-3px;transform:rotate(50deg)}
.salon-hero-panel{padding:20px 16px 16px;border-radius:26px;background:#ffffffed;box-shadow:0 16px 44px #7b384414;transform:rotate(-3deg)}
.salon-hero-panel-title{display:flex;align-items:center;gap:14px;padding:0 8px 17px}.salon-hero-panel-title>span{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ff8ab0,#f31d5a);color:white;font-size:37px}.salon-hero-panel h3{font-size:clamp(17px,1.55vw,24px);font-weight:750;line-height:1.5;margin:0}.salon-hero-panel p{font-size:clamp(13px,1.16vw,18px);line-height:1.6;color:#667083;margin:0}.salon-hero-result{display:grid;grid-template-columns:30% 1fr 16px;align-items:center;gap:15px;border:1px solid #e8e9ed;border-radius:16px;padding:10px;margin-top:10px}.salon-hero-result img{width:100%;aspect-ratio:1.75;object-fit:cover;border-radius:9px}.salon-hero-result.is-featured{grid-template-columns:44% 1fr 16px;border:1.5px solid #ff4d83;background:#fff7fa;padding:11px}.salon-hero-result.is-featured img{aspect-ratio:1.6}.salon-hero-candidate{display:table;font-size:clamp(12px,1vw,16px);padding:4px 13px;margin-top:8px;border-radius:25px;background:#ffc5d7;color:#e91655;font-weight:600;white-space:nowrap}.salon-hero-chevron{font-size:32px;color:#657083;font-weight:400}.is-featured .salon-hero-chevron{color:#ff2868}.salon-hero-visual figcaption{text-align:center;font-size:13px;color:#7b8292;margin:26px 0 0}
.diagnosis-dialog .field label .field-optional{background:#f0f1f3;color:#737783}.diagnosis-dialog .dialog-content{padding-bottom:36px}
@media(min-width:1600px){.salon-hero-grid{gap:64px}.hero.salon-hero{padding-top:48px;padding-bottom:80px}}
@media(max-width:1050px) and (min-width:761px){.salon-hero-grid{width:calc(100% - 56px);gap:26px}.hero.salon-hero h1{font-size:3.6vw}.salon-hero-label{font-size:14px;padding:8px 16px}.salon-hero-panel{padding:16px 10px}.salon-hero-result,.salon-hero-result.is-featured{gap:8px;grid-template-columns:33% 1fr 10px}.salon-hero-panel h3{font-size:16px}.salon-hero-panel p{font-size:12px}.salon-hero-questions p{font-size:13px;padding:14px}.salon-hero-questions p:first-child{margin-left:0}.salon-hero-benefits{font-size:13px}.salon-hero-benefits li:first-child{font-size:14px}}
@media(max-width:760px){.hero.salon-hero{padding:24px 0 42px}.salon-hero-grid{width:calc(100% - 40px);max-width:570px;grid-template-columns:1fr;gap:40px}.salon-hero-label{font-size:13px;padding:7px 18px;margin-bottom:24px}.salon-hero-kicker{font-size:22px}.hero.salon-hero h1{font-size:clamp(27px,6.7vw,42px);line-height:1.55;letter-spacing:-.055em}.salon-hero-lead{font-size:16px;margin-top:22px}.salon-hero-description{font-size:14px;line-height:1.85;margin-bottom:22px}.salon-hero-description br{display:none}.salon-hero-cta{min-height:58px;font-size:16px;padding:12px;gap:12px;border-radius:12px}.salon-hero-benefits{font-size:13px;gap:12px 8px;margin-top:18px}.salon-hero-benefits li{gap:7px}.salon-hero-benefits li:first-child{font-size:15px}.salon-hero-benefits li::before{flex-basis:25px;width:25px;height:25px;font-size:19px}.salon-hero-visual{padding:0 6px}.salon-hero-questions{margin-bottom:30px;gap:14px}.salon-hero-questions p{font-size:14px;padding:13px 14px;gap:10px}.salon-hero-questions p:first-child{margin-left:4px}.salon-hero-panel{padding:16px 10px 10px;border-radius:20px;transform:rotate(-2deg)}.salon-hero-panel-title{gap:10px;padding:0 4px 10px}.salon-hero-panel-title>span{width:40px;height:40px;flex-basis:40px;font-size:30px}.salon-hero-panel h3{font-size:17px}.salon-hero-panel p{font-size:12px}.salon-hero-result,.salon-hero-result.is-featured{gap:9px;grid-template-columns:32% 1fr 12px;padding:8px;border-radius:12px}.salon-hero-result.is-featured img{aspect-ratio:1.05}.salon-hero-candidate{font-size:11px;padding:4px 8px}.salon-hero-visual figcaption{font-size:11px;margin-top:20px}}
@media(max-width:350px){.salon-hero-grid{width:calc(100% - 28px)}.hero.salon-hero h1{font-size:25px}.salon-hero-cta{font-size:16px}.salon-hero-questions p{font-size:12px}.salon-hero-panel h3{font-size:15px}.salon-hero-panel p{font-size:11px}.salon-hero-benefits li:first-child{font-size:14px}}

.salon-hero-keep{white-space:nowrap}.salon-hero-description{text-wrap:pretty}

.salon-hero-label{position:relative;top:-16px}

@media(min-width:761px){
  .salon-hero-copy{position:relative;top:-32px}
}

.salon-hero-panel-title>.hero-gemini-mark{background:linear-gradient(125deg,#4285f4 10%,#7774e8 48%,#c58af4 76%,#82b7ff);border-radius:0;clip-path:path("M 25 0 C 28 15 35 22 50 25 C 35 28 28 35 25 50 C 22 35 15 28 0 25 C 15 22 22 15 25 0 Z");width:50px;height:50px;flex-basis:50px}
@media(max-width:760px){.salon-hero-panel-title>.hero-gemini-mark{transform:scale(.8);margin:-5px;flex-basis:50px}}

/* Gemini-style recommendation preview. */
.salon-hero-panel{background:#fff;box-shadow:0 16px 44px #37588112}
.salon-hero-result.is-featured{border-color:#8ab4f8;background:#f5f8ff}
.salon-hero-candidate{background:#dbe9ff;color:#245ab5}
.is-featured .salon-hero-chevron{color:#4285f4}
.salon-hero-result{border-color:#e3e8ef}

/* Compact, readable hero rhythm on phones. */
@media(max-width:760px){
  .hero.salon-hero{padding:24px 0 36px}
  .salon-hero-grid{width:calc(100% - 40px);gap:32px}
  .salon-hero-label{top:0;font-size:11px;letter-spacing:.06em;padding:6px 14px;margin-bottom:20px}
  .salon-hero-kicker{font-size:18px;line-height:1.5;margin-bottom:10px}
  .hero.salon-hero h1{font-size:clamp(24px,6.7vw,36px);line-height:1.5;letter-spacing:-.055em}
  .salon-hero-lead{font-size:14px;line-height:1.85;font-weight:600;margin:18px 0 12px;text-wrap:pretty}
  .salon-hero-description{font-size:13px;line-height:1.85;margin-bottom:20px;text-wrap:pretty}
  .salon-hero-cta{width:100%;max-width:380px;min-height:52px;padding:12px 14px;font-size:15px;line-height:1.6;gap:16px;border-radius:12px}
  .salon-hero-cta>span{font-size:23px}
  .salon-hero-benefits{margin-top:16px;gap:12px 10px;font-size:12px;line-height:1.65}
  .salon-hero-benefits li:first-child{font-size:13px;line-height:1.7}
  .salon-hero-benefits li::before{flex-basis:22px;width:22px;height:22px;font-size:16px;margin-top:2px}
  .salon-hero-questions p{font-size:12px;line-height:1.6;padding:12px;gap:10px;border-radius:16px}
  .salon-hero-questions i{flex-basis:15px;width:15px;height:15px}
}
@media(max-width:350px){
  .salon-hero-grid{width:calc(100% - 32px)}
  .hero.salon-hero h1{font-size:23px}
  .salon-hero-cta{font-size:14px;gap:10px}
  .salon-hero-benefits{font-size:11px}
}

#journey-title .journey-title-phrase{display:inline-block}

@media(min-width:761px){
  .salon-hero-lead{font-size:clamp(15px,1.25vw,19px)}
  .salon-hero-description{font-size:clamp(14px,1.1vw,17px)}
}

.salon-privacy-disclosure{font-size:13px;line-height:1.85;color:var(--color-muted);margin:20px 0}.salon-privacy-disclosure a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}

/* Slightly smaller question bubbles in the hero preview. */
@media(min-width:1051px){
  .salon-hero-questions p{font-size:clamp(14px,1.3vw,21px);padding:15px 18px;gap:13px}
}
@media(min-width:761px) and (max-width:1050px){
  .salon-hero-questions p{font-size:12px;padding:12px}
}
@media(max-width:760px){
  .salon-hero-questions p{font-size:11.5px;padding:11px;gap:9px}
}

/* Smaller question bubbles with an explicit size at each breakpoint. */
.salon-hero .salon-hero-questions p{font-size:16px;padding:12px 15px;gap:11px;border-radius:17px}
.salon-hero .salon-hero-questions i{width:16px;height:16px;flex-basis:16px}
@media(max-width:1050px){.salon-hero .salon-hero-questions p{font-size:12px;padding:10px 12px}}
@media(max-width:760px){.salon-hero .salon-hero-questions p{font-size:11px;padding:9px 10px;gap:8px}.salon-hero .salon-hero-questions i{width:13px;height:13px;flex-basis:13px}}

/* Compact top question bubbles. */
.salon-hero .salon-hero-questions p{font-size:14px;padding:10px 13px;gap:9px;border-radius:15px;font-weight:600}
.salon-hero .salon-hero-questions i{width:14px;height:14px;flex-basis:14px}
@media(max-width:1050px){.salon-hero .salon-hero-questions p{font-size:12px;padding:9px 11px}}
@media(max-width:760px){.salon-hero .salon-hero-questions p{font-size:11px;padding:9px 10px;gap:8px}.salon-hero .salon-hero-questions i{width:13px;height:13px;flex-basis:13px}}

/* Balanced question bubble size between the original and compact versions. */
.salon-hero .salon-hero-questions p{font-size:21px;padding:16px 19px;gap:14px;border-radius:22px}
.salon-hero .salon-hero-questions i{width:19px;height:19px;flex-basis:19px}
@media(max-width:1050px){.salon-hero .salon-hero-questions p{font-size:15px;padding:14px 16px}}
@media(max-width:760px){.salon-hero .salon-hero-questions p{font-size:14px;padding:13px 14px;gap:10px}.salon-hero .salon-hero-questions i{width:15px;height:15px;flex-basis:15px}}

.salon-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.salon-form-row .field{min-width:0}.diagnosis-dialog .dialog-content{padding:30px 36px}.diagnosis-dialog .field{margin-bottom:16px}.diagnosis-dialog .salon-privacy-disclosure{font-size:12px;margin:6px 0 16px}.form-submit:disabled{cursor:default;opacity:.65}.form-status:focus{outline:2px solid var(--color-accent);outline-offset:4px}
@media(max-width:600px){.salon-form-row{grid-template-columns:1fr;gap:0}.diagnosis-dialog .dialog-content{padding:30px 22px}}

.diagnosis-dialog .field{margin-top:12px;margin-bottom:8px}.diagnosis-dialog .dialog-lead{margin-bottom:18px}.diagnosis-dialog .form-submit{margin-top:12px}

.diagnosis-success{padding:30px 10px;text-align:center}.diagnosis-success[hidden]{display:none}.diagnosis-success-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#fff0f5;color:var(--color-accent);font-size:34px;margin:0 auto 24px}.diagnosis-success h2{font-size:28px;line-height:1.5;outline:none}.diagnosis-success p{font-size:15px;line-height:1.9;color:var(--color-muted);margin:20px auto;max-width:460px}.diagnosis-success-close{min-width:200px;margin:12px auto 0}.diagnosis-fields[hidden]{display:none}@media(max-width:600px){.diagnosis-success{padding:24px 0}.diagnosis-success h2{font-size:24px}.diagnosis-success p{font-size:14px}}

/* Keep the opening line at the same scale as the hero headline. */
.hero.salon-hero .salon-hero-kicker{font-family:var(--font-display);font-size:clamp(34px,3.55vw,58px);font-weight:850;line-height:1.3;letter-spacing:-.045em;margin-bottom:0}
@media(max-width:1050px) and (min-width:761px){.hero.salon-hero .salon-hero-kicker{font-size:3.6vw}}
@media(max-width:760px){.hero.salon-hero .salon-hero-kicker{font-size:clamp(24px,6.7vw,36px);line-height:1.3;letter-spacing:-.055em;margin-bottom:0}}
@media(max-width:350px){.hero.salon-hero .salon-hero-kicker{font-size:23px}}
