/* ============================================================ Be a Guest v2 (2026-09-30): The Things We Promise Not to Do + How to
   Prepare, the team's picks from be-a-guest-variants/ (B "Promise ledger" + F "At the mic"; the team on the old versions: "these 2
   sections seem very incomplete and look like a basic design"). The copy is Zahra's (content/be-a-guest.md), whole and in order;
   only the layout changed. Linked from be-a-guest/index.html after ot-pages.css, in its own file (like ot-cover.css) so it stays out
   of ot-pages.css while other work edits that file. The review page keeps its own copy of these rules (gv.css, gv-* classes).
   Motion follows the site: animations only under html.motion (ot.js), reveals through .reveal, off under reduced motion. */

/* ---- The Things We Promise Not to Do (ink): the heading beside the copy stays (.split--pg, sticky); each promise is a ledger
   row with a solid green icon (Lucide megaphone-off / shield-check / lock, in the page sprite), hairlines between rows, and the
   hero's sound rings fading in under the heading. The rings sit in their own clipped layer: overflow:hidden on the section would
   make it the sticky heading's scroll container and push the heading 110px down. */
.bg2-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.bg2-promise .rings{top:auto; bottom:0; left:0; width:min(58vw,820px); translate:-42% 38%; color:#fff}
.bg2-promise .rings circle{stroke-width:.16; opacity:.2} .bg2-promise .rings circle:nth-child(2){opacity:.15} .bg2-promise .rings circle:nth-child(3){opacity:.1} .bg2-promise .rings circle:nth-child(4){opacity:.07} .bg2-promise .rings circle:nth-child(5){opacity:.04}
.bg2-promise .split--pg{position:relative; z-index:1}
.bg2-ledger{list-style:none; margin:0; padding:0}
.bg2-ledger li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:28px; align-items:start; padding:32px 0}
.bg2-ledger li:first-child{padding-top:4px}
.bg2-ledger li:last-child{padding-bottom:0}
.bg2-ledger li + li{border-top:1px solid rgba(255,255,255,.14)}
.bg2-ic{flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--green-ui); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px -14px rgba(0,0,0,.8)}
.bg2-ic svg{width:22px; height:22px}
.bg2-ledger p{margin:0; padding-top:9px; font:500 clamp(19px,1.55vw,22px)/1.5 var(--body); letter-spacing:-.005em; color:rgba(255,255,255,.92); max-width:44ch; text-wrap:pretty}
.bg2-nw{white-space:nowrap}   /* "follow-up" stays on one line instead of breaking at its hyphen */
@media (max-width:700px){
  .bg2-ledger li{grid-template-columns:44px minmax(0,1fr); gap:18px; padding:24px 0}
  .bg2-ic{width:44px; height:44px} .bg2-ic svg{width:20px; height:20px}
  .bg2-ledger p{padding-top:8px; font-size:18px}
}

/* ---- How to Prepare (paper): the copy beside the Episodes hero's sound stage (the hanging mic in its rings on an ink panel,
   .hh-split__panel's recipe), with the call and the button inside the panel. Ring centre = cable + 2/3 of the mic's height. */
.bg2-prepare__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center}
.bg2-prepare .h2{max-width:14ch; margin:0}
.bg2-lead{margin:28px 0 0; font:500 clamp(21px,1.85vw,25px)/1.5 var(--body); letter-spacing:-.005em; color:var(--ink); max-width:32ch; text-wrap:pretty}
.bg2-body{margin:26px 0 0; padding-top:26px; border-top:1px solid rgba(17,17,17,.14); font:400 18px/1.65 var(--body); color:var(--ink-2); max-width:50ch}
.bg2-stage{position:relative; isolation:isolate; overflow:hidden; padding:380px 40px 40px; border-radius:28px; color:#fff; background:radial-gradient(60% 42% at 50% 34%, #1F5E39 0, rgba(17,17,17,0) 66%), #111; box-shadow:0 60px 120px -56px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.06)}
.bg2-stage .rings{z-index:-1; top:248px; left:50%; width:620px; translate:-50% -50%; color:#fff}
.bg2-stage .rings circle{stroke-width:.22; opacity:.3} .bg2-stage .rings circle:nth-child(2){opacity:.22} .bg2-stage .rings circle:nth-child(3){opacity:.15} .bg2-stage .rings circle:nth-child(4){opacity:.09} .bg2-stage .rings circle:nth-child(5){opacity:.05}
.bg2-rig{position:absolute; left:50%; top:0; translate:-50% 0; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; pointer-events:none}
.bg2-rig .cable{display:block; width:3px; height:64px; background:#3D3D3D; border-radius:0 0 1.5px 1.5px}
.bg2-rig .mic{display:block; width:120px; height:auto; margin-top:-1px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.5)) drop-shadow(0 44px 54px rgba(28,121,64,.35))}
.bg2-rig::after{content:""; position:absolute; left:50%; top:248px; width:150px; height:150px; translate:-50% -50%; border-radius:50%; border:1.5px solid var(--green); opacity:0; pointer-events:none; z-index:-1}
.bg2-stage__cta{position:relative; padding-top:28px; border-top:1px solid rgba(255,255,255,.14)}
.bg2-stage__cta p{margin:0 0 24px; font:400 clamp(24px,2.2vw,32px)/1.05 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:#fff; max-width:20ch; text-wrap:balance}
.bg2-stage__cta .btn{background:#fff; color:var(--green-deep)} .bg2-stage__cta .btn:hover{background:#EFF1EE; color:var(--green-deep)}
@media (max-width:1100px){ .bg2-prepare__grid{gap:48px} }
@media (max-width:960px){ .bg2-prepare__grid{grid-template-columns:1fr; gap:40px} .bg2-stage{max-width:560px} }
@media (max-width:700px){
  .bg2-lead{font-size:20px} .bg2-body{font-size:17px}
  .bg2-stage{padding:330px 22px 24px; border-radius:22px}
  .bg2-rig .cable{height:48px} .bg2-rig .mic{width:104px}
  .bg2-stage .rings{top:208px; width:460px} .bg2-rig::after{top:208px; width:120px; height:120px}
}

/* ---- motion: the rings breathe, the mic sways with its ripple (the Episodes hero's; keyframes ot-breathe / ot-ripple in
   ot-canva.css, hh-sway in ot-pages.css) */
html.motion .bg2-promise .rings,html.motion .bg2-stage .rings{animation:ot-breathe 8s ease-in-out infinite alternate; will-change:transform}
html.motion .bg2-rig{animation:hh-sway 7s ease-in-out infinite alternate}
html.motion .bg2-rig::after{animation:ot-ripple 7s cubic-bezier(.16,1,.3,1) 1.4s infinite}
@media (prefers-reduced-motion:reduce){ .bg2-promise .rings,.bg2-stage .rings,.bg2-rig,.bg2-rig::after{animation:none} }

/* ============================================================ Hero: the two chairs (2026-09-30, the team's pick of About hero
   version 4, about-hero-variants/4-two-chairs.html, for this page). They replace the two episode cards beside the title: Sarah's
   chair and the empty guest chair, one half of studio.webp each, with lines from this page's copy (content/be-a-guest.md, the
   What Happens After You Hit Send steps and How to Prepare) that change in turn (ot-guest.js). From 1200px up each chair sits in
   the slot the cards used (.ab4-hero .ab4-card in ot-pages.css: absolute, 4vw from the screen edge, clamp(200px, 23.45vw - 24px,
   320px) wide, 20px above the title); below 1200 each keeps the compact card's box (.ab4-card), so the mic and the strip don't move. */
.bg3-cards .bg3-side{pointer-events:auto}
.bg3-full{display:none}
.bg3-mini{display:contents}
@media (max-width:1199px){ .bg3-side{position:relative} }
.bg3-side:hover{transform:none; box-shadow:0 30px 60px -36px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}   /* not a link, so no lift */

/* the lines: every one sits in the same grid cell; the one showing is .is-on. The old line is gone (.35s) before the new one comes
   in: a cross-fade laid the two over each other ("You see it before" across "Two stories, no notes", the user's screenshot) */
.bg3-stack{display:grid}
.bg3-stack > [data-bg3-item]{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s, translate .35s var(--ease)}
.bg3-stack > [data-bg3-item].is-on{opacity:1; visibility:visible; transition:opacity .5s var(--ease) .35s, visibility 0s linear .35s, translate .9s var(--out-expo) .35s}

/* compact card (below 1200): the chair in the 88/72px tile, the line beside it; the same slices as the big chairs, so the hard hat
   stays on the guest's side */
.bg3-mini__art{background:#111}
.bg3-mini__img{position:absolute; bottom:0; width:290%; height:auto; max-width:none}
.bg3-mini__img--l{left:-39.9%} .bg3-mini__img--r{left:-139.6%}
.bg3-mini__line{display:block; font:500 13.5px/1.3 var(--body); color:#fff; text-wrap:balance}

/* the glass name chip (the home's "Sarah Gonzales · Host" chip, .hm-chip) */
.bg3-chip{display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.86); border:1px solid rgba(17,17,17,.08); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 18px 40px -28px rgba(17,17,17,.45);
  font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.bg3-chip b{font-weight:600}
.bg3-chip img{width:24px; height:24px; border-radius:50%; object-fit:cover}
.bg3-chip .sep{width:1px; height:12px; background:rgba(17,17,17,.2)}
.bg3-chip .eq{color:var(--green); height:14px} .bg3-chip .eq i{width:2.5px}

@media (min-width:1200px), (max-width:700px){
  /* Out in the rings, lower (marked screenshot 2026-09-30, "these seems very near this should be where I marked": at 1853px the
     marks sat ~90px from the screen edges and ran from the title's first line to under the lead). --out: from the screen edge, 4vw
     and, on wide screens, no more than 840px from the centre (the slot used 680). --tl: the title's painted left edge (its widest
     line, "Owners How You Got", is 7.76 × --L wide). Width: the room between them less 40px, 220-320px. Height: About's 1.24.
     Centre: 1.5 --L + 64px below the slot's top (the slot is 20px above the title), between the title's middle and the lead's.
     The same chairs hang beside the mic on phones: sizes and places at the end of this file. */
  .bg3-cards{--L:min(6.3vw, 92px); --out:max(4vw, 50vw - 840px); --tl:calc(50vw - 3.88 * var(--L));
    --cw:clamp(220px, calc(var(--tl) - var(--out) - 40px), 320px); --ch:calc(var(--cw) * 1.24)}
  .ab4-hero .bg3-cards .ab4-card{width:var(--cw)}
  .ab4-hero .bg3-cards .ab4-card:first-child{left:calc(var(--out) - var(--wl))}
  .ab4-hero .bg3-cards .ab4-card:last-child{right:calc(var(--out) - var(--wl))}
  .ab4-hero .bg3-cards .bg3-side{background:none; border:0; border-radius:0; box-shadow:none; overflow:visible; padding:0; transition:none}
  .bg3-mini{display:none}
  .bg3-full{display:block; position:relative; width:var(--cw); height:var(--ch); margin-top:calc(1.5 * var(--L) + 64px - var(--ch) / 2); border-radius:22px; overflow:hidden;
    background:#0b0b0b; box-shadow:0 44px 80px -44px rgba(17,17,17,.65), inset 0 0 0 1px rgba(255,255,255,.06)}
  /* the photo at 290% of the card's width (a 550px slice each: the left card x 220-770, Sarah's chair and mic; the right x 770-1320,
     the guest chair with the hard hat on the table at its inner edge), its foot on the card's foot */
  .bg3-photo{position:absolute; inset:0; overflow:hidden}
  .bg3-img{position:absolute; max-width:none; width:290%; height:auto; bottom:0}
  .bg3-full--host .bg3-img{left:-39.9%}
  .bg3-full--guest .bg3-img{left:-139.6%}
  .bg3-full::before{content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(60% 34% at 50% 18%, rgba(32,157,80,.34), transparent 72%); pointer-events:none}
  .bg3-full::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.82) 88%); pointer-events:none}
  .bg3-chip{position:absolute; z-index:2; left:14px; top:14px}
  .bg3-full--guest .bg3-chip{padding-left:12px}
  .bg3-say{position:absolute; z-index:2; left:20px; right:20px; bottom:20px; align-items:end}
  .bg3-line{display:block; font:400 clamp(22px,1.85vw,27px)/1.04 var(--display); text-transform:uppercase; letter-spacing:-.005em; color:#fff; text-wrap:balance; translate:0 10px}
  .bg3-line.is-on{translate:0 0}
}
@media (min-width:1200px) and (max-width:1535px){   /* "Sarah Gonzales | Host" fits a 220-300px card */
  .bg3-chip{gap:8px; font-size:11px; letter-spacing:.1em} .bg3-chip img{width:22px; height:22px}
}
@media (min-width:1200px) and (max-width:1365px){ .bg3-chip img{display:none} .bg3-full--host .bg3-chip{padding-left:12px} }
/* the hero's button (the user, 2026-09-30: "I think there is a glitch with this button"). Its arrow circle comes AFTER the words
   (About's icon leads), so the hero's 8px / 26px padding put "Book" 8px from the left end: flipped here. And the mic swings in the
   channel between the button and the link: ±0.7° idle, ±1.3° on a scroll flick, its box up to 6px (17px) over the button's end, now
   the circle's side; the channel is 200px here instead of 150. On tablets (the 90px mic, a 110px channel) it widens as far as the
   276px button allows in each half: up to 170px. */
.ab4-hero--guest .hero__cta .btn{padding:0 8px 0 26px}
@media (min-width:961px){ .ab4-hero--guest .hero__cta{grid-template-columns:1fr 200px 1fr} }
@media (min-width:701px) and (max-width:960px){ .ab4-hero--guest .hero__cta{grid-template-columns:1fr clamp(110px, 100% - 560px, 170px) 1fr} }

/* What One Hour of Your Time Gets You (the balanced columns and the green "One ask" card): ot-get.css, shared with About. */

html.motion .bg3-img{animation:bg3-drift 14s ease-in-out infinite alternate}
@keyframes bg3-drift{from{scale:1.08} to{scale:1}}
@media (prefers-reduced-motion:reduce){ .bg3-img{animation:none} }

/* The chairs beside the mic on phones (marked screenshots, 30 Sep: "this should be shown here in mob version"), as on About: in
   the empty space either side of the mic, above "A show by", in place of the compact cards under the buttons (so the hero is
   also 192px shorter, measured at 360-412). Each is centred in the room between the gutter and the mic (25% of the wrap less 15px from its
   edge) and on the mic's body (--yc, from the wrap's top: the hero's 244px padding). The chips keep their role word ("Host" with
   Sarah's photo, "Guest" with the equaliser) and the lines set at 12.5px; they still change in turn. 701-1199 keep the cards. */
@media (max-width:700px){
  .ab4-hero .bg3-cards{position:absolute; left:0; right:0; top:0; margin:0; display:block; pointer-events:none; z-index:3;
    --cw:clamp(88px, 25.5vw, 104px); --ch:calc(var(--cw) * 1.24); --yc:-90px}
  .ab4-hero .bg3-cards .ab4-card{position:absolute; top:0; width:var(--cw); display:block}
  .ab4-hero .bg3-cards .ab4-card:first-child{left:calc(25% - 15px - var(--cw) / 2)}
  .ab4-hero .bg3-cards .ab4-card:last-child{right:calc(25% - 15px - var(--cw) / 2)}
  .bg3-full{margin-top:calc(var(--yc) - var(--ch) / 2); border-radius:14px; box-shadow:0 24px 44px -26px rgba(17,17,17,.6), inset 0 0 0 1px rgba(255,255,255,.06)}
  .bg3-chip{left:7px; top:7px; gap:5px; padding:4px 8px 4px 4px; font-size:8px; letter-spacing:.1em; box-shadow:0 10px 24px -16px rgba(17,17,17,.45)}
  .bg3-chip b,.bg3-chip .sep{display:none}
  .bg3-chip img{width:14px; height:14px}
  .bg3-full--guest .bg3-chip{padding-left:7px}
  .bg3-chip .eq{height:9px} .bg3-chip .eq i{width:2px}
  .bg3-say{left:9px; right:9px; bottom:9px}
  .bg3-line{font-size:12.5px; line-height:1.05; translate:0 6px}
}

/* ---------- booking calendar (theme 1.0.8) ----------
   The GoHighLevel calendar sits in the booking card where the placeholder fields were. Its embed script (form_embed.js)
   sets the iframe's height from the calendar inside; the heights here only hold the calendar's usual size until then, so
   nothing below jumps. On phones the calendar takes most of the card's width: seven day columns need it. */
/* The calendar scrolls each new step into view, and the browser carries that scroll up into this page: the page's scroll
   padding keeps the step clear of the fixed header. #book still lands where it did, 110px from the top (padding, not margin). */
html{scroll-padding-top:110px}
.book--cal{scroll-margin-top:0}
.book--cal .sub{margin-bottom:20px}
.book__cal{border-radius:12px; overflow:hidden; background:#fff}
.book__cal iframe{display:block; width:100%; height:827px; border:0; clip-path:inset(1px 1px 6px 1px)}   /* hides the calendar's own hairline frame and the 5px the resizer adds under it: one white panel */
@media (max-width:700px){
  .book--cal{padding:24px 10px 10px}
  .book--cal h2,.book--cal .sub{margin-left:12px; margin-right:12px}
  .book__cal{border-radius:18px}
  .book__cal iframe{height:777px}
}
/* the calendar needs about 300px (narrower, its month header runs out of the frame): under 360px the card runs edge to edge */
@media (max-width:359px){ .book--cal{margin-inline:calc(-1 * var(--gutter)); border-radius:0} }