/* Homepage corrections layered over the generated css/home.css.
   Everything here is something the design reference could not know about:
   the real fixed nav, the real phone component, and rules in styles.css that
   need explicitly undoing. No !important — the handoff forbids it. */

/* ── fixed nav clearance ──────────────────────────────────────────────────
   The reference has a static stand-in nav, so its hero starts at y=0. The real
   nav is position:fixed and 85px tall. */
body.hp .hero{margin-top:85px}

/* ── undo styles.css hero decorations ─────────────────────────────────────
   styles.css defines .hero::before and .hero::after as 700px and 600px
   decorative CIRCLES with border-radius:50%. The reference sets inset:0 on
   both, but inset alone does not undo an explicit width/height/border-radius —
   the background photo renders inside a disc with a visible edge. */
body.hp .hero::before,
body.hp .hero::after{width:auto;height:auto;border-radius:0}

/* ── the real phone ───────────────────────────────────────────────────────
   The reference's .phone/.phone-screen are stand-ins and are skipped by
   gen-home-css.js. The site's own .db-iphone and .phone-frame components are
   kept AS THEY WERE — do not set width on them here.

   .db-iphone is sized by the unitless --ph-scale (1 = 420px wide) and every
   inset, radius and side-button dimension is calculated from it. Forcing a
   width shrinks the chassis while the internals stay at full size, which is
   what warped the mockups. To resize one, set --ph-scale, never width. */

/* ── grid tracks must be allowed to shrink ────────────────────────────────
   A `1fr` track is minmax(auto, 1fr), and the auto minimum is the item's
   min-content width — so a track never shrinks below its content unless the
   item is given min-width:0.

   The hero phone is 420px wide at --ph-scale:1. On a 390px viewport the single
   -column hero track was forced to 420px, the document became wider than the
   screen, and every section rendered cut off to the right: the h1, the nav
   Log In, the trusted logos, all of it. max-width:100% on the phone cannot fix
   this on its own — it resolves against a track that content has already
   widened. */
body.hp .hero .wrap > *,
body.hp .split > *{min-width:0}

/* ── featured proof ───────────────────────────────────────────────────────
   One real review anchors the trust section, sitting directly on the lavender
   with no card, border or shadow — the quiet treatment is what makes it read as
   editorial rather than as the first item in the grid below it.

   720px against the grid's 1140px so it is visibly a pull-quote, not a card. */
body.hp .proof{max-width:720px;margin:40px auto 0;text-align:center}
body.hp .proof blockquote{margin:0;font-size:21px;font-weight:500;line-height:1.55;
  letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
body.hp .proof figcaption{display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:22px;padding-top:22px;position:relative}
/* 32px hairline, not a full-width rule — enough to separate voice from source */
body.hp .proof figcaption::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:32px;height:1px;background:var(--line)}
body.hp .proof-mark{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--tint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
body.hp .proof-mark img{width:100%;height:100%;object-fit:cover}
body.hp .proof-who{text-align:left}
body.hp .proof-biz{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
body.hp .proof-meta{display:block;margin-top:2px;font-size:12.5px;color:var(--mute)}

/* Supporting evidence, not calls to action: no pill, no border, no background.
   Reads as a caption to the quote above it. */
body.hp .proof-points{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;
  margin:32px 0 0;padding:0;list-style:none}
body.hp .proof-points li{display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--body)}

/* Separates the single featured voice from the weight of everything else. */
body.hp .tgrid{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}

/* The founder line introduces the next narrative rather than supporting the
   claim, so it closes the section instead of interrupting the run of proof. */
body.hp .founder-line{margin:56px 0 0;text-align:center;font-size:15px;font-weight:600}

@media (max-width:768px){
  body.hp .proof blockquote{font-size:18px}
  body.hp .proof-points{flex-direction:column;align-items:flex-start;gap:12px;
    max-width:280px;margin-left:auto;margin-right:auto}
  body.hp .tgrid{margin-top:40px;padding-top:40px}
}

/* ── review source badges ────────────────────────────────────────────────
   The reference uses a plain uppercase text label. The originals carry each
   platform's own mark, which reads as real third-party proof, so they are kept.
   .src becomes a plain wrapper; the badge inside keeps its own brand styling. */
body.hp .tcard-top{align-items:center}
body.hp .tcard-top .src{font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}
body.hp .tcard-top .src > div{white-space:nowrap}

/* ── closing CTA extras ───────────────────────────────────────────────────
   The reference's panel has only a heading, a line and one button. The live
   page also carries a demo link and a reassurance line; both are copy, so they
   stay — set quietly beneath the button rather than dropped. */
body.hp .cta-alt{margin-top:20px;font-size:14.5px}
body.hp .cta-alt a{font-weight:600}
body.hp .cta-reassure{margin-top:14px;font-size:13px;color:var(--mute)}

/* ── showcase slide label ─────────────────────────────────────────────────
   Sits under the phone, outside the chassis, so it needs its own alignment
   once .showcase-image becomes the reference's .split-media flex row. */
body.hp .split-media{flex-direction:column;align-items:center;gap:14px}
body.hp .db-slide-label{font-size:13px;font-weight:600;color:var(--mute);text-align:center}

/* ── logo stays inline ────────────────────────────────────────────────────
   Scoped to `section` in the generated file, but belt-and-braces: if the nav
   logo ever picks up display:block the navbar loses the descender space it
   sits on and renders a few px shorter than every other page. */
body.hp nav .logo img{display:inline;vertical-align:baseline}

/* ── "That's just the start" ──────────────────────────────────────────────
   A transitional bridge into pricing, not a destination. It was taking a full
   96px section with a gradient CTA as prominent as the ones that actually
   convert — inviting the reader onto /features immediately before being shown
   what it costs. Shorter, and the link is now secondary so the eye carries on
   down to Choose Your Plan. */
body.hp .hp-features-cta{padding:64px 0}
body.hp .hp-features-cta .cta-panel h2{font-size:31px}
body.hp .hp-features-cta .cta-panel p{font-size:16.5px;margin-bottom:24px}
body.hp .hp-features-cta .btn-grad{background:none;color:var(--pu);border:1px solid var(--line);
  box-shadow:none;padding:13px 24px;font-size:15px}
body.hp .hp-features-cta .btn-grad:hover{border-color:var(--pu);color:var(--pu2);transform:none}
@media (max-width:768px){ body.hp .hp-features-cta{padding:44px 0} }

/* ── mobile hero ──────────────────────────────────────────────────────────
   MOBILE ONLY — everything here is inside a max-width query. The desktop hero
   is approved and must not move.

   Measured before: nav 91px, the phone block occupying y=182 to 643, the
   headline not starting until y=723 and the CTA at y=1173. The entire first
   viewport was navigation and a screenshot of software the visitor had not yet
   been told about. Hero total 1322px; social proof at 1392px.

   Copy now leads and the phone proves it. No height target is enforced: at
   ~260px wide the phone is ~530px tall, so a fixed 850px hero would only be
   reachable by cropping it. The goal is the proposition and CTA inside the
   first viewport, and social proof arriving materially sooner. */
@media (max-width:768px){ body.hp .hero h1{font-size:34px} }

@media (max-width:860px){

  /* The fourth reassurance item exists for mobile, where the CTA label drops
     its suffix. Desktop keeps its original three. */
  body.hp .hero-trust .mob-only{display:inline-flex}

  /* Copy first, phone second. */
  body.hp .hero .wrap{grid-template-columns:1fr;gap:0}
  body.hp .hero-content{order:0}
  body.hp .hero-demo{order:1;margin-top:36px}

  /* Left-aligned, not centred. One strong vertical edge reads as deliberate;
     centred copy in a 350px column gives ragged edges on both sides and starts
     every line in a different place. */
  body.hp .hero{text-align:left;padding:34px 0 48px}
  body.hp .hero h1{font-size:34px;line-height:1.12;letter-spacing:-.03em}
  body.hp .hero .lead{margin:16px 0 0;max-width:330px;font-size:16.5px;line-height:1.6}

  body.hp .hero-buttons{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:24px}
  body.hp .hero .btn-primary{display:block;width:100%;padding:16px 20px;text-align:center}
  /* "— No Card Required" is carried by the trust row on mobile, so the button
     is just the action. */
  body.hp .hero .cta-suffix{display:none}
  body.hp .hero-demo-link{display:block;margin:0;padding:0;line-height:1.4;align-self:flex-start}

  /* Four items, two lines, quiet. */
  body.hp .hero-trust{justify-content:flex-start;gap:8px 20px;margin-top:26px;
    padding-top:20px;font-size:13px}
  body.hp .hero-trust span.i{flex:0 0 auto;min-width:calc(50% - 10px)}

  /* Phone sized so the fold cuts it, which reads as "there is more" rather than
     as a gap. The component is untouched — only --ph-scale changes. */
  body.hp .hero .db-iphone{--ph-scale:.62}

  /* More overlay behind the headline: the text block now sits over the image
     rather than beside it. */
  body.hp .hero::after{background:
    radial-gradient(820px 480px at 18% 0,rgba(118,75,162,.52) 0,transparent 64%),
    radial-gradient(640px 420px at 88% 12%,rgba(102,126,234,.34) 0,transparent 66%),
    linear-gradient(170deg,rgba(23,19,49,.90) 0,rgba(13,11,24,.95) 68%,#0D0B18 100%)}
}

/* Desktop keeps three reassurance items and the full CTA label. */
body.hp .hero-trust .mob-only{display:none}

/* The support bubble sat over the CTA — the one area on the page that nothing
   should compete with. It fades in once the hero is behind you. */
body.hp #db-chat-bubble{opacity:0;pointer-events:none;transition:opacity .3s ease}
body.hp.past-hero #db-chat-bubble{opacity:1;pointer-events:auto}

/* ── social proof, mobile only ────────────────────────────────────────────
   Measured at 390px before: section 766px for an eyebrow, a heading, two lines
   of copy, a logo strip and one quote. The eyebrow->heading (14px) and
   heading->copy (12px) gaps were already right; everything below them was not.

   The quote reserve was investigated first and is NOT the problem: tallest quote
   content is 145px against a 150px min-height, only 5px of slack. But quotes run
   from 90px to 145px and sat top-aligned in that box, so a short one left ~55px
   blank beneath it. Centring the content in the reserve splits that slack above
   and below with no layout shift as quotes rotate. */
@media (max-width:768px){
  body.hp .trusted{padding:48px 0 12px}
  body.hp .trusted .head{margin-bottom:28px}
  /* The logo container carries its own 36px bottom margin, which stacks with
     the rotator margin instead of collapsing — 78px where 40 was intended. */
  body.hp .trusted-logo-container{margin-bottom:0}
  body.hp .trusted-quote-rotator{margin-top:40px;min-height:148px}
  body.hp .trusted-quote{display:flex;flex-direction:column;justify-content:center}
  body.hp .trusted-quote cite{margin-top:10px}

  /* At a 75px box, 0.62 opacity on full grayscale is too faint to recognise a
     business — which defeats the point, since these are real customers. */
  body.hp .trusted-section .trusted-logo,
  body.hp .trusted .trusted-logo{opacity:.78;filter:grayscale(.85)}

  /* The boundary is made by rhythm, not decoration: this section closes with
     less space than the next one opens with, so How It Works reads as a start
     rather than as more of the same. Both stay white. */
  body.hp #how-it-works{padding-top:26px}
}

/* The support bubble now waits until How It Works is behind the visitor — it was
   reappearing exactly where that heading lands. */
body.hp.past-hero #db-chat-bubble{opacity:0;pointer-events:none}
body.hp.past-hiw #db-chat-bubble{opacity:1;pointer-events:auto}

/* ── trust section, mobile only ───────────────────────────────────────────
   Measured at 390px before: 1347px, with the featured quote running 7 lines /
   227 characters and the three benefit rows taking 91px plus a 32px gap.

   The rows were the layer to remove. The headline already says "More Confirmed
   Bookings. Fewer No-Shows."; restating it as a list forty pixels below is the
   only element in the section that is not evidence. Desktop keeps them, where
   the layout gives them a caption's role rather than a stacked block's. */

/* Desktop shows the fuller excerpt; mobile the shorter one. */
body.hp .proof .q-short{display:none}

@media (max-width:768px){
  body.hp .proof .q-full{display:none}
  body.hp .proof .q-short{display:inline}

  /* The claim restated. Removed, not compressed — anything left here is still
     the claim, just shorter. */
  body.hp .proof-points{display:none}

  /* Quote and source read as one object. */
  body.hp .proof figcaption{margin-top:14px;padding-top:14px}

  /* Introduces the carousel as a drawer of more proof rather than another
     component. Sentence case and muted — the page already has an eyebrow at the
     top of this section, and a second uppercase label would read as UI. */
  body.hp .more-reviews{margin:36px 0 20px;text-align:center;
    font-size:13px;font-weight:500;color:var(--mute)}
  body.hp .tgrid{margin-top:0;padding-top:0;border-top:0}
}

/* Desktop has no need for the label. */
body.hp .more-reviews{display:none}
@media (max-width:768px){ body.hp .more-reviews{display:block} }

/* The support bubble now stays hidden until the reviews are behind the visitor,
   rather than reappearing over the carousel. */
body.hp.past-hiw #db-chat-bubble{opacity:0;pointer-events:none}
body.hp.past-proof #db-chat-bubble{opacity:1;pointer-events:auto}

/* ── centring lost to the reset ───────────────────────────────────────────
   The reference stylesheet's `p{margin:0}` reset is generated as `body.hp p`,
   which outranks styles.css's `.trusted-subline{margin:0 auto 3rem}` and zeroes
   the auto margins. text-align:center still centres the TEXT inside the box, so
   it reads as almost-right — but the 580px box itself sat flush left in a 700px
   column, putting the supporting line 60px left of everything above and below
   it at every width. */
body.hp .trusted-subline{max-width:580px;margin-left:auto;margin-right:auto}