/* Public Appointment Book page only. Every rule is scoped to .appointment-feature-page.
   White throughout except the dark hero and the "Build every appointment" band. The page base, the hero (its
   default placement fits this laptop photo: x 725-1560, y 230-800 in the 1672x941 source), section rhythm, the
   type scale, screenshot frames, the lightbox and the related/FAQ/CTA sections come from feature-story.css
   (this page opts in with sharedStory: true); the values here mirror the Turn Manager page. */
.appointment-feature-page .appt-kicker{margin:0 0 20px;color:#806426;font-size:var(--story-text-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}

/* The daily schedule, directly under the hero: heading and subtext above the full-width book (as on
   Turn Manager); its explanation follows without a divider. */
.appointment-feature-page .appt-product-intro{padding:var(--story-section-space) 0 clamp(40px,5vw,64px);background:#fff;scroll-margin-top:80px;}
.appointment-feature-page .appt-split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start;}
.appointment-feature-page .appt-split > p{margin:0;max-width:var(--story-measure);color:var(--story-body-muted);font-size:var(--story-text-body);}
.appointment-feature-page .appt-read-schedule{padding:0 0 var(--story-section-space);}
.appointment-feature-page .appt-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:36px;}
.appointment-feature-page .appt-highlights article{padding-top:24px;border-top:1px solid var(--story-line);}
.appointment-feature-page :is(.appt-highlights,.appt-creation-steps) h3{margin:0 0 10px;font-size:var(--story-text-h3);font-weight:600;line-height:1.5;letter-spacing:-.02em;}
.appointment-feature-page .appt-highlights p{margin:0;color:var(--story-body-muted);font-size:var(--story-text-small);line-height:1.75;}

/* The one dark band: neutral greys (R=G=B) matching the hero's #222; #6c6c6c is the lightest line at 3:1. */
.appointment-feature-page .appt-create{--story-focus:#dcc58f;--appt-dark-muted:#d4d4d4;--appt-dark-line:#6c6c6c;--story-divider:var(--appt-dark-line);padding:var(--story-section-space) 0;background:#222;color:#fff;}
.appointment-feature-page .appt-create .appt-kicker{color:#dcc58f;}
.appointment-feature-page .appt-create h2{color:#fff;}
.appointment-feature-page .appt-create .appt-split > p{color:var(--appt-dark-muted);align-self:end;}
.appointment-feature-page .appt-create .feature-visual{margin-top:40px;border-color:#3a3a3a;}
.appointment-feature-page .appt-creation-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;list-style:none;padding:0;margin:40px 0 0;}
.appointment-feature-page .appt-creation-steps li{display:grid;grid-template-columns:26px 1fr;gap:16px;border-top:1px solid var(--appt-dark-line);padding-top:24px;}
.appointment-feature-page .appt-creation-steps li > span{font-size:var(--story-text-label);color:#dcc58f;padding-top:3px;}
.appointment-feature-page .appt-creation-steps p{margin:0;color:var(--appt-dark-muted);font-size:var(--story-text-small);line-height:1.75;}

/* Service History, Text, Check-In: three screenshot cards after the dark band. The images are cropped
   near 5:4; the frame fixes that ratio so the headings below line up. */
.appointment-feature-page .appt-tools{padding:var(--story-section-space) 0;}
.appointment-feature-page .appt-tools__head{max-width:760px;margin:0 0 44px;}
.appointment-feature-page .appt-tools__head > p:not(.appt-kicker){margin:18px 0 0;max-width:var(--story-measure);color:var(--story-body-muted);font-size:var(--story-text-body);}
.appointment-feature-page .appt-tools__grid{display:grid;grid-template-columns:minmax(0,560px);gap:48px;}
/* Three across only where each card is wide enough (~350px+) for the screenshot text to stay legible.
   Subgrid lines up image, heading and text across the row; without it the cards simply stack their parts. */
@media(min-width:1180px){
 .appointment-feature-page .appt-tools__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;}
 .appointment-feature-page .appt-tool{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;}
}
.appointment-feature-page .appt-tool .feature-visual img{aspect-ratio:5/4;object-fit:contain;}
.appointment-feature-page .appt-tool h3{margin:24px 0 8px;font-size:var(--story-text-h3);font-weight:600;line-height:1.5;letter-spacing:-.02em;}
.appointment-feature-page .appt-tool p{margin:0;color:var(--story-body-muted);font-size:var(--story-text-small);line-height:1.75;}
.appointment-feature-page .appt-tool p a{display:inline-block;min-height:24px;color:#7c612c;text-underline-offset:4px;}
/* The next section is white too, so it opens with a hairline (as .appt-feature + .appt-feature does). */
.appointment-feature-page .appt-tools + .appt-feature{padding-top:0;}
.appointment-feature-page .appt-tools + .appt-feature > .feature-shell{border-top:1px solid var(--story-line);padding-top:var(--story-section-space);}

/* Group bookings, time blocks, client texts: copy beside a framed screenshot, alternating sides.
   The first follows the dark band; after that white follows white, so a hairline marks each section. */
.appointment-feature-page .appt-feature{padding:var(--story-section-space) 0;}
.appointment-feature-page .appt-feature + .appt-feature{padding-top:0;}
.appointment-feature-page .appt-feature + .appt-feature > .feature-shell{border-top:1px solid var(--story-line);padding-top:var(--story-section-space);}
.appointment-feature-page .appt-feature__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,96px);align-items:center;}
.appointment-feature-page .appt-feature__copy{max-width:500px;}
.appointment-feature-page .appt-feature__copy > p:not(.appt-kicker){margin:22px 0 0;color:var(--story-body-muted);font-size:var(--story-text-body);}
.appointment-feature-page .appt-feature .feature-visual{width:100%;max-width:520px;justify-self:end;}
.appointment-feature-page .appt-feature--reverse .feature-visual{order:-1;justify-self:start;}

@media(max-width:1000px){
 .appointment-feature-page .appt-split,.appointment-feature-page .appt-feature__layout{gap:36px;}
 .appointment-feature-page .appt-highlights,.appointment-feature-page .appt-creation-steps{gap:24px;}
}
@media(max-width:760px){
 .appointment-feature-page .appt-split,.appointment-feature-page .appt-feature__layout{grid-template-columns:1fr;gap:28px;}
 .appointment-feature-page .appt-highlights,.appointment-feature-page .appt-creation-steps{grid-template-columns:1fr;gap:20px;margin-top:28px;}
 .appointment-feature-page .appt-feature .feature-visual{order:0;justify-self:stretch;max-width:none;}
}