/* SDD-010 marketing site redesign — design token/component system.
   Reference: docs/design/mockups/budgetflow-redesign-v2.html (approved).
   Color tokens, dark/light structure, typography, and the perforated-divider
   pattern are copied from that mockup as exactly as CSS scoping allows.

   Scoping note: app.css (10k+ lines, shared by the authenticated app and
   every public page) already defines --bg/--surface/--shadow and a
   site-wide [data-theme="dark"] block, plus bare classes .hero/.btn/
   .btn-primary/.section-head/.eyebrow/.receipt used elsewhere in the app.
   To avoid silently changing any of that (explicitly out of scope per
   SDD-010), every selector below is qualified under body.rd-page and every
   component class carries an rd- prefix. Only pages that opt in via
   base_v2.html (currently: home) load this file or carry that body class,
   so nothing here can affect an unported page or the authenticated app.
   Token *values* and structure are otherwise unchanged from the mockup. */

body.rd-page {
  --bg: #FAFAF8; --bg-2: #F1F0EC; --surface: #FFFFFF;
  --ink: #14213D; --ink-soft: #3A4A6B;
  --mint: #0E9F6E; --mint-dark: #0A7754;
  --mint-tint-bg: #E4F5EE; --mint-tint-text: #0A7754;
  --amber-tint-bg: #FBF0DD; --amber-tint-text: #8A5A16;
  --coral-tint-bg: #FBE9E5; --coral-tint-text: #9C3A28;
  --line: #DEDCD3;
  --elevated-bg: #14213D; --elevated-text: #FFFFFF; --elevated-sub: #B9C2D6;
  --elevated-line: rgba(255,255,255,.12); --elevated-tint: rgba(255,255,255,.06);
  --scan-mint: #5FD9AE;
  --rd-shadow: 0 1px 2px rgba(20,33,61,.04);
  --receipt-bg: #FFFFFF; --receipt-text: #14213D; --receipt-soft: #6B7280;
  color-scheme: light;

  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

body.rd-page[data-theme="dark"] {
  --bg: #0F1720; --bg-2: #161F2B; --surface: #16202C;
  --ink: #F4F3EE; --ink-soft: #9AA7BE;
  --mint: #3BC996; --mint-dark: #5FD9AE;
  --mint-tint-bg: rgba(14,159,110,.16); --mint-tint-text: #5FD9AE;
  --amber-tint-bg: rgba(232,163,61,.16); --amber-tint-text: #F0BE6E;
  --coral-tint-bg: rgba(216,80,58,.18); --coral-tint-text: #EE9C8B;
  --line: #28323F;
  --elevated-bg: #0A1017; --elevated-text: #F4F3EE; --elevated-sub: #8FA0C4;
  --elevated-line: rgba(255,255,255,.10); --elevated-tint: rgba(255,255,255,.04);
  --scan-mint: #3BC996;
  --rd-shadow: 0 1px 2px rgba(0,0,0,.3);
  --receipt-bg: #FFFFFF; --receipt-text: #14213D; --receipt-soft: #6B7280;
  color-scheme: dark;
}

body.rd-page * { box-sizing: border-box; }
html:has(body.rd-page) { scroll-behavior: smooth; }
body.rd-page h1, body.rd-page h2, body.rd-page h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
body.rd-page .rd-mono { font-family: 'IBM Plex Mono', monospace; }
body.rd-page .rd-wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
body.rd-page a { color: inherit; text-decoration: none; }

/* nav */
body.rd-page .rd-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
body.rd-page .rd-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1120px; margin: 0 auto;
}
body.rd-page .rd-logo { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 18px; }
body.rd-page .rd-logo-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--ink); position: relative; overflow: hidden; flex-shrink: 0; }
body.rd-page .rd-logo-mark::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--mint); animation: rd-scanmark 2.4s ease-in-out infinite; }
@keyframes rd-scanmark { 0%, 100% { top: 2px; } 50% { top: 22px; } }
body.rd-page .rd-nav-links { display: flex; gap: 32px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
body.rd-page .rd-nav-links a:hover { color: var(--ink); }
body.rd-page .rd-nav-right { display: flex; gap: 10px; align-items: center; }
body.rd-page .rd-icon-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
  transition: background .15s ease, transform .15s ease;
}
body.rd-page .rd-icon-btn:hover { background: var(--bg-2); }
body.rd-page .rd-icon-btn:active { transform: scale(.94); }
body.rd-page .rd-icon-btn svg { width: 16px; height: 16px; }
body.rd-page .rd-icon-btn .rd-moon { display: none; }
body.rd-page[data-theme="dark"] .rd-icon-btn .rd-sun { display: none; }
body.rd-page[data-theme="dark"] .rd-icon-btn .rd-moon { display: block; }
body.rd-page .rd-lang-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-family: 'IBM Plex Mono'; font-size: 12px; }
body.rd-page .rd-lang-toggle button { padding: 8px 12px; background: transparent; border: none; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: inherit; transition: background .15s ease, color .15s ease; }
body.rd-page .rd-lang-toggle button.rd-active { background: var(--ink); color: var(--bg); }
body.rd-page .rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; }
body.rd-page .rd-btn:active { transform: scale(.97); }
body.rd-page .rd-btn-primary { background: var(--ink); color: var(--bg); }
body.rd-page .rd-btn-primary:hover { opacity: .88; }
body.rd-page .rd-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
body.rd-page .rd-btn-ghost:hover { background: var(--bg-2); }
body.rd-page .rd-btn-mint { background: var(--mint); color: #0A1017; }
body.rd-page .rd-btn-full { width: 100%; }

/* hero */
body.rd-page .rd-hero { padding: 96px 0 64px; position: relative; background: var(--bg); }
body.rd-page .rd-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
body.rd-page .rd-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--mint-tint-text); background: var(--mint-tint-bg); padding: 6px 12px; border-radius: 20px; margin-bottom: 24px; }
body.rd-page .rd-eyebrow .rd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: rd-pulse 1.8s ease-in-out infinite; flex-shrink: 0; }
@keyframes rd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
body.rd-page h1.rd-headline { font-size: 52px; line-height: 1.05; margin-bottom: 20px; }
body.rd-page h1.rd-headline .rd-highlight { color: var(--mint-dark); }
body.rd-page .rd-sub { font-size: 17px; color: var(--ink-soft); max-width: 460px; margin-bottom: 32px; }
body.rd-page .rd-hero-actions { display: flex; gap: 14px; align-items: center; margin-bottom: 36px; flex-wrap: wrap; }
body.rd-page .rd-trust-row { display: flex; gap: 20px; align-items: center; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
body.rd-page .rd-trust-row span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: 'IBM Plex Mono'; }

/* perforated divider — the receipt's torn edge, used as the seam between sections */
body.rd-page .rd-perf-divider {
  height: 28px; width: 100%;
  background-image: radial-gradient(circle, var(--bg) 3.5px, transparent 3.8px);
  background-size: 18px 100%;
  background-position: center;
  background-color: var(--line);
  -webkit-mask-image: linear-gradient(black, black);
}

/* receipt scan visual */
body.rd-page .rd-receipt-stage {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(260px, 280px) max-content;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  row-gap: 16px;
}
body.rd-page .rd-receipt {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 280px; background: var(--receipt-bg); border-radius: 2px; padding: 24px 20px 32px;
  box-shadow: 0 12px 32px rgba(20,33,61,.16), 0 2px 8px rgba(20,33,61,.10);
  position: relative; z-index: 2; transform: rotate(-2deg);
  clip-path: polygon(0 0,100% 0,100% 100%,95% 97%,90% 100%,85% 97%,80% 100%,75% 97%,70% 100%,65% 97%,60% 100%,55% 97%,50% 100%,45% 97%,40% 100%,35% 97%,30% 100%,25% 97%,20% 100%,15% 97%,10% 100%,5% 97%,0 100%);
}
body.rd-page .rd-receipt-head { text-align: center; font-family: 'IBM Plex Mono'; font-size: 11px; color: var(--receipt-soft); border-bottom: 1px dashed #E4E2DA; padding-bottom: 12px; margin-bottom: 12px; }
body.rd-page .rd-receipt-head .rd-vendor { font-size: 14px; font-weight: 600; color: var(--receipt-text); display: block; margin-bottom: 4px; }
body.rd-page .rd-receipt-line { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono'; font-size: 12px; padding: 5px 0; color: var(--receipt-soft); border-bottom: 1px dotted #ECEAE3; transition: color .3s ease; }
body.rd-page .rd-receipt-line .rd-cat { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 8px; opacity: 0; transform: translateY(2px); transition: opacity .3s ease, transform .3s ease; }
body.rd-page .rd-receipt-total { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono'; font-weight: 600; font-size: 13px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--receipt-text); color: var(--receipt-text); }
body.rd-page .rd-scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--scan-mint), transparent); top: 0; z-index: 3; animation: rd-scan 3.6s ease-in-out infinite; }
@keyframes rd-scan { 0% { top: 8%; opacity: 0; } 8% { opacity: 1; } 50% { top: 88%; opacity: 1; } 58% { opacity: 0; } 100% { top: 88%; opacity: 0; } }
body.rd-page .rd-receipt-line.rd-on { color: var(--receipt-text); }
body.rd-page .rd-receipt-line.rd-on .rd-cat { opacity: 1; transform: translateY(0); }
body.rd-page .rd-cat-food { background: #E4F5EE; color: #0A7754; }
body.rd-page .rd-cat-transport { background: #FBF0DD; color: #8A5A16; }
body.rd-page .rd-cat-home { background: #FBE9E5; color: #9C3A28; }
body.rd-page .rd-float-card {
  position: relative; background: var(--surface); border-radius: 10px; border: 1px solid var(--line);
  box-shadow: var(--rd-shadow); padding: 12px 14px; z-index: 1; font-family: 'IBM Plex Mono'; font-size: 12px;
  width: max-content; max-width: 190px;
}
body.rd-page .rd-float-card.rd-a {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
  margin-top: 18px; animation: rd-float1 5s ease-in-out infinite;
}
body.rd-page .rd-float-card.rd-b {
  grid-column: 3; grid-row: 2; justify-self: start; align-self: end;
  margin-bottom: 20px; animation: rd-float2 5.6s ease-in-out infinite;
}
@keyframes rd-float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rd-float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
body.rd-page .rd-float-card .rd-label { color: var(--ink-soft); font-size: 10px; margin-bottom: 2px; }
body.rd-page .rd-float-card .rd-val { font-weight: 600; color: var(--mint-dark); }

body.rd-page .rd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
body.rd-page .rd-reveal.rd-in { opacity: 1; transform: translateY(0); }

body.rd-page .rd-section { padding: 80px 0; }
body.rd-page .rd-section-head { max-width: 520px; margin-bottom: 56px; }
body.rd-page .rd-section-head .rd-eyebrow { margin-bottom: 16px; }
body.rd-page .rd-section-head h2 { font-size: 34px; margin-bottom: 14px; }
body.rd-page .rd-section-head p { color: var(--ink-soft); font-size: 16px; }
body.rd-page .rd-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
body.rd-page .rd-step { border-top: 2px solid var(--ink); padding-top: 20px; }
body.rd-page .rd-step .rd-num { font-family: 'IBM Plex Mono'; font-size: 13px; color: var(--mint-tint-text); margin-bottom: 14px; display: block; }
body.rd-page .rd-step h3 { font-size: 18px; margin-bottom: 10px; }
body.rd-page .rd-step p { font-size: 14px; color: var(--ink-soft); }

body.rd-page .rd-features { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.rd-page .rd-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
body.rd-page .rd-feat { background: var(--bg-2); padding: 28px; transition: background .2s ease; }
body.rd-page .rd-feat:hover { background: var(--surface); }
body.rd-page .rd-feat-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 15px; }
body.rd-page .rd-feat h3 { font-size: 16px; margin-bottom: 8px; }
body.rd-page .rd-feat p { font-size: 13.5px; color: var(--ink-soft); }

body.rd-page .rd-forecast-panel { background: var(--elevated-bg); color: var(--elevated-text); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
/* standalone elevated card (mockup's .showcase-panel) - same treatment as
   .rd-forecast-panel's background but not itself a 2-column grid, for
   contexts (e.g. /features forecast detail) where the 2-column split is
   done by the surrounding section instead */
body.rd-page .rd-showcase-panel { background: var(--elevated-bg); color: var(--elevated-text); border-radius: 16px; padding: 32px; }
body.rd-page .rd-forecast-copy h2 { color: var(--elevated-text); font-size: 28px; margin-bottom: 14px; }
body.rd-page .rd-forecast-copy p { color: var(--elevated-sub); font-size: 15px; margin-bottom: 20px; }
body.rd-page .rd-range-card { background: var(--elevated-tint); border: 1px solid var(--elevated-line); border-radius: 12px; padding: 20px; }
body.rd-page .rd-range-label { font-family: 'IBM Plex Mono'; font-size: 11px; color: var(--elevated-sub); margin-bottom: 10px; }
body.rd-page .rd-range-bar { position: relative; height: 6px; background: var(--elevated-line); border-radius: 4px; margin: 14px 0 10px; }
body.rd-page .rd-range-fill { position: absolute; left: 22%; right: 18%; top: 0; bottom: 0; background: var(--mint); border-radius: 4px; animation: rd-fillgrow 2.4s ease-out; }
@keyframes rd-fillgrow { from { right: 100%; } to { right: 18%; } }
body.rd-page .rd-range-vals { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono'; font-size: 13px; color: var(--elevated-text); }
body.rd-page .rd-range-note { font-size: 12px; color: var(--elevated-sub); margin-top: 14px; }

body.rd-page .rd-cta-band { text-align: center; padding: 96px 0; }
body.rd-page .rd-cta-band h2 { font-size: 36px; margin-bottom: 14px; }
body.rd-page .rd-cta-band p { color: var(--ink-soft); margin-bottom: 32px; }

body.rd-page .rd-footer { border-top: 1px solid var(--line); padding: 32px 0; font-size: 13px; color: var(--ink-soft); }
body.rd-page .rd-footer .rd-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 840px) {
  body.rd-page .rd-hero-grid, body.rd-page .rd-steps, body.rd-page .rd-feat-grid, body.rd-page .rd-forecast-panel { grid-template-columns: 1fr; }
  body.rd-page .rd-nav-links { display: none; }
  body.rd-page h1.rd-headline { font-size: 36px; }
  body.rd-page .rd-receipt-stage { margin-top: 20px; }
}

/* ------------------------------------------------------------------------
   Shared nav/footer chrome (app/templates/public/base.html) — dark-mode
   token conversion + sticky-nav fix.

   Root cause of "sticky doesn't stick": .public-site-fintech (set on
   <body> by base.html) declares `overflow-x: hidden` with no explicit
   overflow-y. Per the CSS Overflow spec, that makes the *computed*
   overflow-y resolve to `auto`, which gives body a non-visible overflow
   box. position: sticky on .public-header (a direct child of body) then
   resolves its containing block against that box instead of the actual
   visual scrollport (document.scrollingElement stays <html> in Chromium
   here), so the header just scrolls away with the page even though
   `position: sticky` is correctly declared. Confirmed empirically with
   Playwright (header bounding-box y went to -1184px after a 1200px
   scroll) before touching any CSS.

   Fix: cancel that overflow on rd-page specifically (scoped so it can
   never affect any other consumer of .public-site-fintech - there are
   none today, grep-verified, but this stays defensive) and move the
   horizontal-scroll guard to <html> via :has(), which does not create
   the same broken containing-block situation for position: sticky.
   ------------------------------------------------------------------------ */
html:has(body.rd-page) { overflow-x: hidden; }
body.rd-page { overflow-x: visible; }

/* Nav background/blur exactly as specified in the approved mockup's
   `nav` rule (docs/design/mockups/budgetflow-redesign-v2.html): tracks
   --bg via color-mix so it's a light translucent bar in light mode and a
   dark translucent bar in dark mode, instead of the previous fixed
   dark-navy background that never changed with the toggle.
   position: sticky / top: 0 / z-index: 50 are already declared upstream
   in app.css (.public-header, .public-site-premium .public-header) and
   are left as-is - only the overflow bug above and the colors below
   needed fixing. z-index conflict check: the only other persistent
   fixed/sticky elements on public pages are the cookie notice
   (position: fixed, z-index: 60, bottom: 20px - bottom-anchored, no
   overlap with a top-anchored nav) and the mobile .public-menu dropdown
   (not independently stacked); .sidebar (z-index: 20) and
   .loading-overlay (z-index: 80) belong to the authenticated app only
   and are never rendered on these public templates - grep-verified. */
body.rd-page .public-header {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--line);
  color: var(--ink);
}
body.rd-page .public-brand,
body.rd-page .public-nav a,
body.rd-page .public-login-link {
  color: var(--ink);
}
body.rd-page .public-login-link,
body.rd-page .public-cta-small {
  white-space: nowrap;
}
body.rd-page .public-nav a {
  opacity: 0.82;
}
body.rd-page .public-nav a:hover,
body.rd-page .public-nav a.active {
  color: var(--mint-dark);
  opacity: 1;
}
body.rd-page .public-language-switcher {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-soft);
}
body.rd-page .public-language-switcher a {
  color: var(--ink-soft);
}
body.rd-page .public-language-switcher a.active {
  color: var(--ink);
}
body.rd-page .public-menu-toggle {
  border-color: var(--line);
  background: var(--surface);
}
body.rd-page .public-menu-toggle span:not(.sr-only) {
  background: var(--ink);
}
body.rd-page .public-menu {
  border-top-color: var(--line);
}
body.rd-page .public-beta-badge {
  background: var(--amber-tint-bg);
  color: var(--amber-tint-text);
}
body.rd-page .public-logo-mark rect {
  fill: var(--ink);
}

@media (max-width: 1180px) {
  body.rd-page .public-site-fintech .public-menu,
  body.rd-page .public-auth-page .public-menu {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 18px;
    justify-content: flex-end;
  }
  body.rd-page .public-site-fintech .public-header-actions,
  body.rd-page .public-auth-page .public-header-actions {
    order: 1;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }
  body.rd-page .public-site-fintech .public-nav,
  body.rd-page .public-auth-page .public-nav {
    order: 2;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 22px;
  }
  body.rd-page .public-site-fintech .public-nav a,
  body.rd-page .public-auth-page .public-nav a,
  body.rd-page .public-site-fintech .public-login-link,
  body.rd-page .public-auth-page .public-login-link,
  body.rd-page .public-site-fintech .public-cta-small,
  body.rd-page .public-auth-page .public-cta-small {
    font-size: 0.86rem;
  }
}

body.rd-page .public-footer {
  background: var(--bg);
  border-top-color: var(--line);
  color: var(--ink-soft);
}
body.rd-page .public-footer .public-brand,
body.rd-page .public-footer a,
body.rd-page .public-footer strong {
  color: var(--ink);
}
body.rd-page .public-footer a.active {
  color: var(--mint-dark);
}
body.rd-page .public-footer p {
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------------
   SDD-011 — /features, /pricing, /faq, /security, /login, /register.
   Shared components below (page head, banner wrapper, price card, fact
   grid, FAQ accordion, trust row, login card, register stage) are each
   used on 2+ pages and defined once here, per SDD-011's "no new one-off
   component patterns per page" rule. The six .rd-*-banner blocks further
   down are intentionally NOT shared - SDD-011 requires each page's
   banner to be distinct, grounded in that page's own subject matter.
   ------------------------------------------------------------------------ */

/* shared: page header (eyebrow + h1 + optional subtext), used on all 6 */
body.rd-page .rd-page-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
body.rd-page .rd-page-head .rd-eyebrow { margin-left: auto; margin-right: auto; width: fit-content; }
body.rd-page .rd-page-head h1 { font-size: 36px; margin-bottom: 14px; }
body.rd-page .rd-page-head p { color: var(--ink-soft); font-size: 16px; }

/* shared: centered banner wrapper that precedes the page head */
body.rd-page .rd-banner { max-width: 560px; margin: 0 auto 48px; }

/* shared: amber "paused" note, used on /pricing (inline in the price
   card) and /register (inline under the form) */
body.rd-page .rd-closed-note {
  background: var(--amber-tint-bg); color: var(--amber-tint-text);
  font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-top: 16px;
}

/* shared: /pricing's single price card */
body.rd-page .rd-price-card {
  background: var(--surface); border: 2px solid var(--mint); border-radius: 16px;
  padding: 40px; max-width: 420px; margin: 0 auto; text-align: center;
}
body.rd-page .rd-price-badge {
  display: inline-block; background: var(--mint-tint-bg); color: var(--mint-tint-text);
  font-size: 12px; font-family: 'IBM Plex Mono'; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
}
body.rd-page .rd-price-num { font-size: 52px; font-family: 'Space Grotesk'; font-weight: 700; margin: 8px 0; }
body.rd-page .rd-price-sub { color: var(--ink-soft); font-size: 13px; }
body.rd-page .rd-price-list { text-align: left; margin: 28px 0; display: grid; gap: 10px; font-size: 14px; }
body.rd-page .rd-price-list div { display: flex; gap: 10px; color: var(--ink-soft); }
body.rd-page .rd-price-list div::before { content: '\2713'; color: var(--mint); font-weight: 600; }

/* shared: /security's two-column fact grid (light card + dark elevated
   card pairing - kept as two distinct cards per SDD-011, not collapsed) */
body.rd-page .rd-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.rd-page .rd-fact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
body.rd-page .rd-fact-card.rd-dark { background: var(--elevated-bg); border-color: var(--elevated-line); }
body.rd-page .rd-fact-card.rd-dark h3 { color: var(--elevated-text); }
body.rd-page .rd-fact-card.rd-dark p,
body.rd-page .rd-fact-card.rd-dark li { color: var(--elevated-sub); }
body.rd-page .rd-fact-card h3 { font-size: 20px; margin-bottom: 10px; }
body.rd-page .rd-fact-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
body.rd-page .rd-fact-card ul { margin-top: 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
body.rd-page .rd-fact-card li { font-size: 13.5px; display: flex; gap: 8px; }
body.rd-page .rd-fact-card li::before { content: '\2022'; color: var(--mint); }

/* shared: /faq accordion (native details/summary, zero JS) */
body.rd-page .rd-faq-item { border-top: 1px solid var(--line); padding: 20px 0; }
body.rd-page .rd-faq-item:last-child { border-bottom: 1px solid var(--line); }
body.rd-page .rd-faq-item summary {
  font-family: 'Space Grotesk'; font-weight: 500; font-size: 16px; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
body.rd-page .rd-faq-item summary::-webkit-details-marker { display: none; }
body.rd-page .rd-faq-item summary::after { content: '+'; font-size: 20px; color: var(--mint-dark); flex-shrink: 0; }
body.rd-page .rd-faq-item[open] summary::after { content: '\2013'; }
body.rd-page .rd-faq-item p { color: var(--ink-soft); font-size: 14px; margin-top: 12px; max-width: 640px; }

/* shared: 3-card trust row, used on /faq below the accordion */
body.rd-page .rd-trust-row-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
body.rd-page .rd-trust-card { background: var(--bg-2); border-radius: 12px; padding: 20px; text-align: center; }
body.rd-page .rd-trust-card h3 { font-size: 14px; margin-bottom: 6px; }
body.rd-page .rd-trust-card p { font-size: 12.5px; color: var(--ink-soft); }

/* shared: /login form card */
body.rd-page .rd-login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; max-width: 380px; margin: 0 auto; }
body.rd-page .rd-login-card label { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 6px; }
body.rd-page .rd-login-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
body.rd-page .rd-login-forgot { display: block; text-align: right; font-size: 12.5px; color: var(--mint-dark); margin-top: 8px; }

/* shared: /register form card + input styling, and the field group used
   for password (mockup omitted password fields for brevity, but the
   real POST /register handler requires them - see rd-register-two-col) */
body.rd-page .rd-register-stage { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; padding: 20px 0; }
body.rd-page .rd-register-backdrop { position: absolute; top: -10px; right: 8%; transform: rotate(6deg); opacity: .9; z-index: 0; }
body.rd-page .rd-register-form-card {
  position: relative; z-index: 2; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 36px; width: 380px; max-width: 100%;
  box-shadow: 0 20px 48px rgba(20,33,61,.14);
}
body.rd-page .rd-register-form-card label { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 6px; }
body.rd-page .rd-register-form-card input,
body.rd-page .rd-register-form-card select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
/* Closed-signup state: <fieldset disabled> genuinely disables every
   descendant control (confirmed via Playwright - fill()/click() both
   fail on these elements), but neither the fieldset nor its children
   get any default browser styling for that state, so without this the
   form looks and reads as fully active. Note: CSS [disabled] only
   matches elements with the attribute set on themselves, not ones
   disabled via an ancestor fieldset - :disabled is the pseudo-class
   that correctly accounts for that inheritance (verified with
   el.matches(':disabled') vs el.matches('[disabled]') before writing
   this), so the attribute selector would have silently not applied. */
body.rd-page .rd-register-form-card fieldset:disabled {
  opacity: .55;
  cursor: not-allowed;
}
body.rd-page .rd-register-form-card input:disabled,
body.rd-page .rd-register-form-card select:disabled {
  background: var(--bg-2);
  color: var(--ink-soft);
  border-color: var(--line);
  cursor: not-allowed;
}
body.rd-page .rd-register-form-card button:disabled {
  cursor: not-allowed;
}
body.rd-page .rd-register-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Specificity note: body.rd-page .rd-register-form-card label (above)
   also matches this same <label> element and sets display: block with
   HIGHER specificity than a bare .rd-register-check class selector
   would have, silently winning and breaking the intended flex layout.
   Matching the full ancestor path here guarantees this rule wins. */
body.rd-page .rd-register-form-card label.rd-register-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 12px; color: var(--ink-soft); }
body.rd-page .rd-register-check a { color: var(--mint-dark); }
/* app.css has a generic `select, input, textarea { min-height: 48px; ... }`
   rule intended for text/select fields, which also matches this checkbox
   since its selector doesn't exclude type="checkbox". min-height always
   wins over a smaller height in the box model regardless of specificity
   (they're separate constraints, not a cascade contest), so min-height
   must be explicitly reset here too, or `height: 16px` above is a no-op
   and the checkbox renders at 48px, badly misaligned with its label. */
body.rd-page .rd-register-check input {
  margin: 2px 0 0; width: 16px; height: 16px; min-height: 0; flex-shrink: 0; padding: 0;
}
body.rd-page .rd-field-error { display: block; color: var(--coral-tint-text); font-size: 12px; margin-top: 4px; }
body.rd-page .rd-form-error { background: var(--coral-tint-bg); color: var(--coral-tint-text); font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
body.rd-page .rd-status-message { background: var(--mint-tint-bg); color: var(--mint-tint-text); font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }

@media (max-width: 900px) {
  body.rd-page .rd-fact-grid,
  body.rd-page .rd-trust-row-grid,
  body.rd-page .rd-register-two-col { grid-template-columns: 1fr; }
  body.rd-page .rd-register-backdrop { display: none; }
}

/* ===== /features banner: flow line with traveling pulse ===== */
body.rd-page .rd-flow-banner { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 10px; }
body.rd-page .rd-flow-line { position: absolute; left: 30px; right: 30px; top: 50%; height: 2px; background: var(--line); z-index: 0; }
body.rd-page .rd-flow-node {
  width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 16px; position: relative; z-index: 1;
}
body.rd-page .rd-flow-pulse {
  position: absolute; top: 50%; left: 30px; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--mint); z-index: 1; animation: rd-travel 4s linear infinite;
}
@keyframes rd-travel { 0% { left: 30px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 40px); opacity: 0; } }

/* ===== /pricing banner: stamp settle ===== */
body.rd-page .rd-stamp-banner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.rd-page .rd-stamp-old { font-family: 'IBM Plex Mono'; font-size: 15px; color: var(--ink-soft); text-decoration: line-through; opacity: .6; }
body.rd-page .rd-stamp-free {
  display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px;
  border-radius: 50%; border: 3px solid var(--mint); color: var(--mint-dark); font-family: 'Space Grotesk';
  font-weight: 700; font-size: 20px; transform: rotate(-8deg) scale(1); animation: rd-stamp 3.5s ease-in-out infinite;
}
@keyframes rd-stamp {
  0% { transform: rotate(-14deg) scale(.7); opacity: 0; }
  12% { transform: rotate(-8deg) scale(1.05); opacity: 1; }
  20% { transform: rotate(-8deg) scale(1); }
  85% { transform: rotate(-8deg) scale(1); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

/* ===== /faq banner: cross-fading card stack ===== */
body.rd-page .rd-faq-banner { position: relative; height: 88px; max-width: 460px; margin: 0 auto; }
body.rd-page .rd-faq-slide {
  position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; opacity: 0;
  animation: rd-faqcycle 9s ease-in-out infinite;
}
body.rd-page .rd-faq-slide span { font-size: 11px; font-family: 'IBM Plex Mono'; color: var(--mint-tint-text); margin-bottom: 4px; }
body.rd-page .rd-faq-slide p { font-size: 13.5px; color: var(--ink-soft); }
body.rd-page .rd-faq-slide.rd-s1 { animation-delay: 0s; }
body.rd-page .rd-faq-slide.rd-s2 { animation-delay: 3s; }
body.rd-page .rd-faq-slide.rd-s3 { animation-delay: 6s; }
@keyframes rd-faqcycle { 0% { opacity: 0; } 4% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }

/* ===== /security banner: boundary bands with descending lock ===== */
body.rd-page .rd-sec-banner { position: relative; max-width: 420px; margin: 0 auto; }
body.rd-page .rd-sec-band {
  border: 1px solid var(--line); border-top: none; padding: 12px 16px; font-family: 'IBM Plex Mono';
  font-size: 11px; color: var(--ink-soft); background: var(--surface);
}
body.rd-page .rd-sec-band:first-child { border-top: 1px solid var(--line); border-radius: 8px 8px 0 0; }
body.rd-page .rd-sec-band:last-child { border-radius: 0 0 8px 8px; }
body.rd-page .rd-sec-lock {
  position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 6px;
  background: var(--mint); color: var(--elevated-bg); display: flex; align-items: center; justify-content: center;
  font-size: 11px; animation: rd-descend 5s ease-in-out infinite;
}
@keyframes rd-descend { 0% { top: -4px; } 30% { top: 34px; } 60% { top: 72px; } 90% { top: 72px; } 100% { top: -4px; } }

/* ===== /login banner: logomark draw-on (plays once) ===== */
body.rd-page .rd-login-banner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
body.rd-page .rd-login-mark { width: 64px; height: 64px; }
body.rd-page .rd-login-mark rect { fill: var(--ink); }
body.rd-page .rd-login-mark path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: rd-draw 1.6s ease forwards; }
body.rd-page .rd-login-mark path.rd-arrow { animation-delay: .5s; }
@keyframes rd-draw { to { stroke-dashoffset: 0; } }
body.rd-page .rd-login-welcome {
  font-family: 'Space Grotesk'; font-size: 14px; color: var(--ink-soft); opacity: 0;
  animation: rd-fadein 1s ease forwards; animation-delay: 1.8s;
}
@keyframes rd-fadein { to { opacity: 1; } }

/* ===== /register: receipt-scan backdrop (reuses .rd-receipt/.rd-scanline/
   .rd-float-card from the home page hero exactly, per SDD-011) ===== */
body.rd-page .rd-register-backdrop .rd-receipt { transform: rotate(4deg); }

/* ------------------------------------------------------------------------
   SDD-012 — /contact, /terms, /privacy.
   Shared component: a single card wrapping prose content (contact's
   email/expectations block, and the unchanged terms/privacy legal body).
   Used on all 3 pages, so it's a shared component per the "no one-off
   per-page patterns" rule, not something invented per page.
   The three banners below are intentionally quieter/lower-motion than
   the SDD-011 marketing-page banners (smaller footprint, subtler
   animation) - a deliberate design choice per SDD-012, not scaled down
   further to "fix" anything.
   ------------------------------------------------------------------------ */
body.rd-page .rd-content-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px; max-width: 720px; margin: 0 auto;
}
body.rd-page .rd-content-card h2 { font-size: 18px; margin: 24px 0 10px; }
body.rd-page .rd-content-card h2:first-child { margin-top: 0; }
body.rd-page .rd-content-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

/* ===== /contact banner: two-column form layout with quiet floating orbs ===== */
body.rd-page .rd-contact-hero {
  overflow: hidden;
  padding: 24px 0 12px;
  background: var(--bg);
}
body.rd-page .rd-contact-hero-banner {
  position: relative; overflow: hidden; padding: 36px 16px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--amber-tint-bg) 38%, var(--surface)) 0%,
    var(--bg) 100%
  );
}
body.rd-page .rd-contact-hero-copy { position: relative; z-index: 1; margin-bottom: 0; }
body.rd-page .rd-contact-hero-copy h1 { max-width: 12ch; }
body.rd-page .rd-contact-hero-copy .rd-eyebrow { margin-bottom: 14px; }
body.rd-page .rd-contact-hero-copy h1 { margin-bottom: 8px; }
body.rd-page .rd-contact-hero-copy p { max-width: 52ch; margin: 0 auto; font-size: 14px; }
body.rd-page .rd-contact-orb {
  position: absolute; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--mint) 86%, transparent);
  opacity: .12;
}
body.rd-page .rd-contact-orb-a {
  width: 100px; height: 100px; top: 20%; left: 6%;
  animation: rd-contact-float-a 8s ease-in-out infinite;
}
body.rd-page .rd-contact-orb-b {
  width: 80px; height: 80px; right: 6%; bottom: 15%;
  animation: rd-contact-float-b 10s ease-in-out infinite;
}
@keyframes rd-contact-float-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, 10px); }
}
@keyframes rd-contact-float-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-14px, 8px); }
}
body.rd-page .rd-contact-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.22fr);
  gap: 18px; align-items: start; margin-top: 22px;
}
body.rd-page .rd-contact-info-card,
body.rd-page .rd-contact-form-card {
  width: 100%; max-width: none; margin: 0;
}
body.rd-page .rd-contact-info-card { display: grid; gap: 18px; }
body.rd-page .rd-contact-info-row {
  display: grid; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
body.rd-page .rd-contact-info-row:last-child { padding-bottom: 0; border-bottom: 0; }
body.rd-page .rd-contact-info-row p,
body.rd-page .rd-contact-info-row span {
  margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65;
}
body.rd-page .rd-contact-info-row strong,
body.rd-page .rd-contact-info-row a {
  color: var(--mint-dark); font-size: 15px; font-weight: 600; text-decoration: none;
}
body.rd-page .rd-contact-form-card { padding: 28px 32px 32px; }

/* ===== /terms banner: document lines drawing in sequentially ===== */
body.rd-page .rd-doc-banner {
  width: 180px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 18px 16px;
}
body.rd-page .rd-doc-line {
  height: 6px; border-radius: 3px; background: var(--line); margin-bottom: 8px;
  transform-origin: left; transform: scaleX(0); animation: rd-linedraw 4s ease-in-out infinite;
}
body.rd-page .rd-doc-line:nth-child(1) { width: 90%; animation-delay: 0s; }
body.rd-page .rd-doc-line:nth-child(2) { width: 70%; animation-delay: .3s; }
body.rd-page .rd-doc-line:nth-child(3) { width: 85%; animation-delay: .6s; }
body.rd-page .rd-doc-line:nth-child(4) { width: 50%; background: var(--mint); animation-delay: .9s; margin-bottom: 0; }
@keyframes rd-linedraw {
  0% { transform: scaleX(0); }
  15% { transform: scaleX(1); }
  85% { transform: scaleX(1); }
  92% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

/* ===== /privacy banner: data dot flowing one-way into a lock, then
   stopping - deliberately a different mechanic from /security's
   descending-lock-through-bands animation, even though both use a lock
   motif (per SDD-012: reused motif, distinct animation on purpose) ===== */
body.rd-page .rd-flow-lock-banner { display: flex; align-items: center; gap: 10px; justify-content: center; }
body.rd-page .rd-flow-track { position: relative; width: 120px; height: 4px; background: var(--line); border-radius: 2px; }
body.rd-page .rd-flow-dot {
  position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint);
  animation: rd-flowin 3.2s ease-in-out infinite;
}
@keyframes rd-flowin {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  70% { left: 100px; opacity: 1; }
  78% { opacity: 0; }
  100% { opacity: 0; }
}
body.rd-page .rd-lock-box {
  width: 34px; height: 34px; border-radius: 8px; background: var(--elevated-bg); color: var(--mint);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* Dark-mode contrast fix for two pre-existing, untouched legal-content
   components (app.css .public-legal-disclaimer and .public-card, both
   still used as-is inside the preserved terms/privacy body per SDD-012's
   layout-only constraint). Neither ever had dark-mode awareness before -
   they predate the rd-page toggle entirely, and app.css's own old
   [data-theme="dark"] system is scoped to <html>, not <body class="rd-page">,
   so it never reached them either way. Meanwhile this file's generic
   `body.rd-page h1,h2,h3 { color: var(--ink) }` rule (specificity (0,1,2))
   already outranks their own heading-color rules ((0,1,1) each) and was
   flipping their headings to near-white in dark mode while their card
   backgrounds stayed hardcoded white/cream - QA caught this as a real,
   newly-exposed contrast defect, not a pre-existing one, since these
   pages never had a working dark toggle before this SDD. Colors only,
   no layout/content change - stays within the layout-only constraint. */
body.rd-page .public-legal-disclaimer {
  background: var(--amber-tint-bg);
  border-color: var(--amber-tint-text);
}
body.rd-page .public-legal-disclaimer p {
  color: var(--amber-tint-text);
}
body.rd-page .public-card {
  background: var(--surface);
  border-color: var(--line);
}
body.rd-page .public-card p {
  color: var(--ink-soft);
}

/* /contact form */
body.rd-page .rd-contact-form { display: grid; gap: 14px; }
body.rd-page .rd-contact-form label { display: block; font-size: 13px; color: var(--ink-soft); margin: 0; }
body.rd-page .rd-contact-form label span { display: inline-block; margin-bottom: 6px; }
body.rd-page .rd-contact-form input,
body.rd-page .rd-contact-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 14px; font-family: inherit; resize: vertical;
}
body.rd-page .rd-contact-form input::placeholder,
body.rd-page .rd-contact-form textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 72%, transparent); }
body.rd-page .rd-contact-form input:focus,
body.rd-page .rd-contact-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--mint) 26%, transparent);
  outline-offset: 0;
  border-color: color-mix(in srgb, var(--mint-dark) 45%, var(--line));
}
body.rd-page .rd-contact-form [aria-invalid="true"] {
  border-color: var(--amber-tint-text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber-tint-text) 30%, transparent);
}
body.rd-page .rd-contact-form .rd-form-note { font-size: 12px; color: var(--ink-soft); margin: 10px 0; }
body.rd-page .rd-contact-form button { margin-top: 4px; }
body.rd-page .rd-contact-form button[disabled] { opacity: .7; cursor: not-allowed; }
body.rd-page .rd-contact-form small.rd-form-note { display: block; margin-top: 12px; }
body.rd-page .rd-contact-status {
  border-radius: 10px; border: 1px solid var(--line); padding: 10px 12px;
  font-size: 13px; line-height: 1.5;
}
body.rd-page .rd-contact-status.is-pending {
  background: color-mix(in srgb, var(--surface) 82%, var(--mint) 18%);
  color: var(--ink);
}
body.rd-page .rd-contact-status.is-success {
  background: color-mix(in srgb, var(--mint) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--mint) 40%, var(--line));
  color: var(--mint-dark);
}
body.rd-page .rd-contact-status.is-error {
  background: var(--amber-tint-bg);
  border-color: color-mix(in srgb, var(--amber-tint-text) 40%, var(--line));
  color: var(--amber-tint-text);
}
body.rd-page .rd-turnstile-host {
  min-height: 66px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
@media (max-width: 920px) {
  body.rd-page .rd-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.rd-page .rd-contact-hero { padding: 18px 0 10px; }
  body.rd-page .rd-contact-hero-banner { padding: 32px 14px; }
  body.rd-page .rd-contact-form-card,
  body.rd-page .rd-contact-info-card { padding: 24px; }
  body.rd-page .rd-contact-orb-a { width: 92px; height: 92px; left: 4%; top: 18%; }
  body.rd-page .rd-contact-orb-b { width: 76px; height: 76px; right: 4%; bottom: 14%; }
}