/* =========================================================================
   ResumeForge AI — clean "sky" identity
   Palette:  white #ffffff  mist #f2f7fc  sky #2f9fe6  sky-deep #1877c0
             ink #14283d (text)  line #d7e3f0  signal #1a9d78 (success)
   Type:     display -> "Space Grotesk"; body -> "Inter"; mono -> "IBM Plex Mono"
   Goal:     high contrast, large tap targets, comfortable for all ages.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --white:   #ffffff;
  --mist:    #f2f7fc;
  --mist-2:  #e7f1fb;
  --sky:     #2f9fe6;
  --sky-deep:#1877c0;
  --sky-soft:#dbeefb;
  --ink:     #14283d;
  --ink-2:   #3d5069;
  --body:    #33445a;
  --line:    #d7e3f0;
  --signal:  #1a9d78;
  --danger:  #d84a3b;
  --muted:   #6b7c92;
  --radius:  12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--mist);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ---- */
h1,h2,h3 { font-family:'Space Grotesk', sans-serif; font-weight:700; line-height:1.15; margin:0; color:var(--ink); }
.mono { font-family:'IBM Plex Mono', monospace; }
.eyebrow {
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--sky-deep); font-weight:500;
}

a { color:var(--sky-deep); text-decoration:none; font-weight:500; }
a:hover { text-decoration:underline; }

/* ---- Layout ---- */
.container { max-width:1160px; margin:0 auto; padding:0 20px; }

/* ---- Top nav ---- */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40; backdrop-filter:blur(8px);
  background:rgba(255,255,255,.9);
}
.brand { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:19px; color:var(--ink); }
.brand .mark {
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--sky),var(--sky-deep));
  color:#fff; font-weight:700; font-family:'IBM Plex Mono';
}
.nav .right { display:flex; align-items:center; gap:14px; font-size:15px; }
.nav .right a { color:var(--body); }
.pill {
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:5px 11px; border-radius:20px; border:1px solid var(--line); color:var(--muted); background:var(--white);
}
.pill.tier-professional { color:var(--sky-deep); border-color:var(--sky); background:var(--sky-soft); }
.pill.tier-pro_max { color:var(--signal); border-color:var(--signal); background:#e4f6f0; }

/* ---- Buttons ---- */
.btn {
  font-family:'Space Grotesk'; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; transition:.15s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary { background:var(--sky); color:#fff; box-shadow:0 2px 10px rgba(47,159,230,.28); }
.btn-primary:hover { background:var(--sky-deep); box-shadow:0 4px 16px rgba(24,119,192,.32); }
.btn-ghost { background:var(--white); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--sky); color:var(--sky-deep); }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn-sm { padding:9px 15px; font-size:14px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible { outline:3px solid var(--sky-soft); outline-offset:2px; }

/* ---- Cards / panels ---- */
.panel {
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:0 1px 3px rgba(20,40,61,.04);
}
.panel + .panel { margin-top:16px; }

/* ---- Hero ---- */
.hero { padding:76px 0 48px; position:relative; text-align:center; }
.hero .eyebrow { display:block; }
.hero h1 { font-size:clamp(36px, 6vw, 62px); letter-spacing:-1px; }
.hero .accent-word { color:var(--sky-deep); }
.hero p.lead { font-size:19px; color:var(--body); max-width:600px; margin:20px auto 30px; }
.hero .cta-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero .blueprint-tag {
  font-family:'IBM Plex Mono'; font-size:13px; color:var(--muted);
  margin-top:30px;
}

/* ---- Tier grid ---- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px; }
.tier {
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:0 1px 3px rgba(20,40,61,.04);
}
.tier.featured { border-color:var(--sky); border-width:2px; box-shadow:0 8px 28px rgba(47,159,230,.16); }
.tier.featured::before {
  content:'MOST POPULAR'; position:absolute; top:16px; right:-32px; transform:rotate(45deg);
  background:var(--sky); color:#fff; font-family:'IBM Plex Mono'; font-size:9px;
  letter-spacing:1px; padding:4px 42px;
}
.tier .t-name { font-family:'Space Grotesk'; font-weight:700; font-size:21px; }
.tier .t-price { font-size:36px; font-family:'Space Grotesk'; font-weight:700; margin:10px 0 2px; color:var(--ink); }
.tier .t-price small { font-size:15px; color:var(--muted); font-weight:500; }
.tier ul { list-style:none; padding:0; margin:18px 0 22px; flex:1; }
.tier li { font-size:15px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--body); }
.tier li::before { content:'\2713  '; color:var(--sky); font-weight:700; }
.tier li.off { color:var(--muted); }
.tier li.off::before { content:'\2013  '; color:var(--muted); }

/* ---- Forms ---- */
label.field { display:block; margin:16px 0 6px; font-size:14px; color:var(--ink); font-weight:600; }
input[type=text], input[type=email], input[type=url], textarea, select {
  width:100%; background:var(--white); border:1.5px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:'Inter'; font-size:15px; padding:12px 13px; transition:.15s;
}
input::placeholder, textarea::placeholder { color:#93a2b5; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft); }
textarea { resize:vertical; min-height:110px; }
.otp-input {
  letter-spacing:14px; font-family:'IBM Plex Mono'; font-size:26px; text-align:center;
}
.hint { font-size:13px; color:var(--muted); margin-top:6px; }

/* ---- Modal ---- */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(20,40,61,.42); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:60; padding:20px;
}
.modal-backdrop.show { display:flex; }
.modal {
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:30px; width:100%; max-width:440px; animation:pop .18s ease; box-shadow:0 20px 60px rgba(20,40,61,.25);
}
@keyframes pop { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
.modal h3 { font-size:23px; margin-bottom:4px; }
.modal .close { float:right; cursor:pointer; color:var(--muted); font-size:24px; line-height:1; }

/* ---- Builder layout ---- */
.builder { display:grid; grid-template-columns:340px 1fr; gap:22px; padding:26px 0; align-items:start; }
.builder .sidebar { position:sticky; top:82px; }
.section-block { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.section-block:first-child { border-top:0; margin-top:0; padding-top:0; }
.row-flex { display:flex; gap:8px; }
.row-flex > * { flex:1; }
.chip {
  display:inline-flex; align-items:center; gap:6px; background:var(--sky-soft);
  border:1px solid var(--sky); border-radius:20px; padding:6px 12px; font-size:14px; margin:3px; color:var(--sky-deep);
}
.chip button { background:none; border:0; color:var(--sky-deep); cursor:pointer; font-size:15px; }

/* ---- Guest export banner ---- */
.export-note {
  display:flex; align-items:center; gap:10px; background:var(--sky-soft);
  border:1px solid var(--sky); border-radius:10px; padding:12px 14px; margin-top:14px;
  font-size:14px; color:var(--sky-deep);
}
.export-note b { color:var(--ink); }

/* ---- ATS score dial ---- */
.ats { display:flex; align-items:center; gap:18px; }
.dial {
  --v:0; width:88px; height:88px; border-radius:50%; flex:none;
  background:conic-gradient(var(--signal) calc(var(--v)*1%), var(--line) 0);
  display:grid; place-items:center; position:relative;
}
.dial::before { content:''; position:absolute; inset:8px; border-radius:50%; background:var(--white); }
.dial span { position:relative; font-family:'Space Grotesk'; font-weight:700; font-size:26px; color:var(--ink); }
.kw { font-family:'IBM Plex Mono'; font-size:13px; padding:4px 9px; border-radius:6px; margin:2px; display:inline-block; }
.kw.match { background:#e4f6f0; color:var(--signal); }
.kw.miss  { background:#fbe6e3; color:var(--danger); }

/* ---- Preview ---- */
.preview-doc {
  background:#fff; color:#1a1a1a; border-radius:8px; padding:34px 40px;
  font-family:Georgia, serif; box-shadow:0 8px 30px rgba(20,40,61,.12); border:1px solid var(--line);
  position:relative;
}
.preview-doc.guarded::after {
  content:'PREVIEW'; position:absolute; inset:0; pointer-events:none;
  display:grid; place-items:center; font-family:'Space Grotesk';
  font-size:64px; font-weight:700; color:rgba(47,159,230,.07);
  transform:rotate(-24deg); letter-spacing:8px; z-index:1;
}
.preview-doc h1 { font-family:Georgia, serif; font-size:24px; }
.preview-doc .p-role { font-style:italic; color:#444; font-size:14px; }
.preview-doc .p-meta { font-size:12px; color:#333; margin-top:2px; }
.preview-doc hr { border:0; border-top:2px solid #1a1a1a; margin:12px 0; }
.preview-doc h2 { font-family:Georgia, serif; font-size:13px; text-transform:uppercase;
  letter-spacing:1.5px; border-bottom:1px solid #bbb; margin:16px 0 6px; }
.preview-doc .p-item { margin-bottom:8px; }
.preview-doc .p-top { display:flex; justify-content:space-between; font-size:13px; font-weight:bold; }
.preview-doc ul { margin:3px 0; padding-left:18px; }
.preview-doc li { font-size:12.5px; }

/* blur overlay when tab loses focus (deters screenshots of finished doc) */
.blur-shield {
  position:fixed; inset:0; background:rgba(242,247,252,.86); backdrop-filter:blur(14px);
  z-index:110; display:none; align-items:center; justify-content:center; text-align:center; padding:24px;
}
.blur-shield.show { display:flex; }
.blur-shield .msg { max-width:360px; }
.blur-shield h3 { font-size:22px; margin-bottom:8px; }
.blur-shield p { color:var(--body); }

/* ---- No-select region ---- */
.noselect {
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.noselect input, .noselect textarea, .noselect select {
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
}

/* ---- Toast ---- */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--sky);
  border-radius:10px; padding:13px 20px; font-size:15px; opacity:0; pointer-events:none;
  transition:.25s; z-index:120; max-width:90vw; box-shadow:0 8px 28px rgba(20,40,61,.18); color:var(--ink);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok { border-left-color:var(--signal); }
.toast.err { border-left-color:var(--danger); }

/* ---- Utility ---- */
.muted { color:var(--muted); }
.center { text-align:center; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.hide{display:none !important;}
footer.site { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:14px; margin-top:40px; background:var(--white); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .tiers { grid-template-columns:1fr; }
  .builder { grid-template-columns:1fr; }
  .builder .sidebar { position:static; }
}
@media (max-width: 560px) {
  .hero { padding:52px 0 34px; }
  .nav .right .hide-sm { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}