/* =========================================================================
   royale-kasino.com — «KÖZ & QATRAN» design layer  (THE LOW CEILING)
   =========================================================================

   Forked from the 83rd build's stylesheet — every hex lives in the :root block
   below and nowhere else.

   Reading order:
     0. Tokens                     — the palette, mapped once from theme.json
     1. Base canvas + typography   — prose rhythm, figures, links
     2. The signature: KÖZ-QAPAĞI  — the plate device, defined once and reused
     3. Chrome                     — header, trust bar, footer, sticky, modals
     4. Sections                   — hero, TOC, offer, tables, FAQ …
     5. State matrix               — hover / focus / active / disabled
     6. Accessibility + responsive — tap targets, 360/768/1024/1440, motion

   WHY THIS PALETTE. Col AF asked for «Midnight Blue & Silver · Archivo / Work
   Sans / Azeret Mono». Thirteenth consecutive row where the sheet's own cell is
   both a clone and a hazard: its ground hex #050D1F is ALREADY on the network
   twice (play-royale, royale1-az); h216-h237 is the most crowded ground lane
   there is, holding twelve dark grounds; a low-chroma blue under a neutral
   silver is the 83rd build — ash and lead under nickel — with a few degrees of
   hue added, and the 83rd is the site built immediately before this one; and
   that exact type TRIO ships together on THREE sites, with Azeret Mono already
   on the recorded ə-fail list.

   THE LANE IS THE CEILING. `census_rks.py` reads the brightest token of all 85
   themes on this machine. EVERY ONE OF THEM REACHES A NEAR-WHITE: the lowest
   ceiling on the network is l87, 84 of the 85 sit at l90 or above, and no site
   has fewer than one token at l>=85. A second reading of the same column: every
   one of those 85 brights is a NEUTRAL — peak chroma across all of them is c7.
   So the empty register is a document that never reaches white and whose top
   note is a COLOUR. This one's ceiling is l66 and the ember holds it at c49.

   AND WHY THAT IS ALSO RIGHT, not merely free. An ember is the one light source
   that is bright and structurally incapable of being white — it goes out before
   it gets there. This domain is a defensive typo guard: «kasino» with an s,
   where Azerbaijani spells it «kazino» with a z. Its whole job is to catch a
   reader mid-mistake, tell them the truth in one screen and hand them on. A page
   for that job should read like something banked down, not like a lit showroom,
   and the palette says so before a word of it is read.

   CONTRAST CONTRACT (solved and gated by identity_rks.py before a byte of this
   file was written, then re-measured on the RENDERED page by probe_rks.js):
     text >= 4.5 : --sonuk on qatran 7.64 / qatran-bant 7.25 / kurum 6.88 /
                   qeyd 6.53 / his 6.04 / kurum-ust 5.06
                   --yarim on qatran 6.28 / qatran-bant 5.96 / kurum 5.66
                   --tustu on qatran 5.34 / qatran-bant 5.07 / kurum 4.81
                   --koz-parlaq on qatran 8.66 / kurum 7.81 / his 6.85 /
                   kurum-ust 6.00      --koz on qatran 5.23 / kurum 4.71
     DARK TEXT ON THE EMBER RAMP IS ALWAYS --zift (5.44 on koz, 9.01 on
                   koz-parlaq). The ramp is the brightest object on the page, so
                   it is the one fill whose text runs the other way.
     non-text >= 3: --duman-ctl 3.75 on kurum (the only CONTROL outline),
                   --koz 3.62 on kurum-ust
     --duman and --duman-lit are DECOR only, held at 1.51-1.76 so they stay
     visible without pretending to be controls.

   THE CEILING IS A RULE, NOT A DESCRIPTION. No value in this file may exceed
   l66; `probe_rks.js` reads every painted colour off the rendered page and
   fails on anything brighter, because the argument is only true if the shipped
   pixels obey it. That includes the raster art: the generated images are
   palette-locked and dimmed to the same ceiling.
   ========================================================================= */

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
	--qatran: #0e0c13;
	--qatran-bant: #16121c;
	--kurum: #1b1821;
	--his: #27232e;
	--zift: #07060a;
	--kurum-ust: #302d39;
	--duman: #3a3743;
	--duman-lit: #44414e;
	--duman-ctl: #6f6c7f;
	--sonuk: #aaa197;
	--yarim: #9a9289;
	--tustu: #8c857d;
	--bug: #5c5a68;
	--koz: #da5f2b;
	--koz-derin: #7c331d;
	--koz-kol: #a34929;
	--kurum-ust: #302d39;
	--zift: #07060a;
	--koz-parlaq: #e79c6a;
	--qeyd: #231f29;
	--duman-ctl: #6f6c7f;
	--koz-parlaq: #e79c6a;
	--qeyd: #231f29;

	--kurum-grad: linear-gradient(178deg, #27232e 0%, #1b1821 100%);
	--his-grad: linear-gradient(178deg, #27232e 0%, #302d39 100%);
	/* The nikel ramp runs the other way from every accent this theme has forked
	   through: it is the PALEST object on the page, so its three stops carry
	   --zift and not --sonuk. Measured on the ramp: 18.52 at the lit stop, 16.62
	   at the mid, 14.14 at the deep one. The stops are three steps of ONE
	   near-neutral, 4 points of lightness apart — a gradient you read as a
	   material rather than as a colour, which is what a metal plate does. */
	--koz-grad: linear-gradient(158deg, #e79c6a 0%, #da5f2b 100%);
	--koz-kol-grad: linear-gradient(150deg, #a34929 0%, #7c331d 100%);

	/* SQUARE. Not near-square: 0 on plates and 0 on controls. A monospaced grid
	   is a grid of rectangular cells, and this page's central exhibit is two
	   addresses set one character per cell — a rounded corner would be the only
	   thing on the page that is not on the grid. The donor ran 2px card stock. */
	--r-plate: 0px;
	--r-ctl: 0px;

	/* KÖZ-QAPAĞI geometry. PRIMITIVES ONLY — every derived length is computed
	   at use with calc(), so the invariants below cannot drift apart.        */
	--kq-lid: 1px;    /* the LID: a hairline, drawn in the page's dimmest ink */
	--kq-bar: 6px;    /* the EMBER: the bar under it — exactly 6 * --kq-lid   */
	--kq-gap: 6px;    /* the air between them. Never 0: they must not touch   */
	--kq-band: 13px;  /* what the unit consumes: lid + gap + bar, exactly     */
	--kq-span: 72px;  /* the length of BOTH — the lid measures the ember      */
	--kq-x: 24px;     /* the left inset: the text column's own gutter         */

	--tap: 44px;
	--ease: cubic-bezier(.2, .6, .3, 1);
}

/* ---- 1. Base canvas + typography --------------------------------------- */
html {
	scroll-behavior: smooth;
	/* Every in-page target on a one-pager sits under a 62px sticky header. */
	scroll-padding-top: 78px;
}

body {
	background: var(--qatran);
	color: var(--yarim);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Brygada 1918's default figures ARE lining (verified on the render sheet, not
	   assumed — four faces in this network shipped old-style ones), so this
	   line is a guard rather than a repair: it keeps «550 AZN» and «2026» at
	   cap height if the face is ever substituted. */
	font-variant-numeric: lining-nums;
}

/* A quiet wash so the paper is not a flat rectangle. Two very low alpha radials
   — no image, no request; one sits on the field hue and one on the accent, both
   far below the threshold at which a measured contrast ratio could move. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(70rem 40rem at 78% -8%, rgba(218, 95, 43, .055), transparent 62%),
		radial-gradient(58rem 34rem at 8% 108%, rgba(124, 51, 29, .045), transparent 60%);
}

/* The template gives <main> an ID, not a class, so the class rule this replaces had
   never matched anything on any page. */
#rks-main {
	display: block;
	min-height: 40vh;
}

/* Prose rhythm. Nothing below 15px anywhere on the site. */
p {
	margin: 0 0 1.05em;
	max-width: 74ch;
}

p:last-child {
	margin-bottom: 0;
}

/* The mono face carries FIGURES ONLY — never an uppercase Azerbaijani label.
   That is a structural rule, not a preference: the mono slot is where ə/Ə is
   most often missing or drawn as the wrong outline, and digits contain no
   schwa, so the risk disappears instead of needing an audit each build. */
.rks-num,
.rks-fact__val,
.rks-offer__amount,
.rks-meter__val,
.rks-toc__num,
.rks-steps__num {
	font-family: "Cascadia Code", ui-monospace, Consolas, "Courier New", monospace;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -.01em;
	/* THE THOUSANDS SEPARATOR. «50&nbsp;000» is correct Azerbaijani typography, but the
	   separator lands inside a MONOSPACED run, where a space is a full advance cell — the
	   same cell a digit gets. Next to proportional body text it reads as a gap twice the
	   width of the one the writer intended, so «50 000 AZN» looks like two numbers. The
	   71st build hit the same class of defect with U+202F and fixed the character; the
	   character is not the problem, the CELL is, so it is fixed here for every separator at
	   once. Only the gap narrows — the digits keep their tabular advance. */
	word-spacing: -.24em;
	color: var(--koz-parlaq);
}

/* Section rhythm on a long single document: generous, and identical for every
   anchor target so the scroll never feels uneven. */
.rks-sec {
	padding-block: clamp(46px, 6vw, 84px);
	scroll-margin-top: 78px;
}

.rks-sec + .rks-sec {
	border-top: 1px solid rgba(60, 57, 68, .9);
}

/* Eyebrow: small caps label above a heading. Display face, never the mono. */
.rks-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	font-family: "Alegreya Sans", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tustu);
}

.rks-eyebrow::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	margin-left: 10px;
	vertical-align: .32em;
	background: var(--duman-lit);
}

/* The citable opening passage: definition -> offer -> CTA, in one paragraph an
   answer engine can lift whole. Slightly larger and lighter than body prose. */
.rks-lede {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.62;
	color: var(--sonuk);
	max-width: 68ch;
}

/* ---- 2. THE SIGNATURE: KÖZ-QAPAĞI --------------------------------------- */
/*
   Two parts, one above the other, NOT touching. A solid bar in the ember — the
   brightest thing this document owns — and directly above it, across exactly the
   same width, a hairline in the dimmest ink on the page. The lid.

   It is the palette's own argument drawn at 72 pixels: the brightest voice on
   this page is bounded, and the thing that bounds it is drawn in the darkest.
   The ember can be as hot as it likes and it still stops under the lid, because
   an ember cannot get to white — it goes out first. That is the whole claim of
   «KÖZ & QATRAN», and a reader meets it at the top of every plate before they
   meet a sentence.

   It is also a SHAPE and not only a colour, which the 83rd's device deliberately
   was not. Take the ink out of QOŞA-MİL and nothing survives; take the ink out
   of this one and a thick bar under a thin detached line is still a thick bar
   under a thin detached line. Every earlier signature here modifies a stroke —
   the 83rd doubles a rule, the 82nd forks one, the 81st breaks one, the 80th
   stops a bar at half, the 79th inserts a segment inside a slot, the 78th welds
   one back into a gap. None of them adds a SECOND, DETACHED element that the
   first is not allowed to reach.

   Five facts, all measured on the rendered page by probe_rks.js:

     1. width(::before) == width(::after), to the pixel, at 360/768/1024/1440.
        The lid measures the ember; a lid that overhangs measures nothing.
     2. gap > 0 and gap == --kq-gap exactly: ::after.top - (::before.top +
        ::before.height) is 6px. Zero would make it a two-tone rule, which is the
        83rd's device; a variable gap would make it a coincidence.
     3. the bar is the page's brightest painted colour and the lid one of its
        dimmest: contrast(bar, ground) >= 3 * contrast(lid, ground).
     4. height(::before) == 6 * height(::after) — the one invariant that survives
        a greyscale print, a stripped stylesheet and a static export.
     5. lid + gap + bar == --kq-band, so the unit consumes exactly its own band
        and can never grow the element's box or be clipped by it.
*/
.rks-plate {
	position: relative;
	background: var(--kurum-grad);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
	padding: 34px 24px 28px;
}

/* the LID — a hairline in the dimmest ink, at the very top of the box */
.rks-plate::before,
.rks-rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--kq-x);
	width: var(--kq-span);
	height: var(--kq-lid);
	background: var(--wp--preset--color--duman);
	pointer-events: none;
}

/* the EMBER — the bar under it, six times as thick, never touching */
.rks-plate::after,
.rks-rule::after {
	content: "";
	position: absolute;
	top: calc(var(--kq-lid) + var(--kq-gap));
	left: var(--kq-x);
	width: var(--kq-span);
	height: var(--kq-bar);
	background: var(--wp--preset--color--koz);
	pointer-events: none;
}

.rks-plate--raised {
	background: var(--his-grad);
	border-color: var(--duman-lit);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

/* THE COOL LANE, as a whole panel. Used for the compliance apparatus — the 18+
   line, the responsible-gaming note, the disclosure — so that the one part of
   the page which is a WARNING is marked by temperature rather than by a red.
   Its twin is .rks-plate: same value, opposite hue, and the two are meant to be
   seen next to each other. */
.rks-plate--qeyd {
	background: var(--kurum-ust);
	border-color: var(--koz-derin);
}

/* A quiet variant: BOTH runs halve together, so the pair stays identical to
   itself. Volume is the only thing that changes; the claim never does. */
.rks-plate--quiet::before,
.rks-plate--quiet::after {
	width: calc(var(--kq-span) / 2);
}

/* The same drawing as a standalone section divider. */
.rks-rule {
	position: relative;
	height: var(--kq-band);
	margin: 6px 0 22px;
	max-width: var(--kq-span);
}

/* ---- 3. Chrome ---------------------------------------------------------- */
/* 3a. Skip link */
.rks-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--sonuk);
	color: var(--zift);
	font-weight: 700;
	border-radius: var(--r-ctl);
}

.rks-skip-link:focus,
.rks-skip-link:focus-visible {
	left: 12px;
	top: 12px;
	outline: 3px solid var(--koz);
	outline-offset: 2px;
}

/* 3b. Header */
.rks-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(14, 12, 19, .93);
	backdrop-filter: blur(9px);
	border-bottom: 1px solid var(--duman);
}

.rks-head__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 11px 20px;
	min-height: 62px;
}

.rks-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	flex: 0 0 auto;
}

.rks-brand:hover,
.rks-brand:focus-visible {
	text-decoration: none;
}

.rks-mark {
	display: block;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.rks-wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.rks-wordmark__name {
	font-family: "Brygada 1918", Palatino, "Palatino Linotype", Georgia, serif;
	font-size: 21px;
	letter-spacing: -.012em;
	color: var(--sonuk);
}

.rks-wordmark__sub {
	margin-top: 3px;
	font-family: "Cascadia Code", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .26em;
	color: var(--tustu);
}

.rks-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-wrap: wrap;
}

.rks-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 8px 11px;
	font-size: 15px;
	color: var(--yarim);
	text-decoration: none;
	border-radius: var(--r-ctl);
	border: 1px solid transparent;
}

.rks-nav a:hover {
	color: var(--sonuk);
	border-color: var(--duman);
	background: rgba(35, 31, 41, .78);
}

.rks-head__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	padding: 10px 20px;
	background: var(--koz-grad);
	color: var(--zift);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: var(--r-ctl);
	border: 1px solid var(--koz);
	flex: 0 0 auto;
}

.rks-head__cta:hover {
	color: var(--zift);
	background: var(--sonuk);
	text-decoration: none;
}

/* 3c. Trust bar — licence № / 18+ / RG. Figures in mono, labels in the sans. */
.rks-trust {
	border-bottom: 1px solid var(--duman);
	background: rgba(27, 24, 33, .74);
}

.rks-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 9px 20px;
	font-size: 13px;
	color: var(--tustu);
}

.rks-trust__seg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.rks-trust__seg::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--koz-derin);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

.rks-trust__seg--age {
	color: var(--koz-parlaq);
}

.rks-trust__seg--age::before {
	background: var(--koz-parlaq);
}

/* 3d. Footer */
.rks-foot {
	margin-top: 0;
	background: var(--kurum);
	border-top: 1px solid var(--duman);
	padding: 46px 20px 34px;
	font-size: 15px;
	color: var(--tustu);
}

.rks-foot__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.rks-foot h2,
.rks-foot h3 {
	font-size: 14px;
	font-family: "Alegreya Sans", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sonuk);
	margin: 0 0 12px;
}

.rks-foot a {
	color: var(--yarim);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rks-foot a:hover {
	color: var(--sonuk);
}

.rks-foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rks-foot li + li {
	margin-top: 9px;
}

.rks-foot__legal {
	max-width: 1140px;
	margin: 30px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--duman);
	font-size: 12.5px;
	line-height: 1.72;
	color: var(--tustu);
}

.rks-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rks-pay li {
	margin: 0;
	padding: 7px 12px;
	border: 1px solid var(--duman);
	border-radius: var(--r-ctl);
	background: rgba(27, 24, 33, .86);
	font-size: 13px;
	color: var(--yarim);
	letter-spacing: .02em;
}

.rks-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--tustu);
}

.rks-updated time {
	font-family: "Cascadia Code", ui-monospace, monospace;
	color: var(--tustu);
}

/* 3e. Sticky mobile CTA.
   The anchor carries its OWN class. On two earlier builds chrome.php emitted a
   bare <a> inside the sticky wrapper, so every rule that painted it was a
   descendant selector — and a probe measuring `.<prefix>-sticky__link` reported
   a clean PASS on an element that did not exist. Both the markup and the gate
   name this class now. */
.rks-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(14, 12, 19, .96);
	border-top: 1px solid var(--duman);
	backdrop-filter: blur(8px);
}

.rks-sticky__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--tap);
	padding: 13px 18px;
	background: var(--koz-grad);
	color: var(--zift);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid var(--koz);
	border-radius: var(--r-ctl);
}

.rks-sticky__link:hover,
.rks-sticky__link:active {
	color: var(--zift);
	background: var(--sonuk);
	text-decoration: none;
}

.rks-sticky__note {
	display: block;
	margin-top: 6px;
	text-align: center;
	font-size: 11.5px;
	color: var(--tustu);
}

/* 3f. Age gate + cookie banner

   THE AGE GATE IS NOT STYLED HERE, AND THAT IS DELIBERATE. inc/chrome.php prints the
   modal AND its own inline <style>, and the class it emits is `.rks-agegate__card`.
   This block used to carry a second, never-matching `.rks-gate__box` ruleset inherited
   from the donor — the exact shape of the bug recorded on the 76th build, where the
   ancestor's device kept drawing on screen because the sheet styled `.cra-gate__box`
   while the page rendered `.cra-agegate__card`. Two stylings of one component is how a
   fork keeps repairing the copy nobody sees, so the dead one is gone rather than
   repaired: it also carried the last two uses of `--sig-weight` and `--sig-inset`, two
   donor tokens this build never declares, so every declaration that named them was
   invalid at computed-value time and silently dropped.

   If the gate ever needs a design change, it is inc/chrome.php that changes.
   The cookie banner below IS styled in both places: chrome.php's inline copy is what
   ships (it loads later and wins at equal specificity), and this rule is the no-JS
   floor. */

.rks-cookie {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 150;
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 20px;
	background: var(--his-grad);
	border: 1px solid var(--duman-lit);
	border-radius: var(--r-plate);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .10);
	font-size: 14px;
	color: var(--yarim);
}

.rks-cookie__row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 14px;
}

/* ---- 4. Sections -------------------------------------------------------- */
/* 4a. Hero */
.rks-hero {
	padding-block: clamp(38px, 6vw, 74px) clamp(30px, 4.4vw, 54px);
}

.rks-hero h1 {
	margin: 0 0 16px;
	/* 18ch broke «Royale Casino Kazino AZ» so that «AZ» sat alone on line two at 1440 —
	   a two-word line with one word on it is a widow, and on the one heading the whole
	   EMD exists for. 22ch holds it as two balanced lines at every width above 900px. */
	max-width: 22ch;
	text-wrap: balance;
}

.rks-hero__lede {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	color: var(--sonuk);
	max-width: 60ch;
	margin: 0 0 24px;
}

.rks-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 26px;
}

.rks-hero__facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--duman);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
	overflow: hidden;
}

.rks-fact {
	background: var(--kurum);
	padding: 16px 18px;
}

.rks-fact__val {
	display: block;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.14;
	margin-bottom: 5px;
}

.rks-fact__key {
	display: block;
	font-size: 13px;
	color: var(--tustu);
	line-height: 1.45;
}

/* 4b. Numbered table of contents — the spine of a one-pager. */
.rks-toc {
	margin: 0;
}

.rks-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
	counter-reset: rcztoc;
}

.rks-toc__list li {
	margin: 0;
}

.rks-toc__list a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-height: var(--tap);
	padding: 11px 14px;
	border: 1px solid var(--duman-ctl);
	border-radius: var(--r-ctl);
	background: rgba(27, 24, 33, .7);
	color: var(--yarim);
	text-decoration: none;
	font-size: 15.5px;
	line-height: 1.4;
}

.rks-toc__list a:hover {
	border-color: var(--koz);
	background: var(--his);
	color: var(--sonuk);
	text-decoration: none;
}

.rks-toc__num {
	font-size: 13px;
	color: var(--koz);
	flex: 0 0 auto;
	min-width: 2ch;
}

/* 4c. Quick-nav cards */
.rks-quick {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.rks-quick__card {
	position: relative;
	display: block;
	padding: 26px 20px 20px;
	background: var(--kurum-grad);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
	color: var(--yarim);
	text-decoration: none;
}

.rks-quick__card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 20px;
	right: 20px;
	height: var(--kq-lid);
	background: var(--koz-derin);
}

.rks-quick__card:hover {
	border-color: var(--koz);
	background: var(--his-grad);
	text-decoration: none;
}

.rks-quick__card:hover::before {
	background: var(--koz);
}

.rks-quick__title {
	display: block;
	font-family: "Brygada 1918", Palatino, "Palatino Linotype", Georgia, serif;
	font-size: 20px;
	color: var(--sonuk);
	margin-bottom: 7px;
}

.rks-quick__text {
	display: block;
	font-size: 14.5px;
	color: var(--tustu);
	line-height: 1.55;
}

/* 4d. Bonus offer */
.rks-offer {
	display: grid;
	gap: 22px;
	align-items: start;
}

.rks-offer__amount {
	display: block;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.06;
	margin-bottom: 8px;
}

.rks-offer__cap {
	display: block;
	font-size: 14px;
	color: var(--tustu);
	margin-bottom: 18px;
}

.rks-offer__terms {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 9px;
}

.rks-offer__terms li {
	position: relative;
	padding-left: 20px;
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0;
}

.rks-offer__terms li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 1px;
	background: var(--koz-derin);
}

/* 4e. Buttons (hand-rolled, for markup outside core/button) */
.rks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--tap);
	padding: 14px 28px;
	background: var(--koz-grad);
	color: var(--zift);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .025em;
	text-decoration: none;
	border: 1px solid var(--koz);
	border-radius: var(--r-ctl);
	cursor: pointer;
}

.rks-btn:hover {
	background: var(--sonuk);
	color: var(--zift);
	text-decoration: none;
}

.rks-btn--ghost {
	background: transparent;
	color: var(--koz);
	/* The ghost is a CONTROL with no fill, so its outline is the only thing that says it
	   is pressable: --duman-lit measured 1.74:1 and could not do that job. */
	border-color: var(--duman-ctl);
}

.rks-btn--ghost:hover {
	background: rgba(35, 31, 41, .85);
	color: var(--sonuk);
	border-color: var(--koz);
}

.rks-btn--small {
	min-height: var(--tap);
	padding: 10px 18px;
	font-size: 14.5px;
}

/* 4f. Chips */
.rks-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--r-ctl);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	border: 1px solid var(--duman);
	background: var(--his);
	color: var(--yarim);
}

.rks-chip--qeyd {
	background: var(--qeyd);
	border-color: var(--duman-ctl);
	color: var(--zift);
}

.rks-chip--koz-parlaq {
	background: var(--qeyd);
	border-color: var(--koz-parlaq);
	color: var(--sonuk);
}

.rks-chip--koz {
	background: var(--koz);
	border-color: var(--koz-parlaq);
	color: var(--zift);
}

/* 4g. Steps ladder */
.rks-steps {
	list-style: none;
	counter-reset: rczstep;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.rks-steps li {
	position: relative;
	margin: 0;
	padding: 18px 20px 18px 62px;
	background: var(--kurum-grad);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
}

.rks-steps li::before {
	counter-increment: rczstep;
	content: counter(rczstep, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 17px;
	font-family: "Cascadia Code", ui-monospace, monospace;
	font-size: 15px;
	font-weight: 700;
	color: var(--koz);
}

.rks-step__title {
	display: block;
	font-weight: 600;
	color: var(--sonuk);
	margin-bottom: 5px;
	font-size: 16.5px;
}

/* inc/schema.php reads .rks-step__title + .rks-step__text to build the HowTo nodes, so
   these two class names are a CONTRACT between the markup and the schema layer, not a
   styling choice. Renaming either silently empties the HowTo graph while every other
   node still ships and every block gate still passes. */
.rks-step__text {
	display: block;
	color: var(--yarim);
	font-size: 15.5px;
	line-height: 1.62;
}

/* 4h. Fact / feature grid */
.rks-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

.rks-card {
	position: relative;
	padding: 26px 20px 20px;
	background: var(--kurum-grad);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
}

.rks-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 20px;
	right: 20px;
	height: var(--kq-lid);
	background: var(--koz-derin);
}

.rks-card h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--sonuk);
}

.rks-card p {
	font-size: 15px;
	color: var(--tustu);
	margin: 0;
}

/* 4i. Game tiles */
.rks-games {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.rks-game {
	position: relative;
	padding: 22px 18px 16px;
	background: var(--kurum-grad);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
}

.rks-game::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 18px;
	right: 18px;
	height: var(--kq-lid);
	background: var(--koz-derin);
}

.rks-game__name {
	display: block;
	font-family: "Brygada 1918", Palatino, "Palatino Linotype", Georgia, serif;
	font-size: 18px;
	color: var(--sonuk);
	margin-bottom: 6px;
}

.rks-game__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--tustu);
}

.rks-game__meta b {
	font-family: "Cascadia Code", ui-monospace, monospace;
	font-weight: 700;
	color: var(--koz-parlaq);
}

/* RTP meter: a figure AND a bar, so the number is scannable at a glance. */
.rks-meter {
	margin-top: 12px;
}

.rks-meter__bar {
	height: 5px;
	background: var(--his);
	border: 1px solid var(--duman);
	border-radius: 1px;
	overflow: hidden;
}

.rks-meter__fill {
	display: block;
	height: 100%;
	background: var(--koz-derin);
}

.rks-meter__val {
	font-size: 13px;
}

/* 4j. Notes / callouts */
.rks-note {
	position: relative;
	padding: 18px 20px 18px 20px;
	border: 1px solid var(--duman);
	border-left: 3px solid var(--koz-derin);
	border-radius: var(--r-ctl);
	background: rgba(27, 24, 33, .8);
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--yarim);
}

.rks-note--warn {
	border-left-color: var(--koz-parlaq);
	background: rgba(33, 30, 40, .8);
}

.rks-note--rg {
	border-left-color: var(--koz-parlaq);
	background: var(--qeyd);
	color: var(--sonuk);
}

.rks-note strong {
	color: var(--sonuk);
}

/* 4k. Tables — on paper, scrollable, and never below 15px.

   `.rks-tablewrap` is a <figure>, and NOTHING in this theme, in style.css or in
   wp-block-library zeroes the UA default `figure { margin: 1em 40px }` — the core reset is
   scoped to `.wp-block-image`. Inherited from the donor, where every table happened to sit
   inside a plate that hid the inset. Here it would push each table 40px in on BOTH sides,
   including at 360px, where the table is already the widest thing on the page. Two content
   agents reported it independently from reading the CSS; it is fixed once, here.

   `caption` had no rule at all in the donor sheet, so a caption rendered centred at the UA
   default size — the one piece of text on the page that belonged to no type scale. */
.rks-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
	background: var(--kurum);
	margin: 0 0 1.05em;
}

.rks-tablewrap caption {
	caption-side: top;
	text-align: start;
	padding: 13px 15px 11px;
	border-bottom: 1px solid var(--duman);
	color: var(--tustu);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.rks-tablewrap table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.rks-tablewrap th,
.rks-tablewrap td,
.wp-block-table th,
.wp-block-table td {
	padding: 12px 15px;
	text-align: start;
	border-bottom: 1px solid var(--duman);
	vertical-align: top;
	line-height: 1.55;
}

.rks-tablewrap thead th,
.wp-block-table thead th {
	background: var(--his);
	color: var(--sonuk);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
	white-space: nowrap;
}

.rks-tablewrap tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	background: var(--kurum);
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
}

.rks-tablewrap td b,
.wp-block-table td b {
	color: var(--sonuk);
}

/* 4l. FAQ — native <details>, so the answers are in the HTML for crawlers. */
.rks-faq {
	display: grid;
	gap: 10px;
}

.rks-faq details {
	background: var(--kurum-grad);
	border: 1px solid var(--duman-ctl);
	border-radius: var(--r-plate);
	overflow: hidden;
}

.rks-faq summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--tap);
	padding: 15px 18px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: 16.5px;
	color: var(--sonuk);
	line-height: 1.45;
}

.rks-faq summary::-webkit-details-marker {
	display: none;
}

.rks-faq summary::after {
	content: "";
	margin-left: auto;
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-right: 2px solid var(--koz-derin);
	border-bottom: 2px solid var(--koz-derin);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s var(--ease);
}

.rks-faq details[open] summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.rks-faq summary:hover {
	background: rgba(35, 31, 41, .72);
}

.rks-faq__answer {
	padding: 0 18px 17px;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--yarim);
}

.rks-faq__answer p {
	margin-bottom: .8em;
}

/* 4m. Payments rail in content */
.rks-payrail {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rks-payrail li {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--duman);
	border-radius: var(--r-ctl);
	background: var(--kurum);
}

.rks-payrail__name {
	display: block;
	font-weight: 600;
	color: var(--sonuk);
	margin-bottom: 4px;
	font-size: 15.5px;
}

.rks-payrail__meta {
	display: block;
	font-size: 13px;
	color: var(--tustu);
}

/* 4n. App / download block */
.rks-app {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rks-app__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--tustu);
}

.rks-app__spec b {
	font-family: "Cascadia Code", ui-monospace, monospace;
	color: var(--koz-parlaq);
	font-weight: 700;
}

/* 4o. Compare strip */
.rks-compare {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 4p. Breadcrumbs (interior pages only — the one-pager uses the anchor TOC) */
.rks-crumbs {
	font-size: 13.5px;
	color: var(--tustu);
	padding: 16px 0 0;
}

.rks-crumbs a {
	color: var(--tustu);
	text-decoration: none;
}

.rks-crumbs a:hover {
	color: var(--sonuk);
	text-decoration: underline;
}

.rks-crumbs span[aria-current] {
	color: var(--yarim);
}

/* 4q. Back-to-contents link, repeated down a long document */
.rks-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: var(--tap);
	margin-top: 18px;
	font-size: 13.5px;
	color: var(--tustu);
	text-decoration: none;
}

.rks-back:hover {
	color: var(--sonuk);
	text-decoration: underline;
}

/* 4r. Per-page last-updated line, appended by inc/chrome.php */
.rks-lastmod {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid var(--duman);
	font-size: 13px;
	color: var(--tustu);
}

.rks-lastmod time {
	font-family: "Cascadia Code", ui-monospace, monospace;
	color: var(--tustu);
}

/* 4s. Skeleton loading for the heaviest blocks */
.rks-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--his);
	border-radius: var(--r-plate);
	min-height: 90px;
}

.rks-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(96deg, transparent 12%, rgba(69, 66, 78, .85) 48%, transparent 84%);
	transform: translateX(-100%);
	animation: rks-shimmer 1.5s infinite;
}

@keyframes rks-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* ---- 5. State matrix ---------------------------------------------------- */
a,
button,
summary,
.rks-btn,
.rks-quick__card,
.rks-toc__list a {
	transition: color .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}

a:active,
.rks-btn:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Focus. A two-tone ring so it is visible on the nacre fills AND on the field:
   the dark inner line survives on light plates, the nacre outer line on dark. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--koz);
	outline-offset: 2px;
	border-radius: var(--r-ctl);
}

.rks-btn:focus-visible,
.rks-head__cta:focus-visible,
.rks-sticky__link:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--sonuk);
	outline-offset: 3px;
	box-shadow: 0 0 0 1px var(--zift) inset;
}

button[disabled],
.rks-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	filter: grayscale(.4);
}

/* ---- 6. Accessibility + responsive ------------------------------------- */
/* 6a. Nothing below 15px in prose. 12.5px is reserved for legal lines only. */
.rks-main p,
.rks-main li {
	font-size: max(15px, 1em);
}

/* 6b. Tap targets: 44px on EVERY pointer, not only under 600px. */
.rks-nav a,
.rks-toc__list a,
.rks-btn,
.rks-head__cta,
.rks-sticky__link,
.rks-faq summary,
.rks-back {
	min-height: var(--tap);
}

/* 6c. Inline links inside a sentence are exempt from WCAG 2.5.8 — they are sized
   by the text around them and must not be padded into a block. */
.rks-main p a,
.rks-foot__legal a,
.rks-faq__answer a {
	min-height: 0;
}

/* 6d. 1024 and below */
@media (max-width: 1023px) {
	.rks-head__inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.rks-nav {
		order: 3;
		width: 100%;
		margin-left: 0;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 2px;
	}

	.rks-nav a {
		white-space: nowrap;
	}
}

/* 6e. 768 and below — the sticky CTA appears, the header CTA folds away */
@media (max-width: 767px) {
	.rks-sticky {
		display: block;
	}

	body {
		padding-bottom: 92px;
	}

	.rks-head__cta {
		display: none;
	}

	.rks-sec {
		padding-block: 40px;
	}

	.rks-plate {
		padding: 26px 17px 20px;
	}

	.rks-hero h1 {
		max-width: none;
	}
}

/* 6f. 360 — the narrowest supported width */
@media (max-width: 400px) {
	.rks-head__inner {
		padding-inline: 15px;
	}

	.rks-wordmark__name {
		font-size: 19px;
	}

	.rks-steps li {
		padding: 16px 16px 16px 54px;
	}

	.rks-steps li::before {
		left: 16px;
	}

	.rks-quick,
	.rks-grid,
	.rks-games,
	.rks-toc__list {
		grid-template-columns: 1fr;
	}
}

/* 6g. Reduced motion — finish the job, including the smooth scroll and shimmer */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.rks-skeleton::after {
		display: none;
	}

	a:active,
	.rks-btn:active {
		transform: none;
	}
}

/* 6h. Forced colours / high contrast safety net */
@media (forced-colors: active) {
	.rks-plate,
	.rks-card,
	.rks-quick__card,
	.rks-game,
	.rks-steps li,
	.rks-faq details {
		border: 1px solid CanvasText;
	}

	.rks-btn,
	.rks-head__cta,
	.rks-sticky__link {
		border: 2px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
		forced-color-adjust: none;
	}

	.rks-plate::before,
	.rks-plate::after,
	.rks-card::before,
	.rks-quick__card::before,
	.rks-game::before {
		background: CanvasText;
		border-color: CanvasText;
	}
}

/* ---- 7. Core block harmonisation --------------------------------------- */
.wp-block-button__link {
	border-radius: var(--r-ctl);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--duman);
	opacity: 1;
	max-width: 100%;
}

.wp-block-image img {
	border-radius: var(--r-plate);
	height: auto;
	max-width: 100%;
}

.wp-block-list {
	padding-left: 1.15em;
}

.wp-block-list li {
	margin-bottom: .5em;
	line-height: 1.68;
}

.wp-block-quote {
	border-left: 3px solid var(--koz-derin);
	padding-left: 18px;
	margin-left: 0;
	font-style: normal;
	color: var(--sonuk);
}

.wp-block-group.has-background {
	border-radius: var(--r-plate);
}

/* The editor canvas inherits the same ground so the plate signature is visible
   while writing, not only on the front end. */
.editor-styles-wrapper {
	background: var(--qatran);
	color: var(--yarim);
}

/* ---- 8. Brand-layer devices (inc/brand.php) ----------------------------
   Every class emitted by a shortcode in inc/brand.php is styled here. A class that
   exists only in PHP and nowhere in this file ships an unstyled block that passes
   every markup gate — that is the «phantom class» failure recorded on royalspin.az,
   so the two lists are kept in step deliberately. */
.rks-sig {
	display: grid;
	gap: 12px;
}

.rks-sig__text {
	font-size: 13px;
	line-height: 1.65;
	color: var(--tustu);
	margin: 0;
	max-width: 62ch;
}

.rks-light {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
}

/* The citable passage */
.rks-pull {
	margin: 0;
}

.rks-pull__body {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	color: var(--sonuk);
	max-width: 66ch;
}

/* CONTRAST IS A PAIR, NOT A TOKEN. --koz clears 4.5:1 on the ground (5.23) and misses it on
   the raised plates (4.14 on --his), and --yarim does the same on --qeyd (4.39). So every
   plate lifts its text one step: links to the ceiling ink, body copy to --sonuk. Measured on
   the rendered page by probe_rks.js §2, not predicted from the palette. */
.rks-plate a,
.rks-pull a,
.rks-plate--qeyd a {
	color: var(--koz-parlaq);
}

.rks-plate p,
.rks-plate li,
.rks-plate--qeyd p {
	color: var(--sonuk);
}

.rks-pull .rks-eyebrow {
	color: var(--yarim);
}

.rks-pull__body p:last-child {
	margin-bottom: 0;
}

/* Wager-arithmetic device */
.rks-anatomy {
	margin: 0;
}

.rks-anatomy__rows {
	list-style: none;
	counter-reset: none;
	margin: 4px 0 14px;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--duman);
	border: 1px solid var(--duman);
	border-radius: var(--r-ctl);
	overflow: hidden;
}

.rks-anatomy__rows li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 11px 14px;
	background: var(--kurum);
	font-size: 15.5px;
}

.rks-anatomy__rows li:last-child {
	background: var(--koz-kol);
}

.rks-anatomy__key {
	color: var(--yarim);
}

.rks-anatomy__rows li:last-child .rks-anatomy__key,
.rks-anatomy__rows li:last-child .rks-num {
	color: var(--zift);
	font-weight: 600;
}

.rks-anatomy__note,
.rks-mock__note {
	font-size: 14px;
	line-height: 1.62;
	color: var(--tustu);
	margin: 0;
	max-width: 64ch;
}

/* Inert pictures of the operator's own controls */
.rks-mock {
	margin: 0;
}

.rks-mock__box {
	display: grid;
	gap: 9px;
	margin: 6px 0 14px;
	padding: 16px;
	background: var(--qatran-bant);
	border: 1px dashed var(--duman-lit);
	border-radius: var(--r-ctl);
}

.rks-mock__field {
	display: block;
	padding: 12px 13px;
	border: 1px solid var(--duman);
	border-radius: var(--r-ctl);
	background: var(--kurum);
	color: var(--tustu);
	font-size: 14.5px;
}

.rks-mock__field--code {
	font-family: "Cascadia Code", ui-monospace, monospace;
	letter-spacing: .3em;
	color: var(--tustu);
}

.rks-mock__btn {
	display: block;
	padding: 12px 13px;
	text-align: center;
	border-radius: var(--r-ctl);
	background: var(--koz);
	color: var(--zift);
	font-weight: 700;
	font-size: 14.5px;
}

/* ---- 9. Nav, header CTA variant, footer structure ----------------------
   These class names are emitted by inc/chrome.php and parts/*.html. Same rule as §8:
   nothing may exist in markup that has no rule here. */
.rks-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.rks-nav__list li {
	margin: 0;
}

.rks-nav__mobile {
	display: none;
}

.rks-nav__mobile summary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--tap);
	padding: 9px 14px;
	list-style: none;
	cursor: pointer;
	border: 1px solid var(--duman-ctl);
	border-radius: var(--r-ctl);
	background: var(--his);
	color: var(--sonuk);
	font-size: 15px;
	font-weight: 600;
}

.rks-nav__mobile summary::-webkit-details-marker {
	display: none;
}

.rks-nav__bars {
	display: block;
	width: 15px;
	height: 2px;
	background: var(--koz);
	box-shadow: 0 5px 0 var(--koz), 0 -5px 0 var(--koz);
}

.rks-nav__panel {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	border: 1px solid var(--duman);
	border-radius: var(--r-plate);
	background: var(--kurum);
	padding: 8px;
}

.rks-nav__panel li {
	margin: 0;
}

.rks-nav__panel a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: 10px 12px;
	border-radius: var(--r-ctl);
	color: var(--yarim);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
}

.rks-nav__panel a:hover,
.rks-nav__panel a[aria-current] {
	background: var(--his);
	color: var(--sonuk);
}

.rks-nav a[aria-current],
.rks-nav__list a[aria-current] {
	color: var(--sonuk);
	border-color: var(--duman);
	background: rgba(35, 31, 41, .78);
}

/* The non-money header control on the three service pages: an outline, so the one page
   whose job is NOT to sell never carries a filled money button. */
.rks-head__cta--quiet {
	background: transparent;
	background-image: none;
	color: var(--koz);
	border-color: var(--duman-lit);
}

.rks-head__cta--quiet:hover {
	background: rgba(35, 31, 41, .9);
	background-image: none;
	color: var(--sonuk);
	border-color: var(--koz);
}

.rks-langtag {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border: 1px solid var(--duman);
	border-radius: var(--r-ctl);
	font-family: "Cascadia Code", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--tustu);
}

.rks-trust__seg--rg {
	color: var(--koz);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rks-trust__seg--rg:hover {
	color: var(--sonuk);
}

.rks-foot__brand h2,
.rks-foot__col h2 {
	font-size: 13px;
}

.rks-foot__brand p {
	font-size: 14.5px;
	line-height: 1.66;
	color: var(--tustu);
	max-width: 46ch;
}

.rks-foot__brand .rks-updated {
	margin-top: 12px;
}

.rks-foot__legal p + p {
	margin-top: 10px;
}

.rks-foot__legal b {
	color: var(--tustu);
}

.rks-sig {
	max-width: 1140px;
	margin: 26px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--duman);
}

@media (max-width: 1023px) {
	.rks-nav__list {
		display: none;
	}

	.rks-nav__mobile {
		display: block;
	}

	.rks-nav {
		order: 3;
		width: 100%;
		overflow: visible;
	}
}


/* ---- 10. Repairs from probe_rcz.js run 1 --------------------------------
   Four standalone controls sat under the 44px target the brief sets. None of them is a
   link inline in a sentence, so the WCAG 2.5.8 inline exemption does not cover them:
   the header lockup and the trust-bar RG link are the two controls a phone user reaches
   for first, and the footer/breadcrumb lists are pure navigation. */
.rks-brand {
	min-height: var(--tap);
}

.rks-trust__seg--rg {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.rks-foot__col li a,
.rks-foot__brand a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.rks-crumbs a,
.rks-crumbs span[aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

/* The cookie banner's ACCEPT control. The reskin moved the filled treatment onto the
   DECLINE button on purpose — this banner defaults to declining non-essential storage —
   which left this class with no rule at all and shipped an unstyled button. It is stated
   here explicitly rather than deleted, so the next fork reads the intent instead of
   "restoring" a filled accept button. */
.rks-cookie__row .rks-cookie__ok {
	background: transparent;
	background-image: none;
	color: var(--yarim);
	/* --duman-lit here measured 1.86:1 on the card's white ground, and this rule is (0,2,0)
	   — so it OUTRANKED inc/chrome.php's own (0,1,1) `.rks-cookie__row button` even though
	   the inline block loads later. Quiet is a deliberate choice on this control (the
	   privacy-preserving DECLINE is the filled one); invisible is not. --duman-ctl is
	   this palette's only 3:1 border. */
	border-color: var(--duman-ctl);
}

.rks-cookie__row .rks-cookie__ok:hover {
	border-color: var(--koz);
	color: var(--sonuk);
}

/* ---- 11. Repairs from probe_rcz.js run 2 --------------------------------
   The mobile nav panel overflowed the viewport by 24px at 360, on every page, and only
   there. `.rks-nav` is a flex row, so its `<details>` child sizes to MAX-CONTENT — and
   the panel's longest item («Bonus — 550 AZN + 250 fırlanma və dövriyyə şərti») is wider
   than a 360px phone. A flex item's default `min-width: auto` refuses to shrink below its
   content, so `width: 100%` on the ancestor did not bind: the floor has to be removed
   explicitly. Same shape as the recorded «a display reset without min-width keeps the
   560px floor» defect, one layer further in. */
.rks-nav {
	min-width: 0;
}

.rks-nav__mobile {
	min-width: 0;
	max-width: 100%;
}

.rks-nav__panel {
	box-sizing: border-box;
	max-width: 100%;
	/* The real floor was HERE, not on the <details>: the panel is a grid, an auto column
	   is minmax(min-content, auto), and a grid item's own min-width:auto refuses to go
	   below min-content — so «Bonus — 550 AZN + 250 fırlanma və dövriyyə şərti» set the
	   column to 360px inside a 330px panel. Constraining the ancestors could never bind;
	   the track and the item both have to be allowed to shrink. It is invisible until the
	   menu is OPENED (a closed <details> clips it, and document.scrollWidth stays 360),
	   which is why only a per-element measurement found it. */
	grid-template-columns: minmax(0, 1fr);
}

.rks-nav__panel li {
	min-width: 0;
}

.rks-nav__panel a {
	overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
	.rks-nav__mobile {
		width: 100%;
	}
}

/* The offer plate is a grid, so its two CTAs stretched to the full plate width and the
   money button read as a banner rather than as a control. Sized to content instead, and
   laid on one row where there is room for two. */
.rks-offer .rks-btn {
	justify-self: start;
}

@media (min-width: 640px) {
	.rks-offer {
		grid-template-columns: 1fr;
	}

	.rks-offer .rks-btn + .rks-btn {
		margin-top: -8px;
	}
}

/* ---- 12. Repairs the SCREENSHOT found (nothing measurable was wrong) -----
   The hero's three stacked components are raw HTML inside one wp:html block, so
   WordPress's blockGap never applies between them: the quick-nav grid sat flush against
   the facts strip and each card's column rule was drawn ON the strip's bottom border.
   Every gate passed — a probe measures elements, not the space between them.

   And the quick-nav grid STRANDED ITS FOURTH CARD: auto-fit with a 210px floor resolves
   to three columns in a 700px content well, so «Yüklə» sat alone on a second row under
   three siblings. (Same shape as the recorded auto-fit orphan on royale-vip.org.) Two
   balanced rows of two beat three-plus-one at every width this column ever has. */
.rks-hero__facts {
	margin-bottom: 26px;
}

.rks-quick {
	margin-top: 0;
}

@media (min-width: 560px) {
	.rks-quick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.rks-quick {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- 13. THE EXHIBIT: the LADDER (this build's own component) ------------- */
/*
   What a spelling guard has to prove depends on WHICH KIND of mistake brought the
   reader here, and this one is a kind no sibling defends. A dropped letter, a
   transposition and a look-alike character are all SLIPS: the hand went wrong and
   the reader meant the other string. Here the hand did exactly what it was told.
   The word is a loan, it is said with a soft z that a fast sentence devoices, and
   the reader wrote what they heard. Nobody mistyped anything, so there is nothing
   to point at in the string — the difference is not in the picture, it is in which
   spelling the language settled on.

   So the exhibit is a LADDER of three rungs rather than a grid of cells: the
   international form, the heard form, and the Azerbaijani norm, each with the
   letter under discussion marked, in the order the word actually travelled. Only
   ONE rung is lit, and it is the correct one — which is also the only place on the
   page besides the CTA where the ember is allowed to carry a whole word. On a
   document whose entire palette is an argument about a ceiling, the lit rung is
   the ceiling doing a job: the brightest thing here is the spelling you want.

   The marked letter is a `<b>` inside the mono, never a colour on its own: a reader
   with the stylesheet stripped, printing in grey, or running a forced-colours mode
   still sees which character is at issue.
*/
.rks-ladder {
	margin: 26px 0 30px;
	max-width: 560px;
	border-top: 1px solid var(--duman);
}

.rks-ladder__rung {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 16px 0 15px;
	border-bottom: 1px solid var(--duman);
}

.rks-ladder__word {
	font-family: "Cascadia Code", ui-monospace, monospace;
	font-size: clamp(20px, 5.2vw, 27px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .04em;
	color: var(--yarim);
}

.rks-ladder__word b {
	font-weight: 600;
	color: var(--sonuk);
	border-bottom: 2px solid var(--duman-ctl);
	padding-bottom: 1px;
}

.rks-ladder__label {
	font-family: "Cascadia Code", ui-monospace, monospace;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tustu);
	margin: 0;
}

.rks-ladder__note {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tustu);
}

/* the one rung that is right — the only word on the page the ember carries */
.rks-ladder__rung--lit .rks-ladder__word {
	color: var(--koz-parlaq);
}

.rks-ladder__rung--lit .rks-ladder__word b {
	color: var(--koz-parlaq);
	border-bottom-color: var(--koz);
}

.rks-ladder__rung--lit .rks-ladder__label {
	color: var(--koz);
}

@media (min-width: 560px) {
	.rks-ladder__rung {
		grid-template-columns: 190px minmax(0, 1fr);
		align-items: baseline;
		column-gap: 24px;
	}

	.rks-ladder__label {
		grid-row: 1;
	}

	.rks-ladder__word {
		grid-row: 1;
	}

	.rks-ladder__note {
		grid-column: 2;
	}
}