/* case-study.css: page-specific CSS for /case-studies/same-login-two-outcomes,
   loaded after site.css. Article layout (evidence stats, the team/system
   comparison card, practice cards, the projection callout, the download and
   CTA bands, the author bio) plus this page's one device: a running receipt
   that accumulates the case study's own figures as the reader passes them
   (case-study.js). >=1100px: a sticky rail in the grid's right-hand column,
   one line added per figure as its element crosses 60% of the viewport.
   <1100px (phone and tablet alike): no sticky rail at all -- .cs-rail-close
   is a plain in-flow block near the end of the article, written out in full
   from the start, so nothing ever overlays the copy at any scroll position.
   No box-shadow, no @keyframes, no gradient text, no radial-gradient, lime
   reserved for the mark and the one CTA per view; lime-read reserved for
   the single largest stat value (287). */

/* site.css sets body{overflow-x:clip} only; the CSS overflow spec then
   auto-computes overflow-y to "auto" (mixing visible with a non-visible
   axis forces the visible one to auto), which quietly turns body into a
   scroll container -- and that breaks position:sticky everywhere on the
   page, because sticky elements start sticking relative to body's own
   box instead of the real viewport (proven: computed position stayed
   "sticky" but the rail's bounding rect scrolled off exactly like static
   content). Setting overflow-y:clip too (matching overflow-x) sidesteps
   the visible/non-visible pairing rule so neither axis gets forced to
   auto, and clip does not establish a scrolling box, so sticky is
   restored. Page-scoped only (this file loads on this page alone); does
   not touch site.css. */
body { overflow-y: clip; }

/* -------------------------------------------------------------- hero */
.hero.planes { position: relative; overflow: hidden; }
.hero .plane-far { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-scrim {
  position: absolute; inset: 0; height: 76%;
  background: linear-gradient(180deg, rgba(10,14,26,.95) 0%, rgba(10,14,26,.88) 38%, rgba(10,14,26,.58) 66%, rgba(10,14,26,0) 100%);
}
.hero .plane-mid { position: absolute; left: 0; right: 0; bottom: 132px; height: 120px; }
.hero .plane-near { position: absolute; left: 0; right: 0; bottom: -8px; height: 56px; }
.hero .plane-mid svg, .hero .plane-near svg { display: block; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 2; padding: 108px 0 36px; max-width: 920px; }
/* Eyebrow stays the shared dim token (site.css default) like every other
   page; no page-specific colour override. */
h1.cs-title { max-width: 900px; margin-bottom: 20px; }
.standfirst { font-size: 18px; line-height: 1.55; color: var(--text); max-width: 52ch; margin-bottom: 28px; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-act .btn-outline { display: inline-flex; align-items: center; gap: 9px; }
.hero-act .btn-outline svg { flex: none; }

/* ------------------------------------------------------------ readif */
.readif { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 24px 26px; margin: 30px 0 8px; max-width: 620px; }
.readif-k { font: 600 12px Orbitron, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.readif ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.readif li { position: relative; padding-left: 24px; font-size: 15px; color: var(--text); line-height: 1.5; }
.readif li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--cyan); transform: rotate(45deg); }

/* -------------------------------------------------- article + rail grid
   >=1100px only: the sticky receipt rail lives in the right-hand grid
   column and accumulates live as the reader scrolls (case-study.js).
   Below 1100px there is no sticky rail at all -- the static, fully-written
   .cs-rail-close block near the end of the article (in-flow, not sticky)
   does that job instead, so nothing ever overlays the copy on a phone or
   tablet. */
.cs-grid { padding: 8px 0 0; }
.cs-article { max-width: 680px; }
.cs-rail { display: none; }

@media (min-width: 1100px) {
  .cs-grid { display: grid; grid-template-columns: minmax(0, 680px) 240px; column-gap: 44px; justify-content: space-between; align-items: start; }
  .cs-rail {
    display: block; position: sticky; top: 132px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 20px 20px 22px; max-height: calc(100vh - 168px); overflow-y: auto;
    /* Starts invisible so the panel never reads as an empty, broken box
       while the reader is still above the first figure; case-study.js
       adds .is-active the instant the first line lands (immediately, on
       load, if that first figure is already in view). Space is already
       reserved by the grid column, so this causes no layout shift. */
    opacity: 0; transition: opacity .4s ease;
  }
  .cs-rail.is-active { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .cs-rail { transition: none; }
  }
}

.cs-rail-h { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; }
.cs-rail-note { font-size: 12.5px; line-height: 1.45; color: var(--text-faint); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cs-rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-height: 20px; }
.cs-rail-list li {
  font: 500 13px/1.4 'JetBrains Mono', monospace; color: var(--cyan);
  padding-left: 14px; position: relative;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.cs-rail-list li.is-in { opacity: 1; transform: none; }
.cs-rail-list li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--text-faint); }
.cs-rail-list li.is-big { color: var(--lime-read); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .cs-rail-list li { transition: none; }
}

/* Totalled receipt, static: phone and tablet (<1100px). Renders once, in
   full, in flow with the article -- no sticky, no overlay, nothing ever
   covers the copy at any scroll position. Sits at the close, right after
   the last content section and before the download/CTA bands, so it reads
   as the totalled record once the read is done. */
.cs-rail-close { margin: 8px 0 30px; }
.cs-rail-close .cs-rail-note { margin-bottom: 14px; padding-bottom: 0; border-bottom: none; }
.cs-rail-close-box { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 22px 22px 20px; }
.cs-rail-close .cs-rail-h { margin-bottom: 14px; }
.cs-rail-close-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; }
.cs-rail-close-list li {
  font: 500 13px/1.4 'JetBrains Mono', monospace; color: var(--cyan);
  padding-left: 14px; position: relative;
}
.cs-rail-close-list li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--text-faint); }
.cs-rail-close-list li.is-big { color: var(--lime-read); font-weight: 600; }
@media (min-width: 1100px) { .cs-rail-close { display: none; } }
@media (max-width: 480px) { .cs-rail-close-list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- section scaffold */
.cs-article section { padding: 44px 0 8px; border-top: 1px solid var(--border); }
.cs-article section:first-of-type { border-top: none; padding-top: 4px; }
.cs-article h2 { max-width: 42ch; margin-bottom: 18px; }
.cs-article p { margin: 0 0 18px; color: var(--text); line-height: 1.65; }
.cs-article p:last-child { margin-bottom: 0; }
.lead { font-size: 18px; line-height: 1.6; }
.pull {
  font-weight: 700; font-size: clamp(19px, 2.4vw, 22px); line-height: 1.32;
  color: var(--text); margin: 22px 0 4px; padding-left: 20px; border-left: 3px solid var(--cyan);
}

/* ----------------------------------------------------------- stat cards */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 8px 0 26px; }
.statcard { border: 1px solid var(--border); border-radius: 14px; padding: 20px 16px 16px; background: var(--surface); }
.stat-num { font: 600 clamp(24px, 3.6vw, 32px)/1 'JetBrains Mono', monospace; letter-spacing: -0.5px; color: var(--cyan); }
.statcard.is-max .stat-num { color: var(--lime-read); }
.stat-lbl { font-size: 12px; color: var(--text-dim); margin-top: 10px; line-height: 1.4; }
.stat-lbl b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------- evidence panel */
.evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.epanel { border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: var(--surface); }
.epanel.sys { border-color: rgba(184,230,46,.28); }
.epanel-h { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 14px; color: var(--text-dim); }
.epanel.sys .epanel-h { color: var(--lime-read); }
.epanel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.epanel li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--text); line-height: 1.5; }
.epanel li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.epanel.sys li::before { background: var(--cyan); }
.costline { margin-top: 20px; font-size: 15.5px; }
.costline b { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--cyan); }

/* ----------------------------------------------------- comparison card */
.cmp { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 18px; padding: 24px 26px 20px; margin: 6px 0 8px; }
.cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-col-title { font: 700 13px Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp-col-title.team { color: var(--text-dim); }
.cmp-col-title.sys { color: var(--lime-read); }
.cmp-col-sub { font: 500 10.5px 'JetBrains Mono', monospace; color: var(--text-faint); margin-top: 4px; }
.cmp-measure { text-align: center; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin: 16px 0 2px; }
.cmp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 8px 0 4px; }
.chartbox svg { max-width: 220px; margin: 0 auto; display: block; }
.chart-cap { font: 500 10px 'JetBrains Mono', monospace; color: var(--text-faint); text-align: center; margin-top: 6px; }
.chart-tag { display: block; font: 700 10px Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; text-align: center; }
.chart-tag.down { color: var(--text-dim); }
.chart-tag.up { color: var(--cyan); }
.cmp-rows { margin-top: 12px; border-top: 1px solid var(--border); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cmp-row:last-child { border-bottom: none; }
.cmp-rlabel { grid-column: 1 / -1; text-align: center; font: 500 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.cmp-cell { font-size: 14px; line-height: 1.5; }
.cmp-cell.team { color: var(--text-dim); }
.cmp-cell.sys { color: var(--text); }
.cmp-cell .big { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--cyan); }

/* --------------------------------------------------------------- good */
.good { margin-top: 4px; display: grid; }
.good-item { padding: 20px 0; border-top: 1px solid var(--border); }
.good-item:first-child { border-top: none; }
.good-item h3 { position: relative; padding-left: 24px; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 8px; color: var(--text); }
.good-item h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.good-item p { margin: 0 0 0 24px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------ practice */
.practice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; }
.pcard h3 { font-weight: 600; font-size: 16px; margin: 0 0 10px; color: var(--text); }
.pcard p { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* ----------------------------------------------------- projection callout */
.proj { border: 1px dashed #7a6633; border-radius: 14px; background: rgba(199,154,62,.06); padding: 20px 24px; margin: 20px 0; }
.proj-k { font: 700 10.5px Orbitron, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #c79a3e; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.proj-k::before { content: ""; width: 12px; height: 12px; border: 1.5px solid #c79a3e; border-radius: 50%; flex: none; }
.proj p { margin: 0; font-size: 15px; line-height: 1.6; }

/* -------------------------------------------------------------- download */
.download {
  margin: 16px 0 6px; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.dl-ico {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  background: rgba(0,227,228,.10); border: 1px solid var(--cyan);
  display: flex; align-items: center; justify-content: center;
}
.dl-text { flex: 1; min-width: 180px; }
.dl-h { font-weight: 700; font-size: 16px; color: var(--text); margin: 0 0 3px; }
.dl-sub { font-size: 13px; color: var(--text-dim); margin: 0; }
.download .btn-outline { display: inline-flex; align-items: center; gap: 8px; }

/* -------------------------------------------------------------- CTA band */
.cta-band { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 18px; padding: 40px 38px 36px; margin: 32px 0 8px; }
.cta-k { font: 600 11px Orbitron, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.cta-band h2 { margin: 0 0 14px; }
.cta-band .cta-lead { color: var(--text); font-size: 18px; line-height: 1.5; margin-bottom: 12px; }
.cta-band p { color: var(--text-dim); font-size: 16px; margin: 0 0 10px; max-width: 48em; }
.cta-band .cta-note { margin-top: 18px; font-size: 13.5px; color: var(--text-faint); }

/* ------------------------------------------------------------------ bio */
.bio { margin-top: 4px; padding: 28px 0 4px; border-top: 1px solid var(--border); }
.bio-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bio-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex: none; }
.bio-tagline { font-style: italic; color: var(--text); margin: 0 0 4px; font-size: 14.5px; }
.bio-credit { margin: 0; font-size: 13px; color: var(--text-dim); }
.bio h3 { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin: 0 0 12px; }
.bio p { font-size: 15px; color: var(--text-dim); line-height: 1.6; margin: 0 0 16px; }
.bio b { color: var(--text); font-weight: 700; }
.rights { font: 500 11.5px 'JetBrains Mono', monospace; color: var(--text-faint); margin: 0 !important; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 720px) {
  .hero-inner { padding: 40px 0 44px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .evidence { grid-template-columns: 1fr; }
  .practice { grid-template-columns: 1fr; }
  .cmp { padding: 20px 16px; }
  .cmp-head, .cmp-charts, .cmp-row { gap: 12px; }
  .download { padding: 20px 18px; }
  .cta-band { padding: 28px 22px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cmp-charts { grid-template-columns: 1fr 1fr; }
}