/* snapntapp landing — design tokens ported from Landing Page.dc.html */

:root {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --ink: #111111;
  --ink-62: rgba(0, 0, 0, .62);
  --ink-60: rgba(0, 0, 0, .6);
  --ink-55: rgba(0, 0, 0, .55);
  --ink-50: rgba(0, 0, 0, .5);
  --ink-45: rgba(0, 0, 0, .45);
  --ink-42: rgba(0, 0, 0, .42);
  --ink-40: rgba(0, 0, 0, .4);
  --ink-35: rgba(0, 0, 0, .35);
  --ink-28: rgba(0, 0, 0, .28);
  --border-06: rgba(0, 0, 0, .06);
  --border-07: rgba(0, 0, 0, .07);
  --border-08: rgba(0, 0, 0, .08);
  --border-09: rgba(0, 0, 0, .09);
  --hairline: rgba(0, 0, 0, .055);
  --track: #EDEDF0;
  --track-2: #E4E4E9;
  --fill: #F1F1F4;
  --accent: #3D7A73;
  --accent-hover: #2c5b56;
  --accent-light: #8FC7BD;
  --danger: #D8352A;
  --danger-tint: rgba(216, 53, 42, .09);
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-text: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-ui: -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

::selection { background: var(--accent-light); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 245, 247, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.header-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.header-row { display: flex; align-items: center; gap: 11px; }

.logo { display: flex; align-items: center; gap: 11px; }

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.logo-mark-inner { position: relative; width: 19px; height: 9px; }
.logo-mark-inner span {
  position: absolute;
  left: 0;
  height: 1.8px;
  border-radius: 1px;
  background: #fff;
}
.logo-mark-inner span:nth-child(1) { top: 0; width: 19px; }
.logo-mark-inner span:nth-child(2) { top: 3.6px; width: 13px; background: rgba(255, 255, 255, .42); }
.logo-mark-inner span:nth-child(3) { top: 7.2px; width: 8.5px; background: rgba(255, 255, 255, .42); }
.logo-mark-dot {
  position: absolute;
  top: 2.6px;
  left: 14.5px;
  width: 3.8px;
  height: 3.8px;
  border-radius: 2px;
  background: var(--accent-light);
}

.logo-word { font: 600 17px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.logo-word em { font-style: normal; color: var(--accent); }

.mobile-actions { display: none; align-items: center; gap: 2px; }

.main-nav { display: flex; align-items: center; gap: 34px; }

.nav-link {
  border: 0;
  background: none;
  padding: 9px 0;
  cursor: pointer;
  font: 400 14px/1 var(--font-ui);
  color: var(--ink-55);
  box-shadow: inset 0 -1.5px 0 transparent;
  transition: color 160ms ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] {
  font-weight: 500;
  color: var(--ink);
  box-shadow: inset 0 -1.5px 0 var(--ink);
}

.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: center;
  transition: transform 160ms var(--ease), box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(.97); }

.btn-signin {
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink-60);
  font: 500 14px/1 var(--font-ui);
  background: none;
}
.btn-signin:hover { color: var(--ink); }

.btn-dark {
  padding: 11px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font: 500 14px/1 var(--font-ui);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
.btn-dark:hover { background: #000; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .2); }

.btn-hero-primary {
  padding: 15px 26px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font: 500 15px/1 var(--font-ui);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
}
.btn-hero-primary:hover { background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .35); }

.btn-hero-secondary {
  padding: 15px 24px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-09);
  color: var(--ink);
  font: 500 15px/1 var(--font-ui);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.btn-hero-secondary:hover { border-color: rgba(0, 0, 0, .22); color: var(--ink); }

.btn-request {
  padding: 13px 22px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  font: 500 14.5px/1 var(--font-ui);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
.btn-request:hover { background: #000; color: #fff; }

.btn-closing {
  margin-top: 6px;
  padding: 15px 28px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 500 15px/1 var(--font-ui);
}
.btn-closing:hover { background: #fff; color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6); }

/* ---------- hero ---------- */

.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 40px) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.hero-copy { display: flex; flex-direction: column; gap: 26px; }

.hero-copy h1 {
  margin: 0;
  max-width: 14ch;
  font: 600 clamp(36px, 7vw, 60px)/1.04 var(--font-display);
  letter-spacing: -.042em;
  text-wrap: pretty;
}

.trust-pill {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.trust-pill-icon {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.trust-pill span { font: 500 12.5px/1 var(--font-ui); color: var(--ink-60); }

.hero-copy > p {
  margin: 0;
  max-width: 46ch;
  font: 400 17px/1.6 var(--font-text);
  color: var(--ink-55);
  text-wrap: pretty;
}

.hero-actions { display: flex; align-items: center; gap: 12px; padding-top: 2px; flex-wrap: wrap; }

/* ---------- phone mock ---------- */

.phone-wrap {
  position: relative;
  justify-self: stretch;
  width: 100%;
  min-height: 664px;
  padding: 8px 0;
}

.phone {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  width: 288px;
  height: 592px;
  border-radius: 48px;
  padding: 9px;
  background: var(--ink);
  box-shadow: 0 40px 80px -26px rgba(17, 17, 17, .4), 0 8px 24px rgba(17, 17, 17, .1);
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 18px 15px;
  gap: 12px;
}

.phone-topbar { flex: none; display: flex; align-items: center; justify-content: space-between; }
.phone-month-label { font: 500 10px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-35); }
.phone-month { font: 600 24px/1.1 var(--font-display); letter-spacing: -.028em; color: var(--ink); }
.phone-topbar-icons { display: flex; align-items: center; gap: 8px; }
.phone-icon-btn { width: 30px; height: 30px; border-radius: 15px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); display: flex; align-items: center; justify-content: center; }
.phone-avatar { width: 30px; height: 30px; border-radius: 15px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font-ui); }

.phone-total-card { flex: none; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); display: flex; align-items: center; gap: 15px; }
.phone-ring { flex: none; position: relative; width: 84px; height: 84px; border-radius: 42px; background: conic-gradient(var(--ink) 0 64%, var(--track) 64% 100%); }
.phone-ring-inner { position: absolute; inset: 9px; border-radius: 34px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.phone-ring-pct { font: 600 17px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.phone-ring-sub { font: 400 9px/1 var(--font-ui); color: var(--ink-35); }
.phone-total-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.phone-total-label { font: 500 11px/1 var(--font-ui); color: var(--ink-42); }
.phone-total-amount { font: 600 20px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-total-of { font: 400 11px/1.3 var(--font-ui); color: var(--ink-42); }
.phone-days-left { display: flex; align-items: center; gap: 5px; padding-top: 2px; }
.phone-days-left span { font: 400 11px/1 var(--font-ui); color: var(--ink-42); }

.phone-week-card { flex: none; background: #fff; border-radius: 18px; padding: 13px 15px 11px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); display: flex; flex-direction: column; gap: 10px; }
.phone-week-head { display: flex; align-items: baseline; justify-content: space-between; }
.phone-week-head span:first-child { font: 500 12px/1 var(--font-ui); color: var(--ink-50); }
.phone-week-head span:last-child { font: 500 12px/1 var(--font-ui); letter-spacing: -.01em; color: var(--ink); }
.phone-week-bars { display: flex; align-items: flex-end; gap: 7px; height: 46px; }
.phone-week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; }
.phone-week-bar-fill { width: 100%; border-radius: 4px 4px 2px 2px; }
.phone-week-bar-label { font: 400 9px/1 var(--font-ui); }

.phone-review-card { flex: none; background: var(--ink); border-radius: 18px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.phone-review-icon { position: relative; width: 32px; height: 32px; border-radius: 11px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; flex: none; }
.phone-review-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent-light); color: var(--ink); font: 600 10px/17px var(--font-ui); text-align: center; }
.phone-review-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.phone-review-meta strong { font: 500 13px/1.2 var(--font-ui); color: #fff; font-weight: 500; }
.phone-review-meta span { font: 400 10.5px/1.2 var(--font-ui); color: rgba(255, 255, 255, .5); }

.phone-rows-card { flex: none; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); display: flex; flex-direction: column; }
.phone-row { padding: 10px 13px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 11px; }
.phone-row-tile { flex: none; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.phone-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.phone-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.phone-row-name { font: 500 12.5px/1.2 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-row-status { flex: none; font: 400 10.5px/1.2 var(--font-ui); }
.phone-row-track { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.phone-row-fill { height: 100%; }

.float-card {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border-07);
  box-shadow: 0 8px 20px -12px rgba(17, 17, 17, .28);
}
.float-1 { top: 150px; left: -56px; width: 150px; transform: rotate(-3deg); }
.float-2 { top: 262px; right: -34px; width: 158px; transform: rotate(3deg); padding: 11px 13px; gap: 10px; }
.float-3 { top: 452px; left: -34px; width: 166px; transform: rotate(-2deg); padding: 11px 13px; gap: 10px; }

.float-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(61, 122, 115, .1); display: flex; align-items: center; justify-content: center; }
.float-2 .float-icon, .float-3 .float-icon { width: 28px; height: 28px; }
.float-ring { flex: none; position: relative; width: 28px; height: 28px; border-radius: 14px; background: conic-gradient(var(--accent) 0 72%, var(--track) 72% 100%); }
.float-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 10px; background: #fff; }
.float-label { flex: 1; min-width: 0; font: 500 11.5px/1.15 var(--font-ui); color: var(--ink); }
.float-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.float-meta strong { font: 500 12px/1 var(--font-ui); color: var(--ink); font-weight: 500; }
.float-meta span { font: 400 10px/1 var(--font-ui); color: var(--ink-42); }
.float-3 .float-meta span { color: var(--danger); }

/* ---------- how it works ---------- */

.section-intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 60px) clamp(20px, 5vw, 40px) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-07);
  font: 500 12px/1 var(--font-ui);
  color: var(--ink-55);
}
.eyebrow-pill--flat { background: var(--bg); border: none; }

.section-intro h2 {
  margin: 0;
  max-width: 20ch;
  font: 600 clamp(28px, 5.4vw, 40px)/1.12 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.steps {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px clamp(20px, 5vw, 40px) clamp(56px, 9vw, 100px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.step-card { background: #fff; border: 1px solid var(--border-06); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.step-num { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--accent); }
.step-card h3 { margin: 0; font: 600 21px/1.25 var(--font-display); letter-spacing: -.022em; }
.step-card p { margin: 0; font: 400 14.5px/1.65 var(--font-text); color: var(--ink-55); text-wrap: pretty; }

.rule-demo { margin-top: 6px; background: var(--bg); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rule-demo-label { font: 500 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-35); }
.rule-line { display: flex; align-items: center; gap: 9px; }
.rule-line span { font: 400 12px/1 var(--font-mono); }
.rule-line.allow span { color: var(--ink-60); }
.rule-line.block span { color: var(--ink-42); }
.rule-divider { height: 1px; background: rgba(0, 0, 0, .07); }

.triage-demo { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.triage-suggested { background: var(--ink); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.triage-suggested strong { font: 500 12.5px/1 var(--font-ui); color: #fff; font-weight: 500; }
.triage-suggested span { font: 400 11px/1 var(--font-ui); color: rgba(255, 255, 255, .55); }
.triage-others { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.triage-others div { background: var(--bg); border-radius: 12px; padding: 10px 12px; font: 400 11.5px/1 var(--font-ui); color: var(--ink-60); }

.limits-demo { margin-top: 6px; background: var(--bg); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.limit-row { display: flex; flex-direction: column; gap: 7px; }
.limit-row-head { display: flex; align-items: baseline; justify-content: space-between; }
.limit-row-head strong { font: 500 12px/1 var(--font-ui); color: var(--ink); font-weight: 500; }
.limit-row-head span { font: 400 11px/1 var(--font-ui); color: var(--ink-45); }
.limit-row.over .limit-row-head span { color: var(--danger); }
.limit-track { height: 4px; border-radius: 2px; background: var(--track-2); overflow: hidden; }
.limit-fill { height: 100%; background: var(--ink); }
.limit-row.over .limit-fill { background: var(--danger); }

/* ---------- coverage ---------- */

.coverage-section { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 9vw, 100px); }
.coverage-card { background: #fff; border: 1px solid var(--border-06); border-radius: clamp(22px, 4vw, 32px); padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }
.coverage-intro { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.coverage-intro h2 { margin: 0; max-width: 22ch; font: 600 clamp(26px, 4.6vw, 36px)/1.14 var(--font-display); letter-spacing: -.032em; text-wrap: pretty; }
.coverage-intro p { margin: 0; font: 400 16px/1.7 var(--font-text); color: var(--ink-55); text-wrap: pretty; }

.coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2.5vw, 24px); align-items: stretch; }

.coverage-live { background: var(--ink); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.coverage-tag { display: flex; align-items: center; gap: 9px; }
.coverage-tag-dot { width: 20px; height: 20px; border-radius: 10px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; flex: none; }
.coverage-tag-dot--muted { background: rgba(0, 0, 0, .07); }
.coverage-tag span { font: 500 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.coverage-tag.muted span { color: var(--ink-40); }
.coverage-live-name { font: 600 24px/1.1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.coverage-live p { margin: 0; font: 400 13.5px/1.6 var(--font-text); color: rgba(255, 255, 255, .55); text-wrap: pretty; }

.coverage-progress { background: var(--bg); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--border-07); font: 500 13px/1 var(--font-ui); color: var(--ink-55); }
.coverage-progress p { margin: 0; font: 400 13.5px/1.6 var(--font-text); color: var(--ink-45); text-wrap: pretty; }

.coverage-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 2px; }
.coverage-cta p { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-42); }

/* ---------- maker ---------- */

.maker-section { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 9vw, 100px); }
.maker-card { background: #fff; border: 1px solid var(--border-06); border-radius: clamp(22px, 4vw, 32px); padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: start; }
.maker-intro { display: flex; flex-direction: column; gap: 16px; }
.maker-intro h2 { margin: 0; max-width: 16ch; font: 600 clamp(26px, 4.6vw, 36px)/1.14 var(--font-display); letter-spacing: -.032em; text-wrap: pretty; }
.maker-byline { display: flex; align-items: center; gap: 11px; padding-top: 2px; }
.maker-avatar { width: 38px; height: 38px; border-radius: 19px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font-ui); flex: none; }
.maker-byline-name { font: 500 13.5px/1 var(--font-ui); color: var(--ink); }
.maker-byline-role { font: 400 12px/1 var(--font-ui); color: var(--ink-42); }
.maker-copy { display: flex; flex-direction: column; gap: 18px; max-width: 56ch; }
.maker-copy p { margin: 0; font: 400 16px/1.7 var(--font-text); color: var(--ink-62); text-wrap: pretty; }
.maker-copy p.closing { color: var(--ink); }

/* ---------- closing CTA ---------- */

.closing-section { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 9vw, 100px); }
.closing-card { background: var(--ink); border-radius: clamp(22px, 4vw, 32px); padding: clamp(48px, 8vw, 88px) clamp(24px, 5vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.closing-card h2 { margin: 0; max-width: 18ch; font: 600 clamp(30px, 6vw, 44px)/1.1 var(--font-display); letter-spacing: -.038em; color: #fff; text-wrap: pretty; }
.closing-card p { margin: 0; max-width: 50ch; font: 400 16px/1.6 var(--font-text); color: rgba(255, 255, 255, .55); text-wrap: pretty; }

/* ---------- legal pages ---------- */

.legal-header { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 6vw, 60px) clamp(20px, 5vw, 40px) 0; }
.legal-intro { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.legal-intro h1 { margin: 0; font: 600 clamp(32px, 6.5vw, 48px)/1.08 var(--font-display); letter-spacing: -.04em; }
.legal-intro p { margin: 0; font: 400 15.5px/1.65 var(--font-text); color: var(--ink-50); text-wrap: pretty; }

.legal-body { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 9vw, 100px); }
.legal-card { margin-top: 40px; max-width: 840px; background: #fff; border: 1px solid var(--border-06); border-radius: 24px; padding: 8px clamp(18px, 4vw, 34px); display: flex; flex-direction: column; }
.legal-item { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--border-06); }
.legal-item:first-child { border-top: none; }
.legal-num { font: 500 12px/1.9 var(--font-mono); color: var(--accent); }
.legal-content { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.legal-content h2 { margin: 0; font: 600 19px/1.3 var(--font-display); letter-spacing: -.02em; }
.legal-content p { margin: 0; font: 400 15px/1.75 var(--font-text); color: var(--ink-62); text-wrap: pretty; }
.legal-content ul { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font: 400 15px/1.75 var(--font-text); color: var(--ink-62); }
.legal-content strong { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */

.site-footer { background: var(--bg); }
.footer-rule { height: 1px; background: var(--border-08); }
.footer-row { padding: 30px 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-copy { font: 400 13px/1.5 var(--font-text); color: var(--ink-40); }
.footer-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); font: 400 13px/1 var(--font-ui); flex-wrap: wrap; }
.footer-links a { color: var(--ink-50); }
.footer-links a:hover { color: var(--ink); }
.footer-links a.mail:hover { color: var(--accent); }

/* ---------- responsive ---------- */

@media (max-width: 759px) {
  .header-grid {
    padding: 14px 20px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .header-row { justify-content: space-between; }
  .mobile-actions { display: flex; }
  .mobile-actions .btn-signin { padding: 11px 12px; font-size: 13.5px; white-space: nowrap; }
  .mobile-actions .btn-dark { padding: 11px 16px; border-radius: 11px; font-size: 13.5px; white-space: nowrap; }
  .header-actions { display: none; }
  .main-nav { gap: 22px; flex-wrap: wrap; }

  .phone-wrap { min-height: 600px; padding: 8px 0; overflow: hidden; }
  .phone {
    top: 8px;
    transform: translateX(-50%);
    width: 270px;
    height: 560px;
    border-radius: 46px;
    box-shadow: 0 30px 60px -26px rgba(17, 17, 17, .4), 0 8px 24px rgba(17, 17, 17, .1);
  }
  .float-card { display: none; }

  .phone-total-card { gap: 10px; padding: 14px 12px; }
  .phone-ring { width: 62px; height: 62px; border-radius: 31px; }
  .phone-ring-inner { inset: 7px; border-radius: 24px; }
  .phone-ring-pct { font-size: 13px; }
  .phone-ring-sub { font-size: 8px; }
  .phone-total-amount { font-size: 15px; }
  .phone-total-label, .phone-total-of, .phone-days-left span { font-size: 10px; }
}