.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =============================
   ProstadineReviews.org — UI Kit v1
   Clean, trust-first, conversion-focused CSS
   Author: ChatGPT — Oct 2025
   ============================= */

/* 1) CSS Variables (Design Tokens) */
:root {
  /* Brand palette */
  --brand-900: #0e1b2b; /* deep navy for headings */
  --brand-800: #14243a;
  --brand-700: #1b3352;
  --brand-600: #274666; /* default text on light */
  --brand-500: #2f5a86;

  /* Accent (trust/CTA) */
  --accent-600: #0f8b6a; /* primary CTA */
  --accent-500: #14a37c;
  --accent-400: #2ec199;
  --accent-300: #6ee7c2;

  /* Warn/ok/error */
  --ok-500: #2fb344;
  --warn-500: #e3a008;
  --error-500: #d64545;

  /* Neutrals */
  --bg-0: #ffffff;
  --bg-50: #f8fafc;
  --bg-100: #f1f5f9;
  --bg-200: #e2e8f0;
  --text-900: #0f172a; /* primary text */
  --text-700: #334155; /* secondary */
  --border-200: #e5e7eb;
  --border-300: #d1d5db;

  /* Effects */
  --ring: 0 0 0 3px rgba(20, 163, 124, .25);
  --shadow-1: 0 6px 18px rgba(16, 24, 40, .08);
  --shadow-2: 0 12px 30px rgba(16, 24, 40, .12);

  /* Rounding / spacing / type */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;

  --space-1: .25rem; /* 4px */
  --space-2: .5rem;  /* 8px */
  --space-3: .75rem; /* 12px */
  --space-4: 1rem;   /* 16px */
  --space-5: 1.25rem;/* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem;   /* 32px */
  --space-10: 2.5rem;/* 40px */
  --space-12: 3rem;  /* 48px */

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --fs-xs: .8125rem; /* 13 */
  --fs-sm: .9375rem; /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem; /* 20 */
  --fs-xl: 1.5rem; /* 24 */
  --fs-2xl: 1.875rem; /* 30 */
  --fs-3xl: 2.25rem; /* 36 */
  --fs-4xl: 2.75rem; /* 44 */

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* Layout */
  --container-w: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-0: #0b1220;
    --bg-50: #0f172a;
    --bg-100: #111827;
    --bg-200: #1f2937;
    --text-900: #e5e7eb;
    --text-700: #cbd5e1;
    --border-200: #1f2a3a;
    --border-300: #2b3a4f;
    --brand-600: #ced7e6;
    --shadow-1: 0 8px 20px rgba(0,0,0,.4);
    --shadow-2: 0 16px 40px rgba(0,0,0,.5);
  }
}

/* 2) Resets & base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-900);
  background: var(--bg-0);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-radius: var(--radius-s); }

.container { width: min(100%, calc(var(--container-w) + 2*var(--space-6))); padding-inline: var(--space-6); margin-inline: auto; }
.section { padding: clamp(var(--space-8), 3vw + 1rem, var(--space-12)) 0; }
.section--tight { padding: var(--space-8) 0; }

h1, h2, h3 { color: var(--brand-900); line-height: var(--lh-tight); margin: 0 0 var(--space-4); font-weight: 800; }
h1 { font-size: clamp(var(--fs-3xl), 3vw + 1rem, var(--fs-4xl)); }
h2 { font-size: clamp(var(--fs-2xl), 2vw + 1rem, 2.25rem); }
h3 { font-size: clamp(var(--fs-xl), 1vw + 1rem, var(--fs-2xl)); }
p { margin: 0 0 var(--space-5); color: var(--text-700); }
.lead { font-size: var(--fs-lg); color: var(--brand-600); }
.kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-500); font-weight: 700; }

/* Links */
a { color: var(--accent-500); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 3) Buttons */
.btn { 
  --_bg: var(--accent-600);
  --_fg: #fff;
  --_bd: transparent;
  display: inline-flex; align-items: center; gap: .6ch;
  padding: .85rem 1.15rem;
  border-radius: var(--radius-m);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  box-shadow: var(--shadow-1);
  font-weight: 700;
  line-height: 1;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-2); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-2), var(--ring); }
.btn--primary { --_bg: linear-gradient(135deg, var(--accent-600), var(--accent-400)); }
.btn--secondary { --_bg: #fff; --_fg: var(--brand-700); --_bd: var(--border-300); }
.btn--ghost { --_bg: transparent; --_fg: var(--accent-500); --_bd: transparent; box-shadow: none; }
.btn--sm { padding: .65rem .9rem; border-radius: var(--radius-s); font-size: var(--fs-sm); }
.btn--lg { padding: 1rem 1.25rem; font-size: var(--fs-lg); }
.btn .sub { opacity: .8; font-weight: 600; font-size: .9em; }

/* 4) Hero / page header */
.hero {
  background: linear-gradient(180deg, var(--bg-50), transparent);
}
.hero__wrap { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1.1fr .9fr; }
.hero__title { margin-bottom: var(--space-4); }
.hero__bullets { display: grid; gap: var(--space-2); }
.hero__bullets li { display: flex; gap: .6rem; align-items: flex-start; }
.hero__bullets li::before { content: ""; width: 10px; height: 10px; border-radius: 999px; margin-top: .45rem; background: var(--accent-500); box-shadow: 0 0 0 4px rgba(20,163,124,.15); }

@media (max-width: 980px) { .hero__wrap { grid-template-columns: 1fr; } }

/* 5) Cards */
.card { background: var(--bg-0); border: 1px solid var(--border-200); border-radius: var(--radius-l); padding: var(--space-6); box-shadow: var(--shadow-1); }
.card--flat { box-shadow: none; }
.card__title { margin-bottom: var(--space-3); }
.card__meta { font-size: var(--fs-sm); color: var(--text-700); }
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* 6) Sticky CTA bar */
.cta-bar { position: sticky; bottom: 0; z-index: 50; border-top: 1px solid var(--border-200); background: rgba(255,255,255,.92); backdrop-filter: blur(6px); padding: var(--space-4) 0; }
.cta-bar__wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cta-bar__text { font-weight: 700; }
@media (prefers-color-scheme: dark) { .cta-bar { background: rgba(17,24,39,.8); } }

/* 7) Tables (comparison, pricing) */
.table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.table th, .table td { padding: .9rem 1rem; border-bottom: 1px solid var(--border-200); text-align: left; vertical-align: top; }
.table thead th { background: var(--bg-100); color: var(--brand-700); font-size: var(--fs-sm); letter-spacing: .02em; text-transform: uppercase; }
.table--compare tbody tr:hover { background: var(--bg-50); }
.table .yes { color: var(--ok-500); font-weight: 700; }
.table .no { color: var(--error-500); font-weight: 700; }

/* 8) Lists (pros/cons, checklists) */
.list { padding-left: 0; list-style: none; display: grid; gap: .6rem; }
.pros-list li, .cons-list li { display: grid; grid-template-columns: 22px 1fr; gap: .5rem; align-items: start; }
.pros-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(47,179,68,.12); color: var(--ok-500); font-weight: 900; }
.cons-list li::before { content: "✕"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(214,69,69,.12); color: var(--error-500); font-weight: 900; }

/* 9) Badges & meta chips */
.badge { display: inline-flex; align-items: center; gap: .4ch; font-size: var(--fs-sm); padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--border-300); background: var(--bg-50); }
.badge--success { border-color: rgba(47,179,68,.35); background: rgba(47,179,68,.08); color: var(--ok-500); }
.badge--warn { border-color: rgba(227,160,8,.35); background: rgba(227,160,8,.08); color: var(--warn-500); }

/* 10) Notice / callouts */
.notice { padding: var(--space-5); border: 1px solid var(--border-300); background: var(--bg-50); border-radius: var(--radius-m); }
.notice--info { border-color: rgba(20,163,124,.35); background: rgba(20,163,124,.06); }
.notice--warn { border-color: rgba(227,160,8,.35); background: rgba(227,160,8,.08); }
.notice--danger { border-color: rgba(214,69,69,.35); background: rgba(214,69,69,.08); }

/* 11) Rating Stars (data attribute) */
.rating { --star: "★★★★★"; --size: 1.1rem; --fill: var(--warn-500); --empty: #cfd8e3; position: relative; display: inline-block; font-size: var(--size); line-height: 1; }
.rating::before { content: var(--star); color: var(--empty); }
.rating::after { content: var(--star); color: var(--fill); position: absolute; inset: 0; width: calc(attr(data-value number) / 5 * 100%); overflow: hidden; white-space: nowrap; }

/* 12) TOC (on-page navigation) */
.toc { position: sticky; top: 6rem; align-self: start; background: var(--bg-50); border: 1px solid var(--border-200); border-radius: var(--radius-m); padding: var(--space-5); }
.toc a { display: block; padding: .3rem 0; color: var(--text-700); }
.toc a:hover { color: var(--accent-500); text-decoration: none; }

/* 13) Forms (email capture, comments) */
.input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--border-300); border-radius: var(--radius-m); background: var(--bg-0); color: var(--text-900); }
.input:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent-400); }

/* 14) SEO-friendly elements */
.breadcrumbs { font-size: var(--fs-sm); color: var(--text-700); }
.breadcrumbs a { color: inherit; }

/* 15) Utility classes */
.m0 { margin: 0 !important; } .mb-2 { margin-bottom: var(--space-2) !important; } .mb-3 { margin-bottom: var(--space-3) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .mt-6 { margin-top: var(--space-6) !important; }
.center { text-align: center; }
.flex { display: flex; gap: var(--space-4); }
.flex-col { flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }

/* 16) Accessibility & motion respect */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 17) Page-specific helpers */
/* Review header block */
.review-head { display: grid; gap: var(--space-5); grid-template-columns: 120px 1fr auto; align-items: center; }
.review-head__media img { border-radius: var(--radius-m); }
.review-head__meta { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
@media (max-width: 860px) { .review-head { grid-template-columns: 80px 1fr; } .review-head .rating { margin-top: var(--space-2); } }

/* Price table */
.price { display: inline-flex; gap: .6ch; align-items: baseline; }
.price .now { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand-900); }
.price .was { font-size: var(--fs-sm); color: var(--text-700); text-decoration: line-through; }

/* Footer trust bar */
.trustbar { display: grid; grid-auto-flow: column; gap: var(--space-6); align-items: center; justify-content: start; opacity: .9; }
@media (max-width: 680px) { .trustbar { grid-auto-flow: row; } }

/* 18) Sticky review sidebar */
.aside-sticky { position: sticky; top: 6rem; }

/* 19) Mini icon bullets (SVG inline) */
.icon-bullet { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; align-items: start; }

/* 20) Highlights */
.highlight { background: linear-gradient(180deg, rgba(46,193,153,.15), transparent 55%); padding: .1rem .2rem; border-radius: 6px; }/* End custom CSS */