/* ===========================================================================
   Rain Analytics — site stylesheet
   Built on top of the design-system tokens (tokens/colors.css,
   typography.css, spacing.css, effects.css — linked before this file).
   This file overrides the token type-stack with the licensed webfont pairing
   used on the marketing site (Newsreader / Manrope / IBM Plex Mono) and
   supplies layout + component classes (buttons, cards, pricing, etc).
   =========================================================================== */

:root{
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", Arial, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-900);color:var(--text-body);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:var(--accent-cyan)}
a:hover{color:var(--cyan-300)}
img{max-width:100%}
::selection{background:rgba(177,75,255,.4)}
:focus-visible{outline:none;box-shadow:var(--ring)}
button{font:inherit}

/* --- Layout ---------------------------------------------------------- */
.ra-sec{padding:96px 24px;scroll-margin-top:74px}
.ra-inner{max-width:1200px;margin:0 auto}
.ra-nav-links{display:flex;align-items:center;gap:30px}
@media(max-width:860px){.ra-nav-links{display:none}.ra-login{display:none!important}}
@media(max-width:640px){.ra-sec{padding:64px 20px}}
.ra-hero-split{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
@media(max-width:920px){.ra-hero-split{grid-template-columns:1fr;gap:40px}}
.ra-grid{display:grid;gap:20px}
.ra-g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ra-g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ra-g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ra-charts{display:grid;grid-template-columns:1.7fr 1fr;gap:24px}
@media(max-width:720px){.ra-charts{grid-template-columns:1fr}}
.ra-card-hover{transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)}
.ra-card-hover:hover{transform:translateY(-3px)}

/* --- Motion ------------------------------------------------------------ */
@keyframes raFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ra-fade{animation:raFadeUp .6s cubic-bezier(.16,1,.3,1) both}
@keyframes raOrbA{0%,100%{transform:translate(0,0)}50%{transform:translate(38px,28px)}}
@keyframes raOrbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-46px,-20px)}}
.ra-orb1{animation:raOrbA 9s ease-in-out infinite}
.ra-orb2{animation:raOrbB 11s ease-in-out infinite}
@keyframes raSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes raSpinR{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.ra-spin-a{animation:raSpin 26s linear infinite}
.ra-spin-b{animation:raSpinR 34s linear infinite}
.ra-spin-c{animation:raSpin 42s linear infinite}
@keyframes raPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.04)}}
.ra-pulse{animation:raPulse 5s ease-in-out infinite}
@keyframes raF1{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 12px))}}
@keyframes raF2{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 11px),calc(-50% - 7px))}}
@keyframes raF3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% + 12px))}}
@keyframes raF4{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% - 11px),calc(-50% + 7px))}}
.raf1{animation:raF1 6s ease-in-out infinite}
.raf2{animation:raF2 7.4s ease-in-out infinite}
.raf3{animation:raF3 6.8s ease-in-out infinite}
.raf4{animation:raF4 8s ease-in-out infinite}
.ra-atom{position:relative;height:600px;max-width:720px;margin:0 auto}
@media(max-width:680px){.ra-atom{height:440px;transform:scale(.78)}}
@media(prefers-reduced-motion:reduce){.ra-orb1,.ra-orb2,.ra-spin-a,.ra-spin-b,.ra-spin-c,.ra-pulse,.raf1,.raf2,.raf3,.raf4,.ra-fade{animation:none}}

/* --- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-bold);border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard),filter var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-sm{height:var(--control-sm);padding:0 14px;font-size:var(--fs-sm)}
.btn-md{height:var(--control-md);padding:0 20px;font-size:var(--fs-body)}
.btn-lg{height:var(--control-lg);padding:0 28px;font-size:var(--fs-body-lg)}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--grad-rain);color:var(--mist-000);box-shadow:var(--glow-rain)}
.btn-primary:hover{color:var(--mist-000)}
.btn-secondary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn-secondary:hover{color:var(--text-strong)}

/* --- Card ---------------------------------------------------------------- */
.card{border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--border-subtle);background:var(--bg-raised)}
.card-glow-cyan{box-shadow:var(--glow-cyan)}
.card-glow-purple{box-shadow:var(--glow-purple)}
.card-glow-orange{box-shadow:var(--glow-orange)}
.card-highlight{border:1px solid transparent;background-image:linear-gradient(var(--bg-raised),var(--bg-raised)),var(--grad-rain);background-origin:border-box;background-clip:padding-box,border-box}

/* --- Badge ---------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius-pill)}
.badge-gradient{background:var(--grad-rain);color:var(--mist-000);border:1px solid transparent}

/* --- Icon (Lucide, tinted via mask) --------------------------------------- */
.ra-icon{display:inline-block;flex:0 0 auto;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* --- Pricing tier ---------------------------------------------------------- */
.pricing-tier{display:flex;flex-direction:column;gap:18px;position:relative;height:100%}
.pricing-badge{position:absolute;top:-12px;left:24px}
.pricing-head{display:flex;flex-direction:column;gap:4px}
.pricing-name{font-family:var(--font-serif);font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--text-strong);margin:0}
.pricing-blurb{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-muted)}
.pricing-price-row{display:flex;align-items:baseline;gap:6px}
.pricing-price{font-family:var(--font-serif);font-weight:var(--fw-bold);font-size:40px;color:var(--text-strong)}
.pricing-period{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-muted)}
.pricing-features{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border-subtle);padding-top:18px;margin:0}
.pricing-feature{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--text-body)}
.pricing-feature .ra-icon{margin-top:2px}
.pricing-cta-wrap{margin-top:auto;padding-top:8px}

/* --- Comparison table ------------------------------------------------------ */
.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.4fr);border-bottom:1px solid var(--border-subtle);align-items:stretch}
.cmp-cell{padding:16px 20px;font-family:var(--font-sans);font-size:var(--fs-body);display:flex;align-items:center;gap:10px}
.cmp-dim{font-family:var(--font-mono);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.cmp-rain{color:var(--text-strong);background:var(--grad-rain-soft)}
.cmp-inhouse{color:var(--text-muted)}

/* --- Form fields ------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:6px;width:100%}
.field label{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-body)}
.field input,.field select{height:var(--control-md);padding:0 14px;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--text-strong);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);outline:none;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);width:100%}
.field input:focus,.field select:focus{border-color:var(--accent-cyan);box-shadow:var(--ring)}
.select-wrap{position:relative}
.field select{appearance:none;padding-right:36px;cursor:pointer}
.select-chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}
.form-note{font-family:var(--font-sans);font-size:13px;color:var(--success);display:none}
.form-note.is-visible{display:block}
.form-note-error{color:var(--danger)}

/* Honeypot — visually hidden, not display:none, so bots that skip hidden fields still get caught */
.botcheck-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.h-captcha{margin:4px 0}