/* ==========================================================================
   PODFY – utility CSS (tiny, fast)
   Breakpoints: sm=640px, md=768px, lg=1024px
   ========================================================================== */

:root{
  /* Brand palette */
  --brand-primary:#1D3557; /* deep trust blue */
  --brand-accent:#06D6A0;  /* CTA green */
  --brand-warm:#FF9F1C;    /* focus/active highlight */

  /* Theme tokens */
  --bg:#FFFFFF;
  --surface:#F5F5F5;       /* panels/surfaces */
  --tint-50:#F0F4F9;       /* very light brand-blue tint for sections/hero */
  --ink:#0F172A;
  --muted:#475569;
  --line:#E2E8F0;

  /* Legacy slate scale (used by utilities) */
  --slate-50:#F8FAFC;
  --slate-100:#F1F5F9;
  --slate-200:#E2E8F0;
  --slate-300:#CBD5E1;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1F2937;
  --slate-900:#0F172A;

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --container-6xl:72rem;
}

/* Base */
*{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--slate-800);background:var(--bg)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a.underline{text-decoration:underline}
button{font:inherit}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
.focus\:fixed:focus{position:fixed}
.focus\:top-2:focus{top:.5rem}
.focus\:left-2:focus{left:.5rem}
.focus\:z-50:focus{z-index:50}
.focus\:bg-white:focus{background:#fff}
.focus\:border:focus{border:1px solid var(--slate-200)}
.focus\:px-3:focus{padding-left:.75rem;padding-right:.75rem}
.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}

/* Semantic helpers */
.text-ink{color:var(--ink)}
.text-muted{color:var(--muted)}
.text-brand{color:var(--brand-primary)}
.bg-surface{background:var(--surface)}
.bg-tint{background:var(--tint-50)}
.bg-hero{background:linear-gradient(180deg, var(--tint-50) 0%, #FFFFFF 60%)}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:.75rem}
.border-line{border-color:var(--line)}
/* Icon bullets (emoji-sized) */
.icon-list{list-style:none;margin:0;padding:0}
.icon-list li{display:flex;align-items:baseline;gap:.5rem;margin:0}
.icon-list .icon{
  width:1.1em;height:1.1em;flex:0 0 auto;display:inline-block;
  color:var(--brand-primary);vertical-align:-0.15em
}
/* keep strokes readable when scaled down */
.icon path,.icon rect,.icon circle{vector-effect:non-scaling-stroke}

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: light dark;
    --bg:#0B1220;
    --surface:#0F172A;
    --tint-50:#0E2237;
    --ink:#E5E7EB;
    --muted:#94A3B8;
    --line:#243140;

    /* remap slate scale for utilities in dark */
    --slate-50:#0B1220;
    --slate-100:#0F172A;
    --slate-200:#1F2937;
    --slate-300:#243140;
    --slate-600:#94A3B8;
    --slate-700:#CBD5E1;
    --slate-800:#E5E7EB;
    --slate-900:#F8FAFC;
  }
   
  .bg-hero{background:linear-gradient(180deg, var(--tint-50) 0%, var(--bg) 60%)}
  .bg-surface{background:var(--surface)}
  .bg-tint{background:var(--tint-50)}
  a.text-blue-600{color:#60A5FA}
  .brand-card{background:var(--surface);border:1px solid var(--line)}
  .border, .border-t, .border-b, .border-slate-100, .border-slate-200, .border-slate-300{border-color:var(--line)}
  .btn-outline{border:1px solid var(--line);background:transparent;color:var(--ink)}
  .btn-outline:hover{box-shadow:0 0 0 2px var(--line) inset}
   /* Icons in dark: keep brand blue for stroke, accent stays green */
  .bullet .icon{color:var(--slate-800)} /* light text color for strokes on dark bg */
  /* Headings: make brand headings light on dark */
  .text-brand{color:var(--slate-900)}
  /* Icons: white strokes on dark (accent stays green) */
  .icon-list .icon{color:var(--slate-900)}
  /* Forms & FAQ in dark (use higher specificity + !important to beat base rules below) */
  body input[type="text"], body input[type="email"], body textarea{
    background:var(--surface) !important; color:var(--ink) !important; border-color:var(--line) !important;
  }
  #faq details{background:var(--surface) !important; border-color:var(--line) !important;}
  #faq details summary{color:var(--ink)}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:.6rem;padding:.75rem 1.1rem;font-weight:600;
  transition:transform .05s ease, opacity .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--brand-accent);color:#fff}
.btn-accent:hover{opacity:.95}
.btn-outline{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-outline:hover{box-shadow:0 0 0 2px var(--line) inset}

/* Sticky mobile CTA bar */
.cta-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--bg);border-top:1px solid var(--line);padding:.75rem;
  display:none;gap:.5rem;box-shadow:0 -6px 20px rgba(0,0,0,.06)
}
@media (max-width:768px){.cta-bar{display:grid;grid-template-columns:1fr 1fr}}

/* Focus */
:focus-visible{outline:3px solid var(--brand-warm);outline-offset:2px}

/* Layout utilities */
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-6xl{max-width:var(--container-6xl)}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.pt-2{padding-top:.5rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mr-4{margin-right:1rem}
.mb-1{margin-bottom:.25rem}
.gap-3{gap:.75rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}

/* Display & flex */
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.grid{display:grid}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-self-end{justify-self:end}
.text-center{text-align:center}

/* Grid columns */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Typography */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1.1}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.tracking-tight{letter-spacing:-.01em}

/* Colors */
.text-slate-500{color:#64748B}
.text-slate-600{color:var(--slate-600)}
.text-slate-700{color:var(--slate-700)}
.text-slate-800{color:var(--slate-800)}
.text-slate-900{color:var(--slate-900)}
.text-white{color:#fff}
.text-blue-600{color:#2563EB}
.hover\:text-brand:hover{color:var(--brand-primary)}

.bg-white{background:#fff}
.bg-slate-50{background:var(--slate-50)}
.bg-brand-accent{background:var(--brand-accent)}
.hover\:bg-slate-50:hover{background:var(--slate-50)}
.hover\:bg-white:hover{background:#fff}
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-from,transparent), var(--tw-gradient-to,transparent))}
.from-slate-100{--tw-gradient-from:var(--slate-100)}
.to-slate-200{--tw-gradient-to:var(--slate-200)}

/* Borders */
.border{border:1px solid var(--slate-200)}
.border-t{border-top:1px solid var(--slate-100)}
.border-b{border-bottom:1px solid var(--slate-100)}
.border-slate-100{border:1px solid var(--slate-100)}
.border-slate-200{border:1px solid var(--slate-200)}
.border-slate-300{border:1px solid var(--slate-300)}

/* Radius & shadow */
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.shadow{box-shadow:0 4px 24px rgba(0,0,0,.08)}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* Interactive */
.hover\:opacity-95:hover{opacity:.95}

/* Size helpers */
.w-auto{width:auto}
.w-5{width:1.25rem}
.h-7{height:1.75rem}
.h-0.5{height:.125rem}

/* Stacks & lists */
.space-y-1 > :not([hidden]) ~ :not([hidden]){--_s:0.25rem;margin-top:var(--_s)}
.list-disc{list-style-type:disc}
.list-inside{list-style-position:inside}

/* Inputs (light default; dark overrides above) */
input[type="text"],input[type="email"],textarea{
  display:block;width:100%;
  border:1px solid var(--slate-300);
  border-radius:.5rem;padding:.5rem .75rem;background:#fff;color:var(--slate-800)
}
input[type="checkbox"]{width:1rem;height:1rem}
button[type="submit"], .btn{
  display:inline-block;border:0;cursor:pointer;
  border-radius:.5rem;padding:.5rem 1rem;
  background:var(--brand-accent);color:#fff;font-weight:500
}
button[disabled]{opacity:.6;cursor:not-allowed}

/* Header hamburger bars */
#menuBtn span{display:block;background:var(--slate-800)}

/* Links styled as links */
a.text-blue-600{color:#2563EB}
a.text-blue-600.underline{text-decoration:underline}

/* Tables */
table{border-collapse:collapse;width:100%}
th,td{padding:.625rem;border-bottom:1px solid var(--slate-100);text-align:left}

/* Badges */
.rounded.border{border:1px solid var(--slate-200);border-radius:.5rem}
.badge{display:inline-block;border:1px solid var(--slate-200);border-radius:999px;padding:.125rem .375rem;font-size:.75rem}

/* Position helpers */
.relative{position:relative}
.absolute{position:absolute}
.-inset-4{top:-1rem;right:-1rem;bottom:-1rem;left:-1rem}

/* Compact icon bullets (emoji-sized) */
.icon-list{ list-style:none; margin:0; padding:0; }
.icon-list li{ display:flex; align-items:baseline; gap:.5rem; }

/* Size icons relative to text so they behave like emojis */
.icon-list .icon{
  width:1.1em;               /* ~emoji size at current font-size */
  height:1.1em;
  flex:0 0 auto;
  color:var(--brand-primary); /* stroke inherits this */
  vertical-align:-0.15em;     /* nudge down like emoji */
}

/* If you used my earlier .bullet class, keep it working too */
.bullet{ display:flex; align-items:baseline; gap:.5rem; }
.bullet .icon{ width:1.1em; height:1.1em; flex:0 0 auto; vertical-align:-0.15em; }

/* Responsive */
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .md\:hidden{display:none}
  .md\:flex{display:flex}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:text-5xl{font-size:3rem;line-height:1.1}
}
@media (min-width:1024px){
  .lg\:py-20{padding-top:5rem;padding-bottom:5rem}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Page niceties */
header a:hover, footer a:hover{color:var(--brand-primary)}
details{background:#fff} /* dark-mode override above */
summary{cursor:pointer}