/* ============================================================
   CareerComms · Tools
   Main brand book palette. Near black, accent blue,
   Century Gothic / Lora / DM Mono.
   One file, linked by all six tool pages and the hub.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:        #0f1117;
  --bg2:       #161923;
  --bg3:       #1d2130;
  --paper:     #f5f6f8;
  --paper-dim: #c7ccd6;
  --muted:     #8a93a6;
  --blue:      #1a56db;
  --blue2:     #1447b8;
  --blue-lite: #7aa5f5;
  --hair:      rgba(245,246,248,.09);
  --hair-mid:  rgba(245,246,248,.16);
  --warm:      #e8b64c;

  --f-display: "Century Gothic","Questrial","URW Gothic","Avant Garde",
               "Poppins", system-ui, sans-serif;
  --f-body:    "Lora", Georgia, "Times New Roman", serif;
  --f-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--paper);
  font-family:var(--f-body); font-size:17px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(26,86,219,.15) 0%, transparent 62%),
    radial-gradient(ellipse 40% 30% at 88% 88%, rgba(26,86,219,.07) 0%, transparent 55%);
}

/* ---------- nav ---------- */
.nav{
  position:relative; z-index:3; display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:15px 30px; border-bottom:1px solid var(--hair);
  background:rgba(15,17,23,.92); backdrop-filter:blur(9px);
}
.nav .mark{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
}
.nav .mark b{ color:var(--paper); font-weight:500; }
.nav .set{ display:flex; gap:8px; flex-wrap:wrap; }
.nav a.pill{
  font-family:var(--f-mono); font-size:.61rem; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  border:1px solid var(--hair); padding:7px 14px; border-radius:999px;
  transition:color .2s, border-color .2s;
}
.nav a.pill:hover{ color:var(--paper); border-color:var(--hair-mid); }
.nav a.pill.solid{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nav a.pill.solid:hover{ background:var(--blue2); border-color:var(--blue2); }

/* ---------- shell ---------- */
.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:66px 30px 96px; }
.wide{ max-width:1040px; }

/* ---------- masthead ---------- */
.kick{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue-lite); margin-bottom:18px;
}
h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.15rem,5.4vw,3.15rem); line-height:1.06;
  letter-spacing:-.022em; margin-bottom:20px;
}
.standfirst{
  font-size:1.16rem; line-height:1.7; color:var(--paper-dim);
  max-width:60ch; margin-bottom:34px;
}

/* ---------- instrument strip ---------- */
.strip{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--hair);
  border-radius:12px; overflow:hidden; margin-bottom:38px; background:var(--bg2);
}
.strip div{ flex:1 1 150px; padding:16px 20px; border-right:1px solid var(--hair); }
.strip div:last-child{ border-right:none; }
.strip dt{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.strip dd{ font-family:var(--f-display); font-size:.97rem; font-weight:700; line-height:1.35; }

/* ---------- download ---------- */
.getit{
  background:var(--bg2); border:1px solid var(--hair-mid); border-left:3px solid var(--blue);
  border-radius:12px; padding:26px 28px; margin-bottom:52px;
}
.getit .row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.dl{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; padding:14px 26px; border-radius:8px;
  transition:background .2s, transform .12s;
}
.dl:hover{ background:var(--blue2); transform:translateY(-1px); }
.getit .fine{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); line-height:1.9; }

/* ---------- prose ---------- */
section{ margin-bottom:56px; }
h2{
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,3.2vw,1.92rem);
  letter-spacing:-.018em; line-height:1.16; margin-bottom:18px; padding-top:8px;
}
h3{
  font-family:var(--f-display); font-weight:700; font-size:1.14rem;
  letter-spacing:-.01em; margin-bottom:9px;
}
p{ margin-bottom:19px; }
p:last-child{ margin-bottom:0; }
a{ color:var(--blue-lite); text-decoration:none; border-bottom:1px solid rgba(122,165,245,.3); }
a:hover{ color:var(--paper); border-color:var(--paper); }
em.soft{ font-style:italic; color:var(--blue-lite); }
strong{ font-weight:700; color:#fff; }

/* ---------- the method ---------- */
.steps{ counter-reset:s; list-style:none; }
.steps > li{
  counter-increment:s; position:relative; padding:0 0 26px 52px;
  border-left:1px solid var(--hair); margin-left:14px;
}
.steps > li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps > li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:-15px; top:-2px;
  width:30px; height:30px; border-radius:50%; background:var(--bg3);
  border:1px solid var(--hair-mid); color:var(--blue-lite);
  font-family:var(--f-mono); font-size:.63rem; display:flex;
  align-items:center; justify-content:center;
}

/* ---------- boxes ---------- */
.box{ background:var(--bg2); border:1px solid var(--hair); border-radius:12px; padding:26px 28px; margin-bottom:22px; }
.box.warm{ border-left:3px solid var(--warm); }
.box.blue{ border-left:3px solid var(--blue); }
.label{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:12px;
}
.spec{ font-family:var(--f-mono); font-size:.86rem; line-height:1.95; color:var(--paper-dim); }
.spec b{ color:#fff; font-weight:500; }
.pull{
  font-family:var(--f-display); font-weight:700; font-size:1.32rem; line-height:1.4;
  letter-spacing:-.015em; border-left:2px solid var(--blue); padding:2px 0 2px 22px;
  margin:30px 0; color:#fff;
}

/* ---------- two lanes ---------- */
.lanes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.lane{ background:var(--bg2); border:1px solid var(--hair); border-radius:12px; padding:26px 26px 24px; }
.lane h3{ margin-bottom:11px; }
.lane p{ font-size:.96rem; line-height:1.72; color:var(--paper-dim); }

/* ---------- the set ---------- */
.set-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.tile{
  display:block; text-decoration:none; color:inherit; border:1px solid var(--hair);
  border-radius:12px; padding:22px 22px 20px; background:var(--bg2);
  transition:border-color .2s, transform .15s;
}
.tile:hover{ border-color:rgba(26,86,219,.6); transform:translateY(-2px); }
.tile .t{ font-family:var(--f-display); font-weight:700; font-size:1.03rem; line-height:1.3; margin-bottom:8px; display:block; }
.tile .d{ font-size:.88rem; line-height:1.62; color:var(--muted); }
.tile.here{ border-color:var(--hair-mid); opacity:.5; pointer-events:none; }

/* ---------- the ask ---------- */
.ask{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:34px 0; margin-bottom:52px; }
.ask p{ font-style:italic; color:var(--blue-lite); margin-bottom:18px; }
.ask form{ display:flex; gap:10px; flex-wrap:wrap; max-width:480px; }
.ask input[type=email]{
  flex:1 1 220px; background:var(--bg2); border:1px solid var(--hair-mid); border-radius:8px;
  padding:13px 15px; color:var(--paper); font-family:var(--f-mono); font-size:.86rem; outline:none;
}
.ask input[type=email]:focus{ border-color:rgba(26,86,219,.7); }
.ask button{
  background:transparent; color:var(--blue-lite); border:1px solid var(--blue);
  border-radius:8px; padding:13px 22px; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.11em; text-transform:uppercase; cursor:pointer;
  transition:background .2s, color .2s;
}
.ask button:hover{ background:var(--blue); color:#fff; }
.ask .fine{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-top:14px; font-style:normal; }

/* ---------- footer ---------- */
footer{
  position:relative; z-index:1; border-top:1px solid var(--hair);
  max-width:760px; margin:0 auto; padding:30px 30px 60px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); line-height:2.2;
}
footer a{ color:var(--muted); border:none; }
footer a:hover{ color:var(--paper); }

@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:44px 22px 70px; }
  .strip div{ flex:1 1 100%; border-right:none; border-bottom:1px solid var(--hair); }
  .strip div:last-child{ border-bottom:none; }
  .getit{ padding:22px 20px; }
  .getit .row{ gap:14px; }
  .dl{ width:100%; text-align:center; }
}