/* OSRSAHK V4352R5.7 — Home-scoped narrative lede + hero chip navigation (new, additive only) */
.home-hero-narrative{ display: grid; gap: clamp(12px, 1.6vw, 16px); }
.home-hero-narrative p{ margin: 0; }
.home-hero-narrative__p--lead{ color: #f5f9ff; font-weight: 500; }
.home-hero-narrative__p--upgrade{
  position: relative;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--color-copper-bright);
}
@supports (text-wrap: pretty){
  .home-hero-narrative p{ text-wrap: pretty; }
}

/* hero chips converted from static span to same-document anchors:
   minimal, permanent click affordance, no information hidden behind hover */
.chip-list--hero .chip--nav{
  position: relative;
  padding-right: 24px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.chip-list--hero .chip--nav::after{
  content: "\203A";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .62;
  font-size: .85rem;
  line-height: 1;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.chip-list--hero .chip--nav:active{ transform: translateY(1px); }
.chip-list--hero .chip--nav:active::after{ opacity: .85; }
.chip-list--hero .chip--nav:focus-visible{
  outline: 2px solid var(--color-copper-bright);
  outline-offset: 2px;
}
/* ---- Corrective pass: the resting chip already carries
   border-color:var(--color-interactive-border) (same token this hover
   rule used to set), so hovering barely changed anything visible besides
   a 1px lift — easy to miss as an interactive cue. Hover now switches to
   the solid accent border (not the ~48%-opacity resting one) and adds a
   soft copper background tint, so the "this is clickable, you're over it"
   signal reads clearly without turning the chip into a solid button. */
@media (hover: hover) and (pointer: fine){
  .chip-list--hero .chip--nav:hover{
    transform: translateY(-1px);
    border-color: var(--color-copper-bright);
    background: var(--surface-label-hover);
    box-shadow: 0 6px 16px rgb(0 0 0 / 22%), 0 0 0 1px rgb(242 123 53 / 22%);
  }
  .chip-list--hero .chip--nav:hover::after{
    transform: translateY(-50%) translateX(2px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
  .chip-list--hero .chip--nav,
  .chip-list--hero .chip--nav::after{ transition: none; }
  .chip-list--hero .chip--nav:hover,
  .chip-list--hero .chip--nav:active{ transform: none; }
  .chip-list--hero .chip--nav:hover::after{ transform: translateY(-50%); }
}

/* short, non-layout-affecting :target feedback restricted to the Home
   in-page navigation destinations only */
#product-path:target, #color:target, #scripts-pk:target, #pvm:target,
#tools:target, #humanization:target, #plans:target, #final-summary:target{
  animation: home-target-flash 1100ms var(--ease-standard) 1;
}
@keyframes home-target-flash{
  0%{ box-shadow: inset 0 0 0 1px rgb(242 123 53 / 55%); }
  100%{ box-shadow: inset 0 0 0 1px rgb(242 123 53 / 0%); }
}
@media (prefers-reduced-motion: reduce){
  #product-path:target, #color:target, #scripts-pk:target, #pvm:target,
  #tools:target, #humanization:target, #plans:target, #final-summary:target{
    animation: none;
  }
}

/* ---- Corrective pass (structural, real fix): earlier rounds fought the
   symptom (media sitting low) with align-self:start + a guessed
   margin-top, which still looked like the media was "floating" with
   awkward empty space above and below it — because the actual cause was
   architectural: the ten hero chips lived INSIDE .home-hero__copy, so
   centering media against that column centered it against copy+chips
   combined, which is much taller than the media and than the copy's
   real visual core (eyebrow/H1/narrative/CTA).
   Fix: the chip list is now a sibling of .home-hero__media (moved in the
   HTML — see markup), not nested in .home-hero__copy. `grid-column:1/-1`
   pushes it onto its own full-width row below the copy/media row. With
   chips out of the way, .home-hero__copy's real height is now close to
   .home-hero__media's height, so the grid's own `align-items:center`
   (app.css, already there, unmodified) centers them naturally — no
   align-self/margin-top guesswork needed any more. */
.chip-list--hero{ grid-column: 1 / -1; }
@media (max-width: 939px){
  /* Single-column stack (tablet 681-939px and mobile ≤680px): restore the
     original reading order — copy, then chips, then media — since the
     chips are no longer physically inside .home-hero__copy to carry that
     order automatically. */
  .chip-list--hero{ order: 1; }
  .home-hero__media{ order: 2; }
}

/* ---- Corrective pass (real root cause of the residual offset):
   `transform:none` alone never actually took effect. `.home-hero__media`
   also carries `.fx-hero-plane`, and the global effects layer
   (effects.*.css) sets a HIGHER-specificity rule —
   `.fx-enabled .home-hero__media.fx-hero-plane{ --fx-base-y:48px }` —
   feeding a `translate3d(...)` on `.fx-hero-plane` itself. Two classes
   there (0,2,0) beat a one-class override (0,1,0) regardless of file
   load order, so a legacy 48px baseline parallax offset kept applying
   underneath every alignment attempt. Neutralized here with a 3-class
   selector (`body.page--home` + 2 classes) so it wins on specificity
   outright. */
body.page--home .home-hero__media.fx-hero-plane{ --fx-base-y: 0px; }

/* ---- Desktop density refinement (≥940px only; tablet/mobile untouched).
   The hero container was capped by the site-wide --content-max:1280px
   (used by every .container on every page), leaving very large unused
   side margins on wide desktops without the grid tracks growing to use
   any of the extra room. Overriding --content-max here is scoped to this
   one element only (.home-hero__grid also carries the shared .container
   class) — no other section on this or any other page is affected.
   Column tracks grow modestly so the wider container is actually used.
   column-gap/row-gap are now split: column-gap keeps the copy/media
   separation generous, row-gap (before the new chips row) matches the
   original ~18-24px rhythm instead of inheriting the large column value.
   No font-size, button target size or anything below 940px is touched. */
@media (min-width: 940px){
  .home-hero__grid{
    --content-max: clamp(1280px, 85vw, 1360px);
    grid-template-columns: minmax(0, 1.11fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 80px);
    row-gap: clamp(16px, 2vw, 24px);
  }
  .home-hero__media{ max-width: 540px; align-self: center; }
  .home-hero__media > .media-frame--hero{ max-width: 540px; }
  .home-hero__media-pair{ max-width: 540px; }
  /* ---- Corrective pass (owner feedback, screenshot at 1920px+): the
     gap between the sticky header and the hero's own eyebrow/heading
     read as an oversized, disconnected dead band on wide desktops. It
     was the hero's own top padding (this rule) reaching its clamp
     ceiling early (~1385px) and staying flat from there on — reduced
     the ceiling so the band shrinks meaningfully at typical and wide
     desktop widths, while the bottom padding (unrelated to this
     complaint) is untouched. */
  .home-hero{ padding-block: clamp(40px, 4vw, 60px) clamp(56px, 6vw, 84px); }
}

/* ---- V4352R5.10 addendum: narrow-desktop left-edge clipping in #pvm,
   #humanization and #final-summary (Home/AHK only — .feature-grid and
   .final-cta-clean are not used on the Client page).
   Root cause (confirmed by rendered measurement, not guesswork): the
   base site rule `.feature-grid, .final-cta-clean{ width: min(100%,
   1144px); margin-inline: auto; }` (app.css) omits the edge-subtraction
   term every other section's `.container` on the page carries
   (`width: min(calc(100% - 28px), var(--content-max))`). Between 940px
   and 1144px viewport width, `min(100%, 1144px)` simply resolves to
   100% — zero side margin, so the copy column, its heading, its accent
   border and the chip list all sit flush against the browser edge
   instead of sharing the same ~14px safe gutter as every other section.
   At ≥1144px the shared `.container` formula was never the active rule
   here to begin with (this override already wins), so the gutter only
   reappeared by accident once the viewport grew past the 1144px cap
   itself and auto-margins had room to center the now-smaller box.
   Fix: add the same `-28px` edge-subtraction this component's own
   parent `.container` class already uses everywhere else on the site,
   so #pvm, #humanization and #final-summary share the identical safe
   gutter as every other Home section at any width from 940px up —
   no transform, no negative margin, no per-viewport hack, just the one
   term that was missing. Two-column layout, alternating order and all
   copy are untouched; only the outer container's own side margin
   changes. */
@media (min-width: 940px){
  .feature-grid, .final-cta-clean{ width: min(calc(100% - 28px), 1144px); }
}