/* kintoro.com, in the signature style (docs/STYLE-GUIDE.md, live at pimonk.com/brand/).
   Same grid, type scale, components, motion and page order as piMonk. Three things make it
   Kintoro: the two-ring wordmark, jade as the accent (a person deciding, the primary action),
   and a slightly cooler paper. It reads like a publication: IBM Plex Serif headlines and big
   serif numerals; IBM Plex Sans for everything else. Violet only ever means "an agent is
   doing this". Flat: no shadows, blur, glass, glows, gradient fades or gradient text.
   Motion is embedded in the components and reports a state change; nothing idles.
   Saffron appears only where piMonk itself is referenced (.pimonk-mark, .route.pm). */
:root{
  /* Type: Plex Serif headlines, Plex Sans for everything else */
  --font-head:'IBM Plex Serif',Georgia,serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-label:var(--font-body);
  --font-fig:'IBM Plex Mono',ui-monospace,monospace;
  --w-hero:400; --w-head:400; --w-strong:600;
  /* Cooler paper and green-black ink */
  --bg:#F4F4EF; --surface:#FFFFFF; --surface-2:#E9EAE3;
  --text:#18211E; --muted:#4F5853; --faint:#6A726D;
  --line:#DCDDD5; --line-strong:#BCBFB5;
  /* Accent: jade, lightened 29 Sep 2026 (owner). Fill for rules, figures and the mark
     (3.0:1, large text and graphics); ink for text (4.8:1); strong for the primary
     action with white text (4.75:1). */
  --brand:#3A9B7A; --brand-ink:#27775C; --brand-soft:#E6F2EC;
  --brand-strong:#2A8163; --brand-strong-hover:#247259; --on-brand:#FFFFFF;
  --link:#27775C;
  /* Shared meaning colours (unchanged across brands) */
  --agent:#6D4AFF; --agent-ink:#5B3BE8; --agent-soft:#ECE8FF;
  --ok:#00703A; --ok-tint:#E2F3E9; --warn:#8A5A00; --warn-tint:#FAEDD5; --crit:#B3282B;
  /* piMonk references only */
  --saffron:#5A67A6; --saffron-ink:#2E3A74; /* piMonk blue (29 Sep 2026); name kept */
  /* App signature colours: fill (rules, dots) and ink (text) */
  --app-pirevenue:#E0561F; --app-pirevenue-ink:#A63A0C;
  --app-pisa:#5B4BF0; --app-pisa-ink:#4535C9;
  --app-pimark:#D63F8C; --app-pimark-ink:#A1206A;
  --app-pics:#12A69F; --app-pics-ink:#0A6C68;
  --app-piorbit:#2F9E44; --app-piorbit-ink:#1E7A34;
  --app-pisentinel:#1E9BE0; --app-pisentinel-ink:#0A64A0;
  /* Ink bands */
  --night:#16201D; --night-2:#212C28; --night-text:#F3F2EC;
  --night-muted:#C3CCC6; --night-accent:#8FD1B6;
  --night-line:#2E3A35; --night-line-strong:#4A5852; --night-brand-soft:#1C3229;
  --night-agent:#A794FF; --night-agent-soft:#2A2350;
  /* Shape and motion: the signature values */
  --r:10px; --r-ctl:8px; --rule-accent:3px;
  --ease-out:cubic-bezier(.16,.84,.44,1); --ease-sig:cubic-bezier(.16,.84,.44,1); --ease-micro:cubic-bezier(.4,0,.2,1);
  --dur-state:150ms; --dur-reveal:520ms; --reveal-shift:14px;
  --hero-motif:none;
  --headh:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121715; --surface:#1A201D; --surface-2:#161B19;
    --text:#ECEEE8; --muted:#A9B0AA; --faint:#8C948E;
    --line:#2A322E; --line-strong:#3E4843;
    --brand:#6CC3A3; --brand-ink:#86D1B5; --brand-soft:#183229;
    --brand-strong:#6CC3A3; --brand-strong-hover:#86D1B5; --on-brand:#0F1412;
    --link:#86D1B5;
    --agent:#8D74FF; --agent-ink:#B3A2FF; --agent-soft:#241E45;
    --ok:#5FD494; --ok-tint:#14301F; --warn:#E8B65C; --warn-tint:#33260B; --crit:#FF8A82;
    --saffron:#9AA4D6; --saffron-ink:#BCC3E8;
    --app-pirevenue:#FF8A5C; --app-pirevenue-ink:#FF9A70;
    --app-pisa:#8F84FF; --app-pisa-ink:#A69CFF;
    --app-pimark:#F27DB8; --app-pimark-ink:#F58FC2;
    --app-pics:#2EC4B9; --app-pics-ink:#46D6CB;
    --app-piorbit:#4FCB6E; --app-piorbit-ink:#6FD988;
    --app-pisentinel:#4BB6F5; --app-pisentinel-ink:#6CC6FF;
    --night:#1A201D; --night-2:#242C28; --night-line:#34403A; --night-line-strong:#4E5C56;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121715; --surface:#1A201D; --surface-2:#161B19;
  --text:#ECEEE8; --muted:#A9B0AA; --faint:#8C948E;
  --line:#2A322E; --line-strong:#3E4843;
  --brand:#6CC3A3; --brand-ink:#86D1B5; --brand-soft:#183229;
  --brand-strong:#6CC3A3; --brand-strong-hover:#86D1B5; --on-brand:#0F1412;
  --link:#86D1B5;
  --agent:#8D74FF; --agent-ink:#B3A2FF; --agent-soft:#241E45;
  --ok:#5FD494; --ok-tint:#14301F; --warn:#E8B65C; --warn-tint:#33260B; --crit:#FF8A82;
  --saffron:#9AA4D6; --saffron-ink:#BCC3E8;
  --app-pirevenue:#FF8A5C; --app-pirevenue-ink:#FF9A70;
  --app-pisa:#8F84FF; --app-pisa-ink:#A69CFF;
  --app-pimark:#F27DB8; --app-pimark-ink:#F58FC2;
  --app-pics:#2EC4B9; --app-pics-ink:#46D6CB;
  --app-piorbit:#4FCB6E; --app-piorbit-ink:#6FD988;
  --app-pisentinel:#4BB6F5; --app-pisentinel-ink:#6CC6FF;
  --night:#1A201D; --night-2:#242C28; --night-line:#34403A; --night-line-strong:#4E5C56;
}
/* On ink (bands and the footer), app names use the light app inks. */
section.s.ink,.ink-scope,.site-foot{
  --app-pirevenue-ink:#FF9A70; --app-pisa-ink:#A69CFF; --app-pimark-ink:#F58FC2;
  --app-pics-ink:#46D6CB; --app-piorbit-ink:#6FD988; --app-pisentinel-ink:#6CC6FF;
  --saffron-ink:#BCC3E8
}
/* The footer is an ink band too. */
.site-foot{
  --bg:var(--night); --surface:var(--night-2); --surface-2:var(--night);
  --text:var(--night-text); --muted:var(--night-muted); --line:var(--night-line); --line-strong:var(--night-line-strong);
  --brand:var(--night-accent); --brand-ink:var(--night-accent); --brand-soft:var(--night-brand-soft); --link:var(--night-accent);
  background:var(--night); color:var(--night-text); border-top:0
}

/* Type: serif headlines at the signature scale; card titles and everything else in Plex Sans. */
h1{font-size:clamp(2.4rem,5.2vw,3.6rem);line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.3vw,2.35rem);line-height:1.1;letter-spacing:-.02em}
h3{font-family:var(--font-body);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.logo{font-family:var(--font-head);font-size:1.35rem;font-weight:500;letter-spacing:-.01em}
.hero h1{max-width:16ch}
.hero .sub{color:var(--muted);font-size:1.2rem;max-width:48ch}
.hero.page h1{font-size:clamp(2.1rem,4.4vw,3rem);max-width:20ch}
.hero.page .sub{max-width:58ch}
.proof .v,.stat .v,.ba-v{font-variant-numeric:tabular-nums}

/* The Kintoro eyebrow: a short jade rule, then the label. */
.eyebrow{letter-spacing:.1em;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:16px;height:2px;background:var(--brand)}
.cta-band .eyebrow::before,.mm-feature .eyebrow::before,section.s.ink .eyebrow::before,.ink-scope .eyebrow::before{background:var(--night-accent)}

/* Rhythm: bands alternate paper and second paper; ink bands break the rhythm. */
section.s{padding-block:84px}
section.s.tight{padding-block:56px}
section.s.alt{background:var(--surface-2)}
.card{padding:22px}
.head{margin-bottom:32px}
@media (max-width:640px){section.s{padding-block:56px}section.s.tight{padding-block:40px}}

/* Header: paper, hairline; scrolling swaps to white and strengthens the rule. */
.site-head.scrolled{background:var(--surface)}
.nav-ctas .btn{padding:9px 16px}
.btn{padding:12px 20px}
.link-arrow{border-bottom-width:2px}

/* Primary actions on ink: light jade with ink text. */
.cta-band{border-top:0}
.cta-band .btn.primary,section.s.ink .btn.primary,.ink-scope .btn.primary{background:var(--night-accent);border-color:var(--night-accent);color:var(--night)}
.cta-band .btn.primary:hover,section.s.ink .btn.primary:hover,.ink-scope .btn.primary:hover{background:var(--night-text);border-color:var(--night-text)}

/* The mark: the two rings draw once on load, then stay still. */
.logo .mk-ring{animation:k-ring-draw .9s var(--ease-out) .1s both}
.logo .mk-ring.r2{animation-delay:.3s}
@keyframes k-ring-draw{from{stroke-dasharray:0 200}}

/* Big serif numerals: a Kintoro touch on every figure outside the prose. */
.proof .v,.stat .v,.ba-v{font-family:var(--font-head);font-weight:400;letter-spacing:-.02em}
.proof .v{font-size:clamp(2.2rem,4.4vw,3rem);line-height:1}
.stat .v{font-size:2.3rem}
.ba-v{font-size:clamp(2.2rem,4.6vw,3rem)}
.proof-strip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.proof{padding:22px 24px}
@media (max-width:760px){.proof-strip{padding-inline:20px}.proof{padding:16px 0}}

/* Pillars: serif claims */
.pillar h3{font-family:var(--font-head);font-weight:400;font-size:1.45rem;letter-spacing:-.015em}

/* Hero: the answer, its proof line and the impact visual. */
.hero-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 14px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);max-width:48ch}
.hero-proof b{font-family:var(--font-head);font-weight:400;font-size:2rem;line-height:1;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.hero-proof span{font-size:.98rem}
.hero-proof .src{grid-column:1 / -1}
.hook-vis .ba{max-width:560px}
.k-work{gap:16px}
.kw-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.kw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kw-list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:.96rem;min-width:0}
.kw-list li:first-child{border-top:0;padding-top:2px}
.kw-list .chip{justify-self:start}
.kw-list li.decide{border:0;border-left:3px solid var(--brand);padding:12px 12px 12px 14px;margin-top:6px;background:var(--brand-soft);border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.kw-acts{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap}
.kw-acts .btn{padding:7px 14px;font-size:.86rem;background:var(--surface)}
.kw-acts .btn.primary{background:var(--brand-strong)}
.kw-list li.decided .kw-acts{display:none}
.kw-done{grid-column:1 / -1;font-size:.9rem;font-weight:600;color:var(--brand-ink)}
@media (max-width:480px){.kw-list li{grid-template-columns:1fr;gap:6px}}

/* The suite: six apps, each in its own signature colour, with a word for its status. */
.suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card.app{--c:var(--line-strong);--ci:var(--text);border-top:var(--rule-accent) solid var(--c);gap:8px}
.app[data-app="pirevenue"]{--c:var(--app-pirevenue);--ci:var(--app-pirevenue-ink)}
.app[data-app="pisa"]{--c:var(--app-pisa);--ci:var(--app-pisa-ink)}
.app[data-app="pimark"]{--c:var(--app-pimark);--ci:var(--app-pimark-ink)}
.app[data-app="pics"]{--c:var(--app-pics);--ci:var(--app-pics-ink)}
.app[data-app="piorbit"]{--c:var(--app-piorbit);--ci:var(--app-piorbit-ink)}
.app[data-app="pisentinel"]{--c:var(--app-pisentinel);--ci:var(--app-pisentinel-ink)}
.app .top{flex-wrap:wrap}
.app .pn{font-family:var(--font-body);font-weight:600;font-size:1.3rem;letter-spacing:-.015em;color:var(--text);text-decoration:none}
.app .pn b{color:var(--ci);font-weight:inherit}
.app a.pn:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--c);text-underline-offset:4px}
.app .job{font-weight:600;line-height:1.35}
.app .for{font-size:.93rem;color:var(--muted)}
.app-links{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem}
.app-links a{font-weight:600;text-decoration:none;color:var(--ci)}
.app-links a::after{content:"\2192";display:inline-block;margin-left:.3em;transition:transform var(--dur-state) var(--ease-out)}
.app-links a:hover::after{transform:translateX(3px)}
/* Who does what, inside an app card: violet for agents, jade for people. */
.dd{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.dd li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:baseline}
.dd .w{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dd .ag .w{color:var(--agent-ink)}
.dd .pp .w{color:var(--brand-ink)}
.suite-group{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.suite + .suite-group{margin-top:28px}
@media (max-width:1000px){.suite{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.suite{grid-template-columns:1fr}}

/* Six rules, with big serif numerals. */
.rules{list-style:none;margin:0;padding:0;counter-reset:ru;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rules > li{counter-increment:ru;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rules > li::before{content:counter(ru,decimal-leading-zero);font-family:var(--font-head);font-size:2.4rem;line-height:1;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.rules h3{font-size:1.15rem}
.rules p{color:var(--muted);font-size:.96rem}
@media (max-width:1000px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rules{grid-template-columns:1fr}}

/* Two-column statement: a serif line on the left, the detail on the right. */
.say{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}
.say > *{min-width:0}
.say .big{font-family:var(--font-head);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;letter-spacing:-.02em;margin-top:10px}
.say .body{display:flex;flex-direction:column;gap:14px}
@media (max-width:860px){.say{grid-template-columns:1fr;gap:20px}}

/* Essays index: the lead essay sits on ink. */
.rcard.essay h3{font-family:var(--font-head);font-weight:400;font-size:1.4rem;line-height:1.2;letter-spacing:-.015em;transition:color var(--dur-state)}
.rcard.essay p{color:var(--muted);font-size:.96rem}
.rcard.essay:hover h3{color:var(--brand-ink)}
.rcard .type{color:var(--brand-ink)}
.rcard.essay.lead{grid-column:span 2;background:var(--night);border-color:var(--night);color:var(--night-text);padding:32px}
.rcard.essay.lead h3{font-size:clamp(1.8rem,3.2vw,2.4rem)}
.rcard.essay.lead p,.rcard.essay.lead .meta{color:var(--night-muted)}
.rcard.essay.lead .type,.rcard.essay.lead:hover h3{color:var(--night-accent)}
section.s.ink .rcard:hover{border-color:var(--night-accent)}
@media (max-width:640px){.rcard.essay.lead{grid-column:auto;padding:24px}}

/* Articles: a long, calm measure; serif lede and pull quotes. */
.article-head{padding-block:48px 32px}
.article-head h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.06}
.article-head .dek{font-family:var(--font-head);font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.45;max-width:52ch}
.prose{max-width:68ch;font-size:1.1rem;line-height:1.75}
.prose > p:first-of-type{font-family:var(--font-head);font-size:1.3rem;line-height:1.55}
.prose h2{font-size:1.8rem;letter-spacing:-.02em}
.prose blockquote,.pull{font-family:var(--font-head);font-style:italic;font-size:clamp(1.35rem,2.6vw,1.7rem);line-height:1.38;border-left:3px solid var(--brand);padding:4px 0 4px 22px;margin:1.6em 0;color:var(--text)}
.prose .callout{font-size:1rem;margin-top:2.4em}
.callout.jade{border-color:var(--brand);background:var(--brand-soft)}
.prose .callout h3{font-size:1.1rem;margin:0 0 8px}
.prose .callout p + p{margin-top:8px}
.more-persp{border-top:1px solid var(--line-strong);padding-top:20px;margin-top:2.4em}
.more-persp h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 12px}
.more-persp ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.more-persp li + li{margin-top:0}
.more-persp a{font-family:var(--font-head);font-size:1.2rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:color var(--dur-state),border-color var(--dur-state)}
.more-persp a:hover{color:var(--brand-ink);border-bottom-color:var(--brand)}
.prose .next-step{margin-top:2.4em}

/* Next step: the serif title is the Kintoro touch. */
.next-step .ns-t{font-family:var(--font-head);font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.page-end{padding-block:8px 72px}

/* Contact routes */
.route{gap:10px}
.route h2{font-size:1.5rem}
.route.pm{border-top:var(--rule-accent) solid var(--saffron)}
.route .addr{font-size:1.02rem;word-break:break-all}

/* piMonk references: saffron only here */
.pimonk-mark{color:var(--saffron-ink)}

/* Footer: an ink band with the serif wordmark */
.site-foot .logo{font-size:1.5rem}
.site-foot .logo .mk-ring{stroke:var(--night-text)}
.site-foot .logo .mk-ring.r2{stroke:var(--night-accent)}

@media print{
  .rcard.essay.lead{background:#fff!important;color:#000!important;border:1px solid #999}
  .rcard.essay.lead p,.rcard.essay.lead .meta,.rcard.essay.lead .type{color:#000!important}
}

/* Apps added to the suite on 29 Sep 2026: signature colours (fill, ink). */
.app[data-app="pileads"]{--c:#C2410C;--ci:#9A3412}
.app[data-app="pifin"]{--c:#A16207;--ci:#854D0E}
.app[data-app="pipa"]{--c:#0E7490;--ci:#155E75}
.app[data-app="piprod"]{--c:#4D7C0F;--ci:#3F6212}
.app[data-app="pitest"]{--c:#BE123C;--ci:#9F1239}
.app[data-app="pimonk"]{--c:#2B40CC;--ci:#2E3A74}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .app[data-app="pileads"]{--c:#FB923C;--ci:#FDBA74}:root:not([data-theme="light"]) .app[data-app="pifin"]{--c:#EAB308;--ci:#FACC15}:root:not([data-theme="light"]) .app[data-app="pipa"]{--c:#22D3EE;--ci:#67E8F9}:root:not([data-theme="light"]) .app[data-app="piprod"]{--c:#A3E635;--ci:#BEF264}:root:not([data-theme="light"]) .app[data-app="pitest"]{--c:#FB7185;--ci:#FDA4AF}:root:not([data-theme="light"]) .app[data-app="pimonk"]{--c:#7F90F0;--ci:#AEB6DD}}
:root[data-theme="dark"] .app[data-app="pileads"]{--c:#FB923C;--ci:#FDBA74}:root[data-theme="dark"] .app[data-app="pifin"]{--c:#EAB308;--ci:#FACC15}:root[data-theme="dark"] .app[data-app="pipa"]{--c:#22D3EE;--ci:#67E8F9}:root[data-theme="dark"] .app[data-app="piprod"]{--c:#A3E635;--ci:#BEF264}:root[data-theme="dark"] .app[data-app="pitest"]{--c:#FB7185;--ci:#FDA4AF}:root[data-theme="dark"] .app[data-app="pimonk"]{--c:#7F90F0;--ci:#AEB6DD}

/* Twelve apps: three groups of four. */
.suite.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.suite.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.suite.four{grid-template-columns:1fr}}

/* The Kintoro logo (brand/kintoro-logo/, traced from the owner's artwork). The header
   shows the light version (dark wordmark), the footer and dark mode the on-dark one. */
.logo .kl{height:32px;width:auto;display:block}
.logo .kl-dark{display:none}
.site-foot .logo .kl{height:36px}
.site-foot .logo .kl-light{display:none}
.site-foot .logo .kl-dark{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .kl-light{display:none}:root:not([data-theme="light"]) .logo .kl-dark{display:block}}
:root[data-theme="dark"] .logo .kl-light{display:none}
:root[data-theme="dark"] .logo .kl-dark{display:block}