/* SaloSpa marketing site: header, footer, photo scenes and legal pages.
   Shared by the home page and the privacy and terms pages (layout2). */

:root {
    --ss-violet:   #7c3aed;
    --ss-violet-2: #6d28d9;
    --ss-pink:     #ec4899;
    --ss-ink:      #17131f;
    --ss-muted:    #6b6675;
    --ss-border:   #ebe7f2;
    --ss-surface:  #f6f4fc;
    --ss-cream:    #fbfaff;
    --ss-nav-h:    72px;
}

/* Header ------------------------------------------------------------------
   No grey hover boxes: the page you are on (and the link under the pointer)
   is underlined with the S stroke from the SaloSpa mark, in the mark's own
   violet to pink, ending in the mark's small dot. */
.ss-nav {
    position: sticky; top: 0; z-index: 60;
    background: rgb(251 250 255 / .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ss-border);
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
}
.ss-nav-row { display: flex; align-items: center; gap: 24px; height: var(--ss-nav-h); }
.ss-nav-logo { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.ss-nav-logo img { height: 38px; width: auto; display: block; }
.ss-nav-logo .ss-logo-dark { display: none; }

.ss-nav-links { display: none; align-items: center; gap: 6px; margin-left: 28px; }
.ss-nav-links a,
.ss-nav-signin {
    position: relative; display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px;
    font-size: 16px; font-weight: 500; color: #3d3747; text-decoration: none;
    transition: color .2s ease;
}
.ss-nav-links a:hover, .ss-nav-links a[aria-current] { color: var(--ss-ink); }
.ss-nav-links a {
    --ss-dot: #1f2937;
    --ss-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%237c3aed'/%3E%3Cstop offset='.55' stop-color='%23a855f7'/%3E%3Cstop offset='1' stop-color='%23ec4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 5.5 C 12 0.5 19 0.5 30 4 S 49 7.5 58 2.5' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.ss-nav-links a::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 9px;
    background:
        radial-gradient(circle, var(--ss-dot) 0 2.1px, transparent 2.6px) right top / 6px 6px no-repeat,
        var(--ss-wave) left bottom / calc(100% - 6px) 7px no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .32s ease;
    pointer-events: none;
}
.ss-nav-links a:hover::after,
.ss-nav-links a:focus-visible::after,
.ss-nav-links a[aria-current]::after { clip-path: inset(0 0 0 0); }
.ss-nav-signin:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--ss-pink); }

.ss-nav-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ss-nav-signin { display: none; }
.ss-nav-cta { display: none !important; min-height: 44px; padding: 10px 22px !important; font-size: 15px !important; }

.ss-nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent;
    color: var(--ss-ink); cursor: pointer;
}
.ss-nav-burger svg { width: 24px; height: 24px; }
.ss-nav-burger .ss-burger-close { display: none; }
.ss-nav-burger[aria-expanded="true"] .ss-burger-open { display: none; }
.ss-nav-burger[aria-expanded="true"] .ss-burger-close { display: block; }
.ss-nav-burger:focus-visible, .ss-nav a:focus-visible { outline: 2px solid var(--ss-violet); outline-offset: 2px; border-radius: 8px; }

@media (min-width: 480px) { .ss-nav-cta { display: inline-flex !important; } }
@media (min-width: 640px) { .ss-nav-signin { display: inline-flex; } }
@media (min-width: 992px) {
    .ss-nav-links { display: flex; }
    .ss-nav-burger { display: none; }
}

/* Phone menu: drops below the bar; the header is fully solid while it is open. */
.ss-menu { border-top: 1px solid var(--ss-border); background: #fff; padding: 8px 0 20px; }
.ss-menu[hidden] { display: none; }
.ss-menu .container-default { display: flex; flex-direction: column; }
.ss-menu a:not(.ss-btn-primary) {
    display: flex; align-items: center; min-height: 52px; padding: 0 4px;
    font-size: 18px; font-weight: 500; color: var(--ss-ink); text-decoration: none;
    border-bottom: 1px solid var(--ss-border);
}
.ss-menu .ss-btn-primary { justify-content: center; margin-top: 18px; min-height: 50px; }
@media (min-width: 992px) { .ss-menu { display: none !important; } }
.ss-nav:has([data-menu-button][aria-expanded="true"]) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Over the hero photo (home page only): no bar, white type. It turns solid
   once the photo has scrolled away, or while the phone menu is open. */
.ss-nav-photo {
    position: fixed; inset: 0 0 auto 0;
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background-color .3s ease, border-color .3s ease;
}
.ss-nav-photo.is-solid {
    background: rgb(251 250 255 / .94); border-bottom-color: var(--ss-border);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ss-nav-photo:not(.is-solid) .ss-logo-light { display: none; }
.ss-nav-photo:not(.is-solid) .ss-logo-dark { display: block; }
.ss-nav-photo:not(.is-solid) .ss-nav-links a,
.ss-nav-photo:not(.is-solid) .ss-nav-signin,
.ss-nav-photo:not(.is-solid) .ss-nav-burger { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.ss-nav-photo:not(.is-solid) .ss-nav-links a {
    --ss-dot: #fff;
    --ss-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='.55' stop-color='%23d8b4fe'/%3E%3Cstop offset='1' stop-color='%23f9a8d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 5.5 C 12 0.5 19 0.5 30 4 S 49 7.5 58 2.5' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.ss-nav-photo:not(.is-solid) .ss-nav-burger:hover { background: rgb(255 255 255 / .12); }
.ss-nav-photo:not(.is-solid) a:focus-visible, .ss-nav-photo:not(.is-solid) .ss-nav-burger:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .ss-nav-links a::after, .ss-nav-photo { transition: none; } }

/* Photo scenes: a self-hosted photo, a dark scrim, content on top. */
.ss-scene { position: relative; isolation: isolate; overflow: hidden; background: var(--ss-ink); color: #fff; }
.ss-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; }
.ss-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); pointer-events: none; }

.ss-hero {
    --pos: 22% 50%;
    --scrim: linear-gradient(180deg, rgb(23 19 31 / .55) 0, rgb(23 19 31 / 0) 180px),
             linear-gradient(90deg, rgb(23 19 31 / .9) 0%, rgb(23 19 31 / .78) 42%, rgb(23 19 31 / .45) 100%);
    display: flex; align-items: center;
    min-height: min(100svh, 920px);
    padding: calc(var(--ss-nav-h) + 56px) 0 88px;
}
.ss-hero > .container-default { width: 100%; }
.ss-hero h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.ss-hero-lede { color: rgb(255 255 255 / .9); }
.ss-hero .ss-proof-text { color: rgb(255 255 255 / .85); }
.ss-hero .ss-proof-text strong { color: #fff; }
.ss-hero .ss-proof-avatars .ss-av { border-color: rgb(23 19 31 / .6); }
.ss-hero .ss-btn-ghost { color: #fff; border-color: rgb(255 255 255 / .6); }
.ss-hero .ss-btn-ghost:hover { background: rgb(255 255 255 / .14); border-color: #fff; color: #fff; }
.ss-hero-note { color: rgb(255 255 255 / .85); }
@media (max-width: 1023px) {
    .ss-hero {
        --pos: 18% 50%;
        --scrim: linear-gradient(180deg, rgb(23 19 31 / .86) 0%, rgb(23 19 31 / .8) 60%, rgb(23 19 31 / .7) 100%);
        padding: calc(var(--ss-nav-h) + 32px) 0 64px;
        min-height: 0;
    }
}

.ss-final {
    --pos: 50% 55%;
    --scrim: linear-gradient(180deg, rgb(23 19 31 / .72), rgb(23 19 31 / .8));
}
/* Narrow card: slide the crop left so both lit candles stay in frame. */
@media (max-width: 640px) { .ss-final { --pos: 12% 55%; } }

/* Footer ------------------------------------------------------------------ */
.ss-foot { background: var(--ss-ink); padding-top: 64px; font-family: 'Jost', system-ui, -apple-system, sans-serif; }
.ss-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; }
.ss-foot-brand img { height: 36px; width: auto; margin-bottom: 20px; display: block; }
.ss-foot-brand p { font-size: 15px; color: rgb(255 255 255 / .72); line-height: 1.7; margin: 0 0 12px; }
.ss-foot-brand .ss-foot-legal { font-size: 13px; color: rgb(255 255 255 / .62); }
.ss-foot h2 { font-family: 'Jost', system-ui, sans-serif !important; letter-spacing: 0 !important; font-weight: 600; color: #fff; margin: 0 0 10px; font-size: 15px; }
.ss-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ss-foot ul a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    font-size: 15px; color: rgb(255 255 255 / .74); text-decoration: none; transition: color .2s;
}
.ss-foot ul a:hover { color: #fff; }
.ss-foot-base {
    border-top: 1px solid rgb(255 255 255 / .1); padding: 14px 0;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
}
.ss-foot-base p { font-size: 14px; color: rgb(255 255 255 / .62); margin: 0; }
.ss-foot-base nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ss-foot-base nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; color: rgb(255 255 255 / .66); text-decoration: none; }
.ss-foot-base nav a:hover { color: #fff; }
@media (max-width: 1023px) { .ss-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 640px) { .ss-foot-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Legal pages ----------------------------------------------------------------- */
.ss-legal { background: var(--ss-cream); font-family: 'Jost', system-ui, -apple-system, sans-serif; }
.ss-legal ul { list-style: disc; }
.ss-legal ol { list-style: decimal; }
.ss-legal .ss-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--ss-violet-2); text-decoration: none; margin-bottom: 24px; }
.ss-legal .ss-back:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Buttons (moved here from the home page so the legal pages share them) */
.ss-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    background: var(--ss-violet); color: #fff;
    font-weight: 700; font-size: 15px;
    border-radius: 100px; border: none; cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none;
}
.ss-btn-primary:hover, .ss-btn-primary:focus { background: var(--ss-violet-2); color: #fff; transform: translateY(-1px); }
.ss-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px;
    background: transparent; color: var(--ss-ink);
    font-weight: 600; font-size: 15px;
    border-radius: 100px; border: 2px solid var(--ss-border);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-decoration: none;
}
.ss-btn-ghost:hover { border-color: var(--ss-violet); background: #f5f0ff; }
.ss-legal h1, .ss-legal h2 { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }

/* How it works: the steps beside a phone showing a salon's booking page ------
   Frame, keys, island, status bar and home bar are pure CSS. Inside the screen
   every size is in --u, one CSS pixel of a 390px-wide phone, so the booking page
   (layouts/booking + livewire/booking/booking-flow, step "Date & Time") keeps
   its real proportions at any phone size. */
.ss-how-grid { display: grid; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }
.ss-how-grid .ss-steps-grid { max-width: 560px; width: 100%; margin: 0 auto; }
@media (min-width: 1024px) {
    .ss-how-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; }
    .ss-how-grid .ss-steps-grid { margin: 0; }
}
.ss-how-phone { display: flex; flex-direction: column; align-items: center; }

.ss-hand {
    position: relative; width: 100%; max-width: 300px; margin: 0; padding: 10px; border-radius: 52px;
    background: linear-gradient(150deg, #4b4852 0%, #1c1a21 38%, #111015 62%, #3b3842 100%);
    box-shadow: inset 0 0 0 1px #6d6976, inset 0 0 0 3px #08070a,
                0 50px 90px -40px rgb(42 14 79 / .55), 0 22px 40px -24px rgb(23 19 31 / .45);
}
.ss-hand-key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2c2a31, #524e5a); }
.ss-hand-key.is-action { left: -2px; top: 104px; height: 24px; }
.ss-hand-key.is-up     { left: -2px; top: 148px; height: 44px; }
.ss-hand-key.is-down   { left: -2px; top: 202px; height: 44px; }
.ss-hand-key.is-power  { right: -2px; top: 166px; height: 70px; background: linear-gradient(270deg, #2c2a31, #524e5a); }
.ss-hand-screen {
    --u: calc(100cqw / 390);
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    aspect-ratio: 9 / 19.5; border-radius: 42px; background: #fff; color: #0A102F;
    container-type: inline-size;
}
.ss-hand-island { position: absolute; top: calc(11 * var(--u)); left: 50%; width: calc(122 * var(--u)); height: calc(35 * var(--u)); transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 2; }
.ss-hand-status {
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    height: calc(56 * var(--u)); padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(44 * var(--u));
    font: 600 calc(16 * var(--u)) / 1 -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums; color: #000;
}
.ss-hand-icons { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.ss-hand-icons svg { fill: currentColor; height: calc(12 * var(--u)); width: auto; }
.ss-hand-icons svg.is-batt { height: calc(13 * var(--u)); }
.ss-hand-url {
    display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); flex-shrink: 0;
    height: calc(40 * var(--u)); margin: 0 calc(14 * var(--u)) calc(8 * var(--u)); border-radius: calc(13 * var(--u));
    background: #efeff1; font: 400 calc(15 * var(--u)) / 1 -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; color: #1c1c1e;
}
.ss-hand-url svg { fill: currentColor; opacity: .6; height: calc(13 * var(--u)); width: auto; }
.ss-hand-home { position: absolute; left: 50%; bottom: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(5 * var(--u)); transform: translateX(-50%); border-radius: 999px; background: #0A102F; opacity: .9; }

/* The booking page itself (sp-* styles in layouts/booking, Tailwind sizes from booking-flow). */
.ss-bp { flex: 1; min-height: 0; overflow: hidden; background: #FAF9F5; font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ss-bp-head {
    display: flex; align-items: center; justify-content: space-between;
    height: calc(72 * var(--u)); padding: 0 calc(16 * var(--u));
    background: #fff; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
}
.ss-bp-name { font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.ss-bp-burger { display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 1px solid #E6E6E6; border-radius: calc(8 * var(--u)); }
.ss-bp-burger svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ss-bp-body { padding: calc(16 * var(--u)) calc(16 * var(--u)) 0; }
.ss-bp-card {
    background: #fff; border: 1px solid #E6E6E6; border-radius: calc(16 * var(--u));
    box-shadow: 0 1px 2px rgba(10,16,47,.04), 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-24 * var(--u)) rgba(10,16,47,.22);
    padding: calc(20 * var(--u)); margin-bottom: calc(16 * var(--u));
}
.ss-bp-label { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0A102F; opacity: .4; margin-bottom: calc(12 * var(--u)); }
.ss-bp-label.is-roomy { margin-bottom: calc(16 * var(--u)); }
.ss-bp-row { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ss-bp-svc { font-weight: 500; }
.ss-bp-dim { color: #9ca3af; white-space: nowrap; }
.ss-bp-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.ss-bp-chip {
    display: inline-flex; align-items: center; gap: calc(8 * var(--u));
    padding: calc(10 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid #E6E6E6; border-radius: 999px;
    font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; color: #6b7280; white-space: nowrap;
}
.ss-bp-chip.is-on { border-color: #0A102F; color: #0A102F; }
.ss-bp-av { display: flex; align-items: center; justify-content: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: #f4f2f7; color: #7c3aed; font-size: calc(12 * var(--u)); font-weight: 700; }
.ss-bp-av.is-any { background: #FAF9F5; color: inherit; }
.ss-bp-av svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ss-bp-days { display: flex; gap: calc(8 * var(--u)); overflow: hidden; padding-bottom: calc(4 * var(--u)); }
.ss-bp-day {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    padding: calc(12 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid #E6E6E6; border-radius: calc(10 * var(--u)); color: #6b7280;
}
.ss-bp-day small { font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ss-bp-day small.is-mon { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ss-bp-day b { font-size: calc(20 * var(--u)); line-height: 1.25; font-weight: 700; margin: calc(2 * var(--u)) 0; }
.ss-bp-day.is-on { background: #0A102F; border-color: #0A102F; color: #fff; }
.ss-bp-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); }
.ss-bp-slot { padding: calc(12 * var(--u)) 0; text-align: center; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; border: calc(2 * var(--u)) solid #E6E6E6; border-radius: calc(10 * var(--u)); color: #4b5563; }
.ss-bp-slot.is-on { border-color: #0A102F; color: #0A102F; }
.ss-bp-back { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(20 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid #E6E6E6; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: #9ca3af; }
.ss-bp-back svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ss-hand-caption { margin: 20px 0 0; max-width: 320px; text-wrap: balance; text-align: center; font-size: 14px; line-height: 1.55; color: var(--ss-muted); }