/* =============================================================================
   RKC Finserve — cascade overrides + shared small-type scale
   Loaded AFTER rkc.css (dependency: 'rkc'), which itself loads after the
   Elementor Kit 10 block. Companion loader: novamira-sandbox/rkc-overrides.php

   WHY THIS FILE EXISTS
   --------------------
   Elementor Kit 10 emits, as an INLINE <style id="elementor-frontend-inline-css">
   in <head> (css_print_method = internal):

     .elementor-kit-10 button,
     .elementor-kit-10 input[type="button"],
     .elementor-kit-10 input[type="submit"],
     .elementor-kit-10 .elementor-button
       { background-color:#E0B45F; font-family:Inter; font-size:15px;
         font-weight:600; letter-spacing:.2px; color:#0A1A1F;
         border-radius:6px 6px 6px 6px; padding:16px 30px 16px 30px }   (0,1,1)

     .elementor-kit-10 button:hover, .elementor-kit-10 button:focus, ...
       { color:#FFFFFF }                                                (0,2,1)

   The design system's component classes (.rkc-btn, .rkc-wa, .rkc-burger,
   .rkc-chat__fab) are single-class selectors at (0,1,0) — and their state rules
   at (0,2,0) — so the kit outranks them on EVERY real <button> and
   <input type="submit">. Source order cannot save them; only specificity can.
   <a class="rkc-btn"> anchors are untouched by the kit and are not addressed here.

   THE FIX — no !important anywhere
   --------------------------------
   Every rule below repeats its own class (.rkc-btn.rkc-btn) and qualifies the
   element (button, input[type="submit"]). A repeated class is legal CSS and is
   the standard, dependency-free way to add one class-level of specificity:

     button.rkc-btn.rkc-btn                     -> (0,2,1) beats kit (0,1,1)
     button.rkc-btn--ghost.rkc-btn--ghost:hover -> (0,3,1) beats kit hover (0,2,1)

   This deliberately does NOT scope to .elementor-kit-10, so the rules keep
   working if the active kit is ever swapped.

   Only the eight properties the kit actually sets are re-asserted
   (background-color, font-family, font-size, font-weight, letter-spacing,
   color, border-radius, padding) plus the state colours. Everything else —
   display, gap, min-height, border, line-height, box-shadow, transition — is
   left to rkc.css, which the kit never contests. Re-stating them here would
   risk clobbering variant rules that live in rkc.css.

   Contents
     01  Small-type scale tokens + utilities
     02  Radius utilities (for the inline-style cleanup pass)
     03  Buttons — .rkc-btn on <button> / <input>
     04  WhatsApp buttons — .rkc-wa on <button>
     05  Header burger — .rkc-burger
     06  Chat FAB — .rkc-chat__fab
     07  Reduced motion
     08  Calculator lock cards — .rkc-calc--locked / .rkc-calclock
   ========================================================================== */


/* =============================================================================
   01  SMALL-TYPE SCALE
   The six rebuilt pages (posts 592-597) hardcode TWELVE small-text sizes with
   no shared scale: 10.5 11.5 12 12.5 13 13.5 14.5 15 15.5 16.5 17 18px.

   This is one geometric ladder anchored at 15px. Whole steps are the 1.2 ratio
   asked for; the rungs between them are the half-step sqrt(1.2) ~= 1.0954,
   because the site genuinely needs fine gradations in small text (micro-labels,
   notes, pills) and a bare 1.2 ladder would force +/-1.5px jumps on real copy.

       2xs  15 / 1.2^2    = 10.42  -> 10.5
       xs   15 / 1.2^1.5  = 11.41  -> 11.5
       sm   15 / 1.2      = 12.5   -> 12.5   (matches .rkc-note in rkc.css)
       md   15 / 1.2^0.5  = 13.69  -> 13.5
       base 15                     -> 15
       lg   15 * 1.2^0.5  = 16.43  -> 16.5
       xl   15 * 1.2      = 18     -> 18
       2xl  15 * 1.2^1.5  = 19.72  -> 19.5

   Every one of the twelve literals lands on a rung within +/-0.5px. The mapping
   is documented in the task report; applying it is a separate, mechanical pass
   over the page trees (this file cannot reach inline style attributes).

   These are ADDITIVE. Nothing below changes how posts 592-597 render today —
   inline style attributes still win. Adopting the tokens is opt-in.
   ========================================================================== */

:root {
	/* the ladder */
	--rkc-fs-2xs:  10.5px;
	--rkc-fs-xs:   11.5px;
	--rkc-fs-sm:   12.5px;
	--rkc-fs-md:   13.5px;
	--rkc-fs-base: 15px;
	--rkc-fs-lg:   16.5px;
	--rkc-fs-xl:   18px;
	--rkc-fs-2xl:  19.5px;

	/* line heights that pair with the ladder */
	--rkc-lh-tight: 1.35;
	--rkc-lh:       1.6;
	--rkc-lh-loose: 1.72;

	/* the one pill radius the pages keep re-typing as a literal */
	--rkc-r-pill: 999px;
}

.rkc-t-2xs  { font-size: var(--rkc-fs-2xs);  line-height: var(--rkc-lh-tight); }
.rkc-t-xs   { font-size: var(--rkc-fs-xs);   line-height: var(--rkc-lh-tight); }
.rkc-t-sm   { font-size: var(--rkc-fs-sm);   line-height: var(--rkc-lh); }
.rkc-t-md   { font-size: var(--rkc-fs-md);   line-height: var(--rkc-lh); }
.rkc-t-base { font-size: var(--rkc-fs-base); line-height: var(--rkc-lh); }
.rkc-t-lg   { font-size: var(--rkc-fs-lg);   line-height: var(--rkc-lh-loose); }
.rkc-t-xl   { font-size: var(--rkc-fs-xl);   line-height: var(--rkc-lh-loose); }
.rkc-t-2xl  { font-size: var(--rkc-fs-2xl);  line-height: var(--rkc-lh-loose); }

/* Tone helpers, so the cleanup pass never needs a hex in a style attribute. */
.rkc-t-ink   { color: var(--rkc-ink); }
.rkc-t-slate { color: var(--rkc-slate); }
.rkc-t-brass { color: var(--rkc-brass-deep); }
.rkc-t-white { color: var(--rkc-white); }
.rkc-t-mist  { color: var(--rkc-mist); }

/* The uppercase micro-label treatment the pages hand-roll repeatedly. */
.rkc-t-caps {
	font-family: var(--rkc-head);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}


/* =============================================================================
   02  RADIUS UTILITIES
   Home (post 592) hardcodes border-radius:6px and 8px where every other page
   writes var(--rkc-r).

   NOTE — deliberately NOT "fixed" here. An inline style attribute beats any
   selector in this file, so normalising a stray inline radius from CSS would
   require !important, which would then also override every legitimate inline
   radius (999px pills, 50% avatars) on the same elements. These utilities exist
   so the follow-up pass can DELETE the literal and add a class instead.
   ========================================================================== */

.rkc-r-card   { border-radius: var(--rkc-r); }
.rkc-r-lg     { border-radius: var(--rkc-r-lg); }
.rkc-r-pill   { border-radius: var(--rkc-r-pill); }
.rkc-r-circle { border-radius: 50%; }


/* =============================================================================
   03  BUTTONS — re-assert .rkc-btn over Kit 10 on real form controls
   Values mirror rkc.css section 07 exactly.
   ========================================================================== */

button.rkc-btn.rkc-btn,
input[type="submit"].rkc-btn.rkc-btn,
input[type="button"].rkc-btn.rkc-btn {
	padding: 12px 22px;
	border-radius: var(--rkc-r);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .005em;
	background-color: transparent;
	color: var(--rkc-ink);
}

/* --- size ---------------------------------------------------------------- */

button.rkc-btn--sm.rkc-btn--sm,
input[type="submit"].rkc-btn--sm.rkc-btn--sm,
input[type="button"].rkc-btn--sm.rkc-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

/* --- brass (primary) — /login/ "Sign in", /register/ "Create account" ----- */

button.rkc-btn--brass.rkc-btn--brass,
input[type="submit"].rkc-btn--brass.rkc-btn--brass,
input[type="button"].rkc-btn--brass.rkc-btn--brass {
	background-color: var(--rkc-brass);
	border-color: var(--rkc-brass);
	color: var(--rkc-ink);
}

button.rkc-btn--brass.rkc-btn--brass:hover,
button.rkc-btn--brass.rkc-btn--brass:focus-visible,
input[type="submit"].rkc-btn--brass.rkc-btn--brass:hover,
input[type="submit"].rkc-btn--brass.rkc-btn--brass:focus-visible,
input[type="button"].rkc-btn--brass.rkc-btn--brass:hover,
input[type="button"].rkc-btn--brass.rkc-btn--brass:focus-visible {
	background-color: var(--rkc-brass-deep);
	border-color: var(--rkc-brass-deep);
	color: var(--rkc-white);
}

/* Kit forces #FFF on plain :focus too. Restore the resting colour when focus
   is not the keyboard-visible kind. */
button.rkc-btn--brass.rkc-btn--brass:focus:not(:focus-visible),
input[type="submit"].rkc-btn--brass.rkc-btn--brass:focus:not(:focus-visible),
input[type="button"].rkc-btn--brass.rkc-btn--brass:focus:not(:focus-visible) {
	background-color: var(--rkc-brass);
	border-color: var(--rkc-brass);
	color: var(--rkc-ink);
}

/* --- ghost (secondary) --------------------------------------------------- */

button.rkc-btn--ghost.rkc-btn--ghost,
input[type="submit"].rkc-btn--ghost.rkc-btn--ghost,
input[type="button"].rkc-btn--ghost.rkc-btn--ghost {
	background-color: transparent;
	border-color: var(--rkc-brass);
	color: var(--rkc-brass-deep);
}

/* Without this the kit's blanket :hover,:focus{color:#FFF} paints ghost text
   white on a near-white brass-08 wash — effectively invisible. */
button.rkc-btn--ghost.rkc-btn--ghost:hover,
button.rkc-btn--ghost.rkc-btn--ghost:focus,
button.rkc-btn--ghost.rkc-btn--ghost:focus-visible,
input[type="submit"].rkc-btn--ghost.rkc-btn--ghost:hover,
input[type="submit"].rkc-btn--ghost.rkc-btn--ghost:focus,
input[type="submit"].rkc-btn--ghost.rkc-btn--ghost:focus-visible,
input[type="button"].rkc-btn--ghost.rkc-btn--ghost:hover,
input[type="button"].rkc-btn--ghost.rkc-btn--ghost:focus,
input[type="button"].rkc-btn--ghost.rkc-btn--ghost:focus-visible {
	background-color: var(--rkc-brass-08);
	border-color: var(--rkc-brass-deep);
	color: var(--rkc-brass-deep);
}

/* ghost on dark ground */
.rkc-sec--dark button.rkc-btn--ghost.rkc-btn--ghost,
.rkc-phero button.rkc-btn--ghost.rkc-btn--ghost {
	color: var(--rkc-brass-hi);
	border-color: var(--rkc-brass-hi);
}

.rkc-sec--dark button.rkc-btn--ghost.rkc-btn--ghost:hover,
.rkc-sec--dark button.rkc-btn--ghost.rkc-btn--ghost:focus,
.rkc-sec--dark button.rkc-btn--ghost.rkc-btn--ghost:focus-visible,
.rkc-phero button.rkc-btn--ghost.rkc-btn--ghost:hover,
.rkc-phero button.rkc-btn--ghost.rkc-btn--ghost:focus,
.rkc-phero button.rkc-btn--ghost.rkc-btn--ghost:focus-visible {
	background-color: var(--rkc-brass-18);
	border-color: var(--rkc-brass-hi);
	color: var(--rkc-white);
}

/* --- dark ---------------------------------------------------------------- */

button.rkc-btn--dark.rkc-btn--dark,
input[type="submit"].rkc-btn--dark.rkc-btn--dark,
input[type="button"].rkc-btn--dark.rkc-btn--dark {
	background-color: var(--rkc-deep);
	border-color: var(--rkc-deep);
	color: var(--rkc-white);
}

button.rkc-btn--dark.rkc-btn--dark:hover,
button.rkc-btn--dark.rkc-btn--dark:focus,
button.rkc-btn--dark.rkc-btn--dark:focus-visible,
input[type="submit"].rkc-btn--dark.rkc-btn--dark:hover,
input[type="submit"].rkc-btn--dark.rkc-btn--dark:focus,
input[type="submit"].rkc-btn--dark.rkc-btn--dark:focus-visible,
input[type="button"].rkc-btn--dark.rkc-btn--dark:hover,
input[type="button"].rkc-btn--dark.rkc-btn--dark:focus,
input[type="button"].rkc-btn--dark.rkc-btn--dark:focus-visible {
	background-color: var(--rkc-deep-3);
	border-color: var(--rkc-deep-3);
	color: var(--rkc-white);
}

.rkc-sec--dark button.rkc-btn--dark.rkc-btn--dark {
	border-color: var(--rkc-line-dark2);
}

/* --- block --------------------------------------------------------------- */
/* .rkc-btn--block sets only display/width, neither of which the kit touches,
   so rkc.css still wins there. Nothing to re-assert. */

/* --- disabled ------------------------------------------------------------ */
/* rkc.css already sets opacity:.5 + pointer-events:none (the kit contests
   neither). This adds the cursor affordance and pins the resting palette so a
   disabled control can never inherit a kit hover/focus colour. */

button.rkc-btn.rkc-btn:disabled,
button.rkc-btn.rkc-btn[aria-disabled="true"],
input[type="submit"].rkc-btn.rkc-btn:disabled,
input[type="button"].rkc-btn.rkc-btn:disabled {
	cursor: not-allowed;
	opacity: .5;
}

button.rkc-btn--brass.rkc-btn--brass:disabled,
input[type="submit"].rkc-btn--brass.rkc-btn--brass:disabled {
	background-color: var(--rkc-brass);
	border-color: var(--rkc-brass);
	color: var(--rkc-ink);
}

button.rkc-btn--ghost.rkc-btn--ghost:disabled,
input[type="submit"].rkc-btn--ghost.rkc-btn--ghost:disabled {
	background-color: transparent;
	border-color: var(--rkc-brass);
	color: var(--rkc-brass-deep);
}

button.rkc-btn--dark.rkc-btn--dark:disabled,
input[type="submit"].rkc-btn--dark.rkc-btn--dark:disabled {
	background-color: var(--rkc-deep);
	border-color: var(--rkc-deep);
	color: var(--rkc-white);
}


/* =============================================================================
   04  WHATSAPP BUTTONS — .rkc-wa on <button>
   /contact/ renders <button type="submit" class="rkc-wa rkc-wa--solid"> for the
   WhatsApp enquiry. Values mirror rkc.css section 08.
   Note rkc.css sets no letter-spacing on .rkc-wa, so `normal` is the restore
   value against the kit's .2px.
   ========================================================================== */

button.rkc-wa.rkc-wa,
input[type="submit"].rkc-wa.rkc-wa {
	padding: 12px 22px;
	border-radius: var(--rkc-r);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: normal;
	background-color: transparent;
	color: var(--rkc-ink);
}

/* --- solid (the /contact/ enquiry submit) -------------------------------- */

button.rkc-wa--solid.rkc-wa--solid,
input[type="submit"].rkc-wa--solid.rkc-wa--solid {
	background-color: var(--rkc-deep);
	border-color: var(--rkc-deep);
	color: var(--rkc-white);
}

button.rkc-wa--solid.rkc-wa--solid:hover,
button.rkc-wa--solid.rkc-wa--solid:focus,
button.rkc-wa--solid.rkc-wa--solid:focus-visible,
input[type="submit"].rkc-wa--solid.rkc-wa--solid:hover,
input[type="submit"].rkc-wa--solid.rkc-wa--solid:focus,
input[type="submit"].rkc-wa--solid.rkc-wa--solid:focus-visible {
	background-color: var(--rkc-deep-3);
	border-color: var(--rkc-deep-3);
	color: var(--rkc-white);
}

button.rkc-wa--solid.rkc-wa--solid:disabled,
input[type="submit"].rkc-wa--solid.rkc-wa--solid:disabled {
	background-color: var(--rkc-deep);
	border-color: var(--rkc-deep);
	color: var(--rkc-white);
	cursor: not-allowed;
	opacity: .5;
}

/* --- ghost --------------------------------------------------------------- */

button.rkc-wa--ghost.rkc-wa--ghost,
input[type="submit"].rkc-wa--ghost.rkc-wa--ghost {
	background-color: transparent;
	border-color: var(--rkc-line);
	color: var(--rkc-ink);
}

button.rkc-wa--ghost.rkc-wa--ghost:hover,
button.rkc-wa--ghost.rkc-wa--ghost:focus,
button.rkc-wa--ghost.rkc-wa--ghost:focus-visible,
input[type="submit"].rkc-wa--ghost.rkc-wa--ghost:hover,
input[type="submit"].rkc-wa--ghost.rkc-wa--ghost:focus,
input[type="submit"].rkc-wa--ghost.rkc-wa--ghost:focus-visible {
	background-color: var(--rkc-brass-08);
	border-color: var(--rkc-brass);
	color: var(--rkc-brass-deep);
}

.rkc-sec--dark button.rkc-wa--ghost.rkc-wa--ghost,
.rkc-phero button.rkc-wa--ghost.rkc-wa--ghost {
	border-color: var(--rkc-line-dark2);
	color: var(--rkc-white);
}

/* --- float --------------------------------------------------------------- */

button.rkc-wa--float.rkc-wa--float {
	padding: 0;
	border-radius: 50%;
}


/* =============================================================================
   05  HEADER BURGER — .rkc-burger
   Collateral damage from the same kit rule, and it appears on EVERY page below
   1024px. .rkc-burger lives in rkc-header.css at (0,1,0), so the kit was
   painting the 44x44 menu control pale brass (#E0B45F) with a 6px radius and
   16px/30px padding instead of a transparent, hairline-bordered square.
   Values mirror rkc-header.css.
   ========================================================================== */

button.rkc-burger.rkc-burger {
	padding: 0;
	border-radius: var(--rkc-r);
	font-size: inherit;
	letter-spacing: normal;
	background-color: transparent;
	color: var(--rkc-deep);
}

button.rkc-burger.rkc-burger:hover,
button.rkc-burger.rkc-burger:focus,
button.rkc-burger.rkc-burger:focus-visible {
	background-color: var(--rkc-brass-08);
	border-color: var(--rkc-brass);
	color: var(--rkc-deep);
}

/* .rkc-mobnav__close carries .rkc-burger and has no rules of its own in
   rkc-header.css; the panel ground is --rkc-white, so the rules above are
   already the correct treatment for it. */


/* =============================================================================
   06  CHAT FAB — .rkc-chat__fab
   Injected by rkc-chatbot.php. Same (0,1,0) exposure: the kit was overriding
   the deep-teal circle into a pale brass 6px-radius rectangle.
   Values mirror rkc.css section 12.
   ========================================================================== */

button.rkc-chat__fab.rkc-chat__fab {
	padding: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	background-color: var(--rkc-deep);
	color: var(--rkc-brass-hi);
}

button.rkc-chat__fab.rkc-chat__fab:hover,
button.rkc-chat__fab.rkc-chat__fab:focus,
button.rkc-chat__fab.rkc-chat__fab:focus-visible {
	background-color: var(--rkc-deep-3);
	border-color: var(--rkc-brass);
	color: var(--rkc-brass-hi);
}

button.rkc-chat__fab--label.rkc-chat__fab--label {
	width: auto;
	padding: 0 20px;
	color: var(--rkc-white);
}


/* =============================================================================
   07  REDUCED MOTION
   Nothing in this file animates, but the disabled-cursor and focus rules should
   not reintroduce transitions rkc.css section 19 has switched off.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	button.rkc-btn.rkc-btn,
	button.rkc-wa.rkc-wa,
	button.rkc-burger.rkc-burger,
	button.rkc-chat__fab.rkc-chat__fab {
		transition: none;
	}
}



/* =============================================================================
   08  CALCULATOR LOCK CARDS
   .rkc-calcs--locked · .rkc-calcgrid--locked · .rkc-calc--locked ·
   .rkc-calclock · .rkc-calclock__cta · .rkc-calclock__icon

   Markup: RKC_Calculators::locked_all_html() and ::locked_card_html() in
   novamira-sandbox/rkc-calculators.php. It is what EVERY visitor who has not
   been approved for the calculators sees — i.e. every prospect who reaches
   /calculators/ from the home page or from /services/.

   WHY THIS SECTION EXISTS
   -----------------------
   None of those six class names appeared in any stylesheet on the site: not
   rkc.css, not sections 01–07 above, not any inline <style>. So a locked card
   fell back to the plain .rkc-calc box and its one call to action fell through
   to the Elementor kit's own link rule —

     .elementor-kit-10 a       { color: #8A5F14 }                      (0,1,1)
     .elementor-kit-10 a:hover { color: #BE8A2C }                      (0,2,1)

   — plus the browser's default underline. All eight cards ended in a bare
   underlined text link where a button belongs.

   SPECIFICITY — the same house rule as sections 03–06, no !important anywhere
   ---------------------------------------------------------------------------
   A bare .rkc-calclock__cta is (0,1,0) and loses to the kit's (0,1,1). Every
   rule below either descends from a container class or repeats its own class,
   so it clears the kit on specificity and does not depend on this file being
   last in source order:

     .rkc-calc--locked.rkc-calc--locked a               -> (0,2,1)
     .rkc-calclock .rkc-calclock__cta.rkc-calclock__cta -> (0,3,0)

   VALUES
   ------
   Taken from rkc.css, not invented here: .rkc-card (border, radius, padding,
   hover lift and shadow), .rkc-btn + .rkc-btn--brass + .rkc-btn--sm (the CTA),
   .rkc-eyebrow, .rkc-calc__title, .rkc-calc__blurb, .rkc-gate__icon (the brass
   lock disc). The one raw hex below is #8A5F14 = --rkc-brass-deep, inside a
   data URI, which is the exception rkc.css already documents: a data URI
   cannot read var().
   ========================================================================== */

/* --- the locked collection ----------------------------------------------- */

.rkc-calcs--locked .rkc-calcs__gate {
	margin: 0 0 26px;
}

/* Jump nav. It carries the #sip … #cover anchors that roughly two dozen links
   elsewhere on the site point at, and it had no rules of its own either — a
   bulleted list of kit-coloured links. Scoped to the locked view so the
   approved-user page is left exactly as it is. */
.rkc-calcs--locked .rkc-calcnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.rkc-calcs--locked .rkc-calcnav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rkc-calcs--locked .rkc-calcnav a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--rkc-line);
	border-radius: 100px;
	background-color: var(--rkc-white);
	color: var(--rkc-slate);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--rkc-t), border-color var(--rkc-t),
	            color var(--rkc-t);
}

.rkc-calcs--locked .rkc-calcnav a:hover,
.rkc-calcs--locked .rkc-calcnav a:focus-visible {
	background-color: var(--rkc-brass-08);
	border-color: var(--rkc-brass);
	color: var(--rkc-brass-deep);
	text-decoration: none;
}

.rkc-calcs--locked .rkc-calcnav a:focus-visible {
	outline: none;
	box-shadow: var(--rkc-ring);
}


/* --- the grid ------------------------------------------------------------ */

/* rkc.css sets .rkc-calcgrid{align-items:start} so live calculators of unequal
   height hang from the top. Locked stubs are near-identical in height and read
   better as an even wall, so they stretch. Eight short cards also take a third
   column on a desktop where the live ones stop at two. */
.rkc-calcgrid--locked {
	align-items: stretch;
}

@media (min-width: 1024px) {
	.rkc-calcgrid--locked {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* --- one locked card ------------------------------------------------------ */

/* Deliberately muted: paper ground rather than the live calculator's white, so
   a locked tool never reads as a broken working one. Border, radius, padding
   and the hover lift are .rkc-card's. */
.rkc-calc--locked {
	background-color: var(--rkc-paper);
	border: 1px solid var(--rkc-line);
	border-radius: var(--rkc-r);
	padding: 20px;
	box-shadow: none;
	transition: background-color var(--rkc-t-slow), border-color var(--rkc-t-slow),
	            box-shadow var(--rkc-t-slow), transform var(--rkc-t-slow);
}

.rkc-calc--locked:hover,
.rkc-calc--locked:focus-within {
	background-color: var(--rkc-white);
	border-color: var(--rkc-brass-30);
	box-shadow: var(--rkc-shadow);
	transform: translateY(-2px);
}

/* Base link reset. Nothing inside a locked card may fall through to the kit's
   link colour plus the browser's underline; the CTA rule further down is what
   re-dresses the one anchor that is meant to look like a control. */
.rkc-calc--locked.rkc-calc--locked a {
	color: inherit;
	text-decoration: none;
}

.rkc-calc--locked.rkc-calc--locked a:hover,
.rkc-calc--locked.rkc-calc--locked a:focus,
.rkc-calc--locked.rkc-calc--locked a:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* One hairline per card. The lock row below draws it, so the head drops the
   bottom rule rkc-css gives every .rkc-calc__head. */
.rkc-calc--locked .rkc-calc__head {
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 0;
}

.rkc-calc--locked .rkc-eyebrow {
	margin: 0 0 9px;
	color: var(--rkc-brass-deep);
}

/* Montserrat, as everywhere else a card names something. */
.rkc-calc--locked .rkc-calc__title {
	font-family: var(--rkc-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.005em;
	color: var(--rkc-ink);
	margin: 0;
}

.rkc-calc--locked .rkc-calc__blurb {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--rkc-slate);
	max-width: 46ch;
}

/* rkc.css bumps .rkc-calc padding and .rkc-calc__title size at 768px; the
   unqualified rules above would otherwise flatten that back out. */
@media (min-width: 768px) {
	.rkc-calc--locked {
		padding: 26px;
	}

	.rkc-calc--locked .rkc-calc__title {
		font-size: 17px;
	}
}


/* --- the lock row --------------------------------------------------------- */

/* Pinned to the foot of the card by margin-top:auto, so ragged blurbs still
   line their CTAs up across a row. */
.rkc-calclock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: auto 0 0;
	padding: 15px 0 0;
	border-top: 1px solid var(--rkc-line);
}

/* The brass lock. .rkc-gate__icon's treatment at card scale: a brass-wash disc
   with a brass-deep padlock. Drawn on ::before rather than by restyling the
   CTA's own inline <svg>, because that <svg> sits inside the button and a
   second lock 12px from the first reads as a duplicate, not as emphasis. */
.rkc-calclock::before {
	content: "";
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--rkc-brass-wash);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5F14' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.6' width='15' height='9.4' rx='2'/%3E%3Cpath d='M8.3 10.6V7.7a3.7 3.7 0 0 1 7.4 0v2.9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
}

/* The CTA's own inline lock, now that the disc carries the metaphor. The rule
   is scoped to .rkc-calclock so the icon is still available to any other
   context that wants it. */
.rkc-calclock .rkc-calclock__icon {
	display: none;
}

/* The CTA is the one conversion control on this page, so it gets the design
   system's primary button rather than a bespoke look: .rkc-btn metrics at
   .rkc-btn--sm size, .rkc-btn--brass colours, .rkc-btn's focus ring. */
.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--rkc-brass);
	border-radius: var(--rkc-r);
	background-color: var(--rkc-brass);
	color: var(--rkc-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .005em;
	text-align: center;
	text-decoration: none;
	max-width: 100%;
	cursor: pointer;
	box-shadow: var(--rkc-shadow-sm);
	transition: background-color var(--rkc-t), border-color var(--rkc-t),
	            color var(--rkc-t), box-shadow var(--rkc-t), transform var(--rkc-t);
}

.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta:hover,
.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta:focus-visible {
	background-color: var(--rkc-brass-deep);
	border-color: var(--rkc-brass-deep);
	color: var(--rkc-white);
	text-decoration: none;
}

.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta:focus-visible {
	outline: none;
	box-shadow: var(--rkc-ring);
}

.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta:active {
	transform: translateY(1px);
}

/* Reduced motion — mirrors rkc.css section 19 and section 07 above. */
@media (prefers-reduced-motion: reduce) {
	.rkc-calc--locked,
	.rkc-calcs--locked .rkc-calcnav a,
	.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta {
		transition: none;
	}

	.rkc-calc--locked:hover,
	.rkc-calc--locked:focus-within,
	.rkc-calclock .rkc-calclock__cta.rkc-calclock__cta:active {
		transform: none;
	}
}

/* ============================================================
   21. Cascade guard - anchors & hero headings
   Elementor Kit 10 emits `.elementor-kit-10 h1{color:#0A1A1F}` and
   `.elementor-kit-10 a{color:#8A5F14}` at specificity (0,1,1), which
   outranks the design system's (0,1,0) class selectors. Result:
   hero titles rendered ink-on-dark-overlay (contrast 1.15, effectively
   invisible) and every anchor CTA rendered brass-deep-on-brass (1.84).
   Section 07 fixed only <button> elements - but almost every CTA on
   this site is an <a>. These element-qualified selectors win on
   specificity alone; no !important. Colour only - backgrounds already
   resolve correctly from rkc.css.
   ============================================================ */

h1.rkc-phero__title,
h2.rkc-phero__title,
.rkc-phero .rkc-phero__title {
	color: var(--rkc-white, #ffffff);
}

a.rkc-btn                       { color: var(--rkc-ink, #0A1A1F); text-decoration: none; }
a.rkc-btn--brass                { color: var(--rkc-ink, #0A1A1F); }
a.rkc-btn--brass:hover,
a.rkc-btn--brass:focus-visible  { color: var(--rkc-white, #ffffff); }
a.rkc-btn--ghost                { color: var(--rkc-ink, #0A1A1F); }
a.rkc-btn--dark,
a.rkc-btn--dark:hover           { color: var(--rkc-white, #ffffff); }

/* Ghost CTAs on a dark hero or dark band need light text. */
.rkc-phero a.rkc-btn--ghost,
.rkc-sec--dark a.rkc-btn--ghost,
.rkc-band a.rkc-btn--ghost      { color: var(--rkc-white, #ffffff); }
.rkc-phero a.rkc-btn--ghost:hover,
.rkc-sec--dark a.rkc-btn--ghost:hover,
.rkc-band a.rkc-btn--ghost:hover { color: var(--rkc-ink, #0A1A1F); }

/* WhatsApp anchors follow the same rule. */
a.rkc-wa--solid                 { color: var(--rkc-white, #ffffff); }
a.rkc-wa--ghost                 { color: var(--rkc-ink, #0A1A1F); }
.rkc-sec--dark a.rkc-wa--ghost,
.rkc-phero a.rkc-wa--ghost      { color: var(--rkc-white, #ffffff); }