/* Shared building blocks for bespoke feature pages that opt in with `sharedStory: true`
   (the page gets the .feature-story-page body class and this file before its own stylesheet).
   Pages keep their own layout and may override any token below. */
.feature-story-page{
  --story-section-space:clamp(64px,8vw,104px);
  --story-frame-shadow:0 18px 44px rgba(34,34,34,.08);
  --story-button-radius:3px;
  --story-body-muted:#4a4a4a;
  --story-ink:#222723;
  --story-muted:#5d625c;
  --story-line:#d9dcd4;
  --story-focus:#876b2f;
  /* One type scale for every story page (root 16px). Pages map roles to these, never raw sizes.
     label: kickers, eyebrows, small caps  |  small: cards, details, FAQ, CTA subtitle
     body: section intros and copy          |  lede: the hero paragraph  |  button: CTAs and inputs */
  --story-text-h1:clamp(2.75rem,4.6vw,4.25rem);
  --story-text-h2:clamp(2rem,3.2vw,2.875rem);
  --story-text-h2-sm:2rem;
  --story-text-h3:1.25rem;
  --story-text-lede:1.1875rem;
  --story-text-body:1.125rem;
  --story-text-small:1.0625rem;
  --story-text-button:1rem;
  --story-text-label:.8125rem;
  /* Paragraph measure: ~66 characters at body size. */
  --story-measure:40rem;
  /* Where the hero photo's product sits (see .story-hero). These fit Appointment Book and Check-in; Turn Manager sets its own. */
  --story-hero-ratio:1.3;--story-hero-crop:3/2;--story-hero-crop-top:-15%;--story-hero-crop-width:150%;
  --feature-ink:var(--story-ink);--feature-muted:var(--story-muted);
  background:#fff;color:var(--story-ink);
}
/* Page base: the 1200px shell, Montserrat headings, the section h2, body line height, and one gold focus ring
   (dark bands set --story-focus to the light gold, ~9:1 there; #876b2f is only ~3:1 on them). */
.feature-story-page .feature-shell{width:min(1200px,calc(100% - 80px));}
.feature-story-page :is(h1,h2,h3){font-family:"Montserrat",sans-serif;text-wrap:balance;}
.feature-story-page h2{margin:0;font-size:var(--story-text-h2);font-weight:500;line-height:1.2;letter-spacing:-.045em;color:inherit;}
.feature-story-page main p{line-height:1.8;}
.feature-story-page main :is(a,button,input,summary):focus-visible{outline:3px solid var(--story-focus);outline-offset:5px;}
.feature-story-page .feature-contact-cta__form input:focus-visible{outline:none;}

/* Hero: a dark band, the copy on the left, and the product photo as a real <picture> (srcset + fetchpriority).
   Wide screens: the photo sits in a right-anchored box that always shows its full height, faded in from the left,
   and the band grows with the viewport (capped at 720px). --story-hero-ratio is that box's width/height: the
   product's span from the photo's right edge plus room for the fade. Narrow screens: the photo sits under the copy,
   cropped in on the product: --story-hero-crop is the box's aspect ratio, -top and -width place the photo in it. */
.feature-story-page .story-hero{--story-focus:#dcc58f;position:relative;padding:clamp(48px,6vw,84px) 0;overflow:hidden;background:#222;color:#fff;}
.feature-story-page .story-hero .feature-shell{position:relative;z-index:1;}
.feature-story-page .story-hero__art img{display:block;}
@media(min-width:1001px){
  .feature-story-page .story-hero{display:flex;flex-direction:column;justify-content:center;min-height:clamp(600px,40vw,720px);}
  .feature-story-page .story-hero__art{position:absolute;top:0;right:0;bottom:0;aspect-ratio:var(--story-hero-ratio);-webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%);}
  .feature-story-page .story-hero__art img{width:100%;height:100%;object-fit:cover;object-position:right center;}
}
/* Very wide screens: keep the art within a 1600px frame near the copy; fade the right edge too. */
@media(min-width:1601px){
  .feature-story-page .story-hero__art{right:calc((100% - 1600px) / 2);-webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 22%,#000 95%,transparent);}
}
.feature-story-page .story-hero__intro{width:42%;max-width:520px;}
.feature-story-page .story-hero .feature-eyebrow{margin:0 0 22px;color:rgba(255,255,255,.72);font-size:var(--story-text-label);font-weight:600;letter-spacing:.15em;}
.feature-story-page .story-hero h1{margin:0;color:#fff;font-size:var(--story-text-h1);font-weight:500;line-height:1.08;letter-spacing:-.055em;}
.feature-story-page .story-hero__lede{margin:24px 0 28px;max-width:480px;color:rgba(255,255,255,.86);font-size:var(--story-text-lede);}
.feature-story-page .story-hero .feature-hero-actions{gap:22px;}
/* Also carries .feature-button (inline-flex, centred, the hover lift this cancels). */
.feature-story-page .story-demo{min-height:50px;padding:12px 20px;border:1px solid #fff;border-radius:var(--story-button-radius);background:#fff;color:var(--story-ink);font-size:var(--story-text-button);font-weight:600;}
.feature-story-page .story-demo:hover{background:#ececec;transform:none;}
.feature-story-page .story-explore{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#fff;font-size:var(--story-text-button);text-decoration:underline;text-underline-offset:5px;}

/* Product screenshots: one quiet frame for every image (partials/feature-visual.html). The screenshot
   itself is the link to the full-size image; a corner icon says so. The focus ring goes on the frame,
   since the frame clips its contents. Pages on dark bands set --story-focus to the light gold. */
.feature-story-page .feature-visual{display:block;min-width:0;max-width:100%;margin:0;border:1px solid var(--story-line);border-radius:6px;background:#fff;overflow:hidden;box-shadow:var(--story-frame-shadow);}
.feature-story-page .feature-visual__zoom{position:relative;display:block;background:#fff;cursor:zoom-in;}
.feature-story-page .feature-visual img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;border-radius:0;}
.feature-story-page .feature-visual__zoom-icon{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--story-line);border-radius:50%;background:rgba(255,255,255,.94);color:var(--story-ink);box-shadow:0 2px 8px rgba(34,34,34,.12);opacity:.78;}
.feature-story-page .feature-visual__zoom:is(:hover,:focus-visible) .feature-visual__zoom-icon{opacity:1;}
.feature-story-page .feature-visual__zoom:focus-visible{outline:none;}
.feature-story-page .feature-visual:has(.feature-visual__zoom:focus-visible){outline:3px solid var(--story-focus);outline-offset:4px;}
/* Product clips (a video with a pause/play button) are styled in frontpage.css, since the home page uses them too. */
@supports not selector(:has(*)){
  .feature-story-page .feature-visual__zoom:focus-visible{outline:3px solid var(--story-focus);outline-offset:-3px;}
}
@media(prefers-reduced-motion:no-preference){
  .feature-story-page .feature-visual__zoom-icon{transition:opacity .16s ease,transform .16s ease;}
  .feature-story-page .feature-visual__zoom:is(:hover,:focus-visible) .feature-visual__zoom-icon{transform:scale(1.08);}
}

/* A centred heading + intro above a full-width product visual (Turn Manager board, Appointment Book clip).
   Left-aligned on phones: a centred multi-line paragraph is harder to scan there. */
.feature-story-page .story-intro-head{max-width:760px;margin:0 auto clamp(32px,4vw,52px);text-align:center;}
.feature-story-page .story-intro-head > p{max-width:var(--story-measure);margin:18px auto 0;color:var(--story-body-muted);font-size:var(--story-text-body);}
@media(max-width:760px){
  .feature-story-page .story-intro-head{text-align:left;}
  .feature-story-page .story-intro-head > p{margin-left:0;}
}

/* Section kicker: small gold caps above a section's h2. */
.feature-story-page p.story-label{margin:0 0 20px;color:#806426;font-size:var(--story-text-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}

/* A step rail (Check-in, Smart Checkout): one row per step, a marker on the rail, then copy, then screenshot. */
.feature-story-page .story-rail{margin:0;padding:0;list-style:none;}
.feature-story-page .story-moment{position:relative;display:grid;grid-template-columns:72px minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(22px,3vw,48px);align-items:start;padding-bottom:clamp(44px,6vw,72px);}
.feature-story-page .story-moment:last-child{padding-bottom:0;}
/* The rail: a segment from each marker down to the next. With motion it draws down as its step reveals. */
.feature-story-page .story-moment:not(:last-child)::before{content:"";position:absolute;top:18px;bottom:-18px;left:35px;width:1px;background:var(--story-line);transform-origin:top;}
@media(prefers-reduced-motion:no-preference){
  .js .feature-story-page .story-moment::before{transform:scaleY(0);transition:transform .9s ease .2s;}
  .js .feature-story-page .story-moment:has(> .is-visible)::before{transform:none;}
}
.feature-story-page .story-moment__time{position:relative;z-index:1;justify-self:center;min-width:58px;padding:8px 0;border:1px solid var(--story-line);border-radius:3px;background:#fff;color:#806426;font-size:var(--story-text-label);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:center;}
.feature-story-page .story-moment h3{margin:0 0 12px;font-size:var(--story-text-h3);font-weight:600;line-height:1.5;letter-spacing:-.02em;}
.feature-story-page .story-moment p{margin:0;max-width:var(--story-measure);color:var(--story-body-muted);font-size:var(--story-text-body);}
/* Portrait screenshots get a fixed width so every step is about the same height; the zoom icon moves to the
   bottom corner, since their titles run to the top one. */
.feature-story-page .story-visual--portrait{width:min(100%,280px);}
.feature-story-page .story-visual--portrait .feature-visual__zoom-icon{top:auto;bottom:12px;}
/* Phones and small tablets: the marker stays on the rail, copy and screenshot stack beside it. */
@media(max-width:900px){
  .feature-story-page .story-moment{grid-template-columns:48px minmax(0,1fr);gap:20px 14px;}
  .feature-story-page .story-moment:not(:last-child)::before{left:23px;}
  .feature-story-page .story-moment__time{min-width:48px;padding:6px 0;}
  .feature-story-page .story-moment > :not(.story-moment__time){grid-column:2;}
}

/* A mid-page dark band: neutral greys (R=G=B) matching the hero's #222. */
.feature-story-page .story-dark{--story-focus:#dcc58f;padding:var(--story-section-space) 0;background:#222;color:#fff;}
.feature-story-page .story-dark .story-label{color:#dcc58f;}
.feature-story-page .story-dark p:not(.story-label){color:#d4d4d4;}
.feature-story-page .story-dark .feature-visual{border-color:#3a3a3a;}
/* Short titled facts in a dark band, two columns (one on phones), each under a hairline. */
.feature-story-page .story-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:36px 0 0;}
.feature-story-page .story-facts div{padding-top:16px;border-top:1px solid #3a3a3a;}
.feature-story-page .story-facts dt{margin:0 0 6px;font-size:var(--story-text-small);font-weight:600;}
.feature-story-page .story-facts dd{margin:0;color:#d4d4d4;font-size:var(--story-text-small);line-height:1.7;}
@media(max-width:760px){.feature-story-page .story-facts{grid-template-columns:1fr;}}

/* Scroll reveals (scripts/frontpage/reveal.js; base styles in frontpage.css): a shorter rise and no blur
   (blur is costly on large screenshots). A revealed element right after another starts a beat later, so
   rows and side-by-side pairs arriving together stagger. */
@media(prefers-reduced-motion:no-preference){
  .js .feature-story-page .reveal-on-scroll{transform:translateY(24px);filter:none;transition:opacity .6s ease var(--reveal-delay,0s),transform .6s ease var(--reveal-delay,0s);}
  .js .feature-story-page .reveal-on-scroll.is-visible,.js .feature-story-page .reveal-on-scroll:focus-within{transform:none;}
  .feature-story-page .reveal-on-scroll + .reveal-on-scroll{--reveal-delay:70ms;}
  .feature-story-page .reveal-on-scroll + .reveal-on-scroll + .reveal-on-scroll{--reveal-delay:140ms;}
}
/* Dividers draw in left to right once their row (or the row around/inside them) is revealed: the 1px
   border turns transparent and the same line is painted as a growing background. Dark bands set
   --story-divider. With reduced motion or no JS the plain border stays. */
@media(prefers-reduced-motion:no-preference){
  .js .feature-story-page :is(.turn-details > div,.turn-walkthrough + .turn-walkthrough .turn-walkthrough__grid,.turn-control-group,.appt-highlights article,.appt-creation-steps li,.appt-tools + .appt-feature > .feature-shell,.appt-feature + .appt-feature > .feature-shell,.feature-related-card){border-top-color:transparent;background-image:linear-gradient(var(--story-divider,var(--story-line)),var(--story-divider,var(--story-line)));background-position:left top;background-size:0 1px;background-repeat:no-repeat;background-origin:border-box;transition:opacity .6s ease var(--reveal-delay,0s),transform .6s ease var(--reveal-delay,0s),background-size .8s ease calc(var(--reveal-delay,0s) + .1s);}
  .js .feature-story-page :is(.turn-details > div,.turn-walkthrough + .turn-walkthrough .turn-walkthrough__grid,.turn-control-group,.appt-highlights article,.appt-creation-steps li,.appt-tools + .appt-feature > .feature-shell,.appt-feature + .appt-feature > .feature-shell,.feature-related-card):is(.is-visible,.is-visible *,:has(.is-visible)){background-size:100% 1px;}
}

/* Lightbox (partials/feature-lightbox.html). */
.feature-story-page .feature-lightbox{width:fit-content;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:0;border-radius:6px;background:#fff;color:var(--story-ink);overflow:auto;overscroll-behavior:contain;}
.feature-story-page .feature-lightbox::backdrop{background:rgba(20,22,20,.8);}
.feature-story-page .feature-lightbox__bar{position:sticky;top:0;left:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 8px 8px 18px;border-bottom:1px solid var(--story-line);background:#fff;}
.feature-story-page .feature-lightbox__caption{margin:0;font-size:.8rem;line-height:1.6;color:var(--story-muted);}
.feature-story-page .feature-lightbox__bar form{margin:0;}
.feature-story-page .feature-lightbox__close{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--story-line);border-radius:3px;background:#fff;color:var(--story-ink);font-size:1.5rem;line-height:1;}
.feature-story-page .feature-lightbox__close:hover{background:#f2f2f2;}
.feature-story-page .feature-lightbox__close:focus-visible{outline:3px solid #876b2f;outline-offset:2px;}
.feature-story-page .feature-lightbox img{display:block;max-width:none;height:auto;}

/* Related features, FAQ and the closing CTA: the same on every story page (previously copied per page). */
.feature-story-page .feature-related-section{padding:var(--story-section-space) 0 48px;}
.feature-story-page .feature-related-section h2{margin:0 0 22px;font-size:var(--story-text-h3);font-weight:600;letter-spacing:-.02em;}
.feature-story-page .feature-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
.feature-story-page .feature-related-card{min-height:0;align-content:start;padding:20px 0;border:0;border-top:1px solid var(--story-line);border-radius:0;gap:10px 20px;}
.feature-story-page .feature-related-card:hover{box-shadow:none;color:#7c612c;}
.feature-story-page .feature-related-card span{color:var(--story-muted);font-size:var(--story-text-label);letter-spacing:.07em;}
.feature-story-page .feature-related-card strong{font-size:var(--story-text-small);font-weight:500;}
/* The features hub's cards: the kit's framed panel, gold icon and label, then the card copy at kit sizes. */
.feature-story-page .feature-hub-grid-section{padding:var(--story-section-space) 0;background:#fff;}
.feature-story-page .feature-card-grid{row-gap:56px;}
.feature-story-page .feature-card__media{aspect-ratio:4/3;gap:18px;border:1px solid var(--story-line);border-radius:6px;box-shadow:var(--story-frame-shadow);color:var(--story-ink);}
.feature-story-page .feature-card__media i{color:#876b2f;font-size:3.25rem;}
.feature-story-page .feature-card__media span{font-size:var(--story-text-label);font-weight:600;letter-spacing:.07em;}
.feature-story-page .feature-card__body h2{margin:0 0 12px;font-size:var(--story-text-h3);line-height:1.35;letter-spacing:-.02em;}
.feature-story-page .feature-card__body p:not(.feature-card__eyebrow){margin:0 0 22px;color:var(--story-muted);font-size:var(--story-text-small);line-height:1.8;}
.feature-story-page .feature-text-link{font-size:var(--story-text-button);font-weight:500;}
.feature-story-page .feature-faq-section{padding:40px 0 70px;}
.feature-story-page .feature-faq-layout{grid-template-columns:1fr 1.7fr;gap:64px;}
.feature-story-page .feature-faq-layout h2{max-width:320px;font-size:var(--story-text-h2-sm);}
.feature-story-page .feature-faq-item summary{padding:20px 4px;font-size:var(--story-text-small);font-weight:500;line-height:1.6;}
.feature-story-page .feature-faq-item p{font-size:var(--story-text-small);}
.feature-story-page .feature-cta-section{padding:0 0 var(--story-section-space);background:#fff;}
/* On white, a hairline plus space marks the CTA as the close of the page. */
.feature-story-page .feature-contact-cta{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;text-align:left;border-top:1px solid var(--story-line);padding-top:var(--story-section-space);}
.feature-story-page .feature-contact-cta h2{grid-column:1;grid-row:1;margin:0;font-size:var(--story-text-h2);}
.feature-story-page .feature-contact-cta h2 > span{display:block;}
.feature-story-page .feature-contact-cta__accent{color:#82682f;}
.feature-story-page .feature-contact-cta > p{grid-column:1;grid-row:2;margin:18px 0 0;font-size:var(--story-text-small);color:var(--story-muted);}
.feature-story-page .feature-contact-cta__form{grid-column:2;grid-row:1 / span 2;align-self:center;grid-template-columns:minmax(0,1fr) auto;width:100%;padding:4px;border-color:#b6bbae;}
.feature-story-page .feature-contact-cta__form input{min-height:52px;padding:12px;font-size:var(--story-text-button);}
.feature-story-page .feature-contact-cta__form button{min-height:52px;padding:12px 20px;border:0;border-radius:var(--story-button-radius);background:var(--story-ink);font-size:var(--story-text-button);font-weight:500;letter-spacing:0;text-transform:none;}
.feature-story-page .feature-contact-cta__form button:hover,
.feature-story-page .feature-contact-cta__form button:focus-visible{background:#41483d;color:#fff;}

@media(max-width:1000px){
  .feature-story-page .feature-shell{width:calc(100% - 48px);}
  .feature-story-page .story-hero{padding-bottom:0;}
  .feature-story-page .story-hero__art{position:relative;display:block;margin-top:clamp(24px,5vw,40px);aspect-ratio:var(--story-hero-crop);overflow:hidden;}
  .feature-story-page .story-hero__art img{position:absolute;right:0;top:var(--story-hero-crop-top);width:var(--story-hero-crop-width);max-width:none;height:auto;}
  .feature-story-page .story-hero__intro{width:100%;max-width:720px;}
  .feature-story-page .feature-contact-cta{grid-template-columns:1fr;gap:0;}
  .feature-story-page .feature-contact-cta__form{grid-column:1;grid-row:3;max-width:600px;margin:26px 0 0;}
  .feature-story-page .feature-faq-layout{gap:32px;}
}
@media(max-width:760px){
  .feature-story-page{--story-section-space:56px;--story-text-h1:clamp(2.5rem,9vw,3.5rem);--story-text-h2-sm:1.75rem;--story-text-h3:1.125rem;--story-text-lede:1.125rem;--story-text-body:1.0625rem;--story-text-small:1rem;--story-hero-crop:4/3;--story-hero-crop-top:-18%;--story-hero-crop-width:170%;}
  .feature-story-page .feature-shell{width:calc(100% - 40px);}
  .feature-story-page .story-hero{padding-top:44px;}
  .feature-story-page .story-hero__lede{max-width:none;}
  .feature-story-page .feature-related-grid{grid-template-columns:1fr;gap:0;}
  .feature-story-page .feature-related-section{padding-bottom:20px;}
  .feature-story-page .feature-faq-layout{grid-template-columns:1fr;gap:24px;}
  .feature-story-page .feature-faq-layout h2{max-width:none;}
  .feature-story-page .feature-faq-section{padding:24px 0 44px;}
  .feature-story-page .feature-contact-cta__form{grid-template-columns:1fr;gap:4px;}
}
@media(prefers-reduced-motion:reduce){.feature-story-page *,.feature-story-page *::before,.feature-story-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}