/* =============================================================================
   RAINDROP-INSPIRED LIGHT MODE DESIGN SYSTEM
   =============================================================================
   Based on: raindrop.ai (analyzed 2026-02-27)
   Mode: LIGHT — white backgrounds, dark text, deep teal/navy accents
   Font: Barlow (Google Fonts) — used throughout raindrop.ai
   Secondary font: ui-monospace (code snippets, badges)

   HOW TO USE THIS FILE:
   1. Link Barlow from Google Fonts (weights 300-800)
   2. Include this CSS before your page styles
   3. Use the CSS variables and utility classes throughout your HTML
   4. Follow the Section Layout Guide at the bottom for page structure
   ============================================================================= */


/* =============================================================================
   1. CSS RESET & BASE
   ============================================================================= */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-white);
}


/* =============================================================================
   2. DESIGN TOKENS — COLOR PALETTE
   =============================================================================

   Raindrop uses a white/light base with a distinctive deep teal-to-navy
   gradient as its brand accent. The gradient runs through these stops:
     rgb(13, 107, 156)  = #0D6B9C  (teal)
     rgb(27, 92, 138)   = #1B5C8A  (mid)
     rgb(43, 77, 120)   = #2B4D78  (navy)

   For a simpler implementation, pick ONE as your primary accent.
   ============================================================================= */

:root {
  /* --- Backgrounds --- */
  --bg-white:         #FFFFFF;           /* Primary page background */
  --bg-off-white:     #F7FBFF;           /* Alternating section bg (raindrop's ghost-white-7) */
  --bg-light-gray:    #F8FAFC;           /* Card backgrounds, subtle panels */
  --bg-subtle:        #F1F5F9;           /* Slightly stronger alternate bg */
  --bg-dark-section:  #0A2833;           /* Dark CTA/footer section (raindrop's gradient-linear-8 base) */
  --bg-dark-card:     #0D3442;           /* Cards inside dark sections */

  /* --- Text Colors --- */
  --text-primary:     #0F172A;           /* Headings, primary body (near-black, slate-900) */
  --text-secondary:   #475569;           /* Body text, descriptions (slate-600) */
  --text-muted:       #64748B;           /* Captions, helper text (slate-500) */
  --text-light:       #94A3B8;           /* Placeholder, disabled (slate-400) */
  --text-on-dark:     #E8EDF2;           /* Text on dark backgrounds */
  --text-on-dark-muted: #8DA2B5;         /* Secondary text on dark backgrounds */

  /* --- Brand Accent: Deep Teal/Navy --- */
  --accent:           #0D6B9C;           /* Primary accent (teal) — from raindrop gradient stop 1 */
  --accent-mid:       #1B5C8A;           /* Mid accent — from raindrop gradient stop 2 */
  --accent-deep:      #2B4D78;           /* Deep navy accent — from raindrop gradient stop 3 */
  --accent-light:     #0E97BD;           /* Lighter teal for highlights/hover — from raindrop gradient-9 */
  --accent-pale:      rgba(14, 151, 189, 0.08);  /* Very subtle accent tint for hover states */
  --accent-pale-bg:   rgba(14, 151, 189, 0.05);  /* Barely-there accent wash */

  /* --- Brand Gradient (the signature raindrop.ai look) --- */
  --gradient-accent:  linear-gradient(90deg, #0D6B9C 33%, #1B5C8A 66%, #2B4D78 100%);
  --gradient-accent-r: linear-gradient(270deg, #0D6B9C, #1B5C8A 25%, #2B4D78 50%, #1B5C8A 75%, #0D6B9C);
  --gradient-dark-bg: linear-gradient(0deg, #0A2833 -0.65%, #0D3442 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(14, 151, 189, 0.18) 0%, rgba(14, 151, 189, 0.12) 50%, rgba(14, 151, 189, 0.06) 100%);
  --gradient-soft:    linear-gradient(rgb(255, 255, 255), rgba(204, 234, 242, 0.5), rgba(255, 255, 255, 0.6));

  /* --- Borders --- */
  --border-light:     #E2E8F0;           /* Default border (slate-200, from lavender-6) */
  --border-medium:    #CBD5E1;           /* Stronger border (slate-300) */
  --border-accent:    rgba(14, 151, 189, 0.25);  /* Accent-tinted border */

  /* --- OpenClaw Brand Color (for ecosystem recognition) --- */
  --openclaw-red:     #ff4d4d;
  --openclaw-cyan:    #00e5cc;

  /* --- Status Colors (from raindrop's Tailwind palette) --- */
  --success:          #10B981;           /* Green for success states */
  --warning:          #F59E0B;           /* Amber for warnings */
  --error:            #EF4444;           /* Red for errors */
  --info:             #0EA5E9;           /* Sky blue for info */

  /* --- Shadows --- */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* --- Border Radius --- */
  --radius-sm:        6px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-2xl:       20px;
  --radius-full:      9999px;           /* Pill shape for badges/buttons */

  /* --- Transitions --- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;


  /* ==========================================================================
     3. TYPOGRAPHY TOKENS
     ==========================================================================
     Raindrop uses "Barlow" as primary, with a custom "AlphaLyrae" for the
     logo/wordmark only. We use Barlow for everything + monospace for code.
     ========================================================================== */

  /* --- Font Families (from raindrop.ai) --- */
  --font-primary:     'Barlow', sans-serif;
  --font-display:     'AlphaLyrae', sans-serif;
  --font-mono:        ui-monospace, sans-serif;

  /* --- Font Sizes (exact raindrop.ai scale) --- */
  --text-9:           9px;
  --text-10:          10px;
  --text-11:          11px;
  --text-xs:          12px;
  --text-13:          13px;
  --text-sm:          14px;
  --text-15:          15px;
  --text-base:        16px;
  --text-17:          17px;
  --text-md:          18px;
  --text-lg:          20px;
  --text-xl:          24px;
  --text-2xl:         30px;
  --text-3xl:         36px;
  --text-40:          40px;
  --text-4xl:         42px;
  --text-5xl:         48px;
  --text-6xl:         54px;
  --text-display:     130px;

  /* --- Font Weights (raindrop.ai) --- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* --- Line Heights (exact raindrop.ai values) --- */
  --leading-14:       13.5px;
  --leading-15:       15px;
  --leading-16:       16px;
  --leading-17:       16.5px;
  --leading-20:       20px;
  --leading-23:       23.375px;
  --leading-24:       24px;
  --leading-27:       27px;
  --leading-28:       28px;
  --leading-32:       32px;
  --leading-36:       36px;
  --leading-40:       40px;
  --leading-48:       48px;
  --leading-53:       52.5px;
  --leading-68:       67.5px;
  --leading-140:      140px;

  /* --- Letter Spacing (exact raindrop.ai values) --- */
  --tracking-tight:   -0.9px;
  --tracking-snug:    -0.4px;
  --tracking-close:   -0.35px;
  --tracking-normal:  0;
  --tracking-0225:    0.225px;
  --tracking-045:     0.45px;
  --tracking-wide:    0.5px;
  --tracking-055:     0.55px;
  --tracking-06:      0.6px;
  --tracking-07:      0.7px;
  --tracking-widest:  1.2px;


  /* ==========================================================================
     4. LAYOUT TOKENS
     ========================================================================== */

  /* --- Max Content Widths --- */
  --max-width-content: 1200px;  /* Primary content container */
  --max-width-narrow:  800px;   /* Text-heavy sections, testimonials */
  --max-width-wide:    1400px;  /* Full-bleed feature showcases */

  /* --- Section Spacing (vertical padding) --- */
  --section-py-sm:     60px;    /* Compact sections (logos, dividers) */
  --section-py-md:     80px;    /* Standard sections */
  --section-py-lg:     100px;   /* Major sections (hero, features) */
  --section-py-xl:     120px;   /* Hero, CTA sections */

  /* --- Grid Gap --- */
  --gap-sm:            16px;
  --gap-md:            24px;
  --gap-lg:            32px;
  --gap-xl:            48px;
  --gap-2xl:           64px;

  /* --- Container Horizontal Padding --- */
  --container-px:      24px;    /* Mobile */
  --container-px-md:   40px;    /* Tablet */
  --container-px-lg:   64px;    /* Desktop */
}


/* =============================================================================
   5. GLOBAL TYPOGRAPHY STYLES
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--text-primary);
}

/* --- Hero Headline: 54px / 67.5px line-height / -0.9 tracking / bold --- */
h1, .h1 {
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-68);
  letter-spacing: var(--tracking-tight);
}

/* --- Section Title: 36px / 48px line-height / -0.4 tracking / semibold --- */
h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-48);
  letter-spacing: var(--tracking-snug);
}

/* --- Sub-Section Title: 24px / 36px line-height / -0.35 tracking / semibold --- */
h3, .h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-36);
  letter-spacing: var(--tracking-close);
}

/* --- Card Title: 20px / 28px line-height / medium --- */
h4, .h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-28);
}

/* --- Small Heading: 18px / 27px line-height / semibold --- */
h5, .h5 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-27);
}

/* --- Label / Eyebrow: 12px / 16px line-height / semibold / uppercase / 1.2px tracking --- */
h6, .h6 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-16);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
}

/* --- Body: 16px / 24px line-height / 400 weight --- */
p {
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-secondary);
}

/* Lead paragraph: 18px / 28px line-height / 400 weight */
.text-lead {
  font-size: var(--text-md);
  line-height: var(--leading-28);
  color: var(--text-secondary);
  max-width: 640px;
}

/* Small body: 14px / 20px line-height */
.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-20);
  color: var(--text-muted);
}

/* Extra-small: 13px / 20px line-height */
.text-xs {
  font-size: var(--text-13);
  line-height: var(--leading-20);
  color: var(--text-muted);
}

/* Monospace: 14px / ui-monospace */
.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-20);
}

/* Gradient text — raindrop's signature accent gradient on text */
.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accent-colored text */
.text-accent {
  color: var(--accent);
}

/* OpenClaw brand red — use on "OpenClaw" and "Claw" mentions for ecosystem recognition */
.text-openclaw {
  color: var(--openclaw-red);
  font-weight: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-light);
}


/* =============================================================================
   6. LAYOUT COMPONENTS
   ============================================================================= */

/* --- Container: Centers content with responsive padding --- */
.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.container--wide {
  max-width: var(--max-width-wide);
}

/* --- Section: Vertical rhythm blocks --- */
.section {
  padding-top: var(--section-py-lg);
  padding-bottom: var(--section-py-lg);
}

.section--sm {
  padding-top: var(--section-py-sm);
  padding-bottom: var(--section-py-sm);
}

.section--xl {
  padding-top: var(--section-py-xl);
  padding-bottom: var(--section-py-xl);
}

/* Alternating background for visual rhythm */
.section--alt {
  background-color: var(--bg-off-white);
}

/* Dark section (for CTA blocks, footer) */
.section--dark {
  background: var(--gradient-dark-bg);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5 {
  color: var(--text-on-dark);
}

.section--dark p,
.section--dark .text-lead {
  color: var(--text-on-dark-muted);
}

/* Section header — centered title + subtitle block */
.section-header {
  text-align: center;
  margin-bottom: var(--gap-xl);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  margin-bottom: 16px;
}

.section-header p {
  font-size: var(--text-17);
  line-height: var(--leading-27);
  color: var(--text-muted);
}

/* Section eyebrow label — uppercase, 0.6px tracking, semibold */
.section-eyebrow {
  display: inline-block;
  font-size: var(--text-13);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-20);
  text-transform: uppercase;
  letter-spacing: var(--tracking-06);
  color: var(--accent);
  margin-bottom: 12px;
}


/* =============================================================================
   7. NAVIGATION BAR
   =============================================================================
   Raindrop uses a sticky, minimal nav with:
   - Logo on the left
   - Links center or right-aligned
   - Two CTAs: ghost button ("Chat with us") + solid button ("Get Started")
   - White bg with subtle bottom border, becomes solid on scroll
   - Height ~64px
   ============================================================================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  padding: 0 var(--container-px);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.navbar__logo {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-28);
  letter-spacing: var(--tracking-close);
  color: var(--text-primary);
  text-decoration: none;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  list-style: none;
}

.navbar__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-20);
  color: var(--text-secondary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-06);
  transition: color var(--transition-fast);
}

.navbar__link:hover {
  color: var(--text-primary);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* =============================================================================
   8. BUTTONS
   =============================================================================
   Raindrop buttons:
   - Primary: Solid accent bg, white text, rounded (radius 8px)
   - Secondary/Ghost: Transparent bg, accent border, accent text
   - Small nav buttons use ~14px text, page CTAs use 16px
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

/* --- Primary Button: Solid accent fill --- */
.btn--primary {
  font-size: var(--text-sm);
  padding: 10px 24px;
  background: var(--gradient-accent);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  letter-spacing: var(--tracking-045);
}

.btn--primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* --- Secondary/Ghost Button: Border only --- */
.btn--secondary {
  font-size: var(--text-sm);
  padding: 10px 24px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--border-accent);
  border-radius: var(--radius-md);
  letter-spacing: var(--tracking-045);
}

.btn--secondary:hover {
  background-color: var(--accent-pale);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Large CTA Button (hero, pricing) --- */
.btn--lg {
  font-size: var(--text-base);
  padding: 14px 32px;
  border-radius: var(--radius-md);
}

/* --- Small Button (nav, badges) --- */
.btn--sm {
  font-size: var(--text-xs);
  padding: 6px 16px;
  border-radius: var(--radius-sm);
}

/* --- Text/Link Button --- */
.btn--text {
  font-size: var(--text-sm);
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.btn--text:hover {
  color: var(--accent-light);
  text-decoration: underline;
}

/* --- Button on dark background --- */
.btn--on-dark {
  background: #FFFFFF;
  color: var(--accent-deep);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-deep);
}


/* =============================================================================
   9. CARDS
   =============================================================================
   Raindrop feature cards:
   - White background (or off-white on white sections)
   - Very subtle border (#E2E8F0) or no border
   - Gentle shadow
   - 12-20px border radius
   - 24-32px internal padding
   - On hover: slightly elevated shadow
   ============================================================================= */

.card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Card on alt/gray background — no border needed */
.section--alt .card {
  border: none;
  box-shadow: var(--shadow-md);
}

/* Card title: 20px / 28px / semibold */
.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-28);
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Card description: 15px / 24px */
.card__text {
  font-size: var(--text-15);
  line-height: var(--leading-24);
  color: var(--text-muted);
}

/* Card icon container */
.card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--accent-pale);
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 20px;
}

/* Feature card grid — 3 columns on desktop, 2 on tablet, 1 on mobile */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}


/* =============================================================================
   10. FEATURE SECTIONS — Alternating Image + Text Rows
   =============================================================================
   Raindrop's core layout pattern:
   - Two-column row: text on one side, image/screenshot on the other
   - They ALTERNATE: text-left/image-right, then image-left/text-right
   - Generous vertical spacing between each row
   - Text side has: eyebrow label, heading, paragraph, optional CTA
   - Image side has: screenshot with subtle shadow/rounded corners
   ============================================================================= */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xl);
  align-items: center;
  padding: var(--section-py-md) 0;
}

/* Reverse the second column to the left on alternating rows */
.feature-row--reverse {
  direction: rtl;
}

.feature-row--reverse > * {
  direction: ltr;
}

/* Feature text block */
.feature-row__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-row__text .section-eyebrow {
  margin-bottom: 0;
}

.feature-row__text h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-40);
  letter-spacing: var(--tracking-snug);
}

.feature-row__text p {
  font-size: var(--text-15);
  line-height: var(--leading-24);
  color: var(--text-secondary);
  max-width: 480px;
}

/* Feature image/screenshot block */
.feature-row__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}

.feature-row__image img {
  width: 100%;
  height: auto;
  display: block;
}


/* =============================================================================
   11. LOGO BAR / TRUST STRIP
   =============================================================================
   Raindrop shows company logos in a horizontal strip:
   - Grayscale by default, subtle opacity
   - Centered, with "Trusted by" text above
   ============================================================================= */

.logo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xl);
  flex-wrap: wrap;
  padding: var(--section-py-sm) 0;
}

.logo-bar img {
  height: 28px;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity var(--transition-base), filter var(--transition-base);
}

.logo-bar img:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}

.logo-bar__label {
  width: 100%;
  text-align: center;
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  line-height: var(--leading-20);
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-07);
  margin-bottom: 8px;
}


/* =============================================================================
   12. TESTIMONIAL / QUOTE CARDS
   ============================================================================= */

.testimonial {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 640px;
}

.testimonial__quote {
  font-size: var(--text-17);
  font-weight: var(--weight-regular);
  font-style: italic;
  color: var(--text-primary);
  line-height: var(--leading-28);
  margin-bottom: 24px;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial__name {
  font-size: var(--text-15);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-20);
  color: var(--text-primary);
}

.testimonial__role {
  font-size: var(--text-13);
  line-height: var(--leading-20);
  color: var(--text-muted);
}


/* =============================================================================
   13. PRICING TABLE
   =============================================================================
   Raindrop pricing: 3 tiers in a row, highlighted middle tier.
   ============================================================================= */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  align-items: start;
}

.pricing-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 32px;
  text-align: center;
}

/* Highlighted / recommended tier */
.pricing-card--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.pricing-card--featured::before {
  content: 'Recommended';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-accent);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 4px 16px;
  border-radius: var(--radius-full);
}

.pricing-card__name {
  font-size: var(--text-13);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-20);
  text-transform: uppercase;
  letter-spacing: var(--tracking-07);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.pricing-card__price {
  font-size: var(--text-40);
  font-weight: var(--weight-bold);
  line-height: var(--leading-48);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pricing-card__period {
  font-size: var(--text-13);
  line-height: var(--leading-20);
  color: var(--text-muted);
  margin-bottom: 24px;
}

.pricing-card__features {
  list-style: none;
  text-align: left;
  margin-bottom: 24px;
}

.pricing-card__features li {
  font-size: var(--text-15);
  line-height: var(--leading-24);
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-card__features li::before {
  content: '\2713';
  color: var(--success);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}


/* =============================================================================
   14. BADGE / TAG
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-07);
  line-height: var(--leading-16);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background-color: var(--accent-pale);
  color: var(--accent);
}

.badge--success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.badge--warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge--error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--error);
}


/* =============================================================================
   15. ANNOUNCEMENT BANNER
   =============================================================================
   Raindrop has a scrolling announcement strip at the very top:
   - Accent gradient background
   - White text, small size, uppercase
   - Full-width ticker
   ============================================================================= */

.announcement-bar {
  background: var(--gradient-accent);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-16);
  padding: 8px 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}


/* =============================================================================
   16. DIVIDER / SEPARATOR
   ============================================================================= */

.divider {
  width: 100%;
  height: 1px;
  background: var(--gradient-linear-2, linear-gradient(to right, rgba(0,0,0,0), #CCCCCC, rgba(0,0,0,0)));
  border: none;
  margin: 0;
}


/* =============================================================================
   17. FOOTER
   =============================================================================
   Raindrop footer is minimal:
   - Dark or white background
   - Logo, nav links, legal links
   - SOC 2 badge
   - Copyright
   ============================================================================= */

.footer {
  background-color: var(--bg-white);
  border-top: 1px solid var(--border-light);
  padding: 48px 0 32px;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.footer__links {
  display: flex;
  gap: var(--gap-lg);
  list-style: none;
}

.footer__link {
  font-size: var(--text-sm);
  line-height: var(--leading-20);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--text-primary);
}

.footer__copyright {
  font-size: var(--text-xs);
  line-height: var(--leading-16);
  color: var(--text-light);
  width: 100%;
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

/* Dark footer variant */
.footer--dark {
  background: var(--gradient-dark-bg);
  border-top: none;
}

.footer--dark .footer__link {
  color: var(--text-on-dark-muted);
}

.footer--dark .footer__link:hover {
  color: var(--text-on-dark);
}

.footer--dark .footer__copyright {
  color: var(--text-on-dark-muted);
  border-top-color: rgba(255, 255, 255, 0.1);
}


/* =============================================================================
   18. SUBTLE BACKGROUND PATTERNS
   =============================================================================
   Raindrop uses faint dot grids and grid lines for texture:
   ============================================================================= */

/* Dot grid background (very subtle) */
.bg-dots {
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 0);
  background-size: 20px 20px;
}

/* Grid line background */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}


/* =============================================================================
   19. UTILITY CLASSES
   ============================================================================= */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mx-auto     { margin-left: auto; margin-right: auto; }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm      { gap: var(--gap-sm); }
.gap-md      { gap: var(--gap-md); }
.gap-lg      { gap: var(--gap-lg); }
.gap-xl      { gap: var(--gap-xl); }

.grid        { display: grid; }
.grid-2      { grid-template-columns: repeat(2, 1fr); }
.grid-3      { grid-template-columns: repeat(3, 1fr); }
.grid-4      { grid-template-columns: repeat(4, 1fr); }

.hidden      { display: none; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.mt-sm       { margin-top: 16px; }
.mt-md       { margin-top: 24px; }
.mt-lg       { margin-top: 40px; }
.mt-xl       { margin-top: 64px; }
.mb-sm       { margin-bottom: 16px; }
.mb-md       { margin-bottom: 24px; }
.mb-lg       { margin-bottom: 40px; }
.mb-xl       { margin-bottom: 64px; }


/* =============================================================================
   20. RESPONSIVE BREAKPOINTS
   =============================================================================

   Raindrop approach: Desktop-first with graceful degradation.

   Breakpoints:
   - Desktop:  > 1024px (default styles)
   - Tablet:   768px - 1024px
   - Mobile:   < 768px
   ============================================================================= */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  :root {
    --container-px: var(--container-px-md);
  }

  h1, .h1 {
    font-size: var(--text-40);
    line-height: var(--leading-48);
  }

  h2, .h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-40);
  }

  .feature-row {
    gap: var(--gap-lg);
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
  :root {
    --section-py-sm: 40px;
    --section-py-md: 56px;
    --section-py-lg: 72px;
    --section-py-xl: 80px;
    --container-px: 20px;
  }

  h1, .h1 {
    font-size: var(--text-2xl);
    line-height: var(--leading-36);
    letter-spacing: var(--tracking-snug);
  }

  h2, .h2 {
    font-size: var(--text-xl);
    line-height: var(--leading-32);
  }

  h3, .h3 {
    font-size: var(--text-md);
    line-height: var(--leading-27);
  }

  /* Stack feature rows vertically */
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }

  .feature-row--reverse {
    direction: ltr;
  }

  /* Stack cards single column */
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* Stack pricing single column */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Nav: hide links, show hamburger (implement in JS) */
  .navbar__links {
    display: none;
  }

  .navbar__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    padding: 24px;
    gap: 16px;
    box-shadow: var(--shadow-lg);
  }

  /* Logo bar: smaller, tighter */
  .logo-bar {
    gap: var(--gap-lg);
  }

  .logo-bar img {
    height: 22px;
  }

  /* Buttons: full-width on mobile */
  .btn--lg {
    width: 100%;
    justify-content: center;
  }

  /* Footer: stack */
  .footer__inner {
    flex-direction: column;
    text-align: center;
  }

  .footer__links {
    flex-direction: column;
    gap: 12px;
  }
}

/* Small mobile: < 480px */
@media (max-width: 480px) {
  h1, .h1 {
    font-size: var(--text-xl);
  }

  .text-lead {
    font-size: var(--text-base);
  }
}


/* =============================================================================
   21. PAGE SECTION ORDER GUIDE (reference — not CSS)
   =============================================================================

   Build your landing page sections in this order, following raindrop.ai:

   1. ANNOUNCEMENT BAR (optional)
      - Full-width accent gradient strip
      - Short message, uppercase, small text

   2. NAVIGATION BAR
      - Sticky, 64px height
      - Logo left, links right, CTA buttons far right
      - Frosted glass effect (backdrop-filter)

   3. HERO SECTION
      - class: section section--xl
      - Large headline (h1, 54px): problem-focused statement
      - Subtitle paragraph (.text-lead): 1-2 lines explaining the value
      - Two CTAs side by side: .btn--primary.btn--lg + .btn--secondary.btn--lg
      - Optional: hero image/screenshot below the text, or to the right
      - Background: white or very subtle gradient (gradient-soft)

   4. SOCIAL PROOF / LOGO BAR
      - class: section section--sm
      - "Trusted by" label above
      - Row of grayscale company logos
      - Divider line below

   5. FEATURE OVERVIEW CARDS (3-6 cards)
      - class: section
      - Section header: centered h2 + subtitle
      - .card-grid with .card components
      - Each card: icon, title, short description

   6. FEATURE DEEP-DIVES (alternating rows)
      - class: section (repeat for each feature)
      - Use .feature-row for text-left / image-right
      - Use .feature-row.feature-row--reverse for image-left / text-right
      - Each row: eyebrow label, h3 heading, paragraph, optional CTA link
      - Image: screenshot with rounded corners + shadow
      - Alternate white / off-white section backgrounds

   7. TESTIMONIALS
      - class: section section--alt
      - 1-3 testimonial cards, centered or in a row
      - Large quote text, author photo + name + title

   8. PRICING
      - class: section
      - Section header: centered h2 + subtitle
      - .pricing-grid with 2-3 pricing cards
      - Highlight recommended tier with .pricing-card--featured

   9. FINAL CTA
      - class: section section--dark section--xl
      - Dark gradient background
      - Centered h2 (white text)
      - Subtitle
      - Primary CTA button (.btn--on-dark.btn--lg)

   10. FOOTER
       - class: footer (or footer--dark)
       - Logo, nav links, legal links
       - Copyright line

   ============================================================================= */