
:root{
  --yellow:#FACC15; /* amber-400 */
  --green:#16A34A;  /* green-600 */
  --red:#DC2626;    /* red-600 */
  --ink:#0f172a;    /* slate-900 */
  --muted:#475569;  /* slate-600 */
  --card:#ffffff;
  --bg:#fffef6;
}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);}
body{margin:0;background:var(--bg);line-height:1.6}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
header{position:sticky;top:0;background:linear-gradient(90deg,var(--yellow),#fff, var(--green));border-bottom:1px solid #eee;z-index:10}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--yellow),var(--green));box-shadow:0 2px 8px rgba(0,0,0,.15)}
nav a{margin-right:14px;text-decoration:none;color:var(--ink);font-weight:600}
nav a:hover{color:var(--green)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;margin-top:12px}
.card{background:var(--card);border:1px solid #eee;border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.card h2{margin-top:0}
label{font-weight:600;display:block;margin-top:10px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px}
button{border:none;background:linear-gradient(135deg,var(--green),#22c55e);color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.05)}
.subtle{color:var(--muted);font-size:.95rem}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.kpi .pill{border-radius:16px;padding:14px;background:#f8fafc;border:1px dashed #e2e8f0}
.kpi strong{display:block;font-size:1.1rem}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:.8rem}
.badge.yellow{background:rgba(250,204,21,.15);color:#a16207;border:1px solid rgba(250,204,21,.5)}
.badge.green{background:rgba(22,163,74,.15);color:#065f46;border:1px solid rgba(22,163,74,.5)}
.badge.red{background:rgba(220,38,38,.12);color:#7f1d1d;border:1px solid rgba(220,38,38,.4)}
.notice{padding:10px 12px;border-left:4px solid var(--yellow);background:#fffbeb;border-radius:10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
footer{margin-top:36px;border-top:1px solid #eee;background:#fff}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
.small{font-size:.9rem}
.breadcrumbs{font-size:.9rem;margin-bottom:12px}
.breadcrumbs a{text-decoration:none;color:var(--green)}
.breadcrumbs span{opacity:.6;margin:0 6px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-grid article{border:1px solid #eee;border-radius:16px;background:#fff;overflow:hidden}
.blog-grid img{width:100%;height:160px;object-fit:cover}
.meta{font-size:.85rem;color:var(--muted)}
.toc{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
/* Mobile-only */
@media (max-width: 640px){
  .hero{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  nav a{display:inline-block;margin:6px 8px 0 0}
  .wrap{padding:16px}
}

/* --- Hero Upgrade --- */
.hero .badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.hero .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hero .cta-primary{background:linear-gradient(135deg,var(--yellow),var(--green));color:#082c1b}
.hero .cta-secondary{background:#fff;border:2px solid var(--green);color:var(--green)}
.hero .highlight{background:linear-gradient(90deg, rgba(250,204,21,.25), rgba(34,197,94,.2));border:1px solid rgba(0,0,0,.05);padding:8px 10px;border-radius:10px;display:inline-block}
.hero-illustration{min-height:260px;border-radius:18px;background:
  radial-gradient(50% 50% at 20% 20%, rgba(250,204,21,.35) 0, rgba(250,204,21,0) 60%),
  radial-gradient(50% 50% at 80% 30%, rgba(34,197,94,.25) 0, rgba(34,197,94,0) 60%),
  radial-gradient(50% 50% at 50% 80%, rgba(220,38,38,.15) 0, rgba(220,38,38,0) 60%),
  linear-gradient(135deg,#fff, #f8fff2);
  border:1px solid #eef2e6;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.progress-wrap{height:10px;background:#fee2e2;border-radius:999px;margin-top:10px;position:relative;overflow:hidden}
#progress{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--yellow),var(--green));transition:width .4s}
/* Tool options row */
.options-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
@media (max-width:640px){ .options-grid{grid-template-columns:1fr 1fr} }
/* Schedule table */
.table{border-collapse:collapse;width:100%}
.table th,.table td{border-bottom:1px solid #eee;padding:8px 10px;text-align:left}
.small-note{font-size:.85rem;color:var(--muted)}

/* --- Hero input box refinements --- */
.intro-box{
  background: linear-gradient(180deg, rgba(250,204,21,.12), rgba(34,197,94,.10));
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.feature-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.feature-chips .chip{
  background:#fff; border:1px solid #e5e7eb; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.85rem;
}
.tip-note{font-size:.9rem;color:var(--muted);margin-top:6px}
.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.input-grid .full{grid-column:1 / -1}
@media (max-width: 640px){ .input-grid{grid-template-columns:1fr} }
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.clear-btn{background:#fff;border:2px solid var(--red);color:var(--red)}

/* --- Stack hero layout: main input box on top, results below --- */
.hero{display:block !important}
.hero .card{margin-bottom:18px}
.results-title{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.results-title .dot{width:10px;height:10px;border-radius:999px;background:var(--green)}
.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:12px}
.table{border-collapse:collapse;width:100%}
.table th{background:#f8fafc;font-weight:700}
.table th,.table td{border-bottom:1px solid #eee;padding:10px 12px;text-align:left;white-space:nowrap}
.print-hint{font-size:.9rem;color:var(--muted);margin-top:6px}

/* Extra spacing for rich sections */
.card h3{margin-top:14px}
.card ul{margin:0 0 10px 18px}
.card ol{margin:0 0 10px 18px}

/* Extra homepage richness v2 */
.grid .card ul{margin:0 0 10px 18px}
.grid .card ol{margin:0 0 10px 18px}
.grid .card h3{margin-top:10px}

/* Home v3 extras */
.card p + ul, .card p + ol{margin-top:6px}
.card ul li + li, .card ol li + li{margin-top:4px}

/* Long-form page polish */
.card h2 + p, .card h3 + p { margin-top: 6px; }
.card ul { margin-left: 18px; }
.card ul li + li { margin-top: 4px; }

/* Table polish for policy pages */
.table{border-collapse:collapse;width:100%}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:8px 10px;text-align:left}
.table th{background:#f8fafc;font-weight:700}

/* Mini ToC */
.mini-toc ul{margin:0 0 8px 18px}
.mini-toc ul li + li{margin-top:4px}
.mini-toc a{text-decoration:underline}

/* About/Contact v4 additions */
.table{border-collapse:collapse;width:100%}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:8px 10px;text-align:left}
.table th{background:#f8fafc;font-weight:700}

/* Blog grid cleanup */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
  align-items:stretch;
}
.blog-card{
  display:block;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e5e7eb;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.blog-card .thumb{
  position:relative;
  aspect-ratio:16/10;
  background:#f8fafc;
}
.blog-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.blog-card .meta{
  padding:14px 14px 16px;
}
.blog-card h3{
  margin:0 0 8px;
  font-size:1.05rem;
  line-height:1.3;
  color:#0f172a;
}
.blog-card .excerpt{
  margin:0;
  color:#475569;
  font-size:.9rem;
}

/* Unique-pass table polish */
.table{border-collapse:collapse;width:100%}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:8px 10px;text-align:left}
.table th{background:#f8fafc;font-weight:700}
pre{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:10px;overflow:auto}

/* pass10 small helpers */
pre{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:10px;overflow:auto}
.table{border-collapse:collapse;width:100%}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:8px 10px;text-align:left}
.table th{background:#f8fafc;font-weight:700}


/* brand logo sizing */
.brand-logo{height:24px;width:24px;margin-right:8px;vertical-align:middle;display:inline-block}
@media (min-width:1024px){.brand-logo{height:24px;width:24px}}


/* header brand logo sizing */
.brand-logo{height:20px;width:20px;margin-right:8px;vertical-align:middle;display:inline-block}
@media (min-width:768px){.brand-logo{height:22px;width:22px}}
@media (min-width:1024px){.brand-logo{height:24px;width:24px}}


/* --- header placeholder cleanup (safety net) --- */
.header-square, .logo-square, .brand-square, .logo-placeholder, .brand-placeholder, .brand-dot, .logo-dot { display:none !important; }
[class*="bg-green"][class*="w-"], [class*="bg-yellow"][class*="w-"], [class*="bg-lime"][class*="w-"] { display:none !important; }
[class*="bg-green"][class*="h-"], [class*="bg-yellow"][class*="h-"], [class*="bg-lime"][class*="h-"] { display:none !important; }
/* keep the logo tiny and aligned */
.brand-logo{height:20px;width:20px;margin-right:8px;vertical-align:middle;display:inline-block}
@media (min-width:768px){.brand-logo{height:22px;width:22px}}
@media (min-width:1024px){.brand-logo{height:24px;width:24px}}


/* Placeholder nuke */
.header-square, .logo-square, .brand-square, .logo-placeholder, .brand-placeholder, .brand-dot, .logo-dot{display:none!important}
[class*="bg-green"][class*="w-"],[class*="bg-yellow"][class*="w-"],[class*="bg-lime"][class*="w-"]{display:none!important}
[class*="bg-green"][class*="h-"],[class*="bg-yellow"][class*="h-"],[class*="bg-lime"][class*="h-"]{display:none!important}
/* Logo size */
.brand-logo{height:20px;width:20px;margin-right:8px;vertical-align:middle;display:inline-block}
@media (min-width:768px){.brand-logo{height:22px;width:22px}}
@media (min-width:1024px){.brand-logo{height:24px;width:24px}}


/* brand block reset */
.brand-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.brand-title{font-weight:700;line-height:1}
.brand-logo{height:22px;width:22px;display:inline-block;vertical-align:middle}
@media (min-width:1024px){.brand-logo{height:24px;width:24px}}

/* hide any stray utility squares */
.header-square,.logo-square,.brand-square,.logo-placeholder,.brand-placeholder,.brand-dot,.logo-dot{display:none!important}
[class*="bg-green"][class*="w-"],[class*="bg-yellow"][class*="w-"],[class*="bg-lime"][class*="w-"]{display:none!important}
[class*="bg-green"][class*="h-"],[class*="bg-yellow"][class*="h-"],[class*="bg-lime"][class*="h-"]{display:none!important}


/* === Restored header styles (lightweight) === */
.header-wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:12px 16px
}
.brand-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.brand-title{font-weight:700;line-height:1}
.brand-logo{height:22px;width:22px;display:inline-block;vertical-align:middle}
.main-nav{display:flex;gap:1rem;align-items:center}
.main-nav a{text-decoration:none;font-weight:600}
.nav-toggle{display:none}

/* Mobile: hamburger shows, nav collapses */
@media (max-width: 768px){
  .nav-toggle{display:block}
  .menu-btn{font-size:22px;cursor:pointer;user-select:none;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px}
  .main-nav{display:none;flex-direction:column;position:absolute;top:56px;right:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .menu-toggle:checked ~ .main-nav{display:flex}
}

/* Keep any previous square placeholders hidden if they linger */
.header-square,.logo-square,.brand-square,.logo-placeholder,.brand-placeholder,.brand-dot,.logo-dot{display:none!important}
