/* Salon landing page only. Shared branding and navigation use public-site.css. */

.salon-page .button {
    gap:12px;
    cursor:pointer;
    font-family:inherit;
}

.salon-page .page {
    width:min(1200px,calc(100% - 48px));
}

.salon-page .salon-hero {
    display:grid;
    grid-template-columns:1fr 1.08fr;
    gap:48px;
    align-items:center;
    padding:72px 0 64px;
}

.salon-page .hero-copy h1 {
    font-size:clamp(40px,4.2vw,59px);
    line-height:1.08;
    letter-spacing:-.045em;
    margin:22px 0;
}

.salon-page .hero-copy h1 span {
    color:var(--primary);
}

.salon-page .hero-lead {
    font-size:19px;
    line-height:1.7;
    color:var(--muted);
    margin:0;
}

.salon-page .hero-detail {
    font-size:14px;
    line-height:1.75;
    color:var(--muted);
    max-width:440px;
    margin:16px 0 0;
}

.salon-page .hero-actions {
    margin-top:27px;
}

.salon-page .hero-actions .button {
    min-height:48px;
    padding:0 19px;
}

.salon-page .reassurance {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted);
    margin:18px 0 0;
}

.salon-page .reassurance span:first-child {
    color:#277a65;
}

.salon-page .hero-visual {
    padding:24px;
    background:linear-gradient(130deg,#e9f6ff,#f5fbff 65%,#e0f4ff);
    border:1px solid #d7eafa;
    border-radius:22px;
    box-shadow:0 24px 65px #1e6ba413;
    transform:rotate(-1deg);
}

.salon-page .visual-label {
    font-size:12px;
    font-weight:600;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:9px;
}

.salon-page .status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:#10b981;
    border-radius:50%;
    flex-shrink:0;
}

.salon-page .screen-button {
    border:0;
    padding:0;
    background:#fff;
    display:block;
    width:100%;
    cursor:zoom-in;
}

.salon-page .screen-button img {
    display:block;
    width:100%;
    height:auto;
}

.salon-page .hero-screen {
    overflow:hidden;
    border:1px solid #d9e5f0;
    border-radius:9px;
    box-shadow:0 15px 24px #20436412;
}

.salon-page .visual-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:20px;
}

.salon-page .visual-bottom>div {
    display:flex;
    align-items:center;
    gap:10px;
}

.salon-page .visual-bottom strong {
    display:block;
    font-size:12px;
}

.salon-page .visual-bottom small {
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:4px;
}

.salon-page .mini-symbol {
    background:#fff;
    width:35px;
    height:35px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#0084ff;
}

.salon-page .sample-label {
    font-size:9px;
    color:#6c8197;
}

.salon-page .audience {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    border-block:1px solid var(--line);
    font-size:13px;
}

.salon-page .audience>span {
    font-size:12px;
    color:var(--muted);
}

.salon-page .audience strong {
    font-weight:550;
}

.salon-page .audience i {
    width:4px;
    height:4px;
    border-radius:50%;
    background:#b4cfdf;
}

.salon-page .section {
    padding:80px 0;
}

.salon-page .section-intro {
    text-align:center;
    margin:0 auto 38px;
    max-width:730px;
}

.salon-page h2 {
    font-size:clamp(29px,3.1vw,40px);
    line-height:1.15;
    letter-spacing:-.035em;
    margin:16px 0;
}

.salon-page p {
    line-height:1.75;
}

.salon-page .section-intro p {
    color:var(--muted);
    font-size:15px;
    max-width:570px;
    margin:0 auto;
}

.salon-page .steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}

.salon-page .steps article {
    padding:12px 26px;
    border-right:1px solid var(--line);
}

.salon-page .steps article:first-child {
    padding-left:0;
}

.salon-page .steps article:last-child {
    border:0;
    padding-right:0;
}

.salon-page .step-no {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    background:#e8f4ff;
    border:1px solid #d3e8fa;
    color:#0084ff;
    font-size:12px;
    border-radius:10px;
}

.salon-page .steps h3 {
    font-size:17px;
    margin:18px 0 9px;
}

.salon-page .steps p {
    font-size:13px;
    color:var(--muted);
    margin:0;
}

.salon-page .stories {
    padding:10px 0 35px;
}

.salon-page .story {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:72px;
    align-items:center;
    padding:42px 0;
}

.salon-page .story.reverse {
    grid-template-columns:1fr 1.05fr;
}

.salon-page .story-photo {
    border-radius:18px;
    overflow:hidden;
    position:relative;
}

.salon-page .story-photo>img {
    display:block;
    width:100%;
    height:360px;
    object-fit:cover;
}

.salon-page .photo-note {
    position:absolute;
    bottom:18px;
    left:18px;
    right:18px;
    display:flex;
    align-items:center;
    gap:9px;
    background:#ffffffed;
    padding:14px;
    border-radius:9px;
    font-size:11px;
}

.salon-page .story-copy p {
    font-size:15px;
    color:var(--muted);
    margin:0 0 22px;
}

.salon-page .check-list {
    list-style:none;
    padding:0;
    margin:0 0 24px;
    display:grid;
    gap:12px;
    font-size:13px;
}

.salon-page .check-list li {
    padding-left:23px;
    position:relative;
}

.salon-page .check-list li:before {
    content:'✓';
    position:absolute;
    left:0;
    color:#15987e;
}

.salon-page .text-link {
    font-size:13px;
    font-weight:600;
    color:#0076e8;
    display:inline-block;
}

.salon-page .text-link span {
    margin-left:12px;
}

.salon-page .screen-wrap {
    background:#eef7ff;
    border:1px solid #d7e7f5;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 18px 38px #163c6410;
}

.salon-page .window-bar {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:15px 18px;
    font-size:11px;
    color:#57738e;
    border-bottom:1px solid #d7e7f5;
}

.salon-page .screen-caption {
    font-size:11px;
    color:var(--muted);
    padding:13px 18px;
    margin:0;
}

.salon-page .quiet-note {
    font-size:11px;
    color:#6c7b8e;
}

.salon-page .plan-tag {
    font-size:11px;
    line-height:1.6;
    background:#eaf4ff;
    color:#32668d;
    border-radius:6px;
    padding:9px 12px;
    display:inline-block;
}

.salon-page .local-section {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:65px;
    padding:48px 56px;
    background:linear-gradient(120deg,#eff8ff,#fafdff);
    border:1px solid var(--line);
    border-radius:20px;
    margin:25px 0 5px;
}

.salon-page .local-heading p {
    font-size:14px;
    color:var(--muted);
}

.salon-page .local-points article {
    display:flex;
    gap:22px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
}

.salon-page .local-points article:first-child {
    padding-top:0;
}

.salon-page .local-points article:last-child {
    border:0;
    padding-bottom:0;
}

.salon-page .local-points article>span {
    font-size:12px;
    color:#0084ff;
    padding-top:3px;
}

.salon-page .local-points h3 {
    font-size:16px;
    margin:0 0 8px;
}

.salon-page .local-points p {
    font-size:13px;
    color:var(--muted);
    margin:0;
}

.salon-page .pricing-section {
    padding-bottom:55px;
}

.salon-page .billing-toggle {
    display:flex;
    gap:4px;
    justify-content:center;
    background:#eaf2f9;
    border:1px solid #dce8f2;
    border-radius:10px;
    width:fit-content;
    margin:-8px auto 28px;
    padding:4px;
}

.salon-page .billing-toggle button {
    border:0;
    border-radius:7px;
    color:#526176;
    background:transparent;
    padding:10px 17px;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}

.salon-page .billing-toggle button[aria-pressed=true] {
    background:#fff;
    color:#006bdb;
    box-shadow:0 2px 6px #24456312;
}

.salon-page .billing-toggle span {
    font-size:10px;
    color:#328276;
    margin-left:7px;
}

.salon-page .price-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.salon-page .price-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:28px;
    box-shadow:0 12px 28px #20466e06;
}

.salon-page .price-card.featured {
    border:1.5px solid #0084ff;
    background:linear-gradient(180deg,#f2f9ff,#fff 55%);
}

.salon-page .plan-top>span {
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#5a7490;
}

.salon-page .plan-top h3 {
    font-size:23px;
    margin:12px 0;
}

.salon-page .plan-top p {
    font-size:13px;
    color:var(--muted);
    min-height:46px;
    margin:0 0 22px;
    max-width:230px;
}

.salon-page .price {
    font-size:29px;
    font-weight:600;
    letter-spacing:-.04em;
    white-space:nowrap;
}

.salon-page .price b {
    font:inherit;
}

.salon-page .price small {
    font-size:11px;
    color:var(--muted);
    letter-spacing:0;
    font-weight:400;
    margin-left:4px;
}

.salon-page .billing-line {
    font-size:11px;
    color:var(--muted);
    margin:8px 0 22px;
}

.salon-page .price-card>.button {
    width:100%;
}

.salon-page .plan-list {
    list-style:none;
    padding:22px 0 0;
    margin:24px 0 0;
    border-top:1px solid var(--line);
    font-size:12px;
    display:grid;
    gap:14px;
}

.salon-page .plan-list li:before {
    content:'✓';
    color:#0084ff;
    margin-right:9px;
}

.salon-page .pricing-footnote {
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:24px;
}

.salon-page .pricing-footnote a {
    color:#0071de;
    text-decoration:underline;
    text-underline-offset:3px;
}

.salon-page .faq-section {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:65px;
    border-top:1px solid var(--line);
    padding:64px 0 80px;
}

.salon-page .faq-section>div>p {
    color:var(--muted);
    font-size:14px;
    margin:0 0 24px;
}

.salon-page .salon-faq details {
    border-bottom:1px solid var(--line);
    padding:20px 0;
}

.salon-page .salon-faq details:first-child {
    padding-top:0;
}

.salon-page .salon-faq summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    list-style:none;
    line-height:1.6;
}

.salon-page .salon-faq summary::-webkit-details-marker {
    display:none;
}

.salon-page .salon-faq summary:after {
    content:'+';
    font-size:22px;
    color:#0084ff;
    font-weight:400;
}

.salon-page .salon-faq details[open] summary:after {
    content:'−';
}

.salon-page .salon-faq p {
    font-size:13px;
    color:var(--muted);
    margin:13px 25px 0 0;
}

.salon-page .closing {
    position:relative;
    text-align:center;
    padding:55px 24px 60px;
    background:radial-gradient(ellipse at 50% 100%,#dcf2ff,transparent 70%),#f4faff;
    border:1px solid #d6eafa;
    border-radius:20px;
    margin:0 0 72px;
    overflow:hidden;
}

.salon-page .closing>img {
    width:50px;
    height:50px;
    object-fit:contain;
    margin-bottom:18px;
}

.salon-page .closing h2 {
    font-size:clamp(28px,3.5vw,42px);
}

.salon-page .closing p {
    font-size:15px;
    color:var(--muted);
}

.salon-page .closing .hero-actions {
    justify-content:center;
}

.salon-page .closing small {
    display:block;
    margin-top:16px;
    font-size:11px;
    color:var(--muted);
}

.salon-page dialog {
    border:1px solid var(--line);
    border-radius:16px;
    padding:36px;
    width:min(480px,calc(100% - 32px));
    color:var(--ink);
    box-shadow:0 25px 100px #122a4a30;
}

.salon-page dialog::backdrop {
    background:#10243c88;
    backdrop-filter:blur(5px);
}

.salon-page dialog h2 {
    font-size:30px;
}

.salon-page dialog p {
    font-size:14px;
    color:var(--muted);
}

.salon-page .dialog-close {
    position:absolute;
    right:14px;
    top:10px;
    border:0;
    background:transparent;
    font-size:28px;
    cursor:pointer;
    color:var(--muted);
    width:40px;
    height:40px;
}

.salon-page #salon-image-dialog {
    width:min(1380px,calc(100% - 32px));
    max-height:92dvh;
    padding:0;
}

.salon-page #salon-image-dialog>img {
    display:block;
    width:100%;
    height:auto;
}

.salon-page .image-dialog-bar {
    position:sticky;
    top:0;
    padding:20px 60px 20px 20px;
    background:#fff;
    font-size:12px;
    border-bottom:1px solid var(--line);
}

.salon-page button:focus-visible,
.salon-page summary:focus-visible,
.salon-page a:focus-visible {
    outline:3px solid #0084ff;
    outline-offset:4px;
}

@media(max-width:1000px){
.salon-page .salon-hero {
    gap:25px;
}

.salon-page .hero-visual {
    padding:18px;
}

.salon-page .story {
    gap:35px;
}

.salon-page .local-section {
    padding:35px;
    gap:35px;
}

.salon-page .price-card {
    padding:22px;
}

.salon-page .price {
    font-size:25px;
}

.salon-page .audience {
    gap:12px;
    flex-wrap:wrap;
}

.salon-page .audience>span {
    width:100%;
}
}
@media(max-width:760px){
.salon-page {
    scroll-padding-top:135px;
}

.salon-page .page {
    width:calc(100% - 36px);
}

.salon-page .salon-hero {
    grid-template-columns:1fr;
    padding:35px 0 32px;
    gap:32px;
}

.salon-page .eyebrow {
    font-size:10px;
}

.salon-page .hero-copy h1 {
    font-size:43px;
    margin:18px 0;
}

.salon-page .hero-lead {
    font-size:16px;
}

.salon-page .hero-detail {
    font-size:13px;
}

.salon-page .hero-actions {
    gap:9px;
}

.salon-page .hero-actions .button {
    font-size:12px;
    padding:0 13px;
}

.salon-page .reassurance {
    font-size:10px;
    gap:14px;
}

.salon-page .hero-visual {
    transform:none;
    padding:18px;
}

.salon-page .sample-label {
    display:none;
}

.salon-page .audience {
    padding:21px 0;
    justify-content:flex-start;
    gap:12px 16px;
    font-size:11px;
}

.salon-page .audience>span {
    font-size:11px;
    margin-bottom:2px;
}

.salon-page .audience i {
    display:none;
}

.salon-page .section {
    padding:48px 0;
}

.salon-page .section-intro {
    margin-bottom:28px;
}

.salon-page .section-intro h2 {
    font-size:29px;
}

.salon-page .section-intro p {
    font-size:13px;
}

.salon-page .steps {
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
}

.salon-page .steps article {
    padding:0;
    border:0;
}

.salon-page .steps h3 {
    font-size:15px;
    margin-top:13px;
}

.salon-page .steps p {
    font-size:12px;
}

.salon-page .story,
.salon-page .story.reverse {
    grid-template-columns:1fr;
    gap:25px;
    padding:26px 0;
}

.salon-page .story .story-copy {
    order:0;
}

.salon-page .story .story-photo,
.salon-page .story .screen-wrap {
    order:1;
}

.salon-page .story h2 {
    font-size:30px;
}

.salon-page .story-copy p {
    font-size:14px;
}

.salon-page .story-photo>img {
    height:auto;
}

.salon-page .check-list {
    font-size:12px;
    margin-bottom:18px;
}

.salon-page .stories {
    padding-bottom:20px;
}

.salon-page .local-section {
    grid-template-columns:1fr;
    padding:26px;
    gap:20px;
    margin-top:15px;
}

.salon-page .local-heading h2 br {
    display:none;
}

.salon-page .local-heading p {
    margin-bottom:0;
}

.salon-page .local-points p {
    font-size:12px;
}

.salon-page .price-grid {
    grid-template-columns:1fr;
    gap:16px;
}

.salon-page .price-card {
    padding:25px;
}

.salon-page .plan-top p {
    min-height:0;
    max-width:none;
    margin-bottom:20px;
}

.salon-page .price {
    font-size:32px;
}

.salon-page .billing-toggle button {
    font-size:11px;
    padding:10px 12px;
}

.salon-page .billing-toggle span {
    font-size:9px;
}

.salon-page .faq-section {
    grid-template-columns:1fr;
    gap:30px;
}

.salon-page .salon-faq summary {
    font-size:13px;
}

.salon-page .closing {
    padding:35px 18px;
    margin-bottom:45px;
}

.salon-page .closing p {
    font-size:13px;
}

.salon-page .closing p br {
    display:none;
}

.salon-page .closing .hero-actions {
    flex-direction:column;
}

.salon-page .closing .button {
    width:100%;
    max-width:270px;
}

.salon-page .closing h2 {
    font-size:30px;
}

.salon-page .visual-bottom strong {
    font-size:11px;
}

.salon-page .photo-note {
    font-size:10px;
    left:12px;
    right:12px;
    bottom:12px;
}

.salon-page .plan-tag {
    font-size:10px;
}
}
@media(prefers-reduced-motion:reduce){
.salon-page {
    scroll-behavior:auto;
}

.salon-page * {
    transition:none!important;
}
}
@media(max-width:760px){
.salon-page .page {
    padding-left:0;
    padding-right:0;
    overflow:visible;
}

.salon-page .hero-actions .button {
    flex:0 0 auto;
}

.salon-page .hero-copy h1 {
    font-size:40px;
}

.salon-page .closing .hero-actions .button {
    flex:auto;
}
}

.salon-page [hidden] { display: none !important; }
.salon-page [data-salon-cycle] > .button { width: 100%; }
.salon-page [data-salon-cycle] + [data-salon-cycle]:not([hidden]) { margin-top: 20px; }
.salon-page .billing-toggle { margin-top: 0; }
.salon-page .price-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.salon-page .price { white-space: normal; }
.salon-page:lang(zh-CN) .hero-copy h1 { line-height: 1.3; letter-spacing: 0; }
.salon-page:lang(zh-CN) h2 { line-height: 1.4; letter-spacing: 0; }
.salon-page:lang(ms) .hero-copy h1 { font-size: clamp(36px, 3.8vw, 52px); }
@media (max-width: 760px) {
    .salon-page .hero-copy h1 { font-size: clamp(32px, 8.5vw, 40px); }
    .salon-page .nav-center { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}