/* Site styles for the Agensinc landing page — implemented from
   "Agensinc Poster v2.dc.html". Tokens come from modernist.css. */

:root {
  --pad-x: 64px; /* horizontal page gutter, shrinks on smaller viewports */
}

body {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}
html { scroll-behavior: smooth; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
summary::-webkit-details-marker { display: none; }

/* — shared — */
.kicker {
  display: block;
  font-size: 13px; line-height: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 14px;
}
.section-title {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(34px, 5vw, 48px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 42px;
}
.muted-78 { color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — nav — */
.topnav {
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--pad-x);
  background: var(--color-accent); color: var(--color-bg);
}
.topnav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 19px; letter-spacing: -0.01em;
}
.brand-mark {
  display: inline-block; width: 26px; height: 25px; flex: none;
  background: currentColor;
  -webkit-mask: url("../assets/logo-mark.svg") no-repeat center / contain;
  mask: url("../assets/logo-mark.svg") no-repeat center / contain;
}
.topnav-links {
  display: flex; gap: 24px; margin-left: auto; align-items: center;
  flex-wrap: wrap;
}
.topnav-links a:not(.nav-cta) {
  font-size: 14px; font-weight: 600;
  color: var(--color-bg); text-decoration: none;
}
.nav-cta {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px;
  background: transparent; color: var(--color-bg);
  border: 1px solid var(--color-bg);
  padding: 9px 15px; text-decoration: none; display: inline-block;
}
.nav-cta:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-bg); }

/* — hero — */
.hero {
  background: var(--color-accent); color: var(--color-bg);
  padding: 24px 0 0;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0; align-items: stretch;
}
.hero-copy {
  padding: 64px var(--pad-x) 72px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-title {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(44px, 4.6vw, 68px); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0;
}
.hero-title span { display: block; }
.hero-lede {
  font-size: 18px; line-height: 29px; margin: 24px auto 0;
  font-weight: 500; max-width: 52ch;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; justify-content: center; }
.btn-hero-solid {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px;
  background: var(--color-bg); color: var(--color-accent);
  border: 1px solid var(--color-bg);
  padding: 13px 20px; text-decoration: none;
}
.btn-hero-solid:hover { background: var(--color-neutral-200); color: var(--color-accent); }
.btn-hero-outline {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px;
  background: transparent; color: var(--color-bg);
  border: 1px solid var(--color-bg);
  padding: 13px 20px; text-decoration: none;
}
.btn-hero-outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-bg); }
.hero-note {
  margin: 14px 0 0; font-size: 13px; line-height: 20px;
  color: rgba(243, 242, 242, 0.85);
}
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; justify-content: center; }
.badge {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(243, 242, 242, 0.5);
  padding: 6px 10px;
}
/* — stack strip (marquee) — */
.stack-strip {
  padding: 18px var(--pad-x);
  border-bottom: 2px solid var(--color-divider);
  display: flex; gap: 28px; align-items: center;
}
.stack-strip .label {
  flex: none;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.marquee { flex: 1; min-width: 0; overflow: hidden; }
.marquee-track {
  display: flex; width: max-content;
  animation: stack-marquee 22s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.stack-strip .logos {
  flex: none;
  display: flex; gap: 24px; padding-right: 24px;
  white-space: nowrap;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
@keyframes stack-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* — before/after swaps — */
.swaps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 2px solid var(--color-divider);
}
.swap {
  padding: 32px 28px;
  border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 16px;
}
.swap-before {
  margin: 0; font-size: 14px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}
.swap-after {
  margin: 0;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 15px; line-height: 24px; letter-spacing: -0.005em;
}

/* — who it's for — */
.who { padding: 84px var(--pad-x) 0; }
.who-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--color-divider);
}
.who-col { padding: 32px 0 40px 40px; }
.who-col:first-child {
  padding: 32px 40px 40px 0;
  border-right: 2px solid var(--color-divider);
}
.who-col h3 {
  margin: 0 0 12px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 24px; line-height: 30px; letter-spacing: -0.01em;
}
.who-col p {
  margin: 0 0 20px; font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.text-cta {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px;
  color: var(--color-accent-700); text-decoration: none;
  text-underline-offset: 4px;
}
.text-cta:hover { text-decoration: underline; color: var(--color-accent-700); }

/* — what we build — */
.build { padding: 84px var(--pad-x) 0; }
.build-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 64px; align-items: start;
}
.build-intro h2 { margin: 0; }
.build-intro p {
  font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 24px 0 0; max-width: 36ch;
}
.build-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--color-divider);
  border-left: 2px solid var(--color-divider);
}
.build-card {
  padding: 24px 28px;
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.build-card .num {
  margin: 0 0 10px;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; color: var(--color-accent-700);
  font-feature-settings: 'tnum' 1;
}
.build-card h3 {
  margin: 0 0 8px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 20px; line-height: 26px; letter-spacing: -0.01em;
}
.build-card p {
  margin: 0; font-size: 14.5px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — photo band + statement (photo as background, copy on the left) — */
.photo-band { padding: 84px 0 0; }
.statement {
  position: relative; overflow: hidden; min-height: 420px;
  display: flex; align-items: center;
  background: var(--color-text); color: var(--color-bg);
}
.statement-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.08);
}
.statement-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(32, 30, 29, 0.9) 0%, rgba(32, 30, 29, 0.9) 42%, rgba(32, 30, 29, 0) 78%);
}
.statement-copy {
  position: relative;
  padding: 48px var(--pad-x);
  max-width: min(640px, 52%);
}
.statement .lead {
  margin: 0 0 12px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.01em;
}
.statement .body {
  margin: 0; font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, #f3f2f2 88%, transparent);
  max-width: 52ch;
}

/* — compare table — */
.compare { padding: 84px var(--pad-x); }
.compare-scroll { overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare thead th {
  text-align: left; padding: 14px 20px;
  border-bottom: 2px solid var(--color-text);
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.compare thead th:first-child { padding: 14px 20px 14px 0; width: 26%; }
.compare thead th.col-us {
  background: var(--color-accent); color: var(--color-bg);
}
.compare tbody th {
  text-align: left; padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--color-neutral-300);
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 15.5px; line-height: 24px; vertical-align: top;
}
.compare tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-neutral-300);
  font-size: 15.5px; line-height: 24px; vertical-align: top;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.compare tbody td.col-us {
  font-weight: 600; color: var(--color-text);
  background: var(--color-accent-100);
}

/* — how it works — */
.how { padding: 0 var(--pad-x) 84px; }
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-text);
}
.how-step { padding: 28px 32px 0; border-left: 2px solid var(--color-divider); }
.how-step:first-child { padding: 28px 32px 0 0; border-left: 0; }
.how-step:last-child { padding: 28px 0 0 32px; }
.how-step .num {
  margin: 0;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 72px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--color-accent);
}
.how-step .num-filled { color: var(--color-accent); -webkit-text-stroke: 0; }
.how-step h3 {
  margin: 20px 0 8px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 22px; line-height: 28px; letter-spacing: -0.01em;
}
.how-step p {
  margin: 0; font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — faq — */
.faq { padding: 0 var(--pad-x) 84px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.faq-item { border-top: 2px solid var(--color-divider); padding: 20px 0 24px; }
.faq-item h3 {
  margin: 0 0 10px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 17px; line-height: 26px; letter-spacing: -0.005em;
}
.faq-item p {
  margin: 0; font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — book — */
.book {
  background: var(--color-accent); color: var(--color-bg);
  padding: 96px var(--pad-x);
}
.book-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 64px; align-items: start;
}
.book-title {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(40px, 4.2vw, 60px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 24px -0.058em;
}
.book-title span { display: block; }
.book-copy .lede { margin: 0 0 20px; font-size: 17px; line-height: 28px; max-width: 52ch; }
.book-copy .alt {
  margin: 0; font-size: 14px; line-height: 24px;
  color: rgba(243, 242, 242, 0.85);
}
.book-copy .alt a { color: var(--color-bg); text-underline-offset: 4px; }
.book-form {
  background: var(--color-bg); color: var(--color-text);
  padding: 36px 40px;
}
.book-form .form-kicker {
  margin: 0 0 24px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.book-form .fields { display: grid; gap: 18px; }
.book-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.book-form label {
  display: grid; gap: 6px;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.book-form label .optional {
  font-weight: 600; text-transform: none; letter-spacing: 0;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.book-form input,
.book-form select {
  font-family: "Archivo", sans-serif; font-size: 15px;
  padding: 12px 14px;
  border: 2px solid var(--color-neutral-400);
  background: var(--color-bg); color: var(--color-text);
  border-radius: 0;
}
.book-form input:focus,
.book-form select:focus {
  border-color: var(--color-accent); outline: none;
}
.book-form button {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px;
  background: var(--color-accent); color: var(--color-bg);
  border: 1px solid transparent;
  padding: 14px 20px; cursor: pointer; text-align: left;
}
.book-form button:hover { background: var(--color-accent-600); }
.book-form .fineprint {
  margin: 0; font-size: 13px; line-height: 20px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — footer — */
.site-footer {
  padding: 42px var(--pad-x);
  display: flex; gap: 32px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.site-footer .brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 15px; color: var(--color-text);
}
.site-footer .brand .brand-mark { width: 20px; height: 19px; }
.site-footer a { margin-left: auto; color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-700); }

/* — responsive — */
@media (max-width: 1180px) {
  :root { --pad-x: 40px; }
  .swaps { grid-template-columns: repeat(2, 1fr); }
  .swap { border-bottom: 2px solid var(--color-divider); }
  .swaps { border-bottom: 0; }
}

@media (max-width: 1024px) {
  .build-grid { grid-template-columns: 1fr; gap: 40px; }
  .build-intro p { max-width: 60ch; }
}

@media (max-width: 960px) {
  .hero { padding: 0; }
  .hero-copy { padding: 40px var(--pad-x) 56px; }
  .book-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 860px) {
  :root { --pad-x: 24px; }
  .topnav { flex-wrap: wrap; gap: 14px 20px; }
  .topnav-links { gap: 16px 20px; }
  .who-grid { grid-template-columns: 1fr; }
  .who-col { padding: 32px 0 40px; }
  .who-col:first-child { padding: 32px 0 40px; border-right: 0; }
  .who-col + .who-col { border-top: 2px solid var(--color-divider); }
  .statement-copy { max-width: 100%; }
  .statement-scrim { background: rgba(32, 30, 29, 0.9); }
  .how-grid { grid-template-columns: 1fr; }
  .how-step, .how-step:first-child, .how-step:last-child {
    padding: 28px 0 0; border-left: 0;
  }
  .how-step + .how-step {
    margin-top: 28px; border-top: 2px solid var(--color-divider);
  }
  .faq-grid { grid-template-columns: 1fr; }
  .statement { min-height: 340px; }
}

@media (max-width: 640px) {
  .build-cards { grid-template-columns: 1fr; }
  .swaps { grid-template-columns: 1fr; }
  .book-form { padding: 28px 20px; }
  .book-form .row-2 { grid-template-columns: 1fr; }
  .section-title { margin-bottom: 28px; }
}