/* WorkLess — Shared Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}

:root{
  --bg:#f7f4ef;--bg-card:#ffffff;--bg-raised:#f0ece4;
  --ink:#1a1814;--ink-muted:#7a756e;--ink-faint:#b0aa9f;
  --border:rgba(26,24,20,0.1);--border-mid:rgba(26,24,20,0.18);
  --purple:#6c5ce7;--purple-lt:#eeeafd;--purple-dk:#4a3db5;
  --teal:#00b894;--teal-lt:#e0f7f2;
  --amber:#f0a500;--amber-lt:#fef3d6;
  --red:#e05252;--red-lt:#fdeaea;
  --green:#27ae60;--green-lt:#e8f8ef;
  --font-serif:'DM Serif Display',Georgia,serif;
  --font-sans:'DM Sans',system-ui,sans-serif;
  --radius-sm:0.375rem;--radius-md:0.625rem;--radius-lg:1rem;--radius-xl:1.5rem;
  --shadow-sm:0 1px 4px rgba(26,24,20,0.06);
  --shadow-md:0 4px 20px rgba(26,24,20,0.08);
  --shadow-lg:0 12px 40px rgba(26,24,20,0.1);
  --nav-h:68px;
}

[data-theme="dark"]{
  --bg:#13120f;--bg-card:#1e1c18;--bg-raised:#252320;
  --ink:#f0ece4;--ink-muted:#9a9488;--ink-faint:#5a554e;
  --border:rgba(240,236,228,0.08);--border-mid:rgba(240,236,228,0.14);
}

body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.6;min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.1;letter-spacing:-0.025em;color:var(--ink)}
h1{font-size:clamp(2.5rem,6vw,5rem)}
h2{font-size:clamp(1.8rem,3.5vw,3rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
h4{font-size:1.1rem;font-family:var(--font-sans);font-weight:500;letter-spacing:0}
p{color:var(--ink-muted);line-height:1.7}

.serif{font-family:var(--font-serif)}.italic{font-style:italic}
.accent{color:var(--purple)}.muted{color:var(--ink-muted)}.faint{color:var(--ink-faint)}
.small{font-size:0.85rem}.mono{font-family:'Courier New',monospace;font-size:0.9em}

.container{max-width:1100px;margin:0 auto;padding:0 2rem}
.container-sm{max-width:720px;margin:0 auto;padding:0 2rem}
.section{padding:5rem 0}.section-sm{padding:3rem 0}

.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center}
.nav-inner{width:100%;max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo{font-family:var(--font-serif);font-size:1.4rem;color:var(--ink);letter-spacing:-0.02em;text-decoration:none;flex-shrink:0}
.nav-logo span{color:var(--purple)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:0.9rem;color:var(--ink-muted);text-decoration:none;transition:color 0.15s}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}

.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.6rem 1.25rem;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:0.9rem;font-weight:500;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s,background 0.15s;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-primary:hover{box-shadow:0 4px 16px rgba(108,92,231,0.35)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--border-mid)}
.btn-secondary:hover{background:var(--bg-raised)}
.btn-ghost{background:transparent;color:var(--ink-muted);border-color:transparent}
.btn-ghost:hover{color:var(--ink);background:var(--bg-raised)}
.btn-lg{padding:0.85rem 2rem;font-size:1rem;border-radius:var(--radius-lg)}
.btn-sm{padding:0.4rem 0.9rem;font-size:0.8rem}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}
.card-raised{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-md);transition:transform 0.2s,box-shadow 0.2s}
.card-raised:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.badge{display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.65rem;border-radius:2rem;font-size:0.72rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase}
.badge-purple{background:var(--purple-lt);color:var(--purple)}
.badge-teal{background:var(--teal-lt);color:#008a6e}
.badge-amber{background:var(--amber-lt);color:#9a6800}
.badge-green{background:var(--green-lt);color:#1e8449}
.badge-red{background:var(--red-lt);color:var(--red)}

.eyebrow{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.75rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);margin-bottom:1.25rem}
.eyebrow::before,.eyebrow::after{content:'';display:block;width:1.5rem;height:1px;background:currentColor;opacity:0.5}

.form-group{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1.25rem}
label{font-size:0.85rem;font-weight:500;color:var(--ink)}
input[type="text"],input[type="email"],input[type="password"],select,textarea{width:100%;padding:0.7rem 1rem;border:1.5px solid var(--border-mid);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:0.95rem;background:var(--bg-card);color:var(--ink);outline:none;transition:border-color 0.2s,box-shadow 0.2s}
input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,92,231,0.12)}
input::placeholder{color:var(--ink-faint)}

.divider{border:none;border-top:1px solid var(--border);margin:3rem 0}

.feature-list{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.feature-list li{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.9rem;color:var(--ink-muted)}
.feature-list li .check{color:var(--teal);flex-shrink:0;font-size:0.9rem}
.feature-list li .cross{color:var(--ink-faint);flex-shrink:0;font-size:0.9rem}
.feature-list li .bullet{color:var(--purple);flex-shrink:0}

.accent-bar{height:3px;border-radius:2px;margin-bottom:1.25rem}
.accent-purple{background:var(--purple)}
.accent-teal{background:var(--teal)}
.accent-amber{background:var(--amber)}

.privacy-row{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--ink-muted)}
.privacy-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0}

.footer{border-top:1px solid var(--border);padding:2.5rem 0;margin-top:auto}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr auto auto auto;gap:3rem;align-items:start}
.footer-brand p{font-size:0.85rem;color:var(--ink-muted);margin-top:0.5rem;max-width:240px}
.footer-col h5{font-size:0.75rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.75rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-col a{font-size:0.875rem;color:var(--ink-muted);text-decoration:none;transition:color 0.15s}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{max-width:1100px;margin:1.5rem auto 0;padding:1.5rem 2rem 0;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:0.8rem;color:var(--ink-faint);margin:0}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.55s ease both}
.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}.delay-3{animation-delay:0.3s}
.delay-4{animation-delay:0.4s}.delay-5{animation-delay:0.5s}

.text-center{text-align:center}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}
.gap-sm{gap:0.5rem}.gap-md{gap:1rem}.gap-lg{gap:2rem}
.mt-sm{margin-top:0.75rem}.mt-md{margin-top:1.5rem}.mt-lg{margin-top:3rem}
.mb-sm{margin-bottom:0.75rem}.mb-md{margin-bottom:1.5rem}.mb-lg{margin-bottom:3rem}
.w-full{width:100%}.hidden{display:none}

@media(max-width:768px){.nav-links{display:none}.footer-inner{grid-template-columns:1fr 1fr}.container,.container-sm{padding:0 1.25rem}.section{padding:3.5rem 0}}
@media(max-width:480px){.footer-inner{grid-template-columns:1fr;gap:2rem}h1{font-size:2.2rem}}
