/* Kownsel landing page (the folder is still called cfo): design V22, "spotlight" (Steve, 2026-11-04).
   Source: docs/products/personal-cfo/iterations/2026-11-01-v1/designs/landing/cfo-v22-spotlight.html.
   The phone buzzes on a lock screen, a text from the CFO opens into Messages, explainers and chat
   take turns (the other one dims), then the headline comes in. On upright phones the phone never moves. */
:root {
  --ink: #0C1A2B;
  --ink-2: #3A4A60;
  --ink-3: #64748B;
  --accent: #0A5BD3;
  --accent-hover: #084AAD;
  --ok: #0B6E4F;
  --line: rgba(12, 26, 43, 0.08);

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  --r-card: 24px;
  --r-input: 12px;
  --r-pill: 999px;

  --font-head: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --elev: 0 4px 16px rgba(12, 26, 43, 0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  width: 100%;
  min-height: 100vh;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body:not(.is-unlocked) { height: 100vh; overflow: hidden; }

:focus-visible { outline: 3px solid rgba(10, 91, 211, 0.4); outline-offset: 2px; }

/* ==========================================================================
   HERO STAGE
   ========================================================================== */

.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
}

.center-rule {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: min(520px, 60vh);
  background: rgba(12, 26, 43, 0.09);
  transform: translate(-50%, -50%) scaleY(0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
  pointer-events: none;
}
.stage.is-revealed .center-rule {
  transform: translate(-50%, -50%) scaleY(1);
}

.phone-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.phone-wrap.is-entered { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.stage.is-revealed .phone-wrap { transform: translate3d(clamp(210px, 23vw, 305px), 0, 0) scale(0.97); }

.cfo-imsg {
  --ios-blue: #007AFF;
  --ios-gray: #E4E4E9;
  --ios-caption: #8E8E93;
  position: relative;
  height: min(780px, 82vh);
  aspect-ratio: 768 / 1376;
  user-select: none;
  cursor: pointer;
}
.cfo-imsg-frame { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cfo-imsg-viewport {
  position: absolute; left: 14.453%; top: 31.032%; width: 71.224%; height: 52.544%; overflow: hidden;
}
.cfo-imsg-ios-canvas {
  width: 393px; height: 519.4px;
  transform-origin: top left; transform: scale(var(--ios-scale, 1));
  padding: 8px 12px 10px; overflow: hidden; display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", Inter, system-ui, sans-serif;
  font-optical-sizing: auto; font-synthesis: none; -webkit-font-smoothing: antialiased;
}
.cfo-imsg-track {
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.cfo-imsg-row { display: flex; flex-direction: column; width: 100%; }
.cfo-imsg-row--cfo { align-items: flex-start; padding-left: 4px; }
.cfo-imsg-row--user { align-items: flex-end; padding-right: 4px; }

.cfo-imsg-bubble {
  position: relative; max-width: 286px; padding: 7px 12px 7.5px;
  border-radius: 18px; font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: normal;
  opacity: 0; transform: translateY(10px) scale(0.88);
  transition: opacity 0.22s ease-out, transform 0.34s cubic-bezier(0.22, 1.18, 0.36, 1);
}
.cfo-imsg-bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.cfo-imsg-bubble--cfo { background: var(--ios-gray); color: #000000; transform-origin: left bottom; }
.cfo-imsg-bubble--user { background: var(--ios-blue); color: #FFFFFF; transform-origin: right bottom; }
.cfo-imsg-tail { position: absolute; bottom: 0; width: 13px; height: 15px; pointer-events: none; }
.cfo-imsg-bubble--cfo .cfo-imsg-tail { left: -5.5px; fill: var(--ios-gray); }
.cfo-imsg-bubble--user .cfo-imsg-tail { right: -5.5px; fill: var(--ios-blue); transform: scaleX(-1); }
.cfo-imsg-link { color: var(--ios-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cfo-imsg-delivered {
  font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ios-caption);
  margin-top: 3px; padding-right: 4px; opacity: 0; transition: opacity 0.25s ease;
}
.cfo-imsg-delivered.is-visible { opacity: 1; }

.cfo-imsg-typing-row {
  display: flex; align-items: flex-start; padding-left: 4px;
  opacity: 0; transform: translateY(6px) scale(0.86);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1.18, 0.36, 1);
}
.cfo-imsg-typing-row.is-shown { opacity: 1; transform: translateY(0) scale(1); }
.cfo-imsg-pill {
  background: var(--ios-gray); height: 35px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; position: relative;
}
.cfo-imsg-pill span {
  width: 8px; height: 8px; border-radius: 50%; background: #8E8E93;
  animation: cfoIosDot 1.15s infinite ease-in-out;
}
.cfo-imsg-pill span:nth-child(2) { animation-delay: 0.18s; }
.cfo-imsg-pill span:nth-child(3) { animation-delay: 0.36s; }
.cfo-imsg-pill::before {
  content: ""; position: absolute; background: var(--ios-gray); border-radius: 50%;
  width: 10px; height: 10px; left: 1px; bottom: -1.5px;
}
.cfo-imsg-pill::after {
  content: ""; position: absolute; background: var(--ios-gray); border-radius: 50%;
  width: 5.2px; height: 5.2px; left: -3.5px; bottom: -5px;
}
@keyframes cfoIosDot {
  0%, 60%, 100% { opacity: 0.38; transform: translateY(0) scale(0.9); }
  30% { opacity: 1; transform: translateY(-1.5px) scale(1.08); }
}

.learn-more-wrap {
  margin-top: var(--s2);
  height: 40px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.learn-more-wrap.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.learn-more-wrap.is-dismissed { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }

.hero-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(465px, calc(50vw - 72px));
  opacity: 0;
  transform: translate3d(calc(-100% - 16px), -50%, 0);
  pointer-events: none;
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.16s,
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  z-index: 1;
}
.stage.is-revealed .hero-copy {
  opacity: 1;
  transform: translate3d(calc(-100% - clamp(36px, 4.2vw, 56px)), -50%, 0);
  pointer-events: auto;
}

.headline {
  font-family: var(--font-head);
  font-size: clamp(38px, 3.8vw, 54px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.accent { color: var(--accent); }
.tw-word { display: inline-block; white-space: nowrap; }
.tw-char { opacity: 0; }
.tw-char.is-typed { opacity: 1; }
.tw-accent .tw-char { color: var(--accent); }
.tw-caret {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0.88em;
  vertical-align: -0.08em;
  pointer-events: none;
  opacity: 0;
}
.tw-caret::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 2.5px;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.tw-caret.is-typing { opacity: 1; }
.tw-caret.is-blinking { animation: twBlink 0.75s steps(1) infinite; opacity: 1; }
.tw-caret.is-done { opacity: 0 !important; animation: none !important; transition: opacity 0.4s ease; }
@keyframes twBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero-actions {
  margin-top: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-actions.is-in { opacity: 1; transform: translateY(0); }

.cta-login {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 6px;
  font: 500 15px/1 var(--font-body);
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.16s ease;
}
.cta-login:hover { color: var(--ink); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  height: 48px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  border: 0;
  background: var(--accent);
  color: #FFFFFF;
  font: 600 16px/24px var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary svg { width: 16px; height: 16px; flex: none; }

.learn-cue {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  font: 500 13.5px/1 var(--font-body);
  color: #7B899C;
  text-decoration: none;
  padding: 6px 4px;
  transition: color 0.18s ease;
}
.learn-cue:hover {
  color: var(--ink);
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 10px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  font: 500 13.5px/1 var(--font-body);
  color: #7B899C;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease 0.28s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.28s, color 0.18s ease;
}
.scroll-cue.is-in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue svg { width: 14px; height: 14px; animation: cueBob 2.4s ease-in-out infinite; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ==========================================================================
   V10 BELOW THE FOLD: THREE HERO-STYLE STATEMENTS, ZERO BOXES
   ========================================================================== */
.below { display: none; }
body.is-unlocked .below { display: block; }

.wrap {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--s3);
}

.beat {
  padding: var(--s8) 0;
  border-top: 1px solid var(--line);
}

.beat-h2 {
  font-family: var(--font-head);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.beat-p {
  margin-top: var(--s3);
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
  max-width: 560px;
}

.beat-close {
  padding: var(--s7) 0 var(--s6);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.close-h2 {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.foot {
  padding: var(--s4) 0 var(--s5);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 900px) {
  /* V15 phones: the chat plays first, with the phone at the top. When it finishes, the headline
     and buttons ease in above it and the phone moves down to make room (the phone's version of
     the laptop slide). Every rule needs body.is-phone, set by the script. */
  .center-rule, .learn-more-wrap { display: none; }
  body.is-phone { height: auto; overflow: auto; }
  body.is-phone .stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0; padding: 68px var(--s3) 0; height: 100svh; min-height: 0; overflow: hidden; position: relative; }  /* exactly one screen: the phone is cropped at its bottom edge, where the cue sits */
  body.is-phone .hero-copy { display: block; position: static; transform: none; width: 100%; max-width: 448px;
    text-align: center; order: 1; max-height: 0; overflow: hidden; opacity: 0; margin-bottom: 0;
    transition: max-height 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease 0.25s, margin-bottom 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  body.is-phone .stage.is-revealed .hero-copy { max-height: 320px; opacity: 1; margin-bottom: var(--s2); transform: none; }
  body.is-phone .headline { font-size: clamp(30px, 9vw, 40px); }
  body.is-phone .hero-actions { justify-content: center; margin-top: var(--s2); }
  /* "How it works & privacy" as a real button at the bottom of the first screen: 48px tall
     (comfortably tappable), 16px text, on a white fade over the bottom of the phone. It comes in
     with the headline. (Steve: plain small text was too small and hard to tap.) */
  body.is-phone .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 132px;
    background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF 62%); z-index: 3; pointer-events: none; }
  body.is-phone .scroll-cue { display: inline-flex; align-items: center; gap: 10px; position: absolute; left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 4;
    height: 48px; padding: 0 22px; border-radius: var(--r-pill); white-space: nowrap;
    background: #FFFFFF; border: 1px solid rgba(12, 26, 43, 0.14); box-shadow: 0 8px 24px rgba(12, 26, 43, 0.12);
    font: 600 16px/1 var(--font-body); color: var(--ink); }
  body.is-phone .scroll-cue.is-in { transform: translate(-50%, 0); }
  body.is-phone .scroll-cue svg { width: 18px; height: 18px; }
  body.is-phone .phone-wrap, body.is-phone .stage.is-revealed .phone-wrap { order: 2; transform: none; }
  /* never squeeze the headline or the phone to fit: the phone is cropped at the bottom instead */
  body.is-phone .hero-copy, body.is-phone .phone-wrap { flex-shrink: 0; }
  body.is-phone .cfo-imsg { height: auto; width: min(86vw, 400px); }
  .beat { padding: var(--s6) 0; }
}

/* ==========================================================================
   SHARED BY V16-V20: the short line under the headline, the caption
   ========================================================================== */
:root { --phone-h: min(780px, 82vh); --phone-w: calc(var(--phone-h) * 0.5581); }
.hero-sub {
  margin-top: var(--s2); font-size: 18px; line-height: 28px; color: var(--ink-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-sub.is-in { opacity: 1; transform: none; }
.hero-actions { margin-top: var(--s3); }

.band {
  position: absolute; top: 50%; z-index: 4;
  right: calc(50% + var(--phone-w) / 2 - 16px);
  width: min(340px, calc(50vw - var(--phone-w) / 2 - 24px));
  text-align: left; transform: translateY(-50%);
  opacity: 0; transition: opacity 0.24s ease; pointer-events: none;
}
.band.is-in { opacity: 1; transition: opacity 0.5s ease; }
.band strong {
  display: block; font-family: var(--font-head); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(26px, 2.7vw, 38px); line-height: 1.1; color: var(--ink); text-wrap: balance;
}
.band span { display: block; margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: balance; }
.stage.is-revealed .band { opacity: 0 !important; }

@media (max-width: 900px) {
  /* The whole phone down to its message box fits on the first screen, whatever the screen height
     (Safari's toolbars can leave an iPhone only about 550-660px). --phone-top: what sits above it. */
  :root { --phone-top: 132px; }
  body.is-phone .cfo-imsg { width: min(86vw, 400px, calc((100svh - var(--phone-top)) / 0.9 * 0.5581)); }
  body.is-phone .phone-wrap { margin-top: -28px; }  /* the phone picture has white space at its top */
  body.is-phone .hero-copy { position: relative; left: auto; top: auto; z-index: 5; }
  /* the white fade is for the button, so it comes in with the button */
  body.is-phone .stage::after { height: 96px; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF 70%); opacity: 0; transition: opacity 0.6s ease; }
  body.is-phone .stage.is-revealed::after { opacity: 1; }
  body.is-phone .stage.is-revealed .hero-copy { max-height: 440px; }
  body.is-phone .hero-sub { font-size: 16px; line-height: 24px; margin-top: 12px; }
  body.is-phone .hero-sub .wide-only { display: none; }
  body.is-phone .band {
    position: static; order: 0; width: 100%; max-width: 448px; flex-shrink: 0; transform: none; text-align: center;
    height: 92px; display: block; transition: opacity 0.24s ease, height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.is-phone .band strong { font-size: 25px; }
  body.is-phone .band span { font-size: 15px; line-height: 21px; margin-top: 4px; }
  body.is-phone .stage.is-revealed .band { height: 0; overflow: hidden; }
}
@media (max-width: 900px) and (max-height: 720px) {
  body.is-phone .headline { font-size: clamp(26px, 7.6vw, 34px); }
  body.is-phone .hero-actions { margin-top: 10px; }
  body.is-phone .hero-sub { font-size: 15px; line-height: 21px; margin-top: 8px; }
}

.lock { position: absolute; left: 14.3%; top: 7.2%; width: 71.65%; height: 87%; z-index: 3; overflow: hidden;
  border-radius: 10% / 4.6%; color: #fff; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, #2C6BE0 0%, #123A86 48%, #081B3F 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.lock.is-open { opacity: 0; transform: scale(1.06); pointer-events: none; }
.lock-island { position: absolute; left: 34.5%; top: 1.42%; width: 31%; height: 4.43%; border-radius: 999px; background: #000; }
.lock-date { margin-top: calc(84px * var(--ios-scale, 1)); font-size: calc(21px * var(--ios-scale, 1)); font-weight: 600; opacity: 0.9; }
.lock-time { font-size: calc(96px * var(--ios-scale, 1)); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.lock-note { position: absolute; left: 3.2%; right: 3.2%; top: calc(280px * var(--ios-scale, 1)); display: flex; gap: calc(12px * var(--ios-scale, 1));
  padding: calc(14px * var(--ios-scale, 1)); border-radius: calc(24px * var(--ios-scale, 1)); text-align: left; color: #000;
  background: rgba(245, 245, 250, 0.9); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(calc(-30px * var(--ios-scale, 1))) scale(0.94);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1.25, 0.36, 1); }
.lock-note.is-in { opacity: 1; transform: none; }
.lock-note.is-pressed { transform: scale(0.96); transition: transform 0.16s ease; }
.lock-app { flex: none; width: calc(42px * var(--ios-scale, 1)); height: calc(42px * var(--ios-scale, 1)); border-radius: 23%;
  background: linear-gradient(#5BF675, #0CBD2A); display: flex; align-items: center; justify-content: center; }
.lock-app svg { width: 76%; height: 76%; }
.lock-text { flex: 1; min-width: 0; }
.lock-row { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(16px * var(--ios-scale, 1)); line-height: 1.25; }
.lock-row span { font-size: calc(13px * var(--ios-scale, 1)); color: #6b6b70; }
.lock-text p { font-size: calc(16px * var(--ios-scale, 1)); line-height: 1.28; margin-top: 1px; }
.lock-bar { position: absolute; bottom: 1.2%; left: 32%; width: 36%; height: calc(5px * var(--ios-scale, 1)); border-radius: 9px; background: rgba(255, 255, 255, 0.85); }
@keyframes buzz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2.5px) rotate(-0.25deg); } 40% { transform: translateX(2.5px) rotate(0.25deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.cfo-imsg.is-buzzing { animation: buzz 0.42s linear 2; }
.band { width: min(440px, calc(50vw - var(--phone-w) / 2 - 24px)); }
.band strong { white-space: pre-line; }
/* The comparison: open rows and hairlines, like the rest of the page */
.compare { margin-top: var(--s4); max-width: 640px; font-size: 16px; line-height: 24px; }
.compare-row { display: grid; grid-template-columns: 1.1fr 1.2fr 1.5fr; gap: var(--s2); padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.compare-row b { font-weight: 600; color: var(--ink); }
.compare-row span:last-child { color: var(--ink); }
.compare-head { border-top: 0; padding-top: 0; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.compare-head span:last-child { color: var(--accent); }
@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr 1fr; gap: 4px var(--s2); }
  .compare-row b { grid-column: 1 / -1; }
  .compare-head span:first-child { display: none; }
}
/* Join the beta for anyone who's already sold: quiet, takes up no room, gone once the real button is there */
.join-corner { position: absolute; top: 22px; right: clamp(24px, 4vw, 48px); z-index: 20; height: 44px; display: inline-flex; align-items: center; gap: 6px;
  font: 500 15px/1 var(--font-body); color: var(--accent); text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s; }
.join-corner.is-in { opacity: 1; visibility: visible; }
.stage.is-revealed .join-corner { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
.join-corner:hover { color: var(--accent-hover); }
@media (max-width: 900px) and (max-height: 720px) { body.is-phone .hero-actions { margin-top: var(--s2); } }
@media (min-width: 901px) {
  .hero-copy { width: min(520px, calc(50vw - 72px)); }
  .headline { font-size: clamp(36px, 3.4vw, 48px); }
}

/* Phones, upright: the phone is in its final place from the first frame. The headline's space is
   held from the start (its letters are invisible until typed), the caption sits on top of that
   space, and at the reveal the caption fades and the headline types in. Nothing moves. */
@media (max-width: 900px) and (orientation: portrait) {
  body.is-phone .cfo-imsg { width: min(86vw, 400px); }
  body.is-phone .hero-copy, body.is-phone .stage.is-revealed .hero-copy {
    max-height: none; overflow: visible; opacity: 1; margin-bottom: var(--s2); transition: none; }
  body.is-phone .hero-copy { pointer-events: none; }
  body.is-phone .stage.is-revealed .hero-copy { pointer-events: auto; }
  body.is-phone .band, body.is-phone .stage.is-revealed .band {
    position: absolute; top: 68px; left: var(--s3); right: var(--s3); width: auto; max-width: none;
    height: var(--hero-h, 180px); overflow: visible; display: flex; flex-direction: column; justify-content: center;
    transition: opacity 0.3s ease; z-index: 6; }
  body.is-phone .stage::after { opacity: 1; }
}

/* V22, the spotlight: only one thing is lit. The phone dims while an explainer is up, and the
   explainer dims while the chat moves. */
.cfo-imsg { transition: opacity 0.45s ease; }
.band.is-in { transition: opacity 0.45s ease; }
.stage.is-reading:not(.is-revealed) .cfo-imsg { opacity: 0.28; }
.stage:not(.is-reading):not(.is-revealed) .band.is-in { opacity: 0.22; }

/* Kownsel (Steve, 2026-11-05): the logo, top left on every screen, and the contact in the phone.
   The phone picture has "CFO" drawn into it, so a patch in the header's own grey covers that. */
.site-logo { position: absolute; top: 33px; left: clamp(24px, 4vw, 48px); z-index: 20; display: block; line-height: 0; }
.site-logo svg { display: block; width: 160px; height: 22px; }
@media (max-width: 360px) { .site-logo svg { width: 131px; height: 18px; } .site-logo { top: 35px; } }
/* The glimmer: a soft light across the blue. Once on load, then quiet through the chat so it never
   competes with it, then now and then once the headline is up. */
.k-glint { transform: translateX(0); animation: kGlintOnce 1.5s ease-in-out .5s 1 both; }
body.is-unlocked .k-glint { animation: kGlintLoop 9s ease-in-out 2.5s infinite both; }
@keyframes kGlintOnce { from { transform: translateX(0); } to { transform: translateX(6075px); } }
@keyframes kGlintLoop { 0% { transform: translateX(0); } 16%, 100% { transform: translateX(6075px); } }
@media (prefers-reduced-motion: reduce) { .k-glint { display: none; } }
.contact-patch { position: absolute; left: 36%; top: 13.2%; width: 28%; height: 9.8%; z-index: 1; background: #F1F1F1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.contact-photo { width: calc(62px * var(--ios-scale, 1)); height: calc(62px * var(--ios-scale, 1)); border-radius: 50%; background: #0A7BFF;
  display: flex; align-items: center; justify-content: center; margin-top: calc(4px * var(--ios-scale, 1)); }
.contact-photo svg { width: 66%; height: auto; display: block; }
.contact-name { margin-top: calc(5px * var(--ios-scale, 1)); font: 400 calc(14px * var(--ios-scale, 1))/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; color: #000; }

/* Phones: smaller buttons (Steve, 2026-11-05: too busy). They look smaller, but an invisible edge keeps
   them easy to tap. */
@media (max-width: 900px) {
  body.is-phone .hero-actions { margin-top: 12px; gap: 14px; }
  body.is-phone .hero-actions .btn-primary { position: relative; height: 38px; padding: 0 16px; font-size: 14px; line-height: 20px; gap: 6px; }
  body.is-phone .hero-actions .btn-primary svg { width: 13px; height: 13px; }
  body.is-phone .hero-actions .btn-primary::after { content: ""; position: absolute; inset: -4px 0; }
  body.is-phone .hero-actions .cta-login { font-size: 14px; padding: 12px 6px; }
  body.is-phone .scroll-cue { height: 38px; padding: 0 16px; gap: 7px; font-size: 14px; box-shadow: 0 4px 14px rgba(12, 26, 43, .1); }
  body.is-phone .scroll-cue svg { width: 13px; height: 13px; }
  body.is-phone .scroll-cue::after { content: ""; position: absolute; inset: -4px 0; }
}

/* Phones, the last screen (Steve, 2026-11-05, design V25): less on it. Log in moves to the top right, one
   button under the headline, Your data & privacy as plain text, and the phone stays dimmed once the
   headline is in. Laptops keep Log in beside the button, and the phone stays lit there. */
.top-login { display: none; }
@media (max-width: 900px) {
  body.is-phone .hero-actions .js-login { display: none; }
  .top-login { display: inline-flex; align-items: center; position: absolute; top: 22px; right: 24px; height: 44px; padding: 0 2px; z-index: 20;
    font: 500 15px/1 var(--font-body); color: var(--ink-2); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .6s ease .3s, visibility .6s .3s; }
  body.is-unlocked .top-login { opacity: 1; visibility: visible; }
  body.is-phone .scroll-cue { background: none; border: 0; box-shadow: none; padding: 0 8px; font: 500 14px/1 var(--font-body); color: var(--ink-2); }
  body.is-phone .stage.is-revealed .cfo-imsg { opacity: .22; }
}

/* Captions (design V29): the key words in the headline's blue, with one short line under each. */
.band span:empty { display: none; }
.band strong em { font-style: normal; color: var(--accent); }