/* ===========================================================================
   STRATEGY SESSION PAGE — /get-demo/  (built 9/15, re-laid 9/18)
   ---------------------------------------------------------------------------
   Built by scripts/build-strategy-session.py from Alie's locked copy. Loaded
   last, after the shared sheets AND get-in-touch.css; everything here is
   scoped to .page-demo or to the page's own ss-* classes. Tokens only —
   verify.js fails any hex, any ramped fill, any backdrop effect and any
   forced-priority flag in this sheet (it reads comments too, so they are
   described here, not written out).

   🔁 9/18 — GET IN TOUCH'S LAYOUT, SECTION FOR SECTION (Brees: "Just like the
   Contact or the Get in Touch page, I want to move the title up to Section 1
   ... Leave the calendar in the green and add in the 'What we can dig into' in
   the Indigo, then move the quote from the Indigo to the White"). The design
   canvas round before this (S2, then S1) is superseded. Sections:
     1 Get in Touch's hero (.gt-hero): H1 + sub + the worst-case line
     2 Get in Touch's two doors (.gt-steps / .gt-door): indigo = "What we can
       dig into" + the topics · lime, a step lower = the live Calendly card
     3 the quote on WHITE, pulling up over both doors on the 3x corner
     4 Get in Touch's "Everything else" band (.gt-else) for email / phone
   Contrast: ink on white 13.3 · ink-muted on white above 5 · white on indigo
   8.09 · oat on indigo 7+ · oat-75 on indigo 4.77 · ink on lime 8.95 · ink on
   sky-soft 12.3 · the lime band under the quote's turn is decoration (the text
   is ink).
   =========================================================================== */

/* Get in Touch's two measures, which its sheet defines on .page-contact only. */
.page-demo {
  --gt-edge: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  --gt-step: clamp(40px, 6vw, 88px);   /* how far the lime door sits below the indigo one */
}

/* ----------------------------------------------------------------- 1. hero */
/* The hero IS .gt-hero (pattern circle, the petal/lime pair, H1 size from the shared .hero__headline). Only the
   worst-case line is this page's: bold, under the sub, as it sat under the topics before. */
.ss-hero__worst {
  max-width: 40rem;
  margin: var(--s-3) 0 0;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- 2. doors */
/* INDIGO: "What we can dig into" + the topics. The heading and lead take the door's own type (white / oat); the
   list is the page's dotted list, in oat on indigo. */
.ss-door-topics .gt-door__h { max-width: none; }
.ss-door-topics .gt-door__p { max-width: 34rem; }
.ss-topics__list {
  display: grid;
  width: 100%;
  max-width: 34rem;
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}
.ss-topics__list li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-bottom: 1px solid rgb(243 238 232 / 0.22);
  color: var(--oat);
  font-size: 1.125rem;
  line-height: 1.45;
}
.ss-topics__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(16px + 0.4em);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--dot, var(--petal));
}
.ss-topics__list li:nth-child(5n + 1) { --dot: var(--petal); }
.ss-topics__list li:nth-child(5n + 2) { --dot: var(--lime); }
.ss-topics__list li:nth-child(5n + 3) { --dot: var(--sky); }
.ss-topics__list li:nth-child(5n + 4) { --dot: var(--marigold); }
.ss-topics__list li:nth-child(5n + 5) { --dot: var(--clay); }

/* LIME: the booking card fills its door (Calendly needs the width for its date grid). */
.ss-door-book .gt-door__inner { align-items: stretch; }
.ss-book {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: 0 1px 0 rgba(47, 47, 53, 0.12), 0 24px 60px rgba(47, 47, 53, 0.14);
}
/* Calendly's inline widget needs an explicit height; its mobile layout stacks the calendar above the times and runs
   much taller. With the profile panel hidden (9/16) the desktop view is the date picker + times only. */
.ss-book__widget { min-width: 320px; height: 620px; }
@media (max-width: 649px) { .ss-book__widget { height: 1040px; } }
.ss-book__fallback { margin: 0; padding: var(--s-4); }
.ss-book__fallback a { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- 3. quote */
/* WHITE, pulled up over both doors by the 3x corner (Get in Touch's third-step move), padded out at the bottom by
   the 3x corner the "Everything else" band pulls up over. The site's quote layout (Google Ads / homepage measures):
   quote left, name + practice then the logo in a right column the width of Google Ads' logo card. On white the
   turn is ink on the lime band, and the logo is Sonoran Sky's own full-colour lockup. */
.ss-quote {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--corner-3x));
  padding-block: calc(var(--section-pad) + 24px) calc(var(--section-pad) + var(--corner-3x));
  border-top-left-radius: var(--corner-3x);
  background-color: var(--white);
  color: var(--ink);
}
.ss-quote__fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(2 * var(--s-4) + 5.06 * clamp(30px, 2.7vw, 42px));
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  margin: 0;
}
.ss-quote__block { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
/* NAME ABOVE, LOGO BENEATH (Brees 9/16, every big quote on the site) */
.ss-quote__by    { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); }
.ss-quote__card  { grid-column: 2; grid-row: 3; }
/* The same WIDTH as Google Ads' logo; this mark is 2.7:1, so it is sized by width. Never above its native 297px. */
.ss-quote__logo { display: block; width: calc(5.06 * clamp(30px, 2.7vw, 42px)); max-width: 297px; height: auto; }
.ss-quote__text {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.375rem, 2.9vw, 2.25rem);
  font-weight: 400;
  line-height: 1.32;
}
.ss-quote__turn { box-shadow: inset 0 -0.32em 0 var(--lime); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ss-quote__name { color: var(--ink); font-weight: 600; }
.ss-quote__practice { color: var(--ink-muted); }
@media (max-width: 899px) {
  .ss-quote__fig { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-3); }
  .ss-quote__block, .ss-quote__card, .ss-quote__by { grid-column: 1; grid-row: auto; }
  .ss-quote__by   { order: 2; }
  .ss-quote__card { order: 3; }
}

/* ------------------------------------------------------- 4. email or phone */
/* Get in Touch's "Everything else" band (.gt-else, get-in-touch.css) - no page-local look. */

/* STACKING: each section paints over the one before it, in page order, so every corner pull-up shows the previous
   ground and never hides the next section's content: doors 2 (.gt-steps) · quote 3 · "Everything else" 4. */
.page-demo .gt-else { z-index: 4; }