/* ===========================================================================
   THE HERO
   ---------------------------------------------------------------------------
   Rebuilt to the composition from the live site, which is the strongest thing
   we have. NOT a two-column split: the chrome object is a full-bleed layer on
   the left and every piece of type is set against it on the right, with the
   headline anchored to the bottom. The asymmetry is the whole point.
   =========================================================================== */

.hero-stage{
  position:relative;
  min-height:calc(100vh - 76px);
  display:flex;flex-direction:column;
  padding:0 max(28px,calc((100vw - 1360px)/2)) 46px;
  overflow:hidden;
}

/* The object: a layer, not a column. Oversized and pushed left so it bleeds
   past the edge the way it does on the live site. */
.hero-object{
  position:absolute;
  /* THE COMPOSITION FIX.
     Pushing the object off the left edge and the type to the right edge left a
     600px hole down the middle: two elements avoiding each other rather than a
     composition. The object now sits WHOLE, inboard, and large enough that the
     headline crowds it. Things that overlap read as composed; things in
     opposite corners read as a template that failed to fill. */
  left:2%;top:50%;transform:translateY(-50%);
  width:min(96vh,1120px);aspect-ratio:1;
  z-index:0;pointer-events:none;
}
.hero-object .rings{width:100%;height:100%}

.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:inherit}

/* Spec row, right aligned, sitting in the upper half. */
.hero-specs{
  display:flex;justify-content:flex-end;gap:clamp(28px,5vw,86px);
  margin-top:auto;padding-top:80px;text-align:right;
}
.hero-spec b{
  display:block;font-family:'EB Garamond',Garamond,serif;font-weight:500;
  font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1;letter-spacing:-.01em;color:#0B0713;
}
.hero-spec span{
  display:block;margin-top:8px;font-size:.66rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#5D5568;line-height:1.5;
}

/* Bottom block: annotation left, headline right. */
.hero-bottom{margin-top:auto;padding-top:56px;display:flex;flex-direction:column;gap:26px}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}

/* One line, sitting on the baseline of the row it belongs to. The previous
   version wrapped to seven lines of 8px caps down the margin, which is the same
   filler that got stripped off every other page. */
.hero-note{
  position:relative;z-index:2;margin:0;
  font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:#5D5568;line-height:1.7;max-width:34ch;
}
.hero-note strong{color:#0B0713}

.hero-stage h1{
  /* Sits over the object's right edge on purpose. The overlap is what makes the
     two read as one arrangement. */
  margin:0;text-align:right;position:relative;z-index:2;
  font-family:'EB Garamond',Garamond,serif;font-weight:500;
  font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:.94;letter-spacing:-.035em;color:#0B0713;
}
.hero-stage h1 em{font-style:italic;color:#5B21B6}

.hero-actions-row{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hero-price{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'EB Garamond',Garamond,serif;font-size:clamp(1.2rem,2.3vw,1.75rem);
  color:#5B21B6;text-decoration:none;
}
.hero-price:hover{text-decoration:underline;text-underline-offset:5px}
.hero-terms{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#5D5568}

@media (max-width:1100px){
  .hero-object{left:-26%;width:min(62vh,620px);opacity:.62}
  .hero-specs{gap:26px;padding-top:56px}
}
/* ---------------------------------------------------------------- mobile
   Taken from the live site's phone hero, which is a different composition to
   the desktop one rather than the desktop one reflowed.

   What was wrong: the object became an inline block at the top of the column,
   so the page opened on a picture followed by three spec pairs, and the
   HEADLINE was the fourth thing down. Live opens on the headline every time.

   The live arrangement is: the object bleeding off the LEFT as a full-height
   layer, every piece of type set hard RIGHT against it, and two full-width
   buttons at the foot. The object is never in the flow. */
@media (max-width:760px){
  .hero-stage{
    min-height:calc(100svh - 68px);
    padding:0 20px 30px;
    justify-content:flex-end;
  }

  /* A layer again, not a block in the column. Oversized and pushed off the left
     edge so it is a backdrop for the type rather than a picture above it. */
  .hero-object{
    position:absolute;left:-42%;top:46%;transform:translateY(-50%);
    width:min(155vw,700px);margin:0;opacity:1;
  }

  /* A scrim, because at this size the object reaches the right edge and the
     type sits on chrome that is nearly black in places. Measured at the glyphs
     rather than guessed: 17.7% of the small caps and 2.2% of the headline were
     under 4.5:1 against it.

     It is anchored to the STAGE, not to the object. Hung off .hero-object the
     gradient was measured across that element's own 604px box, which starts
     164px off-screen, so it had only reached about half strength by the time it
     got to the right edge where the type actually is. */
  .hero-stage::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(250,248,252,0) 0%,
      rgba(250,248,252,.50) 24%,
      rgba(250,248,252,.95) 50%,
      rgba(250,248,252,.99) 68%);
  }
  .hero-object{z-index:0}
  .hero-inner{z-index:2}

  .hero-inner{min-height:0;justify-content:flex-end;padding-top:96px}

  /* The headline leads. Everything else follows it. */
  .hero-bottom{order:1;margin-top:0;padding-top:0;gap:20px}
  .hero-specs{order:2;margin-top:28px;padding-top:22px;
    border-top:1px solid rgba(11,7,19,.12);
    justify-content:space-between;gap:12px;text-align:right}
  .hero-spec b{font-size:1.18rem}
  .hero-spec span{font-size:.55rem;letter-spacing:.1em;margin-top:5px}

  /* The row is a column here, and its children shrink to their own content in
     a flex column. Without width:100% the headline collapses to the width of
     its longest line and "right aligned" stops meaning anything. */
  .hero-row{flex-direction:column;align-items:flex-end;gap:14px}
  .hero-row > *{width:100%}
  .hero-stage h1{text-align:right;font-size:clamp(2.5rem,11.5vw,3.6rem);line-height:.96;width:100%}
  /* Held to the right of the stage on purpose. Run full width it reached into
     the left third, where the scrim is deliberately weak so the object can
     still be seen, and the smallest type on the page ended up on the darkest
     chrome. It wraps to another line instead, which costs nothing. */
  .hero-note{width:auto;max-width:63%;margin-left:auto;text-align:right;
    font-size:.6rem;letter-spacing:.13em;line-height:1.75}

  /* Two full-width buttons at the foot, the way live does it. "Get your price"
     is the filled one there, so it is the filled one here: on a phone the
     serif text link it uses on desktop is not a target, it is a sentence. */
  .hero-actions-row{align-items:stretch;gap:10px;width:100%}
  .hero-actions-row .button{width:100%;justify-content:center}
  .hero-price{
    order:-1;width:100%;justify-content:center;min-height:54px;
    border-radius:999px;font-family:Inter,system-ui,sans-serif;
    font-size:.86rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:#fff;background:linear-gradient(90deg,#7C3AED,#C026D3,#F472B6);
    box-shadow:0 14px 34px rgba(124,58,237,.3);
  }
  .hero-price:hover{text-decoration:none}
  /* The demo drops to the outline treatment so the two do not compete. */
  .hero-actions-row .button-primary{
    background:none;color:#5B21B6;border:1.6px solid rgba(124,58,237,.5);
    box-shadow:none;min-height:54px;
  }
}