/* ==========================================================================
   Resume Orbit — shared stylesheet for the static guide pages.

   The builder (index.html) carries its own copy of these rules inline, because
   it must paint before any stylesheet request resolves. The guide pages are
   plain documents with no such constraint, so they share this one file instead
   of each embedding a 290 KB duplicate.

   IF YOU CHANGE A TOKEN OR A HEADER/FOOTER RULE HERE, change the matching rule
   in the <style> block of index.html too, or the guides will drift away
   from the app they link into.
   ========================================================================== */

:root{
  --accent:#2563eb;
  --accent-soft:rgba(37,99,235,.12);
  --bg:#eef1f6; --bg-2:#ffffff; --bg-3:#f6f8fb;
  --line:#dde3ec; --txt:#16202e; --txt-2:#5a6879; --txt-3:#8c98a8;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.07);
  --shadow-lg:0 12px 48px rgba(16,24,40,.18);
  --ui:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Segoe UI",Tahoma,Arial,sans-serif;
  --topbar-h:58px;
}
html[data-theme="dark"]{
  --bg:#0e131b; --bg-2:#161d27; --bg-3:#1c2430;
  --line:#2a3441; --txt:#e7edf5; --txt-2:#9fadbe; --txt-3:#75839a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 12px 48px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);font-family:var(--ui);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
}
html[lang="ur"] body{font-family:var(--ur);line-height:1.9}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:0 14px;height:var(--topbar-h);background:var(--bg-2);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.2px;
  white-space:nowrap;color:var(--txt);text-decoration:none}
.brand-mark{width:28px;height:28px;border-radius:8px;flex:none;background:var(--accent);
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;font-family:var(--ui)}
/* The orbit mark. Strokes use currentColor, which .brand-mark pins to #fff. */
.brand-mark svg{width:18px;height:18px;display:block}
.brand small{display:block;font-size:10px;font-weight:500;color:var(--txt-3);letter-spacing:.4px;
  text-transform:uppercase;font-family:var(--ui)}
.spacer{flex:1}
.tools{display:flex;align-items:center;gap:7px}
.ctl{height:36px;border:1px solid var(--line);background:var(--bg-3);color:var(--txt);border-radius:8px;
  padding:0 10px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;max-width:200px;
  text-decoration:none}
.ctl:hover{border-color:var(--accent)}
.icon-btn{width:36px;height:36px;padding:0;justify-content:center;font-size:15px;flex:none}
.btn-primary{height:36px;border:0;border-radius:8px;padding:0 14px;background:var(--accent);color:#fff;
  font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  text-decoration:none}
.btn-primary:hover{filter:brightness(1.07);color:#fff}

/* ---------------- page body ---------------- */
.site-main{flex:1;display:flex;flex-direction:column;min-width:0}
.landing{background:var(--bg-2);border-top:1px solid var(--line)}
.landing-inner{max-width:830px;margin:0 auto;padding:46px 20px 60px}
.landing h1,.landing .landing-title{font-size:30px;line-height:1.25;letter-spacing:-.5px;margin:0 0 14px;color:var(--txt)}
.landing h2{font-size:21px;line-height:1.32;letter-spacing:-.2px;margin:40px 0 10px;color:var(--txt)}
.landing h3{font-size:15.5px;line-height:1.4;margin:22px 0 6px;color:var(--txt)}
.landing p{margin:0 0 12px;color:var(--txt-2);font-size:15px;line-height:1.72}
.landing .lede{font-size:17px;line-height:1.65}
.landing ul,.landing ol{margin:0 0 12px;padding-inline-start:22px;color:var(--txt-2);font-size:15px;line-height:1.72}
.landing li{margin-bottom:6px}
.landing strong{color:var(--txt);font-weight:650}
.landing a{color:var(--accent)}
html[lang="ur"] .landing h1,html[lang="ur"] .landing .landing-title{font-size:27px;line-height:1.7}
html[lang="ur"] .landing h2{line-height:1.7}
html[lang="ur"] .landing p,html[lang="ur"] .landing ul,html[lang="ur"] .landing ol{line-height:2.05}

.landing a.landing-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;
  text-decoration:none;font-weight:600;font-size:14.5px;border-radius:9px;padding:11px 18px;margin:6px 0 4px}
.landing a.landing-cta:hover{filter:brightness(1.07);color:#fff}

.landing-note{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0}
.landing-note p:last-child{margin-bottom:0}
.landing-note h3:first-child{margin-top:0}

.steps{list-style:none;padding:0;margin:0 0 12px;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-inline-start:44px;margin-bottom:16px}
.steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:1px;width:28px;height:28px;
  border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;
  font-weight:700;font-size:13.5px;font-family:var(--ui)}
.steps h3{margin:0 0 4px}
.steps p{margin:0}

/* ---------------- hero ---------------- */
.hero{
  background:
    radial-gradient(900px 380px at 12% -20%, var(--accent-soft), transparent 62%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-bottom:1px solid var(--line);
}
.hero-inner{max-width:900px;margin:0 auto;padding:58px 20px 50px;text-align:center}
.hero h1,.hero .hero-title{
  font-size:40px;line-height:1.14;letter-spacing:-1px;font-weight:800;margin:0 0 16px;color:var(--txt);
}
html[lang="ur"] .hero h1,html[lang="ur"] .hero .hero-title{font-size:33px;line-height:1.62;letter-spacing:normal}
.hero-sub{font-size:18px;line-height:1.55;color:var(--txt-2);margin:0 auto 28px;max-width:660px}
html[lang="ur"] .hero-sub{line-height:2}
.hero a.hero-cta{
  display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;font-size:17px;border-radius:12px;padding:16px 32px;box-shadow:0 12px 28px var(--accent-soft);
}
.hero a.hero-cta:hover{filter:brightness(1.07);color:#fff}
.hero-free{display:block;margin-top:13px;font-size:13px;color:var(--txt-3)}

/* breadcrumb strip, directly under the top bar */
.crumb{max-width:900px;margin:0 auto;padding:14px 20px 0;font-size:12.5px;color:var(--txt-3)}
.crumb a{color:var(--txt-3);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline}
.crumb span{padding:0 7px}

/* ---------------- tables (used by the example / format pages) ---------------- */
.tbl-wrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:10px}
.landing table{border-collapse:collapse;width:100%;min-width:460px;font-size:14px}
.landing th,.landing td{
  text-align:start;padding:10px 13px;border-bottom:1px solid var(--line);
  color:var(--txt-2);line-height:1.6;vertical-align:top;
}
.landing th{background:var(--bg-3);color:var(--txt);font-weight:650;font-size:13px}
.landing tr:last-child td{border-bottom:0}

/* ---------------- worked examples ---------------- */
.example{
  border:1px solid var(--line);border-radius:12px;background:var(--bg-3);
  padding:16px 18px;margin:0 0 16px;
}
.example h3{margin-top:0}
.example p:last-child,.example ul:last-child{margin-bottom:0}
.ex-tag{
  display:inline-block;border-radius:99px;padding:2px 10px;margin-bottom:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.6;
}
html[lang="ur"] .ex-tag{text-transform:none;letter-spacing:normal;font-size:12px}
.tag-bad{background:#fef3f2;color:#912018;border:1px solid #fda29b}
.tag-good{background:#ecfdf3;color:#05603a;border:1px solid #a6f4c5}
html[data-theme="dark"] .tag-bad{background:#2d1717;color:#f7b4ae;border-color:#6d2b26}
html[data-theme="dark"] .tag-good{background:#0f2a1d;color:#8ce0b0;border-color:#245c3d}
.landing pre{
  background:var(--bg-3);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;overflow-x:auto;margin:0 0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.65;color:var(--txt-2);white-space:pre-wrap;
}
html[lang="ur"] .landing pre{font-family:var(--ur);font-size:14px;line-height:2;white-space:pre-wrap}

/* ---------------- accordions ---------------- */
.acc{border-bottom:1px solid var(--line)}
.landing .acc:first-of-type{border-top:1px solid var(--line)}
.acc>summary{
  list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
  font-size:15.5px;font-weight:650;color:var(--txt);line-height:1.45;
}
html[dir="rtl"] .acc>summary{padding:15px 0 15px 34px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{
  content:"";position:absolute;inset-inline-end:6px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:2px solid var(--txt-3);border-bottom:2px solid var(--txt-3);
  transform:rotate(45deg);transition:transform .18s;
}
.acc[open]>summary::after{transform:rotate(-135deg);margin-top:-3px}
.acc>summary:hover{color:var(--accent)}
.acc>summary:hover::after{border-color:var(--accent)}
.acc-body{padding:0 0 16px}
.acc-body>*:last-child{margin-bottom:0}
.landing .acc-body h3{margin-top:16px}
.landing .acc-body h3:first-child{margin-top:0}

/* ---------------- "read next" guide cards ---------------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 8px}
.guide-card{
  display:block;background:var(--bg-3);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;text-decoration:none;
}
.guide-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.landing .guide-card h3{margin:0 0 4px;font-size:14.5px;color:var(--accent)}
.landing .guide-card p{margin:0;font-size:13px;line-height:1.55;color:var(--txt-2)}

/* ---------------- final CTA band ---------------- */
.cta-band{
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border-radius:40px 40px 0 0;padding:70px 20px 76px;text-align:center;
}
.cta-inner{max-width:720px;margin:0 auto}
.cta-title{font-size:40px;line-height:1.16;letter-spacing:-1px;font-weight:800;margin:0 0 14px;color:var(--txt)}
.cta-accent{color:var(--accent)}
html[lang="ur"] .cta-title{font-size:31px;line-height:1.6;letter-spacing:normal}
.cta-sub{font-size:16.5px;line-height:1.6;color:var(--txt-2);margin:0 auto 30px;max-width:560px}
html[lang="ur"] .cta-sub{line-height:2}
.cta-band a.cta-pill{
  display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;
  text-decoration:none;font-weight:700;font-size:17px;border-radius:999px;padding:18px 46px;
  box-shadow:0 14px 30px var(--accent-soft);
}
.cta-band a.cta-pill:hover{filter:brightness(1.07);color:#fff}

/* ---------------- footer ---------------- */
.site-footer{background:#111a2b;color:#93a1b5;padding:34px 22px 28px;font-size:12px}
html[data-theme="dark"] .site-footer{background:#080d15}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:0 0 22px}
.foot-nav>*{
  background:none;border:0;padding:0 16px;color:#cbd6e4;text-decoration:none;line-height:1.25;
  font-size:11px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase;position:relative;
}
.foot-nav>*+*::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  height:12px;border-inline-start:1px solid rgba(255,255,255,.20);
}
.foot-nav>*:hover{color:#ffffff}
html[lang="ur"] .foot-nav>*{text-transform:none;letter-spacing:normal;font-size:12.5px}
.foot-base{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 20px;
  border-top:1px solid rgba(255,255,255,.10);padding-top:20px;
}
.foot-copy{justify-self:start;text-align:start;font-size:11.5px;color:#7d8ba0}
.foot-copy b{font-weight:600;color:#aebbcd}
.foot-contact{grid-column:2;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.foot-contact a{color:#cbd6e4;text-decoration:none;font-size:12.5px;font-weight:650}
.foot-contact a:hover{color:#ffffff;text-decoration:underline}
.foot-reply{font-size:11px;color:#7d8ba0}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  :root{--topbar-h:auto}
  .topbar{flex-wrap:wrap;padding:9px 12px;height:auto;gap:8px}
}
@media (max-width:640px){
  .foot-nav{flex-direction:column;gap:13px;margin-bottom:20px}
  .foot-nav>*{padding:0}
  .foot-nav>*+*::before{display:none}
  .foot-base{grid-template-columns:1fr;justify-items:center;gap:14px}
  .foot-copy{justify-self:center;text-align:center}
  .foot-contact{grid-column:1}
  .cta-band{padding:48px 16px 54px;border-radius:26px 26px 0 0}
  .cta-title{font-size:28px;letter-spacing:-.5px}
  html[lang="ur"] .cta-title{font-size:24px}
  .cta-sub{font-size:15px;margin-bottom:24px}
  .cta-band a.cta-pill{font-size:16px;padding:16px 30px;width:100%;max-width:330px}
}
@media (max-width:560px){
  .brand small{display:none}
  .landing-inner{padding:34px 16px 46px}
  .landing h1,.landing .landing-title{font-size:25px}
  .landing h2{font-size:19px}
  .hero-inner{padding:40px 16px 38px}
  .hero h1,.hero .hero-title{font-size:29px;letter-spacing:-.6px}
  html[lang="ur"] .hero h1,html[lang="ur"] .hero .hero-title{font-size:25px}
  .hero-sub{font-size:15.5px;margin-bottom:22px}
  .hero a.hero-cta{font-size:15.5px;padding:14px 24px}
  .ctl,.btn-primary,.icon-btn{height:34px}
}