/* ═══════════════════════════════════════════════════════════
   Rkieh Productions — Phase 5 · Connected Systems
   ───────────────────────────────────────────────────────────
   A layer on top of site.css, not a replacement. Everything the
   earlier phases approved — the oat ground, the red identity, the
   Instrument Serif accent, the type scale — stays exactly as it is.
   What this adds is the experience language:

     · THE SIGNAL   one red line enters at the hero and runs the whole
                    page. Sections are stations on it, not a stack.
     · THE FIELD    the four capability demos share one dark console
                    field, so they read as one connected system.
     · THE MARKS    monospace annotation, tick rules and crop marks —
                    an engineering/production drawing vocabulary that
                    belongs to a company that does operations and film.

   Motion rules: transforms and opacity only. Every animated element is
   readable and correctly positioned before any script runs, so reduced
   motion and script failure both land on a finished-looking page.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Phase 5 tokens ──────────────────────────────────── */
:root{
  /* the signal — the Rkieh Productions red, named for what it does here */
  --sig:#d42b30;
  --sig-2:#ff5a5f;
  --sig-glow:rgba(212,43,48,.42);
  --sig-haze:rgba(212,43,48,.10);

  /* the console field: a warm near-black, not a blue-black */
  --field:#131211;
  --field-2:#1c1a18;
  --field-3:#252220;
  --field-ink:#f3f1ec;
  --field-ink-2:#a8a49c;
  /* 4.03 / 3.73 / 3.40 on the three field surfaces — it was the faintest
     text on the page, and it was carrying stage names. Now 6.28 / 5.83 / 5.31. */
  --field-ink-3:#9a958c;
  --field-line:rgba(243,241,236,.13);
  --field-line-2:rgba(243,241,236,.07);

  /* one family accent each — used only as a system tint, never as a
     second brand colour. Red stays the signal. */
  --fam-operations:#12ab66;
  --fam-media:#f2b622;
  --fam-applications:#0a83f5;
  --fam-enterprise-ai:#8358f4;

  --t-mono:.6875rem;
  --mono-track:.16em;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* Visually hidden but announced. The capability rows use a full-row link
   whose only text is the row's title, which sighted readers already have. */
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 2. Technical annotation ────────────────────────────── */
/* Small uppercase monospace with a tick. Used for stage numbers, system
   names and scene labels — the drawing vocabulary, never body copy. */
.mono{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:var(--mono-track);text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.tick{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink-3)}
.tick::before{content:"";inline-size:.9rem;block-size:1px;background:currentColor;
  opacity:.55;flex:none}

/* Crop marks — the corner registration marks on a console frame. */
.cropped{position:relative}
.cropped::before,.cropped::after{
  content:"";position:absolute;inline-size:14px;block-size:14px;pointer-events:none;
  border-color:var(--field-line);border-style:solid;border-width:0;
}
.cropped::before{inset-block-start:-1px;inset-inline-start:-1px;border-top-width:1.5px;border-left-width:1.5px}
.cropped::after{inset-block-end:-1px;inset-inline-end:-1px;border-bottom-width:1.5px;border-right-width:1.5px}

/* ── 3. The signal rail ─────────────────────────────────── */
/* A hairline that runs the height of a narrative section with a pulse
   travelling down it. Purely decorative: it carries no information that
   is not also in the headings, so it is hidden from assistive tech. */
.rail{position:absolute;inset-block:0;inline-size:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.rail::after{
  content:"";position:absolute;inset-inline:-1px;block-size:var(--rail-fill,0%);
  inset-block-start:0;background:linear-gradient(180deg,var(--sig),var(--sig));
  box-shadow:0 0 14px 1px var(--sig-glow);border-radius:2px;
}
.rail-node{position:absolute;inset-inline-start:50%;translate:-50% -50%;
  inline-size:9px;block-size:9px;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--line);transition:border-color .3s,background .3s,scale .3s var(--ease-out)}
.rail-node.lit{border-color:var(--sig);background:var(--sig);scale:1.18;
  box-shadow:0 0 0 5px var(--sig-haze)}

/* ── 4. HERO — the first screen ─────────────────────────
   The hero's COMPOSITION — a daylight scene above the words, and the four
   systems standing in it — is built in experience.css, where the environment
   it belongs to lives. What stays here is the vocabulary the first screen
   shares with the rest of the site: the kicker pill, the display setting of
   the headline, and the pair of actions under it. */
.p5hero{position:relative;overflow:clip}

.p5hero-in{position:relative;display:grid;inline-size:100%;
  grid-template-columns:minmax(0,1fr);
  row-gap:clamp(1.1rem,.8rem + 1.4vw,1.8rem)}

.p5hero-head,.p5hero-body{position:relative;z-index:2}
.p5hero-kicker{display:inline-flex;align-items:center;gap:.65rem;
  padding:.35rem .45rem .35rem .85rem;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-sm);
  color:var(--ink-2);font-size:var(--t-sm);font-weight:600;letter-spacing:-.008em}
.p5hero-kicker b{background:var(--ink);color:var(--oat-50);border-radius:var(--r-pill);
  padding:.3rem .7rem;font-size:var(--t-xs);letter-spacing:.075em;font-weight:700}
.p5hero-kicker .sigdot{inline-size:.45rem;block-size:.45rem;border-radius:50%;
  background:var(--sig);margin-inline-end:.1rem;flex:none}

.p5hero h1{
  margin-block:clamp(1rem,.85rem + 1vw,1.7rem) 0;
  /* CLAY'S SETTING AND, SINCE 2026-09-05, CLAY'S SIZE. The cap that used to
     stand here — clamp(2.4rem,1.1rem + 3.4vw,4rem) — was never about the
     CSS. Their h1 is 88px because their headline is four words: "Build
     systems to grow revenue"; ours was eight, and at 88px inside a 19ch
     measure it set in four lines and pushed the copy block up into the lower
     pods — measured, it overlapped at 11 of 26 viewports, by as much as
     154px. The note left the condition on the record: shorten the headline
     and --t-h1 can come straight back.
     The headline is now five words, so it did. Re-measured at the same 26
     viewports after the restore: no overlap, the lead and both actions stay
     above the fold, and the headline holds the 50–82% band the tests set
     for where the words sit in the frame. Lengthen the headline again and
     this has to be re-measured before it can stay. */
  font-size:var(--t-h1);
  line-height:1;letter-spacing:-.04em;font-weight:575;text-wrap:balance;
}
.p5hero h1 .ser{font-size:inherit;letter-spacing:inherit}
.p5hero .lead{margin-block-start:0;max-inline-size:46ch}

.p5hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;
  margin-block-start:clamp(1.3rem,1.05rem + 1.1vw,1.9rem)}

/* The Flow Engine ships two compositions and exactly one is ever in flow.
   It opens the capabilities page now rather than the homepage, but the rule
   is the same one it always was: the desktop engine is a tall portrait
   diagram, and meeting a portrait drawing into the short wide box that every
   width below the two-column breakpoint gives it letterboxes it. The phone
   composition is landscape, so every such width gets that one. */
.fe-mobile{display:none}
@media (max-width:999px){
  .fe-desktop{display:none}
  .fe-mobile{display:block}
}

@media (max-width:999px){
  .p5hero-head,.p5hero-body{max-inline-size:none}
  .p5hero .lead{font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.5}
}

/* ── 5. Flow Engine scene internals ─────────────────────── */
.fe-card{fill:var(--oat-50);stroke:var(--oat-500);stroke-width:1.3}
.fe-card-2{fill:var(--oat-100);stroke:var(--oat-400);stroke-width:1}
.fe-ink{fill:var(--oat-950)}
.fe-mute{fill:var(--oat-500)}
.fe-mute-2{fill:var(--oat-400)}
/* Decorative annotation, so it stays below body scale — but 8.5px at
   2.66:1 was not annotation, it was noise. */
.fe-label{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--oat-750)}
.fe-title{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:-.012em;fill:var(--oat-950)}
.fe-wire{fill:none;stroke:var(--oat-500);stroke-width:1.35;stroke-linecap:round}
.fe-wire-live{stroke:var(--sig);opacity:.34}
.fe-spine{fill:none;stroke:var(--oat-600);stroke-width:1.8;stroke-linecap:round}
.fe-pulse{fill:var(--sig)}
.fe-halo{fill:var(--sig);opacity:.18}
.fe-op{color:var(--fam-operations)}
.fe-me{color:var(--fam-media)}
.fe-ap{color:var(--fam-applications)}
.fe-ai{color:var(--fam-enterprise-ai)}
.fe-acc{fill:currentColor}
.fe-acc-s{stroke:currentColor;fill:none}
/* a cluster is dimmed until the signal reaches it */
.fe-cluster{transition:opacity .5s var(--ease-out)}
.js-on .fe-cluster{opacity:.78}
.js-on .fe-cluster.lit{opacity:1}
/* No transform-box here. GSAP computes SVG transform origins itself, and
   setting `transform-box: fill-box` underneath makes the two disagree: during
   a scale tween the element lands in the wrong place — the media waveform
   appeared over the applications band mid-flight — and only looks correct
   again once the tween finishes at scale 1. */

/* ── 6. CAPABILITY RAIL — the four families ─────────────── */
.p5fams{position:relative;padding-block:var(--sp-sec)}
.p5fams-head{display:grid;gap:1.6rem;align-items:end;
  margin-block-end:clamp(2.2rem,1.6rem + 2.4vw,3.6rem)}
@media (min-width:900px){.p5fams-head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.p5fams-head .lead{max-inline-size:46ch}

.p5fam-list{display:grid;gap:0;border-block-start:1px solid var(--line)}
.p5fam{
  position:relative;display:grid;gap:.35rem 1.5rem;align-items:start;
  padding-block:clamp(1.35rem,1.05rem + 1.2vw,1.95rem);
  border-block-end:1px solid var(--line);
  grid-template-columns:auto minmax(0,1fr);
  transition:background .35s var(--ease-out);
}
@media (min-width:860px){
  .p5fam{grid-template-columns:3.5rem minmax(0,17.5rem) minmax(0,1fr) auto;
    align-items:center;gap:.35rem 2rem}
}
.p5fam::before{
  content:"";position:absolute;inset-inline:calc(var(--sp-gap) * -1);inset-block:0;
  background:linear-gradient(90deg,var(--fam-tint,transparent),transparent 62%);
  opacity:0;transition:opacity .4s var(--ease-out);pointer-events:none;border-radius:var(--r-md);
}
.p5fam:hover::before,.p5fam:focus-within::before{opacity:1}
.p5fam-n{color:var(--ink-3);align-self:start}
@media (min-width:860px){.p5fam-n{align-self:center}}
.p5fam-t{font-size:clamp(1.2rem,1.03rem + .72vw,1.58rem);letter-spacing:-.03em;
  font-weight:600;line-height:1.1;display:flex;align-items:baseline;gap:.6rem}
.p5fam-t .sq{inline-size:.55rem;block-size:.55rem;border-radius:2px;flex:none;
  background:var(--fam,var(--sig));translate:0 -.1em;
  transition:scale .3s var(--ease-out),box-shadow .3s}
.p5fam:hover .sq{scale:1.35;box-shadow:0 0 0 4px color-mix(in srgb,var(--fam) 18%,transparent)}
.p5fam-d{color:var(--ink-2);font-size:var(--t-sm);line-height:1.55;max-inline-size:52ch;
  grid-column:1/-1}
@media (min-width:860px){.p5fam-d{grid-column:auto}}
.p5fam-go{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2);
  font-size:var(--t-sm);font-weight:600;grid-column:1/-1;
  transition:color .25s,gap .25s var(--ease-out)}
@media (min-width:860px){.p5fam-go{grid-column:auto;justify-self:end}}
.p5fam:hover .p5fam-go{color:var(--fam,var(--sig));gap:.65rem}
.p5fam-go .ico{inline-size:1rem;block-size:1rem}
/* The link is the title; its pseudo-element makes the whole row a target.
   Focus lands on the words, which is where a keyboard user expects it. */
.p5fam-link{color:inherit}
/* z-index because the description and the "Explore" affordance come later
   in the row and would otherwise paint over the hit area. */
.p5fam-link::after{content:"";position:absolute;inset:0;z-index:1;
  border-radius:var(--r-sm)}
.p5fam-link:focus-visible{outline:2.5px solid var(--fam,var(--focus));outline-offset:4px;
  border-radius:var(--r-xs)}

/* the signal touching each family row in turn */
.p5fam::after{content:"";position:absolute;inset-block:22%;inset-inline-start:-.9rem;
  inline-size:2px;border-radius:2px;background:var(--fam,var(--sig));
  transform:scaleY(0);transform-origin:top center;opacity:.85;
  transition:transform .5s var(--ease-out)}
.p5fam.lit::after{transform:scaleY(1)}
@media (max-width:520px){.p5fam::after{inset-inline-start:-.55rem}}

/* ── 7. THE SYSTEM FIELD — one dark chapter, four demos ─── */
.p5field{
  position:relative;background:var(--field);color:var(--field-ink);
  padding-block:clamp(4rem,3rem + 6vw,7.5rem);
  --ink:var(--field-ink);--ink-2:var(--field-ink-2);--ink-3:var(--field-ink-3);
  --line:var(--field-line);--line-2:var(--field-line-2);
  --surface:var(--field-2);--surface-2:var(--field-3);
  --brand:var(--sig-2);--on-brand:#2a0b0c;
}
/* the field's own measurement grid, much quieter than the hero's */
.p5field-grid{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(90deg,var(--field-line-2) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) 100%;opacity:.9;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.p5field-in{position:relative}

.p5field-head{max-inline-size:52rem;margin-block-end:clamp(2.5rem,2rem + 3vw,4.5rem)}
.p5field-head h2{font-size:var(--t-h2);letter-spacing:-.037em}
.p5field-head .lead{color:var(--field-ink-2);margin-block-start:1.1rem;max-inline-size:52ch}
.p5field .eyebrow{color:var(--sig-2)}

/* the chapter's layout: a sticky index rail beside the demos */
.p5field-body{display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem)}
@media (min-width:1040px){
  .p5field-body{grid-template-columns:13.5rem minmax(0,1fr);
    gap:clamp(2rem,1rem + 3vw,4rem)}
}
.p5index{display:none}
@media (min-width:1040px){
  .p5index{display:block;position:sticky;inset-block-start:7.5rem;align-self:start}
}
.p5index ol{display:grid;gap:.1rem;position:relative;padding-inline-start:1.15rem}
.p5index .rail{inset-inline-start:3px}
.p5index li{position:relative}
.p5index button{
  display:flex;align-items:baseline;gap:.7rem;inline-size:100%;text-align:start;
  padding:.62rem .55rem .62rem .35rem;border-radius:var(--r-sm);
  color:var(--field-ink-3);font-size:var(--t-sm);font-weight:600;letter-spacing:-.012em;
  transition:color .3s,background .3s;line-height:1.3;
}
.p5index button:hover{color:var(--field-ink-2);background:rgba(255,255,255,.04)}
.p5index button .n{font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:var(--mono-track);opacity:.75;flex:none}
.p5index li.on button{color:var(--field-ink)}
.p5index li .mk{position:absolute;inset-inline-start:-1.15rem;inset-block-start:1.05rem;
  inline-size:7px;block-size:7px;border-radius:50%;background:var(--field-3);
  border:1.5px solid var(--field-line);translate:-50% 0;
  transition:background .3s,border-color .3s,scale .3s var(--ease-out)}
.p5index li.on .mk{background:var(--sig);border-color:var(--sig);scale:1.25;
  box-shadow:0 0 0 4px rgba(212,43,48,.2)}

.p5demos{display:grid;gap:clamp(2.5rem,2rem + 4vw,5rem);min-inline-size:0}

/* ── 8. ONE DEMO ────────────────────────────────────────── */
.p5demo{
  position:relative;scroll-margin-top:7rem;min-inline-size:0;
  --fam:var(--sig);--fam-soft:rgba(212,43,48,.16);
}
.p5demo[data-family="operations"]{--fam:var(--fam-operations);--fam-soft:rgba(18,171,102,.17)}
.p5demo[data-family="media"]{--fam:var(--fam-media);--fam-soft:rgba(242,182,34,.17)}
.p5demo[data-family="applications"]{--fam:var(--fam-applications);--fam-soft:rgba(10,131,245,.17)}
.p5demo[data-family="enterprise-ai"]{--fam:var(--fam-enterprise-ai);--fam-soft:rgba(131,88,244,.17)}

.p5demo-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  margin-block-end:1.15rem}
.p5demo-fam{display:inline-flex;align-items:center;gap:.55rem;color:var(--fam)}
.p5demo-fam .sq{inline-size:.5rem;block-size:.5rem;border-radius:2px;background:currentColor}
.p5demo h3{font-size:clamp(1.32rem,1.1rem + 1.05vw,2rem);letter-spacing:-.032em;
  flex:1 1 100%;line-height:1.08}
.p5demo-lead{color:var(--field-ink-2);font-size:var(--t-sm);line-height:1.6;
  max-inline-size:58ch;margin-block-end:1.6rem}

/* the console: frame + stage + stage list */
.p5console{
  position:relative;min-inline-size:0;border:1px solid var(--field-line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--field-2),var(--field));
  overflow:hidden;
}
.p5console-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem 1rem;border-block-end:1px solid var(--field-line-2);
  color:var(--field-ink-3);background:rgba(255,255,255,.02)}
.p5console-bar .dot{inline-size:.45rem;block-size:.45rem;border-radius:50%;
  background:var(--fam);flex:none;box-shadow:0 0 0 3px var(--fam-soft)}
.p5console-bar .grow{margin-inline-start:auto}

/* The diagram sets the height. Fixing one and letterboxing the drawing
   inside it wasted a third of the console on empty ground. */
.p5stage{position:relative;padding:clamp(.9rem,.6rem + 1.2vw,1.6rem)}
.p5stage svg{display:block;inline-size:100%;block-size:auto}

/* stage scene shared classes */
.sc-panel{fill:#1f1d1b;stroke:rgba(243,241,236,.13);stroke-width:1}
.sc-panel-2{fill:#262321;stroke:rgba(243,241,236,.09);stroke-width:1}
.sc-line{stroke:rgba(243,241,236,.16);stroke-width:1;fill:none;stroke-linecap:round}
.sc-dim{fill:rgba(243,241,236,.20)}
.sc-dim-2{fill:rgba(243,241,236,.11)}
.sc-txt{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;fill:rgba(243,241,236,.62)}
.sc-txt-b{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:-.012em;
  fill:rgba(243,241,236,.94)}
.sc-fam{fill:var(--fam)}
.sc-fam-s{stroke:var(--fam);fill:none}
.sc-sig{fill:var(--sig-2)}
.sc-sig-s{stroke:var(--sig-2);fill:none}
/* every stage-specific group is laid out at full opacity; script dims the
   inactive ones. With no script the whole scene reads as one diagram. */
.js-on .p5stage [data-stage-part]{opacity:.3;transition:opacity .45s var(--ease-out)}
.js-on .p5stage [data-stage-part].on{opacity:1}

/* the stage list — real buttons, keyboard driven */
.p5steps{display:flex;gap:.4rem;padding:.75rem;overflow-x:auto;min-inline-size:0;
  border-block-start:1px solid var(--field-line-2);
  scrollbar-width:thin;scroll-snap-type:x proximity}
.p5steps::-webkit-scrollbar{block-size:5px}
.p5steps::-webkit-scrollbar-thumb{background:var(--field-line);border-radius:3px}
.p5step{
  display:flex;flex-direction:column;gap:.15rem;flex:1 0 auto;min-inline-size:7.5rem;
  padding:.6rem .75rem;border-radius:var(--r-sm);border:1px solid transparent;
  background:rgba(255,255,255,.04);color:var(--field-ink-2);text-align:start;
  scroll-snap-align:start;
  transition:background .28s,color .28s,border-color .28s,transform .28s var(--ease-out);
}
.p5step:hover{background:rgba(255,255,255,.09);color:var(--field-ink)}
.p5step .n{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--mono-track);
  opacity:.7}
.p5step .t{font-size:var(--t-sm);font-weight:600;letter-spacing:-.008em;color:inherit;
  line-height:1.3}
.p5step[aria-selected="true"]{background:var(--fam-soft);border-color:var(--fam);
  color:var(--field-ink)}
.p5step[aria-selected="true"] .n{color:var(--fam);opacity:1}
.p5step:focus-visible{outline:2.5px solid var(--fam);outline-offset:2px}

/* the demo's own rail: ticks light behind the signal, links fill in front */
.sc-tick{transition:fill .35s,stroke .35s}
.sc-tick.lit{fill:var(--fam);stroke:var(--fam)}
.sc-link{transition:opacity .35s}
.js-on .sc-link{opacity:.45}
.js-on .sc-link.on{opacity:1}
.sc-mod{transition:stroke .4s,fill .4s}
[data-stage-part].on .sc-mod{stroke:var(--fam);fill:#211f1d}
[data-stage-part].on .sc-mod-n{fill:var(--fam)}

/* the readout at the foot of the console — what the current stage means.
   A fixed minimum height so moving between stages never reflows the page. */
.p5caption{border-block-start:1px solid var(--field-line-2);
  padding:1rem clamp(1rem,.7rem + 1.4vw,1.9rem) 1.15rem;min-block-size:5.5rem}
.p5caption > div{display:grid;gap:.35rem}
/* `hidden` is a UA rule; a class selector setting display beats it, which
   would leave every stage panel on screen at once. */
.p5caption > div[hidden]{display:none}
.p5caption > div:focus-visible{outline:2.5px solid var(--fam);outline-offset:4px;
  border-radius:var(--r-xs)}
.p5caption .k{color:var(--fam)}
.p5caption p{color:var(--field-ink-2);font-size:var(--t-sm);line-height:1.6;
  max-inline-size:62ch}
.p5demo-note{margin-block-start:1.15rem;padding-inline-start:1rem;
  border-inline-start:2px solid var(--field-line);
  color:var(--field-ink-2);font-size:var(--t-sm);line-height:1.65;max-inline-size:64ch}

/* ── 9. SOLUTION ADVISOR ────────────────────────────────── */
.p5adv{position:relative;padding-block:var(--sp-sec);overflow:clip;
  background:
    radial-gradient(70% 60% at 12% 0%,var(--sig-haze),transparent 62%),
    var(--ground)}
.p5adv-head{max-inline-size:46rem;margin-block-end:clamp(1.9rem,1.5rem + 2vw,3rem)}
.p5adv-head h2{font-size:clamp(2.2rem,1.35rem + 3.6vw,3.9rem);letter-spacing:-.044em;
  line-height:.98}
.p5adv-head .lead{margin-block-start:1.15rem;max-inline-size:54ch;
  font-size:clamp(1.08rem,1rem + .55vw,1.32rem)}

.p5adv-panel{
  position:relative;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;
}
/* the console bar */
.p5adv-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.85rem clamp(1.25rem,1rem + 1.4vw,2rem);
  border-block-end:1px solid var(--line-2);background:var(--surface-2);
  color:var(--ink-2)}
.p5adv-bar .dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;
  background:var(--sig);flex:none;box-shadow:0 0 0 4px var(--sig-haze)}
.p5adv-bar .grow{margin-inline-start:auto;color:var(--ink-3)}

.p5adv-form{padding:clamp(1.25rem,1rem + 1.4vw,2rem)}
.p5adv-field{position:relative;display:grid;gap:.85rem}
.p5adv-label{color:var(--ink-2);font-size:.8125rem;letter-spacing:.12em;
  font-weight:600}
.p5adv textarea{
  inline-size:100%;resize:vertical;min-block-size:8.5rem;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);padding:1.15rem 1.25rem;
  font-size:clamp(1.06rem,1rem + .34vw,1.22rem);line-height:1.55;letter-spacing:-.012em;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.p5adv textarea::placeholder{color:var(--ink-3);opacity:1}
.p5adv textarea:focus{outline:none;border-color:var(--sig);background:var(--surface);
  box-shadow:0 0 0 4px var(--sig-haze)}
.p5adv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem}
.p5adv-actions .hint{color:var(--ink-2);font-size:var(--t-sm);line-height:1.5;
  display:inline-flex;align-items:center;gap:.5rem}
.p5adv-actions .hint::before{content:"";inline-size:.4rem;block-size:.4rem;
  border-radius:50%;background:var(--fam-operations);flex:none}
.p5adv-actions .grow{margin-inline-start:auto}

.p5chips{display:flex;flex-wrap:wrap;gap:.6rem;
  padding:0 clamp(1.25rem,1rem + 1.4vw,2rem) clamp(1.25rem,1rem + 1.4vw,2rem)}
.p5chips .p5adv-label{margin-block-end:.15rem}
.p5chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;
  border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface-2);
  font-size:var(--t-sm);font-weight:600;color:var(--ink-2);text-align:start;
  padding-block:.6rem;
  transition:border-color .22s,color .22s,background .22s,transform .22s var(--ease-out);
}
.p5chip::before{content:"";inline-size:.4rem;block-size:.4rem;border-radius:50%;
  background:var(--sig);opacity:.45;flex:none;transition:opacity .22s,scale .22s}
.p5chip:hover{border-color:var(--sig);color:var(--ink);transform:translateY(-2px)}
.p5chip:hover::before{opacity:1;scale:1.25}

/* the result — a reasoning readout, not a chat bubble */
.p5adv-out{border-block-start:1px solid var(--line-2);background:var(--surface-2)}
.p5adv-out[hidden]{display:none}
.p5adv-outin{padding:clamp(1.4rem,1.1rem + 1.6vw,2.2rem)}
.p5adv-status{display:flex;align-items:center;gap:.7rem;color:var(--ink-2);
  margin-block-end:1.3rem;font-weight:600}
.p5adv-status .bar{position:relative;flex:1;block-size:2px;background:var(--line-2);
  border-radius:2px;overflow:hidden;max-inline-size:9rem}
.p5adv-status .bar i{position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:var(--w,0%);background:var(--sig);transition:inline-size .5s var(--ease-io)}

.p5rec{display:grid;gap:1.5rem}
.p5rec-fams{display:grid;gap:.75rem}
@media (min-width:720px){.p5rec-fams{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.p5rec-fam{
  position:relative;display:grid;gap:.5rem;padding:1.25rem 1.35rem;
  border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line-2);border-inline-start:3px solid var(--fam,var(--sig));
}
.p5rec-fam .k{color:var(--fam,var(--ink-2));font-weight:700}
.p5rec-fam .t{font-size:clamp(1.12rem,1.04rem + .5vw,1.38rem);font-weight:650;
  letter-spacing:-.024em;line-height:1.2}
.p5rec-fam p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.6}
.p5rec-fam a{display:inline-flex;align-items:center;gap:.45rem;margin-block-start:.35rem;
  color:var(--fam,var(--sig));font-size:var(--t-sm);font-weight:700;
  border-block-end:1.5px solid transparent;justify-self:start;transition:border-color .2s,gap .2s}
.p5rec-fam a:hover{border-block-end-color:currentColor;gap:.6rem}

.p5rec-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.p5rec-flow .stp{display:inline-flex;align-items:center;gap:.45rem}
.p5rec-flow .st{display:inline-flex;align-items:center;gap:.5rem;
  padding:.48rem .9rem;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line);font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.p5rec-flow .ar{color:var(--ink-3);flex:none}
.p5rec-block{display:grid;gap:.6rem}
.p5rec-block > .k{color:var(--ink-2);font-weight:700}
.p5rec-qs{display:grid;gap:.5rem}
.p5rec-qs{gap:.7rem}
.p5rec-qs li{display:flex;gap:.7rem;color:var(--ink-2);font-size:var(--t-body);
  line-height:1.55}
.p5rec-qs li::before{content:"";inline-size:.4rem;block-size:.4rem;border-radius:50%;
  background:var(--sig);opacity:.5;margin-block-start:.55rem;flex:none}
.p5rec-caution{display:flex;gap:.75rem;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--surface);border:1px dashed var(--line);
  color:var(--ink-2);font-size:var(--t-sm);line-height:1.6}
.p5rec-caution .ico{color:var(--ink-3);flex:none;margin-block-start:.05rem}

/* the no-JS / no-result resting state keeps the section useful */
.p5adv-rest{padding:clamp(1.25rem,1rem + 1.4vw,2rem);
  border-block-start:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink-2);font-size:var(--t-sm);line-height:1.65}

/* ── 10. CLOSING SIGNAL ─────────────────────────────────── */
.p5close{position:relative;background:var(--field);color:var(--field-ink);
  padding-block:clamp(4.5rem,3.5rem + 7vw,8.5rem);overflow:clip;
  --ink:var(--field-ink);--ink-2:var(--field-ink-2);--ink-3:var(--field-ink-3);
  --line:var(--field-line);--line-2:var(--field-line-2)}
.p5close-scene{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.p5close-scene svg{inline-size:min(1180px,132%);block-size:auto;opacity:.85}
.p5close-in{position:relative;text-align:center;max-inline-size:46rem;margin-inline:auto}
.p5close h2{font-size:clamp(2.2rem,1.3rem + 3.8vw,4.15rem);letter-spacing:-.045em;
  line-height:.98}
.p5close .lead{color:var(--field-ink-2);margin-block-start:1.2rem;
  margin-inline:auto;max-inline-size:44ch}
.p5close-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-block-start:clamp(1.8rem,1.4rem + 1.6vw,2.6rem)}
.p5close .btn-ghost{--bd:rgba(243,241,236,.3);--fg:var(--field-ink)}
.p5close .btn-ghost:hover{--bd:var(--field-ink)}
.p5close-fams{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;
  margin-block-start:clamp(2.2rem,1.8rem + 2vw,3.2rem);
  padding-block-start:1.5rem;border-block-start:1px solid var(--field-line-2)}
.p5close-fams span{display:inline-flex;align-items:center;gap:.5rem;
  color:var(--field-ink-3);font-size:var(--t-xs);font-weight:600}
.p5close-fams .sq{inline-size:.45rem;block-size:.45rem;border-radius:2px;background:var(--fam)}
.cl-orbit{fill:none;stroke:rgba(244,241,235,.10);stroke-width:1}
.cl-node{fill:#211f1d;stroke:rgba(244,241,235,.16);stroke-width:1.25}
.cl-node-ring{fill:#211f1d;stroke:rgba(244,241,235,.22);stroke-width:1.4}
.cl-minor{fill:#211f1d;stroke:rgba(244,241,235,.14)}
.cl-core{fill:var(--sig)}
.cl-core-halo{fill:var(--sig);opacity:.16}
.cl-spoke{fill:none;stroke:rgba(244,241,235,.13);stroke-width:1;stroke-linecap:round;
  stroke-dasharray:3 7}
.cl-packet{filter:none}

/* ── 10b. The shared blocks, in Phase 5 clothes ──────────
   These blocks belong to every page on the site, so the treatment is scoped
   to `.p5page`. What changes is presentation only: the same content, drawn
   with the same marks the Phase 5 sections use, so the light stretch between
   the capability rail and the system field stops reading as stock cards. */

/* the counter trio: rules and mono labels, not floating numbers.
   Its own section spacing too — three short counters between two full-height
   sections left the band looking like a gap someone forgot to fill. */
.p5page .sec.tight{padding-block:clamp(2rem,1.5rem + 2.4vw,3.25rem)}
.p5page .stats{border-block-start:1px solid var(--line);padding-block-start:1.6rem}
.p5page .stat{position:relative;padding-inline-start:1.15rem}
.p5page .stat::before{content:"";position:absolute;inset-block:.15rem auto;
  inset-inline-start:0;inline-size:2px;block-size:1.6rem;border-radius:2px;
  background:var(--sig);opacity:.8}
.p5page .stat .val{letter-spacing:-.045em}
.p5page .stat .lbl{font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.p5page .stat .det{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}

/* the published-capabilities grid: hairline-separated entries, no card chrome */
.p5page .card-plain{background:transparent;border:0;border-block-start:1px solid var(--line);
  border-radius:0;padding:1.5rem 0 1.6rem;box-shadow:none}
.p5page .card-plain:hover{transform:none;box-shadow:none}
.p5page .card-plain .ico-badge{inline-size:2rem;block-size:2rem;border-radius:var(--r-sm);
  margin-block-end:.9rem;background:transparent;color:var(--acc,var(--brand));
  border:1px solid var(--line-2)}
.p5page .card-plain .h4{letter-spacing:-.022em}
.p5page .grid{gap:0 var(--sp-gap)}
/* auto-fit resolved the four published capabilities into three columns and
   left one dangling on a second row; they are two pairs, so say two. */
@media (min-width:720px){
  .p5page .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the warehouse lifecycle: one hairline with the stages strung along it */
.p5page .pstrip{position:relative}
.p5page .pstrip::before{content:"";position:absolute;inset-inline:0;
  inset-block-start:1.15rem;block-size:1px;background:var(--line);z-index:0}
.p5page .pstep{position:relative;z-index:1}
.p5page .pnum{font-family:var(--mono);letter-spacing:var(--mono-track);
  color:var(--brand-text,var(--sig));background:var(--ground);padding-inline-end:.4rem}

/* Larion's two cells belong to the Enterprise AI system */
.p5page .ecard{--fam:var(--fam-enterprise-ai)}
.p5page .ecard .bl{display:inline-flex;align-items:center;gap:.45rem}
.p5page .ecard .bl::before{content:"";inline-size:.4rem;block-size:.4rem;
  border-radius:2px;background:var(--fam);flex:none}

/* ── 10c. Entering and leaving the field ────────────────
   The signal has to be seen crossing the boundary, otherwise the dark chapter
   reads as a different page that happens to follow this one. A hairline
   descends out of the light section into the field, and climbs back out at
   the bottom. Decorative, and drawn in full whenever motion is off. */
.p5field::before,.p5field::after{
  content:"";position:absolute;inset-inline-start:50%;translate:-50% 0;
  inline-size:1px;block-size:clamp(2.5rem,2rem + 2.4vw,4rem);
  background:linear-gradient(180deg,var(--sig),transparent);
  z-index:2;pointer-events:none;
}
.p5field::before{inset-block-start:0}
.p5field::after{inset-block-end:0;rotate:180deg}
.p5field-seam{position:relative;block-size:0}
.p5field-seam i{position:absolute;inset-inline-start:50%;translate:-50% -50%;
  inline-size:9px;block-size:9px;border-radius:50%;background:var(--sig);
  box-shadow:0 0 0 6px var(--sig-haze)}

/* ── 11. Micro-interactions ─────────────────────────────── */
/* One shared pressed state, so buttons across the page respond the same way. */
.btn:active,.p5chip:active,.p5step:active{transform:translateY(1px) scale(.995)}
.p5chip:focus-visible,.p5step:focus-visible,.p5adv-out a:focus-visible{outline-offset:2px}

/* ── Header and mega-menu, Phase 5 ──────────────────────
   The architecture is untouched — same four families, same links, same
   disclosure semantics, same keyboard behaviour.

   5A.1 took the descriptions out of the panel. Twenty-three one-line
   descriptions shown at once was two hundred words, which is a wall to read
   rather than a menu to scan; the descriptions live on the pages they lead
   to. With titles only, every family fits one column, so the two-up layout
   and the width media query it needed are both gone — and with them the
   overflow risk that made them delicate. */
.hdr.stuck .hdr-in{box-shadow:var(--sh-md)}
.mega{transform-origin:top center;padding:1.1rem 1rem 1.2rem;
  max-inline-size:min(58rem,calc(100vw - 2rem));
  /* A last resort, not a layout: the panel is anchored to its trigger, so on a
     short viewport a tall family could otherwise put its last entries below
     the fold with no way to reach them. */
  max-block-size:calc(100vh - 6.5rem);overflow-y:auto;overscroll-behavior:contain}
.js-on .mega{transition:opacity .26s var(--ease-out),transform .3s var(--ease-out),
             visibility .26s}
.mega-cols{grid-auto-columns:minmax(11.25rem,13.5rem);gap:1.1rem 1.75rem}

/* The family is a heading, not a caption: full size, in ink, on its own
   coloured rule. The links sit visibly one level below it. */
.mega-h{display:flex;align-items:center;gap:.55rem;
  font-size:var(--t-sm);font-weight:700;letter-spacing:-.006em;
  text-transform:none;color:var(--ink);
  padding-block-end:.6rem;margin-block-end:.45rem;min-block-size:3.6em;
  align-items:flex-start;
  border-block-end:1.5px solid var(--fam,var(--line))}
.mega-h .sq{margin-block-start:.42em}
.mega-h .sq{inline-size:.5rem;block-size:.5rem;border-radius:2px;
  background:var(--fam,var(--brand));flex:none}

.mega-links{display:grid;gap:.05rem}
.mega-col a{display:flex;align-items:center;gap:.6rem;
  padding:.44rem .55rem;margin-inline:-.55rem;border-radius:var(--r-sm);
  color:var(--ink-2);
  transition:background .18s,color .18s,transform .2s var(--ease-out)}
.mega-col a strong{display:block;font-size:var(--t-sm);font-weight:550;
  letter-spacing:-.012em;line-height:1.3}
.mega-col a .ico{inline-size:1.05rem;block-size:1.05rem;flex:none;margin:0;
  color:var(--ink-3);transition:color .18s}
.mega-col a:hover,.mega-col a:focus-visible{background:var(--surface-2);
  color:var(--ink);transform:translateX(2px)}
.mega-col a:hover .ico,.mega-col a:focus-visible .ico{color:var(--fam,var(--brand))}
/* a single-family menu has no heading to sit under, so it goes two-up */
.mega-col-plain{grid-column:span 2}
.mega-col-plain .mega-links{grid-template-columns:1fr 1fr;column-gap:1.75rem;
  align-content:start}

/* ── the drawer: one disclosure per family ──────────────
   The old drawer poured all twenty-three links into one open list, so opening
   Capabilities meant scrolling past three families to reach the fourth. */
.mnav .sub-fam{border-block-start:1px solid var(--line-2)}
.mnav .sub-fam:first-of-type{border-block-start:0}
.mnav .sub-h{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  margin:0;padding-block:.95rem;font-size:var(--t-sm);font-weight:700;
  letter-spacing:-.006em;text-transform:none;color:var(--ink);list-style:none}
.mnav .sub-h::-webkit-details-marker{display:none}
.mnav .sub-h .sq{inline-size:.5rem;block-size:.5rem;border-radius:2px;
  background:var(--fam,var(--brand));flex:none}
.mnav .sub-h .t{flex:1}
.mnav .sub-h .n{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  letter-spacing:.06em}
.mnav .sub-h .caret{inline-size:1.1rem;block-size:1.1rem;flex:none;
  color:var(--ink-3);transition:transform .28s var(--ease-out)}
.mnav .sub-fam[open] > .sub-h .caret{transform:rotate(180deg)}
.mnav .sub-links{display:grid;gap:.1rem;padding-block:0 .85rem;
  padding-inline-start:1.15rem;margin-inline-start:.22rem;
  border-inline-start:2px solid var(--fam,var(--line-2))}
.mnav .sub-links a{padding-block:.62rem;font-size:var(--t-sm);color:var(--ink-2)}
.mnav .sub-links a:hover{color:var(--ink)}

/* ── 12. Reduced motion / no script ─────────────────────── */
/* The premium version of "no animation" is the finished frame, not an empty
   box. Every stage part, cluster and rail is drawn in its resting-complete
   state, and the pulse simply sits at the end of its path. */
@media (prefers-reduced-motion:reduce){
  .fe-cluster,.js-on .fe-cluster{opacity:1}
  .js-on .p5stage [data-stage-part]{opacity:1}
  .rail::after{block-size:100%;box-shadow:none}
  .rail-node{border-color:var(--sig);background:var(--sig)}
  .p5index li .mk{background:var(--sig);border-color:var(--sig)}
}
html.reduce-motion .fe-cluster,
html.motion-failed .fe-cluster{opacity:1}
html.reduce-motion .p5stage [data-stage-part],
html.motion-failed .p5stage [data-stage-part]{opacity:1}
html.reduce-motion .rail::after,
html.motion-failed .rail::after{block-size:100%}
html.reduce-motion .sc-link,
html.motion-failed .sc-link,
html.phase5-failed .sc-link{opacity:1}
html.phase5-failed .fe-cluster,
html.phase5-failed .p5stage [data-stage-part]{opacity:1}

/* ── 13. Mobile intent ──────────────────────────────────── */
/* Not a shrunken desktop: the index rail is replaced by the demo's own
   heading order, the console keeps a usable minimum height, and the stage
   list scrolls horizontally with real touch targets. */
@media (max-width:1039px){
  .p5field-body{grid-template-columns:minmax(0,1fr)}
}
/* A six-module diagram squeezed into 320px is unreadable, and shrinking it
   further to "fit" is the thing this phase is meant not to do. On a phone the
   stage becomes a scrollable strip at a legible height instead, and selecting
   a stage brings its module into view. The whole workflow is still there. */
@media (max-width:760px){
  .p5stage{overflow-x:auto;padding:1rem 0;scroll-behavior:smooth;
    scrollbar-width:none;
    mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  .p5stage::-webkit-scrollbar{display:none}
  .p5stage svg{inline-size:auto;block-size:11.5rem;max-inline-size:none;
    margin-inline:1rem}
}
@media (max-width:700px){
  .p5step{min-inline-size:8.5rem;padding:.7rem .8rem}
  .p5adv-actions .btn{inline-size:100%}
  .p5adv-actions .grow{margin-inline-start:0}
  /* the same edge fade on the stage list, so both read as scrollable */
  .p5steps{mask-image:linear-gradient(90deg,#000 92%,transparent)}
}
@media (max-width:420px){
  .p5fam{grid-template-columns:minmax(0,1fr)}
  .p5fam-n{margin-block-end:.15rem}
}