/* Ava Display - product site. Egosi OS brand palette. */

:root {
  --ink: #0D1B22;
  --teal-dark: #294555;
  --teal-mid: #4A8A99;
  --teal-soft: #E4EFF1;
  --rose: #CC6B97;
  --gold: #FFD700;
  --gold-deep: #C9A227;
  --cream: #F5F3EE;
  --light: #FAFAF7;
  --text: #22323B;
  --text-soft: #5A6C76;
  --line: #E2E0D9;
  --radius: 16px;

  /* Type scale. Every heading on every page comes from these, so a size is
     changed in one place and the whole site stays in proportion. */
  --fs-h1:   clamp(2.05rem, 4.4vw, 3.35rem);
  --fs-h2:   clamp(1.6rem, 3.0vw, 2.3rem);
  --fs-h3:   clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-h4:   1.05rem;
  --fs-lead: clamp(1.02rem, 1.5vw, 1.2rem);
  --fs-sub:  1.03rem;
  --fs-body: 0.97rem;
  --fs-small: 0.86rem;
  --lh-tight: 1.12;
  --ls-tight: -0.022em;
  --shadow: 0 18px 50px rgba(13, 27, 34, 0.10);
}

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

html {
  scroll-behavior: smooth;
  /* The page opens on a dark hero. Without this the browser paints a light
     scrollbar track against it, which reads as a white bar down the right. */
  color-scheme: dark;
  scrollbar-color: rgba(255,255,255,0.28) var(--ink);
  scrollbar-width: thin;
  background: var(--ink);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.24);
  border-radius: 999px;
  border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.38); }
/* colour-scheme dark would otherwise darken the light sections' inputs */
input, select, textarea { color-scheme: light; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--light);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1120px, 92vw); margin: 0 auto; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 27, 34, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-inner { display: flex; align-items: center; gap: 2rem; padding: 0.85rem 0; }
.nav-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.nav-brand img { height: 30px; width: auto; display: block; }
.nav-brand span { color: #fff; font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { color: rgba(255,255,255,0.82); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav-cta {
  background: var(--gold); color: var(--ink) !important; font-weight: 700 !important;
  padding: 0.55rem 1.15rem; border-radius: 999px; font-size: 0.88rem !important;
}

/* ---------- hero ---------- */
.hero {
  background: radial-gradient(1100px 520px at 20% -10%, rgba(74,138,153,0.30), transparent 60%),
              radial-gradient(900px 480px at 88% 8%, rgba(204,107,151,0.18), transparent 60%),
              var(--ink);
  color: #fff; padding: 5.5rem 0 5rem; position: relative; overflow: hidden;
}
.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem;
}
h1, .h1 {
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); font-weight: 800; max-width: 18ch;
}
.hero h1 { max-width: 17ch; }
.hero p.lead {
  margin-top: 1.35rem; font-size: var(--fs-lead);
  color: rgba(255,255,255,0.80); max-width: 60ch;
}
.hero-actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.btn {
  display: inline-block; padding: 0.85rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 10px 30px rgba(255,215,0,0.22); }
.btn-ghost { border-color: rgba(255,255,255,0.34); color: #fff; }
.price-strip {
  margin-top: 2.6rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 0.7rem 1.5rem;
}
.price-strip b { color: #fff; font-size: 1.05rem; }
.price-strip span { color: rgba(255,255,255,0.68); font-size: 0.86rem; }
.price-strip .sep { width: 1px; height: 22px; background: rgba(255,255,255,0.18); }

/* ---------- sections ---------- */
section { padding: 4.6rem 0; }
.sec-light { background: var(--light); }
.sec-cream { background: var(--cream); }
.sec-dark { background: var(--ink); color: #fff; }
.sec-teal { background: linear-gradient(150deg, var(--teal-dark), #1B3441); color: #fff; }

.kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-mid); margin-bottom: 0.8rem;
}
.sec-dark .kicker, .sec-teal .kicker { color: var(--gold); }
h2, h2.title {
  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: var(--ls-tight);
  font-weight: 800; max-width: 22ch;
}
.sub {
  margin-top: 1rem; font-size: var(--fs-sub); color: var(--text-soft); max-width: 62ch;
}
.sec-dark .sub, .sec-teal .sub { color: rgba(255,255,255,0.76); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.4rem; margin-top: 2.6rem; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.6rem; box-shadow: var(--shadow);
}
.card h3 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.55rem; }
.card p { color: var(--text-soft); font-size: var(--fs-body); }
.card .num {
  font-size: 2rem; font-weight: 800; color: var(--teal-dark);
  letter-spacing: -0.02em; line-height: 1;
}
.sec-dark .card, .sec-teal .card {
  background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.13); box-shadow: none;
}
.sec-dark .card h3, .sec-teal .card h3 { color: #fff; }
.sec-dark .card p, .sec-teal .card p { color: rgba(255,255,255,0.74); }

/* ---------- calculator ---------- */
.calc {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 2.2rem; box-shadow: var(--shadow); margin-top: 2.6rem;
}
.calc-inputs { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 0.45rem; }
.field .hint { font-weight: 400; color: var(--text-soft); }
.field input {
  width: 100%; padding: 0.8rem 0.95rem; font-size: 1.05rem; font-family: inherit;
  border: 1px solid var(--line); border-radius: 11px; background: var(--light); color: var(--text);
}
.field input:focus { outline: 2px solid var(--teal-mid); outline-offset: 1px; }
.calc-out {
  margin-top: 1.9rem; padding-top: 1.7rem; border-top: 1px solid var(--line);
  display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.out-item .out-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.out-item .out-val { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 0.3rem; }
.out-item .out-note { font-size: 0.82rem; color: var(--text-soft); }
.out-save .out-val { color: #1F7A5C; }
.calc-foot { margin-top: 1.5rem; font-size: 0.84rem; color: var(--text-soft); }

/* ---------- pricing table ---------- */
.ptable { margin-top: 2.4rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.prow { display: grid; grid-template-columns: 2.4fr 1fr; gap: 1rem; padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line); align-items: center; }
.prow:last-child { border-bottom: 0; }
.prow.head { background: var(--cream); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-soft); }
.prow .pname { font-weight: 700; }
.prow .pname small { display: block; font-weight: 400; color: var(--text-soft); font-size: 0.85rem; margin-top: 0.15rem; }
.prow .pprice { font-weight: 800; font-size: 1.05rem; color: var(--teal-dark); }

/* ---------- lists ---------- */
.checks { margin-top: 1.8rem; display: grid; gap: 0.9rem; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; }
.check .dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 3px;
  background: rgba(74,138,153,0.16); color: var(--teal-dark);
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 800;
}
.sec-dark .check .dot, .sec-teal .check .dot { background: rgba(255,215,0,0.18); color: var(--gold); }
.check p { font-size: 0.97rem; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: rgba(255,255,255,0.66); padding: 3rem 0 2.4rem; font-size: 0.88rem; }
.foot a { color: rgba(255,255,255,0.82); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-top { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-left: auto; }
.foot-legal { margin-top: 1.9rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.10); font-size: 0.82rem; line-height: 1.8; }

/* ---------- reveal ---------- */
/* Reveal-on-scroll. Scoped to html.js, which is set by an inline script in
   the head, so content is only ever hidden when the script that reveals it
   is actually running. Without this guard a missing or blocked main.js
   leaves every section permanently at opacity 0. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .prow { grid-template-columns: 1fr; gap: 0.35rem; }
  .prow.head { display: none; }
  section { padding: 3.4rem 0; }
}

/* ---------- shared chrome for the multi-page site ---------- */
.nav-links a.here { color: #fff; }
.nav-links a.here::after {
  content: ""; display: block; height: 2px; background: var(--gold);
  border-radius: 2px; margin-top: 4px;
}
.page-head {
  background: radial-gradient(900px 380px at 18% -20%, rgba(74,138,153,0.28), transparent 62%), var(--ink);
  color: #fff; padding: 3.6rem 0 3.2rem;
}
.page-head h1 { max-width: 22ch; }
.page-head p { margin-top: 1rem; font-size: var(--fs-lead); color: rgba(255,255,255,0.78); max-width: 62ch; }
.crumb { font-size: var(--fs-small); color: rgba(255,255,255,0.5); margin-bottom: 0.8rem; }
.crumb a { color: rgba(255,255,255,0.72); text-decoration: none; }
.crumb a:hover { color: #fff; }

/* cross-product band */
.xband {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 1.7rem 1.8rem; box-shadow: var(--shadow);
  display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
}
.xband p { color: var(--text-soft); font-size: var(--fs-body); max-width: 62ch; }
.xband .btn { flex: none; }
.sec-dark .xband, .sec-teal .xband {
  background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.13); box-shadow: none;
}
.sec-dark .xband p, .sec-teal .xband p { color: rgba(255,255,255,0.74); }

/* legal pages */
.legal { max-width: 74ch; }
.legal h2 { font-size: var(--fs-h3); margin: 2.2rem 0 0.6rem; max-width: none; }
.legal h2:first-of-type { margin-top: 0.5rem; }
.legal p, .legal li { font-size: var(--fs-body); color: var(--text); }
.legal p { margin-bottom: 0.9rem; }
.legal ul { margin: 0 0 1rem 1.1rem; }
.legal li { margin-bottom: 0.4rem; }
.legal .note {
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.4rem; margin: 1.4rem 0;
}
.legal .note p:last-child { margin-bottom: 0; }

/* footer columns */
.foot-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.6rem; margin: 2rem 0 0.5rem;
}
.foot-cols h5 {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); font-weight: 700; margin-bottom: 0.7rem;
}
.foot-cols a { display: block; margin-bottom: 0.45rem; font-size: var(--fs-small); }

/* comparison table: four columns, and readable on a phone */
.ptable .prow[style*="1.1fr"] > div { font-size: var(--fs-small); }
@media (max-width: 860px) {
  .ptable .prow[style*="1.1fr"] { grid-template-columns: 1fr !important; }
  .ptable .prow[style*="1.1fr"] .pname { font-weight: 800; margin-bottom: 0.2rem; }
}

/* The nav carries nine items once Schools is added. Keep the brand on one
   line and let the links tighten rather than wrap mid-label. */
.nav-brand span { white-space: nowrap; }
.nav-links a { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1200px) {
  .nav-links { gap: 1.05rem; }
  .nav-inner { gap: 1.2rem; }
}

/* ---------- phone width ----------
   See mockups.css: the root cause is min-width:auto on grid/flex children.
   These are the type and layout steps for a real phone (390px), which the
   sheet had no breakpoint for - the smallest was 700px. */
@media (max-width: 480px) {
  .wrap { width: 92vw; }
  .hero { padding: 3.2rem 0 2.8rem; }
  .hero h1 { max-width: none; }
  .hero p.lead { max-width: none; }
  .price-strip { border-radius: 18px; padding: 0.8rem 1.1rem; gap: 0.55rem 1rem; }
  .price-strip .sep { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .calc-inputs { grid-template-columns: 1fr; }
}

/* ---------- grouped nav + a menu that exists on a phone ----------
   The old nav was ten flat links and hid ALL of them below 760px with nothing
   in their place, so a phone visitor had navigation to exactly nowhere. */
.nav-group { position: relative; }
.nav-top, .nav-top-link {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: rgba(255,255,255,0.82); font-size: 0.9rem; font-weight: 500;
  text-decoration: none; padding: 0.35rem 0; display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-top:hover, .nav-top-link:hover, .nav-group.here .nav-top, .nav-top-link.here { color: #fff; }
.nav-caret { font-size: 0.62rem; opacity: 0.7; }
.nav-menu {
  position: absolute; top: calc(100% + 0.6rem); left: -0.9rem; min-width: 232px;
  background: #12232b; border: 1px solid rgba(74,138,153,0.34); border-radius: 12px;
  padding: 0.5rem; box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  display: none; z-index: 60;
}
.nav-group:hover .nav-menu, .nav-group.open .nav-menu { display: block; }
.nav-menu a {
  display: block; padding: 0.5rem 0.7rem; border-radius: 8px;
  color: rgba(255,255,255,0.84); text-decoration: none; font-size: 0.9rem; white-space: nowrap;
}
.nav-menu a:hover { background: rgba(74,138,153,0.22); color: #fff; }
.nav-menu a.here { color: var(--gold); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; }

@media (max-width: 860px) {
  .nav-burger { display: block; order: 3; }
  .nav-inner { flex-wrap: wrap; gap: 0.8rem; }
  .nav-links {
    display: none; order: 4; width: 100%; flex-direction: column;
    align-items: stretch; gap: 0.2rem; padding: 0.6rem 0 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.nav-cta) { display: block; }
  .nav-group { width: 100%; }
  .nav-top { width: 100%; justify-content: space-between; padding: 0.6rem 0; font-weight: 600; }
  .nav-menu {
    position: static; display: block; min-width: 0; border: 0; box-shadow: none;
    background: none; padding: 0 0 0.4rem 0.7rem;
  }
  .nav-cta { margin-top: 0.7rem; text-align: center; }
}

/* ---------- nav dropdown: close the hover gap ----------
   The menu is offset 0.6rem below the button for looks, which left a dead strip
   the pointer crosses on the way down. Hover was lost there and the menu shut
   before it could be clicked. A transparent bridge makes the hover area
   continuous without changing the spacing. */
.nav-group::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.9rem;
  display: none;
}
.nav-group:hover::after, .nav-group.open::after { display: block; }
/* keep it open while the pointer is anywhere in the group or the menu */
.nav-menu:hover { display: block; }
@media (max-width: 860px) { .nav-group::after { display: none !important; } }