/* ============================================================
   Deal-Won — shared stylesheet for the interior pages.
   index.html keeps its own inline <style>; nothing here touches it.
   Same tokens as the homepage: warm-black ground, cream ink, ember.
   System type only, no webfonts, no build step.
   ============================================================ */

:root{
  --ground:#151310;
  --ground-2:#1d1a15;
  --ground-3:#262119;
  --ink:#f8f4ec;
  --dim:rgba(248,244,236,.62);
  --faint:rgba(248,244,236,.40);
  --line:rgba(248,244,236,.13);
  --line-soft:rgba(248,244,236,.07);
  --ember:#ff3f19;
  --ember-ink:#160f0a;      /* dark ink on ember = 5.2:1; cream failed AA */

  --sans:-apple-system,system-ui,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --pad:clamp(1.25rem,5vw,2.75rem);
  --wide:1200px;
  --read:44rem;             /* prose measure, roughly 70ch */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--ember);color:var(--ember-ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);width:100%}
.read{max-width:var(--read)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ember);color:var(--ember-ink);
  padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(21,19,16,.86);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  display:flex;align-items:center;gap:.35rem;
  min-height:62px;
}
.brand{
  font-size:1.06rem;font-weight:800;letter-spacing:-.035em;
  text-decoration:none;color:var(--ink);margin-right:auto;
}
.brand span{color:var(--ember)}
.nav-links{display:flex;align-items:center;gap:.15rem;margin:0 .5rem 0 0;padding:0;list-style:none}
.nav-links a{
  display:block;padding:.5rem .78rem;border-radius:999px;
  font-size:.92rem;font-weight:500;color:var(--dim);text-decoration:none;
  transition:color .16s ease,background-color .16s ease;
}
.nav-links a:hover{color:var(--ink);background:rgba(248,244,236,.07)}
.nav-links a[aria-current="page"]{color:var(--ink);background:rgba(248,244,236,.07)}
.nav-cta{
  background:var(--ember);color:var(--ember-ink);text-decoration:none;
  padding:.6rem 1.1rem;border-radius:999px;
  font-size:.92rem;font-weight:560;letter-spacing:-.01em;white-space:nowrap;
  transition:background-color .18s ease;
}
.nav-cta:hover{background:#ff5630}
@media (max-width:860px){ .nav-links{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid transparent;border-radius:999px;
  padding:1rem 1.65rem;
  font:inherit;font-size:1rem;font-weight:560;letter-spacing:-.012em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-ember{background:var(--ember);color:var(--ember-ink)}
.btn-ember:hover{background:#ff5630}
.btn-ghost{background:rgba(248,244,236,.08);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(248,244,236,.14)}
.btn-onember{background:rgba(255,255,255,.26);color:var(--ember-ink);border-color:rgba(22,15,10,.30)}
.btn-onember:hover{background:rgba(255,255,255,.38)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* ---------- page head ---------- */
.crumbs{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1.5rem;
}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

.phead{padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(2.5rem,6vh,4rem)}
.phead h1{
  margin:0;max-width:20ch;
  font-size:clamp(2.4rem,5.6vw,4.15rem);
  font-weight:600;line-height:1.05;letter-spacing:-.032em;
}
.phead .lede{
  margin:1.6rem 0 0;max-width:56ch;
  font-size:clamp(1.06rem,1.6vw,1.28rem);line-height:1.55;color:var(--dim);
}
.phead .cta-row{margin-top:2.4rem}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin:0 0 1.2rem;
}
.ember{color:var(--ember)}

/* ---------- bands + prose ---------- */
.band{padding:clamp(3.5rem,8vh,6rem) 0}
.band-line{border-top:1px solid var(--line-soft)}
.band-2{background:var(--ground-2)}

h2{
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  font-weight:600;line-height:1.12;letter-spacing:-.028em;
  margin:0 0 1.4rem;max-width:22ch;
}
h3{
  font-size:1.18rem;font-weight:600;letter-spacing:-.012em;
  margin:2.4rem 0 .7rem;
}
p{margin:0 0 1.15rem;max-width:var(--read)}
.prose p,.prose li{color:var(--dim)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ember)}
.prose a:hover{color:var(--ember)}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.15rem;max-width:var(--read)}
.prose li{margin:0 0 .55rem}
.prose li::marker{color:var(--ember)}
.lead-in{color:var(--ink);font-size:1.14rem;font-weight:560;max-width:52ch}

/* the owner's-words block that opens each job page */
.symptom{
  margin:0 0 2rem;padding:1.5rem 1.7rem;
  background:var(--ground-2);border-left:2px solid var(--ember);border-radius:0 12px 12px 0;
  max-width:var(--read);
}
.symptom p{margin:0 0 .8rem;color:var(--dim)}
.symptom p:last-child{margin:0}
.symptom b{color:var(--ink)}

/* discovery questions — we ask, we never assert a benchmark */
.asks{list-style:none;margin:0;padding:0;max-width:var(--read)}
.asks li{
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:1.06rem;font-weight:500;
}
.asks li:first-child{border-top:1px solid var(--line)}

/* numbered build steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:3.2rem 1fr;gap:.4rem 1.6rem;
  padding:1.6rem 0;border-bottom:1px solid var(--line);
}
.steps li::before{
  content:"0" counter(s);
  font-family:var(--mono);font-size:.9rem;color:var(--ember);letter-spacing:.05em;padding-top:.2rem;
}
/* both the heading and the body sit in column 2; without this the <p> wraps
   onto a second grid row and lands in the 3.2rem counter column */
.steps h3,.steps p{grid-column:2}
.steps h3{margin:0 0 .4rem;font-size:1.1rem}
.steps p{margin:0;color:var(--dim);max-width:58ch}
@media (max-width:640px){
  .steps li{grid-template-columns:1fr;gap:.5rem}
  .steps li::before{padding-top:0}
}

/* "what it touches" */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none;max-width:var(--read)}
.chips li{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--dim);background:var(--ground-2);
  border:1px solid var(--line);border-radius:999px;padding:.42rem .8rem;
}

/* callout — used for the honesty notes */
.note{
  margin:2rem 0 0;padding:1.3rem 1.5rem;max-width:var(--read);
  border:1px solid var(--line);border-radius:14px;background:var(--ground-2);
  font-size:.95rem;line-height:1.6;color:var(--dim);
}
.note b{color:var(--ink)}

/* stats */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  margin:2.6rem 0 0;
}
.stat{background:var(--ground-2);padding:1.7rem 1.3rem}
.stat b{
  display:block;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:600;
  letter-spacing:-.035em;line-height:1;color:var(--ink);
}
.stat b em{font-style:normal;color:var(--ember)}
.stat span{display:block;margin-top:.6rem;font-size:.82rem;line-height:1.4;color:var(--faint)}

/* quote */
.quote{margin:2.8rem 0 0;max-width:52rem}
.quote blockquote{
  margin:0;font-size:clamp(1.3rem,2.6vw,1.85rem);font-weight:600;
  line-height:1.28;letter-spacing:-.022em;color:var(--ink);
}
.quote figcaption{margin:1.1rem 0 0;font-size:.92rem;color:var(--faint)}
.quote figcaption b{color:var(--ink);font-weight:600}
.quote a{color:var(--ember);text-decoration:none}
.quote a:hover{text-decoration:underline}

/* faq */
.faq{border-top:1px solid var(--line);max-width:var(--read)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.3rem 2rem 1.3rem 0;position:relative;
  font-size:1.06rem;font-weight:560;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.25rem;top:1.15rem;
  color:var(--ember);font-size:1.35rem;font-weight:400;line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 1.3rem;color:var(--dim);font-size:1rem}

/* cross-links to the other pages */
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:2.4rem}
.more a{
  background:var(--ground-2);padding:1.5rem 1.4rem;text-decoration:none;display:block;
  transition:background-color .18s ease;
}
.more a:hover{background:var(--ground-3)}
.more b{display:block;font-size:1.04rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.4rem}
.more span{display:block;font-size:.9rem;color:var(--faint);line-height:1.45}

/* closing CTA */
.close{background:var(--ember);color:var(--ember-ink)}
.close h2{color:var(--ember-ink);max-width:18ch}
.close p{color:rgba(22,15,10,.78);max-width:46ch;font-size:1.06rem}
.close .cta-row{margin-top:2rem}

/* footer */
.foot{border-top:1px solid var(--line);padding:3rem 0 3.5rem;font-size:.9rem;color:var(--faint)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2.5rem 3.5rem;margin-bottom:2.5rem}
.foot-col h4{
  margin:0 0 .9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:400;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 .55rem}
.foot-col a{color:var(--dim);text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-base{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:1.6rem}
.foot-base a{color:var(--faint);text-decoration:none}
.foot-base a:hover{color:var(--ink)}