/* Intentions feed and card.

   THE CARD IS 9:16 because that is the shape this content gets shared in. The
   loop library is 3:4 portrait, which is WIDER than 9:16, so clips fill the
   frame and crop at the sides. Cropping horizontally loses background, not
   heads and feet, which is why it is the side that gives.

   FONT. This site's face is Montserrat and body sets no font-family, so anything
   that does not say so explicitly renders in Times. Every rule below states it.

   DARK MODE is data-mode="batman" on the root, not a media query and not
   data-theme. The card is dark in BOTH modes on purpose: it is a lit screen over
   footage, and inverting it would make white text sit on white in light mode.
   What changes between modes is the page around the card. */

.kci-feed {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 8px 0 64px;
}

.kci-empty {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--wt-muted, #5d6b62);
  text-align: center;
  max-width: 46ch;
  margin: 48px auto;
  line-height: 1.6;
}

/* ---------- the card ---------- */
.kci-card {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #10140f;
  color: #fffdf9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16), 0 24px 60px -28px rgba(0, 0, 0, .5);
  isolation: isolate;
  scroll-margin-top: 96px;
}

.kci-stage { position: absolute; inset: 0; z-index: 0; }

.kci-poster {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center bottom; /* portrait crops to the BOTTOM, house rule */
  background-repeat: no-repeat;
  filter: saturate(.92);
}

.kci-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  transition: opacity .28s ease;
}
.kci-video.is-live { opacity: 1; }

/* Legibility floor. Text sits on unpredictable footage, so the scrim is not
   decoration, it is what keeps contrast above AA no matter which clip is up. */
.kci-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 10, 8, .58) 0%, rgba(6, 10, 8, .12) 22%, rgba(6, 10, 8, 0) 38%),
    linear-gradient(to top, rgba(6, 10, 8, .88) 0%, rgba(6, 10, 8, .62) 24%, rgba(6, 10, 8, .1) 52%, rgba(6, 10, 8, 0) 68%);
}

/* ---------- voice, top ---------- */
.kci-top {
  position: absolute; z-index: 3;
  top: 0; left: 0; right: 0;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}

.kci-voice { display: flex; align-items: center; gap: 11px; min-width: 0; }

.kci-voice-disc {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 253, 249, .16);
  border: 1.5px solid rgba(255, 253, 249, .62);
  backdrop-filter: blur(6px);
}
.kci-voice-initial {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700; font-size: 17px; line-height: 1; color: #fffdf9;
}

.kci-voice-meta { display: flex; flex-direction: column; min-width: 0; }
.kci-voice-name {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .01em; color: #fffdf9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.kci-voice-sub {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 253, 249, .78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ---------- right rail ---------- */
.kci-rail {
  position: absolute; z-index: 4;
  right: 10px; bottom: 168px;
  display: flex; flex-direction: column; gap: 20px; align-items: center;
}

.kci-act {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 2px; margin: 0;
  color: #fffdf9;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  text-decoration: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55));
  transition: transform .16s ease, color .16s ease;
}
.kci-act:hover { transform: translateY(-1px); }
.kci-act:active { transform: scale(.94); }
.kci-act.is-on { color: #ff6b8a; }
.kci-act.is-done { color: var(--wt-accent, #8fd0b4); }

.kci-act-label {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 253, 249, .92);
}

/* ---------- live sentence ---------- */
.kci-line {
  position: absolute; z-index: 3;
  left: 18px; right: 78px; bottom: 152px;
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 19px; line-height: 1.42; font-weight: 600;
  color: #fffdf9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .68);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.kci-card.is-playing .kci-line { opacity: 1; }

/* ---------- caption, bottom left ---------- */
.kci-caption {
  position: absolute; z-index: 3;
  left: 18px; right: 78px; bottom: 92px;
  transition: opacity .3s ease;
}
.kci-card.is-playing .kci-caption { opacity: 0; pointer-events: none; }

.kci-title {
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0 0 6px;
  font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.005em;
  color: #fffdf9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  text-wrap: balance;
}

.kci-step {
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 0;
  font-size: 15px; line-height: 1.5; font-weight: 500;
  color: rgba(255, 253, 249, .94);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kci-caption.is-open .kci-step { -webkit-line-clamp: unset; overflow: visible; }

.kci-more {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 3px 0 0; margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: rgba(255, 253, 249, .78);
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.kci-more:hover { color: #fffdf9; }

.kci-tags {
  font-family: "Montserrat", system-ui, sans-serif;
  margin: 8px 0 0;
  font-size: 13px; font-weight: 600;
  color: rgba(255, 253, 249, .86);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}

/* ---------- transport ---------- */
.kci-transport {
  position: absolute; z-index: 5;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 18px;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 12px;
}

.kci-play {
  -webkit-appearance: none; appearance: none;
  width: 52px; height: 52px; flex: none;
  border-radius: 50%; border: 0; padding: 0;
  background: #fffdf9; color: #10140f;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  transition: transform .16s ease;
}
.kci-play:hover { transform: scale(1.05); }
.kci-play:active { transform: scale(.95); }

.kci-mini {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 4px; margin: 0;
  color: rgba(255, 253, 249, .88); cursor: pointer;
  display: grid; place-items: center;
}
.kci-mini:hover { color: #fffdf9; }

.kci-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: rgba(255, 253, 249, .9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.kci-scrub {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: none; cursor: pointer; margin: 0;
}
.kci-scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: rgba(255, 253, 249, .34);
}
.kci-scrub::-moz-range-track {
  height: 4px; border-radius: 999px; background: rgba(255, 253, 249, .34);
}
.kci-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; border: 0;
  background: #fffdf9; margin-top: -4.5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.kci-scrub::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: 0; background: #fffdf9;
}

/* ---------- focus, on a dark card ---------- */
.kci-card :focus-visible {
  outline: 3px solid #fffdf9;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- reduced motion: no cutting at all ---------- */
@media (prefers-reduced-motion: reduce) {
  .kci-video { display: none; }
  .kci-act, .kci-play, .kci-video { transition: none; }
  .kci-line, .kci-caption { transition: none; }
}

/* ---------- narrow phones ---------- */
@media (max-width: 430px) {
  .kci-card { width: calc(100vw - 20px); border-radius: 14px; }
  .kci-line { font-size: 17px; bottom: 148px; }
  .kci-title { font-size: 19px; }
  .kci-rail { bottom: 164px; gap: 17px; }
}

/* ============================================================
   PAGE CHROME: the intro above the feed, and the detail page.
   These follow the SITE tokens (--wt-*) rather than the card's
   fixed dark palette, because they sit on the page, not on
   footage. Dark mode is data-mode="batman" on the root.
   ============================================================ */

.kci-page {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: var(--wt-ink, #26302b);
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 0;
}

.kci-intro { text-align: center; margin-bottom: 34px; }

.kci-eyebrow {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wt-accent, #2c5f4e);
  margin: 0 0 12px;
}
.kci-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

.kci-h1 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.12; font-weight: 700; letter-spacing: -.015em;
  margin: 0 0 14px;
  color: var(--wt-ink, #26302b);
  text-wrap: balance;
}

.kci-lede {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 1.05rem; line-height: 1.6; font-weight: 500;
  color: var(--wt-ink-soft, #475048);
  max-width: 54ch; margin: 0 auto 22px;
}

.kci-cta {
  display: inline-block;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  padding: 13px 26px; border-radius: 999px;
  background: var(--wt-btn-bg, #2c5f4e);
  color: var(--wt-btn-ink, #fffdf9);
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.kci-cta:hover { background: var(--wt-btn-bg-hover, #1f4638); transform: translateY(-1px); }
.kci-cta:active { transform: translateY(0); }
.kci-cta:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 3px; }

/* ---------- detail page ---------- */
.kci-detail { padding-bottom: 72px; }
.kci-article { max-width: 62ch; margin: 0 auto; }
.kci-detail .kci-h1 { text-align: left; }
.kci-detail .kci-eyebrow { text-align: left; }

.kci-byline {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--wt-muted, #5d6b62);
  margin: 0 0 22px;
}

.kci-player { margin: 0 0 30px; }
.kci-player audio { width: 100%; height: 44px; }

.kci-body p {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 1.08rem; line-height: 1.72; font-weight: 400;
  color: var(--wt-ink, #26302b);
  margin: 0 0 20px;
}

.kci-step-box {
  border-left: 3px solid var(--wt-accent, #2c5f4e);
  background: var(--wt-chip-bg, #ede7da);
  border-radius: 4px;
  padding: 18px 22px;
  margin: 30px 0;
}
.kci-step-box .kci-eyebrow { margin-bottom: 6px; }
.kci-step-text {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 1.05rem; line-height: 1.55; font-weight: 600;
  color: var(--wt-ink, #26302b);
  margin: 0;
}

.kci-taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0; }
.kci-tag {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 11px; border-radius: 7px;           /* tags are RECTANGLES, house rule; pills are for buttons */
  background: var(--wt-chip-bg, #ede7da);
  border: 1px solid var(--wt-chip-border, #ddd4c2);
  color: var(--wt-chip-ink, #34403a);
}

.kci-back {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: var(--wt-muted, #5d6b62);
  margin: 34px 0 0;
}
.kci-back a { color: var(--wt-accent, #2c5f4e); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   CREATE FLOW. One question per screen, generous type, and a
   skip that is always visible on anything optional. Uses the
   site tokens so it sits inside the page rather than on top
   of footage like the card does.
   ============================================================ */

.kcc { font-family: "Montserrat", system-ui, -apple-system, sans-serif; max-width: 620px; margin: 0 auto; }

.kcc-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.kcc-progress-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wt-accent, #2c5f4e); white-space: nowrap;
}
.kcc-progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--wt-chip-bg, #ede7da); overflow: hidden; }
.kcc-progress-fill { display: block; height: 100%; background: var(--wt-accent, #2c5f4e); transition: width .3s ease; }
.kcc-progress-count { font-size: 12px; font-weight: 600; color: var(--wt-muted, #5d6b62); white-space: nowrap; }

.kcc-card { background: var(--wt-card-bg, #fffdf9); border: 1px solid var(--wt-chip-border, #ddd4c2); border-radius: 12px; padding: 28px; }

.kcc-label {
  display: block;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.6vw, 1.72rem); line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
  color: var(--wt-ink, #26302b); margin: 0 0 8px; text-wrap: balance;
}
.kcc-help { font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--wt-ink-soft, #475048); margin: 0 0 18px; }

.kcc-input {
  font-family: "Montserrat", system-ui, sans-serif;
  width: 100%; box-sizing: border-box;
  font-size: 17px; line-height: 1.5; font-weight: 500;
  color: var(--wt-ink, #26302b);
  background: var(--wt-surface, #fffdf9);
  border: 2px solid var(--wt-chip-border, #ddd4c2);
  border-radius: 9px; padding: 13px 15px;
  resize: vertical;
}
/* ONE focus line on a field, never two. The border going green IS the focus
   indicator on this site. Adding an outline on top draws a SECOND ring outside
   the field, which is the double-outline Kao has now had to report more than
   once. Any site-wide ring is suppressed here for the same reason. */
.kcc-input:focus,
.kcc-input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--wt-accent, #2c5f4e);
}

.kcc-error { font-size: 14px; font-weight: 600; color: #a33a34; margin: 10px 0 0; min-height: 1px; }

.kcc-row { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.kcc-primary {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; padding: 13px 26px; border: 0; border-radius: 999px;
  background: var(--wt-btn-bg, #2c5f4e); color: var(--wt-btn-ink, #fffdf9); cursor: pointer;
}
.kcc-primary:hover { background: var(--wt-btn-bg-hover, #1f4638); }
.kcc-ghost {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 15px; font-weight: 600; padding: 13px 18px; border: 0; border-radius: 999px;
  background: none; color: var(--wt-muted, #5d6b62); cursor: pointer; text-decoration: underline;
}
.kcc-ghost:hover { color: var(--wt-ink, #26302b); }

.kcc-working { font-size: 17px; font-weight: 600; color: var(--wt-muted, #5d6b62); text-align: center; padding: 40px 0; }

.kcc-done { text-align: center; margin-bottom: 22px; }
.kcc-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wt-accent, #2c5f4e); margin: 0 0 8px; }
.kcc-done-title { font-family: "Montserrat", system-ui, sans-serif; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; font-weight: 700; margin: 0; color: var(--wt-ink, #26302b); text-wrap: balance; }

.kcc-story p { font-size: 1.06rem; line-height: 1.72; color: var(--wt-ink, #26302b); margin: 0 0 18px; }

.kcc-step { border-left: 3px solid var(--wt-accent, #2c5f4e); background: var(--wt-chip-bg, #ede7da); border-radius: 4px; padding: 18px 22px; margin: 26px 0; }
.kcc-step-text { font-size: 1.05rem; line-height: 1.55; font-weight: 600; color: var(--wt-ink, #26302b); margin: 0; }

.kcc-share, .kcc-deeper { margin: 34px 0 0; padding: 26px; border: 1px solid var(--wt-chip-border, #ddd4c2); border-radius: 12px; background: var(--wt-card-bg, #fffdf9); }
.kcc-share-title { font-family: "Montserrat", system-ui, sans-serif; font-size: 1.28rem; font-weight: 700; margin: 0 0 8px; color: var(--wt-ink, #26302b); }

.kcc-preview { border: 1px dashed var(--wt-chip-border, #ddd4c2); border-radius: 9px; padding: 16px 18px; margin: 16px 0 20px; background: var(--wt-chip-bg, #ede7da); }
.kcc-preview p { font-size: 15px; line-height: 1.62; color: var(--wt-ink-soft, #475048); margin: 0 0 12px; }
.kcc-preview-note { font-size: 13px !important; font-weight: 600; color: var(--wt-muted, #5d6b62) !important; margin-bottom: 0 !important; }

.kcc-options { display: grid; gap: 10px; }
@media (min-width: 560px) { .kcc-options { grid-template-columns: 1fr 1fr; } }
.kcc-option {
  font-family: "Montserrat", system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 16px 18px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--wt-chip-border, #ddd4c2);
  background: var(--wt-surface, #fffdf9); color: var(--wt-ink, #26302b);
}
.kcc-option.is-primary { border-color: var(--wt-accent, #2c5f4e); background: var(--wt-chip-bg, #ede7da); }
.kcc-option:hover { border-color: var(--wt-accent, #2c5f4e); }
.kcc-option-title { font-size: 16px; font-weight: 700; }
.kcc-option-sub { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--wt-ink-soft, #475048); }

.kcc-saved { font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--wt-accent, #2c5f4e); margin: 34px 0 0; padding: 20px 24px; border-radius: 12px; background: var(--wt-chip-bg, #ede7da); }

.kcc-field { margin: 0 0 14px; }
.kcc-field-label { display: block; font-size: 14.5px; font-weight: 600; color: var(--wt-ink-soft, #475048); margin: 0 0 6px; }

/* ============================================================
   AFFIRMATION DECK. Direction: Frosted Glass, with Kao's
   corrections of 2026-08-20 applied:
     logo bigger, text bigger, our fonts, swipe both ways,
     background LESS feminine, controls OUTSIDE the card and
     aligned bottom-left like every other card system here.

   The field underneath is the brand green over warm sand
   instead of the original pink-to-lavender, which is what
   "less feminine" meant in practice: same softness, palette
   the rest of the site already speaks.
   ============================================================ */

.kca-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 34px 22px;
  border-radius: 20px;
  background:
    radial-gradient(130% 100% at 12% 8%, rgba(143, 208, 180, .55) 0%, rgba(143, 208, 180, 0) 58%),
    radial-gradient(120% 95% at 88% 92%, rgba(44, 95, 78, .34) 0%, rgba(44, 95, 78, 0) 62%),
    linear-gradient(155deg, #eef2ec 0%, #e7e2d6 52%, #dfe6de 100%);
}

.kca-card {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 30px 26px;
  border-radius: 20px;
  background: rgba(255, 253, 249, .62);
  border: 1px solid rgba(255, 253, 249, .78);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  box-shadow: 0 1px 2px rgba(38, 48, 43, .06), 0 22px 48px -22px rgba(38, 48, 43, .3);
  cursor: grab;
  touch-action: pan-y;              /* let the page scroll vertically; we own the horizontal */
  user-select: none;
}
.kca-card:active { cursor: grabbing; }
.kca-card:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 4px; }

/* logo: was a whisper, now reads */
.kca-brand {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wt-accent, #2c5f4e);
  margin: 0; align-self: flex-start;
}

/* the affirmation is the whole object, so it is the biggest thing on it */
.kca-body {
  font-family: "Montserrat", system-ui, sans-serif;
  flex: 1; display: flex; align-items: center;
  font-size: clamp(1.5rem, 4.6vw, 2.05rem);
  line-height: 1.32; font-weight: 700; letter-spacing: -.012em;
  color: var(--wt-ink, #26302b);
  text-align: center; text-wrap: balance;
  margin: 22px 0 0;
}

.kca-theme {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--wt-muted, #5d6b62);
  margin: 18px 0 0; text-align: center;
}

.kca-foot {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--wt-muted, #5d6b62);
  margin: 20px 0 0;
}

/* enter animation, both directions, and off entirely under reduced motion */
@keyframes kcaInRight { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes kcaInLeft  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.kca-card.in-right { animation: kcaInRight .26s ease both; }
.kca-card.in-left  { animation: kcaInLeft .26s ease both; }

/* controls OUTSIDE the card, bottom and LEFT aligned */
.kca-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; padding: 0;
}
.kca-btn {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--wt-chip-border, #ddd4c2);
  background: var(--wt-surface, #fffdf9);
  color: var(--wt-ink-soft, #475048);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.kca-btn:hover { border-color: var(--wt-accent, #2c5f4e); color: var(--wt-ink, #26302b); }
.kca-btn:active { transform: scale(.94); }
.kca-btn.is-on { color: #c2496b; border-color: #c2496b; }
.kca-btn.is-done { color: var(--wt-accent, #2c5f4e); border-color: var(--wt-accent, #2c5f4e); }
.kca-btn:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 2px; }

.kca-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--wt-muted, #5d6b62); margin-left: 4px;
}

.kca-note {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: var(--wt-muted, #5d6b62);
  margin: 12px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .kca-card.in-right, .kca-card.in-left { animation: none; }
  .kca-btn { transition: none; }
}

/* ============================================================
   SPECIFICITY DEFENSE. These pages are generated inside the
   Manifest shell, so <div class="kcm-app"> is an ancestor and
   kc-manifest-app.css carries:

       .kcm-app a { color: var(--kcm-green); }

   That is 0,1,1 and beats a bare .kci-cta at 0,1,0, so every
   link in this section inherited the app's green. In DARK mode
   --kcm-green resolves to #8fd0b4, which is the SAME value as
   --wt-btn-bg, so the primary call to action rendered as green
   text on a green pill: a button with no readable label. It
   also turned the card's "Read" action green while its Save and
   Share siblings stayed white.

   Every selector below is at least 0,2,1 so it wins outright
   rather than relying on load order. Do not lower them.
   ============================================================ */

.kci-page a.kci-cta { color: var(--wt-btn-ink, #fffdf9); }
.kci-page a.kci-cta:hover { color: var(--wt-btn-ink, #fffdf9); }

.kci-card a.kci-act { color: #fffdf9; }
.kci-card a.kci-act:hover { color: #fffdf9; }

.kci-page .kci-eyebrow a { color: var(--wt-accent, #2c5f4e); }
.kci-page .kci-back a { color: var(--wt-accent, #2c5f4e); }
.kci-page .kci-article a { color: var(--wt-accent, #2c5f4e); }

.kci-page .kcc-primary,
.kci-page .kcc-option { color: var(--wt-btn-ink, #fffdf9); }
.kci-page .kcc-option { color: var(--wt-ink, #26302b); }

/* ============================================================
   LEGIBILITY FIX 2026-08-20. Kao caught a title rendering as
   dark-on-bright over snow: unreadable, and on a wellness site
   that is a failure not a blemish.

   ROOT CAUSE. The card-wide scrim is a gradient anchored to the
   card's bottom edge. The caption block is tall and variable,
   so on a long title the top of the text sat ABOVE where the
   gradient still had any density, and text-shadow alone cannot
   rescue white type on a bright highlight.

   THE FIX. The caption owns its own backing. A gradient painted
   behind the caption block itself, sized to the caption, so it
   is always exactly as tall as the text is, whatever the text
   does. That is a guarantee rather than a gradient that happens
   to be in the right place. Contrast holds on the brightest
   frame in the library.
   ============================================================ */

.kci-caption, .kci-line { position: absolute; }

.kci-caption::before, .kci-line::before {
  content: "";
  position: absolute;
  left: -18px; right: -78px; top: -22px; bottom: -26px;
  z-index: -1;
  border-radius: 14px;
  background: linear-gradient(to top,
    rgba(6, 10, 8, .92) 0%,
    rgba(6, 10, 8, .86) 45%,
    rgba(6, 10, 8, .62) 78%,
    rgba(6, 10, 8, 0) 100%);
  pointer-events: none;
}
.kci-line::before { bottom: -14px; top: -14px; }

/* The scrim is now doing less work up top, so it can be gentler on the
   picture while the caption stays guaranteed-legible. */
.kci-scrim {
  background:
    linear-gradient(to bottom, rgba(6, 10, 8, .55) 0%, rgba(6, 10, 8, .1) 20%, rgba(6, 10, 8, 0) 36%),
    linear-gradient(to top, rgba(6, 10, 8, .82) 0%, rgba(6, 10, 8, .34) 30%, rgba(6, 10, 8, 0) 58%);
}

/* Text shadow stays as a second line of defense, not the first. */
.kci-title, .kci-step, .kci-tags, .kci-line { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }

/* Belt and braces: nothing inside the create flow may draw a ring on a field. */
.kcc .kcc-input:focus, .kcc .kcc-input:focus-visible,
.kcc textarea:focus, .kcc textarea:focus-visible,
.kcc input:focus, .kcc input:focus-visible { outline: none !important; box-shadow: none !important; }

/* ============================================================
   SIDE RAIL. Kao: "Where is the side nav like Music/Posters/
   Games?" Those use the v17 music engine's .am-side. This
   reproduces it with our own classes rather than loading four
   engine stylesheets, because those carry layout and mode side
   effects that have hijacked real pages before.
   ============================================================ */

.kci-shell { display: block; }
@media (min-width: 1040px) {
  .kci-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); align-items: start; }
}

.kci-side {
  font-family: "Montserrat", system-ui, sans-serif;
  border-right: 1px solid var(--wt-chip-border, #ddd4c2);
  padding: 26px 16px 40px;
  position: sticky; top: 62px;                 /* the site's sticky offset */
  max-height: calc(100vh - 62px); overflow-y: auto;
}
@media (max-width: 1039px) {
  .kci-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--wt-chip-border, #ddd4c2); padding: 18px 16px; }
  .kci-side__nav { flex-direction: row; flex-wrap: wrap; }
}

.kci-side__hd {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wt-muted, #5d6b62); margin: 0 0 12px; padding: 0 10px;
}
.kci-side__nav { display: flex; flex-direction: column; gap: 2px; margin: 0 0 22px; }
.kci-side__nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 9px;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--wt-ink-soft, #475048); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.kci-side__nav a:hover { background: var(--wt-chip-bg, #ede7da); color: var(--wt-ink, #26302b); }
.kci-side__nav a[aria-current="page"] { background: var(--wt-chip-bg, #ede7da); color: var(--wt-ink, #26302b); font-weight: 700; }
.kci-side__nav a:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 2px; }
.kci-side__nav svg { width: 20px; height: 20px; flex: none; }

.kci-side__cta {
  display: block; text-align: center; margin: 0 6px;
  padding: 12px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  background: var(--wt-btn-bg, #2c5f4e);
}
.kci-shell .kci-side__cta { color: var(--wt-btn-ink, #fffdf9); }
.kci-side__cta:hover { background: var(--wt-btn-bg-hover, #1f4638); }

.kci-body { min-width: 0; padding: 0 20px; }
.kci-shell .kci-page { max-width: 860px; margin: 0; padding-left: 0; padding-right: 0; }

/* ============================================================
   JOURNAL / PROOF / SAVED
   ============================================================ */
.kcp { font-family: "Montserrat", system-ui, sans-serif; max-width: 660px; }
.kcp-compose { display: block; margin: 0 0 30px; padding: 22px; border: 1px solid var(--wt-chip-border, #ddd4c2); border-radius: 12px; background: var(--wt-card-bg, #fffdf9); }
.kcp-label { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: var(--wt-ink, #26302b); }
.kcp-yourstep { font-size: 14.5px; font-weight: 600; color: var(--wt-accent, #2c5f4e); margin: 0 0 6px; }
.kcp-help { font-size: 14.5px; line-height: 1.5; color: var(--wt-ink-soft, #475048); margin: 0 0 14px; }

.kcp-prompts { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.kcp-prompt {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 7px;      /* tags are rectangles, house rule */
  border: 1px solid var(--wt-chip-border, #ddd4c2);
  background: var(--wt-surface, #fffdf9); color: var(--wt-ink-soft, #475048);
  cursor: pointer;
}
.kcp-prompt:hover { border-color: var(--wt-accent, #2c5f4e); color: var(--wt-ink, #26302b); }
.kcp-prompt.is-on { background: var(--wt-chip-bg, #ede7da); border-color: var(--wt-accent, #2c5f4e); color: var(--wt-ink, #26302b); }
.kcp-prompt:focus-visible { outline: 3px solid var(--wt-accent, #2c5f4e); outline-offset: 2px; }

.kcp-area, .kcp-input {
  font-family: inherit; width: 100%; box-sizing: border-box;
  font-size: 16.5px; line-height: 1.55; color: var(--wt-ink, #26302b);
  background: var(--wt-surface, #fffdf9);
  border: 2px solid var(--wt-chip-border, #ddd4c2);
  border-radius: 9px; padding: 13px 15px; resize: vertical;
}
/* ONE focus line on a field. Never an outline on top of the border. */
.kcp-area:focus, .kcp-area:focus-visible,
.kcp-input:focus, .kcp-input:focus-visible {
  outline: none; box-shadow: none; border-color: var(--wt-accent, #2c5f4e);
}

.kcp-err { font-size: 14px; font-weight: 600; color: #a33a34; margin: 10px 0 0; min-height: 1px; }
.kcp-primary {
  font-family: inherit; font-size: 15px; font-weight: 700; margin-top: 14px;
  padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wt-btn-bg, #2c5f4e);
}
.kcp .kcp-primary { color: var(--wt-btn-ink, #fffdf9); }
.kcp-primary:hover { background: var(--wt-btn-bg-hover, #1f4638); }

.kcp-count { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wt-muted, #5d6b62); margin: 0 0 12px; }
.kcp-list { display: flex; flex-direction: column; gap: 12px; }
.kcp-card { border: 1px solid var(--wt-chip-border, #ddd4c2); border-radius: 11px; background: var(--wt-card-bg, #fffdf9); padding: 16px 18px; }
.kcp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kcp-kind { font-size: 16px; font-weight: 700; margin: 0; color: var(--wt-ink, #26302b); }
.kcp-when { font-size: 13px; font-weight: 600; color: var(--wt-muted, #5d6b62); margin: 2px 0 0; }
.kcp-body { font-size: 15.5px; line-height: 1.6; color: var(--wt-ink, #26302b); margin: 9px 0 0; white-space: pre-wrap; }
.kcp-ghost { font-family: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; color: var(--wt-muted, #5d6b62); cursor: pointer; text-decoration: underline; padding: 0; }
.kcp-ghost:hover { color: #a33a34; }
.kcp-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; background: var(--wt-chip-bg, #ede7da); color: var(--wt-chip-ink, #34403a); }
.kcp-empty { border: 1px dashed var(--wt-chip-border, #ddd4c2); border-radius: 11px; padding: 28px 22px; text-align: center; }
.kcp-empty-t { font-size: 17px; font-weight: 700; margin: 0 0 5px; color: var(--wt-ink, #26302b); }
.kcp-empty-b { font-size: 14.5px; color: var(--wt-ink-soft, #475048); margin: 0; }
.kcp-sec { margin: 0 0 34px; }
.kcp-h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 14px; color: var(--wt-ink, #26302b); }
.kcp .kcp-link { font-size: 16px; font-weight: 700; color: var(--wt-accent, #2c5f4e); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   THE PAYOFF CARD in the create flow, plus the fixes from Kao's
   2026-08-20 test: a changeable visibility control, paired
   name/relationship fields, a real exit from the questions.
   ============================================================ */

.kcc-cardstage { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 26px; }
.kcc-own {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 9 / 16;
  max-height: 62vh;
  border-radius: 14px;              /* matches every other card on the site */
  overflow: hidden;
  background: #0e1210;
  color: #fffdf9;
}
.kcc-live {
  position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 74px; margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 17px; line-height: 1.4; font-weight: 600; color: #fffdf9;
  text-shadow: 0 1px 10px rgba(0,0,0,.85);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.kcc-own.is-playing .kcc-live { opacity: 1; }
.kcc-own.is-playing .kcx-cap { opacity: 0; }
.kcc-cardnote {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px; line-height: 1.5; color: var(--wt-muted, #5d6b62);
  text-align: center; max-width: 46ch; margin: 0;
}

.kcc-read { margin: 0 0 24px; border: 1px solid var(--wt-chip-border, #ddd4c2); border-radius: 11px; background: var(--wt-card-bg, #fffdf9); padding: 14px 18px; }
.kcc-read summary { font-family: "Montserrat", system-ui, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--wt-ink, #26302b); }
.kcc-read .kcc-story { margin-top: 14px; }

.kcc-state { font-family: "Montserrat", system-ui, sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--wt-accent, #2c5f4e); margin: 14px 0 0; }
.kcc-option.is-chosen { border-color: var(--wt-accent, #2c5f4e); background: var(--wt-chip-bg, #ede7da); box-shadow: inset 0 0 0 1px var(--wt-accent, #2c5f4e); }

.kcc-pair { margin: 0 0 14px; }
.kcc-pairgrid { display: grid; gap: 8px; }
@media (min-width: 520px) { .kcc-pairgrid { grid-template-columns: 1fr 1fr; } }

.kcc-ghost--quiet { color: var(--wt-muted, #5d6b62); font-weight: 500; }
.kcc-done-block { margin: 30px 0 0; padding: 24px; border: 1px solid var(--wt-chip-border, #ddd4c2); border-radius: 12px; background: var(--wt-card-bg, #fffdf9); }
.kcc-done-block .kcc-row { flex-wrap: wrap; }
.kcc-done-block a { text-decoration: none; display: inline-block; }
.kcc-done-block a.kcc-primary { color: var(--wt-btn-ink, #fffdf9); }
.kcc-done-block a.kcc-ghost { color: var(--wt-muted, #5d6b62); }

/* ONE focus line on every field in this flow, never two. */
.kcc-input:focus, .kcc-input:focus-visible { outline: none; box-shadow: none; border-color: var(--wt-accent, #2c5f4e); }

/* The payoff card reuses .kcx-card for its internals, and that class is
   "position:absolute; inset:0" because on the 25-layout page it is one face of
   a flip wrapper. Here it is a standalone block, so it must be relative or it
   escapes the page and lands over the header. Specificity is raised so this
   wins regardless of which stylesheet loads last. */
.kcc-cardstage .kcc-own { position: relative; inset: auto; }
.kcc-cardstage .kcc-own .kcx-cap { right: 16px; bottom: 76px; }
.kcc-cardstage .kcc-own .kcx-play { left: 16px; bottom: 16px; }
.kcc-cardstage .kcc-own .kcx-prog { bottom: 0; }

/* Artist avatar: a KEEP CALM crown knocked out of a brand color, matching the
   Top artists row. An uploaded photo replaces the crown and keeps the circle. */
.kc-av {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  color: #fffdf9; overflow: hidden;
  background-size: cover; background-position: center;
}
.kc-av svg { width: 58%; height: auto; display: block; }
.kci-voice .kc-av { width: 42px; height: 42px; }

/* RADIUS: every Intention card, at every size, matches the rest of the site. */
.kci-card { border-radius: 14px; }

/* ============================================================
   CARD TEXT COLOR IS NOT NEGOTIABLE.

   These pages generate inside the Manifest shell, so <div class="kcm-app"> is
   an ancestor, and kc-manifest-app.css carries:

       .kcm-app :is(h1, h2, h3, h4) { color: var(--kcm-ink); }

   That is 0,1,1 and beats .kci-title at 0,1,0. The card title is an <h2>, so in
   LIGHT mode it took the page's dark ink and rendered near-black on dark
   footage: the illegible copy Kao reported twice. A card face is a lit screen
   over video and is dark in BOTH themes, so its text is always near-white
   regardless of what the page around it is doing.

   Every selector below is 0,2,x so it wins outright rather than by load order.
   If you add text to a card, add it here too.
   ============================================================ */
.kci-card .kci-title,
.kci-card .kci-step,
.kci-card .kci-tags,
.kci-card .kci-line,
.kci-card .kci-more,
.kci-card .kci-voice-name { color: #fffdf9; }
.kci-card .kci-voice-sub { color: rgba(255, 253, 249, .82); }
.kci-card .kci-act,
.kci-card .kci-act-label { color: #fffdf9; }
.kci-card .kci-act.is-on { color: #ff6b8a; }

.kcc-own .kcx-title, .kcc-own .kcx-handle, .kcc-own .kcc-live { color: #fffdf9; }