/* Daniel page — "Double the Success with Cashier + Daniel at the Counter" section.
   Scoped prefixes: dsc- (the scroll viewer) and dst- (a step panel).
   The section is a centred stack: heading, three industry pills (QSR / Fashion Store / Retail
   Entertainment) that swap the storyline on hover, then the 5 journey steps.

   2026-07-23 (round 2): the steps are no longer flat baked images. Every step is now REAL HTML —
   number badge, title, card heading and card body are live text; only the photography comes from
   image assets (Barista "scene" shots + the Menu customer/product cutouts) and the badge icons,
   which were extracted from the design template into assets/images/daniel-steps/. */

/* ---------- section layout: centred single column (was a 2-col title/copy grid) ---------- */
@media (min-width:768px){
  body.daniel-page .fl-builder-content .dbb-demo > .fl-row-content-wrap .fl-col-content{
    display:block !important;
  }
  body.daniel-page .fl-builder-content .dbb-demo .fl-module.dbb-demo-title,
  body.daniel-page .fl-builder-content .dbb-demo .fl-module.dbb-demo-copy,
  body.daniel-page .fl-builder-content .dbb-demo .fl-module.dbb-demo-cardmod{
    grid-column:auto; grid-row:auto;
  }
}
body.daniel-page .fl-builder-content .dbb-demo-title.fl-heading-text{
  text-align:center !important; margin:0 auto 22px !important; max-width:900px;
}
/* storyline: the BLOCK is centred under the heading + pills, but the lines inside stay
   left-aligned (ragged right) — centring every line reads badly for a paragraph. */
body.daniel-page .fl-builder-content .dbb-demo .fl-module.dbb-demo-copy{
  max-width:880px; margin:0 auto 4px; padding:0; text-align:left;
}
body.daniel-page .fl-builder-content .dbb-demo .dbb-demo-copy p{ max-width:none; text-align:left; }

/* ---------- industry pills ---------- */
.dan-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px; margin:0 0 26px; padding:0;
}
.dan-tab{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family:var(--serif,'Fraunces',serif); font-style:italic; font-weight:600;
  font-size:clamp(16px,1.35vw,19px); line-height:1;
  color:#fff; background:var(--pink-deep,#7A1536);
  border:2px solid var(--pink-deep,#7A1536); border-radius:999px;
  padding:15px 34px; letter-spacing:.2px;
  box-shadow:0 8px 20px -10px rgba(122,21,54,.55);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dan-tab:hover,
.dan-tab:focus-visible{ background:#8d1740; transform:translateY(-1px); outline:none; }
.dan-tab.is-active{
  background:var(--pink-deep,#7A1536);
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--pink-deep,#7A1536), 0 10px 24px -12px rgba(122,21,54,.6);
}

/* ---------- storyline swap ---------- */
.dbb-demo-copy .dan-story{ animation:dan-storyIn .35s ease both; }
@keyframes dan-storyIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Guard: if Beaver Builder ever republishes the OLD spinning-ring markup into this section, hide
   its leftover elements so there's no dashed-arc flash before daniel-scroll.js rebuilds the cards. */
body.daniel-page .dbb-demo .dsc-arc,
body.daniel-page .dbb-demo .dsc-ring,
body.daniel-page .dbb-demo .dsc-backdrop,
body.daniel-page .dbb-demo .dsc-scene { display:none !important; }

/* ---------- step viewer: sticky card stack (same technique as the Nicole "how it works" section) ----------
   All 5 panels sit in normal flow, each position:sticky at the SAME top. As you scroll, each later
   card slides up and COVERS the previous one, revealing them one after another — and it reverses for
   free on scroll-up. Pure CSS, no JS scroll handler. The panels must stay OPAQUE (they do: #F7EBF4)
   and no ancestor may be overflow:hidden (forced further down). */
.dsc-wrapper{ position:relative; }
/* Each card is pinned at top:128px (72px sticky header + breathing room), so its height must fit in
   the remaining viewport or the bottom gets cut off while it's stuck. The panel height is driven by
   its WIDTH (fixed-aspect scene photo), so cap the stage width by the available height too. */
.dsc-stage{ width:100%; max-width:min(1392px, calc((100vh - 170px) * 1.9)); margin:0 auto; }

/* A sticky card stays pinned only while its containing block's CONTENT box still has room below it
   — padding on the container does NOT count. Without trailing content the LAST card never reaches
   the pin line and step 5 never gets its moment, so this empty spacer supplies that room. While it
   scrolls past, card 5 sits pinned over it, so it doesn't read as blank space. */
.dst-tail{ height:clamp(160px, 42vh, 420px); }

/* ---------- a step panel ---------- */
.dst-step{ display:block; position:sticky; top:128px; margin-bottom:clamp(28px,3.4vw,56px); }

.dst-panel{
  background:#F7EBF4; border-radius:30px;
  padding:clamp(26px,3.2vw,46px) clamp(24px,3.6vw,54px) clamp(30px,3.6vw,52px);
  box-shadow:0 40px 80px -50px rgba(60,10,30,.45);
}
.dst-head{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 clamp(20px,2.4vw,34px); }
.dst-num{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:26px; padding:0 9px; border-radius:999px;
  background:var(--pink-deep,#7A1536); color:#fff;
  font-family:var(--sans,'Geist',sans-serif); font-size:12px; font-weight:600; letter-spacing:.4px;
}
.dst-title{
  margin:0; font-family:var(--serif,'Fraunces',serif); font-weight:400;
  font-size:clamp(18px,2.1vw,30px); line-height:1.2; color:var(--pink-deep,#7A1536);
}

/* photo left, floating card overlapping its right edge (as in the design) */
.dst-body{ position:relative; }
/* proportions measured off the design: photo 64% of the content box, card 40% anchored to the
   right edge — so the card overlaps the photo's right edge by ~4%, as in the template. */
.dst-scene{ display:block; width:64%; height:auto; border-radius:20px; }
.dst-card{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:40%; background:#fff; border-radius:22px;
  padding:clamp(14px,1.5vw,22px) clamp(15px,1.6vw,24px);
  box-shadow:0 20px 44px -20px rgba(60,10,30,.30);
}
.dst-card-head{ display:flex; align-items:center; gap:11px; margin:0 0 clamp(10px,1.1vw,16px); }
.dst-ic{ flex:none; width:clamp(30px,3vw,44px); height:auto; }
.dst-card-title{
  margin:0; font-family:var(--serif,'Fraunces',serif); font-weight:400;
  font-size:clamp(15px,1.6vw,23px); line-height:1.1; color:var(--pink-deep,#7A1536);
}

/* shared card bits */
.dst-row{ display:flex; gap:clamp(10px,1.1vw,16px); align-items:flex-start; }
.dst-photo{ flex:none; width:clamp(58px,6.2vw,92px); height:auto; border-radius:10px; }
.dst-photo--sq{ border-radius:12px; align-self:center; }
.dst-fill{ flex:1 1 auto; min-width:0; font-family:var(--sans,'Geist',sans-serif); }
.dst-name{ margin:0; font-size:clamp(12px,1.15vw,16px); font-weight:700; color:#171316; }
.dst-sub{ margin:2px 0 0; font-size:clamp(11px,1.05vw,15px); color:#444; }
.dst-meta{ margin:clamp(8px,1vw,16px) 0 0; font-size:clamp(10px,.95vw,14px); color:#666; }

/* green confirmation strip */
.dst-ok{
  display:flex; align-items:center; gap:9px; margin-top:clamp(10px,1.1vw,16px);
  background:#E7F5EB; border-radius:12px; padding:clamp(7px,.8vw,12px) clamp(9px,1vw,14px);
  font-family:var(--sans,'Geist',sans-serif); font-size:clamp(10px,1vw,15px); color:#2C7A3F; font-weight:500;
}
.dst-ok svg{ flex:none; width:clamp(14px,1.4vw,20px); height:auto; }
.dst-ok .dst-avatar{ margin-left:auto; flex:none; width:clamp(24px,2.6vw,38px); height:auto; border-radius:50%; }

/* card 2 — segment list */
.dst-list{ display:flex; flex-direction:column; gap:clamp(8px,1vw,15px); }
.dst-li{ display:flex; align-items:center; gap:10px; }
.dst-mini{
  flex:none; width:clamp(22px,2.3vw,34px); height:clamp(22px,2.3vw,34px);
  border-radius:50%; background:#FAEAF2; padding:5px; box-sizing:border-box;
}
.dst-li b{ display:block; font-size:clamp(10px,1vw,14px); color:#171316; font-weight:700; }
.dst-li span{ display:block; font-size:clamp(10px,.98vw,14px); color:#555; }

/* card 3 — suggestion */
.dst-prod-name{ margin:0; font-size:clamp(12px,1.2vw,17px); font-weight:700; color:#171316; line-height:1.25; }
.dst-prod-desc{ margin:4px 0 0; font-size:clamp(10px,.98vw,14px); color:#555; line-height:1.45; }
.dst-add{
  display:inline-flex; align-items:center; gap:6px; margin-top:clamp(6px,.8vw,11px);
  background:var(--pink-deep,#7A1536); color:#fff; border-radius:999px;
  padding:clamp(4px,.5vw,7px) clamp(9px,1vw,14px);
  font-family:var(--sans,'Geist',sans-serif); font-size:clamp(9px,.92vw,13px); font-weight:500;
}
.dst-add svg{ width:clamp(9px,.95vw,13px); height:auto; }
.dst-rec{ margin:clamp(10px,1.1vw,16px) 0 0; }
.dst-rec b{ display:block; font-size:clamp(11px,1.1vw,16px); color:#171316; }
.dst-rec span{ display:block; margin-top:2px; font-size:clamp(10px,.98vw,14px); color:#555; }

/* card 4 — pitch quotes */
.dst-quote{ margin:0; font-size:clamp(10px,1vw,14px); color:#444; line-height:1.5; }
.dst-quote + .dst-quote{ margin-top:clamp(8px,1vw,14px); }
.dst-quote b{ color:var(--pink-deep,#7A1536); }

/* card 5 — receipt */
.dst-bill{ width:100%; font-family:var(--sans,'Geist',sans-serif); font-size:clamp(9px,.95vw,14px); color:#444; }
.dst-bill div{ display:flex; justify-content:space-between; gap:12px; padding:2px 0; }
.dst-bill .dst-rule{ display:block; border-top:1px solid #E7E1E4; margin:clamp(4px,.5vw,8px) 0; padding:0; }
.dst-bill .dst-total{ font-weight:700; color:var(--pink-deep,#7A1536); font-size:clamp(10px,1.05vw,15px); padding-top:2px; }

/* ---------- mobile: cards stack under each other, card panel below the photo ---------- */
@media (max-width:820px){
  .dsc-stage{ max-width:100%; }
  /* on phones a card is taller than the viewport, so pinning it would hide its bottom —
     let them flow normally instead of sticking. */
  .dst-step{ position:static; margin-bottom:22px; }
  .dst-tail{ display:none; }   /* nothing is sticky here, so the spacer would just be dead space */
  .dst-head{ justify-content:flex-start; }
  .dst-body{ display:block; }
  .dst-scene{ width:100%; }
  .dst-card{
    position:static; transform:none; width:100%; margin-top:-26px; padding:18px;
  }
  .dst-photo{ width:76px; }
  .dan-tab{ padding:13px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .dbb-demo-copy .dan-story{ animation:none; }
  .dan-tab{ transition:none; }
}

/* sticky needs no clipping ancestor inside the demo section */
body.daniel-page .dbb-demo,
body.daniel-page .dbb-demo .fl-row-content-wrap,
body.daniel-page .dbb-demo .fl-row-content,
body.daniel-page .dbb-demo .fl-col-content,
body.daniel-page .dbb-demo .fl-module.dbb-demo-cardmod{ overflow:visible !important; }

/* Christina intro copy — soft gray body text, keep the "Daniel changes that:" accent */
body.daniel-page .fl-builder-content .dbb-demo .fl-rich-text p { color:rgba(23,19,22,.6) !important; }
body.daniel-page .fl-builder-content .dbb-demo .fl-rich-text .it { color:var(--pink) !important; -webkit-text-fill-color:var(--pink) !important; font-style:italic; }