/* ════════════════════════════════════════════════════════════
   TERRIV PLATFORM  ·  shared system  ·  v2
   One typeface. Small radii. Thin borders. Green is affirmative,
   red is risk, amber is caution. Nothing is coloured for
   decoration. External file by CSP requirement: no inline styles.
   ════════════════════════════════════════════════════════════ */

:root {
  --paper:#FFFFFF; --page:#F6F5F2; --sunk:#EFEEE9;
  --rule:#E2E1DC; --rule-firm:#BFBEB7;
  --ink:#14161A; --ink-2:#43474E; --ink-3:#6B7078;

  --accent:#0B6B4F; --accent-dark:#085440; --accent-wash:#E8F0EC; --accent-line:#B9D2C7;
  --flag:#A8261D; --flag-wash:#FBEDEB; --flag-line:#E4BDB8;
  --warn:#8A5A00; --warn-wash:#FAF1DE; --warn-line:#E3D3AC;

  --font:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:20px; --fs-5:28px;
  --display:clamp(34px, 4.2vw, 48px);

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:104px;

  --r:6px;
  --shadow:0 1px 2px rgba(20,22,26,.05);

  --fast:140ms; --reveal:400ms; --ease:cubic-bezier(.22,.61,.36,1);

  --measure:1180px;
  --gutter:clamp(20px, 5vw, 40px);
  --nav-h:60px;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }

body{
  font-family:var(--font); font-size:var(--fs-3); line-height:1.5;
  color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
svg{ display:block; }
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r); }

.wrap{ max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.white{ background:var(--paper); }
.warm{ background:var(--page); }
.sec{ padding-block:var(--s-20); border-top:1px solid var(--rule); }
.sec-lg{ padding-block:var(--s-24); border-top:1px solid var(--rule); }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:var(--s-3) var(--s-4); border-radius:var(--r); }
.skip:focus{ left:var(--s-4); top:var(--s-4); }

/* ── Type ──────────────────────────────────────────────── */
h1{ font-size:var(--display); line-height:1.06; letter-spacing:-.032em; font-weight:700; text-wrap:balance; }
h2{ font-size:var(--fs-5); line-height:1.14; letter-spacing:-.022em; font-weight:700; text-wrap:balance; }
h3{ font-size:var(--fs-4); line-height:1.25; letter-spacing:-.012em; font-weight:700; }
h4{ font-size:var(--fs-3); line-height:1.3; font-weight:600; }
.eyebrow{ font-size:var(--fs-1); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s-4); }
.lede{ font-size:var(--fs-3); line-height:1.55; color:var(--ink-2); max-width:58ch; }
.note{ font-size:var(--fs-1); line-height:1.5; color:var(--ink-3); }
.sec-head{ margin-bottom:var(--s-12); max-width:66ch; }
.sec-head h1 + .lede, .sec-head h2 + .lede{ margin-top:var(--s-4); }

/* ── Buttons: rectangular, slight radius, green primary ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-size:var(--fs-2); font-weight:600; min-height:44px;
  padding:var(--s-3) var(--s-6); border-radius:var(--r);
  background:var(--accent); color:var(--paper);
  transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover{ background:var(--accent-dark); }
.btn:active{ transform:translateY(1px); }
.btn-quiet{ background:transparent; color:var(--ink); border:1px solid var(--rule-firm); }
.btn-quiet:hover{ background:var(--sunk); border-color:var(--ink-3); }
.btn-lg{ min-height:52px; padding:var(--s-4) var(--s-8); font-size:var(--fs-3); }
.link{
  font-size:var(--fs-2); font-weight:600; color:var(--accent);
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
  text-decoration-color:var(--accent-line);
  transition:text-decoration-color var(--fast) var(--ease);
}
.link:hover{ text-decoration-color:var(--accent); }
.actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-8); }
.actions .link{ display:inline-flex; align-items:center; min-height:44px; }

/* ── Chips: status only, never decoration ──────────────── */
.chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:var(--fs-1); font-weight:600; line-height:1.4;
  padding:2px var(--s-2); border-radius:var(--r);
  border:1px solid var(--rule-firm); color:var(--ink-2); background:var(--paper);
}
.chip-risk{ color:var(--flag); border-color:var(--flag-line); background:var(--flag-wash); }
.chip-warn{ color:var(--warn); border-color:var(--warn-line); background:var(--warn-wash); }
.chip-ok{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-wash); }

/* ── Inline icons: 1.75 stroke on a 24 grid ────────────── */
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:var(--ink-3);
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ico-accent{ stroke:var(--accent); }
.ico-sm{ width:16px; height:16px; }

/* ── Navigation ────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:50; background:var(--page); border-bottom:1px solid var(--rule); }
.nav-in{ display:flex; align-items:center; gap:var(--s-5); height:var(--nav-h); }
.wordmark{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--fs-3); font-weight:700; letter-spacing:-.02em; }
.wordmark svg{ width:18px; height:18px; }
.nav-links{ display:flex; align-items:center; gap:var(--s-5); margin-left:auto; }
.nav-links a{ font-size:var(--fs-2); color:var(--ink-2); transition:color var(--fast) var(--ease); white-space:nowrap; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav-signin{ padding-left:var(--s-3); border-left:1px solid var(--rule); }
.nav-links .btn{ min-height:36px; padding:var(--s-2) var(--s-4); color:var(--paper); }
.nav-links .btn:hover{ color:var(--paper); }
.nav-toggle{ display:none; margin-left:auto; padding:var(--s-2); border-radius:var(--r); }
.nav-toggle svg{ width:22px; height:22px; stroke:var(--ink); stroke-width:1.75; fill:none; }
.nav-panel{ display:none; }

/* ── Footer ────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--rule); padding-block:var(--s-16) var(--s-8); background:var(--page); }
.foot-cols{ display:grid; grid-template-columns:1.7fr repeat(3,minmax(0,1fr)); gap:var(--s-8); }
.foot h2{ font-size:var(--fs-1); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s-4); }
.foot ul{ list-style:none; display:grid; gap:var(--s-2); }
.foot li a{ font-size:var(--fs-2); color:var(--ink-2); }
.foot li a:hover{ color:var(--ink); }
.foot-blurb{ margin-top:var(--s-4); max-width:32ch; }
.foot-note{ margin-top:var(--s-12); padding-top:var(--s-5); border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; }
.foot-note p{ max-width:72ch; }

/* ── Reveal on scroll ──────────────────────────────────── */
[data-reveal].armed{ opacity:0; transform:translateY(8px); }
[data-reveal].armed.in{ opacity:1; transform:none; transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }

/* ── Metrics strip: one bordered row, divided, not cards ── */
.metrics{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); overflow:hidden; }
.metric{ padding:var(--s-5) var(--s-6); border-left:1px solid var(--rule); }
.metric:first-child{ border-left:0; }
.metric b{ display:block; font-size:var(--fs-5); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.metric span{ display:block; font-size:var(--fs-1); color:var(--ink-3); margin-top:var(--s-1); }
.metric .chip{ margin-top:var(--s-2); }
.metric-risk b{ color:var(--flag); }
.metric-accent b{ color:var(--accent); }

/* ── Data tables: enterprise rows, not cards ───────────── */
.dt{ width:100%; border-collapse:collapse; }
.dt th, .dt td{ text-align:left; vertical-align:top; padding:var(--s-4) var(--s-5) var(--s-4) 0; border-bottom:1px solid var(--rule); font-size:var(--fs-2); }
.dt thead th{ font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); border-bottom:1px solid var(--ink); padding-bottom:var(--s-2); font-weight:600; }
.dt tbody th{ font-weight:600; color:var(--ink); }
.dt td{ color:var(--ink-2); }
.dt .num{ text-align:right; white-space:nowrap; }
.dt tr.row-risk td, .dt tr.row-risk th{ background:linear-gradient(to right, var(--flag) 0, var(--flag) 3px, transparent 3px); }
.dt-sub{ display:block; font-size:var(--fs-1); color:var(--ink-3); margin-top:2px; font-weight:400; }

/* ── Panels: product interface framing ─────────────────── */
.panel{ border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow); overflow:hidden; }
.panel-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--rule); background:var(--sunk); }
.panel-bar .t{ font-size:var(--fs-2); font-weight:600; }
.panel-bar .m{ font-size:var(--fs-1); color:var(--ink-3); }
.panel-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-5); border-top:1px solid var(--rule); background:var(--sunk); }
.panel-pad{ padding:var(--s-5); }
.sample-note{ font-size:var(--fs-1); color:var(--ink-3); margin-top:var(--s-3); }

/* ── Attention list: how the product flags work ────────── */
.attn{ list-style:none; display:grid; }
.attn li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--s-3); padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--rule); font-size:var(--fs-2); color:var(--ink-2); align-items:start; }
.attn li:last-child{ border-bottom:0; }
.attn .ico{ margin-top:2px; }
.attn b{ color:var(--ink); font-weight:600; }

/* ── Logo carousel: muted, slow, seamless ──────────────── */
.logos-band{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--paper); padding-block:var(--s-10); }
.logos-label{ max-width:var(--measure); margin:0 auto var(--s-6); padding-inline:var(--gutter);
  font-size:var(--fs-1); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
.logos{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos-track{ display:flex; align-items:center; gap:var(--s-20); width:max-content; list-style:none;
  animation:logos-move 70s linear infinite; }
.logos:hover .logos-track{ animation-play-state:paused; }
@keyframes logos-move{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logos-track li{ display:flex; align-items:center; }
.lg{ width:auto; display:block; filter:grayscale(.35); opacity:.8;
  transition:filter var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.logos:hover .lg{ filter:grayscale(0); opacity:1; }
.lg-lf{ height:46px; } .lg-bh{ height:54px; } .lg-kw{ height:48px; }
.lg-rm{ height:56px; } .lg-ex{ height:34px; }
/* Development placeholder mode: set data-logos="wordmarks" on .logos to
   render neutral text instead of brand marks before production sign-off. */
.logos[data-logos="wordmarks"] img{ display:none; }
.logos[data-logos="wordmarks"] .lg-word{ display:block; }
.lg-word{ display:none; font-size:var(--fs-4); font-weight:600; letter-spacing:-.015em; color:var(--ink-3); white-space:nowrap; }

/* ── Forms ─────────────────────────────────────────────── */
.field{ margin-top:var(--s-4); }
.field label{ display:block; font-size:var(--fs-1); font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-bottom:var(--s-2); }
.field .opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); }
.field input, .field select{
  width:100%; min-height:44px; padding:0 var(--s-3);
  border:1px solid var(--rule-firm); border-radius:var(--r);
  font-size:var(--fs-2); background:var(--paper);
  transition:border-color var(--fast) var(--ease);
}
.field textarea{ width:100%; min-height:96px; padding:var(--s-3);
  border:1px solid var(--rule-firm); border-radius:var(--r);
  font-size:var(--fs-2); background:var(--paper); line-height:1.5; resize:vertical;
  transition:border-color var(--fast) var(--ease); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ border-color:var(--accent); }
.field .err{ display:none; font-size:var(--fs-1); color:var(--flag); margin-top:var(--s-2); font-weight:600; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--flag); }
.field.invalid .err{ display:block; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formcard{ border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); padding:var(--s-6); box-shadow:var(--shadow); }
.formcard .btn{ width:100%; margin-top:var(--s-5); }
.btn[aria-busy="true"]{ opacity:.75; pointer-events:none; }
.sent{ border:1px solid var(--accent-line); background:var(--accent-wash); border-radius:var(--r); padding:var(--s-6); }
.sent h3{ color:var(--accent-dark); }
.sent p{ font-size:var(--fs-2); color:var(--ink-2); margin-top:var(--s-3); }
.failed{ border:1px solid var(--flag-line); background:var(--flag-wash); border-radius:var(--r); padding:var(--s-6); }
.failed h3{ color:var(--flag); }
.failed p{ font-size:var(--fs-2); color:var(--ink-2); margin-top:var(--s-3); }
.failed .btn-quiet{ margin-top:var(--s-4); }

/* ── Plain statement: bordered aside, no card ──────────── */
.plain{ padding-left:var(--s-5); border-left:2px solid var(--rule-firm); font-size:var(--fs-2); line-height:1.55; color:var(--ink-2); max-width:76ch; }
.plain-accent{ border-left-color:var(--accent-line); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-panel.open{ display:block; border-top:1px solid var(--rule); background:var(--page); }
  .nav-panel ul{ list-style:none; padding:var(--s-3) 0 var(--s-5); max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
  .nav-panel li a{ display:block; padding:var(--s-3) 0; font-size:var(--fs-3); min-height:44px; }
  .nav-panel .btn{ width:100%; margin-top:var(--s-3); }
}
@media (max-width:1024px){
  .metrics{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); }
  .metric{ border-left:1px solid var(--rule); border-top:1px solid var(--rule); }
  .metric:nth-child(3n+1){ border-left:0; }
  .metric:nth-child(-n+3){ border-top:0; }
  .foot-cols{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:900px){
  .dt-collapse thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .dt-collapse tbody tr{ display:block; padding-block:var(--s-4); border-bottom:1px solid var(--rule); }
  .dt-collapse tbody th{ display:block; border-bottom:0; padding:0 0 var(--s-1); }
  .dt-collapse tbody td{ display:block; border-bottom:0; padding:2px 0; }
  .dt-collapse tbody td.num{ text-align:left; }
  .dt-collapse tbody td::before{ content:attr(data-l) ": "; color:var(--ink-3); font-weight:600; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .logos-track{ gap:var(--s-12); }
  .lg-lf{ height:36px; } .lg-bh{ height:42px; } .lg-kw{ height:38px; }
  .lg-rm{ height:44px; } .lg-ex{ height:27px; }
}
@media (max-width:560px){
  .metrics{ grid-template-columns:1fr 1fr; }
  .metric:nth-child(3n+1){ border-left:1px solid var(--rule); }
  .metric:nth-child(odd){ border-left:0; }
  .metric:nth-child(-n+2){ border-top:0; }
  .metric:nth-child(3){ border-top:1px solid var(--rule); }
  .actions .btn, .actions .btn-quiet{ width:100%; }
  .pair{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr; gap:var(--s-6); }
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal].armed{ opacity:1; transform:none; }
  .logos-track{ animation:none; }
  .logos{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}