/* =====================================================
   RASPBERRY IQ — page styles
   Loaded AFTER styles.css; inherits every token, the nav,
   the footer, the cursor and the buttons from it.
   ===================================================== */

/* =====================================================
   LAYOUT SHELL
   Sections stay full-bleed so their scrims and backgrounds still span the
   window; only the CONTENT is capped and centred. Vertical padding is
   declared per section with padding-block so it never fights this.

   Four sections share ONE content/canvas split — 56 / 44 — because they
   previously used four different systems and the text edge wandered
   between them. The 44 column is the window onto the form; js/iq-hero
   derives the form's position from it, so they cannot drift apart.
   ===================================================== */
.iq-hero, .premise, .core, .branches,
.licence, .line-drawn, .iq-proof, .addon, .iq-cta {
  padding-inline: max(var(--pad), calc((100% - var(--shell-stage)) / 2));
}

/* ---------- the pinned stage ----------
   The canvas is FIXED and switched off once the stage has been
   scrolled past, rather than sticky.

   A sticky element with `margin-bottom: -100svh` keeps pinning for a
   whole viewport BEYOND its container — the negative margin extends the
   sticky constraint rect — so the form bled through the licensing
   section below. Fixed + an explicit toggle is predictable and testable.

   It defaults to VISIBLE so that with no JS the hero still has its
   visual; the toggle only ever turns it off. */
.iq-stage { position: relative; }

.iq-stage__canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100svh;
  z-index: 0;
  pointer-events: none;
  opacity: 1;   /* JS fades this on scroll; no transition, or it lags the scrub */
}
.iq-hero__canvas { width: 100%; height: 100%; display: block; }
html.no-iqhero .iq-hero__canvas { display: none; }

/* every section paints above the fixed canvas */
main section { position: relative; z-index: 1; }

.iq-hero__fallback {
  position: absolute; top: 50%; left: 50%;
  width: min(40vh, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.6s ease;
}
html.no-iqhero .iq-hero__fallback { opacity: 0.8; }
.iq-hero__fallback img { width: 100%; height: 100%; }

/* ---------- hero ---------- */
.iq-hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  align-content: center;
  padding-block: 7rem 4rem;
}
.iq-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(65% 55% at 20% 45%, rgba(13, 6, 10, 0.94) 0%, rgba(13, 6, 10, 0.6) 48%, transparent 80%);
  pointer-events: none;
}
/* the hero used to carry an extra clamp(0,3vw,64px) indent that no other
   section had, so the copy jogged 64px left on scrolling out of the hero */
.iq-hero__inner { grid-column: 1; max-width: 46rem; }

.iq-hero__logo {
  display: block; width: clamp(230px, 30vw, 400px); height: auto;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
/* ⚠ Sized against the LONGEST line, not by eye. The content column caps at
   46rem (736px), and "Seven statutes." needs ~6.85px of width per 1px of
   font-size — so anything above ~6.67rem wraps, and `.line`'s overflow makes a
   wrapped headline look like a third line rather than an error. A previous pass
   set 8vw/6.8rem and silently wrapped at every width from 1216px up.
   If the headline text changes, re-measure before raising these numbers. */
.iq-hero__title {
  font-family: var(--font-display); font-weight: 600;
  /* min(vw, vh) for the same reason as .hero__title: vw alone put this
     hero's CTA below the fold on a 1366x768 laptop. */
  font-size: clamp(2.9rem, min(7.2vw, 12vh), 6.6rem);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
}
.iq-hero__sub {
  max-width: 34rem; color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  margin-bottom: 2.2rem;
}
.iq-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.iq-hero__foot {
  position: absolute; left: 0; right: 0; bottom: 1.8rem;
  padding-inline: max(var(--pad), calc((100% - var(--shell-stage)) / 2));
  display: flex; justify-content: flex-end;
}

/* ---------- premise ---------- */
.premise {
  padding-block: clamp(6rem, 16vh, 12rem);
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
}
.premise > * { grid-column: 1; }
/* same rule as .core / .branches: the scrim must clear the canvas column.
   A radial centred at 40% still reached the form and dimmed it ~30%. */
.premise::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(42% 52% at 78% 50%, rgba(232, 38, 94, 0.09), transparent 72%),
    linear-gradient(to right, rgba(13, 6, 10, 0.94) 0%, rgba(13, 6, 10, 0.9) 48%, rgba(13, 6, 10, 0.28) 68%, transparent 86%);
}
.premise__kicker { margin-bottom: 1.6rem; }
.premise__text {
  max-width: 54rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, min(3.6vw, 4.8vh), 3rem);
  line-height: 1.35; letter-spacing: -0.01em;
  text-wrap: balance;
}
.premise__text em { color: var(--accent-soft); font-style: normal; }

/* ---------- IQ Core — the spine ---------- */
/* Content sits left and the pinned form stays visible on the right — the same
   composition as the hero. The third column is deliberately empty: it is the
   window onto the canvas, and without it the scrim buries the simulation the
   whole section exists to demonstrate. */
.core {
  padding-block: clamp(5rem, 12vh, 9rem) clamp(6rem, 14vh, 10rem);
  display: grid;
  /* Head STACKS above the rail in the content column rather than sitting
     beside it. Splitting 56 into head+rail left both cramped — the head fell
     to 287px at 1440 — and stacking also matches .branches, where the head
     sits above the tiles. The rail now gets the full content column. */
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* same fix as .branches — the vertical layer was dimming the form it sits beside */
.core::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(42% 52% at 80% 50%, rgba(232, 38, 94, 0.09), transparent 72%),
    linear-gradient(to right, rgba(13, 6, 10, 0.94) 0%, rgba(13, 6, 10, 0.9) 52%, rgba(13, 6, 10, 0.3) 72%, transparent 88%);
}
.core__head { grid-column: 1; max-width: 40rem; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.rail { grid-column: 1; }

/* the rail: one continuous line with a node per capability */
.rail { position: relative; padding-left: 2.1rem; list-style: none; }
.rail::before {
  content: ''; position: absolute; left: 5px; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.rail__item { position: relative; padding-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.rail__item:last-child { padding-bottom: 0; }
.rail__item::before {
  content: ''; position: absolute; left: -2.1rem; top: 0.55rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(255, 92, 138, 0.35);
}
.rail__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.15;
  letter-spacing: -0.01em; margin-bottom: 0.6rem;
}
.rail__body { color: var(--muted); max-width: 34rem; margin-bottom: 0.9rem; }
.rail__body em { color: var(--text); font-style: normal; }
.rail__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rail__chips li {
  font-size: 0.76rem; letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- the branches ---------- */
.branches {
  padding-block: clamp(5rem, 12vh, 9rem) clamp(7rem, 16vh, 11rem);
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* ⚠ The scrim must not reach the form.
   This used to stack a to-bottom gradient at 0.5 black across the WHOLE section
   on top of the to-right one — so even where the horizontal scrim had faded to
   transparent, the vertical layer was still laying 50% black over the
   simulation, and the species read as muddy versions of themselves. One
   horizontal layer only, plus a glow that LIFTS the form rather than dimming it. */
.branches::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(44% 54% at 78% 50%, rgba(232, 38, 94, 0.11), transparent 72%),
    linear-gradient(to right, rgba(13, 6, 10, 0.95) 0%, rgba(13, 6, 10, 0.93) 46%, rgba(13, 6, 10, 0.3) 66%, transparent 82%);
}
/* head and tiles both live in the left column; the right column is the
   window onto the form, so hovering a tile and watching it morph is one
   glance rather than two. */
.branches__head { grid-column: 1; margin-bottom: clamp(1.6rem, 3vh, 2.4rem); }
.tiles { grid-column: 1; }

.species__kind {
  margin-top: 1.1rem; min-height: 1.5em;
  font-size: 0.9rem; color: var(--muted); font-style: italic;
}
.species__kind b { color: var(--text); font-style: normal; font-weight: 600; }

.tiles {
  display: grid; gap: clamp(0.8rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  max-width: 60rem;   /* a tile should never read as a slab */
}
.tile {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.028);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.tile:hover, .tile:focus-visible, .tile.is-held {
  border-color: rgba(255, 92, 138, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}
.tile.is-held { border-color: var(--accent); }
.tile__sig {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 0.7rem;
}
.tile__sig i { font-style: normal; color: var(--muted); letter-spacing: 0.06em; }
.tile__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.15;
  letter-spacing: -0.01em; margin-bottom: 0.6rem;
}
/* Each product's own logo stands in for its name.
   ⚠ Size by HEIGHT, never width. The logos share a ~610px cap-height grid but
   range from 1.90:1 (RH IQ) to 3.63:1 (Hospital IQ), so a fixed width would
   render the narrow ones tiny — exactly the bug the homepage hit when Hospital
   IQ was redrawn and kept its old sizing class. max-width guards the widest. */
.tile__logo {
  display: block;
  height: clamp(2.1rem, 3.1vw, 2.7rem);
  width: auto;
  max-width: 100%;
  margin-bottom: 0.15rem;
}
.tile__desc { color: var(--muted); font-size: 0.94rem; margin-bottom: 1rem; }
.tile__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.tile__chips li {
  font-size: 0.72rem; padding: 0.24rem 0.62rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.tile__foot { margin-top: auto; }
.tile__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.88rem; font-weight: 600; color: var(--accent-soft);
}
.tile__link:hover { text-decoration: underline; }
.tile__status {
  display: inline-block;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px dashed var(--line); color: var(--muted);
}

/* =====================================================
   Sections below the stage — plain background, no canvas
   ===================================================== */

/* (opaque-background rule lives at the END of this block — see the note there) */

/* ---------- licensing ---------- */
.licence { padding-block: clamp(6rem, 14vh, 10rem); }
/* §05 has no canvas, so reserving a right column there was pure dead space.
   Editorial split instead: the statement left, the argument right. */
.licence__inner {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* two real children, not five auto-placed ones: auto-placement locked each
   right-hand item to the ROW of a left-hand item, so the tall title forced a
   gap between the paragraphs */
.licence__head { grid-column: 1; }
.licence__col { grid-column: 2; }
.licence__body {
  color: var(--text); font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  max-width: 38rem; margin-bottom: 1.2rem;
}
.licence__body--muted { color: var(--muted); margin-bottom: 2.2rem; }

/* ---------- the line we draw ---------- */
.line-drawn {
  padding-block: clamp(5rem, 12vh, 9rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.016), transparent 40%);
}
.line-drawn__head { max-width: 46rem; margin-bottom: clamp(2.6rem, 6vh, 4rem); }

/* two columns, not auto-fit: four principles across three tracks leaves a
   lone orphan on the second row */
.principles {
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}
.licence .section-head__title,
.addon .section-head__title { margin-bottom: 1.4rem; }
.principle { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.principle::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 3rem; height: 2px; background: var(--accent);
}
.principle__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.18rem; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.6rem;
}
.principle__body { color: var(--muted); font-size: 0.96rem; max-width: 32rem; }
.principle__body em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---------- proof ---------- */
.iq-proof {
  padding-block: clamp(4rem, 9vh, 6.5rem);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.iq-proof__grid {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.iq-proof__stat { display: flex; flex-direction: column; gap: 0.5rem; }
.iq-proof__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, min(5.5vw, 6.4vh), 4rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--accent-soft); font-variant-numeric: tabular-nums;
}
.iq-proof__label {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- adding a domain ---------- */
.addon {
  padding-block: clamp(6rem, 14vh, 10rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.addon__body { color: var(--muted); max-width: 32rem; margin-bottom: 1.1rem; }
.addon__body--muted { color: var(--muted); opacity: 0.82; }
/* min-width:0 is load-bearing: a grid item defaults to min-width:auto, so the
   <pre> refuses to shrink below its longest line and widens the whole page
   instead of scrolling inside itself. */
.addon__code { margin: 0; min-width: 0; }
.addon__code pre {
  overflow-x: auto;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.028);
  font-size: clamp(0.78rem, 1.05vw, 0.9rem); line-height: 1.75;
}
.addon__code code { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace; color: var(--text); }
.addon__code .c-k { color: #ff8fb4; }
.addon__code .c-v { color: #9fd0ff; }
.addon__code .c-s { color: #ffd28a; }
.addon__code .c-c { color: var(--muted); font-style: italic; }
.addon__code figcaption {
  margin-top: 0.8rem; font-size: 0.78rem; color: var(--muted); font-style: italic;
}

/* ---------- closing CTA ---------- */
.iq-cta {
  padding-block: clamp(6rem, 15vh, 11rem);
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 100% at 50% 100%, rgba(232, 38, 94, 0.10), transparent 70%);
}
.iq-cta__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, min(7vw, 8vh), 5rem); line-height: 1; letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.iq-cta__sub { color: var(--muted); max-width: 34rem; margin: 0 auto 2.4rem; }
.iq-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ⚠ MUST come after every section above that declares a `background:`
   SHORTHAND. The shorthand resets background-color to transparent, so when
   this rule sat above them, .line-drawn and .iq-cta stayed see-through and the
   fixed canvas showed straight through "The line we draw". Opacity here is
   what lets the canvas fade on its own schedule instead of being revealed by
   a transparent section. */
.licence, .line-drawn, .iq-proof, .addon, .iq-cta { background-color: var(--bg); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* minmax(0, 1fr), not 1fr — a bare 1fr track is minmax(auto, 1fr) and lets
     the code block push the page sideways */
  .addon { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  /* no room for a window onto the canvas — drop the spacer column and let the
     scrim go full-width so the copy stays readable over whatever is behind it */
  .iq-hero, .premise { grid-template-columns: minmax(0, 1fr); }
  .core { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .branches { grid-template-columns: 1fr; }
  .tiles { max-width: none; }
  .licence__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .licence__head, .licence__col { grid-column: 1; }
  .core::before, .branches::before {
    background: linear-gradient(to bottom, transparent, rgba(13, 6, 10, 0.9) 8%, rgba(13, 6, 10, 0.9) 92%, transparent);
  }
}
@media (max-width: 900px) {
  .core { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .iq-hero { padding-block-start: 6rem; }
  .iq-hero__title { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .iq-hero__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover, .tile:focus-visible, .tile.is-held { transform: none; }
}