/* Homepage product showcase (#product-showcase): three tabs of real DetailBook
   screens. Copy on the left, the product on the right: a browser window of the
   real desktop screen with the matching phone screen overlapping it (bookings,
   calendar), or three phones side by side (business, which exists only as phone
   screens). Panels share one grid cell, so the stage is always the height of
   the tallest and switching tabs never moves the page. Phones are the site's
   .db-iphone component, sized only through --ph-scale. */

body.hp .sc{position:relative;isolation:isolate;overflow:hidden;background:#100C22;color:#fff;padding:72px 0 64px}
body.hp .sc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 420px at 72% 58%,rgba(118,75,162,.32),transparent 70%),
    radial-gradient(560px 320px at 12% 18%,rgba(102,126,234,.14),transparent 70%)}
/* A hairline of light where the dark reviews end and this begins. */
body.hp .sc::after{content:"";position:absolute;top:0;left:50%;width:min(1140px,90%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(185,173,255,.28),transparent)}

body.hp .sc-head{text-align:center;max-width:760px;margin:0 auto 30px}
body.hp .sc-kicker{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B9ADFF;margin:0 0 12px}
body.hp .sc-head h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;color:#fff;text-wrap:balance;margin:0}
body.hp .sc-lead{margin:12px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.66)}

/* ── tabs: a segmented control ─────────────────────────────────────────── */
body.hp .sc-tabs{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 38px;padding:5px;
  border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
body.hp .sc-tab{font:inherit;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.66);background:none;border:0;cursor:pointer;
  padding:10px 20px;border-radius:999px;white-space:nowrap;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
body.hp .sc-tab:hover{color:#fff}
body.hp .sc-tab[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 6px 18px rgba(102,126,234,.35)}
body.hp .sc-tab:focus-visible{outline:2px solid #C4B5FD;outline-offset:2px}

/* ── stage and panels ──────────────────────────────────────────────────── */
body.hp .sc-stage{display:grid;grid-template-columns:minmax(0,1fr)}
/* minmax(0,1fr): the column may shrink below the screenshots' natural width;
   at 320-375px it grew to 365px and clipped the copy on the right. */
body.hp .sc-panel{min-width:0}
body.hp .sc-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:56px;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
body.hp .sc-panel.is-active{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
body.hp .sc-panel:focus-visible{outline:2px solid #C4B5FD;outline-offset:8px;border-radius:12px}

body.hp .sc-copy h3{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.2;color:#fff;margin:0 0 12px;text-wrap:balance}
body.hp .sc-copy p{margin:0 0 22px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.7);text-wrap:pretty}
body.hp .sc-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
body.hp .sc-copy li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86)}
body.hp .sc-copy li svg{flex:none;margin-top:3px;color:#A99BFF}

/* ── visuals ───────────────────────────────────────────────────────────── */
body.hp .sc-visual{position:relative;isolation:isolate;height:440px}
/* The browser window, lifted off the dark section. Dark screenshots on a dark
   band blend, so separation comes from four quiet layers rather than one heavy
   shadow: a lavender hairline border, a lit top edge, a soft purple halo behind
   the window, and a long, low-opacity drop shadow underneath it. */
body.hp .sc-browser{position:absolute;left:0;top:10px;width:calc(100% - 70px);border-radius:16px;overflow:hidden;
  background:#1A1630;border:1px solid rgba(196,181,253,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(8,5,20,.55),
    0 0 46px -6px rgba(139,92,246,.30),
    0 2px 4px rgba(0,0,0,.35),
    0 24px 48px -14px rgba(0,0,0,.6),
    0 60px 110px -40px rgba(6,3,20,.85)}
body.hp .sc-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  background:linear-gradient(180deg,#2E2850,#262043);border-bottom:1px solid rgba(196,181,253,.14)}
/* Muted window controls: recognisable as a browser, not loud. */
body.hp .sc-bar span{width:10px;height:10px;border-radius:50%;background:#E5655F;opacity:.75}
body.hp .sc-bar span:nth-child(2){background:#E2B44C}
body.hp .sc-bar span:nth-child(3){background:#5CBF6A}
body.hp .sc-bar em{display:flex;align-items:center;gap:7px;margin-left:16px;flex:1;max-width:360px;padding:5px 12px;border-radius:8px;
  background:rgba(8,5,20,.35);border:1px solid rgba(255,255,255,.07);
  font-style:normal;font-size:11.5px;letter-spacing:.01em;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hp .sc-bar em::before{content:"";flex:none;width:9px;height:10px;opacity:.7;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Crect x='.5' y='4.2' width='8' height='5.3' rx='1.2' fill='%23fff'/%3E%3Cpath d='M2.3 4.4V3a2.2 2.2 0 0 1 4.4 0v1.4' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E")}
body.hp .sc-browser img{display:block;width:100%;height:auto;aspect-ratio:1669/944;object-fit:cover;object-position:top}

/* The phone overlaps the browser's bottom-right corner. */
body.hp .sc-visual .sc-phone{--ph-scale:.4;position:absolute;right:0;bottom:0;z-index:2}

/* Business: three phones side by side, the middle one raised. */
body.hp .sc-visual-business{display:flex;align-items:center;justify-content:center;gap:22px}
body.hp .sc-trio{--ph-scale:.44;position:relative}
body.hp .sc-trio-2{transform:translateY(-18px)}
body.hp .sc-trio-1 .db-screen img,body.hp .sc-trio-3 .db-screen img{filter:brightness(.92)}

/* Phones at current-iPhone proportions, as in the hero. */
body.hp .sc .db-bezel{inset:calc(6px * var(--ph-scale));border-radius:calc(69px * var(--ph-scale))}
body.hp .sc .db-screen{inset:calc(14px * var(--ph-scale));border-radius:calc(61px * var(--ph-scale))}
body.hp .sc .db-rail{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 2px 1px rgba(255,255,255,.2),
  0 2px 4px rgba(0,0,0,.35),0 26px 50px -12px rgba(0,0,0,.7)}
body.hp .sc .hs-island{position:absolute;left:50%;top:calc(25px * var(--ph-scale));width:calc(125px * var(--ph-scale));
  height:calc(36px * var(--ph-scale));transform:translateX(-50%);border-radius:999px;background:#000}

body.hp .sc-more{text-align:center;margin:34px 0 0}
body.hp .sc-more a{font-size:15px;font-weight:600;color:#C4B5FD;text-decoration:none;transition:color .2s ease}
body.hp .sc-more a:hover{color:#fff}
body.hp .sc-more a:focus-visible{outline:2px solid #C4B5FD;outline-offset:3px;border-radius:4px}

/* ── narrower desktops and tablets ─────────────────────────────────────── */
@media (max-width:1199px){
}
@media (max-width:1100px){
  body.hp .sc-panel{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:40px}
  body.hp .sc-visual{height:400px}
  body.hp .sc-trio{--ph-scale:.38}
}
@media (max-width:900px){
  body.hp .sc{padding:60px 0 52px}
  body.hp .sc-head h2{font-size:30px}
  body.hp .sc-tabs{margin-bottom:30px}
  /* Stacked, each tab takes its own height: sharing the tallest panel left a
     large gap under the shorter ones. A tab change is the visitor’s own action,
     so the height change is not an unexpected layout shift. */
  body.hp .sc-panel{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;align-content:start}
  body.hp .sc-panel:not(.is-active){display:none}
  body.hp .sc-copy{max-width:560px}
  body.hp .sc-visual{height:auto;padding:0 0 40px}
  /* Stacked: the phone would cover the cards, so the full-width browser stands alone. */
  body.hp .sc-browser{position:relative;top:0;width:calc(100% - 40px)}
  body.hp .sc-visual .sc-phone{--ph-scale:.32}
}
/* Phones: one row of three tabs and one large phone screen per tab instead of
   these compositions; see css/home-mobile.css (mobile phase 3). */
@media (max-width:640px){
  body.hp .sc-head h2{font-size:26px}
  body.hp .sc-lead{font-size:15.5px}
  body.hp .sc-copy p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  body.hp .sc-panel,body.hp .sc-panel.is-active,body.hp .sc-tab{transition:none}
}

/* Each tab takes its own height on desktop; the active panel fades in. */
@media (min-width:901px){
  body.hp .sc-panel:not(.is-active){display:none}
  body.hp .sc-panel.is-active{animation:sc-in .25s ease both}
}
@keyframes sc-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.hp .sc-panel.is-active{animation:none}}

/* Bookings: same frame, width and phone as the calendar tab, but the screenshot
   keeps its own proportions so all three service cards show in full, down to
   their Select Service buttons. */
body.hp .sc-visual.sc-visual-bookings .sc-browser img{aspect-ratio:auto;object-fit:fill}
@media (min-width:901px){ body.hp .sc-visual.sc-visual-bookings{height:500px} }
@media (min-width:901px) and (max-width:1100px){ body.hp .sc-visual.sc-visual-bookings{height:440px} }

/* Business: three real analytics screens as a layered trio. The middle phone
   leads, larger and in front; the side phones sit tucked behind it, lower. */
@media (min-width:901px){
  body.hp .sc-visual-business{height:520px;gap:0;isolation:isolate}
  body.hp .sc-visual-business::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:420px;z-index:-1;
    transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(139,92,246,.34),rgba(99,102,241,.12) 60%,transparent)}
  body.hp .sc-trio{--ph-scale:.47}
  body.hp .sc-trio-1,body.hp .sc-trio-3{z-index:1;transform:translateY(34px)}
  body.hp .sc-trio-1{margin-right:-14px}
  body.hp .sc-trio-3{margin-left:-14px}
  body.hp .sc-trio-2{--ph-scale:.56;z-index:2;transform:none}
  body.hp .sc-trio-1 .db-screen img,body.hp .sc-trio-3 .db-screen img{filter:brightness(.88)}
}
@media (min-width:901px) and (max-width:1100px){
  body.hp .sc-visual-business{height:440px}
  body.hp .sc-trio{--ph-scale:.39}
  body.hp .sc-trio-2{--ph-scale:.47}
  body.hp .sc-trio-1{margin-right:-12px}
  body.hp .sc-trio-3{margin-left:-12px}
}

/* Front camera lens on the right of the Dynamic Island, as on the hero phones. */
body.hp .sc .hs-island{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
body.hp .sc .hs-island::after{content:"";position:absolute;top:50%;right:calc(12px * var(--ph-scale));
  width:calc(13px * var(--ph-scale));height:calc(13px * var(--ph-scale));transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 32%,rgba(140,160,255,.55) 0,rgba(40,52,96,.9) 22%,#0d1222 50%,#04060c 72%);
  box-shadow:0 0 0 calc(1.5px * var(--ph-scale)) #14161d}