/* book-a-demo page styles (P3, Session E). Reuses canonical ds7.css (D51).
   10 shared logo image tokens the stale bundle foundation declared but canonical ds7.css
   lacks are re-declared page-scoped here so the trust marquee renders faithfully
   (all 10 images already shared in images/w/). av-lauren + rev-* tokens are declared inline
   in the page block below by the decomposer. */
:root{
  --w-img-logo-checkr: url("/assets/images/w/logo-checkr.png");
  --w-img-logo-euler: url("/assets/images/w/logo-euler.png");
  --w-img-logo-netline: url("/assets/images/w/logo-netline.png");
  --w-img-logo-salesbricks: url("/assets/images/w/logo-salesbricks.png");
  --w-img-logo-sendoso: url("/assets/images/w/logo-sendoso.png");
  --w-img-logo-sequel: url("/assets/images/w/logo-sequel.png");
  --w-img-logo-spara: url("/assets/images/w/logo-spara.png");
  --w-img-logo-syntheticfi: url("/assets/images/w/logo-syntheticfi.png");
  --w-img-logo-udemy: url("/assets/images/w/logo-udemy.png");
  --w-img-logo-warmly: url("/assets/images/w/logo-warmly.png");
}

/* [hidden] must always win over component display rules (form success/error toggling) */
[hidden]{display:none!important}
/* ===== page-local token: reused Lauren avatar (embedded at bundle) ===== */
:root{--w-img-av-lauren:url("/assets/images/w/book-a-demo/av-lauren.webp")}
/* §3 review-fan avatars (reused from the W-CARLY proof library) */
:root{
  --w-img-rev-allison:url("/assets/images/w/book-a-demo/rev-allison.webp");
  --w-img-rev-aisha:url("/assets/images/w/book-a-demo/rev-aisha.webp");
  --w-img-rev-george:url("/assets/images/w/book-a-demo/rev-george.webp");
  --w-img-rev-joseph:url("/assets/images/w/book-a-demo/rev-joseph.webp");
  --w-img-rev-ava:url("/assets/images/w/book-a-demo/rev-ava.webp");
  --w-img-rev-amy:url("/assets/images/w/book-a-demo/rev-amy.webp");
}
/* §2 "What happens on the call" card background photos (4:5) */
:root{
  --w-img-bd1:url("/assets/images/w/book-a-demo/bd1.webp");
  --w-img-bd2:url("/assets/images/w/book-a-demo/bd2.webp");
  --w-img-bd3:url("/assets/images/w/book-a-demo/bd3.webp");
  --w-img-ctabg:url("/assets/images/w/book-a-demo/ctabg.webp");
}

/* ===== light-band technique (.cz-light) — token override for light runs ===== */
.cz-light{
  background:var(--w-bg);color:var(--w-text);
  --w-bg:#ffffff; --w-bg-deep:#ececec; --w-bg-elev:#ffffff;
  --w-card:#ffffff; --w-card-lo:#efefef; --w-card-hi:#ffffff;
  --w-text:var(--w-charcoal); --w-text-2:rgba(28,26,36,0.66); --w-text-3:rgba(28,26,36,0.62);
  --w-text-prose:#302d2e; --w-text-on-brand:#ffffff; --w-icon-ink:var(--w-charcoal);
  --w-line-soft:rgba(28,26,36,0.06); --w-line:rgba(28,26,36,0.10); --w-line-strong:rgba(28,26,36,0.16); --w-edge-top:rgba(255,255,255,0.9);
  --w-brand:var(--w-purple-ink); --w-brand-2:var(--w-purple); --w-brand-soft:rgba(152,135,244,0.10); --w-brand-line:rgba(152,135,244,0.28);
  --w-shadow-raise:0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --w-shadow-raise-soft:0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
  --w-shadow-recess:inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
  --w-shadow-recess-deep:inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7);
  --w-shadow-sm:0 1px 2px rgba(28,26,36,0.04); --w-shadow-md:0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg:0 12px 28px rgba(28,26,36,0.07);
  --w-glow-brand:0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong:0 6px 16px rgba(28,26,36,0.07);
  --w-glass-fill:rgba(255,255,255,0.66); --w-glass-fill-strong:rgba(255,255,255,0.86); --w-glass-tint:rgba(28,26,36,0.90);
  --w-glass-fill-soft:rgba(28,26,36,0.03); --w-glass-line:rgba(28,26,36,0.10); --w-glass-line-bright:rgba(28,26,36,0.16);
  --w-glass-rim-top:rgba(255,255,255,0.95); --w-glass-rim-bottom:rgba(28,26,36,0.05);
  --w-glass-blur:blur(18px) saturate(140%); --w-glass-blur-lg:blur(22px) saturate(145%);
  --w-glass-shadow:0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft:0 4px 12px rgba(28,26,36,0.05);
  --w-cta-fill:var(--w-glass-tint); --w-cta-text:#ffffff; --w-cta-glow:var(--w-shadow-md); --w-cta-glow-strong:var(--w-shadow-lg);
  --w-card-brand-wash:linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line:var(--w-line-strong);
  --w-tag-brand-bg:rgba(28,26,36,0.06); --w-tag-brand-fg:var(--w-text); --w-focus:rgba(28,26,36,0.55);
  --w-grad-surface:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --w-grad-surface-hi:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --w-grad-recess:linear-gradient(180deg, #ededed 0%, #e3e3e3 100%);
}
@media (prefers-reduced-transparency: reduce){
  .cz-light .w-glass,.cz-light .w-btn--glass,.cz-light .w-tag,.cz-light .w-card,.cz-light .w-cta-band{background:var(--w-card);border-color:var(--w-line)}
}


/* ===== asymmetric section rhythm (tight top / generous bottom) ===== */
.w-section{padding-block:clamp(36px,2.2vw+1rem,64px) clamp(64px,4vw+1.7rem,108px)}
.w-section--hero{padding-block:clamp(88px,5.5rem+5vw,148px) clamp(56px,4vw+1.5rem,96px)}

/* ===== §1 · HERO + FORM (split) ===== */
.bd-hero__grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:clamp(32px,4.5vw,76px);align-items:start}
.bd-hero__h{margin-top:var(--w-s-5);max-width:14ch}
.bd-hero__lead{margin-top:var(--w-s-5);max-width:52ch}
@media(max-width:960px){
  .bd-hero__grid{grid-template-columns:1fr;gap:var(--w-s-7)}
  .bd-hero__h{max-width:none}
}

/* form card */
.bd-form{gap:0;padding:clamp(24px,2.8vw,34px);box-shadow:0 30px 70px -24px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.7)}
.bd-form .w-input{background:var(--w-card);border-color:var(--w-line-strong)}
.bd-form .bd-choice__opt span{background:var(--w-card)}
.bd-form__fields{display:flex;flex-direction:column;gap:0}
.bd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--w-s-4)}
@media(max-width:520px){.bd-grid2{grid-template-columns:1fr}}
.bd-form .w-field{margin-bottom:var(--w-s-4)}
.bd-form .w-input{padding:13px 15px;font-size:16px}
/* interest segmented radio */
.bd-choice{display:flex;flex-wrap:wrap;gap:10px}
.bd-choice__opt{position:relative;flex:1 1 auto;display:flex}
.bd-choice__opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.bd-choice__opt span{flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:11px 14px;border-radius:var(--w-r-md);white-space:nowrap;
  font-size:var(--w-fs-sm);font-weight:var(--w-fw-medium);color:var(--w-text-2);
  background:var(--w-glass-fill-soft);border:1px solid var(--w-glass-line);
  transition:background var(--w-dur) var(--w-ease),border-color var(--w-dur) var(--w-ease),color var(--w-dur) var(--w-ease)}
.bd-choice__opt input:hover+span{border-color:var(--w-glass-line-bright);color:var(--w-text)}
.bd-choice__opt input:checked+span{background:var(--w-charcoal);color:#fff;border-color:transparent;font-weight:var(--w-fw-semi);
  box-shadow:0 8px 18px -8px rgba(28,26,36,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.bd-choice__opt input:focus-visible+span{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.bd-submit{margin-top:var(--w-s-2)}
.bd-help{margin-top:var(--w-s-3);justify-content:center}
.bd-help .w-icon{color:var(--w-success)}
/* required marker */
.bd-req{color:var(--w-danger);font-weight:var(--w-fw-semi);margin-left:2px}
/* form footer — 30-minute call · No commitment · Custom walkthrough */
.bd-formfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:9px 13px;margin-top:var(--w-s-4);padding-top:var(--w-s-4);
  border-top:1px solid var(--w-line)}
.bd-formfoot__item{display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:var(--w-fw-medium);color:var(--w-text-2);white-space:nowrap}
.bd-formfoot__item .w-icon{width:14px;height:14px;flex:none;color:var(--w-success)}
/* validation states */
.bd-err{display:none;margin-top:6px;color:var(--w-danger)}
.bd-err .w-icon{width:13px;height:13px;flex:none;color:var(--w-danger)}
.w-field--error>.bd-err{display:flex}
.w-field--error .bd-choice__opt span{border-color:var(--w-danger)}
.w-field--ok .w-input{border-color:var(--w-success)}
/* success panel — OVERLAYS the fields on a valid submit (card keeps its size, no section shift) */
.bd-success{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  padding:var(--w-s-6);background:var(--w-card);border-radius:var(--w-r-2xl)}
.bd-form.is-sent .bd-success{display:flex}
.bd-form.is-sent .bd-form__fields,.bd-form.is-sent .bd-submit,.bd-form.is-sent .bd-help,.bd-form.is-sent .bd-formfoot{visibility:hidden}
.bd-success__ic{width:52px;height:52px;border-radius:var(--w-r-full);display:inline-flex;align-items:center;justify-content:center;
  background:var(--w-success-soft);color:var(--w-success);margin-bottom:var(--w-s-2)}
.bd-success__ic .w-icon{width:26px;height:26px}
.bd-success__t{font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);color:var(--w-text)}
.bd-success__s{font-size:var(--w-fs-sm);color:var(--w-text-2);max-width:38ch;line-height:1.5}

/* ===== §2 · WHAT HAPPENS — W-HOME overview card (photo top + caption) · hover = lift + charcoal ===== */
.bd-steps{align-items:stretch}
.bd-step{display:flex;flex-direction:column;height:clamp(430px,42vw,540px);
  border-radius:var(--w-r-2xl);overflow:hidden;background:#f3f3f3;border:0;
  box-shadow:0 12px 34px -20px rgba(28,26,36,.2);
  transition:transform .55s cubic-bezier(.16,1,.3,1),background .45s ease,box-shadow .5s ease}
.bd-step__img{position:relative;flex:1;margin:14px 14px 0;border-radius:var(--w-r-xl);overflow:hidden;background:var(--w-bg-deep);isolation:isolate}
.bd-step__img-inner{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 26%;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
/* DIM — dark overlay on top of the photo */
.bd-step__img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,24,.34),rgba(18,16,24,.50));transition:opacity .5s ease}
/* FILM GRAIN — standard fractal-noise texture on top (overlay blend, isolated to the card) */
.bd-step__img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.5;background-repeat:repeat;background-size:130px 130px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.bd-step__cap{padding:18px 22px 22px;min-height:112px}
.bd-step__t{display:block;font-size:1.12rem;font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  color:var(--w-charcoal);transition:color .45s ease}
.bd-step__s{display:block;margin-top:6px;font-size:var(--w-fs-sm);line-height:1.45;
  color:rgba(28,26,36,.62);transition:color .45s ease}
/* hover: lift + card turns CHARCOAL + text → white (matches W-HOME overview) */
@media (hover:hover){
  .bd-step:hover{transform:translateY(-10px);background:var(--w-charcoal);box-shadow:0 32px 58px -22px rgba(28,26,36,.45)}
  .bd-step:hover .bd-step__t{color:#fff}
  .bd-step:hover .bd-step__s{color:rgba(255,255,255,.72)}
  .bd-step:hover .bd-step__img-inner{transform:scale(1.05)}
  .bd-step:hover .bd-step__img::before{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .bd-step,.bd-step__t,.bd-step__s,.bd-step__img-inner,.bd-step__img::before{transition:none}
  .bd-step:hover{transform:none}.bd-step:hover .bd-step__img-inner{transform:none}
}

/* ===== §3 · REASSURANCE / PROOF ===== */
.bd-trust{margin-bottom:clamp(40px,5vw,64px)}
.bd-trust .w-trust-label{margin-bottom:var(--w-s-5)}
/* canonical trust marquee (DS7-Web §8) sits on a .cz-light BAND while html is
   data-theme=dark, so the default white-invert filter makes the marks invisible —
   force the dark-logo treatment here (mirrors the foundation light-theme rule) */
.cz-light .w-marquee__item{filter:grayscale(1) brightness(0);opacity:.5}
.cz-light .w-marquee__lockup i{filter:grayscale(1) brightness(0);opacity:.5}
.cz-light .w-marquee__lockup b{color:rgba(28,26,36,0.62)}
.bd-quote{max-width:720px;margin-inline:auto;align-items:center;text-align:center;gap:var(--w-s-4);padding:clamp(28px,3.4vw,44px)}
.bd-quote__mark{width:40px;height:40px;color:#ffffff;opacity:.5}
.bd-quote__mark svg{width:40px;height:40px;fill:currentColor;stroke:none}
.bd-quote__body{font-size:var(--w-fs-h4);line-height:var(--w-lh-snug);font-weight:var(--w-fw-medium);color:#ffffff;max-width:52ch}
.bd-quote__metric{align-self:center}
.bd-quote__foot{display:flex;align-items:center;justify-content:center;gap:var(--w-s-3);margin-top:var(--w-s-2)}
.bd-quote__av{width:46px;height:46px;flex:none;border-radius:var(--w-r-full);background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18)}
.bd-quote__id{display:flex;flex-direction:column;gap:1px;text-align:left}
.bd-quote__id b{font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:#ffffff}
.bd-quote__id small{font-size:var(--w-fs-xs);color:rgba(255,255,255,0.6)}

/* --- §3 review FAN: Lauren front (hero), 6 reviews receding to both edges · FULL-BLEED --- */
.bd-stage{position:relative;width:100%;min-height:540px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-top:clamp(64px,7vw,108px);margin-bottom:var(--w-s-4)}
.bd-stage .bd-quote{position:relative;z-index:10;width:min(472px,86vw);max-width:none;margin:0}
.bd-rev{position:absolute;top:50%;left:50%;opacity:0;transform:translate(-50%,-50%) scale(.6);
  width:352px;max-width:84vw;padding:22px 24px;border-radius:22px;display:flex;flex-direction:column;gap:12px;text-align:left;
  background:linear-gradient(160deg,rgba(28,26,36,.06),rgba(28,26,36,.015)),#f6f6f9;border:1px solid rgba(28,26,36,.12);
  box-shadow:0 -9px 24px rgba(28,26,36,.05),0 16px 34px rgba(28,26,36,.10),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(28,26,36,.05);
  transition:transform .9s cubic-bezier(.2,.72,.24,1),opacity .55s ease;will-change:transform,opacity}
.bd-rev__qi{width:22px;height:22px;fill:rgba(28,26,36,.22);stroke:none;flex:none}
.bd-rev__q{font-size:13.5px;line-height:1.5;color:var(--w-charcoal);font-weight:500;margin:0}
.bd-rev__by{display:flex;align-items:center;gap:10px;margin-top:auto}
.bd-rev__av{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 6px -2px rgba(28,26,36,.2)}
.bd-rev__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.bd-rev__meta b{font-size:13.5px;font-weight:700;color:var(--w-charcoal)}
.bd-rev__meta small{font-size:12px;color:rgba(28,26,36,.55)}
.bd-rev--li{z-index:6}.bd-rev--ri{z-index:6}.bd-rev--lm{z-index:5}.bd-rev--rm{z-index:5}.bd-rev--lo{z-index:4}.bd-rev--ro{z-index:4}
.bd-stage.is-visible .bd-rev{opacity:1}
.bd-stage.is-visible .bd-rev--li{transform:translate(-50%,-50%) translateX(-232px) translateY(-26px) rotate(-3deg);transition-delay:.14s}
.bd-stage.is-visible .bd-rev--ri{transform:translate(-50%,-50%) translateX(232px) translateY(-26px) rotate(3deg);transition-delay:.14s}
.bd-stage.is-visible .bd-rev--lm{transform:translate(-50%,-50%) translateX(-462px) translateY(-66px) rotate(-6deg);transition-delay:.26s}
.bd-stage.is-visible .bd-rev--rm{transform:translate(-50%,-50%) translateX(462px) translateY(-66px) rotate(6deg);transition-delay:.26s}
.bd-stage.is-visible .bd-rev--lo{transform:translate(-50%,-50%) translateX(-690px) translateY(-116px) rotate(-9deg);transition-delay:.38s}
.bd-stage.is-visible .bd-rev--ro{transform:translate(-50%,-50%) translateX(690px) translateY(-116px) rotate(9deg);transition-delay:.38s}
@media(prefers-reduced-motion:reduce){.bd-rev{transition:none}}
/* ≤1024: no room to fan — flow the hero + reviews as a clean vertical stack */
@media(max-width:1024px){
  .bd-stage{flex-direction:column;min-height:0;overflow:visible;margin-top:var(--w-s-7);gap:var(--w-s-4)}
  .bd-stage .bd-quote{width:min(560px,92vw)}
  .bd-rev{position:static;opacity:1;transform:none;width:min(560px,92vw);max-width:92vw;transition:none}
  .bd-stage.is-visible .bd-rev{transform:none}
}
.bd-trustline{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:clamp(36px,4.5vw,56px);
  font-size:var(--w-fs-sm);font-weight:var(--w-fw-medium);color:var(--w-text-2);text-align:center}
.bd-trustline .w-icon{width:17px;height:17px;flex:none;color:var(--w-success)}

/* ===== §4 · ALT PATHS (2-up cards) ===== */
.bd-alt{gap:var(--w-s-4)}
.bd-alt__actions{margin-top:auto;padding-top:var(--w-s-2);display:flex;flex-wrap:wrap;gap:var(--w-s-3)}
.bd-alt__actions .w-btn--glass{min-width:0}
/* dark image-background variant (CTAbg) — used on "Not ready for a demo?" */
.bd-alt--bg{position:relative;overflow:hidden;isolation:isolate;border:0;background:var(--w-charcoal);
  box-shadow:0 18px 44px -22px rgba(28,26,36,.5)}
.bd-alt--bg::before{content:"";position:absolute;inset:0;z-index:0;background:var(--w-img-ctabg) center/cover no-repeat;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.bd-alt--bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(125deg,rgba(8,7,12,.74) 0%,rgba(8,7,12,.32) 52%,rgba(8,7,12,.66) 100%)}
.bd-alt--bg>*{position:relative;z-index:2}
.bd-alt--bg .w-card__title{color:#fff}
.bd-alt--bg .w-card__icon{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.bd-alt--bg .w-btn--glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bd-alt--bg .w-btn--glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
@media (hover:hover){.bd-alt--bg:hover::before{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.bd-alt--bg::before{transition:none}.bd-alt--bg:hover::before{transform:none}}