/* ==========================================================================
   Digital Workforce System — redesign v1
   Rhythm borrowed from advisoraipartners.com; identity is DWS's own.
   Section grammar, everywhere:
     eyebrow (mono, caps, gold) -> two-line display headline -> ONE short lead
     -> card grid or diagram -> optional CTA.
   Nothing in a card runs longer than about four lines.
   ========================================================================== */

:root{
  --paper:#FAF7F0;
  --paper-2:#F2EDE2;
  --ink:#17140E;
  --ink-2:#4E4739;
  --ink-3:#837A67;
  --rule:#DFD6C3;

  --dark:#17140E;
  --dark-2:#221D14;
  --dark-rule:#3A3225;
  --on-dark:#F4EFE4;
  --on-dark-2:#B8AF9B;

  --gold:#C6982E;
  --gold-soft:#E0BC6A;
  --green:#1F7A4D;
  --green-hi:#258f5a;

  --maxw:1120px;
  --gutter:24px;

  --r:14px;
  --shadow:0 1px 2px rgba(23,20,14,.05), 0 8px 24px -16px rgba(23,20,14,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- layout ---------- */
.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:74px}
.band--tight{padding-block:56px}
.band--dark{background:var(--dark);color:var(--on-dark)}
.band--dark .lead,.hero .lead{color:var(--on-dark-2)}
.band--paper2{background:var(--paper-2)}

/* ---------- type ---------- */
.eyebrow{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.band--dark .eyebrow,.hero .eyebrow{color:var(--gold-soft)}

h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;text-wrap:balance;margin:0}
h1{font-weight:600;font-size:clamp(38px,5.4vw,60px);line-height:1.06;letter-spacing:-.02em}
h2{font-weight:600;font-size:clamp(29px,3.6vw,42px);line-height:1.12;letter-spacing:-.015em}
h3{font-weight:600;font-size:20px;line-height:1.25}
em.gold{color:var(--gold);font-style:normal}
.band--dark em.gold,.hero em.gold{color:var(--gold-soft)}

.lead{
  font-size:18px;color:var(--ink-2);max-width:60ch;margin:18px 0 0;
}
.centered{text-align:center}
.centered .lead{margin-inline:auto}
.centered .eyebrow{margin-inline:auto}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,240,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
header.site .shell{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand .mark{width:auto;height:30px;flex:none;display:block}
.brand span.sys{color:var(--gold)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:15px}
nav.main a:not(.btn){
  text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;letter-spacing:-.005em;
}
nav.main a:not(.btn):hover,nav.main a:not(.btn)[aria-current="page"]{color:var(--ink)}
nav.main a:not(.btn)[aria-current="page"]{font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:8px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
}
.btn--primary,.btn--primary:hover{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-hi)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.band--dark .btn--ghost,.hero .btn--ghost{color:var(--on-dark);border-color:var(--dark-rule)}
.btn--sm{padding:9px 15px;font-size:13.5px}
.microcopy{
  font-family:"Spline Sans Mono",monospace;font-size:11.5px;letter-spacing:.06em;
  color:var(--ink-3);margin:12px 0 0;
}
.band--dark .microcopy,.hero .microcopy{color:var(--on-dark-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.centered .cta-row{justify-content:center}

/* text link with arrow */
.arrow{
  display:inline-block;margin-top:22px;font-weight:600;font-size:15px;
  color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;
}
.arrow:hover{border-bottom-color:currentColor}
.band--dark .arrow,.hero .arrow{color:var(--gold-soft)}

/* ---------- hero ----------
   The graph-paper grid + gold glow are carried over from the original
   v2.css hero (.grid-overlay / .glow). They are the one piece of DWS
   visual identity nobody else in this category has. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--dark);color:var(--on-dark);padding-block:88px 78px;
}
.hero .grid-overlay,.hero .glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .grid-overlay{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.15;
  mask-image:radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 80%);
}
.hero .glow{background-image:radial-gradient(58% 48% at 50% 42%, rgba(198,152,46,.18), transparent 70%)}
.hero > .shell{position:relative;z-index:1}
.hero .center{max-width:920px;margin-inline:auto;text-align:center}
.hero .center .lead,.hero .center .eyebrow,.hero .center .qualifier{margin-inline:auto}
.hero .center .chain,.hero .center .cta-row{justify-content:center}
.hero h1{max-width:18ch}
.hero .center h1{margin-inline:auto}
.hero .lead{color:var(--on-dark-2);font-size:19px;max-width:58ch}

/* ---------- icon tiles (Lucide-style stroke icons, David's pattern) ---------- */
.icon-tile{
  width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--rule);border-radius:11px;margin-bottom:16px;
}
.icon-tile svg{width:19px;height:19px;display:block}
.band--dark .icon-tile,.hero .icon-tile{border-color:var(--dark-rule)}
.t-gold  {background:rgba(198,152,46,.13);color:#8E6C14}
.t-green {background:rgba(31,122,77,.12); color:#1F7A4D}
.t-slate {background:rgba(63,85,102,.12); color:#3F5566}
.t-rust  {background:rgba(156,63,34,.12); color:#9C3F22}
.t-moss  {background:rgba(74,99,64,.14);  color:#4A6340}
.band--dark .t-gold,.hero .t-gold   {background:rgba(224,188,106,.14);color:var(--gold-soft)}
.band--dark .t-green,.hero .t-green {background:rgba(95,196,142,.14); color:#7FD1A4}
.band--dark .t-slate,.hero .t-slate {background:rgba(143,170,192,.14);color:#8FAAC0}
.band--dark .t-rust,.hero .t-rust   {background:rgba(217,118,79,.14); color:#D9764F}
.band--dark .t-moss,.hero .t-moss   {background:rgba(143,176,127,.14);color:#8FB07F}
/* step cards put the number beside the tile rather than above it */
.step .icon-tile{margin-bottom:14px}

/* the role line — David states the role as a separate beat under the verb-led
   headline, rather than making the role itself the headline. */
.hero .role{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:-.01em;
  color:var(--gold-soft);margin:30px 0 0;
}

/* the Assess -> Build -> Operate -> Platformize chain */
.chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:36px;
}
.chain span{
  font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 13px;border:1px solid var(--dark-rule);
  border-radius:6px;color:var(--on-dark);
}
.chain span.is-end{border-color:var(--gold);color:var(--gold-soft)}
.chain i{color:var(--on-dark-2);font-style:normal}
.hero .qualifier{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--dark-rule);
  font-size:14.5px;color:var(--on-dark-2);max-width:66ch;
}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;margin-top:44px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid--5{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.grid--5 .card{padding:20px}
.grid--5 .card h3{font-size:17px}
.grid--5 .card p{font-size:14px}

.card{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow);
}
.band--dark .card,.hero .card{background:var(--dark-2);border-color:var(--dark-rule);box-shadow:none}
.card h3{margin-bottom:8px}
.card p{margin:0;font-size:15px;color:var(--ink-2)}
.band--dark .card p,.hero .card p{color:var(--on-dark-2)}
.card .num{
  font-family:"Fraunces",serif;font-size:15px;color:var(--gold);
  display:block;margin-bottom:14px;font-weight:600;letter-spacing:.06em;
}

/* numbered step card, David's 01/02/03 pattern */
.step{position:relative}
.step .num{
  position:absolute;top:20px;right:22px;margin:0;
  font-size:26px;opacity:.5;
}
.step h3{padding-right:52px}

/* ---------- founder block ----------
   Photo and credentials stack in the left column; the credentials are
   separate outlined boxes rather than a seamless grid, because David's
   read as objects you can count and mine read as a table. */
.founder{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:46px;align-items:start}
.founder-col{display:grid;gap:14px}
.founder .portrait{
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow);
}
.founder .portrait img{
  width:100%;height:auto;display:block;
  aspect-ratio:1/1;object-fit:cover;object-position:50% 28%;
}
/* the About portrait is a true 4:5 frame - let it keep its own ratio
   instead of being forced square by the rule above */
.portrait--tall img{aspect-ratio:4/5;object-position:50% 22%}
.band--dark .founder .portrait,.hero .founder .portrait{
  border-color:var(--dark-rule);background:var(--dark-2);
}
.founder-title{
  font-size:clamp(34px,4.4vw,52px);line-height:1.04;letter-spacing:-.022em;
  margin-bottom:4px;
}
@media (max-width:560px){.founder-title{font-size:clamp(28px,8vw,52px)}}

.founder .pull{
  font-family:"Fraunces",serif;font-size:23px;line-height:1.3;font-weight:600;
  margin:26px 0 0;padding-left:18px;border-left:2px solid var(--gold);
  text-wrap:balance;
}
/* outlined credential boxes */
.markers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-top:0;background:none;border:0;border-radius:0;overflow:visible;
}
.markers div{
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;box-shadow:var(--shadow);
}
.band--dark .markers div,.hero .markers div{
  background:var(--dark-2);border-color:var(--dark-rule);box-shadow:none;
}
.markers dt{
  font-family:"Spline Sans Mono",monospace;font-size:15px;font-weight:600;
  letter-spacing:-.01em;margin:0 0 3px;
}
.markers dd{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.band--dark .markers dd,.hero .markers dd{color:var(--on-dark-2)}

/* ---------- numbers / proof ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;margin-top:44px}
.stat .fig{
  font-family:"Fraunces",serif;font-weight:600;font-size:clamp(40px,5vw,54px);
  line-height:1;letter-spacing:-.03em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.band--dark .stat .fig,.hero .stat .fig{color:var(--gold-soft)}
.stat p{margin:10px 0 0;font-size:14.5px;color:var(--ink-2);max-width:26ch}
.band--dark .stat p,.hero .stat p{color:var(--on-dark-2)}

/* ---------- belief list ---------- */
.beliefs{margin-top:44px;border-top:1px solid var(--rule)}
.band--dark .beliefs,.hero .beliefs{border-color:var(--dark-rule)}
.belief{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;
  padding:24px 0;border-bottom:1px solid var(--rule);
}
.band--dark .belief,.hero .belief{border-color:var(--dark-rule)}
.belief .n{
  font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.1em;
  color:var(--gold);padding-top:5px;
}
.band--dark .belief .n,.hero .belief .n{color:var(--gold-soft)}
.belief h3{margin-bottom:6px}
.belief p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:62ch}
.band--dark .belief p,.hero .belief p{color:var(--on-dark-2)}

/* ---------- the ladder (platformization sequence) ---------- */
.ladder{list-style:none;margin:40px 0 0;padding:0;max-width:640px}
.ladder li{
  position:relative;padding:14px 0 14px 34px;font-size:16.5px;
  border-bottom:1px dashed var(--rule);
}
.band--dark .ladder li,.hero .ladder li{border-color:var(--dark-rule)}
.ladder li::before{
  content:"";position:absolute;left:6px;top:23px;
  width:7px;height:7px;border-radius:50%;background:var(--rule);
}
.band--dark .ladder li::before,.hero .ladder li::before{background:var(--dark-rule)}
.ladder li:last-child{border-bottom:0;font-weight:600}
.ladder li:last-child::before{background:var(--gold);box-shadow:0 0 0 4px rgba(198,152,46,.18)}
.ladder .mark{
  display:block;font-family:"Spline Sans Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:3px;
}
.band--dark .ladder .mark,.hero .ladder .mark{color:var(--gold-soft)}

/* vocabulary chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chips span{
  font-family:"Spline Sans Mono",monospace;font-size:11.5px;letter-spacing:.06em;
  padding:7px 13px;border:1px solid var(--rule);border-radius:8px;color:var(--ink-2);
  background:#fff;box-shadow:var(--shadow);
}
.band--dark .chips span,.hero .chips span{border-color:var(--dark-rule);color:var(--on-dark-2)}

/* ---------- closing CTA panel (David's shape, DWS colours) ----------
   An outer card carries the argument; a dark inner card with a hard gold
   offset shadow carries the commitment. The offset shadow is the one
   borrowed flourish - it makes the inner card read as a separate object. */
.closer{
  background:#fff;border:1px solid var(--rule);border-radius:20px;
  padding:clamp(26px,4.4vw,48px);
  box-shadow:0 2px 4px rgba(23,20,14,.04), 0 18px 44px -28px rgba(23,20,14,.4);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,352px);
  gap:clamp(30px,4.6vw,54px);align-items:center;
}
.closer-main h2{margin-bottom:0}
.closer-main .lead{max-width:52ch}
.eyebrow.has-dot{display:flex;align-items:center;gap:9px}
.eyebrow.has-dot::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;
}
.centered .eyebrow.has-dot{justify-content:center}

.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.checks li{position:relative;padding-left:32px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.checks li::before{
  content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:6px;
  border:1px solid var(--gold);background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.direct{margin:18px 0 0;font-size:13.5px;color:var(--ink-3)}
.direct a{color:var(--ink-2);font-weight:600;text-decoration:none}
.direct a:hover{color:var(--ink)}

/* the dark inner card */
.bookcard{
  background:var(--dark);color:var(--on-dark);
  border:1px solid var(--dark);border-radius:16px;padding:26px;
  box-shadow:6px 6px 0 var(--gold);
}
.bookcard-head{display:flex;align-items:center;gap:13px}
.bc-icon{
  width:46px;height:46px;flex:none;border-radius:13px;
  background:rgba(224,188,106,.15);border:1px solid var(--dark-rule);
  color:var(--gold-soft);display:flex;align-items:center;justify-content:center;
}
.bc-icon svg{width:21px;height:21px}
.bc-title{margin:0;font-weight:700;font-size:15.5px;color:var(--on-dark)}
.bc-sub{
  margin:2px 0 0;font-family:"Spline Sans Mono",monospace;
  font-size:11px;letter-spacing:.05em;color:var(--on-dark-2);
}
.bookcard hr{border:0;border-top:1px solid var(--dark-rule);margin:18px 0}
.bookcard .cap{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-soft);margin:0 0 13px;
}
.bookcard .dotlist li{color:var(--on-dark-2);font-size:13px}
.bookcard .dotlist.is-gain li::before{background:var(--gold-soft)}
.btn--white{
  background:#fff;color:var(--ink);width:100%;
  justify-content:space-between;border-color:#fff;
}
.btn--white:hover{background:var(--paper-2)}
.btn--white svg{width:15px;height:15px}
.assure{
  margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--gold-soft);
  position:relative;padding-left:20px;
}
.assure::before{
  content:"";position:absolute;left:0;top:4px;width:12px;height:12px;
  background:var(--gold-soft);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (max-width:860px){
  .closer{grid-template-columns:1fr;gap:30px}
}

/* ---------- footer ---------- */
footer.site{background:var(--paper-2);border-top:1px solid var(--rule);padding-block:56px 40px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:32px}
.fgrid h4{
  font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500;
}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:8px}
.fgrid a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.fgrid a:hover{color:var(--ink)}
.fbase{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:10px 20px;
}

/* ==========================================================================
   Structural devices borrowed from advisoraipartners.com/for-business-owners:
   a two-column hero with a standing "state of play" card, pain-vs-gain dot
   lists, numbered problem cards, a step list, and a before/after table.
   ========================================================================== */

/* two-column hero: argument left, evidence card right */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:52px;align-items:center}
.split--top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:34px}}

/* the standing card that sits beside a hero or a section */
.sidecard{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);
}
.band--dark .sidecard,.hero .sidecard{
  background:var(--dark-2);border-color:var(--dark-rule);box-shadow:none;
}
.sidecard .who{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.sidecard .who h3{font-size:16px;margin:0}
.sidecard .who p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.band--dark .sidecard .who p,.hero .sidecard .who p{color:var(--on-dark-2)}
.sidecard hr{border:0;border-top:1px solid var(--rule);margin:18px 0}
.band--dark .sidecard hr,.hero .sidecard hr{border-color:var(--dark-rule)}
.sidecard .cap{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 13px;
}
.band--dark .sidecard .cap,.hero .sidecard .cap{color:var(--on-dark-2)}
.sidecard .cap.is-gain{color:var(--green)}
.band--dark .sidecard .cap.is-gain,.hero .sidecard .cap.is-gain{color:#7FD1A4}

/* pain vs gain dot lists */
.dotlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dotlist li{
  position:relative;padding-left:19px;font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
.band--dark .dotlist li,.hero .dotlist li{color:var(--on-dark-2)}
.dotlist li::before{
  content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--rust);
}
.dotlist.is-gain li::before{background:var(--green)}
/* On a dark card the base rust (#9C3F22) all but disappears, so the pain list
   lost its markers while the gain list kept its bright green ones. Both halves
   need to read, otherwise the contrast that makes the card work is gone. */
.band--dark .dotlist li::before,.hero .dotlist li::before{background:#E0603A}
.band--dark .dotlist.is-gain li::before,.hero .dotlist.is-gain li::before{background:#7FD1A4}

/* hero checklist (three promises under the lead) */
.promises{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.promises li{position:relative;padding-left:32px;font-size:15px;line-height:1.5}
.promises li::before{
  content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--gold);
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

/* numbered problem cards — big serif numeral, David's 01-04 pattern */
.numcard{position:relative}
.numcard .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.numcard .head .icon-tile{margin-bottom:0}
.numcard .fignum{
  font-family:"Fraunces",serif;font-weight:600;font-size:36px;line-height:1;
  color:var(--rule);font-variant-numeric:tabular-nums;
}
.band--dark .numcard .fignum,.hero .numcard .fignum{color:var(--dark-rule)}

/* step list: icon, STEP 0N label, heading, body */
.steplist{display:grid;gap:26px}
.steprow{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;align-items:start}
.steprow .icon-tile{margin-bottom:0}
.steprow .lbl{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 5px;
}
.band--dark .steprow .lbl,.hero .steprow .lbl{color:var(--on-dark-2)}
.steprow h3{margin:0 0 7px}
.steprow p{margin:0;font-size:14.5px;color:var(--ink-2);max-width:56ch}
.band--dark .steprow p,.hero .steprow p{color:var(--on-dark-2)}

/* before -> after table ----------------------------------------------------
   Built light-first, because that is where a tinted comparison actually reads.
   The earlier version put it on a dark band where 7% washes turn to sludge.
   Every cell is outlined: outer border, a divider per column, a rule per row. */
.ba{
  border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:#fff;margin-top:36px;
  box-shadow:5px 5px 0 rgba(23,20,14,.10);
}
.ba-head,.ba-row{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
.ba-head{border-bottom:1.5px solid var(--ink)}
.ba-head span{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:13px 20px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.ba-head .b{color:#9C3F22;background:rgba(156,63,34,.10)}
.ba-head .a{color:#1F7A4D;background:rgba(31,122,77,.10)}
.ba-head .mid{background:var(--paper-2);border-inline:1.5px solid var(--ink)}

.ba-row{border-top:1px solid var(--rule);align-items:stretch}
.ba-row:first-of-type{border-top:0}
.ba-row .b{padding:15px 20px;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.ba-row .a{padding:15px 20px;font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:600}
.ba-row .mid{
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);border-inline:1.5px solid var(--ink);
  color:var(--gold-ink);font-weight:700;
}

/* if it ever has to sit on a dark band, drop the washes entirely */
.band--dark .ba,.hero .ba{
  background:var(--dark-2);border-color:var(--dark-rule);box-shadow:none;
}
.band--dark .ba-head,.hero .ba-head{border-bottom-color:var(--dark-rule)}
.band--dark .ba-head .b,.hero .ba-head .b{color:#D9764F;background:none}
.band--dark .ba-head .a,.hero .ba-head .a{color:#7FD1A4;background:none}
.band--dark .ba-head .mid,.band--dark .ba-row .mid,
.hero .ba-head .mid,.hero .ba-row .mid{
  background:none;border-inline-color:var(--dark-rule);color:var(--gold-soft);
}
.band--dark .ba-row,.hero .ba-row{border-top-color:var(--dark-rule)}
.band--dark .ba-row .b,.hero .ba-row .b{color:var(--on-dark-2)}
.band--dark .ba-row .a,.hero .ba-row .a{color:var(--on-dark)}

@media (max-width:700px){
  /* Stacked, and each half captioned - the header is long gone by the time a
     phone reader reaches row four, and a rotated arrow between two stacked
     cells reads as a break rather than a relationship. */
  .ba-head{display:none}
  .ba-row{grid-template-columns:1fr;gap:0;padding:4px 0}
  .ba-row .mid{display:none}
  .ba-row .b,.ba-row .a{padding:11px 16px 12px;border-left:3px solid var(--rule)}
  .ba-row .b{border-left-color:var(--rust)}
  .ba-row .a{border-left-color:var(--green)}
  .band--dark .ba-row .b,.hero .ba-row .b{border-left-color:#E0603A}
  .band--dark .ba-row .a,.hero .ba-row .a{border-left-color:#7FD1A4}
  .ba-row .b::before,.ba-row .a::before{
    content:attr(data-label);display:block;margin-bottom:4px;
    font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:600;
  }
  .ba-row .b::before{color:var(--rust)}
  .ba-row .a::before{color:var(--green)}
  .band--dark .ba-row .b::before,.hero .ba-row .b::before{color:#E0603A}
  .band--dark .ba-row .a::before,.hero .ba-row .a::before{color:#7FD1A4}
  .ba-row + .ba-row{border-top-width:1px}
}

/* bridge callout — thick accent bar, closes a section */
.bridge{
  display:flex;gap:20px;align-items:flex-start;margin-top:32px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:24px 26px;
}
.band--dark .bridge,.hero .bridge{background:var(--dark-2);border-color:var(--dark-rule)}
.bridge .bar{width:4px;align-self:stretch;background:var(--gold);border-radius:2px;flex:none}
.bridge p{margin:0 0 10px;font-size:15px;color:var(--ink-2);max-width:70ch}
.band--dark .bridge p,.hero .bridge p{color:var(--on-dark-2)}
.bridge .arrow{margin-top:0}



/* concept links: a term with a field note behind it gets a gold underline,
   so the page reads as a glossary you can follow rather than a wall of terms */
.card h3 a,.belief h3 a,.chapter-body h3 a,.steprow h3 a{
  color:inherit;text-decoration:none;
  border-bottom:1.5px solid var(--gold);padding-bottom:1px;
}
.card h3 a:hover,.belief h3 a:hover{color:var(--gold-ink)}
.band--dark .card h3 a,.hero .card h3 a{border-bottom-color:var(--gold-soft)}
.src a{color:var(--gold-ink);font-weight:600;text-decoration:none}
.band--dark .src a,.hero .src a{color:var(--gold-soft)}

/* ---------- the DWOS cycle ----------
   Hand-drawn SVG rather than a generated plate: this diagram has to carry five
   correct labels, and image models garble text every time. 2 KB, themes with
   the page, crisp at any size. */
.loop-wrap{margin:0;display:flex;align-items:center;justify-content:center}
.loop{width:100%;max-width:520px;height:auto;color:var(--gold-soft)}
.loop .ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.22}
.loop .trk{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.55}
.loop .nd{fill:var(--dark-2);stroke:currentColor;stroke-width:1.6}
.loop .num{
  font-family:"Spline Sans Mono",monospace;font-size:13px;font-weight:600;
  fill:currentColor;text-anchor:middle;
}
.loop .lbl{
  font-family:"Hanken Grotesk",sans-serif;font-size:16px;font-weight:600;
  fill:var(--on-dark);
}
.loop .mid1,.loop .mid2{font-family:"Fraunces",serif;font-size:19px;font-weight:600;fill:var(--on-dark)}
.loop .mid2{fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  .loop .trk{stroke-dasharray:6 5;animation:flow 3.2s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-22}}
}


/* ---------- the platformization ladder, animated ----------
   The five steps are a sequence, not a list: three states go fine, the fourth
   is the moment everything changes (red), and the fifth is the new question
   (green). Then the five engineering problems light one by one. Colour only -
   every word is legible from the first frame, and the cycle holds on the fully
   lit state for most of its length so a late arrival sees the conclusion. */
.ladder li::before{transition:none}
@keyframes lad1{
  0%,1.92%{background:var(--dark-rule);box-shadow:none}
  4.62%,87.69%{background:#7FD1A4;box-shadow:0 0 0 4px rgba(127,209,164,.16)}
  96.15%,100%{background:var(--dark-rule);box-shadow:none}
}
.ladder li:nth-child(1)::before{animation:lad1 13.0s linear infinite}
@keyframes lad2{
  0%,8.08%{background:var(--dark-rule);box-shadow:none}
  10.77%,87.69%{background:#7FD1A4;box-shadow:0 0 0 4px rgba(127,209,164,.16)}
  96.15%,100%{background:var(--dark-rule);box-shadow:none}
}
.ladder li:nth-child(2)::before{animation:lad2 13.0s linear infinite}
@keyframes lad3{
  0%,14.23%{background:var(--dark-rule);box-shadow:none}
  16.92%,87.69%{background:#7FD1A4;box-shadow:0 0 0 4px rgba(127,209,164,.16)}
  96.15%,100%{background:var(--dark-rule);box-shadow:none}
}
.ladder li:nth-child(3)::before{animation:lad3 13.0s linear infinite}
@keyframes lad4{
  0%,21.92%{background:var(--dark-rule);box-shadow:none}
  24.62%,87.69%{background:#E0603A;box-shadow:0 0 0 5px rgba(224,96,58,.22)}
  96.15%,100%{background:var(--dark-rule);box-shadow:none}
}
.ladder li:nth-child(4)::before{animation:lad4 13.0s linear infinite}
@keyframes lad5{
  0%,29.62%{background:var(--dark-rule);box-shadow:none}
  32.31%,87.69%{background:#7FD1A4;box-shadow:0 0 0 4px rgba(127,209,164,.16)}
  96.15%,100%{background:var(--dark-rule);box-shadow:none}
}
.ladder li:nth-child(5)::before{animation:lad5 13.0s linear infinite}
@keyframes ladmark{
  0%,21.92%{color:var(--on-dark-2);opacity:.45}
  24.62%,87.69%{color:#E0603A;opacity:1}
  96.15%,100%{color:var(--on-dark-2);opacity:.45}
}
.ladder li:nth-child(4) .mark{animation:ladmark 13.0s linear infinite}
@keyframes chip1{
  0%,38.08%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
  40.77%,87.69%{border-color:var(--gold);color:var(--gold-soft);background:rgba(198,152,46,.10);box-shadow:0 0 0 1px rgba(198,152,46,.18)}
  96.15%,100%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
}
.band--dark .chips span:nth-child(1){animation:chip1 13.0s linear infinite}
@keyframes chip2{
  0%,42.69%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
  45.38%,87.69%{border-color:var(--gold);color:var(--gold-soft);background:rgba(198,152,46,.10);box-shadow:0 0 0 1px rgba(198,152,46,.18)}
  96.15%,100%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
}
.band--dark .chips span:nth-child(2){animation:chip2 13.0s linear infinite}
@keyframes chip3{
  0%,47.31%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
  50.0%,87.69%{border-color:var(--gold);color:var(--gold-soft);background:rgba(198,152,46,.10);box-shadow:0 0 0 1px rgba(198,152,46,.18)}
  96.15%,100%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
}
.band--dark .chips span:nth-child(3){animation:chip3 13.0s linear infinite}
@keyframes chip4{
  0%,51.92%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
  54.62%,87.69%{border-color:var(--gold);color:var(--gold-soft);background:rgba(198,152,46,.10);box-shadow:0 0 0 1px rgba(198,152,46,.18)}
  96.15%,100%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
}
.band--dark .chips span:nth-child(4){animation:chip4 13.0s linear infinite}
@keyframes chip5{
  0%,56.54%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
  59.23%,87.69%{border-color:var(--gold);color:var(--gold-soft);background:rgba(198,152,46,.10);box-shadow:0 0 0 1px rgba(198,152,46,.18)}
  96.15%,100%{border-color:var(--dark-rule);color:var(--on-dark-2);background:var(--dark-2);box-shadow:none}
}
.band--dark .chips span:nth-child(5){animation:chip5 13.0s linear infinite}

@media (prefers-reduced-motion:reduce){
  /* no cycle - just show the finished state, which is the point of the graphic */
  .ladder li::before,.ladder li .mark,.band--dark .chips span{animation:none}
  .ladder li:nth-child(1)::before,.ladder li:nth-child(2)::before,
  .ladder li:nth-child(3)::before,.ladder li:nth-child(5)::before{background:#7FD1A4}
  .ladder li:nth-child(4)::before{background:#E0603A}
  .ladder li:nth-child(4) .mark{color:#E0603A}
  .band--dark .chips span{border-color:var(--gold);color:var(--gold-soft);background:rgba(198,152,46,.10)}
}

/* ---------- the six-rung ladder ----------
   Carried over from the live /platform page. It is the clearest thing on the
   old site and existed nowhere else; losing it in the redesign would have been
   the single worst trade in this whole rebuild. */
.rungs{display:grid;gap:2px;margin-top:38px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--rule)}
.band--dark .rungs,.hero .rungs{border-color:var(--dark-rule);background:var(--dark-rule)}
.rung{display:grid;grid-template-columns:64px minmax(0,1fr) 132px;gap:18px;align-items:center;
  background:#fff;padding:16px 20px}
.band--dark .rung,.hero .rung{background:var(--dark-2)}
.rung .n{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.band--dark .rung .n,.hero .rung .n{color:var(--on-dark-2)}
.rung h4{margin:0 0 3px;font-family:"Fraunces",serif;font-size:18px;font-weight:600}
.rung p{margin:0;font-size:14px;color:var(--ink-2);max-width:62ch}
.band--dark .rung p,.hero .rung p{color:var(--on-dark-2)}
.rung .tag{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;padding:6px 8px;border-radius:6px;
  border:1px solid var(--rule);color:var(--ink-3);
}
.band--dark .rung .tag,.hero .rung .tag{border-color:var(--dark-rule);color:var(--on-dark-2)}
.rung.is-here .tag{color:#9C3F22;border-color:rgba(156,63,34,.4);background:rgba(156,63,34,.08)}
.rung.is-trap .tag{color:#C2690A;border-color:rgba(194,105,10,.4);background:rgba(194,105,10,.08)}
.rung.is-work .tag{color:var(--gold-ink);border-color:rgba(198,152,46,.45);background:rgba(198,152,46,.10)}
.rung.is-goal .tag{color:var(--green);border-color:rgba(31,122,77,.4);background:rgba(31,122,77,.08)}
.band--dark .rung.is-here .tag,.hero .rung.is-here .tag{color:#E0603A}
.band--dark .rung.is-goal .tag,.hero .rung.is-goal .tag{color:#7FD1A4}
.band--dark .rung.is-work .tag,.hero .rung.is-work .tag{color:var(--gold-soft)}
@media (max-width:700px){
  .rung{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .rung .tag{grid-column:2;justify-self:start;margin-top:6px}
}

/* ---------- breadcrumbs ---------- */
.crumbs{
  display:flex;align-items:center;gap:9px;margin:0 0 20px;
  font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.08em;
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--gold)}
.crumbs [aria-current]{color:var(--ink-2)}
.band--dark .crumbs a,.hero .crumbs a{color:var(--on-dark-2)}
.band--dark .crumbs a:hover,.hero .crumbs a:hover{color:var(--on-dark)}
.band--dark .crumbs [aria-current],.hero .crumbs [aria-current]{color:var(--on-dark-2)}
.band--dark .crumbs span[aria-hidden],.hero .crumbs span[aria-hidden]{color:var(--gold-soft)}
.centered .crumbs{justify-content:center}

/* ---------- hero eyebrow as a bordered pill (David's device) ----------
   A bare mono line reads as a caption; a pill reads as a label on the page.
   Costs nothing and orients the visitor before the headline lands. */
.eyebrow-pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:8px 16px;border-radius:99px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  margin:0 0 22px;
}
.eyebrow-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.band--dark .eyebrow-pill,.hero .eyebrow-pill{
  background:rgba(255,255,255,.04);border-color:var(--dark-rule);color:var(--on-dark);
}
.band--dark .eyebrow-pill::before,.hero .eyebrow-pill::before{background:var(--gold-soft)}
.centered .eyebrow-pill{margin-inline:auto}

/* promises: outlined check boxes rather than bare ticks */
.promises li::before{
  content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:6px;
  border:1px solid var(--gold);background:transparent;
  -webkit-mask:none;mask:none;
}
.promises li::after{
  content:"";position:absolute;left:5px;top:7px;width:11px;height:11px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* a CTA belongs INSIDE the standing card - his card converts, mine dead-ended */
.sidecard .btn{width:100%;justify-content:space-between;margin-top:4px}
.sidecard .btn svg{width:15px;height:15px}

/* the vs comparison as two labelled pills */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:4px 0 16px}
.vs span{
  font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;text-align:center;padding:7px 9px;border-radius:8px;
  border:1px solid var(--rule);font-weight:600;
}
.vs .lose{color:var(--rust);background:rgba(156,63,34,.08);border-color:rgba(156,63,34,.3)}
.vs .win{color:var(--green);background:rgba(31,122,77,.08);border-color:rgba(31,122,77,.3)}
.vs .mid{border:0;background:none;color:var(--ink-3);font-size:10px;letter-spacing:.05em;padding:0}
.band--dark .vs .lose,.hero .vs .lose{color:#D9764F;background:rgba(217,118,79,.1);border-color:rgba(217,118,79,.28)}
.band--dark .vs .win,.hero .vs .win{color:#7FD1A4;background:rgba(127,209,164,.1);border-color:rgba(127,209,164,.28)}
.band--dark .vs .mid,.hero .vs .mid{color:var(--on-dark-2)}

/* microcopy sitting beside the button rather than under it */
.cta-row .microcopy{margin:0;align-self:center}

/* ---------- chapter rows (About) ----------
   The story is the most interesting thing on the site and it was living in a
   narrow left column with the right half of the page empty. Alternating
   full-width rows give each chapter a plate, use the whole measure, and set
   up a reading rhythm the old stack never had. */
.chapters{display:grid;gap:clamp(40px,5vw,72px);margin-top:52px}
.chapter{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.chapter:nth-child(even) .chapter-plate{order:2}
.chapter-plate{
  position:relative;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--dark);box-shadow:var(--shadow);
}
.band--paper2 .chapter-plate{border-color:var(--rule)}
.chapter-plate img{
  width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;
}
.chapter-plate .plate-no{
  position:absolute;left:16px;top:14px;
  font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.2em;
  color:var(--gold-soft);opacity:.85;
}
.chapter-body .lbl{
  font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px;
}
.chapter-body h3{font-size:clamp(23px,2.6vw,31px);line-height:1.15;margin-bottom:14px}
.chapter-body p{font-size:16px;color:var(--ink-2);margin:0 0 12px;max-width:56ch}
.chapter-body .src{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--ink-3);
}
@media (max-width:820px){
  .chapter{grid-template-columns:1fr;gap:22px}
  .chapter:nth-child(even) .chapter-plate{order:0}
  .chapter-plate{max-width:340px}
}

/* ---------- mapping table (DWOS <-> published frameworks) ---------- */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:#fff;margin-top:36px}
.band--dark .scroll,.hero .scroll{background:var(--dark-2);border-color:var(--dark-rule)}
table.map{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
table.map th{
  text-align:left;font-family:"Spline Sans Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  padding:12px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.map td{padding:13px 18px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
table.map td:first-child{color:var(--ink)}
table.map tr:last-child td{border-bottom:0}
.src{margin-top:18px;font-size:13px;color:var(--ink-3);max-width:70ch}
.dim{color:var(--ink-3)}
.band--dark .dim,.hero .dim{color:var(--on-dark-2);opacity:.75}

/* ---------- chat with founder (ported from v2.css) ----------
   The label is a real sentence rather than an icon, because an unlabelled
   bubble reads as a support bot. */
#whatsapp{
  position:fixed;z-index:60;display:flex;align-items:center;gap:10px;text-decoration:none;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  max-width:calc(100vw - 32px);
}
.wa-label{
  background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;
  padding:9px 15px;border-radius:999px;border:1px solid var(--rule);
  box-shadow:0 6px 20px rgba(23,20,14,.14);white-space:nowrap;
}
.wa-avatar{
  position:relative;flex:none;width:56px;height:56px;border-radius:50%;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.45);
  animation:waPulse 2.6s ease-in-out infinite;
}
.wa-avatar > img{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block}
.wa-badge{
  position:absolute;right:-2px;bottom:-2px;width:25px;height:25px;border-radius:50%;
  background:#25D366;border:2px solid #fff;display:flex;align-items:center;justify-content:center;
}
.wa-badge svg{width:15px;height:15px;display:block}
@keyframes waPulse{
  0%,100%{box-shadow:0 8px 22px -6px rgba(0,0,0,.45),0 0 0 0 rgba(37,211,102,.5)}
  50%    {box-shadow:0 8px 22px -6px rgba(0,0,0,.45),0 0 0 12px rgba(37,211,102,0)}
}
@media(max-width:620px){
  .wa-label{display:none}
  .wa-avatar,.wa-avatar > img{width:52px;height:52px}
  #whatsapp{bottom:calc(14px + env(safe-area-inset-bottom));right:max(14px, env(safe-area-inset-right))}
}
@media(prefers-reduced-motion:reduce){.wa-avatar{animation:none}}

.todo{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.1em;
  color:var(--rust);border:1px dashed var(--rust);border-radius:4px;
  padding:1px 5px;margin-left:6px;text-transform:uppercase;
}

/* ---------- misc ---------- */
.note{
  background:var(--paper-2);border:1px dashed var(--rule);border-radius:10px;
  padding:16px 18px;margin-top:26px;font-size:14.5px;color:var(--ink-2);
}
.band--dark .note,.hero .note{background:var(--dark-2);border-color:var(--dark-rule);color:var(--on-dark-2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- mobile navigation (checkbox + label, no JS) ---------- */
.burger{display:none}

@media (max-width:1080px){
  header.site .shell{flex-wrap:wrap;height:auto;padding-block:12px;gap:12px}
  .burger{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;width:42px;height:42px;flex:none;cursor:pointer;
    border:1px solid var(--rule);border-radius:10px;color:var(--ink);
  }
  .burger svg{width:20px;height:20px}
  nav.main{
    display:none;order:3;width:100%;margin-left:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding-top:12px;border-top:1px solid var(--rule);
  }
  .navtoggle:checked ~ nav.main{display:flex}
  nav.main a:not(.btn){padding:12px 10px;border-radius:8px;font-size:15.5px;letter-spacing:0}
  nav.main a:not(.btn)[aria-current="page"]{background:var(--paper-2)}
  nav.main .btn{justify-content:center;margin-top:8px}
}

@media (max-width:820px){
  .founder{grid-template-columns:1fr;gap:28px}
  .founder .portrait{max-width:260px}
  .closer{grid-template-columns:1fr;gap:30px}
  .band{padding-block:56px}
  .band--tight{padding-block:44px}
  .hero{padding-block:56px 50px}
}

/* ---------- phone: nothing may exceed the viewport ---------- */
@media (max-width:560px){
  body{overflow-x:hidden}
  h1{font-size:clamp(29px,7.4vw,60px)}
  h2{font-size:clamp(24px,6.2vw,42px)}
  h1,h2,h3{overflow-wrap:break-word}
  .hero .role{font-size:19px}
  .lead,.hero .lead{font-size:16.5px}
  .chain{gap:7px}
  .chain span{font-size:11px;padding:6px 10px}
  .cta-row .btn{flex:1 1 100%;justify-content:center}
  .microcopy{font-size:11px;letter-spacing:.03em}
  .markers{grid-template-columns:1fr 1fr}
  .stats{gap:20px}
  .sidecard{padding:20px}
}
@media (prefers-reduced-motion:no-preference){
  .band>.shell{animation:rise .5s ease-out both}
  @keyframes rise{from{opacity:.001;transform:translateY(7px)}to{opacity:1;transform:none}}
}