/* Safari Growth Program landing page and its thank-you page.
   Layers on gi-landing.css (tokens, buttons, header, sections, FAQ, footer).
   Everything new is namespaced sg- (page) and sgf- (form) so the form can also
   be dropped into /direct-booking-system next to dbs-v2.css without collisions.
   No em or en dashes anywhere in this file. */

/* ---------- fonts: metric-matched fallbacks so the swap does not shift layout ---------- */
/* Overrides measured from the woff2 files against Arial on 14 Sep 2026:
   Anton width ratio 0.818, ascent 1.176, descent 0.329.
   Outfit width ratio 0.959, ascent 1.000, descent 0.260. */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 81.8%; ascent-override: 143.8%; descent-override: 40.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 95.9%; ascent-override: 104.3%; descent-override: 27.1%; line-gap-override: 0%;
}
:root {
  --display: 'Anton', 'Anton Fallback', 'Arial Narrow', sans-serif;
  --sans: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, sans-serif;
  --bad: #b3261e;
}
/* Uppercase display headings. gi-landing.css sets 0.95 and 0.96, close enough
   for a comma or the foot of a line to touch the capitals below. These pages only. */
.disp, .hero h1 { line-height: 1.05; }

[hidden] { display: none !important; }
/* gi-landing.css puts overflow-x: hidden on body. With html clipped as well,
   that makes body a scroll container in which nothing can stick. clip hides
   the same overflow without that, so the group call card can stick. The
   header keeps scrolling away with the page, as it always has here. */
body { overflow-x: clip; }
.top { position: relative; }
.sg-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #8f6bff; outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.sg-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: #fff; color: var(--navy); font-weight: 600;
  padding: 0.6rem 1rem; border-radius: 10px;
}
.sg-skip:focus { top: 0.7rem; }

.sec--navy .vio, .sg-ty .vio { color: #b79bff; }
.top .btn--wa { min-height: 44px; }

/* ---------- hero ---------- */
.sg-hero { padding-top: clamp(1.4rem, 5vh, 3.4rem); }
/* desktop only: gi-landing collapses the grid to one column at 900px, and a
   two-class selector here would otherwise out-rank that and squeeze the form */
@media (min-width: 901px) { .sg-hero .hero__grid { grid-template-columns: 1.02fr 0.98fr; } }
.sg-eyebrow {
  text-transform: none; letter-spacing: 0.01em; font-size: 0.82rem; line-height: 1.35;
  border-radius: 14px;
}
.sg-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.sg-hero .hero__sub b { color: #fff; font-weight: 600; }
.sg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.sg-chips li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.84rem; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07); border: 1px solid var(--line-d);
  border-radius: 999px; padding: 0.42rem 0.85rem;
}
.sg-chips li::before { content: "\2713"; color: #7be3a4; font-weight: 700; }
.sg-chips b { font-weight: 600; color: #fff; }
.sg-hero .hero__meta .hero__sub { margin-top: 0; }

@media (max-width: 900px) {
  .sg-hero { padding-top: 1.1rem; }
  .sg-eyebrow { font-size: 0.74rem; padding: 0.35rem 0.75rem; }
  .sg-hero h1 { font-size: clamp(1.85rem, 8.6vw, 2.7rem); margin-top: 0.7rem; }
  .sg-chips li { font-size: 0.8rem; }
}

/* ---------- the multi-step form ---------- */
.sgf { padding: 1.4rem 1.35rem 1.2rem; border-radius: 20px; scroll-margin-top: calc(var(--nav-h) + 0.75rem); }
.sgf .btn { margin-top: 0; }
.sgf__title { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.sgf .hint { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.sgf__progress { margin-top: 0.95rem; }
.sgf__count { font-size: 0.8rem; font-weight: 600; color: var(--violet-deep); }
.sgf__bar { height: 6px; margin-top: 0.4rem; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.sgf__bar span {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  transform: scaleX(var(--p, 0.25)); transition: transform 0.35s ease;
  background: linear-gradient(90deg, var(--violet), #9b6bff);
}
.sgf__step { margin-top: 1rem; }
.sgf__stitle { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.sgf__ssub { color: var(--muted); font-size: 0.86rem; margin-top: 0.15rem; }
.sgf__field { margin: 0.95rem 0 0; padding: 0; border: 0; min-width: 0; }
.sgf__label { display: block; padding: 0; font-weight: 600; font-size: 0.88rem; line-height: 1.35; color: var(--ink); margin-bottom: 0.45rem; }
.sgf__label small { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.sgf input[type="text"], .sgf input[type="tel"], .sgf input[type="email"], .sgf select,
.sg-calc input[type="text"] {
  width: 100%; min-width: 0; min-height: 48px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.7rem 0.85rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.sgf input:focus, .sgf select:focus, .sg-calc input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(108,43,242,0.18); }
.sgf input[type="text"]:focus-visible, .sgf input[type="tel"]:focus-visible, .sgf input[type="email"]:focus-visible,
.sgf select:focus-visible, .sg-calc input:focus-visible { outline: none; }

.sgf__opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sgf__opt {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.55rem 0.8rem; font-size: 0.92rem; line-height: 1.25;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sgf__opt:hover { border-color: var(--violet-2); }
.sgf__opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--violet); scroll-margin-top: calc(var(--nav-h) + 3rem); }
.sgf__opt:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-deep); font-weight: 600; }
.sgf__opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(108,43,242,0.3); }
.sgf__opts--stack { flex-direction: column; }
.sgf__opts--stack .sgf__opt { width: 100%; }
.sgf__opts--chips { gap: 0.4rem; }
.sgf__opts--chips .sgf__opt { border-radius: 999px; min-height: 40px; padding: 0.4rem 0.75rem; font-size: 0.86rem; }
.sgf__opts--chips .sgf__opt input { width: 16px; height: 16px; }

.sgf__help { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.45; margin-top: 0.35rem; }
.sgf__err { color: var(--bad); font-size: 0.83rem; font-weight: 500; margin-top: 0.35rem; }
.sgf__err:empty { display: none; }
.sgf__field.is-bad input[type="text"], .sgf__field.is-bad input[type="tel"],
.sgf__field.is-bad input[type="email"], .sgf__field.is-bad select { border-color: #c0392b; }
.sgf__field.is-bad .sgf__opt { border-color: rgba(192,57,43,0.5); }

.sgf__nav { display: flex; align-items: stretch; gap: 0.6rem; margin-top: 1.2rem; }
.sgf__nav .btn { flex: 1; padding: 0.95rem 1.1rem; font-size: 1rem; white-space: normal; text-align: center; line-height: 1.25; }
.sgf__back {
  flex: none; min-height: 48px; padding: 0 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-weight: 600; background: #fff;
}
.sgf__back:hover { border-color: var(--violet-2); color: var(--ink); }
.sgf__status { color: #a5301f; font-size: 0.86rem; font-weight: 500; margin-top: 0.7rem; }
.sgf__status:empty { margin: 0; }
.sgf .fine { color: var(--muted); font-size: 0.8rem; text-align: center; margin-top: 0.7rem; }
.sgf__noscript { margin-top: 0.8rem; font-size: 0.88rem; color: var(--muted); }
.sgf__noscript a { color: var(--wa-deep); font-weight: 600; text-decoration: underline; }

.sgf__sum { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.sgf__sum > summary { cursor: pointer; font-weight: 600; color: var(--violet-deep); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.sgf__sum > summary::-webkit-details-marker { display: none; }
.sgf__sum > summary::after { content: "+"; font-size: 1.2rem; line-height: 1; }
.sgf__sum[open] > summary::after { content: "\2212"; }
.sgf__sumgroup { margin-top: 0.7rem; }
.sgf__sumhead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.sgf__sumhead p { font-weight: 600; color: var(--ink); }
.sgf__edit { font-size: 0.8rem; font-weight: 600; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 2px; padding: 0.25rem 0.1rem; }
.sgf__sumgroup dl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.15rem 0.7rem; margin-top: 0.3rem; }
.sgf__sumgroup dt { color: var(--muted); }
.sgf__sumgroup dd { color: var(--ink); overflow-wrap: anywhere; }
.sgf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* WhatsApp number: dialling code first (js/intl-phone.js) */
.sgf .intl-phone { display: flex; gap: 0.4rem; min-width: 0; }
.sgf .intl-phone select { flex: none; width: 7.2rem; padding-left: 0.55rem; padding-right: 0.3rem; }
.sgf .intl-phone input { flex: 1; min-width: 0; }
@media (max-width: 400px) { .sgf .intl-phone select { width: 6.4rem; } }

/* the startup question, shown only under "Just starting" */
.sgf__field.sgf__reveal {
  padding: 0.8rem 0.9rem 0.85rem; border-radius: 12px;
  background: var(--violet-soft); border: 1px solid rgba(108,43,242,0.25);
}
.sgf__reveal .sgf__opt { background: #fff; }
/* a legend normally sits on the fieldset border; floating keeps it inside the box */
.sgf__reveal > legend { float: left; width: 100%; }
.sgf__reveal > legend + * { clear: both; }

/* ---------- live group call section (widget styles in group-call.css) ---------- */
.sg-call__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "info widget" "photo widget";
  column-gap: clamp(1.4rem, 4vw, 3rem); row-gap: 1.4rem; align-items: start;
}
.sg-call__info { grid-area: info; min-width: 0; }
.sg-call__grid > .gc { grid-area: widget; }
.sg-call__photo { grid-area: photo; }
.sg-call__info h3 { font-size: 1.15rem; font-weight: 600; }
.sg-call__list { list-style: none; counter-reset: c; display: grid; gap: 0.65rem; margin: 0.9rem 0 0; padding: 0; }
.sg-call__list li { counter-increment: c; position: relative; padding-left: 2.2rem; color: var(--muted); font-size: 0.96rem; }
.sg-call__list li::before {
  content: counter(c); position: absolute; left: 0; top: 0.05rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--violet); color: #fff;
  font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.sg-call__list strong { color: var(--ink); font-weight: 600; }
.sg-call__note { color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }
@media (max-width: 900px) {
  .sg-call__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "widget" "photo"; }
}
/* desktop: the card rides down beside the list and the photo, instead of
   leaving the right column empty below it */
@media (min-width: 901px) {
  .sg-call__grid > .gc { position: sticky; top: calc(var(--nav-h) + 1rem); }
}

/* ---------- photos: every slot keeps the file's own aspect ratio ---------- */
.sg-photo { margin: 0; min-width: 0; }
.sg-photo img { display: block; width: 100%; height: auto; }
.sg-photo figcaption { color: var(--muted); font-size: 0.76rem; line-height: 1.45; margin-top: 0.45rem; }
.sg-photo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sg-call__photo { max-width: 600px; }
.sg-call__photo img { aspect-ratio: 1200 / 800; border-radius: var(--r); }

/* ---------- problem: the four leaks ---------- */
.sg-leaks { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 64rem; margin: 0 auto; }
.sg-leak {
  display: grid; grid-template-columns: 44px 1fr; gap: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.3rem;
}
.sg-leak--wide { grid-column: 1 / -1; background: linear-gradient(180deg, #fff, var(--violet-soft)); border-color: rgba(108,43,242,0.3); }
.sg-leak__n {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25); color: var(--bad);
  font-family: var(--display); font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
}
.sg-leak h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.3; }
.sg-leak p { color: var(--muted); margin-top: 0.5rem; font-size: 0.97rem; }
.sg-leak strong { color: var(--ink); font-weight: 600; }
.sg-leak a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .sg-leaks { grid-template-columns: 1fr; }
  .sg-leak { grid-template-columns: 1fr; gap: 0.7rem; padding: 1.2rem 1.1rem; }
  .sg-leak__n { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* ---------- calculator ---------- */
.sg-calcsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.sg-calcsec__copy > p { color: rgba(255,255,255,0.8); margin-top: 1rem; font-size: 1.04rem; }
.sg-calcsec__copy .sg-note { font-size: 0.95rem; color: rgba(255,255,255,0.7); }
.sg-calcsec__copy a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sg-bench { margin-top: 1.3rem; border: 1px solid var(--line-d); border-radius: 14px; background: rgba(255,255,255,0.04); }
.sg-bench > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.85rem 1rem; font-weight: 600; font-size: 0.92rem; min-height: 44px; }
.sg-bench > summary::-webkit-details-marker { display: none; }
.sg-bench > summary::after { content: "+"; color: #b79bff; font-size: 1.3rem; line-height: 1; flex: none; }
.sg-bench[open] > summary::after { content: "\2212"; }
.sg-bench p { padding: 0 1rem 1rem; color: rgba(255,255,255,0.74); font-size: 0.9rem; }
.sg-calc { background: #fff; color: var(--ink); border-radius: 20px; padding: 1.5rem 1.4rem; box-shadow: 0 30px 70px rgba(0,0,0,0.35); }
.sg-calc .sgf__field:first-child { margin-top: 0; }
.sg-calc .sgf__label { font-size: 0.9rem; }
.sg-money { position: relative; }
.sg-money > span { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--muted); font-size: 0.9rem; pointer-events: none; }
.sg-money input[type="text"] { padding-left: 3.2rem; }
.sg-calc__out { margin-top: 1.2rem; min-height: 6.5rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); }
.sg-calc__empty { color: var(--muted); font-size: 0.93rem; }
.sg-calc__warn { color: var(--bad); font-weight: 500; font-size: 0.93rem; }
.sg-calc__main { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.sg-calc__main b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--violet-deep); white-space: nowrap; }
.sg-calc__line { color: var(--muted); font-size: 0.93rem; margin-top: 0.55rem; }
.sg-calc__out .btn { margin-top: 1rem; width: 100%; }
@media (max-width: 900px) { .sg-calcsec__grid { grid-template-columns: 1fr; } }

/* ---------- photo bands: 2000 x 760 files, never wider than 1000 CSS pixels,
   so the 2000 pixel file stays sharp on a retina screen ---------- */
.sg-band { background: var(--navy); padding: clamp(1.2rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2.5rem); }
.sg-band picture, .sg-band figcaption { display: block; max-width: 1000px; margin-left: auto; margin-right: auto; }
.sg-band img { aspect-ratio: 2000 / 760; border-radius: var(--r); }
.sg-band figcaption { color: rgba(255,255,255,0.6); }
@media (max-width: 639px) {
  .sg-band { padding: 0 0 1rem; }
  .sg-band img { border-radius: 0; }
  .sg-band figcaption { padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
}

/* ---------- program: the value stack ---------- */
.sg-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sg-phase { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.4rem; }
.sg-phase--mid { border-color: rgba(108,43,242,0.45); box-shadow: 0 20px 50px rgba(108,43,242,0.12); }
.sg-phase__n { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
.sg-phase h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.55rem; line-height: 1.05; margin-top: 0.4rem; }
.sg-phase ul, .sg-yourpart ul { list-style: none; display: grid; gap: 0.7rem; margin-top: 1rem; }
.sg-phase li, .sg-yourpart li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: 0.94rem; }
.sg-phase li::before, .sg-yourpart li::before { content: "\2713"; position: absolute; left: 0; color: var(--violet); font-weight: 700; }
.sg-phase strong, .sg-yourpart strong { color: var(--ink); font-weight: 600; }
.sg-phase__target { margin-top: auto; padding-top: 1.1rem; }
.sg-phase__target p { background: var(--violet-soft); border: 1px solid rgba(108,43,242,0.25); border-radius: 12px; padding: 0.8rem 0.9rem; font-size: 0.9rem; color: var(--ink); }
.sg-yourpart {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0.6rem 2rem; margin-top: 1.1rem;
  background: #fff; border: 1px dashed rgba(22,20,31,0.28); border-radius: var(--r); padding: 1.5rem 1.4rem;
}
.sg-yourpart h3 { font-size: 1.15rem; font-weight: 600; }
.sg-yourpart ul { margin-top: 0; }
.sg-yourpart__own { margin-top: 0.8rem; font-weight: 600; color: var(--ink); }
.sg-midcta { display: flex; justify-content: center; margin-top: 2rem; }
.sg-midcta--pair { flex-wrap: wrap; gap: 0.75rem 1rem; }
@media (max-width: 900px) {
  .sg-phases, .sg-yourpart { grid-template-columns: 1fr; }
  .sg-midcta .btn { width: 100%; }
}

/* ---------- proof ---------- */
.sg-proof { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.sg-shot { margin: 0; }
.sg-shot__img { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 24px 60px rgba(22,20,31,0.14); }
.sg-shot img { width: 100%; height: auto; }
.sg-shot figcaption { color: var(--muted); font-size: 0.86rem; margin-top: 0.7rem; }
.sg-proof__txt h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; }
.sg-proof__txt p { color: var(--muted); margin-top: 0.5rem; font-size: 0.96rem; }
.sg-proof__txt p strong { color: var(--ink); font-weight: 600; }
.sg-nums { list-style: none; display: grid; gap: 1rem; }
.sg-nums li { border-left: 3px solid var(--violet); padding-left: 1rem; }
.sg-nums b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.sg-nums span { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; }
.sg-nums a, .sg-own a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sg-sites-h { text-align: center; font-size: 1.3rem; font-weight: 600; margin-top: clamp(2.4rem, 6vh, 3.4rem); }
.sg-sites { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem; margin-top: 1.2rem; }
.sg-site { display: block; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.sg-site:hover { transform: translateY(-3px); border-color: rgba(108,43,242,0.4); box-shadow: 0 16px 40px rgba(108,43,242,0.12); }
.sg-site__shot { position: relative; display: block; aspect-ratio: 880 / 550; overflow: hidden; background: var(--paper-2); }
.sg-site__shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sg-site__phone { position: absolute; right: 7px; bottom: 7px; width: 24%; border-radius: 7px; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.sg-site__phone img { width: 100%; height: auto; aspect-ratio: 300 / 600; object-fit: cover; }
.sg-site__name { display: block; padding: 0.7rem 0.8rem 0; font-weight: 600; font-size: 0.92rem; line-height: 1.3; color: var(--ink); }
/* the markup has <wbr> before the domain ending, so an address breaks there
   first; overflow-wrap only splits a name on a screen too narrow for it */
.sg-site__url { display: block; padding: 0.15rem 0.8rem 0.8rem; color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.sg-sites-note { text-align: center; color: var(--muted); font-size: 0.93rem; margin-top: 0.9rem; }
.sg-own { max-width: 46rem; margin: 2.4rem auto 0; text-align: center; }
.sg-own h3 { font-size: 1.1rem; font-weight: 600; }
.sg-own p { color: var(--muted); margin-top: 0.5rem; font-size: 0.96rem; }
@media (max-width: 1000px) { .sg-sites { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .sg-proof { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .sg-sites { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .sg-site__url { font-size: 0.75rem; }
}

/* ---------- reservations ---------- */
.sg-res { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.sg-res__copy p { color: rgba(255,255,255,0.8); margin-top: 1rem; font-size: 1.02rem; }
.sg-res__copy .sg-res__punch { color: #fff; font-weight: 600; font-size: 1.15rem; }
.sg-res__copy ul { list-style: none; display: grid; gap: 0.7rem; margin-top: 1rem; }
.sg-res__copy li { position: relative; padding-left: 1.6rem; color: rgba(255,255,255,0.78); font-size: 0.96rem; }
.sg-res__copy li::before { content: "\2713"; position: absolute; left: 0; color: #7be3a4; font-weight: 700; }
.sg-res__copy li strong, .sg-res__card strong { color: #fff; font-weight: 600; }
.sg-res__card { background: rgba(255,255,255,0.06); border: 1px solid var(--line-d); border-radius: var(--r); padding: 1.6rem 1.4rem; }
.sg-res__card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }
.sg-res__card p { color: rgba(255,255,255,0.78); margin-top: 0.8rem; font-size: 0.95rem; }
.sg-illus { margin: 1.3rem 0 0; padding: 1rem; border-radius: 14px; background: rgba(0,0,0,0.18); }
.sg-illus figcaption { font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.sg-illus__row { display: grid; grid-template-columns: 4.3rem 1fr 4.8rem; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-size: 0.88rem; color: rgba(255,255,255,0.85); }
.sg-illus__bar { height: 14px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; }
.sg-illus__bar span { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--violet-2); }
.sg-illus__row--hi .sg-illus__bar span { background: var(--wa); }
.sg-illus__row b { font-weight: 600; color: #fff; text-align: right; }
.sg-res__card .sg-res__fine { font-size: 0.88rem; color: rgba(255,255,255,0.62); }
@media (max-width: 900px) { .sg-res { grid-template-columns: 1fr; } }

/* ---------- fit ---------- */
.sg-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.sg-fit__col { border-radius: var(--r); padding: 1.6rem 1.5rem; border: 1px solid var(--line); }
.sg-fit__col--yes { background: rgba(31,179,85,0.06); border-color: rgba(31,179,85,0.3); }
.sg-fit__col--no { background: rgba(255,138,138,0.07); border-color: rgba(255,138,138,0.4); }
.sg-fit__col h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.8rem; }
.sg-fit__col ul { list-style: none; display: grid; gap: 0.6rem; }
.sg-fit__col li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: 0.95rem; }
.sg-fit__col--yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--wa-deep); font-weight: 700; }
.sg-fit__col--no li::before { content: "\2715"; position: absolute; left: 0; color: #c0392b; font-weight: 700; }
.sg-fit__note { max-width: 44rem; margin: 1.6rem auto 0; text-align: center; color: var(--muted); }
.sg-fit__note strong { color: var(--ink); }
@media (max-width: 800px) { .sg-fit { grid-template-columns: 1fr; } }

/* ---------- guarantee ---------- */
.sg-guar {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.3rem, 4vw, 2.6rem); align-items: start;
  max-width: 58rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.6rem);
  background: #fff; border: 1px solid rgba(108,43,242,0.3); border-radius: 24px;
  box-shadow: 0 30px 70px rgba(108,43,242,0.1);
}
.sg-guar__seal {
  width: 120px; height: 120px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 30% 30%, #8a55ff, var(--violet-deep));
  box-shadow: 0 0 0 6px rgba(108,43,242,0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sg-guar__seal b { font-family: var(--display); font-weight: 400; font-size: 2.8rem; line-height: 1; }
.sg-guar__seal span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sg-guar h2.disp { margin-top: 0.5rem; font-size: clamp(1.7rem, 4vw, 2.8rem); }
.sg-guar__promise { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.45; color: var(--ink); margin-top: 1rem; }
.sg-guar p { color: var(--muted); margin-top: 0.9rem; }
.sg-guar p.sg-guar__promise { color: var(--ink); }
@media (max-width: 640px) {
  .sg-guar { grid-template-columns: 1fr; }
  .sg-guar__seal { width: 88px; height: 88px; }
  .sg-guar__seal b { font-size: 2rem; }
}

/* ---------- process ---------- */
.sg-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sg-steps li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.2rem; color: var(--muted); font-size: 0.94rem; }
.sg-steps li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 0.8rem; border-radius: 50%;
  background: var(--violet); color: #fff; font-family: var(--display); font-size: 1.1rem;
}
.sg-steps strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; margin-bottom: 0.3rem; }
@media (max-width: 900px) { .sg-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sg-steps { grid-template-columns: 1fr; } }

/* ---------- FAQ and final CTA ---------- */
.sec--tint .faq details { border-color: rgba(22,20,31,0.14); }
.faq summary { min-height: 44px; }
.sg-final__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.final .sg-final__actions .btn { margin-top: 0; }
.final p.sg-final__sub { max-width: 46ch; }
@media (max-width: 560px) { .sg-final__actions .btn { width: 100%; } }

.sg-foot span a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sticky mobile CTA and floating WhatsApp ---------- */
.sg-sticky {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; max-width: 100vw;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.sg-sticky .btn { width: 100%; padding: 0.9rem; }
@media (max-width: 900px) {
  .sg-sticky { display: block; }
  /* lifted with transform, not bottom: animating bottom counts as layout shift */
  .sg-wa-float { display: flex; width: 52px; height: 52px; right: 0.9rem; bottom: calc(1rem + env(safe-area-inset-bottom)); transition: transform 0.2s ease, opacity 0.2s ease; }
  .sg-sticky-on .sg-wa-float { transform: translateY(-4rem); }
  .sg-sticky-on .sg-wa-float:hover { transform: translateY(-4rem) scale(1.07); }
  /* over the form and the group call widget (js/safari-growth.js initSticky) */
  .sg-form-visible .sg-wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
}
.sg-sticky.is-off { display: none !important; }

/* ---------- thank-you page ---------- */
.sg-typage { background: var(--navy); }
.sg-ty {
  min-height: calc(100vh - var(--nav-h)); color: #fff;
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(3rem, 8vh, 5rem);
  background: radial-gradient(120% 70% at 80% -10%, #3a1e7a 0%, transparent 55%), var(--navy);
}
.sg-ty__in { max-width: 42rem; margin: 0 auto; }
.sg-ty__tick {
  width: 60px; height: 60px; border-radius: 50%; color: #6ee7a0;
  background: rgba(31,179,85,0.16); border: 1px solid rgba(31,179,85,0.45);
  display: flex; align-items: center; justify-content: center;
}
.sg-ty__tick svg { width: 30px; height: 30px; }
.sg-ty h1 { font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.05; margin-top: 1.1rem; }
.sg-ty__lede { color: rgba(255,255,255,0.82); font-size: 1.04rem; margin-top: 1rem; }
.sg-ty__lede a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* WhatsApp first: status line, then one large button, email only as a small link */
.sg-ty__cta { margin-top: 1.4rem; max-width: 30rem; }
.sg-ty__status {
  display: flex; align-items: center; gap: 0.7rem; min-height: 3.2rem;
  padding: 0.75rem 1rem; border-radius: 12px; color: #c8f5d9; font-size: 1.02rem; font-weight: 600;
  background: rgba(31,179,85,0.12); border: 1px solid rgba(31,179,85,0.4);
}
.sg-ty__status.is-busy::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(200,245,217,0.3); border-top-color: #6ee7a0;
  animation: sg-spin 0.8s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-ty__cta .sg-ty__wa { display: flex; width: 100%; margin-top: 0.9rem; min-height: 64px; font-size: 1.25rem; padding: 1.2rem 1.6rem; white-space: normal; }
.sg-ty__cta .sg-ty__wa svg { width: 28px; height: 28px; }
.sg-ty__hint { margin-top: 0.7rem; color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.sg-ty__alt { margin-top: 0.6rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.sg-ty__alt a { color: rgba(255,255,255,0.88); text-decoration: underline; text-underline-offset: 3px; }
.sg-ty__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
/* group call picker, first for qualified leads when booking is live */
.sg-ty__call { margin-top: 1.4rem; }
.sg-ty__call h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: #fff; }
.sg-ty__call > p { color: rgba(255,255,255,0.8); font-size: 0.97rem; margin-top: 0.4rem; }
.sg-ty__call .gc { margin-top: 1rem; }
.sg-ty__card { margin-top: 1.6rem; padding: 1.3rem 1.3rem; border-radius: var(--r); background: rgba(255,255,255,0.05); border: 1px solid var(--line-d); }
.sg-ty__card h2 { font-size: 1.05rem; font-weight: 600; color: #fff; }
.sg-ty__list { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.45rem 1rem; margin-top: 0.9rem; font-size: 0.92rem; }
.sg-ty__list dt { color: rgba(255,255,255,0.6); }
.sg-ty__list dd { color: #fff; overflow-wrap: anywhere; }
.sg-ty__card ol { margin: 0.9rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.sg-ty__card li { color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.sg-ty__res { list-style: none; display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.sg-ty__res a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 48px;
  padding: 0.7rem 0.95rem; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-d);
  color: #fff; font-weight: 500;
}
.sg-ty__res a::after { content: "\203A"; font-size: 1.4rem; line-height: 1; color: #b79bff; }
.sg-ty__res a:hover { background: rgba(255,255,255,0.1); }
.sg-ty__fine { color: rgba(255,255,255,0.55); font-size: 0.86rem; margin-top: 1.6rem; }
.sg-ty__fine a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .sg-ty__list { grid-template-columns: 1fr; gap: 0.1rem; } .sg-ty__list dd { margin-bottom: 0.45rem; } }

@media (prefers-reduced-motion: reduce) {
  .sgf__bar span, .sg-site, .sg-wa-float { transition: none; }
  .sg-ty__status.is-busy::before { animation-duration: 2.4s; }
}