/* Navo marketing site. Hand-written, no framework. */
:root {
  --night: #0c1b1c;
  --night-2: #0f2426;
  --paper: #f5f1ea;
  --paper-2: #ede7dc;
  --card: #fffdf9;
  --ink: #152321;
  --ink-2: #33423f;
  --muted: #5d6865;
  --line: #d9d1c3;
  --line-2: #e6dfd3;
  --on-night: #eef3f1;
  --on-night-2: #b9cbc8;
  --on-night-3: #8fa8a4;
  --rule-night: rgba(214, 232, 229, .14);
  --teal: #206f78;
  --teal-deep: #164f56;
  --teal-ink: #0f3a3f;
  --teal-wash: #dde9e7;
  --teal-glow: #7cc2b9;
  --clay: #b04c23; /* white text on this = 5.4:1 */
  --clay-ink: #9c4220;
  --clay-wash: #f6e2d6;
  --clay-light: #f0a47f;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--on-night);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fallback when the canvas can't run: a quiet ink field, lighter toward the top left */
  background:
    radial-gradient(120% 80% at 18% 0%, #163a3d 0%, rgba(22,58,61,0) 60%),
    linear-gradient(180deg, var(--night-2), var(--night) 70%);
  background-attachment: fixed;
}
/* Film grain over everything. Static, so it costs nothing after first paint. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }
.topo.is-on { opacity: 1; }
.site-head, main, .site-foot { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px solid var(--clay-light); outline-offset: 3px; border-radius: 3px; }
.ea-card :focus-visible { outline-color: var(--clay); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--ink); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent; transition: background .35s var(--ease), border-color .35s var(--ease); }
.site-head.is-scrolled { background: rgba(12, 27, 28, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--rule-night); }
.head-inner { display: flex; align-items: center; gap: 40px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 19px; letter-spacing: -.02em; }
.brand-mark { width: 28px; height: 28px; }
.brand-mark rect { fill: var(--teal); }
.brand-mark path { fill: none; stroke: var(--paper); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.head-cta { margin-left: auto; font-size: 15px; font-weight: 560; text-decoration: none; color: var(--on-night); border: 1px solid rgba(238,243,241,.3); border-radius: 999px; padding: 7px 16px; transition: background .25s var(--ease), border-color .25s, color .25s; }
.head-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 600; margin: 0; }
h1 {
  font-size: clamp(52px, 9.4vw, 148px);
  line-height: .9;
  letter-spacing: -.045em;
  font-variation-settings: "wdth" 78;
  font-weight: 620;
}
h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
h1 .ln > span { display: inline-block; }
h1 .ln + .ln > span { color: var(--on-night-2); }
h1 em { font-style: italic; font-weight: 560; }
.mark-word { position: relative; display: inline-block; padding-right: .04em; }
.scribble { position: absolute; left: -2%; width: 104%; bottom: .02em; height: .14em; overflow: visible; }
.scribble path { fill: none; stroke: var(--clay-light); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 220; stroke-dashoffset: 0; }
h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -.035em; font-variation-settings: "wdth" 82; text-wrap: balance; }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--on-night-2); max-width: 30em; margin: 34px 0 0; text-wrap: pretty; }

/* ---------- buttons ---------- */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--clay); color: #fff; text-decoration: none; font-weight: 580; font-size: 16px; padding: 15px 22px 15px 24px; border-radius: 4px; transition: background .25s var(--ease), transform .25s var(--ease); }
.btn:hover { background: var(--clay-ink); }
.btn:active { transform: translateY(1px); }
.btn-arrow { transition: transform .3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.hero-note { margin: 0; font-size: 14px; color: var(--on-night-3); }

/* ---------- intro (static layout: no JS, reduced motion, small screens) ---------- */
.intro { position: relative; }
.stage { padding: clamp(48px, 9vh, 120px) 0 clamp(64px, 10vw, 120px); }
.mock { margin: clamp(64px, 9vw, 112px) auto 0; max-width: 980px; padding: 0 var(--gut); }
.mock figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--on-night-3); margin-top: 16px; letter-spacing: .01em; }

/* ---------- app mock ---------- */
/* ---------- app mock ---------- */
.app { background: var(--card); color: var(--ink); border-radius: 12px; box-shadow: 0 0 0 1px rgba(124,194,185,.22), 0 2px 0 rgba(255,255,255,.06) inset, 0 50px 100px -40px rgba(0,0,0,.7), 0 30px 60px -30px rgba(15,58,63,.8); overflow: hidden; font-size: 13.5px; }
.app-top { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line-2); }
.app-title { font-weight: 600; font-size: 14.5px; width: 150px; }
.app-search { flex: 1; max-width: 280px; height: 30px; border: 1px solid var(--line-2); border-radius: 6px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: 12.5px; background: var(--paper); }
.app-avatar { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-wash); color: var(--teal-ink); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.app-body { display: grid; grid-template-columns: 166px 1fr; min-height: 330px; }
.app-side { list-style: none; margin: 0; padding: 12px 10px; border-right: 1px solid var(--line-2); background: #faf7f1; }
.app-side li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--ink-2); }
.app-side li.is-on { background: var(--teal-wash); color: var(--teal-ink); font-weight: 560; }
.count { margin-left: auto; font-weight: 600; font-size: 11.5px; font-family: var(--mono); background: var(--teal); color: #fff; border-radius: 10px; padding: 1px 7px; transition: transform .3s var(--ease); }
.count.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }

.ico { width: 15px; height: 15px; flex: none; position: relative; display: inline-block; color: currentColor; }
.ico::before, .ico::after { content: ""; position: absolute; box-sizing: border-box; }
.ico-inbox::before { inset: 2px 1px; border: 1.5px solid; border-radius: 3px; }
.ico-inbox::after { left: 1px; right: 1px; top: 8px; height: 1.5px; background: currentColor; }
.ico-people::before { width: 7px; height: 7px; left: 4px; top: 1px; border: 1.5px solid; border-radius: 50%; }
.ico-people::after { width: 13px; height: 6px; left: 1px; bottom: 1px; border: 1.5px solid; border-bottom: 0; border-radius: 7px 7px 0 0; }
.ico-board::before { inset: 2px 9px 2px 1px; border: 1.5px solid; border-radius: 2px; }
.ico-board::after { inset: 2px 1px 6px 9px; border: 1.5px solid; border-radius: 2px; }
.ico-phone::before { width: 9px; height: 14px; left: 3px; top: 0; border: 1.5px solid; border-radius: 3px; }
.ico-phone::after { width: 3px; height: 1.5px; left: 6px; bottom: 2.5px; background: currentColor; }
.ico-gear::before { inset: 2px; border: 1.5px dashed; border-radius: 50%; }
.ico-gear::after { inset: 5px; border: 1.5px solid; border-radius: 50%; }

.app-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tabs { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--line-2); }
.tab { padding: 8px 10px 10px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; margin-left: 4px; color: var(--muted); }
.tab.is-on { color: var(--ink); border-color: var(--ink); font-weight: 560; }
.tab.is-on b { color: var(--ink-2); }
.rows { list-style: none; margin: 0; padding: 4px 0 70px; }
.row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease); }
.row-inner { overflow: hidden; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line-2); min-height: 0; }
.row-text { min-width: 0; display: flex; flex-direction: column; }
.row-text strong { font-weight: 580; font-size: 13.5px; }
.row-text span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.row-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: #66706d; }
.tag { font-family: var(--sans); font-size: 11px; font-weight: 520; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.tag-clay { color: var(--clay-ink); border-color: #ebc3ad; background: var(--clay-wash); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; flex: none; }
.av-clay { background: var(--clay-wash); color: var(--clay-ink); }


/* call bar */
.callbar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; background: var(--teal-ink); color: #eaf2f1; border-radius: 8px; padding: 10px 12px 10px 14px; font-size: 13px; }
.call-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fd3a8; box-shadow: 0 0 0 0 rgba(111,211,168,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(111,211,168,0); } 100% { box-shadow: 0 0 0 0 rgba(111,211,168,0); } }
.call-who { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-time { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: #bfd6d3; }
.call-end { background: var(--clay); color: #fff; border-radius: 5px; padding: 3px 10px; font-size: 12px; font-weight: 560; }

/* ---------- beats ---------- */
.beats { padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 10vw, 140px); }
.beat-list { list-style: none; margin: 0; padding: 0; max-width: 1040px; }
.beat-list li { font-size: clamp(24px, 2.9vw, 40px); line-height: 1.18; letter-spacing: -.022em; font-variation-settings: "wdth" 90; color: var(--on-night-3); padding: clamp(22px, 3vw, 36px) 0; border-top: 1px solid var(--rule-night); text-wrap: pretty; }
.beat-list li:last-child { border-bottom: 1px solid var(--rule-night); }
.beat-list strong { color: var(--on-night); font-weight: 600; }
.beat-list li:nth-child(2) { padding-left: clamp(0px, 8vw, 120px); }
.beat-list li:nth-child(3) { padding-left: clamp(0px, 16vw, 240px); }

/* ---------- pricing request ---------- */
.closing { scroll-margin-top: 40px; padding: clamp(24px, 4vw, 48px) 0 clamp(80px, 11vw, 150px); }
.closing-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.closing-head { grid-column: 1 / span 5; position: sticky; top: 110px; }
.closing-side { grid-column: 7 / span 6; }
.closing h2 { font-size: clamp(44px, 6vw, 84px); line-height: .92; letter-spacing: -.045em; font-variation-settings: "wdth" 78; }
.closing-copy { font-size: 19px; color: var(--on-night-2); max-width: 24em; margin: 24px 0 0; }

/* pricing request form */
.ea-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 24px 48px -34px rgba(21,35,33,.35); }
.ea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.ea-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ea-wide { grid-column: 1 / -1; }
.ea-field > label, .ea-field legend { font-size: 14px; font-weight: 560; color: var(--ink); padding: 0; }
.ea-field legend { margin-bottom: 8px; }
.ea-opt { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }
.ea-field input[type="text"], .ea-field input[type="email"], .ea-field input[type="tel"], .ea-field select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 11px 12px; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); appearance: none; -webkit-appearance: none;
}
.ea-field input:hover, .ea-field select:hover { border-color: #c6bcaa; }
.ea-field input:focus, .ea-field select:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,111,120,.16); }
.ea-field input[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(176,76,35,.12); }
.ea-field textarea { font: inherit; font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 11px 12px; width: 100%; min-height: 88px; resize: vertical; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.ea-field textarea:hover { border-color: #c6bcaa; }
.ea-field textarea:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,111,120,.16); }
.ea-field textarea[aria-invalid="true"] { border-color: var(--clay); }
.ea-under { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ea-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ea-count.is-near { color: var(--clay-ink); }
.ea-select { position: relative; }
.ea-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ea-select select { padding-right: 36px; cursor: pointer; }
.ea-err { margin: 0; font-size: 13px; color: var(--clay-ink); min-height: 0; max-height: 0; opacity: 0; transform: translateY(-3px); transition: opacity .25s var(--ease), transform .25s var(--ease), max-height .25s var(--ease); }
.ea-err.is-on { opacity: 1; transform: none; max-height: 40px; }
.ea-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s, transform .2s var(--ease); user-select: none; }
.chip span::before { content: ""; width: 0; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0; transition: width .2s var(--ease), opacity .2s; margin-right: -6px; }
.chip:hover span { border-color: #c6bcaa; }
.chip input:checked + span { background: var(--teal-wash); border-color: var(--teal); color: var(--teal-ink); }
.chip input:checked + span::before { width: 4px; opacity: 1; margin-right: 0; }
.chip input:active + span { transform: scale(.97); }
.chip input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }
.ea-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ea-turnstile { margin-top: 18px; min-height: 0; }
.ea-turnstile:empty { margin-top: 0; }
.ea-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.ea-submit { border: 0; cursor: pointer; font-family: inherit; }
.ea-submit:disabled { cursor: progress; }
.ea-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(245,241,234,.35); border-top-color: var(--paper); animation: spin .8s linear infinite; }
.ea-form.is-loading .ea-spin { display: inline-block; }
.ea-form.is-loading .btn-arrow { display: none; }
.ea-form.is-loading .ea-submit { background: var(--teal-deep); }
@keyframes spin { to { transform: rotate(360deg); } }
.ea-fine { margin: 0; font-size: 13px; color: var(--muted); }
.ea-status { margin: 14px 0 0; font-size: 14px; color: var(--clay-ink); }
.ea-status:empty { margin: 0; }
.ea-form { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ea-form.is-leaving { opacity: 0; transform: translateY(-8px); }
.ea-done { padding: clamp(12px, 3vw, 28px) 0; }
.ea-done:focus { outline: none; }
.ea-done h3 { line-height: 1.12; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.025em; font-variation-settings: "wdth" 88; margin: 18px 0 8px; }
.ea-done p { margin: 0; color: var(--ink-2); }
.ea-check { width: 48px; height: 48px; }
.ea-check circle { fill: var(--teal-wash); stroke: var(--teal); stroke-width: 1.5; }
.ea-check path { fill: none; stroke: var(--teal-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.js-motion .ea-done:not([hidden]) { animation: rise .6s var(--ease) both; }
.js-motion .ea-done:not([hidden]) .ea-check path { animation: draw .6s .25s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes draw { from { stroke-dashoffset: 40; } }
.ea-shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.ea-card { color: var(--ink); border: 0; box-shadow: 0 0 0 1px rgba(124,194,185,.2), 0 50px 100px -40px rgba(0,0,0,.7); }
.ea-submit { background: var(--clay); }
.ea-submit:hover { background: var(--clay-ink); }

/* footer */
.site-foot { border-top: 1px solid var(--rule-night); }
.foot-inner { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 36px; font-size: 14px; color: var(--on-night-3); }
.foot-inner p { margin: 0; }
.foot-inner nav { margin-left: auto; display: flex; gap: 24px; color: var(--on-night-2); }
.foot-inner nav a { text-decoration: none; }
.foot-inner nav a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: 4px; }
.brand-sm { font-size: 16px; color: var(--on-night); }
.brand-sm .brand-mark { width: 22px; height: 22px; }

/* ================= motion ================= */
/* Headline lines rise out of their masks on load; the scribble draws after. */
.js-motion h1 .ln > span { transform: translateY(105%); }
.js-motion.is-ready h1 .ln > span { transform: none; transition: transform 1.1s cubic-bezier(.2,.8,.1,1); }
.js-motion.is-ready h1 .ln + .ln > span { transition-delay: .12s; }
.js-motion .scribble path { stroke-dashoffset: 220; }
.js-motion.is-ready .scribble path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s 1.1s cubic-bezier(.6,.1,.3,1); }
.js-motion .hero-copy > .sd-fade-2 { opacity: 0; transform: translateY(14px); }
.js-motion.is-ready .hero-copy > .sd-fade-2 { opacity: 1; transform: none; transition: opacity .9s .45s var(--ease), transform .9s .45s var(--ease); }
.js-motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Small screens with motion: the mock plays once when it scrolls into view. */
.js-motion:not(.sd) .row-new { grid-template-rows: 0fr; }
.js-motion:not(.sd) .row-new .row-inner { border-bottom-color: transparent; padding-top: 0; padding-bottom: 0; transition: padding .6s var(--ease), border-color .6s; }
.js-motion:not(.sd) .mock.is-live .row-new { grid-template-rows: 1fr; }
.js-motion:not(.sd) .mock.is-live .row-new .row-inner { padding-top: 10px; padding-bottom: 10px; border-bottom-color: var(--line-2); animation: newglow 2.4s .5s var(--ease) both; }
.js-motion:not(.sd) .callbar { transform: translateY(calc(100% + 20px)); opacity: 0; transition: transform .7s 1.4s var(--ease), opacity .4s 1.4s; }
.js-motion:not(.sd) .mock.is-live .callbar { transform: none; opacity: 1; }
.js-motion:not(.sd) .mock { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js-motion:not(.sd) .mock.is-in { opacity: 1; transform: none; }
/* Small screens: the headline eases back as it leaves (CSS only, where supported). */
@supports (animation-timeline: view()) {
  .js-motion:not(.sd) .sd-title { transform-origin: 0 100%; animation: m-title linear both; animation-timeline: view(); animation-range: exit 10% exit 100%; }
}
@keyframes m-title { to { transform: scale(.9); opacity: .25; } }
@keyframes newglow { 0% { background: var(--clay-wash); } 100% { background: transparent; } }

/* ---------- Desktop: pinned scroll sequence ----------
   One set of keyframes drives both paths:
   - browsers with scroll-driven animations bind them to the intro's view timeline;
   - everyone else gets paused animations scrubbed by site.js through --p (0..1). */
.sd .intro { height: 290vh; view-timeline: --intro block; }
.sd .stage { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; perspective: 1400px; }
.sd .hero-copy { position: absolute; left: 0; right: 0; top: max(110px, 21vh); }
.sd .mock { position: absolute; left: 0; right: 0; top: max(210px, 30vh); margin: 0 auto; transform-origin: 50% 0; }
.sd .sd-title { transform-origin: 0 0; }

.sd .sd-title, .sd .sd-fade, .sd .sd-mock, .sd .sd-row, .sd .sd-row .row-inner, .sd .sd-call {
  animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both;
  animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s);
}
.sd .sd-title { animation-name: sd-title; }
.sd .sd-fade { animation-name: sd-fade; }
.sd .sd-mock { animation-name: sd-mock; }
.sd .sd-row { animation-name: sd-row; }
.sd .sd-row .row-inner { animation-name: sd-row-inner; }
.sd .sd-call { animation-name: sd-call; }
@supports (animation-timeline: view()) {
  .sd .sd-title, .sd .sd-fade, .sd .sd-mock, .sd .sd-row, .sd .sd-row .row-inner, .sd .sd-call {
    animation-play-state: running; animation-delay: 0s; animation-duration: auto;
    animation-timeline: --intro; animation-range: contain 0% contain 100%;
  }
}
@keyframes sd-title {
  0% { transform: none; opacity: 1; }
  34% { transform: translateY(-6vh) scale(.46); opacity: 1; }
  100% { transform: translateY(-6vh) scale(.46); opacity: 1; }
}
@keyframes sd-fade {
  0% { opacity: 1; transform: none; }
  16% { opacity: 0; transform: translateY(-24px); visibility: visible; }
  100% { opacity: 0; transform: translateY(-24px); visibility: hidden; }
}
@keyframes sd-mock {
  0% { transform: translateY(58vh) rotateX(22deg) scale(.9); }
  18% { transform: translateY(40vh) rotateX(16deg) scale(.93); }
  46% { transform: none; }
  100% { transform: none; }
}
@keyframes sd-row { 0%, 54% { grid-template-rows: 0fr; } 66%, 100% { grid-template-rows: 1fr; } }
@keyframes sd-row-inner {
  0%, 54% { padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; background: var(--clay-wash); }
  66% { padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--line-2); background: var(--clay-wash); }
  84%, 100% { padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--line-2); background: transparent; }
}
@keyframes sd-call {
  0%, 70% { transform: translateY(calc(100% + 24px)); opacity: 0; }
  82%, 100% { transform: none; opacity: 1; }
}

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

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .closing-head, .closing-side { grid-column: 1 / -1; }
  .closing-head { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .head-inner { height: 60px; }
  .head-cta { font-size: 14px; padding: 6px 14px; }
  h1 { font-size: clamp(50px, 15vw, 72px); }
  .lede { margin-top: 24px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .mock { margin-top: 56px; }
  .app { font-size: 13px; }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-side { display: none; }
  .app-title { width: auto; }
  .app-search { display: none; }
  .tabs { padding: 8px 10px 0; overflow: hidden; }
  .tab { padding: 8px 8px 10px; }
  .row-inner { padding: 10px 12px; gap: 10px; }
  .row-meta .tag { display: none; }
  .beat-list li:nth-child(n) { padding-left: 0; }
  .foot-inner nav { margin-left: 0; }
  .ea-grid { grid-template-columns: 1fr; }
  .ea-submit { width: 100%; justify-content: center; }
}

/* =====================================================================
   Orbi, the Navo mascot, as a recurring accent (same artwork as the splash).
   Nesting keeps each motion on its own element so transforms never fight:
   placement > .orbi-in (entrance) > .orbi-hop (reactions) > .orbi-bob (idle) > svg.ox
   ===================================================================== */
.ob-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ox { width: 100%; height: auto; overflow: visible; }
.ox .ox-arm, .ox .ox-ring, .ox .ox-body, .ox .ox-eyes, .ox .ox-shadow { transform-box: view-box; }
.ox .ox-arm { transform-origin: 48px 84px; }
.ox .ox-ring { transform-origin: 100px 106px; }
.ox .ox-eyes { transform-origin: 100px 92px; }
.ox .ox-shadow { transform-origin: 100px 190px; }
.ox .ox-happy, .ox .ox-open { opacity: 0; transition: opacity .15s; }
.ox .ox-eyes, .ox .ox-smile { transition: opacity .15s; }
.is-happy .ox .ox-happy, .is-happy .ox .ox-open { opacity: 1; }
.is-happy .ox .ox-eyes, .is-happy .ox .ox-smile { opacity: 0; }
.orbi-in, .orbi-hop, .orbi-bob { will-change: transform; }

/* idle life: a slow bob and a blink now and then (motion only) */
.js-motion .orbi-bob { animation: ob-bob 4.6s ease-in-out infinite; }
.js-motion .orbi-bob .ox-shadow { animation: ob-shadow 4.6s ease-in-out infinite; }
.js-motion .ox .ox-eyes { animation: ob-blink 5.2s linear infinite; animation-delay: var(--blink, 1.4s); }
@keyframes ob-bob { 50% { transform: translateY(-7%); } }
@keyframes ob-shadow { 50% { transform: scale(.82); opacity: .7; } }
@keyframes ob-blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.12); } }
@keyframes ob-wave { 0%, 100% { transform: none; } 15% { transform: rotate(-38deg); } 32% { transform: rotate(18deg); } 50% { transform: rotate(-38deg); } 68% { transform: rotate(18deg); } 84% { transform: rotate(-10deg); } }
@keyframes ob-hop { 0% { transform: none; } 30% { transform: translateY(-14%) scale(.96, 1.05); } 55% { transform: translateY(0) scale(1.06, .94); } 75% { transform: scale(.98, 1.02); } 100% { transform: none; } }
.wave .ox .ox-arm { animation: ob-wave 1.5s ease-in-out both; }

/* ---------- hero ---------- */
.hero-copy { position: relative; }
.hero-orbi { position: absolute; right: var(--gut); top: clamp(-40px, -2vw, 0px); width: clamp(190px, 21vw, 330px); pointer-events: none; }
.hero-orbi .orbi-bob { --blink: 2.2s; }
.js-motion .hero-orbi .orbi-in { opacity: 0; transform: translateY(60px) rotate(-8deg) scale(.86); }
.js-motion.is-ready .hero-orbi .orbi-in { opacity: 1; transform: none; transition: opacity .8s .35s var(--ease), transform 1.3s .35s cubic-bezier(.25,1.4,.4,1); }

/* peek: Orbi rises from behind the inbox card and cheers when the lead lands */
.mock { position: relative; }
.peek { position: absolute; bottom: calc(100% - 52px); right: calc(var(--gut) + 7%); width: 118px; height: 118px; overflow: hidden; pointer-events: none; z-index: 1; }
.peek-orbi { position: absolute; left: 0; right: 0; top: 0; transform: translateY(0); }
.mock .app { position: relative; z-index: 2; }
.js-motion:not(.sd) .peek-orbi { transform: translateY(100%); transition: transform .9s 1.2s cubic-bezier(.3,1.5,.5,1); }
.js-motion:not(.sd) .mock.is-live .peek-orbi { transform: translateY(0); }

.sd .sd-peek { animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); animation-name: sd-peek; }
.sd .sd-horbi { animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); animation-name: sd-horbi; }
@supports (animation-timeline: view()) {
  .sd .sd-peek, .sd .sd-horbi { animation-play-state: running; animation-delay: 0s; animation-duration: auto; animation-timeline: --intro; animation-range: contain 0% contain 100%; }
}
.sd .hero-orbi { transform-origin: 50% 80%; }
@keyframes sd-horbi {
  0% { transform: none; opacity: 1; }
  30% { transform: translate(-4vw, 30vh) rotate(-14deg) scale(.5); opacity: 0; }
  100% { transform: translate(-4vw, 30vh) rotate(-14deg) scale(.5); opacity: 0; }
}
@keyframes sd-peek {
  0%, 44% { transform: translateY(100%); }
  54% { transform: translateY(-4%); }
  58%, 100% { transform: translateY(0); }
}

/* ---------- features ---------- */
.feats { position: relative; padding: clamp(96px, 12vw, 180px) 0 clamp(80px, 10vw, 150px); }
/* a deeper ink panel that opens to full width as the section arrives */
.feats::before { content: ""; position: absolute; inset: 0; background: rgba(6, 16, 17, .62); border-top: 1px solid var(--rule-night); border-bottom: 1px solid var(--rule-night); clip-path: inset(0 0 0 0 round 0); z-index: -1; }
.js-motion .feats::before { clip-path: inset(0 7% 0 7% round 32px); transition: clip-path 1.2s var(--ease-io); }
.js-motion .feats.is-in::before { clip-path: inset(0 0 0 0 round 0); }
@supports (animation-timeline: view()) {
  .js-motion .feats::before { transition: none; animation: feats-open linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes feats-open { from { clip-path: inset(0 7% 0 7% round 32px); } to { clip-path: inset(0 0 0 0 round 0); } }

.kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-glow); margin: 0 0 22px; }
.feats h2 { font-size: clamp(52px, 8.4vw, 132px); line-height: .9; letter-spacing: -.045em; font-variation-settings: "wdth" 78; font-weight: 620; }
.split .w { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.split .w > span { display: inline-block; }
.split .w:nth-child(n+3) > span { color: var(--on-night-2); }
.js-motion .split .w > span { transform: translateY(110%) rotate(4deg); transition: transform 1s cubic-bezier(.2,.8,.1,1); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion .split.is-in .w > span { transform: none; }

.feats-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); }
.feats-stage { position: relative; }
.stage-sticky { position: sticky; top: calc(50vh - min(19vw, 230px)); width: min(100%, 440px); aspect-ratio: 1; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-track { fill: none; stroke: var(--rule-night); stroke-width: 1; stroke-dasharray: 2 7; }
.orbit-trail { fill: none; stroke: var(--teal-glow); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--fp, 1) * 100); transform: rotate(-90deg); transform-origin: 200px 200px; opacity: .55; }
.orbit-moon { transform: rotate(calc(var(--fp, 1) * 360deg)); transform-origin: 200px 200px; }
.orbit-moon circle { fill: var(--clay-light); }
.stage-orbi { position: absolute; left: 20%; top: 18%; width: 60%; transition: transform .9s cubic-bezier(.3,1.35,.5,1); }
.stage-orbi .ox .ox-ring { transform: rotate(calc(var(--fp, 0) * 50deg - 25deg)); }
.stage-count { position: absolute; left: 0; right: 0; bottom: -6px; margin: 0; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--on-night-3); letter-spacing: .06em; }
.stage-count [data-fnum] { display: inline-block; color: var(--on-night); }
.stage-count [data-fnum].tick { animation: tick .45s var(--ease); }
@keyframes tick { from { transform: translateY(60%); opacity: 0; } }

/* one pose, many moods: each feature nudges Orbi (motion only) */
.js-motion .feats[data-active="1"] .stage-orbi { transform: rotate(-8deg); }
.js-motion .feats[data-active="2"] .stage-orbi { transform: scaleX(-1) rotate(-6deg) translateX(4%); }
.js-motion .feats[data-active="3"] .stage-orbi { transform: scale(1.14) translateY(-4%); }
.js-motion .feats[data-active="4"] .stage-orbi { transform: scale(.82) rotate(12deg) translate(14%, 8%); }
.js-motion .feats[data-active="5"] .stage-orbi { transform: scaleX(-1) scale(.94); }
.js-motion .feats[data-active="6"] .stage-orbi { transform: rotate(10deg) translate(-8%, -3%) scale(1.04); }
.js-motion .feats[data-active="7"] .stage-orbi { transform: scaleX(-1) scale(1.1) translateY(-6%); }
.orbi-hop.hop { animation: ob-hop .7s cubic-bezier(.3,.7,.4,1); }

.feat-list { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.feat { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: clamp(30px, 5.2vh, 56px) 0; }
.feat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-night); transform-origin: 0 50%; }
.feat:last-child { border-bottom: 1px solid var(--rule-night); }
.feat-num { font-family: var(--mono); font-size: 13px; color: var(--teal-glow); padding-top: .9em; letter-spacing: .04em; }
.feat h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: clamp(34px, 4.3vw, 64px); line-height: .98; letter-spacing: -.038em; font-variation-settings: "wdth" 80; font-weight: 610; }
.feat-h { display: inline-block; transition: color .5s var(--ease); }
.feat p { margin: 14px 0 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--on-night-2); transition: color .5s var(--ease); }
.soon { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--clay-light); border: 1.5px solid currentColor; border-radius: 4px; padding: 5px 9px 4px; transform: rotate(-4deg); white-space: nowrap; }

/* entrance: rule draws, number and headline rise, line follows */
.js-motion .feat::before { transform: scaleX(0); transition: transform 1.1s var(--ease-io); }
.js-motion .feat.is-in::before { transform: scaleX(1); }
.js-motion .feat-num, .js-motion .feat h3, .js-motion .feat p { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .9s cubic-bezier(.2,.8,.1,1), color .5s var(--ease); }
.js-motion .feat h3 { transition-delay: .08s; }
.js-motion .feat p { transition-delay: .18s; }
.js-motion .feat.is-in .feat-num, .js-motion .feat.is-in h3, .js-motion .feat.is-in p { opacity: 1; transform: none; }
.js-motion .feat .soon { opacity: 0; transform: rotate(-4deg) scale(1.8); }
.js-motion .feat.is-on .soon, .js-motion .feat.was-on .soon { opacity: 1; transform: rotate(-4deg); transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
/* spotlight: the feature at the center of the screen is lit, the rest dim */
.js-motion .feats.is-tracking .feat .feat-h { color: rgba(238, 243, 241, .3); }
.js-motion .feats.is-tracking .feat p { color: rgba(185, 203, 200, .35); }
.js-motion .feats.is-tracking .feat.is-on .feat-h { color: var(--on-night); }
.js-motion .feats.is-tracking .feat.is-on p { color: var(--on-night-2); }

/* small screens: three inline Orbis in different poses stand in for the sticky stage */
.feat-orbi { display: none; }

/* ---------- pricing: Orbi perched on the form ---------- */
.closing-side { padding-top: 96px; }
.perch { position: absolute; right: 30px; bottom: calc(100% - 26px); width: 128px; pointer-events: none; z-index: 2; }
.perch-orbi { transform: scaleX(-1); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.perch .orbi-hop { transform-origin: 50% 85%; }
.ea-card.is-typing .perch-orbi { transform: scaleX(-1) rotate(-12deg) translateX(-6%); }
.js-motion .closing-side .perch-orbi { opacity: 0; transform: scaleX(-1) translateY(-70px); }
.js-motion .closing-side.is-in .perch-orbi { opacity: 1; transform: scaleX(-1); transition: opacity .4s .5s, transform .9s .5s cubic-bezier(.3,1.6,.5,1); }
.js-motion .closing-side.is-in .ea-card.is-typing .perch-orbi { transform: scaleX(-1) rotate(-12deg) translateX(-6%); transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.ea-card.is-sent .orbi-hop { animation: ob-hop .7s cubic-bezier(.3,.7,.4,1) 3; }

/* ---------- beats: slide in from alternating sides ---------- */
.js-motion .beat-list li[data-reveal] { transform: translateX(-40px); }
.js-motion .beat-list li[data-reveal]:nth-child(2) { transform: translateX(40px); }
.js-motion .beat-list li[data-reveal].is-in { transform: none; }

@media (max-width: 899px) {
  .feats-body { grid-template-columns: 1fr; }
  .feats-stage { display: none; }
  .feat { grid-template-columns: 40px minmax(0, 1fr); }
  .feat-orbi { display: block; position: absolute; pointer-events: none; }
  .feat-orbi.m-a { width: 78px; right: 0; top: -38px; transform: scaleX(-1) rotate(-6deg); }
  .feat-orbi.m-b { width: 104px; right: -6px; top: -54px; }
  .feat-orbi.m-c { width: 70px; right: 8px; top: -34px; transform: rotate(12deg); }
  .feat-orbi.m-b { --blink: .6s; }
  .feat[data-f="1"] .feat-text, .feat[data-f="3"] .feat-text, .feat[data-f="6"] .feat-text { padding-right: 70px; }
  .js-motion .feat-orbi .orbi-bob { opacity: 0; transform: translateY(40px) scale(.6); }
  .js-motion .feat.is-in .feat-orbi .orbi-bob { opacity: 1; transform: none; transition: opacity .4s .35s, transform .8s .35s cubic-bezier(.3,1.6,.5,1); animation: ob-bob 4.6s 1.2s ease-in-out infinite; }
}
@media (max-width: 720px) {
  .hero-orbi { position: relative; right: auto; top: auto; width: 104px; margin: -8px 0 10px auto; }
  .hero-orbi .orbi-in { transform-origin: 50% 100%; }
  .peek { width: 92px; height: 92px; bottom: calc(100% - 40px); }
  .closing-side { padding-top: 84px; }
  .perch { width: 104px; right: 18px; bottom: calc(100% - 21px); }
  .feats h2 { font-size: clamp(48px, 14vw, 72px); }
  .feat h3 { font-size: clamp(30px, 8.6vw, 40px); }
}
html:not(.js-motion) .stage-count { display: none; }
/* small-screen accents cheer when their feature is lit */
.js-motion .feats.is-tracking .feat.is-on .feat-orbi .ox-happy, .js-motion .feats.is-tracking .feat.is-on .feat-orbi .ox-open { opacity: 1; }
.js-motion .feats.is-tracking .feat.is-on .feat-orbi .ox-eyes, .js-motion .feats.is-tracking .feat.is-on .feat-orbi .ox-smile { opacity: 0; }

/* features without the pinned stage: one column, list stepped in like the beats */
.feats-body { grid-template-columns: minmax(0, 1fr); }
.feat-list { margin-left: clamp(0px, 16vw, 240px); max-width: 1000px; }
@media (max-width: 899px) { .feat-list { margin-left: 0; } }

/* header removed: keep the 68px (60px on phones) it used so the hero sits where it did */
main { padding-top: 68px; }
@media (max-width: 720px) { main { padding-top: 60px; } }

/* QA pass: 44px minimum tap targets */
.chip span { min-height: 44px; padding: 0 16px; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.foot-inner nav a, .brand-sm { display: inline-flex; align-items: center; min-height: 44px; }
.foot-inner { padding-top: 18px; padding-bottom: 26px; }