/* Homepage, phones and tablets only (mobile phase 1). Nothing here applies from
   981px, so the signed-off desktop page is untouched. */

/* The chat widget's 5-second "Any questions?" tooltip is removed from the bubble's
   column when it expires, which nudged the bubble: the page's only layout shift.
   The homepage bubble is hidden until the reviews are behind the visitor anyway,
   so the tooltip could never be seen here. (All widths: it is never visible.) */
body.hp #db-chat-tooltip{display:none}

/* The bubble steps aside whenever it would sit on a button or link, a FAQ
   question, the cookie notice or the footer (script in index.html sets
   .chat-obstructs). An open chat panel always stays put. */
body.hp.past-proof.chat-obstructs #db-chat-bubble:not(.db-open){opacity:0;pointer-events:none;transition-duration:.1s}

@media (max-width:980px){
  /* Compact, still a comfortable 48px target. */
  body.hp #db-chat-bubble{bottom:16px;right:16px}
  body.hp #db-chat-toggle{width:48px;height:48px}

  /* Tap targets: at least 44px tall. Padding with an equal negative margin
     grows the tappable area without moving anything on the page. */
  body.hp .logo > a{display:inline-block;padding:11px 0;margin:-11px 0}
  /* (The phone Log In pill exists only below 769px; see the 768px block.) */
  body.hp .hamburger{min-height:44px;min-width:44px;justify-content:center}
  body.hp .rv-link,
  body.hp .hiw-demo,
  body.hp .sc-more a,
  body.hp .hp-final-alt{display:inline-block;padding:11px 0;margin:-11px 0}
  /* (Footer tap targets: css/footer.css, every page.) */
}

/* ── Phase 2: dark header on phones ─────────────────────────────────────────
   The dark bar and its drop-down menu are in css/nav.css (.nav-dark-mobile),
   shared with the other pages. The hero starts right under the 61px bar. */
@media (max-width:768px){
  body.hp .hero{margin-top:61px;padding-top:28px}
}

/* ── Phase 2: the hero on phones and tablets ─────────────────────────────────
   Copy, one full-width CTA, one reassurance line, then the same three genuine
   phones as desktop (small copies from images/hero-mobile/). The old video phone
   is gone from the page entirely. */
@media (max-width:980px){
  body.hp .hero-eyebrow,
  body.hp .hero-btn-secondary,
  body.hp .hero-benefits{display:none}
  body.hp .hero .btn-primary{margin:0}
  /* The phones fade into the hero at the bottom, so it needs little padding below. */
  body.hp .hero{padding-bottom:12px}

  /* --c: centre phone's --ph-scale (420px wide at 1); side phones are 82% of it.
     Steps rather than one formula: the whole group must fit the column (it spans
     about 847px x --c), so each step is the largest that fits that width. */
  body.hp .hero-stack{--c:.5;--s:calc(var(--c) * .82);display:block;position:relative;isolation:isolate;
    width:100%;height:calc(869px * var(--c) + 16px);margin:30px 0 0;
    -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
  body.hp .hero-stack::before{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:92%;height:60%;
    transform:translate(-50%,-50%);border-radius:50%;filter:blur(10px);
    background:radial-gradient(closest-side,rgba(139,92,246,.32),transparent)}
  body.hp .hero-stack .db-iphone{position:absolute;animation:none}
  body.hp .hero-stack .hs-centre{--ph-scale:var(--c);z-index:3;left:50%;top:0;transform:translateX(-50%)}
  body.hp .hero-stack .hs-left,
  body.hp .hero-stack .hs-right{--ph-scale:var(--s);z-index:2;top:calc(869px * (var(--c) - var(--s)) / 2 + 14px)}
  body.hp .hero-stack .hs-left{left:calc(50% - 420px * var(--c) / 2 - 420px * var(--s) * .62);
    transform:perspective(1400px) rotateY(9deg) rotate(-2deg)}
  body.hp .hero-stack .hs-right{left:calc(50% + 420px * var(--c) / 2 - 420px * var(--s) * .38);
    transform:perspective(1400px) rotateY(-9deg) rotate(2deg)}
  body.hp .hero-stack .hs-left .db-screen img,
  body.hp .hero-stack .hs-right .db-screen img{filter:brightness(.74) saturate(.88)}
  body.hp .hero-stack .db-bezel{inset:calc(6px * var(--ph-scale));border-radius:calc(69px * var(--ph-scale))}
  body.hp .hero-stack .db-screen{inset:calc(14px * var(--ph-scale));border-radius:calc(61px * var(--ph-scale))}
  body.hp .hero-stack .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 .hero-stack .hs-sheen{position:absolute;inset:0;pointer-events:none;border-radius:calc(75px * var(--ph-scale));
    background:linear-gradient(118deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.03) 20%,rgba(255,255,255,0) 36%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 2px 1px rgba(255,255,255,.18),0 18px 34px -10px rgba(0,0,0,.55)}
  body.hp .hero-stack .hs-centre .hs-sheen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 2px 1px rgba(255,255,255,.22),
    -18px 8px 30px -12px rgba(0,0,0,.6),18px 8px 30px -12px rgba(0,0,0,.6),0 26px 44px -12px rgba(0,0,0,.55)}
  body.hp .hero-stack .hs-left .hs-sheen{background:linear-gradient(90deg,rgba(8,6,18,.5) 0,rgba(8,6,18,0) 70%)}
  body.hp .hero-stack .hs-right .hs-sheen{background:linear-gradient(270deg,rgba(8,6,18,.5) 0,rgba(8,6,18,0) 70%)}
}
@media (max-width:599px){ body.hp .hero-stack{--c:.42} }
@media (max-width:429px){ body.hp .hero-stack{--c:.4} }
@media (max-width:389px){ body.hp .hero-stack{--c:.37} }
@media (max-width:359px){ body.hp .hero-stack{--c:.315} }
@media (prefers-reduced-motion:reduce){ body.hp .hero-stack,body.hp .hero-stack .db-iphone{animation:none} }
/* styles.css fades the hero copy in on every load; reduced motion means none. */
@media (prefers-reduced-motion:reduce) and (max-width:980px){
  body.hp .hero-content,body.hp .hero .hero-title,body.hp .hero .lead{animation:none}
}

/* ── Phase 3: the product showcase on phones ─────────────────────────────────
   Up to 640px the three tabs share one row of equal columns (a label may take
   two lines), so none hides off the edge. Each tab shows one large, genuine
   phone screen (.sc-mshot) in place of the desktop compositions, which are
   hidden here and, being lazy images, never downloaded. Above 640px .sc-mshot
   is display:none, so its own lazy image is never downloaded on desktop. */
body.hp .sc-mshot{display:none}
@media (max-width:640px){
  body.hp .sc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:440px;
    padding:4px;margin-bottom:26px;border-radius:16px}
  body.hp .sc-tab{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 8px;
    border-radius:12px;font-size:13.5px;line-height:1.25;white-space:normal;text-align:center;text-wrap:balance}
  body.hp .sc-copy h3{font-size:22px;margin-bottom:10px}
  body.hp .sc-copy p{line-height:1.6;margin-bottom:16px}
  body.hp .sc-copy ul{gap:9px}
  body.hp .sc-copy li{font-size:14.5px}
  body.hp .sc-panel{gap:22px}
  body.hp .sc-visual{display:none}
  /* --m: the phone’s --ph-scale. The whole phone shows, so the booking page’s
     first service (name, price, what’s included) is in view, as large as fits. */
  body.hp .sc-mshot{--m:.72;display:block;position:relative;isolation:isolate;padding-bottom:6px}
  body.hp .sc-mshot::before{content:"";position:absolute;z-index:-1;left:50%;top:40%;width:120%;height:70%;
    transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent)}
  body.hp .sc-mshot .db-iphone{--ph-scale:var(--m);margin:0 auto}
  body.hp .sc-more{margin-top:18px}
}
@media (max-width:389px){ body.hp .sc-mshot{--m:.68} }
@media (max-width:359px){ body.hp .sc-mshot{--m:.6} body.hp .sc-tab{font-size:12.5px;padding:6px 4px} }

/* Tablets (641-900px), stacked showcase: the booking page screenshot had
   aspect-ratio:auto, so it held no height until it loaded and the section then
   grew by about 500px. It keeps its real 1600x1169 shape from the start. */
@media (min-width:641px) and (max-width:900px){
  body.hp .sc-visual.sc-visual-bookings .sc-browser img{aspect-ratio:1600/1169}
}

/* ── Phase 3: booking methods ─────────────────────────────────────────────────
   Stacked cards keep their design; the preview boxes lose the fixed 140px
   height they need only to line up side by side, and the spacing tightens. */
@media (max-width:900px){
  body.hp .bm2-demo{height:auto;padding:16px}
}
@media (max-width:640px){
  body.hp .bm2{padding:48px 0 52px}
  body.hp .bm2-head{margin-bottom:24px}
  body.hp .bm2-grid{gap:12px}
  body.hp .bm2-card{padding:16px 16px 18px}
  body.hp .bm2-demo{margin-bottom:14px}
  body.hp .bm2-card p{margin-bottom:10px}
}

/* ── Phase 3: pricing on phones ──────────────────────────────────────────────
   styles.css gives .pricing 64px and 24px of padding below 769px with
   !important, and with the 20px .wrap that left the cards 232px wide at 320.
   Pro comes first wherever the cards stack (script after #pricing), so reading
   and tab order match what is on screen. */
@media (max-width:640px){
  body.hp #pricing{padding:48px 0 52px!important}
  body.hp #pricing .sechead{margin-bottom:26px}
  body.hp #pricing .plans{grid-template-columns:minmax(0,1fr);gap:14px}
  body.hp #pricing .plan{padding:22px 18px 20px}
  body.hp #pricing .plan-feats{gap:10px;margin:16px 0 18px}
  body.hp #pricing .cmp{margin-top:28px}
}
@media (max-width:359px){
  body.hp #pricing .plan{padding:20px 14px 18px}
  body.hp #pricing .plan-feats{padding:12px 10px}
}
/* 901-980px: the desktop's two 436px columns overran the 32px page margins
   (3px from the edge at 901px); they may now narrow to fit. */
@media (min-width:901px) and (max-width:980px){
  body.hp #pricing .plans{grid-template-columns:repeat(2,minmax(0,436px))}
}
/* The welcome offer, on request: a quiet link under the cards (phones and
   tablets only; the popup script decides when it may show). */
body.hp .pr-offer{margin:22px 0 0;text-align:center}
body.hp .pr-offer button{font:inherit;font-size:14.5px;font-weight:600;color:#C4B5FD;background:none;border:0;cursor:pointer;
  padding:10px 4px;line-height:1.5}
body.hp .pr-offer-q{display:block;font-weight:500;color:rgba(255,255,255,.6)}
body.hp .pr-offer-l{text-decoration:underline;text-decoration-color:rgba(196,181,253,.45);text-underline-offset:4px}
body.hp .pr-offer button:hover{color:#fff}
body.hp .pr-offer button:focus-visible{outline:2px solid #C4B5FD;outline-offset:2px;border-radius:6px}
@media (min-width:981px){ body.hp .pr-offer{display:none!important} }

/* ── Phase 3: footer on phones ── now in css/footer.css, shared by every page. */

/* ── Phase 4: defect fixes from the final mobile audit ───────────────────────
   The hero photo sits under a 93-95% overlay at 860px and below (home-overrides.css)
   and changed no visible pixel, yet cost 90KB and was the LCP element. With no
   background image here the browser never requests it. 980px and desktop keep it. */
@media (max-width:860px){ body.hp .hero::before{background-image:none} }
/* (The chat bubble hiding while the phone menu is open is in css/nav.css.) */
@media (max-width:980px){
  /* Closing CTA: keep each arrow with its last words, and "15-minute" in one piece. */
  body.hp .hp-nowrap{white-space:nowrap}
  /* Review pause control: a full 44px tap target (was 42px). */
  body.hp .rv-toggle{padding-top:10px;padding-bottom:10px}
}

/* How it works on phones: each step centred (icon, title, text), separated by
   space rather than hairlines (Jamie, 18 Oct 2026). Tablets and desktop keep
   their grid. */
@media (max-width:640px){
  body.hp .hiw-steps{gap:30px}
  body.hp .hiw-step,body.hp .hiw-step:nth-child(odd),body.hp .hiw-step:nth-child(even),
  body.hp .hiw-step:first-child,body.hp .hiw-step:last-child,body.hp .hiw-step:nth-child(n+3){padding:0;border:0;text-align:center}
  body.hp .hiw-icon{margin:0 auto 12px}
  body.hp .hiw-step p{max-width:34ch;margin:0 auto;text-wrap:balance}
}
/* Real iPhone (Safari 26): past the end of the page, the area behind the floating
   toolbar (and any overscroll) shows the page's base colour, which came from the
   white body. The base is now the footer's dark, so the dark footer and dark header
   run to the screen edges. The body still paints white wherever the page needs it.
   This stylesheet loads on the homepage only; nothing here applies from 981px. */
@media (max-width:980px){ html{background:#12101F} }