/* PeoplePulse Design System v1.3 — shared by all web portal pages */
:root {
  --ink: #1A2332;
  --ink-2: #334155;
  --muted: #6B7280;
  --orange: #E85D24;
  --orange-dark: #C44B18;
  --cream: #FDF8F3;
  --cream-2: #F5EDE1;
  --white: #FFFFFF;
  --red: #C62828;
  --green: #2E7D32;
  --border: #E6DCCF;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 2px 8px rgba(26,35,50,.06);
  --shadow-lg: 0 12px 32px rgba(26,35,50,.12);
  --maxw: 1180px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter','Segoe UI',Arial,sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-weight:800; color:var(--ink); line-height:1.2; letter-spacing:-0.02em; }
h1 { font-size:clamp(2rem, 5vw, 3.5rem); }
h2 { font-size:clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size:1.3rem; }
p  { color:var(--ink-2); font-size:1rem; }
a  { color:var(--orange); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }

/* ======= layout ======= */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.section { padding:clamp(3rem, 7vw, 5rem) 0; }
.section-dark { background:var(--ink); color:var(--white); }
.section-dark h1,.section-dark h2,.section-dark h3 { color:var(--white); }
.section-dark p { color:rgba(255,255,255,.8); }

/* ======= ribbon ======= */
.ribbon { background:var(--ink); color:var(--white); text-align:center; padding:.65rem 1rem; font-size:.88rem; font-weight:500; }
.ribbon strong { color:var(--orange); }

/* ======= nav ======= */
.nav { background:var(--cream); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-logo { display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--ink); font-size:1.15rem; }
.nav-logo-dot { width:28px; height:28px; border-radius:50%; background:var(--orange); display:grid; place-items:center; color:#fff; font-size:.8rem; }
.nav-logo small { display:block; font-size:.6rem; color:var(--muted); font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.nav-links { display:flex; gap:1.4rem; list-style:none; align-items:center; }
.nav-links a { color:var(--ink); font-weight:500; font-size:.93rem; text-decoration:none; }
.nav-links a:hover { color:var(--orange); }
.nav-cta { display:flex; gap:.6rem; }
@media (max-width: 860px) { .nav-links { display:none; } }

/* ======= buttons ======= */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:var(--radius); font-weight:700; font-size:.95rem; border:none; cursor:pointer; transition:all .2s; text-decoration:none; }
.btn-primary { background:var(--orange); color:var(--white); }
.btn-primary:hover { background:var(--orange-dark); transform:translateY(-1px); box-shadow:var(--shadow-lg); text-decoration:none; }
.btn-ghost { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--white); text-decoration:none; }
.btn-sm { padding:.55rem 1rem; font-size:.85rem; }
.btn-block { width:100%; }

/* ======= hero ======= */
.hero { padding:clamp(3rem, 8vw, 6rem) 0 clamp(2rem,5vw,4rem); text-align:center; }
.hero .eyebrow { color:var(--orange); font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.hero h1 { margin-bottom:1.25rem; max-width:900px; margin-inline:auto; text-align:center; }
.hero p.lead { color:var(--ink-2); font-size:1.15rem; max-width:680px; margin-inline:auto 0 2rem; margin-inline:auto; }
.hero .cta-row { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }

/* ======= cards ======= */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow); }
.card:hover { box-shadow:var(--shadow-lg); }
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

/* ======= pricing cards ======= */
.plan { background:var(--white); border:2px solid var(--border); border-radius:var(--radius-lg); padding:2rem 1.5rem; position:relative; display:flex; flex-direction:column; }
.plan.popular { border-color:var(--orange); box-shadow:0 8px 28px rgba(232,93,36,.15); }
.plan .badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--orange); color:#fff; padding:.25rem .75rem; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.plan h3 { margin-bottom:.25rem; }
.plan .price { font-size:2.5rem; font-weight:800; color:var(--ink); margin:1rem 0 .25rem; }
.plan .price small { font-size:.9rem; color:var(--muted); font-weight:500; }
.plan .per { color:var(--muted); font-size:.85rem; margin-bottom:1rem; }
.plan ul { list-style:none; margin:1rem 0; padding:0; flex:1; }
.plan li { padding:.4rem 0 .4rem 1.5rem; position:relative; color:var(--ink-2); font-size:.92rem; }
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.plan li.off { color:var(--muted); text-decoration:line-through; }
.plan li.off::before { content:"×"; color:var(--muted); }

/* ======= forms ======= */
.field { margin-bottom:1rem; }
.field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.field label .req { color:var(--red); }
.field input, .field select, .field textarea { width:100%; padding:.75rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:.95rem; background:var(--white); transition:border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--orange); }
.field .hint { font-size:.8rem; color:var(--muted); margin-top:.3rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 640px) { .field-row { grid-template-columns:1fr; } }

/* ======= wizard steps ======= */
.steps { display:flex; justify-content:center; gap:.5rem; margin-bottom:2rem; }
.step { flex:1; max-width:160px; text-align:center; position:relative; }
.step .dot { width:32px; height:32px; border-radius:50%; background:var(--border); color:var(--muted); display:grid; place-items:center; font-weight:700; margin:0 auto .4rem; transition:all .3s; }
.step.done .dot { background:var(--green); color:#fff; }
.step.active .dot { background:var(--orange); color:#fff; box-shadow:0 0 0 4px rgba(232,93,36,.2); }
.step .lbl { font-size:.8rem; color:var(--muted); font-weight:600; }
.step.active .lbl { color:var(--orange); }
.step::after { content:""; position:absolute; top:16px; left:calc(50% + 20px); right:calc(-50% + 20px); height:2px; background:var(--border); z-index:-1; }
.step:last-child::after { display:none; }
.step.done::after { background:var(--green); }

/* ======= toggle ======= */
.billing-toggle { display:inline-flex; background:var(--white); border:1px solid var(--border); border-radius:999px; padding:4px; margin:1.5rem auto; }
.billing-toggle button { border:none; background:transparent; padding:.5rem 1.25rem; border-radius:999px; font-weight:600; font-size:.88rem; cursor:pointer; color:var(--muted); transition:all .2s; }
.billing-toggle button.active { background:var(--ink); color:#fff; }
.billing-toggle .save { display:inline-block; margin-left:.4rem; background:var(--green); color:#fff; padding:2px 8px; border-radius:999px; font-size:.65rem; }

/* ======= stats ======= */
.stat { text-align:center; padding:1.5rem; }
.stat .n { font-size:2.4rem; font-weight:800; color:var(--orange); line-height:1; }
.stat .l { color:var(--muted); font-size:.88rem; margin-top:.5rem; }

/* ======= alert / penalty cards ======= */
.penalty { background:var(--ink); border-radius:var(--radius-lg); padding:1.5rem; color:#fff; border-left:4px solid var(--orange); }
.penalty .amt { font-size:1.8rem; font-weight:800; color:var(--orange); margin-bottom:.3rem; }
.penalty .what { font-size:.85rem; opacity:.8; }

/* ======= trust strip ======= */
.trust { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; align-items:center; padding:1.5rem 0; opacity:.75; }
.trust-item { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-2); font-weight:500; }
.trust-item::before { content:"●"; color:var(--green); }

/* ======= footer ======= */
.footer { background:var(--ink); color:rgba(255,255,255,.7); padding:3rem 0 1.5rem; margin-top:4rem; }
.footer a { color:rgba(255,255,255,.85); text-decoration:none; }
.footer a:hover { color:var(--orange); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns:1fr 1fr; } }
.footer h4 { color:#fff; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1rem; }
.footer ul { list-style:none; }
.footer li { padding:.3rem 0; font-size:.88rem; }
.footer-base { border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; text-align:center; font-size:.8rem; }

/* ======= tables ======= */
table.matrix { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
table.matrix th { background:var(--ink); color:#fff; padding:1rem; text-align:left; font-size:.85rem; font-weight:700; }
table.matrix td { padding:1rem; border-top:1px solid var(--border); font-size:.9rem; color:var(--ink-2); vertical-align:top; }
table.matrix tr:nth-child(even) td { background:var(--cream); }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:700; }
.pill-red { background:#fde8e8; color:var(--red); }
.pill-green { background:#e8f5e9; color:var(--green); }
.pill-orange { background:#fef0e5; color:var(--orange); }

/* ======= utils ======= */
.text-center { text-align:center; }
.text-muted { color:var(--muted); }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.hidden { display:none !important; }