/* Shared structure for kintoro.com and pimonk.com: layout primitives and component
   structure only. All brand identity (type families, colours, radii, header and footer
   look, hero treatment, motion character) lives in each site's site.css, so the two
   brands can diverge fully.

   Contract: every token below is set by site.css (light and dark). The values here are
   neutral fallbacks so a page still renders if site.css fails to load.
     Type          --font-body --font-head --font-label  --w-head --w-hero --w-strong
     Grounds, ink  --bg --surface --surface-2 --text --muted --line --line-strong
     Brand         --brand (fills, rules)  --brand-ink (text)  --brand-soft (tint)
                   --brand-strong / --brand-strong-hover (primary action) --on-brand
     Links         --link
     Status        --ok --ok-tint (live)  --warn --warn-tint (coming)
     Page colour   --sig --sig-ink (the brand, or the product/business a page is about)
     Card colour   --c --ci (set per card by site.css when a card is about something)
     Dark bands    --night --night-2 --night-text --night-muted --night-accent
     Shape         --r (containers) --r-ctl (controls) --rule-accent (accent rule width)
     Motion        --ease-out --dur-state --dur-reveal --reveal-shift
     Hero motif    --hero-motif: arcs | none (read by site.js)
     Legacy        --mono --display --body --accent --accent-ink --accent-soft (aliases) */
:root{
  --font-body:system-ui,-apple-system,'Segoe UI',sans-serif; --font-head:var(--font-body); --font-label:var(--font-body);
  --w-head:500; --w-hero:400; --w-strong:600;
  --bg:#F4F4F2; --surface:#FFFFFF; --surface-2:#ECECE8; --text:#16191D; --muted:#555B62;
  --line:#DADBD6; --line-strong:#B5B8B2;
  --brand:#555B62; --brand-ink:#33383E; --brand-soft:#E6E7E3; --brand-strong:#33383E; --brand-strong-hover:#16191D; --on-brand:#FFFFFF;
  --link:#33383E; --ok:#00703A; --ok-tint:#E2F3E9; --warn:#8A5A00; --warn-tint:#FAEDD5;
  --sig:var(--brand); --sig-ink:var(--brand-ink); --c:var(--line-strong); --ci:var(--brand-ink);
  --night:#16191D; --night-2:#23272C; --night-text:#F2F2EF; --night-muted:#BFC3C8; --night-accent:#F2F2EF;
  --r:8px; --r-ctl:6px; --rule-accent:2px;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-state:180ms; --dur-reveal:600ms; --reveal-shift:24px;
  --maxw:1200px; --headh:68px;
  /* Signature-style tokens shared by every site (values set per brand in site.css).
     Agent: anything an agent is doing. Night-*: ink bands and the dark-on-ink status set. */
  --agent:#6D4AFF; --agent-ink:#5B3BE8; --agent-soft:#ECE8FF; --crit:#B3282B;
  --night-line:#3A3F45; --night-line-strong:#555B62; --night-agent:#A794FF; --night-agent-soft:#2A2350;
  --night-ok:#5FD494; --night-ok-tint:#14301F; --night-warn:#E8B65C; --night-warn-tint:#33260B; --night-brand-soft:#3A2A18;
  --ease-sig:cubic-bezier(.16,.84,.44,1); --ease-micro:cubic-bezier(.4,0,.2,1);
  --dock-h:64px;
  /* Legacy aliases still referenced by page fragments and start.css. */
  --mono:var(--font-label); --display:var(--font-head); --body:var(--font-body);
  --accent:var(--brand); --accent-ink:var(--brand-ink); --accent-soft:var(--brand-soft);
}
*{box-sizing:border-box}
html,body,body *{font-synthesis:none}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--headh) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font-family:var(--font-body)}
body.noscroll{overflow:hidden}
/* Clip full-bleed hero decoration horizontally without creating a scroll container,
   so sticky sub-navigation keeps working. */
main{overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--w-head);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:var(--w-hero)}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:1.28rem}
h4{font-family:var(--font-body);font-size:1rem;font-weight:var(--w-strong)}
p{margin:0}
a{color:var(--link)}
img,svg{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:var(--r-ctl)}
.skip:focus{left:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-family:var(--font-label);font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);display:block}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.src{font-size:.8rem;color:var(--muted)}
/* Chips: status is always a word plus a tint, never a colour alone. */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-ctl);border:1px solid var(--line-strong);color:var(--muted);background:var(--surface);white-space:nowrap;line-height:1.5}
.chip.live{border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok);background:var(--ok-tint)}
.chip.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.soon{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn);background:var(--warn-tint)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-ctl);font:inherit;font-weight:var(--w-strong);font-size:.94rem;text-decoration:none;border:1px solid var(--line-strong);color:var(--text);background:transparent;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-state),border-color var(--dur-state),color var(--dur-state)}
.btn:hover{border-color:var(--text);background:var(--surface-2)}
.btn.primary,.btn.accent{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand)}
.btn.primary:hover,.btn.accent:hover{background:var(--brand-strong-hover);border-color:var(--brand-strong-hover)}
.link-arrow{font-weight:var(--w-strong);text-decoration:none;color:var(--text);border-bottom:1px solid var(--brand);padding-bottom:1px;transition:border-color var(--dur-state)}
.link-arrow::after{content:"\2192";display:inline-block;margin-left:.3em;transition:transform var(--dur-state) var(--ease-out)}
.link-arrow:hover{border-bottom-color:var(--text)}
.link-arrow:hover::after{transform:translateX(4px)}
.draftnote{background:var(--brand-soft);color:var(--text);font-size:.82rem;padding:8px 16px;text-align:center;margin:0}
/* Layer bar (GTM spec section 5): Kintoro > piMonk > product, the same on every site.
   The current layer is bold; the others are links. */
.layerbar{background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--font-label);font-size:.76rem;letter-spacing:.02em}
.layerbar ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:5px 0}
.layerbar li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.layerbar li+li::before{content:"\203A";color:var(--muted)}
.layerbar a{color:var(--muted);text-decoration:none}
.layerbar a:hover{color:var(--text);text-decoration:underline}
.layerbar strong{color:var(--text);font-weight:var(--w-strong)}

/* Header and menus */
.site-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:background-color var(--dur-state),border-color var(--dur-state)}
.site-head.scrolled{border-bottom-color:var(--line-strong)}
.head-in{display:flex;align-items:center;gap:24px;min-height:var(--headh)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:1.3rem;text-decoration:none;color:var(--text);flex-shrink:0}
.logo small{font-family:var(--font-body);font-size:.75rem;color:var(--muted)}
.logo svg{overflow:visible}
.logo .mk-pi{font-family:var(--font-head)}
.mainnav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:1}
.nav-list{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.top-link{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.93rem;color:var(--text);text-decoration:none;background:none;border:0;padding:10px 12px;border-radius:var(--r-ctl);cursor:pointer;transition:background-color var(--dur-state),color var(--dur-state)}
.top-link:hover,.top-link[aria-expanded="true"]{background:var(--surface-2)}
.top-link[aria-current]{color:var(--brand-ink);background-image:linear-gradient(var(--brand),var(--brand));background-size:calc(100% - 24px) 2px;background-position:50% 100%;background-repeat:no-repeat}
.top-link svg{transition:transform var(--dur-state)}
.top-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-ctas{display:flex;gap:8px}
.nav-ctas .btn{padding:8px 16px;font-size:.88rem}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line-strong)}
.has-menu > button[aria-expanded="true"] + .mega{display:block;animation:fade-in .2s var(--ease-out)}
.mega-in{display:grid;grid-template-columns:1fr 300px;gap:32px;padding-block:28px 32px}
.mm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.mm-h{font-family:var(--font-label);font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mm-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mm-col a{display:flex;flex-direction:column;padding:8px 10px;margin-inline:-10px;border-radius:var(--r-ctl);text-decoration:none;color:var(--text);transition:background-color var(--dur-state)}
.mm-col a:hover{background:var(--surface-2)}
.mm-col a:hover .mi-l{color:var(--ci)}
.mi-l{font-weight:var(--w-strong);font-size:.93rem}
.mi-d{font-size:.82rem;color:var(--muted);line-height:1.4}
.mm-feature{display:flex;flex-direction:column;gap:8px;background:var(--night);color:var(--night-text);border-radius:var(--r);border-top:var(--rule-accent) solid var(--brand);padding:22px;text-decoration:none;transition:background-color var(--dur-state)}
.mm-feature:hover{background:var(--night-2)}
.mm-feature .eyebrow{color:var(--night-accent)}
.mm-feature .mi-d{color:var(--night-muted)}
.mm-ft{font-family:var(--font-head);font-size:1.3rem;line-height:1.2}
.mm-go{margin-top:auto;font-weight:var(--w-strong);font-size:.88rem;color:var(--night-accent)}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--text);transition:transform var(--dur-state),opacity var(--dur-state)}
.nav-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .menu-toggle span:nth-child(2){opacity:0}
.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1060px){
  .menu-toggle{display:flex}
  .mainnav{display:none;position:fixed;inset:var(--headh) 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto;padding:12px 16px 32px;gap:16px}
  .nav-open .mainnav{display:flex}
  .nav-list{flex-direction:column}
  .top-link{width:100%;justify-content:space-between;font-size:1.05rem;padding:14px 8px;border-bottom:1px solid var(--line);border-radius:0}
  .top-link[aria-current]{background-size:3px 60%;background-position:0 50%}
  .mega{position:static;border:0;background:transparent}
  .mega-in{grid-template-columns:1fr;padding:8px 0 16px}
  .mega .wrap{padding-inline:8px}
  .nav-ctas{flex-direction:column}
  .nav-ctas .btn{justify-content:center;padding:12px}
}

/* Breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:16px 0 0;font-size:.82rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-strong)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--dur-state)}
.crumbs a:hover{color:var(--sig-ink)}
.crumbs [aria-current]{color:var(--text)}

/* Heroes */
.hero{padding-block:72px 64px;position:relative;isolation:isolate}
.hero h1{max-width:20ch}
.hero .sub{font-size:1.2rem;max-width:56ch;margin-top:22px;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero.page{padding-block:44px 40px}
.hero.page h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:24ch}
.hero-split{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.hero-split > *{min-width:0}
.hero .eyebrow,.article-head .eyebrow{color:var(--sig-ink)}
/* Hero content arrives on first load (eyebrow, headline, lede, CTAs, then the rest).
   Distance and duration come from the site's --reveal-shift and --dur-reveal. */
.hero > :not(.hero-arcs),.hero-split > div > *,.article-head > *{animation:hero-in var(--dur-reveal) var(--ease-out) both}
.hero > :nth-child(2),.hero-split > div > :nth-child(2),.article-head > :nth-child(2){animation-delay:.08s}
.hero > :nth-child(3),.hero-split > div > :nth-child(3),.article-head > :nth-child(3){animation-delay:.16s}
.hero > :nth-child(4),.hero-split > div > :nth-child(4),.article-head > :nth-child(4){animation-delay:.24s}
.hero > :nth-child(5),.hero-split > div > :nth-child(5),.article-head > :nth-child(5){animation-delay:.32s}
.hero > :nth-child(n+6),.hero-split > div > :nth-child(n+6),.article-head > :nth-child(n+6){animation-delay:.4s}
.hero-split > div{animation:none}
.hero-split > div:nth-child(2){animation:hero-in var(--dur-reveal) var(--ease-out) .3s both}
.hero-split > div:nth-child(2) > *{animation:none}
/* Optional hero geometry injected by site.js when the site sets --hero-motif: arcs. */
.hero-arcs{position:absolute;z-index:-1;top:0;bottom:0;right:calc(50% - 50vw);width:min(62vw,820px);height:100%;pointer-events:none;overflow:hidden}
.hero-arcs circle{fill:none;vector-effect:non-scaling-stroke}

/* Sections */
section.s{padding-block:72px;border-top:1px solid var(--line)}
section.s.tight{padding-block:48px}
section.s.flush{border-top:0;padding-top:8px}
section.s.alt{background:var(--surface)}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;max-width:64ch}
.head p{color:var(--muted);font-size:1.08rem}
.head.center{margin-inline:auto;text-align:center;align-items:center}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.head-row .head{margin-bottom:0}

/* Grids and cards */
.grid2,.grid3,.grid4{display:grid;gap:16px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color var(--dur-state),background-color var(--dur-state)}
.card h3{font-size:1.22rem}
.card .muted{font-size:.95rem}
.card.accent-top{border-top:var(--rule-accent) solid var(--brand)}
a.card{text-decoration:none;color:var(--text)}
a.card:hover{border-color:var(--text)}
a.card .go{margin-top:auto;padding-top:8px;font-weight:var(--w-strong);font-size:.9rem;color:var(--ci)}
a.card .go::after{content:"\2192";display:inline-block;margin-left:.3em;transition:transform var(--dur-state) var(--ease-out)}
a.card:hover .go::after{transform:translateX(5px)}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pn{font-family:var(--font-head);font-size:1.4rem}
.pn b,.pi{color:var(--ci);font-weight:inherit}
.letter{font-family:var(--font-head);font-size:2.6rem;color:var(--brand-ink);line-height:1}
.n{color:var(--brand-ink);font-size:1rem;font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px;min-width:0}
.panel.dark{background:var(--night);border-color:var(--night);color:var(--night-text)}
.panel.dark .muted,.panel.dark .src{color:var(--night-muted)}
.panel.dark .eyebrow{color:var(--night-accent)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:48px}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--surface);padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.stat .v{font-size:2.2rem;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--text)}
.stat .v.acc{color:var(--brand-ink)}

/* Lists */
.tick{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.96rem}
.tick li{padding-left:22px;position:relative}
.tick li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.cross li::before{background:var(--line-strong)}
.plain{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.plain li::marker{color:var(--brand-ink);font-variant-numeric:tabular-nums}

/* Feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-block:40px;border-top:1px solid var(--line)}
.frow:first-of-type{border-top:0}
.frow > *{min-width:0}
.frow.flip > :first-child{order:2}
.frow .txt{display:flex;flex-direction:column;gap:14px}

/* In-page sub navigation (site.js marks the section being read with .on) */
.subnav{position:sticky;top:var(--headh);z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.subnav ul{list-style:none;display:flex;gap:4px;margin:0;padding:10px 0;overflow-x:auto;scrollbar-width:none}
.subnav a{display:block;white-space:nowrap;padding:5px 12px;border-radius:var(--r-ctl);border:1px solid transparent;font-size:.88rem;text-decoration:none;color:var(--muted);transition:background-color var(--dur-state),color var(--dur-state),border-color var(--dur-state)}
.subnav a:hover{background:var(--surface-2);color:var(--text)}
.subnav a.on{background:var(--brand-soft);color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.94rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-label);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:var(--w-strong);background:var(--surface-2)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background-color var(--dur-state)}
tbody tr:hover{background:var(--bg)}
table.compare th.us,table.compare td.us{background:var(--brand-soft)}
table.compare th.us{color:var(--brand-ink)}
.yes{color:var(--ok);font-weight:var(--w-strong)}
.no{color:var(--muted)}

/* Steps and timelines */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:st}
.steps .card{border-top:var(--rule-accent) solid var(--brand)}
.when{font-size:.82rem;font-weight:var(--w-strong);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-strong);display:flex;flex-direction:column;gap:28px}
.timeline li{position:relative;padding-left:26px;display:flex;flex-direction:column;gap:6px}
.timeline li::before{content:"";position:absolute;left:-7px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--brand)}

/* Key-value specs */
.spec{display:grid;grid-template-columns:minmax(140px,220px) 1fr;margin:0;border-top:1px solid var(--line)}
.spec dt,.spec dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:var(--w-strong);font-size:.93rem;padding-right:16px}
.spec dd{color:var(--muted);font-size:.95rem}

/* Callouts */
.callout{border-left:3px solid var(--brand);background:var(--brand-soft);padding:14px 18px;border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:.95rem}
.callout.jade{border-color:var(--ok);background:var(--ok-tint)}
.pull{font-family:var(--font-head);font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;border-left:3px solid var(--brand);padding-left:22px;margin:0}

/* CTA band: a dark ground swap with an accent rule. */
.cta-band{background:var(--night);color:var(--night-text);border-radius:var(--r);border-top:var(--rule-accent) solid var(--brand);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.cta-band h2{color:var(--night-text)}
.cta-band .eyebrow{color:var(--night-accent)}
.cta-band p{color:var(--night-muted)}
.cta-band .btn{background:transparent;border-color:var(--night-muted);color:var(--night-text)}
.cta-band .btn:hover{background:var(--night-2);border-color:var(--night-text)}
.cta-band .btn.primary{background:var(--night-text);border-color:var(--night-text);color:var(--night)}
.cta-band .btn.primary:hover{background:#fff;border-color:#fff}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding-block:16px}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:var(--w-strong);font-size:1.04rem;list-style-position:outside;transition:color var(--dur-state)}
.faq summary::marker{color:var(--brand)}
.faq summary:hover,.faq details[open] > summary{color:var(--brand-ink)}
.faq details[open] > :not(summary){animation:fade-in .25s var(--ease-out)}
.faq details > :not(summary){margin-top:10px;color:var(--muted);max-width:70ch}

/* Resources */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text);min-width:0;transition:border-color var(--dur-state),background-color var(--dur-state)}
.rcard:hover{border-color:var(--text)}
.rcard .type{font-family:var(--font-label);font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--ci)}
.rcard h3{font-size:1.2rem}
.rcard .meta{margin-top:auto;font-size:.8rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.filters button{font:inherit;font-size:.86rem;padding:6px 14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;transition:background-color var(--dur-state),border-color var(--dur-state)}
.filters button:hover{border-color:var(--text)}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* Articles */
.article-head{position:relative;padding-block:40px 32px;display:flex;flex-direction:column;gap:16px;max-width:820px}
.article-head h1{font-size:clamp(2rem,4.6vw,3.2rem)}
.article-head .dek{font-size:1.22rem;color:var(--muted)}
.byline{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.article-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding-bottom:72px;align-items:start}
.article-layout > *{min-width:0}
.prose > table{display:block;overflow-x:auto}
.prose pre{overflow-x:auto}
.toc{position:sticky;top:calc(var(--headh) + 24px);font-size:.86rem}
.toc::before{content:"In this piece";display:block;font-family:var(--font-label);font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line-strong)}
.toc a{display:block;padding-left:12px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;line-height:1.35;transition:color var(--dur-state),border-color var(--dur-state)}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--brand-ink);border-left-color:var(--brand)}
.prose{max-width:68ch;font-size:1.08rem;line-height:1.72}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:1.75rem;margin-top:1.9em}
.prose h3{font-size:1.3rem;margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--brand)}
.prose blockquote{margin-inline:0;font-family:var(--font-head);font-size:1.35rem;line-height:1.4;border-left:3px solid var(--brand);padding-left:20px}
.prose figure{margin-inline:0}
.prose figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
.prose .table-wrap{font-size:.92rem}
.endnotes{border-top:1px solid var(--line);padding-top:18px;font-size:.86rem;color:var(--muted)}
.endnotes ol{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}

/* Diagrams: accent boxes carry the brand, jade boxes carry "live"; connectors draw in. */
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,3vw,28px)}
.diagram svg{display:block;width:100%;height:auto}
.diagram text{font-family:var(--font-body);fill:var(--text)}
.diagram .d-mono{font-family:var(--font-label);font-variant-numeric:tabular-nums}
.diagram .d-muted{fill:var(--muted)}
.diagram .d-box{fill:var(--bg);stroke:var(--line-strong)}
.diagram .d-acc{fill:var(--brand-soft);stroke:var(--brand)}
.diagram .d-jade{fill:var(--ok-tint);stroke:var(--ok)}
.diagram .d-line{stroke:var(--muted);fill:none}

/* Forms */
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:var(--w-strong);font-size:.93rem}
.form input,.form select,.form textarea{font:inherit;font-weight:400;font-size:.96rem;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);width:100%;transition:border-color var(--dur-state)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--text)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Footer */
.site-foot{margin-top:24px;padding-block:56px 40px;font-size:.9rem;background:var(--surface);border-top:1px solid var(--line-strong)}
.foot-top{display:grid;grid-template-columns:280px 1fr;gap:48px}
.foot-brand{display:flex;flex-direction:column;gap:14px;color:var(--muted)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px}
.fh{font-family:var(--font-label);font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fcol a{color:var(--text);text-decoration:none;transition:color var(--dur-state)}
.fcol a:hover{color:var(--brand-ink)}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}

@media (max-width:1000px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.rgrid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-split,.frow,.cta-band{grid-template-columns:1fr}
  .frow.flip > :first-child{order:0}
  .cta-band .acts{justify-content:flex-start}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .foot-top{grid-template-columns:1fr}
  .stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid2,.grid3,.grid4,.rgrid,.steps,.stats,.stats.four{grid-template-columns:1fr}
  .hero{padding-block:44px 40px}
  section.s{padding-block:52px}
  .spec{grid-template-columns:1fr}
  .spec dt{border-bottom:0;padding-bottom:0}
  .form .row{grid-template-columns:1fr}
  body{font-size:16px}
}

/* ==== Signature-style components (shared by every site; see /brand/ on pimonk.com) ====
   Colour by meaning: --agent = an agent is doing this; --brand = a person decides or acts.
   Every moving part reports a state change and is armed by site.js only when motion is
   allowed; without JS or with reduced motion each component shows its finished state. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ink band: a full-width dark section. Tokens are re-pointed inside it, so every
   component (cards, tables, chips, buttons) renders correctly on ink without variants. */
section.s.ink,.ink-scope{
  --bg:var(--night); --surface:var(--night-2); --surface-2:var(--night);
  --text:var(--night-text); --muted:var(--night-muted); --faint:var(--night-muted);
  --line:var(--night-line); --line-strong:var(--night-line-strong);
  --brand-ink:var(--night-accent); --brand-soft:var(--night-brand-soft); --link:var(--night-accent); --sig-ink:var(--night-accent); --ci:var(--night-text);
  --agent-ink:var(--night-agent); --agent-soft:var(--night-agent-soft);
  --ok:var(--night-ok); --ok-tint:var(--night-ok-tint); --warn:var(--night-warn); --warn-tint:var(--night-warn-tint);
  background:var(--bg); color:var(--text)
}
section.s.ink{border-top-color:var(--night)}
section.s.ink + section.s{border-top-color:transparent}

/* Status words. Live / Preview / Launching / Invite only / On the roadmap, plus the two
   actors: Agent (violet) and You or People (brand). Always a word, never a colour alone. */
.chip.agent{border-color:color-mix(in srgb,var(--agent) 50%,transparent);color:var(--agent-ink);background:var(--agent-soft)}
.chip.agent::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.you{border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:var(--brand-ink);background:var(--brand-soft)}
.chip.invite{color:var(--text)}
.chip.road{border-style:dashed}

/* Process strip: <ol class="flow"><li data-who="agent|person"><b>Step</b><span>Line</span></li></ol>
   The connector draws and the steps light up in sequence as the strip arrives. */
.flow{--p:1;list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px;position:relative;counter-reset:fl}
.flow::before,.flow::after{content:"";position:absolute;left:15px;right:15px;top:15px;height:2px;background:var(--line-strong);transform-origin:0 50%}
.flow::after{background:var(--brand);transform:scaleX(var(--p));transition:transform 520ms var(--ease-sig)}
.flow > li{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding-top:44px;counter-increment:fl;min-width:0;transition:opacity 260ms var(--ease-micro)}
.flow > li::before{content:counter(fl);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:var(--w-strong);font-variant-numeric:tabular-nums;background:var(--brand);border:2px solid var(--brand);color:var(--on-brand);transition:background-color 260ms var(--ease-micro),border-color 260ms,color 260ms}
.flow > li[data-who="agent"]::before{background:var(--agent);border-color:var(--agent);color:#fff}
.flow > li b{font-weight:var(--w-strong);font-size:1rem;line-height:1.3}
.flow > li > span:not(.who){font-size:.92rem;color:var(--muted);line-height:1.45}
.flow .who{order:-1;font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.flow [data-who="agent"] .who{color:var(--agent-ink)}
.flow.flow-armed{--p:0}
.flow.flow-armed > li:not(.on){opacity:.45}
.flow.flow-armed > li:not(.on)::before{background:var(--bg);border-color:var(--line-strong);color:var(--muted)}
@media (max-width:700px){
  .flow{grid-auto-flow:row;gap:18px}
  .flow::before,.flow::after{left:15px;right:auto;top:16px;bottom:16px;width:2px;height:auto;transform-origin:50% 0}
  .flow::after{transform:scaleY(var(--p))}
  .flow > li{padding:4px 0 0 48px}
}

/* Split bar: <figure class="split-bar" data-split="72"><div class="sb-track"><i></i></div>
   <figcaption><span class="sb-a">...</span><span class="sb-b">...</span></figcaption></figure>
   First share (agents, violet) fills from the left on reveal; the rest is people (brand). */
.split-bar{--split:50;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.sb-track{height:10px;border-radius:5px;background:var(--brand);overflow:hidden}
.sb-track i{display:block;height:100%;background:var(--agent);transform:scaleX(calc(var(--split) / 100));transform-origin:0 50%;transition:transform 900ms var(--ease-sig)}
.split-bar.sb-armed .sb-track i{transform:scaleX(0)}
.split-bar figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem}
.split-bar figcaption span{display:inline-flex;align-items:center;gap:8px}
.split-bar figcaption span::before{content:"";width:10px;height:10px;border-radius:2px;flex:none}
.sb-a{color:var(--agent-ink)}
.sb-a::before{background:var(--agent)}
.sb-b{color:var(--brand-ink)}
.sb-b::before{background:var(--brand)}
.split-bar b{font-weight:var(--w-strong);font-variant-numeric:tabular-nums}

/* Typed agent output: <p class="typed"><span class="ty-who">piRevenue agent</span>Text</p>
   The text types in once when it arrives; the caret shows only while it is typing. */
.typed{display:flex;flex-direction:column;gap:4px;margin:0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--agent);border-radius:var(--r-ctl);font-size:.98rem;line-height:1.5;min-height:4.6em}
.ty-who{font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.08em;text-transform:uppercase;color:var(--agent-ink)}
.ty-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--agent)}
.typed.ty-done .ty-caret{display:none}

/* Before and after: <div class="ba"><div class="ba-item"><span class="ba-l">Before</span>
   <span class="ba-v">$900</span><span class="ba-u">a month</span></div><div class="ba-arrow"></div>
   <div class="ba-item ba-after">...</div></div>. After counts down from the before value. */
.ba{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;gap:16px;min-width:0}
.ba-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.ba-l{font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ba-v{font-size:clamp(2rem,4.4vw,2.8rem);font-weight:var(--w-strong);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--muted)}
.ba-after .ba-v{color:var(--brand-ink)}
.ba-u{font-size:.9rem;color:var(--muted)}
.ba.ba-one{grid-template-columns:minmax(0,1fr)}
.ba-one .ba-v{font-size:clamp(2.6rem,6vw,3.6rem)}
.ba-arrow{position:relative;height:2px;background:var(--brand);transform-origin:0 50%;transition:transform 700ms var(--ease-sig)}
.ba-arrow::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-right:0;border-left:9px solid var(--brand)}
.ba.ba-armed .ba-arrow{transform:scaleX(0)}
@media (max-width:480px){.ba{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:10px}}

/* Pillars: three supporting claims under the answer, each with its evidence link.
   <div class="pillars"><div class="pillar"><span class="pl-n">1</span><h3>Claim</h3><p>Why</p>
   <a class="link-arrow" href="...">Evidence</a></div>...</div> */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pillar{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--brand);min-width:0}
.pillar h3{font-size:1.2rem}
.pillar p{color:var(--muted);font-size:.96rem}
.pillar .link-arrow{margin-top:auto;align-self:flex-start;font-size:.92rem}
.pl-n{font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){.pillars{grid-template-columns:1fr;gap:22px}}

/* Proof strip: a row of sourced figures that count up as they arrive.
   <div class="proof-strip"><div class="proof"><span class="v">83%</span><span>line</span>
   <span class="src">Source</span></div>...</div> */
.proof-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-block:1px solid var(--line)}
.proof{display:flex;flex-direction:column;gap:4px;padding:18px 20px;min-width:0}
.proof + .proof{border-left:1px solid var(--line)}
.proof .v{font-size:clamp(1.8rem,3.6vw,2.4rem);font-weight:var(--w-strong);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.proof .v.acc{color:var(--brand-ink)}
.proof > span:not(.v):not(.src){font-size:.94rem}
@media (max-width:760px){.proof-strip{grid-auto-flow:row}.proof + .proof{border-left:0;border-top:1px solid var(--line)}.proof{padding:14px 0}}

/* Hook CTA: the call to action sits beside the impact visual it follows from.
   <div class="hook"><div class="hook-vis">visual</div><aside class="hook-cta"><p>line</p>
   <a class="btn primary" href="...">Action</a></aside></div> */
.hook{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:center}
.hook > *{min-width:0}
.hook-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-left:20px;border-left:2px solid var(--brand)}
.hook-cta p{font-size:1.05rem;font-weight:var(--w-strong);line-height:1.35}
.hook-cta .src{font-weight:400}
@media (max-width:860px){.hook{grid-template-columns:1fr;gap:18px}}

/* Next step: the last line of every page. */
.next-step{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--text);transition:border-color var(--dur-state)}
.next-step:hover{border-color:var(--text);border-left-color:var(--brand)}
.next-step .ns-l{display:flex;flex-direction:column;gap:2px}
.next-step .ns-t{font-weight:var(--w-strong);font-size:1.08rem}
.next-step::after{content:"\2192";font-size:1.3rem;color:var(--brand-ink);transition:transform var(--dur-state) var(--ease-out)}
.next-step:hover::after{transform:translateX(4px)}

/* CTA dock: the primary call to action, carried through the scroll. Built by site.js
   from the header's CTAs (or a page's [data-dock-href]); shown once the hero has left
   the screen, hidden near the final CTA and the footer. Wide screens keep the sticky
   header's CTAs instead, so the dock only appears where those are folded away. */
.cta-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);border-top:1px solid var(--line-strong);transform:translateY(105%);transition:transform 220ms var(--ease-sig),visibility 0s linear 220ms;visibility:hidden}
.cta-dock.on{transform:none;visibility:visible;transition:transform 220ms var(--ease-sig),visibility 0s}
.cta-dock-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--dock-h);padding-block:10px}
.cta-dock .cd-note{font-size:.9rem;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta-dock .cd-acts{display:flex;gap:8px;flex:none}
.cta-dock .btn{padding:9px 16px;font-size:.9rem}
body.has-dock{padding-bottom:var(--dock-h)}
body.noscroll .cta-dock{display:none}
@media (min-width:1061px){.cta-dock{display:none}body.has-dock{padding-bottom:0}}
@media (max-width:560px){
  .cta-dock .cd-note{display:none}
  .cta-dock .cd-acts{flex:1}
  .cta-dock .cd-acts .btn{flex:1;justify-content:center}
}
@media print{.cta-dock{display:none}}

/* Scroll reveal. site.js adds html.js-anim and .reveal only when motion is allowed and
   IntersectionObserver exists, so without JS everything is visible. Each element moves
   once, as it arrives; nothing loops. */
html.js-anim .reveal{opacity:0;transform:translate3d(0,var(--reveal-shift),0);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--rd,0) * 80ms)}
html.js-anim .reveal.in{opacity:1;transform:none}

@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes hero-in{from{opacity:0;transform:translate3d(0,var(--reveal-shift),0)}to{opacity:1;transform:none}}

/* Illustrative personas (BRIEF section 11): composite people, always labelled. */
figure.persona{margin:0}
.persona .p-top{display:flex;align-items:center;gap:12px}
.persona .avatar{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-label);font-weight:var(--w-strong);font-size:.95rem;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent-ink)}
.persona .who{display:flex;flex-direction:column;min-width:0}
.persona .who h3{font-size:1.08rem;margin:0}
.persona .who span{font-size:.85rem;color:var(--muted)}
.persona blockquote{margin:0;font-size:1rem;line-height:1.55}
.persona .shift{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.92rem}
.persona .shift b{display:block;font-family:var(--font-label);font-size:.72rem;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.persona .p-tags{display:flex;flex-wrap:wrap;gap:6px}
.persona-note{margin-top:16px;font-size:.88rem;color:var(--muted)}

/* Reduced motion: the finished state, immediately. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js-anim .reveal{opacity:1;transform:none}
}
@media print{
  .site-head,.draftnote,.layerbar,.site-foot,.subnav,.hero-arcs{display:none}
  html.js-anim .reveal{opacity:1!important;transform:none!important}
  .hero > *,.hero-split > div,.hero-split > div > *,.article-head > *{animation:none!important;opacity:1!important;transform:none!important}
  .cta-band,.panel.dark{background:#fff!important;color:#000!important;border:1px solid #999}
  .cta-band p,.cta-band .eyebrow,.cta-band h2,.panel.dark .muted,.panel.dark .eyebrow{color:#000!important}
}