/* ============================================================================
   Royal Carriage — wavy system
   Source: Claude Design "Components" canvas (2026-09-04), specimens 1b / 2c /
   3a / 3b. Import once from globals.css, AFTER buttons.css.

     styles/globals.css:  @import "./system/wavy-system.css";

   ── ONE ENGINE, MANY HOSTS ────────────────────────────────────────────────
   .rc-flow is the only place flowing gold is defined. Three layers slide
   against each other; each is 300% wide carrying a repeating gradient whose
   period is 28% of that box, translated by exactly one period, so the loop is
   seamless. Transform-only — never triggers layout or paint.

   Every primitive below is a HOST that places .rc-flow in a different slot:

     .rc-btn      fill        the CTA
     .rc-rule     line        dividers
     .rc-edge     top edge    cards (2px gold hairline, per the brand guide)
     .rc-ring     border      outline button, input focus, price plate
     .rc-glyph    text        kickers, ghost buttons

   Tune per instance with custom properties, not new classes:
     --rc-flow-speed   base layer duration      (default 6s)
     --rc-flow-bleed   layer overhang           (default 30%)

   ── WHAT THIS REPLACES (migrate page by page; delete old CSS only at 0 uses) ─
   Buttons   .btn-luxury · .gold-river · .gold-river--compact · .hero-cta--*
             · .btn-sm/md/lg/xl · .btn-luxury[style*="transparent"]
             · ui/button.tsx variantClasses
   Dividers  .rc-divider · .rc-divider--short · .rc-gold-rule · .luxury-divider
             · .rc-mark__rule · .rc-tick · .section-luxury::before
   Surfaces  .rc-card-steel · .glass-card · .glass-card-gold · .icon-card
             · .quote-glass · .glass / .glass-dark / .glass-heavy / .glass-light
             · .glass-card-luxury · ui/card.tsx
   Pills     .rc-stat-pill · .rc-link-pill · .rc-link-pill-gold
             · .rc-feature-chip · .rc-pill
   Plate     .rc-price-plate and its --sm / --lg / --center modifiers

   ⚠️  --liquid tiers use the SVG turbulence filter. <WavyButtonFilter /> must be
   mounted once in app/layout.tsx. Budget ONE filtered element per viewport
   (<WavyLiquidUpgrade /> enforces two, nearest the viewport centre).
   ============================================================================ */

/* ─── Engine ─────────────────────────────────────────────────────────────── */

@keyframes rc-flow-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-28%); }
}
@keyframes rc-flow-slide-rev {
  from { transform: translateX(-28%); }
  to { transform: translateX(0); }
}
@keyframes rc-flow-bob {
  0%, 100% { transform: translateY(-4%) scaleY(1.06); }
  50% { transform: translateY(4%) scaleY(1.14); }
}
@keyframes rc-flow-sheen {
  0% { transform: translateX(-60%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}
@keyframes rc-flow-glyph {
  from { background-position: 0% 50%; }
  to { background-position: -84% 50%; }
}
@keyframes rc-spacer-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-480px); }
}

.rc-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rc-flow__l {
  position: absolute;
  top: calc(-1 * var(--rc-flow-bleed, 30%));
  bottom: calc(-1 * var(--rc-flow-bleed, 30%));
  left: 0;
  width: 300%;
  will-change: transform;
}
.rc-flow__l--base {
  background: repeating-linear-gradient(
    100deg,
    #8a6d14 0%,
    var(--color-gold-dark) 5%,
    var(--color-gold) 10%,
    #ffe9a8 15%,
    var(--color-gold) 20%,
    var(--color-gold-dark) 24%,
    #8a6d14 28%
  );
  animation: rc-flow-slide var(--rc-flow-speed, 6s) linear infinite;
}
.rc-flow__l--counter {
  background: repeating-linear-gradient(
    78deg,
    transparent 0%,
    rgba(255, 233, 168, 0.55) 9%,
    transparent 18%,
    rgba(138, 109, 20, 0.5) 24%,
    transparent 28%
  );
  mix-blend-mode: overlay;
  animation: rc-flow-slide-rev calc(var(--rc-flow-speed, 6s) * 1.58) linear infinite;
}
.rc-flow__l--spec {
  background: radial-gradient(
    ellipse 45% 120% at 30% 50%,
    rgba(255, 245, 214, 0.7),
    transparent 60%
  );
  mix-blend-mode: screen;
  animation:
    rc-flow-slide calc(var(--rc-flow-speed, 6s) * 2.17) linear infinite,
    rc-flow-bob 5s ease-in-out infinite;
}
.rc-flow__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55) 50%, transparent);
  animation: rc-flow-sheen 4.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.rc-flow--liquid {
  filter: url(#rc-wavy-turbulence);
  --rc-flow-bleed: 45%;
}

/* ─── Host: .rc-btn — fill ───────────────────────────────────────────────── */

.rc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-min-height);
  padding: 0.875rem 2.125rem;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--btn-radius);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  /* Warm near-black, not #000 — owner 2026-07-17, "black text on gold is harsh" */
  color: #1f1508;
  background: var(--color-gold-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.35);
  transition:
    transform 160ms var(--ease-luxury),
    box-shadow 220ms var(--ease-luxury);
}
/* Labels ALWAYS get a class. A bare `.rc-btn > span` is (0,1,1) and outranks
   the (0,1,0) engine selectors, which collapses .rc-flow to 0x0. */
.rc-btn__label {
  position: relative;
  z-index: 3;
}
.rc-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 30px rgba(212, 168, 67, 0.45),
    0 0 26px rgba(212, 168, 67, 0.3);
}
.rc-btn:active { transform: scale(0.97); }
.rc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-gold);
}
.rc-btn:disabled,
.rc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* Sizes are the ONLY thing that changes height. 48 is the conversion floor. */
.rc-btn--lg { min-height: 56px; padding: 0 2.25rem; font-size: 0.9375rem; }
.rc-btn--sm { min-height: 40px; padding: 0 1.25rem; font-size: 0.78125rem; }
/* Icon-only is 48x48 — NOT the 36 and 52 that .btn-icon-only shipped. An icon
   button is still a conversion target and gets the same floor as the rest. */
.rc-btn--icon,
.rc-ring--icon .rc-ring__inner {
  width: var(--btn-min-height);
  min-width: var(--btn-min-height);
  padding: 0;
}
.rc-ring--icon .rc-ring__inner {
  width: calc(var(--btn-min-height) - 3px);
  min-width: calc(var(--btn-min-height) - 3px);
}

/* ─── Host: .rc-ring — border ────────────────────────────────────────────── */

.rc-ring {
  position: relative;
  display: inline-flex;
  padding: 1.5px;
  border: 0;
  border-radius: var(--btn-radius);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 160ms var(--ease-luxury),
    box-shadow 220ms var(--ease-luxury);
}
.rc-ring__inner {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--btn-min-height) - 3px);
  padding: 0.8125rem 2rem;
  box-sizing: border-box;
  border-radius: calc(var(--btn-radius) - 1.5px);
  background: var(--color-bg);
  color: var(--color-gold-light);
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    background 220ms var(--ease-luxury),
    color 220ms var(--ease-luxury);
}
a.rc-ring:hover,
button.rc-ring:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(212, 168, 67, 0.28);
}
a.rc-ring:hover .rc-ring__inner,
button.rc-ring:hover .rc-ring__inner {
  background: rgba(24, 19, 6, 0.9);
  color: var(--color-gold-shimmer);
}
a.rc-ring:active,
button.rc-ring:active { transform: scale(0.98); }
.rc-ring:focus-visible,
.rc-ring:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-gold);
}
button.rc-ring:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ─── Host: .rc-glyph — text ─────────────────────────────────────────────── */

.rc-glyph {
  background: repeating-linear-gradient(
    100deg,
    #8a6d14 0%,
    var(--color-gold-dark) 5%,
    var(--color-gold) 10%,
    #ffe9a8 15%,
    var(--color-gold) 20%,
    var(--color-gold-dark) 24%,
    #8a6d14 28%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rc-flow-glyph var(--rc-flow-speed, 6s) linear infinite;
}
a.rc-glyph,
button.rc-glyph {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-min-height);
  border: 0;
  cursor: pointer;
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 0.25rem;
}
a.rc-glyph:hover,
button.rc-glyph:hover { filter: brightness(1.12); }
.rc-glyph:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Host: .rc-rule — line ──────────────────────────────────────────────── */

.rc-rule {
  position: relative;
  /* REQUIRED. Rendered as a <span>; width/height do not apply to a
     non-replaced inline element, so without this it collapses to 0x0. It only
     appears to work inside a flex parent, which blockifies it. */
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border: 0;
  margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.rc-rule .rc-flow__l { --rc-flow-bleed: 300%; }
.rc-rule--liquid .rc-flow__l { --rc-flow-bleed: 600%; }
/* The one divider that should not move */
.rc-rule--tick {
  width: 1.75rem;
  height: 1px;
  background: var(--color-gold);
  -webkit-mask-image: none;
  mask-image: none;
}
.rc-rule-label {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}
.rc-rule-label > .rc-rule { flex: 1; }
.rc-rule-label__text {
  flex: none;
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
}

/* ─── Host: .rc-edge — card top edge ────────────────────────────────────── */

.rc-surface {
  position: relative;
  display: block;
  border: 1px solid var(--color-border-gold);
  border-radius: 16px;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transition:
    transform 350ms var(--ease-luxury),
    box-shadow 350ms var(--ease-luxury),
    border-color 350ms var(--ease-luxury);
}
/* Glass = the same card, translucent + blurred. For panels that float over
   something (booking frame, nav dropdown). Never a light glass effect. */
.rc-surface--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.rc-surface--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-gold);
}
.rc-edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.rc-edge .rc-flow__l { --rc-flow-bleed: 300%; }
.rc-surface__body { position: relative; z-index: 1; padding: 1.5rem; }

/* ─── Pills ─────────────────────────────────────────────────────────────── */

.rc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid rgba(212, 168, 67, 0.28);
  background: rgba(8, 8, 8, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: default;
  transition:
    border-color 200ms var(--ease-luxury),
    color 200ms var(--ease-luxury),
    box-shadow 200ms var(--ease-luxury);
}
a.rc-pill,
button.rc-pill { cursor: pointer; }
.rc-pill__value {
  color: var(--color-gold-light);
  font-weight: 700;
}
a.rc-pill:hover,
button.rc-pill:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: 0 0 16px rgba(212, 168, 67, 0.2);
}
.rc-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-gold);
}
.rc-pill[aria-pressed="true"] {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1f1508;
}
.rc-pill[aria-pressed="true"] .rc-pill__value { color: #1f1508; }
/* Directory link — no underline, hover colour only (WCAG 1.4.1 handled by
   the surrounding nav landmark, not by underlining 300 links) */
.rc-pill--quiet {
  min-height: 36px;
  padding: 0.4375rem 0.9375rem;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(212, 168, 67, 0.22);
  box-shadow: none;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ─── Field ─────────────────────────────────────────────────────────────── */

.rc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.rc-field__label {
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.rc-field__ring {
  position: relative;
  display: block;
  padding: 1.5px;
  border-radius: var(--btn-radius);
  overflow: hidden;
  isolation: isolate;
  background: rgba(212, 168, 67, 0.22);
}
/* The flow layers sit at opacity 0 until focus — no idle motion in a form */
.rc-field__ring .rc-flow {
  opacity: 0;
  transition: opacity 260ms var(--ease-luxury);
}
.rc-field__ring:focus-within .rc-flow { opacity: 1; }
.rc-field__input {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  min-height: calc(var(--btn-min-height) - 3px);
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border: 0;
  border-radius: calc(var(--btn-radius) - 1.5px);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  /* 16px — iOS zooms the viewport on focus below this */
  font-size: 1rem;
  line-height: 1.4;
}
.rc-field__input::placeholder { color: var(--color-text-muted); }
.rc-field__input:focus { outline: none; }
.rc-field__hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ─── Price plate ───────────────────────────────────────────────────────── */

.rc-plate {
  position: relative;
  display: inline-flex;
  padding: 1.5px;
  border-radius: 1rem;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition:
    transform 250ms var(--ease-luxury),
    box-shadow 250ms var(--ease-luxury);
}
.rc-plate__inner {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 0.85rem 1.35rem;
  border-radius: calc(1rem - 1.5px);
  background:
    linear-gradient(135deg, rgba(212, 168, 67, 0.12) 0%, transparent 45%),
    var(--color-bg);
}
a.rc-plate:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(212, 168, 67, 0.18);
}
a.rc-plate:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-gold);
}
.rc-plate__stack {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.rc-plate__label {
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1;
}
.rc-plate__price {
  font-family: var(--font-heading), var(--font-heading-fallback);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold-light);
}
.rc-plate__note {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  max-width: 18rem;
}
.rc-plate--sm .rc-plate__inner { padding: 0.55rem 0.95rem; gap: 0.65rem; }
.rc-plate--sm .rc-plate__price { font-size: clamp(1.25rem, 3vw, 1.65rem); }
.rc-plate--sm .rc-plate__note { font-size: 0.75rem; max-width: 14rem; }

/* ─── Section header ───────────────────────────────────────────────────── */

/* Replaces SectionHeader's .rc-section-kicker stack. The old .section-label is
   display:none !important in layout.css, so every kicker on the live site is
   invisible — this is real markup with no such rule. */
.rc-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}
.rc-head--center { align-items: center; text-align: center; }
.rc-head__kicker {
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}
.rc-head__title {
  font-family: var(--font-heading), var(--font-heading-fallback);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
  color: var(--color-text-primary);
  margin: 0.875rem 0 0.75rem;
}
.rc-head__sub {
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  /* One measure, not 27 */
  max-width: var(--measure-narrow, 44ch);
  margin: 0;
}

/* ─── Spacer / section transition ──────────────────────────────────────── */

.rc-spacer { position: relative; width: 100%; display: block; overflow: hidden; }
.rc-spacer--rule { display: flex; align-items: center; }
.rc-spacer--fade {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(212, 168, 67, 0.07) 45%,
    rgba(212, 168, 67, 0.13) 50%,
    rgba(212, 168, 67, 0.07) 55%,
    transparent 100%
  );
}
.rc-spacer--wave { line-height: 0; }
.rc-spacer__svg { display: block; width: 100%; height: 100%; }
.rc-spacer__crest { animation: rc-spacer-drift 14s linear infinite; will-change: transform; }
.rc-spacer__crest--slow { animation-duration: 22s; animation-direction: reverse; }

/* ─── Select (FareLookup) ───────────────────────────────────────────────── */

.rc-field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4a843' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px;
}
.rc-field__input--select option { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.rc-field__input:read-only { color: var(--color-text-secondary); cursor: default; }

/* ─── FareLookup — the hero instrument ──────────────────────────────────── */

.rc-fare { max-width: 30rem; }
.rc-fare__body { padding: 1.5rem; }
.rc-fare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 480px) {
  .rc-fare__grid { grid-template-columns: 1fr 1fr; }
  .rc-fare__grid > :first-child { grid-column: 1 / -1; }
}
.rc-fare__answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 1.25rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rc-fare__price {
  font-family: var(--font-heading), var(--font-heading-fallback);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold-light);
  font-variant-numeric: tabular-nums;
}
.rc-fare__price--quote { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.rc-fare__meta { font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-secondary); }
.rc-fare__book { width: 100%; }
.rc-fare__foot {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* ─── ProofLine — one review at the decision point ──────────────────────── */

.rc-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.875rem;
  max-width: 36rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rc-proof__by {
  font-family: var(--font-body), "Jost", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rc-proof__q {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ─── RateTable — every price is a link ─────────────────────────────────── */

.rc-rates {
  max-width: 48rem;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border-gold);
}
.rc-rates__table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; }
.rc-rates__table th {
  padding: 0.75rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(212, 168, 67, 0.08);
}
.rc-rates__table td { padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.rc-rates__table td:first-child { padding: 0.625rem 1rem; }
.rc-rates__num { text-align: right; }
/* The whole cell is the hit area — 48px floor, not just the glyphs */
.rc-rates__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  min-height: 48px;
  padding: 0 1rem;
  font-weight: 700;
  color: var(--color-gold);
  text-decoration: none;
  transition: background 160ms var(--ease-luxury), color 160ms var(--ease-luxury);
}
.rc-rates__price::after { content: "→"; opacity: 0; transform: translateX(-4px); transition: opacity 160ms, transform 160ms var(--ease-luxury); }
.rc-rates__price:hover { background: rgba(212, 168, 67, 0.08); color: var(--color-gold-light); }
.rc-rates__price:hover::after { opacity: 1; transform: none; }
.rc-rates__price:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-gold);
}
.rc-rates__foot { margin: 0; padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--color-text-muted); border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ─── StickyBookBar — mobile chrome ─────────────────────────────────────── */

.rc-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  gap: 0.5rem;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 8, 8, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(212, 168, 67, 0.28);
  /* The bar never eats clicks; only its buttons do. See 2026-07-18 outage note in layout.tsx. */
  pointer-events: none;
  transition: transform 260ms var(--ease-luxury);
}
.rc-sticky > * { pointer-events: auto; }
.rc-sticky .rc-btn { flex: 1; }
.rc-sticky[data-hidden] { transform: translateY(110%); }
@media (max-width: 767px) {
  .rc-sticky { display: flex; }
  body.rc-has-sticky { padding-bottom: 5rem; }
}
/* A page that mounts StickyBookBar supersedes the two legacy bars layout.tsx
   still mounts sitewide (MobileBottomBar, StickyBookingBar). One bar per page.
   Unlayered, so it beats their `lg:block` / `lg:hidden` utilities (which live
   in @layer utilities) without !important — see PR #3799. */
body.rc-has-sticky .mobile-bottom-bar,
body.rc-has-sticky .sticky-booking-bar { display: none; }

/* ─── Reduced motion: freeze everything, keep a press ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rc-flow__l,
  .rc-flow__sheen,
  .rc-glyph,
  .rc-spacer__crest {
    animation: none;
  }
  .rc-flow--liquid { filter: none; }
  .rc-btn:hover,
  a.rc-ring:hover,
  button.rc-ring:hover,
  .rc-surface--interactive:hover,
  a.rc-plate:hover {
    transform: none;
  }
  .rc-btn:active { transform: scale(0.98); }
  .rc-field__ring .rc-flow { transition: none; }
  .rc-sticky { transition: none; }
  .rc-rates__price::after { transition: none; }
}