/* AI Revenue Calculator — layout and controls. Tokens fall back so the file
 * stands on its own (the page's inline :root block defines them). */
.rc { padding: 8px 0 56px; position: relative; z-index: 1; }
.rc [hidden], .rc-grid[hidden] { display: none !important; }
.rc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rc-noscript { background: var(--bg-2, #f5f8fb); border: 1px solid var(--rule, #e1e8f0); border-radius: 12px; padding: 16px 18px; }
.rc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rc-card { background: #fff; border: 1px solid var(--rule, #e1e8f0); border-radius: var(--radius-lg, 22px); box-shadow: var(--shadow, 0 4px 16px -2px rgba(10,34,69,.08)); padding: 26px; }
.rc-results { position: sticky; top: 88px; display: grid; gap: 16px; }

.rc-step { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.rc-step:not(:first-child) { margin-top: 26px; }
.rc-step h3 { font-family: var(--display, "Inter", sans-serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink, #0a2245); }
.rc-num { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent-2, #8b5cf6), var(--accent-3, #3b82f6)); }

.rc-field { display: block; margin-bottom: 14px; }
.rc-label, .rc-slider label { display: block; font-size: 14px; font-weight: 600; color: var(--ink, #0a2245); margin-bottom: 6px; }
.rc-opt { font-weight: 500; color: var(--ink-dim, #566d8a); }
.rc input[type="text"], .rc input[type="email"], .rc select, .rc textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink, #0a2245); background: #fff;
  border: 1px solid var(--rule-2, #cdd9e5); border-radius: 10px; padding: 11px 12px; min-height: 46px;
}
.rc textarea { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; min-height: 0; resize: vertical; }
.rc input:focus-visible, .rc select:focus-visible, .rc textarea:focus-visible, .rc button:focus-visible, .rc a:focus-visible, .rc summary:focus-visible, .rc-tip:focus-visible {
  outline: 3px solid var(--accent, #5a5ddb); outline-offset: 2px;
}
.rc-row { display: flex; gap: 8px; }
.rc-row input { flex: 1; min-width: 0; }
.rc-help { font-size: 13px; line-height: 1.45; color: var(--ink-dim, #566d8a); margin-top: 6px; }
.rc-help:empty { display: none; }
.rc-help-top { margin: -6px 0 14px; }
.rc-help.is-good { color: #0f7a36; }
.rc-help.is-bad { color: #b42318; }

.rc-slider { margin-bottom: 16px; }
.rc-sl-row { display: grid; grid-template-columns: 1fr 112px; gap: 12px; align-items: center; }
.rc-sl-row input[type="text"] { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.rc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2, #8b5cf6) var(--p, 50%), var(--bg-3, #ecf2f8) var(--p, 50%)); }
.rc input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2, #8b5cf6) var(--p, 50%), var(--bg-3, #ecf2f8) var(--p, 50%)); }
.rc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--accent, #5a5ddb); box-shadow: 0 2px 6px rgba(10,34,69,.18); }
.rc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent, #5a5ddb); }

.rc-tip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--accent-deep, #4338ca); background: var(--accent-soft, #eef0ff); cursor: help; position: relative; vertical-align: 1px; margin-left: 4px; }
.rc-tip:hover::after, .rc-tip:focus::after {
  content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: 260px; max-width: 70vw; padding: 10px 12px; border-radius: 10px; background: var(--ink, #0a2245); color: #fff;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; z-index: 20; box-shadow: var(--shadow-lg, 0 24px 48px -12px rgba(10,34,69,.14));
}

.rc-more { border: 1px dashed var(--rule-2, #cdd9e5); border-radius: 14px; margin-top: 10px; }
.rc-more summary { cursor: pointer; list-style: none; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-weight: 700; color: var(--accent-deep, #4338ca); }
.rc-more summary::-webkit-details-marker { display: none; }
.rc-more summary::before { content: "+"; font-weight: 800; }
.rc-more[open] summary::before { content: "−"; }
.rc-more-hint { font-weight: 500; font-size: 13px; color: var(--ink-dim, #566d8a); }
.rc-more-body { padding: 0 16px 14px; }
.rc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; border-radius: 12px; padding: 12px 18px; min-height: 46px; cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.rc-btn-main { color: #fff; background: linear-gradient(135deg, var(--accent, #5a5ddb), var(--accent-2, #8b5cf6)); box-shadow: 0 8px 20px -8px rgba(90,93,219,.6); width: 100%; }
.rc-btn-main:hover { filter: brightness(1.06); }
.rc-btn-soft { color: var(--accent-deep, #4338ca); background: var(--accent-soft, #eef0ff); border-color: rgba(99,102,241,.2); }
.rc-btn[disabled] { opacity: .6; cursor: wait; }
.rc-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-deep, #4338ca); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.rc-hero-card { background: linear-gradient(160deg, #0a2245 0%, #1b2a6b 60%, #3a2a8f 100%); color: #fff; border: 0; }
.rc-kicker { font-size: 15px; color: #c9d4ff; font-weight: 500; }
.rc-big { font-family: var(--display, "Inter", sans-serif); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.rc-big #rcBig { font-size: clamp(44px, 6vw, 64px); background: linear-gradient(90deg, #fff, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-per { font-size: 20px; font-weight: 600; color: #c9d4ff; }
.rc-sub { font-size: 16px; color: #e6ebff; }
.rc-bars { margin: 18px 0 6px; display: grid; gap: 9px; }
.rc-bar { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; color: #c9d4ff; }
.rc-bar b { color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.rc-bar-t { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.rc-bar-t i { display: block; height: 100%; width: 0; border-radius: 99px; background: rgba(255,255,255,.55); transition: width .5s ease; }
.rc-bar-t i.is-target { background: linear-gradient(90deg, #a78bfa, #60a5fa); }
.rc-lost { font-size: 14px; color: #c9d4ff; margin-top: 10px; }
.rc-checks:empty { display: none; }
.rc-check { margin-top: 12px; font-size: 13.5px; line-height: 1.45; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 10px 12px; color: #fff; }

.rc-gate h3, .rc-report h3 { font-family: var(--display, "Inter", sans-serif); font-size: 20px; font-weight: 750; letter-spacing: -0.015em; color: var(--ink, #0a2245); margin-bottom: 6px; }
.rc-gate > p { font-size: 15px; color: var(--ink-2, #2d4663); margin-bottom: 14px; }
.rc-fine { font-size: 12.5px; color: var(--ink-dim, #566d8a); margin-top: 10px; }
.rc-fine a { color: inherit; }

.rc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.rc-tile { background: var(--bg-2, #f5f8fb); border: 1px solid var(--rule, #e1e8f0); border-radius: 14px; padding: 14px; }
.rc-tile span { display: block; font-size: 12.5px; color: var(--ink-dim, #566d8a); font-weight: 600; }
.rc-tile b { display: block; font-family: var(--display, "Inter", sans-serif); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink, #0a2245); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rc-tile-accent { grid-column: 1 / -1; background: var(--accent-soft, #eef0ff); border-color: rgba(99,102,241,.25); }
.rc-plan { font-size: 15px; color: var(--ink-2, #2d4663); line-height: 1.55; }
.rc-cta-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }

.rc-math summary { cursor: pointer; font-weight: 700; color: var(--ink, #0a2245); }
.rc-steps { margin: 12px 0 0 20px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2, #2d4663); }
.rc-steps b { color: var(--ink, #0a2245); font-variant-numeric: tabular-nums; }

.rc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 6px; }
.rc-dot { color: var(--ink-faint-line, #9eb1c7); }
.rc-embed { width: 100%; display: grid; gap: 8px; margin-top: 6px; }
.rc-embed .rc-btn { justify-self: start; }

/* Phones and tablets: the result sits under the inputs, so a slim bar keeps
 * the number on screen while they type. calc.js shows it only while the
 * inputs are in view and the result card is not. */
.rc-mini { display: none; }
@media (max-width: 960px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-results { position: static; scroll-margin-top: 80px; }
  .rc-mini:not([hidden]) {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px;
    background: #0a2245; color: #fff; text-decoration: none; font-size: 14px; box-shadow: 0 12px 30px -8px rgba(10,34,69,.5);
  }
  .rc-mini b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .rc-mini span { color: #c9d4ff; font-weight: 600; white-space: nowrap; }
}
@media (max-width: 520px) {
  .rc-card { padding: 20px 16px; border-radius: 18px; }
  .rc-two { grid-template-columns: 1fr; }
  .rc-tiles { grid-template-columns: 1fr; }
  .rc-cta-row { grid-template-columns: 1fr; }
  .rc-row { flex-direction: column; }
  .rc-sl-row { grid-template-columns: 1fr 96px; }
  .rc-bar { grid-template-columns: 96px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) { .rc-bar-t i { transition: none; } }

/* ================================================================
 * The nav + footer look, carried onto the calculator (24 Sep 2026,
 * Ryder: "match some elements to what the nav and footer have").
 * Same three diagonal light shafts, the same purple→blue hairline drawn
 * out from the centre, the same 1.1s blur-in with a stagger, the same
 * hover lift and arrow nudge. Visible by default: calc.js adds .rc-js
 * (hidden start state) and then .rc-in, so no JS = nothing hidden.
 * ================================================================ */
.rc { overflow: hidden; }
.rc-glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; contain: strict; pointer-events: none; }
.rc-glow > div { position: absolute; top: 0; border-radius: 9999px; }
.rc-glow-1 { width: 620px; height: 1400px; left: 2%; transform: translateY(-520px) rotate(-45deg);
  background: radial-gradient(68.54% 68.72% at 55.02% 31.46%, rgba(139, 92, 246, 0.07) 0, rgba(96, 165, 250, 0.03) 50%, rgba(10, 34, 69, 0.01) 80%); }
.rc-glow-2 { width: 280px; height: 1400px; left: 42%; translate: 0 -40%; rotate: -45deg;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 34, 69, 0.05) 0, rgba(10, 34, 69, 0.012) 80%, transparent 100%); }
.rc-glow-3 { width: 280px; height: 1400px; left: 74%; transform: translateY(-520px) rotate(-45deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(96, 165, 250, 0.06) 0, rgba(10, 34, 69, 0.012) 80%, transparent 100%); }

/* trade chips — the nav's pill buttons */
.rc-trades { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.rc-trades-l { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim, #566d8a); margin-right: 4px; }
.rc-trades a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink, #0a2245); text-decoration: none;
  background: rgba(255,255,255,.8); border: 1px solid var(--rule, #e1e8f0);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .2s ease, border-color .2s ease, transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s ease;
}
.rc-trades a:hover { transform: translateY(-2px); border-color: var(--rule-2, #cdd9e5); box-shadow: var(--shadow-sm, 0 1px 3px rgba(10,34,69,.06)); }
.rc-trades a[aria-current="page"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent, #5a5ddb), var(--accent-2, #8b5cf6)); }

/* cards: the footer's brand hairline across the top, and a soft lift on hover */
.rc-card { position: relative; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rc-card::before {
  content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(79,70,229,0) 0%, #8b5cf6 30%, #60a5fa 50%, #8b5cf6 70%, rgba(79,70,229,0) 100%);
  transform-origin: 50% 50%;
}
.rc-gate, .rc-report, .rc-inputs { transition: box-shadow .3s ease, transform .3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.rc-gate:hover, .rc-report:hover { box-shadow: var(--shadow-lg, 0 24px 48px -12px rgba(10,34,69,.14)); }

/* the result card: the light shafts inside, the logo mark turning like the nav's */
.rc-hero-card { overflow: hidden; box-shadow: 0 30px 60px -20px rgba(30, 27, 110, .55), 0 0 0 1px rgba(167, 139, 250, .18) inset; }
.rc-hero-card > * { position: relative; z-index: 1; }
.rc-hero-glow { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.rc-hero-glow > div { position: absolute; border-radius: 9999px; }
.rc-hero-glow > div:first-child { width: 360px; height: 900px; right: -80px; top: -380px; rotate: -45deg;
  background: radial-gradient(50% 50% at 50% 50%, rgba(167,139,250,.28) 0, rgba(96,165,250,.08) 60%, transparent 100%); }
.rc-hero-glow > div:last-child { width: 200px; height: 800px; left: 30%; top: -300px; rotate: -45deg;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.08) 0, transparent 80%); }
.rc-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rc-hero-mark { width: 30px; height: 30px; display: inline-flex; }
.rc-hero-mark svg { width: 100%; height: 100%; display: block; }
.rc-hero-tag { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #c4b5fd; }
.rc-bar-t i.is-target { box-shadow: 0 0 12px rgba(167, 139, 250, .6); }

/* buttons: the nav's arrow nudge + a lift */
.rc-btn .arr { display: inline-block; transition: transform .3s ease; }
.rc-btn:hover .arr { transform: translateX(3px); }
.rc-btn-main { transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s ease, filter .2s ease; }
.rc-btn-main:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(90,93,219,.7); }
.rc-btn-soft { transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), background-color .2s ease; }
.rc-btn-soft:hover { transform: translateY(-1px); background: #e4e7ff; }
.rc-tile { transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s ease; }
.rc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(10,34,69,.06)); }
.rc-tile-accent { background: linear-gradient(135deg, #eef0ff, #f3f0ff); }
.rc input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(139,92,246,.14), 0 2px 6px rgba(10,34,69,.18); }
.rc input[type="range"]:hover::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(139,92,246,.14); }

/* reveal: the footer's AnimatedContainer, 1.1s, staggered by --d */
.rc-js .rc-anim {
  opacity: 0; filter: blur(4px); transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0.1s);
}
.rc-js.rc-in .rc-anim { opacity: 1; filter: none; transform: none; }
.rc-js .rc-card::before { transform: scaleX(0); opacity: 0; transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--d, 0s) + .3s), opacity .6s ease calc(var(--d, 0s) + .3s); }
.rc-js.rc-in .rc-card::before { transform: scaleX(1); opacity: 1; }
.rc-js .rc-glow { opacity: 0; transition: opacity 1.6s ease .2s; }
.rc-js.rc-in .rc-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rc-js .rc-anim, .rc-js .rc-card::before, .rc-js .rc-glow { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .rc-trades a, .rc-btn, .rc-btn .arr, .rc-tile, .rc-gate, .rc-report { transition: none; }
  .rc-trades a:hover, .rc-btn:hover, .rc-btn-main:hover, .rc-btn-soft:hover, .rc-tile:hover { transform: none; }
  .rc-hero-mark .lm-rotate, .rc-hero-mark .lm-node, .rc-hero-mark .lm-hub-pulse { animation: none; }
}
@media (max-width: 520px) {
  .rc-trades { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .rc-trades::-webkit-scrollbar { display: none; }
  .rc-trades a { flex: none; }
}
/* the frosted white card rule above must not win over the result card's navy */
.rc-card.rc-hero-card { background: linear-gradient(160deg, #0a2245 0%, #1b2a6b 60%, #3a2a8f 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rc-trades-l { white-space: nowrap; flex: none; }
.rc-tile b.is-empty { font-size: 15px; font-weight: 600; color: var(--ink-dim, #566d8a); letter-spacing: 0; }