/* ────────────────────────────────────────────────────────────
   Team — Nav stylesheet
   Auto-injected by components/nav.js (mirrors footer.css/footer.js).
   Holds all base nav styles so Webflow / external pages get a
   correctly styled nav without duplicating CSS in every page.
   ──────────────────────────────────────────────────────────── */

/* Nyght Serif — italic accent face used across the site for the
   "stylised" portion of headlines and the .nyght utility class.
   Hosted on the team-nomorechaos repo (already public, already used
   by older Webflow landing pages). */
@font-face{
  font-family:"Nyght Serif";font-weight:500;font-style:italic;font-display:swap;
  src:url("https://raw.githubusercontent.com/siteamrollouts/team-nomorechaos/main/NyghtSerif-MediumItalic.woff2") format("woff2");
}
@font-face{
  font-family:"Nyght Serif";font-weight:300;font-style:italic;font-display:swap;
  src:url("https://raw.githubusercontent.com/siteamrollouts/team-nomorechaos/main/NyghtSerif-LightItalic.woff2") format("woff2");
}
.nyght{font-family:"Nyght Serif",Georgia,serif;font-style:italic;font-weight:300}

/* Inline arrow SVGs across the site rely on stroke + fill:none to render
   as line arrows instead of filled triangles. Webflow can strip those
   inline attributes on insertion, so we enforce them here too. */
.about-cta__link svg,.about-cta__link svg *,
.role-item__link svg,.role-item__link svg *,
.trust-section__link svg,.trust-section__link svg *{fill:none !important;stroke:currentColor !important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Token fallbacks — host pages may already define these in :root,
   but we also define them here so a Webflow page with no other
   CSS still has the colours the nav references. */
:root{
  --black:#191919;
  --white:#fff;
  --grey:#E0E0E0;
  --bg:#FAFAFA;
  --accent:#F56002;
  --text-secondary:#454545;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* Webflow's default a{text-decoration:underline} beats the per-element
   resets below by source order. Force it off for everything inside the nav. */
.nav a,.nav-blur-overlay a{text-decoration:none !important}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0.875rem 2rem;display:flex;align-items:center;justify-content:space-between;max-width:80rem;margin:0 auto;transition:transform 0.35s cubic-bezier(0.4,0,0.2,1)}
.nav.nav--hidden{transform:translateY(calc(-100% - 1rem))}
.nav__pill{display:flex;align-items:center;gap:0.25rem;padding:0.375rem 0.5rem;border-radius:100px;background:rgba(255,255,255,0.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);transition:background 0.35s,border-color 0.35s}
.nav--solid .nav__pill{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.06)}
.nav__logo{display:flex;align-items:center;padding:0 0.5rem}
.nav__logo img{height:1.125rem;transition:filter 0.3s,opacity 0.3s}
.nav__logo .logo-light{position:absolute}
.nav__logo .logo-dark{opacity:0}
.nav--solid .nav__logo .logo-light{opacity:0}
.nav--solid .nav__logo .logo-dark{opacity:1;position:relative}
.nav__link{font-size:0.8125rem;font-weight:500;padding:0.5rem 0.875rem;border-radius:100px;color:rgba(255,255,255,0.85);white-space:nowrap;display:flex;align-items:center;gap:0.25rem;transition:color 0.2s,background 0.2s;cursor:pointer;text-decoration:none}
.nav__link:hover{color:#fff;background:rgba(255,255,255,0.1)}
.nav--solid .nav__link{color:var(--text-secondary)}
.nav--solid .nav__link:hover{color:var(--black);background:rgba(0,0,0,0.04)}
.nav__link svg{width:10px;height:10px;opacity:0.6}
.nav__login{font-size:0.8125rem;font-weight:500;padding:0.5rem 1rem;border-radius:100px;color:rgba(255,255,255,0.85);white-space:nowrap;border:1px solid rgba(255,255,255,0.3);transition:color 0.2s,border-color 0.2s,background 0.2s;text-decoration:none}
.nav__login:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.nav--solid .nav__login{color:var(--black);border-color:rgba(0,0,0,0.15)}
.nav--solid .nav__login:hover{border-color:var(--black)}
a.nav__cta{display:inline-flex;align-items:center;justify-content:center;font-size:0.8125rem;font-weight:600;line-height:1;padding:0.625rem 1.25rem;border-radius:100px;white-space:nowrap;text-decoration:none;color:#fff;background:#111110;border:1px solid transparent;transition:all 0.3s ease}
a.nav__cta:hover{color:#111 !important;background:rgba(255,255,255,0.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,0.5);box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.nav--solid a.nav__cta{color:var(--black);background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.1);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.nav--solid a.nav__cta:hover{color:var(--black);background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.18);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.nav__divider{width:1px;height:1rem;background:rgba(255,255,255,0.15);margin:0 0.125rem}
.nav--solid .nav__divider{background:rgba(0,0,0,0.08)}
.nav__dropdown{position:relative}
.nav__dropdown>.nav__link{cursor:pointer}
.nav__dropdown>.nav__link svg{transition:transform 0.25s}
.nav__dropdown.is-open>.nav__link svg{transform:rotate(180deg)}
.nav__dropdown-panel{position:absolute;top:calc(100% + 0.75rem);left:0;display:flex;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0.75rem;box-shadow:0 12px 48px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.06);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 0.25s ease,visibility 0.25s ease,transform 0.25s ease;z-index:100;min-width:36rem;overflow:hidden}
.nav__dropdown.is-open .nav__dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__dropdown-left{flex:1;padding:1.5rem;display:flex;flex-direction:column;gap:0.25rem}
.nav__dropdown-item{display:block;padding:0.75rem 1rem;border-radius:0.5rem;transition:background 0.15s;text-decoration:none}
.nav__dropdown-item:hover{background:rgba(0,0,0,0.03)}
.nav__dropdown-item-title{font-size:0.875rem;font-weight:600;color:var(--black);margin-bottom:0.125rem}
.nav__dropdown-item-desc{font-size:0.8125rem;color:var(--text-secondary);line-height:1.4}
.nav__dropdown-right{width:16rem;background:var(--black);padding:1.5rem;display:flex;flex-direction:column;gap:0.125rem;border-radius:0 0.75rem 0.75rem 0}
.nav__dropdown-featured-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.4);padding:0.5rem 0.75rem;margin-bottom:0.25rem;display:flex;align-items:center;gap:0.5rem}
.nav__dropdown-featured-label::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5)}
.nav__dropdown-featured-link{display:block;font-size:0.9375rem;font-weight:500;color:rgba(255,255,255,0.75);padding:0.625rem 0.75rem;border-radius:0.375rem;transition:color 0.15s,background 0.15s;text-decoration:none}
.nav__dropdown-featured-link:hover{color:#fff;background:rgba(255,255,255,0.08)}
.nav-blur-overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,0.1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.35s ease,visibility 0.35s ease}
.nav-blur-overlay.is-active{opacity:1;visibility:visible}
@media(max-width:768px){
  .nav{padding:0.75rem 1rem}
  .nav__pill--left .nav__link,.nav__pill--left .nav__dropdown{display:none}
  .nav__pill--right .nav__link,.nav__pill--right .nav__divider{display:none}
  .nav__login{display:none}

  /* CX-49 r5 — Mobile nav scroll behaviour (site-wide).
     At top of page: keep the existing transparent state.
     On scroll past hero: stay always visible (no hide-on-scroll-down)
     and switch to a single full-width frosted-glass bar — the inner
     pill bubble around "Start free" + burger melts away so the bar
     itself carries the chrome. Calmer, slicker, CTA always reachable. */

  /* Always visible — kill the slide-up-on-scroll-down behaviour. */
  .nav.nav--hidden { transform: none !important; }

  /* Past-hero state: full-width frosted bar, drop the right pill chrome. */
  .nav.nav--solid {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: background 0.25s ease, backdrop-filter 0.25s ease, padding 0.25s ease;
  }
  .nav.nav--solid .nav__pill--right {
    background: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0.5rem;
  }
  /* Burger keeps a subtle hover hit-area now that the surrounding pill
     is gone in solid mode. */
  .nav.nav--solid .nav__burger:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

/* ────────────────────────────────────────────────────────────
   Mobile safety nets (site-wide)
   Loaded everywhere because nav.js auto-injects nav.css.
   These are conservative — they only correct universal problems
   (horizontal overflow, oversized media) without overriding any
   page-specific layout decisions.
   ──────────────────────────────────────────────────────────── */
html,body{overflow-x:hidden}
body{max-width:100vw}
img,video,picture,iframe,canvas{max-width:100%;height:auto}
/* Nav logos are small fixed-height icons — opt out of the default. */
.nav__logo img,.footer__logo svg,.footer__logo img{max-width:none;height:auto}
/* Word-break long unbroken strings (URLs, IDs) so they don't push the
   layout horizontally on narrow screens. */
.legal-content,.changelog-entry,.about-mission__copy,.insights-article{word-wrap:break-word;overflow-wrap:break-word}

@media (max-width: 768px) {
  /* Tap targets: ensure all interactive elements meet ~44px minimum. */
  .nav__cta,.btn,.btn--primary,.btn--ghost,.btn--outline,.btn--white{min-height:2.75rem}
  /* Forms — never let inputs overflow on phones. */
  input,select,textarea{max-width:100%}
  /* Generic body-text scaling — small downshift for very narrow screens. */
  body{font-size:0.95rem}
}
@media (max-width: 480px) {
  /* Headings on tiny screens. clamp() in page CSS already handles
     most cases; this is a final clamp ceiling. */
  h1{font-size:clamp(1.875rem,8vw,2.75rem)}
  h2{font-size:clamp(1.5rem,6vw,2.25rem)}
}

/* ────────────────────────────────────────────────────────────
   Mobile tab-strips — generic pattern fix
   Several pages use centered horizontal pill strips that don't
   actually scroll on mobile because justify-content:center
   centres the overflowing content rather than making it scrollable.
   On <=768px we flip to start-aligned and bleed the strip to the
   viewport edges with a soft mask, so users get an obvious
   horizontal-scroll affordance.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .roles-tabs,
  .icp-nav,
  .term-selector,
  .pricing-toggle__group {
    justify-content: flex-start !important;
    padding-inline: 1.5rem;
    margin-inline: -1.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}