/* ============================================================
   PACE SUPPORT - Trace design system reskin

   Page-specific rules only. Fonts, tokens, reset, typography and
   buttons live in /assets/trace-base.css; the nav, footer and
   Request-access modal live in /assets/trace-chrome.css. Load both
   before this sheet.
   ============================================================ */


/* Two cards is short enough to underfill a tall display, which would leave a
   strip of paper below the dark footer. Flex column pins it to the bottom.
   svh first for mobile browser chrome, with a vh fallback for older engines.
   Everything else about body is in trace-base.css. */
body{
  display:flex; flex-direction:column;
  min-height:100vh;
  min-height:100svh;
}
body > footer{ margin-top:auto; }


.kv__val, .card__sub{ text-wrap:pretty; }

/* ============ HERO ============ */
/* Content-height, not viewport-height: the cards should start above the fold.
   No radial glow, no grid overlay (Trace keeps gradients for the CTA only).
   Padded tighter than the docs guides because this page is only two cards. */
.hero{
  padding:clamp(48px,7vw,88px) var(--gutter) clamp(24px,3vw,32px);
  text-align:center;
}
.hero h1{
  font-size:clamp(2.6rem, 5.6vw, 4.4rem);
  max-width:19ch;
  margin:0 auto 22px;
}
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero__sub{
  font-size:1.12rem;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 auto;
  line-height:1.6;
}

/* ============ SECTION ============ */
.sec{ padding:clamp(28px,3.5vw,36px) var(--gutter) clamp(56px,7vw,88px); }
.sec__inner{ max-width:1100px; margin:0 auto; }

/* ============ CARDS ============ */
.card{
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  padding:32px;
  margin-bottom:24px;
}
.card:last-child{ margin-bottom:0; }

.card__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.card__head > div:nth-child(2){ flex:1; min-width:0; }

.card__icon{
  width:44px; height:44px;
  border-radius:var(--r-card);
  background:var(--teal-tint);
  border:1px solid var(--teal-border);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.card__icon svg{ width:22px; height:22px; color:var(--teal); }

.card__title{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:700;
  color:var(--ink-warm);
  margin:0 0 4px;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.card__sub{ font-size:.88rem; color:var(--ink-mute); margin:0; }

/* ============ KEY / VALUE ROWS ============ */
.kv{
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
}
.kv__row{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.kv__row:last-child{ border-bottom:none; }
.kv__key{ font-size:.82rem; font-weight:600; color:var(--ink-mute); }
.kv__val{ font-size:.9rem; color:var(--ink); line-height:1.5; }

/* ============ PROSE INSIDE CARDS ============ */
.subhead{
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.005em;
  margin:30px 0 14px;
}
.subhead:first-of-type{ margin-top:0; }

.card__lede{
  font-size:1rem;
  color:var(--ink-soft);
  margin:0 0 24px;
  line-height:1.65;
}
.card__lede:last-child{ margin-bottom:0; }
.card__lede a{
  color:var(--teal);
  border-bottom:1px solid var(--teal-border);
  transition:border-color .18s ease;
}
.card__lede a:hover{ border-color:var(--teal); }

/* quiet aside, for the caveat under the hours table. Uniform hairline border:
   an accent rule on one edge only reads as decoration rather than meaning. */
.note{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  padding:16px 20px;
  margin-top:24px;
  font-size:.92rem;
  color:var(--ink-soft);
  line-height:1.6;
  text-wrap:pretty;
}


/* ============ RESPONSIVE ============ */
@media (max-width: 720px){
  .hero h1{ font-size:2.1rem; max-width:none; }
  .hero__sub{ font-size:1.02rem; }

  .card{ padding:24px 20px; }
  /* icon drops above the title rather than squeezing it */
  .card__head{ flex-wrap:wrap; gap:12px; }
  .card__head > div:nth-child(2){ flex:1 1 auto; min-width:0; }
  .card__title{ font-size:1.2rem; }

  .kv__row{ grid-template-columns:1fr; gap:4px; padding:12px 16px; }

}