/* Self-hosted Libre Franklin — no CDN, per the brief. Drop the two woff2 files
   into public/fonts/ (variable roman + italic); see fonts/README.md. */
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin.woff2") format("woff2-variations"),
       url("/fonts/libre-franklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-italic.woff2") format("woff2-variations"),
       url("/fonts/libre-franklin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* The approved design overrode every IBM Plex Mono declaration with Libre Franklin
   600 at .1em tracking — one typeface, no second family downloaded. */
[style*="Plex Mono"] {
  font-family: "Libre Franklin", sans-serif !important;
  letter-spacing: .1em !important;
  font-weight: 600 !important;
}

body { margin:0; background:#0e0d0c; font-family:"Libre Franklin", sans-serif; }

a { color:#fb6323; text-decoration:none; }

a:hover { color:#ff8047; }

::selection { background:#fb6323; color:#fff; }

/* Dropdown open state — descendant pseudo-state, cannot be inline. */
  [data-lang-item]:hover > [data-lang-panel] { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; }

[data-nav-item]:hover > [data-nav-panel] { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; }

[data-nav-item]:hover > svg { transform:rotate(180deg); }

[data-nav-link]:hover { background:rgba(255,255,255,.05); }

[data-nav-link], [data-nav-link] span:first-child { transition: color .16s ease; }

[data-nav-link]:hover, [data-nav-link]:hover span:first-child { color:#fb6323 !important; }

/* Hover feedback. Nav items take the accent; buttons lift and deepen. Transitions
     are declared on the resting state so both directions ease. */
  [data-nav-item] > span, [data-nav-lang] > span, [data-lang-panel] a span,
  [data-footcol] a, [data-m="allrooms"], [data-kb-link] {
    transition: color .16s ease;
  }

[data-nav-item]:hover > span { color:#fb6323; }

[data-nav-lang]:hover > span,
  [data-lang-panel] a:hover span, [data-footcol] a:hover { color:#fb6323 !important; }

[data-m="allrooms"]:hover, [data-kb-link]:hover { color:#ff8047 !important; }

[data-legal] a { transition: color .16s ease; }

[data-legal] a:hover { color:#fb6323 !important; }

/* Buttons, Mercury-style: pill shape, no lift — the surface settles into a
     darker tone and the arrow slides. */
  [data-btn] {
    border-radius:999px !important; cursor:pointer;
    transition: background-color .2s cubic-bezier(.4,0,.2,1),
                border-color .2s cubic-bezier(.4,0,.2,1),
                color .2s cubic-bezier(.4,0,.2,1);
  }

[data-btn]:active { opacity:.9; }

[data-btn="solid"]:hover { background:#e2500f !important; }

[data-btn="ghost-dark"]:hover { background:#f2efe9 !important; border-color:#f2efe9 !important; color:#14120f !important; }

[data-btn="ghost-light"]:hover { background:#14120f !important; border-color:#14120f !important; color:#faf9f7 !important; }

[data-btn="outline-accent"]:hover { background:#fb6323 !important; color:#fff !important; }

[data-btn] svg { transition: transform .2s cubic-bezier(.4,0,.2,1); }

[data-btn]:hover svg { transform:translateX(2px); }

@media (max-width:900px) {
    [data-nav-links] { display:none !important; }
    [data-nav-burger] { display:flex !important; }
    [data-nav-lang] { display:none !important; }
    html[data-nav-open] [data-nav-mobile] { display:block !important; }
  }

[data-surface] a { color:var(--acc); }

[data-surface] a:hover { color:var(--acc-h); }

/* Second font = Libre Franklin (single typeface), matching the homepage setting. */
  [style*="Plex Mono"] { font-family:"Libre Franklin",sans-serif !important; letter-spacing:.1em !important; font-weight:600 !important; }

[data-btn] {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .18s ease;
  }

[data-btn]:hover { transform:translateY(-1px); }

[data-btn]:active { transform:translateY(0); }

[data-btn] svg { transition: transform .18s ease; }

[data-btn]:hover svg { transform:translate(1.5px,-1.5px); }

/* ===== MOBILE ===== */
  @media (max-width:1080px) {
    [data-tg-full] { display:none !important; }
    [data-tg-short] { display:inline !important; }
  }

@media (max-width:900px) {
    [data-m~="sec"] { padding:78px 22px !important; }
    [data-m~="split"] { grid-template-columns:minmax(0,1fr) !important; gap:44px !important; }
    [data-m~="unstick"] { position:static !important; top:auto !important; }
    [data-m~="h2"] { font-size:32px !important; letter-spacing:-.026em !important; margin-bottom:20px !important; max-width:none !important; }
    [data-m~="rail"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    [data-m~="rail"] > div { padding:20px 22px !important; }
    [data-m~="cols3"] { grid-template-columns:minmax(0,1fr) !important; }
    [data-m~="row"] { grid-template-columns:minmax(0,1fr) !important; gap:5px !important; padding:18px 0 !important; }
    [data-m~="foot"] { padding:56px 22px 36px !important; }
    [data-m~="footrow"] { flex-direction:column !important; gap:32px !important; padding-bottom:30px !important; }
    [data-m~="footcols"] { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:28px 22px !important; }
    [data-m~="cta"] { padding:78px 22px !important; }
    [data-m~="cta"] h2 { font-size:32px !important; letter-spacing:-.026em !important; }
    [data-m~="ctabtns"] { flex-direction:column !important; align-items:stretch !important; }
    [data-m~="ctabtns"] > * { text-align:center !important; }
  }

/* Logo: a bloom idles under the mark and a highlight passes rarely,
   clipped by the logo's own paths. */
@keyframes pba-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(251,99,34,0)); }
  50%      { filter: drop-shadow(0 0 12px rgba(251,99,34,.28)); }
}
@keyframes pba-streak {
  0%   { transform: translateX(-150px) skewX(-12deg); }
  55%  { transform: translateX(470px) skewX(-12deg); }
  100% { transform: translateX(470px) skewX(-12deg); }
}
[data-logo-sheen] { animation: pba-logo-glow 3.2s ease-in-out infinite; overflow: visible; }
[data-logo-sheen] .pba-streak { animation: pba-streak 7s cubic-bezier(.4,0,.2,1) infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-logo-sheen], [data-logo-sheen] .pba-streak { animation: none; }
}

/* Language menu rows highlight like the Products/Docs dropdown items. */
[data-lang-panel] a { transition: background-color .16s ease, color .16s ease; }
[data-lang-panel] a:hover { background: rgba(255,255,255,.05); }

/* TEMP (beta): non-EN locales are not built yet — hide the language switcher.
   Remove this block at the i18n phase. */
[data-lang-item], [data-lang-mobile] { display:none !important; }