/* GOOGLE_HERO_MOBILE_V1 — first fold, mobile-first. Same layout on desktop. */
.gh-topbar{background:#1f2140;color:#fff;text-align:center;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:11px 12px}
.header .wrap{justify-content:center;height:auto;padding-top:14px;padding-bottom:4px}
.header .burger{display:none}
.header .logo-name{font-size:24px}

.gh-hero{background:var(--cream);padding:6px 0 26px}
.gh-col{max-width:480px;margin:0 auto;padding:0 16px;text-align:center}
.gh-eyebrow{font:700 11.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin:6px 0 10px}
.gh-title{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(32px,9.4vw,42px);line-height:1.04;letter-spacing:-.01em;margin:0 0 12px}
.gh-lead{font-size:16.5px;line-height:1.45;color:var(--text);margin:0 auto 18px;max-width:400px}
.gh-hero .gh-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:14px 18px;border-radius:12px;
  background:var(--plum);color:#fff;font:800 18px/1.2 var(--sans);box-shadow:0 12px 24px -12px rgba(110,31,82,.65);transition:transform .15s,box-shadow .15s}
.gh-hero .gh-cta:hover{transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(110,31,82,.7)}
.gh-hero .gh-cta:focus-visible,.gh-sticky:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.gh-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:12px 0 18px;font-size:12.5px;color:var(--muted)}
.gh-trust i{font-style:normal;opacity:.6}

.gh-media{position:relative;margin:0 0 14px;border-radius:18px;overflow:hidden;background:#efe4da;box-shadow:0 18px 40px -26px rgba(60,30,40,.55)}
.gh-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gh-badge{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);
  background:rgba(255,250,245,.95);border-radius:12px;padding:8px 16px;box-shadow:0 6px 18px -8px rgba(40,20,30,.4)}
.gh-badge strong{display:block;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--plum);line-height:1.2}
.gh-badge span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.gh-tiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0}
.gh-tiles li{background:#fffaf5;border:1px solid var(--line);border-radius:14px;padding:12px 6px;font:700 11px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.gh-ico{width:50px;height:50px;border-radius:50%;background:#f4e6dc;display:grid;place-items:center;color:var(--plum)}

/* Sticky CTA — mobile only */
.gh-sticky{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:12px;background:var(--plum);color:#fff;
  font:800 16.5px/1.2 var(--sans);box-shadow:0 14px 30px -10px rgba(40,10,30,.6);
  opacity:0;transform:translateY(130%);pointer-events:none;transition:opacity .2s,transform .2s}
.gh-sticky.is-visible{opacity:1;transform:none;pointer-events:auto}
#quiz:not([hidden]) ~ .gh-sticky{display:none}
@media (min-width:760px){.gh-sticky{display:none}}
.gh-title{text-wrap:balance}
.gh-trust{font-size:12px;gap:3px 6px}

/* GOOGLE_HERO_MOBILE_V1 — desktop shows the landing as a centered mobile column */
@media (min-width:760px){
  body{background:#efe4da}
  .gh-topbar,.header,#landing,.foot,.bg-provider-disclaimer{max-width:480px;margin-left:auto !important;margin-right:auto !important}
  .header,#landing,.foot{background:var(--cream);box-shadow:0 0 40px -18px rgba(60,30,40,.35)}
  #landing .wrap{max-width:480px;padding-left:16px;padding-right:16px}

  .meet-helena{padding:44px 0}
  .meet-helena-grid{display:grid !important;grid-template-columns:1fr !important;gap:26px !important}
  .meet-helena-photo{width:min(100%,420px);margin-inline:auto}
  .meet-helena-copy{text-align:center}
  .meet-helena-copy h2{font-size:36px}

  .portraits .proof-examples{grid-template-columns:1fr !important;gap:22px !important;max-width:420px !important;margin-inline:auto !important}

  .how{padding-top:44px;padding-bottom:44px}
  .how .h2{font-size:36px}
  .how .steps{display:grid !important;grid-template-columns:1fr !important;gap:12px !important;max-width:430px;margin:24px auto 0}
  .how .step{display:grid !important;grid-template-columns:48px 1fr;column-gap:14px;padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);text-align:left}
  .how .step::after{display:none !important}
  .how .step .ico{grid-column:1;grid-row:1/3;width:44px;height:44px;margin:0}
  .how .step h3{grid-column:2;margin:0 0 4px;font-size:18px}
  .how .step p{grid-column:2;margin:0;font-size:14px}

  .reviews .review{flex:0 0 88%}
  .reviews .guarantees{display:flex !important;flex-direction:column;align-items:center;gap:14px !important;height:auto !important;grid-template-columns:none !important}
  .reviews .guarantees .g{flex:0 0 auto !important;min-height:0 !important;height:auto !important}
  .reviews .sprig{display:none}
  .h2{font-size:36px}
}
/* Helena avatar in hero badge */
.gh-badge{display:grid;grid-template-columns:52px auto;column-gap:10px;align-items:center;text-align:left;padding:7px 14px 7px 7px;border-radius:999px}
.gh-avatar{grid-row:1/3;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.gh-badge strong{font-size:16px}
.gh-badge span{font-size:11.5px;margin-top:0}
