/* ============================================================
   STELAAH — HOME "CONNECTED" (home-connected.css)
   Homepage-only layer, v2 (2026-08-02): interactive Tasks-page
   hero window (hw-), day-timeline switching visual, force-float
   gradient network, orbital after-card, feature grid, real-shot
   showcase, connected stepper, quotes and trust bands.

   Prefixes: .hc- (sections) · .hw- (the hero product window).
   Shared tokens/primitives live in connected-core.css.
   Motion pairs with js/home-motion.js.
   ============================================================ */

/* ============================================================
   1 · HERO
   ============================================================ */
.hc-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 6.5vw, 88px); overflow: hidden; }
.hc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px); align-items: center;
}
.hc-hero-copy { max-width: 500px; }
.hc-hero .mk-display.hc-h1 {
  margin: 22px 0 0; text-align: left;
  font-size: clamp(34px, 3.35vw, 47px); line-height: 1.08; font-weight: 650;
  letter-spacing: -0.033em; color: var(--hc-ink); max-width: none;
}
/* no eyebrow above it any more, so it leads the column */
.hc-hero .mk-display.hc-h1.lead { margin-top: 0; }
.hc-hero .mk-lede {
  margin: 20px 0 0; text-align: left; font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.62; color: var(--hc-ink-2); max-width: 46ch; font-weight: 400;
}
.hc-line { display: block; overflow: hidden; }
.hc-line > span { display: block; }
html.hc-motion .hc-h1[data-rise] .hc-line > span { transform: translateY(112%); }
html.hc-motion .hc-h1[data-rise].is-live .hc-line > span {
  animation: hc-rise 0.9s var(--hc-ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 60ms);
}
@keyframes hc-rise { to { transform: translateY(0); } }
.hc-hero .mk-btn-row { margin-top: 30px; gap: 12px; }
.hc-reassure { margin: 18px 0 0; font-size: 13px; color: var(--hc-ink-3); letter-spacing: 0.002em; }
.hc-reassure b { font-weight: 500; color: var(--hc-ink-3); }

/* ---- the product window (a real Tasks board, interactive) ---- */
.hc-stage {
  position: relative; perspective: 1600px;
  /* bleed toward the right viewport edge on wide screens */
  margin-right: clamp(-240px, calc((var(--mk-maxw) - 100vw) / 2 + 16px), 0px);
}
.hw {
  position: relative; border-radius: 18px; background: #fff;
  border: 1px solid var(--hc-line); box-shadow: var(--hc-sh-app);
  overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.55s var(--hc-ease); will-change: transform;
  font-size: 11px; color: var(--hc-ink); user-select: none;
}
.hw * { box-sizing: border-box; }

/* top chrome */
.hw-top { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hc-line-soft); }
.hw-search {
  flex: 1; max-width: 320px; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px;
  border-radius: 8px; border: 1px solid var(--hc-line); background: #fbfbf9; color: var(--hc-ink-3); font-size: 10.5px;
}
.hw-search .hc-ic { width: 11px; height: 11px; }
.hw-caret { width: 1px; height: 11px; background: var(--hc-ink-3); margin-left: -3px; }
html.hc-motion .hw-caret { animation: hc-blink 1.2s steps(1) infinite; }
@keyframes hc-blink { 50% { opacity: 0; } }
.hw-key { margin-left: auto; height: 15px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--hc-line); background: #fff; font-size: 8.5px; display: inline-flex; align-items: center; font-weight: 550; }
.hc-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  color: #34413b; background: #e8eee7; font-style: normal; font-weight: 650; line-height: 1; letter-spacing: -0.015em;
}
.hc-av.a1 { color: #32543a; background: #e2ebdf; }
.hc-av.a2 { color: #385473; background: #e3ebf4; }
.hc-av.a3 { color: #725039; background: #f1e6d9; }
.hc-av.a4 { color: #594c73; background: #e9e4f1; }
.hw-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.hw-face { display: inline-flex; align-items: center; padding-left: 2px; }
.hw-face .hc-av { width: 22px; height: 22px; font-size: 7.5px; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(20,22,26,0.12); }
.hw-face .hc-av + .hc-av, .hw-face .hw-face-n { margin-left: -8px; }
.hw-face-n {
  width: 22px; height: 22px; border-radius: 50%; background: #f0f1ed; border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(20,22,26,0.1); font-size: 7.5px; font-weight: 650; color: var(--hc-ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
}
.hw-topic {
  position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid transparent; color: #6f757e; background: #fafaf7;
}
.hw-topic .hc-ic { width: 13px; height: 13px; }
.hw-dot-n {
  position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border: 2px solid #fff;
  border-radius: 999px; background: #c2504a; color: #fff; font-size: 7px; font-weight: 680;
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 1;
}
.hw-acct {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 4px;
  border-radius: 999px; border: 1px solid var(--hc-line); background: #fff; box-shadow: 0 1px 2px rgba(20,22,26,0.04);
  color: var(--hc-ink); font-size: 10px; font-weight: 590; white-space: nowrap;
}
.hw-acct .hc-av { width: 22px; height: 22px; font-size: 7.5px; box-shadow: inset 0 0 0 1px rgba(50,84,58,0.06); }
.hw-acct .hc-ic { width: 9px; height: 9px; margin-left: 1px; color: var(--hc-ink-3); }

/* frame */
.hw-frame { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 470px; }
.hw-sb { background: #fcfcfa; border-right: 1px solid var(--hc-line-soft); padding: 10px 9px 12px; display: flex; flex-direction: column; gap: 1px; }
.hw-ws { display: flex; align-items: center; gap: 7px; padding: 5px 6px 10px; }
.hw-ws-mark { width: 15px; height: 15px; color: var(--hc-leaf); }
.hw-ws-tx b { display: block; font-size: 10.5px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.2; }
.hw-ws-tx span { display: block; font-size: 8.5px; color: var(--hc-ink-3); }
.hw-ws-chev { width: 9px; height: 9px; margin-left: auto; color: #b0b5bc; }
.hw-sb-label { margin: 8px 0 2px; padding: 0 7px; font-size: 8.5px; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: #a2a8b0; }
.hw-sb-item {
  display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 7px;
  border-radius: 7px; color: #4d545e; font-weight: 490; font-size: 10.5px;
  transition: background 0.18s var(--hc-ease), color 0.18s var(--hc-ease);
}
.hw-sb-item .hc-ic { width: 12px; height: 12px; color: #8b929c; transition: color 0.18s var(--hc-ease); }
.hw-sb-item:hover { background: #f2f2ee; color: var(--hc-ink); }
.hw-sb-item:hover .hc-ic { color: var(--hc-ink); }
.hw-sb-item.on { background: #eef0ea; color: var(--hc-ink); font-weight: 570; }
.hw-sb-item.on .hc-ic { color: var(--hc-green); }
.hw-badge { margin-left: auto; min-width: 15px; height: 13px; padding: 0 4px; border-radius: 999px; background: var(--hc-green-soft); color: var(--hc-green-deep); font-size: 8.5px; font-weight: 630; display: inline-flex; align-items: center; justify-content: center; }

/* main pane */
.hw-main { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.hw-tabs { display: flex; align-items: center; gap: 2px; padding: 7px 12px 0; border-bottom: 1px solid var(--hc-line-soft); }
.hw-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 8px 8px 0 0; font-size: 10px; font-weight: 520; color: var(--hc-ink-2);
}
.hw-tab .hc-ic { width: 10.5px; height: 10.5px; color: #99a0a8; }
.hw-tab.on { background: #fff; border: 1px solid var(--hc-line-soft); border-bottom-color: #fff; margin-bottom: -1px; font-weight: 590; color: var(--hc-ink); }
.hw-tab.on .hc-ic { color: var(--hc-green); }
.hw-tab-x { margin-left: 2px; color: var(--hc-ink-3); font-size: 10px; }
.hw-tab-plus { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--hc-ink-3); font-size: 12px; }
.hw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 14px 10px; }
.hw-title strong { display: block; margin: 0; font-family: var(--font-serif); font-size: 19px; font-weight: 520; letter-spacing: -0.02em; }
.hw-title span { display: block; margin-top: 2px; font-size: 9.5px; color: var(--hc-ink-3); }
.hw-head-r { display: flex; align-items: center; gap: 8px; }
.hw-views { display: inline-flex; height: 26px; padding: 2px; border-radius: 8px; background: #f2f2ee; }
.hw-views i {
  display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; font-size: 9.5px; font-weight: 560;
  color: var(--hc-ink-2); cursor: pointer; font-style: normal; transition: background 0.2s var(--hc-ease), color 0.2s var(--hc-ease), box-shadow 0.2s var(--hc-ease);
}
.hw-views i.on { background: #fff; color: var(--hc-ink); box-shadow: var(--hc-sh-xs); }
.hw-new { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 8px; background: var(--hc-black); color: #fff; font-size: 9.5px; font-weight: 570; transition: background 0.2s var(--hc-ease), transform 0.2s var(--hc-ease); }
.hw-new .hc-ic { width: 10px; height: 10px; }
.hw-new:hover { background: var(--hc-black-hover); transform: translateY(-1px); }

/* board */
.hw-body { position: relative; flex: 1; min-height: 0; }
.hw-board { position: absolute; inset: 0; display: flex; gap: 9px; padding: 4px 14px 14px; opacity: 0; visibility: hidden; transition: opacity 0.32s var(--hc-ease); }
.hw-board.on { position: relative; opacity: 1; visibility: visible; }
.hw-col { flex: 1 1 0; min-width: 0; border-radius: 12px; background: #fafaf8; border: 1px solid var(--hc-line-soft); padding: 8px; display: flex; flex-direction: column; transition: background 0.2s var(--hc-ease), border-color 0.2s var(--hc-ease); }
.hw-col.over { background: var(--hc-green-soft); border-color: color-mix(in srgb, var(--hc-green) 35%, var(--hc-line)); }
.hw-col-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; font-size: 10px; font-weight: 610; }
.cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cdot.todo { background: #a8aeb6; }
.cdot.prog { background: #d9a13e; }
.cdot.rev { background: #c98545; }
.cdot.done { background: #5f9155; }
.hw-col-n { margin-left: auto; font-weight: 560; color: var(--hc-ink-3); font-size: 9.5px; }
.hw-cards { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hw-card {
  position: relative; background: #fff; border: 1px solid var(--hc-line); border-radius: 10px;
  padding: 8px 9px 7px; cursor: grab; box-shadow: var(--hc-sh-xs);
  transition: transform 0.25s var(--hc-spring), box-shadow 0.25s var(--hc-ease), border-color 0.25s var(--hc-ease), opacity 0.2s var(--hc-ease);
}
.hw-card:hover { transform: translateY(-2px); border-color: #dcdcd5; box-shadow: 0 10px 22px -12px rgba(20, 22, 26, 0.22); }
.hw-card.lift { opacity: 0.35; }
.hw-card.land { animation: hw-land 0.5s var(--hc-spring); }
@keyframes hw-land { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.hw-card b { display: block; margin-top: 5px; font-size: 11px; font-weight: 590; letter-spacing: -0.01em; line-height: 1.3; }
.hw-card.pinned { background: #fdf9ef; border-color: #ecdfc2; }
.hw-pin { position: absolute; top: -1px; right: 12px; width: 8px; height: 13px; background: #d9a13e; border-radius: 0 0 3px 3px; }
.hw-pin::after { content: ""; position: absolute; left: 0; bottom: -3px; border: 4px solid transparent; border-top-color: #d9a13e; border-width: 3px 4px 0; }
.hw-proj { display: inline-flex; align-items: center; height: 15px; padding: 0 7px; border-radius: 999px; font-size: 8.2px; font-weight: 610; letter-spacing: 0.01em; }
.hw-proj.mint { background: #e3f1e2; color: #2f6a3d; }
.hw-proj.gold { background: #f8ecd4; color: #8a6420; }
.hw-proj.blue { background: #e3ecfa; color: #2f5aa8; }
.hw-proj.sky { background: #e0f0f6; color: #22687f; }
.hw-proj.green { background: #e6f1de; color: #4a7c3d; }
.hw-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hw-tags i { display: inline-flex; align-items: center; height: 14px; padding: 0 6px; border-radius: 999px; font-size: 7.8px; font-weight: 590; font-style: normal; }
.hw-tags .t-rose { background: #f9e9e4; color: #a25b43; }
.hw-tags .t-red { background: #fbe3df; color: #b04a37; }
.hw-tags .t-teal { background: #e2f0ec; color: #34756a; }
.hw-tags .t-blue { background: #e3ecfa; color: #2f5aa8; }
.hw-tags .t-pink { background: #f7e6f0; color: #a24a7d; }
.hw-tags .t-green { background: #e6f1de; color: #4a7c3d; }
.hw-card-f { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.hw-card-f .due { font-size: 8.5px; font-weight: 590; color: var(--hc-ink-2); }
.hw-card-f .due.late { color: #b04a37; }
.hw-card-f .ck { display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; color: var(--hc-ink-3); }
.hw-card-f .ck .hc-ic { width: 9px; height: 9px; }
.hw-card-f .hc-av { width: 17px; height: 17px; font-size: 6.5px; margin-left: auto; font-style: normal; }
.hw-empty { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed #d8d8d0; border-radius: 9px; color: var(--hc-ink-3); font-size: 9.5px; min-height: 72px; transition: border-color 0.2s var(--hc-ease), color 0.2s var(--hc-ease); }
.hw-col.over .hw-empty { border-color: var(--hc-green); color: var(--hc-green-deep); }

/* drag clone */
.hw-drag { position: fixed; z-index: 40; pointer-events: none; transform: rotate(2.5deg) scale(1.04); box-shadow: 0 24px 48px -16px rgba(20, 22, 26, 0.4); opacity: 0.98; cursor: grabbing; }

/* list view */
.hw-list { position: absolute; inset: 0; padding: 4px 14px 14px; opacity: 0; visibility: hidden; transition: opacity 0.32s var(--hc-ease); overflow: hidden; }
.hw-list.on { position: relative; opacity: 1; visibility: visible; }
.hw-lrow { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-bottom: 1px solid var(--hc-line-soft); font-size: 10.5px; }
.hw-lrow .st { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hw-lrow b { font-weight: 570; letter-spacing: -0.01em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-lrow .hw-proj { flex: none; }
.hw-lrow .due { font-size: 9px; color: var(--hc-ink-2); width: 44px; text-align: right; flex: none; }
.hw-lrow .due.late { color: #b04a37; }
.hw-lrow .hc-av { width: 17px; height: 17px; font-size: 6.5px; flex: none; font-style: normal; }

@media (max-width: 1060px) {
  .hc-hero-grid { grid-template-columns: 1fr; }
  .hc-hero-copy { max-width: 620px; }
  .hc-stage { max-width: 760px; margin-right: 0; }
}
@media (max-width: 700px) {
  .hw-frame { grid-template-columns: 1fr; min-height: 0; }
  .hw-sb { display: none; }
  .hw-board { flex-wrap: wrap; position: relative; }
  .hw-col { flex: 1 1 44%; }
  .hw-search { min-width: 0; max-width: none; overflow: hidden; white-space: nowrap; }
  .hw-face, .hw-key, .hw-caret, .hw-acct-name, .hw-acct-chev { display: none; }
  .hw-acct { width: 30px; padding: 0; justify-content: center; }
}

/* ============================================================
   2 · SWITCHING — a fragmented day vs a flowing one
   ============================================================ */
.hc-switch { padding: clamp(64px, 8vw, 108px) 0 clamp(64px, 8vw, 112px); background: var(--hc-bg); }
.hc-day { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; }
.hc-day-row { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 24px; align-items: center; }
.hc-day-row + .hc-day-row { margin-top: 30px; }
.hc-day-side b { display: block; font-size: 15px; font-weight: 610; letter-spacing: -0.015em; color: var(--hc-ink); }
.hc-day-side span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--hc-ink-3); }
.hc-day-track { position: relative; height: 58px; border-radius: 14px; isolation: isolate; }
.hc-day-track.frag { display: flex; align-items: stretch; padding: 5px; background: #fbfbf9; border: 1px solid var(--hc-line-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); }
.hc-seg {
  flex: var(--w, 8) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--hc-line); border-radius: 9px; position: relative;
  transition: transform 0.25s var(--hc-spring), box-shadow 0.25s var(--hc-ease);
  transform-origin: left center;
}
.hc-seg .hc-ic { width: 17px; height: 17px; }
.hc-seg:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -12px rgba(20, 22, 26, 0.25); z-index: 3; }
.hc-gap { flex: 2.4 1 0; position: relative; margin: 7px 2px; border-radius: 5px;
  background: repeating-linear-gradient(135deg, #e8e3d7 0 3px, #f7f5ef 3px 7px); transition: background 0.3s var(--hc-ease); }
.hc-gap.lit { background: repeating-linear-gradient(135deg, #ecc9b8 0 3px, #f9efe8 3px 7px); }
/* tooltips */
.hc-seg[data-tip]::after, .hc-gap[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(3px);
  background: var(--hc-black); color: #fff; font-size: 10.5px; font-weight: 500; padding: 4px 9px; border-radius: 7px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--hc-ease), transform 0.2s var(--hc-ease); z-index: 6;
}
.hc-seg[data-tip]:hover::after, .hc-gap[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* playhead */
.hc-head { position: absolute; top: -7px; bottom: -7px; left: 0; z-index: 4; width: 2px; border-radius: 2px; background: var(--hc-ink); opacity: 0; }
.hc-head::after { content: ""; position: absolute; top: -3px; left: -2.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-ink); }
html.hc-motion .hc-day.is-live .hc-head { opacity: 0.42; }
/* the flowing bar */
.hc-day-track.one { overflow: hidden; background: #eef4ea; border: 1px solid color-mix(in srgb, var(--hc-green) 20%, var(--hc-line-soft)); padding: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); }
.hc-one-fill {
  position: absolute; inset: 5px; z-index: 1; border-radius: 9px; transform: scaleX(1); transform-origin: left center;
  background: linear-gradient(90deg, #dcead0, #a9c977, #5d8a4e, #86ab5e, #dcead0);
  background-size: 220% 100%; box-shadow: 0 6px 18px -10px rgba(72, 119, 62, 0.58);
}
html.hc-motion .hc-day.is-live .hc-one-fill { transform: scaleX(var(--hc-one-progress, 0)); }
html.hc-motion .hc-one-fill { animation: hc-flowgrad 7s linear infinite; }
@keyframes hc-flowgrad { from { background-position: 0% 0; } to { background-position: -220% 0; } }
.hc-one-mark {
  position: absolute; right: 12px; top: 50%; z-index: 3; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: var(--hc-sh-card); display: flex; align-items: center; justify-content: center; color: var(--hc-green-deep);
}
.hc-one-mark .hc-ic { width: 17px; height: 17px; }
.hc-one-finish {
  position: absolute; right: 58px; top: 50%; z-index: 3; transform: translateY(calc(-50% + 4px));
  color: #fff; font-size: 10.5px; font-weight: 650; letter-spacing: 0.01em; opacity: 0;
  transition: opacity var(--t-med) var(--hc-ease), transform var(--t-med) var(--hc-ease);
}
.hc-day-track.one .hc-head { background: #345f35; }
.hc-day-track.one .hc-head::after { background: #345f35; box-shadow: 0 0 0 4px rgba(104, 153, 79, 0.14); }
.hc-day-track.one.is-finished .hc-one-finish { opacity: 1; transform: translateY(-50%); }
.hc-day-track.one.is-finished .hc-one-mark { animation: hc-finish-pop 520ms var(--hc-spring) both; }
@keyframes hc-finish-pop { 0% { transform: translateY(-50%) scale(0.82); } 65% { transform: translateY(-50%) scale(1.08); } 100% { transform: translateY(-50%) scale(1); } }
.hc-day-caption { margin: 10px 0 0 242px; font-size: 12px; color: var(--hc-ink-3); }
.hc-day-axis { display: flex; justify-content: space-between; margin: 16px 0 0 242px; font-size: 10.5px; letter-spacing: 0.04em; color: #b0b5ad; }
@media (max-width: 860px) {
  .hc-day-row { grid-template-columns: 1fr; gap: 12px; }
  .hc-day-caption, .hc-day-axis { margin-left: 0; }
  .hc-day-track { height: 50px; }
  .hc-seg .hc-ic { width: 14px; height: 14px; }
}

/* ============================================================
   3 · ONE WORKSPACE — living gradient network
   ============================================================ */
.hc-connect { padding: clamp(72px, 8.5vw, 116px) 0; background: var(--hc-bg-soft); }
.hc-connect-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hc-diagram { position: relative; min-height: 420px; }
.hc-diagram-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hc-diagram-svg .wire { fill: none; stroke: #cfd6cc; stroke-width: 1.35; opacity: 0.74; transition: stroke 0.25s var(--hc-ease), stroke-width 0.25s var(--hc-ease), opacity 0.25s var(--hc-ease), filter 0.25s var(--hc-ease); }
.hc-diagram-svg .wire.lit { stroke: url(#hcFlowGrad); stroke-width: 2; }
.hc-diagram-svg .wire.is-flowing { stroke: url(#hcFlowGrad); stroke-width: 1.8; opacity: 1; filter: drop-shadow(0 0 3px rgba(101, 151, 75, 0.32)); }
.hc-diagram.focus .wire:not(.lit) { opacity: 0.28; }
.hc-comets path { fill: none; stroke: url(#hcFlowGrad); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(91, 139, 70, 0.38)); }
.hc-comets path.halo { stroke-width: 9; opacity: 0.12; filter: none; }
.hc-diagram.focus .hc-comets path { opacity: 0.25; }
.hc-nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 22px; }
.hc-node {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px;
  border-radius: 13px; background: #fff; border: 1px solid var(--hc-line);
  box-shadow: var(--hc-sh-xs); font-size: 14px; font-weight: 540; color: var(--hc-ink); letter-spacing: -0.01em;
  transition: box-shadow 0.3s var(--hc-ease), border-color 0.3s var(--hc-ease), opacity 0.3s var(--hc-ease);
  will-change: transform;
}
.hc-node .hc-ic { width: 16px; height: 16px; color: #7c828b; transition: color 0.3s var(--hc-ease); }
.hc-node:hover, .hc-node.lit-node { border-color: color-mix(in srgb, var(--hc-green) 35%, var(--hc-line)); box-shadow: 0 14px 30px -16px rgba(20, 22, 26, 0.2); }
.hc-node.flow-node { border-color: color-mix(in srgb, var(--hc-green) 24%, var(--hc-line)); box-shadow: 0 10px 24px -18px rgba(65, 111, 53, 0.42); }
.hc-node:hover .hc-ic, .hc-node.lit-node .hc-ic, .hc-node.flow-node .hc-ic { color: var(--hc-green); }
.hc-diagram.focus .hc-node:not(.lit-node):not(:hover) { opacity: 0.5; }
.hc-connect-hub-wrap { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 22px; }
.hc-connect-hub {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px;
  min-width: 142px; justify-content: center; border-radius: 14px; background: var(--hc-black); color: #fff; font-size: 15px; font-weight: 620; letter-spacing: -0.012em;
  box-shadow: 0 18px 36px -16px rgba(16, 18, 20, 0.55); will-change: transform;
}
.hc-connect-hub .hc-ic { width: 19px; height: 19px; color: #a9cf7f; }
.hc-connect-hub .ring { position: absolute; inset: -1px; border-radius: 15px; border: 1.5px solid var(--hc-green-dot); opacity: 0; pointer-events: none; }
.hc-connect-hub.tick .ring { animation: hc-absorb 0.9s var(--hc-ease) 1; }
@keyframes hc-absorb {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.28); }
}
@media (prefers-reduced-motion: no-preference) {
  .hc-connect-hub::after {
    content: ""; position: absolute; inset: -14px; border-radius: 24px; z-index: -1;
    background: radial-gradient(60% 80% at 50% 60%, color-mix(in srgb, var(--hc-leaf) 26%, transparent), transparent 72%);
    animation: hc-breathe-soft 4.2s var(--hc-ease) infinite;
  }
}
@keyframes hc-breathe-soft { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (max-width: 1000px) {
  .hc-connect-grid { grid-template-columns: 1fr; }
  .hc-diagram { max-width: 640px; }
}
@media (max-width: 620px) {
  .hc-nodes { gap: 26px 10px; }
  .hc-node { height: 42px; font-size: 12px; gap: 6px; border-radius: 11px; }
  .hc-node .hc-ic { width: 13px; height: 13px; }
  .hc-connect-hub { height: 46px; min-width: 126px; font-size: 13.5px; padding: 0 20px; }
  .hc-diagram { min-height: 340px; }
}

/* ============================================================
   3b · FEATURE GRID + SOLUTIONS
   ============================================================ */
.hc-featgrid { padding: clamp(64px, 8vw, 108px) 0; background: var(--hc-bg); }
.hc-feats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--hc-line-soft); border-block: 1px solid var(--hc-line-soft);
  margin-top: clamp(36px, 4.5vw, 56px);
}
.hc-feat {
  background: var(--hc-bg); padding: 24px 22px 26px; text-decoration: none;
  transition: background 0.25s var(--hc-ease);
}
.hc-feat:hover { background: #fafaf7; }
.hc-feat .hc-ic { width: 21px; height: 21px; color: #7c828b; transition: color 0.25s var(--hc-ease), transform 0.25s var(--hc-ease); }
.hc-feat:hover .hc-ic { color: var(--hc-green); transform: translateY(-2px); }
.hc-feat b { display: block; margin-top: 13px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--hc-ink); }
.hc-feat span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--hc-ink-2); }
.hc-sol { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: clamp(28px, 3.5vw, 40px); }
.hc-sol a {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--hc-line); background: #fff; font-size: 12.5px; font-weight: 530; color: var(--hc-ink-2); text-decoration: none;
  transition: border-color 0.2s var(--hc-ease), color 0.2s var(--hc-ease), transform 0.2s var(--hc-ease), background 0.2s var(--hc-ease);
}
.hc-sol a:hover { border-color: color-mix(in srgb, var(--hc-green) 35%, var(--hc-line)); color: var(--hc-green-deep); transform: translateY(-2px); background: var(--hc-green-soft); }
.hc-sol a.all { color: var(--hc-green-deep); border-color: color-mix(in srgb, var(--hc-green) 25%, var(--hc-line)); }
.hc-sol a .hc-ic { width: 11px; height: 11px; }
@media (max-width: 900px) { .hc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hc-feats { grid-template-columns: 1fr; } }

/* ============================================================
   4 · ARIA
   ============================================================ */
.hc-aria { padding: clamp(72px, 8.5vw, 116px) 0; background: var(--hc-bg); }
.hc-aria-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: center; }
.hc-chat { position: relative; max-width: 560px; margin-left: auto; width: 100%; }
.hc-q { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 18px; }
.hc-q .bub {
  background: var(--hc-black); color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 10px 16px; border-radius: 999px; border-bottom-right-radius: 6px;
  box-shadow: 0 10px 24px -12px rgba(16, 18, 20, 0.45);
}
.hc-q .hc-av { width: 30px; height: 30px; font-size: 10px; }
.hc-answer { position: relative; }
.hc-aria-mark {
  position: absolute; left: -20px; top: -17px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: var(--hc-sh-card);
  display: flex; align-items: center; justify-content: center; color: var(--hc-leaf);
}
.hc-aria-mark .hc-ic { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .hc-aria-mark::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid var(--hc-leaf); opacity: 0; animation: hc-dot-ping 3.2s var(--hc-ease) infinite 1s;
  }
}
.hc-panel {
  background: #fff; border: 1px solid var(--hc-line); border-radius: 18px;
  box-shadow: var(--hc-sh-card); padding: 20px 20px 12px; overflow: hidden;
}
.hc-panel-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 12px; }
.hc-panel-h b { font-size: 13.5px; font-weight: 620; }
.hc-panel-h span { font-size: 13px; color: var(--hc-ink-2); }
.hc-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px 14px; }
.hc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #c2c7cd; }
@media (prefers-reduced-motion: no-preference) {
  .hc-typing i { animation: hc-tybounce 1s var(--hc-ease) infinite; }
  .hc-typing i:nth-child(2) { animation-delay: 0.14s; }
  .hc-typing i:nth-child(3) { animation-delay: 0.28s; }
}
@keyframes hc-tybounce { 0%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-4px); opacity: 1; } }
.hc-hit {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px;
  border-top: 1px solid var(--hc-line-soft); transition: background 0.2s var(--hc-ease);
}
.hc-hit:first-of-type { border-top: 0; }
.hc-hit:hover { background: #fafaf7; }
.hc-hit .hc-hit-ic {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none;
}
.hc-hit .hc-hit-ic .hc-ic { width: 16px; height: 16px; }
.hc-hit .hc-hit-ic.blue { background: #e8eef8; color: #3e69b4; }
.hc-hit .hc-hit-ic.teal { background: #e2f0ec; color: #34756a; }
.hc-hit .hc-hit-ic.green { background: #e6f1de; color: #4a7c3d; }
.hc-hit .hc-hit-ic.lav { background: #ecebf6; color: #5f5da8; }
.hc-hit b { display: block; font-size: 13.5px; font-weight: 560; letter-spacing: -0.01em; }
.hc-hit span { display: block; font-size: 12px; color: var(--hc-ink-3); margin-top: 1px; }
.hc-view {
  margin-left: auto; height: 30px; padding: 0 14px; border-radius: 8px; flex: none;
  border: 1px solid var(--hc-line); background: #fff; color: var(--hc-ink); font-size: 12px; font-weight: 550;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  transition: background 0.2s var(--hc-ease), border-color 0.2s var(--hc-ease), transform 0.2s var(--hc-ease);
}
.hc-view .hc-arr { width: 11px; height: 11px; opacity: 0; margin-right: -13px; transition: opacity 0.2s var(--hc-ease), margin 0.2s var(--hc-ease), transform 0.2s var(--hc-ease); }
.hc-view:hover { background: var(--hc-green-soft); border-color: color-mix(in srgb, var(--hc-green) 30%, var(--hc-line)); color: var(--hc-green-deep); }
.hc-view:hover .hc-arr { opacity: 1; margin-right: 0; transform: translateX(1px); }
@media (max-width: 1000px) {
  .hc-aria-grid { grid-template-columns: 1fr; }
  .hc-chat { margin-left: 0; }
}

/* ============================================================
   5b · CONNECTED STEPPER
   ============================================================ */
.hc-steps-sec {
  padding: clamp(64px, 7.5vw, 104px) 0; overflow: hidden;
  background: radial-gradient(54% 68% at 50% 54%, rgba(223, 235, 216, 0.42), transparent 76%), var(--hc-bg);
}
.hc-steps-sec .hc-sub { max-width: 670px; }
.hc-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); margin-top: clamp(40px, 5vw, 64px); }
.hc-steps-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hc-steps-svg .rail { fill: none; stroke: #d7ddd3; stroke-width: 1.5; }
.hc-steps-svg .rail-progress { fill: none; stroke: url(#hcFlowGradX); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(91, 139, 70, 0.22)); }
.hc-steps-svg .pulse { fill: var(--hc-green-dot); filter: drop-shadow(0 0 4px rgba(91, 139, 70, 0.48)); }
.hc-step { position: relative; z-index: 1; min-height: 240px; padding: 0 var(--sp-5) var(--sp-6); text-align: left; }
.hc-step::before {
  content: ""; position: absolute; inset: 68px 0 0; z-index: -1; border: 1px solid var(--hc-line-soft); border-radius: var(--r-xl);
  background: rgba(255,255,255,0.82); box-shadow: 0 16px 40px -32px rgba(20, 22, 26, 0.34);
  transition: transform var(--t-med) var(--hc-spring), border-color var(--t-med) var(--hc-ease), box-shadow var(--t-med) var(--hc-ease), background var(--t-med) var(--hc-ease);
}
.hc-step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 18px; }
.hc-step .n { display: inline-block; font-size: 11px; font-weight: 680; letter-spacing: 0.1em; color: var(--hc-ink-3); }
.hc-step .hc-step-state { display: inline-block; color: var(--hc-ink-3); font-size: 10.5px; font-weight: 560; white-space: nowrap; opacity: 0.72; }
.hc-step-ic {
  position: relative; z-index: 2; width: 56px; height: 56px; margin: var(--sp-3) 0 0; border-radius: 50%;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: var(--hc-sh-xs);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-med) var(--hc-spring), border-color var(--t-med) var(--hc-ease), box-shadow var(--t-med) var(--hc-ease), background var(--t-med) var(--hc-ease);
}
.hc-step-ic .hc-ic { width: 21px; height: 21px; color: #7c828b; transition: color var(--t-med) var(--hc-ease); }
.hc-step:hover::before, .hc-step.is-active::before { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hc-green) 28%, var(--hc-line)); box-shadow: 0 22px 48px -34px rgba(51, 90, 42, 0.46); }
.hc-step:hover .hc-step-ic, .hc-step.is-active .hc-step-ic { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hc-green) 40%, var(--hc-line)); box-shadow: 0 14px 28px -16px rgba(20, 22, 26, 0.24); }
.hc-step:hover .hc-step-ic .hc-ic, .hc-step.is-active .hc-step-ic .hc-ic, .hc-step.is-complete .hc-step-ic .hc-ic { color: var(--hc-green); }
.hc-step.is-active .hc-step-state, .hc-step.is-complete .hc-step-state { color: var(--hc-green-deep); opacity: 1; }
.hc-step.is-complete .hc-step-ic { background: var(--hc-green-soft); border-color: color-mix(in srgb, var(--hc-green) 32%, var(--hc-line)); }
.hc-step b { display: block; margin-top: var(--sp-5); font-size: 18px; font-weight: 640; letter-spacing: -0.018em; color: var(--hc-ink); }
.hc-step p { margin: var(--sp-2) 0 0; max-width: 27ch; font-size: 13px; line-height: 1.6; color: var(--hc-ink-2); }
@media (max-width: 900px) {
  .hc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .hc-steps-svg { display: none; }
}
@media (max-width: 640px) {
  .hc-steps { grid-template-columns: 1fr; }
  .hc-step { min-height: 224px; }
}

/* ============================================================
   5 · BEFORE / AFTER
   ============================================================ */
.hc-ba { padding: clamp(56px, 7vw, 96px) 0; background: var(--hc-bg); }
.hc-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hc-ba-card {
  position: relative; border-radius: 20px; padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--hc-line); overflow: hidden; min-height: 400px;
  display: flex; flex-direction: column;
}
.hc-ba-card.before { background: #fafaf7; }
.hc-ba-card.after { background: #fff; box-shadow: var(--hc-sh-card); }
.hc-ba-card .hc-kicker { align-self: flex-start; }
.hc-ba-card h3 { margin: 18px 0 0; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.22; font-weight: 630; letter-spacing: -0.024em; color: var(--hc-ink); }
.hc-ba-stage { position: relative; flex: 1; margin-top: 22px; min-height: 200px; }
.hc-ba-stage svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hc-ba-stage svg.links .wire { fill: none; stroke: #d8dad1; stroke-width: 1.2; transition: stroke 0.4s var(--hc-ease); }
.hc-ba-stage svg.links .orb-ring { fill: none; stroke: #e6e7de; stroke-width: 1; stroke-dasharray: 3 6; }
.hc-ba-stage svg.links .trail { fill: none; stroke: url(#hcOrbGrad); stroke-width: 2.6; stroke-linecap: round; }
.hc-ba-card.after:hover svg.links .wire { stroke: #b9c9a4; }
.hc-mini {
  position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 13px;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: var(--hc-sh-xs);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.3s var(--hc-ease);
}
.hc-mini .hc-ic { width: 22px; height: 22px; }
.hc-mini:hover { box-shadow: 0 12px 24px -12px rgba(20, 22, 26, 0.2); z-index: 2; }
.hc-mini.glyph { border-radius: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; left: 50%; top: 50%; will-change: transform; }
.hc-mini.glyph .hc-ic { width: 17px; height: 17px; color: #6f7680; }
@media (prefers-reduced-motion: no-preference) {
  .hc-ba-card.before.is-live .hc-mini { animation: hc-wobble 4.6s ease-in-out infinite; animation-delay: var(--bd, 0s); }
}
@keyframes hc-wobble {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  30% { transform: translate(2px, -4px) rotate(calc(var(--rot, 0deg) + 2.4deg)); }
  65% { transform: translate(-2.5px, 2.5px) rotate(calc(var(--rot, 0deg) - 2.2deg)); }
}
.hc-ba-card.before .hc-mini:hover { animation-play-state: paused; }
.hc-many {
  position: absolute; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px dashed #d4d6cd;
  font-size: 11.5px; color: var(--hc-ink-3); white-space: nowrap; transform: translate(-50%, -50%);
}
.hc-hub {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 17px;
  background: var(--hc-black); display: flex; align-items: center; justify-content: center; color: #b9d29a;
  box-shadow: 0 20px 44px -18px rgba(16, 18, 20, 0.55); z-index: 1;
}
.hc-hub .hc-ic { width: 30px; height: 30px; }
.hc-hub::before {
  content: ""; position: absolute; inset: -18px; border-radius: 28px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--hc-leaf) 32%, transparent), transparent 74%);
}
@media (prefers-reduced-motion: no-preference) { .hc-hub::before { animation: hc-breathe-soft 4s var(--hc-ease) infinite; } }
.hc-hub .ring { position: absolute; inset: -1px; border-radius: 18px; border: 1.5px solid var(--hc-green-dot); opacity: 0; pointer-events: none; }
.hc-hub.tick .ring { animation: hc-absorb 0.9s var(--hc-ease) 1; }
@media (max-width: 900px) { .hc-ba-grid { grid-template-columns: 1fr; } }

/* ============================================================
   6b · QUOTES
   ============================================================ */
.hc-quotes-sec { padding: clamp(56px, 7vw, 92px) 0; background: var(--hc-bg); border-top: 1px solid var(--hc-line-soft); }
.hc-quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hc-quote { margin: 0; padding: 6px clamp(22px, 3vw, 40px); }
.hc-quote + .hc-quote { border-left: 1px solid var(--hc-line); }
.hc-quote blockquote { margin: 0; font-size: 16.5px; line-height: 1.58; letter-spacing: -0.012em; color: var(--hc-ink); font-weight: 480; }
.hc-quote blockquote::before { content: "\201C"; display: block; font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--hc-leaf); margin-bottom: 10px; }
.hc-quote figcaption { margin-top: 14px; font-size: 12.5px; font-weight: 550; color: var(--hc-ink-3); }
@media (max-width: 1120px) and (min-width: 861px) {
  .hc-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .hc-quote:nth-child(3) { border-left: 0; border-top: 1px solid var(--hc-line); padding-top: 28px; }
  .hc-quote:nth-child(4) { border-top: 1px solid var(--hc-line); padding-top: 28px; }
}
@media (max-width: 860px) {
  .hc-quotes { grid-template-columns: 1fr; gap: 26px; }
  .hc-quote { padding: 0; }
  .hc-quote + .hc-quote { border-left: 0; border-top: 1px solid var(--hc-line); padding-top: 26px; }
}

/* ============================================================
   6c · TRUST
   ============================================================ */
.hc-trust { padding: clamp(56px, 7vw, 92px) 0; background: var(--hc-bg); }
.hc-trust-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.hc-trust-row { display: flex; gap: 15px; padding: 17px 2px; border-top: 1px solid var(--hc-line-soft); }
.hc-trust-row:first-child { border-top: 0; }
.hc-trust-row .hc-ic { width: 19px; height: 19px; color: var(--hc-green); flex: none; margin-top: 2px; }
.hc-trust-row b { display: block; font-size: 15.5px; font-weight: 590; letter-spacing: -0.015em; color: var(--hc-ink); }
.hc-trust-row span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--hc-ink-2); }
@media (max-width: 900px) { .hc-trust-grid { grid-template-columns: 1fr; } }

/* ============================================================
   6 · FAQ (kept for the FAQPage schema, restyled calm)
   ============================================================ */
.hc-faqsec { padding: clamp(56px, 7vw, 92px) 0; background: var(--hc-bg); }
.hc-faqsec .mk-faq { max-width: 760px; margin: clamp(28px, 3.5vw, 44px) auto 0; }

/* ============================================================
   7 · CTA
   ============================================================ */
.hc-cta { position: relative; padding: clamp(64px, 8vw, 104px) 0; background: var(--hc-bg-cta); overflow: hidden; }
.hc-cta::before {
  content: ""; position: absolute; right: -6%; top: 50%; width: 560px; height: 560px; transform: translateY(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--hc-leaf) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.hc-cta-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hc-cta .hc-h2 { font-size: clamp(28px, 3vw, 40px); }
.hc-cta .hc-sub { margin-top: 16px; }
.hc-cta .mk-btn-row { margin-top: 28px; gap: 12px; }
.hc-lockup { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hc-lockup .lk { display: flex; align-items: center; gap: 14px; }
.hc-lockup .lk .hc-ic { width: clamp(40px, 4.6vw, 58px); height: clamp(40px, 4.6vw, 58px); color: var(--hc-leaf); }
.hc-lockup .lk b { font-size: clamp(34px, 4vw, 52px); font-weight: 650; letter-spacing: -0.035em; color: var(--hc-ink); }
.hc-lockup .lk-tag { font-size: 14.5px; color: var(--hc-ink-2); background: none; border: 0; padding: 0; }
.hc-lockup .lk .hc-ic svg path { transition: transform 0.5s var(--hc-spring); transform-origin: 50% 50%; }
.hc-lockup:hover .lk .hc-ic svg path:nth-child(1) { transform: translate(16px, -14px); }
.hc-lockup:hover .lk .hc-ic svg path:nth-child(2) { transform: translate(-16px, -12px); }
.hc-lockup:hover .lk .hc-ic svg path:nth-child(3) { transform: translate(-14px, 15px); }
.hc-lockup:hover .lk .hc-ic svg path:nth-child(4) { transform: translate(15px, 14px); }
@media (prefers-reduced-motion: no-preference) {
  .hc-lockup .lk .hc-ic { animation: hc-mark-float 6s var(--hc-ease) infinite; }
}
@keyframes hc-mark-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@media (max-width: 900px) {
  .hc-cta-grid { grid-template-columns: 1fr; }
  .hc-lockup { align-items: flex-start; text-align: left; margin-top: 8px; }
}

/* ============================================================
   DEMO LIGHTBOX (Watch demo → tour.mp4)
   ============================================================ */
.hc-demo { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 4vmin; }
.hc-demo.open { display: flex; }
.hc-demo-scrim { position: absolute; inset: 0; background: rgba(14, 15, 17, 0.72); backdrop-filter: blur(6px); }
.hc-demo-panel {
  position: relative; width: min(1040px, 94vw); border-radius: 18px; overflow: hidden;
  background: #0e0f11; box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.7);
  transform: translateY(14px) scale(0.97); opacity: 0; transition: transform 0.4s var(--hc-ease), opacity 0.4s var(--hc-ease);
}
.hc-demo.open .hc-demo-panel { transform: translateY(0) scale(1); opacity: 1; }
.hc-demo-panel video { display: block; width: 100%; height: auto; }
.hc-demo-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--hc-ease), transform 0.2s var(--hc-ease);
}
.hc-demo-x:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); }
.hc-demo-x svg { width: 14px; height: 14px; }

/* ============================================================
   MOTION FALLBACKS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hc-h1[data-rise] .hc-line > span { transform: none !important; }
  .hc-head { display: none; }
  .hc-one-fill { animation: none !important; transform: none !important; }
  .hc-one-finish { opacity: 1; transform: translateY(-50%); }
  .hc-day-track.one.is-finished .hc-one-mark { animation: none; }
  .hc-comets, .hc-ba-stage .trail, .hc-steps-svg .pulse { display: none; }
  .hw-caret { animation: none !important; }
}

/* mobile CTA stacking */
@media (max-width: 640px) {
  .hc-hero .mk-btn-row, .hc-cta .mk-btn-row { flex-direction: column; align-items: stretch; }
  .hc-hero .mk-btn-row .hc-btn, .hc-cta .mk-btn-row .hc-btn { width: 100%; }
  .hc-q .bub { font-size: 12.5px; }
  .hc-aria-mark { left: -8px; top: -14px; }
}