/* ============================================================
   Hardrails landing page — page-specific styles.
   Extends site.css: hero tagline, prose links, the 7-component
   contract table, and the status rows. Same palette and type
   as the rest of the site, nothing new invented.
   ============================================================ */

/* -- Hero tagline ------------------------------------------------ */

.hr-tagline{
  margin:-4px 0 16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(20px, 2.8vw, 27px);
  letter-spacing:.02em;
  line-height:1.25;
  color:var(--text);
}

.hr-tagline em{font-style:normal;color:var(--accent)}

/* -- Prose -------------------------------------------------------- */

.hr-prose p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
  max-width:70ch;
}

.hr-prose a,
.hr-after-table a,
.hr-status-text a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--line-bright);
  text-underline-offset:3px;
}

.hr-prose a:hover,
.hr-after-table a:hover,
.hr-status-text a:hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
  opacity:1;
}

/* -- Boundary rules list ------------------------------------------ */

.hr-rules{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  max-width:70ch;
}

.hr-rules li{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:10px 0;
  border-top:1px solid var(--line);
  color:var(--text);
  font-size:14.5px;
}

.hr-rules li:last-child{border-bottom:1px solid var(--line)}

.hr-rules li::before{
  content:">";
  font-family:var(--font-mono);
  color:var(--accent);
  flex:0 0 auto;
}

/* -- Standout closing line ----------------------------------------- */

.hr-point{
  margin:22px 0 0;
  padding:16px 20px;
  border-left:2px solid var(--accent);
  background:var(--bg-raise);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text);
  font-size:15.5px;
  line-height:1.7;
  max-width:70ch;
}

/* -- Contract table ------------------------------------------------ */

.hr-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}

.hr-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:600px;
}

.hr-table th{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  text-align:left;
  padding:13px 18px;
  border-bottom:1px solid var(--line-bright);
  background:var(--bg-raise);
}

.hr-table td{
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  vertical-align:top;
  line-height:1.5;
}

.hr-table tr:last-child td{border-bottom:0}

.hr-table td:first-child{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--faint);
}

.hr-table td:nth-child(2){color:var(--text);font-weight:500}

.hr-tier{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:3px 9px;
  border-radius:5px;
  border:1px solid var(--line-bright);
  color:var(--muted);
  white-space:nowrap;
}

.hr-tier--code{
  border-color:rgba(183,255,42,.45);
  color:var(--accent);
  background:var(--accent-soft);
}

.hr-after-table{
  margin:14px 0 0;
  color:var(--muted);
  font-size:13.5px;
}

/* -- Status rows ---------------------------------------------------- */

.hr-status{display:grid;gap:12px}

.hr-status-row{
  display:flex;
  gap:16px;
  align-items:baseline;
  flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:16px 20px;
}

.hr-badge{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:5px;
  border:1px solid var(--line-bright);
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}

.hr-badge--stable{
  border-color:rgba(183,255,42,.45);
  color:var(--accent);
  background:var(--accent-soft);
}

.hr-badge--wip{border-color:var(--cyan);color:var(--cyan)}

.hr-status-text{
  margin:0;
  flex:1 1 320px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

.hr-status-text strong{color:var(--text);font-weight:600}