/* ============================================================================
   ATMODECK MARKETING SITE, shared design system (v2)
   Navy and bright blue, Poppins. Every class the older pages used (card, grid,
   section, page-hero, btn, pill, checklist, shot-frame, doc-body and so on) still
   works, so the billing, account and reference pages keep their own markup.
   ============================================================================ */

:root {
  --navy: #212428;
  --navy-deep: #1c1e21;
  --navy-mid: #26292d;
  --panel: #25282c;
  --panel-2: #2a2c30;
  --panel-border: rgba(255,255,255,0.08);
  --panel-border-2: rgba(255,255,255,0.14);
  --accent: #17a548;
  --accent-hi: #2fd35f;
  --sky: #2fd35f;
  --sky-bright: #6fe28f;
  --orange: #ffdd1f;
  --green: #2fd35f;
  --red: #f5363f;
  --violet: #ea45df;
  --logo-slate: #2a2c30;
  --mist: rgba(255,255,255,0.74);
  --mist-dim: rgba(255,255,255,0.52);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.55);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0; overflow-x: hidden;
  background: var(--navy-deep);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #fff; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(47,211,95,0.45); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- NAV */
.site-nav {
  position: sticky; top: 0; z-index: 100; overflow: visible;
  background: rgba(28,30,33,0.82); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--panel-border);
}
.site-nav .nav-inner {
  position: relative; width: 100%; min-width: 0; max-width: var(--maxw); margin: 0 auto;
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.nav-brand { display: flex; align-items: center; text-decoration: none; flex: 0 1 190px; min-width: 0; }
.nav-brand img { width: min(190px, 100%); height: auto; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links .nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--mist);
  font-size: 14.5px; font-weight: 500; padding: 9px 13px; border-radius: 10px; border: 0; background: none;
  font-family: inherit; cursor: pointer; transition: color .15s ease, background .15s ease;
}
.nav-links a:hover, .nav-links a.active, .nav-links .nav-drop-btn:hover, .nav-links li.open > .nav-drop-btn { color: #fff; background: rgba(255,255,255,0.06); }
.nav-links a.active { color: var(--sky-bright); }
.nav-drop-btn svg { width: 11px; height: 11px; opacity: .7; transition: transform .15s; }
.nav-links li.open > .nav-drop-btn svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: 8px; list-style: none; margin: 0;
  background: #26292d; border: 1px solid var(--panel-border-2); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav-links li:hover > .nav-menu, .nav-links li.open > .nav-menu, .nav-links li:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #fff; }
.nav-menu a small { font-size: 12px; font-weight: 400; color: var(--mist-dim); }
.nav-menu a:hover { background: rgba(47,211,95,0.14); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 980px) {
  .site-nav .nav-inner { padding: 10px 20px; gap: 12px; }
  .nav-brand { flex: 1 1 auto; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-deep); flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 40px; display: none; max-height: calc(100dvh - 58px); overflow-y: auto; border-top: 1px solid var(--panel-border); box-shadow: 0 18px 30px rgba(0,0,0,.3);
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a, .nav-links .nav-drop-btn { display: flex; width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--panel-border); border-radius: 0; justify-content: space-between; }
  .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 8px; min-width: 0; display: none; }
  .nav-links li.open > .nav-menu { display: block; }
  .nav-links li:hover > .nav-menu { display: none; }
  .nav-links li.open:hover > .nav-menu { display: block; }
  .nav-menu a { padding: 11px 6px; border-bottom: 0; }
  .nav-toggle { display: flex; }
  .nav-actions { display: none; }
}
@media (max-width: 480px) { .site-nav .nav-inner { padding: 8px 14px; } }

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent-hi) 0%, var(--accent) 100%); color: #fff; box-shadow: 0 8px 26px rgba(47,211,95,0.42); }
.btn-primary:hover { box-shadow: 0 10px 34px rgba(47,211,95,0.6); transform: translateY(-1px); }
.btn-outline { background: rgba(255,255,255,0.04); color: #fff; border-color: rgba(255,255,255,0.2); }
.btn-outline:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.34); }
.btn-orange { background: linear-gradient(135deg, #ffe45c 0%, var(--orange) 100%); color: #241300; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------------------------------------------------------------- TYPE / SECTIONS */
.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%); border-top: 1px solid var(--panel-border); }
.eyebrow {
  display: inline-block; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; font-weight: 700; color: var(--sky-bright);
  border: 1px solid rgba(47,211,95,0.45); background: rgba(47,211,95,0.09); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.16; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { line-height: 1.7; color: var(--mist); margin: 0; }
.lede { font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 640px; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.section-head p { margin-top: 14px; }
.grad { background: linear-gradient(120deg, #8cf0ab 0%, #2fd35f 55%, #17a548 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- CARDS / GRIDS */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 28px;
  transition: border-color .2s ease, transform .2s ease;
}
a.card { text-decoration: none; display: block; }
a.card:hover { border-color: rgba(47,211,95,0.5); transform: translateY(-2px); }
.feature-card .icon {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(47,211,95,0.13); border: 1px solid rgba(47,211,95,0.34);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--sky-bright);
}
.feature-card .icon svg { width: 22px; height: 22px; }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: 14.5px; }
.feature-card .more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--sky-bright); }

/* screenshot frames */
.shot-frame {
  position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; background-size: cover; background-position: center;
}
.shot-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-frame.crop-bottom img { object-position: center bottom; }

.frame {
  position: relative; border-radius: 16px; overflow: hidden; background: #202327;
  border: 1px solid var(--panel-border-2); box-shadow: var(--shadow-lg);
}
.frame::before { content: ''; display: block; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='32'%3E%3Crect x='12' y='11' width='10' height='10' rx='2.4' fill='%230073ff'/%3E%3Ctext x='30' y='20.5' font-family='Segoe UI,Arial,sans-serif' font-size='12' fill='%23aab8c8'%3EAtmoDeck%3C/text%3E%3C/svg%3E") 0 0 no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='32'%3E%3Cg stroke='%23c8d3df' stroke-width='1' fill='none'%3E%3Cpath d='M18 16.5h10'/%3E%3Crect x='62.5' y='11.5' width='9' height='9'/%3E%3Cpath d='M108 11l10 10M118 11l-10 10'/%3E%3C/g%3E%3C/svg%3E") right 0 top 0 no-repeat, #0a1420; border-bottom: 1px solid var(--panel-border); }
.frame.bare::before { display: none; }
.frame img { width: 100%; height: auto; }
.figure { margin: 0; }
.figure figcaption { margin-top: 12px; font-size: 13.5px; color: var(--mist-dim); text-align: center; }

/* ---------------------------------------------------------------- PAGE HERO (interior) */
.page-hero { padding: 76px 0 24px; text-align: center; background: radial-gradient(ellipse at 50% -10%, rgba(47,211,95,0.24) 0%, transparent 58%); }
.page-hero .container { max-width: 820px; }
.page-hero p { margin: 18px auto 0; }

/* ---------------------------------------------------------------- HOME HERO */
.hero2 { position: relative; padding: 84px 0 0; overflow: hidden; background:
  radial-gradient(ellipse 80% 55% at 50% -8%, rgba(47,211,95,0.34), transparent 62%),
  radial-gradient(ellipse 45% 40% at 88% 22%, rgba(47,211,95,0.18), transparent 70%),
  radial-gradient(ellipse 45% 40% at 8% 30%, rgba(0,230,118,0.07), transparent 70%); }
.hero2 .hero-copy { text-align: center; max-width: 880px; margin: 0 auto; }
.hero2 h1 { margin: 0 auto; }
.hero2 .lede { margin: 22px auto 0; max-width: 720px; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-all { margin: 26px auto 0; display: inline-block; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--green); background: rgba(0,230,118,0.10); border: 1px solid rgba(0,230,118,0.4); }
.hero-shot { position: relative; max-width: 1080px; margin: 56px auto 0; padding: 0 24px; }
.hero-shot .frame { transform: perspective(2200px) rotateX(3deg); transform-origin: 50% 0; }
.hero-shot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, transparent, var(--navy-deep)); pointer-events: none; }
@media (max-width: 700px) { .hero-shot .frame { transform: none; } }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--panel-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--navy-deep)); overflow: hidden; }
.stat { padding: 30px 26px; border-left: 1px solid var(--panel-border); text-align: center; }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--mist-dim); line-height: 1.4; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--panel-border); } }

/* split rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.wide-l { grid-template-columns: 1.25fr 1fr; }
.split.wide-r { grid-template-columns: 1fr 1.25fr; }
.split + .split { margin-top: 96px; }
@media (max-width: 900px) { .split, .split.wide-l, .split.wide-r { grid-template-columns: 1fr; gap: 30px; } .split .flip { order: 0 !important; } .split + .split { margin-top: 64px; } }
.split h2 { margin-top: 4px; }
.split p { margin-top: 16px; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile { grid-column: span 2; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel) 0%, var(--navy-deep) 100%); position: relative; overflow: hidden; }
.tile.w3 { grid-column: span 3; } .tile.w4 { grid-column: span 4; } .tile.w6 { grid-column: span 6; }
.tile h3 { font-size: 1.12rem; margin-bottom: 8px; }
.tile p { font-size: 14.5px; }
.tile .ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(47,211,95,0.14); border: 1px solid rgba(47,211,95,0.34); color: var(--sky-bright); margin-bottom: 16px; }
.tile .ico svg { width: 21px; height: 21px; }
.tile img { margin-top: 20px; border-radius: 12px; border: 1px solid var(--panel-border); }
.tile.glow::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px; background: radial-gradient(circle, rgba(47,211,95,0.28), transparent 65%); pointer-events: none; }
@media (max-width: 900px) { .tile, .tile.w3, .tile.w4 { grid-column: span 6; } }
@media (min-width: 901px) and (max-width: 1100px) { .tile { grid-column: span 3; } .tile.w4 { grid-column: span 6; } }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.chips li, .chip { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-border-2); color: var(--mist); }
.chip.hot { background: rgba(47,211,95,0.14); border-color: rgba(47,211,95,0.4); color: var(--sky-bright); }

/* sticky page sub-navigation */
.subnav { position: sticky; top: 61px; z-index: 50; background: rgba(28,30,33,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--panel-border); }
.subnav .container { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.subnav .container::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--mist); padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.subnav a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.subnav a.on { color: #fff; background: rgba(47,211,95,0.2); border-color: rgba(47,211,95,0.5); }
[id].anchor { scroll-margin-top: 130px; }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.tabs button { font: 600 13.5px 'Poppins', sans-serif; color: var(--mist); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--panel-border-2); background: rgba(255,255,255,0.04); cursor: pointer; transition: all .15s; }
.tabs button:hover { color: #fff; }
.tabs button.on { color: #fff; background: rgba(47,211,95,0.24); border-color: rgba(47,211,95,0.6); }
.tab-pane { display: none; } .tab-pane.on { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tab-note { text-align: center; margin: 16px auto 0; max-width: 640px; font-size: 14.5px; color: var(--mist); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, #233a2a 0%, #1c1e21 60%); border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(47,211,95,0.3), transparent 60%); pointer-events: none; }
.cta-band .container { position: relative; }

/* honest note */
.honest { border: 1px solid var(--panel-border-2); border-left: 4px solid var(--orange); background: rgba(255,170,0,0.06); border-radius: 12px; padding: 16px 20px; font-size: 14.5px; line-height: 1.65; color: var(--mist); }
.honest strong { color: #fff; }

/* reveal on scroll (progressive: content is visible without JS) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- FOOTER */
.site-footer { border-top: 1px solid var(--panel-border); padding: 60px 0 32px; margin-top: 40px; background: linear-gradient(180deg, transparent, rgba(47,211,95,0.05)); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--mist-dim); margin-bottom: 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { text-decoration: none; color: var(--mist); font-size: 14px; }
.footer-grid a:hover { color: #fff; }
.footer-brand img { width: min(210px, 100%); height: auto; margin-bottom: 14px; object-fit: contain; }
.footer-brand p { font-size: 13.5px; max-width: 270px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--panel-border); font-size: 13px; color: var(--mist-dim); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: var(--mist); display: flex; }
.footer-social svg { width: 17px; height: 17px; }
.footer-social a:hover { color: #fff; }

/* ---------------------------------------------------------------- MISC (shared) */
.checklist { list-style: none; margin: 20px 0 0; padding: 0; }
.checklist li { display: flex; gap: 10px; padding: 7px 0; font-size: 14.5px; color: var(--mist); align-items: flex-start; }
.checklist svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--green); }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; row-gap: 10px; margin-top: 40px; font-size: 13px; letter-spacing: .04em; color: var(--mist-dim); text-transform: uppercase; }
.trust-row span { padding: 0 20px; border-left: 1px solid rgba(255,255,255,0.2); line-height: 1; }
.trust-row span:first-child { border-left: none; padding-left: 0; }
@media (max-width: 640px) { .trust-row span { border-left: 0; padding: 0 10px; } }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.pill-green { background: rgba(0,230,118,0.12); color: var(--green); border: 1px solid rgba(0,230,118,0.35); }
.pill-orange { background: rgba(255,170,0,0.12); color: var(--orange); border: 1px solid rgba(255,170,0,0.35); }
.pill-blue { background: rgba(47,211,95,0.14); color: var(--sky-bright); border: 1px solid rgba(47,211,95,0.4); }
.divider { height: 1px; background: var(--panel-border); border: none; margin: 0; }
.center { text-align: center; }
.muted { color: var(--mist-dim); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
/* a feature picture shown big: as wide as the page, with a soft glow and a badge */
.showcase { position: relative; margin: 8px auto 0; max-width: 1180px; }
.showcase::before { content: ""; position: absolute; inset: 6% 4% -2%; border-radius: 40px; background: radial-gradient(60% 60% at 50% 55%, rgba(47,211,95,0.38), rgba(47,211,95,0) 72%); filter: blur(34px); z-index: 0; pointer-events: none; }
.showcase .figure { position: relative; z-index: 1; }
.showcase .frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--panel-border-2); box-shadow: var(--shadow-lg); }
.showcase .frame img { display: block; width: 100%; height: auto; }
.showcase-badge { position: absolute; z-index: 2; top: 48px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(28,30,33,0.78); border: 1px solid var(--panel-border-2); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: #fff; }
.showcase-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
@media (max-width: 640px) { .showcase-badge { position: static; margin-bottom: 12px; } }


/* ============================================================================
   REDESIGN (v3): a dark space look with the globe picture as a fixed backdrop that slides up as the page scrolls, a
   menu that is clear over the top of the page and turns to glass once you scroll, big stacked light/bold headings, blue
   pill buttons. Poppins throughout. Content and markup are unchanged; this block and the scroll code in site.js are what make it.
   ============================================================================ */
:root { --head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ink: #1c1e21; }
html { background: var(--ink); }
body { background: transparent; overflow-x: clip; }       /* the backdrop (div.bg-globe) shows through the top of every page; clip (not hidden) keeps the sticky menu sticking */

/* the backdrop: the globe picture, fixed behind the page; the page scrolls up over it while it drifts up more slowly and darkens */
.bg-globe { position: fixed; left: 0; right: 0; top: 0; height: 128vh; z-index: -1; pointer-events: none; overflow: hidden; background: var(--ink); }
.bg-globe .bg-img { position: absolute; inset: 0; will-change: transform; transform: translate3d(0, 0, 0); }        /* moved by the scroll code (site.js) */
.bg-globe .bg-pic { position: absolute; inset: 0; background: #1c1e21 url("bg-globe.webp") center 38% / cover no-repeat; }
.bg-globe .bg-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 46%, rgba(28,30,33,0.42), rgba(28,30,33,0.58) 100%), linear-gradient(180deg, rgba(28,30,33,0.35), rgba(28,30,33,0) 30%, rgba(28,30,33,0) 55%, rgba(28,30,33,0.7)); }
.bg-globe .bg-dim { position: absolute; inset: 0; background: var(--ink); opacity: 0; will-change: opacity; }
/* when the page loads the globe fades up from the bottom of the screen and settles into place */
.js .bg-globe .bg-pic { animation: globeRise 5.5s cubic-bezier(.33,.0,.2,1) backwards; }
@keyframes globeRise { from { opacity: 0; transform: translate3d(0, 22vh, 0); } 55% { opacity: 1; } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.section, .section-tight, .site-footer, .cta-band { position: relative; }

/* ---- type (Poppins) */
h1, h2, h3, h4, .btn, .eyebrow, .nav-links a, .nav-links .nav-drop-btn, .stat b, .tabs button, .subnav a { font-family: var(--head); }
h1, h2 { font-weight: 800; letter-spacing: -0.025em; }
h3, h4 { font-weight: 700; }
p { color: rgba(255,255,255,0.78); }
.eyebrow { font-weight: 600; letter-spacing: .2em; color: var(--sky-bright); background: rgba(47,211,95,0.10); border: 1px solid rgba(47,211,95,0.32); backdrop-filter: blur(6px); }
.section-head h2, .split h2, .page-hero h1 { text-wrap: balance; }
.w { display: inline-block; transition: opacity .12s linear, transform .12s linear; }       /* a word of a scrolling heading (site.js) */

/* ---- menu: clear over the top, glass once the page has moved */
.site-nav { transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.site-nav.at-top { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav:not(.at-top) { background: rgba(28,30,33,0.72); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: rgba(47,211,95,0.12); }
.nav-links a, .nav-links .nav-drop-btn { font-weight: 500; }
@media (max-width: 980px) { .site-nav.at-top .nav-links { background: rgba(28,30,33,0.96); } }

/* ---- buttons: blue pills */
.btn { font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, var(--accent-hi) 0%, var(--accent) 100%); color: #fff; box-shadow: 0 8px 26px rgba(47,211,95,0.42); }
.btn-primary:hover { box-shadow: 0 10px 34px rgba(47,211,95,0.6); transform: translateY(-1px); }
.btn-outline { background: rgba(255,255,255,0.05); color: #fff; border-color: rgba(47,211,95,0.38); backdrop-filter: blur(6px); }
.btn-outline:hover { background: rgba(47,211,95,0.16); border-color: rgba(47,211,95,0.6); }

/* ---- cards, tiles, stat strip, frames: soft dark glass */
.card, .tile, .stats { background: linear-gradient(180deg, rgba(38,41,45,0.86) 0%, rgba(28,30,33,0.92) 100%); border-color: rgba(47,211,95,0.12); border-radius: 22px; }
.tile.glow::before { background: radial-gradient(circle, rgba(47,211,95,0.30), transparent 65%); }
.frame { border-color: rgba(47,211,95,0.18); }
.section-alt { background: linear-gradient(180deg, rgba(47,211,95,0.045), transparent 60%); border-top-color: rgba(47,211,95,0.10); }
.cta-band { background: linear-gradient(135deg, rgba(13,42,77,0.92) 0%, rgba(10,22,34,0.95) 60%); }
.site-footer { background: linear-gradient(180deg, rgba(28,30,33,0.0), rgba(28,30,33,0.9) 40%); }
.subnav { background: rgba(28,30,33,0.82); }

/* ---- interior page heroes: the globe shows through, the heading is big and centred */
.page-hero { padding: 150px 0 40px; background: none; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }

/* ---- home: the first screen */
.hero2 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 120px 0 110px; overflow: visible; background: none; }
.hero2 .container { position: relative; z-index: 1; }
.hero2 .hero-copy { max-width: 980px; will-change: transform, opacity; }
.hero2 h1 { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.08; font-size: clamp(2.4rem, 7vw, 5.4rem); font-weight: 800; text-align: center; margin: 6px auto 0; }
.hero2 h1 .grad { display: block; }
.hero2 h1 .hl { display: block; }
.hero2 h1 .hl-1 { font-weight: 300; font-size: clamp(1.6rem, 3.8vw, 2.8rem); color: var(--sky-bright); letter-spacing: 0; }
.hero2 h1 .hl-2 { font-weight: 800; font-size: clamp(2.4rem, 7.4vw, 5.8rem); color: rgba(255,255,255,0.6); }
.hero2 h1 .hl-3 { font-weight: 800; font-size: clamp(2.4rem, 7.4vw, 5.8rem); padding-bottom: .1em; }
.hero2 .lede { color: #fff; font-weight: 500; text-shadow: 0 2px 18px rgba(0,0,0,0.75); max-width: 760px; }
.hero2 .eyebrow { margin-bottom: 8px; }
.hero2 .trust-row { color: rgba(255,255,255,0.78); }
/* soft dark glows behind the small elements so they read over the busy map: text glows follow the letters, button and pill glows follow their rounded shapes */
.hero2 .lede, .hero2 .trust-row span { text-shadow: 0 0 5px rgba(14,15,17,0.95), 0 0 16px rgba(14,15,17,0.9), 0 0 38px rgba(14,15,17,0.85), 0 0 70px rgba(14,15,17,0.7); }
.hero2 .eyebrow { box-shadow: 0 0 22px 4px rgba(14,15,17,0.65), 0 0 56px 14px rgba(14,15,17,0.4); }
.hero2 .hero-actions .btn-primary { box-shadow: 0 8px 26px rgba(47,211,95,0.42), 0 0 34px 10px rgba(14,15,17,0.6), 0 0 80px 26px rgba(14,15,17,0.38); }
.hero2 .hero-actions .btn-outline { background: rgba(28,30,33,0.55); box-shadow: 0 0 30px 8px rgba(14,15,17,0.65), 0 0 76px 24px rgba(14,15,17,0.4); }
.hero2 .hero-all { background: linear-gradient(rgba(0,230,118,0.10), rgba(0,230,118,0.10)), rgba(28,30,33,0.62); box-shadow: 0 0 30px 8px rgba(14,15,17,0.65), 0 0 80px 24px rgba(14,15,17,0.4); }
.js .hero2 .hl { opacity: 0; animation: heroRise 2s cubic-bezier(.16,.8,.2,1) forwards; }
.js .hero2 .hl-1 { animation-delay: .7s; } .js .hero2 .hl-2 { animation-delay: 1.25s; } .js .hero2 .hl-3 { animation-delay: 1.8s; }
.js .hero2 .eyebrow, .js .hero2 .lede, .js .hero2 .hero-actions, .js .hero2 .hero-all, .js .hero2 .trust-row { opacity: 0; animation: heroRise 1.8s cubic-bezier(.16,.8,.2,1) forwards; }
.js .hero2 .eyebrow { animation-delay: .4s; } .js .hero2 .lede { animation-delay: 2.5s; } .js .hero2 .hero-actions { animation-delay: 2.8s; } .js .hero2 .hero-all { animation-delay: 3.0s; } .js .hero2 .trust-row { animation-delay: 3.2s; }
/* the main text comes up out of the dark from well below, sharpening as it rises */
@keyframes heroRise { from { opacity: 0; transform: translate3d(0, 130px, 0); filter: blur(12px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,0.7); border-radius: 14px; opacity: .85; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cueWheel 1.7s ease-in-out infinite; }
@keyframes cueWheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* the screenshot that comes up over the globe as you scroll */
.slide-first { position: relative; margin-top: -9vh; padding-bottom: 20px; }
.slide-first .hero-shot { margin-top: 0; }
.slide-first .hero-shot::after { display: none; }
.hero-shot .frame { box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(47,211,95,0.16); }

/* things come up from below a little further, and one after another */
.js .reveal { transform: translateY(46px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .bento .reveal:nth-child(3n+2), .js .stats.reveal { transition-delay: .08s; }
.js .bento .reveal:nth-child(3n+3) { transition-delay: .16s; }

@media (max-width: 700px) {
  .hero2 { padding: 100px 0 100px; }
  .hero2 h1 .hl-2, .hero2 h1 .hl-3 { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .page-hero { padding: 120px 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero2 .hl, .js .hero2 .eyebrow, .js .hero2 .lede, .js .hero2 .hero-actions, .js .hero2 .hero-all, .js .hero2 .trust-row, .js .bg-globe .bg-pic { animation: none; opacity: 1; }
  .scroll-cue::after { animation: none; }
  .w { transition: none; }
}

/* the account button: Log In, or who is signed in */
.nav-account { display: inline-flex; align-items: center; gap: 8px; }
.nav-account.signed-in { border-color: var(--sky-bright, #6fe28f); }
.nav-account .acct-lbl { font-weight: 700; }
.nav-account .acct-lbl::after { content: '\00b7'; margin-left: 8px; opacity: .6; }
.nav-account .acct-email { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; font-weight: 500; }
@media (max-width: 1250px) { .nav-account .acct-lbl { display: none; } .nav-account .acct-email { max-width: 130px; } }
.nav-account-item { display: none; }
@media (max-width: 980px) { .nav-account-item { display: block; } .nav-links > li.nav-account-item > a { color: var(--sky-bright, #6fe28f); } }

/* pricing: four plans (the Enterprise one asks for contact) */
.section-tight .plans { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1180px) and (min-width: 901px) { .section-tight .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .section-tight .plans { grid-template-columns: 1fr; } }


/* ============================================================================
   REDESIGN (v4): Material 3, the same look as the app. Flat dark-blue surfaces (no glow, glass or gradients), Inter, pill and circle
   buttons, segmented pills for tabs, state layers on hover, and the app's blues. The globe backdrop and the scroll tricks are gone: the
   pictures are the show. This block comes last, so it wins over the older rules above.
   ============================================================================ */
:root {
  --md-bg: #1c1e21; --md-surface: #212428; --md-sc1: #26292d; --md-sc2: #2a2c30; --md-sc3: #33363b; --md-sc4: #3b3f45;
  --md-primary: #6fe28f; --md-on-primary: #06260f; --md-pc: #17a548; --md-on-pc: #ffffff; --md-var: #3a3e44; --md-outline: #656b74;
  --md-text: #eceef1; --md-text-2: #b6bbc3; --md-dim: #8b919a;
  --head: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --navy-deep: #1c1e21; --panel: #26292d; --panel-border: #3a3e44; --panel-border-2: #4a4f56; --mist: #b6bbc3; --mist-dim: #8b919a;
  --sky-bright: #6fe28f; --radius: 20px; --radius-lg: 28px; --shadow-lg: none; --ink: #1c1e21;
}
html { background: var(--md-bg); }
body { background: transparent; }
html, body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--md-text); letter-spacing: 0; }
h1, h2, h3, h4, .btn, .eyebrow, .nav-links a, .nav-links .nav-drop-btn, .stat b, .tabs button, .subnav a, input, select, textarea, button { font-family: var(--head); }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; }
h3, h4 { font-weight: 600; letter-spacing: -0.005em; }
p { color: var(--md-text-2); }
.grad { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--md-primary); }

/* the menu: one flat bar that touches the edges */
.site-nav:not(.at-top) { background: rgba(10,20,38,0.94); border-bottom: 1px solid var(--md-var); }
.site-nav.at-top { border-bottom-color: transparent; }
.nav-links a, .nav-links .nav-drop-btn { border-radius: 999px; font-weight: 500; font-size: 14.5px; color: var(--md-text-2); }
.nav-links a:hover, .nav-links .nav-drop-btn:hover, .nav-links li.open > .nav-drop-btn { background: rgba(140,196,255,.10); color: var(--md-text); }
.nav-links a.active { background: var(--md-sc3); color: var(--md-text); }
.nav-menu { background: var(--md-sc2); border: 1px solid var(--md-var); border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.45); padding: 8px; }
.nav-menu a { border-radius: 14px; }
.nav-menu a:hover { background: rgba(140,196,255,.12); }
@media (max-width: 980px) { .site-nav.at-top .nav-links, .nav-links { background: var(--md-surface); } .nav-links > li > a, .nav-links .nav-drop-btn { border-radius: 0; } }

/* buttons: flat pills; the main one is the app's blue, the others are outlined */
.btn { border-radius: 999px; font-weight: 600; font-size: 14.5px; padding: 12px 24px; position: relative; overflow: hidden; box-shadow: none !important; transform: none !important; transition: background .15s, border-color .15s; }
.btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .12s; pointer-events: none; }
.btn:hover::after { opacity: .09; } .btn:active::after { opacity: .16; }
.btn-primary { background: var(--md-pc); color: var(--md-on-pc); border-color: transparent; }
.btn-outline, .hero2 .hero-actions .btn-outline { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); backdrop-filter: none; }
.btn-orange { background: #ffc24a; color: #2b1b00; }
.nav-account.signed-in { border-color: var(--md-primary); }

/* surfaces: flat tonal cards with a thin outline; no gradients, no glow */
.card, .tile, .stats { background: var(--md-sc1) !important; border: 1px solid var(--md-var); border-radius: var(--radius-lg); box-shadow: none; }
.tile.glow::before, .showcase::before { display: none; }
a.card:hover { border-color: var(--md-primary); transform: none; background: var(--md-sc2) !important; }
.stat { border-color: var(--md-var); }
.stat b { font-weight: 700; color: var(--md-primary); }
.feature-card .icon, .tile .ico { background: var(--md-sc3); border: 0; border-radius: 16px; color: var(--md-primary); }
.section-alt { background: var(--md-surface); border-top: 1px solid var(--md-var); border-bottom: 1px solid var(--md-var); }
.cta-band { background: var(--md-sc3); border-color: var(--md-var); }
.cta-band::before { display: none; }
.site-footer { background: var(--md-surface); border-top: 1px solid var(--md-var); margin-top: 0; }
.subnav { background: var(--md-surface); backdrop-filter: none; border-bottom: 1px solid var(--md-var); }
.subnav a { border-radius: 999px; }
.subnav a:hover { background: rgba(140,196,255,.10); }
.subnav a.on { background: var(--md-sc3); border-color: transparent; color: var(--md-text); }
.honest { background: var(--md-sc1); border: 1px solid var(--md-var); border-left: 4px solid #ffc24a; border-radius: 20px; }

/* labels, chips, pills, tabs: tonal pills */
.eyebrow { background: var(--md-sc3); border: 0; color: var(--md-primary); letter-spacing: .12em; font-weight: 600; font-size: 11.5px; padding: 7px 14px; backdrop-filter: none; box-shadow: none !important; }
.chips li, .chip { background: var(--md-sc2); border: 1px solid var(--md-var); color: var(--md-text-2); }
.chip.hot { background: var(--md-sc4); border-color: transparent; color: var(--md-on-pc); }
.pill-green { background: rgba(91,227,160,.14); border-color: transparent; color: #5be3a0; }
.pill-orange { background: rgba(255,194,74,.14); border-color: transparent; color: #ffc24a; }
.pill-blue { background: var(--md-sc3); border-color: transparent; color: var(--md-primary); }
.tabs { background: var(--md-sc1); border: 1px solid var(--md-var); border-radius: 999px; padding: 4px; display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.tabs button { border: 0; background: transparent; color: var(--md-text-2); border-radius: 999px; }
.tabs button:hover { background: rgba(140,196,255,.10); color: var(--md-text); }
.tabs button.on { background: var(--md-sc4); color: #fff; border: 0; }

/* the first screen: copy on flat blue, the Output picture right under it */
.hero2 .lede { color: #fff; }
.hero2 .hero-actions .btn-outline { background: rgba(7,13,24,0.6); }

/* pictures: the app, framed like an app window, no tilt, no shadow */
.frame, .showcase .frame { background: var(--md-surface); border: 1px solid var(--md-var); border-radius: 24px; box-shadow: none; }
.frame::before { background: var(--md-sc2); border-bottom: 1px solid var(--md-var); }
.shot-frame { border-radius: 24px; border-color: var(--md-var); box-shadow: none; }
.figure figcaption { color: var(--md-dim); }

/* forms keep the same flat look */
input, select, textarea { background: var(--md-sc2); color: var(--md-text); border: 1px solid var(--md-var); border-radius: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--md-primary); outline-offset: 0; border-color: transparent; }

/* ---------------------------------------------------------------- THE LOGO (the same opening as the app's start-up picture)
   The bars of the A rise one after another from the bottom to the top, then the rest of the name slides out of the A to the right.
   It plays when a page opens; for the rest of a visit (html.logo-seen) the logo in the menu just stays put. */
.ad-logo { display: block; line-height: 0; }
.ad-logo svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ad-logo .b { transform-box: fill-box; transform-origin: 50% 100%; animation: adBarUp .55s cubic-bezier(.2, .9, .3, 1) both; }
.ad-logo .b1 { animation-delay: .15s; } .ad-logo .b2 { animation-delay: .4s; } .ad-logo .b3 { animation-delay: .65s; } .ad-logo .b4 { animation-delay: .9s; } .ad-logo .b5 { animation-delay: 1.15s; }
.ad-logo .tx { animation: adNameOut 1.25s cubic-bezier(.2, .8, .2, 1) 1.75s both; }
@keyframes adBarUp { from { opacity: 0; transform: translateY(46px) scaleY(.4); } to { opacity: 1; transform: none; } }
@keyframes adNameOut { from { transform: translateX(-2000px); } to { transform: translateX(0); } }
.nav-logo { width: min(190px, 100%); }
html.logo-seen .nav-logo .b, html.logo-seen .nav-logo .tx, .ad-logo.static .b, .ad-logo.static .tx, body:has(.hero-logo) .nav-logo .b, body:has(.hero-logo) .nav-logo .tx { animation: none; }
.hero-logo { width: min(560px, 78vw); margin: 0 auto 26px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)); }
.foot-logo { width: min(210px, 100%); }
@media (prefers-reduced-motion: reduce) { .ad-logo .b, .ad-logo .tx { animation-duration: .01s; animation-delay: 0s; } }

/* the bars of the A as a thin line under the menu */
.site-nav { border-bottom: 0; }
.site-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #2fd35f 0 20%, #17a548 0 40%, #ffdd1f 0 60%, #f5363f 0 80%, #ea45df 0); opacity: .9; }
::selection { background: rgba(47,211,95,0.4); }


/* ============================================================================
   v5 (2.8.0): the app's soft look. Cards float on the page with air between them, a faint light from the top left, and ONE pastel
   gradient made from the theme's own green, only for the thing that is chosen (the open tab, the main button). Comes last, so it wins.
   ============================================================================ */
:root {
  --so-c1: color-mix(in oklab, var(--md-primary) 80%, #ffffff); --so-c2: var(--md-primary); --so-c3: color-mix(in oklab, var(--md-primary) 55%, #17a548);
  --so-grad: linear-gradient(112deg, var(--so-c1) 0%, var(--so-c2) 46%, var(--so-c3) 100%);
  --so-ink: var(--md-on-primary);
  --so-card: linear-gradient(165deg, color-mix(in oklab, var(--md-sc2) 94%, #ffffff), var(--md-sc1) 62%);
  --so-edge: rgba(255,255,255,0.06);
}
.card, .tile, .stats { background: var(--so-card) !important; border-color: var(--so-edge); }
.tabs button.on { background: var(--so-grad); color: var(--so-ink); }
.btn-primary { background: var(--so-grad); color: var(--so-ink); }

/* a tile whose picture runs to its edges, under its words */
.tile.pic { padding: 0; display: flex; flex-direction: column; }
.tile.pic .tile-copy { padding: 24px 26px 18px; }
img[height] { height: auto; }   /* the width/height attributes only reserve the shape; never a fixed 1080 px */
.tile.pic img { margin: auto 0 0; border: 0; border-top: 1px solid var(--so-edge); border-radius: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tile.pic.tall img { aspect-ratio: 16 / 10; }
.tile .tag, .tag { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--md-sc3); color: var(--md-text-2); margin: 0 0 12px; }
.tag.new { background: var(--so-grad); color: var(--so-ink); }

/* the whole app at a glance: small link cards with an icon, a name and a line */
.app-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.app-map a.card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 16px; text-decoration: none; }
.app-map .icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--md-sc3); color: var(--md-primary); }
.app-map .icon svg { width: 20px; height: 20px; }
.app-map b { display: block; color: var(--md-text); font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.app-map span { display: block; color: var(--md-text-2); font-size: 13.5px; line-height: 1.45; }
.app-map-group { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--md-dim); margin: 30px 0 12px; }
.app-map-group:first-child { margin-top: 0; }
@media (max-width: 1100px) { .app-map { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .app-map { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .app-map { grid-template-columns: 1fr; } }

/* two pictures side by side in a split */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }


/* ============================================================================
   v6: the look of the brand art (the app icon and the banners). A deep night-navy page with a soft blue glow at the top, faint
   stars, thin rings behind the first screen, and one sunset pastel (gold, peach, rose, lilac) for the chosen thing and the
   highlighted words. The menu is dark glass with a thin pastel line under it, like the banners' waveform. Comes last, so it wins.
   ============================================================================ */
:root {
  --md-bg: #060a15; --md-surface: #0a1121; --md-sc1: #0e172b; --md-sc2: #121c34; --md-sc3: #18253f; --md-sc4: #22304f;
  --md-var: #1b2742; --md-outline: #3a4766; --md-text: #eef1f8; --md-text-2: #aab3c7; --md-dim: #7c869c;
  --md-primary: #86d9d2; --sky-bright: #86d9d2; --navy-deep: #060a15; --panel: #0e172b; --panel-border: #1b2742;
  --sunset: linear-gradient(100deg, #ffd27a 0%, #f7a46c 30%, #ea6f98 66%, #b48ae6 100%);
  --so-grad: var(--sunset); --so-ink: #1d0f1c;
  --so-card: linear-gradient(165deg, rgba(22,33,60,.92), rgba(12,20,38,.94) 62%);
  --so-edge: rgba(150,170,230,0.09);
}
html { background: var(--md-bg); }

/* the backdrop (div.bg-globe, made by site.js): the globe picture tinted night navy with a blue glow, the thin pastel rings
   around it, and a starry navy sky that the page fades to as it scrolls (div.bg-dim) */
.bg-globe { background: var(--md-bg); }
.bg-globe .bg-pic { background-color: var(--md-bg); filter: saturate(.85) hue-rotate(-6deg); }
.bg-globe .bg-shade { background:
  radial-gradient(ellipse 48% 52% at 50% 44%, rgba(30,52,120,.30), rgba(10,18,44,.55) 60%, rgba(6,10,21,.86) 100%),
  linear-gradient(180deg, rgba(6,10,21,.5), rgba(6,10,21,0) 28%, rgba(6,10,21,0) 55%, rgba(6,10,21,.8)); }
.bg-globe::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd27a'/%3E%3Cstop offset='.45' stop-color='%23ea6f98'/%3E%3Cstop offset='1' stop-color='%236d7fe0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)'%3E%3Ccircle cx='600' cy='600' r='300' stroke-opacity='.5' stroke-width='1.4'/%3E%3Ccircle cx='600' cy='600' r='375' stroke-opacity='.25' stroke-dasharray='1 7'/%3E%3Ccircle cx='600' cy='600' r='450' stroke-opacity='.3'/%3E%3Ccircle cx='600' cy='600' r='525' stroke-opacity='.16' stroke-dasharray='1 8'/%3E%3Ccircle cx='600' cy='600' r='595' stroke-opacity='.16'/%3E%3C/g%3E%3C/svg%3E") 50% 34% / min(1500px, 150vh) auto no-repeat; }
.bg-globe .bg-dim { z-index: 2; background-color: var(--md-bg); }
.bg-globe .bg-dim, body::after { background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 73% 9%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 64%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 94% 88%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 5% 45%, rgba(255,255,255,.4), transparent 60%);
  background-size: 420px 420px; }
.hero2 .hero-all { background: rgba(8,13,28,.62); border: 1px solid rgba(255,255,255,.14); color: var(--md-text); }
.hero2 .lede, .hero2 .trust-row span { text-shadow: 0 0 5px rgba(6,10,21,.95), 0 0 16px rgba(6,10,21,.9), 0 0 38px rgba(6,10,21,.85), 0 0 70px rgba(6,10,21,.7); }

/* without the script (no backdrop): the same stars, fixed */
body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; }

/* the highlighted words: the sunset pastel */
.grad, .hero2 h1 .hl-1 { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the menu: dark glass, a thin pastel line under it */
.site-nav.at-top { background: transparent; }
.site-nav:not(.at-top) { background: rgba(6,10,21,0.92); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 0; }
.site-nav::after { height: 1px; opacity: .8; background: linear-gradient(90deg, transparent 0%, #ffd27a 18%, #f7a46c 38%, #ea6f98 62%, #8f9cf0 82%, transparent 100%); }
.nav-links a:hover, .nav-links .nav-drop-btn:hover, .nav-links li.open > .nav-drop-btn, .subnav a:hover, .tabs button:hover { background: rgba(160,180,255,.08); }
.nav-links a.active, .subnav a.on { background: rgba(160,180,255,.12); }
.nav-menu { background: rgba(14,22,42,.97); border-color: var(--so-edge); backdrop-filter: blur(16px); }
@media (max-width: 980px) { .site-nav.at-top .nav-links, .nav-links { background: rgba(8,13,28,.98); } }

/* labels: the banners' chips, a dark glass pill with a colored dot */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--md-text);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.13); padding: 7px 15px 7px 13px; }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #86d9d2; box-shadow: 0 0 8px rgba(134,217,210,.7); flex: none; }
.section:nth-of-type(4n+1) .eyebrow::before { background: #f7a46c; box-shadow: 0 0 8px rgba(247,164,108,.7); }
.section:nth-of-type(4n+2) .eyebrow::before { background: #5ad27e; box-shadow: 0 0 8px rgba(90,210,126,.7); }
.section:nth-of-type(4n+3) .eyebrow::before { background: #ea6f98; box-shadow: 0 0 8px rgba(234,111,152,.7); }
.chips li, .chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }

/* surfaces: navy cards; the bands are a slightly lighter navy, not grey */
.section-alt { background: linear-gradient(180deg, rgba(14,23,43,.85), rgba(8,13,27,.6)); border-color: var(--so-edge); }
.subnav { background: rgba(8,13,27,.82); backdrop-filter: blur(12px); border-bottom-color: var(--so-edge); }
.tabs { background: rgba(14,23,43,.8); border-color: var(--so-edge); }
.cta-band { background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(234,111,152,.16), transparent 60%), radial-gradient(ellipse 70% 120% at 50% 100%, rgba(40,62,140,.45), transparent 70%), #080e1e; border-color: var(--so-edge); }
.site-footer { background: #050912; border-top-color: var(--so-edge); }
.frame, .showcase .frame, .shot-frame { border-color: var(--so-edge); }
.frame { background: var(--md-surface); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(150,170,230,.06); }
.btn-outline, .hero2 .hero-actions .btn-outline { color: var(--md-text); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.03); }
.stat b { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: rgba(234,111,152,.4); }

/* the banners' waveform under the first screen of the product pages */
.page-hero::after { content: ''; display: block; height: 46px; margin-top: 46px; opacity: .7; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ffd27a' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23f7a46c'/%3E%3Cstop offset='.6' stop-color='%23ea6f98'/%3E%3Cstop offset='.85' stop-color='%238f9cf0'/%3E%3Cstop offset='1' stop-color='%238f9cf0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23w)' stroke-width='1.3' vector-effect='non-scaling-stroke' d='M0 23 H420 l6 -3 6 5 6 -8 6 12 6 -15 6 18 6 -10 6 4 6 -19 6 26 6 -14 6 7 6 -21 6 30 6 -18 6 9 6 -12 6 6 6 -4 6 3 H700 l6 -2 6 4 6 -6 6 9 6 -11 6 13 6 -7 6 3 6 -2 H1200'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }