/* OCALLY · capability.css: one design for every capability page and the /capabilities hub. Tokens and components
   come from base.css. Screens, in order: the promise (a poster), what it costs today (the receipt Kai folds
   together), what Kai does (statements that fill in as you read), what it unlocks (navy), your part, questions,
   the close, more of what Kai does. */
html, body { background: var(--sky); }
.cp { color: var(--navy); }

.cp-h2 { margin: 0; max-width: 16em; font: var(--t-h2); letter-spacing: var(--ls-h2); color: var(--navy); text-wrap: balance; }
.cp-h2 span { color: var(--orange); }
.cp-p { margin: var(--gap-lede) 0 0; max-width: 30em; font: var(--t-body); color: var(--body); }
.cp-ctas { margin-top: clamp(24px, 4vh, 40px); }

/* the promise: a poster. Giant type, the struck slip pinned to it, the product detail shown large */
.cp-hero { position: relative; padding: clamp(28px, 5vh, 56px) var(--edge) clamp(64px, 10vh, 120px); background: var(--sky); overflow: hidden; }
.cp-crumbs { display: flex; gap: 10px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.cp-crumbs a { color: var(--orange-ink); text-decoration: none; }
.cp-crumbs a:hover { color: var(--navy); }
.cp-hero__top { position: relative; display: flex; flex-direction: column-reverse; align-items: flex-start; margin-top: clamp(24px, 4vh, 44px); }
.cp-h1 { margin: 0; max-width: 11.5em; font: var(--t-display); letter-spacing: var(--ls-display); color: var(--navy); text-wrap: balance; }
.cp-h1 span { color: var(--orange); }
.cp-hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--gap-cols); align-items: end; margin-top: clamp(32px, 6vh, 64px); }
.cp-lead { margin: 0; max-width: 31em; font: var(--t-lead); color: var(--body); text-wrap: pretty; }
.cp-hero__art { position: relative; display: grid; place-items: center; }
/* .cp-art (the tinted panel a drawing sits in) and .cp-slip (the struck slip) are shared: artifacts.css */
.cp-hero__art .cp-art--hero { width: 100%; max-width: 540px; box-shadow: var(--lift-l) var(--navy); }
.cp-art--hero > * { zoom: 1.45; }
.cp-hero__kai { position: absolute; right: -8px; bottom: -18px; --kai-size: clamp(84px, 8vw, 128px); }

/* what it costs today: a real receipt, struck through line by line, then stamped */
.cp-today { padding: var(--sec-y) var(--edge); background: var(--paper); text-align: center; overflow-x: clip; }
.cp-center { margin-left: auto; margin-right: auto; }
.cp-receipt { position: relative; width: min(580px, 100%); margin: var(--gap-head) auto 0; padding: 34px 34px 44px; text-align: left; background: #fff; filter: drop-shadow(0 18px 28px rgba(23, 34, 61, .14)); rotate: -1.2deg;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 14px 9px repeat-x, linear-gradient(#000, #000) 0 9px / 100% calc(100% - 18px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 14px 9px repeat-x;
  mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 14px 9px repeat-x, linear-gradient(#000, #000) 0 9px / 100% calc(100% - 18px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 14px 9px repeat-x; }
.cp-receipt__head { margin: 0 0 8px; padding-bottom: 14px; border-bottom: 2px dashed rgba(23, 34, 61, .35); text-align: center; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--navy); }
.cp-receipt__rows { list-style: none; margin: 0; padding: 0; }
.cp-receipt__rows li { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px dashed rgba(23, 34, 61, .25); }
.cp-receipt__rows b { font: var(--t-data); letter-spacing: .02em; text-transform: uppercase; }
.cp-receipt__rows span { display: block; margin-top: 6px; font: var(--t-small); color: var(--body); }
.cp-receipt__rows em { flex: none; max-width: 40%; font: var(--t-data); font-style: normal; text-align: right; }
.cp-receipt__rows em i { font-style: normal; }
/* the strike: under the name and the price, in Kai's orange, row by row */
.cp-receipt__rows :is(b, em i) { background: linear-gradient(var(--orange), var(--orange)) 0 58% / 0% 3px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s cubic-bezier(.6, 0, .2, 1); }
.cp-receipt.is-done .cp-receipt__rows :is(b, em i) { background-size: 100% 3px; }
.cp-receipt.is-done .cp-receipt__rows li:nth-child(2) :is(b, em i) { transition-delay: .3s; } .cp-receipt.is-done .cp-receipt__rows li:nth-child(3) :is(b, em i) { transition-delay: .6s; } .cp-receipt.is-done .cp-receipt__rows li:nth-child(4) :is(b, em i) { transition-delay: .9s; }
.cp-receipt.is-done .cp-receipt__rows li > * { opacity: .55; transition: opacity .4s linear 1.1s; }
/* the stamp is a drawing too: a rubber stamp's own lettering */
.cp-receipt__stamp { position: absolute; right: 18px; bottom: 26px; display: grid; place-items: center; width: 150px; aspect-ratio: 1; margin: 0; border: 4px solid var(--orange); border-radius: 50%; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--orange);
  font: 700 17px/1.1 var(--display); letter-spacing: -.01em; text-align: center; text-transform: uppercase; color: var(--orange); rotate: -14deg; opacity: 0; scale: 1.7; transition: opacity .2s linear 1.4s, scale .4s cubic-bezier(.3, 1.6, .5, 1) 1.4s; background: rgba(255, 255, 255, .55); }
.cp-receipt.is-done .cp-receipt__stamp { opacity: .92; scale: 1; }
.cp-withkai { max-width: 30em; margin: clamp(36px, 6vh, 56px) auto 0; font: var(--t-h4); letter-spacing: var(--ls-h4); color: var(--navy); text-wrap: balance; }
.cp-withkai b { color: var(--orange); }
.cp-sources { margin: 24px auto 0; max-width: 40em; font: var(--t-fine); color: var(--muted); }
.cp-sources summary { cursor: pointer; }
.cp-sources ul { margin: 10px 0 0; padding-left: 18px; text-align: left; }
.cp-sources a { color: var(--muted); }

/* what Kai does: big statements that fill in as you read */
.cp-does { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: var(--gap-cols); padding: var(--sec-y) var(--edge); }
.cp-does > .cp-h2 { position: sticky; top: calc(var(--bar) + 40px); align-self: start; }
.cp-says { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 8vh, 88px); }
.cp-says h3 { margin: 0; font: var(--t-h3); letter-spacing: var(--ls-h3); color: #868B98; transition: color .5s linear; }
.cp-says p { margin: 14px 0 0; max-width: 32em; font: var(--t-body); color: var(--muted); transition: color .5s linear; }
.cp-says li.is-read h3 { color: var(--navy); }
.cp-says li.is-read p { color: var(--body); }

/* what it unlocks: an index on navy */
.cp-unlocks { padding: var(--sec-y) var(--edge); background: var(--navy); color: var(--on-navy); }
.cp-unlocks .cp-h2 { color: var(--on-navy); }
.cp-index { list-style: none; margin: var(--gap-head) 0 0; padding: 0; }
.cp-index li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: baseline; gap: 16px 48px; padding: clamp(20px, 3.4vh, 34px) 0; border-top: 1px solid var(--on-navy-line); }
.cp-index li:last-child { border-bottom: 1px solid var(--on-navy-line); }
.cp-index h3 { margin: 0; font: var(--t-h3); letter-spacing: var(--ls-h3); color: var(--on-navy); text-wrap: balance; }
.cp-index p { margin: 0; max-width: 28em; font: var(--t-body); color: var(--on-navy-body); }

/* your part: two sentences */
.cp-part { padding: var(--sec-y) var(--edge) 0; }
.cp-k { margin: 0 0 clamp(24px, 4vh, 40px); font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.cp-part__line { margin: 0; max-width: 28em; font: var(--t-h4); letter-spacing: var(--ls-h4); color: var(--navy); text-wrap: balance; }
.cp-part__line + .cp-part__line { margin-top: clamp(24px, 4vh, 40px); }
.cp-part__line b { color: var(--orange); font-weight: 700; }

/* the close */
.cp-close { padding: var(--sec-y) var(--edge); text-align: center; background: var(--orange); color: #fff; }
.cp-close .cp-h2 { margin: 0 auto; max-width: 13em; font: var(--t-h1); letter-spacing: var(--ls-h1); color: #fff; }
.cp-close .cp-h2 span { color: var(--navy); }
.cp-close__p { margin: var(--gap-lede) auto 0; max-width: 30em; font: var(--t-lead); color: #fff; }
.cp-close .cp-ctas { justify-content: center; }

/* cards: more of what Kai does, and the hub */
.cp-more { padding: var(--sec-y) var(--edge); }
.cp-more__h { margin: 0 0 28px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.cp-more__grid, .cp-area__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.cp-area__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-more__all { margin: 40px 0 0; }
/* posts from the blog about this capability: guides and comparisons */
.cp-more__blog { margin: 56px 0 0; }
.cp-more__blog ul { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.cp-more__blog a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; font: var(--t-h6); letter-spacing: var(--ls-h6); }
.cp-more__blog a span { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.cp-more__blog a i { font-style: normal; color: var(--orange); transition: transform .25s var(--ease); }
.cp-more__blog a:hover { color: var(--orange-ink); }
.cp-more__blog a:hover i { transform: translateX(4px); }
.cp-card { display: flex; flex-direction: column; color: var(--navy); text-decoration: none; }
.cp-card .cp-art { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cp-card:hover .cp-art, .cp-card:focus-visible .cp-art { transform: translate(-2px, -2px); box-shadow: var(--lift-l) var(--navy); }
.cp-card h3 { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 0; font: var(--t-h5); letter-spacing: var(--ls-h5); }
.cp-card h3::after { content: "→"; color: var(--orange); transition: transform .25s var(--ease); }
.cp-card:hover h3::after { transform: translateX(4px); }
.cp-card > p { margin: 6px 0 0; font: var(--t-card); color: var(--body); }
.cp-hub { padding: clamp(48px, 9vh, 112px) var(--edge) clamp(24px, 4vh, 40px); }
.cp-hub .cp-h1 { max-width: 13em; margin-top: clamp(20px, 3.4vh, 32px); font: var(--t-h1); letter-spacing: var(--ls-h1); }
.cp-hub .cp-lead { margin-top: var(--gap-lede); }
.cp-area { padding: clamp(48px, 8vh, 88px) var(--edge) 0; }
.cp-area__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; gap: 10px var(--gap-cols); margin-bottom: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.cp-area__k { grid-column: 1 / -1; margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.cp-area__h { margin: 0; font: var(--t-h4); letter-spacing: var(--ls-h4); color: var(--navy); text-wrap: balance; }
.cp-area__p { margin: 0; max-width: 36em; font: var(--t-body); color: var(--body); }
.cp-area__jobs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; }
.cp-area__jobs li { padding: 7px 12px; background: var(--paper); border: 1px solid rgba(23, 34, 61, .28); font: var(--t-small); font-weight: 600; color: var(--navy); }

@media (max-width: 1100px) { .cp-area__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cp-hero__foot, .cp-does, .cp-area__head { grid-template-columns: 1fr; }
  .cp-does > .cp-h2 { position: static; }
  .cp-index li { grid-template-columns: 1fr; gap: 10px; }
  .cp-more__grid { grid-template-columns: 1fr; }
  .cp-art--hero > * { zoom: 1.25; }
}
@media (max-width: 560px) {
  .cp-h1 { font-size: clamp(44px, 12.4vw, 60px); }
  .cp-area__grid { grid-template-columns: 1fr; }
  .cp-receipt { padding: 28px 20px 40px; rotate: -.6deg; }
  .cp-receipt__rows li { flex-direction: column; gap: 8px; }
  .cp-receipt__rows em { max-width: none; text-align: left; }
  .cp-receipt__stamp { width: 116px; font-size: 14px; right: 8px; bottom: 14px; }
  .cp-art--hero > * { zoom: 1.05; }
  .cp-hero__kai { --kai-size: 72px; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .cp-receipt__rows :is(b, em i), .cp-receipt__stamp, .cp-receipt__rows li > *, .cp-says :is(h3, p) { transition: none; } }