/* Base stylesheet. Layout, type, and shared components only.
   Every color value here is a var(--token) from tokens.css — see Step 4
   of task-3-brief.md for the grep that enforces this. Load tokens.css
   before this file on every page. */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  min-width:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Older browsers do not know <main> and give it display:inline, which
   collapses every section inside it. Every page in this funnel has one. */
main{
  display:block;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote{
  margin:0;
}

ul,ol{
  margin:0;
  padding:0;
  list-style:none;
}

a{
  color:inherit;
}

img,svg,video{
  display:block;
  max-width:100%;
  height:auto;
}

button{
  font:inherit;
  color:inherit;
}

/* Layout ------------------------------------------------------------ */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem);
}

/* Type ---------------------------------------------------------------
   Montserrat 900 all-caps display, one accent word carried in bright
   green via .h-display .accent, Poppins for everything else. */

.h-display{
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:-0.01em;
  font-size:clamp(2rem,1.1rem + 4vw,3.75rem);
  color:var(--ink);
}

.h-display .accent{
  color:var(--brand-lt);
}

.eyebrow{
  display:inline-block;
  font-family:var(--body);
  font-weight:600;
  font-size:.8125rem;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--brand-lt);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Buttons -------------------------------------------------------------
   .btn: shared shape/behavior. .btn-primary: the funnel's single most
   important element, so it carries its own color/shadow and a generous
   min-height so it's comfortable to tap on a phone. */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:56px;
  padding:.75rem 1.75rem;
  border:0;
  border-radius:var(--radius);
  font-family:var(--body);
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}

.btn:active{
  transform:translateY(1px);
}

.btn:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:2px;
}

.btn-primary{
  background:linear-gradient(135deg,var(--brand-lt),var(--brand));
  color:var(--surface);
  box-shadow:var(--shadow);
}

.btn-primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

@media (max-width:620px){
  .btn{
    width:100%;
  }
}

/* Cards ---------------------------------------------------------------- */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);
}

/* Dev-mode chrome -------------------------------------------------------
   Rendered ONLY by SLDev (assets/js/tracking.js) on a local/dev host, and
   never emitted on a real host, so every rule below is inert in production.

   It lives in base.css rather than in a page stylesheet because the banner
   shows on all four funnel pages and those load three different page
   stylesheets between them. Colours are var(--token) like everything else
   here; the dev tokens are defined in tokens.css. page-landing.css is
   deliberately untouched by this feature. */

.sl-dev-banner{
  position:fixed;
  left:0;
  bottom:0;
  z-index:2147483000;
  max-width:100%;
  padding:.4rem .7rem;
  border-top:2px solid var(--dev-line);
  border-right:2px solid var(--dev-line);
  border-radius:0 var(--radius) 0 0;
  background:var(--dev-bg);
  color:var(--dev-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.75rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.02em;
  text-transform:uppercase;
  /* The guard's own badge must never swallow a click on the page it is
     watching. */
  pointer-events:none;
}

/* ?live=1 on a dev host: sends are armed. The dangerous state has to look
   dangerous, so it is red rather than yellow. */
.sl-dev-banner.is-live{
  background:var(--danger);
  color:var(--surface);
  border-color:var(--surface);
}

/* Test mode on a Netlify draft host. Distinct from both the neutral dev
   badge and the red live one: this state is safe, but it is running on a
   real public URL, so it must not read as "just localhost". */
.sl-dev-banner.is-test{
  background:#4c1d95;
  color:#fff;
  border-color:#c4b5fd;
}

/* A build shipped with ARMED = false. This is the only banner state a real
   visitor can ever see, and the only one that can appear on production, so
   it is amber rather than the dev grey: the page looks finished and is
   quietly recording nothing, and whoever loads it should notice. */
.sl-dev-banner.is-disarmed{
  background:#b45309;
  color:#fff;
  border-color:#fde68a;
}

/* The stub ghl.js renders inside #book in place of the real booking widget.
   Dashed, because a dashed box is never a thing this funnel ships. */
.sl-dev-stub{
  border:2px dashed var(--dev-line);
  border-radius:var(--radius);
  background:var(--dev-bg);
  color:var(--dev-ink);
  padding:clamp(1rem,3vw,1.5rem);
}

.sl-dev-stub-h{
  margin:0 0 .5rem;
  font-family:var(--display);
  font-weight:800;
  font-size:1.0625rem;
  line-height:1.2;
  text-transform:uppercase;
}

.sl-dev-stub-p{
  margin:0 0 1rem;
  font-size:.9375rem;
}

.sl-dev-stub-dl{
  margin:0 0 1.25rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8125rem;
}

.sl-dev-stub-dt{
  font-weight:700;
  opacity:.75;
}

.sl-dev-stub-dd{
  margin:0 0 .5rem;
  /* A prefilled email or a widget URL is longer than a phone column. */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.sl-dev-stub-dd.is-url{
  opacity:.8;
}

.sl-dev-stub-btn{
  background:var(--dev-ink);
  color:var(--dev-bg);
}

.sl-dev-stub-btn:focus-visible{
  outline:2px solid var(--dev-ink);
  outline-offset:2px;
}