/* ===== cw-ledger.css ===== */
/* ==========================================================================
   AI Coworkers page — "Why coworkers, not chat histories", below the dark
   hero. Same content type as Home/Deployment's 2-column masthead essay, but a
   DISTINCT signature: the headline's "balance-sheet item" is made literal —
   the right column is a LEDGER. Three ruled line-items with monospace margin
   tags; the closing paragraph is "booked" as an elevated blue-tinted asset
   card, sealed by an accountant's double-rule ("= company asset"). No ghost
   numerals / threaded path (that is dp-path's signature). Supporting section
   (the hero is the focal) → white ground, blue accents / low-opacity only.
   Motion: same language — reveal rise + per-entry stagger.
   ========================================================================== */

.pg-cwledger {
  background-color: #fff;
  padding: 104px 0 112px;
}

.pg-cwledger__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 88px;
  align-items: start;
}

/* --- left masthead (sticky) --- */
.pg-cwledger__head {
  position: sticky;
  top: 116px;
}

.pg-cwledger__kicker {
  position: relative;
  padding-left: 21px;
  font-family: "Cabin", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: #000;
}

.pg-cwledger__kicker::before,
.pg-cwledger__kicker::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 4px;
  border-radius: 1px;
}

.pg-cwledger__kicker::before {
  top: calc(50% - 4px);
  background: linear-gradient(to right, #0036fa, #c0e2f9);
}

.pg-cwledger__kicker::after {
  top: 50%;
  width: 14px;
  background: linear-gradient(to right, #c0e2f9, #0036fa);
}

.pg-cwledger__title {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 42px;
  line-height: 52px;
  color: #000;
  margin-top: 20px;
  max-width: 470px;
  text-wrap: pretty;
}

/* the pivot phrase carries the primary gradient — ties color to concept */
.pg-cwledger__grad {
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pg-cwledger__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8f9c;
}

.pg-cwledger__note-arrow {
  color: #0036fa;
  font-size: 14px;
}

/* --- right: the ledger --- */
.pg-cwledger__book {
  display: flex;
  flex-direction: column;
}

.pg-cwledger__entry {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 30px;
  padding: 26px 0 30px;
  border-top: 1px solid #e7e8ee;
}

.pg-cwledger__entry:first-child {
  border-top: none;
  padding-top: 4px;
}

.pg-cwledger__tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9aa0b0;
  padding-top: 4px;
}

.pg-cwledger__p {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #333;
}

.pg-cwledger__hl {
  color: #0036fa;
  font-weight: 600;
}

/* the closing paragraph "booked" as an asset — elevated tinted card */
.pg-cwledger__entry--asset {
  position: relative;
  border-top: none;
  margin-top: 14px;
  padding: 26px 28px 28px 26px;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 54, 250, 0.06), transparent 60%),
    #f7f9ff;
  box-shadow: 0 24px 50px -34px rgba(0, 54, 250, 0.45);
  overflow: hidden;
}

.pg-cwledger__entry--asset::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-image: linear-gradient(180deg, #0036fa, #4e87fc);
}

.pg-cwledger__entry--asset .pg-cwledger__tag {
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pg-cwledger__entry--asset .pg-cwledger__p {
  color: #1c2230;
}

/* accountant's double-rule total line — the signature seal */
.pg-cwledger__total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  padding-top: 9px;
  border-top: 1px solid #cdd6ee;
  box-shadow: 0 4px 0 -3px #cdd6ee; /* second (lower) rule of the double line */
}

.pg-cwledger__total-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b8f9c;
}

.pg-cwledger__total-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 700;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- scroll-reveal (site motion language) --- */
.pg-cwledger__head,
.pg-cwledger__entry,
.pg-cwledger__total {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pg-cwledger__head.is-in,
.pg-cwledger__entry.is-in,
.pg-cwledger__total.is-in {
  opacity: 1;
  transform: none;
}

.pg-cwledger__entry.is-in:nth-of-type(1) { transition-delay: 0.14s; }
.pg-cwledger__entry.is-in:nth-of-type(2) { transition-delay: 0.24s; }
.pg-cwledger__entry.is-in:nth-of-type(3) { transition-delay: 0.34s; }
.pg-cwledger__total.is-in { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .pg-cwledger__head,
  .pg-cwledger__entry,
  .pg-cwledger__total {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- responsive --- */
@media (max-width: 1040px) {
  .pg-cwledger {
    padding: 80px 0;
  }
  .pg-cwledger__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
  }
  .pg-cwledger__head {
    position: static;
  }
  .pg-cwledger__title {
    font-size: 32px;
    line-height: 42px;
    max-width: none;
  }
}

@media (max-width: 600px) {
  .pg-cwledger__title {
    font-size: 27px;
    line-height: 37px;
  }
  .pg-cwledger__entry {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 22px 0 24px;
  }
  .pg-cwledger__entry--asset {
    padding: 22px 20px 24px 22px;
  }
  .pg-cwledger__tag {
    padding-top: 0;
  }
}

/* ===== cw-life.css ===== */
/* ==========================================================================
   AI Coworkers page — "How it works: the coworker lifecycle", below the ledger.
   Content type: a 5-step SEQUENCE (Build → Scope → Review → Share → Improve).
   Same family as dp-path's sequence essay, but a DISTINCT signature: a
   HORIZONTAL lifecycle rail — a gradient track that draws left→right on reveal,
   with a node per step and mono "01 · Build" line-labels; sealed by a LOOP
   motif ("a loop, not a funnel") because the copy is a cycle, not a funnel.
   No vertical threaded path / ghost numerals (dp-path) and no ruled ledger
   (cw-ledger). Supporting section → faint blue-tint band, blue accents only.
   Motion: site language — reveal rise + per-step stagger + rail draw.
   ========================================================================== */

.pg-cwlife {
  background-color: #f4f6fc;
  padding: 100px 0 108px;
}

.pg-cwlife__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

/* --- masthead --- */
.pg-cwlife__head {
  max-width: 620px;
}

.pg-cwlife__kicker {
  position: relative;
  padding-left: 21px;
  font-family: "Cabin", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: #000;
}

.pg-cwlife__kicker::before,
.pg-cwlife__kicker::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 4px;
  border-radius: 1px;
}

.pg-cwlife__kicker::before {
  top: calc(50% - 4px);
  background: linear-gradient(to right, #0036fa, #c0e2f9);
}

.pg-cwlife__kicker::after {
  top: 50%;
  width: 14px;
  background: linear-gradient(to right, #c0e2f9, #0036fa);
}

.pg-cwlife__title {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: normal;
  color: #000;
  margin-top: 20px;
  text-wrap: pretty;
}

/* signature: the lifecycle is a loop, not a funnel */
.pg-cwlife__loop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #767c8c;
}

.pg-cwlife__loop-mark {
  font-size: 16px;
  line-height: 1;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- the horizontal rail --- */
.pg-cwlife__rail {
  position: relative;
  margin-top: 54px;
}

/* gradient track behind the nodes, drawn on reveal */
.pg-cwlife__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  opacity: 0.28;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-cwlife.is-drawn .pg-cwlife__line {
  transform: scaleX(1);
}

.pg-cwlife__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pg-cwlife__step {
  position: relative;
  padding: 30px 26px 4px 0;
  padding-left: 26px;
  border-left: 1px solid #dde1ee;
}

.pg-cwlife__step:first-child {
  padding-left: 0;
  border-left: none;
}

.pg-cwlife__step:last-child {
  padding-right: 0;
}

/* node bead sitting on the rail */
.pg-cwlife__node {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #0036fa;
  box-shadow: 0 0 0 4px #f4f6fc;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-cwlife__step:first-child .pg-cwlife__node {
  left: 0;
}

.pg-cwlife.is-drawn .pg-cwlife__node {
  transform: scale(1);
}

.pg-cwlife__step:hover .pg-cwlife__node {
  background-color: #0036fa;
  box-shadow: 0 0 0 4px #f4f6fc, 0 0 0 8px rgba(0, 54, 250, 0.12);
}

.pg-cwlife__tag {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pg-cwlife__step-title {
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: #000;
  margin-top: 14px;
}

.pg-cwlife__p {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #4a4f5c;
  margin-top: 10px;
}

.pg-cwlife__q {
  color: #0036fa;
  font-weight: 600;
}

/* --- scroll-reveal (site motion language) --- */
.pg-cwlife__head,
.pg-cwlife__step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pg-cwlife__head.is-in,
.pg-cwlife__step.is-in {
  opacity: 1;
  transform: none;
}

.pg-cwlife__step.is-in:nth-child(1) { transition-delay: 0.10s; }
.pg-cwlife__step.is-in:nth-child(2) { transition-delay: 0.20s; }
.pg-cwlife__step.is-in:nth-child(3) { transition-delay: 0.30s; }
.pg-cwlife__step.is-in:nth-child(4) { transition-delay: 0.40s; }
.pg-cwlife__step.is-in:nth-child(5) { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  .pg-cwlife__head,
  .pg-cwlife__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pg-cwlife__line,
  .pg-cwlife__node {
    transform: none;
    transition: none;
  }
}

/* --- responsive --- */
@media (max-width: 1040px) {
  .pg-cwlife {
    padding: 78px 0;
  }
  .pg-cwlife__inner {
    padding: 0 24px;
  }
  .pg-cwlife__title {
    font-size: 34px;
    line-height: 44px;
  }
  .pg-cwlife__line {
    display: none;
  }
  .pg-cwlife__steps {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .pg-cwlife__step {
    padding: 26px 0 26px 26px;
    border-left: 2px solid #dde1ee;
    border-top: none;
  }
  .pg-cwlife__step:first-child {
    padding-left: 26px;
    border-left: 2px solid #dde1ee;
  }
  .pg-cwlife__node {
    left: -7px;
    top: 30px;
    transform: scale(1);
  }
  .pg-cwlife__step:first-child .pg-cwlife__node {
    left: -7px;
  }
}

@media (max-width: 600px) {
  .pg-cwlife__title {
    font-size: 28px;
    line-height: 38px;
  }
}

/* ===== cw-spec.css ===== */
/* ==========================================================================
   AI Coworkers — "What a shared coworker looks like" (below the lifecycle).
   BLACK-background rework, referencing Home's "The Problem" UI (06-frame654):
     · centered intro w/ gradient-bar tagline + Merriweather title
     · edge-to-edge cards that TOUCH (collapsed 1px borders, no gaps)
     · title anchored to the card's base; the body stays hidden and RISES
       into view on hover — same interaction language as The Problem.
   Kept-distinct signature so it isn't a copy:
     · a large ghost INDEX numeral bleeds in each card's corner
     · a gradient RAIL draws across the card's top edge on hover
     · the meta becomes a 3-field SPEC block (shared with / runs on / owner),
       mono labels over values, split by hairlines.
   Blue-on-black only: #0036fa→#4e87fc gradient + white opacity tints/glow.
   ========================================================================== */

.cwspec {
  background-color: #000;
  padding: 100px 0 104px;
}

.cwspec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

/* --- centered intro (echoes The Problem) --- */
.cwspec__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 760px;
}

.cwspec__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cwspec__tag-bar {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 8px;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
}

.cwspec__tag-bar::before,
.cwspec__tag-bar::after {
  content: "";
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 1px;
}

.cwspec__tag-bar::before {
  top: 0;
  width: 15px;
  background: linear-gradient(to right, #0036fa, #c0e2f9);
}

.cwspec__tag-bar::after {
  top: 4px;
  width: 14px;
  background: linear-gradient(to right, #c0e2f9, #0036fa);
}

.cwspec__tagline p {
  font-family: "Cabin", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.cwspec__title {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 54px;
  color: #fff;
  text-wrap: pretty;
}

.cwspec__title-dim {
  color: rgba(255, 255, 255, 0.4);
}

.cwspec__sub {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px;
}

/* --- edge-to-edge card row (touching borders) --- */
.cwspec__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.cwspec__card {
  position: relative;
  width: calc(100% / 3);
  min-height: 392px;
  padding: 38px 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: -1px;
  margin-bottom: -1px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  transition: background-color 0.5s ease;
}

/* line-art isometric icon, top-anchored (same as The Problem) */
.cwspec__icon {
  width: 88px;
  height: 88px;
  display: block;
  opacity: 0.9;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cwspec__card:hover .cwspec__icon,
.cwspec__card:focus-within .cwspec__icon {
  opacity: 1;
  transform: translateY(-3px);
}

.cwspec__card:hover {
  background-color: rgba(0, 54, 250, 0.06);
}

/* gradient rail draws across the top edge on hover */
.cwspec__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, #0036fa, #4e87fc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.cwspec__card:hover::before,
.cwspec__card:focus-within::before {
  transform: scaleX(1);
}

/* ghost index numeral */
.cwspec__idx {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 104px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.5s ease;
}

.cwspec__card:hover .cwspec__idx {
  opacity: 0.11;
}

.cwspec__kicker {
  position: relative;
  margin-top: auto;
  padding-top: 28px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-image: linear-gradient(90deg, #4e87fc, #86aefe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* base-anchored block: title always shown, body rises on hover */
.cwspec__foot {
  position: relative;
}

.cwspec__name {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.cwspec__reveal {
  max-height: 0;
  opacity: 0;
  transform: translateY(12px);
  overflow: hidden;
  transition: max-height 0.9s ease, opacity 0.8s ease,
              transform 0.9s ease, margin-top 0.9s ease;
  margin-top: 0;
}

.cwspec__card:hover .cwspec__reveal,
.cwspec__card:focus-within .cwspec__reveal {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 16px;
}

.cwspec__desc {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.68);
}

/* --- spec block: three labelled fields split by hairlines --- */
.cwspec__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cwspec__field {
  padding: 13px 16px 0 0;
}

.cwspec__field:nth-child(2) {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.cwspec__field--wide {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 13px;
  padding-right: 0;
}

.cwspec__flabel {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.cwspec__fval {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 5px;
}

/* --- scroll-reveal (site motion language) --- */
.cwspec__intro,
.cwspec__card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cwspec__intro.is-in,
.cwspec__card.is-in {
  opacity: 1;
  transform: none;
}

.cwspec__card.is-in:nth-child(1) { transition-delay: 0.06s; }
.cwspec__card.is-in:nth-child(2) { transition-delay: 0.16s; }
.cwspec__card.is-in:nth-child(3) { transition-delay: 0.26s; }

/* is-in must not fight the hover transforms — clear transform once revealed */
.cwspec__card.is-in { transition: opacity 0.6s ease; }

@media (prefers-reduced-motion: reduce) {
  .cwspec__intro,
  .cwspec__card,
  .cwspec__card::before,
  .cwspec__reveal { transition: none; }
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .cwspec { padding: 78px 0; }
  .cwspec__inner { padding: 0 24px; gap: 48px; }
  .cwspec__title { font-size: 32px; line-height: 42px; }
  .cwspec__card {
    width: 100%;
    min-height: 0;
    margin-right: 0;
  }
  /* on touch, the body is always visible (no hover) */
  .cwspec__reveal {
    max-height: none;
    opacity: 1;
    transform: none;
    margin-top: 16px;
    overflow: visible;
  }
  .cwspec__card::before { transform: scaleX(1); }
}

/* ===== cw-asset.css ===== */
/* ==========================================================================
   AI Coworkers — "What makes a coworker a company asset, not just an agent."
   Sits below cw-spec (the black focal section) → this is a SUPPORTING section,
   so it runs on WHITE for page rhythm (pale-blue life → black spec → white asset)
   and keeps blue as accent only.
   Content type: 8 capability DEFINITIONS → a Q&A/collapse fit. References Home's
   FAQ (13-faq): split masthead/list, hairline rows, grid-rows 0fr→1fr collapse.
   Kept DISTINCT (not a copy of FAQ or the neighbours):
     · one asymmetric column (38 / 62) with a STICKY masthead, not FAQ's even 1:1
     · signature = an ANNOTATION-THREAD gutter: a gradient node per row that,
       on open, draws a vertical gradient line down through the answer — as if
       the description is annotated onto the title
     · affordance is a thin rotating CHEVRON (not FAQ's plus→×, not cw-spec's
       ghost numeral, not cw-life's mono node-labels)
   Blue only: #0036fa→#4e87fc gradient + black/ink tints. Motion = site language.
   ========================================================================== */

.pg-cwasset {
  background-color: #fff;
  padding: 108px 0 116px;
}

.pg-cwasset__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

.pg-cwasset__grid {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 88px;
  align-items: start;
}

/* --- sticky masthead (left) --- */
.pg-cwasset__aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pg-cwasset__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pg-cwasset__tag-bar {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 8px;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
}

.pg-cwasset__tag-bar::before,
.pg-cwasset__tag-bar::after {
  content: "";
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 1px;
}

.pg-cwasset__tag-bar::before {
  top: 0;
  width: 15px;
  background: linear-gradient(to right, #0036fa, #c0e2f9);
}

.pg-cwasset__tag-bar::after {
  top: 4px;
  width: 14px;
  background: linear-gradient(to right, #c0e2f9, #0036fa);
}

.pg-cwasset__tagline p {
  font-family: "Cabin", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
}

.pg-cwasset__title {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 54px;
  color: #000;
  text-wrap: pretty;
}

.pg-cwasset__title-dim {
  color: rgba(0, 0, 0, 0.34);
}

.pg-cwasset__lead {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #4d4d4d;
  max-width: 360px;
}

/* small "N / 08" reading indicator — signature echo of the mono voice */
.pg-cwasset__meter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
}

.pg-cwasset__meter b {
  font-weight: 700;
  font-size: 15px;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- accordion list (right) --- */
.pg-cwasset__list {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pg-cwasset__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pg-cwasset__head {
  display: grid;
  grid-template-columns: 30px 1fr 24px;
  align-items: center;
  column-gap: 18px;
  width: 100%;
  margin: 0;
  padding: 26px 0 26px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* gutter node — the anchor of the annotation thread */
.pg-cwasset__node {
  position: relative;
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.28);
  background: transparent;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.pg-cwasset__item.is-open .pg-cwasset__node {
  border-color: transparent;
  background: linear-gradient(135deg, #0036fa, #4e87fc);
  box-shadow: 0 0 0 4px rgba(0, 54, 250, 0.1);
}

.pg-cwasset__q {
  font-family: "Cabin", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 28px;
  color: #000;
  transition: color 0.3s ease;
}

/* thin chevron drawn from two rules — rotates 180° on open */
.pg-cwasset__chev {
  justify-self: end;
  width: 13px;
  height: 13px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-cwasset__chev::before,
.pg-cwasset__chev::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.3s ease;
}

.pg-cwasset__chev::before { left: 0; transform: rotate(45deg); }
.pg-cwasset__chev::after  { right: 0; transform: rotate(-45deg); }

.pg-cwasset__item.is-open .pg-cwasset__chev { transform: rotate(180deg); }

.pg-cwasset__item.is-open .pg-cwasset__chev::before,
.pg-cwasset__item.is-open .pg-cwasset__chev::after {
  background: #0036fa;
}

/* collapse wrapper (grid-rows technique, from FAQ) */
.pg-cwasset__wrap {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 18px;
}

.pg-cwasset__thread-col {
  position: relative;
}

/* the vertical gradient thread grows top→bottom while the row is open */
.pg-cwasset__thread {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  width: 2px;
  height: calc(100% + 8px);
  background: linear-gradient(180deg, #0036fa, rgba(78, 135, 252, 0));
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-cwasset__item.is-open .pg-cwasset__thread {
  transform: translateX(-50%) scaleY(1);
}

.pg-cwasset__ans-outer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.pg-cwasset__item.is-open .pg-cwasset__ans-outer {
  grid-template-rows: 1fr;
}

.pg-cwasset__a {
  overflow: hidden;
  min-height: 0;
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: #4d4d4d;
  max-width: 640px;
  padding-bottom: 0;
  opacity: 0;
  transition: opacity 0.35s ease, padding-bottom 0.4s ease;
}

.pg-cwasset__item.is-open .pg-cwasset__a {
  padding-bottom: 30px;
  opacity: 1;
}

/* --- scroll reveal (site motion language) --- */
.pg-cwasset__aside,
.pg-cwasset__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pg-cwasset__aside.is-in,
.pg-cwasset__item.is-in {
  opacity: 1;
  transform: none;
}

.pg-cwasset__item.is-in:nth-child(1) { transition-delay: 0.04s; }
.pg-cwasset__item.is-in:nth-child(2) { transition-delay: 0.10s; }
.pg-cwasset__item.is-in:nth-child(3) { transition-delay: 0.16s; }
.pg-cwasset__item.is-in:nth-child(4) { transition-delay: 0.22s; }
.pg-cwasset__item.is-in:nth-child(5) { transition-delay: 0.28s; }
.pg-cwasset__item.is-in:nth-child(6) { transition-delay: 0.34s; }
.pg-cwasset__item.is-in:nth-child(7) { transition-delay: 0.40s; }
.pg-cwasset__item.is-in:nth-child(8) { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  .pg-cwasset__aside,
  .pg-cwasset__item,
  .pg-cwasset__node,
  .pg-cwasset__chev,
  .pg-cwasset__thread,
  .pg-cwasset__ans-outer,
  .pg-cwasset__a { transition: none; }
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .pg-cwasset { padding: 78px 0; }
  .pg-cwasset__inner { padding: 0 24px; }
  .pg-cwasset__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pg-cwasset__aside {
    position: static;
    top: auto;
  }
  .pg-cwasset__title { font-size: 32px; line-height: 42px; }
  .pg-cwasset__lead { max-width: none; }
}

/* ===== cw-adopt.css ===== */
/* ==========================================================================
   AI Coworkers — "Software doesn't create adoption. People do." Sits below
   cw-asset (white accordion). Content type: an EDITORIAL manifesto/essay —
   kicker + bold statement + two-paragraph argument carrying one hard stat
   (~90% drop) and a partner link. Text-heavy statement, like Home's editorial
   copy blocks → an asymmetric editorial split, NOT a card grid.
   Kept DISTINCT from neighbours: no accordion (cw-asset), no cards/nodes.
   Signature = a PULL-STAT: the buried evidence ("nearly ninety percent") is
   lifted out as a large gradient DISPLAY figure beside the statement and
   counts up 0→90 on reveal — display type as the focal object.
   Role = supporting/closing argument before the footer CTA → restrained on a
   pale-blue band (rhythm: black spec → white asset → blue-tint adopt).
   Blue only: #0036fa→#4e87fc. Motion = site language + one count-up micro-int.
   ========================================================================== */

.pg-cwadopt {
  background-color: #f4f6fc;
  padding: 112px 0 116px;
}

.pg-cwadopt__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

.pg-cwadopt__grid {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: 92px;
  align-items: start;
}

/* --- left: statement + pull-stat --- */
.pg-cwadopt__lead {
  display: flex;
  flex-direction: column;
}

.pg-cwadopt__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.pg-cwadopt__tag-bar {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 8px;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
}

.pg-cwadopt__tag-bar::before,
.pg-cwadopt__tag-bar::after {
  content: "";
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 1px;
}

.pg-cwadopt__tag-bar::before {
  top: 0;
  width: 15px;
  background: linear-gradient(to right, #0036fa, #c0e2f9);
}

.pg-cwadopt__tag-bar::after {
  top: 4px;
  width: 14px;
  background: linear-gradient(to right, #c0e2f9, #0036fa);
}

.pg-cwadopt__tagline p {
  font-family: "Cabin", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
}

.pg-cwadopt__statement {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: normal;
  color: #000;
  text-wrap: balance;
  margin: 0;
}

/* pull-stat — the signature display object */
.pg-cwadopt__stat {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 54, 250, 0.16);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-cwadopt__figure {
  display: inline-flex;
  align-items: baseline;
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.pg-cwadopt__figure-approx {
  font-size: 44px;
  color: rgba(0, 54, 250, 0.35);
  margin-right: 6px;
}

.pg-cwadopt__figure-num {
  font-size: 108px;
  background-image: linear-gradient(120deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.pg-cwadopt__figure-pct {
  font-size: 52px;
  background-image: linear-gradient(120deg, #0036fa, #4e87fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 2px;
}

.pg-cwadopt__figure-cap {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.5);
  max-width: 340px;
  text-transform: uppercase;
}

/* --- right: essay --- */
.pg-cwadopt__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 4px;
}

.pg-cwadopt__body p {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #4d4d4d;
  margin: 0;
  max-width: 620px;
}

.pg-cwadopt__body em {
  font-style: normal;
  font-weight: 600;
  color: #1a1a1a;
}

.pg-cwadopt__link {
  font-weight: 600;
  color: #0036fa;
  text-decoration: none;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  transition: background-size 0.3s ease, opacity 0.2s ease;
  padding-bottom: 1px;
}

.pg-cwadopt__link:hover {
  opacity: 0.8;
}

/* --- scroll reveal (site motion language) --- */
.pg-cwadopt__lead,
.pg-cwadopt__body {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pg-cwadopt__body { transition-delay: 0.1s; }

.pg-cwadopt__lead.is-in,
.pg-cwadopt__body.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pg-cwadopt__lead,
  .pg-cwadopt__body { transition: none; }
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .pg-cwadopt { padding: 78px 0; }
  .pg-cwadopt__inner { padding: 0 24px; }
  .pg-cwadopt__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .pg-cwadopt__statement { font-size: 34px; line-height: 44px; }
  .pg-cwadopt__figure-num { font-size: 84px; }
  .pg-cwadopt__figure-pct { font-size: 42px; }
  .pg-cwadopt__figure-approx { font-size: 36px; }
}

/* ===== cw-faq.css ===== */
/* ==========================================================================
   AI Coworkers — "Questions we hear" FAQ. Sits below cw-adopt (pale-blue
   editorial). Content type: a Q&A reference list (10 pairs) → the FAQ family
   from Home (13-faq.css), reusing its tokens: Cabin, hairline dividers
   rgba(0,0,0,.1), question 500, answer 400 #4d4d4d, mono/gradient kicker.
   Kept DISTINCT: Home FAQ + this page's cw-asset are both ACCORDIONS; this is
   deliberately the opposite — a STATIC always-open two-column reference so the
   reader scans everything at once (matches the supplied comp).
   Signature = a hanging monospace index gutter (01–10): FAQ-as-index, small &
   muted so it structures the eye without competing with cw-spec's huge ghost
   numerals; on hover a short gradient tick grows in the gutter and the question
   inks to blue. Role = supporting/closing reference before footer → restrained
   on white (rhythm: white asset → blue-tint adopt → white faq).
   Blue only: #0036fa→#4e87fc. Motion = site reveal language, per-item stagger.
   ========================================================================== */

.pg-cwfaq {
  background-color: #fff;
  padding: 112px 0 120px;
}

.pg-cwfaq__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

/* --- header --- */
.pg-cwfaq__head {
  margin-bottom: 56px;
}

.pg-cwfaq__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.pg-cwfaq__tag-bar {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 8px;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
}

.pg-cwfaq__tag-bar::before,
.pg-cwfaq__tag-bar::after {
  content: "";
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 1px;
}

.pg-cwfaq__tag-bar::before {
  top: 0;
  width: 15px;
  background: linear-gradient(to right, #0036fa, #c0e2f9);
}

.pg-cwfaq__tag-bar::after {
  top: 4px;
  width: 14px;
  background: linear-gradient(to right, #c0e2f9, #0036fa);
}

.pg-cwfaq__tagline p {
  font-family: "Cabin", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
}

.pg-cwfaq__title {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: normal;
  color: #000;
  margin: 0;
}

/* --- two-column list --- */
.pg-cwfaq__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
}

.pg-cwfaq__col {
  display: flex;
  flex-direction: column;
}

.pg-cwfaq__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 16px;
  padding: 26px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* signature — hanging mono index + hover tick */
.pg-cwfaq__idx {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(0, 54, 250, 0.4);
  position: relative;
}

.pg-cwfaq__idx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0036fa, #4e87fc);
  transition: width 0.3s ease;
}

.pg-cwfaq__item:hover .pg-cwfaq__idx::after {
  width: 22px;
}

.pg-cwfaq__q {
  font-family: "Cabin", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #000;
  margin: 0 0 8px;
  transition: color 0.25s ease;
}

.pg-cwfaq__item:hover .pg-cwfaq__q {
  color: #0036fa;
}

.pg-cwfaq__a {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4d4d4d;
  margin: 0;
}

.pg-cwfaq__link {
  font-weight: 600;
  color: #0036fa;
  text-decoration: none;
  background-image: linear-gradient(90deg, #0036fa, #4e87fc);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.pg-cwfaq__link:hover {
  opacity: 0.75;
}

/* --- scroll reveal (site motion language, per-item stagger) --- */
.pg-cwfaq__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.pg-cwfaq__item.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pg-cwfaq__item {
    transition: none;
  }
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .pg-cwfaq { padding: 78px 0; }
  .pg-cwfaq__inner { padding: 0 24px; }
  .pg-cwfaq__title { font-size: 34px; line-height: 44px; }
  .pg-cwfaq__cols {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  /* keep a single continuous divided list on mobile */
  .pg-cwfaq__col:last-child .pg-cwfaq__item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}