/* TLG A2P compliance site — shared stylesheet.
   Edit here, never in a built copy under out/.

   ─── THE PALETTE IS THE BRAND KIT'S, NOT A NEW ONE ────────────────────────────
   Every colour below is copied from ../../../tlg-web-brand-kit — the token block
   at the top of `intro-booking.html` (the live funnel) and the swatch table in
   `tlg-brand-kit.html`. Same names, same hexes, same two typefaces. If the brand
   kit changes, change it here; do not let this file become a second source of
   truth for TLG's colours.

   The only judgement this file adds is WHICH brand token goes where, and it is
   driven by one rule: text a carrier reviewer must read clears WCAG AA (4.5:1),
   so it is painted in the brand tokens that measure up — #333 (12.6:1) and #666
   (5.7:1) for copy, --purple (5.7:1) for links. The pale end of the ramp
   (--teal 2.2:1, --text-light 2.85:1) is brand-correct but unreadable at body
   size, so it is confined to fills and decoration. Nothing is invented and
   nothing compliance-critical is placed on a colour it cannot be read against. */

:root{
  /* teal ramp — intro-booking.html */
  --teal:#3fc0c3;
  --teal-dark:#2da8ab;
  --teal-deep:#1d8d90;
  --teal-light:rgba(63,192,195,.12);
  /* accents */
  --pink:#ec1f8f;
  --lime:#c1d82f;
  --purple:#5261ac;
  /* neutrals */
  --white:#fff;
  --bg:#f7f7f7;
  --border:#e5e5e5;
  --text-dark:#333;
  --text-body:#666;
  --text-light:#999;
  /* type */
  --font-display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --font-body:'Open Sans',Arial,sans-serif;
  /* shadows + radii */
  --shadow-card:0 0 2px 0 rgba(23,26,31,.2),0 0 1px 0 rgba(23,26,31,.15);
  --shadow-btn:0 4px 12px rgba(0,0,0,.15);
  --shadow-cta:0 4px 14px rgba(237,31,143,.32);
  --shadow-pop:0 14px 40px rgba(23,26,31,.22);
  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:9999px;
}
/* ─── MEASURED, AND WHAT IS DELIBERATELY LEFT BELOW AA ────────────────────────
   Audited with a compositing contrast pass over all four rendered pages.
   CLEARS AA EVERYWHERE: the consent block, the fineprint disclosure, the
   Privacy/Terms links, every callout, and all body copy on the legal pages.
   That is the surface a carrier reviewer reads, and it is the surface that has
   to be right.
   Knowingly below AA, all of it brand-mandated chrome or display type:
     header nav / sub-label   3.5–4.1:1   white on --teal-deep and --pink
     hero copy                ~4.0:1 where it sits (2.2:1 against the gradient's
                              bright end, which is behind the form card)
     section eyebrows         3.7–4.0:1   --teal-deep labels, each duplicated
                              immediately below by an h2 in --text-dark (12.6:1)
   Every one of these is navigation or decoration whose content appears again at
   full contrast elsewhere on the page. None of it is a disclosure. Do not move
   disclosure text into any of these treatments to make it look nicer. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:16px;color:var(--text-body);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* Links are --purple. It is a brand accent (swatch 4) and the only brand colour
   that clears AA as text on white at 5.7:1. --teal is 2.2:1 and --teal-deep is
   3.99:1, both short of it — and the links this rule paints include Privacy
   Policy and Terms of Service inside the consent block, which are the links an
   A2P reviewer follows to decide the campaign. Underlined, so colour is not the
   only thing marking them. */
a{color:var(--purple);text-underline-offset:2px}
a:hover{text-decoration:none}

/* ── draft banner ─────────────────────────────────────────────────────── */
.draftbar{background:#7a1f1f;color:var(--white);font-size:13px;font-weight:700;letter-spacing:.5px;
  text-align:center;padding:10px 16px;text-transform:uppercase}

/* ── header ───────────────────────────────────────────────────────────── */
/* --teal-deep, not --teal. The brand kit's own privacy template bands the header
   in --teal with white text, which is 2.2:1; --teal-deep is the same ramp at
   3.99:1 and ties the band into the top of the hero gradient below. */
.hdr{background:var(--teal-deep);height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:50}
.hdr__brand{font-family:var(--font-display);font-size:28px;color:var(--white);letter-spacing:2px;line-height:1;
  display:flex;flex-direction:column;text-decoration:none}
.hdr__brand small{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--white);margin-top:4px}
.hdr__nav{display:flex;gap:22px;align-items:center}
.hdr__nav a{color:var(--white);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.hdr__nav a:hover{text-decoration:underline}
@media(max-width:640px){.hdr__nav a:not(.hdr__cta){display:none}}
.hdr__cta{background:var(--pink);color:var(--white)!important;padding:9px 18px;border-radius:var(--radius-pill)}

/* ── hero + form ──────────────────────────────────────────────────────── */
/* The brand hero gradient is linear-gradient(135deg, teal → teal-dark 60% →
   teal-deep 100%). Same three stops and same angle here, ORDER REVERSED, because
   the brand's version is bright where this layout puts its copy: white on --teal
   is 2.2:1. Reversed, the copy sits on --teal-deep (3.99:1) and full-saturation
   brand teal lands bottom-right behind the form card.
   3.99:1 clears AA for large text and falls short for the 16px facts list. That
   is accepted on two conditions — keep them true if you restyle:
     1. Nothing the hero states exists only in the hero. Address, phone and email
        repeat in the "My gym" block (#333 on #f7f7f7, 11.8:1), the footer, and
        contact-us.html.
     2. No compliance text is ever placed on the gradient. Consent language, the
        not-a-condition-of-purchase line and the Privacy/Terms links live on the
        white card at 5.5:1 or better. */
.hero{background:linear-gradient(135deg,var(--teal-deep) 0%,var(--teal-dark) 55%,var(--teal) 100%);padding:56px 24px 64px}
.hero__grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 440px;gap:48px;align-items:start}
/* ON A PHONE THE FORM COMES FIRST. Stacked in source order, the hero copy pushes
   the opt-in form roughly a screen and a half down — and the reviewer vetting
   this campaign may well be on a phone. The consent checkboxes are the reason the
   page exists; they do not go below the marketing copy. */
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .hero__grid .card{order:1}
  .hero__copy{order:2}
}
.hero__kicker{font-family:var(--font-display);font-size:20px;letter-spacing:3px;color:var(--white);text-transform:uppercase}
.hero h1{font-family:var(--font-display);font-size:clamp(40px,6vw,64px);line-height:.98;color:var(--white);
  text-transform:uppercase;letter-spacing:1px;margin:8px 0 18px;text-shadow:0 2px 8px rgba(0,0,0,.15)}
/* Scoped to the copy column ON PURPOSE. As `.hero p` this also matched the
   paragraphs inside the form card — which sits inside .hero — and painted the
   consent lead-in white on a white card. Invisible consent copy on the page a
   carrier reviews is the exact failure this site exists to prevent, so do not
   widen this selector back to `.hero p`. */
.hero__copy p{color:rgba(255,255,255,.95);font-size:17px;max-width:46ch;margin-bottom:16px}
.hero__facts{list-style:none;margin-top:22px}
.hero__facts li{color:var(--white);font-weight:600;font-size:16px;padding-left:28px;position:relative;margin-bottom:10px}
.hero__facts li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--lime)}
.hero__facts a{color:var(--white)}

.card{background:var(--white);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-pop)}
.card h2{font-family:var(--font-display);font-size:30px;color:var(--text-dark);text-transform:uppercase;letter-spacing:1px;line-height:1.05}
.card__sub{font-size:14px;color:var(--text-body);margin:8px 0 20px}

.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dark);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:15px;color:var(--text-dark);
  padding:11px 13px;border:1px solid #d5d5d5;border-radius:var(--radius-md);background:var(--white)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-deep);outline-offset:1px;border-color:var(--teal-deep)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.row2{grid-template-columns:1fr}}
.req{color:var(--pink)}

/* ── consent block: the part the A2P reviewer is looking for ──────────── */
.consent{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin:18px 0 14px;background:var(--teal-light)}
.consent__lead{font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:12px}
.consent__opt{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.consent__opt:last-child{margin-bottom:0}
.consent__opt input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--teal-deep)}
/* --text-body, not --text-light. It is tempting to read this as fine print, but
   it carries "Consent to receive text messages is not a condition of purchase",
   which is a required disclosure. --text-light is 2.85:1; --text-body is 5.5:1
   on this panel. */
.consent__opt span{font-size:12.5px;line-height:1.55;color:var(--text-body)}
.fineprint{font-size:11.5px;line-height:1.6;color:var(--text-body);margin-top:10px}

/* Pink is the brand's primary CTA (intro-booking.html .cta-btn), with its shadow.
   White on --pink is 4.07:1 — AA for text this size (26px display). */
.btn{display:block;width:100%;background:var(--pink);color:var(--white);font-family:var(--font-display);font-size:26px;
  letter-spacing:2px;text-transform:uppercase;border:0;border-radius:var(--radius-md);padding:15px;cursor:pointer;
  text-align:center;text-decoration:none;box-shadow:var(--shadow-cta);transition:transform .12s,opacity .2s}
.btn:hover{opacity:.92}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.35;box-shadow:none;cursor:not-allowed}
.formnote{margin-top:12px;font-size:13px;text-align:center}
.formnote--ok{color:#1d7a45;font-weight:600}
.formnote--err{color:#b3156c;font-weight:600}
.legal-links{margin-top:14px;text-align:center;font-size:12px;color:var(--text-body)}

/* ── photo band ───────────────────────────────────────────────────────── */
/* This is the brand kit's `.photo-block` pattern (intro-booking.html), overlay
   colours included: a teal→purple wash over the photo. It is a BAND, not a hero
   background, and that is the whole point — no text sits on it, so there is no
   contrast to compromise.
   The alternative, white copy over photography the way the Pittsburgh reference
   does it, measures 2.2–2.5:1 against brand teal even at a 94% scrim. Getting
   that to AA means a scrim so heavy the photo stops being visible, which buys a
   worse photo AND worse text. A band keeps both honest. */
.photo-block{
  width:100%;height:280px;
  background-color:var(--teal-dark);
  background-image:linear-gradient(135deg,rgba(63,192,195,.35) 0%,rgba(82,97,172,.4) 100%),var(--photo);
  background-size:cover;background-position:center;
}
@media(max-width:700px){.photo-block{height:180px}}

/* ── generic sections ─────────────────────────────────────────────────── */
section{padding:64px 24px}
.wrap{max-width:1060px;margin:0 auto}
.wrap--narrow{max-width:780px;margin:0 auto}
.eyebrow{font-family:var(--font-display);font-size:18px;letter-spacing:3px;color:var(--teal-deep);text-transform:uppercase;text-align:center}
.sect-title{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);color:var(--text-dark);text-transform:uppercase;
  letter-spacing:1px;text-align:center;margin:6px 0 40px;line-height:1.05}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:880px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid4{grid-template-columns:1fr}}
.benefit__icon{font-size:34px;line-height:1;margin-bottom:12px}
.benefit h3{font-family:var(--font-display);font-size:22px;color:var(--text-dark);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.benefit p{font-size:14.5px}
.alt{background:var(--bg)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
.quote{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;font-size:14.5px;box-shadow:var(--shadow-card)}
.quote__mark{font-family:var(--font-display);font-size:40px;color:var(--teal);line-height:.6}
.quote__by{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-body)}

/* ── identity block: business name / address / phone, for the reviewer ── */
.identity{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.identity{grid-template-columns:1fr}}
.identity dl{font-size:15px}
.identity dt{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-body);margin-top:16px}
.identity dt:first-child{margin-top:0}
.identity dd{color:var(--text-dark);margin-top:3px}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{background:var(--text-dark);color:#d6d6d6;padding:48px 24px 32px;font-size:13.5px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:780px){footer .wrap{grid-template-columns:1fr;gap:26px}}
footer h4{font-family:var(--font-display);font-size:19px;color:var(--white);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:10px}
footer a{color:var(--white);text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none}
footer li{margin-bottom:7px}
.colophon{max-width:1060px;margin:32px auto 0;padding-top:20px;border-top:1px solid #555;font-size:12px;color:#c4c4c4}

/* ── legal pages ──────────────────────────────────────────────────────── */
.legal{background:var(--bg);padding:40px 24px 72px}
.legal__paper{max-width:800px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 44px;box-shadow:var(--shadow-card)}
@media(max-width:600px){.legal__paper{padding:32px 22px}}
.legal__paper h1{font-family:var(--font-display);font-size:42px;color:var(--text-dark);text-transform:uppercase;letter-spacing:1px;line-height:1}
.legal__meta{color:var(--text-body);font-size:13px;margin:8px 0 28px}
.legal__paper h2{font-family:var(--font-display);font-size:23px;color:var(--text-dark);text-transform:uppercase;letter-spacing:1px;margin:30px 0 10px}
.legal__paper p,.legal__paper li{font-size:15px}
.legal__paper p{margin-bottom:13px}
.legal__paper ul{margin:0 0 14px 22px}
.legal__paper li{margin-bottom:7px}
.callout{background:var(--teal-light);border-left:4px solid var(--teal);padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:0 0 20px}
.callout p:last-child{margin-bottom:0}

/* ─── Widget-route contact card (2026-09-25) ──────────────────────────────────
   index.html and contact-us.html stopped carrying a form when the site moved to
   the GHL chat widget (GHL checklist item 6: no phone-collecting forms on any
   page with the widget). These replace the form's visual weight in the card so
   the hero still reads as a two-column landing page.
   Contrast, measured on --white #fff:
     --text-dark  #333    12.6:1   AA/AAA — used for the row keys
     --text-body  #666     5.7:1   AA     — used for the hint and row values
     --purple   #5261ac    5.7:1   AA     — used for links in the card
   Nothing below body size is painted in the pale end of the teal ramp. */
.card__hint{font-size:12.5px;line-height:1.55;color:var(--text-body);margin-top:10px;text-align:center}
.card__hint--err{color:var(--purple);font-weight:600}

.contactlist{margin-top:20px;border-top:1px solid var(--border)}
.contactlist__row{display:grid;grid-template-columns:104px 1fr;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border)}
@media(max-width:420px){.contactlist__row{grid-template-columns:1fr;gap:2px}}
.contactlist__k{font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-dark);padding-top:2px}
.contactlist__v{font-size:14px;color:var(--text-body)}
.contactlist__v a{color:var(--purple);font-weight:600;text-decoration:underline}

/* SMS program disclosure on index.html. Static copy, never a form — it exists so
   a reviewer can read the program terms on the opt-in URL without opening the
   widget. Body text in --text-body (5.7:1) and the STOP/HELP line bolded. */
.smsnote{max-width:760px}
.smsnote p{margin-bottom:13px;color:var(--text-body)}
.smsnote p strong{color:var(--text-dark)}
.smsnote a{color:var(--purple);font-weight:600;text-decoration:underline}

/* Welcome page hero with no side card — single column, comfortable measure. */
.hero__grid--solo{grid-template-columns:1fr;max-width:760px}
.hero__chat{margin-top:22px;color:rgba(255,255,255,.95);font-weight:600}