/* OSRSAHK V4352R5.1 — scoped Client Full Access shell (unchanged rules from R5 preserved below, panel component refined) */
/* OSRSAHK V4352R5.2 addition below: Product Map cards converted from <article> to whole-card <a> */

/* ---- Corrective pass: the .client-hero__note secondary sentence was
   removed from the markup (owner feedback: keep the hero short). Its rule
   is removed here too — nothing in the shipped CSS should reference a
   class that no longer exists in the HTML. */

/* ---- Corrective pass: Client hero media was sitting too low. The
   obsolete positive translateY that used to compensate for a taller hero
   copy (see below, ≥940px block) is neutralized there; align-items:center
   on .client-hero__grid (already present, untouched) does the centering
   now that the hero copy is back to its original short length. */

.full-access-shell{
  position: relative;
  isolation: isolate;
  margin-top: clamp(18px, 2vw, 22px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(11 27 46 / 88%), rgb(7 16 27 / 96%));
  box-shadow: var(--shadow-raised);
}
.full-access-shell::before{
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(242 123 53 / 48%), transparent);
  opacity: .72;
}
.full-access-shell__label{ margin-bottom: 10px; }
.full-access-shell__heading{
  max-width: 27ch;
  overflow-wrap: anywhere;
}
@supports (text-wrap: balance){
  .full-access-shell__heading{ text-wrap: balance; }
}
.full-access-shell__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(16px, 2vw, 20px);
}
/* ---- V4352R5.5: narrative panel — a quieter, non-interactive sibling of
   the Built For panel. Stretches to the same row height as the Built For
   aside on desktop (align-items:stretch above).
   ---- V4352R5.10 corrective pass: this used to distribute its three
   paragraphs across that stretched height with `align-content:space-between`
   — harmless while the panel width was narrow (paragraphs wrapped to
   several lines each, filling most of the height on their own), but once
   the panel/column width grew wide enough for paragraphs to wrap into
   fewer lines, space-between forced large, awkward gaps *between* the
   three paragraphs to fill the leftover height (the "up/down arrows
   inside the text box" defect the owner annotated). Switched to
   `align-content:start`: paragraphs now clump together with their own
   normal gap, and any leftover height (when the Built For column is
   taller) simply shows as ordinary empty space below the text block —
   a common, unremarkable layout, not a defect. */
.full-access-shell__summary{
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(14px, 1.8vw, 20px);
  min-width: 0;
  max-width: 60ch;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--color-border-soft);
  border-inline-start: 2px solid var(--color-copper-bright);
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, rgb(11 24 42 / 52%), rgb(7 16 27 / 68%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}
.full-access-shell__summary p{
  position: relative;
  max-width: 60ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.full-access-shell__summary p:first-child{
  color: var(--color-text);
  font-weight: 500;
}
.full-access-shell__summary p:not(:first-child){
  padding-top: clamp(14px, 1.8vw, 20px);
}
.full-access-shell__summary p:not(:first-child)::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  height: 1px;
  background: linear-gradient(90deg, rgb(242 123 53 / 32%), transparent);
}
@supports (text-wrap: pretty){
  .full-access-shell__summary p{ text-wrap: pretty; }
}
.full-access-shell__cards{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
@media (min-width: 650px) and (max-width: 939px){
  .full-access-shell__cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 940px the two-column grid stacks (rule further down), so the
   narrative panel no longer shares a row with the Built For aside — use
   its own natural content height instead of the desktop stretch/
   space-between distribution, matching the tablet/mobile contract. */
@media (max-width: 939px){
  .full-access-shell__summary{ align-content: start; max-width: none; }
}
@media (min-width: 940px){
  /* ---- V4352R5.10 corrective: 1.3fr gave the narrative column a track
     share proportional to the whole (growing) grid width, but the
     narrative's own content is capped at 60ch (base rule, kept for
     readability) — so as the grid grew, the 1.3fr track kept demanding
     more room than a 60ch paragraph ever uses, leaving an unexplained
     gap between the two columns (measured up to ~15% of stage width at
     1920px, over the contract's ~6% ceiling). Sizing column 1 to the
     width its content actually needs (minmax(0,522px) — measured render:
     the 60ch-capped box is exactly ~517.5px border-box at any viewport,
     60ch plus the box's own padding) and letting column 2 absorb the
     rest (1fr) removes that dead space at every width instead of only
     at the one width it happened to look balanced. */
  .full-access-shell__grid{ grid-template-columns: minmax(0, 522px) minmax(240px, 1fr); }
  .full-access-shell__cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- V4352R5.1: use-case panel (informational aside, not a form/button) ---- */
.full-access-summary__uses{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: clamp(16px, 2vw, 20px);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, rgb(16 36 61 / 90%), rgb(7 16 27 / 97%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 -14px 20px -16px rgb(0 0 0 / 35%),
    0 14px 30px rgb(0 0 0 / 24%);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.full-access-summary__uses::before{
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(242 123 53 / 40%), transparent);
  opacity: .7;
  pointer-events: none;
}
.full-access-summary__uses::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px 100px at 88% 0%, rgb(242 123 53 / 12%), transparent 70%);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
  pointer-events: none;
}
.full-access-summary__uses-title{
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 12px;
  color: var(--color-heading-accent);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.full-access-use-list{
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.full-access-use-item{
  position: relative;
  display: block;
  min-height: 44px;
  padding: 10px 32px 10px 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xs);
  background: rgb(255 255 255 / 3%);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.full-access-use-item::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-copper-bright);
  box-shadow: 0 0 0 3px rgb(242 123 53 / 14%);
  transform: translateY(-50%);
  transition:
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
/* permanent restrained navigation chevron — resting-state click affordance,
   visible without hover/touch, distinct from the plugin accordion's +/- */
.full-access-use-item::after{
  content: "\203A";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-copper-pale);
  opacity: .62;
  font-size: 1.05rem;
  line-height: 1;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.full-access-use-item:active{
  transform: translateX(1px);
}
.full-access-use-item:active::after{
  opacity: .8;
}
@media (min-width: 650px) and (max-width: 939px){
  .full-access-use-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine){
  .full-access-summary__uses:hover{
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 6%),
      inset 0 -14px 22px -16px rgb(0 0 0 / 38%),
      0 20px 40px rgb(0 0 0 / 30%);
  }
  .full-access-summary__uses:hover::after{ opacity: 1; }
  .full-access-use-item:hover{
    transform: translateX(3px);
    border-color: var(--color-border-strong);
    background: linear-gradient(90deg, rgb(178 74 28 / 12%), rgb(255 255 255 / 3%));
    color: #fff6ec;
  }
  .full-access-use-item:hover::before{
    background: var(--color-copper-pale);
    box-shadow: 0 0 0 4px rgb(255 182 125 / 22%), 0 0 10px rgb(242 123 53 / 45%);
  }
  .full-access-use-item:hover::after{
    transform: translateY(-50%) translateX(2px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
  .full-access-summary__uses,
  .full-access-use-item,
  .full-access-use-item::after{ transition: none; }
  .full-access-summary__uses:hover,
  .full-access-use-item:hover,
  .full-access-use-item:hover::after{ transform: none; }
}

/* ---- V4352R5.2: whole-card clickable Product Map cards (anchor normalization only) ---- */
a.compare-card{
  display: block;
  text-decoration: none;
}

/* ---- V4352R5.7: six client-feature-card articles converted to whole-card
   anchors carrying data-client-deep-link. Base display:grid, padding, gap
   and colors stay in the existing global app.css rule; this scoped block
   only normalizes anchor defaults and adds the permanent nav affordance. */
/* ---- Corrective pass: reverted to the quieter original card look.
   Removed the chevron pseudo-element and its reserved padding-right — the
   card is still a real, fully clickable <a> (cursor, focus-visible and a
   subtle press feedback are kept), it just no longer looks like a button.
   The existing site-wide hover lift/border/background on [data-fx-card]
   (app.css, shared with every other card on the site) is untouched. */
a.client-feature-card{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.client-feature-card:active{ transform: translateY(1px); }
a.client-feature-card:focus-visible{
  outline: 2px solid var(--color-copper-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  a.client-feature-card:active{ transform: none; }
}

/* ---- V4352R5.8: six client-mini hero summary cards converted to whole-card
   anchors carrying data-client-deep-link. Base display/gap/padding/hover
   elevation stay in the existing global app.css rules (shared with
   a.client-feature-card); this scoped block only normalizes anchor
   defaults and adds the permanent nav affordance. */
/* ---- Corrective pass: same reversion as a.client-feature-card above —
   quieter original look, still a real clickable <a>. */
a.client-mini{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.client-mini:active{ transform: translateY(1px); }
a.client-mini:focus-visible{
  outline: 2px solid var(--color-copper-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  a.client-mini:active{ transform: none; }
}

/* ---- Corrective pass (2nd round): align-items:center alone still read
   as "too low" once actually rendered — same root cause as the Home hero:
   centering against the full copy column doesn't put the media where the
   eye expects it (near the eyebrow/H1), especially now that the column
   also grew wider/taller from the density refinement below. Switched to
   the same align-self:start + small proportional nudge used for the Home
   hero instead of relying on center. */
@media (min-width: 940px){
  .client-hero__media{
    transform: none;
    align-self: start;
    margin-top: clamp(8px, 2vw, 28px);
  }
}

/* ---- Corrective pass (real root cause of the 940-1180px image/text
   overlap): the original site's own CSS already knows the fixed-pixel
   two-column hero (640px/430px, app.css) doesn't fit safely below
   1181px — that's why app.css's own tablet rule keeps .client-hero__grid
   SINGLE-COLUMN from 681px through 1180px, only switching to two columns
   above 1180px. The earlier version of this density fix ran its
   two-column override from 940px, which — being in a stylesheet loaded
   after app.css — outranked that original tablet safety net and forced
   two columns into the exact 940-1180px zone the original author had
   deliberately kept single-column, exposing .client-hero__media's
   unrelated hard-coded `width:430px` (app.css, unconditional) to a grid
   track narrower than that fixed width. Raising this override's own
   breakpoint to 1181px restores the original tablet single-column
   behavior untouched and only widens the layout where it was already
   two-column natively. Font sizes, button sizes, and everything below
   1181px are untouched. */
@media (min-width: 1181px){
  .client-hero__grid{
    width: min(calc(100% - 200px), clamp(1154px, 80vw, 1220px));
    grid-template-columns: minmax(0, 1.43fr) minmax(0, 1fr);
  }
  .client-hero__lede{ max-width: 660px; }
  /* Same real fix as the Home hero media (which the original app.css
     already made fluid at its own desktop breakpoint: width:100%;
     max-width:500px). Client's app.css never got that same treatment —
     .client-hero__media stayed a hard-coded width:430px at every width.
     Making it fluid here removes the overlap risk entirely (a fluid grid
     item can never exceed its own track) and closes the oversized static
     gap this fixed width left at very wide desktops once the grid tracks
     grew past 430px. */
  .client-hero__media{ width: 100%; max-width: 470px; }
}
@media (min-width: 940px){
  /* ---- Corrective pass (owner feedback, screenshot at 1920px+): same
     issue and fix as the Home hero — the header-to-hero gap was this
     rule's top padding sitting flat at its clamp ceiling from ~1354px
     onward, reading as an oversized dead band. Ceiling reduced; bottom
     padding untouched. */
  .client-hero{ padding-block: clamp(40px, 4vw, 56px) clamp(44px, 5vw, 53px); }
}

/* ---- Corrective pass: page-wide width harmony on the Client page.
   Widening only .client-hero__grid left the page feeling disjointed —
   the hero above used one width, while .client-mini-grid (the six hero
   summary cards) and #full-access (summary + Built For panel, using the
   shared .container / root --content-max) each used their own, narrower,
   unrelated widths. Aligning all three to the same width formula makes
   the page read as one consistent column instead of three misaligned
   ones. Scoped to #top (hero + mini-grid) and #full-access specifically
   — no other Client section or any other page is affected, since
   .container's root --content-max is untouched everywhere else. */
@media (min-width: 940px){
  .client-mini-grid{ width: min(calc(100% - 200px), clamp(1154px, 80vw, 1220px)); }
}

/* ==========================================================================
   V4352R5.10 — FINAL FULL ACCESS COMPONENT GEOMETRY AUTHORITY
   Single consolidated block. Supersedes and replaces every prior corrective
   width/padding override for this component from V4352R5.8's third round
   (all of which are removed above this comment, not just overridden again).

   Two failed models tried before this one, kept here for the record:
   (a) fixed max-width on the shell AND the inner grids — cards read as
       chunky at any width, but the shell no longer tracked the viewport,
       so wide screens showed a large, static empty margin outside it.
   (b) shell width as a constant percentage of the viewport, inner grids
       fully unbounded — the shell finally filled the screen consistently,
       but with no cap on the inner grids the six cards and the narrative
       column grew in lock-step with the shell, turning into wide, thin,
       "esticado" panoramic bands at large widths (the owner's Photo 1).

   This block treats panel shell, inner stage and the two content grids as
   four independent, separately-bounded levels, per the two-screen visual
   contract: the shell grows moderately and then stops (a professional cap,
   not a percentage that keeps climbing forever), while the narrative
   column and the six-card grid are capped at the width their own content
   was written for — matching Photo 2's density at every desktop width,
   not just at Photo 2's own window size. */

/* ---- LEVEL 1: panel shell. Bounded-fluid: grows with the viewport up to
   a point, then holds. Reference widths measured against the contract's
   own evaluation ranges (checked via rendering, not just formula math):
     953px  -> ~810px  (target ~780-840)
     1366px -> ~1039px (target ~1020-1140)
     1440px -> ~1094px (target ~1060-1180)
     1600px -> ~1216px (target ~1120-1240)
     1920px -> 1280px, capped (target ~1180-1280)
   940-952px (just above the tablet/mobile breakpoint) also clamps to the
   800px floor, which is still comfortably inside the Photo-2 silhouette. */
@media (min-width: 940px){
  #full-access.container, #full-access .container{ width: clamp(800px, 76vw, 1280px); }
  .full-access-shell__grid{ gap: clamp(24px, 2.5vw, 40px); }
}

/* ---- LEVEL 2: inner stage. No separate wrapper element was introduced
   (the existing markup/IDs/copy are preserved exactly, per the
   minimal-reconstruction option) — the shell's own padding already acts
   as the "stage inset" the contract calls for: at a 1280px shell with
   clamp(22px,3vw,34px) padding, the content box is ~94% of the shell's
   width, inside the contract's 88-94% target range; at narrower shells
   the padding-to-width ratio only grows, keeping the ratio in-range. */

/* ---- LEVEL 3: upper overview (narrative + Built For). The two tracks
   already fill their own grid columns (1.3fr / minmax(240px,1fr), base
   rule above) — that part was never the problem. The narrative column's
   own `max-width:60ch` (base rule) is KEPT, not removed: a 50-64ch
   measure is what the contract asks for, and with the shell now properly
   bounded (max 1280px, not the ~2000px tried before), the unused strip
   this leaves beside the text column is modest (well under the ~6% of
   stage width ceiling) rather than the wide dead canyon it was over a
   near-2000px shell. The real defect (space-between forcing gaps inside
   the narrative box) is fixed above, at the base rule. */

/* ---- LEVEL 4: feature cluster (six PK Auto-Fighter / PvM Assist / ...
   cards). Given its own bounded max-inline-size, independent of the
   shell, and centered — this is what keeps the cards at the contract's
   target ~270-340px width and a healthy, non-banner aspect ratio at
   every desktop width, instead of growing in lock-step with the shell. */
@media (min-width: 940px){
  .full-access-shell__cards{
    max-width: 1000px;
    margin-inline: auto;
  }
  #full-access .client-feature-card{ padding: 22px; gap: 10px; min-block-size: 128px; }
}

/* ---- V4352R5.3: Built For rows converted to real deep-link anchors ----
   .full-access-use-item above now carries display/text-decoration/cursor
   normalization directly (edited in place) since every row is an <a> now.
   scroll offset for all seven targets (including the five <details>
   category wrappers) is already handled by the existing global
   html{ scroll-padding-top: ... } rule — no per-element scroll-margin
   needed here. */

/* ---- V4352R5.4: height-aware compact desktop mode for #full-access ----
   Activates only when width is sufficient for the two-column desktop
   composition AND viewport height is short (laptop-class screens at
   normal browser zoom). Tall desktop/mobile/tablet layouts are untouched.
   All reductions stay within the ranges validated against the shell's
   real content; nothing is hidden, no fixed heights, no scale/zoom. */
@media (min-width: 1180px) and (max-height: 920px){
  #full-access{ padding-block: 20px; }
  #full-access .full-access-shell{ padding: 20px; }
  #full-access .full-access-shell__label{ margin-bottom: 6px; }
  #full-access .full-access-shell__heading{ font-size: clamp(1.75rem, 1.9vw, 2.1rem); }
  #full-access .full-access-shell__grid{ margin-top: 14px; gap: clamp(16px, 2vw, 24px); }
  /* compact-height: do not stretch the narrative to match the Built For
     panel — start-aligned and tightened so it never works against
     viewport fitting, per the V4352R5.4 compaction contract. */
  #full-access .full-access-shell__summary{ align-content: start; gap: 10px; padding: 14px 16px 14px 18px; }
  #full-access .full-access-shell__summary p{ font-size: .93rem; line-height: 1.48; }
  #full-access .full-access-shell__summary p:not(:first-child){ padding-top: 10px; }
  #full-access .full-access-summary__uses{ padding: 14px; }
  #full-access .full-access-summary__uses-title{ margin-bottom: 8px; }
  #full-access .full-access-use-list{ gap: 6px; }
  #full-access .full-access-use-item{ min-height: 38px; padding: 8px 30px 8px 22px; font-size: .82rem; }
  #full-access .full-access-shell__cards{ margin-top: 16px; gap: 10px; }
  #full-access .client-feature-card{ padding: 12px; gap: 6px; }
  #full-access .client-feature-card > span{ font-size: .82rem; }
}
@media (min-width: 940px) and (max-width: 1179px) and (max-height: 820px){
  #full-access{ padding-block: 22px; }
  #full-access .full-access-shell{ padding: 20px; }
  #full-access .full-access-shell__summary{ align-content: start; padding: 14px 16px 14px 18px; }
  #full-access .full-access-shell__summary p{ font-size: .93rem; line-height: 1.48; }
  #full-access .full-access-shell__summary p:not(:first-child){ padding-top: 10px; }
  #full-access .full-access-use-item{ min-height: 38px; font-size: .82rem; }
  #full-access .full-access-shell__cards{ margin-top: 16px; gap: 10px; }
  #full-access .client-feature-card{ padding: 12px; }
}
/* touch/coarse-pointer must always keep the 44px row target regardless of
   the compact-height reduction above, per the accessibility contract. */
@media (pointer: coarse){
  #full-access .full-access-use-item{ min-height: 44px; }
}