/* ============================================================
   BeautyDex : brand layer over the Pixeden template.
   Loaded AFTER the template css so it overrides stock styling
   while the template keeps ownership of the responsive grid
   (skeleton.css) and the waypoint scrollspy.
   ============================================================ */

:root{
  --oxblood:#580D1A;
  --oxblood-deep:#3F0912;
  --ivory:#F4F1EC;
  --ivory-warm:#EFEAE3;
  --ink:#1A1A1A;
  --muted:#4A4A4A;
  --subtle:#737373;
  --line:rgba(0,0,0,.12);
  --white:#fff;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}

/* reset the template's stock look ------------------------------------ */
html,body{background:var(--ivory);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0}
p{font-family:var(--sans);color:var(--muted);margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}

.bd-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.bd-eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oxblood)}
.bd-rule{width:46px;height:2px;background:var(--oxblood);margin:20px 0}
.bd-lead{font-size:17px;line-height:1.65;color:var(--muted);max-width:56ch}
.bd-accent{color:var(--oxblood)}
.bd-italic{font-style:italic;color:var(--oxblood)}

/* buttons ------------------------------------------------------------- */
.bd-btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:15px 26px;border-radius:32px;border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease}
.bd-btn:hover{transform:translateY(-1px)}
.bd-btn-primary{background:var(--oxblood);color:#fff}
.bd-btn-primary:hover{background:var(--oxblood-deep)}
.bd-btn-ghost{background:transparent;color:var(--oxblood);border-color:var(--oxblood)}
.bd-btn-ghost:hover{background:rgba(88,13,26,.06)}
.bd-btn-light{background:#fff;color:var(--oxblood)}

/* nav ----------------------------------------------------------------- */
/* opaque, so content scrolling beneath is never visible through it */
#bdNav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--ivory);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
#bdNav.is-stuck{border-bottom-color:var(--line)}
.bd-nav-inner{display:flex;align-items:center;justify-content:space-between;
  height:82px;max-width:1180px;margin:0 auto;padding:0 32px;gap:18px}
/* Source is now 1081x90 (trimmed from the supplied 1200x257 master), so the
   display size below is a DOWNSCALE at every density: 324px wide needs 972
   source px even at 3x, and we have 1081. Height cap matches the previous
   27px so the mark reads at the same size. width/height:auto with max-width/
   max-height means the browser can only ever scale it down proportionally,
   never squash or stretch it. min-width:0 on the wrapping link is required
   because flex items default to min-width:auto, which would floor the brand
   link at the image's intrinsic width and push the burger off-screen at 320px.
   No filters, no transforms. */
/* the brand link is the flex item, so the shrink floor has to be lifted there */
.bd-nav-inner > a{min-width:0;display:block}
.bd-nav-mark{width:auto;height:auto;max-width:min(324px,100%);max-height:27px}
#mainNav{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
#mainNav a{font-family:var(--sans);font-size:14px;color:var(--muted);position:relative;padding:4px 0}
#mainNav a:hover,#mainNav a.active{color:var(--oxblood)}
#mainNav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--oxblood)}
.bd-nav-cta{display:flex;align-items:center;gap:18px}
.bd-burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.bd-burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

/* hero ---------------------------------------------------------------- */
#hero{padding:158px 0 96px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(88,13,26,.07) 0%, rgba(88,13,26,0) 62%),
    var(--ivory)}
.bd-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.bd-hero h1{font-size:clamp(42px,5.2vw,68px);line-height:1.06;letter-spacing:-.015em;margin:22px 0 0}
.bd-hero h1 span{display:block}
.bd-hero .bd-lead{margin-top:24px}
.bd-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.bd-launch{margin-top:26px;font-size:13px;color:var(--subtle);
  display:flex;align-items:center;gap:9px}
.bd-launch:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oxblood)}
/* Single approved device: portrait, so it is sized by width against the column
   rather than filling it. Keeps its own alpha; the shadow is a restrained,
   physically plausible drop rather than a card. */
.bd-hero-phone{position:relative;display:flex;justify-content:center}
.bd-hero-phone img{width:100%;max-width:372px;
  filter:drop-shadow(0 34px 54px rgba(40,20,24,.22))}

/* generic section ----------------------------------------------------- */
.bd-section{padding:104px 0}
.bd-section--warm{background:var(--ivory-warm)}
.bd-section--ink{background:var(--oxblood);color:#fff}
.bd-section--ink h2,.bd-section--ink h3{color:#fff}
.bd-section--ink p{color:rgba(255,255,255,.80)}
.bd-section--ink .bd-eyebrow{color:rgba(255,255,255,.66)}
.bd-section--ink .bd-rule{background:rgba(255,255,255,.55)}
.bd-head{max-width:660px}
.bd-head h2{font-size:clamp(30px,3.5vw,44px);line-height:1.14;letter-spacing:-.01em}
.bd-head .bd-lead{margin-top:20px}

/* overview ------------------------------------------------------------ */
.bd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.bd-step{border-top:1px solid var(--line);padding-top:22px}
.bd-step-n{font-family:var(--serif);font-size:15px;color:var(--oxblood)}
.bd-step h3{font-size:20px;margin-top:10px}
.bd-step p{margin-top:10px;font-size:15px;line-height:1.6}

/* three core features ------------------------------------------------- */

/* product storytelling ------------------------------------------------ */
.bd-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:12px}
.bd-shots{display:flex;gap:20px;align-items:flex-end;justify-content:center}
/* Screens are now composited into the approved device hardware, so the tile
   supplies no frame of its own: no card, no border, no clipping. The shadow
   sits under the device instead. */
.bd-shot{background:transparent;border:0;border-radius:0;overflow:visible;
  filter:drop-shadow(0 22px 38px rgba(40,20,24,.20))}
.bd-shot img{width:100%}
.bd-shot--lead{width:60%}
.bd-shot--trail{width:46%;margin-bottom:36px;opacity:.96}
.bd-beats{list-style:none;margin:30px 0 0;padding:0}
.bd-beats li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);
  display:flex;gap:14px;align-items:baseline}
.bd-beats b{font-family:var(--serif);font-weight:500;font-size:18px;min-width:104px}
.bd-beats span{font-size:15px;line-height:1.6;color:rgba(255,255,255,.80)}

/* for pros ------------------------------------------------------------ */
.bd-pro-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.bd-pro-list{list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.bd-pro-list li{font-size:15px;line-height:1.55;color:var(--muted);
  padding-left:18px;position:relative}
.bd-pro-list li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--oxblood)}
/* The Founding Pro offer reuses .bd-pro-list wholesale: same size, colour and
   oxblood bullet. Only the column count changes, because these lines are longer
   than the capability lines, plus a hairline to separate the two groups. */
.bd-pro-list--offer{grid-template-columns:1fr;gap:12px;margin-top:22px;
  padding-top:22px;border-top:1px solid var(--line)}
.bd-pro-list--offer strong{font-weight:600;color:var(--ink)}
.bd-offer-head{margin-top:26px}

/* value / story: deliberately editorial: a full-measure pull statement,
   hairline rules and a staggered two-column note stack, so it reads as a
   magazine break rather than a third card grid. */

/* gallery -------------------------------------------------------------- */
.bd-gallery{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:22px;row-gap:74px;margin-top:48px;
  max-width:900px;margin-left:auto;margin-right:auto}
.bd-gal figure{margin:0}
.bd-gal .bd-shot{width:100%}
.bd-gal img{width:100%;display:block}
.bd-gal figcaption{margin-top:14px;font-size:13px;color:var(--subtle);
  font-weight:600;letter-spacing:.02em}

/* split conversion ----------------------------------------------------- */
.bd-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
.bd-card{border-radius:22px;padding:44px 40px}
.bd-card--pro{background:var(--oxblood);color:#fff}
.bd-card--pro h3{color:#fff;font-size:27px}
.bd-card--pro p{color:rgba(255,255,255,.82);margin-top:14px;font-size:15px;line-height:1.62}
.bd-card--cust{background:#fff;border:1px solid var(--line)}
.bd-card--cust h3{font-size:27px}
.bd-card--cust p{margin-top:14px;font-size:15px;line-height:1.62}
/* The eyebrow and the card title were sitting flush: .bd-eyebrow carries no
   bottom margin and the h3 no top margin, so the two line boxes touched.
   Scoped to .bd-card so the section eyebrows, which are separated by
   .bd-rule, keep their existing spacing. 12px sits just inside the 14px
   title-to-body step, so the eyebrow still reads as part of the title. */
.bd-card .bd-eyebrow{margin-bottom:12px}
.bd-card .bd-btn{margin-top:26px}
.bd-form{display:flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.bd-form input{flex:1;min-width:200px;height:50px;border-radius:26px;border:1px solid var(--line);
  padding:0 20px;font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink)}
.bd-form input:focus{outline:none;border-color:var(--oxblood)}
/* same 50px box as the input, so the two sit on one line */
/* .bd-card .bd-btn adds a 26px top margin; inside the form the button
   must sit on the input's baseline, so it is reset here. */
.bd-form .bd-btn{height:50px;padding:0 26px;border-radius:26px;flex:0 0 auto;margin-top:0}
.bd-note{margin-top:14px;font-size:12px;color:var(--subtle)}

/* footer --------------------------------------------------------------- */
.bd-footer{padding:44px 0;border-top:1px solid var(--line);background:var(--ivory)}
.bd-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bd-footer img{width:auto;height:auto;max-width:min(324px,100%);max-height:27px;opacity:.92}
.bd-footer p{font-size:12.5px;color:var(--subtle)}
.bd-footer nav{display:flex;gap:22px;flex-wrap:wrap}
.bd-footer nav a{font-size:12.5px;color:var(--subtle)}
.bd-footer nav a:hover{color:var(--oxblood)}

/* reveal on scroll ------------------------------------------------------ */
.bd-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.bd-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bd-reveal{opacity:1;transform:none;transition:none}
}

/* responsive ------------------------------------------------------------ */
@media (max-width:960px){
  .bd-hero-grid,.bd-story-grid,.bd-pro-grid,.bd-split{grid-template-columns:1fr;gap:44px}
  .bd-steps,  .bd-gallery{grid-template-columns:1fr 1fr}
  .bd-hero-phone img{max-width:330px}
  #mainNav{display:none}
  .bd-burger{display:block}
  #hero{padding:120px 0 70px}
}
@media (max-width:640px){
  .bd-wrap,.bd-nav-inner{padding:0 20px}
  /* tighter rhythm, same type sizes and touch targets */
  .bd-section{padding:60px 0}
  #hero{padding:104px 0 44px}
    .bd-steps,      .bd-head .bd-lead{margin-top:16px}
  .bd-hero h1{font-size:40px}
  .bd-hero .bd-lead{margin-top:18px}
  .bd-hero-actions{margin-top:26px;gap:10px}
  .bd-hero-actions .bd-btn{width:100%}
  .bd-hero-phone img{max-width:290px}
  .bd-shots{gap:12px}
  .bd-shot--trail{margin-bottom:20px}
  .bd-beats li{padding:13px 0}
  .bd-card{padding:30px 24px}
  .bd-split{gap:14px;margin-top:32px}
  .bd-nav-cta .bd-btn{display:none}
  .bd-footer{padding:34px 0}
  .bd-footer-inner{flex-direction:column;align-items:flex-start;gap:14px}

  /* gallery becomes a swipeable, snapping rail */
  .bd-gallery{display:flex;grid-template-columns:none;gap:14px;margin-top:30px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px 20px 10px;margin-left:-20px;margin-right:-20px;scrollbar-width:none}
  .bd-gallery::-webkit-scrollbar{display:none}
  .bd-gal{flex:0 0 74%;scroll-snap-align:center}
  .bd-gal figcaption{margin-top:10px}
  }


/* ============================================================
   ART DIRECTION PASS
   Campaign typography, asymmetry, layering and restrained motion.
   Nothing here alters the approved device, wordmark, copy or palette.
   ============================================================ */

/* "I WANT THIS." campaign type: environment, never a headline.
   Low contrast against ivory so it registers without competing. */
.bd-campaign{position:absolute;font-family:var(--serif);font-weight:500;
  letter-spacing:-.03em;line-height:.82;color:var(--oxblood);opacity:.075;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
/* sized to sit fully inside the viewport: the phrase has to read, so it is
   scaled to the container rather than bled off both edges */
.bd-campaign--hero{top:9%;left:50%;transform:translateX(-50%);
  font-size:clamp(64px,11.2vw,178px)}

/* hero: asymmetric, layered, phone allowed past the column edge */
#hero{padding:170px 0 110px;overflow:hidden;position:relative}
.bd-hero-grid{position:relative;z-index:1;
  grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.bd-hero{position:relative;z-index:2}
.bd-hero-phone{position:relative;justify-content:flex-end}
.bd-hero-phone img{max-width:360px;transform:translateY(6px);
  filter:drop-shadow(0 40px 62px rgba(40,20,24,.24));
  animation:bd-float 9s ease-in-out infinite}
@keyframes bd-float{0%,100%{transform:translateY(6px)}50%{transform:translateY(-10px)}}

/* a single genuine look, emerging from behind the device */
.bd-look{position:absolute;border-radius:14px;overflow:hidden;
  box-shadow:0 22px 44px rgba(40,20,24,.20);z-index:1}
.bd-look img{width:100%;display:block}
.bd-look--hero{width:158px;left:-26px;bottom:22%;transform:rotate(-4deg)}
.bd-look--story{width:190px;z-index:2}

/* editorial rules */

/* overview: staggered, off-grid step rhythm */
.bd-steps{grid-template-columns:repeat(3,1fr);gap:34px}
.bd-step:nth-child(2){transform:translateY(26px)}
.bd-step:nth-child(3){transform:translateY(52px)}


/* product storytelling: screens overlap and sit off-grid */
.bd-shots{position:relative}
.bd-shot--lead{width:50%;transform:translateY(-10px)}
.bd-shot--trail{width:38%;margin-bottom:0;transform:translate(-30px,34px)}

/* story: the editorial moment */

/* gallery: alternating vertical offset rather than a flat row of tiles */
/* stagger kept, but the row gap now clears the caption beneath each tile */
.bd-gal:nth-child(even){transform:translateY(30px)}

/* motion */
.bd-btn{transition:transform .2s cubic-bezier(.22,.7,.3,1),background .2s ease,
  color .2s ease,box-shadow .2s ease}
.bd-btn-primary:hover{box-shadow:0 10px 24px rgba(88,13,26,.26)}
.bd-shot{transition:transform .6s cubic-bezier(.22,.7,.3,1)}
.bd-shot:hover{transform:translateY(-6px)}
.bd-reveal{transition-duration:.85s}
.bd-reveal.d1{transition-delay:.08s}.bd-reveal.d2{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .bd-hero-phone img{animation:none}
  .bd-shot,.bd-btn{transition:none}
}

/* ---- mobile: keep the campaign feel, simplify the overlaps ---- */
@media (max-width:960px){
  /* The unconditional .bd-hero-grid rule above re-declares two columns and
     wins on source order over the 960px collapse at the top of the file, so
     phones and tablets kept a squeezed side-by-side hero. Collapse it here,
     after that rule, so it stacks at every width up to 960px. */
  .bd-hero-grid{grid-template-columns:1fr;gap:56px}
  .bd-hero-phone{justify-content:center}
  .bd-hero-phone img{max-width:300px}
  .bd-step:nth-child(2),.bd-step:nth-child(3){transform:none}
    .bd-shot--trail{transform:translate(-18px,24px)}
    }
@media (max-width:640px){
  /* ---- mobile hero: deliberate single column ----
     The unconditional .bd-hero-grid rule above re-establishes two columns at
     every width. Media queries carry no specificity, so it wins on source
     order and the intended 1fr collapse never applies. Restored here. */
  .bd-hero-grid{grid-template-columns:1fr;gap:68px}
  /* source order already places copy first, phone second: no reordering needed */
  .bd-hero h1{font-size:clamp(34px,9vw,42px)}
  .bd-hero-phone{justify-content:center}

  /* the nav wordmark needs no mobile rule: it sizes from its own intrinsic
     300x27 and shrinks proportionally inside the flex row */

  #hero{padding:112px 0 44px}
  /* was bottom:6%, which put the background word straight through the
     onboarding note. In the single-column flow it now sits in the free lane
     between that note and the phone, centred on its own height. */
  .bd-campaign--hero{top:auto;bottom:auto;left:50%;
    /* phone-hero.png is 820x1665, so its rendered height is width * 2.0305.
       Anchoring off the hero's bottom padding + that height + half the grid
       gap keeps the word centred in the lane at any viewport. */
    bottom:calc(44px + (min(300px,78vw) * 2.0305) + 34px);
    transform:translate(-50%,50%);
    font-size:clamp(36px,10vw,50px);opacity:.09}
    .bd-look--hero{width:96px;left:-6px;bottom:10%}
  .bd-look--story{width:140px}
  .bd-hero-phone img{max-width:min(300px,78vw);margin-inline:auto}
          .bd-shot--lead{width:62%;transform:none}
  .bd-shot--trail{width:46%;transform:translate(-14px,20px)}
  .bd-gal:nth-child(even){transform:none}
  }


/* ============================================================
   HERO TEXTURE
   grain_Gradient__13_ used as a TEXTURE SOURCE, not as an image.
   Chosen over 11 and 20 by measurement: its mean sits at 124.8/255, i.e.
   near mid-grey, so soft-light leaves the ivory essentially unshifted, and
   its broad tonal swing is the smallest of the three (97 vs 135 and 116)
   while carrying the same fine grain (sd 8.98). Because it is already
   mid-grey it needs no inversion.
   Layer order: texture 0  <  "I WANT THIS." 1  <  hero content 2,
   so nothing is drawn over the phone, type or buttons.
   ============================================================ */
#hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("../images/grain.jpg");
  background-size:cover;
  background-position:60% 35%;      /* the plate's lighter area falls behind the device */
  /* invert the dark plate to a light one, flatten its contrast, then let
     soft-light carry only the grain and the broad tonal shift */
  /* contrast(.55) previously flattened the plate to near-uniform grey, which
     destroyed the grain before it blended. Held near its native contrast and
     run at full opacity, soft-light keeps the ivory hue while letting the
     texture and the broad tonal fall-off actually read. */
  filter:grayscale(1) contrast(1.18) brightness(1.03);
  mix-blend-mode:soft-light;
  opacity:.58;
  /* quieter behind the copy, richer on the phone side, so the texture reads as
     print stock rather than an even dusting across the whole hero */
  -webkit-mask-image:linear-gradient(102deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.38) 38%,
                     rgba(0,0,0,.72) 66%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(102deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.38) 38%,
                     rgba(0,0,0,.72) 66%, rgba(0,0,0,1) 100%);
  pointer-events:none;
  z-index:0;
}
.bd-campaign--hero{z-index:1}
.bd-hero-grid{z-index:2}

/* the texture is decoration only */
@media (prefers-reduced-motion:reduce){ #hero::before{opacity:.5} }


/* ============================================================
   OVERVIEW  "What BeautyDex does"
   Editorially composed, not decorated. The headline holds the left, the
   lead sits low-right so the upper-right void is deliberate rather than
   empty, and the journey becomes three full-measure rows led by oversized
   oxblood numerals. Copy unchanged; no imagery of any kind.
   ============================================================ */
#overview{padding:76px 0 80px}

/* headline left, lead dropped to the lower right: the gap between them is
   the composition, not a hole to fill */
/* One statement, nothing else. The two-column grid was built for the
   three-step block that has since moved to the product section; with only a
   headline and one line left it stranded that line in mid-air. Single column,
   supporting line directly beneath, so the whitespace reads as a pause
   between sections rather than a hole. */
/* centred: a single statement reads better on the page's axis than pinned
   left with open space to its right */
#overview .bd-head{
  max-width:none;
  display:block;
  text-align:center;
}

#overview .bd-head h2{font-size:clamp(36px,5.2vw,66px); line-height:1.04; max-width:20ch;
  margin:2px auto 0}
#overview .bd-rule{margin:14px auto 18px}
#overview .bd-head .bd-lead{
  margin:26px auto 0; font-size:17px; line-height:1.6; max-width:38ch;
}

/* ---- the journey: three clean rows, consistently aligned ----
   Numeral, title and description share one baseline grid so each row reads
   as a single unit. No stagger, no path, no containers. */

/* pale oxblood, moderately larger than before, still subordinate to the title */

@media (max-width:960px){
  #overview{padding:56px 0 60px}
  #overview .bd-head h2{max-width:18ch}
      }
@media (max-width:640px){
  #overview{padding:44px 0 48px}
        #overview .bd-step h3,}


/* anchored sections must clear the fixed header, so a jump never lands
   with the headline underneath the nav */
section[id]{scroll-margin-top:96px}


/* ============================================================
   PRODUCT: scroll-driven See it / Want it / Book it
   The section supplies scroll distance; .bd-sticky holds the approved
   composition in view. JS writes only data-state on the section; every
   visual change below is CSS transform + opacity.
   ============================================================ */
/* the headline never sat inside .bd-head, so it had no size of its own */
#product h2{font-size:clamp(30px,3.5vw,44px); line-height:1.14; letter-spacing:-.01em}
#product .bd-lead{margin-top:18px}
#product .bd-beats{margin-top:34px}

@media (min-width:961px){
  /* Desktop restores the larger wordmark presence. The trimmed source is
     1081x90, so 38px tall resolves to ~456px wide via the natural 12.011
     aspect: still a 0.42x downscale, i.e. no CSS upscaling. Width stays auto
     and max-width is only a safety cap, so the new asset's own tracking is
     preserved rather than forced back to the old 422px. */
  .bd-nav-mark{max-width:min(460px,100%);max-height:38px}

  /* 250vh: 100vh of it is the pinned view, leaving 150vh of travel, i.e.
     50vh per state. Tuned down from 300vh so the section reads deliberate
     rather than trapping the reader. */
  #product{height:250vh; padding:0; position:relative}
  .bd-sticky{position:sticky; top:0; min-height:100vh;
    display:flex; align-items:center; padding:96px 0}

  /* rows: the active beat leads, the others recede */
  #product .bd-beats li{
    opacity:.5;
    transform:translateX(0);
    transition:opacity .55s cubic-bezier(.22,.7,.3,1),
               transform .55s cubic-bezier(.22,.7,.3,1);
  }
  #product[data-state="1"] .bd-beats li[data-beat="1"],
  #product[data-state="2"] .bd-beats li[data-beat="2"],
  #product[data-state="3"] .bd-beats li[data-beat="3"]{
    opacity:1; transform:translateX(6px);
  }

  /* devices stack in the same place; the active one comes forward */
  #product .bd-shots{position:relative; min-height:520px;
    display:block; justify-content:initial}
  #product .bd-shot{
    position:absolute; top:50%; left:50%; width:56%;
    margin:0; transform:translate(-50%,-50%) scale(.96);
    opacity:0; transition:opacity .6s cubic-bezier(.22,.7,.3,1),
                          transform .6s cubic-bezier(.22,.7,.3,1);
  }
  /* the approved offsets are preserved as each device's resting position */
  #product .bd-shot--lead {margin-left:-4%}
  #product .bd-shot--trail{margin-left:6%; width:52%}
  #product .bd-shot--book {margin-left:2%; width:54%}

  #product[data-state="1"] .bd-shot--lead,
  #product[data-state="2"] .bd-shot--trail,
  #product[data-state="3"] .bd-shot--book{
    opacity:1; transform:translate(-50%,-50%) scale(1);
  }
  /* the outgoing device recedes rather than vanishing */
  #product[data-state="2"] .bd-shot--lead,
  #product[data-state="3"] .bd-shot--trail{
    opacity:.22; transform:translate(-54%,-50%) scale(.94);
  }
}

/* ---- mobile / tablet: no pinning, normal flow ---- */
@media (max-width:960px){
  #product{height:auto}
  .bd-sticky{position:static; padding:0}
  #product .bd-beats li{opacity:1}
  #product .bd-shot--book{display:none}   /* keeps the approved two-device pair */
}

/* ---- reduced motion: static, everything readable ---- */
@media (prefers-reduced-motion:reduce){
  #product{height:auto !important}
  .bd-sticky{position:static !important; padding:0 !important; min-height:0}
  #product .bd-beats li{opacity:1 !important; transform:none !important; transition:none}
  #product .bd-shots{position:static; min-height:0; display:flex}
  #product .bd-shot{position:relative; top:auto; left:auto; opacity:1 !important;
    transform:none !important; transition:none}
  #product .bd-shot--book{display:none}
}


/* ============================================================
   STORY: opening spread
   No rules anywhere. Structure comes from an underlying 12-column
   alignment system; the asymmetry is offset within that grid, never free.
   ============================================================ */

/* ---- the statement ---- */

/* the turn: indented to the same column the margin note ends on */

/* ---- margin note: annotation, aligned to the statement's last line ---- */

/* ---- four principles: offset flow on the same 12-column system ---- */
/* 1 and 3 hold the left column; 2 and 4 sit right and drop, so the eye
   travels down-and-across in reading order rather than scanning a table */


/* the campaign type sits behind the fourth principle, never under its copy */

@media (max-width:640px){
  /* single column: the offset would read as misalignment at this width */
                }


/* ---- story: the BeautyDex mark as the section's visual gesture ----
   Cropped ~30% off the left edge so the bowl of the b and the whole location
   pin stay visible; the stem runs off-page. Behind all content, low enough
   that it reads as tone before it reads as a logo. */
@media (max-width:960px){
  /* recomposed, not shrunk: sits low-left behind the principles so it never
     crowds the statement at this width */
  }

/* waitlist: three fields wrap predictably inside the card (layout only) */
.bd-form input{flex:1 1 calc(50% - 5px)}
.bd-form #wl_email{flex:1 1 100%}
.bd-form.is-busy{opacity:.65;pointer-events:none}
.bd-wait-msg{margin:14px 0 0;font-size:13px;line-height:1.55}
.bd-wait-msg.is-err{color:#B3261E}
.bd-wait-msg.is-ok{color:#2e7d32}

/* ---- mobile navigation (≤960px only) ---- */
.bd-mnav{display:none}
body.is-locked{overflow:hidden}
@media (max-width:960px){
  .bd-mnav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--ivory); border-bottom:1px solid var(--line);
    padding:14px 20px 22px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .bd-mnav.is-open{opacity:1; visibility:visible; transform:none}
  .bd-mnav ul{list-style:none; margin:0 0 16px; padding:0}
  .bd-mnav li + li{border-top:1px solid var(--line)}
  .bd-mnav a{display:block; padding:15px 2px; font-family:var(--sans);
    font-size:15px; color:var(--ink)}
  .bd-mnav a:hover{color:var(--oxblood)}
  .bd-mnav .bd-mnav-cta{display:flex; width:100%; margin-top:4px; color:#fff}
  .bd-mnav a:focus-visible,.bd-burger:focus-visible{
    outline:2px solid var(--oxblood); outline-offset:3px; border-radius:4px}
}

/* ---- keyboard focus for links ----
   base.css (template default) sets `a:focus{outline:0}` globally with no
   replacement, leaving every link — including the Founding Pro CTAs — with no
   visible focus indicator. currentColor keeps the ring legible on both the
   ivory sections and the oxblood cards. */
a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}

/* consent line beneath a submit button: reuses .bd-note's size/colour so no
   new type style enters the page. */
/* p.bd-consent, not .bd-consent: .bd-card--cust p would otherwise win and
   render the waitlist line at 15px while apply.html rendered 12px. */
p.bd-consent{margin-top:12px;font-size:12px;color:var(--subtle);line-height:1.5}
/* .bd-form is a wrapping flex row, so the consent line needs its own full-width
   row to sit BENEATH the button rather than beside it. */
.bd-form p.bd-consent{flex:0 0 100%;margin-top:4px}
.bd-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bd-consent a:hover{color:var(--oxblood)}