/* ============ W-EXPERTS-PRODUCT-TOUR page styles — tokens only, no raw brand hex ============
   Content ported verbatim from the 2.0 "Product Tour" page (/product-tour/), rebuilt on
   DS7-Web components. This is the thinnest page in the Experts+ family by design: the
   Navattic tour IS the content, so the spine is deliberately lean —
   hero -> discover -> tour -> named proof -> CTA.

   Section shapes pattern-lifted from the Experts+ family:
   centered hero + trust row (how-it-works.css) · w-grid/w-card (ds7.css) ·
   ebk-quote proof card + w-cta-band (experts-booking.css / ds7.css) ·
   progress rail lifted from 2.0 .tour-progress, restyled on DS7 tokens.
   Theme rhythm: light 1-2 -> DARK 3 (the tour) -> light 4-5.
   ========================================================================================= */

/* ===== 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-badge{box-shadow:0 2px 10px rgba(12,10,22,.12), inset 0 1px 0 var(--w-glass-rim-top)}

/* ───────────── §1 HERO — centered; the tour is the visual ─────────────
   NB on padding (Jeff, 2026-07-27): this hero originally carried the Experts+ family's
   standard `clamp(88px,6rem + 4vw,152px)` top pad — byte-identical to ebk/cri/eh. It read
   as far too much HERE because the siblings are two-column heroes whose right-hand visual
   fills that space, while this one is a single centered column that opens on a small badge.
   Same token, different composition. Cut to a centered-hero-appropriate value. */
.ept-hero{position:relative;overflow:hidden;
  padding-block:clamp(56px,3.5rem + 2.4vw,96px) clamp(36px,3vw + 0.75rem,64px)}
.ept-hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.ept-hero__inner>*{max-width:100%}

/* badge carries an inline duration chip, split by a hairline (2.0 .duration) */
.ept-hero__badge{gap:8px}
.ept-hero__dur{display:inline-flex;align-items:center;padding-left:8px;margin-left:2px;
  border-left:1px solid var(--w-line-strong);color:var(--w-text-3);font-variant-numeric:tabular-nums}

.ept-hero__inner .w-display{font-size:clamp(2.1rem,1rem + 3.1vw,3.6rem);line-height:1.06;
  margin-top:var(--w-s-5);max-width:20ch;text-wrap:balance}
.ept-hero__inner .w-lead{margin-top:var(--w-s-4);max-width:62ch}

/* NB: 2.0's `.trust-badge` row ("+30% avg. improvement in close rates | Trusted by 200+ B2B
   teams") was REMOVED at Jeff's request (2026-07-27). The hero now ends on the lead. */

/* ───────────── §3 THE TOUR — light band, pulsing brand glow ─────────────
   Jeff (2026-07-27): the dark beat was dropped in favour of 2.0's glowing, breathing
   brand stroke on a light surface. The ring is the masked-gradient recipe from 2.0's
   `.tour-wrapper::before`; the breathing halo is an animated box-shadow on the frame
   (NOT a blurred ::after with z-index:-1 — that would paint behind the section's own
   background and disappear on a light band). Brand alpha comes from color-mix on the
   token, never a raw hex. */
.ept-tour__frame{position:relative;max-width:1100px;margin-inline:auto;
  padding:6px;border-radius:var(--w-r-2xl);background:var(--w-card);
  animation:ept-glow 3.8s ease-in-out infinite}
/* brand rim (2.0 .tour-wrapper::before) — masked ring, no fill */
.ept-tour__frame::before{content:'';position:absolute;inset:0;border-radius:var(--w-r-2xl);
  padding:2px;background:var(--w-grad-brand);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:ept-ring 3.8s ease-in-out infinite}
.ept-tour__card{position:relative;border-radius:calc(var(--w-r-2xl) - 6px);overflow:hidden;
  background:var(--w-bg)}

@keyframes ept-ring{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}
@keyframes ept-glow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--w-brand) 30%, transparent),
                     0 18px 44px -14px color-mix(in srgb, var(--w-brand) 34%, transparent)}
  50%    {box-shadow:0 0 0 16px color-mix(in srgb, var(--w-brand) 10%, transparent),
                     0 28px 72px -14px color-mix(in srgb, var(--w-brand) 55%, transparent)}
}
@media (prefers-reduced-motion:reduce){
  .ept-tour__frame,.ept-tour__frame::before{animation:none}
  .ept-tour__frame{box-shadow:0 16px 40px -16px color-mix(in srgb, var(--w-brand) 26%, transparent)}
  .ept-tour__frame::before{opacity:.8}
}
.ept-tour__embed{display:block;width:100%;aspect-ratio:16 / 9;border:0}
/* A strict 16:9 box gets too short to actually walk a product tour in well before mobile:
   ~180px at 360, and still only ~391px at 768. Floor the height wherever 16:9 would fall
   under it — Navattic letterboxes its own capture inside the taller frame. The cutoff is
   900px because that is roughly where a 16:9 container first clears 420px. */
@media (max-width:900px){
  .ept-tour__embed{min-height:420px}
}

/* progress rail (2.0 .tour-progress) — static chapter marks under the embed */
.ept-steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:8px;padding:14px clamp(12px,2vw,20px);
  background:var(--w-grad-surface);border-top:1px solid var(--w-line)}
.ept-step{display:flex;align-items:center;gap:6px;
  font-size:var(--w-fs-xs);color:var(--w-text-3);line-height:1.2;white-space:nowrap}
.ept-step.is-on{color:var(--w-brand);font-weight:var(--w-fw-semi)}
.ept-step__dot{width:8px;height:8px;flex:none;border-radius:var(--w-r-full);background:var(--w-brand-soft);
  box-shadow:inset 0 0 0 1px var(--w-brand-line)}
.ept-step.is-on .ept-step__dot{background:var(--w-grad-brand);box-shadow:var(--w-glow-brand)}
.ept-step__line{width:24px;height:2px;flex:none;border-radius:var(--w-r-full);background:var(--w-line-strong)}

@media (max-width:700px){
  .ept-steps{gap:6px 10px}
  .ept-step__line{display:none}
}

/* NB: the Jon Studham quote card (PROOF_LIBRARY Q-3) was REMOVED at Jeff's request
   (2026-07-27), along with the 3-up discover row and 2.0's hero trust-badge row. The page
   is now hero → tour → CTA. See the tracker for the attribution consequence: with the
   quote gone, the H1's "30% More Deals" no longer has an attributed counterpart anywhere
   on the page. */

/* ───────────── §3 FINAL CTA — band + inline proof row ───────────── */
.ept-cta .w-cta-band__title{max-width:22ch}
.ept-cta__proof{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:var(--w-s-3) clamp(18px,2.6vw,34px)}
.ept-cta__proof li{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--w-fs-sm);color:var(--w-text-2);line-height:1.3}
.ept-cta__proof li b{font-weight:var(--w-fw-bold);color:var(--w-text)}
.ept-cta__proof .w-icon{width:16px;height:16px;flex:none;color:var(--w-brand)}

@media (max-width:560px){
  .ept-cta__proof{flex-direction:column;align-items:flex-start;text-align:left;
    width:fit-content;margin-inline:auto}
}