/* ============================================================
   RANKRIX — RESPONSIVE LAYER  (320px → 8K)
   Loaded LAST, after rkx-widgets.css and rkx-pages.css, so it is
   the single place that decides layout at the extremes.

   The problem it fixes
   --------------------
   The locked chrome sizes the header and footer pills from one
   ladder of width tokens:

       <= 1365px : --rkx-w-def 95%
       1366-1920 : --rkx-w-def 85%
       >= 1921px : --rkx-w-def 75%   (all the way through 8K)

   Widget sections used the same token but ALSO carried
   `max-width: var(--rkx-max, 1400px)`. Above about 1648px that cap
   binds first, so the content column stops growing while the pills
   keep going. Measured at 2560px: pills 1920px wide, every section
   1400px — a 260px inset on each side. At 4K and 8K it is far worse.

   The strategy
   ------------
   1. Sections track the chrome exactly: no fixed max-width. The
      panel is always as wide as the pills, at every viewport.
   2. Readability is protected INSIDE the panel instead, with a
      measure token on prose. Wide screens get MORE COLUMNS and
      BIGGER TYPE, never longer lines.
   3. Small screens get a hard floor at 320px: nothing overflows,
      nothing is narrower than a thumb.
   ============================================================ */

:root {
	/* Readable line length for prose, scaled with the big-display ladder.
	   ch units follow the font, so this stays honest as type grows. */
	--rkx-measure:      72ch;
	--rkx-measure-tight: 58ch;
	--rkx-measure-wide:  92ch;
	/* Side padding inside a glass panel, from phone to 8K. */
	--rkx-pad-x: clamp(16px, 2.4vw, calc(40px * var(--rkx-big, 1)));
	--rkx-pad-y: clamp(16px, 2.2vh, calc(36px * var(--rkx-big, 1)));
}

/* ---------- 1 · sections align with the chrome at every width ---------- */
.rkx-w.rkx-sec--chrome { max-width: none; }

/* Prose keeps a readable measure even when its panel is 5760px wide. */
.rkx-w .rkx-w-intro,
.rkx-w .rkx-hero__text { max-width: var(--rkx-measure); }
.rkx-w .rkx-w-title,
.rkx-w .rkx-hero__h2 { max-width: var(--rkx-measure-wide); }
.rkx-sec--center .rkx-w-intro,
.rkx-sec--center .rkx-w-title { margin-inline: auto; }

/* ---------- 2 · nothing may push the page sideways ---------- */
html, body { overflow-x: hidden; }
.rkx-w, .rkx-w * { min-width: 0; }
.rkx-w img, .rkx-w svg, .rkx-w video, .rkx-w canvas { max-width: 100%; }
.rkx-w h1, .rkx-w h2, .rkx-w h3, .rkx-w p, .rkx-w li, .rkx-w dd, .rkx-w dt { overflow-wrap: anywhere; }
/* Long unbroken strings (emails, URLs, tool names) must wrap rather than widen a grid cell. */
.rkx-w a[href^="mailto"], .rkx-w a[href^="http"], .rkx-w code { word-break: break-word; }

/* ---------- 3 · touch targets on coarse pointers ---------- */
@media (pointer: coarse) {
	.rkx-w button,
	.rkx-w .rkx-goals__btn,
	.rkx-w .rkx-hero__tab,
	.rkx-w .rkx-stack__tab,
	.rkx-w .rkx-stack__tile { min-height: 44px; }
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */

/* ---------- 3b · legibility floor on phones ----------
   The type ladder multiplies a base size by --rkx-big, which is 1 below 1920px.
   That leaves the smallest labels at their literal base: 10px for the eyebrow
   and 10.5px for the breadcrumb trail on the fallback pages. Those are too small
   to read on a handset held at arm's length.

   Raise only the floor. Anything already larger is untouched, the desktop and
   big-screen ladders are untouched, and nothing here changes layout: these are
   short strings inside boxes that size to their content.

   Two tiers, because the two kinds of text tolerate different sizes: an
   uppercase, letterspaced micro-label reads acceptably at 11px, while a name
   a visitor has to actually read does not go below 12px. */
@media (max-width: 599px) {
	/* names: 12px floor */
	.rkx-w .rkx-phero__crumbs li,
	.rkx-w .rkx-phero__crumbs a { font-size: 12px; }

	/* uppercase micro-labels: 11px floor */
	.rkx-w .rkx-w-eyebrow__t { font-size: 11px; }
}

/* 480px and under — one column everywhere that still had two. */
@media (max-width: 480px) {
	/* Four figures stay two-by-two on a phone; stacking them makes a column half a screen tall. */
	.rkx-w .rkx-console__kpis,
	.rkx-w .rkx-hero__viz .rkx-console__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rkx-w .rkx-w-actions { width: 100%; }
	.rkx-w .rkx-w-actions .rkx-btn { flex: 1 1 100%; }
}

/* 360px and under — the common floor for older Androids. */
@media (max-width: 360px) {
	:root { --rkx-pad-x: 14px; }
	.rkx-w .rkx-hero__side { padding-inline: 14px; }
	.rkx-w .rkx-stack__tablist,
	.rkx-w .rkx-stack__grid { grid-template-columns: 1fr; }
	.rkx-w .rkx-w-title { letter-spacing: -0.01em; }
}

/* 320px — the hard floor. Everything must still fit and be legible. */
@media (max-width: 329px) {
	:root { --rkx-pad-x: 12px; }
	.rkx-w .rkx-hero__side { padding-inline: 12px; }
	.rkx-w .rkx-w-title { font-size: calc(25px * var(--big, 1)); }
	.rkx-w .rkx-hero__h2 { font-size: calc(23px * var(--big, 1)); }
	.rkx-w .rkx-console__kpi dd { font-size: calc(22px * var(--big, 1)); }
}

/* Landscape phones: vertical room is the scarce axis, not horizontal. */
@media (max-height: 520px) and (orientation: landscape) {
	.rkx-w .rkx-hero--duo .rkx-hero__split { min-height: 0 !important; }
	.rkx-w .rkx-hero__side { padding-block: 14px; gap: 10px; }
	.rkx-w .rkx-hero__viz .rkx-console__chart { min-height: 52px; max-height: 20vh; }
	.rkx-w .rkx-sec--pad-regular { padding-block: clamp(28px, 5vw, 48px); }
}

/* ============================================================
   LARGE SCREENS — more columns and bigger type, never longer lines.
   The --rkx-big ladder (chrome) is: 1 below 1920, then 1.18 / 1.41
   / 1.7 / 2.18 / 2.82 at 1920 / 2560 / 3840 / 5120 / 7680.
   ============================================================ */

/* 1920–2559 (1080p and ultrawide) */
@media (min-width: 1920px) {
	:root { --rkx-measure: 76ch; --rkx-measure-wide: 96ch; }
}

/* 2560–3839 (QHD) — the hero grid can breathe, stacks go three across. */
@media (min-width: 2560px) {
	.rkx-w .rkx-stack__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rkx-w .rkx-stack__tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rkx-w .rkx-hero--duo .rkx-hero__split { gap: clamp(16px, 0.8vw, 30px); }
	.rkx-w .rkx-sec--pad-regular { padding-block: clamp(104px, 6vw, 168px); }
}

/* 3840–5119 (4K) — four-up grids, wider hero split, larger chart floors. */
@media (min-width: 3840px) {
	:root { --rkx-measure: 80ch; }
	.rkx-w .rkx-stack__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.rkx-w .rkx-hero__viz .rkx-console__chart { min-height: 160px; }
}

/* 5120–7679 (5K) */
@media (min-width: 5120px) {
	.rkx-w .rkx-stack__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.rkx-w .rkx-hero__viz .rkx-console__chart { min-height: 220px; }
	.rkx-w .rkx-sec--pad-regular { padding-block: clamp(150px, 6vw, 260px); }
}

/* 7680+ (8K) — stroke weights and hairlines stop disappearing. */
@media (min-width: 7680px) {
	.rkx-w .rkx-console__line { stroke-width: 4; }
	.rkx-w .rkx-glass,
	.rkx-w .rkx-hero__box,
	.rkx-w .rkx-hero__tabbar { border-width: 2px; }
	.rkx-w .rkx-hero__viz .rkx-console__chart { min-height: 300px; }
}

/* ============================================================
   PRINT — the glass and the background are meaningless on paper.
   ============================================================ */
@media print {
	.rkx-bg, .rkx-header-wrap, .rkx-footer-wrap, .rkx-loader { display: none !important; }
	.rkx-w, .rkx-w * { color: #000 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
	.rkx-w .rkx-glass, .rkx-w .rkx-hero__box { border: 1px solid #999 !important; }
	.rkx-w .rkx-sec { page-break-inside: avoid; padding-block: 12pt !important; }
	.rkx-main { padding-top: 0 !important; }
}

/* ============================================================
   SAFETY NET — content must never be stranded invisible
   The entrance animates each headline word from opacity 0 and
   clears the inline style when it finishes. If that tween is
   interrupted (tab backgrounded mid-stagger, a very slow device,
   GSAP blocked by a CSP or an ad blocker), the inline opacity:0
   would survive and the headline would silently never appear.
   The .is-live class is added by a timer rather than by the tween
   completing, so it is a reliable "the entrance window is over"
   signal. After it, force the text visible. In the normal case
   GSAP has already removed the inline styles and these rules do
   nothing at all.
   ============================================================ */
/* This list must match, one for one, every element the entrance in
   rkx-widgets.js starts at opacity 0:
     .rkx-hero__studio  .rkx-goals
     .rkx-w-title .rkx-wd  .rkx-w-intro  .rkx-w-actions > *  [data-rkx-reveal]
   If a tween for one of these is interrupted, its inline opacity:0 survives and
   the element is invisible for good. Verified in the browser: the hero's studio
   line and goal switcher were being stranded exactly this way, because they were
   the two the net did not list. Add to both places when the entrance changes. */
.rkx-sec.is-live .rkx-wd,
.rkx-sec.is-live .rkx-w-head > *,
.rkx-sec.is-live .rkx-w-intro,
.rkx-sec.is-live .rkx-w-actions,
.rkx-sec.is-live .rkx-w-actions > *,
.rkx-sec.is-live .rkx-hero__studio,
.rkx-sec.is-live .rkx-goals,
.rkx-sec.is-live [data-rkx-reveal] {
	opacity: 1 !important;
	visibility: visible !important;
}
.rkx-sec.is-live .rkx-wd,
.rkx-sec.is-live .rkx-hero__studio,
.rkx-sec.is-live .rkx-goals { transform: none !important; }

/* The entrance fades the page and the hero containers in from zero. If it is ever
   interrupted, the inline opacity would survive and the screen would stay blank, so
   once the entrance is over these are forced visible. In the normal case the script
   has already cleared its own inline styles and these rules do nothing. */
html.rkx-entered .rkx-main,
html.rkx-entered .rkx-hero__side { opacity: 1 !important; filter: none !important; }

/* Same idea without JavaScript at all: if the script never runs, nothing
   should be hidden. rkx-widgets.js adds html.rkx-js before anything is
   hidden, so this is belt and braces for a blocked script. */
html:not(.rkx-js) .rkx-sec .rkx-w-head > *,
html:not(.rkx-js) .rkx-sec .rkx-hero__studio,
html:not(.rkx-js) .rkx-sec .rkx-goals,
html:not(.rkx-js) .rkx-sec [data-rkx-reveal] { opacity: 1; visibility: visible; transform: none; }