/* The home page on the story kit (css/feature-story.css): only what the home does differently. The features hub borrows its hero. */

/* Hero art: the device lineup is a transparent cut-out, so it sits whole beside the copy instead of being cropped
   to the band like the feature pages' photos. Narrow screens: the kit's crop box, set to the full image. */
:is(.home-page,.feature-hub-page){--story-hero-crop:822/364;--story-hero-crop-top:0;--story-hero-crop-width:100%;}
@media(min-width:1001px){
  :is(.home-page,.feature-hub-page) .story-hero__art{top:50%;bottom:auto;right:max(40px,calc((100% - 1200px) / 2));width:min(54%,700px);aspect-ratio:822/364;transform:translateY(-50%);-webkit-mask-image:none;mask-image:none;}
}

/* The salon photo (frontpage.css .hero-top-bg) sits under the kit's copy and art, behind a wash of the band's #222. */
.home-page .story-hero .hero-top-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(34,34,34,.92) 30%,rgba(34,34,34,.55) 65%,rgba(34,34,34,.35));}

/* The six-feature overview: the kit's related-card grid (3x2 hairline cards) under a section h2. */
.home-page .home-overview{padding:var(--story-section-space) 0;}
.home-page .home-overview h2{margin:0 0 clamp(24px,3vw,36px);}
.home-page .home-overview .feature-related-grid{row-gap:0;}

/* Copy beside a framed photo, like the feature pages' walkthrough rows. */
.home-page .home-about{padding:var(--story-section-space) 0;}
.home-page .home-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center;}
.home-page .home-row p{margin:22px 0 0;max-width:var(--story-measure);color:var(--story-body-muted);font-size:var(--story-text-body);}
.home-page .home-about__photo{width:min(100%,420px);}
/* About page: the former Who We Are heading is the page's h1, on the kit's h2 scale (it heads a copy row, not a hero). */
.about-page .home-about h1{margin:0;font-size:var(--story-text-h2);font-weight:500;line-height:1.2;letter-spacing:-.045em;color:var(--story-ink);}

/* The tablet section (its scroll tilt and glow are frontpage.css) with the kit's type, as in the feature pages' dark
   bands: one h2 on the kit scale, body-size intro, an h3-size callout title and small-size callout copy. */
.home-page .ipad-scroll-title{display:block;font-size:var(--story-text-h2);font-weight:500;line-height:1.2;}
.home-page .ipad-scroll-title > span{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;}
.home-page .ipad-scroll-intro{max-width:760px;}
.home-page .ipad-scroll-intro .copy-iphone-desc{max-width:var(--story-measure);margin:18px auto 0;font-size:var(--story-text-body);font-weight:400;line-height:1.8;}
.home-page .ipad-scroll-callout-text{font-size:var(--story-text-h3);font-weight:600;letter-spacing:-.02em;}
.home-page .ipad-scroll-section .ipad-scroll-callout-desc{font-size:var(--story-text-small);font-weight:400;line-height:1.8;}

/* 14-day trial popup (a native <dialog>): one white column in the kit's frame, square corners throughout. The page
   behind doesn't scroll while it's open. Fields and button follow the feature pages' closing CTA form, and the
   home contact form shares them. */
html:has(.trial-modal[open]){overflow:hidden;}
.home-page .trial-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--story-line);border-radius:0;background:#fff;color:var(--story-ink);box-shadow:var(--story-frame-shadow);overflow:auto;overscroll-behavior:contain;}
.home-page .trial-modal::backdrop{background:rgba(20,22,20,.8);}
.home-page .trial-modal__content{position:relative;padding:clamp(28px,5vw,44px);}
.home-page .trial-modal__close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--story-line);border-radius:0;background:#fff;color:var(--story-ink);font-size:1.5rem;line-height:1;cursor:pointer;}
.home-page .trial-modal__close:hover{background:#f2f2f2;}
.home-page .trial-modal__eyebrow{margin:0 56px 16px 0;color:#806426;font-size:var(--story-text-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.home-page .trial-modal .trial-modal__title{margin:0 40px 0 0;font-size:var(--story-text-h2-sm);font-weight:500;line-height:1.2;letter-spacing:-.045em;color:var(--story-ink);}
.home-page .trial-modal__subtitle{margin:10px 0 28px;color:var(--story-muted);font-size:var(--story-text-small);}
.home-page :is(.trial-modal,.contact-section) .contact-field label{color:var(--story-ink);font-size:var(--story-text-button);font-weight:600;}
.home-page :is(.trial-modal,.contact-section) .contact-field :is(input,textarea){min-height:52px;padding:12px;border:1px solid #b6bbae;border-radius:0;background:#fff;color:var(--story-ink);font:inherit;font-size:var(--story-text-button);}
.home-page :is(.trial-modal,.contact-section) .contact-field :is(input,textarea):focus{border-color:var(--story-ink);}
.home-page :is(.trial-modal,.contact-section) .contact-submit{min-height:52px;padding:12px 24px;border:0;border-radius:0;background:var(--story-ink);color:#fff;font-size:var(--story-text-button);font-weight:500;}
.home-page :is(.trial-modal,.contact-section) .contact-submit:is(:hover,:focus-visible){background:#41483d;color:#fff;}
.home-page :is(.trial-modal,.contact-section) :is(input,textarea,button):focus-visible{outline:3px solid var(--story-focus);outline-offset:2px;}
@media(prefers-reduced-motion:no-preference){
  .home-page .trial-modal[open]{animation:trial-in .24s ease-out;}
  .home-page .trial-modal[open]::backdrop{animation:trial-fade .24s ease-out;}
}
@keyframes trial-in{from{opacity:0;transform:translateY(12px);}}
@keyframes trial-fade{from{opacity:0;}}

/* The live chat (partials/live-chat.html, styled in frontpage.css) keeps its own heading spacing, not the kit h2's. */
.home-page .fp-live-chat h2{letter-spacing:normal;}

/* Demo sections (Automatic Turn System, Mistakes happen): a centred kit intro over framed GIFs or a clip. */
.home-page .home-demos,.home-page .home-logos{padding:var(--story-section-space) 0;}
.home-page .home-demos__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,28px);}
.home-page .story-intro-head .homepage-feature-link{margin-top:18px;}
.home-page .home-row .homepage-feature-link{margin-top:24px;}

/* Smart Checkout photos: the two ticket photos stacked beside the checkout photo (all 3:4), in kit frames. */
.home-page .home-checkout__photos{display:grid;grid-template-columns:1fr 2fr;gap:12px;}
.home-page .home-checkout__main{grid-column:2;grid-row:1 / span 2;}
.home-page .home-checkout__photos .feature-visual img{width:100%;height:100%;object-fit:cover;}
.home-page .home-staff .iphone-mockup{justify-self:center;}

/* Salons using Aura: the logo strip (its scroll is frontpage.css) under a kit heading. */
.home-page .home-logos .story-intro-head{margin-bottom:clamp(24px,3vw,36px);}
.home-page .early-access-banner{margin-top:0;background:#fff;border-color:var(--story-line);}
.home-page .early-access-banner__item{border:1px solid var(--story-line);border-radius:0;background:#fff;box-shadow:none;backdrop-filter:none;}
.home-page .early-access-banner__item:hover{box-shadow:var(--story-frame-shadow);}
.home-page .early-access-banner::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,0));}
.home-page .early-access-banner::after{background:linear-gradient(270deg,#fff,rgba(255,255,255,0));}

/* Contact: white panel and kit type beside the photo; the fields share the trial popup's style below. */
.home-page .contact-panel{background:#fff;border-top:1px solid var(--story-line);}
.home-page .contact-title{margin:0 0 12px;font-size:var(--story-text-h2);font-weight:500;line-height:1.2;letter-spacing:-.045em;color:var(--story-ink);}
.home-page .contact-subtitle{margin:0 0 28px;color:var(--story-muted);font-size:var(--story-text-small);line-height:1.8;}

@media(max-width:1000px){
  .home-page .story-hero{padding-bottom:clamp(24px,5vw,40px);}
}
@media(max-width:900px){
  .home-page .home-row,.home-page .home-demos__pair{grid-template-columns:1fr;}
}