/* The launch post (D85): the x.ai article layout in KalmeFit's brand. Builds on home.css. Tokens only. */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 20; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--kf-brand-green); transform: scaleX(0); transform-origin: 0 50%; }
.nav-links a[aria-current="page"] { color: var(--kf-ink); }

.post { padding: 0 16px; }
.post-meta { max-width: 760px; margin: 40px auto 0; display: flex; justify-content: space-between; color: var(--kf-ink-3); font: var(--kf-text-footnote); }
.back { color: var(--kf-ink-2); text-decoration: none; }
.back:hover { color: var(--kf-ink); }

.post-head { text-align: center; max-width: 640px; margin: 48px auto 0; }
.post-head h1 { display: block; font: 800 clamp(38px, 5.6vw, 60px)/1.05 var(--kf-font-display); letter-spacing: -0.03em; }
.post-head p { margin: 18px 0 0; color: var(--kf-ink-2); font: 400 18px/1.55 var(--kf-font); }

/* D107: "A little more like you." Kalme's character, open on the page (no card): words lead, three expressions of the
   one companion beside short fragments. The active one comes forward; the other two stay quiet. No continuous motion. */
.character { max-width: 1120px; min-height: 380px; margin: 56px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 56px; align-items: center; }
.character h2 { font: 700 clamp(44px, 5.6vw, 68px)/1.02 var(--kf-font-display); letter-spacing: -0.035em; color: var(--kf-ink); }
.character-copy p { margin: 20px 0 0; max-width: 34ch; color: var(--kf-ink-2); font: 400 19px/1.6 var(--kf-font); }
.moments { display: flex; flex-direction: column; gap: 14px; }
.moment { appearance: none; background: none; border: 0; padding: 6px 0; width: 100%; font: inherit; color: var(--kf-ink); text-align: left;
  display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 20px; cursor: pointer; }
.m-face { justify-self: center; overflow: visible; opacity: 0.72; transform: scale(0.92); transition: opacity 260ms ease, transform 320ms var(--kf-ease); }
.m-body { fill: var(--kf-ink); }
.m-eyes { fill: var(--kf-bg); transition: transform 180ms ease-out; }
.m-eyes .mf-line { fill: none; stroke: var(--kf-bg); stroke-width: 11; stroke-linecap: round; }
.m-curious { transform-origin: 50% 70%; }
.moment[aria-pressed="true"] .m-face { opacity: 1; transform: scale(1.08); }
.moment[aria-pressed="true"] .m-curious { transform: scale(1.08) rotate(-8deg); }
.moment-text { display: flex; flex-direction: column; gap: 4px; }
.moment-name { color: var(--kf-ink-3); font: 600 12px/1 var(--kf-font); letter-spacing: 0.08em; text-transform: uppercase; }
.moment-say { color: var(--kf-ink-2); font: 500 19px/1.35 var(--kf-font); transition: color 240ms ease; }
.moment[aria-pressed="true"] .moment-say { color: var(--kf-ink); }
.moment[aria-pressed="true"] .moment-name { color: var(--kf-ink-2); }
.moment-now { display: none; }
@media (max-width: 860px) {
  .character { grid-template-columns: 1fr; gap: 28px; min-height: 0; margin-top: 40px; }
  .moments { flex-direction: row; justify-content: flex-start; gap: 8px; align-items: flex-end; }
  .moment { display: block; width: auto; padding: 4px; }
  .moment-text { display: none; }
  .moment-now { display: block; margin: 0; flex-basis: 100%; min-height: 3em; color: var(--kf-ink); font: 500 20px/1.4 var(--kf-font); }
  .moments { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .m-face, .m-eyes, .moment-say { transition: none; } }

/* Prose at a reading measure */
.prose { max-width: 620px; margin: 44px auto 0; font: 400 17px/1.7 var(--kf-font); color: var(--kf-ink); }
.prose p { margin: 0 0 18px; }
.prose a { color: var(--kf-brand-green); text-underline-offset: 3px; }
.prose h2 { margin: 48px 0 20px; font: 700 26px/1.2 var(--kf-font-display); letter-spacing: -0.015em; }
.prose h3 { margin: 32px 0 10px; font: 600 19px/1.3 var(--kf-font-display); }
/* D107: small example conversations between paragraphs, in place of quote blocks (no card, rule or attribution) */
.exchange { margin: 24px 0 32px; display: flex; flex-direction: column; gap: 4px; }
.exchange figcaption { margin-bottom: 6px; }
.exchange figcaption { color: var(--kf-ink-3); font: 500 12px/1 var(--kf-font); letter-spacing: 0.06em; text-transform: uppercase; }
.prose .ex-msg, .ex-msg { margin: 0; max-width: 340px; padding: 11px 16px; border-radius: 18px; color: var(--kf-ink); font: 400 17px/1.45 var(--kf-font); font-style: normal; }
.ex-user { align-self: flex-end; background: color-mix(in srgb, var(--kf-ink) 10%, var(--kf-bg)); border-bottom-right-radius: 6px; }
.ex-reply { display: flex; align-items: center; gap: 8px; }
.ex-kalme { background: color-mix(in srgb, var(--kf-ink) 17%, var(--kf-bg)); border-bottom-left-radius: 6px; }
.ex-face { width: 26px; height: 26px; flex: none; }

/* D106: "Different days. Same fitness pal." One phone that changes its conversation and gently turns with the tab.
   Desktop: copy and tabs left, phone right. Phones: tabs above the phone. Flat text tabs with a sliding underline. */
.uses { max-width: 1120px; margin: 96px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; }
.uses h2 { font: 700 clamp(34px, 3.8vw, 46px)/1.08 var(--kf-font-display); letter-spacing: -0.025em; }
.uses-lede { margin: 16px 0 0; max-width: 34ch; color: var(--kf-ink-2); font: 400 18px/1.6 var(--kf-font); }
.uses-tabs { position: relative; margin: 32px 0 0; }
.uses-tabs button { border-bottom-color: transparent !important; font-size: 16px; }
.tab-line { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--kf-ink); transition: transform 480ms var(--kf-ease), width 480ms var(--kf-ease); }
.uses-note { margin: 24px 0 0; max-width: 38ch; min-height: 3.2em; color: var(--kf-ink); font: 400 18px/1.6 var(--kf-font); transition: opacity 220ms ease; }
.uses-demo { margin: 12px 0 0; color: var(--kf-ink-3); font: var(--kf-text-footnote); }
.uses-stage { position: relative; perspective: 1400px; }
.uses-crop { height: 700px; overflow: hidden; padding: 0 28px 0 100px; border-bottom: 1px solid var(--kf-hairline); } /* a clean crop line, no fade */
.uses-turn { position: relative; transform-style: preserve-3d; transform-origin: 50% 40%; transition: transform 500ms var(--kf-ease); }
.uses-turn .phone-wrap { position: relative; z-index: 1; }
.uses-body > * { transition: opacity 200ms ease; }
.uses-body.fading > * { opacity: 0; }
.uses-body .plan-row { font-size: 16px; }
.uses-shadow { display: none; position: absolute; left: 50%; bottom: -6px; width: 300px; height: 26px; margin-left: -150px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--kf-device-shadow) 55%, transparent), transparent); transition: transform 500ms var(--kf-ease); }
/* the small monochrome Kalme behind the phone: one companion, a different expression per kind of day */
.uses-peek { position: absolute; z-index: 0; width: 132px; height: 132px; left: -84px; top: 150px; transform: rotate(-14deg); transition: transform 500ms var(--kf-ease); }
.up-body { fill: var(--kf-ink); }
.uses-peek .uf { display: none; fill: var(--kf-bg); }
.uses-peek .uf-line { fill: none; stroke: var(--kf-bg); stroke-width: 10; stroke-linecap: round; }
.uses-peek[data-face="idle"] .uf-idle, .uses-peek[data-face="happy"] .uf-happy, .uses-peek[data-face="calm"] .uf-calm, .uses-peek[data-face="focus"] .uf-focus { display: inline; }
@media (max-width: 960px) {
  .uses { grid-template-columns: 1fr; gap: 24px; margin-top: 72px; }
  .uses-stage { justify-self: center; }
}
@media (max-width: 560px) {
  .uses { overflow-x: clip; }
  .uses-tabs { flex-wrap: nowrap; gap: 4px 16px; }
  .uses-tabs button { font-size: 15px; white-space: nowrap; }
  .uses-crop { height: 560px; padding: 0 0 0 44px; }
  .uses .phone-wrap.phone-big { --zb: 0.66; }
  .uses .msg, .uses .plan-row, .uses .plan-title { font-size: 21px; } /* larger text in the mock, like iOS Larger Text: about 14 px on screen */
  .uses-peek { width: 84px; height: 84px; left: -40px; top: 120px; }
  .uses-shadow { width: 220px; margin-left: -110px; }
}
@media (prefers-reduced-motion: reduce) { .uses-turn, .uses-peek, .uses-shadow, .tab-line, .uses-body > *, .uses-note { transition: none; } }

.post .final { padding-top: 88px; padding-bottom: 72px; }
.post-head .cta { justify-content: center; }