/* about.html only. Uses tokens from base.css. */

/* Hero + story */
.about-hero { padding-top: var(--s-8); }
.about-hero__grid { display: grid; gap: var(--s-7); align-items: start; }
.about-hero__title { max-width: 15ch; }
.about-hero__lead { margin-top: var(--s-5); }
.about-story { margin-top: var(--s-6); max-width: 60ch; color: var(--text-2); }
.about-story p + p { margin-top: var(--s-4); }
.about-story p:first-child { padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* "Before" window: eight tabs */
.about-before { margin: 0; min-width: 0; }
.before { font-size: 13px; line-height: 1.6; }
.before__cmd { color: var(--text); }
.before__tabs { margin-top: var(--s-3); list-style: none; padding: 0; }
.before__tabs li {
  display: flex;
  gap: 12px;
  min-height: 30px;
  align-items: center;
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: var(--r-ctl);
  color: var(--text-2);
  white-space: nowrap;
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.before__tabs li:hover { background: var(--selection); color: var(--text); }
.before__tabs .t-i { flex: none; width: 2ch; color: var(--text-3); text-align: right; }
.before__tabs .t-n { flex: none; width: 11ch; color: var(--text); }
.before__tabs .t-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.before__tabs .t-warn { color: var(--warn); }
.before__after { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--border); }
.before__ok { margin-top: 2px; color: var(--text); }
.about-before__cap { margin-top: var(--s-3); font-size: 12px; color: var(--text-2); }

/* Principles */
.principles {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.principle {
  position: relative;
  display: grid;
  grid-template-columns: 3ch 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-content: start;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.principle::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--s-3));
  border-radius: var(--r-card);
  background: var(--selection);
  opacity: 0;
  transition: opacity var(--t) ease-out;
  pointer-events: none;
}
.principle:hover::before { opacity: 1; }
.principle__num {
  grid-row: 1 / span 2;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-2);
  transition: color var(--t-fast) ease-out;
}
.principle:hover .principle__num { color: var(--accent); }
.principle__title { position: relative; font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.principle__body { position: relative; grid-column: 2; color: var(--text-2); max-width: 52ch; }

/* Under the hood */
.hood { display: grid; gap: var(--s-7); align-items: center; }
.hood__copy > * + * { margin-top: var(--s-4); }
.hood__copy .eyebrow + * { margin-top: 0; }
.hood__note { max-width: 56ch; }
.hood__win { min-width: 0; }
.vv { font-size: 13px; line-height: 1.75; overflow-x: auto; }
.vv__cmd { color: var(--text); }
.vv__head { margin-bottom: var(--s-2); color: var(--accent); }
.vv__row { padding-left: 12ch; text-indent: -12ch; color: var(--text); }
.vv__row .k { display: inline-block; width: 12ch; text-indent: 0; color: var(--text-2); }
.vv__end { margin-top: var(--s-2); }

/* CTA band */
/* .about-cta is framed by the shared .cta-band (base.css) */
.about-cta__copy .title { max-width: 24ch; }
.about-cta__lead { margin-top: var(--s-4); max-width: 52ch; }

@media (min-width: 640px) {
  .principles { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
}
@media (min-width: 1024px) {
  .about-hero { padding-top: var(--s-9); }
  .about-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: var(--s-8); }
  .about-before { position: sticky; top: calc(var(--header-h) + var(--s-6)); margin-top: var(--s-9); }
  .principles { grid-template-columns: repeat(3, 1fr); }
  .hood { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--s-8); }
  .about-cta { grid-template-columns: 1fr auto; align-items: end; }
}
@media (max-width: 479px) {
  .before__tabs .t-n { width: 10ch; }
  .vv { font-size: 12px; }
  .vv__row { padding-left: 10ch; text-indent: -10ch; }
  .vv__row .k { width: 10ch; }
  .about-cta__actions .btn { flex: 1 1 100%; }
}