/* Kaia's speech bubble and the headline marker — shared by the hero and the design system (section 18).
   Sizes follow the hero unit --k (1px at 1440 wide); outside the hero --k falls back to 1px. Owner 14–15.10. */

/* ---------- bubble: glass base; the approved look is black (.kbubble[data-bubble="ink"]) ---------- */
.kbubble__in { position: relative; padding: calc(14 * var(--k, 1px)) calc(18 * var(--k, 1px)) calc(15 * var(--k, 1px)); border-radius: calc(22 * var(--k, 1px)) calc(22 * var(--k, 1px)) calc(22 * var(--k, 1px)) 8px; transform-origin: 26px 100%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 1px 1px #fff, 0 14px 34px -16px rgba(var(--shade), 0.45); }
.kbubble__in::after { content: ""; position: absolute; left: var(--tail, 22px); bottom: -7px; width: 14px; height: 14px; border-radius: 3px; rotate: 45deg;   /* the tail points at the warm circle */
  background: rgba(255, 255, 255, 0.86); box-shadow: 3px 3px 6px -3px rgba(var(--shade), 0.25); }
.kbubble__hello { margin: 0 0 4px; font: 600 calc(15 * var(--k, 1px))/1.3 var(--font); color: var(--ink); min-height: 1.3em; }
.kbubble__text { margin: 0; font: 400 calc(15 * var(--k, 1px))/1.45 var(--font); color: var(--ink); min-height: 2.9em; }
.kbubble__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--warm); border-radius: 1px; }

/* approved 15.10: black bubble, white text (16:1), the greeting in peach */
.kbubble[data-bubble="ink"] .kbubble__in { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 14px 30px -14px rgba(33, 33, 33, 0.6); }
.kbubble[data-bubble="ink"] .kbubble__in::after { background: var(--ink); box-shadow: none; }
.kbubble[data-bubble="ink"] .kbubble__hello { color: var(--warm-soft); }
.kbubble[data-bubble="ink"] .kbubble__text { color: #fff; }

/* ---------- marker under the promise: the two masked lines + the accent ---------- */
.h1-ln { display: block; overflow: clip; padding-bottom: 0.2em; margin-bottom: -0.2em; }   /* the mask each line rises from */
.h1-in { display: inline-block; }
.h1-key { position: relative; display: inline-block;
  background-image: linear-gradient(var(--warm-soft), var(--warm-soft)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 0.34em; }
.h1-key__t { position: relative; z-index: 1; }
.h1-line { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.3em; overflow: visible; pointer-events: none; }
.h1-line path { fill: none; stroke: var(--warm); stroke-width: 6; stroke-linecap: round; }