/* Reset, type defaults and the fixed top nav. Shared by every section;
   section-specific styling lives in sections/<slug>.css. */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f6fa;color:#24202d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #c192ff;outline-offset:5px}img{display:block;object-fit:cover}h1,h2,h3,p{margin:0}.topnav{position:fixed;inset:0 0 auto;height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;z-index:40;background:transparent;border-bottom:0;color:#24202d}
/* the nav's colour change only animates after the first frame (body.hr-nav-ready, hero.js), so
   the page never paints the light nav and then fades to the hero's ground */
body.hr-nav-ready .topnav{transition:background-color .45s cubic-bezier(.16,1,.3,1),border-color .45s cubic-bezier(.16,1,.3,1),color .45s cubic-bezier(.16,1,.3,1)}
/* The nav never carries a surface of its own — no band, no blur, no rule (RD round 4): it sits
   directly on whatever section is under it. body.hr-nav-dark (sections/hero.js) only re-inks the
   type to white while the hero's dark ground is behind it. */
body.hr-nav-dark .topnav{background:transparent;color:#fff}
body.hr-nav-dark .brand span{color:#a99cc2}
body.hr-nav-dark .demo{border-color:#fff;color:#29193b}
@media(max-width:760px){.topnav{height:62px}.brand{font-size:21px}.brand span{display:none}.demo{padding:9px 13px;font-size:12px}.demo span{margin-left:10px}}.brand{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:700;letter-spacing:-1px}.brand span{font-weight:400;font-size:12px;letter-spacing:0;color:#938b9d;margin-left:18px}body.hr-nav-ready .brand span{transition:color .45s cubic-bezier(.16,1,.3,1)}.demo{border:1px solid #ddd7e6;border-radius:99px;padding:11px 18px;font-size:13px;background:white;color:#24202d;transition:transform .16s cubic-bezier(.16,1,.3,1)}body.hr-nav-ready .demo{transition:border-color .45s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1)}.demo:active{transform:scale(.97)}.demo span{margin-left:24px;color:#8655c6}

/* ===========================================================================
   RD round 7, note 1 — "during the scroll the top bar is not visible".

   The bar deliberately carried no surface at all (round 4), which reads well
   over the hero's dark ground and then disappears over everything below it:
   the links end up sitting on whatever pale panel happens to be passing under
   them. So it takes a surface as soon as the page leaves the top — a
   translucent lavender band with a blur and a hairline, the same read as the
   masthead on the live galvor.ai — and drops it again at the very top, where
   the hero's own ground is the background. body.gv-scrolled: hero.js.
   =========================================================================== */
:root{
 /* One section-heading size for the whole page. RD marked the "One loop."
    line as "this is perfect font size", so every section h2 is measured from
    it rather than choosing its own clamp. */
 --gv-h2:clamp(30px,3.4vw,50px);
 /* Eyebrows were 10–10.5px, which RD could not read ("decode बहुत छोटा है"). */
 --gv-eyebrow:12.5px;
}
body.gv-scrolled .topnav{
 background:#f3f0fadb;
 -webkit-backdrop-filter:blur(16px) saturate(1.35);
 backdrop-filter:blur(16px) saturate(1.35);
 border-bottom:1px solid #17131f14;
}
/* ...but NOT over a dark ground. The band exists so the links stay readable
   over the pale sections, where they would otherwise sit on whatever panel is
   passing under them. Over the hero its own translucent dark was a fourth
   colour in a frame that RD wants to read as one background, and the type is
   already white on near-black there, so the bar keeps no surface at all. */
body.gv-scrolled.hr-nav-dark .topnav{background:transparent;border-bottom-color:transparent}
/* RD round 8: over the hero the bar is fully see-through, blur included. The
   blur stayed on after the background went transparent, so the room's lines
   ran soft through a band at the top of the frame. */
body.hr-nav-dark .topnav,body.gv-scrolled.hr-nav-dark .topnav{-webkit-backdrop-filter:none;backdrop-filter:none}
/* The CTA is the one control on the bar that must never be ambiguous, so it is
   a filled purple pill on every ground — the same button the live site has. */
.topnav .demo{
 /* RD round 8: "Talk to founders" is a black button with white type
    everywhere. A hairline of white keeps its edge on the dark hero; on the
    pale sections the black carries it on its own. */
 background:#0b0812;border:1px solid #ffffff2e;color:#fff;font-weight:600;
 box-shadow:0 1px 2px #0000004d,0 8px 20px -8px #00000080;
}
.topnav .demo span{color:#fff}
.topnav .demo:hover{background:#1d1729}
body.hr-nav-dark .topnav .demo{border-color:#ffffff2e;color:#fff}

/* The arrow was a text glyph (&#8599;), so every platform drew it from its own
   font — on Android it came out tiny and adrift at the far end of the pill.
   An inline SVG draws the same arrow at the same size and distance on every
   device and width. */
.topnav .demo{display:inline-flex;align-items:center;gap:10px}
.topnav .demo-ic{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.topnav .demo{gap:8px}.topnav .demo-ic{width:10px;height:10px}}

/* RD round 9: "Talk to founders" is the logo's purple (shell.css
   .topnav .brand .gv-mark), not black, so it no longer sinks into the dark hero. */
.topnav .demo,body.hr-nav-dark .topnav .demo{background:#7936ea;border-color:#ffffff38;color:#fff;box-shadow:0 1px 2px #2a0f5a55,0 8px 20px -8px #5a1fc0aa}
.topnav .demo:hover{background:#6a28d6}
/* ...and once the hero's slides are done (body.gv-scrolled, hero.js), the bar
   keeps a surface over dark grounds too: a dark translucent band instead of
   nothing, so the white logo and the CTA have something to sit on. */
body.gv-scrolled.hr-nav-dark .topnav{background:#130e1ecc;border-bottom-color:#ffffff14;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}

/* One arrow for the whole site. Text glyphs (→ ↗ &rarr;) are drawn from each
   platform's own font, so on Android they came out small, thin and off-centre
   next to the nav's SVG arrow. Every button arrow is now this SVG: .gv-arr with
   the up-right path on "Talk to founders" / links out, the right path on
   actions that go forward (Book your demo, the privacy steps). */
.gv-arr{display:inline-block;width:.9em;height:.9em;flex:none;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* <picture> is a wrapper for format fallback only — it must not create a box,
   so existing layout rules that target the <img> keep working unchanged. */
picture{display:contents}

/* Visually hidden but readable by assistive tech and crawlers. Lived in
   sections/hero.css, which only the homepage loads — so the hidden h1 in the
   shared document template rendered as plain text above the nav on every
   page built from it. A utility class belongs with the base. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}