/* Home page only. Loaded after css/base.css, which owns the tokens
   and the site chrome (nav, closing CTA, footer) this file builds on. */

/* ---------- hero ---------- */
.hero { padding: 84px var(--gutter) 96px; border-bottom: 1px solid var(--line); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 64px; align-items: center;
}
.hero__title {
  font-weight: 700; font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.4; letter-spacing: -0.03em; margin-bottom: 26px;
}
.hero__sub { font-size: 19px; line-height: 1.55; color: #333333; margin: 0 0 34px; max-width: 530px; }
.hero__sub em { font-style: normal; border-bottom: 2px solid var(--surface); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* ---------- statement card ---------- */
.stmt {
  background: var(--paper); border: 1.5px solid var(--ink);
  padding: 30px 30px 26px; box-shadow: 14px 14px 0 var(--surface);
}
.stmt__head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 14px; margin-bottom: 6px;
}
.stmt__title {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.stmt__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.stmt__meta { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: #6B6B6B; letter-spacing: 0.02em; margin-bottom: 22px; }
.stmt__note { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: #6B6B6B; margin-top: 12px; letter-spacing: 0.02em; }

.row {
  position: relative; display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 16px; cursor: help;
}
.row:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.row__label { font-size: 14px; color: #333333; white-space: nowrap; }
.row__dots  { flex: 1; border-bottom: 1px dotted #BBBBBB; transform: translateY(-4px); }
.row__value {
  font-family: var(--mono); font-size: 14px; white-space: nowrap;
  border-bottom: 1.5px dotted var(--ink);
}
.row__value--mark { background: var(--surface); padding: 1px 5px; }

.row--total {
  border-top: 1.5px solid var(--ink); padding-top: 16px; margin-bottom: 0;
}
.row--total .row__label { font-family: var(--display); font-weight: 600; font-size: 16px; }
.row--total .row__dots  { border: none; }
.row--total .row__value {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  color: var(--accent); border: none;
}

/* CSS-only tooltip — replaces the JS hover state */
.tip {
  position: absolute; left: 0; bottom: calc(100% + 9px); width: 242px; z-index: 30;
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 14px; line-height: 1.5;
  padding: 11px 13px; border-left: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.tip--wide  { width: 252px; }
.tip--right { left: auto; right: 0; width: 250px; }
.row:hover .tip, .row:focus .tip, .row:focus-within .tip { opacity: 1; visibility: visible; }

/* ---------- problem grid ---------- */
.problem__intro { max-width: 760px; margin-bottom: 64px; }
.problem__title { font-weight: 700; font-size: clamp(26px, 3.4vw, 33px); line-height: 1.43; }
.cells {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink);
}
.cell {
  padding: 36px 40px 40px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.cell--surface { background: var(--surface); }
.cell__n { font-family: var(--mono); font-size: 14px; color: var(--accent); margin-bottom: 18px; }
.cell--surface .cell__n { color: var(--ink); }
.cell__h { font-weight: 600; font-size: 23px; letter-spacing: -0.01em; margin-bottom: 12px; }
.cell__p { font-size: 16px; line-height: 1.55; color: #444444; margin: 0; }
.cell--surface .cell__p { color: #222222; }

/* ---------- statement band ---------- */
.band { padding: 90px var(--gutter); }
.band__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.band__text {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12;
  letter-spacing: -0.02em; margin: 0;
}
.band__text span { color: var(--accent); }

/* ---------- rent vs own ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.panel { padding: 34px 34px 30px; display: flex; flex-direction: column; }
.panel--rent { border: 1.5px solid var(--line); }
.panel--own  { border: 1.5px solid var(--ink); box-shadow: 14px 14px 0 var(--accent); }
.panel__kicker {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 22px;
}
.panel--rent .panel__kicker { color: #6B6B6B; }
.panel--own  .panel__kicker { color: var(--ink); }
.panel__lines { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel__line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.panel--rent .panel__line { color: #4A4A4A; }
.panel--own  .panel__line { color: #222222; }
.panel__foot { margin-top: 26px; padding-top: 20px; }
.panel--rent .panel__foot { border-top: 1.5px solid var(--line); }
.panel--own  .panel__foot { border-top: 1.5px solid var(--ink); }
.panel__total {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  letter-spacing: -0.02em; color: var(--ink);
}
.panel__total small { font-size: 16px; font-weight: 500; color: #6B6B6B; }
.panel__own-total {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}
.panel__fine { font-family: var(--mono); font-size: 14px; margin-top: 8px; }
.panel--rent .panel__fine { color: #6B6B6B; }
.panel--own  .panel__fine { color: var(--ink); margin-top: 10px; }

.guarantee {
  margin-top: 28px; background: var(--surface); border: 1.5px solid var(--ink);
  padding: 28px 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.guarantee__x { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; }
.guarantee__p { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; flex: 1; min-width: 280px; }
.guarantee__p strong { font-family: var(--display); }

/* ---------- offer ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); }
.stage { padding: 34px 32px 36px; border-right: 1.5px solid var(--ink); }
.stage:last-child { border-right: none; }
.stage--1 { border-top: 6px solid var(--accent); }
.stage--2 { border-top: 6px solid var(--ink); }
.stage--3 { border-top: 6px solid var(--surface); }
.stage__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.stage__n { font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; color: var(--ink); }
.stage__when {
  font-family: var(--mono); font-size: 14px;
  background: var(--ink); color: var(--paper); padding: 3px 9px;
}
.stage__h { font-weight: 700; font-size: 26px; letter-spacing: -0.015em; margin-bottom: 16px; }
.stage__p { font-size: 15px; line-height: 1.55; color: #444444; margin: 0 0 14px; }
.stage__promise { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; font-weight: 600; }

/* ---------- honesty ---------- */
.honesty { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.honesty__title { font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; }
.honesty__p { font-size: 19px; line-height: 1.6; color: #333333; margin: 0 0 22px; }
.honesty__p:last-of-type { margin-bottom: 30px; }
.honesty__p strong.mark { background: var(--surface); padding: 1px 6px; font-weight: 600; }
.honesty__rule {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em;
  color: #6B6B6B; border-top: 1px solid var(--line); padding-top: 18px;
}

/* signature — the honesty rule is a claim, so it carries a name */
.sig { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.sig__bar { width: 3px; align-self: stretch; background: var(--accent); flex: none; }
.sig__name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.sig__role { font-family: var(--mono); font-size: 14px; color: #6B6B6B; letter-spacing: 0.02em; margin-top: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .hero__grid, .honesty { grid-template-columns: 1fr; gap: 44px; }
  .compare, .cells { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: 1fr; }
  .stage { border-right: none; border-bottom: 1.5px solid var(--ink); }
  .stage:last-child { border-bottom: none; }
  .cell { padding: 28px 24px 32px; }
  .panel--own, .stmt { box-shadow: 8px 8px 0 var(--accent); }
  .stmt { box-shadow: 8px 8px 0 var(--surface); }
}