:root{
  --bg:#f6f9fb;
  --ink:#0f172a;
  --muted:#586277;
  --brand:#5ac278;         /* green accent */
  --brand-600:#44b065;
  --brand-700:#2f9a52;
  --card:#ffffff;
  --ring: rgba(90,194,120,.25);
  --shadow: 0 10px 30px rgba(2, 8, 23, .06);
  --radius: 18px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(circle at 1px 1px, #e6eef5 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Optional outer wrapper */
.wrap{ max-width:1400px; margin:0 auto; }

/* ===== Top nav ===== */
.nav{
  max-width:1200px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.2px;
  font-family: Outfit, Inter, sans-serif;
}
.brand-badge{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand), #97e3ae);
  color:#0b3b1f; font-weight:800;
  box-shadow: var(--shadow);
}
.plan-pill{ margin-left:6px; padding:4px 8px; border-radius:999px; background:#eaf7ef; color:#135c32; font:700 12px/1 Inter,sans-serif }
.plan-pill--free{ background:#f2f4f7; color:#334155 }
.env-pill{ margin-left:6px; padding:4px 8px; border-radius:999px; background:#e0f2fe; color:#075985; font:700 12px/1 Inter,sans-serif }

.nav-links{ display:flex; align-items:center; gap:16px; }
.nav-links a,
.nav-links a:visited{ color:#2d3748; text-decoration:none; font-weight:600; }
.nav-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
.nav-links a.active{ text-decoration:underline; text-underline-offset:3px; }
.nav-cta{
  display:inline-block; background:var(--brand); color:#05361a; border:0;
  padding:10px 16px; font-weight:800; border-radius:14px; cursor:pointer; box-shadow:var(--shadow);
}
.nav-cta:hover{ background:var(--brand-600); }

/* ===== Generic hero (index) ===== */
.hero{
  max-width:1200px; margin:14px auto 36px; padding:0 20px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center;
}
@media (max-width:980px){ .hero{ grid-template-columns:1fr; } }
.eyebrow{ font-weight:700; color:#4b5563; letter-spacing:.1em; font-size:.8rem; }
h1{
  margin:.2rem 0 .75rem; line-height:1.05; font-weight:900;
  font-family: Outfit, Inter, sans-serif; font-size: clamp(2rem, 4.5vw, 3.6rem);
}
h1 .muted{ color:#5a7aa1; font-weight:800; }
h1 .accent{ color:var(--brand-700); }
.lead{ color:var(--muted); font-size:1.05rem; max-width:60ch }

/* index right visual card */
.visual{ position:relative; background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.visual img{ width:100%; height:auto; border-radius:12px; display:block; }
.badge{
  position:absolute; right:-12px; bottom:-12px; background:#fff;
  border-radius:16px; padding:12px 14px; box-shadow:var(--shadow);
  display:flex; gap:10px; align-items:center; font-weight:700; color:#1f2a44;
}
.badge .dot{ width:10px; height:10px; border-radius:999px; background:var(--brand) }

/* ===== Calculator section (index) ===== */
.section{ max-width:1200px; margin:18px auto 70px; padding:0 20px; }
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.col-5{ grid-column:span 5; } .col-7{ grid-column:span 7; }
@media (max-width:880px){ .col-5,.col-7{ grid-column:1 / -1; } }
.input{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.input label{ font-weight:700; color:#2c3a56; font-size:.93rem }
.input input, .input select{
  border:1px solid #dbe5ee; border-radius:12px; padding:12px 14px; font-size:1rem;
  outline:none; transition:border .15s, box-shadow .15s; background:#fbfdff; width:100%;
}
.input input:focus, .input select:focus{ border-color:var(--brand-600); box-shadow:0 0 0 6px var(--ring); }
.result{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
.pill{ background:#f0f6f3; border-radius:14px; padding:12px 14px; font-weight:800; color:#0b3b1f; text-align:center; }
.tiny{ color:#6b7280; font-weight:600; font-size:.9rem; margin-top:6px }
.footer-note{ text-align:center; color:#6b7280; font-size:.92rem; margin:30px 0 60px }
.link{ color:#1e7e46; font-weight:800; text-decoration:none }
.link:hover{ text-decoration:underline }

/* ===== Toasts ===== */
.toast-stack{ position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:12px; pointer-events:none; }
.toast{
  --toast-bg:#fff; --toast-border:#e5e7eb; --toast-accent:#22c55e; --toast-ink:#0f172a;
  pointer-events:auto; min-width:320px; max-width:420px; background:var(--toast-bg); color:var(--toast-ink);
  border:1px solid var(--toast-border); border-left:6px solid var(--toast-accent); border-radius:12px;
  box-shadow:var(--shadow); padding:12px 14px; display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:start;
  opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.hide{ opacity:0; transform:translateY(-6px); }
.toast__icon{ width:22px; height:22px; margin-top:2px; }
.toast__title{ font-weight:700; }
.toast__msg{ font-weight:500; color:#334155; margin-top:2px; }
.toast__close{ appearance:none; border:0; background:transparent; cursor:pointer; font-size:18px; line-height:1; opacity:.6; padding:0 4px; margin-top:2px; }
.toast__close:hover{ opacity:1; }
.toast--success{ --toast-bg:#ecfdf5; --toast-border:#a7f3d0; --toast-accent:#22c55e; --toast-ink:#064e3b; }
.toast--warning{ --toast-bg:#fffbeb; --toast-border:#fde68a; --toast-accent:#f59e0b; --toast-ink:#78350f; }
.toast--error  { --toast-bg:#fef2f2; --toast-border:#fecaca; --toast-accent:#ef4444; --toast-ink:#7f1d1d; }

/* ===== Pricing page hero (centered) ===== */
.pricing-hero{
  max-width:900px; margin:22px auto 8px; padding:0 20px;
  display:grid; grid-template-columns:1fr; text-align:center;
}
.pricing-hero .badge{
  position:static; display:inline-flex; align-items:center; gap:8px;
  margin:0 auto 8px; padding:6px 10px; border-radius:999px;
  background:var(--brand-100, #e8f6ed); color:var(--brand-700); box-shadow:none; font-weight:700;
}
.pricing-hero .lead{ margin:0 auto; }

/* ===== Pricing cards & table ===== */
.pricing-head{ text-align:center; margin:18px 0 8px }
.pricing-head h2{ font-family:Outfit, Inter, sans-serif; font-size:30px; margin:0 0 6px }
.pricing-head p{ color:var(--muted) }
.smallcaps{ font-variant-caps:all-small-caps; letter-spacing:.04em }
.savings{ color:var(--brand-700); font-weight:800 }

.toggle{ display:flex; justify-content:center; align-items:center; gap:10px; margin:14px 0 24px }
.toggle input{ appearance:none; width:42px; height:24px; border-radius:999px; background:#e5e7eb; position:relative; cursor:pointer; outline:none }
.toggle input:checked{ background:var(--brand) }
.toggle input::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:all .18s ease }
.toggle input:checked::after{ left:21px }

.pricing-grid{
  display:grid; grid-template-columns:1fr; gap:18px;
  max-width:1200px; margin:0 auto 40px; padding:0 20px; align-items:stretch;
}
@media(min-width:950px){ .pricing-grid{ grid-template-columns:repeat(3,1fr) } }

.tier{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; display:flex; flex-direction:column; height:100%;
}
@media (min-width:950px){ .tier{ min-height:520px; } }
.tier.popular{ outline:2px solid var(--brand-600); }
.tier h3{ margin:0 0 6px; font-size:22px; font-weight:800 }
.tier p.sub{ color:var(--muted); margin:0 0 14px }
.price{ font-size:36px; font-weight:800; letter-spacing:-.5px; margin:6px 0 4px }
.price small{ font-size:14px; font-weight:700; color:#667085 }
.feature{ display:flex; gap:10px; margin:8px 0; color:#344054; font-size:.95rem }
.feature svg{ flex:0 0 18px; margin-top:2px }

.tier .cta{ margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.btn{ display:inline-block; border-radius:12px; padding:12px 14px; font-weight:800; cursor:pointer; text-decoration:none; box-shadow:var(--shadow); }
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:var(--brand-600) }
.btn-ghost{ background:#f2f4f7; color:var(--brand-700) }
.btn-ghost:hover{ background:#e0e7ec }
.note{ font-size:12px; color:#667085; margin-top:8px }
.strike{ opacity:.6; text-decoration:line-through }

.compare{
  max-width:1200px; margin:0 auto 60px; padding:0 20px;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:auto;
}
.compare table{ width:100%; border-collapse:collapse; font-size:14px }
.compare th,.compare td{ padding:12px 14px; border-bottom:1px solid #eef2f6; text-align:left }
.compare th{ font-weight:800; background:#f8fafb }

/* Footer (pricing page) */
footer{ margin:40px 0 10px; color:#98a2b3; font-size:12px; text-align:center }

/* ===== Responsive Nav Fix ===== */
.menu-toggle {
  display:none; align-items:center; justify-content:center;
  background:#fff; color:#1f2937;
  border:1px solid #dbe5ee; border-radius:10px;
  padding:8px; box-shadow:var(--shadow);
}
@media (max-width:880px){
  .nav{ position:relative; padding:12px 16px; }
  .menu-toggle{ display:inline-flex; }
  .nav-links{
    display:none;
    position:absolute; right:16px; top:56px;
    background:var(--card); border-radius:12px; box-shadow:var(--shadow);
    padding:12px; flex-direction:column; gap:10px; min-width:220px; z-index:50;
  }
  .nav.is-open .nav-links{ display:flex; }
  .nav-links .nav-cta{ width:100%; text-align:center; }
}

/* Remove the display:none */
.impose-svg:empty {
  display: flex;          /* keep flex so ::before centers nicely */
  align-items: center;
  justify-content: center;
  opacity: 0.7;           /* subtle look */
}

/* Add placeholder text */
.impose-svg:empty::before {
  content: "Preview will appear here after calculation";
  color: #94a3b8;
  font-size: .9rem;
  font-weight: 600;
}

/* Base state: hidden with transition */
.impose-svg {
  margin-top:12px;
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:12px;
  border:1px solid #e5e7eb;
  
  opacity: 0;
  transition: opacity 0.3s ease;

  /* Keep the whole preview visible without page scroll */
  height: min(52vh, 460px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fade-in when content appears */
.impose-svg:not(:empty) {
  display: flex;   /* restores flex when content exists */
  opacity: 1;
}

.impose-svg svg {
  width:100%;
  height:100%;
  display:block;
  border-radius:8px;
}



/* --- Accessibility & optional hint --- */
@media (prefers-reduced-motion: reduce) {
  .impose-svg { transition: none; }
}

.impose-svg:empty::before {
  content: "Preview will appear here after calculation";
  color:#94a3b8;
  font-size:.9rem;
  font-weight:600;
}


/* ===== Dev mode Pro/Free switch ===== */
.mode-switch{display:flex;gap:6px;margin-left:auto}
.mode-switch button{
  border:1px solid #dbe5ee;border-radius:999px;padding:6px 10px;
  background:#fff;font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer
}
.mode-switch button.active{background:#0ea5a9;color:#fff;border-color:#0ea5a9}

/* Buttons: disabled feedback */
.btn[disabled]{ opacity:.55; cursor:not-allowed }


.banner {
  text-align: center;
  font-size: 0.9rem;
  padding: 10px 14px;
  margin: 12px auto;
  max-width: 600px;
  border-radius: 8px;
  font-weight: 500;
}

/* info: signup nudge */
.banner-info {
  background: #f0f9ff;            /* light blue */
  border: 1px solid #bae6fd;      /* blue border */
  color: #0369a1;                 /* blue text */
}

/* ok: current plan */
.banner-ok {
  background: #f0fdf4;            /* light green */
  border: 1px solid #bbf7d0;      /* green border */
  color: #166534;                 /* green text */
}

.banner a {
  color: #00a85c;
  font-weight: 600;
  text-decoration: none;
}

.banner a:hover {
  text-decoration: underline;
}


.cta-row { display:flex; gap:12px; flex-wrap:wrap; }


/* Inline "Upgrade" link inside limit message */
.upgrade-link,
.upgrade-link:visited { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.upgrade-link:hover   { text-decoration: underline; }


/* === Auth pages (scoped) === */
.auth-wrap{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
}
.auth-grid{
  width:min(980px, 92vw);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr; overflow:hidden;
}
@media (min-width:980px){
  .auth-grid{ grid-template-columns:1.05fr .95fr; }
  .auth-aside{
    padding:40px; display:flex; flex-direction:column; justify-content:flex-end;
    background:
      radial-gradient(600px 400px at 80% -10%, rgba(90,194,120,.18), transparent 45%),
      linear-gradient(180deg, rgba(90,194,120,.10), #f6f9fb);
  }
  .auth-aside h3{ margin:0 0 8px; font:800 22px/1.2 Outfit, Inter, sans-serif; color:#0f3b20; }
  .auth-aside p{ margin:0; color:var(--muted) }
}
.auth-main{ padding:28px; }
@media (min-width:520px){ .auth-main{ padding:44px; }}

/* header */
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.auth-badge{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand), #97e3ae); color:#0b3b1f; font-weight:800;
  box-shadow:var(--shadow);
}
.auth-brand h1{ margin:0; font:800 18px/1 Outfit, Inter, sans-serif; }

/* titles */
.auth-title{ margin:8px 0 2px; font:800 26px/1.15 Outfit, Inter, sans-serif; }
.auth-sub{ margin:0 0 18px; color:var(--muted); font-size:14.5px }

/* inputs (reuse your .input) */
.input-affix{ position:relative; display:flex; align-items:center; }
.input-affix .input input{ padding-right:44px; }
.affix-btn{
  position:absolute; right:8px; top:50%; translate:0 -50%;
  border:0; background:#f8fafc; color:#64748b; padding:6px 8px; border-radius:8px; cursor:pointer;
}
.affix-btn:hover{ background:#eef2f7; color:#334155 }

/* actions / links */
.actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px }
.auth-foot{ margin-top:18px; color:#667085; font-size:13px }
.auth-foot .link{ color:var(--brand-700); font-weight:800; text-decoration:none }
.auth-foot .link:hover{ text-decoration:underline }

/* small divider */
.divider{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  color:#6b7280; font-size:12.5px; margin:14px 0;
}
.divider:before,.divider:after{ content:""; height:1px; background:#e5e7eb }

/* flash (reuse your banner palette) */
.flash{ padding:10px 12px; border-radius:10px; border:1px solid #dbe5ee; background:#f8fafb; font-size:13px; margin:8px 0 }
.flash.error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d }
.flash.ok{ background:#f0fdf4; border-color:#bbf7d0; color:#166534 }