/* ═══════════════════════════════════════════════════════════════
   WorkSmart4Life — "Midnight & Chartreuse" palette
   Midnight and chartreuse. Deliberately NOT wellness-pastel:
   this brand reads as performance, craft and edge.
   Distinct from: SportSmart navy/gold · BelieveWell teal/amber
                  TravelWell indigo/clay · ImagineArts lavender
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ws-graphite:#23294D;   /* primary — midnight */
  --ws-steel:#343C6B;      /* mid — indigo */
  --ws-signal:#C9D93B;     /* accent — chartreuse */
  --ws-signal-dk:#A3B520;  /* hover */
  --ws-signal-lt:#DCE86F;  /* accent on midnight */
  --ws-ember:#FF7A5C;      /* emphasis */
  --ws-chalk:#F8F9FB;      /* paper */
  --ws-mist:#EBEDF5;       /* tint */
  --ws-line:#DADDEA;
  --ws-ink:#1E2233;        /* body text stays dark for readability */
  --ws-ink-soft:#5C6B76;
  --ws-white:#FFFFFF;
  --ws-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ws-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}

/* ⛔ CONTRAST RULE — chartreuse #C9D93B is an ACCENT, never body/label text on
   a light background: it fails contrast badly. On paper, text uses --ws-ink or
   --ws-graphite. Chartreuse is allowed as: a FILL behind dark text (buttons,
   step numbers), a BORDER, or TEXT only on the midnight bands (use the lighter
   --ws-signal-lt there). Check this before adding any new component. */

*{box-sizing:border-box}
/* the off-canvas slide-out sits at translateX(102%) — without this it
   creates a horizontal scrollbar on narrow screens */
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:var(--ws-sans);color:var(--ws-ink);background:var(--ws-chalk);
     line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ws-serif);line-height:1.18;margin:0 0 .5em}
a{color:inherit}
img,svg{max-width:100%}

/* ── Header ─────────────────────────────────────────────── */
.ws-header{position:sticky;top:0;z-index:60;background:rgba(35,41,77,.97);
           backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.ws-header-inner{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;
                 align-items:center;justify-content:space-between;gap:18px}
.ws-logo{font-family:var(--ws-serif);font-size:1.32rem;color:#fff;text-decoration:none;letter-spacing:.2px;white-space:nowrap}
.ws-logo span{color:var(--ws-signal-lt)}
.ws-nav{display:flex;align-items:center;gap:20px}
.ws-nav a{color:#E0E9F0;text-decoration:none;font-size:.88rem;white-space:nowrap}
.ws-nav a:hover{color:#fff}
.ws-nav-cta{background:var(--ws-signal);color:#1E2233 !important;padding:8px 16px;border-radius:6px;
            font-weight:650;font-size:.86rem !important}
.ws-nav-cta:hover{background:var(--ws-signal-dk);color:#1E2233 !important}
.ws-burger{background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:2px 4px;line-height:1}
@media(max-width:980px){.ws-nav-mid{display:none}}
@media(max-width:640px){.ws-nav a:not(.ws-nav-cta){display:none}}

/* ── Slide-out menu ─────────────────────────────────────── */
.ws-menu-overlay{position:fixed;inset:0;background:rgba(15,20,24,.55);opacity:0;pointer-events:none;
                 transition:opacity .25s;z-index:70}
.ws-menu-overlay.active{opacity:1;pointer-events:auto}
.ws-menu{position:fixed;top:0;right:0;height:100%;width:340px;max-width:88vw;background:var(--ws-graphite);
         transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:80;
         overflow-y:auto;padding:20px 22px 40px}
.ws-menu.active{transform:translateX(0)}
.ws-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ws-menu-head .t{font-family:var(--ws-serif);color:#fff;font-size:1.15rem}
.ws-menu-head .g{color:var(--ws-signal-lt)}
.ws-menu-close{background:none;border:0;color:#C9D8E2;font-size:1.7rem;cursor:pointer;line-height:1}
.ws-menu-group{margin-bottom:20px}
.ws-menu-title{color:var(--ws-signal-lt);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
               margin-bottom:8px;font-weight:700}
.ws-menu-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;
              color:#E0E9F0;text-decoration:none;font-size:.9rem}
.ws-menu-item:hover{background:rgba(255,255,255,.07);color:#fff}
.ws-menu-item .ic{width:22px;text-align:center;flex:none}
.ws-menu-note{color:#C2D2DE;font-size:.76rem;line-height:1.5;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}

/* ── Sections ───────────────────────────────────────────── */
.ws-section{max-width:1120px;margin:0 auto;padding:74px 22px}
.ws-center{text-align:center}
.ws-kicker{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
           font-weight:700;color:var(--ws-graphite);margin-bottom:12px}
.ws-section h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:30ch}
.ws-center h2{max-width:none}
.ws-section .sub{font-size:1.03rem;color:var(--ws-ink-soft);max-width:80ch;margin:0 0 26px}
.ws-tint{background:var(--ws-mist);border-top:1px solid var(--ws-line);border-bottom:1px solid var(--ws-line)}
.ws-band{background:var(--ws-graphite);color:#F0F5F3}
.ws-band h2,.ws-band h3{color:#fff}
.ws-band .sub{color:#D3E1EA}
.ws-band .ws-kicker{color:var(--ws-signal-lt)}

/* ── Hero ───────────────────────────────────────────────── */
.ws-hero{background:linear-gradient(165deg,var(--ws-graphite) 0%,var(--ws-steel) 100%);
         color:#fff;padding:88px 22px 0;text-align:center;position:relative;overflow:hidden}
.ws-hero h1{font-size:clamp(2rem,5.2vw,3.5rem);max-width:17ch;margin:0 auto .22em}
.ws-hero h1 em{color:var(--ws-signal-lt);font-style:italic}
.ws-hero .lead{max-width:60ch;margin:0 auto 30px;color:#DCE7EE;font-size:1.06rem}
.ws-cta{display:inline-block;background:var(--ws-signal);color:#1E2233;text-decoration:none;
        padding:13px 27px;border-radius:7px;font-weight:650;margin:0 6px 10px;font-size:.95rem}
.ws-cta:hover{background:var(--ws-signal-dk);color:#1E2233}
.ws-cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.ws-cta.ghost:hover{background:rgba(255,255,255,.1)}
.ws-hero-art{margin-top:44px;line-height:0}

/* ── Split ──────────────────────────────────────────────── */
.ws-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.ws-split{grid-template-columns:1fr}}
.ws-split .col{padding:28px;border-radius:11px;background:var(--ws-white);border:1px solid var(--ws-line)}
.ws-split .col h3{font-size:1.16rem;margin-bottom:.5em}
.ws-split .col p{margin:0;color:var(--ws-ink-soft);font-size:.96rem}
.ws-split .col.grey{background:#EDEFEC}
.ws-split .col.signal{border-color:var(--ws-signal);box-shadow:0 2px 16px rgba(201,217,59,.28)}
.ws-split .col.signal h3{color:var(--ws-graphite)}

/* ── Steps ──────────────────────────────────────────────── */
.ws-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
@media(max-width:900px){.ws-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ws-steps{grid-template-columns:1fr}}
.ws-step{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
         border-radius:11px;padding:22px}
.ws-step .num{width:34px;height:34px;border-radius:8px;background:var(--ws-signal);color:#1E2233;
              display:flex;align-items:center;justify-content:center;font-weight:750;margin-bottom:13px}
.ws-step h3{font-size:1.08rem;margin-bottom:.42em}
.ws-step p{margin:0;font-size:.9rem;color:#D3E1EA}

/* ── Feature / evidence ─────────────────────────────────── */
.ws-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
@media(max-width:880px){.ws-feat{grid-template-columns:1fr}}
.ws-feat .item{background:var(--ws-white);border:1px solid var(--ws-line);border-radius:11px;padding:26px}
.ws-feat .item h3{font-size:1.1rem}
.ws-feat .item p{font-size:.94rem;color:var(--ws-ink-soft);margin:0 0 .7em}
.ws-ref{font-size:.78rem !important;color:#8A98A2 !important;font-style:italic;
        border-top:1px solid var(--ws-line);padding-top:9px;margin:0 !important}

/* ── Card grid ──────────────────────────────────────────── */
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media(max-width:920px){.ws-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ws-grid{grid-template-columns:1fr}}
.ws-card{display:block;background:var(--ws-white);border:1px solid var(--ws-line);border-radius:11px;
         padding:24px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.ws-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(35,41,77,.16);border-color:var(--ws-graphite)}
.ws-card .eyebrow{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
                  font-weight:700;color:var(--ws-graphite);margin-bottom:9px}
.ws-card h3{font-size:1.1rem;margin-bottom:.45em}
.ws-card p{font-size:.92rem;color:var(--ws-ink-soft);margin:0 0 14px}
.ws-card .tag{display:inline-block;font-size:.73rem;font-weight:700;padding:4px 11px;border-radius:20px}
.ws-card .live{background:#EFF4D6;color:#59631A}
.ws-card .soon{background:#EDEFF7;color:#6A7093}

/* ── Chips ──────────────────────────────────────────────── */
.ws-dims{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.ws-dim{background:var(--ws-white);border:1px solid var(--ws-line);border-radius:20px;
        padding:7px 15px;font-size:.86rem;color:var(--ws-ink-soft)}

/* ── Ledger (gamification teaser) ───────────────────────── */
.ws-ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media(max-width:880px){.ws-ledger{grid-template-columns:1fr}}
.ws-lev{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
        border-radius:11px;padding:22px}
.ws-lev .rank{font-family:var(--ws-serif);color:var(--ws-signal-lt);font-size:1.22rem;margin-bottom:6px}
.ws-lev p{margin:0;font-size:.9rem;color:#D3E1EA}
.ws-privacy{margin-top:26px;background:rgba(220,232,111,.15);border:1px solid rgba(220,232,111,.45);
            border-radius:11px;padding:20px 24px}
.ws-privacy b{color:var(--ws-signal-lt)}
.ws-privacy p{margin:0;color:#E4EEF3;font-size:.94rem}

/* ── Pricing ────────────────────────────────────────────── */
.ws-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;text-align:left}
@media(max-width:880px){.ws-price-grid{grid-template-columns:1fr}}
.ws-price{background:var(--ws-white);border:1px solid var(--ws-line);border-radius:11px;padding:28px}
.ws-price.feature{border-color:var(--ws-signal);box-shadow:0 4px 22px rgba(201,217,59,.3)}
.ws-price h3{font-size:1.12rem}
.ws-price .amt{font-family:var(--ws-serif);font-size:1.9rem;color:var(--ws-ink);margin-bottom:.35em}
.ws-price .amt small{font-size:.8rem;color:var(--ws-ink-soft);font-family:var(--ws-sans)}
.ws-price p{font-size:.92rem;color:var(--ws-ink-soft);margin:0 0 16px}

/* ── Swatches ───────────────────────────────────────────── */
.ws-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-top:22px}
@media(max-width:880px){.ws-swatches{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.ws-swatches{grid-template-columns:repeat(2,1fr)}}
.ws-swatch .chip{height:64px;border-radius:9px;margin-bottom:9px}
.ws-swatch .meta b{display:block;font-size:.87rem}
.ws-swatch .meta span{font-size:.75rem;color:var(--ws-ink-soft)}

/* ── Footer ─────────────────────────────────────────────── */
.ws-footer{background:#161A33;color:#D3E1EA;padding:54px 22px 26px;font-size:.9rem;border-top:4px solid var(--ws-signal)}
.ws-footer-inner{max-width:1120px;margin:0 auto;display:grid;
                 grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.ws-footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ws-footer-inner{grid-template-columns:1fr}}
.ws-footer h4{color:#fff;font-size:.98rem;margin-bottom:.7em}
.ws-footer p{margin:0 0 14px;line-height:1.6}
.ws-footer ul{list-style:none;padding:0;margin:0}
.ws-footer li{margin-bottom:7px}
.ws-footer a{color:#D3E1EA;text-decoration:none}
.ws-footer a:hover{color:var(--ws-signal-lt)}
.ws-social .lbl{color:#fff;font-size:.8rem;margin-bottom:6px}
.ws-social a{display:inline-block;margin-right:13px}
.ws-copy{max-width:1120px;margin:34px auto 0;padding-top:18px;
         border-top:1px solid rgba(255,255,255,.11);font-size:.8rem;color:#C2D2DE}

/* ── Very small screens: keep the header on one line ────── */
@media(max-width:400px){
  .ws-header-inner{padding:10px 14px;gap:10px}
  .ws-logo{font-size:1.05rem}
  .ws-nav{gap:10px}
  .ws-nav-cta{padding:7px 11px;font-size:.78rem !important}
  .ws-section{padding:52px 16px}
}

/* ── Login link in nav ──────────────────────────────────── */
.ws-nav-login{opacity:.85}

/* ── Free / status pill ─────────────────────────────────── */
.ws-card .freetag{background:#EFF4D6;color:#59631A}

/* ── FAQ ────────────────────────────────────────────────── */
.ws-faq{margin-top:22px;max-width:820px}
.ws-q{background:var(--ws-white);border:1px solid var(--ws-line);border-radius:11px;
      padding:16px 20px;margin-bottom:10px}
.ws-q summary{font-family:var(--ws-serif);font-size:1.04rem;cursor:pointer;color:var(--ws-graphite);
              list-style:none;position:relative;padding-right:26px}
.ws-q summary::-webkit-details-marker{display:none}
.ws-q summary::after{content:"+";position:absolute;right:2px;top:-2px;font-size:1.3rem;
                     color:var(--ws-graphite);font-family:var(--ws-sans)}
.ws-q[open] summary::after{content:"\2212"}
.ws-q p{margin:12px 0 0;color:var(--ws-ink-soft);font-size:.95rem}

/* ── Prose (legal / long-form) ──────────────────────────── */
.ws-prose{max-width:760px}
.ws-prose h2{font-size:1.2rem;margin-top:1.6em}
.ws-prose h2:first-child{margin-top:0}
.ws-prose p{color:var(--ws-ink-soft);margin:0}

/* ── Steps: allow 3-up as well as 4-up ──────────────────── */
.ws-steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.ws-steps.three{grid-template-columns:1fr}}
.ws-steps.light .ws-step{background:var(--ws-white);border:1px solid var(--ws-line)}
.ws-steps.light .ws-step h3{color:var(--ws-ink)}
.ws-steps.light .ws-step p{color:var(--ws-ink-soft)}

/* ── Long DOI links wrap on phones ─────────────────────── */
.ws-feat .item{min-width:0;overflow-wrap:anywhere}

/* Home 'why' section: text + guide panel (6 Oct 2026) */
.ws-why{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start}
.ws-why p{font-size:1.08rem;line-height:1.7}
.ws-why-panel{background:#fff;border:1px solid var(--ws-line);border-radius:14px;padding:24px 24px 10px}
.ws-why-panel h3{font-size:1.1rem;margin:0 0 14px}
.ws-why-panel a.item{display:block;text-decoration:none;color:inherit;padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--ws-line)}
.ws-why-panel a.item:last-child{border-bottom:0}
.ws-why-panel a.item b{display:block;color:var(--ws-graphite)}
.ws-why-panel a.item span{display:block;font-size:.93rem;color:var(--ws-ink-soft);line-height:1.5;margin-top:3px}
.ws-why-panel a.item:hover b{text-decoration:underline}
@media(max-width:880px){.ws-why{grid-template-columns:1fr;gap:26px}}