/* SurveyStudio theme — Bootstrap 5 override, matched to RedMorello's light brand palette. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#fffdfc;
  --surface:#f7ebec;
  --text:#1c1c1e;
  --text-muted:rgba(28,28,30,.68);
  --text-mute-2:rgba(28,28,30,.52);
  --accent:#af051c;
  --accent-100:#fbe6e9;
  --accent-300:#e2909b;
  --accent-600:#8a0416;
  --accent-700:#6e0312;
  --accent-800:#560210;
  --accent-900:#3a010a;
  --neutral-700:#c7c5c5;
  --neutral-800:#e6e3e3;
  --divider:rgba(28,28,30,.12);
  --section:#af051c;
  --section-glow:#d21b34;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --bs-body-font-family:'Inter',system-ui,sans-serif;
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  /* Bootstrap's `a{color}` rule reads the -rgb variables, not these — both must
     be set or links silently fall back to Bootstrap's default blue. */
  --bs-link-color:var(--accent-700);
  --bs-link-color-rgb:110,3,18;
  --bs-link-hover-color:var(--accent);
  --bs-link-hover-color-rgb:175,5,28;
}

body{
  background:
    radial-gradient(1100px 680px at 88% -100px, color-mix(in srgb, var(--accent-100) 100%, transparent), transparent 62%),
    radial-gradient(900px 600px at -10% 40%, color-mix(in srgb, var(--accent-100) 70%, transparent), transparent 60%),
    var(--bg);
  min-height:100vh;
}
.section-tint{background:var(--surface);}
h1,h2,h3,h4,h5,h6{font-weight:500; letter-spacing:-0.015em;}
a{text-underline-offset:3px;}
.text-muted{color:var(--text-muted) !important;}
.text-mute-2{color:var(--text-mute-2) !important;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
::selection{background:color-mix(in srgb, var(--accent) 25%, transparent);}

.kicker{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;}
.kicker::before{content:"";width:32px;height:1px;background:var(--accent);display:inline-block;}

/* — navbar — */
.navbar{padding:.6rem 0;background:color-mix(in srgb, var(--bg) 85%, var(--accent-100));z-index:1030;border-bottom:1px solid var(--divider);}
.navbar-brand{font-weight:600;font-size:1.1rem;color:var(--text) !important;}
.navbar-nav .nav-link{color:var(--text);font-size:14px;}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--accent) !important;}
.navbar-toggler{border-color:var(--divider);}

/* — buttons: outlined primary, never filled — */
.btn{border-radius:var(--radius-md);font-weight:500;font-size:14px;padding:.5rem 1rem;}
.btn-primary{background:transparent;border:1px solid var(--accent);color:var(--accent);}
.btn-primary:hover,.btn-primary:focus{background:color-mix(in srgb, var(--accent) 8%, transparent);border-color:var(--accent);color:var(--accent);}
.btn-primary:active{background:color-mix(in srgb, var(--accent) 16%, transparent) !important;border-color:var(--accent) !important;color:var(--accent) !important;}
.btn-secondary{background:transparent;border:1px solid var(--divider);color:var(--text);}
.btn-secondary:hover,.btn-secondary:focus{background:color-mix(in srgb, var(--text) 5%, transparent);border-color:var(--divider);color:var(--text);}
.btn-ghost{background:transparent;border:1px solid transparent;color:var(--accent);}
.btn-ghost:hover{background:color-mix(in srgb, var(--accent) 8%, transparent);color:var(--accent);}

/* — cards — */
.card{background:var(--surface);border:0;border-radius:var(--radius-md);color:var(--text);}
.card-featured{border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent-300),0 6px 18px rgba(175,5,28,.12);}
.card-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.card-title{font-weight:500;}
.card-text{font-size:.9rem;opacity:.8;}

/* — badges / tags — */
.badge-tag{font-weight:500;font-size:11px;letter-spacing:.02em;padding:.3rem .65rem;border-radius:6px;}
.badge-accent{background:var(--accent-100);color:var(--accent-600);}
.badge-neutral{background:var(--neutral-800);color:#4a4a4a;}
.badge-outline{background:transparent;border:1px solid var(--accent);color:var(--accent);}

/* — stat band (brand-red band — the system's one saturated fill) — */
.stat-band{background:
    radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--section-glow) 60%, transparent), transparent 64%),
    var(--section);
  padding:3.5rem 0;}
.stat-band .stat-num,.stat-band .stat-label{color:#fff;}
.stat-num{font-size:clamp(30px,3.2vw,42px);font-weight:500;margin:0;}
.stat-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:.4rem;opacity:.85;}

/* — feature rows — */
.feature-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:1rem 1.5rem;padding:1.5rem 0;position:relative;}
.feature-row+.feature-row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right, transparent, var(--neutral-700) 48px calc(100% - 48px), transparent);}
.f-num{font-weight:500;color:var(--accent);margin:0;}
@media (min-width:768px){ .feature-row{grid-template-columns:90px minmax(0,320px) minmax(0,1fr); align-items:baseline;} }

/* — table — */
.table-nocturne{--bs-table-bg:transparent;--bs-table-color:var(--text);border-color:var(--divider);}
.table-nocturne thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute-2);border-bottom:1px solid var(--divider);font-weight:500;}
.table-nocturne td,.table-nocturne th{padding:.6rem;border-bottom:1px solid var(--divider);}

/* — accordion (FAQ) — */
.accordion-item{background:var(--surface);border:0;border-bottom:1px solid var(--bg);}
.accordion-button{background:var(--surface);color:var(--text);font-size:.95rem;font-weight:500;box-shadow:none !important;}
.accordion-button:not(.collapsed){background:var(--surface);color:var(--accent);}
.accordion-body{color:var(--text-muted);font-size:.9rem;}

/* — image placeholder (swap for real screenshots) — */
.img-placeholder{background:var(--surface);border:1px dashed var(--divider);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color:var(--text-mute-2);font-size:.85rem;text-align:center;padding:1rem;aspect-ratio:4/3;}

/* — footer — */
footer{border-top:1px solid var(--divider);padding:1.5rem 0;font-size:13px;color:var(--text-mute-2);background:var(--surface);}
footer a{color:var(--text-mute-2);}
footer a:hover{color:var(--accent);}

.section{padding:5rem 0;}
.section-tight{padding:3rem 0;}
code{color:var(--accent-600);}
pre{background:var(--surface);border-radius:var(--radius-md);padding:.9rem 1rem;color:var(--text);border:1px solid var(--divider);}