/*
 * Public site at the domain root. index.html sets data-mode="app" inside MAX,
 * which hides all of this; every rule is scoped so the mini app is untouched.
 * The site is always dark: it matches the dark app screens it shows.
 */
html[data-mode='app'] #site { display: none; }
html:not([data-mode='app']) #root { display: none; }

:root {
  --s-bg: #08090c;
  --s-card: #12141a;
  --s-line: #23262f;
  --s-ink: #f3f4f7;
  --s-muted: #8b90a0;
  --s-blue: #4c8dff;
  --s-green: #3ddc97;
  --s-grad: linear-gradient(90deg, var(--s-green), var(--s-blue));
}

html:not([data-mode='app']) { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 76px; }
html:not([data-mode='app']) body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#site *, #site *::before, #site *::after { box-sizing: border-box; }
#site a { color: inherit; text-decoration: none; }
#site h1, #site h2, #site h3, #site p { margin: 0; }
#site .s-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
#site .s-small { color: var(--s-muted); font-size: 14px; }

/* Buttons */
#site .s-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 12px; background: var(--s-ink); color: #08090c; font-weight: 650; transition: opacity .15s ease, transform .15s ease; }
#site .s-btn:hover { opacity: .9; }
#site .s-btn:active { transform: scale(.98); }
#site .s-btn-sm { height: 38px; padding: 0 16px; font-size: 15px; }
#site .s-btn-ghost { background: transparent; color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-line); }
#site .s-btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--s-muted); opacity: 1; }
#site a:focus-visible, #site summary:focus-visible { outline: 3px solid var(--s-blue); outline-offset: 3px; }

/* Header */
#site .s-top { position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 12, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--s-line); }
#site .s-top-in { display: flex; align-items: center; gap: 28px; height: 64px; }
#site .s-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
#site .s-logo svg { width: 30px; height: 30px; }
#site .s-nav { display: flex; gap: 24px; margin-left: auto; color: var(--s-muted); font-size: 15px; }
#site .s-nav a:hover { color: var(--s-ink); }

/* Hero */
#site .s-hero { position: relative; text-align: center; padding: 96px 0 0; overflow: hidden; }
#site .s-hero::before { content: ''; position: absolute; left: 50%; top: 260px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(76, 141, 255, .35), rgba(61, 220, 151, .12) 60%, transparent); filter: blur(20px); pointer-events: none; }
#site .s-hero .s-wrap { position: relative; }
#site .s-badge { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border: 1px solid var(--s-line); border-radius: 999px; color: var(--s-muted); font-size: 14px; margin-bottom: 28px; }
#site .s-badge b { color: var(--s-green); }
#site h1 { font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -.045em; font-weight: 800; max-width: 14ch; margin: 0 auto 24px; }
#site h1 span, #site .s-strip b, #site .s-big { background: var(--s-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#site .s-lead { color: var(--s-muted); font-size: 20px; max-width: 36em; margin: 0 auto 36px; }
#site .s-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#site .s-phones { display: flex; justify-content: center; gap: 28px; margin-top: 72px; height: 460px; }
#site .s-ph { width: 250px; height: 520px; flex: none; border-radius: 38px; padding: 8px; background: #000; box-shadow: 0 0 0 1px #2a2e38, 0 40px 80px -20px rgba(76, 141, 255, .45); overflow: hidden; }
#site .s-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; }
#site .s-ph-side { margin-top: 60px; opacity: .85; }

/* Strip */
#site .s-strip { position: relative; border-block: 1px solid var(--s-line); background: var(--s-bg); }
#site .s-strip-in { display: grid; grid-template-columns: repeat(3, 1fr); }
#site .s-strip-in > div { padding: 32px 24px; }
#site .s-strip-in > div + div { border-left: 1px solid var(--s-line); }
#site .s-strip b { display: block; font-size: 40px; letter-spacing: -.03em; font-weight: 800; }
#site .s-strip span { color: var(--s-muted); font-size: 15px; }

/* Sections */
#site .s-sec { padding: 96px 0; }
#site h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.035em; line-height: 1.05; margin-bottom: 16px; }
#site .s-sub { color: var(--s-muted); font-size: 18px; max-width: 36em; margin-bottom: 48px; }

/* Bento */
#site .s-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 300px; gap: 16px; }
#site .s-cell { position: relative; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 24px; padding: 28px; overflow: hidden; }
#site .s-cell h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
#site .s-cell p { color: var(--s-muted); font-size: 15px; max-width: 24em; }
#site .s-w4 { grid-column: span 4; }
#site .s-w3 { grid-column: span 3; }
#site .s-w2 { grid-column: span 2; }
#site .s-tall { grid-row: span 2; }
/* Phones hang from the top of their cell; the cell clips whatever runs past the bottom. */
#site .s-shot { position: absolute; right: 28px; top: 28px; width: 200px; border-radius: 28px; padding: 6px; background: #000; box-shadow: 0 0 0 1px #2a2e38; }
#site .s-shot img { display: block; width: 100%; height: auto; border-radius: 23px; }
#site .s-tall .s-shot { left: 50%; right: auto; transform: translateX(-50%); top: 150px; width: 230px; }
#site .s-w3 > h3, #site .s-w3 > p, #site .s-w4 > h3, #site .s-w4 > p { max-width: calc(100% - 230px); }
#site .s-cell .s-big { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 28px; color: transparent; }

/* Money comparison */
#site .s-calc { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 28px; padding: 48px; }
#site .s-calc .s-sub { margin-bottom: 12px; }
#site .s-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
#site .s-bars li { display: grid; grid-template-columns: 140px 1fr auto; gap: 14px; align-items: center; font-size: 15px; }
#site .s-bars span { color: var(--s-muted); }
#site .s-bars i { display: block; height: 12px; border-radius: 99px; background: var(--s-line); position: relative; overflow: hidden; }
#site .s-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: #3a3f4c; }
#site .s-bars b { min-width: 92px; text-align: right; }
#site .s-bar-us span { color: var(--s-ink); font-weight: 700; }
#site .s-bar-us i::after { background: var(--s-grad); }
#site .s-bar-us b { color: var(--s-green); }

/* Steps */
#site .s-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
#site .s-steps div { border-top: 1px solid var(--s-line); padding-top: 20px; counter-increment: s; }
#site .s-steps div::before { content: '0' counter(s); color: var(--s-blue); font-weight: 700; font-size: 14px; display: block; margin-bottom: 12px; }
#site .s-steps b { display: block; font-size: 18px; margin-bottom: 6px; }
#site .s-steps span { color: var(--s-muted); font-size: 15px; }

/* Prices */
#site .s-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#site .s-price { background: var(--s-card); border: 1px solid var(--s-line); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; }
#site .s-price > p:first-child { color: var(--s-muted); font-weight: 600; }
#site .s-price-main { background: linear-gradient(var(--s-card), var(--s-card)) padding-box, var(--s-grad) border-box; border-color: transparent; }
#site .s-amt { font-size: 56px; font-weight: 800; letter-spacing: -.04em; margin: 12px 0 16px; }
#site .s-amt small { font-size: 17px; color: var(--s-muted); font-weight: 500; letter-spacing: 0; }
#site .s-price ul { color: var(--s-muted); padding-left: 18px; margin: 0 0 24px; display: grid; gap: 8px; flex: 1; }
#site .s-price .s-btn { align-self: flex-start; }

/* FAQ */
#site .s-faq { max-width: 880px; }
#site .s-faq h2 { margin-bottom: 32px; }
#site .s-qa details { border-bottom: 1px solid var(--s-line); }
#site .s-qa details:first-child { border-top: 1px solid var(--s-line); }
#site .s-qa summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-weight: 600; font-size: 18px; position: relative; }
#site .s-qa summary::-webkit-details-marker { display: none; }
#site .s-qa summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--s-blue); transition: transform .2s ease; }
#site .s-qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
#site .s-qa details p { color: var(--s-muted); padding: 0 40px 22px 0; }

/* Final */
#site .s-final { text-align: center; border: 1px solid var(--s-line); border-radius: 32px; padding: 72px 24px; background: radial-gradient(ellipse at top, rgba(76, 141, 255, .25), transparent 60%), var(--s-card); }
#site .s-final h2 { margin-bottom: 12px; }
#site .s-final p { color: var(--s-muted); margin-bottom: 28px; }
#site .s-help { margin-top: 16px; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 24px; padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#site .s-help h3 { font-size: 20px; }
#site .s-help p { color: var(--s-muted); margin-top: 6px; }

/* Footer */
#site .s-foot { border-top: 1px solid var(--s-line); padding: 48px 0 32px; color: var(--s-muted); font-size: 15px; }
#site .s-foot-in { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
#site .s-foot .s-logo { color: var(--s-ink); margin-bottom: 12px; }
#site .s-foot p { margin-bottom: 6px; }
#site .s-foot nav { display: grid; gap: 8px; align-content: start; }
#site .s-foot a:hover { color: var(--s-ink); }
#site .s-copy { margin-top: 32px; font-size: 13px; }

/* Tablet */
@media (max-width: 900px) {
  #site .s-nav { display: none; }
  #site .s-top .s-btn { margin-left: auto; }
  #site .s-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  #site .s-cell, #site .s-w4, #site .s-w3, #site .s-w2 { grid-column: auto; min-height: 0; }
  #site .s-tall { grid-row: auto; }
  #site .s-w3 > h3, #site .s-w3 > p, #site .s-w4 > h3, #site .s-w4 > p { max-width: none; }
  /* In one column the phone sits under the text; its lower part is cut off by the cell. */
  #site .s-shot, #site .s-tall .s-shot { position: relative; top: auto; right: auto; left: auto; transform: none; width: 220px; margin: 28px auto -200px; }
  #site .s-calc, #site .s-steps, #site .s-prices, #site .s-strip-in, #site .s-foot-in { grid-template-columns: 1fr; }
  #site .s-strip-in > div + div { border-left: 0; border-top: 1px solid var(--s-line); }
  #site .s-ph-side { display: none; }
}

/* Phone */
@media (max-width: 600px) {
  html:not([data-mode='app']) body { font-size: 16px; }
  #site .s-wrap { padding: 0 16px; }
  #site .s-sec { padding: 64px 0; }
  #site .s-hero { padding-top: 56px; }
  #site .s-actions .s-btn { flex: 1 1 100%; }
  #site .s-phones { margin-top: 48px; height: 400px; }
  #site .s-ph { width: 220px; height: 456px; }
  #site .s-calc { padding: 28px 20px; gap: 28px; }
  #site .s-bars li { grid-template-columns: 1fr auto; }
  #site .s-bars i { grid-column: 1 / -1; grid-row: 2; }
  #site .s-price { padding: 28px 24px; }
  #site .s-price .s-btn { align-self: stretch; }
  #site .s-final { padding: 48px 20px; }
  #site .s-help { flex-direction: column; align-items: stretch; padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-mode='app']) { scroll-behavior: auto; }
  #site .s-btn, #site .s-qa summary::after { transition: none; }
}