/* ============================================================
   Agenteev — HVAC & plumbing landing page
   Tokens per ../design-system.md. Section styles are namespaced
   by section class; no shared .section/.card spacing rules, so
   nothing cancels anything else out.
   ============================================================ */

:root {
  --ink:      #20242F;
  --ink-2:    #2C3140;   /* hairlines and raised surfaces on ink */
  --ink-3:    #3A4052;
  /* The logo blue passes as a decorative accent but fails AA as text on
     light (4.04:1) and as a button background under white text (4.04:1).
     Split into three roles rather than dropping it — the accent stays
     exactly on-brand, the text-bearing variants are darkened to pass. */
  --signal:   #2F7BEF;   /* accents only: bullets, rules, focus, bar */
  --signal-s: #2569D4;   /* surfaces carrying white text — 5.19:1 */
  --signal-t: #1F5FCC;   /* blue text on light backgrounds — 5.89:1 */
  --bright:   #63A4FF;   /* blue on dark only — 6.12:1 on ink */
  --paper:    #F4F5F7;
  --white:    #FFFFFF;
  --missed:   #F5836B;   /* missed-call red, lightened for dark card — 5.15:1 */

  --muted:      #5C6273;   /* body text on paper */
  --muted-ink:  #9AA1B4;   /* body text on ink */
  --rule:       #DFE2E8;

  --display: "Sora", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1140px;
  --gut:  20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--signal-t); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--white);
  color: var(--ink);
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 3px solid var(--bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bright);
  margin: 0 0 22px;
}
.eyebrow--ink { color: var(--signal-t); }

.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  max-width: 20ch;
}
.h2--tight { max-width: 24ch; }

.lede {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0 0 48px;
  max-width: 56ch;
}

/* ---------- split: heading rail + content ----------
   Sections below the fold were single narrow columns pinned left, which
   left the right half of the page empty. This puts the heading in its own
   rail so the content column uses the width without body copy running to
   unreadable line lengths. */

.split {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.split__head { position: sticky; top: 92px; }
.split__head .h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.125rem);
  max-width: none;
  text-wrap: balance;
  margin-bottom: 12px;
}
.split__head .lede {
  margin-bottom: 0;
  font-size: 0.9375rem;
  max-width: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  padding: 14px 32px 16px;
  border-radius: 10px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.btn__top {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.88;
}
.btn__num {
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.btn--primary {
  background: var(--signal-s);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn--primary:hover {
  background: #1B57B4;
  transform: translateY(-1px);
}
.btn--onink {
  background: var(--white);
  color: var(--ink);
}
.btn--onink:hover { background: #E8EBF1; transform: translateY(-1px); }

.btn--wide { width: 100%; }

/* Secondary route out of a primary CTA. Deliberately a text link, not a second
   button — the demo line stays the one thing the eye lands on. Sits in a
   .cta-stack so it centers on the button above it rather than the column. */
.cta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.cta-alt {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--signal-t);
  text-decoration: none;
}
.cta-alt__label {
  border-bottom: 1px solid rgba(31,95,204,0.35);
  padding-bottom: 2px;
  transition: border-color 0.14s ease;
}
.cta-alt__arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.14s ease;
}
.cta-alt:hover .cta-alt__label { border-bottom-color: currentColor; }
.cta-alt:hover .cta-alt__arrow { transform: translateX(3px); }

/* on the ink hero: --bright is the only blue that clears AA on dark (6.12:1) */
.cta-alt--onink { color: var(--bright); }
.cta-alt--onink .cta-alt__label { border-bottom-color: rgba(99,164,255,0.45); }
.cta-alt--onink:hover { color: var(--white); }

/* ============================ BAR ============================ */

.bar {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ink-2);
}
.bar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bar__logo { height: 26px; width: auto; }

.bar__call {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  line-height: 1.2;
}
.bar__call-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.bar__call-num {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--bright);
}
.bar__call:hover .bar__call-num { color: var(--white); }

/* =========================== HERO ============================ */

.hero {
  background: var(--ink);
  color: var(--white);
  padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero__h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.125rem, 4.4vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
  margin: 0 0 26px;
}

.hero__sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted-ink);
  margin: 0 0 36px;
  max-width: 52ch;
}

.hero__cta-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-ink);
  margin: 18px 0 0;
  max-width: 42ch;
}

/* ------- signature element: the call log ------- */

.hero__artifact { display: flex; justify-content: center; }

.log {
  width: 100%;
  max-width: 400px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 18px;
  padding: 20px 20px 22px;
  box-shadow: 0 28px 60px -20px rgba(0,0,0,0.55);
}

.log__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-3);
}
.log__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.log__day {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted-ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.log__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-3);
  animation: fadein 0.5s ease both;
  animation-delay: calc(var(--i) * 0.13s + 0.15s);
}
.row:last-child { border-bottom: 0; }

.row__num {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  grid-column: 1;
}
.row__time {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted-ink);
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.row__state {
  font-size: 0.8125rem;
  grid-column: 1;
  grid-row: 2;
}

.row--missed .row__num  { color: var(--missed); }
.row--missed .row__state { color: var(--missed); }

.row--answered .row__num   { color: var(--white); }
.row--answered .row__state { color: var(--bright); }

.log__sms {
  animation: fadein 0.55s ease both;
  animation-delay: 0.85s;
}
.log__sms-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin: 20px 0 8px;
}
.bubble {
  background: var(--signal-s);
  color: var(--white);
  border-radius: 16px 16px 16px 4px;
  padding: 13px 16px;
}
.bubble p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ========================= ARITHMETIC ======================== */

.math {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.math__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding-block: 48px;
}
.stat { border-left: 2px solid var(--signal); padding-left: 16px; }
.stat__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}
.stat__l {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ========================== SEQUENCE ========================= */

.seq { padding-block: clamp(64px, 8vw, 104px); }

.seq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.step {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.step__t {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--signal-t);
  padding-top: 2px;
}
.step__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.012em;
  margin: 0 0 5px;
}
.step__body p {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}

/* =========================== LIMITS ========================== */

.limits {
  background: var(--white);
  border-block: 1px solid var(--rule);
  padding-block: clamp(64px, 8vw, 104px);
}
.limits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
}
.limit { border-top: 2px solid var(--signal); padding-top: 18px; }
.limit__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.012em;
  color: var(--signal-t);
  margin: 0 0 8px;
}
.limit p { margin: 0; color: var(--muted); }

/* ========================= CREDIBILITY ======================= */

.who { padding-block: clamp(64px, 8vw, 104px); }
.who__body { max-width: 68ch; }
.who__body p {
  color: var(--muted);
  margin: 0 0 16px;
}
.who__body p:last-child { margin-bottom: 0; }

/* =========================== PRICE =========================== */

.price {
  background: var(--white);
  border-block: 1px solid var(--rule);
  padding-block: clamp(64px, 8vw, 104px);
}
.card {
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 36px;
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.card__left { display: flex; flex-direction: column; }
.card__right { border-left: 1px solid var(--rule); padding-left: clamp(28px, 4vw, 56px); }
.card__inc {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.card__head { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.card__name {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.card__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.card__amt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -0.035em;
  line-height: 1;
}
.card__per { font-size: 1rem; color: var(--muted); }
.card__setup { font-size: 0.875rem; color: var(--muted); margin: 8px 0 0; }

.card__list { list-style: none; margin: 0; padding: 0; }
.card__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}
.card__guar {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 22px 0 auto;
  padding-bottom: 24px;
}
.card__left .cta-alt { margin-top: 22px; }

/* ============================ FAQ ============================ */

.faq { padding-block: clamp(64px, 8vw, 104px); }
.faq__list { border-top: 1px solid var(--rule); }

.q { border-bottom: 1px solid var(--rule); }
.q__s {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  padding: 20px 40px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.q__s::-webkit-details-marker { display: none; }
.q__s::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 17px;
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--signal-t);
  transition: transform 0.18s ease;
}
.q[open] .q__s::after { transform: rotate(45deg); }
.q__a { padding: 0 40px 22px 0; }
.q__a p { margin: 0; color: var(--muted); max-width: 68ch; }

/* =========================== CLOSER ========================== */

.close {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(64px, 9vw, 112px);
}
.close__inner {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.close__text { max-width: 34ch; }
.close__p { margin-bottom: 0; }
.close__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
}
.close__p {
  color: var(--muted-ink);
  margin: 0 0 30px;
}
.close__note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted-ink);
  margin: 16px 0 0;
}

/* ============================ FOOT =========================== */

.foot {
  background: var(--ink);
  color: var(--muted-ink);
  border-top: 1px solid var(--ink-2);
  padding-block: 40px;
}
.foot__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: start;
}
.foot__logo { height: 22px; width: auto; opacity: 0.85; }
.foot__legal { font-size: 0.8125rem; line-height: 1.6; margin: 0; }
.foot__legal a { color: var(--bright); }
.foot__links { display: flex; gap: 20px; margin: 0; font-size: 0.8125rem; }
.foot__links a { color: var(--muted-ink); text-decoration: none; }
.foot__links a:hover { color: var(--white); text-decoration: underline; }

/* =========================== RESPONSIVE ====================== */

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__artifact { justify-content: flex-start; }
  .log { max-width: 380px; }
  .math__inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .limits__grid { grid-template-columns: 1fr; gap: 32px; }
  .foot__inner { grid-template-columns: 1fr; gap: 22px; }

  /* the heading rail stacks back above its content */
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split__head { position: static; }
  .split__head .lede { max-width: 56ch; }

  .card { grid-template-columns: 1fr; gap: 28px; }
  .card__right { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 26px; }
  .card__guar { margin-bottom: 22px; }

  .close__inner { grid-template-columns: 1fr; gap: 32px; }
  .close__text { max-width: 46ch; }
}

@media (max-width: 560px) {
  .hero__h1 br { display: none; }
  .bar__logo { height: 22px; }
  .math__inner { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step__t { padding-top: 0; }
  .card { padding: 24px 20px; }
  .card__amt { font-size: 2.5rem; }
  .btn { width: 100%; }
  .cta-stack { width: 100%; }
  .log { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}