/* vrtmv shared styles — used by pricing, faq, and the app pages.
   The marketing index.html keeps its own embedded copy of the hero styles;
   this file carries the common shell (palette, nav, footer, buttons, cards, forms). */
/* 2026 brand palette, taken from the launch one-sheet.
   #0A3D91 deep blue · #1266E3 blue · #3FA1FF light blue · #00C2B3 teal
   #0B1E3D ink · #6B7280 grey · #E5E7EB line
   The variable NAMES are unchanged on purpose so every existing rule keeps working and this
   is a palette swap rather than a rewrite. Roles are preserved too: navy still carries
   headings and the hero, blue still carries links and accents, teal still marks positives. */
:root{
  --navy:#0A3D91; --ink:#0B1E3D; --slate:#6B7280; --slate-2:#8b93a1;
  --line:#E5E7EB; --bg:#ffffff; --bg-soft:#f5f8fd;
  --blue:#1266E3; --teal:#00C2B3; --cyan:#3FA1FF; --aqua:#00C2B3; --green:#0f9b76;
  --hero-1:#0B1E3D; --hero-2:#0A3D91;
  --cool:linear-gradient(120deg,#0A3D91 0%,#1266E3 55%,#3FA1FF 100%);
  --cool-soft:linear-gradient(120deg,#1266E3 0%,#00C2B3 100%);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Inter per the brand sheet's typography block. Mono is left as IBM Plex Mono: the sheet
     specifies no monospace, and attestation JSON and file paths need one. */
  --sans:'Inter','IBM Plex Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* flex-start + margin-left:auto on .nav-links, not justify-content:space-between:
   #searchMount sits between .brand and .nav-links as a real (not display:none) third
   child, and space-between would divide the row into three equal gaps instead of
   grouping brand+search on the left — the same splitting bug fixed for .nav-more,
   just with a second element able to trigger it. auto-margin pins .nav-links to the
   end while brand and search keep their own natural spacing. */
.nav-inner{display:flex;align-items:center;height:64px}
.brand{display:flex;align-items:center;gap:9px}
.brand img.bmark{height:30px;width:auto;display:block}
.brand img.bword{height:19px;width:auto;display:block}
.nav-links{display:flex;gap:24px;align-items:center;font-size:15px;margin-left:auto}
/* a:not(.btn) already gets white-space:nowrap below; .btn was left out of that rule and,
   once the bar is tight enough to shrink it, "Sign up free" wraps onto two or three lines
   and inflates the whole header's height instead of just sitting snug. */
.nav-links a.btn{white-space:nowrap}
.nav-links a:not(.btn){color:var(--slate);font-weight:500;white-space:nowrap}
.nav-links a:not(.btn):hover{color:var(--navy)}
.nav-links a.active{color:var(--navy);font-weight:600}

/* ── the overflow menu ───────────────────────────────────────────────────────
   The bar carried nine links, a search box and a signup button at 64px. Past a
   certain width they wrapped and collided, which is what read as broken. Six
   items stay on the bar; the rest live behind this button at every width, not
   only on mobile.

   `.secondary` items are in the markup ONCE, inside .nav-links. Desktop hides
   them inline and nav.js clones them into the menu below; the mobile dropdown
   shows them in place and hides this button. One list, two presentations —
   rather than two lists that drift. */
/* No margin-left: .nav-more is now a child of .nav-links, whose own gap:24px
   already spaces it from "Sign up free" — the same rule every other item gets. */
.nav-more{position:relative;display:flex;align-items:center}
.nav-more-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
  padding:0 7px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;transition:.15s}
.nav-more-btn:hover{border-color:var(--slate-2);background:var(--bg-soft)}
.nav-more-btn span{display:block;height:2px;border-radius:2px;background:var(--slate)}
.nav-more-btn[aria-expanded="true"]{border-color:var(--navy);background:var(--bg-soft)}
.nav-more-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:216px;padding:6px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 44px -22px rgba(14,22,32,.45);
  display:flex;flex-direction:column;z-index:60}
.nav-more-menu[hidden]{display:none}
.nav-more-menu a{padding:10px 13px;border-radius:8px;font-size:14.5px;color:var(--slate);font-weight:500;white-space:nowrap}
.nav-more-menu a:hover{background:var(--bg-soft);color:var(--navy)}
.nav-more-menu a.active{color:var(--navy);font-weight:600}
/* On the bar, the overflow items exist only as the source the menu clones from. */
.nav-links a.secondary{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:11px 20px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;font-family:var(--sans)}
.btn.primary{background:var(--cool);color:#fff;box-shadow:0 6px 18px -8px rgba(10,99,214,.7)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(10,99,214,.8)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn.block{width:100%;justify-content:center;padding:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* page header */
.page-head{padding:64px 0 28px}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;background:var(--cool);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
h1.page{font-size:clamp(30px,4.4vw,44px);margin:8px 0 14px;letter-spacing:-.02em;color:var(--navy);font-weight:700}
.page-sub{font-size:19px;color:var(--slate);max-width:680px}
h2{color:var(--navy);letter-spacing:-.01em}

/* cards / panels */
.card{position:relative;border:1px solid var(--line);border-radius:14px;padding:28px;background:#fff;transition:transform .2s,box-shadow .2s}
.panel{border:1px solid var(--line);border-radius:14px;background:#fff;padding:30px}

/* forms */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:6px;font-family:var(--mono);letter-spacing:.02em}
.field input{width:100%;font-family:var(--sans);font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,147,168,.14)}
.form-note{font-size:13.5px;color:var(--slate-2);margin-top:4px}
.msg{padding:11px 14px;border-radius:9px;font-size:14px;margin-bottom:16px;display:none}
.msg.err{display:block;background:#fdecea;color:#b3261e;border:1px solid #f5cdc8}
.msg.ok{display:block;background:#e7f4ed;color:#1c6b43;border:1px solid #bfe3cd}

/* auth layout */
.auth-wrap{max-width:440px;margin:54px auto;padding:0 24px}
.auth-card{border:1px solid var(--line);border-radius:16px;padding:36px;background:#fff;box-shadow:0 30px 70px -40px rgba(14,40,70,.4)}
.auth-card h1{font-size:24px;color:var(--navy);margin:0 0 6px}
.auth-card .lead{color:var(--slate);font-size:15px;margin:0 0 24px}
.auth-alt{text-align:center;margin-top:18px;font-size:14.5px;color:var(--slate)}

/* footer */
footer{background:var(--hero-1);color:#9fb0c4;padding:46px 0;margin-top:70px}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);color:#fff;font-weight:600;font-size:18px}
.foot-brand img{height:28px}
.foot-brand .u{color:var(--cyan)}
footer a{color:#bcd0e6}
footer a:hover{color:var(--cyan)}

/* mobile nav — hamburger toggle injected by /assets/nav.js */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;margin:-8px -8px -8px 0;padding:8px;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--navy);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 28px -16px rgba(14,22,32,.4);display:none}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:13px 22px}
  .nav-links a.btn{margin:8px 22px 10px;justify-content:center}
  /* One menu, not two. The mobile dropdown already holds everything, so the
     overflow button would be a second hamburger next to the first. */
  .nav-more{display:none}
  .nav-links a.secondary{display:block}
  /* A hairline where the primary links end and the rest begin, so the dropdown
     reads as two groups rather than one long undifferentiated list. */
  .nav-links a.secondary:first-of-type{border-top:1px solid var(--line);margin-top:6px;padding-top:15px}
}