/* Public Staff App page only. Every rule is scoped to .staff-feature-page. The page base, hero, type scale,
   dark band, section labels, reveals and related/FAQ/CTA come from feature-story.css. */

/* The hero is a hand holding the phone on the app's Home tab as Ava's page arrives (tools/feature-screenshots/
   staff-app/hero.mjs), on a pure black backdrop, so the band is black too and the photo's left edge disappears into
   it. On narrow screens a square crop centres the phone (it sits 72% across the photo, so the photo is 1/0.56 = 179%
   of the box wide) and the photo's full height fills the box. */
.staff-feature-page .story-hero{background:#000;}
@media(max-width:1000px){
  .staff-feature-page{--story-hero-crop:1/1;--story-hero-crop-top:0%;--story-hero-crop-width:179%;}
}

/* Phone frame. Placeholders sit on the app's own gold background so the page reads as the product even
   before real screenshots are supplied. */
.staff-feature-page .staff-phone{position:relative;width:100%;max-width:280px;aspect-ratio:9 / 19.5;margin:0 auto;padding:9px;border-radius:40px;background:#1c1d1c;box-shadow:var(--story-frame-shadow),inset 0 0 0 1px #3a3c39;}
.staff-feature-page .staff-phone::before{content:"";position:absolute;top:17px;left:50%;z-index:1;width:30%;height:20px;border-radius:12px;background:#1c1d1c;transform:translateX(-50%);}
/* A real screenshot sets the frame's height itself, so nothing is cropped off its sides. */
.staff-feature-page .staff-phone:not(.staff-phone--placeholder){aspect-ratio:auto;}
.staff-feature-page .staff-phone picture{display:block;}
.staff-feature-page .staff-phone img{display:block;width:100%;height:auto;border-radius:31px;}
.staff-feature-page .staff-phone__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:24px;border-radius:31px;background:#f6e7c3 url("../images/AuraStaffBackground.png") center / cover no-repeat;color:var(--story-ink);text-align:center;}
.staff-feature-page .staff-phone__placeholder strong{font-size:var(--story-text-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.staff-feature-page .staff-phone__placeholder span{padding:5px 12px;border:1px dashed #a48a52;border-radius:999px;color:#6d5a2e;font-size:var(--story-text-label);font-weight:500;}

/* A heading on the left, its paragraph on the right, bottoms aligned. */
.staff-feature-page .staff-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,90px);align-items:end;}
.staff-feature-page .staff-split > p{margin:0;max-width:var(--story-measure);font-size:var(--story-text-body);}

/* The pager: why it exists, beside the notification itself. */
.staff-feature-page .staff-pager{padding:var(--story-section-space) 0;}
.staff-feature-page .staff-pager__layout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,7vw,90px);align-items:center;}
.staff-feature-page .staff-pager__copy h2{max-width:520px;}
.staff-feature-page .staff-pager__copy p:not(.story-label){max-width:var(--story-measure);margin:24px 0 0;color:var(--story-body-muted);font-size:var(--story-text-body);}
.staff-feature-page .staff-pager__visual{margin:0;}

/* How a page reaches them: three steps across the kit's dark band. */
.staff-feature-page .staff-sequence h2{max-width:470px;color:#fff;}
.staff-feature-page .staff-sequence__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:clamp(36px,4vw,52px) 0 0;padding:0;list-style:none;}
.staff-feature-page .staff-sequence__steps li{display:block;padding:24px 0 0;border:0;border-top:1px solid #3a3a3a;}
.staff-feature-page .staff-sequence__steps span{display:block;width:auto;height:auto;margin:0 0 18px;border:0;border-radius:0;background:none;color:#dcc58f;font-size:var(--story-text-label);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.staff-feature-page .staff-sequence__steps strong{display:block;max-width:320px;font-size:var(--story-text-small);font-weight:500;line-height:1.6;}

/* A day in the app: a scroll tour of the tabs. */
.staff-feature-page .staff-screens{padding:var(--story-section-space) 0;}
/* The intro is left-aligned to the tour's left edge, where the steps' copy starts, rather than centred. */
.staff-feature-page .staff-screens .story-intro-head{max-width:920px;text-align:left;}
.staff-feature-page .staff-screens .story-intro-head > p{margin-left:0;}
/* frontpage.css sets overflow-x:hidden on html and body, which makes body a scroll container that never scrolls
   and so stops position:sticky. clip still stops sideways scrolling without creating one. */
html:has(> body.staff-feature-page),body.staff-feature-page{overflow-x:clip;}
/* The tour: the steps on the left, one pinned phone on the right (partials/staff-app-story.html). Without the
   script each step shows its own phone under its copy; with it (.is-enhanced) the steps' phones hide, each step
   gets most of a screen's height to scroll through, and the pinned phone shows the step at the viewport's middle.
   --tour-phone keeps the whole phone on screen on short windows. */
.staff-feature-page .staff-tour{--tour-phone:min(300px,calc((100vh - 150px) * .46));}
.staff-feature-page .staff-tour__steps{margin:0;padding:0;list-style:none;}
.staff-feature-page .staff-tour__step{display:grid;gap:28px;padding:32px 0;border-top:1px solid var(--story-line);}
.staff-feature-page .staff-tour__copy{max-width:440px;}
.staff-feature-page .staff-tour__tab{margin:0 0 12px;color:#806426;font-size:var(--story-text-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.staff-feature-page .staff-tour__tab span{margin-right:10px;color:var(--story-muted);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.staff-feature-page .staff-tour__step h3{margin:0 0 12px;font-size:var(--story-text-h2-sm);font-weight:500;line-height:1.25;letter-spacing:-.035em;}
.staff-feature-page .staff-tour__step p:not(.staff-tour__tab){margin:0;color:var(--story-body-muted);font-size:var(--story-text-body);}
.staff-feature-page .staff-tour__inline{margin:0;}
.staff-feature-page .staff-tour__inline .staff-phone{max-width:240px;margin:0;}
.staff-feature-page .staff-tour__stage{display:none;}

.staff-feature-page .staff-tour.is-enhanced{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,96px);max-width:920px;margin:0 auto;}
.staff-feature-page .staff-tour.is-enhanced .staff-tour__inline{display:none;}
.staff-feature-page .staff-tour.is-enhanced .staff-tour__step{min-height:72vh;align-content:center;padding:0;border-top:0;}
.staff-feature-page .staff-tour.is-enhanced .staff-tour__stage{display:block;position:sticky;top:max(88px,calc(50vh - var(--tour-phone) * 1.08 + 32px));align-self:start;width:var(--tour-phone);}
.staff-feature-page .staff-tour__phone{display:grid;max-width:none;}
.staff-feature-page .staff-tour__screen{grid-area:1 / 1;display:block;opacity:0;}
.staff-feature-page .staff-tour__screen.is-active{opacity:1;}
/* With motion allowed the script sets each screen's and step's opacity from the scroll position itself
   (.is-scroll-linked), so there is no transition to lag behind the scroll. */
.staff-feature-page .staff-tour.is-scroll-linked .staff-tour__screen{will-change:opacity;}

/* What the app handles: hairline-topped cells, like Turn Manager's controls. */
.staff-feature-page .staff-capabilities{padding:var(--story-section-space) 0 0;border-top:1px solid var(--story-line);background:#fff;}
.staff-feature-page .staff-capabilities__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;}
.staff-feature-page .staff-capabilities .feature-capability{min-height:0;padding:26px 0;border:0;border-top:1px solid var(--story-line);border-radius:0;background:none;box-shadow:none;}
.staff-feature-page .staff-capabilities .feature-capability i{display:block;margin-bottom:14px;color:#806426;font-size:1.3rem;}
.staff-feature-page .staff-capabilities .feature-capability h3{margin:0 0 8px;font-size:var(--story-text-small);font-weight:600;line-height:1.45;}
.staff-feature-page .staff-capabilities .feature-capability p{margin:0;color:var(--story-body-muted);font-size:var(--story-text-small);line-height:1.7;}
.staff-feature-page .staff-capabilities__note{margin:12px 0 0;padding-top:24px;border-top:1px solid var(--story-line);color:var(--story-muted);font-size:var(--story-text-small);}

@media(max-width:1000px){
  .staff-feature-page .staff-capabilities__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .staff-feature-page .staff-tour{--tour-phone:min(40vw,calc((100vh - 150px) * .46));}
  .staff-feature-page .staff-tour.is-enhanced{gap:20px;}
  .staff-feature-page .staff-tour.is-enhanced .staff-tour__step{min-height:60vh;}
  .staff-feature-page .staff-split,.staff-feature-page .staff-pager__layout{grid-template-columns:1fr;gap:24px;}
  .staff-feature-page .staff-pager__visual .staff-phone{max-width:220px;}
  .staff-feature-page .staff-sequence__steps{grid-template-columns:1fr;gap:0;margin-top:28px;}
  .staff-feature-page .staff-sequence__steps li{display:grid;grid-template-columns:26px 1fr;align-items:start;gap:20px;padding:20px 0;}
  .staff-feature-page .staff-sequence__steps span{margin:3px 0 0;}
  .staff-feature-page .staff-sequence__steps strong{max-width:none;}
  .staff-feature-page .staff-phone{padding:6px;border-radius:28px;}
  .staff-feature-page .staff-phone::before{top:12px;height:14px;}
  .staff-feature-page .staff-phone img,.staff-feature-page .staff-phone__placeholder{border-radius:22px;}
  .staff-feature-page .staff-phone__placeholder{padding:12px;}
  .staff-feature-page .staff-phone__placeholder strong{font-size:.8rem;}
  .staff-feature-page .staff-phone__placeholder span{font-size:.62rem;}
  .staff-feature-page .staff-capabilities__grid{grid-template-columns:1fr;}
}