:root {
  --navy: #07162f;
  --blue: #0b5bd3;
  --blue-light: #eaf2ff;
  --text: #132238;
  --muted: #5f6f86;
  --card: #ffffff;
  --border: #dbe6f4;
  --bg: #f6f9fd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  background: rgba(7, 22, 47, 0.96);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
}

.nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand:hover { text-decoration: none; }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0b5bd3, #68a7ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.nav-links a { color: #dce9ff; font-weight: 600; }

.hero {
  background: radial-gradient(circle at top left, #1a73e8 0, #07162f 45%, #061123 100%);
  color: #fff;
  padding: 90px 22px;
}

.hero-content, .section, .page {
  max-width: 1100px;
  margin: 0 auto;
}

.hero-content { max-width: 900px; }

.eyebrow {
  color: #4f8eef;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  margin: 0 0 10px;
}

.hero .eyebrow { color: #a9cfff; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; }
h1 { font-size: clamp(2.25rem, 6vw, 4.8rem); letter-spacing: -0.05em; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.035em; }
h3 { font-size: 1.7rem; }

.hero-text {
  color: #dbe9ff;
  font-size: 1.25rem;
  max-width: 680px;
}

.hero-actions, .card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  border: 1px solid transparent;
}

.button:hover { text-decoration: none; }
.button.primary { background: var(--blue); color: #fff; }
.button.secondary { background: #fff; color: var(--navy); border-color: var(--border); }
.hero .button.secondary { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }

.section { padding: 70px 22px; }
.section-heading { margin-bottom: 26px; }

.app-card, .content-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(20, 48, 90, 0.08);
  margin-bottom: 22px;
}

.app-card.featured {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 26px;
  align-items: center;
}

.app-label {
  color: var(--blue);
  font-weight: 800;
  margin: 0 0 6px;
}

.feature-list {
  padding-left: 20px;
  margin: 18px 0;
}

.feature-list li { margin: 8px 0; }
.muted { color: var(--muted); }

.phone-preview {
  min-height: 340px;
  border-radius: 34px;
  background: linear-gradient(135deg, #081a35, #0b5bd3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}


.app-preview-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  border-radius: 24px;
}

.phone-screen {
  width: min(240px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 34px;
  background: #f7fbff;
  border: 8px solid #061123;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}

.phone-screen span {
  color: var(--blue);
  font-weight: 900;
  font-size: 2.3rem;
}

.phone-screen strong { font-size: 1.5rem; line-height: 1.1; }
.phone-screen small { color: var(--muted); font-weight: 700; }

.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.page { padding: 60px 22px; }
.page-header { margin-bottom: 26px; max-width: 760px; }
.legal h2 { margin-top: 26px; font-size: 1.35rem; }
.legal h2:first-child { margin-top: 0; }

.footer {
  background: var(--navy);
  color: #dbe9ff;
  text-align: center;
  padding: 30px 22px;
}
.footer a { color: #fff; font-weight: 700; }

@media (max-width: 780px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .nav-links { gap: 12px; }
  .hero { padding: 70px 22px; }
  .app-card.featured { grid-template-columns: 1fr; }
  .phone-preview { min-height: 260px; }
  .split { align-items: flex-start; flex-direction: column; }
}

/* Beta page — matches the polished NB App Studio design system */
.beta-hero {
  background: radial-gradient(circle at top left, #1a73e8 0, #07162f 48%, #061123 100%);
  color: #fff;
  padding: 76px 22px 68px;
}

.beta-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.beta-hero h1 {
  max-width: 880px;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
}

.beta-hero .hero-text {
  margin-bottom: 0;
}

.beta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.beta-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #eaf3ff;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
  font-size: .92rem;
}

.beta-page {
  padding-top: 52px;
}

.beta-layout {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 24px;
  align-items: start;
}

.beta-info-card,
.beta-form-card {
  margin-bottom: 0;
}

.beta-info-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(20, 48, 90, .08);
  position: sticky;
  top: 96px;
}

.compact-list {
  margin-bottom: 20px;
}

.small-note {
  font-size: .96rem;
}

.form-intro {
  margin-top: -4px;
  margin-bottom: 24px;
}

.beta-form {
  display: grid;
  gap: 20px;
}

.form-grid.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field > span,
.form-group legend {
  color: var(--text);
  font-weight: 800;
  font-size: .97rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  border: 1px solid #cfdceb;
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  line-height: 1.35;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #4387eb;
  box-shadow: 0 0 0 4px rgba(67,135,235,.13);
}

.form-group {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: #f9fbfe;
  min-width: 0;
}

.form-group legend {
  padding: 0 8px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.check-grid label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.check-grid input,
.agreement input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.check-grid span {
  min-width: 0;
}

.check-grid small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.featured-choice {
  border-color: #a8c8f7 !important;
  background: #f1f7ff !important;
}

.agreement {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  border-radius: 16px;
  background: var(--blue-light);
  color: var(--text);
  font-weight: 650;
}

.beta-submit {
  border: 0;
  cursor: pointer;
  min-height: 52px;
  font-size: 1rem;
}

.form-help {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 820px) {
  .beta-layout {
    grid-template-columns: 1fr;
  }

  .beta-info-card {
    position: static;
  }
}

@media (max-width: 620px) {
  .beta-hero {
    padding: 58px 20px 52px;
  }

  .beta-page {
    padding: 34px 16px 52px;
  }

  .beta-info-card,
  .beta-form-card {
    padding: 22px;
    border-radius: 22px;
  }

  .form-grid.two-col,
  .check-grid {
    grid-template-columns: 1fr;
  }

  .field > span,
  .form-group legend {
    font-size: .95rem;
  }

  .nav {
    padding: 14px 18px;
  }

  .nav-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, auto);
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-links a {
    white-space: nowrap;
  }
}

/* 2026 portfolio refresh */
.hero-v2 { padding: 82px 22px 74px; overflow: hidden; }
.hero-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(340px,.88fr); gap: 48px; align-items: center; }
.hero-v2 h1 span { background: linear-gradient(90deg,#7cc0ff,#8c9eff,#d2a5ff); -webkit-background-clip:text; background-clip:text; color: transparent; }
.platform-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.platform-row span { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#dceaff; border-radius:999px; padding:7px 11px; font-size:.82rem; font-weight:700; }
.hero-orbit { min-height:420px; position:relative; display:grid; place-items:center; }
.orbit-glow { position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(82,147,255,.38),rgba(112,86,255,.12) 45%,transparent 72%); filter:blur(8px); }
.orbit-card { position:absolute; width:175px; height:175px; border-radius:38px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; box-shadow:0 28px 70px rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); }
.orbit-card b { font-size:2.5rem; letter-spacing:-.08em; }.orbit-card small{font-weight:800;color:#d9e7ff}
.orbit-a { transform:translate(-96px,-74px) rotate(-8deg); background:linear-gradient(145deg,#1368d8,#071c42); }
.orbit-b { transform:translate(98px,-14px) rotate(7deg); background:linear-gradient(145deg,#365eff,#6e3ee8); }
.orbit-c { transform:translate(-8px,108px) rotate(-2deg); background:linear-gradient(145deg,#091426,#203a65); }
.wide-heading { display:grid; grid-template-columns:1fr .75fr; gap:40px; align-items:end; }.wide-heading>p{color:var(--muted);font-size:1.08rem;margin:0 0 10px}
.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.product-card { background:#fff; border:1px solid var(--border); border-radius:30px; box-shadow:0 18px 55px rgba(20,48,90,.08); overflow:hidden; }
.product-featured { grid-column:1/-1; display:grid; grid-template-columns:1.06fr .94fr; min-height:480px; }
.product-copy { padding:42px; display:flex; flex-direction:column; justify-content:center; }
.product-card h3 { font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.04em; margin-top:14px; }.compact-product h3{font-size:2rem}
.product-card p { color:var(--muted); font-size:1.05rem; }.product-visual{min-height:430px;padding:28px;display:grid;place-items:center;position:relative;overflow:hidden}
.product-visual img{width:100%;height:100%;max-height:500px;object-fit:contain;border-radius:26px;box-shadow:0 28px 65px rgba(4,20,47,.24)}
.kjv-visual{background:linear-gradient(145deg,#07162f,#0d5fd8)}.mockup-visual{background:linear-gradient(145deg,#edf3ff,#eee7ff)}
.status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.status,.category{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:.77rem;font-weight:850;letter-spacing:.03em}.category{background:#f0f4fa;color:#506176}.status.live{background:#e6f8ee;color:#157846}.status.beta{background:#eaf2ff;color:#145fc8}.status.build{background:#fff3e7;color:#a75400}
.mini-features{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.mini-features span{background:#f4f7fb;border:1px solid #e6edf6;color:#506176;border-radius:999px;padding:6px 10px;font-size:.83rem;font-weight:700}
.text-link{font-weight:800;align-self:center}.compact-product{padding:32px}.app-symbol{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-weight:900;font-size:1.55rem;margin:18px 0;background:#eaf2ff;color:#0b5bd3}.reel-symbol{background:#e9edff;color:#5040df}.focus-symbol{background:#e7f7ee;color:#22a760}.church-symbol{background:#eef0ff;color:#4b55c8}.socks-symbol{background:#fff0e7;color:#dd6c19}
.studio-band{padding-top:30px}.studio-panel{background:linear-gradient(145deg,#07162f,#0b2858);border-radius:34px;color:#fff;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:44px;box-shadow:0 28px 70px rgba(7,22,47,.18)}.studio-panel p{color:#c9dcf8}.principles{display:grid;gap:14px}.principles div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px}.principles strong{display:block;font-size:1.1rem}.principles span{color:#c9dcf8;font-size:.95rem}
.beta-cta{display:flex;align-items:center;justify-content:space-between;gap:26px}.beta-cta>div{max-width:760px}.footer-v2{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start;text-align:left;max-width:none;padding:42px max(22px,calc((100vw - 1100px)/2));}.footer-v2 .brand{display:inline-flex}.footer-v2 p{margin:10px 0;color:#bcd0ec}.footer-links{display:flex;gap:15px;flex-wrap:wrap}.copyright{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px!important;font-size:.9rem}
@media(max-width:850px){.hero-grid,.product-featured,.wide-heading,.studio-panel{grid-template-columns:1fr}.hero-orbit{min-height:330px}.orbit-card{width:145px;height:145px}.orbit-a{transform:translate(-75px,-55px) rotate(-8deg)}.orbit-b{transform:translate(75px,-4px) rotate(7deg)}.orbit-c{transform:translate(-4px,90px)}.app-grid{grid-template-columns:1fr}.product-featured{grid-column:auto}.product-copy{padding:30px}.product-visual{min-height:300px}.beta-cta{align-items:flex-start;flex-direction:column}.footer-v2{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.copyright{grid-column:auto}}
@media(max-width:520px){.hero-v2{padding-top:58px}.hero-orbit{min-height:285px}.orbit-card{width:125px;height:125px;border-radius:28px}.orbit-card b{font-size:2rem}.orbit-card small{font-size:.7rem}.product-card{border-radius:24px}.compact-product{padding:26px}.studio-panel{padding:30px}}
.legal-page{max-width:1000px}.legal-hero{background:linear-gradient(145deg,#eef5ff,#f5f0ff);border:1px solid var(--border);border-radius:30px;padding:36px;margin-bottom:26px}.legal-hero h1{font-size:clamp(2.2rem,6vw,4rem)}.legal-hero>p{color:var(--muted);font-size:1.1rem;max-width:720px}.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.legal-meta span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 11px;font-weight:700;color:#53657e;font-size:.84rem}.legal p{color:#45566d}.legal h2{padding-top:4px}.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}.support-grid .content-card{margin:0}.support-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#eaf2ff;color:#0b5bd3;font-weight:900;margin-bottom:15px}.support-grid h2{font-size:1.35rem}.support-grid p{color:var(--muted)}.support-note{background:linear-gradient(145deg,#fff,#f7faff)}@media(max-width:700px){.support-grid{grid-template-columns:1fr}.legal-hero{padding:28px 24px}}

/* Daily Focus featured product */
.daily-focus-featured .product-copy{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}
.focus-visual{background:radial-gradient(circle at 72% 24%,rgba(117,159,255,.34),transparent 34%),linear-gradient(145deg,#102241 0%,#173d76 48%,#235bb6 100%)}
.focus-preview-shell{width:min(330px,88%);background:#f8fbff;border-radius:34px;padding:22px;box-shadow:0 26px 70px rgba(2,14,35,.34);border:1px solid rgba(255,255,255,.56);transform:rotate(-1.2deg)}
.focus-preview-header{display:flex;align-items:center;gap:12px;color:#11233f;margin-bottom:16px}
.focus-preview-header div{display:grid;gap:2px}.focus-preview-header strong{font-size:1.02rem}.focus-preview-header small{font-size:.69rem;color:#73819a}
.focus-preview-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#4d8dff,#315dc8);color:white;font-size:1.2rem;font-weight:800;box-shadow:0 8px 20px rgba(49,93,200,.26)}
.focus-encouragement{display:grid;gap:7px;padding:16px;border-radius:20px;background:linear-gradient(145deg,#eef5ff,#f6f1ff);color:#18304f;border:1px solid #dce8fa}
.focus-encouragement small{font-size:.6rem;letter-spacing:.12em;color:#6d7f98;font-weight:800}.focus-encouragement strong{font-size:.86rem;line-height:1.35}.focus-encouragement span{font-size:.66rem;color:#718098}
.focus-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.focus-preview-card{background:#fff;border:1px solid #e3ebf6;border-radius:18px;padding:13px;display:grid;gap:2px;color:#142a48}.focus-preview-card small{font-size:.56rem;letter-spacing:.1em;color:#7e8da3;font-weight:800}.focus-preview-card b{font-size:1.35rem}.focus-preview-card span{font-size:.63rem;color:#78869b}
.focus-preview-list{display:grid;gap:8px}.focus-preview-list>div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5ecf5;border-radius:16px;padding:10px 12px;color:#1e3554}.focus-preview-list>div>span{width:28px;height:28px;border-radius:9px;background:#edf4ff;display:grid;place-items:center;color:#3471db;font-weight:800}.focus-preview-list p{margin:0;display:grid;gap:1px}.focus-preview-list b{font-size:.72rem}.focus-preview-list small{font-size:.58rem;color:#8190a5}
@media(max-width:760px){.focus-preview-shell{width:min(300px,90%);padding:18px;border-radius:28px}.focus-visual{min-height:390px}}