/* ============================================================
   ZoniPharma — Public Site Design System
   Palette: Primary #16A34A, Secondary #22C55E, Bg #F8FAFC,
            Cards #FFFFFF, Border #E5E7EB, Heading #111827, Text #6B7280
   Type: Inter, tabular numerals for stats/prices.
   Signature: the "pulse line" — an EKG-style heartbeat stroke that
   threads through the hero, section dividers and the footer, standing
   in for the software's constant, dependable rhythm.

   Used by every server-rendered public page in resources/views. The
   tenant app (/app) and the platform admin panel keep their own
   stylesheet (app/css/app.css) — this file never touches them.
   ============================================================ */

:root{
  --primary: #16A34A;
  --primary-dark: #0f7a37;
  --secondary: #22C55E;
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --border: #E5E7EB;
  --heading: #111827;
  --text: #6B7280;
  --text-soft: #9AA3AF;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --warn: #B45309;
  --warn-bg: #FFFBEB;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 1px rgba(17,24,39,.03);
  --shadow-md: 0 8px 24px -8px rgba(17,24,39,.10), 0 2px 6px rgba(17,24,39,.04);
  --shadow-lg: 0 24px 64px -16px rgba(17,24,39,.16), 0 4px 12px rgba(17,24,39,.05);
  --shadow-glow: 0 0 0 1px rgba(22,163,74,.08), 0 20px 60px -12px rgba(22,163,74,.28);

  --container: 1200px;
  --ease: cubic-bezier(.16,.84,.44,1);

  --gradient-brand: linear-gradient(135deg, #16A34A 0%, #22C55E 55%, #4ADE80 100%);
  --gradient-mesh: radial-gradient(60% 60% at 15% 20%, rgba(34,197,94,.16), transparent 60%),
                   radial-gradient(50% 50% at 85% 15%, rgba(22,163,74,.12), transparent 60%),
                   radial-gradient(60% 60% at 50% 100%, rgba(74,222,128,.10), transparent 60%);
}

html[data-theme="dark"]{
  --bg: #0B0F14;
  --card: #121821;
  --border: #1F2937;
  --heading: #F3F4F6;
  --text: #9CA3AF;
  --text-soft: #6B7280;
  --danger-bg: #2A1213;
  --danger-border: #7F1D1D;
  --warn-bg: #2A1F0B;
  --shadow-glow: 0 0 0 1px rgba(34,197,94,.12), 0 20px 60px -12px rgba(34,197,94,.35);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 16px;
  transition: background .3s var(--ease), color .3s var(--ease);
}

h1,h2,h3,h4{ color: var(--heading); font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 .6em; }
p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section{ padding: 112px 0; position: relative; }
.section-tight{ padding: 72px 0; }
.section-alt{ background: var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--primary); background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--secondary); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }

.section-head{ max-width: 640px; margin: 0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(28px, 4vw, 42px); }
.section-head p{ font-size: 17px; }

/* Buttons */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 26px 60px -14px rgba(22,163,74,.42); }
.btn-secondary{ background: var(--card); color: var(--heading); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover{ transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.btn-ghost{ background: transparent; color: var(--heading); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary); }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 18px; font-size: 14px; }
.btn:disabled{ opacity:.6; cursor: not-allowed; transform:none; box-shadow:none; }

.ripple{ position:absolute; border-radius:50%; transform:scale(0); background: rgba(255,255,255,.5); animation: ripple .6s var(--ease); pointer-events:none; }
html[data-theme="dark"] .btn-secondary .ripple, html[data-theme="dark"] .btn-ghost .ripple{ background: rgba(255,255,255,.12); }
@keyframes ripple{ to{ transform: scale(3); opacity:0; } }

/* Navbar */
.nav{
  position: sticky; top:0; z-index: 100;
  background: rgba(248,250,252,.7);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
html[data-theme="dark"] .nav{ background: rgba(11,15,20,.7); }
.nav.scrolled{
  background: rgba(248,250,252,.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 24px rgba(17,24,39,.04);
}
html[data-theme="dark"] .nav.scrolled{ background: rgba(11,15,20,.82); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; max-width: var(--container); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color: var(--heading); }
.logo-mark{ width:34px; height:34px; border-radius:10px; background: var(--gradient-brand); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-glow); flex-shrink:0; }
.logo-mark svg{ width:19px; height:19px; }
/* Uploaded site logo, shown in place of .logo-mark. Height is fixed and the
   width follows the image, so wordmark-shaped logos are not squashed into a
   square. */
.logo-img{ height:34px; width:auto; max-width:170px; object-fit:contain; flex-shrink:0; display:block; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size: 14.5px; font-weight:500; color: var(--text); transition: color .2s; position:relative; }
.nav-links a:hover{ color: var(--heading); }
.nav-links a.active{ color: var(--primary); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background: var(--card);
  display:flex; align-items:center; justify-content:center; color: var(--text); transition: all .2s;
}
.theme-toggle:hover{ border-color: var(--primary); color: var(--primary); }
.theme-toggle svg{ width:17px; height:17px; }
.nav-burger{ display:none; }

@media (max-width: 900px){
  .nav-links{
    position: fixed; inset: 68px 16px auto 16px; flex-direction: column; align-items:flex-start; gap: 4px;
    background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md);
    padding: 16px; box-shadow: var(--shadow-lg);
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none; transition: all .25s var(--ease);
  }
  .nav-links.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 10px 8px; width:100%; }
  .nav-burger{
    display:flex; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background: var(--card);
    align-items:center; justify-content:center; color: var(--heading);
  }
  .nav-burger svg{ width:18px; height:18px; }
}
@media (max-width: 480px){ .nav-actions .btn{ display:none; } }

/* Hero */
.hero{ position:relative; overflow:hidden; padding: 88px 0 60px; }
.hero::before{
  content:''; position:absolute; inset:-10% -10% auto -10%; height: 140%;
  background: var(--gradient-mesh); z-index:0; pointer-events:none;
  animation: meshDrift 16s ease-in-out infinite alternate;
}
@keyframes meshDrift{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(2%,1%,0) scale(1.04);} }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items:center; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; gap:48px; } }
.hero h1{ font-size: clamp(34px, 5vw, 58px); margin-bottom: 22px; }
.hero h1 .grad{ background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size: 18px; max-width: 520px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Hero visual mock */
.hero-visual{ position:relative; }
.mock-card{
  position:relative; background: rgba(255,255,255,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 22px; z-index:2;
}
html[data-theme="dark"] .mock-card{ background: rgba(18,24,33,.6); border-color: rgba(255,255,255,.06); }
.mock-topbar{ display:flex; gap:6px; margin-bottom:16px; }
.mock-dot{ width:10px; height:10px; border-radius:50%; background: var(--border); }
.mock-chart{ height: 150px; border-radius: 14px; background: linear-gradient(180deg, rgba(22,163,74,.10), transparent); position:relative; overflow:hidden; margin-bottom:16px; }
.mock-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
.mock-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--border); font-size:13px; }
.mock-row:first-of-type{ border-top:none; }
.mock-pill{ font-size:11px; font-weight:700; padding:3px 10px; border-radius: var(--radius-pill); background: rgba(22,163,74,.12); color: var(--primary); }

.floaty{ position:absolute; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-md); border:1px solid var(--border); padding:12px 16px; display:flex; align-items:center; gap:10px; z-index:3; font-size:13px; animation: floatY 5s ease-in-out infinite; }
.floaty svg{ width:20px; height:20px; flex-shrink:0; }
.floaty.f1{ top:-6%; right:-8%; animation-delay: .3s; }
.floaty.f2{ bottom:6%; left:-10%; animation-delay: 1.1s; }
.floaty.f3{ bottom:-8%; right:14%; animation-delay: 1.8s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@media (max-width: 1100px){ .floaty{ display:none; } }

/* Stats */
.stats-bar{ position:relative; z-index:1; margin-top: 72px; border-top:1px solid var(--border); padding-top: 44px; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
.stat-num{ font-size: clamp(26px,3.4vw,38px); font-weight:800; color: var(--heading); font-variant-numeric: tabular-nums; }
.stat-label{ font-size:13.5px; color: var(--text); margin-top:4px; }
@media (max-width: 700px){ .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 32px 16px; } }

/* Cards grid */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 980px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-3,.grid-4,.grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(22,163,74,.25); }
.card-icon{ width:48px; height:48px; border-radius: 13px; background: rgba(22,163,74,.10); color: var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.card-icon svg{ width:24px; height:24px; }
.card h3{ font-size: 18px; margin-bottom:8px; }
.card p{ font-size:14.5px; margin:0; }

.feature-card{ padding:24px; }
.feature-card .card-icon{ width:40px; height:40px; border-radius:11px; margin-bottom:14px; }
.feature-card h3{ font-size:15.5px; margin-bottom:6px; }
.feature-card p{ font-size:13.5px; }

/* How it works timeline */
.timeline{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; position:relative; }
.timeline::before{ content:''; position:absolute; top:23px; left:8%; right:8%; height:2px; background: linear-gradient(90deg, var(--border), var(--primary), var(--border)); z-index:0; }
@media (max-width:900px){ .timeline{ grid-template-columns: 1fr; } .timeline::before{ display:none; } }
.timeline-step{ position:relative; z-index:1; text-align:center; }
.timeline-num{ width:46px; height:46px; border-radius:50%; background: var(--gradient-brand); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; margin: 0 auto 18px; box-shadow: var(--shadow-glow); }
.timeline-step h3{ font-size:16px; }
.timeline-step p{ font-size:13.5px; }

/* Device mockups */
.device-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.device-tab{ padding:9px 18px; border-radius: var(--radius-pill); border:1px solid var(--border); background:var(--card); font-size:13.5px; font-weight:600; color:var(--text); transition:.2s; }
.device-tab.active{ background: var(--gradient-brand); color:#fff; border-color:transparent; }
.device-frame{ max-width: 900px; margin:0 auto; border-radius: var(--radius-lg); background: linear-gradient(180deg,#1F2937,#111827); padding:14px; box-shadow: var(--shadow-lg); transition: max-width .35s var(--ease); }
.device-frame .screen{ border-radius: 14px; overflow:hidden; background: var(--card); }

/* Comparison */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:800px){ .compare{ grid-template-columns:1fr; } }
.compare .card ul{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.compare .card li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
.compare .card svg{ width:18px; height:18px; flex-shrink:0; }
.compare-old{ opacity:.9; }
.compare-old svg{ color:#EF4444; }
.compare-new svg{ color: var(--primary); }
.compare-new{ border-color: rgba(22,163,74,.3); background: linear-gradient(180deg, rgba(22,163,74,.04), var(--card) 40%); }

/* Testimonials */
.stars{ display:flex; gap:3px; color:#F59E0B; margin-bottom:14px; }
.stars svg{ width:16px; height:16px; fill: currentColor; }
.testi-quote{ font-size:14.5px; color:var(--heading); margin-bottom:20px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.avatar{ width:40px; height:40px; border-radius:50%; background: var(--gradient-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
.testi-name{ font-size:14px; font-weight:600; color:var(--heading); }
.testi-role{ font-size:12.5px; color: var(--text-soft); }

/* CTA band */
.cta-band{
  position:relative; overflow:hidden; border-radius: var(--radius-lg); background: var(--gradient-brand);
  padding: 72px 48px; text-align:center; color:#fff;
}
.cta-band::after{ content:''; position:absolute; inset:0; background: radial-gradient(60% 80% at 80% 0%, rgba(255,255,255,.25), transparent 60%); pointer-events:none; }
.cta-band h2{ color:#fff; font-size: clamp(26px,3.6vw,38px); position:relative; }
.cta-band p{ color: rgba(255,255,255,.9); max-width:520px; margin:0 auto 32px; position:relative; }
.cta-band .hero-actions{ justify-content:center; position:relative; }
.cta-band .btn-secondary{ background:#fff; border-color:#fff; color:#111827; }
.cta-band .btn-ghost{ border-color: rgba(255,255,255,.5); color:#fff; }
.cta-band .btn-ghost:hover{ background: rgba(255,255,255,.12); }
@media (max-width:600px){ .cta-band{ padding: 48px 24px; } }

/* Footer */
.footer{ border-top:1px solid var(--border); padding: 64px 0 32px; margin-top: 40px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 32px; margin-bottom: 48px; }
@media (max-width:900px){ .footer-top{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer h4{ font-size:13.5px; color: var(--heading); margin-bottom:16px; }
.footer ul{ display:flex; flex-direction:column; gap:11px; }
.footer a{ font-size:14px; color: var(--text); transition:.2s; }
.footer a:hover{ color: var(--primary); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color: var(--primary); color: var(--primary); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--border); font-size:13px; color: var(--text-soft); flex-wrap:wrap; gap:12px; }
.footer-pulse{ width:120px; height:24px; opacity:.5; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-scale.in{ opacity:1; transform: scale(1); }
[style*="--d:"]{ transition-delay: var(--d); }

/* Page hero (inner pages) */
.page-hero{ padding: 72px 0 48px; text-align:center; position:relative; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:-20% -10% auto -10%; height:120%; background: var(--gradient-mesh); z-index:0; pointer-events:none; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ font-size: clamp(30px,4.6vw,48px); }
.page-hero p{ max-width:600px; margin:12px auto 0; font-size:17px; }

/* Pricing */
.billing-toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 28px 0 8px; }
.billing-toggle span{ font-size:14px; font-weight:600; color: var(--heading); }
.switch{ width:52px; height:30px; border-radius: var(--radius-pill); background: var(--border); position:relative; border:none; transition:.25s; flex-shrink:0; }
.switch::before{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow: var(--shadow-sm); transition:.25s var(--ease); }
.switch.on{ background: var(--gradient-brand); }
.switch.on::before{ transform: translateX(22px); }
.save-badge{ font-size:12px; font-weight:700; color: var(--primary); background: rgba(22,163,74,.1); padding:3px 9px; border-radius: var(--radius-pill); }

.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.price-card{ display:flex; flex-direction:column; }
.price-card.popular{ border-color: var(--primary); box-shadow: var(--shadow-glow); position:relative; }
.popular-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background: var(--gradient-brand); color:#fff; font-size:12px; font-weight:700; padding:6px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-glow); white-space:nowrap; }
.price-plan-name{ font-size:14px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.04em; }
.price-amount{ font-size:38px; font-weight:800; color:var(--heading); margin:10px 0 4px; font-variant-numeric: tabular-nums; }
.price-amount span{ font-size:14px; font-weight:500; color: var(--text-soft); }
.price-desc{ font-size:13.5px; margin-bottom:20px; }
.price-features{ display:flex; flex-direction:column; gap:12px; margin: 20px 0 28px; flex:1; }
.price-features li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text); }
.price-features svg{ width:17px; height:17px; color:var(--primary); flex-shrink:0; margin-top:2px; }
.lifetime-banner{ margin-top:28px; border-radius: var(--radius-lg); border:1px dashed rgba(22,163,74,.4); background: linear-gradient(135deg, rgba(22,163,74,.05), rgba(34,197,94,.02)); padding:36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.lifetime-banner .price-amount{ margin:6px 0; }

/* FAQ accordion */
.accordion{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.acc-item{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; transition: border-color .2s, box-shadow .2s; }
.acc-item.open{ border-color: rgba(22,163,74,.3); box-shadow: var(--shadow-sm); }
.acc-q{ width:100%; background:none; border:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-size:15.5px; font-weight:600; color:var(--heading); text-align:left; }
.acc-q svg{ width:18px; height:18px; flex-shrink:0; transition: transform .3s var(--ease); color: var(--primary); }
.acc-item.open .acc-q svg{ transform: rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.acc-a-inner{ padding: 0 24px 22px; font-size:14.5px; }

/* Forms */
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--heading); margin-bottom:7px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border-radius: var(--radius-sm); border:1px solid var(--border);
  background: var(--card); color: var(--heading); font-family:inherit; font-size:14.5px; transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.form-field .hint{ display:block; font-size:12.5px; font-weight:400; color: var(--text-soft); margin-top:6px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); }
.form-check input{ width:16px; height:16px; accent-color: var(--primary); }

/* Inline messages (form feedback) */
.msg{ display:none; border-radius: var(--radius-sm); padding:13px 16px; font-size:14px; font-weight:500; margin-bottom:18px; border:1px solid transparent; }
.msg.show{ display:block; }
.msg.error{ background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.msg.success{ background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.3); color: var(--primary-dark); }
.msg.warn{ background: var(--warn-bg); border-color: rgba(245,158,11,.35); color: var(--warn); }
html[data-theme="dark"] .msg.success{ color: var(--secondary); }

/* Auth split layout.
   The auth pages carry the same site header and footer as every other page,
   so this block sizes itself to its content rather than claiming the whole
   viewport — otherwise the nav and footer would push it off-screen. */
.auth-wrap{ min-height: 620px; display:grid; grid-template-columns: 1fr 1fr; }
@media (max-width:900px){ .auth-wrap{ grid-template-columns:1fr; min-height:auto; } }
.auth-form-side{ display:flex; flex-direction:column; justify-content:center; padding: 56px 8%; background: var(--bg); }
@media (max-width:600px){ .auth-form-side{ padding: 40px 24px; } }
.auth-visual-side{ position:relative; background: var(--gradient-brand); display:flex; align-items:center; justify-content:center; padding:48px; overflow:hidden; }
@media (max-width:900px){ .auth-visual-side{ display:none; } }
.auth-visual-side::before{ content:''; position:absolute; inset:0; background: radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.25), transparent 60%); }
.auth-back{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:28px; }
.auth-back:hover{ color: var(--primary); }
.auth-back svg{ width:16px; height:16px; }
.auth-benefits{ display:flex; flex-direction:column; gap:14px; margin: 28px 0; }
.auth-benefit{ display:flex; align-items:center; gap:12px; color:#fff; font-size:14.5px; font-weight:500; position:relative; z-index:1; }
.auth-benefit svg{ width:20px; height:20px; flex-shrink:0; }
/* The register page's columns must never scroll inside themselves — two inner
   scrollbars next to the page's own is confusing and traps the plan list.
   The page scrolls; the columns just grow. (The old .auth-scroll helper that
   set max-height:100vh + overflow-y:auto is gone; nothing references it.) */
.auth-form-side, .auth-visual-side > *{ overflow:visible; max-height:none; }
/* The auth pages don't need the footer's big top gap — the split block already
   provides plenty of separation. */
.auth-page .footer{ margin-top:0; }

/* Plan picker (register page) */
.plan-picker{ display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
.plan-pick{
  position:relative; border:2px solid rgba(255,255,255,.18); border-radius: var(--radius-md);
  background: rgba(255,255,255,.08); padding:18px 20px; cursor:pointer; transition: all .18s var(--ease); text-align:left; width:100%;
}
.plan-pick:hover{ border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.14); }
.plan-pick.chosen{ border-color:#fff; background: rgba(255,255,255,.2); }
.plan-pick-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.plan-pick-name{ font-weight:700; font-size:15.5px; color:#fff; }
.plan-pick-price{ font-weight:800; font-size:19px; color:#fff; font-variant-numeric: tabular-nums; white-space:nowrap; }
.plan-pick-price small{ font-size:12px; font-weight:400; opacity:.75; }
.plan-pick ul{ display:flex; flex-direction:column; gap:5px; }
.plan-pick li{ display:flex; gap:8px; align-items:center; font-size:12.5px; color: rgba(255,255,255,.85); }
.plan-pick li::before{ content:'✓'; font-weight:800; color:#fff; }
.plan-pick-tag{ position:absolute; top:-11px; left:20px; background:#fff; color: var(--primary-dark); font-size:10.5px; font-weight:800; padding:3px 12px; border-radius: var(--radius-pill); letter-spacing:.03em; }

/* Blog */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ display:flex; flex-direction:column; }
.blog-cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--primary); margin-bottom:10px; }
.blog-card h3{ font-size:17px; margin-bottom:10px; }
.blog-card p{ flex:1; font-size:14px; margin-bottom:16px; }
.blog-meta{ font-size:12.5px; color: var(--text-soft); border-top:1px solid var(--border); padding-top:14px; }
.post-body{ max-width:760px; margin:0 auto; font-size:16px; }
.post-body h2{ font-size:24px; margin-top:40px; }
.post-body h3{ font-size:19px; margin-top:32px; }
.post-body img{ border-radius: var(--radius-md); margin:24px 0; }
.post-body ul{ list-style:disc; padding-left:22px; margin-bottom:16px; }
.post-body li{ margin-bottom:8px; }

/* Legal pages */
.legal-content{ max-width: 760px; margin:0 auto; }
.legal-content h2{ font-size:22px; margin-top:44px; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p, .legal-content li{ font-size:15px; }
.legal-content ul{ list-style:disc; padding-left:22px; margin-bottom:16px; }
.legal-content li{ margin-bottom:8px; }
.legal-updated{ font-size:13.5px; color:var(--text-soft); margin-bottom:40px; }

/* Contact info cards */
.contact-info-card{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-card .card-icon{ margin-bottom:0; flex-shrink:0; }
.contact-info-card h3{ font-size:16px; margin-bottom:4px; }
.contact-info-card p{ margin:0; }
.contact-info-card a{ color: var(--primary); font-weight:600; }

/* 404 */
.error-page{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; }
.error-code{ font-size: clamp(90px,16vw,180px); font-weight:800; background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }

/* Skeleton loading */
.skeleton{ background: linear-gradient(90deg, var(--border) 25%, rgba(148,163,184,.25) 37%, var(--border) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* utils */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.badge-soft{ display:inline-block; font-size:12px; font-weight:700; color: var(--primary); background: rgba(22,163,74,.1); padding:4px 12px; border-radius: var(--radius-pill); }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:10px 16px; border-radius:8px; z-index:1000; }
.skip-link:focus{ left:16px; top:16px; }
.muted{ color: var(--text-soft); }
.empty{ text-align:center; padding:48px 24px; color: var(--text-soft); }