/* 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;
}

/* ============================================================================
   Canonical type scale (from SPEC.md). Single source of truth — templates
   reference these, never hardcode px. Two families are off-scale by design.
   ============================================================================ */
:root {
  --fs-micro: 11px;   /* eyebrows, labels, table heads, chips, badges, breadcrumbs, byline, prose h4, scroll hint */
  --fs-meta: 13.5px;  /* nav, metadata, ToC, spec rows, room cells, excerpts, pagination, footer links, bio */
  --fs-ui: 15px;      /* body base, buttons, dropdown items, table cells, sidebar values */
  --fs-body: 17px;    /* prose p/li, ledes, FAQ answer, blockquote, card titles */
  --fs-lede: 20px;    /* FAQ question, deflist title */
  --fs-h3: 24px;      /* prose/KB h3 */
  --fs-h2: 32px;      /* prose/KB h2 */
  --fs-title: clamp(32px, 3.6vw, 52px); /* section h2, archive + entry + KB h1 */
  --fs-display: clamp(34px, 4.4vw, 64px); /* hero h1 only */
  --lh-display: 1.05; /* hero h1, section h2, archive/entry titles */
  --lh-head: 1.25;    /* prose h2/h3, card titles */
  --lh-prose: 1.72;   /* prose body */
  --ls-title: -.032em;
  --ls-h2: -.026em;
  --ls-label: .14em;
}

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. */

[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: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); }

/* Back to top. Phones only: on desktop the sticky header and the page TOC already
   provide a way back, and a floating button there would just cover content. */
[data-to-top] {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 44px; height: 44px; display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--acc, #fb6323); color: #fff;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.55);
}

[data-to-top][hidden] { display: none !important; }

@media (max-width: 900px) {
  [data-to-top]:not([hidden]) { display: flex; }
}

/* Wide tables. On phones a table wider than the column scrolls sideways, and the
   only thing visible is the first column — with nothing to say there is more.
   The wrapper adds a right-edge fade plus a one-off hint, both dropped as soon as
   the reader scrolls or when the table fits. */
[data-table-scroll] { position: relative; margin: 0 0 26px; }

[data-table-scroll][data-overflow] { padding-top: 26px; }

[data-table-scroll] > .table-scroller {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Without this the swipe that runs past either end of the table is handed to
     the browser, which reads it as a back-navigation gesture. */
  overscroll-behavior-x: contain;
}

[data-table-scroll] table { margin: 0 !important; }

[data-table-scroll]:after {
  content: ''; position: absolute; top: 26px; right: 0; bottom: 0; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(to right, rgba(250,249,247,0), var(--pg, #faf9f7));
}

[data-table-scroll][data-overflow]:after { opacity: 1; }

[data-table-scroll][data-overflow][data-scrolled]:after { opacity: 0; }

[data-table-hint] {
  position: absolute; right: 0; top: 0; z-index: 2;
  display: none; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--acc, #fb6323); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  /* It is a <button>, so the UA border/background/font have to be cleared. */
  border: 0; font-family: inherit; -webkit-appearance: none; appearance: none;
  cursor: pointer; transition: opacity .25s ease;
}

[data-table-scroll][data-overflow] [data-table-hint] { display: inline-flex; }

/* Faded out means gone: an invisible button must not swallow taps. */
[data-table-scroll][data-scrolled] [data-table-hint] { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  /* The page templates made the table itself the scroller (display:block + nowrap),
     which hid the overflow from the wrapper and stretched prose columns off-screen.
     The wrapper scrolls instead; text wraps, and min-width keeps columns readable. */
  [data-table-scroll] table {
    display: table !important;
    white-space: normal !important;
    overflow: visible !important;
    min-width: 520px;
    font-size: 14px !important;
  }
  [data-table-scroll] th, [data-table-scroll] td { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Info tips. The native title attribute waits a second on desktop and does nothing
   at all on touch, so the "i" is a real button with its own bubble: hover or focus
   on a pointer, tap on a phone. */
/* The "i" is a <button>, so the UA default paints it with a light-grey face and a
   black outset border — hence the two-tone look. Reset both; the ring comes from the
   element's own box-shadow and everything stays in the grey scale. */
.info-tip {
  position: relative; padding: 0; font: inherit; cursor: help;
  background: transparent; border: 0; appearance: none; -webkit-appearance: none;
  color: var(--tx3); box-shadow: 0 0 0 1px var(--hair2);
  transition: color .16s ease, box-shadow .16s ease;
}

.info-tip:hover, .info-tip[data-tip-open] { color: var(--tx2); box-shadow: 0 0 0 1px var(--tx3); }

.info-tip:after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(3px);
  z-index: 60; width: max-content; max-width: 240px;
  padding: 9px 12px; border-radius: 8px;
  background: #14120f; color: #f2efe9;
  font-size: 12.5px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; text-align: left;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.65);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.info-tip:hover:after, .info-tip:focus-visible:after, .info-tip[data-tip-open]:after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Near the right edge of a narrow sidebar the bubble would clip; pin it instead. */
@media (max-width: 900px) {
  /* Same centred bubble as on desktop, only narrower so it cannot reach either edge
     of a phone screen — anchoring it to one side clipped it on the other. */
  .info-tip:after { max-width: calc(100vw - 96px); }
}

/* Wide-and-short screens (21:9 and similar). The hero copy lane is capped at 660px,
   so the subtitle always breaks into three lines and the buttons end up crowding the
   laptop below. Give the lane more width there — two lines instead of three — and
   tighten the vertical rhythm a little. */
@media (min-width: 900px) and (min-aspect-ratio: 16/9) {
  [data-copy-lane] { width: min(64vw, 900px) !important; }
}

@media (min-aspect-ratio: 2/1), (max-height: 620px) and (min-width: 900px) {
  [data-copy-lane] { gap: clamp(6px, .9vh, 11px) !important; }
}

/* Short viewports (tablet in landscape, a browser window with a lot of chrome). The
   copy block sits ~96px below the top while the laptop in the photo keeps its place,
   so the buttons end up on the screen. There is no room to gain above — the header is
   72px — so the block itself gets smaller: eyebrow off, headline capped, tighter gaps. */
@media (max-height: 620px) and (min-width: 700px) {
  [data-swell-copy] { inset: 80px 0 0 !important; }
  [data-swell-copy] [data-slot="meta.main_subtitle"] { display: none !important; }
  [data-copy-lane] { gap: 7px !important; }
  /* Keep the headline on two lines: at this size it would otherwise collapse into
     one long line and lose the shape it has everywhere else. */
  [data-copy-lane] h1 { font-size: clamp(24px, 2.7vw, 36px) !important; }
  [data-copy-lane] [data-slot="meta.main_text"] { font-size: 15px !important; line-height: 1.5 !important; }
}

/* The very shortest windows: the two-line headline is worth more than the last few
   pixels of breathing room, so the rest of the block gives them up. */
@media (max-height: 500px) and (min-width: 700px) {
  [data-swell-copy] { inset: 76px 0 0 !important; }
  [data-copy-lane] { gap: 5px !important; }
  [data-copy-lane] h1 { font-size: 30px !important; }
  [data-copy-lane] [data-slot="meta.main_text"] { font-size: 14px !important; line-height: 1.45 !important; }
}


/* The headline is meant to break into two lines everywhere — on a wide-and-short
   window it would otherwise stretch into one, and the hero loses its shape. */
[data-copy-lane] h1 { max-width: 13ch; }

/* The button hover nudges its icon sideways — that reads right for the little arrow
   glyph, but the Telegram mark is a logo and sliding it looks like a glitch. */
[data-btn]:hover [data-tg-icon], [data-btn] [data-tg-icon] { transform: none !important; }

/* Burger: brand colour, and the bars fold into a cross while the menu is open — the
   same control both ways. Drawn as one SVG on purpose: three separate boxes were
   sampled independently, and on a fractional device pixel ratio the top one came out
   visibly lighter than its neighbours. */
[data-burger-bars] rect {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}

[data-nav-open] [data-burger-bars] .b1 { transform: translateY(7px) rotate(45deg); }

[data-nav-open] [data-burger-bars] .b2 { opacity: 0; transform: scaleX(.4); }

[data-nav-open] [data-burger-bars] .b3 { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  [data-burger-bars] rect { transition: none; }
}