/* The Direct API — thedirectapi.com. Built on the design system extracted from the AMP pitch deck. */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/shape.css');
@import url('tokens/motion.css');

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--bg-canvas);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--text-body-size);
  line-height:var(--lh-body);
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none;transition:var(--transition-base)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--amber-soft)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

/* ---------- layout ---------- */
.container{
  max-width:calc(var(--content-max) + 2 * var(--slide-pad));
  margin:0 auto;
  padding-inline:clamp(20px, 5vw, var(--slide-pad));
}
.section{padding-block:clamp(72px, 10vw, 128px)}
.section--ink{
  background-color:var(--ink);
  background-image:var(--backdrop-grid);
  background-size:var(--grid-size) var(--grid-size);
}
.section-head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:clamp(40px, 6vw, 72px)}
.col-row{
  display:grid;
  grid-template-columns:repeat(var(--grid-columns), 1fr);
  gap:clamp(28px, 4vw, var(--grid-gap));
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 5vw, 64px)}
@media (max-width:860px){
  .two-col{grid-template-columns:1fr}
}
@media (max-width:720px){
  .col-row{grid-template-columns:1fr}
}

/* ---------- type ---------- */
.display{
  margin:0;
  font-family:var(--font-sans);
  font-weight:var(--weight-bold);
  font-size:clamp(38px, 6vw, var(--text-display));
  line-height:var(--lh-display);
  letter-spacing:var(--track-display);
  color:var(--text-strong);
  text-wrap:balance;
}
.display--hero{
  font-size:clamp(52px, 9vw, var(--text-hero));
  line-height:var(--lh-hero);
  letter-spacing:var(--track-hero);
}
.display .line{display:block}
.display .faint{color:var(--text-faint)}
.display .accent{color:var(--text-accent)}
.lede{
  margin:0;
  max-width:var(--measure-body);
  font-size:var(--text-lede);
  line-height:var(--lh-body);
  letter-spacing:var(--track-body);
  color:var(--text-body);
  text-wrap:pretty;
}
.lede--muted{color:var(--text-muted)}
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-label);
  line-height:var(--lh-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.eyebrow--accent{color:var(--text-accent)}
.body-copy{margin:0;max-width:var(--measure-body);font-size:var(--text-lede);line-height:var(--lh-body);color:var(--text-body)}
.body-copy strong{color:var(--text-strong)}

/* ---------- brand chrome ---------- */
.wordmark{
  font-family:var(--font-mono);
  font-size:var(--text-wordmark);
  font-weight:var(--weight-regular);
  letter-spacing:var(--track-wordmark);
  text-transform:uppercase;
  color:var(--text-strong);
  white-space:nowrap;
}
a.wordmark:hover{color:var(--text-strong);opacity:var(--hover-opacity)}
.section-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px 6px;
  border:1px solid var(--text-strong);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--text-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-strong);
  white-space:nowrap;
  align-self:flex-start;
}

/* ---------- header — transparent, sits on the ink hero ---------- */
.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  background:transparent;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  height:72px;
}

/* ---------- buttons & chips ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:12px 22px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-family:var(--font-mono);
  font-size:var(--text-small);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  cursor:pointer;
  transition:var(--transition-base);
}
.btn:hover{opacity:var(--hover-opacity)}
.btn:active{transform:scale(var(--press-scale))}
.btn--accent{background:var(--fill-accent);color:var(--on-accent)}
.btn--accent:hover{color:var(--on-accent)}
.btn--outline{background:transparent;border-color:var(--text-strong);color:var(--text-strong)}
.btn--outline:hover{color:var(--text-strong)}
.btn--sm{padding:8px 16px;font-size:var(--text-label)}
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:8px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--hairline-strong);
  background:transparent;
  color:var(--text-strong);
  font-size:var(--text-small);
  line-height:1;
  white-space:nowrap;
}
.chip .chip-label{
  font-family:var(--font-mono);
  font-size:var(--text-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  opacity:.9;
}
.chip .chip-value{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-small)}
.chip--accent{border-color:transparent;background:var(--fill-accent);color:var(--on-accent)}
.chip--accent .chip-label{opacity:1}
.chip--accent .chip-value{font-family:var(--font-mono);letter-spacing:var(--track-label)}
.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--radius-pill);
  border:1px solid var(--text-strong);
  background:transparent;
  color:var(--text-strong);
  font-size:13px;
  line-height:1;
}
.icon-badge--accent{border-color:transparent;background:var(--fill-accent);color:var(--on-accent)}

/* ---------- ruled columns ---------- */
.ruled{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding-top:var(--space-4);
  border-top:var(--border-rule);
}
.ruled--accent{border-top:var(--border-accent)}
.ruled h3{
  margin:0;
  font-size:var(--text-lede);
  font-weight:var(--weight-bold);
  letter-spacing:var(--track-title);
  color:var(--text-strong);
}
.ruled p{
  margin:0;
  max-width:var(--measure-column);
  font-size:var(--text-body-size);
  line-height:var(--lh-body);
  color:var(--text-muted);
}
.stat-value{
  font-family:var(--font-mono);
  font-size:clamp(34px, 4.5vw, var(--text-stat));
  font-weight:var(--weight-regular);
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--text-strong);
}
.stat-value--sm{font-size:clamp(30px, 3.5vw, var(--text-stat-sm))}
.stat-value--accent{color:var(--text-accent)}

/* ---------- arrow point columns ---------- */
.point{display:flex;flex-direction:column;gap:var(--space-4)}
.point h3{
  margin:0;
  font-size:var(--text-lede);
  font-weight:var(--weight-bold);
  letter-spacing:var(--track-title);
  color:var(--text-strong);
}
.point p{
  margin:0;
  max-width:var(--measure-column);
  font-size:var(--text-body-size);
  line-height:var(--lh-body);
  color:var(--text-muted);
}

/* ---------- hero — fills the viewport; the footer sits below the fold line ---------- */
main{flex:1;display:flex;flex-direction:column}
.hero{flex:1;display:flex;align-items:center;padding-block:clamp(88px, 12vw, 160px)}
.hero .container{width:100%}
.hero-inner{display:flex;flex-direction:column;gap:clamp(24px, 3vw, 32px)}
.hero-chips{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}

/* ---------- team ---------- */
.person{display:flex;gap:var(--space-6);align-items:flex-start}
.person-well{
  width:90px;
  height:90px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-well);
  border-radius:var(--radius-xs);
  font-family:var(--font-mono);
  font-size:var(--text-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-faint);
}
.person h3{
  margin:0 0 var(--space-2);
  font-size:var(--text-body-size);
  font-weight:var(--weight-bold);
  letter-spacing:var(--track-title);
  color:var(--text-strong);
}
.person p{margin:0;font-size:var(--text-small);line-height:1.45;color:var(--text-muted)}
@media (max-width:480px){
  .person{flex-direction:column}
}

/* ---------- product band ---------- */
.product-band{background:var(--paper-2)}
.product-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:clamp(32px, 5vw, 56px)}

/* ---------- footer — transparent, continuous with the ink canvas ---------- */
.site-footer{background:transparent}
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding-block:var(--space-8);
}
.footer-line{
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.footer-links a{
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.footer-links a:hover{color:var(--text-strong)}