/* Digital Workforce System — v2 design system.
   Extracted from the v2 homepage so partners.html and platform.html share one
   vocabulary instead of three. Page-specific additions live at the bottom. */
:root{
    /* DWS palette. Gold is the brand; the dark band is a warm near-black, not
       a neutral one, so gold reads as intentional against it rather than as a
       highlight dropped onto grey. */
    --brand:#7C5A12;
    --brand-light:#E4C572;
    --brand-dark:#5E440E;
    --gold:#C6982E;

    --ink:#191712;
    --ink-2:#3A362C;
    --gray-600:#5C5749;
    --gray-500:#7E7869;
    --gray-400:#9C9587;
    --gray-200:#E2DED4;
    --gray-100:#EFECE4;
    --gray-50:#F7F5F0;
    --white:#FFFFFF;

    --band-a:#241B08;
    --band-b:#16130E;

    --display:"Fraunces",Georgia,serif;
    --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"Spline Sans Mono",ui-monospace,monospace;
    --max:1180px;
  }
  *{box-sizing:border-box}
  /* Nothing may push the page sideways. `break-word` only breaks a word when
     it genuinely does not fit, so headings still read normally; `anywhere` is
     reserved for the tokens that have no spaces at all. An unconstrained grid
     or flex child is the other classic blowout, hence min-width:0. */
  img,svg,video,iframe{max-width:100%;height:auto}
  p,li,h1,h2,h3,h4,td,th{overflow-wrap:break-word}
  .mono,code,a[href^="mailto:"]{overflow-wrap:anywhere}
  .cards > *,.split > *,.flow > *,.models > *,.row > *,.board > *,.trust-cards > *,
  .compare > *,.work-row > *,.vs-row > *,.stat-grid > *,.fgrid > *{min-width:0}
  html{scroll-behavior:smooth}
  body{
    /* overflow-x:clip, never hidden. `hidden` turns body into a scroll
       container, which on mobile Safari re-parents position:fixed children and
       is why a floating button can vanish. `clip` trims the overflow without
       that side effect. */
    margin:0;min-width:320px;overflow-x:clip;background:var(--gray-50);color:var(--ink);
    font-family:var(--body);font-size:15.5px;line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;margin:0;text-wrap:balance}
  p{margin:0}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .shell{width:min(calc(100% - 40px),var(--max));margin:0 auto}

  /* ── header ──────────────────────────────────────────────────────── */
  .site-header{position:sticky;top:0;z-index:50;width:100%;border-bottom:1px solid var(--gray-200);background:var(--white)}
  .hbar{display:flex;min-height:76px;align-items:center;gap:16px;padding:10px 0;flex-wrap:nowrap}
    .hbar .nav{margin-left:auto}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;
    font-size:17px;letter-spacing:-.01em;flex:none;min-width:0}
  /* The wordmark must never wrap. Without this it stacked to three lines on a
     phone and dragged the whole bar down with it. */
  .brand > span{white-space:nowrap;line-height:1.1}
  .brand .mark{height:30px;width:auto;display:block;flex:none}
  .brand .os{color:var(--brand)}
  .nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex-wrap:nowrap}
  .nav a{font-size:14.5px;white-space:nowrap;color:var(--ink-2);transition:color .15s}
  .nav a:hover{color:var(--brand)}
  .nav .cta{
    white-space:nowrap;border-radius:8px;background:var(--brand);color:#fff;
    padding:10px 16px;font-size:14.5px;font-weight:600;transition:background .15s;
  }
  .nav .cta:hover{background:var(--brand-dark);color:#fff}

  /* ── the dark band, with the grid ────────────────────────────────── */
  .band{position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(135deg,var(--band-a) 0%,var(--band-b) 50%,var(--band-a) 100%)}
  .grid-overlay,.glow{position:absolute;inset:0;z-index:0;pointer-events:none}
  .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:.08;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 42%, #000 38%, transparent 78%);
    mask-image:radial-gradient(ellipse 80% 60% at 50% 42%, #000 38%, transparent 78%);
  }
  .glow{background-image:radial-gradient(58% 48% at 50% 50%, rgba(198,152,46,.18), transparent 70%)}
  .band .inner{position:relative;z-index:10}

  /* ── hero ────────────────────────────────────────────────────────── */
  .hero{padding:56px 0 72px}
  @media(min-width:640px){.hero{padding-top:76px}}
  .hero .center{max-width:900px;margin:0 auto;text-align:center}
  .hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.06}
  .hero h1 span{display:block;color:var(--brand-light)}
  .hero .sub{margin:20px auto 0;max-width:600px;font-size:17.5px;line-height:1.58;color:rgba(255,255,255,.8);text-wrap:pretty}
  .hero-actions{margin-top:40px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:14px}
  @media(min-width:640px){.hero-actions{flex-direction:row;align-items:center}}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border-radius:8px;padding:14px 30px;font-size:16.5px;font-weight:600;
    transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn-white{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.08)}
  .btn-white:hover{background:var(--gray-100);box-shadow:0 10px 30px rgba(0,0,0,.22)}
  .btn-outline{border:2px solid rgba(255,255,255,.4);color:#fff}
  .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
  .btn-brand{background:var(--brand);color:#fff}
  .btn-brand:hover{background:var(--brand-dark)}
  .btn-brand-outline{border:2px solid var(--brand);color:var(--brand)}
  .btn-brand-outline:hover{background:rgba(124,90,18,.06)}
  .hero-note{margin-top:26px;font-size:14px;color:rgba(255,255,255,.6)}
  .hero-note a{font-weight:600;color:var(--brand-light);text-underline-offset:4px}
  .hero-note a:hover{text-decoration:underline}

  /* ── section furniture ───────────────────────────────────────────── */
  .sec{padding:60px 0}
  .sec-white{background:var(--white);border-bottom:1px solid var(--gray-200)}
  .sec-gray{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
  .sec-plain{background:var(--white)}
  .head{max-width:760px;margin:0 auto;text-align:center}
  .eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--brand);margin:0}
  .band .eyebrow{color:var(--brand-light)}
  .head h2{margin-top:12px;font-size:clamp(23px,2.9vw,32px);line-height:1.16}
  .head p{margin-top:14px;font-size:16.5px;color:var(--gray-600);line-height:1.58;max-width:66ch;margin-left:auto;margin-right:auto}
  .band .head p{color:rgba(255,255,255,.7)}
  .band .head h2{color:#fff}
  .head h2 span{display:block}

  /* ── card grids ──────────────────────────────────────────────────── */
  .cards{margin-top:40px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .card{
    border-radius:10px;border:1px solid var(--gray-200);background:var(--white);padding:19px 20px;
    box-shadow:0 1px 2px rgba(25,23,18,.04);transition:transform .2s ease,box-shadow .2s ease;
  }
  .card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(25,23,18,.08)}
  .card h3{font-size:17px;color:var(--ink);line-height:1.25}
  .card p{margin-top:7px;color:var(--gray-600);font-size:14.5px;line-height:1.5}
  .card-dashed{
    display:flex;flex-direction:column;justify-content:center;border:2px dashed rgba(124,90,18,.32);
    background:rgba(124,90,18,.035);box-shadow:none;
  }
  .card-dashed:hover{transform:none;box-shadow:none}
  .card-dashed strong{font-family:var(--display);font-weight:500;font-size:17px}
  a.card{display:block}

  /* ── stage tabs ──────────────────────────────────────────────────── */
  .stages{margin:40px auto 0;max-width:1000px}
  .tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  @media(min-width:640px){.tabs{grid-template-columns:repeat(4,1fr)}}
  .tab{
    position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);padding:14px 16px;text-align:left;cursor:pointer;
    font-family:var(--body);color:inherit;transition:border-color .15s,background .15s;
  }
  .tab:hover{border-color:rgba(255,255,255,.32)}
  .tab[aria-selected="true"]{border-color:rgba(228,197,114,.7);background:rgba(255,255,255,.1)}
  .tab .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:rgba(255,255,255,.4)}
  .tab[aria-selected="true"] .n{color:var(--brand-light)}
  .tab .t{margin-top:3px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.7)}
  .tab[aria-selected="true"] .t{color:#fff}
  .tab .fill{position:absolute;bottom:0;left:0;height:2px;background:var(--brand-light);width:0}
  .tab[aria-selected="true"] .fill{animation:tabFill 9s linear forwards}
  @keyframes tabFill{from{width:0}to{width:100%}}

  .stage-body{margin-top:32px;display:grid;gap:32px;align-items:start}
  @media(min-width:1024px){.stage-body{grid-template-columns:1fr 1fr;min-height:340px}}
  .stage-copy .step{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--brand-light)}
  .stage-copy h3{margin-top:10px;font-size:25px;color:#fff}
  .stage-copy p{margin-top:14px;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.7)}
  .stage-panel{
    overflow:hidden;border-radius:12px;background:rgba(10,9,6,.6);
    border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  .panel-bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);padding:10px 12px}
  .dot{height:10px;width:10px;border-radius:50%;display:inline-block}
  .panel-bar .name{
    flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45);
  }
  .panel-body{padding:18px}
  .plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .plist li{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:11px 14px;font-size:13.5px;color:rgba(255,255,255,.85);
  }
  .pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 9px;white-space:nowrap}
  .pill-core{background:rgba(228,197,114,.16);color:var(--brand-light)}
  .pill-edge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
  .panel-note{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.45)}
  .stage-cap{margin-top:12px;text-align:center;font-size:13.5px;font-style:italic;color:rgba(255,255,255,.6)}

  .band-note{
    margin:40px auto 0;max-width:860px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.04);padding:26px 30px;
  }
  .band-note p:last-child{margin-top:12px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.8)}

  /* ── two models ──────────────────────────────────────────────────── */
  .models{margin:40px auto 0;max-width:1060px;display:grid;gap:16px}
  @media(min-width:1024px){.models{grid-template-columns:1.14fr 1fr;align-items:start}}
  .model{border-radius:10px;border:1px solid var(--gray-200);background:var(--white);padding:26px;box-shadow:0 1px 2px rgba(25,23,18,.04)}
  .model-primary{border:2px solid var(--brand)}
  .model .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .model h3{font-size:21px}
  .tag{
    border-radius:999px;background:rgba(124,90,18,.1);color:var(--brand);
    padding:5px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  }
  .model > p{margin-top:11px;font-size:16px;color:var(--gray-600);line-height:1.5}
  .model ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
  .model li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2);font-size:14.5px;line-height:1.45}
  .model li svg{margin-top:3px;height:19px;width:19px;flex:none;color:var(--brand)}
  .model-alt li svg{color:var(--gray-400)}
  .model .actions{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
  .model .actions .btn{padding:12px 22px;font-size:15.5px}
  .link-arrow{display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:600;color:var(--brand)}
  .link-arrow:hover{color:var(--brand-dark)}

  /* ── pill flow ───────────────────────────────────────────────────── */
  .flow-pills{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--gray-600)}
  .flow-pills .p{border-radius:999px;border:1px solid var(--gray-200);background:var(--gray-50);padding:7px 18px}
  .flow-pills .a{color:var(--gray-400)}

  /* ── alternating detail rows ─────────────────────────────────────── */
  .row{display:grid;gap:36px;align-items:center}
  @media(min-width:1024px){.row{grid-template-columns:1fr 1fr}}
  .row h3{margin-top:10px;font-size:clamp(20px,2.4vw,26px)}
  .row > div > p{margin-top:13px;font-size:16px;color:var(--gray-600);line-height:1.55}
  .row .fine{margin-top:22px;font-size:14.5px;color:var(--gray-500)}
  .mock{overflow:hidden;border-radius:14px;border:1px solid var(--gray-200);background:var(--white);box-shadow:0 1px 2px rgba(25,23,18,.04)}
  .mock-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--gray-200);background:var(--gray-50);padding:11px 16px}
  .mock-bar b{font-size:14px;font-weight:600}
  .mock-bar span{font-size:12.5px;color:var(--gray-500)}
  .mock-body{padding:16px}
  .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
  .stat{border-radius:8px;border:1px solid var(--gray-200);background:var(--gray-50);padding:10px 13px}
  .stat b{display:block;font-family:var(--display);font-size:21px;font-weight:500;font-variant-numeric:tabular-nums}
  .stat span{font-size:12.5px;color:var(--gray-600)}
  .mock-label{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500)}
  .mock-list{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
  .mock-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--gray-200);border-radius:8px;padding:9px 13px;font-size:13px}
  .mono{font-family:var(--mono);font-size:11.5px;color:var(--gray-600)}
  .badge{border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .badge-core{background:rgba(124,90,18,.12);color:var(--brand-dark)}
  .badge-warn{background:#F6EBD2;color:#8A6212}
  .mock-fine{margin-top:13px;font-size:12.5px;color:var(--gray-500)}
  .crit{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
  .crit li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2)}
  .crit svg{margin-top:3px;height:16px;width:16px;flex:none;color:var(--brand)}
  .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .chip{border-radius:999px;padding:3px 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
  .chip-on{background:rgba(124,90,18,.12);color:var(--brand-dark)}
  .chip-off{background:var(--gray-100);color:var(--gray-600)}
  .mock-cta{margin-top:16px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--gray-100);padding-top:14px}
  .mock-cta b{border-radius:8px;background:var(--brand);color:#fff;padding:6px 13px;font-size:12.5px;font-weight:600}
  .mock-cta span{font-size:12.5px;color:var(--gray-500)}

  /* ── onboarding board ────────────────────────────────────────────── */
  .board{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  @media(min-width:640px){.board{grid-template-columns:repeat(4,1fr)}}
  .col-head{display:flex;align-items:center;justify-content:space-between}
  .col-head b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500)}
  .col-head span{font-size:11.5px;color:var(--gray-400)}
  .col-cards{margin-top:9px;display:grid;gap:8px}
  .tcard{border-radius:8px;border:1px solid var(--gray-200);background:var(--white);padding:11px;box-shadow:0 1px 2px rgba(25,23,18,.04)}
  .tcard p{font-size:12.5px;font-weight:500;line-height:1.35}
  .tcard .meta{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
  .tag-sm{border-radius:4px;background:var(--gray-100);padding:2px 7px;font-family:var(--mono);font-size:10px;color:var(--gray-600)}
  .tag-live{display:inline-flex;align-items:center;gap:5px;border-radius:4px;background:rgba(124,90,18,.12);padding:2px 7px;font-family:var(--mono);font-size:10px;color:var(--brand-dark)}
  .tag-live i{height:6px;width:6px;border-radius:50%;background:var(--brand);display:inline-block}

  /* ── trust ───────────────────────────────────────────────────────── */
  .trust{display:grid;gap:44px}
  @media(min-width:1024px){.trust{grid-template-columns:1fr 1fr;align-items:start}}
  .trust h2 span{display:block}
  .trust-cards{display:grid;gap:20px}
  @media(min-width:640px){.trust-cards{grid-template-columns:repeat(2,1fr)}}
  .trust-cards .card h3{font-size:16.5px}
  .trust-cards .card p{font-size:14px}

  /* ── closing band ────────────────────────────────────────────────── */
  .close-band{background:var(--brand);padding:64px 0;text-align:center;color:#fff}
  .close-band h2{font-size:clamp(23px,2.9vw,32px);color:#fff}
  .close-band p{margin:14px auto 0;max-width:600px;font-size:17px;color:rgba(255,255,255,.9)}
  .close-band .hero-actions{margin-top:36px}
  .close-band .btn-outline{border-color:#fff}

  /* ── footer ──────────────────────────────────────────────────────── */
  footer{background:var(--white);border-top:1px solid var(--gray-200)}
  .fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;padding:52px 0}
  @media(min-width:640px){.fgrid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:1024px){.fgrid{grid-template-columns:repeat(5,1fr)}}
  .fgrid .first{grid-column:span 2}
  @media(min-width:1024px){.fgrid .first{grid-column:span 1}}
  .fgrid h3{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  .fgrid ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
  .fgrid li a{font-size:14px;color:var(--gray-600)}
  .fgrid li a:hover{color:var(--brand)}
  .fbottom{border-top:1px solid var(--gray-200);padding:26px 0;text-align:center;font-size:13px;color:var(--gray-500)}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .tab .fill{width:100%}
  }

/* ── page additions: partners ─────────────────────────────────────── */

/* Hire-vs-partner arithmetic. Two columns that must line up row for row, so
   the reader compares figures rather than reading two lists. */
.compare{margin-top:36px;display:grid;gap:14px}
@media(min-width:900px){.compare{grid-template-columns:1fr 1fr;align-items:start}}
.ccol{border-radius:10px;border:1px solid var(--gray-200);background:var(--white);padding:22px 24px;box-shadow:0 1px 2px rgba(25,23,18,.04)}
.ccol.alt{border:2px solid var(--brand)}
.ccol > small{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray-500)}
.ccol.alt > small{color:var(--brand)}
.ccol h3{margin-top:6px;font-size:20px}
.ccol .sub{margin-top:3px;font-size:13px;color:var(--gray-500)}
.rows{list-style:none;margin:16px 0 0;padding:0;display:grid}
.rows li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:14px;line-height:1.4;color:var(--ink-2)}
.rows li:last-child{border-bottom:0}
.rows .fig{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.rows .fine{display:block;font-size:11.5px;color:var(--gray-400);margin-top:1px}
.tot{margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-200)}
.tot .n{display:block;font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.02em}
.ccol.alt .tot .n{color:var(--brand)}
.tot .cap{display:block;margin-top:6px;font-size:13px;color:var(--gray-600);line-height:1.5}
.compare-note{margin-top:20px;font-size:12px;color:var(--gray-500);line-height:1.55;max-width:78ch}
.compare-note a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* You bring / we provide */
.split{margin-top:36px;display:grid;gap:14px}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
.side{border-radius:10px;border:1px solid var(--gray-200);background:var(--white);padding:22px 24px}
.side.feat{border:2px solid var(--brand);background:rgba(124,90,18,.03)}
.side > small{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray-500)}
.side.feat > small{color:var(--brand)}
.side h3{margin-top:6px;font-size:19px}
.side ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.side li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.side li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--brand)}

/* Numbered delivery flow */
.flow{margin-top:36px;display:grid;gap:12px}
@media(min-width:640px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.flow{grid-template-columns:repeat(4,1fr)}}
.f{border-radius:10px;border:1px solid var(--gray-200);background:var(--white);padding:19px 20px;display:flex;flex-direction:column}
.f .n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--brand)}
.f h4{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.02em;margin:auto 0 6px}
.f p{color:var(--gray-600);font-size:14px;line-height:1.5}

/* Tagged cards */
.tag-line{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:8px}
.reg-list{list-style:none;margin:13px 0;padding:0;display:grid;gap:7px}
.reg-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.reg-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:700}

/* Pull quote */
.pull{margin-top:26px;font-family:var(--display);font-weight:500;font-size:clamp(18px,2.1vw,23px);
  line-height:1.35;max-width:34ch;letter-spacing:-.02em}
.pull em{font-style:normal;color:var(--brand)}
.band .pull{color:#fff}
.band .pull em{color:var(--brand-light)}

/* Apply form */
.cta-grid{display:grid;gap:44px;align-items:start}
@media(min-width:960px){.cta-grid{grid-template-columns:1fr 1fr}}
.cta-copy ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.cta-copy li{position:relative;padding-left:22px;font-size:15.5px;color:rgba(255,255,255,.8)}
.cta-copy li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--brand-light)}
.book{border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);padding:28px;display:grid;gap:14px}
.book label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75)}
.book input,.book textarea{
  width:100%;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);
  color:#fff;font-family:var(--body);font-size:15px;padding:11px 13px;
}
.book input:focus,.book textarea:focus{outline:2px solid var(--brand-light);outline-offset:1px;border-color:transparent}
.book textarea{resize:vertical}
.book .btn{width:100%;margin-top:4px}
.book .status{font-size:13px;color:rgba(255,255,255,.6);text-align:center}

/* ── page additions: platform ─────────────────────────────────────── */

/* Us-vs-them. Three columns so the claim and the counter-claim sit on one
   baseline; on narrow screens each row becomes its own stacked block. */
.vs{margin-top:36px;border-top:2px solid var(--ink)}
.vs-head,.vs-row{display:grid;grid-template-columns:1fr 1.25fr 1.25fr;gap:20px;padding:11px 2px;border-bottom:1px solid var(--gray-100)}
.vs-head{border-bottom:1px solid var(--gray-200)}
.vs-head span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray-500)}
.vs-head span:last-child{color:var(--brand)}
.vs-row .k{font-weight:600;font-size:14.5px}
.vs-row .a{color:var(--gray-500);font-size:14px;line-height:1.45}
.vs-row .b{color:var(--ink-2);font-size:14px;line-height:1.45;font-weight:500}
@media(max-width:820px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;gap:6px;padding:18px 2px}
  .vs-row .a::before{content:"Usual: ";font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400)}
  .vs-row .b::before{content:"DWOS: ";font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
}

/* Work table — the executor column is the point, so it gets its own track. */
.work{margin-top:36px;border-top:2px solid var(--ink)}
.work-row{display:grid;grid-template-columns:180px 1fr 140px;gap:20px;padding:12px 2px;border-bottom:1px solid var(--gray-100);align-items:baseline}
.work-row .n{font-family:var(--display);font-weight:500;font-size:16.5px;letter-spacing:-.02em}
.work-row .d{color:var(--gray-600);font-size:14.5px;line-height:1.45}
.work-row .x{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);text-align:right}
@media(max-width:820px){
  .work-row{grid-template-columns:1fr;gap:6px}
  .work-row .x{text-align:left}
}

/* Configuration chain */
.chain{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.chain .c{border-radius:999px;border:1px solid var(--gray-200);background:var(--gray-50);padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink-2)}
.chain .c.last{background:rgba(124,90,18,.1);border-color:rgba(124,90,18,.3);color:var(--brand-dark)}
.chain .a{color:var(--gray-400)}

/* "Why it matters" note under a screen */
.why{margin-top:18px;border-left:3px solid var(--brand);padding:2px 0 2px 14px;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:66ch}
.band .why{border-left-color:var(--brand-light);color:rgba(255,255,255,.78)}
.why b{font-weight:600;color:var(--ink)}
.band .why b{color:#fff}

/* Two-panel architecture split reuses .side; this just labels the halves. */
.arch-note{margin-top:26px;font-size:16px;line-height:1.55;color:var(--gray-600);max-width:66ch}


/* ── articles ─────────────────────────────────────────────────────── */
/* Long-form reading, so the measure narrows and the type grows back a step.
   Everything here is scoped to .art so it cannot leak into a marketing page. */
.artwrap{padding:52px 0 76px;background:var(--white)}
.art{max-width:720px;margin:0 auto;padding:0 24px}
.art .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brand);font-weight:500;display:block;margin-bottom:14px}
.art h1{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,40px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
.art .stand{font-size:18.5px;line-height:1.55;color:var(--gray-600);margin:0 0 28px}
.art figure{margin:0 0 32px}
.art figure img{width:100%;height:auto;border-radius:8px;display:block;border:1px solid var(--gray-200)}
.art h2{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.18;
  letter-spacing:-.02em;margin:36px 0 13px}
.art h3{font-family:var(--body);font-size:18px;font-weight:700;margin:26px 0 9px;letter-spacing:-.005em}
.art p{margin:0 0 16px;font-size:17px;line-height:1.66}
.art ul,.art ol{margin:0 0 19px;padding-left:22px}
.art li{margin-bottom:8px;line-height:1.6}
.art strong{font-weight:650}
.art a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.art .pull{background:var(--gray-50);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:19px 22px;margin:26px 0;font-family:var(--body);font-weight:400;font-size:17px;max-width:none}
.art .pull p{margin:0;font-size:17px;line-height:1.56}
.art .pull .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gray-500);display:block;margin-bottom:8px}
.art .end{border-top:1px solid var(--gray-200);margin-top:42px;padding-top:26px}
.art .end h3{margin-top:0}
.art .end p{color:var(--gray-600);font-size:16px}
.art .more{font-size:15px;color:var(--gray-600);margin-top:26px;
  border-top:1px solid var(--gray-100);padding-top:18px}


/* ── chat with founder ────────────────────────────────────────────── */
/* Sits above everything, on every page. 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:var(--white);color:var(--ink);font-family:var(--body);font-weight:600;font-size:13.5px;
  padding:9px 15px;border-radius:999px;border:1px solid var(--gray-200);
  box-shadow:0 6px 20px rgba(20,23,29,.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 var(--white);display:flex;align-items:center;justify-content:center}
@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){
  /* The label is the part that can collide with content on a phone; the avatar
     alone is still an obvious tap target. */
  .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}}


/* ── mobile navigation ────────────────────────────────────────────── */
/* Five links and a CTA do not fit a phone. Below 900px the row becomes a
   panel opened by a button; the CTA stays visible in the bar because it is
   the only control that matters on a small screen. */
.menu-btn{display:none;background:none;border:1px solid var(--gray-200);border-radius:8px;
  padding:9px 11px;cursor:pointer;color:var(--ink);line-height:0}
.menu-btn svg{width:20px;height:20px}
.nav-wrap{display:flex;align-items:center;gap:10px;flex:none}

/* The bar CTA's appearance AND its display live here, above the media queries.
   A `display` set after them would win the cascade at equal specificity and
   silently defeat their display:none — which is exactly what used to widen the
   header past the viewport on a phone. */
.nav-cta-mobile{white-space:nowrap;border-radius:8px;background:var(--brand);color:#fff;
  padding:9px 15px;font-size:14px;font-weight:600}
.nav-cta-mobile:hover{background:var(--brand-dark);color:#fff}
.nav .cta,.nav-cta-mobile{display:inline-flex}

/* Tap targets: 44px is the floor on touch, and the small nav CTA sat under it.
   Sizing only. Display stays with each element's own rule so the media queries
   below can still hide them. */
.btn,.nav .cta,.nav-cta-mobile,.menu-btn{min-height:44px;align-items:center;justify-content:center}

@media(max-width:900px){
  .hbar{min-height:66px;gap:12px}
  .brand{font-size:16.5px;gap:9px}
  .brand .mark{height:30px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  /* .nav is position:absolute at this width, so its margin-left:auto pushes
     nothing. The bar's trailing group has to claim the free space itself,
     otherwise the button sits against the wordmark mid-bar. */
  .nav-wrap{margin-left:auto}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--white);border-bottom:1px solid var(--gray-200);
    box-shadow:0 14px 30px rgba(20,23,29,.1);padding:6px 20px 14px;display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--gray-100);font-size:16px}
  .nav a:last-child{border-bottom:0}
  .nav .cta{display:none}          /* it sits in the bar at this width */
  .site-header{position:sticky}
  .hbar{position:relative}
}
@media(min-width:901px){
  .nav-cta-mobile{display:none}
  .nav-wrap{display:none}
}
@media(max-width:620px){
  /* The name stays. The bar CTA goes back into the menu panel, because the
     floating WhatsApp button already gives every page a permanent CTA. */
  .nav-cta-mobile{display:none}
  .nav .cta{display:flex;margin-top:10px;justify-content:center}
  .hbar{gap:10px;min-height:62px}
  .brand{font-size:15px;gap:8px}
  .brand .mark{height:27px}
}
@media(max-width:340px){
  .brand{font-size:13.5px}
  .brand .mark{height:24px}
}

/* ── page additions: continuity ───────────────────────────────────── */

/* Closing line on the Platform Build column. Sits under the bullets as a
   consequence of them, so it is set apart rather than reading as a fifth item. */
.model .model-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-100);
  font-size:14px;line-height:1.5;color:var(--gray-600)}

/* Two paths, not a new pillar section. Capped narrower than a full card grid
   so the block reads as a choice between two, not a feature row. */
.paths{margin:26px auto 0;max-width:820px;display:grid;gap:14px}
@media(min-width:720px){.paths{grid-template-columns:1fr 1fr}}
.paths-note{margin:16px auto 0;max-width:820px;text-align:center;font-size:13.5px;color:var(--gray-500)}

/* Platform partnership. Deliberately quiet — an alternative, not the offer. */
.pnote{margin:34px auto 0;max-width:820px;border-radius:10px;border:1px solid var(--gray-200);
  border-left:3px solid var(--brand);background:var(--gray-50);padding:22px 26px}
.pnote h3{margin-top:4px;font-size:19px;letter-spacing:-.02em}
.pnote p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--gray-600)}
.pnote .fine{margin-top:14px;font-size:12.5px;color:var(--gray-500)}

/* ── founder ──────────────────────────────────────────────────────── */
/* Deliberately small: this is a signature on the argument above it, not a
   section of its own. Same avatar as the chat widget, so the face that answers
   is the face that signed. */
.founder{display:flex;gap:20px;align-items:flex-start;max-width:760px;margin:0 auto}
.founder-av{width:72px;height:72px;border-radius:50%;flex:none;display:block;
  border:1px solid var(--gray-200)}
@media(min-width:640px){.founder-av{width:88px;height:88px}}
.founder-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
.founder-copy p{font-size:16.5px;line-height:1.62;color:var(--gray-600)}
.founder-copy a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}


/* ── product mockups ──────────────────────────────────────────────── */
/* Rebuilt as markup rather than screenshots: the text stays crisp at any
   zoom, and it restyles with the rest of the site instead of ageing. */
.shot{margin:38px 0 0;position:relative;padding:0}
.shot-narrow{max-width:660px;margin-left:auto;margin-right:auto}
.shot-glow{position:absolute;inset:-8% -4% 14%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 60% at 50% 42%, rgba(124,90,18,.16), transparent 72%);
  filter:blur(28px)}
.shot > .console,.shot > .dialog{position:relative;z-index:1}
.shot figcaption{position:relative;z-index:1;margin-top:16px;text-align:center;
  font-size:13.5px;color:var(--gray-500);max-width:58ch;margin-left:auto;margin-right:auto}

.console{display:grid;grid-template-columns:1fr;border-radius:13px;overflow:hidden;
  border:1px solid var(--gray-200);background:var(--white);
  box-shadow:0 26px 60px -22px rgba(25,23,18,.34),0 2px 6px rgba(25,23,18,.06)}
@media(min-width:820px){.console{grid-template-columns:186px 1fr}}
.console-side{background:linear-gradient(180deg,#1B1A17,#141310);color:#B7B2A6;padding:16px 12px;display:none}
@media(min-width:820px){.console-side{display:block}}
.con-brand{display:flex;align-items:center;gap:9px;padding:2px 8px 16px;
  font-family:var(--display);font-weight:600;font-size:14px;color:#fff}
.con-brand small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#7C766A;font-weight:400}
.con-logo{width:24px;height:24px;border-radius:6px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;flex:none}
.con-nav{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.con-nav li{font-size:12.5px;padding:7px 10px;border-radius:6px;color:#8D887C}
.con-nav li.on{background:rgba(255,255,255,.07);color:#fff;font-weight:600}
.console-main{padding:20px 18px 22px;background:var(--white);min-width:0}
.con-head h4{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;margin:0}
.con-head p{margin-top:4px;font-size:13px;color:var(--gray-500)}
.con-toggle{display:flex;align-items:center;gap:8px;margin:14px 0 16px;flex-wrap:wrap}
.con-toggle span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:5px 11px;
  border-radius:5px;background:var(--gray-100);color:var(--gray-600)}
.con-toggle span.on{background:var(--ink);color:#fff}
.con-toggle em{font-style:normal;font-size:12px;color:var(--gray-500)}
.console .board{gap:10px}
.console .col-head b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-500);font-weight:500}
.console .col-head span{font-family:var(--mono);font-size:10px;color:var(--gray-400)}
.tcard .tc-who{display:block;font-size:11px;color:var(--brand-dark);font-weight:600;margin-bottom:4px}
.tcard p{font-size:12px;line-height:1.42;color:var(--ink-2);margin:0}
.tcard .tc-foot{display:block;margin-top:8px;font-family:var(--mono);font-size:9.5px;color:var(--gray-400)}
.tcard .tag-sm{font-size:9px;padding:1px 5px;margin-right:5px}
.tcard.warn{border-color:rgba(154,107,18,.4);background:#FEFBF4}
.tcard.fail{border-color:rgba(168,51,42,.3);background:#FDF7F6}

.dialog{border-radius:13px;background:var(--white);border:1px solid var(--gray-200);
  padding:22px 24px 20px;box-shadow:0 30px 64px -24px rgba(25,23,18,.4),0 2px 6px rgba(25,23,18,.06)}
.dlg-head{display:flex;align-items:center;gap:9px}
.dlg-head .tag-sm{font-size:9.5px}
.tag-need{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:2px 8px;border-radius:999px;
  background:rgba(154,107,18,.13);color:#8A6212}
.dlg-x{margin-left:auto;border:1px solid var(--gray-200);background:none;border-radius:50%;
  width:22px;height:22px;color:var(--gray-400);line-height:1;cursor:default;font-size:13px}
.dlg-who{margin-top:12px;font-size:12.5px;color:var(--gray-500);font-family:var(--mono)}
.dlg-label{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--gray-400)}
.dlg-body{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.dlg-none{margin-top:6px;font-size:13.5px;color:var(--gray-500);font-style:italic}
.dlg-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--gray-100);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dlg-trace{font-size:13px;color:var(--brand-dark);font-weight:600}
.dlg-go{background:#137A4F;color:#fff;border-radius:7px;padding:8px 15px;font-size:13px;font-weight:600}
.dlg-id{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--gray-400)}

/* Founder identity block: avatar with the two places the work is public. */
.founder-id{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.founder-links{display:flex;gap:10px}
.founder-links a{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  background:var(--gray-100);color:var(--gray-600);transition:background .15s,color .15s}
.founder-links a:hover{background:var(--brand);color:#fff}
.founder-links svg{width:14px;height:14px;fill:currentColor}


/* ── fleet view + blueprint mockups ───────────────────────────────── */
.con-core{margin-top:18px;padding:10px 11px;border-radius:8px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08)}
.con-core small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#7C766A}
.con-core b{display:block;font-family:var(--mono);font-size:15px;color:#E4C572;margin-top:3px}
.con-core span{font-size:10.5px;color:#8D887C}
.fleet-scroll{overflow-x:auto;margin-top:16px;border:1px solid var(--gray-200);border-radius:9px}
table.fleet{border-collapse:collapse;width:100%;min-width:620px;font-size:12px}
table.fleet th{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gray-500);text-align:left;padding:9px 12px;border-bottom:1px solid var(--gray-200);
  background:var(--gray-50);font-weight:500;white-space:nowrap}
table.fleet td{padding:10px 12px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
table.fleet tr:last-child td{border-bottom:0}
table.fleet .r{text-align:right}
table.fleet .biz{font-weight:600;color:var(--ink);white-space:nowrap}
table.fleet .vert{color:var(--gray-500);font-size:11.5px;white-space:nowrap}
table.fleet .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
table.fleet tr.behind{background:#FDF8F7}
.ver{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:4px;
  background:rgba(124,90,18,.11);color:var(--brand-dark);white-space:nowrap}
.ver.old{background:rgba(168,51,42,.1);color:#A8332A}
.bp{display:flex;flex-direction:column;gap:3px}
.bp span{font-family:var(--mono);font-size:10.5px;color:var(--gray-600);white-space:nowrap}
.bp span.old{color:#A8332A}
.h{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;white-space:nowrap}
.h.ok{background:rgba(19,122,79,.12);color:#0E6E52}
.h.wait{background:rgba(154,107,18,.13);color:#8A6212}
.h.bad{background:rgba(168,51,42,.11);color:#A8332A}
.h.none{background:var(--gray-100);color:var(--gray-500)}
.con-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--gray-600);max-width:62ch}
.con-note b{font-family:var(--mono);font-size:11.5px;color:var(--brand-dark);font-weight:500}

.bp-ver{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
.bp-pin{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:3px 9px;border-radius:999px;background:rgba(124,90,18,.11);color:var(--brand-dark)}
.bp-split{display:grid;gap:22px;margin-top:20px}
@media(min-width:620px){.bp-split{grid-template-columns:1fr 1fr;gap:28px}}
.bp-list{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
.bp-list li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.bp-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px}
.bp-list.core li::before{background:var(--brand)}
.bp-list.cfg li::before{background:var(--gray-400)}
.bp-tail{margin-top:10px;font-size:12px;color:var(--gray-500);font-style:italic}
.bp-private{margin-top:22px;padding:14px 16px;border-radius:9px;background:var(--gray-50);
  border:1px dashed var(--gray-300)}
.bp-private p:last-child{margin-top:6px;font-size:13px;line-height:1.5;color:var(--gray-600)}


/* ── the journey ladder ───────────────────────────────────────────── */
/* One column, because the reader is locating themselves on it. The divider is
   the whole argument: above it they built alone and it worked, below it the
   character of the work changes. */
.journey{position:relative;margin:38px auto 0;max-width:560px;display:flex;flex-direction:column;gap:9px}
.jrn-glow{position:absolute;inset:-8% 0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 54% at 50% 46%, rgba(124,90,18,.15), transparent 70%);filter:blur(32px)}
.jrn-step{
  position:relative;z-index:1;border-radius:9px;padding:14px 18px;text-align:center;
  font-size:16px;line-height:1.35;color:var(--ink-2);
  background:linear-gradient(180deg,#FEFAF3,#FAF2E5);
  border:1px solid rgba(124,90,18,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px rgba(25,23,18,.05);
}
.jrn-step.is-here{
  border-color:rgba(124,90,18,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 16px -4px rgba(124,90,18,.34);
  font-weight:600;color:var(--ink);
}
.jrn-tag{
  display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand);font-weight:500;
}
.jrn-line{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:7px 2px}
.jrn-line::before,.jrn-line::after{content:"";flex:1;height:1px;background:var(--gray-300)}
.jrn-line span{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gray-500);white-space:nowrap}
.jrn-step.cost{
  background:linear-gradient(180deg,#20201B,#16160F);
  border-color:rgba(228,197,114,.24);color:#E8E1D0;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 16px -6px rgba(25,23,18,.45);
}
.jrn-note{margin:28px auto 0;max-width:58ch;text-align:center;font-size:15px;
  line-height:1.6;color:var(--gray-600)}
.jrn-note a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){
  .jrn-step{font-size:14.5px;padding:12px 14px}
  .jrn-line span{font-size:9.5px;letter-spacing:.08em}
}


/* The footer's 5-column grid gives the wordmark about 180px, which the header's
   white-space:nowrap turns into an overflow across the next column. Only the
   footer copy wraps; the header rule stays as it is. */
footer .brand{align-items:flex-start}
footer .brand > span{white-space:normal;line-height:1.15}
footer .brand .os{display:block}

/* The brand column carries a logo, a wordmark and a 34-character address; the
   other four hold short links. An even 5-track split forces the address to
   break mid-word, so this column gets the extra room instead. */
@media(min-width:1024px){
  .fgrid{grid-template-columns:1.55fr repeat(4,1fr)}
}
footer .first a[href^="mailto:"]{overflow-wrap:break-word;font-size:13.5px}


/* ── FAQ accordion ────────────────────────────────────────────────── */
/* Native <details> so the answers are in the DOM for crawlers and AI
   extraction whether or not anyone opens them. */
.faq{max-width:760px;margin:34px auto 0;border-top:1px solid var(--gray-200)}
.faq details{border-bottom:1px solid var(--gray-100)}
.faq summary{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.35;
  padding:17px 40px 17px 0;cursor:pointer;list-style:none;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:13px;font-size:23px;
  font-weight:400;color:var(--brand);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--brand-dark)}
.faq p{padding:0 0 20px;font-size:16.5px;line-height:1.62;color:var(--gray-600);max-width:66ch}

/* A button inside article prose: `.art a` (0,2,0) outranks `.btn-brand` (0,1,0),
   so the link colour was overwriting the button's own white text and adding an
   underline. Scope it back rather than raising every button's specificity. */
.art a.btn{text-decoration:none}
.art a.btn-brand,.art a.btn-brand:hover{color:#fff}
.art a.btn-white{color:var(--brand)}
.art a.btn-outline{color:#fff}
.art a.btn-brand-outline{color:var(--brand)}
.art .end p:last-child{margin-top:20px}

/* ── cursor glow on the dark bands ────────────────────────────────── */
/* Moved with transform only so it composites on the GPU rather than
   repainting a gradient every frame. pointer-events:none so it can never
   swallow a click on the hero CTAs. */
.cursor-glow{
  position:absolute;top:0;left:0;
  width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle closest-side,
    rgba(228,197,114,.20), rgba(228,197,114,.07) 45%, transparent 72%);
  opacity:0;transition:opacity .45s ease;
  will-change:transform;
}
.band.is-lit .cursor-glow{opacity:1}
.band > .shell{position:relative;z-index:2}
/* A cursor effect is meaningless without a cursor, and unwelcome for anyone
   who asked for less motion. */
@media (hover:none),(pointer:coarse){.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){.cursor-glow{display:none}}


/* The widget sits above the home indicator only if env() resolves, and env()
   resolves only when the viewport meta carries viewport-fit=cover. */
@media(max-width:620px){
  #whatsapp{bottom:calc(20px + env(safe-area-inset-bottom));right:max(16px, env(safe-area-inset-right))}
}

/* ── chat label, phone ────────────────────────────────────────────── */
/* Collapsed rather than display:none so it can animate open. The negative
   margin absorbs the flex gap while it has no width, otherwise the avatar
   sits 10px off the edge for no reason. */
@media(max-width:620px){
  .wa-label{
    display:block;max-width:0;opacity:0;
    padding-left:0;padding-right:0;margin-right:-10px;
    overflow:hidden;white-space:nowrap;
    transition:max-width .5s ease,opacity .35s ease,padding .5s ease,margin .5s ease;
  }
  #whatsapp.wa-open .wa-label{
    max-width:190px;opacity:1;
    padding-left:15px;padding-right:15px;margin-right:0;
  }
}
@media(prefers-reduced-motion:reduce){.wa-label{transition:none}}

/* ── case studies ─────────────────────────────────────────────────── */
.cases{display:flex;flex-direction:column;gap:18px;margin-top:36px}
.case{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;
  padding:26px 26px 22px;box-shadow:0 1px 2px rgba(25,23,18,.04)}
.case-head{display:grid;gap:14px;align-items:start}
@media(min-width:820px){.case-head{grid-template-columns:1fr 1fr;gap:32px}}
.case-head h3{font-size:23px;margin-top:6px}
.case-origin{margin-top:5px;font-size:13.5px;color:var(--gray-500)}
.case-claim{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.35;
  letter-spacing:-.02em;color:var(--ink);align-self:center}
.case-body{margin-top:16px;font-size:16px;line-height:1.6;color:var(--gray-600);max-width:70ch}
.case-chain{margin-top:18px;gap:7px}
.case-chain .c{font-size:12.5px;padding:5px 12px}
.case-src{margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-100);
  font-size:12.5px;color:var(--gray-500)}
.case-src a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}


/* ── homepage proof band ──────────────────────────────────────────── */
/* Three cards that are one object: same edges, the outcome always in the same
   place at the foot so the three figures line up as a row. */
.proofs{display:grid;gap:16px;margin-top:36px}
@media(min-width:820px){.proofs{grid-template-columns:repeat(3,1fr)}}
.proof{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:9px;text-decoration:none;
  box-shadow:0 1px 2px rgba(25,23,18,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.proof:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(25,23,18,.08);border-color:var(--brand)}
.proof-from{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.proof-what{font-size:14.5px;line-height:1.5;color:var(--gray-600);flex:1}
.proof-out{margin-top:6px;padding-top:12px;border-top:1px solid var(--gray-100);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark)}
.proofs-note{margin:24px auto 0;max-width:62ch;text-align:center;font-size:14.5px;color:var(--gray-500)}
.proofs-note a{color:var(--brand-dark);font-weight:600;text-decoration:none;white-space:nowrap}
.proofs-note a:hover{text-decoration:underline}


/* ── case illustrations ───────────────────────────────────────────── */
.proof-img{display:block;border-radius:9px;overflow:hidden;background:var(--cream,#F6EFE6);
  margin:-4px 0 4px;aspect-ratio:1;max-width:96px}
.proof-img img{display:block;width:100%;height:auto}
.case{display:grid;gap:22px}
@media(min-width:900px){.case{grid-template-columns:160px 1fr;align-items:start}}
.case-img{border-radius:10px;overflow:hidden;background:#F6EFE6;border:1px solid var(--gray-200)}
.case-img img{display:block;width:100%;height:auto}
.case > .case-head,.case > .case-body,.case > .case-chain,.case > .case-src{grid-column:1/-1}
@media(min-width:900px){
  .case > .case-head{grid-column:2}
  .case > .case-body,.case > .case-chain,.case > .case-src{grid-column:2}
}

/* ── primary action colour ────────────────────────────────────────── */
/* Gold is the brand and reads as decoration once it is on every surface. The
   one thing we want clicked gets a colour nothing else on the page uses. */
:root{--go:#12734E;--go-dark:#0C5638}
.btn-brand,.nav .cta,.nav-cta-mobile{background:var(--go);color:#fff}
.btn-brand:hover,.nav .cta:hover,.nav-cta-mobile:hover{background:var(--go-dark);color:#fff}
.btn-white{color:var(--go-dark)}
.art a.btn-brand,.art a.btn-brand:hover{color:#fff}