/* ─────────────────────────────────────────────────────────────────────────────
   NIRAVI BRAND SYSTEM — brand.css
   The Inside system (inside.niravi.io), ported verbatim from
   niravi-inside/public/room/room.css. Inside is THE reference for the wordmark,
   the navbar and anything else that carries the brand.

   THE RULE, from room.css line 11:
     The wordmark is MONOCHROME (one ink colour); violet is interactive-only.

   Three consequences, all of which are easy to undo by accident:
     1. Never put a gradient through the mark or the word. That is the webapp's
        system, and it spends colour on the name, leaving nothing to signal with.
     2. Violet appears at rest ONLY on the current nav item. Everywhere else it
        is a hover/active state.
     3. On brand hover, ONLY the mark fills violet. The wordmark does not move.
        (Some specimens show the word colouring too — room.css does not, and
        room.css wins.)

   Light is :root default; [data-theme="dark"] overrides token-by-token, same as
   Inside. Loaded alongside theme.css, which is the older glass/gradient system
   still driving the marketing page body.
   ───────────────────────────────────────────────────────────────────────────*/

/* ══ WHERE VIOLET IS ALLOWED ═════════════════════════════════════════════
   Violet is Inside's interactive colour, and Inside is a gated document room.
   On the marketing site the house is Arrow's, whose single accent is amber —
   so AMBER carries every action and violet would be a second, competing
   "this is clickable" signal.

   Violet survives in exactly one place: the mark filling on brand hover. That
   is the identity, not an action, and it is the detail the brand is built on.
   ──────────────────────────────────────────────────────────────────────────*/

/* ══ tokens ══════════════════════════════════════════════════════════════ */
:root{
  --nv-bg:#f7f6f3; --nv-fg:#18161c; --nv-dim:#6b6770; --nv-dim-2:#a49fa9; --nv-body:#3c3944;
  --nv-accent:#7c3aed; --nv-accent-mute:#c4b5fd;
  --nv-accent-soft:rgba(124,58,237,.07); --nv-accent-line:rgba(124,58,237,.34);
  --nv-rule:#e8e5df; --nv-panel:#ffffff; --nv-glass:rgba(247,246,243,.94);

  --nv-font-display:"Fraunces",Georgia,serif;
  --nv-font-body:"Hanken Grotesk",system-ui,sans-serif;
  --nv-font-mono:"JetBrains Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --nv-bg:#141216; --nv-fg:#ece7df; --nv-dim:#9a938a; --nv-dim-2:#6d6775; --nv-body:#c9c3cd;
  --nv-accent:#a78bfa; --nv-accent-mute:#8f78d6;
  --nv-accent-soft:rgba(167,139,250,.10); --nv-accent-line:rgba(167,139,250,.38);
  --nv-rule:#2b2831; --nv-panel:#1d1a21; --nv-glass:rgba(20,18,22,.90);
}

/* ══ the lockup ══════════════════════════════════════════════════════════
   Inside's metrics: 20px mark : 19px type, 10px gap, Fraunces 600, −0.01em.

   The mark SVG keeps the LOOSE viewBox (89.82 140 512 512) on purpose — the
   drawing fills ~62% of it, so a 20px box renders ~12.4px of ink. That padding
   IS Inside's optical size. Do not tight-crop this one to "fix" it; you would
   make the mark 60% larger than every other Niravi surface.
   (The favicon is the opposite case — see references/brand/README.md.)
   ──────────────────────────────────────────────────────────────────────────*/
.nv-brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.nv-brand .mk{width:20px;height:20px;display:block;flex:none}
.nv-brand .mk path{fill:var(--nv-fg);transition:fill .3s}
.nv-brand:hover .mk path{fill:var(--nv-accent)}
.nv-brand:focus-visible{outline:2px solid var(--nv-accent);outline-offset:3px;border-radius:4px}
/* the word is inert: monochrome at rest, monochrome on hover */
.nv-wordmark{font-family:var(--nv-font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--nv-fg)}

/* scale the whole lockup by overriding one number */
.nv-brand[data-size="lg"] .mk{width:30px;height:30px}
.nv-brand[data-size="lg"] .nv-wordmark{font-size:28px}
.nv-brand[data-size="sm"] .mk{width:17px;height:17px}
.nv-brand[data-size="sm"] .nv-wordmark{font-size:16px}

/* ══ topbar ══════════════════════════════════════════════════════════════
   Sticky, full-bleed glass rule behind a constrained row. The ::before is what
   lets the blur run edge-to-edge while the content stays in the container.
   ──────────────────────────────────────────────────────────────────────────*/
.nv-topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--nv-rule);
}
.nv-topbar::before{
  content:"";position:absolute;top:0;bottom:-1px;left:50%;margin-left:-50vw;width:100vw;
  background:var(--nv-glass);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--nv-rule);
}
.nv-topbar>*{position:relative;z-index:1}
.nv-topbar-inner{max-width:var(--nv-measure,1100px);margin:0 auto;padding:0 clamp(20px,5vw,48px);
  display:flex;align-items:center;gap:20px;width:100%;
  /* flex items default to min-width:auto and refuse to shrink below their
     content — which pushed the bar past the viewport on a phone. */
  min-width:0}

/* ══ section nav ═════════════════════════════════════════════════════════ */
.nv-nav{display:flex;align-items:center;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.nv-nav::-webkit-scrollbar{display:none}
.nv-nav a{
  font-family:var(--nv-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nv-dim);padding:7px 11px;border-radius:6px;white-space:nowrap;text-decoration:none;
  transition:color .15s,background .15s;
}
.nv-nav a:hover{color:var(--nv-fg);background:var(--nv-accent-soft)}
.nv-nav a.on{color:var(--arw-amber,#d98a1e);background:rgba(217,138,30,.10)}
.nv-nav a:focus-visible{outline:2px solid var(--nv-fg);outline-offset:-2px}

/* ══ CTA ═════════════════════════════════════════════════════════════════ */
.nv-cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:8px 15px;border-radius:7px;
  background:var(--nv-accent);color:#fff;text-decoration:none;
  font-family:var(--nv-font-mono);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  transition:background .2s;
}
.nv-cta:hover{background:#8b4ff0}
/* the button is already accent-filled, so the ring must be ink, not accent */
.nv-cta:focus-visible{outline:2px solid var(--nv-fg);outline-offset:2px}
/* solid violet reads better than the lifted dark accent on a filled button */
:root[data-theme="dark"] .nv-cta{background:#7c3aed;color:#fff}
:root[data-theme="dark"] .nv-cta:hover{background:#8b4ff0}

/* ══ type scale ══════════════════════════════════════════════════════════ */
.nv-eyebrow{font-family:var(--nv-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--nv-dim)}
.nv-h1{font-family:var(--nv-font-display);font-weight:600;font-size:clamp(38px,6vw,64px);letter-spacing:-.025em;color:var(--nv-fg);line-height:1.02}
.nv-thesis{font-family:var(--nv-font-display);font-weight:500;font-style:italic;font-size:clamp(17px,2.2vw,22px);color:var(--nv-dim);letter-spacing:-.01em}
.nv-mono{font-family:var(--nv-font-mono)}
.nv-tnum{font-variant-numeric:tabular-nums}

/* ══ the phone menu ══════════════════════════════════════════════════════
   The section links used to be thinned below 620px and hidden entirely below
   430px, which left a phone with no way to reach any other page. They now
   collapse into a disclosure panel instead. */
.nv-burger{display:none;flex:none;width:36px;height:36px;padding:0;border:0;background:none;
  cursor:pointer;position:relative;border-radius:7px}
.nv-burger span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--nv-fg);
  transition:transform .22s,opacity .22s}
.nv-burger span:nth-child(1){top:14px}
.nv-burger span:nth-child(2){top:20px}
.nv-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nv-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.nv-burger:focus-visible{outline:2px solid var(--nv-fg);outline-offset:2px}
.nv-nav-cta{display:none}

@media (max-width:760px){
  .nv-burger{display:block;margin-left:auto}
  .nv-arrowbtn.nv-bar-cta{display:none}
  .nv-topbar-inner{position:relative}
  .nv-nav{
    display:none;position:absolute;top:calc(100% + 13px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;overflow:visible;
    background:var(--nv-glass);backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--nv-rule);border-radius:11px;padding:8px;
    box-shadow:0 22px 48px rgba(20,16,8,.14);
  }
  .nv-nav.open{display:flex}
  .nv-nav a{font-size:12.5px;padding:11px 12px}
  /* .nv-nav a (0,1,1) beats a bare .nv-nav-cta (0,1,0), so qualify it */
  .nv-nav a.nv-nav-cta{
    display:block;margin-top:5px;text-align:center;
    background:var(--arw-amber,#d98a1e);color:#fff;border-radius:7px;
    font-family:var(--nv-font-mono);font-size:11px;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;padding:12px;
  }
  .nv-nav a.nv-nav-cta:hover{background:#c67c16;color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .nv-brand .mk path,.nv-nav a,.nv-cta{transition:none}
}

/* footer wordmark: same system, one size down. Monochrome — it replaced a
   gradient, which is the thing room.css line 11 exists to prevent. */
.footer-wordmark{font-size:18px}

/* ══ footer, light skin ══════════════════════════════════════════════════
   Used when the page does not load theme.css. Same measure as .nv-topbar-inner
   so the wordmark lines up with the one in the bar above it.
   ──────────────────────────────────────────────────────────────────────────*/
.nv-footer{border-top:1px solid var(--nv-rule);margin-top:0}
.nv-footer .footer-inner{
  max-width:var(--nv-measure,940px);margin:0 auto;
  padding:26px clamp(20px,5vw,48px) 30px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px 24px;
}
.nv-footer .footer-left{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.nv-footer .footer-copy{font-size:13.5px;color:var(--nv-dim)}
.nv-footer .footer-copy a{color:var(--nv-dim);text-decoration:none}
.nv-footer .footer-copy a:hover{color:var(--nv-fg)}
.nv-footer .footer-links{display:flex;gap:20px;flex-wrap:wrap}
.nv-footer .footer-links a{
  font-family:var(--nv-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nv-dim);text-decoration:none;transition:color .15s;
}
.nv-footer .footer-links a:hover{color:var(--nv-accent)}
.nv-footer a:focus-visible{outline:2px solid var(--nv-accent);outline-offset:3px;border-radius:4px}


/* ══ Arrow's components, inherited ═══════════════════════════════════════
   From arrow/site/index.html. The company page and the product page should
   read as one house, so the devices come across rather than being reinvented.
   ──────────────────────────────────────────────────────────────────────────*/

/* The notched button — Arrow's signature shape, a chevron cut into the right
   edge. It is the brand's one piece of geometry; do not round it. */
.nv-arrowbtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 34px 14px 24px;border:0;cursor:pointer;text-decoration:none;
  background:var(--arw-amber,#d98a1e);color:#fff;
  font-family:var(--nv-font-body);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
  border-radius:0;transition:background .2s;
}
.nv-arrowbtn:hover{background:#c67c16}
.nv-arrowbtn:focus-visible{outline:2px solid var(--nv-fg);outline-offset:3px}
.nv-arrowbtn.ghost{
  background:transparent;color:var(--nv-fg);
  box-shadow:inset 0 0 0 1px var(--nv-rule);
  clip-path:none;border-radius:999px;padding:14px 24px;
}
.nv-arrowbtn.ghost:hover{background:rgba(0,0,0,.04)}

/* The spec line — small, mono, under the CTA. Facts that answer the three
   questions a download page gets asked before anyone clicks. */
.nv-spec{font-family:var(--nv-font-mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--nv-dim-2);margin-top:18px}

/* The window frame — a dark app shot dropped into a light page. This is where
   the page gets its contrast, and where amber sits at full strength because on
   #121214 it clears AA with room to spare. */
.nv-frame{
  margin:0 auto;border:1px solid #26262a;border-radius:14px;background:#121214;
  box-shadow:0 50px 120px rgba(20,16,8,.28);overflow:hidden;position:relative;
}
.nv-frame .bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid #26262a}
.nv-frame .bar i{width:11px;height:11px;border-radius:50%;background:#3a3a40;display:block}
.nv-frame .bar span{margin:0 auto;font-family:var(--nv-font-mono);font-size:11.5px;color:#6a6a72;
  transform:translateX(-24px)}


/* the small notched button, for the bar */
.nv-arrowbtn.sm{padding:9px 26px 9px 16px;font-size:13px;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}