/* nextintelligence.ca design system.
   Two halves, marked. RATIFIED is byte-identical to the <style> block inside the
   judged-PASS index.html. ADDITIONS below it build only on the tokens declared there.
   No new colour, spacing or type token is declared anywhere in this file.
   No em-dashes in this file (R100). */

/* ================================================================
   RATIFIED. Byte-identical to index.html (judge PASS, 2026-09-08).
   Do not edit without re-running the judge pass on the first screen.
   ================================================================ */
:root{
  /* Colour tokens. Every pairing measured, see NEXTINTELLIGENCE-REFERENCE.md */
  --paper:#FFFFFF;
  --ink:#14161A;        /* body + headline on --paper */
  --ink-2:#464C55;      /* secondary text on --paper, measured 8.66:1 */
  --rule:#DDE1E6;       /* hairline dividers only, never a text or control colour */
  --field:#F4F6F8;      /* group cards */
  --accent:#123FC4;     /* links + primary button ground */
  --on-accent:#FFFFFF;

  /* 8px spacing scale. Nothing in this file uses a value outside it. */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* Type scale, 1.250 major third off a 16px base, rounded to whole px */
  --t-xs:13px; --t-s:16px; --t-m:20px; --t-l:25px; --t-xl:39px; --t-2xl:61px;

  --measure:1200px;   /* content max-width */
  --gutter:24px;      /* page gutter, both edges, all breakpoints */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--t-s); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--measure); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex; align-items:center; gap:var(--s4); min-height:72px}
.mark{font-size:var(--t-s); font-weight:700; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.nav{display:flex; gap:var(--s3); margin-left:auto}
.nav a{color:var(--ink-2); text-decoration:none; font-size:var(--t-s)}
.nav a:hover{color:var(--ink)}
.mast .talk{color:var(--accent); text-decoration:none; font-size:var(--t-s); font-weight:600; white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding-top:var(--s7); padding-bottom:var(--s6)}
.audience{
  font-size:var(--t-xs); font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 var(--s3)
}
h1{
  margin:0; font-size:var(--t-2xl); line-height:1.05; letter-spacing:-0.025em;
  font-weight:700; max-width:16ch
}
.lede{
  margin:var(--s3) 0 0; font-size:var(--t-m); line-height:1.5; color:var(--ink-2); max-width:56ch
}
.actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5)}
.btn{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:var(--s2) var(--s3); border-radius:2px; font-size:var(--t-s); font-weight:600; text-decoration:none;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--ink)}
.btn-secondary{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.btn-secondary:hover{background:var(--field)}

/* ---------- self-select rail: 15 tools, 4 groups ---------- */
.rail{padding-bottom:var(--s6)}
.rail-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2);
  padding-bottom:var(--s3); border-bottom:1px solid var(--rule)
}
.rail-head h2{margin:0; font-size:var(--t-l); letter-spacing:-0.015em; font-weight:700}
.rail-head p{margin:0; font-size:var(--t-s); color:var(--ink-2)}
.groups{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s4)
}
.group{background:var(--field); padding:var(--s3); border-radius:2px}
.group h3{
  margin:0 0 var(--s2); font-size:var(--t-xs); font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase; color:var(--ink)
}
.group ul{margin:0; padding:0; list-style:none}
.group li{font-size:var(--t-s); color:var(--ink-2); padding:2px 0}
.group li b{font-weight:600; color:var(--ink)}
.badge{font-size:11px; color:var(--ink-2); font-weight:400}

.status{
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--rule);
  font-size:var(--t-s); color:var(--ink-2)
}
.status b{color:var(--ink); font-weight:600}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .groups{grid-template-columns:repeat(2,1fr)}
  h1{font-size:var(--t-xl)}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .mast .wrap{min-height:64px; gap:var(--s2)}
  .nav{display:none}
  .hero{padding-top:var(--s5); padding-bottom:var(--s5)}
  h1{font-size:var(--t-xl); max-width:none}
  .lede{font-size:var(--t-s); max-width:none}
  .actions{margin-top:var(--s4)}
  .actions .btn{flex:1 1 100%; justify-content:center}
  .groups{grid-template-columns:1fr; gap:var(--s2)}
  .rail-head h2{font-size:var(--t-m)}
}

/* ================================================================
   END RATIFIED. Everything below is new in the full-page pass.
   Tokens used: only those declared in :root above.
   ================================================================ */

/* ---------- section shell ---------- */
.sec{padding-top:var(--s7); padding-bottom:var(--s7); border-top:1px solid var(--rule)}
.sec--tight{padding-top:var(--s6); padding-bottom:var(--s6)}
.eyebrow{
  font-size:var(--t-xs); font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 var(--s2)
}
.sec__title{
  margin:0; font-size:var(--t-l); line-height:1.15; letter-spacing:-0.015em;
  font-weight:700; max-width:28ch
}
.sec__lede{margin:var(--s3) 0 0; font-size:var(--t-s); color:var(--ink-2); max-width:62ch}

/* label column + content column, on the same 1200px measure */
.split{display:grid; grid-template-columns:1fr 3fr; gap:var(--s4); align-items:start}

/* ---------- the creed line, between the rail and the featured tool ---------- */
.creed{padding-top:var(--s6); padding-bottom:var(--s6); border-top:1px solid var(--rule)}
.creed p{
  margin:0; font-size:var(--t-l); line-height:1.25; letter-spacing:-0.015em;
  font-weight:700; max-width:24ch
}

/* ---------- featured tool ---------- */
.feature{background:var(--field); padding:var(--s6) var(--s5); border-radius:2px}
.feature .tag{
  display:inline-block; background:var(--accent); color:var(--on-accent);
  font-size:var(--t-xs); font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  padding:var(--s1) var(--s2); border-radius:2px; margin-bottom:var(--s3)
}
.feature h2{
  margin:var(--s1) 0 0; font-size:var(--t-xl); line-height:1.1; letter-spacing:-0.02em; font-weight:700
}
.feature p{margin:var(--s3) 0 0; font-size:var(--t-m); line-height:1.5; color:var(--ink-2); max-width:52ch}
.feature .btn{margin-top:var(--s4)}

/* ---------- tool detail: the fourteen described tools, by group ---------- */
.detail + .detail{margin-top:var(--s5)}
.detail h3{
  margin:0; font-size:var(--t-xs); font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase; color:var(--ink)
}
.detail-list{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.detail-list .item h4{margin:0; font-size:var(--t-s); font-weight:700; color:var(--ink)}
.detail-list .item p{margin:var(--s1) 0 0; font-size:var(--t-s); color:var(--ink-2); max-width:52ch}
.detail-list .item .badge{display:inline-block; margin-left:var(--s1)}

/* ---------- prose ---------- */
.prose p{margin:0; font-size:var(--t-s); line-height:1.65; color:var(--ink-2); max-width:62ch}
.prose p + p{margin-top:var(--s3)}
.prose .lead{font-size:var(--t-m); line-height:1.5; color:var(--ink); font-weight:400}

/* ---------- pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5)}
.pillar{border-top:2px solid var(--ink); padding-top:var(--s3)}
.pillar h3{margin:0; font-size:var(--t-m); line-height:1.25; letter-spacing:-0.01em; font-weight:700}
.pillar p{margin:var(--s2) 0 0; font-size:var(--t-s); color:var(--ink-2)}

/* ---------- people ---------- */
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5)}
.person{background:var(--field); padding:var(--s3); border-radius:2px}
.person .name{font-size:var(--t-m); font-weight:700; color:var(--ink); letter-spacing:-0.01em}
.person .role{font-size:var(--t-s); color:var(--ink-2); margin-top:var(--s1)}
.memory{
  margin:var(--s5) 0 0; padding-top:var(--s3); border-top:1px solid var(--rule);
  font-size:var(--t-s); color:var(--ink-2)
}

/* ---------- contact form ---------- */
.form{margin-top:var(--s5); max-width:640px}   /* 640 = 80 x 8, on the spacing scale */
.field + .field{margin-top:var(--s3)}
.field label{display:block; font-size:var(--t-s); font-weight:600; color:var(--ink); margin-bottom:var(--s1)}
.field input,.field textarea{
  width:100%; font:inherit; font-size:var(--t-s); color:var(--ink);
  background:var(--field);
  border:1px solid var(--ink-2);   /* control boundary: 7.99:1 on --field, clears WCAG 1.4.11 (3:1). --rule is 1.31:1 and is never used on a control. */
  border-radius:2px; padding:var(--s2);
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:2px}
.form .btn{margin-top:var(--s4); border:0; cursor:pointer; font-family:inherit}
.note{margin:var(--s3) 0 0; font-size:var(--t-s); color:var(--ink-2); max-width:62ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule); padding-top:var(--s4); padding-bottom:var(--s4)}
.foot p{margin:0; font-size:var(--t-s); color:var(--ink-2)}

/* ---------- additions: mobile ---------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr; gap:var(--s3)}
  .detail-list{grid-template-columns:1fr; gap:var(--s3)}
  .pillars{grid-template-columns:1fr; gap:var(--s4)}
  .people{grid-template-columns:1fr; gap:var(--s2)}
  .feature h2{font-size:var(--t-l)}
}
@media (max-width:640px){
  .sec{padding-top:var(--s5); padding-bottom:var(--s5)}
  .sec--tight{padding-top:var(--s5); padding-bottom:var(--s5)}
  .creed{padding-top:var(--s5); padding-bottom:var(--s5)}
  .creed p{font-size:var(--t-m); max-width:none}
  .sec__title{font-size:var(--t-m); max-width:none}
  .sec__lede,.prose p,.note{max-width:none}
  .feature{padding:var(--s4) var(--s3)}
  .feature p{font-size:var(--t-s); max-width:none}
  .prose .lead{font-size:var(--t-s)}
  .form .btn{width:100%; justify-content:center}
}