/* =============================================================================
   system.css — shared design language for BuildLink Analytics development pages
   (/property-intel/, and the GRID and pricing-engine pages to follow).

   Loaded AFTER styles.css. It adds the sub-page vocabulary: the sticky chain
   rail, ledgers, rung ladders, weight bars, gate grids and case panels.
   It never touches .site-header or footer, which styles.css owns so the chrome
   stays identical across every page on the site.
   ========================================================================== */

:root{
  --sys-ink:#07090c;
  --sys-deep:#0d1014;
  --sys-panel:#11161d;
  --sys-paper:#f2efe7;
  --sys-blue:#2f80ff;
  --sys-blue-ink:#0a4bc4;
  --sys-line:rgba(255,255,255,.15);
  --sys-line-soft:rgba(255,255,255,.08);
  --sys-text:#f2efe7;
  --sys-dim:#a7abb2;
  --sys-faint:#9298a1;
  --sys-ease:cubic-bezier(.16,1,.3,1);
  /* Status markers. Used as dots and bars beside a text label, never alone. */
  --st-critical:#d03b3b;
  --st-warning:#fab219;
  --st-info:#2f80ff;
  --st-clear:#0ca30c;
  --st-unknown:#8e959e;
}

/* ---------------------------------------------------------------- page shell */
.sys{background:var(--sys-ink);color:var(--sys-text)}
.sys-section{padding:clamp(90px,11vw,165px) 6vw;position:relative}
.sys-deep{background:var(--sys-deep)}
.sys-paper{background:var(--sys-paper);color:var(--sys-ink)}
.sys-rule{font:400 .74rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em;display:flex;gap:.8rem;align-items:center;color:#aeb2b8;margin:0 0 2.5rem}
.sys-rule i{font-style:normal;color:var(--sys-blue)}
.sys-paper .sys-rule{color:#656a72}
.sys-paper .sys-rule i{color:var(--sys-blue-ink)}
.sys-h2{font-size:clamp(2.9rem,6vw,6.4rem);font-weight:500;letter-spacing:-.06em;line-height:.95;margin:0;max-width:16ch}
.sys-lede{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--sys-dim);max-width:60ch;margin:2rem 0 0}
.sys-paper .sys-lede{color:#4d535c}
.sys-head{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,6vw,7vw);align-items:start}

/* ---------------------------------------------------------------- page hero */
.sys-hero{position:relative;min-height:92svh;display:flex;align-items:center;padding:160px 6vw 80px;background:var(--sys-ink);overflow:hidden}
.sys-hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--sys-line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--sys-line-soft) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 20% 40%,#000,transparent 72%)}
.sys-hero-inner{position:relative;width:min(1180px,100%)}
.sys-eyebrow{font:400 .74rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em;color:#d6d7d9;display:flex;gap:1.2rem;align-items:center;margin:0 0 1.6rem}
.sys-eyebrow:before{content:"";width:34px;height:1px;background:var(--sys-blue)}
.sys-eyebrow b{font-weight:400;color:var(--sys-faint)}
.sys-hero h1{font-size:clamp(3.6rem,9vw,8.6rem);font-weight:500;letter-spacing:-.075em;line-height:.85;margin:0 0 .35em;max-width:14ch}
.sys-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.72)}
.sys-hero-copy{font-size:clamp(1.05rem,1.7vw,1.4rem);color:#c2c5c9;max-width:56ch;margin:0}
.sys-hero-meta{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--sys-line)}
.sys-hero-meta div{min-width:130px}
.sys-hero-meta span{display:block;font:400 .67rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.11em;color:var(--sys-faint)}
.sys-hero-meta b{display:block;margin-top:.55rem;font-weight:500;font-size:1.02rem}

/* the two-stories mark: two paths converging into one */
.sys-converge{width:min(560px,100%);height:auto;margin-top:3rem}
.sys-converge path{fill:none;stroke-width:1.5;stroke-linecap:round}
.sys-converge .cv-a{stroke:#6f7680}
.sys-converge .cv-b{stroke:#6f7680}
.sys-converge .cv-join{stroke:var(--sys-blue);stroke-width:2}
.sys-converge text{font:400 10px DM Mono,monospace;letter-spacing:.1em;fill:#9298a1;text-transform:uppercase}
.sys-converge .cv-join-label{fill:#cfd9ea}

/* ------------------------------------------------- the chain: sticky rail */
.sys-chain{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:clamp(2rem,7vw,8vw);align-items:start;margin-top:5vw}
.sys-rail{position:sticky;top:120px}
.sys-rail ol{list-style:none;margin:0;padding:0;position:relative}
.sys-rail ol:before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--sys-line)}
.sys-rail-fill{position:absolute;left:11px;top:14px;width:1px;background:var(--sys-blue);height:0;transition:height .25s linear}
.sys-rail li{position:relative;padding:0 0 1.9rem 2.6rem;color:var(--sys-faint);transition:color .35s var(--sys-ease)}
.sys-rail li:last-child{padding-bottom:0}
.sys-rail li:before{content:"";position:absolute;left:6px;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--sys-deep);border:1px solid #454c56;transition:background .35s,border-color .35s,transform .35s var(--sys-ease)}
.sys-rail li b{display:block;font-weight:500;font-size:1.02rem;letter-spacing:-.01em}
.sys-rail li span{display:block;font:400 .66rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em;margin-top:.3rem;opacity:.75}
.sys-rail li.is-done{color:#cfd4da}
.sys-rail li.is-done:before{background:#3a5f9e;border-color:#3a5f9e}
.sys-rail li.is-active{color:#fff}
.sys-rail li.is-active:before{background:var(--sys-blue);border-color:var(--sys-blue);transform:scale(1.25);box-shadow:0 0 0 5px rgba(47,128,255,.16)}

.sys-stage{border-top:1px solid var(--sys-line);padding:clamp(2.6rem,5vw,4.2rem) 0}
.sys-stage:first-child{border-top:0;padding-top:0}
.sys-stage-no{font:400 .68rem DM Mono,monospace;letter-spacing:.12em;color:var(--sys-blue);text-transform:uppercase}
.sys-stage h3{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;margin:.7rem 0 1.1rem}
.sys-stage p{color:var(--sys-dim);margin:0;max-width:62ch}
.sys-stage p + p{margin-top:1rem}
.sys-io{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.sys-io span{font:400 .66rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.09em;border:1px solid #39414b;padding:.42rem .7rem;color:#b6bcc4;border-radius:50px}
.sys-io span.out{border-color:rgba(47,128,255,.55);color:#9cc0ff}

/* ------------------------------------------------------------- ledger rows */
.sys-ledger{border-top:1px solid var(--sys-line);margin-top:5vw}
.sys-paper .sys-ledger{border-color:#b9b6ae}
.sys-ledger li{list-style:none;display:grid;grid-template-columns:62px minmax(0,1fr);gap:clamp(1rem,3vw,2.6rem);padding:1.9rem 0;border-bottom:1px solid var(--sys-line)}
.sys-paper .sys-ledger li{border-color:#cbc8c0}
.sys-ledger{padding:0;margin-left:0}
.sys-ledger em{font-style:normal;font:400 .7rem DM Mono,monospace;letter-spacing:.1em;color:var(--sys-blue);padding-top:.45rem}
.sys-paper .sys-ledger em{color:var(--sys-blue-ink)}
.sys-ledger b{display:block;font-weight:500;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-.025em;line-height:1.2}
.sys-ledger p{margin:.7rem 0 0;color:var(--sys-dim);max-width:70ch}
.sys-paper .sys-ledger p{color:#4d535c}

/* ------------------------------------------------------------ rung ladder */
.sys-rungs{display:grid;gap:1px;background:var(--sys-line);border:1px solid var(--sys-line);margin-top:5vw}
.sys-rung{background:var(--sys-deep);padding:1.7rem 1.8rem;display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.8rem;align-items:baseline}
.sys-rung code{font:500 .76rem DM Mono,monospace;letter-spacing:.06em;color:#fff}
.sys-rung i{font-style:normal;display:block;margin-top:.4rem;font:400 .66rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--sys-faint)}
.sys-rung p{margin:0;color:var(--sys-dim)}

/* --------------------------------------------------------- status markers */
.sys-sev{display:grid;gap:1px;background:var(--sys-line);border:1px solid var(--sys-line);margin-top:5vw}
.sys-sev-row{background:var(--sys-deep);padding:1.5rem 1.8rem;display:grid;grid-template-columns:24px 170px minmax(0,1fr);gap:1.4rem;align-items:baseline}
.sys-dot{width:11px;height:11px;border-radius:50%;align-self:center;justify-self:start}
.sys-dot.critical{background:var(--st-critical)}
.sys-dot.warning{background:var(--st-warning)}
.sys-dot.info{background:var(--st-info)}
.sys-dot.clear{background:var(--st-clear)}
.sys-dot.unknown{background:transparent;border:1.5px dashed var(--st-unknown)}
.sys-sev-row b{font-weight:500;font-size:1.02rem}
.sys-sev-row p{margin:0;color:var(--sys-dim)}

/* --------------------------------------------------- weight bars (1 series) */
.sys-weights{margin-top:5vw;border-top:1px solid var(--sys-line)}
.sys-paper .sys-weights{border-color:#b9b6ae}
.sys-weight{display:grid;grid-template-columns:minmax(0,1fr) 300px 64px;gap:clamp(1rem,3vw,2.4rem);align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--sys-line)}
.sys-paper .sys-weight{border-color:#cbc8c0}
.sys-weight b{font-weight:500;font-size:1.06rem;display:block}
.sys-weight small{display:block;margin-top:.4rem;color:var(--sys-dim);font-size:.92rem;max-width:56ch}
.sys-paper .sys-weight small{color:#4d535c}
.sys-track{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.sys-paper .sys-track{background:#dedbd3}
.sys-track i{display:block;height:100%;width:0;background:var(--sys-blue);border-radius:4px;transition:width 1.1s var(--sys-ease)}
.is-shown .sys-track i{width:var(--w)}
.sys-weight-n{font:500 1.35rem DM Mono,monospace;text-align:right;letter-spacing:-.02em}
.sys-weight-n sup{font-size:.6em;font-weight:400;color:var(--sys-faint);margin-left:.1em}
.sys-bands{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem}
.sys-bands span{font:400 .68rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em;border:1px solid #39414b;padding:.5rem .8rem;color:#b6bcc4}
.sys-paper .sys-bands span{border-color:#c2bfb7;color:#4d535c}

/* ------------------------------------------------------------- gate grid */
.sys-gates{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sys-line);border:1px solid var(--sys-line);margin-top:5vw}
.sys-gate{background:var(--sys-deep);padding:1.6rem 1.5rem}
.sys-gate code{font:500 .72rem DM Mono,monospace;letter-spacing:.08em;color:var(--sys-blue)}
.sys-gate b{display:block;margin:.6rem 0 .55rem;font-weight:500;font-size:1.02rem;letter-spacing:-.015em}
.sys-gate p{margin:0;color:var(--sys-dim);font-size:.93rem}

/* -------------------------------------------------------------- record set */
.sys-set{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.sys-set span{font:400 .7rem DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em;padding:.55rem .8rem;border:1px solid #39414b;color:#c4cad2}
.sys-set span.addon{border-style:dashed;border-color:#4a525d;color:var(--sys-faint)}
.sys-paper .sys-set span{border-color:#c2bfb7;color:#3b4149}
.sys-paper .sys-set span.addon{border-color:#c2bfb7;color:#6b7078}

/* ------------------------------------------------------------- case panel */
.sys-case{background:var(--sys-panel);border:1px solid #29303a;padding:clamp(1.6rem,4vw,3.4rem);margin-top:5vw}
.sys-case ol{counter-reset:s;list-style:none;margin:0;padding:0}
.sys-case li{position:relative;padding:1.6rem 0 1.6rem 3.6rem;border-bottom:1px solid var(--sys-line-soft)}
.sys-case li:last-child{border-bottom:0;padding-bottom:0}
.sys-case li:before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.75rem;font:400 .7rem DM Mono,monospace;color:var(--sys-blue)}
.sys-case li:first-child:before{top:.35rem}
.sys-case li:first-child{padding-top:.2rem}
.sys-case p{margin:0;color:var(--sys-dim);max-width:72ch}
.sys-case b{color:var(--sys-text);font-weight:500}
.sys-note{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--sys-line);font:400 .72rem DM Mono,monospace;line-height:1.75;color:var(--sys-faint);max-width:78ch}

/* --------------------------------------------------------------- not-list */
.sys-not{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#b9b6ae;border:1px solid #b9b6ae;margin-top:5vw}
.sys-not div{background:var(--sys-paper);padding:1.6rem 1.7rem}
.sys-not b{display:block;font-weight:500;font-size:1.05rem;margin-bottom:.5rem}
.sys-not p{margin:0;color:#4d535c;font-size:.95rem}

/* --------------------------------------------------------------- closing */
.sys-close{padding:clamp(90px,13vw,190px) 6vw;text-align:left;position:relative;overflow:hidden;background:var(--sys-ink)}
.sys-close h2{font-size:clamp(2.8rem,7vw,7.4rem);font-weight:500;letter-spacing:-.07em;line-height:.92;margin:0 0 .5em;max-width:18ch}
.sys-close h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.sys-close:after{content:"";position:absolute;width:42vw;height:42vw;border:1px solid rgba(47,128,255,.32);border-radius:50%;right:-13vw;top:12%;box-shadow:0 0 110px rgba(47,128,255,.08)}
.sys-next{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1rem;position:relative}

/* ------------------------------------------------------------ motion layer */
.rise{opacity:0;transform:translateY(30px);transition:opacity .8s var(--sys-ease),transform .8s var(--sys-ease)}
.rise.is-shown{opacity:1;transform:none}
.slide-l{opacity:0;transform:translateX(-34px);transition:opacity .9s var(--sys-ease),transform .9s var(--sys-ease)}
.slide-r{opacity:0;transform:translateX(34px);transition:opacity .9s var(--sys-ease),transform .9s var(--sys-ease)}
.slide-l.is-shown,.slide-r.is-shown{opacity:1;transform:none}
.draw path,.draw line{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--sys-ease)}
.draw.is-shown path,.draw.is-shown line{stroke-dashoffset:0}
.draw.is-shown text{opacity:1}
.draw text{opacity:0;transition:opacity .6s ease .9s}

/* Horizontal reveals only where there is room for them. On a narrow screen a
   full-width card translated sideways widens the document, so it rises instead. */
@media(max-width:900px){
  .slide-l,.slide-r{transform:translateY(30px)}
}

@media (prefers-reduced-motion:reduce){
  .rise,.slide-l,.slide-r{opacity:1;transform:none;transition:none}
  .draw path,.draw line{stroke-dashoffset:0;transition:none}
  .draw text{opacity:1;transition:none}
  .sys-track i{transition:none}
  .sys-rail-fill{transition:none}
  .sys-rail li:before{transition:none}
}

/* ------------------------------------------------------------- responsive */
@media(max-width:1040px){
  .sys-gates{grid-template-columns:repeat(2,1fr)}
  .sys-weight{grid-template-columns:minmax(0,1fr) 190px 58px}
}
@media(max-width:900px){
  .sys-head{grid-template-columns:1fr;gap:2.2rem}
  .sys-chain{grid-template-columns:1fr;gap:2.5rem}
  .sys-rail{position:static}
  .sys-rail ol{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
  .sys-rail ol:before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .sys-rail-fill{left:0;top:5px;width:0;height:1px;transition:width .25s linear}
  .sys-rail li{padding:1.5rem 0 0}
  .sys-rail li:before{left:0;top:0}
  .sys-rail li b{font-size:.84rem}
  .sys-rail li span{display:none}
  .sys-rung{grid-template-columns:1fr;gap:.7rem}
  .sys-sev-row{grid-template-columns:20px 1fr;gap:1rem}
  .sys-sev-row p{grid-column:2}
  .sys-weight{grid-template-columns:1fr 54px;row-gap:.9rem}
  .sys-weight .sys-track{grid-column:1/-1}
  .sys-not{grid-template-columns:1fr}
  .sys-hero{min-height:88svh;padding-top:135px}
}
@media(max-width:620px){
  .sys-section{padding:78px 6vw}
  .sys-gates{grid-template-columns:1fr}
  .sys-rail ol{grid-template-columns:repeat(3,1fr);row-gap:1.2rem}
  .sys-hero-meta{gap:1.6rem 2rem}
  .sys-ledger li{grid-template-columns:1fr;gap:.5rem}
  .sys-case li{padding-left:2.6rem}
}