/* ===== OLY.AI brand tokens, from oly.ai ===== */
:root {
  --navy: #213975;
  --navy-deep: #1a2d5e;
  --purple: #7b3e8f;
  /* Brand green, sampled from the live oly.ai site, used there for the referral
     promo banner and the feature checkmark circles. */
  --green: #01713d;
  --green-tint: #cdf3de;
  --accent: #3662d0;        /* text on light: 5.50 on white, 4.88 on --bg-hero-1 */
  --accent-on-dark: #9db4ea; /* text on the navy bands: 5.32 on --navy */
  --ink: #333333;
  --muted: #5a6478;
  --bg-hero-1: #eef1fb;
  --bg-hero-2: #c9d4f0;
  --band: #213975;
  --card: #ffffff;
  --line: #e2e7f3;
  --gold: #f5a623;
  --radius: 12px;
  --font-body: "Open Sans", Arial, sans-serif;
  --font-round: "Varela Round", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--ink); background: #fff; }
/* height:auto stops HTML width/height attrs (kept for CLS) fighting width-only
   layout rules below, without it the browser pins height to the attribute
   value and squishes width, distorting every sized image on the page. */
img { max-width: 100%; height: auto; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 780px; text-align: center; }

h1, h2 { font-family: var(--font-round); color: var(--navy); font-weight: 400; letter-spacing: 0.5px; }
h1 { font-size: clamp(32px, 4.5vw, 56px); line-height: 1.12; }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.25; margin-bottom: 18px; }
h2.center { text-align: center; margin-bottom: 40px; }
h2.light, .light { color: #fff; }
h3 { font-family: var(--font-round); color: var(--navy); font-size: 17px; margin-bottom: 6px; }
.light-sub { color: #c9d4f0; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: var(--purple); margin-bottom: 14px; text-transform: uppercase; }
.eyebrow.light { color: #9db4ea; }
/* ===== Buttons ===== */
.btn {
  display: inline-block; background: var(--navy); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  padding: 13px 28px; border-radius: 8px; transition: background .2s, transform .2s;
}
.btn:hover { background: var(--navy-deep); transform: translateY(-1px); }
.btn-sm { font-size: 12px; padding: 9px 20px; border-radius: 9px; }
.btn-lg { font-size: 15px; padding: 16px 34px; }
.btn-inverse { background: #fff; color: var(--navy); }
.btn-inverse:hover { background: var(--bg-hero-1); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ===== Nav ===== */
.nav-wrap { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 32px; height: 64px; }
.logo { font-family: var(--font-round); font-size: 22px; color: var(--navy); text-decoration: none; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.logo.light { color: #fff; }.logo-img { height: 26px; width: auto; }
/* Footer sits on dark navy, so it uses a white-knockout variant of the logo
   (logo.png has a baked-in white background and would show as a white box). */
.logo-img-footer { height: 30px; margin-bottom: 4px; }
.nav-links { display: flex; gap: 24px; flex: 1; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; }
.nav-links a:hover { color: var(--navy); }
.nav-cta { display: flex; gap: 10px; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.nav-burger span { width: 24px; height: 2px; background: var(--navy); display: block; }

.announce { background: var(--green); color: #fff; text-align: center; font-size: 12.5px; padding: 7px 16px; letter-spacing: .3px; }
.announce a { color: var(--green-tint); font-weight: 700; text-decoration: none; }
.announce a:hover { color: #fff; }

/* ===== Hero ===== */
.hero { background: linear-gradient(135deg, var(--bg-hero-1) 0%, var(--bg-hero-2) 100%); padding: 72px 0 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero h1 .accent { color: var(--accent); }
.hero-sub { margin: 22px 0 28px; font-size: 13.5px; letter-spacing: .5px; color: var(--muted); max-width: 440px; }
/* Hero visual (real product images) */
.hero-visual { position: relative; min-height: 380px; }
.hero-collage { position: absolute; top: -28px; right: 6%; width: 34%; min-width: 150px; z-index: 1; filter: drop-shadow(0 18px 34px rgba(33,57,117,.22)); }
.hero-laptop { position: relative; width: 92%; margin: 70px 0 0 0; border-radius: 10px; box-shadow: 0 30px 60px rgba(33,57,117,.22); }
.hero-card { position: absolute; border-radius: 12px; box-shadow: 0 18px 40px rgba(33,57,117,.2); z-index: 2; }
/* sits below the collage so it never covers the people in the photo */
.hero-card-spend { top: 46%; right: -18px; width: 44%; max-width: 230px; }
.hero-card-budget { bottom: 6%; left: -22px; width: 30%; max-width: 190px; }

/* ===== Dark band: search + partners ===== */
.dark-band { background: var(--band); padding: 56px 0; }.partners { margin-top: 48px; text-align: center; }
.partners-title { font-size: 12px; letter-spacing: 2.5px; color: #9db4ea; font-weight: 800; margin-bottom: 24px; }
.partner-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; }
.partner-chip { display: inline-flex; align-items: center; justify-content: center; height: 44px; opacity: .9; }
.partner-chip img { max-height: 26px; max-width: 130px; width: auto; height: auto; object-fit: contain; }
/* OpenAI's source asset shipped with ~83% transparent vertical padding, which made
   it render far smaller than the other wordmarks. The file is now cropped to its
   content, so it needs no special case. */

/* ===== Stats ===== */
.stats-section { padding: 88px 0 72px; background: linear-gradient(180deg, #fff 0%, var(--bg-hero-1) 100%); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat-num { font-family: var(--font-round); font-size: clamp(34px, 4vw, 52px); color: var(--navy); }
.stat-num.light { color: #fff; }
.stat-label { font-size: 13.5px; color: var(--muted); max-width: 220px; margin: 6px auto 0; }
.founder-quote { max-width: 760px; text-align: center; margin-top: 72px; }
.founder-quote blockquote { font-family: var(--font-round); font-size: clamp(18px, 2.2vw, 24px); color: var(--navy); line-height: 1.5; }
.founder-attrib { margin-top: 18px; font-weight: 700; color: var(--ink); }
.founder-past { font-size: 13px; color: var(--muted); margin-top: 4px; }.how-it-works-img { width: 100%; max-width: 900px; margin-top: 40px; border-radius: 14px; box-shadow: 0 24px 60px rgba(33,57,117,.14); }

/* ===== Platform ===== */
.platform-section { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); padding: 96px 0; }
.platform-section .light-sub { margin-bottom: 8px; }.platform-shot { width: 100%; max-width: 980px; display: block; margin: 56px auto 0; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }

/* ===== Features ===== */
.feature { padding: 96px 0; }
.feature-alt { background: var(--bg-hero-1); }
.feature-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.feature-copy p { color: var(--muted); margin-bottom: 18px; }
.checklist { list-style: none; margin: 8px 0 26px; }
.checklist li { padding-left: 30px; position: relative; margin-bottom: 12px; color: var(--muted); }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 10px 0 26px; }
.two-col p { font-size: 13.5px; margin: 0; }

/* Feature visuals (real product images) */
.badge-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(33,57,117,.14); padding: 48px; display: flex; align-items: center; justify-content: center; }
.badge-card img { width: 100%; max-width: 320px; }
/* Reused as a "sample report" note card (label + quote) on index/platform/pricing.
   Those are two stacked <p> tags, but the base rule above is flex-row for
   centering a single logo image. Without this, the label and quote sit side
   by side and collide. */
.badge-card.note { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.qb-ribbon { width: 100%; max-width: 220px; display: block; margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(33,57,117,.18)); }
.slack-shot { width: 100%; border-radius: 14px; box-shadow: 0 24px 60px rgba(33,57,117,.18); }

/* ===== Security ===== */
.security { background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%); padding: 96px 0; }
.security .shield {
  width: 58px; height: 58px; margin-bottom: 18px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
}
.security .shield svg { width: 32px; height: 32px; }
.security p { margin-bottom: 16px; }
.security .btn { margin-top: 10px; }
.security-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.security-visual { position: relative; }
.security-illustration { width: 100%; max-width: 460px; }
.security-chip { position: absolute; bottom: 8%; right: 6%; width: 44%; max-width: 190px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.3); }

/* ===== Pricing ===== */
.pricing { padding: 96px 0; background: var(--bg-hero-1); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px 30px; display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--navy); box-shadow: 0 24px 60px rgba(33,57,117,.16); transform: translateY(-8px); }
.plan-name { font-family: var(--font-round); font-size: 18px; color: var(--navy); }
.plan-price { margin: 12px 0 18px; }
.plan-price b { font-family: var(--font-round); font-size: 42px; color: var(--navy); font-weight: 400; }
.plan-price span { font-size: 12.5px; color: var(--muted); display: block; }
.plan-inc { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.price-card ul { list-style: none; flex: 1; margin-bottom: 26px; }
.price-card li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--muted); font-size: 14px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--navy); font-weight: 700; }
.price-card .btn { text-align: center; }.cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); padding: 96px 0; }
.cta h2 { color: #fff; }
.cta p { color: #c9d4f0; margin-bottom: 30px; }

/* ===== Footer ===== */
.footer { background: #16244a; color: #aab6d4; padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; }
.footer-brand p { font-size: 13.5px; margin: 16px 0 22px; }
.footer-col h4 { color: #fff; font-family: var(--font-round); font-weight: 400; margin-bottom: 16px; font-size: 15px; }
.footer-col a { display: block; color: #aab6d4; text-decoration: none; font-size: 13.5px; margin-bottom: 9px; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 13.5px; margin-top: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 24px; text-align: center; font-size: 12.5px; }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  /* .second-brain-grid is collapsed in v2.css instead; its base rule lives there,
     and v2.css loads after this file, so an override here loses the cascade. */
  .hero-grid, .feature-grid, .security-grid { grid-template-columns: 1fr; }
  .feature-grid.flip .feature-visual { order: 2; }
  .hero-visual { min-height: 420px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .price-card.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; margin-left: auto; }

  /* Open mobile menu: the nav itself wraps and grows. Previously the CTA row was
     absolutely positioned at a hardcoded top:280px, which overlapped the last
     nav link as soon as the menu gained a 5th item. Flow layout scales with any
     number of items. */
  body.nav-open .nav { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 0; padding-bottom: 20px; }
  body.nav-open .logo { order: 1; }
  body.nav-open .nav-burger { order: 2; }
  /* flex:0 0 100% (not width:100%): the base .nav-links rule sets flex:1, whose
     flex-basis:0 wins over width and stops the item wrapping to its own row. */
  body.nav-open .nav-links {
    order: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    flex: 0 0 100%; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line);
  }
  body.nav-open .nav-cta { order: 4; display: flex; gap: 10px; flex: 0 0 100%; margin-top: 18px; }

  /* Hero visual: the floating cards are absolutely positioned for the desktop
     collage. On mobile that scatters them (one drifted 90px below the laptop and
     off the left edge), so fall back to plain stacked flow. */
  .hero-visual { position: static; min-height: 0; display: flex; flex-wrap: wrap;
    justify-content: center; align-items: flex-start; gap: 12px; margin-top: 8px; }
  .hero-visual img { position: static; }
  .hero-collage { display: none; }
  .hero-laptop { flex: 0 0 100%; width: 100%; max-width: 360px; margin: 0; }
  .hero-card { flex: 0 1 46%; max-width: 170px; }
  .stats-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}