.semantic-page  {
  display:grid;
  gap:2rem;
  padding-top:1.6rem
}
.semantic-hero  {
  padding:clamp(1.5rem,4vw,3rem);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2rem;
  align-items:center;
  background:linear-gradient(130deg,#fff,#edf5f9)
}
.semantic-hero h1  {
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.12;
  margin:.8rem 0;
  color:var(--brand)
}
.semantic-lead  {
  font-size:1.15rem;
  font-weight:700;
  line-height:1.5
}
.semantic-intro  {
  color:var(--text-soft);
  line-height:1.75
}
.semantic-hero .btn  {
  margin-top:1.4rem
}
.semantic-hero img {
  width:100%
}
.semantic-section-head  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem
}
.semantic-section-head h2 {
  margin:.3rem 0;
  font-size:1.6rem
}
.semantic-pill  {
  padding:.5rem .8rem;
  background:var(--brand-soft);
  color:var(--brand);
  border-radius:100px;
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap
}
.semantic-note  {
  color:var(--text-soft);
  font-size:.85rem;
  line-height:1.7;
  max-width:900px;
  margin:.8rem 0 1.3rem
}
.semantic-lab {
  scroll-margin-top:140px
}
.semantic-lab-grid  {
  display:grid;
  grid-template-columns:310px 1fr;
  gap:1.3rem;
  align-items:start
}
.semantic-controls {
  padding:1.5rem;
  display:grid;
  gap:.75rem
}
.semantic-controls h3 {
  margin:0 0 .6rem
}
.semantic-controls label {
  font-size:.85rem;
  font-weight:700;
  line-height:1.5
}
.semantic-controls select {
  width:100%;
  padding:.7rem;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  font:inherit;
  font-size:.8rem;
  color:var(--text)
}
.semantic-control  {
  margin:.5rem 0
}
.semantic-control label {
  display:flex;
  justify-content:space-between;
  gap:.4rem
}
.semantic-control output {
  color:var(--brand)
}
.semantic-control input {
  width:100%;
  accent-color:var(--brand);
  margin:.7rem 0
}
.semantic-control p {
  font-size:.75rem;
  line-height:1.5;
  color:var(--text-muted);
  margin:0
}
.semantic-check {
  display:flex;
  gap:.6rem;
  align-items:start
}
.semantic-check input {
  accent-color:var(--brand);
  margin-top:.3rem
}
.semantic-results {
  display:grid;
  gap:1rem
}
.semantic-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem
}
.semantic-metrics article {
  padding:1.2rem;
  display:grid;
  gap:.5rem
}
.semantic-metrics span {
  font-size:.75rem;
  font-weight:700
}
.semantic-metrics strong {
  font-size:1.8rem;
  color:var(--brand)
}
.semantic-metrics small {
  font-size:.68rem;
  color:var(--text-muted)
}
.semantic-flow {
  padding:1.5rem
}
.semantic-flow h3 {
  margin:0 0 1rem
}
.semantic-flow ol {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.3rem
}
.semantic-flow li {
  display:flex;
  gap:1rem
}
.semantic-step {
  display:grid;
  place-items:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:.7rem;
  font-weight:800;
  flex-shrink:0
}
.semantic-flow h4 {
  margin:.2rem 0 .4rem;
  font-size:.85rem
}
.semantic-flow p {
  margin:0;
  color:var(--text-soft);
  line-height:1.65;
  font-size:.85rem
}
.semantic-flow small {
  display:block;
  margin-top:.5rem;
  color:var(--text-muted);
  font-size:.73rem
}
.semantic-decision {
  padding:1.5rem;
  border-left:5px solid var(--ok);
  background:#f3faf7
}
.semantic-decision[data-state="review"] {
  border-left-color:var(--warn);
  background:#fffaf1
}
.semantic-decision[data-state="reject"] {
  border-left-color:#a33d43;
  background:#fff5f5
}
.semantic-decision h3 {
  margin:.5rem 0;
  font-size:1.3rem
}
.semantic-decision p {
  font-size:.85rem;
  line-height:1.6
}
.semantic-action {
  font-weight:700
}
.semantic-explain {
  padding:1.7rem
}
.semantic-explain h2 {
  margin:0 0 1.3rem
}
.semantic-explain-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}
.semantic-explain h3 {
  font-size:.95rem
}
.semantic-explain p {
  font-size:.82rem;
  line-height:1.75;
  color:var(--text-soft)
}
.semantic-explain details {
  border-top:1px solid var(--line);
  margin-top:1rem;
  padding-top:1rem
}
.semantic-explain summary {
  cursor:pointer;
  font-weight:700;
  font-size:.85rem
}
.semantic-back {
  display:inline-block;
  margin-top:1.5rem;
  color:var(--brand);
  font-weight:700;
  font-size:.85rem
}
@media(max-width:900px) {
  .semantic-hero {
    grid-template-columns:1fr
  }
  .semantic-hero img {
    max-width:480px;
    margin:auto
  }
  .semantic-lab-grid {
    grid-template-columns:1fr
  }
  .semantic-controls {
    grid-template-columns:1fr
  }
  .semantic-explain-grid {
    grid-template-columns:1fr;
    gap:.3rem
  }
}
@media(max-width:540px) {
  .semantic-section-head {
    align-items:start;
    flex-direction:column
  }
  .semantic-metrics {
    grid-template-columns:1fr
  }
  .semantic-metrics article {
    grid-template-columns:1fr auto;
    align-items:center
  }
  .semantic-metrics small {
    grid-column:1 / -1
  }
  .semantic-flow,.semantic-controls,.semantic-decision {
    padding:1.1rem
  }
}
.pilot-selectors {
  margin:1.3rem 0;
  grid-template-columns:1fr 1fr;
  gap:1.5rem
}
.pilot-selectors label {
  display:block;
  margin-bottom:.6rem
}
.pilot-table-wrap {
  overflow-x:auto;
  padding:1.2rem
}
.pilot-table {
  width:100%;
  border-collapse:collapse;
  font-size:.8rem;
  text-align:left;
  min-width:680px
}
.pilot-table caption {
  text-align:left;
  font-weight:800;
  color:var(--brand);
  padding:.3rem 0 1rem
}
.pilot-table th,.pilot-table td {
  padding:.9rem .65rem;
  border-bottom:1px solid var(--line);
  line-height:1.5
}
.pilot-table thead {
  background:var(--surface-muted)
}
.pilot-table tbody th {
  font-weight:600
}
.pilot-proposed {
  background:#eaf3f9
}
.semantic-flow select {
  padding:.65rem;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  font-size:.8rem;
  margin:.6rem 0 1rem;
  background:white
}
#pilot-episode {
  line-height:1.7;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:1.2rem
}
#pilot-trace {
  gap:.65rem
}
#pilot-trace li {
  border-left:2px solid var(--line);
  padding-left:.8rem
}
.semantic-lab>.semantic-decision {
  margin:1rem 0
}
@media(max-width:540px) {
  .pilot-selectors {
    grid-template-columns:1fr
  }
}

/* Keep wide research tables scrollable inside their panel on small screens. */
.semantic-page,.semantic-page > *, .semantic-results,.semantic-lab-grid > *, .pilot-table-wrap  {
   min-width: 0;
   max-width: 100%;
}
.pilot-table-wrap  {
   box-sizing: border-box;
}
.semantic-page  {
   width: 100%;
}
.semantic-controls select  {
   min-height: 44px;
}

.semantic-hero > *  {
   min-width: 0;
}
.semantic-hero .resource-meta  {
   display:flex;
   flex-wrap:wrap;
}
.semantic-hero img  {
   max-width:100%;
}