/* iamlookingfor.work — base: CSS variables, reset, site chrome (buttons/nav/footer), landing, create flow
   Linked in index.html in cascade order: base.css -> components.css -> templates.css.
   Keep that order; source order resolves equal-specificity ties. */

  :root{
    --ink:#17171c; --muted:#6b6b76; --line:#ebebf0; --bg:#ffffff; --soft:#f7f7fa;
    --accent:#5b4bff;
    --radius:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1280px;margin:0 auto;padding:0 22px}  /* matches the editor (form + preview) width */
  .screen{display:none;animation:fade .35s ease both}
  .screen.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  button{font:inherit;cursor:pointer;border:0}
  a{color:inherit}

  /* ---- clean, simple site chrome ---- */
  .nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:10px}
  .brand{font-weight:700;letter-spacing:-.02em;cursor:pointer}
  .brand .d{color:var(--accent)}
  .nav-right{display:flex;align-items:center;gap:10px}
  .btn{background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;transition:.12s}
  .btn:hover{opacity:.9}
  .btn.accent{background:var(--accent)}
  .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .btn.sm{padding:9px 15px;font-size:14px}
  .tiny{font-size:13px;color:var(--muted)}
  .vbanner{display:none;align-items:center;gap:10px;justify-content:center;background:#fff7e6;border-bottom:1px solid #ffe3b3;color:#8a5a00;font-size:14px;padding:10px 16px;flex-wrap:wrap}
  .vbanner button{background:#8a5a00;color:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
  .vbanner .vm{font-size:13px;color:#6b6b76}
  .cookie-bar{display:none;position:fixed;bottom:14px;left:14px;right:14px;max-width:540px;margin:0 auto;background:#16161d;color:#fff;font-size:13px;padding:11px 14px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.28);z-index:40;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
  .cookie-bar.show{display:flex}
  .cookie-bar a{color:#9fa7ff}
  .cookie-bar button{background:#2f2f3b;color:#fff;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
  .acct{display:flex;align-items:center;gap:8px}
  .acct .email{font-size:13px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- landing ---- */
  .hero{padding:70px 0 40px;max-width:680px;margin:0 auto;text-align:center}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:500}
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 1.8s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
  h1.big{font-size:clamp(40px,7vw,60px);line-height:1.04;letter-spacing:-.035em;margin:18px 0 0;font-weight:800}
  h1.big .a{color:var(--accent)}
  .sub{font-size:19px;color:var(--muted);margin:20px auto 0;max-width:480px}
  .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center;justify-content:center}
  .how{display:flex;gap:30px;margin-top:54px;flex-wrap:wrap}
  .how .step{flex:1;min-width:150px;text-align:center}
  .how .n{width:30px;height:30px;border-radius:8px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:14px;margin:0 auto}
  .how h3{font-size:16px;margin:12px 0 4px}
  .how p{margin:0;color:var(--muted);font-size:14px}

  /* ---- create ---- */
  .create-head{margin:48px 0 20px}
  .create-head h2{font-size:26px;letter-spacing:-.02em;margin:0 0 4px}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  textarea{width:100%;min-height:220px;resize:vertical;border:1px solid var(--line);border-radius:12px;
    padding:15px;font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--soft)}
  textarea:focus{outline:2px solid var(--accent);border-color:transparent;background:#fff}
  .create-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px;flex-wrap:wrap}
  .linkbtn{background:none;color:var(--accent);font-weight:600;padding:0;font-size:14px}
  .loading{display:none;align-items:center;gap:12px;color:var(--muted);justify-content:center;padding:18px}
  .spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  .err{display:none;background:#fff1f1;border:1px solid #ffd5d5;color:#b42323;padding:11px 13px;border-radius:10px;margin-top:12px;font-size:14px}