/* ==========================================================================
   Odrasoft product-site design system
   --------------------------------------------------------------------------
   One stylesheet shared by every product page. A page picks its identity by
   overriding the five accent tokens in its own <style> block; everything else
   — type scale, spacing, section rhythm, components — comes from here.

       :root {
         --accent:       #3677D6;   /* primary brand colour            */
         --accent-light: #5A9BE8;   /* hover / highlight variant       */
         --deep:         #0D1F3C;   /* dark section + hero base        */
         --deep-mid:     #152B50;   /* dark section gradient partner   */
         --tint:         #F0F6FF;   /* light section wash              */
       }

   Derived from the GloBeen page, which is the reference layout.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Product identity — override these per page. Defaults are Odrasoft blue. */
  --accent:       #3677D6;
  --accent-light: #5A9BE8;
  --deep:         #0D1F3C;
  --deep-mid:     #152B50;
  --tint:         #F0F6FF;

  /* Neutrals — shared across every product. */
  --text-dark:  #12161C;
  --text-mid:   #3A4552;
  --text-muted: #63707F;
  --white:      #FFFFFF;
  --line:       rgba(18,22,28,0.08);

  /* On-dark neutrals, so dark sections never hard-code rgba() by hand. */
  --on-dark:        rgba(255,255,255,0.92);
  --on-dark-mid:    rgba(255,255,255,0.62);
  --on-dark-muted:  rgba(255,255,255,0.42);
  --on-dark-faint:  rgba(255,255,255,0.26);
  --on-dark-line:   rgba(255,255,255,0.10);
  --on-dark-panel:  rgba(255,255,255,0.06);

  --radius-lg: 22px;
  --radius-md: 14px;
  --shell: 1140px;
}

html {
  scroll-behavior: smooth;
  /* Fixed nav is 64px; anchors shouldn't hide underneath it. */
  scroll-padding-top: 84px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background: var(--white);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

img, video { max-width: 100%; }

/* Visible keyboard focus everywhere, since almost everything here is a link. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── NAV ─────────────────────────────────────────────────────────────────── */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 40px;
  height: 64px;
  background: var(--deep); /* fallback where color-mix() is unsupported */
  background: color-mix(in srgb, var(--deep) 74%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--on-dark-line);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  /* No gap here. A wordmark that contains markup — Glo<span>Been</span> — is
     split into separate anonymous flex items, and a gap would open up inside
     the product name. The icon gets a margin instead. */
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo img { width: 28px; height: 28px; border-radius: 7px; display: block; margin-right: 10px; }
.nav-logo .accent { color: var(--accent-light); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--on-dark-mid);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  background: var(--accent);
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--accent-light) !important; }

/* ── LIGHT TOP (opt-in) ───────────────────────────────────────────────────
   Put class="light-top" on <body> to flip the nav and hero to a light
   treatment. Everything below the hero is untouched, so the page still gets
   its rhythm from the tinted sections, the dark CTA banner and the footer.
   Remember to swap any white-on-dark logo for its dark twin when using this. */

body.light-top nav {
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid var(--line);
}
body.light-top .nav-logo { color: var(--text-dark); }
body.light-top .nav-logo .accent { color: var(--accent); }
body.light-top .nav-links a { color: var(--text-mid); }
body.light-top .nav-links a:hover { color: var(--text-dark); }
body.light-top .nav-cta { background: var(--accent); color: var(--white) !important; }
body.light-top .nav-cta:hover { background: var(--accent-light) !important; }

body.light-top .hero { background: var(--white); }
/* A soft accent wash where the dark hero had its glow. */
body.light-top .hero::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 12%, color-mix(in srgb, var(--accent-light) 10%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 12% 82%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 65%);
}
body.light-top .hero::after {
  background-image: radial-gradient(rgba(18,22,28,0.075) 1px, transparent 1px);
  opacity: 0.5;
}
body.light-top .hero h1 { color: var(--text-dark); }
body.light-top .hero h1 .accent { color: var(--accent); }
body.light-top .hero-tagline { color: var(--text-mid); }
body.light-top .hero-desc { color: var(--text-muted); }
body.light-top .hero-badge {
  background: var(--white);
  border-color: var(--line);
  color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(18,22,28,0.07);
}
body.light-top .btn-ghost {
  background: var(--white);
  border-color: var(--line);
  color: var(--text-dark);
}
body.light-top .btn-ghost:hover { background: var(--tint); }
body.light-top .stat-num { color: var(--text-dark); }
body.light-top .stat-label { color: var(--text-muted); }
body.light-top .stat-divider { background: var(--line); }
body.light-top .hero-media {
  box-shadow: 0 0 0 1px var(--line), 0 28px 64px rgba(18,22,28,0.16);
}

/* ── HERO ────────────────────────────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-mid) 45%, var(--deep) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 128px 24px 80px;
  position: relative;
  overflow: hidden;
}
/* Accent glow. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 82% 18%, color-mix(in srgb, var(--accent-light) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 18% 82%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
/* Dot grid. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 820px; width: 100%; }

.hero-icon {
  width: 92px;
  height: 92px;
  border-radius: 21px;
  margin: 0 auto 26px;
  display: block;
  box-shadow: 0 18px 44px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.10);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--on-dark-panel);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85rem;
  color: var(--on-dark-mid);
  margin-bottom: 26px;
  letter-spacing: 0.3px;
}
.hero-badge-dot {
  width: 7px; height: 7px;
  background: #4ADE80;
  border-radius: 50%;
  box-shadow: 0 0 6px #4ADE80;
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.02;
  color: var(--white);
  margin-bottom: 18px;
}
.hero h1 .accent { color: var(--accent-light); }

.hero-tagline {
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 600;
  color: var(--on-dark-mid);
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}
.hero-desc {
  font-size: 1.06rem;
  color: var(--on-dark-mid);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 40px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--white);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 52%, transparent);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--on-dark-panel);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--on-dark);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }

/* App Store badge. */
.appstore-btn {
  display: inline-block;
  transition: transform 0.2s, opacity 0.2s;
}
.appstore-btn:hover { transform: translateY(-2px); opacity: 0.9; }
.appstore-btn img { height: 54px; width: auto; display: block; }

/* ── HERO STATS ──────────────────────────────────────────────────────────── */

.hero-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.stat { text-align: center; }
.stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--on-dark-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-divider { width: 1px; background: rgba(255,255,255,0.12); align-self: stretch; }

/* ── HERO MEDIA (video or wide screenshot under the fold of the hero) ────── */

.hero-media {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 32px 80px rgba(0,0,0,0.5);
  background: #000;
}
.hero-media video, .hero-media img { width: 100%; display: block; }

/* ── SCREENSHOT STRIPS ───────────────────────────────────────────────────── */

.screenshots {
  background: var(--deep);
  padding: 84px 24px;
  overflow: hidden;
}
.screenshots-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Portrait — iOS. */
.phone-frame {
  width: 200px;
  flex-shrink: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 24px 60px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}
.phone-frame:hover { transform: translateY(-8px) scale(1.02); }
.phone-frame img { width: 100%; display: block; }
/* Landscape — macOS. */
.mac-frame {
  width: 420px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 24px 60px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}
.mac-frame:hover { transform: translateY(-8px) scale(1.02); }
.mac-frame img { width: 100%; display: block; }

/* ── SECTION SCAFFOLDING ─────────────────────────────────────────────────── */

.section-label {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}
.section-header h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -1.4px;
  color: var(--text-dark);
  line-height: 1.12;
  margin-bottom: 16px;
}
.section-header p {
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.section-light { background: var(--tint); padding: 96px 24px; }
.section-plain { background: var(--white); padding: 96px 24px; }

/* ── FEATURE BENTO ───────────────────────────────────────────────────────── */

.bento {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bento-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(18,22,28,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 16%, transparent);
}
.bento-card.wide { grid-column: span 2; }
.bento-img {
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 340px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.bento-img.landscape { aspect-ratio: 16/10; max-height: 280px; object-position: center; }
/* Portrait phone screenshots. A 9/16 source squeezed into a short box crops to a
   useless horizontal sliver, so give it a taller, squarer box and bias the crop
   past any caption art printed along the top. */
.bento-img.phone {
  aspect-ratio: 3/4;
  max-height: 400px;
  object-position: center 30%;
}
.bento-media { width: 100%; display: block; background: #000; }
.bento-body { padding: 22px 24px 24px; flex: 1; }
.bento-icon { font-size: 1.55rem; margin-bottom: 10px; display: block; line-height: 1; }
.bento-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.bento-desc { font-size: 0.94rem; color: var(--text-muted); line-height: 1.62; }

/* A "Pro" marker for features behind a purchase. */
.pro-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0,0,0,0.04); /* fallback where color-mix() is unsupported */
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 5px;
  padding: 2px 6px;
  line-height: 1.4;
}

/* ── HOW IT WORKS ────────────────────────────────────────────────────────── */

.steps {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}
.step {
  background: var(--tint);
  border-radius: 20px;
  padding: 32px 24px;
}
.section-light .step { background: var(--white); }
.step-num {
  width: 36px; height: 36px;
  background: var(--deep);
  color: var(--white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 18px;
}
.step-num.emoji {
  background: transparent;
  width: auto;
  height: auto;
  font-size: 2rem;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.03rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.step p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }

/* ── SPEC / REQUIREMENTS PANEL ───────────────────────────────────────────── */

.spec-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.spec-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
}
.section-light .spec-card { border-color: transparent; }
.spec-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spec-card ul { list-style: none; }
.spec-card li {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
  margin-bottom: 9px;
}
.spec-card li:last-child { margin-bottom: 0; }
.spec-card li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── PRICING ─────────────────────────────────────────────────────────────── */

.price-grid {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 16%, transparent);
  position: relative;
}
.price-card.featured::after {
  content: 'Best value';
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.price-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.price-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -1.5px;
  line-height: 1;
}
.price-period { font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; }
.price-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 16px;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq summary {
  font-size: 1.03rem;
  font-weight: 650;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  font-size: 0.97rem;
  color: var(--text-muted);
  line-height: 1.72;
  margin-top: 14px;
  max-width: 68ch;
}

/* ── CTA BANNER ──────────────────────────────────────────────────────────── */

.cta-section {
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep-mid) 100%);
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.cta-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.cta-section h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -1.4px;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.12;
}
.cta-section p {
  font-size: 1.08rem;
  color: var(--on-dark-mid);
  line-height: 1.7;
  margin-bottom: 38px;
}
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */

footer {
  background: var(--deep);
  border-top: 1px solid var(--on-dark-line);
  padding: 56px 40px 40px;
}
.footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.footer-brand h3 .accent { color: var(--accent-light); }
.footer-brand p {
  font-size: 0.9rem;
  color: var(--on-dark-muted);
  line-height: 1.7;
  max-width: 280px;
}
.footer-col h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.91rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 0.82rem; color: var(--on-dark-faint); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  nav { padding: 0 20px; gap: 12px; }
  .nav-links { gap: 18px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.wide { grid-column: span 2; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* Below this the nav can't hold links and a button; keep the button. */
  .nav-links a:not(.nav-cta) { display: none; }
  .section-light, .section-plain { padding: 72px 20px; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.wide { grid-column: span 1; }
  .bento-img { aspect-ratio: 16/10; max-height: 260px; object-position: center; }
  .bento-img.phone { aspect-ratio: 3/4; max-height: 380px; object-position: center 30%; }
  .hero-stats { gap: 22px; }
  .stat-divider { display: none; }
  .phone-frame { width: 148px; }
  .mac-frame { width: 100%; max-width: 420px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  footer { padding: 48px 22px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}