/* ============================================================
   chrome.css — shared page-shell layout
   ------------------------------------------------------------
   Containers, top dateline strip, sticky nav, footer,
   and the back-to-top FAB. These are the bits a master page
   would own.
   ------------------------------------------------------------
   Depends on: tokens.css, base.css (for .btn family).
   ------------------------------------------------------------
   Per-page width override:
     The homepage uses a wider 1240px container — that override
     lives in pages/homepage.css, not here.
   ============================================================ */

/* ------------------------------------------------------------
   Containers
   ------------------------------------------------------------ */
.container        { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width:  860px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) {
  .container        { padding: 0 20px; }
  .container-narrow { padding: 0 20px; }
}

/* ------------------------------------------------------------
   Dateline strip — thin dark bar at the very top of the page.
   Present on every page in the bundle except homepage (which
   uses .live-ticker instead — that lives in pages/homepage.css).
   ------------------------------------------------------------ */
.rtg-dateline {
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Pin to 1180px regardless of page-level .container width override
   (homepage uses 1240px for its hero composition). Higher specificity
   .container.rtg-dateline-inner beats .container on its own, so this
   wins everywhere without needing per-page tweaks. Kills the rail
   jump on navigation. */
.container.rtg-dateline-inner {
  display: flex; align-items: center;
  height: 36px;
  overflow: hidden; white-space: nowrap;
  max-width: 1180px;
}
.rtg-dl-cell {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 100%;
  border-right: 1px solid rgba(255,255,255,0.10);
  white-space: nowrap;
  color: rgba(255,255,255,0.62);
}
.rtg-dl-cell:first-child { padding-left: 0; }
.rtg-dl-place {
  color: #fff; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.rtg-dl-tag {
  color: rgba(255,255,255,0.75);
  font-weight: 500; letter-spacing: 0.04em;
  margin-left: auto;
  border-right: none;
}
.rtg-dl-sep { color: rgba(255,255,255,0.30); margin: 0 6px; }

@media (max-width: 960px) { .rtg-dl-tag  { display: none; } }
@media (max-width: 720px) {
  .rtg-dateline               { font-size: 10px; }
  .rtg-dl-cell                { padding: 0 12px; }
  .rtg-dl-cell:nth-child(2)   { display: none; }
}

/* ------------------------------------------------------------
   Sticky nav — solid white at all times, regardless of the
   section behind it (no dark-section bleed-through).
   ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* Same rail-pinning trick: nav-inner stays at 1180px even when the
   surrounding .container is overridden wider on a page (homepage). */
.container.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  max-width: 1180px;
}
.nav-logo img { height: 40px; width: auto; display: block; }

.nav-links {
  display: flex; gap: 30px;
  font-size: 14px; font-weight: 500;
}
.nav-links a          { color: var(--ink); }
.nav-links a:hover    { color: var(--slate-blue); }
.nav-links a.active   { color: var(--slate-blue); font-weight: 600; }

.nav-cta {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 600;
}
.nav-cta a.signin { color: var(--ink); }

/* Dashboard button — applied by codebehind when user is authenticated.
   Self-contained so it doesn't depend on .btn/.btn-primary cascading. */
.nav-cta a.signin-dashboard {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--slate-blue);
  color: #fff;
  border: 1px solid var(--slate-blue);
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-cta a.signin-dashboard:hover {
  background: var(--slate-blue-deep);
  color: #fff;
  border-color: var(--slate-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(61,90,122,0.30);
}

/* ------------------------------------------------------------
   Mobile nav. Below 880px the links collapse behind a burger.
   Before 2026-08-06 they were simply display:none with nothing
   replacing them, so every marketing page was unreachable on a
   phone. .nav is position:sticky, which makes it the containing
   block for the absolutely positioned panel below.
   ------------------------------------------------------------ */
.nav-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.nav-burger:hover { border-color: var(--ink); }
.nav-burger .nav-burger-x { display: none; }
/* !important throughout, because the button and the X icon also carry an
   inline display:none. That inline style is the fail-safe: if this file is
   stale in a visitor's cache, the burger stays hidden and the header looks
   exactly as it did before, rather than showing a stray double-icon button.
   Only these rules, once loaded, are allowed to reveal it. */
.nav-burger[aria-expanded="true"] .nav-burger-bars { display: none !important; }
.nav-burger[aria-expanded="true"] .nav-burger-x    { display: block !important; }

/* Sign-in inside the panel. Only shown when the panel exists, since
   the .nav-cta sign-in is dropped on the narrowest screens. */
.nav-signin-mob { display: none; }

/* Signed-in visitors keep their Dashboard button in the header (the codebehind
   swaps .signin for .signin-dashboard, which is why the narrow-screen hide
   below stops matching for them). Drop the panel's sign-in entry in that state
   so the menu never offers Sign in to someone already signed in.
   If :has() is unavailable the entry simply remains, which is the old
   behaviour rather than a break. */
.nav-inner:has(.signin-dashboard) .nav-signin-mob { display: none !important; }

@media (max-width: 880px) {
  .nav-burger { display: inline-flex !important; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px -22px rgba(15, 23, 42, 0.45);
    padding: 6px 0 10px;
  }
  .nav.nav-open .nav-links { display: flex; }
  .nav-links a {
    padding: 13px 20px;
    font-size: 15px;
  }
  .nav-links a:hover { background: var(--bg-soft); }
  .nav-signin-mob {
    display: block;
    margin-top: 6px;
    border-top: 1px solid var(--line-soft);
    color: var(--slate-blue);
  }
}

/* Narrow phones: the header is full at 375px once the burger is in,
   so drop the .nav-cta sign-in (it lives in the panel) and shrink
   the logo. The trial button always stays: it is the conversion path. */
@media (max-width: 560px) {
  .nav-logo img { height: 32px; }
  .nav-cta a.signin { display: none; }
  .nav-cta { gap: 10px; }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  color: var(--muted); font-size: 13.5px;
}
.footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand           { max-width: 420px; flex: 1 1 280px; }
.footer-brand img       { height: 44px; margin-bottom: 16px; display: block; }
.footer-tag {
  font-size: 13px; color: var(--muted);
  line-height: 1.55; max-width: 320px;
}

/* Footer social icons — X + LinkedIn, sit under the brand tag */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.footer-social a:hover {
  color: var(--slate-blue);
  border-color: var(--slate-blue);
  background: #fff;
  transform: translateY(-1px);
}
.footer-social svg {
  width: 14px;
  height: 14px;
}
.footer-nav {
  display: flex; flex-wrap: wrap;
  gap: 28px; align-items: center;
  font-size: 14px; font-weight: 600;
  padding-top: 12px;
}
.footer-nav a       { color: var(--muted); }
.footer-nav a:hover { color: var(--ink); }
@media (max-width: 880px) {
  .footer-grid { gap: 24px; }
  .footer-nav  { padding-top: 0; gap: 20px; }
}

/* Three-column footer layout — LEARN / GET STARTED / RESOURCES.
   Each column has a mono uppercase label + a vertical nav stack.
   Columns wrap on narrow viewports. */
.footer-cols {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-blue);
}
.footer-col .footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0;
  align-items: flex-start;
}
@media (max-width: 720px) {
  .footer-cols { gap: 36px; }
}
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 28px;
  display: flex; justify-content: space-between;
  align-items: center;
  font-size: 12.5px; color: var(--faint);
  flex-wrap: wrap; gap: 12px;
}

/* ------------------------------------------------------------
   Back-to-top FAB
   ------------------------------------------------------------ */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: var(--slate-blue);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 10px 28px -4px rgba(61,90,122,0.45),
    0 4px 10px -2px rgba(15,23,42,0.15);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, visibility 0s linear 0.25s;
  z-index: 80;
}
.back-to-top.is-visible {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, visibility 0s;
}
.back-to-top:hover {
  background: var(--slate-blue-deep);
  transform: translateY(-3px);
}
.back-to-top svg {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 2.4;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 720px) {
  .back-to-top { width: 40px; height: 40px; bottom: 20px; right: 20px; }
}


/* ============================================================
   VIDEO MODAL — opens when any [data-open-video] is clicked.
   Markup lives on Landing.Master today (homepage demo video),
   but the CSS + JS in chrome.js are shared, so the same modal
   pattern works on any page that drops a play-overlay + a
   #videoModal block.

   Aspect ratio is locked to 16:9 via padding-bottom on
   .video-modal-frame (Vimeo, YouTube, and self-hosted MP4s all
   use this ratio by default).
   ============================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal[hidden] {
  display: none;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 34, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.video-modal-content {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.video-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;                 /* above the video frame (same stacking context) */
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 34, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.video-modal-close:hover { opacity: 1; background: rgba(15, 23, 34, 0.85); }
.video-modal-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}
.video-modal-frame iframe,
.video-modal-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Accessibility helper used by the modal heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   CUSTOMER QUOTE — anonymous testimonial block, used inside
   content sections on landing pages + main marketing pages.
   Slate-tinted background, red left-border accent, Fraunces
   italic for the quote, JetBrains Mono caps for attribution.
   ============================================================ */
.lp-quote {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--bg-soft, #f7f8fa);
  border-left: 4px solid var(--red);
  border-radius: 0 10px 10px 0;
}
.lp-quote p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 12px;
}
.lp-quote .lp-quote-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ============================================================
   FINAL CTA + TRUST STRIP — canonical pattern across pages.
   Each page-css can still override .final-cta for bespoke
   background gradients or sizing; these defaults give any
   page that drops a .final-cta block the brand-correct shape
   (centered, red Fraunces italic accent, slate-tinted bg).
   ============================================================ */
.final-cta {
  padding: 96px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(61,90,122,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(220,38,38,0.06) 0%, transparent 50%),
    var(--bg);
}
.final-cta h2 {
  font-size: 56px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.05em;
  line-height: 1.0; margin: 0 auto 22px;
  max-width: 800px;
}
.final-cta h2 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .final-cta h2 { font-size: 40px; } }
.final-cta p {
  font-size: 18px; color: var(--body);
  line-height: 1.55;
  max-width: 600px; margin: 0 auto 36px;
}

.final-ctas {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}
.final-trust {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 860px;
  margin-left: auto; margin-right: auto;
}
@media (max-width: 720px) { .final-trust { grid-template-columns: 1fr; } }
.final-trust-item {
  display: flex; align-items: flex-start; gap: 14px;
  text-align: left;
}
.final-trust-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--slate-blue-soft);
  color: var(--slate-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.final-trust-icon.red {
  background: var(--red-wash); color: var(--red);
}
.final-trust-icon svg { width: 18px; height: 18px; }
.final-trust strong {
  display: block; font-size: 14.5px; font-weight: 800;
  color: var(--ink); margin-bottom: 3px;
}
.final-trust span { font-size: 13px; color: var(--muted); }
.final-trust a { color: inherit; }


/* ════════════════════════════════════════════════════════════════
   RTG FIREBIRD — the look-ahead band. SHARED: used by the homepage
   (Landing.Master) and the Product page (Product.aspx), which is why
   it lives here in chrome.css rather than in either page stylesheet.
   Any public page can use it with markup alone.

   DELIVERY RULES for the copy inside it, do not soften them:
   clearly FUTURE and never implied as shipped · NO pricing · no dates
   beyond the year · no internal wireframe imagery · Kaia by name,
   never the model.
   ════════════════════════════════════════════════════════════════ */
.fb-look {
  background: var(--ink);
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}
/* Ember: a warm glow under the wordmark that slowly breathes and rises.
   Decorative only, sits behind the content, honors reduced-motion below. */
.fb-look::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse 50% 55% at 50% 60%,
              rgba(220,38,38,0.20) 0%,
              rgba(220,38,38,0.06) 45%,
              transparent 70%);
  animation: fb-ember 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fb-ember {
  0%, 100% { opacity: 0.5; transform: scale(1)    translateY(0); }
  50%      { opacity: 1;   transform: scale(1.12) translateY(-2%); }
}
.fb-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.fb-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.fb-title {
  font-size: 44px; font-weight: 900;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 20px;
}
.fb-title .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
/* A slow light sweep across "Firebird". Guarded by @supports so the word is
   never rendered transparent on an engine without background-clip: text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fb-title .accent {
    background-image: linear-gradient(100deg,
                      var(--red) 0%,   var(--red) 44%,
                      #fca5a5 50%,
                      var(--red) 56%,  var(--red) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: fb-shimmer 7s linear infinite;
  }
}
@keyframes fb-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* Motion is decorative here; drop it entirely when the visitor asks. */
@media (prefers-reduced-motion: reduce) {
  .fb-look::before { animation: none; opacity: 0.7; }
  .fb-title .accent {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--red);
    color: var(--red);
  }
}
.fb-dek {
  font-size: 18px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 28px;
}
.fb-dek strong { color: #fff; font-weight: 600; }
.fb-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #94a3b8;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 20px;
}
.fb-mark b { color: #fff; font-weight: 700; }
@media (max-width: 720px) {
  .fb-look  { padding: 58px 0; }
  .fb-title { font-size: 32px; }
  .fb-dek   { font-size: 16px; }
  .fb-mark  { flex-direction: column; gap: 4px; line-height: 1.5; }
}