.brand .mark-img { width: 28px; height: 28px; flex: none; border-radius: 50%; }

.hero { padding: calc(var(--topbar) + clamp(56px, 9vw, 128px)) 0 clamp(56px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-copy .lede { max-width: 36ch; }
.hero-copy, .veil { min-width: 0; }

.hero-copy .eyebrow-ring { flex-wrap: wrap; white-space: normal; }
.hero-copy .eyebrow-ring::after { display: none; }
.hero-bare { min-height: calc(100svh - 220px); display: grid; align-items: center; }
.hero-contact { color: var(--text-2); font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }

.veil {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 70%, transparent), color-mix(in srgb, var(--bg-1) 85%, transparent));
  box-shadow: 0 30px 80px color-mix(in srgb, var(--bg-0) 60%, transparent);
}
.veil-bar { display: flex; gap: 7px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.veil-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.veil-field {
  position: absolute; inset: 52px 18px 62px; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--app-color) 34%, transparent), transparent 64%), var(--bg-2);
}
.veil-field img { width: 64px; height: 64px; border-radius: 50%; }
.veil-lines { position: absolute; left: 18px; right: 18px; bottom: 20px; display: flex; gap: 10px; }
.veil-lines span { height: 12px; border-radius: var(--r-pill); background: var(--line); flex: 1; }
.veil-lines span:nth-child(2) { flex: 2; }
.veil-lines span:nth-child(3) { flex: 0.6; }

.section { padding: clamp(48px, 7vw, 100px) 0; }
.section-title { margin-top: 18px; font-size: clamp(28px, 3.2vw, 44px); font-stretch: 104%; max-width: 20ch; }
.section .lede { margin-top: 18px; max-width: 44ch; }
.section .facts { margin-top: clamp(32px, 4vw, 56px); }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 4vw, 48px); max-width: 1040px; }
.tier { display: grid; align-content: start; gap: 14px; padding: 28px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--bg-1); }
.tier-feature { border-color: color-mix(in srgb, var(--app-color) 55%, transparent); }
.tier-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.tier-price { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier-price small { font-family: var(--font-text); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.tier-line { color: var(--text-1); font-size: 16px; }
.tier-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.tier-list li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 15.5px; }
.tier-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--app-color); }
.pricing-note { margin-top: 28px; max-width: 70ch; color: var(--text-3); font-size: 15px; }
.page .pricing { margin-top: clamp(40px, 5vw, 72px); }

.page .facts { margin-top: clamp(48px, 6vw, 80px); }

@media (max-width: 899.98px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
}