body {
  margin: 0;
  background: #F6F7F9;
  color: #111827;
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 247, 249, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #E5E7EB;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #111827;
  text-decoration: none;
  font-size: 20px;
  letter-spacing: -0.6px;
  flex-shrink: 0;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #12141F;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}
.ticks {
  flex: 1;
  min-width: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}
.ticks-row { display: flex; justify-content: center; gap: 22px; }
.tick { text-align: left; }
.tick-label, .tick-kind, .tick-src {
  color: #9CA3AF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.tick-kind { text-transform: none; font-weight: 400; margin-top: 1px; }
.tick-val { color: #111827; font-size: 13px; font-weight: 800; margin-top: 1px; }
.tick-src { margin-top: 4px; text-align: center; text-transform: none; font-weight: 400; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
a { color: #EA580C; }
.cta {
  display: inline-block;
  background: #EA580C;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.cta-lg { padding: 14px 22px; font-size: 16px; border-radius: 12px; min-width: 200px; text-align: center; }
.ghost { font-weight: 700; color: #374151 !important; text-decoration: none; font-size: 14px; }
.crumb { color: #9CA3AF; font-size: 13px; font-weight: 700; padding: 14px 0 0; }
.crumb a { color: #4B5563; text-decoration: none; }
.crumb a:hover, .crumb .here { color: #EA580C; }
.kicker {
  color: #EA580C;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
h1 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -1.2px;
  margin: 0 0 14px;
  font-weight: 800;
}
h2 {
  font-size: 26px;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
  text-align: center;
  font-weight: 800;
}
p, li { color: #4B5563; font-size: 16px; }
.lead { font-size: 17px; line-height: 27px; max-width: 460px; }
.legal { color: #9CA3AF; font-size: 12px; line-height: 18px; max-width: 420px; }
.legal a { color: #4B5563; }
.hero-row {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 0 20px;
}
.hero-copy { flex: 1; min-width: 0; }
.hero-copy .cta { margin-right: 18px; }
.hero-visual { display: flex; justify-content: center; }
.phone {
  --screen-h: 420px;
  --frame-h: calc(var(--screen-h) / 0.914163);
  --frame-w: calc(var(--frame-h) * 1419 / 2796);
  width: var(--frame-w);
  margin: 0 auto;
}
.phone-film { --screen-h: 340px; }
.phone-stage {
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  filter: drop-shadow(0 28px 36px rgba(17, 24, 39, 0.28));
}
.phone-screen {
  position: absolute;
  left: 8.4566%;
  top: 4.2919%;
  width: 82.9458%;
  height: 91.4163%;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--frame-w) * 0.116);
  z-index: 1;
  background: #000;
}
.phone-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
}
.cap {
  display: block;
  text-align: center;
  color: #4B5563;
  font-size: 13px;
  font-weight: 700;
  margin-top: 12px;
}
.section { padding: 28px 0 8px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 8px;
}
.card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
}
a.card:hover { border-color: #FDBA74; }
.card h3 {
  font-size: 12px;
  color: #EA580C;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 10px;
  font-weight: 800;
}
.card p { margin: 0; font-size: 15px; line-height: 24px; }
.faq-q { color: #111827; font-weight: 700; margin: 0 0 8px; font-size: 15px; }
.film {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 22px;
  margin: 8px 0 12px;
}
.film-copy { width: 100%; }
.film-copy h2 { text-align: left; }
.mba {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 3306 / 1897;
  margin: 0 auto;
  filter: drop-shadow(0 32px 48px rgba(17, 24, 39, 0.22));
}
.mba-screen {
  position: absolute;
  left: 11.2825%;
  top: 6.4839%;
  width: 77.435%;
  height: 84.344%;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background: #0B0D12;
}
.mba-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.cta-band {
  text-align: center;
  padding: 48px 20px 40px;
  border-top: 1px solid #E5E7EB;
  margin-top: 24px;
}
.cta-band p { margin: 0 0 16px; }
.foot { border-top: 1px solid #E5E7EB; padding: 24px 0 56px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.foot-links a { color: #4B5563; text-decoration: none; font-size: 14px; }
.foot-note { color: #9CA3AF; font-size: 12px; margin-top: 8px; }
@media (min-width: 860px) {
  .ticks { display: flex; }
  h1 { font-size: 42px; line-height: 50px; }
  .hero-row {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 48px 0 28px;
  }
  .phone { --screen-h: 480px; }
  .film { flex-direction: row; align-items: center; padding: 28px; }
  .film-copy { flex: 1; }
  .film .phone { flex: 0 0 auto; }
}