/* ============ W-EXPERTS-BOOKING page styles — tokens only, no raw brand hex ============
   Content ported verbatim from the 2.0 "Expert Booking System" page (/expert-booking/),
   rebuilt on DS7-Web components. Section shapes pattern-lifted from the Experts+ family:
   eh-hero2c two-column hero (how-it-works.css) · w-timeline (how-it-works.css) ·
   cri-tabs/cri-pane tab split + cri-sec asymmetric split (experts-crm-integration.css) ·
   w-grid/w-card + w-stat-grid + w-cta-band (ds7.css).
   Theme rhythm: light 1-3 -> DARK 4 -> light 5-8.
   ==================================================================================== */

/* shared avatars canonical ds7.css does not declare — page-scoped, images already shared */
:root{
  --w-img-av-lauren:url("/assets/images/w/av-lauren.webp");
  --w-img-av-jon:url("/assets/images/w/av-jon.webp");
}

/* ===== light-band technique (.cz-light) — WHITE variant (verbatim from sibling Experts+ pages) ===== */
.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(96px, 6rem + 5vw, 168px) clamp(72px, 5vw + 2rem, 128px)}
.w-badge{box-shadow:0 2px 10px rgba(12,10,22,.12), inset 0 1px 0 var(--w-glass-rim-top)}
.w-panel-rise{--w-panel-overlap:34px}

/* ───────────── §1 HERO — copy LEFT · booking view RIGHT ───────────── */
.ebk-hero{position:relative;background:#f1f0ee;overflow:hidden;
  padding-block:clamp(88px,6rem + 4vw,152px) clamp(56px,5vw + 1rem,104px)}
.ebk-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.ebk-hero__grid>*{min-width:0}
.ebk-hero__copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ebk-hero__copy .w-display{font-size:clamp(2.1rem,1rem + 2.9vw,3.35rem);line-height:1.06;margin-top:var(--w-s-5)}
.ebk-hero__copy .w-lead{margin-top:var(--w-s-4);max-width:52ch}
/* hero stat trio — left-aligned inline row with dividers */
.ebk-hero__stats{justify-content:flex-start;gap:0;margin-top:var(--w-s-6);flex-wrap:wrap}
.ebk-hero__stats .w-stat{padding:0 clamp(16px,1.5vw,22px);border-left:1px solid var(--w-line-strong)}
.ebk-hero__stats .w-stat:first-child{padding-left:0;border-left:0}
.ebk-hero__stats .w-stat__value{font-size:clamp(26px,1.4vw + 1rem,38px)}
/* `--brand` paints the value through -webkit-background-clip:text, so the gradient box is the
   element box: any glyph past it renders UNPAINTED (overflow:visible doesn't help — there is
   simply no paint out there). The shared .w-stat sizes its value to a fixed width, which
   silently swallowed the tail of longer word-values. Size the paint box to the text. */
.ebk-hero__stats .w-stat__value{width:max-content}
.ebk-hero__cta{margin-top:var(--w-s-6)}
/* right-side visual */
.ebk-hero__visual{border-radius:var(--w-r-2xl);overflow:hidden;border:1px solid var(--w-line);
  box-shadow:var(--w-shadow-lg);background:var(--w-glass-fill)}
.ebk-hero__visual img{display:block;width:100%;height:auto}

@media (max-width:860px){
  .ebk-hero__grid{grid-template-columns:1fr;gap:clamp(28px,6vw,42px)}
  .ebk-hero__copy{align-items:center;text-align:center}
  .ebk-hero__stats{justify-content:center}
  .ebk-hero__cta{justify-content:center}
  .ebk-hero__visual{order:-1;max-width:560px;margin-inline:auto;width:100%}
  /* the copy column centers below 860 — the value's max-content box would otherwise hug the
     left edge while its label stayed centered. */
  .ebk-hero__stats .w-stat__value{margin-inline:auto}
}
@media (max-width:520px){
  .ebk-hero__stats .w-stat{flex-basis:100%;padding:12px 0;border-left:0;border-top:1px solid var(--w-line)}
  .ebk-hero__stats .w-stat:first-child{border-top:0;padding-top:0}
}

/* ───────────── §2 ROI BAND — 4-up counters ───────────── */
.ebk-roi{padding-top:0}
.ebk-roi .w-stat-grid{gap:var(--w-s-4) 0}
.ebk-roi .w-stat__value{font-size:clamp(32px,1.7vw + 1.2rem,50px)}
.ebk-roi .w-stat__label{max-width:22ch}
@media (max-width:820px){
  .ebk-roi .w-stat{flex:1 1 42%;min-width:150px}
  .ebk-roi .w-stat:nth-child(3){border-left:none}
}
@media (max-width:600px){
  .ebk-roi .w-stat{flex:1 1 45%;min-width:130px;border-left:none;padding:var(--w-s-3) var(--w-s-2)}
}

/* ───────────── §3 HOW IT WORKS — animated w-timeline (lifted from how-it-works.css) ───────────── */
.ebk-tl .w-timeline{list-style:none;margin:clamp(40px,5vw,64px) auto 0;padding:0;max-width:720px;position:relative}
/* faint unfilled rail */
.w-timeline::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--w-line-strong)}
.w-timeline__item{position:relative;padding:0 0 clamp(26px,3vw,40px) clamp(40px,5vw,52px)}
.w-timeline__item:last-child{padding-bottom:0}
/* dot = drawing ring + popping filled center */
.w-timeline__dot{position:absolute;left:0;top:4px;width:24px;height:24px;z-index:2}
.w-timeline__dot::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--w-brand);
  box-shadow:0 0 0 4px var(--w-bg);transform:scale(.28);opacity:0;transition:transform .42s var(--w-ease),opacity .3s ease}
.w-timeline__dot.is-on::before{transform:scale(1);opacity:1}
.w-timeline__ring{position:absolute;inset:0;width:24px;height:24px;overflow:visible}
.w-timeline__ring circle{fill:none;stroke:var(--w-brand);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:63;stroke-dashoffset:63;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .55s var(--w-ease)}
.w-timeline__dot.is-on .w-timeline__ring circle{stroke-dashoffset:0}
/* connecting segment — grows from this dot down to the next */
.w-timeline__line{position:absolute;left:10px;top:26px;bottom:-2px;width:2px;border-radius:2px;background:var(--w-brand);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--w-ease);z-index:1}
.w-timeline__line.is-on{transform:scaleY(1)}
.w-timeline__item:last-child .w-timeline__line{display:none}
@media (prefers-reduced-motion:reduce){
  .w-timeline__dot::before{transform:scale(1);opacity:1}
  .w-timeline__ring circle{stroke-dashoffset:0}
  .w-timeline__line{transform:scaleY(1)}
}
.w-timeline__card{padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,24px);border-radius:var(--w-r-xl);
  background:var(--w-glass-fill);border:1px solid var(--w-line);box-shadow:var(--w-shadow-sm)}
.w-timeline__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.w-timeline__day{font-family:var(--w-font-mono);font-size:var(--w-fs-sm);font-weight:700;letter-spacing:.05em;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.w-timeline__chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--w-r-pill);
  background:var(--w-brand-soft);border:1px solid var(--w-brand-line);color:var(--w-brand);font:600 12px/1 var(--w-font)}
.w-timeline__chip svg{width:13px;height:13px}
.w-timeline__title{margin-top:11px;font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text)}
.w-timeline__body{margin-top:7px;font-size:var(--w-fs-body);line-height:1.6;color:var(--w-text-2);max-width:56ch}

/* ───────────── §4 CORE FEATURES — dark beat ───────────── */
.ebk-feat{background:var(--w-bg)}
.ebk-feat .w-card{gap:var(--w-s-4)}

/* ───────────── §5 MATCHING — criteria panel LEFT · copy RIGHT ───────────── */
.ebk-match__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(32px,5vw,72px);align-items:center}
.ebk-match__grid>*{min-width:0}
.ebk-match__copy{display:flex;flex-direction:column;align-items:flex-start}
.ebk-match__copy .w-section-head__title{margin-top:var(--w-s-5);text-align:left}
.ebk-match__copy .w-p{margin-top:var(--w-s-4);max-width:48ch}
.ebk-match__checks{display:flex;flex-direction:column;gap:var(--w-s-4);margin-top:var(--w-s-6)}
.ebk-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--w-fs-body);line-height:var(--w-lh-normal);color:var(--w-text-2)}
.ebk-check .w-icon{width:19px;height:19px;flex:none;margin-top:2px;color:var(--w-brand-2)}
.ebk-check b{color:var(--w-text);font-weight:var(--w-fw-semi)}

/* criteria configurator panel */
.ebk-crit{display:flex;flex-direction:column;gap:var(--w-s-4);
  padding:clamp(18px,2vw,26px);border-radius:var(--w-r-2xl);
  background:var(--w-glass-fill-strong);border:1px solid var(--w-glass-line);
  -webkit-backdrop-filter:var(--w-glass-blur-lg);backdrop-filter:var(--w-glass-blur-lg);
  box-shadow:inset 0 1.5px 0 var(--w-glass-rim-top), var(--w-shadow-lg)}
.ebk-crit__head{display:flex;align-items:center;gap:var(--w-s-3);
  padding-bottom:var(--w-s-4);border-bottom:1px solid var(--w-line-soft)}
.ebk-crit__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ebk-crit__tx b{font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);color:var(--w-text);line-height:1.2}
.ebk-crit__tx i{font-style:normal;font-size:var(--w-fs-xs);color:var(--w-text-3);line-height:1.3}
.ebk-crit__group{display:flex;flex-direction:column;gap:9px}
.ebk-crit__label{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;color:var(--w-text-3)}
.ebk-crit__tags{display:flex;flex-wrap:wrap;gap:7px}
.ebk-crit__tag{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--w-r-pill);
  font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);line-height:1.35;color:var(--w-text-2);
  background:var(--w-glass-fill-soft);border:1px solid var(--w-line-soft)}
.ebk-crit__tag.is-on{color:var(--w-brand);background:var(--w-brand-soft);border-color:var(--w-brand-line)}
.ebk-crit__foot{display:flex;align-items:center;gap:var(--w-s-3);
  padding-top:var(--w-s-4);border-top:1px solid var(--w-line-soft)}
.ebk-crit__score{font-size:clamp(28px,1.5vw + 1rem,38px);font-weight:300;line-height:1;letter-spacing:-0.02em;flex:none;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

@media (max-width:900px){
  .ebk-match__grid{grid-template-columns:1fr;gap:var(--w-s-7)}
  .ebk-crit{order:2}
  .ebk-match__copy{order:1}
}

/* ───────────── §6 USE CASES — tab rail + copy/screenshot split ───────────── */
.ebk-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:var(--w-s-7);
  padding:6px;border-radius:var(--w-r-pill);width:fit-content;margin-inline:auto;
  background:var(--w-glass-fill-soft);border:1px solid var(--w-glass-line)}
.ebk-tab{appearance:none;border:0;cursor:pointer;font-family:var(--w-font);
  font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-text-2);
  padding:10px 20px;border-radius:var(--w-r-pill);background:transparent;
  transition:color var(--w-dur) var(--w-ease),background var(--w-dur) var(--w-ease)}
.ebk-tab:hover{color:var(--w-text)}
.ebk-tab.is-on{color:var(--w-cta-text);background:var(--w-cta-fill);box-shadow:var(--w-cta-glow)}
.ebk-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-brand-soft)}

.ebk-pane[hidden]{display:none}
.ebk-pane__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4vw,64px);align-items:center}
.ebk-pane__grid>*{min-width:0}
.ebk-pane__grid--rev .ebk-pane__copy{order:2}
.ebk-pane__grid--rev .ebk-shot{order:1}
.ebk-pane__t{margin:0;font-size:var(--w-fs-h3);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  line-height:var(--w-lh-snug);color:var(--w-text)}
.ebk-pane__lead{margin:var(--w-s-4) 0 0;font-size:var(--w-fs-lead);line-height:var(--w-lh-normal);color:var(--w-text-2);max-width:48ch}
.ebk-pane__pts{display:flex;flex-direction:column;gap:var(--w-s-3);margin-top:var(--w-s-5)}
.ebk-pane__pts .ebk-check{font-size:var(--w-fs-sm)}
.ebk-pane__pts .ebk-check .w-icon{width:17px;height:17px;margin-top:1px}
.ebk-pane__cta{margin-top:var(--w-s-6)}

.ebk-shot{border-radius:var(--w-r-2xl);overflow:hidden;border:1px solid var(--w-line);
  box-shadow:var(--w-shadow-lg);background:var(--w-glass-fill)}
.ebk-shot img{display:block;width:100%;height:auto}

@media (max-width:900px){
  .ebk-pane__grid{grid-template-columns:1fr;gap:var(--w-s-6)}
  .ebk-pane__grid--rev .ebk-pane__copy,.ebk-pane__grid--rev .ebk-shot{order:0}
}
@media (max-width:480px){
  /* keep all three on one row at 360 — the default 20px side padding + 14px type overflows
     the track and drops "For Operations" onto a second, off-centre line. */
  .ebk-tabs{width:100%;justify-content:stretch;flex-wrap:nowrap;gap:3px;padding:4px}
  .ebk-tab{flex:1 1 0;min-width:0;padding:9px 4px;font-size:12.5px;text-align:center;white-space:nowrap}
}

/* ───────────── §7 SOCIAL PROOF — stat + quote cards ───────────── */
.ebk-quote{gap:var(--w-s-4)}
.ebk-quote__metric{margin:0;font-size:var(--w-fs-sm);line-height:var(--w-lh-snug);color:var(--w-text-2)}
.ebk-quote__v{display:block;margin-bottom:4px;font-size:clamp(34px,2vw + 1.2rem,48px);font-weight:300;
  line-height:1;letter-spacing:-0.02em;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ebk-quote__q{margin:0;font-family:var(--w-font-serif);font-style:italic;
  font-size:var(--w-fs-body);line-height:var(--w-lh-normal);color:var(--w-text)}
.ebk-quote__by{margin-top:auto;padding-top:var(--w-s-4);display:flex;align-items:center;gap:var(--w-s-3);
  border-top:1px solid var(--w-line-soft)}
.ebk-quote__av{flex:none;width:44px;height:44px;border-radius:var(--w-r-full);
  background:var(--w-card-lo) center/cover no-repeat;box-shadow:0 0 0 2px rgba(28,26,36,.08)}
.ebk-quote__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.ebk-quote__id b{font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);color:var(--w-text);line-height:1.2}
.ebk-quote__id small{font-size:var(--w-fs-xs);color:var(--w-text-3);line-height:1.3}

/* ───────────── §8 FINAL CTA ───────────── */
.ebk-cta .w-cta-band__title{max-width:20ch}