/* ===========================================================================
   Prospecting OS - Chirag Shah Coaching
   Direction A: ink and emerald. Locked 2026-07-25.
   Tokens must match prospecting-os_spec.md and the X-Ray design block in the
   starter zip. Do not introduce a colour that is not declared here.
   =========================================================================== */

/* Variable fonts, subset to Latin + the punctuation this site uses.
   1.3MB of source TTF down to 283KB. Both are SIL Open Font License.
   Georgia and Arial sit behind them, so nothing breaks if a file is missing. */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader.woff') format('woff');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter.woff') format('woff');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink:#1C3530;
  --ink-80:rgba(28,53,48,.82);
  --ink-60:rgba(28,53,48,.60);
  --ink-40:rgba(28,53,48,.40);
  --ink-12:rgba(28,53,48,.12);
  --emerald:#25CC89;
  --emerald-deep:#1FA772;   /* fills and hovers only, 2.61:1 on cream: never for text */
  --emerald-text:#115A3E;   /* text-safe green: 6.97:1 on cream, 8.22:1 on white */
  --cream:#EFECE6;
  --mint:#94EBC8;
  --highlight:#FDFF91;
  --white:#FFFFFF;
  --line:#E4E1D9;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --measure:68ch;

  --r:14px; --r-sm:9px; --r-pill:999px;
  --shadow:0 2px 0 var(--ink-12), 0 10px 26px rgba(28,53,48,.07);
  --gap:clamp(52px,7vw,92px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--emerald-text);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
/* Sticky masthead would otherwise swallow the top of every anchor target. */
:root{scroll-padding-top:110px}
section[id],.guide-body section{scroll-margin-top:110px}
.shell{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
section{padding:var(--gap) 0}
section+section{border-top:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;
  letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(38px,6.2vw,66px)}
h2{font-size:clamp(29px,4.2vw,44px);line-height:1.12}
h3{font-size:clamp(21px,2.4vw,27px);line-height:1.2}
h4{font-size:19px;line-height:1.25}
p{margin:0;max-width:var(--measure)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-80)}
.muted{color:var(--ink-60)}
.small{font-size:15.5px;line-height:1.55}
strong,b{font-weight:650}

.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald-text);margin:0 0 16px;display:block;
}
.eyebrow.plain{color:var(--ink-60)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:var(--measure)}

/* ---------- header / footer ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--cream);
  position:sticky;top:0;z-index:50}
.masthead .shell{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.brand .mark{width:30px;height:30px;flex:none}
.brand .txt{display:flex;flex-direction:column;line-height:1.15}
.brand .txt b{font-family:var(--serif);font-size:17px;font-weight:400;letter-spacing:-.01em}
.brand .txt i{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-80)}
.footlogo{height:26px;width:auto;margin-bottom:6px}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a{font-size:15.5px;font-weight:550;text-decoration:none;color:var(--ink-80);
  padding:11px 0;min-height:44px;display:flex;align-items:center;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--emerald)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* Mobile masthead: the nav wrapped to three rows and ate 145px of a 812px screen.
   Below 820px the brand stays put and the links become one compact scrollable row. */
@media(max-width:819px){
  .masthead .shell{min-height:56px;gap:0;flex-wrap:nowrap;
    flex-direction:column;align-items:stretch;padding-top:8px;padding-bottom:4px}
  .brand{min-height:38px}
  .brand .mark{width:26px;height:26px}
  .brand .txt b{font-size:15.5px}
  .brand .txt i{font-size:11px}
  .nav{gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;flex-wrap:nowrap;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:15.5px;white-space:nowrap;padding:11px 0;min-height:44px}
  :root{scroll-padding-top:104px}
  section[id],.guide-body section{scroll-margin-top:104px}
}

/* Desktop-required notice. Shown only where the user cannot finish the job. */
.deskonly{display:none}
@media(max-width:819px){
  .deskonly{display:flex;flex-direction:column;gap:12px;
    border:2px solid var(--ink);border-radius:var(--r);background:var(--highlight);
    padding:22px 20px;box-shadow:var(--shadow)}
  .deskonly h3{font-size:20px}
  .deskonly p{font-size:17px;max-width:none}
}

.sitefoot{border-top:1px solid var(--line);padding:38px 0 54px;font-size:15px;color:var(--ink-80)}
.sitefoot .shell{display:flex;flex-direction:column;gap:8px}
.sitefoot a{color:var(--ink);text-decoration:underline;
  display:inline-block;padding:6px 0;min-height:32px}
.sitefoot b{color:var(--ink-80);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;min-height:48px;
  font-family:var(--sans);font-size:16px;font-weight:650;
  text-decoration:none;cursor:pointer;
  background:var(--emerald);color:#0C221D;
  border:1.5px solid var(--ink);border-radius:var(--r-sm);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
/* Was background:none with a bottom border, which read as body text next to the
   heavy primary button. Secondary paths need to look like controls. */
.btn-quiet{
  display:inline-flex;align-items:center;min-height:48px;padding:15px 22px;
  font-size:16px;font-weight:600;text-decoration:none;
  background:var(--white);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-sm);
}
.btn-quiet:hover{background:var(--mint)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* The one button that must be unmissable. */
.btn-xl{
  padding:20px 40px;min-height:64px;font-size:20px;font-weight:750;
  letter-spacing:-.01em;box-shadow:4px 4px 0 var(--ink);
}
.btn-xl:hover{box-shadow:6px 6px 0 var(--ink)}

/* Hero gate: Start here dominates, the prerequisite sits second but is not quiet. */
.gate-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px}
.gate-note{
  margin:0;max-width:34ch;font-size:16.5px;line-height:1.45;color:var(--ink-80);
  border-left:4px solid var(--ink);padding-left:16px;
}
.gate-note b{color:var(--ink);font-weight:700}

/* ---------- pill / chip ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--white);border:1.5px solid var(--ink);
  font-size:15.5px;font-weight:600;width:fit-content;
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);flex:none}
.chip{
  display:inline-block;padding:6px 13px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--ink-12);
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-60);
}
.chip-row{display:flex;flex-wrap:wrap;gap:9px}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:680px){.cards.two,.cards.four{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:11px;
}
.card h3{font-size:22px}
.card p{font-size:17px;color:var(--ink-80);max-width:none}
a.card{text-decoration:none;transition:transform .12s ease}
a.card:hover{transform:translateY(-3px)}
a.card .more{margin-top:auto;padding-top:8px;font-size:15px;font-weight:650;
  color:var(--emerald-text)}

/* ---------- steps ----------
   Each step is its own card. Rows separated by hairlines blended into one grey
   wall and people lost their place. A card has edges you can see. */
.steps{display:flex;flex-direction:column;gap:18px;counter-reset:s}
.step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  align-items:start;padding:26px 26px 26px 22px;
  background:var(--card,var(--white));border:2px solid var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.step .n{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:24px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:22px;margin-bottom:8px}
.step p{font-size:17px;color:var(--ink-80)}
.step .stack{gap:13px}
@media(max-width:560px){
  .step{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .step .n{width:44px;height:44px;font-size:21px}
}

/* the one step that is genuinely the user's own work */
.step.homework{background:var(--mint)}

/* ---------- sticky position bar ---------- */
#where{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  transform:translateY(110%);transition:transform .22s ease;
  background:var(--ink);color:var(--cream);
  border-top:2px solid var(--ink);
}
#where.on{transform:translateY(0)}
#where .in{max-width:1080px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px}
#where b{font-weight:700}
#where .say{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#where code{font-family:var(--sans);font-weight:700;background:var(--emerald);
  color:#0C221D;padding:5px 11px;border-radius:6px;font-size:15px}
#where button{font:700 12px/1 var(--sans);cursor:pointer;background:transparent;
  color:var(--cream);border:1.5px solid var(--cream);border-radius:6px;
  padding:9px 12px;min-height:38px}
#where button:hover{background:var(--cream);color:var(--ink)}
@media(max-width:560px){
  #where .in{font-size:14px;gap:9px;padding:10px 16px}
  #where .say{margin-left:0;width:100%}
}
@media print{#where{display:none}}

/* ---------- inline answer, so nobody has to leave the page ---------- */
.ask{border:none;background:transparent;padding:0;margin-top:10px}
.ask summary{
  font-family:var(--sans);font-size:15.5px;font-weight:650;color:var(--emerald-text);
  padding:9px 0;min-height:40px;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ask summary::after{content:""}
.ask summary::before{content:"?";flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--emerald-text);color:var(--white);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.ask[open] summary{margin-bottom:2px}
.ask .body{padding:0 0 6px 29px;border-left:2px solid var(--mint);margin-left:9px}
.ask .body p{font-size:16px;color:var(--ink-80);max-width:60ch}

/* ---------- callouts ---------- */
.callout{
  border:1.5px solid var(--ink);border-radius:var(--r);padding:24px 26px;
  background:var(--white);display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow);
}
.callout h3{font-size:20px}
.callout p{font-size:17px;color:var(--ink-80);max-width:none}
.callout.soft{background:var(--mint);border-color:var(--ink)}
.callout.warn{background:var(--highlight);border-color:var(--ink)}
.callout.flat{box-shadow:none;background:transparent;border-style:dashed;
  border-color:var(--ink-40)}

/* ---------- copy block (never call it a prompt) ---------- */
.saythis{
  border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);max-width:var(--measure);
}
.saythis-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;background:var(--ink);color:var(--cream);
  font-size:12px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
}
.copybtn{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
  background:var(--emerald);color:#0C221D;border:1px solid var(--ink);
  padding:11px 16px;border-radius:5px;min-height:44px;
}
.copybtn:hover{background:var(--mint)}
.saythis code{
  display:block;padding:22px 18px;font-family:var(--sans);
  font-size:19px;font-weight:600;letter-spacing:-.005em;word-break:break-word;
}
.saythis .where{padding:0 18px 16px;font-size:15px;color:var(--ink-80)}

/* ---------- misc ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bands{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--ink);
  border-radius:var(--r);overflow:hidden;min-width:640px}
.band{flex:1;padding:16px 14px;text-align:center;border-right:1px solid var(--ink)}
.band:last-child{border-right:none}
.band b{display:block;font-size:15px}
.band span{font-size:12.5px;color:var(--ink-60);font-variant-numeric:tabular-nums}

table{border-collapse:collapse;width:100%;min-width:520px;font-size:16.5px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);
  font-weight:700}
td code{font-family:var(--sans);font-weight:650}

details{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--white);
  padding:0;box-shadow:var(--shadow)}
details+details{margin-top:14px}
summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--serif);font-size:21px;line-height:1.25;
  display:flex;gap:14px;align-items:flex-start;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-family:var(--sans);font-size:22px;
  color:var(--emerald-text);line-height:1;flex:none}
details[open] summary::after{content:"\2013"}
details .body{padding:0 24px 22px;display:flex;flex-direction:column;gap:12px}
details .body p{font-size:17px;color:var(--ink-80);max-width:none}

.placeholder{
  border:2px dashed var(--ink-40);border-radius:var(--r);background:var(--white);
  padding:44px 24px;text-align:center;color:var(--ink-60);font-size:14.5px;
}

/* ---------- guide sidebar ---------- */
.guide-wrap{display:grid;grid-template-columns:1fr;gap:34px;
  max-width:1080px;margin:0 auto;padding:0 22px}
/* Grid items default to min-width:auto, so the 520px min-width on tables inside
   .scroller propagated up and forced the whole guide to 542px on a 375px phone.
   Verified live 2026-07-26: track 520px -> 331px, page 542px -> 375px. */
.guide-body,.toc{min-width:0}
@media(min-width:1000px){
  .guide-wrap{grid-template-columns:250px 1fr;gap:56px;align-items:start}
  .toc{position:sticky;top:88px;max-height:calc(100vh - 120px);overflow-y:auto}
}
.toc{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--white);
  padding:20px;box-shadow:var(--shadow)}
.toc b{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;
  font-size:16px}
.toc a{text-decoration:none;color:var(--ink-80);display:block;padding:7px 0;min-height:32px}
.toc a:hover{color:var(--ink);text-decoration:underline}
.guide-body{display:flex;flex-direction:column;gap:var(--gap);padding-bottom:var(--gap)}
.guide-body section{padding:0;border-top:none}
.guide-body section+section{padding-top:var(--gap);border-top:1px solid var(--line)}

/* ---------- print ---------- */
@media print{
  :root{--gap:26px}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  .masthead,.toc,.copybtn,.btn,.btn-quiet,.btn-row,.noprint{display:none!important}
  .shell,.guide-wrap,.narrow{max-width:none;padding:0}
  .guide-wrap{display:block}
  .card,.callout,.saythis,details{border:1pt solid #000;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid}
  .step{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  details{border:none;padding:0}
  details .body{padding:0}
  summary::after{content:""}
  .saythis-head{background:#fff;color:#000;border-bottom:1pt solid #000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  section{padding:0}
}

/* X-Ray example label: was 12.5px at 60% opacity above a 64px numeral, so the
   eye read the number as real. Now it competes. */
.exlabel{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.03em;
  color:var(--ink);background:var(--highlight);border:2px solid var(--ink);
  border-radius:var(--r-sm);padding:10px 15px;display:inline-block;max-width:none}

/* The five bands must not lose Elite and Rainmaker off the side of a phone. */
@media(max-width:700px){
  .bands{min-width:0;flex-wrap:wrap}
  .band{flex:1 1 45%;border-right:none;border-bottom:1px solid var(--ink)}
  .band:nth-child(odd){border-right:1px solid var(--ink)}
  .band:last-child{flex-basis:100%;border-bottom:none}
}

/* Orientation box. Exists because a first-time reader assembled four wrong beliefs
   from fragments: that Claude was a person, that this product had a price, that a
   free tier of it existed, and that Gmail was optional. */
.facts{margin-top:30px;background:var(--white);border:2px solid var(--ink);
  border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);max-width:62ch}
.facts-h{font-size:19px;margin:0 0 12px;font-family:var(--sans);font-weight:700;
  letter-spacing:0}
.facts ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.facts li{font-size:16.5px;line-height:1.5;color:var(--ink-80);
  padding-left:26px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-radius:50%;background:var(--emerald);border:1.5px solid var(--ink)}
.facts li b{color:var(--ink)}

/* FAQ summaries were the fear with the reassurance hidden behind a click, so a
   headline-only scan delivered the opposite of the intent. The answer now shows. */
.ans{display:block;font-style:normal;font-family:var(--sans);font-size:16px;
  font-weight:650;color:var(--emerald-text);margin-top:5px}

/* Instructional screenshots. Cropped tight to the one control being described,
   because cropped task-relevant shots measurably beat full-screen captures. */
.shot{width:100%;height:auto;margin-top:6px;border:1.5px solid var(--ink);
  border-radius:var(--r-sm);background:#1b1b1b;display:block}
.ask .shot{margin-top:10px}

/* Sub-steps inside a step card. */
ol.mini{margin:2px 0 0;padding-left:0;list-style:none;counter-reset:mini;
  display:flex;flex-direction:column;gap:9px}
ol.mini li{counter-increment:mini;position:relative;padding-left:34px;
  font-size:17px;color:var(--ink-80)}
ol.mini li::before{content:counter(mini);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;background:var(--mint);
  border:1.5px solid var(--ink);color:var(--ink);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
ol.mini li b{color:var(--ink)}