/* Authenticated first-login Flame opening. Entirely inert outside /rebrand. */
html.ke-rebrand-mode.ke-opening-flow-open,
html.ke-rebrand-mode.ke-opening-home-open { overflow: hidden; }

/* Paint every layer involved in the opening. Keeping the overlay or app shell
   transparent can expose the browser/native WebView canvas around safe-area
   and dynamic-viewport edges, which reads as a separate header/footer block. */
html.ke-rebrand-mode.ke-opening-route-pending,
html.ke-rebrand-mode.ke-opening-flow-open,
html.ke-rebrand-mode.ke-opening-home-open,
html.ke-rebrand-mode.ke-opening-route-pending body,
html.ke-rebrand-mode.ke-opening-flow-open body,
html.ke-rebrand-mode.ke-opening-home-open body {
  background: var(--kb-navy, #1a2830) !important;
}

html.ke-rebrand-mode.ke-opening-route-pending :is(#splash, .ke-rebrand-shell-header, #screen-area, #tab-bar),
html.ke-rebrand-mode.ke-opening-flow-open :is(#splash, .ke-rebrand-shell-header, #screen-area, #tab-bar) {
  display: none !important;
  visibility: hidden !important;
}

/* Keep the hidden app shell painted too, so viewport/safe-area resizing never
   reveals the normal rebrand canvas behind the fixed opening layer. */
html.ke-rebrand-mode.ke-opening-route-pending #app,
html.ke-rebrand-mode.ke-opening-flow-open #app,
html.ke-rebrand-mode.ke-opening-home-open #app {
  background: var(--kb-navy, #1a2830) !important;
}

html.ke-rebrand-mode .ke-opening-flow {
  background: var(--kb-navy, #1a2830);
  color: #fffaf2;
  display: none;
  font-family: 'DM Sans', sans-serif;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 100000;
}

html.ke-rebrand-mode .ke-opening-flow.show { display: block; }

html.ke-rebrand-mode .ke-opening-screen {
  align-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(215,181,109,.11), transparent 36rem),
    #0b2028;
  color: #fffaf2;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(28px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  position: relative;
  width: 100%;
}

html.ke-rebrand-mode .ke-opening-screen h1,
html.ke-rebrand-mode .ke-opening-screen h2,
html.ke-rebrand-mode .ke-opening-screen p { color: inherit !important; }

html.ke-rebrand-mode .ke-opening-screen h1,
html.ke-rebrand-mode .ke-opening-screen h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

html.ke-rebrand-mode .ke-opening-primary,
html.ke-rebrand-mode .ke-opening-secondary {
  border-radius: 999px;
  cursor: pointer;
  font: 800 12px/1 'DM Sans', sans-serif;
  min-height: 52px;
  padding: 0 28px;
}

html.ke-rebrand-mode .ke-opening-primary {
  background: linear-gradient(145deg, #f1d690, #c99b45);
  border: 1px solid #f8e4aa;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.45);
  color: #12252d;
}

html.ke-rebrand-mode .ke-opening-secondary {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(241,214,144,.48);
  color: #f1d690;
}

html.ke-rebrand-mode .ke-opening-primary:disabled,
html.ke-rebrand-mode .ke-opening-secondary:disabled { cursor: not-allowed; opacity: .42; }

html.ke-rebrand-mode .ke-opening-screen.is-story,
html.ke-rebrand-mode .ke-opening-screen.is-story * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

html.ke-rebrand-mode .ke-opening-primary:focus-visible,
html.ke-rebrand-mode .ke-opening-secondary:focus-visible,
html.ke-rebrand-mode .ke-opening-screen button:focus-visible,
html.ke-rebrand-mode .ke-opening-screen input:focus-visible,
html.ke-rebrand-mode .ke-opening-home-prompt button:focus-visible,
html.ke-rebrand-mode #ke-opening-flow-replay:focus-visible {
  outline: 3px solid #fff4ca !important;
  outline-offset: 4px !important;
}

html.ke-rebrand-mode .ke-opening-error {
  color: #ffd2d5 !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  min-height: 18px;
}

html.ke-rebrand-mode .ke-opening-sr-only,
html.ke-rebrand-mode .ke-opening-replay-status {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Screen 1: press-and-hold ignition. */
html.ke-rebrand-mode .ke-opening-screen.is-ignition {
  background: var(--kb-navy, #1a2830);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  transition: background .8s cubic-bezier(.2,.72,.2,1);
}

html.ke-rebrand-mode .ke-opening-screen.is-ignition:focus { outline: 0; }

html.ke-rebrand-mode .ke-opening-ignition-copy {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6dvh, 16px);
  inset: 0;
  padding: max(clamp(38px, 7dvh, 74px), calc(env(safe-area-inset-top) + 24px)) 12px 0;
  pointer-events: none;
  position: absolute;
  transform: none;
  transition: opacity .32s ease, transform .42s ease;
  width: 100%;
  z-index: 4;
}

html.ke-rebrand-mode .ke-opening-ignition-copy p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .005em;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  transform: translateY(8px);
  width: calc(100% - 24px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-hex {
  animation-delay: .38s;
  flex: 0 0 auto;
  width: min(300px,calc(100vw - 48px)) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-hex .ke-opening-bloom-hex-inner {
  gap: clamp(10px,1.6dvh,16px);
  padding: 18% 14% !important;
}

html.ke-rebrand-mode .ke-opening-ignition-line {
  font-size: clamp(30px, min(8.8vw, 5.6dvh), 46px);
  line-height: 1.04;
  max-width: 17ch;
  text-wrap: balance;
}

html.ke-rebrand-mode .ke-opening-ignition-line { top: auto; }

html.ke-rebrand-mode .ke-opening-ignition-instruction {
  font-size: clamp(26px, min(7.2vw, 4.5dvh), 38px);
  left: 0;
  line-height: 1.08;
  margin-top: 0;
  max-width: 22ch;
  position: absolute;
  right: 0;
  top: calc(50% + 101px);
  text-wrap: balance;
}

html.ke-rebrand-mode .ke-opening-flow.show .ke-opening-ignition-line.is-first { animation: keOpeningLineIn .62s 1.5s ease forwards; }
html.ke-rebrand-mode .ke-opening-flow.show .ke-opening-ignition-line.is-second { animation: keOpeningLineIn .62s 2.42s ease forwards; }
html.ke-rebrand-mode .ke-opening-flow.show .ke-opening-ignition-instruction { animation: keOpeningLineIn .62s 3.34s ease forwards; color: #ddbd71 !important; }

@keyframes keOpeningLineIn { to { opacity: 1; transform: translateY(0); } }

html.ke-rebrand-mode .ke-opening-ignition-field {
  align-items: center;
  display: flex;
  height: clamp(210px, min(64vw, 39dvh), 350px);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: clamp(210px, min(64vw, 39dvh), 350px);
  z-index: 5;
}

@media (orientation: landscape) and (max-height: 620px) {
  html.ke-rebrand-mode .ke-opening-ignition-copy {
    align-items: center;
    bottom: 0;
    gap: clamp(5px, 1.8dvh, 10px);
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) 3vw max(18px, env(safe-area-inset-bottom));
    right: auto;
    width: 54%;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-hex {
    width: min(260px,42vw,52dvh) !important;
  }

  html.ke-rebrand-mode .ke-opening-ignition-line {
    font-size: clamp(27px, min(4.8vw, 8dvh), 40px);
  }

  html.ke-rebrand-mode .ke-opening-ignition-instruction {
    font-size: clamp(24px, min(4vw, 6.8dvh), 34px);
    left: 100%;
    right: auto;
    top: calc(50dvh + 82px);
    width: 85%;
  }

  html.ke-rebrand-mode .ke-opening-ignition-field {
    height: clamp(170px, min(34vw, 56dvh), 280px);
    left: 76%;
    top: 50%;
    width: clamp(170px, min(34vw, 56dvh), 280px);
  }
}

html.ke-rebrand-mode .ke-opening-ember {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 154px;
  justify-content: center;
  padding: 0;
  position: relative;
  touch-action: none;
  width: 154px;
  z-index: 4;
}

html.ke-rebrand-mode .ke-opening-ember-core {
  animation: keOpeningEmberBreathe 4s ease-in-out infinite;
  background: radial-gradient(circle at 48% 43%, #fffbe7 0 9%, #ffdc70 14%, #d27a20 31%, #7a270f 55%, rgba(80,17,5,.08) 78%);
  border-radius: 50%;
  box-shadow:
    0 0 var(--ke-hold-glow) rgba(255,161,37,var(--ke-hold-alpha)),
    0 0 var(--ke-hold-inner-glow) rgba(255,233,155,.85);
  height: var(--ke-hold-size);
  transform: scale(var(--ke-hold-scale));
  transition: box-shadow .08s linear, height .08s linear, transform .08s linear;
  width: var(--ke-hold-size);
}

html.ke-rebrand-mode .ke-opening-ember-ring {
  border: 1px solid rgba(235,189,85,var(--ke-hold-ring-alpha));
  border-radius: 50%;
  inset: var(--ke-hold-ring-inset);
  position: absolute;
  transform: scale(var(--ke-hold-ring-scale));
}

html.ke-rebrand-mode .ke-opening-ember.is-held .ke-opening-ember-core { animation: none; }

@keyframes keOpeningEmberBreathe { 0%,100% { transform: scale(.78); opacity: .72; } 50% { transform: scale(.94); opacity: 1; } }

html.ke-rebrand-mode .ke-opening-ignition-release {
  background: #06151c;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transition: opacity .55s cubic-bezier(.2,.72,.2,1);
  visibility: hidden;
  z-index: 3;
}

html.ke-rebrand-mode .ke-opening-ignition-release::before {
  background: radial-gradient(circle,#fffdf0 0 6%,#ffe29a 12%,rgba(230,145,44,.96) 25%,rgba(126,40,24,.78) 43%,rgba(42,40,48,.42) 61%,transparent 75%);
  border-radius: 50%;
  content: '';
  height: clamp(120px, 30vw, 220px);
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%) scale(.18);
  width: clamp(120px, 30vw, 220px);
}

html.ke-rebrand-mode .ke-opening-ignition-release img {
  filter: blur(18px) drop-shadow(0 0 36px rgba(255,218,121,.9));
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-44%) scale(.5);
  width: clamp(180px, 52vw, 430px);
}

html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-screen.is-ignition { background: #06151c; }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ignition-copy { opacity: 0; transform: translateY(-18px); }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ember { pointer-events: none; }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ignition-release { opacity: 1; visibility: visible; }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ignition-release::before { animation: keOpeningIgnitionWash 1.05s cubic-bezier(.15,.72,.12,1) both; }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ignition-release img { animation: keOpeningMarkForm 1.05s cubic-bezier(.18,.76,.16,1) both; }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ember-core { animation: keOpeningEmberRelease 1.05s cubic-bezier(.12,.72,.12,1) both; }
html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ember-ring {
  animation: keOpeningEmberRingRelease .72s ease-out both;
  border-color: rgba(235,189,85,.78);
}

@keyframes keOpeningIgnitionWash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.18); }
  16% { opacity: 1; }
  64% { opacity: .96; transform: translate(-50%,-50%) scale(7.2); }
  100% { opacity: .18; transform: translate(-50%,-50%) scale(10); }
}

@keyframes keOpeningMarkForm {
  0%,32% { filter: blur(18px) drop-shadow(0 0 42px rgba(255,218,121,.95)); opacity: 0; transform: translate(-50%,-42%) scale(.5); }
  68% { filter: blur(3px) drop-shadow(0 0 30px rgba(255,218,121,.72)); opacity: .92; }
  100% { filter: blur(0) drop-shadow(0 0 16px rgba(255,218,121,.42)); opacity: 1; transform: translate(-50%,-62%) scale(1); }
}

@keyframes keOpeningEmberRelease {
  0% { opacity: 1; transform: scale(1.35); }
  42% { box-shadow: 0 0 120px 48px rgba(255,185,69,.94),0 0 36px 15px rgba(255,251,224,1); opacity: 1; transform: scale(2.1); }
  100% { box-shadow: 0 0 190px 86px rgba(255,190,77,0),0 0 56px 24px rgba(255,251,224,0); opacity: 0; transform: scale(4.6); }
}

@keyframes keOpeningEmberRingRelease {
  from { opacity: .9; transform: scale(1.1); }
  to { opacity: 0; transform: scale(4.4); }
}

html.ke-rebrand-mode .ke-opening-screen.is-ignition .ke-opening-screen-restart {
  animation: keOpeningRestartReveal .3s 3.8s ease both;
  opacity: 0;
}

@keyframes keOpeningRestartReveal { to { opacity: 1; } }

/* Screen 2: sixty-second cinematic ignition and transformation story. */
html.ke-rebrand-mode .ke-opening-screen.is-story { background: #06151c; overflow: visible; padding: 0; }

html.ke-rebrand-mode .ke-opening-skip {
  background: rgba(8,24,31,.6);
  border: 1px solid rgba(229,197,123,.42);
  border-radius: 999px;
  color: #ead18e;
  cursor: pointer;
  font: 700 11px 'DM Sans', sans-serif;
  min-height: 42px;
  padding: 0 17px;
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  top: max(18px, env(safe-area-inset-top));
  z-index: 8;
}

html.ke-rebrand-mode .ke-opening-story-stage {
  align-items: center;
  background: radial-gradient(circle at 50% 48%, rgba(215,181,109,.12), transparent 38rem);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  transition: background 1.2s ease;
  overflow: visible;
}

html.ke-rebrand-mode .ke-opening-story-aura {
  background: radial-gradient(circle, rgba(241,202,98,.2), transparent 66%);
  border-radius: 50%;
  height: min(78vw, 580px);
  position: absolute;
  transform: scale(.54);
  transition: transform 1.5s ease, opacity 1.5s ease;
  width: min(78vw, 580px);
}

html.ke-rebrand-mode .ke-opening-story-flame {
  filter: drop-shadow(0 0 26px rgba(238,188,61,.62));
  height: min(72dvh, 660px);
  overflow: visible;
  position: relative;
  transform: scale(.58);
  transition: filter 1.3s ease, opacity 1.3s ease, transform 1.3s cubic-bezier(.2,.74,.24,1);
  width: min(86vw, 560px);
  z-index: 4;
}

html.ke-rebrand-mode .ke-opening-story-flame::before,
html.ke-rebrand-mode .ke-opening-story-flame::after {
  animation: keOpeningStorySparkLift 2.8s cubic-bezier(.32,.08,.22,1) infinite;
  background: #fff9dc;
  border-radius: 999px;
  box-shadow: -112px 72px 0 -1px #f3d383, 102px 36px 0 -1px #fff4c4, -72px -38px 0 -2px #f2c95f, 132px -76px 0 -2px #fff8dc;
  content: '';
  filter: drop-shadow(0 0 9px rgba(248,211,105,.95));
  height: 12px;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 54%;
  width: 6px;
  z-index: 3;
}

html.ke-rebrand-mode .ke-opening-story-flame::after {
  animation-delay: -1.35s;
  box-shadow: -142px 28px 0 -2px #fff4c4, 78px 82px 0 -1px #f3d383, -38px -74px 0 -2px #fff8dc, 148px -12px 0 -2px #f2c95f;
  height: 9px;
  width: 5px;
}

html.ke-rebrand-mode .ke-opening-story-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-story-flame-media,
html.ke-rebrand-mode .ke-opening-story-flame-fallback {
  display: block;
  height: 100%;
  pointer-events: none;
  width: 100%;
}
html.ke-rebrand-mode .ke-opening-story-flame-media {
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 50%,#000 0 68%,rgba(0,0,0,.94) 78%,rgba(0,0,0,.42) 89%,transparent 100%);
  mask-image: radial-gradient(ellipse 55% 60% at 50% 50%,#000 0 68%,rgba(0,0,0,.94) 78%,rgba(0,0,0,.42) 89%,transparent 100%);
  mix-blend-mode: screen;
  object-fit: contain;
  overflow: visible;
  position: relative;
  transform: scale(.88);
  transform-origin: center;
  z-index: 1;
}
html.ke-rebrand-mode .ke-opening-story-flame-fallback { display: none; }
html.ke-rebrand-mode .ke-opening-story-flame.is-media-fallback .ke-opening-story-flame-media { display: none; }
html.ke-rebrand-mode .ke-opening-story-flame.is-media-fallback .ke-opening-story-flame-fallback { display: block; }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="sixty"] .ke-opening-story-flame { transform: scale(.65); }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="growing"] .ke-opening-story-flame { transform: scale(.76); }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="steady"] .ke-opening-story-flame { transform: scale(.86); }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="night"] .ke-opening-story-flame { filter: grayscale(.42) brightness(.72) drop-shadow(0 0 12px rgba(238,188,61,.35)); transform: scale(.49); }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="day-thirty"] .ke-opening-story-flame { transform: scale(.98); }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="build"] .ke-opening-story-flame { filter: drop-shadow(0 0 58px rgba(240,198,79,.9)); transform: scale(1.06); }
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="day-thirty"] .ke-opening-story-aura,
html.ke-rebrand-mode .ke-opening-story-stage[data-opening-story-scene="build"] .ke-opening-story-aura { opacity: 1; transform: scale(1.15); }

html.ke-rebrand-mode .ke-opening-story-line {
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 68px));
  font: italic 500 clamp(27px, 5.2vw, 50px)/1.08 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .005em;
  left: 22px;
  margin: 0;
  max-width: 760px;
  position: absolute;
  right: 22px;
  text-align: center;
  text-shadow: 0 4px 22px #02080b;
  z-index: 6;
}

html.ke-rebrand-mode .ke-opening-story-progress { background: rgba(255,255,255,.12); bottom: max(26px, env(safe-area-inset-bottom)); height: 3px; left: 8%; overflow: hidden; position: absolute; right: 8%; z-index: 8; }
html.ke-rebrand-mode .ke-opening-story-progress i { animation: none; background: linear-gradient(90deg,#bd8f37,#f3dda2); display: block; height: 100%; transform: scaleX(0); transform-origin: left; width: 100%; }
@keyframes keOpeningStoryProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The ignition now becomes the member's first sixty-second practice. The
   generated Flame owns the full frame; guidance remains live HTML below it.
   Keep the media transparent, but isolate the practice on the brand backdrop
   so the authenticated app shell cannot show through the opening. */
html.ke-rebrand-mode .ke-opening-screen.is-story {
  background: var(--kb-navy, #1a2830);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage {
  align-items: stretch;
  background: var(--kb-navy, #1a2830);
  height: 100%;
  justify-content: stretch;
  min-height: 0;
  overflow: hidden;
  transition: none;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage::before,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage::after {
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage::before {
  background: radial-gradient(circle at 50% 47%,rgba(245,203,87,.3),rgba(210,112,37,.11) 22%,transparent 52%);
  z-index: 3;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage::after {
  background: #000;
  transition: opacity .95s ease;
  z-index: 10;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-karamo-glow::before {
  animation: keOpeningKaramoFinalAura 3.85s ease-in-out both;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-story-ending::after {
  opacity: 1;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-ember-ignition { background: var(--kb-navy, #1a2830); }
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-transformation { background: var(--kb-navy, #1a2830); }

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-skip {
  background: rgba(8,24,31,.72);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-aura { display: none; }

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame {
  filter: none !important;
  height: 100%;
  inset: 0;
  overflow: visible;
  position: absolute;
  transform: none !important;
  transition: none;
  width: 100%;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-media,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-fallback {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: none;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-media.is-media-error { display: none; }

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-ember-ignition .is-ember-film,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-transformation .is-transformation-film {
  opacity: 1;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-ember-ignition .ke-opening-story-flame.is-media-fallback .ke-opening-story-flame-fallback,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-transformation .ke-opening-story-flame.is-media-fallback .ke-opening-story-flame-fallback {
  display: block;
  opacity: 1;
}

html.ke-rebrand-mode .ke-opening-cinematic-brand {
  align-items: center;
  background: var(--kb-navy, #1a2830);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 7;
}

html.ke-rebrand-mode .ke-opening-story-stage:not(.is-brand-reveal) .ke-opening-cinematic-brand {
  opacity: 0;
  visibility: hidden;
}

html.ke-rebrand-mode .ke-opening-cinematic-brand::before,
html.ke-rebrand-mode .ke-opening-cinematic-brand::after {
  content: none;
}

html.ke-rebrand-mode .ke-opening-cinematic-lockup {
  align-items: center;
  animation: keOpeningCinematicLockup 1.8s linear both;
  backface-visibility: hidden;
  display: flex;
  gap: clamp(18px,2.4vw,36px);
  justify-content: center;
  max-width: min(88vw,1120px);
  position: relative;
  will-change: opacity;
  width: min(82vw,980px);
  z-index: 2;
}

html.ke-rebrand-mode .ke-opening-cinematic-lockup img {
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.32));
  object-fit: contain;
}

html.ke-rebrand-mode .ke-opening-cinematic-ke-logo {
  flex: 0 1 18%;
  height: auto;
  max-height: min(18dvh,150px);
  min-width: 0;
  width: 18%;
}

html.ke-rebrand-mode .ke-opening-cinematic-by {
  color: rgba(255,250,242,.78);
  flex: 0 0 auto;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(28px,4.4vw,64px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

html.ke-rebrand-mode .ke-opening-cinematic-karamo-logo {
  flex: 0 1 62%;
  height: auto;
  max-height: min(26dvh,260px);
  min-width: 0;
  width: 62%;
}

@keyframes keOpeningCinematicLockup {
  0% { opacity: 0; }
  22.222222%,77.777778% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes keOpeningKaramoFinalAura {
  0% { opacity: 0; transform: scale(.7); }
  42% { opacity: .9; transform: scale(1); }
  100% { opacity: .56; transform: scale(1.18); }
}

@keyframes keOpeningKaramoFinalGlow {
  0% { filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(245,200,76,0)); }
  55%,100% { filter: brightness(1.14) saturate(1.08) drop-shadow(0 0 36px rgba(245,200,76,.68)); }
}

@media (orientation: portrait) {
  html.ke-rebrand-mode .ke-opening-cinematic-lockup {
    flex-direction: column;
    gap: clamp(9px,2dvh,18px);
    width: min(88vw,680px);
  }
  html.ke-rebrand-mode .ke-opening-cinematic-ke-logo {
    flex-basis: auto;
    max-height: 18dvh;
    width: min(28vw,210px);
  }
  html.ke-rebrand-mode .ke-opening-cinematic-by { font-size: clamp(24px,6vw,42px); }
  html.ke-rebrand-mode .ke-opening-cinematic-karamo-logo {
    flex-basis: auto;
    max-height: 24dvh;
    width: min(88vw,640px);
  }
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame::before,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame::after { display: none; }

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-media,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-fallback {
  background: transparent;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-media {
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  transform-origin: center 46%;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-media.is-ember-film {
  transform: translateY(-3dvh) scale(.82);
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-flame-media.is-transformation-film {
  transform: translateY(-2dvh) scale(.86);
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-stage.is-karamo-glow .is-transformation-film {
  animation: keOpeningKaramoFinalGlow 3.85s ease-in-out both;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-line {
  bottom: max(clamp(92px, 15dvh, 172px), calc(env(safe-area-inset-bottom) + 74px));
  color: #fff9ed;
  font-size: clamp(28px, min(5.6vw, 5.2dvh), 48px);
  left: 24px;
  line-height: 1.08;
  margin: 0 auto;
  max-width: min(88vw,760px);
  opacity: 0;
  right: 24px;
  text-shadow: 0 4px 24px rgba(0,0,0,.92);
  transform: translateY(14px);
  transition: opacity .72s ease,transform .72s cubic-bezier(.22,.75,.24,1);
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-line {
    bottom: max(clamp(76px, 12dvh, 112px), calc(env(safe-area-inset-bottom) + 64px));
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-line {
    bottom: max(clamp(52px, 13dvh, 78px), calc(env(safe-area-inset-bottom) + 44px));
    font-size: clamp(25px, min(4.2vw, 7dvh), 38px);
    max-width: min(78vw, 760px);
  }
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-story-progress i {
  animation: none;
  transform: scaleX(0);
}

@keyframes keOpeningStorySparkLift {
  0% { opacity: 0; transform: translate3d(0,70px,0) scale(.42); }
  18% { opacity: .92; }
  76% { opacity: .66; }
  100% { opacity: 0; transform: translate3d(0,-116px,0) scale(1.08); }
}

/* Screen 3 and the adapted authenticated handoff. */
html.ke-rebrand-mode .ke-opening-name-main,
html.ke-rebrand-mode .ke-opening-meet-main,
html.ke-rebrand-mode .ke-opening-notification-main,
html.ke-rebrand-mode .ke-opening-checkin-main,
html.ke-rebrand-mode .ke-opening-recap-main,
html.ke-rebrand-mode .ke-opening-plan-main,
html.ke-rebrand-mode .ke-opening-offer-main {
  margin: auto;
  max-width: 760px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}

html.ke-rebrand-mode .ke-opening-screen.is-name {
  background: var(--kb-navy, #1a2830);
}

html.ke-rebrand-mode .ke-opening-name-flame {
  filter: drop-shadow(0 0 var(--ke-name-glow) rgba(238,190,67,.72));
  height: var(--ke-name-flame-height);
  margin: 0 auto 28px;
  transition: filter .2s ease, height .2s ease;
  width: 140px;
}

html.ke-rebrand-mode .ke-opening-name-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-name-flame {
  height: clamp(160px,21dvh,220px);
  overflow: hidden;
  width: clamp(126px,24vw,176px);
}
html.ke-rebrand-mode .ke-opening-name-flame-picture {
  display: block;
  height: 100%;
  width: 100%;
}
html.ke-rebrand-mode .ke-opening-name-flame-media {
  background: transparent;
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  width: 100%;
}
html.ke-rebrand-mode .ke-opening-screen.is-typing .ke-opening-name-flame svg { animation: keOpeningTypeFlicker .32s ease; }
html.ke-rebrand-mode .ke-opening-screen.is-typing .ke-opening-name-flame-media { animation: keOpeningTypeFlicker .32s ease; }
@keyframes keOpeningTypeFlicker { 50% { transform: scale(1.08) rotate(1.5deg); } }

html.ke-rebrand-mode .ke-opening-name-main h1 { font-size: clamp(34px,6vw,62px); line-height: 1.08; margin: 0 auto 34px; max-width: 720px; }
html.ke-rebrand-mode .ke-opening-name-main label { color: #e6c984; display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; margin: 0 auto 8px; max-width: 440px; text-align: left; text-transform: uppercase; }
html.ke-rebrand-mode .ke-opening-name-main input { background: #fffaf2; border: 2px solid #e2bd69; border-radius: 18px; box-sizing: border-box; color: #142730; display: block; font: 600 25px 'Playfair Display', serif; height: 64px !important; margin: 0 auto 6px; max-width: 440px; min-height: 64px !important; padding: 0 18px; text-align: center; width: 100%; }
html.ke-rebrand-mode .ke-opening-name-main .ke-opening-error { margin: 8px auto 3px; }
html.ke-rebrand-mode .ke-opening-name-main .ke-opening-primary { min-width: 220px; }
html.ke-rebrand-mode .ke-opening-name-landing { color: #f0d38d !important; font: 600 27px 'Playfair Display', serif; min-height: 37px; opacity: 0; }
html.ke-rebrand-mode .ke-opening-screen.is-name-landed .ke-opening-name-landing { animation: keOpeningNameLand .5s ease forwards; }
@keyframes keOpeningNameLand { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

html.ke-rebrand-mode .ke-opening-screen.is-meet { overflow: hidden; }
html.ke-rebrand-mode .ke-opening-meet-aura { background: radial-gradient(circle, rgba(222,177,71,.35), rgba(109,41,66,.18) 35%, transparent 68%); border-radius: 50%; height: min(90vw,620px); left: 50%; position: absolute; top: 43%; transform: translate(-50%,-50%) scale(.55); transition: transform 3.5s ease; width: min(90vw,620px); }
html.ke-rebrand-mode .ke-opening-meet-flame { filter: drop-shadow(0 0 52px rgba(240,194,68,.76)); height: min(35vh,300px); margin: 0 auto 28px; transform: scale(.45); transition: transform 3.5s cubic-bezier(.2,.75,.2,1); width: min(28vh,235px); }
html.ke-rebrand-mode .ke-opening-meet-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-screen.is-meet.is-ready .ke-opening-meet-aura { transform: translate(-50%,-50%) scale(1); }
html.ke-rebrand-mode .ke-opening-screen.is-meet.is-ready .ke-opening-meet-flame { transform: scale(1); }
html.ke-rebrand-mode .ke-opening-meet-main h1 { font-size: clamp(38px,7vw,70px); line-height: 1; margin: 0 0 18px; }
html.ke-rebrand-mode .ke-opening-meet-main > p { color: rgba(255,250,242,.76) !important; font: 500 clamp(18px,3vw,25px)/1.45 'Cormorant Garamond', serif; margin: 0 auto 30px; max-width: 650px; }

/* Screens 7–16: the Flame is the progress bar. */
html.ke-rebrand-mode .ke-opening-screen.is-question,
html.ke-rebrand-mode .ke-opening-screen.is-reminders { align-items: stretch; display: block; padding: 0; }

html.ke-rebrand-mode .ke-opening-question-header {
  align-items: center;
  background: transparent;
  display: grid;
  grid-template-columns: 52px minmax(150px,1fr) 52px;
  min-height: 158px;
  padding: max(15px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 10;
}

html.ke-rebrand-mode .ke-opening-question-header > button,
html.ke-rebrand-mode .ke-opening-simple-header button {
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(225,191,114,.42);
  border-radius: 50%;
  color: #f0d28b;
  cursor: pointer;
  display: flex;
  font-size: 23px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

html.ke-rebrand-mode .ke-opening-question-progress { align-items: center; display: flex; flex-direction: column; height: 132px; justify-content: flex-end; justify-self: center; position: relative; width: min(360px,100%); }
html.ke-rebrand-mode .ke-opening-progress-flame { filter: drop-shadow(0 0 17px rgba(238,189,61,.66)); height: var(--ke-opening-progress); max-height: 106px; min-height: 46px; transition: height .6s cubic-bezier(.2,.74,.2,1); width: 80px; }
html.ke-rebrand-mode .ke-opening-progress-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-progress-track { background: rgba(255,255,255,.1); border-radius: 999px; bottom: 13px; height: 3px; left: 0; overflow: hidden; position: absolute; right: 0; }
html.ke-rebrand-mode .ke-opening-progress-track i { background: linear-gradient(90deg,#9b6a22,#f0d28a); border-radius: inherit; display: block; height: 100%; transition: width .5s ease; width: var(--ke-opening-progress); }
html.ke-rebrand-mode .ke-opening-question-progress small { color: rgba(255,250,242,.4); font-size: 9px; letter-spacing: .8px; margin-top: 13px; }

html.ke-rebrand-mode .ke-opening-question-main,
html.ke-rebrand-mode .ke-opening-reminders-main {
  margin: 0 auto;
  max-width: 900px;
  padding: 22px max(22px,env(safe-area-inset-right)) 26px max(22px,env(safe-area-inset-left));
  text-align: center;
}

html.ke-rebrand-mode .ke-opening-question-main h1,
html.ke-rebrand-mode .ke-opening-reminders-main h1 { font-size: clamp(34px,5.8vw,58px); line-height: 1.06; margin: 8px auto 14px; max-width: 830px; }
html.ke-rebrand-mode .ke-opening-question-main > p,
html.ke-rebrand-mode .ke-opening-reminders-main > p { color: rgba(255,250,242,.64) !important; font: 500 18px 'Cormorant Garamond',serif; margin: 0 0 20px; }

html.ke-rebrand-mode .ke-opening-options { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 30px auto 0; max-width: 780px; }
html.ke-rebrand-mode .ke-opening-options.is-compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
html.ke-rebrand-mode .ke-opening-options button {
  align-items: center;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(221,185,103,.38);
  border-radius: 18px;
  color: #fffaf2;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px;
  text-align: left;
}

html.ke-rebrand-mode .ke-opening-options button > span { border: 2px solid #d9b66d; border-radius: 50%; flex: 0 0 18px; height: 18px; position: relative; width: 18px; }
html.ke-rebrand-mode .ke-opening-options.is-multi button > span { border-radius: 5px; }
html.ke-rebrand-mode .ke-opening-options button strong { font: 600 15px/1.25 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-options button.is-selected { background: linear-gradient(145deg,rgba(109,41,66,.88),rgba(74,25,45,.9)); border-color: #edcc7e; box-shadow: 0 10px 28px rgba(0,0,0,.2),0 0 0 4px rgba(221,185,103,.08); }
html.ke-rebrand-mode .ke-opening-options button.is-selected > span::after { background: #efd184; border-radius: inherit; content: ''; inset: 3px; position: absolute; }

html.ke-rebrand-mode .ke-opening-question-footer { margin: 0 auto; max-width: 900px; padding: 0 22px max(32px,env(safe-area-inset-bottom)); text-align: center; }
html.ke-rebrand-mode .ke-opening-question-footer .ke-opening-primary { min-width: 230px; }


html.ke-rebrand-mode .ke-opening-time-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 38px auto 18px; max-width: 700px; }
html.ke-rebrand-mode .ke-opening-time-grid label { align-items: center; background: rgba(255,255,255,.045); border: 1px solid rgba(222,186,103,.4); border-radius: 20px; display: flex; gap: 14px; justify-content: space-between; min-height: 108px; padding: 18px; text-align: left; }
html.ke-rebrand-mode .ke-opening-time-grid label span,
html.ke-rebrand-mode .ke-opening-time-grid label strong,
html.ke-rebrand-mode .ke-opening-time-grid label small { display: block; }
html.ke-rebrand-mode .ke-opening-time-grid label strong { font: 600 21px 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-time-grid label small { color: rgba(255,250,242,.5); font-size: 9px; margin-top: 4px; }
html.ke-rebrand-mode .ke-opening-time-grid input { background: #fffaf2; border: 2px solid #d9b56d; border-radius: 13px; color: #13262e; color-scheme: light; font: 800 15px 'DM Sans',sans-serif; min-height: 50px; padding: 0 10px; }
html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-timezone { color: rgba(255,250,242,.48) !important; font: 700 9px 'DM Sans',sans-serif; letter-spacing: .5px; margin: 0 0 14px; }
html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-primary { min-width: 220px; }

/* Permission framing after the user chooses their times. */
html.ke-rebrand-mode .ke-opening-notification-main { max-width: 620px; }
html.ke-rebrand-mode .ke-opening-notification-flame { filter: drop-shadow(0 0 34px rgba(239,193,70,.72)); height: 160px; margin: 0 auto 25px; width: 120px; }
html.ke-rebrand-mode .ke-opening-notification-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-notification-main > span,
html.ke-rebrand-mode .ke-opening-checkin-main > span,
html.ke-rebrand-mode .ke-opening-day-one-main > span { color: #e7c87e; display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.3px; margin-bottom: 12px; }
html.ke-rebrand-mode .ke-opening-notification-main h1 { font-size: clamp(38px,7vw,65px); line-height: 1; margin: 0 0 18px; }
html.ke-rebrand-mode .ke-opening-notification-main > p { color: rgba(255,250,242,.64) !important; font: 500 19px/1.45 'Cormorant Garamond',serif; margin: 0 auto 23px; max-width: 520px; }
html.ke-rebrand-mode .ke-opening-notification-times { align-items: center; background: rgba(255,255,255,.045); border: 1px solid rgba(223,187,104,.35); border-radius: 18px; display: flex; justify-content: center; margin: 0 auto 24px; max-width: 410px; min-height: 74px; }
html.ke-rebrand-mode .ke-opening-notification-times strong { flex: 1; font: 600 19px 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-notification-times i { background: rgba(235,204,133,.3); height: 34px; width: 1px; }
html.ke-rebrand-mode .ke-opening-notification-main .ke-opening-primary,
html.ke-rebrand-mode .ke-opening-notification-main .ke-opening-secondary { display: block; margin: 10px auto 0; min-width: 230px; }

/* Screen 17: color-locked first Check-In. */
html.ke-rebrand-mode .ke-opening-screen.is-checkin { align-items: flex-start; }
html.ke-rebrand-mode .ke-opening-checkin-main { max-width: 960px; padding: 24px 0; }
html.ke-rebrand-mode .ke-opening-checkin-flame { filter: drop-shadow(0 0 30px rgba(239,192,68,.65)); height: 145px; margin: 0 auto 14px; transition: transform .6s cubic-bezier(.16,.85,.25,1); width: 110px; }
html.ke-rebrand-mode .ke-opening-checkin-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-checkin-main.has-selection .ke-opening-checkin-flame { animation: keOpeningCheckinJump .7s cubic-bezier(.2,.88,.24,1); transform: scale(1.32); }
@keyframes keOpeningCheckinJump { 0% { transform: translateY(20px) scale(.75); } 52% { transform: translateY(-28px) scale(1.38); } 100% { transform: translateY(0) scale(1.32); } }
html.ke-rebrand-mode .ke-opening-checkin-main h1 { font-size: clamp(38px,6.5vw,66px); line-height: 1; margin: 0 0 28px; }
html.ke-rebrand-mode .ke-opening-checkin-options { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 auto; max-width: 860px; }
html.ke-rebrand-mode .ke-opening-checkin-options button { border: 2px solid rgba(236,209,144,.72); border-radius: 24px; box-shadow: inset 0 1px rgba(255,255,255,.15),0 16px 32px rgba(0,0,0,.25); color: #fffaf2; cursor: pointer; min-height: 152px; padding: 22px; text-align: left; transition: transform .25s ease, box-shadow .25s ease; }
html.ke-rebrand-mode .ke-opening-checkin-options button.is-blazing { background: radial-gradient(circle at 25% 10%,#bb3441,#671723 67%); }
html.ke-rebrand-mode .ke-opening-checkin-options button.is-burning_bright { background: radial-gradient(circle at 25% 10%,#69a53e,#2b611b 67%); }
html.ke-rebrand-mode .ke-opening-checkin-options button.is-burning_low { background: radial-gradient(circle at 25% 10%,#7441a4,#32135e 67%); }
html.ke-rebrand-mode .ke-opening-checkin-options button.is-steady_glow { background: radial-gradient(circle at 25% 10%,#4f8ca0,#194e63 67%); }
html.ke-rebrand-mode .ke-opening-checkin-options button.is-selected { box-shadow: 0 0 0 5px rgba(241,214,144,.18),0 18px 42px rgba(0,0,0,.35); transform: translateY(-5px) scale(1.02); }
html.ke-rebrand-mode .ke-opening-checkin-options strong,
html.ke-rebrand-mode .ke-opening-checkin-options small { display: block; }
html.ke-rebrand-mode .ke-opening-checkin-options strong { font: 600 26px 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-checkin-options small { color: rgba(255,250,242,.75); font-size: 11px; line-height: 1.45; margin-top: 9px; }
html.ke-rebrand-mode .ke-opening-checkin-confirmation { margin: 25px auto 16px; max-width: 710px; }
html.ke-rebrand-mode .ke-opening-checkin-confirmation p { font: 500 19px/1.45 'Cormorant Garamond',serif; margin: 0 0 6px; }
html.ke-rebrand-mode .ke-opening-checkin-confirmation strong { color: #e8c97e; font-size: 11px; }
html.ke-rebrand-mode .ke-opening-checkin-main .ke-opening-primary { min-width: 210px; }

/* Exact-value recap. */
html.ke-rebrand-mode .ke-opening-screen.is-recap { background: #091d25; }
html.ke-rebrand-mode .ke-opening-recap-main { max-width: 760px; }
html.ke-rebrand-mode .ke-opening-recap-flame { filter: blur(.3px) drop-shadow(0 0 50px rgba(238,189,64,.6)); height: 300px; left: 50%; opacity: .19; position: absolute; top: 45%; transform: translate(-50%,-50%); width: 230px; z-index: -1; }
html.ke-rebrand-mode .ke-opening-recap-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-recap-main h1 { font-size: clamp(37px,6vw,63px); line-height: 1.03; margin: 0 auto 28px; }
html.ke-rebrand-mode .ke-opening-recap-main ul { display: grid; gap: 10px; list-style: none; margin: 0 auto 25px; max-width: 650px; padding: 0; text-align: left; }
html.ke-rebrand-mode .ke-opening-recap-main li { animation: keOpeningRecapLine .55s var(--ke-recap-delay) ease both; background: rgba(255,255,255,.045); border-left: 2px solid #d9b56d; border-radius: 0 12px 12px 0; padding: 11px 15px; }
@keyframes keOpeningRecapLine { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
html.ke-rebrand-mode .ke-opening-recap-main li small,
html.ke-rebrand-mode .ke-opening-recap-main li strong { display: block; }
html.ke-rebrand-mode .ke-opening-recap-main li small { color: #d8b66d; font-size: 8px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
html.ke-rebrand-mode .ke-opening-recap-main li strong { font: 600 17px 'Playfair Display',serif; margin-top: 3px; }
html.ke-rebrand-mode .ke-opening-recap-main > p { animation: keOpeningRecapLine .6s 2.45s ease both; color: rgba(255,250,242,.78) !important; font: 500 21px 'Cormorant Garamond',serif; margin: 0 auto 24px; }
html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-primary { animation: keOpeningRecapLine .6s 2.8s ease both; }

/* Five-day plan. */
html.ke-rebrand-mode .ke-opening-simple-header { left: max(18px,env(safe-area-inset-left)); position: absolute; top: max(18px,env(safe-area-inset-top)); z-index: 8; }
html.ke-rebrand-mode .ke-opening-screen.is-plan { align-items: flex-start; }
html.ke-rebrand-mode .ke-opening-plan-main { max-width: 820px; padding: 55px 0 10px; }
html.ke-rebrand-mode .ke-opening-plan-main h1 { font-size: clamp(40px,7vw,68px); line-height: 1; margin: 0 0 27px; }
html.ke-rebrand-mode .ke-opening-plan-main ol { display: grid; gap: 10px; list-style: none; margin: 0 auto 25px; max-width: 700px; padding: 0; text-align: left; }
html.ke-rebrand-mode .ke-opening-plan-main li { align-items: center; background: rgba(255,255,255,.045); border: 1px solid rgba(216,181,101,.28); border-radius: 16px; display: grid; gap: 14px; grid-template-columns: 66px 1fr; min-height: 66px; padding: 10px 15px; }
html.ke-rebrand-mode .ke-opening-plan-main li span { color: #e0bf74; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
html.ke-rebrand-mode .ke-opening-plan-main li strong { font: 600 17px/1.25 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-flame-compare { align-items: flex-end; display: flex; gap: 24px; justify-content: center; margin: 28px auto 18px; }
html.ke-rebrand-mode .ke-opening-flame-compare > div { align-items: center; display: flex; flex-direction: column; }
html.ke-rebrand-mode .ke-opening-flame-compare span { color: #d9b66d; font-size: 8px; font-weight: 900; letter-spacing: .8px; margin-bottom: 6px; text-transform: uppercase; }
html.ke-rebrand-mode .ke-opening-flame-compare i { display: block; filter: drop-shadow(0 0 15px rgba(236,187,61,.58)); height: 75px; width: 60px; }
html.ke-rebrand-mode .ke-opening-flame-compare > div:last-child i { filter: drop-shadow(0 0 30px rgba(236,187,61,.82)); height: 124px; width: 92px; }
html.ke-rebrand-mode .ke-opening-flame-compare svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-plan-main > p { color: rgba(255,250,242,.72) !important; font: 500 20px/1.4 'Cormorant Garamond',serif; margin: 0 auto 22px; max-width: 620px; }

/* Staging-only offer preview. */
html.ke-rebrand-mode .ke-opening-screen.is-offer { align-items: flex-start; }
html.ke-rebrand-mode .ke-opening-offer-main { max-width: 860px; padding: 45px 0 10px; }
html.ke-rebrand-mode .ke-opening-offer-flame { filter: drop-shadow(0 0 32px rgba(239,193,67,.68)); height: 130px; margin: 0 auto 8px; width: 100px; }
html.ke-rebrand-mode .ke-opening-offer-flame svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-offer-flame.is-surging { animation: keOpeningOfferSurge .65s cubic-bezier(.18,.86,.22,1); }
@keyframes keOpeningOfferSurge { 45% { filter: drop-shadow(0 0 65px rgba(249,211,100,.95)); transform: scale(1.35); } }
html.ke-rebrand-mode .ke-opening-offer-main h1 { font-size: clamp(39px,6.5vw,66px); line-height: 1; margin: 0 0 8px; }
html.ke-rebrand-mode .ke-opening-offer-lead { color: #e7ca84 !important; font: 500 20px 'Cormorant Garamond',serif; margin: 0 0 18px; }
html.ke-rebrand-mode .ke-opening-billing-toggle { background: rgba(255,255,255,.06); border: 1px solid rgba(222,185,102,.32); border-radius: 999px; display: grid; gap: 4px; grid-template-columns: repeat(2,1fr); margin: 0 auto 18px; max-width: 330px; padding: 4px; }
html.ke-rebrand-mode .ke-opening-billing-toggle button { background: transparent; border: 0; border-radius: 999px; color: rgba(255,250,242,.58); cursor: pointer; font: 800 10px 'DM Sans',sans-serif; min-height: 42px; }
html.ke-rebrand-mode .ke-opening-billing-toggle button[aria-pressed="true"] { background: #e2bf72; color: #11252e; }
html.ke-rebrand-mode .ke-opening-tier-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 auto 16px; max-width: 780px; }
html.ke-rebrand-mode .ke-opening-tier-grid > button { background: rgba(255,255,255,.045); border: 1px solid rgba(220,184,100,.4); border-radius: 22px; color: #fffaf2; cursor: pointer; min-height: 190px; padding: 21px; position: relative; text-align: left; }
html.ke-rebrand-mode .ke-opening-tier-grid > button[aria-pressed="true"] { background: linear-gradient(145deg,rgba(109,41,66,.86),rgba(53,20,35,.92)); border: 2px solid #e8c97f; box-shadow: 0 0 0 5px rgba(229,194,111,.09),0 18px 38px rgba(0,0,0,.3); }
html.ke-rebrand-mode .ke-opening-tier-grid strong,
html.ke-rebrand-mode .ke-opening-tier-grid b,
html.ke-rebrand-mode .ke-opening-tier-grid small { display: block; }
html.ke-rebrand-mode .ke-opening-tier-badge { color: #e8c87b; display: block; font-size: 8px; font-weight: 900; letter-spacing: .8px; min-height: 18px; }
html.ke-rebrand-mode .ke-opening-tier-grid strong { font: 600 29px 'Playfair Display',serif; margin: 6px 0 12px; }
html.ke-rebrand-mode .ke-opening-tier-grid b { color: #f0d18a; font-size: 17px; }
html.ke-rebrand-mode .ke-opening-tier-grid small { color: rgba(255,250,242,.62); font-size: 10px; line-height: 1.45; margin-top: 12px; }
html.ke-rebrand-mode .ke-opening-offer-detail { color: rgba(255,250,242,.65) !important; font: 500 17px/1.4 'Cormorant Garamond',serif; margin: 0 auto 8px; max-width: 680px; }
html.ke-rebrand-mode .ke-opening-preview-note { color: rgba(255,250,242,.52) !important; font-size: 9px; line-height: 1.45; margin: 0 auto 16px; max-width: 640px; }
html.ke-rebrand-mode .ke-opening-preview-note strong { color: #bde0d9; }

/* Screens 21–22: automatic Day One celebration. */
html.ke-rebrand-mode .ke-opening-screen.is-day-one { background: radial-gradient(circle at 50% 45%,#704029 0,#4c2330 20%,#102832 57%,#071820 100%); overflow: hidden; }
html.ke-rebrand-mode .ke-opening-day-one-main { align-items: center; display: flex; flex-direction: column; position: relative; text-align: center; z-index: 2; }
html.ke-rebrand-mode .ke-opening-day-rays { animation: keOpeningDayRays 18s linear infinite; background: repeating-conic-gradient(from 0deg,rgba(244,211,124,.13) 0 5deg,transparent 5deg 18deg); border-radius: 50%; height: min(105vw,820px); left: 50%; position: absolute; top: 44%; transform: translate(-50%,-50%); width: min(105vw,820px); z-index: -1; }
@keyframes keOpeningDayRays { to { transform: translate(-50%,-50%) rotate(360deg); } }
html.ke-rebrand-mode .ke-opening-day-flame { filter: drop-shadow(0 0 70px rgba(255,209,90,.94)); height: min(45vh,390px); margin-bottom: 16px; position: relative; width: min(34vh,300px); }
html.ke-rebrand-mode .ke-opening-day-flame svg { animation: keOpeningDayFlame 1.35s ease-in-out infinite; height: 100%; width: 100%; }
@keyframes keOpeningDayFlame { 0%,100% { transform:scale(.95) rotate(-.5deg); } 50% { transform:scale(1.05) rotate(.7deg); } }
html.ke-rebrand-mode .ke-opening-day-flame i { animation: keOpeningEmberRise 1.7s ease-out infinite; background: #ffd66d; border-radius: 50%; bottom: 18%; box-shadow: 0 0 9px #ffbd40; height: 5px; left: 46%; position: absolute; width: 5px; }
html.ke-rebrand-mode .ke-opening-day-flame i:nth-of-type(2) { animation-delay:.3s; left:28%; }
html.ke-rebrand-mode .ke-opening-day-flame i:nth-of-type(3) { animation-delay:.6s; left:64%; }
html.ke-rebrand-mode .ke-opening-day-flame i:nth-of-type(4) { animation-delay:.9s; left:37%; }
html.ke-rebrand-mode .ke-opening-day-flame i:nth-of-type(5) { animation-delay:1.2s; left:58%; }
@keyframes keOpeningEmberRise { to { opacity:0; transform:translateY(-230px) translateX(25px) scale(.3); } }
html.ke-rebrand-mode .ke-opening-day-one-main h1 { font-size: clamp(45px,8vw,82px); line-height: 1; margin: 0; }
html.ke-rebrand-mode .ke-opening-day-one-main > p { color: rgba(255,250,242,.7) !important; font-size: 10px; margin: 18px 0 0; min-height: 18px; }
html.ke-rebrand-mode .ke-opening-day-one-main .ke-opening-primary { margin-top: 16px; }

/* Screen 23: rises over Home. */
html.ke-rebrand-mode .ke-opening-home-prompt {
  display: none;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 100001;
}

html.ke-rebrand-mode .ke-opening-home-prompt.show { display: block; }
html.ke-rebrand-mode .ke-opening-home-backdrop { background: rgba(4,14,19,.66); inset: 0; position: absolute; }
html.ke-rebrand-mode .ke-opening-home-backdrop > span { bottom: 12%; filter: blur(2px) drop-shadow(0 0 70px rgba(239,191,65,.7)); height: 300px; left: 50%; opacity: .55; position: absolute; transform: translateX(-50%); width: 230px; }
html.ke-rebrand-mode .ke-opening-home-backdrop svg { height: 100%; width: 100%; }
html.ke-rebrand-mode .ke-opening-home-sheet { animation: keOpeningSheetRise .65s cubic-bezier(.18,.78,.2,1) both; background: linear-gradient(155deg,#fffdf8,#f3e5cc); border: 1px solid #e0ba65; border-radius: 30px 30px 0 0; bottom: 0; box-shadow: 0 -20px 70px rgba(0,0,0,.38); color: #142830; left: 50%; max-height: min(88vh,720px); max-height: min(88dvh,720px); max-width: 760px; overflow-y: auto; overscroll-behavior: contain; padding: 30px max(22px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); position: absolute; text-align: center; transform: translateX(-50%); width: min(100%,760px); }
@keyframes keOpeningSheetRise { from { opacity:0; transform:translate(-50%,100%); } to { opacity:1; transform:translate(-50%,0); } }
html.ke-rebrand-mode .ke-opening-home-sheet > span { color: #7b3a50; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
html.ke-rebrand-mode .ke-opening-home-sheet h2 { color: #142830; font: 600 clamp(34px,6vw,54px)/1.05 'Playfair Display',serif; margin: 9px 0 3px; }
html.ke-rebrand-mode .ke-opening-home-sheet > p { color: #7b3a50; font: 600 25px 'Cormorant Garamond',serif; margin: 0 0 22px; }
html.ke-rebrand-mode .ke-opening-home-sheet > div { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
html.ke-rebrand-mode .ke-opening-home-sheet button { background: #142830; border: 1px solid #c89f4d; border-radius: 999px; color: #fffaf2; cursor: pointer; font: 800 11px 'DM Sans',sans-serif; min-height: 50px; padding: 0 16px; }
html.ke-rebrand-mode .ke-opening-home-sheet button:last-child { background: transparent; border-color: rgba(20,40,48,.25); color: #6d2942; }

/* Small, capability-gated staging replay control. It lives in #scr-dashboard,
   so it disappears with the Dashboard and stays tucked above the bottom rail. */
html.ke-rebrand-mode #ke-opening-flow-replay[hidden] { display: none !important; }
html.ke-rebrand-mode #ke-opening-flow-replay {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(8,25,32,.88);
  border: 1px solid rgba(218,183,104,.64);
  border-radius: 999px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  color: #ecd18b;
  cursor: pointer;
  display: inline-flex;
  font: 800 19px/1 'DM Sans',sans-serif !important;
  height: 38px;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  position: fixed;
  right: max(12px,env(safe-area-inset-right));
  text-transform: uppercase;
  width: 38px;
  z-index: 181;
}

html.ke-rebrand-mode #ke-opening-flow-replay:disabled { cursor: progress; opacity: .62; }

/* Capability-gated tester reset rendered by every opening screen. */
html.ke-rebrand-mode .ke-opening-screen-restart,
html.ke-rebrand-mode .ke-opening-screen-skip-intro {
  align-items: center;
  backdrop-filter: blur(13px);
  background: rgba(8,25,32,.9);
  border: 1px solid rgba(218,183,104,.68);
  border-radius: 999px;
  bottom: max(14px,env(safe-area-inset-bottom));
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  color: #ecd18b;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  position: fixed;
  width: 38px;
  z-index: 30;
}

html.ke-rebrand-mode .ke-opening-screen-restart { right: max(12px,env(safe-area-inset-right)); }
html.ke-rebrand-mode .ke-opening-screen-skip-intro { left: max(12px,env(safe-area-inset-left)); }
html.ke-rebrand-mode .ke-opening-screen-restart > span { font-size: 17px; }
html.ke-rebrand-mode .ke-opening-screen-skip-intro > span { font-size: 18px; transform: translateX(1px); }
html.ke-rebrand-mode .ke-opening-screen-restart:disabled,
html.ke-rebrand-mode .ke-opening-screen-skip-intro:disabled { cursor: progress; opacity: .58; }
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-screen-restart,
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-screen-skip-intro { bottom: max(46px,calc(env(safe-area-inset-bottom) + 30px)); }
html.ke-rebrand-mode .ke-opening-screen-restart-status {
  bottom: max(58px,calc(env(safe-area-inset-bottom) + 44px));
  color: #ffd2d5;
  font: 700 10px/1.35 'DM Sans',sans-serif;
  max-width: min(250px,70vw);
  position: fixed;
  right: max(14px,env(safe-area-inset-right));
  text-align: right;
  z-index: 30;
}

html.ke-rebrand-mode .ke-opening-screen-skip-status {
  bottom: max(58px,calc(env(safe-area-inset-bottom) + 44px));
  color: #ffd2d5;
  font: 700 10px/1.35 'DM Sans',sans-serif;
  left: max(14px,env(safe-area-inset-left));
  max-width: min(250px,70vw);
  position: fixed;
  text-align: left;
  z-index: 30;
}

html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-screen-restart-status { bottom: max(90px,calc(env(safe-area-inset-bottom) + 74px)); }
html.ke-rebrand-mode .ke-opening-screen.is-story .ke-opening-screen-skip-status { bottom: max(90px,calc(env(safe-area-inset-bottom) + 74px)); }

@media (max-width: 760px) {
  html.ke-rebrand-mode .ke-opening-options.is-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html.ke-rebrand-mode .ke-opening-checkin-options { grid-template-columns: 1fr; }
  html.ke-rebrand-mode .ke-opening-checkin-options button { min-height: 120px; }
  html.ke-rebrand-mode .ke-opening-tier-grid { grid-template-columns: 1fr; }
  html.ke-rebrand-mode .ke-opening-tier-grid > button { min-height: 160px; }
}

@media (max-width: 560px) {
  html.ke-rebrand-mode .ke-opening-screen { padding-inline: max(17px,env(safe-area-inset-left)); }
  html.ke-rebrand-mode .ke-opening-question-header { grid-template-columns: 46px 1fr 46px; min-height: 142px; padding-inline: 12px; }
  html.ke-rebrand-mode .ke-opening-question-progress { height: 118px; }
  html.ke-rebrand-mode .ke-opening-progress-flame { max-height: 92px; }
  html.ke-rebrand-mode .ke-opening-question-main,
  html.ke-rebrand-mode .ke-opening-reminders-main { padding: 18px 17px 22px; }
  html.ke-rebrand-mode .ke-opening-question-main h1,
  html.ke-rebrand-mode .ke-opening-reminders-main h1 { font-size: 36px; }
  html.ke-rebrand-mode .ke-opening-options { grid-template-columns: 1fr; margin-top: 24px; }
  html.ke-rebrand-mode .ke-opening-options.is-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html.ke-rebrand-mode .ke-opening-options button { min-height: 62px; padding: 12px; }
  html.ke-rebrand-mode .ke-opening-options button strong { font-size: 13px; }
  html.ke-rebrand-mode .ke-opening-time-grid { grid-template-columns: 1fr; margin-top: 28px; }
  html.ke-rebrand-mode .ke-opening-time-grid label { min-height: 88px; }
  html.ke-rebrand-mode .ke-opening-recap-main h1 { font-size: 38px; }
  html.ke-rebrand-mode .ke-opening-plan-main { padding-top: 64px; }
  html.ke-rebrand-mode .ke-opening-plan-main li { grid-template-columns: 52px 1fr; }
  html.ke-rebrand-mode .ke-opening-plan-main li strong { font-size: 15px; }
  html.ke-rebrand-mode .ke-opening-home-sheet > div { grid-template-columns: 1fr; }
  html.ke-rebrand-mode #ke-opening-flow-replay { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode .ke-opening-story-flame-media { display: none !important; }
  html.ke-rebrand-mode .ke-opening-story-flame-fallback { display: block !important; }
  html.ke-rebrand-mode .ke-opening-ignition-copy p { animation-delay: 0s !important; }
  html.ke-rebrand-mode .ke-opening-ember-core,
  html.ke-rebrand-mode .ke-opening-story-progress i,
  html.ke-rebrand-mode .ke-opening-day-rays,
  html.ke-rebrand-mode .ke-opening-day-flame svg,
  html.ke-rebrand-mode .ke-opening-day-flame i,
  html.ke-rebrand-mode .ke-opening-checkin-main.has-selection .ke-opening-checkin-flame,
  html.ke-rebrand-mode .ke-opening-recap-main li,
  html.ke-rebrand-mode .ke-opening-recap-main > p,
  html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-primary,
  html.ke-rebrand-mode .ke-opening-home-sheet,
  html.ke-rebrand-mode .ke-opening-screen.is-ignition .ke-opening-screen-restart { animation: none !important; }
  html.ke-rebrand-mode .ke-opening-screen.is-ignition .ke-opening-screen-restart { opacity: 1; }
  html.ke-rebrand-mode .ke-opening-ignition-release::before,
  html.ke-rebrand-mode .ke-opening-ignition-release img,
  html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ember-core,
  html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ember-ring { animation-duration: .01ms !important; }
  html.ke-rebrand-mode .ke-opening-ignition-release,
  html.ke-rebrand-mode .ke-opening-story-flame,
  html.ke-rebrand-mode .ke-opening-story-aura,
  html.ke-rebrand-mode .ke-opening-meet-aura,
  html.ke-rebrand-mode .ke-opening-meet-flame,
  html.ke-rebrand-mode .ke-opening-progress-flame { transition-duration: .01ms !important; }

  html.ke-rebrand-mode .ke-opening-cinematic-brand,
  html.ke-rebrand-mode .ke-opening-cinematic-lockup,
  html.ke-rebrand-mode .ke-opening-cinematic-brand::before,
  html.ke-rebrand-mode .ke-opening-cinematic-brand::after,
  html.ke-rebrand-mode .ke-opening-cinematic-flare,
  html.ke-rebrand-mode .ke-opening-cinematic-word,
  html.ke-rebrand-mode .ke-opening-cinematic-rule {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.ke-rebrand-mode .ke-opening-cinematic-brand::before,
  html.ke-rebrand-mode .ke-opening-cinematic-brand::after,
  html.ke-rebrand-mode .ke-opening-cinematic-flare { display: none !important; }
}

/* 2026-08-31 unified Flame geometry --------------------------------------
   A mathematically regular point-top hexagon has a width/height ratio of
   sqrt(3)/2. Keeping that ratio everywhere makes all six sides equal. */
html.ke-rebrand-mode #ke-opening-flow {
  --ke-opening-hex-ratio: .8660254;
  --ke-opening-shared-hex-width: min(300px,calc(100vw - 40px));
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-hex {
  aspect-ratio: var(--ke-opening-hex-ratio) !important;
  width: var(--ke-opening-shared-hex-width) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminders-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-notification-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-hex {
  max-width: none !important;
  width: var(--ke-opening-shared-hex-width) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  --ke-opening-core-size: var(--ke-opening-shared-hex-width);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex {
  aspect-ratio: var(--ke-opening-hex-ratio) !important;
  width: var(--ke-opening-core-size) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] {
  height: min(700px,calc(100dvh - 132px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: rgba(215,181,109,.62) rgba(8,23,30,.28);
  scrollbar-width: thin;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"]::after {
  content: "";
  display: block;
  height: var(--ke-opening-content-height);
  pointer-events: none;
  width: 1px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] .ke-opening-reminder-circle {
  padding: clamp(14px,4vw,20px) !important;
  width: var(--ke-opening-choice-size) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] .ke-opening-bloom-answer > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] .ke-opening-reminder-circle label > strong {
  font-size: clamp(15px,4.2vw,19px) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-progress-flame .ke-opening-name-flame-picture,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-progress-flame .ke-opening-name-flame-media,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-flame .ke-opening-name-flame-picture,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-flame .ke-opening-name-flame-media,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-offer-flame .ke-opening-name-flame-picture,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-offer-flame .ke-opening-name-flame-media {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-hex h1 {
  font-size: clamp(34px,8.5vw,48px) !important;
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-meet-hex :is(h1,.ke-opening-meet-flame,.ke-opening-meet-name) {
  animation: keOpeningMeetFloatIn .78s cubic-bezier(.16,1,.3,1) both;
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-meet-hex .ke-opening-meet-flame { animation-delay: .18s; }
html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-meet-hex .ke-opening-meet-name { animation-delay: .34s; }

@keyframes keOpeningMeetFloatIn {
  from { filter: blur(5px); opacity: 0; transform: translateY(22px) scale(.96); }
  to { filter: blur(0); opacity: 1; transform: translateY(0) scale(1); }
}

/* First-entry handoff: hex heading, full-width circle, internally scrolling
   paper. Long writing never stretches the circle. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main {
  max-width: 760px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-unit {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-hex {
  flex: 0 0 auto;
  margin: 0 auto;
  width: var(--ke-opening-shared-hex-width) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-hex .ke-opening-bloom-hex-inner {
  padding: 18% 13% !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-hex span {
  color: #f0d38d;
  font: 900 9px/1.2 'DM Sans',sans-serif;
  letter-spacing: .13em;
  margin-bottom: 10px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-hex :is(h1,h2) {
  color: #fffaf2 !important;
  font: 600 clamp(28px,7vw,42px)/1.02 'Playfair Display',serif;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle {
  align-items: center;
  aspect-ratio: 1;
  background: conic-gradient(from 215deg,#82591f,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d);
  border: 0;
  border-radius: 50% !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.38),0 0 35px rgba(215,181,109,.2);
  display: flex;
  margin: 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 5px !important;
  width: min(100%,720px) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-paper {
  background: #fffaf0;
  border-radius: 50%;
  box-sizing: border-box;
  color: #172830;
  height: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: clamp(66px,12vw,112px) clamp(48px,11vw,104px);
  scrollbar-color: rgba(104,45,67,.5) transparent;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-paper :is(p,strong,small) {
  color: #172830 !important;
  font: 500 clamp(18px,3vw,23px)/1.55 'Cormorant Garamond',serif;
  text-align: left;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-writing-flame {
  float: left;
  height: 62px;
  margin: 0 14px 7px 0;
  width: 48px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-writing-flame :is(picture,img) {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-writing-flame.is-keeper {
  animation: keOpeningWritingTrail 2.2s ease-in-out infinite;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-writing-flame.is-karamo {
  height: 74px;
  width: 58px;
}

@keyframes keOpeningWritingTrail {
  0%,100% { filter: drop-shadow(0 0 7px rgba(215,181,109,.35)); transform: translateY(2px) rotate(-2deg); }
  50% { filter: drop-shadow(0 0 15px rgba(215,181,109,.65)); transform: translateY(-3px) rotate(2deg); }
}

@media (max-width: 560px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle {
    width: calc(100vw - 26px) !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-paper {
    padding: clamp(60px,15vw,76px) clamp(46px,14vw,64px) clamp(68px,17vw,86px);
    scroll-padding-block: clamp(60px,15vw,76px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-meet-hex :is(h1,.ke-opening-meet-flame,.ke-opening-meet-name),
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-writing-flame { animation: none !important; }
}

/* Opening Bloom language: one canonical gold hex holds each prompt or native
   input, then the available answers grow downward as connected jewel circles. */
html.ke-rebrand-mode .ke-opening-flow {
  --ke-opening-garnet-deep: #3a0610;
  --ke-opening-garnet: #740e1c;
  --ke-opening-garnet-light: #a93443;
  --ke-opening-peridot-deep: #163e09;
  --ke-opening-peridot: #297b0d;
  --ke-opening-peridot-light: #6ca746;
  --ke-opening-amethyst-deep: #22073f;
  --ke-opening-amethyst: #460f75;
  --ke-opening-amethyst-light: #7650a5;
  --ke-opening-azure-deep: #073344;
  --ke-opening-azure: #135f8a;
  --ke-opening-azure-light: #5791a5;
}

html.ke-rebrand-mode .ke-opening-flow .ke-opening-screen {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

html.ke-rebrand-mode .ke-opening-bloom-stage {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 940px;
  position: relative;
  width: 100%;
}

html.ke-rebrand-mode .ke-opening-screen [tabindex="-1"]:focus { outline: 0; }

html.ke-rebrand-mode .ke-opening-bloom-hex {
  align-items: center;
  animation: keOpeningHexBloom .72s cubic-bezier(.16,1,.3,1) both;
  aspect-ratio: 1 / 1;
  display: flex;
  filter: drop-shadow(0 5px 0 rgba(99,64,18,.78)) drop-shadow(0 18px 32px rgba(0,0,0,.46)) drop-shadow(0 0 28px rgba(215,181,109,.38));
  isolation: isolate;
  justify-content: center;
  max-width: min(calc(100vw - 28px),calc(100dvh - 100px));
  position: relative;
  width: clamp(310px,58vw,500px);
  z-index: 2;
}

html.ke-rebrand-mode .ke-opening-bloom-hex::before,
html.ke-rebrand-mode .ke-opening-bloom-hex-inner::before {
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

html.ke-rebrand-mode .ke-opening-bloom-hex::before {
  background: conic-gradient(from 30deg,#ffe9a0 0 16.666%,#c28c35 16.666% 33.333%,#79501a 33.333% 50%,#9f7127 50% 66.666%,#f0ce78 66.666% 83.333%,#fff0ad 83.333% 100%);
  z-index: -2;
}

html.ke-rebrand-mode .ke-opening-bloom-hex-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(100% - 8px);
  justify-content: center;
  padding: clamp(42px,8%,64px) clamp(52px,11%,82px);
  position: relative;
  text-align: center;
  width: calc(100% - 8px);
  z-index: 1;
}

html.ke-rebrand-mode .ke-opening-bloom-hex-inner::before {
  background:
    radial-gradient(circle at 36% 23%,rgba(255,255,255,.1),transparent 27%),
    radial-gradient(circle at 50% 47%,rgba(215,181,109,.16),transparent 43%),
    linear-gradient(155deg,#29424d 0%,#10242d 58%,#08161b 100%);
  z-index: -1;
}

@keyframes keOpeningHexBloom {
  from { opacity: 0; transform: translateY(-26px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The existing Kē Sparks stay invisible until the Keeper holds the unframed
   ember, then converge from eight directions and release back into the wash. */
html.ke-rebrand-mode .ke-opening-ignition-sparks {
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute !important;
  z-index: 1 !important;
}

html.ke-rebrand-mode .ke-opening-ignition-spark {
  height: 28px;
  left: calc(50% - 14px);
  opacity: 0;
  pointer-events: none;
  position: absolute !important;
  top: calc(50% - 14px);
  transform-origin: center;
  width: 28px;
}

html.ke-rebrand-mode .ke-opening-ignition-spark::before {
  background: linear-gradient(90deg,transparent,rgba(255,108,36,.24),rgba(255,223,117,.86));
  border-radius: 999px;
  content: '';
  height: 3px;
  position: absolute;
  right: 17px;
  top: 13px;
  width: 42px;
}

html.ke-rebrand-mode .ke-opening-ignition-spark .ke-spark-comet-mark {
  --ke-spark-comet-height: 28px;
  --ke-spark-comet-width: 28px;
  display: block;
  position: relative;
  z-index: 2;
}

html.ke-rebrand-mode .ke-opening-flow.is-holding-ember .ke-opening-ignition-spark {
  animation: keOpeningSparkConverge 1.18s var(--ke-opening-spark-delay) cubic-bezier(.24,.02,.14,1) infinite;
}

html.ke-rebrand-mode .ke-opening-flow.is-igniting .ke-opening-ignition-spark {
  animation: keOpeningSparkRelease .72s calc(var(--ke-opening-spark-index) * 22ms) cubic-bezier(.12,.7,.18,1) both;
}

@keyframes keOpeningSparkConverge {
  0% { filter: brightness(.78); opacity: 0; transform: translate(var(--ke-opening-spark-x),var(--ke-opening-spark-y)) rotate(var(--ke-opening-spark-rotation)) scale(.4); }
  12% { opacity: .9; }
  72% { filter: brightness(1.12); opacity: 1; }
  96% { filter: brightness(1.45); opacity: 1; transform: translate(0,0) rotate(var(--ke-opening-spark-rotation)) scale(.96); }
  100% { opacity: 0; transform: translate(0,0) rotate(var(--ke-opening-spark-rotation)) scale(.12); }
}

@keyframes keOpeningSparkRelease {
  0% { filter: brightness(1.8); opacity: 1; transform: translate(0,0) rotate(var(--ke-opening-spark-rotation)) scale(.32); }
  62% { opacity: .95; }
  100% { filter: brightness(1.12); opacity: 0; transform: translate(var(--ke-opening-spark-x),var(--ke-opening-spark-y)) rotate(var(--ke-opening-spark-rotation)) scale(.72); }
}

html.ke-rebrand-mode .ke-opening-ignition-field .ke-opening-ember { z-index: 4; }

/* Portrait phones read the ignition as one deliberate vertical sequence:
   message hex, unframed ember, then the hold instruction. The desktop and
   short-landscape composition above remains unchanged. */
@media (max-width: 760px) and (orientation: portrait) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition {
    --ke-ignition-mobile-top: max(clamp(38px,7dvh,74px),calc(env(safe-area-inset-top) + 24px));
    --ke-ignition-mobile-hex-width: min(300px,calc(100vw - 48px));
    --ke-ignition-mobile-hex-height: min(346.42px,calc((100vw - 48px) * 1.1547));
    --ke-ignition-mobile-ember-radius: 44px;
    --ke-ignition-mobile-ember-size: 88px;
    align-content: start;
    display: grid;
    gap: clamp(8px,1.8dvh,16px);
    grid-template-areas:
      "message"
      "ember"
      "instruction";
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto var(--ke-ignition-mobile-ember-size) auto;
    justify-items: center;
    padding: var(--ke-ignition-mobile-top) 12px max(24px,env(safe-area-inset-bottom));
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-copy {
    display: contents;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-hex {
    grid-area: message;
    width: var(--ke-ignition-mobile-hex-width) !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-field {
    grid-area: ember;
    height: var(--ke-ignition-mobile-ember-size);
    left: auto;
    position: relative;
    top: auto;
    transform: none;
    width: var(--ke-ignition-mobile-ember-size);
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ember {
    height: var(--ke-ignition-mobile-ember-size);
    width: var(--ke-ignition-mobile-ember-size);
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-instruction {
    grid-area: instruction;
    inset: auto;
    margin: 0 auto;
    max-width: min(22ch,calc(100vw - 48px));
    position: relative;
    width: auto;
  }

  html.ke-rebrand-mode #ke-opening-flow.is-igniting .ke-opening-screen.is-ignition :is(.ke-opening-ignition-hex,.ke-opening-ignition-instruction) {
    opacity: 0;
    transform: translateY(-18px);
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-release::before,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition .ke-opening-ignition-release img {
    top: calc(var(--ke-ignition-mobile-top) + var(--ke-ignition-mobile-hex-height) + clamp(8px,1.8dvh,16px) + var(--ke-ignition-mobile-ember-radius));
  }
}

@media (max-width: 760px) and (orientation: portrait) and (max-height: 650px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-ignition {
    --ke-ignition-mobile-top: max(24px,calc(env(safe-area-inset-top) + 16px));
    --ke-ignition-mobile-hex-width: min(260px,calc(100vw - 48px));
    --ke-ignition-mobile-hex-height: min(300.22px,calc((100vw - 48px) * 1.1547));
    --ke-ignition-mobile-ember-radius: 39px;
    --ke-ignition-mobile-ember-size: 78px;
  }
}

/* Form controls stay native and focusable; only their visual chassis is clipped. */
html.ke-rebrand-mode .ke-opening-name-main { max-width: 680px; }
html.ke-rebrand-mode .ke-opening-name-hex { width: clamp(330px,66vw,560px); }
html.ke-rebrand-mode .ke-opening-name-hex .ke-opening-bloom-hex-inner { padding: 48px 72px; }
html.ke-rebrand-mode .ke-opening-name-hex .ke-opening-name-flame { height: min(var(--ke-name-flame-height),118px); margin-bottom: 12px; width: 78px; }
html.ke-rebrand-mode .ke-opening-name-main .ke-opening-name-hex h1 { font-size: clamp(28px,4.4vw,43px); line-height: 1.04; margin: 0 auto 18px; }
html.ke-rebrand-mode .ke-opening-name-main > .ke-opening-primary,
html.ke-rebrand-mode .ke-opening-reminders-main > .ke-opening-primary { margin-top: 24px; }

html.ke-rebrand-mode .ke-opening-question-main,
html.ke-rebrand-mode .ke-opening-reminders-main { max-width: 980px; }
html.ke-rebrand-mode .ke-opening-question-hex { width: clamp(320px,54vw,500px); }
html.ke-rebrand-mode .ke-opening-question-hex .ke-opening-bloom-hex-inner { padding: 54px 68px; }
html.ke-rebrand-mode .ke-opening-question-main .ke-opening-question-hex h1 { font-size: clamp(29px,4.4vw,44px); line-height: 1.02; margin: 0; max-width: 410px; }
html.ke-rebrand-mode .ke-opening-question-main .ke-opening-question-hex p { color: rgba(255,250,242,.68) !important; font: 600 16px 'Cormorant Garamond',serif; margin: 13px 0 0; }

html.ke-rebrand-mode .ke-opening-bloom-answers,
html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers {
  background: none;
  display: grid;
  gap: 24px 22px;
  grid-template-columns: repeat(2,minmax(0,176px));
  justify-content: center;
  margin: 0 auto;
  max-width: 430px;
  padding: 34px 0 4px;
  position: relative;
  width: 100%;
  z-index: 1;
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-meet-bloom {
  align-items: center;
  animation: keOpeningAnswerBloomDown .68s calc(120ms + var(--ke-opening-answer-index) * 72ms) cubic-bezier(.16,1,.3,1) both;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(240,213,151,.82);
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255,255,255,.2),0 14px 28px rgba(0,0,0,.34),0 0 0 5px rgba(215,181,109,.06);
  color: #fffaf2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-height: 0;
  padding: 24px;
  position: relative;
  text-align: center;
  transition: box-shadow .24s ease,filter .24s ease,transform .24s ease;
  width: 176px;
  z-index: 2;
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer::before {
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.24),transparent 27%),
    radial-gradient(circle at 50% 44%,var(--ke-opening-tone-light),var(--ke-opening-tone) 50%,var(--ke-opening-tone-deep) 100%);
  border-radius: 50%;
  content: '';
  inset: 5px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-garnet,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-blazing { --ke-opening-tone-deep: var(--ke-opening-garnet-deep); --ke-opening-tone: var(--ke-opening-garnet); --ke-opening-tone-light: var(--ke-opening-garnet-light); }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-peridot,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-burning_bright { --ke-opening-tone-deep: var(--ke-opening-peridot-deep); --ke-opening-tone: var(--ke-opening-peridot); --ke-opening-tone-light: var(--ke-opening-peridot-light); }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-amethyst,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-burning_low { --ke-opening-tone-deep: var(--ke-opening-amethyst-deep); --ke-opening-tone: var(--ke-opening-amethyst); --ke-opening-tone-light: var(--ke-opening-amethyst-light); }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-azure,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-steady_glow { --ke-opening-tone-deep: var(--ke-opening-azure-deep); --ke-opening-tone: var(--ke-opening-azure); --ke-opening-tone-light: var(--ke-opening-azure-light); }
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer > strong { font: 600 clamp(13px,1.8vw,17px)/1.23 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-selected { border-color: #fffbdc; box-shadow: 0 0 0 5px rgba(255,251,220,.96),0 0 42px rgba(255,231,159,.72),0 18px 36px rgba(0,0,0,.38); filter: brightness(1.18); transform: translateY(-4px) scale(1.035); }
html.ke-rebrand-mode .ke-opening-bloom-answer:disabled { cursor: progress; opacity: .72; }

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }

@keyframes keOpeningAnswerBloomDown {
  from { opacity: 0; transform: translateY(-86px) scale(.2); }
  58% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reminder inputs and permission choices use the same prompt/input hex. */
html.ke-rebrand-mode .ke-opening-reminders-hex { width: clamp(350px,70vw,660px); }
html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-bloom-hex-inner { padding: 58px 88px; }
html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-reminders-hex h1 { font-size: clamp(30px,4.4vw,46px); line-height: 1.02; margin: 0 auto 10px; }
html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-reminders-hex p { margin-bottom: 8px; }
html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-time-grid { margin: 16px auto 10px; width: 100%; }
html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-time-grid label { min-height: 88px; padding: 12px; }

html.ke-rebrand-mode .ke-opening-notification-main { max-width: 760px; }
html.ke-rebrand-mode .ke-opening-notification-hex { width: clamp(340px,66vw,580px); }
html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-bloom-hex-inner { padding: 48px 78px; }
html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-notification-flame { height: 88px; margin: 0 auto 9px; width: 68px; }
html.ke-rebrand-mode .ke-opening-notification-hex h1 { font-size: clamp(29px,4.5vw,44px); margin-bottom: 10px; }
html.ke-rebrand-mode .ke-opening-notification-hex p { font-size: 16px; margin-bottom: 10px; }
html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-notification-times { margin-bottom: 5px; min-height: 54px; width: 100%; }
html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer { border-radius: 50%; color: #fffaf2; font: 800 13px/1.2 'DM Sans',sans-serif; margin: 0; min-width: 0; padding: 24px; }

/* First Check-In is the same real hex and four equal emotion blooms. The tap
   saves automatically, so there is no off-screen dead end after selection. */
html.ke-rebrand-mode .ke-opening-screen.is-checkin { align-items: flex-start; }
html.ke-rebrand-mode .ke-opening-checkin-main { max-width: 760px; padding: 20px 0 max(34px,env(safe-area-inset-bottom)); }
html.ke-rebrand-mode .ke-opening-checkin-hex { width: clamp(330px,58vw,510px); }
html.ke-rebrand-mode .ke-opening-checkin-hex .ke-opening-bloom-hex-inner { padding: 48px 70px; }
html.ke-rebrand-mode .ke-opening-checkin-hex .ke-opening-checkin-flame { height: 105px; margin: 0 auto 8px; width: 82px; }
html.ke-rebrand-mode .ke-opening-checkin-main .ke-opening-checkin-hex h1 { font-size: clamp(31px,5vw,50px); margin: 0; }
html.ke-rebrand-mode .ke-opening-checkin-main .ke-opening-checkin-hex > span { margin-bottom: 8px; }
html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers { max-width: 450px; }
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer { min-height: 0; padding: 24px; text-align: center; width: 184px; }
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer strong { font-size: clamp(20px,2.5vw,27px); line-height: 1.05; }
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer small { font-size: 10px; line-height: 1.35; margin-top: 3px; }
html.ke-rebrand-mode .ke-opening-checkin-confirmation[hidden],
html.ke-rebrand-mode [data-opening-checkin-next][hidden] { display: none !important; }
html.ke-rebrand-mode .ke-opening-checkin-confirmation small { color: #bde0d9; display: block; font-size: 10px; font-weight: 800; margin-top: 8px; }

@media (max-width: 560px) {
  html.ke-rebrand-mode .ke-opening-screen { padding-left: max(14px,env(safe-area-inset-left)); padding-right: max(14px,env(safe-area-inset-right)); }
  html.ke-rebrand-mode .ke-opening-question-main,
  html.ke-rebrand-mode .ke-opening-reminders-main { padding: 12px max(14px,env(safe-area-inset-right)) 22px max(14px,env(safe-area-inset-left)); }
  html.ke-rebrand-mode .ke-opening-bloom-hex { max-width: min(calc(100vw - 28px),calc(100dvh - 170px)); }
  html.ke-rebrand-mode .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-name-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-question-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-checkin-hex .ke-opening-bloom-hex-inner { padding: 38px 42px; }
  html.ke-rebrand-mode .ke-opening-name-hex .ke-opening-bloom-hex-inner { padding: 26px 38px; }
  html.ke-rebrand-mode .ke-opening-name-hex .ke-opening-name-flame { height: 76px; margin-bottom: 8px; width: 52px; }
  html.ke-rebrand-mode .ke-opening-name-main .ke-opening-name-hex h1 { font-size: clamp(22px,7.2vw,29px); margin-bottom: 10px; }
  html.ke-rebrand-mode .ke-opening-name-main label { font-size: 8px; margin-bottom: 5px; }
  html.ke-rebrand-mode .ke-opening-name-main input { font-size: 19px; height: 50px !important; min-height: 50px !important; }
  html.ke-rebrand-mode .ke-opening-name-main .ke-opening-error { margin-block: 4px 0; min-height: 15px; }
  html.ke-rebrand-mode .ke-opening-name-landing { font-size: 19px; min-height: 23px; }
  html.ke-rebrand-mode .ke-opening-name-main .ke-opening-name-hex h1,
  html.ke-rebrand-mode .ke-opening-question-main .ke-opening-question-hex h1,
  html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-reminders-hex h1,
  html.ke-rebrand-mode .ke-opening-notification-hex h1,
  html.ke-rebrand-mode .ke-opening-checkin-main .ke-opening-checkin-hex h1 { font-size: clamp(25px,8.2vw,34px); }
  html.ke-rebrand-mode .ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers { gap: 18px 14px; grid-template-columns: repeat(2,minmax(0,145px)); max-width: 320px; padding-top: 40px; }
  html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer { min-height: 0; padding: 18px; width: 145px; }
  html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer > strong { font-size: 13px; }
  html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer strong { font-size: 20px; }
  html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer small { font-size: 9px; }
  html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-bloom-hex-inner { padding: 28px 34px; }
  html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-reminders-hex h1 { font-size: clamp(22px,7vw,28px); margin-bottom: 5px; }
  html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-reminders-hex > p { font-size: 12px; line-height: 1.15; margin-bottom: 3px; }
  html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-time-grid { gap: 7px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 6px auto 4px; }
  html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-time-grid label { align-items: stretch; flex-direction: column; gap: 4px; min-height: 78px; padding: 7px; text-align: center; }
  html.ke-rebrand-mode .ke-opening-time-grid label strong { font-size: 14px; }
  html.ke-rebrand-mode .ke-opening-time-grid label small { font-size: 7px; margin-top: 1px; }
  html.ke-rebrand-mode .ke-opening-time-grid input { font-size: 12px; min-height: 44px; padding-inline: 3px; width: 100%; }
  html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-timezone { font-size: 7px; margin-bottom: 2px; }
  html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-error { min-height: 14px; }
  html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-notification-flame { height: 64px; width: 50px; }
  html.ke-rebrand-mode .ke-opening-notification-hex p { font-size: 13px; line-height: 1.25; }
  html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-notification-times { min-height: 44px; }
  html.ke-rebrand-mode .ke-opening-notification-times strong { font-size: 15px; }
}

@media (max-width: 350px) {
  html.ke-rebrand-mode .ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers { gap: 14px 10px; grid-template-columns: repeat(2,minmax(0,128px)); max-width: 276px; }
  html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer { padding: 14px; width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode .ke-opening-bloom-hex,
  html.ke-rebrand-mode .ke-opening-bloom-answer { animation: none !important; opacity: 1 !important; transform: none !important; }
  html.ke-rebrand-mode .ke-opening-ignition-spark { animation: none !important; opacity: 0 !important; }
}

/* Unified opening Bloom chassis. These rules intentionally mirror the dashboard
   jewel medallions: a moving gold rim, a solid jewel center, and no icon layer. */
html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer {
  --ke-opening-tone-deep: var(--ke-opening-azure-deep);
  --ke-opening-tone: var(--ke-opening-azure);
  --ke-opening-tone-light: var(--ke-opening-azure-light);
  background: conic-gradient(from 215deg,#82591f 0%,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d 100%);
  border: 0;
  box-shadow:
    inset 0 1px rgba(255,255,255,.48),
    0 5px 0 rgba(67,45,15,.58),
    0 16px 32px rgba(0,0,0,.4),
    0 0 0 5px rgba(215,181,109,.05);
  isolation: isolate;
  overflow: hidden;
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-garnet,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-blazing {
  --ke-opening-tone-deep: var(--ke-opening-garnet-deep);
  --ke-opening-tone: var(--ke-opening-garnet);
  --ke-opening-tone-light: var(--ke-opening-garnet-light);
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-peridot,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-burning_bright {
  --ke-opening-tone-deep: var(--ke-opening-peridot-deep);
  --ke-opening-tone: var(--ke-opening-peridot);
  --ke-opening-tone-light: var(--ke-opening-peridot-light);
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-amethyst,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-burning_low {
  --ke-opening-tone-deep: var(--ke-opening-amethyst-deep);
  --ke-opening-tone: var(--ke-opening-amethyst);
  --ke-opening-tone-light: var(--ke-opening-amethyst-light);
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-azure,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-steady_glow {
  --ke-opening-tone-deep: var(--ke-opening-azure-deep);
  --ke-opening-tone: var(--ke-opening-azure);
  --ke-opening-tone-light: var(--ke-opening-azure-light);
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer::before,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer::before,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer::before,
html.ke-rebrand-mode .ke-opening-meet-bloom::before {
  background:
    radial-gradient(circle at 31% 19%,rgba(255,255,255,.22),transparent 28%),
    radial-gradient(circle at 51% 46%,var(--ke-opening-tone-light),var(--ke-opening-tone) 51%,var(--ke-opening-tone-deep) 100%);
  border: 1px solid rgba(255,245,200,.46);
  border-radius: 50%;
  content: '';
  inset: 5px;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer::after,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer::after,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer::after,
html.ke-rebrand-mode .ke-opening-meet-bloom::after {
  animation: keOpeningJewelSweep 10.8s linear infinite;
  background: conic-gradient(from 0deg,transparent 0 76%,rgba(255,245,199,.7) 84%,transparent 91%);
  border-radius: 50%;
  content: '';
  inset: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .7;
  padding: 4px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

html.ke-rebrand-mode .ke-opening-bloom-answer > strong,
html.ke-rebrand-mode .ke-opening-bloom-answer > small,
html.ke-rebrand-mode .ke-opening-bloom-answer > label,
html.ke-rebrand-mode .ke-opening-bloom-answer > input,
html.ke-rebrand-mode .ke-opening-bloom-answer > button {
  position: relative;
  z-index: 2;
}

html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer > strong {
  color: #fffaf2;
  font: 600 clamp(14px,1.9vw,18px)/1.23 'Playfair Display',serif;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.42);
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-selected {
  border-color: #fffbdc;
  box-shadow: 0 0 0 5px rgba(255,251,220,.96),0 0 42px rgba(255,231,159,.72),0 19px 38px rgba(0,0,0,.42);
}

@keyframes keOpeningJewelSweep {
  to { transform: rotate(360deg); }
}

/* The next screen travels in the same direction as its prompt hex. */
html.ke-rebrand-mode .ke-opening-flow[data-opening-flow-direction="forward"] .ke-opening-screen {
  animation: keOpeningFlowForward .7s cubic-bezier(.45,0,.18,1) both;
}

html.ke-rebrand-mode .ke-opening-flow[data-opening-flow-direction="reverse"] .ke-opening-screen {
  animation: keOpeningFlowReverse .7s cubic-bezier(.45,0,.18,1) both;
}

@keyframes keOpeningFlowForward {
  from { opacity: .84; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes keOpeningFlowReverse {
  from { opacity: .84; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

html.ke-rebrand-mode .ke-opening-flow[aria-busy="true"] { pointer-events: none; }
html.ke-rebrand-mode .ke-opening-flow.is-flow-swap-masked .ke-opening-screen { opacity: 0; }
html.ke-rebrand-mode .ke-opening-flow[aria-busy="true"] .ke-opening-bloom-answer { animation: none !important; }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-bloom-settled { animation: none !important; opacity: 1; transform: none; }

.ke-opening-flow-hex-ghost {
  background: conic-gradient(from 30deg,#ffe9a0 0 16.666%,#c28c35 16.666% 33.333%,#79501a 33.333% 50%,#9f7127 50% 66.666%,#f0ce78 66.666% 83.333%,#fff0ad 83.333% 100%);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter: drop-shadow(0 5px 0 rgba(99,64,18,.78)) drop-shadow(0 18px 32px rgba(0,0,0,.46)) drop-shadow(0 0 28px rgba(215,181,109,.38));
  pointer-events: none;
  position: fixed;
  transform-origin: top left;
  z-index: 100001;
}

.ke-opening-flow-hex-ghost > div {
  background:
    radial-gradient(circle at 36% 23%,rgba(255,255,255,.1),transparent 27%),
    radial-gradient(circle at 50% 47%,rgba(215,181,109,.16),transparent 43%),
    linear-gradient(155deg,#29424d 0%,#10242d 58%,#08161b 100%);
  clip-path: inherit;
  inset: 4px;
  position: absolute;
}

/* Fixed top-left Back placement across every intake screen. */
html.ke-rebrand-mode .ke-opening-question-header { position: sticky; }
html.ke-rebrand-mode .ke-opening-question-header > .ke-opening-question-progress { grid-column: 2; }
html.ke-rebrand-mode .ke-opening-question-header > span:last-child { grid-column: 3; }
html.ke-rebrand-mode .ke-opening-question-header > button {
  left: max(18px,env(safe-area-inset-left));
  position: absolute;
  top: max(18px,env(safe-area-inset-top));
}

/* Name input remains native and sits immediately beneath its prompt hex. */
html.ke-rebrand-mode .ke-opening-screen.is-name { overflow-y: auto; }
html.ke-rebrand-mode .ke-opening-name-main { padding-block: max(20px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-bottom)); }
html.ke-rebrand-mode .ke-opening-name-hex { width: clamp(310px,55vw,470px); }
html.ke-rebrand-mode .ke-opening-name-field {
  background: linear-gradient(155deg,rgba(37,59,68,.97),rgba(11,31,39,.98));
  border: 1px solid rgba(234,205,137,.7);
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(0,0,0,.35),0 0 22px rgba(217,181,97,.12);
  margin: 14px auto 0;
  padding: 13px 14px 4px;
  position: relative;
  width: min(440px,calc(100vw - 32px));
  z-index: 3;
}

html.ke-rebrand-mode .ke-opening-name-field label { padding-inline: 8px; }
html.ke-rebrand-mode .ke-opening-name-main > .ke-opening-primary,
html.ke-rebrand-mode .ke-opening-name-main .ke-opening-primary { margin-top: 14px; }

/* Meet is a real prompt hex followed by the same jewel Bloom. */
html.ke-rebrand-mode .ke-opening-screen.is-meet { align-items: stretch; display: block; overflow-x: hidden; overflow-y: auto; padding: 0; }
html.ke-rebrand-mode .ke-opening-meet-main { padding: 20px max(16px,env(safe-area-inset-right)) max(34px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
html.ke-rebrand-mode .ke-opening-meet-hex { width: clamp(320px,57vw,500px); }
html.ke-rebrand-mode .ke-opening-meet-hex .ke-opening-bloom-hex-inner { padding: 48px 64px; }
html.ke-rebrand-mode .ke-opening-meet-hex .ke-opening-meet-flame { height: clamp(72px,15vw,126px); margin: 0 auto 12px; width: clamp(56px,12vw,96px); }
html.ke-rebrand-mode .ke-opening-meet-hex h1 { font-size: clamp(29px,4.8vw,47px); margin: 0 0 12px; }
html.ke-rebrand-mode .ke-opening-meet-hex p { color: rgba(255,250,242,.76) !important; font: 500 clamp(15px,2.2vw,20px)/1.32 'Cormorant Garamond',serif; margin: 0; }
html.ke-rebrand-mode .ke-opening-meet-bloom {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #fffaf2;
  font: 700 16px/1.18 'Playfair Display',serif;
  margin-top: 30px;
  padding: 24px;
  width: 176px;
}
html.ke-rebrand-mode .ke-opening-meet-bloom > strong { font: 700 16px/1.18 'Playfair Display',serif; }

/* Question and reminder Blooms share the canonical prompt-to-circle flow. */
html.ke-rebrand-mode .ke-opening-question-main,
html.ke-rebrand-mode .ke-opening-reminders-main { padding-top: 10px; }
html.ke-rebrand-mode .ke-opening-question-hex,
html.ke-rebrand-mode .ke-opening-reminders-hex,
html.ke-rebrand-mode .ke-opening-notification-hex { width: clamp(320px,55vw,500px); }
html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-bloom-hex-inner { padding: 52px 68px; }
html.ke-rebrand-mode .ke-opening-reminder-circles {
  grid-template-columns: repeat(2,minmax(0,200px));
  max-width: 440px;
}
html.ke-rebrand-mode .ke-opening-reminder-circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 24px 19px !important;
  width: 200px !important;
}

html.ke-rebrand-mode .ke-opening-reminder-circle > label { cursor: default; display: block; width: 100%; }
html.ke-rebrand-mode .ke-opening-reminder-circle > label strong { display: block; font: 600 23px/1 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-reminder-circle > label small { color: rgba(255,250,242,.72); display: block; font-size: 8px; margin-top: 5px; }
html.ke-rebrand-mode .ke-opening-reminder-circle > input {
  background: #fffaf2;
  border: 2px solid #ead18f;
  border-radius: 13px;
  color: #12252d;
  color-scheme: light;
  font: 800 14px 'DM Sans',sans-serif;
  margin-top: 12px;
  min-height: 47px;
  padding-inline: 7px;
  width: 90%;
}

html.ke-rebrand-mode .ke-opening-reminder-delete {
  appearance: none;
  background: rgba(5,20,27,.42);
  border: 1px solid rgba(255,238,190,.34);
  border-radius: 999px;
  color: rgba(255,250,242,.82);
  cursor: pointer;
  font: 800 7px/1 'DM Sans',sans-serif;
  margin-bottom: 10px;
  min-height: 25px;
  padding: 0 9px;
}

html.ke-rebrand-mode .ke-opening-reminder-circle.is-add strong { font: 600 23px/1.05 'Playfair Display',serif; }
html.ke-rebrand-mode .ke-opening-reminder-circle.is-add small { color: rgba(255,250,242,.72); font-size: 9px; line-height: 1.35; }
html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-primary { margin-top: 10px; }

/* Notification choice uses the exact same prompt-and-two-circles composition. */
html.ke-rebrand-mode .ke-opening-screen.is-notification,
html.ke-rebrand-mode .ke-opening-screen.is-checkin {
  align-items: stretch;
  display: block;
  padding: 0;
}
html.ke-rebrand-mode .ke-opening-notification-main { padding: 12px max(16px,env(safe-area-inset-right)) max(34px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-bloom-hex-inner { padding: 46px 66px; }
html.ke-rebrand-mode .ke-opening-notification-times { background: rgba(4,19,26,.34); margin-bottom: 0; }
html.ke-rebrand-mode .ke-opening-notification-times strong + strong { border-left: 1px solid rgba(235,204,133,.3); }
html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  font: 800 13px/1.25 'DM Sans',sans-serif;
  margin: 0;
  min-width: 0;
  width: 176px;
}
html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer > strong { font: 800 13px/1.25 'DM Sans',sans-serif; }
html.ke-rebrand-mode .ke-opening-screen.is-checkin .ke-opening-question-header { min-height: 74px; }

/* Recap: one summary prompt hex, then every exact answer blooms as a jewel. */
html.ke-rebrand-mode .ke-opening-screen.is-recap { align-items: flex-start; }
html.ke-rebrand-mode .ke-opening-recap-main { max-width: 760px; padding: max(24px,env(safe-area-inset-top)) 0 max(40px,env(safe-area-inset-bottom)); }
html.ke-rebrand-mode .ke-opening-recap-hex { width: clamp(330px,58vw,520px); }
html.ke-rebrand-mode .ke-opening-recap-hex .ke-opening-bloom-hex-inner { padding: 50px 66px; }
html.ke-rebrand-mode .ke-opening-recap-hex .ke-opening-recap-flame { filter: drop-shadow(0 0 24px rgba(238,189,64,.7)); height: 82px; left: auto; margin: 0 auto 10px; opacity: 1; position: relative; top: auto; transform: none; width: 64px; z-index: 1; }
html.ke-rebrand-mode .ke-opening-recap-hex h1 { font-size: clamp(29px,4.8vw,48px); line-height: 1.03; margin: 0; }
html.ke-rebrand-mode .ke-opening-recap-bloom { gap: 22px; max-width: 560px; }
html.ke-rebrand-mode .ke-opening-recap-main ul.ke-opening-recap-bloom { display: grid; margin: 0 auto 25px; padding: 34px 0 4px; text-align: center; }
html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-recap-circle {
  animation: keOpeningAnswerBloomDown .68s calc(120ms + var(--ke-opening-answer-index) * 72ms) cubic-bezier(.16,1,.3,1) both;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  padding: 24px;
  width: 176px;
}
html.ke-rebrand-mode .ke-opening-recap-circle small { color: #f1d88f; font-size: 8px; font-weight: 900; letter-spacing: .7px; line-height: 1.2; text-transform: uppercase; }
html.ke-rebrand-mode .ke-opening-recap-circle strong { color: #fffaf2; font: 600 16px/1.15 'Playfair Display',serif; margin-top: 7px; }
html.ke-rebrand-mode .ke-opening-recap-main > .ke-opening-bloom-stage > p { animation: keOpeningRecapLine .6s 1.1s ease both; color: rgba(255,250,242,.78) !important; font: 500 21px/1.35 'Cormorant Garamond',serif; margin: 20px auto 22px; max-width: 540px; }
html.ke-rebrand-mode .ke-opening-recap-main > .ke-opening-bloom-stage > .ke-opening-primary { animation: keOpeningRecapLine .6s 1.25s ease both; }

@media (max-width: 560px) {
  html.ke-rebrand-mode .ke-opening-question-header { min-height: 126px; }
  html.ke-rebrand-mode .ke-opening-question-header > button { left: max(12px,env(safe-area-inset-left)); top: max(12px,env(safe-area-inset-top)); }
  html.ke-rebrand-mode .ke-opening-question-progress { height: 112px; }
  html.ke-rebrand-mode .ke-opening-name-hex,
  html.ke-rebrand-mode .ke-opening-meet-hex,
  html.ke-rebrand-mode .ke-opening-question-hex,
  html.ke-rebrand-mode .ke-opening-reminders-hex,
  html.ke-rebrand-mode .ke-opening-notification-hex,
  html.ke-rebrand-mode .ke-opening-recap-hex { width: min(330px,calc(100vw - 28px)); }
  html.ke-rebrand-mode .ke-opening-meet-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-recap-hex .ke-opening-bloom-hex-inner { padding: 35px 42px; }
  html.ke-rebrand-mode .ke-opening-meet-hex .ke-opening-meet-flame { height: 66px; width: 51px; }
  html.ke-rebrand-mode .ke-opening-meet-hex h1,
  html.ke-rebrand-mode .ke-opening-recap-hex h1 { font-size: clamp(24px,7.7vw,31px); }
  html.ke-rebrand-mode .ke-opening-meet-bloom { margin-top: 22px; width: 145px; }
  html.ke-rebrand-mode .ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers { padding-top: 28px; }
  html.ke-rebrand-mode .ke-opening-reminder-circles { grid-template-columns: repeat(2,minmax(0,145px)); max-width: 320px; }
  html.ke-rebrand-mode .ke-opening-reminder-circle { padding: 12px 13px !important; width: 145px !important; }
  html.ke-rebrand-mode .ke-opening-reminder-circle > label strong { font-size: 18px; }
  html.ke-rebrand-mode .ke-opening-reminder-circle > input { font-size: 11px; margin-top: 7px; min-height: 41px; width: 96%; }
  html.ke-rebrand-mode .ke-opening-reminder-delete { font-size: 6px; margin-bottom: 5px; min-height: 28px; }
  html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-recap-circle { padding: 17px; width: 145px; }
  html.ke-rebrand-mode .ke-opening-recap-main ul.ke-opening-recap-bloom { gap: 18px 14px; max-width: 320px; padding-top: 28px; }
  html.ke-rebrand-mode .ke-opening-recap-circle strong { font-size: 13px; }
  html.ke-rebrand-mode .ke-opening-recap-hex .ke-opening-recap-flame { height: 56px; width: 44px; }
}

@media (max-width: 350px) {
  html.ke-rebrand-mode .ke-opening-name-hex,
  html.ke-rebrand-mode .ke-opening-meet-hex,
  html.ke-rebrand-mode .ke-opening-question-hex,
  html.ke-rebrand-mode .ke-opening-reminders-hex,
  html.ke-rebrand-mode .ke-opening-notification-hex,
  html.ke-rebrand-mode .ke-opening-recap-hex { width: min(292px,calc(100vw - 28px)); }
  html.ke-rebrand-mode .ke-opening-reminder-circles { grid-template-columns: repeat(2,minmax(0,128px)); max-width: 276px; }
  html.ke-rebrand-mode .ke-opening-reminder-delete { min-height: 26px; }
  html.ke-rebrand-mode .ke-opening-reminder-circle,
  html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-recap-circle { width: 128px !important; }
  html.ke-rebrand-mode .ke-opening-reminder-circle > input { font-size: 10px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  html.ke-rebrand-mode .ke-opening-screen.is-name,
  html.ke-rebrand-mode .ke-opening-screen.is-meet,
  html.ke-rebrand-mode .ke-opening-screen.is-question,
  html.ke-rebrand-mode .ke-opening-screen.is-reminders,
  html.ke-rebrand-mode .ke-opening-screen.is-notification,
  html.ke-rebrand-mode .ke-opening-screen.is-recap { overflow-y: auto; }
  html.ke-rebrand-mode .ke-opening-question-header { min-height: 96px; }
  html.ke-rebrand-mode .ke-opening-question-progress { height: 82px; }
  html.ke-rebrand-mode .ke-opening-bloom-hex { max-width: min(320px,calc(100dvh - 120px)); }
  html.ke-rebrand-mode .ke-opening-question-main .ke-opening-question-hex h1,
  html.ke-rebrand-mode .ke-opening-reminders-main .ke-opening-reminders-hex h1,
  html.ke-rebrand-mode .ke-opening-notification-hex h1,
  html.ke-rebrand-mode .ke-opening-recap-hex h1 { font-size: clamp(23px,4vw,31px); max-width: 230px; }
  html.ke-rebrand-mode .ke-opening-question-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-reminders-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-notification-hex .ke-opening-bloom-hex-inner,
  html.ke-rebrand-mode .ke-opening-recap-hex .ke-opening-bloom-hex-inner { padding: 34px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode .ke-opening-flow[data-opening-flow-direction] .ke-opening-screen,
  html.ke-rebrand-mode .ke-opening-bloom-answer::after,
  .ke-opening-flow-hex-ghost { animation: none !important; }
}

/* Canonical dashboard Bloom parity ---------------------------------------
   The opening uses the same dark jewel centers, faceted hex shimmer,
   connector breath, 1.6-second outward flight, and 10.8-second rim sweep as
   the live dashboard constellation. */
html.ke-rebrand-mode .ke-opening-flow {
  --ke-opening-garnet-surface:
    radial-gradient(circle at 38% 25%,rgba(255,255,255,.035),transparent 29%),
    radial-gradient(circle at 50% 42%,#740e1c 0 27%,#30060a 72%,#030102 100%);
  --ke-opening-peridot-surface:
    radial-gradient(circle at 38% 25%,rgba(255,255,255,.035),transparent 29%),
    radial-gradient(circle at 50% 42%,#297b0d 0 27%,#113205 72%,#010301 100%);
  --ke-opening-amethyst-surface:
    radial-gradient(circle at 38% 25%,rgba(255,255,255,.035),transparent 29%),
    radial-gradient(circle at 50% 42%,#460f75 0 27%,#200530 72%,#020103 100%);
  --ke-opening-azure-surface:
    radial-gradient(circle at 38% 25%,rgba(255,255,255,.035),transparent 29%),
    radial-gradient(circle at 50% 42%,#135f8a 0 27%,#06243a 72%,#010203 100%);
}

html.ke-rebrand-mode .ke-opening-bloom-hex {
  animation: keOpeningHexBloom 620ms cubic-bezier(.45,0,.18,1) both;
  filter:
    drop-shadow(0 4px 0 rgba(99,64,18,.82))
    drop-shadow(0 15px 26px rgba(0,0,0,.38))
    drop-shadow(0 0 25px rgba(215,181,109,.34));
}

html.ke-rebrand-mode .ke-opening-bloom-hex-inner::before {
  border: 1px solid rgba(241,220,167,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),inset -10px -12px 20px rgba(0,0,0,.2);
  inset: 4px;
}

html.ke-rebrand-mode .ke-opening-bloom-hex::after {
  animation: keOpeningHexEdgeShimmer 7.8s ease-in-out infinite;
  background: linear-gradient(112deg,transparent 25%,rgba(255,250,228,.28) 40%,rgba(255,242,191,.9) 48%,#d7b56d 53%,transparent 67%);
  background-size: 300% 100%;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  content: '';
  inset: 1px;
  opacity: .62;
  padding: 2px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes keOpeningHexEdgeShimmer {
  0%,18% { background-position: 125% 0; opacity: .24; }
  52% { opacity: .68; }
  82%,100% { background-position: -125% 0; opacity: .28; }
}

html.ke-rebrand-mode .ke-opening-bloom-answers,
html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers {
  gap: 22px;
  padding-top: 52px;
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer,
html.ke-rebrand-mode .ke-opening-meet-bloom {
  animation: keOpeningAnswerBloomDown 1600ms calc(140ms + var(--ke-opening-answer-index) * 45ms) cubic-bezier(.45,0,.18,1) both;
  background: conic-gradient(from 215deg,#82591f 0%,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d 100%);
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(105,72,24,.78)) drop-shadow(0 11px 20px rgba(0,0,0,.26)) drop-shadow(0 0 10px rgba(215,181,109,.22));
  overflow: visible;
  transition: filter 220ms ease,color 260ms ease;
}

html.ke-rebrand-mode .ke-opening-bloom-answer.is-garnet,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-blazing { --ke-opening-tone-surface: var(--ke-opening-garnet-surface); }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-peridot,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-burning_bright { --ke-opening-tone-surface: var(--ke-opening-peridot-surface); }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-amethyst,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-burning_low { --ke-opening-tone-surface: var(--ke-opening-amethyst-surface); }
html.ke-rebrand-mode .ke-opening-bloom-answer.is-azure,
html.ke-rebrand-mode .ke-opening-bloom-answer.is-steady_glow { --ke-opening-tone-surface: var(--ke-opening-azure-surface); }

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer::before,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer::before,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer::before,
html.ke-rebrand-mode .ke-opening-meet-bloom::before {
  background-color: var(--ke-opening-tone-deep);
  background-image: var(--ke-opening-tone-surface,var(--ke-opening-azure-surface));
  border: 0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12);
  inset: 4px;
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer::after,
html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer::after,
html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer::after,
html.ke-rebrand-mode .ke-opening-meet-bloom::after {
  animation: keOpeningJewelSweep 10.8s linear infinite;
  animation-delay: calc(var(--ke-opening-answer-index) * -1.8s);
  background: conic-gradient(from 0deg,#b98329 0deg 205deg,#d9ae50 220deg,#f7dc91 238deg,#fff9dd 252deg,#e8bc5a 267deg,#c28b2d 288deg,#b98329 360deg);
  inset: 1px;
  opacity: .94;
  padding: 3px;
}

html.ke-rebrand-mode .ke-opening-bloom-connector {
  animation: keOpeningConnectorBloomOut 1600ms calc(140ms + var(--ke-opening-answer-index) * 45ms) cubic-bezier(.45,0,.18,1) both;
  background: linear-gradient(180deg,rgba(215,181,109,.06),rgba(241,220,167,.58) 46%,rgba(215,181,109,.18) 100%);
  box-shadow: 0 0 5px rgba(215,181,109,.28);
  display: block;
  height: 52px;
  left: calc(50% - 1px);
  opacity: .48;
  pointer-events: none;
  position: absolute;
  top: -52px;
  transform-origin: 50% 0;
  width: 2px;
  z-index: -1;
}

html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer:nth-child(n+3) .ke-opening-bloom-connector {
  height: 22px;
  top: -22px;
}

html.ke-rebrand-mode .ke-opening-meet-bloom .ke-opening-bloom-connector {
  height: 30px;
  top: -30px;
}

@keyframes keOpeningAnswerBloomDown {
  from { opacity: 0; transform: translateY(-110px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes keOpeningConnectorBloomOut {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: .48; transform: scaleY(1); }
}

html.ke-rebrand-mode .ke-opening-flow[data-opening-flow-direction="forward"] .ke-opening-screen,
html.ke-rebrand-mode .ke-opening-flow[data-opening-flow-direction="reverse"] .ke-opening-screen {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(.45,0,.18,1);
}

@media (max-width: 560px) {
  html.ke-rebrand-mode .ke-opening-name-hex,
  html.ke-rebrand-mode .ke-opening-meet-hex,
  html.ke-rebrand-mode .ke-opening-question-hex,
  html.ke-rebrand-mode .ke-opening-reminders-hex,
  html.ke-rebrand-mode .ke-opening-notification-hex,
  html.ke-rebrand-mode .ke-opening-recap-hex { width: min(300px,calc(100vw - 48px)); }

  html.ke-rebrand-mode .ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers {
    gap: 18px 14px;
    grid-template-columns: repeat(2,minmax(0,132px));
    max-width: 278px;
    padding-top: 40px;
  }

  html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-reminder-circle,
  html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-recap-circle {
    padding: 15px !important;
    width: 132px !important;
  }

  html.ke-rebrand-mode .ke-opening-bloom-connector { height: 40px; top: -40px; }
  html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer:nth-child(n+3) .ke-opening-bloom-connector { height: 18px; top: -18px; }
  html.ke-rebrand-mode .ke-opening-meet-bloom { width: 132px; }
  html.ke-rebrand-mode .ke-opening-meet-bloom .ke-opening-bloom-connector { height: 22px; top: -22px; }
}

@media (max-width: 350px) {
  html.ke-rebrand-mode .ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-options.ke-opening-bloom-answers,
  html.ke-rebrand-mode .ke-opening-checkin-options.ke-opening-bloom-answers { grid-template-columns: repeat(2,minmax(0,120px)); max-width: 252px; }
  html.ke-rebrand-mode .ke-opening-bloom-answers > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-options > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-checkin-options > .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-reminder-circle,
  html.ke-rebrand-mode .ke-opening-notification-answers .ke-opening-bloom-answer,
  html.ke-rebrand-mode .ke-opening-recap-main .ke-opening-recap-circle { width: 120px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode .ke-opening-bloom-hex::after,
  html.ke-rebrand-mode .ke-opening-bloom-answer::after,
  html.ke-rebrand-mode .ke-opening-bloom-connector { animation: none !important; }
  html.ke-rebrand-mode .ke-opening-bloom-connector { opacity: .48 !important; transform: scaleY(1) !important; }
}

/* Canonical opening constellation -----------------------------------------
   Opening questions now use the same measured Bloom grammar as the live
   dashboard: one shared hex core, measured rays, 1–6 radial medallions, and
   the same two-column cascade used by the app for longer choice sets. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  --ke-opening-core-size: clamp(168px,55%,214px);
  display: block;
  height: min(700px,calc(100dvh - 132px));
  isolation: isolate;
  margin: 0 auto;
  max-width: 430px;
  min-height: 520px;
  overflow: hidden;
  position: relative;
  width: min(100%,430px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] {
  height: min(700px,calc(100dvh - 132px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: rgba(215,181,109,.62) rgba(8,23,30,.28);
  scrollbar-width: thin;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"]::after {
  content: "";
  display: block;
  height: var(--ke-opening-content-height);
  pointer-events: none;
  width: 1px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex {
  animation: none !important;
  aspect-ratio: 1;
  filter:
    drop-shadow(0 4px 0 rgba(99,64,18,.82))
    drop-shadow(0 15px 26px rgba(0,0,0,.38))
    drop-shadow(0 0 25px rgba(215,181,109,.34));
  height: auto !important;
  margin: 0;
  max-width: none;
  position: absolute;
  transform: translate(-50%,-50%);
  width: var(--ke-opening-core-size) !important;
  z-index: 3;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex .ke-opening-bloom-hex-inner {
  height: calc(100% - 8px);
  padding: 16% 12% !important;
  width: calc(100% - 8px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex h1 {
  color: #fff !important;
  line-height: 1.02 !important;
  margin: 0 auto !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-answers,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-options,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-checkin-options,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-reminder-circles,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-recap-bloom {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-recap-circle {
  align-items: center;
  animation: none !important;
  aspect-ratio: 1;
  background: conic-gradient(from 215deg,#82591f 0%,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d 100%);
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: none;
  display: flex;
  filter:
    drop-shadow(0 3px 0 rgba(105,72,24,.78))
    drop-shadow(0 11px 20px rgba(0,0,0,.26))
    drop-shadow(0 0 10px rgba(215,181,109,.22));
  flex-direction: column;
  height: auto !important;
  justify-content: center;
  margin: 0 !important;
  min-height: 44px;
  overflow: hidden;
  padding: clamp(12px,3.8vw,18px) !important;
  position: absolute;
  transform: translate(-50%,-50%);
  transition: filter 220ms ease,color 260ms ease;
  z-index: 2;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer::before,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle::before,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-recap-circle::before {
  background-color: var(--ke-opening-tone-deep);
  background-image: var(--ke-opening-tone-surface,var(--ke-opening-azure-surface));
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12);
  inset: 4px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer::after,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle::after,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-recap-circle::after {
  animation: keLuminousCircleRimSweep 10.8s linear infinite !important;
  animation-delay: calc(var(--ke-opening-answer-index) * -1.8s) !important;
  background: conic-gradient(from 0deg,#b98329 0deg 205deg,#d9ae50 220deg,#f7dc91 238deg,#fff9dd 252deg,#e8bc5a 267deg,#c28b2d 288deg,#b98329 360deg);
  border-radius: 50%;
  inset: 1px;
  opacity: .94;
  padding: 3px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > small {
  color: #fff !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100% !important;
  overflow-wrap: normal;
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
  text-wrap: balance;
  white-space: normal;
  word-break: normal;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > strong {
  font: 600 clamp(12px,3.25vw,15px)/1.08 'Playfair Display',serif !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > small {
  font: 650 clamp(8px,2.35vw,11px)/1.14 'DM Sans',sans-serif !important;
  margin-top: 7px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer:is(.is-selected,:active) {
  filter:
    brightness(1.08)
    drop-shadow(0 3px 0 rgba(105,72,24,.78))
    drop-shadow(0 11px 20px rgba(0,0,0,.26))
    drop-shadow(0 0 15px rgba(215,181,109,.38));
  transform: translate(-50%,-50%) scale(1) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer:disabled {
  opacity: 1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-canonical-connectors {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-canonical-connectors > .ke-opening-bloom-connector {
  animation: none !important;
  background: rgba(215,181,109,.46);
  border: 0;
  box-shadow: none;
  display: block;
  margin-left: -1px;
  min-height: 8px;
  opacity: .48;
  position: absolute;
  transform-origin: 50% 0;
  width: 2px;
  z-index: auto;
}

html.ke-rebrand-mode #ke-opening-flow[data-opening-flow-direction] .ke-opening-screen {
  animation: none !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-recap-circle {
  padding: clamp(14px,4vw,20px) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-bloom-answer > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-recap-circle > strong {
  font-size: clamp(12px,3.55vw,16px) !important;
  line-height: 1.07 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminders-main .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-primary {
  bottom: 8px;
  left: 50%;
  margin: 0;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

@media (max-width: 560px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
    height: calc(100dvh - 126px);
    min-height: 500px;
    width: min(calc(100vw - 16px),430px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-hex {
    opacity: 1 !important;
    transform: translate(-50%,-50%) !important;
  }
}

/* Long supporting copy belongs in the open lower canvas, not inside the
   prompt hex. Each thought enters with the same paced rise as the ignition
   introduction while the canonical hex, rays, and jewel positions stay intact. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-main-with-explainer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 158px);
  margin: 0 auto;
  min-height: 0;
  overflow: hidden;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-main-with-explainer > .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-explainer {
  color: rgba(255,250,242,.78);
  flex: 0 0 auto;
  font: 500 clamp(17px,2.6vw,21px)/1.28 'Playfair Display',serif;
  margin: 0 auto;
  max-width: 390px;
  min-height: 104px;
  padding: 10px 18px max(18px,env(safe-area-inset-bottom));
  position: relative;
  text-align: center;
  width: min(100%,390px);
  z-index: 5;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-explainer p {
  margin: 0 0 6px;
  opacity: 0;
  text-wrap: balance;
  transform: translateY(10px);
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-explainer p {
  animation: keOpeningLineIn .7s calc(1.2s + var(--ke-opening-explainer-index) * .52s) cubic-bezier(.22,.75,.24,1) forwards;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-explainer p.is-highlight {
  color: #ddbd71 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-confirmation {
  min-height: 0;
  padding-bottom: 8px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-confirmation > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-confirmation > small {
  opacity: 0;
  transform: translateY(10px);
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-checkin-confirmation:not([hidden]) > strong,
html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-checkin-confirmation:not([hidden]) > small {
  animation: keOpeningLineIn .7s 2.78s cubic-bezier(.22,.75,.24,1) forwards;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-explainer {
  margin-top: 14px;
}

@media (max-width: 560px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-main-with-explainer {
    height: calc(100dvh - 126px);
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-explainer {
    font-size: clamp(15px,4.7vw,18px);
    min-height: 96px;
    padding: 8px 14px max(12px,env(safe-area-inset-bottom));
  }
}

@media (max-height: 700px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-explainer {
    font-size: 15px;
    line-height: 1.18;
    min-height: 78px;
    padding-block: 5px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-explainer p,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-confirmation > strong,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-confirmation > small {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Downward opening flow ---------------------------------------------------
   Every intake screen now uses the exact cascade geometry from the app's
   Name what is here flow. Answer jewels descend beneath the prompt, then
   collapse upward before the next prompt fades into that same position. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] {
  --ke-opening-core-size: clamp(168px,55%,214px);
  margin-inline: auto;
  max-width: 430px;
  width: min(calc(100vw - 16px),430px);
}

/* The first Check-In is the same four-point radial Bloom as the app. Its
   prompt uses the garnet center shown before a Flame tier is selected. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin .ke-opening-checkin-hex .ke-opening-bloom-hex-inner::before {
  background-color: var(--ke-opening-garnet-deep);
  background-image: var(--ke-opening-garnet-surface);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-reminder-circle {
  padding: clamp(18px,4.8vw,24px) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-reminder-circle > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-reminder-circle label > strong {
  font-size: clamp(15px,4vw,19px) !important;
  line-height: 1.1 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > small,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] .ke-opening-reminder-circle label > small {
  font-size: clamp(9px,2.5vw,12px) !important;
  line-height: 1.24 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-flow-down="true"][data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex .ke-opening-bloom-hex-inner {
  padding: 15% 12% !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminders-main .ke-opening-bloom-stage[data-opening-flow-down="true"] > .ke-opening-stage-action {
  bottom: auto;
  left: 50%;
  margin: 0;
  position: absolute;
  top: calc(var(--ke-opening-content-height) - 82px);
  transform: translateX(-50%);
  z-index: 5;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminders-main .ke-opening-bloom-stage[data-opening-flow-down="true"] > .ke-opening-stage-status {
  bottom: auto;
  left: 50%;
  margin: 0;
  min-height: 16px;
  position: absolute;
  text-align: center;
  top: calc(var(--ke-opening-content-height) - 111px);
  transform: translateX(-50%);
  width: min(360px,90%);
  z-index: 5;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-notification-main .ke-opening-explainer {
  order: 3;
}

/* The final recap keeps the complete answer set on one screen as floating
   words. It intentionally has no orbit circles or connector layer. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-recap {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-main {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 430px;
  padding: max(24px,env(safe-area-inset-top)) 8px max(30px,env(safe-area-inset-bottom));
  width: min(100%,430px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-stage {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  min-height: calc(100dvh - max(54px,env(safe-area-inset-top)));
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-stage > .ke-opening-recap-hex {
  flex: 0 0 214px;
  height: 214px !important;
  margin: 0 auto;
  max-width: 214px;
  width: 214px !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-stage > .ke-opening-recap-hex .ke-opening-bloom-hex-inner {
  padding: 15% 12% !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-stage .ke-opening-recap-flame {
  height: 50px;
  margin: 0 auto 6px;
  width: 39px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-stage .ke-opening-recap-hex h1 {
  font-size: clamp(20px,5.8vw,26px) !important;
  line-height: 1.02 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-main ul.ke-opening-recap-floats {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: repeat(2,minmax(0,1fr));
  list-style: none;
  margin: 14px auto 8px;
  padding: 0 8px;
  text-align: center;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-float {
  align-items: center;
  animation: keOpeningRecapFloatIn .62s var(--ke-recap-delay) cubic-bezier(.16,1,.3,1) both;
  background: radial-gradient(circle,rgba(215,181,109,.08),transparent 72%);
  border: 0;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 4px 6px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-float small {
  color: #d8b66d;
  display: block;
  font: 850 7px/1.12 'DM Sans',sans-serif;
  letter-spacing: .45px;
  text-transform: uppercase;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-float strong {
  color: #fffaf2;
  display: block;
  font: 600 clamp(12px,3.35vw,15px)/1.08 'Playfair Display',serif;
  margin-top: 3px;
  text-wrap: balance;
}

@keyframes keOpeningRecapFloatIn {
  from { filter: blur(5px); opacity: 0; transform: translateY(16px) scale(.96); }
  to { filter: blur(0); opacity: 1; transform: translateY(0) scale(1); }
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-stage > .ke-opening-recap-explainer {
  font-size: clamp(15px,4vw,18px);
  margin: 4px auto 6px;
  min-height: 64px;
  padding: 4px 16px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-continue {
  flex: 0 0 auto;
  margin: 6px auto 0;
  min-width: 220px;
  position: relative;
  z-index: 8;
}

@media (max-width: 370px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-main ul.ke-opening-recap-floats {
    gap: 6px 8px;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-float {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-float {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Approved shared shape system -------------------------------------------
   A point-up/point-down hex now matches the dashboard Flame core. The
   measured Bloom still owns placement, while this layer restores the larger
   choice sizes that older phone overrides reduced to 120–132px. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-hex-inner,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-flame,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-flame-picture,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-flame,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-flame svg {
  overflow: visible;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex .ke-opening-bloom-hex-inner {
  padding: 17% 12% !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-recap-circle {
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-recap-circle {
  overflow: visible;
}

/* Two-column question circles use every safe pixel in the 430px Bloom
   canvas. This wins over the obsolete 120/132px !important phone caps. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-bloom-answer,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-reminder-circle,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] .ke-opening-recap-circle {
  width: var(--ke-opening-choice-size) !important;
}

/* Preserve the app's centered radial grammar while allowing each count to
   retain its intended, larger diameter on small screens. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="radial"][data-opening-bloom-count="1"] .ke-opening-bloom-answer { width: 42% !important; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="radial"][data-opening-bloom-count="2"] .ke-opening-bloom-answer { width: 38% !important; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="radial"][data-opening-bloom-count="3"] .ke-opening-bloom-answer { width: 35% !important; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="radial"][data-opening-bloom-count="4"] .ke-opening-bloom-answer { width: 36% !important; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="radial"][data-opening-bloom-count="5"] .ke-opening-bloom-answer { width: 31.5% !important; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="radial"][data-opening-bloom-count="6"] .ke-opening-bloom-answer { width: 33% !important; }

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > strong,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer > small,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle > label {
  max-width: 86% !important;
  overflow-wrap: break-word;
  text-align: center;
}

/* Naming uses the same connected point-up hex grammar as the prompt. The
   native text input remains focusable and editable inside the lower jewel. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-connector {
  background: linear-gradient(180deg,rgba(255,240,180,.88),rgba(215,181,109,.48));
  box-shadow: 0 0 7px rgba(215,181,109,.34);
  display: block;
  flex: 0 0 26px;
  height: 26px;
  margin-block: -2px;
  pointer-events: none;
  position: relative;
  width: 2px;
  z-index: 1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field {
  align-items: center;
  aspect-ratio: .8660254;
  background: conic-gradient(from 215deg,#82591f 0%,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display: flex;
  filter: drop-shadow(0 3px 0 rgba(105,72,24,.78)) drop-shadow(0 14px 24px rgba(0,0,0,.3)) drop-shadow(0 0 13px rgba(215,181,109,.27));
  flex-direction: column;
  isolation: isolate;
  justify-content: center;
  margin-top: 0;
  min-height: 0;
  padding: clamp(42px,10vw,58px) clamp(24px,6vw,34px);
  position: relative;
  width: min(300px,calc(100vw - 40px));
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field::before {
  background:
    radial-gradient(circle at 38% 24%,rgba(255,255,255,.055),transparent 29%),
    radial-gradient(circle at 50% 43%,#740e1c 0 27%,#30060a 72%,#030102 100%);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12);
  clip-path: inherit;
  content: '';
  inset: 4px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field > * {
  position: relative;
  z-index: 1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field label {
  color: #f0d38d;
  font-size: clamp(28px,7vw,32px);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 10px;
  max-width: none;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field input {
  -webkit-tap-highlight-color: transparent;
  background: transparent !important;
  border: 0;
  border-bottom: 2px solid rgba(240,211,141,.86);
  border-radius: 0;
  box-shadow: none !important;
  color: #fffaf2;
  font-size: clamp(30px,8vw,38px);
  height: 82px !important;
  max-width: 258px;
  min-height: 82px !important;
  padding: 0 4px;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field input::placeholder { color: rgba(255,250,242,.48); }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field input:focus,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field input:focus-visible,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field input:active {
  background: transparent !important;
  border-bottom-color: rgba(240,211,141,.86) !important;
  box-shadow: none !important;
  outline: 0 !important;
  outline-offset: 0 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field .ke-opening-error {
  color: #ffe3de !important;
  min-height: 18px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field .ke-opening-name-landing {
  font-size: clamp(18px,4.8vw,23px);
  min-height: 28px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field :is(.ke-opening-error,.ke-opening-name-landing):empty {
  display: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-action {
  align-items: center;
  background: rgba(9,25,31,.88);
  border: 1px solid rgba(215,181,109,.58);
  box-shadow: none;
  color: #f0d38d;
  display: inline-flex;
  font-size: clamp(9px,2.4vw,11px);
  gap: 8px;
  justify-content: center;
  letter-spacing: .07em;
  min-height: 46px;
  min-width: 184px;
  padding: 8px 17px;
  text-transform: uppercase;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-action::before {
  content: '\2192';
  font-size: 14px;
  line-height: 1;
}

/* Meet keeps the semantic reading order visible: heading, Flame, chosen name. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-hex .ke-opening-meet-name {
  color: #f0d38d !important;
  font: 600 clamp(22px,5vw,30px)/1.05 'Playfair Display',serif;
  margin: 0;
  max-width: 90%;
  text-wrap: balance;
}

/* Legacy tier-gallery rules remain for reduced-motion fallbacks and older
   cached markup. The current story uses one synchronized transparent film. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier-gallery {
  height: clamp(260px,46dvh,520px);
  left: 50%;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 43%;
  transform: translate(-50%,-50%);
  width: min(82vw,540px);
  z-index: 5;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  overflow: visible;
  position: absolute;
  transform: translateY(14px) scale(var(--ke-opening-tier-scale,1));
  transform-origin: 50% 68%;
  transition: opacity .78s ease,transform 1.05s cubic-bezier(.16,1,.3,1),visibility 0s .78s;
  visibility: hidden;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier.is-active {
  opacity: 1;
  transform: translateY(0) scale(var(--ke-opening-tier-scale,1));
  transition-delay: 0s,0s,0s;
  visibility: visible;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier video,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier img {
  background: transparent;
  display: block;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: contain;
  overflow: visible;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier > img { display: none; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier.is-media-fallback > video { display: none; }
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier.is-media-fallback > img { display: block; }

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame-media,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame-fallback {
  transition: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-stage:not([data-opening-story-scene="brand"]) .ke-opening-story-flame-media,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-stage:not([data-opening-story-scene="brand"]) .ke-opening-story-flame-fallback {
  filter: none;
}

@media (max-height: 620px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier-gallery {
    height: clamp(220px,43dvh,360px);
    top: 41%;
  }
}

@media (max-width: 350px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field {
    width: min(300px,calc(100vw - 40px));
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field input {
    font-size: 22px;
    height: 64px !important;
    min-height: 64px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-hex,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-answer,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-recap-circle,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-name-field {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-bloom-answer,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-reminder-circle,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] .ke-opening-recap-circle {
    opacity: 1 !important;
    transform: translate(-50%,-50%) !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier.is-active,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame-media,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame-fallback {
    transition: none !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier > video { display: none !important; }
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-tier.is-active > img {
    display: block !important;
    opacity: 1 !important;
  }
}

/* Approved first-check-in and Journal handoff ----------------------------
   These scenes use the same gold-and-jewel language as the Bloom system,
   but let the screen own vertical scrolling. There are no nested, clipped
   panes around the emotion choices or the long reflection copy. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-actions {
  animation: keOpeningActionDockIn .52s cubic-bezier(.22,.8,.24,1) both;
  background: linear-gradient(180deg, transparent, rgba(7,24,31,.96) 34%);
  bottom: 0;
  box-sizing: border-box;
  margin: -64px auto 0;
  max-width: 430px;
  padding: 88px 18px max(22px,env(safe-area-inset-bottom));
  pointer-events: none;
  position: sticky;
  text-align: center;
  width: 100%;
  z-index: 8;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-flow-action,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-multi-next {
  align-items: center;
  background: rgba(9,25,31,.94);
  border: 1px solid rgba(215,181,109,.72);
  box-shadow: none;
  color: #f0d38d;
  display: inline-flex;
  font-size: clamp(10px,2.7vw,12px);
  gap: 9px;
  justify-content: center;
  letter-spacing: .07em;
  min-height: 48px;
  min-width: 0;
  padding: 8px 20px;
  pointer-events: auto;
  text-transform: uppercase;
  width: min(100%,390px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-flow-action:not(:disabled),
html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-multi-next:not(:disabled) {
  box-shadow: 0 12px 28px rgba(0,0,0,.3),0 0 22px rgba(215,181,109,.18),inset 0 1px rgba(255,255,255,.06);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-flow-action::before,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-multi-next::before {
  content: '\2192';
  font-size: 14px;
  line-height: 1;
}

/* Multi-select answers keep a checkbox in the same lower-center position on
   every jewel. Selection turns the whole rim into an unmistakable gold halo. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-bloom-answer > strong {
  transform: translateY(-8px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-choice-check {
  align-items: center;
  background: rgba(3,12,16,.72);
  border: 2px solid rgba(255,231,159,.88);
  border-radius: 4px;
  bottom: 14%;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 2px 7px rgba(0,0,0,.38);
  box-sizing: border-box;
  color: #10242c;
  display: flex;
  height: clamp(18px,5vw,23px);
  justify-content: center;
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: clamp(18px,5vw,23px);
  z-index: 4;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-bloom-answer.is-selected {
  background: conic-gradient(from 205deg,#d39316 0%,#ffe681 18%,#fff8c9 31%,#f0b72e 49%,#fff0a0 68%,#d99b18 84%,#ffe675 100%);
  filter:
    brightness(1.08)
    drop-shadow(0 3px 0 rgba(119,73,5,.8))
    drop-shadow(0 11px 20px rgba(0,0,0,.26));
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-bloom-answer.is-selected::before {
  inset: 6px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-bloom-answer.is-selected::after {
  animation: none !important;
  background: #fff4af;
  inset: 0;
  opacity: 1;
  padding: 6px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-bloom-answer.is-selected .ke-opening-choice-check {
  background: linear-gradient(145deg,#fff7c7,#e7ae2d);
  border-color: #fffbdc;
  box-shadow: inset 0 1px rgba(255,255,255,.42),0 2px 7px rgba(0,0,0,.38);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-options.is-multiple .ke-opening-bloom-answer.is-selected .ke-opening-choice-check::after {
  content: '\2713';
  font: 1000 clamp(13px,3.8vw,17px)/1 'DM Sans',sans-serif;
}

@keyframes keOpeningActionDockIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin-emotion {
  align-items: stretch;
  display: block;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0;
  scrollbar-color: rgba(215,181,109,.58) rgba(8,23,30,.32);
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-question-header {
  background: linear-gradient(180deg,rgba(8,25,32,.99) 0%,rgba(8,25,32,.94) 78%,transparent 100%);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-checkin-emotion-main {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 760px;
  min-height: calc(100dvh - 74px);
  padding: 12px max(14px,env(safe-area-inset-right)) max(34px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"] {
  height: var(--ke-opening-content-height) !important;
  max-width: 430px;
  min-height: var(--ke-opening-content-height);
  overflow: visible;
  overscroll-behavior: auto;
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="cascade"]::after {
  display: none;
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-checkin-emotion-hex h1 {
  font-size: clamp(25px,6.8vw,38px) !important;
  max-width: 88%;
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-checkin-emotions .ke-opening-bloom-answer {
  box-shadow: none;
  min-width: 0;
  overflow: visible;
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-checkin-emotions .ke-opening-bloom-answer > strong {
  font-size: clamp(15px,4vw,20px) !important;
  line-height: 1.08 !important;
  max-width: 84% !important;
}

html.ke-rebrand-mode #ke-opening-flow .is-checkin-emotion .ke-opening-checkin-confirmation {
  margin-top: 6px;
  max-width: 430px;
  padding-bottom: max(18px,env(safe-area-inset-bottom));
}

/* Spark rewards are brief, full-screen acknowledgements. The comet is the
   sole bright subject; the surface deliberately avoids decorative sparkles. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-onboarding-spark {
  align-items: stretch;
  background:
    radial-gradient(circle at 50% 43%,rgba(132,57,57,.54),transparent 25rem),
    radial-gradient(circle at 50% 45%,rgba(215,181,109,.15),transparent 38rem),
    linear-gradient(180deg,#0d252e 0%,#081a21 58%,#06151b 100%);
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-main {
  box-sizing: border-box;
  justify-content: flex-end;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 max(22px,env(safe-area-inset-right)) max(38px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  position: relative;
  width: min(100%,760px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film::after {
  background: linear-gradient(180deg,transparent 48%,rgba(4,20,27,.26) 67%,#06151b 96%);
  content: '';
  inset: 0;
  position: absolute;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy {
  position: relative;
  text-shadow: 0 2px 18px rgba(0,0,0,.72);
  z-index: 1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > h1,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(30px, min(8.8vw, 5.6dvh), 46px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.04;
  max-width: 22ch;
  opacity: 0;
  text-wrap: balance;
  transform: translateY(8px);
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > h1 {
  animation: keOpeningLineIn .62s 1.5s ease forwards;
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > p:nth-of-type(1) {
  animation: keOpeningLineIn .62s 2.42s ease forwards;
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > p:nth-of-type(2) {
  animation: keOpeningLineIn .62s 3.34s ease forwards;
  color: #ddbd71 !important;
  margin-top: 8px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-spark-copy > * {
  opacity: 0;
  transform: translateY(8px);
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-screen.is-journal-spark .ke-opening-journal-spark-copy > :nth-child(1) {
  animation: keOpeningLineIn .62s 1.5s ease forwards;
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-screen.is-journal-spark .ke-opening-journal-spark-copy > :nth-child(2) {
  animation: keOpeningLineIn .62s 2.42s ease forwards;
}

html.ke-rebrand-mode #ke-opening-flow.show .ke-opening-screen.is-journal-spark .ke-opening-journal-spark-copy > :nth-child(3) {
  animation: keOpeningLineIn .62s 3.34s ease forwards;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-reward {
  align-items: center;
  animation: keOpeningSparkRewardRise .88s cubic-bezier(.16,1,.3,1) both;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 37% 23%,rgba(255,255,255,.15),transparent 25%),
    radial-gradient(circle at 50% 58%,#7d3349 0%,#541d31 58%,#260b17 100%);
  border: 3px solid #e0ba65;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px rgba(8,23,29,.45),
    0 24px 58px rgba(0,0,0,.42),
    0 0 54px rgba(215,181,109,.32);
  display: flex;
  justify-content: center;
  margin: 0 auto 30px;
  width: clamp(210px,34vw,292px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-reward .ke-spark-comet-mark {
  animation: keOpeningSparkRewardBreathe 1.28s .48s ease-in-out infinite;
  filter: drop-shadow(0 0 17px rgba(255,215,113,.62));
  height: 64%;
  object-fit: contain;
  width: 64%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-main > span,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy > span,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary > span {
  color: #e7c87e;
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 12px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-main h1 {
  font-size: clamp(42px,8vw,78px);
  margin: 0;
  max-width: 700px;
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-main > p,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy > p {
  color: rgba(255,250,242,.78) !important;
  font: 500 clamp(18px,3vw,24px)/1.42 'Cormorant Garamond',serif;
  margin: 18px auto 0;
  max-width: 560px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-spark-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-spark-copy > :is(h1,p) {
  color: #fffaf2 !important;
  font: 500 clamp(25px,7.9vw,38px)/1.12 'Playfair Display',serif;
  margin: 0 auto;
  max-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > h1,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin-spark .ke-opening-spark-copy > p,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-spark-copy > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film video {
    display: none;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film {
    background: #041b26 url('/app/images/ke-flame-kindled-poster.png') center/auto 48% no-repeat;
  }
}

@keyframes keOpeningSparkRewardRise {
  0% { filter: blur(8px); opacity: 0; transform: translateY(34px) scale(.54); }
  68% { filter: blur(0); opacity: 1; transform: translateY(-5px) scale(1.035); }
  100% { filter: blur(0); opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes keOpeningSparkRewardBreathe {
  0%,100% { transform: translateY(1px) scale(.96); }
  50% { transform: translateY(-3px) scale(1.045); }
}

/* The Journal entry opens from a circle into a readable page-shaped jewel.
   Karamo teal appears only on his response card, making authorship instantly
   clear without changing the semantic order of the content. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-journal-reflection {
  align-items: stretch;
  background:
    radial-gradient(circle at 50% 14%,rgba(109,41,66,.28),transparent 32rem),
    linear-gradient(180deg,#0d252e 0%,#081b22 54%,#06151b 100%);
  display: block;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0;
  scrollbar-color: rgba(215,181,109,.58) rgba(8,23,30,.32);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main {
  box-sizing: border-box;
  display: grid;
  gap: clamp(22px,4vw,34px);
  margin: 0 auto;
  max-width: 860px;
  padding: max(38px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary {
  animation: keOpeningJournalCircleOpen .86s cubic-bezier(.16,1,.3,1) both;
  background:
    radial-gradient(circle at 34% 18%,rgba(255,255,255,.11),transparent 24%) padding-box,
    linear-gradient(150deg,#713047 0%,#4d1b2e 58%,#260c18 100%) padding-box,
    conic-gradient(from 28deg,#fff0b6,#b57b2c 18%,#f2d180 36%,#775019 53%,#d3a24c 74%,#fff0b6) border-box;
  border: 3px solid transparent;
  border-radius: clamp(78px,20vw,190px);
  box-shadow: inset 0 0 0 4px rgba(8,22,28,.46),0 28px 72px rgba(0,0,0,.4),0 0 44px rgba(215,181,109,.17);
  box-sizing: border-box;
  margin: 0 auto;
  min-height: clamp(390px,56vw,520px);
  overflow: visible;
  padding: clamp(58px,10vw,96px) clamp(34px,9vw,86px);
  text-align: center;
  width: min(100%,720px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary h1 {
  font-size: clamp(34px,6.2vw,60px);
  line-height: 1.02;
  margin: 0 auto 24px;
  max-width: 620px;
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary > p {
  color: rgba(255,250,242,.86) !important;
  font: 500 clamp(18px,2.8vw,23px)/1.55 'Cormorant Garamond',serif;
  margin: 0 auto;
  max-width: 610px;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection {
  animation: keOpeningKaramoReflectionIn .72s .24s cubic-bezier(.16,1,.3,1) both;
  background:
    radial-gradient(circle at 22% 8%,rgba(255,255,255,.11),transparent 29%),
    linear-gradient(145deg,#1f5958 0%,#123e43 48%,#0b2931 100%);
  border: 2px solid #79c7bd;
  border-radius: clamp(38px,8vw,74px);
  box-shadow: inset 0 0 0 3px rgba(6,23,29,.38),0 26px 64px rgba(0,0,0,.38),0 0 34px rgba(121,199,189,.13);
  box-sizing: border-box;
  color: #f7fffc;
  margin: 0 auto;
  overflow: visible;
  padding: clamp(38px,7vw,64px);
  position: relative;
  width: min(100%,720px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-flame {
  align-items: center;
  background: radial-gradient(circle at 50% 56%,rgba(121,199,189,.2),transparent 68%);
  border: 1px solid rgba(162,225,216,.52);
  border-radius: 50%;
  display: flex;
  height: 112px;
  justify-content: center;
  margin: -82px auto 20px;
  overflow: visible;
  width: 112px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-flame svg {
  filter: drop-shadow(0 0 20px rgba(239,192,68,.55));
  height: 90px;
  overflow: visible;
  width: 68px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection h2 {
  color: #f7fffc !important;
  font-size: clamp(30px,5vw,48px);
  line-height: 1.05;
  margin: 0 0 22px;
  text-align: center;
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection > p {
  color: rgba(247,255,252,.88) !important;
  font: 500 clamp(18px,2.8vw,22px)/1.52 'Cormorant Garamond',serif;
  margin: 0 auto 16px;
  max-width: 610px;
  overflow-wrap: anywhere;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection > strong {
  background: rgba(4,25,30,.3);
  border: 1px solid rgba(162,225,216,.3);
  border-radius: 28px;
  color: #fff0b6;
  display: block;
  font: 600 clamp(21px,3.2vw,28px)/1.35 'Playfair Display',serif;
  margin: 26px auto 18px;
  max-width: 620px;
  padding: clamp(20px,4vw,30px);
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection > small {
  color: rgba(222,245,240,.65);
  display: block;
  font-size: 10px;
  line-height: 1.48;
  margin: 0 auto;
  max-width: 600px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main > .ke-opening-primary {
  animation: keOpeningKaramoReflectionIn .58s .46s cubic-bezier(.16,1,.3,1) both;
  justify-self: center;
  min-width: 230px;
}

@keyframes keOpeningJournalCircleOpen {
  from { border-radius: 50%; filter: blur(5px); opacity: 0; transform: translateY(24px) scale(.62); }
  to { border-radius: clamp(78px,20vw,190px); filter: blur(0); opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes keOpeningKaramoReflectionIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-actions {
    padding-inline: 12px;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary {
    border-radius: clamp(56px,19vw,92px);
    min-height: 0;
    padding: 48px 28px;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary > p {
    font-size: 18px;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection {
    border-radius: 42px;
    margin-top: 34px;
    padding: 48px 27px 34px;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-flame {
    height: 96px;
    margin-top: -82px;
    width: 96px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-main {
    min-height: 520px;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-reward {
    width: 190px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-question-actions,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-reward,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-reward .ke-spark-comet-mark,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-karamo-reflection,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main > .ke-opening-primary {
    animation: none !important;
    filter: none;
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin-emotion,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-onboarding-spark,
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-journal-reflection {
    scroll-behavior: auto !important;
  }
}

/* Final cascade: keep the approved equal-sided geometry above every legacy
   responsive layer in this stylesheet. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-hex {
  aspect-ratio: .8660254 !important;
  max-width: none !important;
  width: min(300px,calc(100vw - 40px)) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] > .ke-opening-bloom-hex {
  aspect-ratio: .8660254 !important;
  width: var(--ke-opening-core-size,min(300px,calc(100vw - 40px))) !important;
}

/* Every opening Bloom maximizes its prompt and answer labels independently.
   Wrapping may happen at spaces, but words never hyphenate or split to make
   the text fit. The JS writes each measured font size inline. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage :is(.ke-opening-bloom-hex h1,.ke-opening-bloom-answer > strong) {
  transition: none !important;
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] {
  height: min(700px,calc(100dvh - 132px));
  overflow-x: hidden;
  overflow-y: auto;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"]::after {
  content: "";
  display: block;
  height: var(--ke-opening-content-height);
  width: 1px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"][data-opening-bloom-layout="column"] :is(.ke-opening-bloom-answer,.ke-opening-reminder-circle) {
  width: var(--ke-opening-choice-size) !important;
}

/* Morning and Evening share one connected hex so the schedule reads as one
   daily rhythm. The point-up silhouette and quiet single rim keep the compact
   native time fields centered inside the measured Bloom connector system. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined {
  aspect-ratio: .8660254 !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  padding: 52px 40px !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined::before {
  border-radius: 0 !important;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined::after {
  content: none !important;
  display: none !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-pair {
  display: grid;
  gap: 8px;
  position: relative;
  width: 100%;
  z-index: 2;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0 0 9px;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row + .ke-opening-reminder-row {
  border-top: 1px solid rgba(255,238,190,.26);
  padding: 10px 0 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row label {
  cursor: default;
  display: block;
  max-width: 100% !important;
  text-align: center;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row label strong {
  color: #fff;
  display: block;
  font: 600 clamp(17px,4.8vw,20px)/1 'Playfair Display',serif;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row label small {
  color: rgba(255,250,242,.72);
  display: block;
  font: 700 clamp(9px,2.35vw,11px)/1.2 'DM Sans',sans-serif;
  margin-top: 3px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row input {
  background: rgba(255,250,242,.98);
  border: 1px solid rgba(255,231,159,.9);
  border-radius: 10px;
  box-sizing: border-box;
  color: #12252d;
  color-scheme: light;
  font: 800 14px 'DM Sans',sans-serif;
  margin: 0;
  min-height: 44px;
  padding-inline: 12px;
  width: min(184px,82%);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row input:focus,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row input:focus-visible {
  box-shadow: inset 0 -2px rgba(215,181,109,.68);
  outline: 0 !important;
  outline-offset: 0 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-notification-hex .ke-opening-notification-times {
  margin-block: clamp(16px,4.5%,24px) 0;
  width: min(86%,340px);
}
/* Keep the spark film on its authored navy backdrop. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-onboarding-spark,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film {
  background: #1a2830 !important;
}

/* Let the true-alpha opening films fill the stage without a rectangular navy
   ceiling. H.264 fallbacks retain lightening only when the runtime selects one. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-story,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-story .ke-opening-story-stage {
  background: transparent !important;
}

html.ke-rebrand-mode #ke-opening-flow [data-opening-media] {
  mix-blend-mode: normal;
  object-fit: contain;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-story .ke-opening-story-flame [data-opening-media] {
  mix-blend-mode: normal;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-story .ke-opening-story-flame [data-opening-media-fallback] {
  mix-blend-mode: normal;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-story .ke-opening-story-flame [data-opening-media-source="matte"] {
  mix-blend-mode: lighten;
}

html.ke-rebrand-mode #ke-opening-flow [data-opening-media][hidden] { display: none !important; }

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame {
  background: transparent !important;
  /* Keep the composited film behind the caption through the viewport bottom.
     Ending this box above the copy exposes the video's encoded navy edge as a
     horizontal seam through the words. */
  inset: max(54px,env(safe-area-inset-top)) 0 0;
  height: auto;
  overflow: visible;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame :is(video,img) {
  transform: scale(1.14) !important;
  transform-origin: center 45%;
  animation: none !important;
  object-fit: contain;
}

@media (max-width: 760px) and (orientation: portrait) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame {
    /* The media frame starts at the Sound button's bottom edge: its top is
       max(18px,safe-area) and its minimum height is 44px. */
    inset: max(62px,calc(env(safe-area-inset-top) + 44px)) 0 0;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame :is(video,img) {
    /* The source media owns real alpha, so no top-edge mask can clip a tall
       Flame as it rises behind the Sound control. */
    -webkit-mask-image: none;
    mask-image: none;
    transform: scale(.84) !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-flame.is-portable-story-fallback img {
    /* Mobile browsers receive the complete original story on a transparent,
       internally contained canvas, so no player edge can crop the Flame. */
    object-fit: contain;
    transform: scale(1) !important;
  }
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-stage::before,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-stage::after { display: none; }

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-line {
  align-items: center;
  background: conic-gradient(from 18deg,#ffe9a0,#c28c35 18%,#fff0ad 36%,#9f6e25 55%,#f0cf78 73%,#fff0ad 86%,#c28c35);
  bottom: max(104px,calc(env(safe-area-inset-bottom) + 90px));
  box-sizing: border-box;
  clip-path: polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);
  display: flex;
  font-size: clamp(22px,4.4vw,40px);
  font-weight: 700;
  isolation: isolate;
  justify-content: center;
  left: 0;
  line-height: 1.18;
  margin-inline: auto;
  max-width: min(90vw,760px);
  min-height: clamp(82px,11dvh,112px);
  padding: clamp(18px,2.8dvh,26px) clamp(42px,10vw,72px);
  right: 0;
  text-shadow: 0 4px 20px rgba(0,0,0,.82);
  width: min(90vw,760px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-line::before {
  background: radial-gradient(circle at 50% 34%,#274752,#071820 78%);
  clip-path: inherit;
  content: '';
  inset: 3px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

@media (max-width: 760px) and (orientation: portrait) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-story-line {
    /* The progress line is 3px tall, so an 8px offset leaves exactly 5px
       between its top edge and the caption hexagon's bottom edge. */
    bottom: max(34px,calc(env(safe-area-inset-bottom) + 8px));
  }
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-sound {
  background: #15242b;
  border: 1px solid #d7b56d;
  border-radius: 999px;
  color: #fffaf2;
  cursor: pointer;
  font: 700 12px/1.2 'DM Sans',sans-serif;
  min-height: 44px;
  padding: 10px 16px;
  position: absolute;
  right: max(18px,env(safe-area-inset-right));
  top: max(18px,env(safe-area-inset-top));
  z-index: 20;
}

html.ke-rebrand-mode #ke-opening-flow :is(.ke-opening-sound,.ke-opening-meet-bloom):focus-visible {
  outline: 3px solid #fff4c5;
  outline-offset: 5px;
  box-shadow: 0 0 0 7px #1a2830;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-hex h1 {
  font-size: clamp(26px,6vw,34px) !important;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-hex .ke-opening-meet-name {
  font: 500 18px/1.25 'Cormorant Garamond',serif;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-hex .ke-opening-meet-flame {
  height: 110px;
  width: 84px;
  margin: 0 auto 8px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-bloom > strong {
  font-size: 16px !important;
  line-height: 1.2;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-main {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  min-height: 100dvh;
  padding: max(72px,calc(env(safe-area-inset-top) + 54px)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));
  /* Let the foreground film blend with the screen's navy backdrop too. */
  z-index: auto;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy-hex {
  flex: 0 0 auto;
  position: relative;
  width: min(320px,calc(100vw - 40px)) !important;
  z-index: 3;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy-hex .ke-opening-bloom-hex-inner {
  box-sizing: border-box;
  padding: 17% 13%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film {
  background: transparent !important;
  position: relative;
  inset: auto;
  flex: 1 1 300px;
  height: clamp(250px,48dvh,500px);
  margin-top: clamp(-96px,-10dvh,-62px);
  min-height: 250px;
  /* Lift the flame over the jewel without painting its navy video matte over it. */
  filter: contrast(1.5);
  mix-blend-mode: lighten;
  overflow: visible;
  width: 100%;
  z-index: 4;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film::after { display: none; }

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film :is(video,img) {
  height: 100%;
  object-fit: contain;
  transform: scale(1.22);
  transform-origin: center;
  width: 100%;
}

/* The help-earned Second Spark keeps the standard shared flame media, but
   presents it at the stronger scale approved for this reward. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-journal-spark .ke-opening-spark-film :is(video,img) {
  transform: scale(1.55);
  transform-origin: center;
}

@media (max-width: 760px) and (orientation: portrait) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-journal-spark .ke-opening-spark-film :is(video,img) {
    transform: translateY(-24px) scale(1.55);
  }
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-onboarding-spark .ke-opening-spark-copy .ke-opening-bloom-hex-inner > :is(h1,p) {
  animation: none;
  opacity: 1;
  transform: none;
  font: 500 clamp(18px,4.5vw,24px)/1.35 'Cormorant Garamond',serif;
  letter-spacing: normal;
  margin: 12px auto 0;
  max-width: 38ch;
  text-transform: none;
  text-wrap: balance;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-onboarding-spark .ke-opening-spark-copy .ke-opening-bloom-hex-inner > h1 {
  font-family: 'Playfair Display',serif;
  font-size: clamp(27px,6.5vw,38px);
  margin: 0 auto;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-spark-copy > .ke-opening-bloom-hex-inner {
  opacity: 1;
  transform: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy .ke-opening-error:empty { display: none; }

@media (max-height: 520px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-film { height: 150px; min-height: 150px; }
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-spark-copy-hex { width: min(250px,calc(100vw - 120px)) !important; }
}

/* The introductory Journal uses the app's growing writing page. Only the
   backgrounds are clipped: all writing stays in the document's scroll flow. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main {
  --ke-opening-journal-rim: conic-gradient(from 0deg,
    #ffe9a0 0 16.666%, #c28c35 16.666% 33.333%, #79501a 33.333% 50%,
    #9f7127 50% 66.666%, #f0ce78 66.666% 83.333%, #fff0ad 83.333% 100%);
  gap: 28px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main .ke-opening-reflection-unit,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-response {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main [hidden] {
  display: none !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-continuation {
  display: grid;
  gap: 10px;
  width: min(100%, 460px);
  margin: 18px auto 0;
  color: rgba(255, 249, 235, .9);
  font: 600 14px/1.35 'DM Sans', sans-serif;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-continuation textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 118px;
  max-height: 36vh;
  resize: vertical;
  border: 1px solid rgba(236, 202, 113, .82);
  border-radius: 22px;
  padding: 16px 18px;
  background: rgba(8, 42, 49, .92);
  color: #fff9eb;
  font: 500 17px/1.45 'DM Sans', sans-serif;
  caret-color: #edc96f;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-continuation textarea:focus {
  outline: 2px solid #edc96f;
  outline-offset: 3px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-journal-reflection {
  scroll-padding-bottom: max(190px, calc(env(safe-area-inset-bottom, 0px) + 150px));
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-link {
  background: linear-gradient(#f1dca7, #d7b56d);
  display: block;
  flex: 0 0 auto;
  height: clamp(26px,5vw,34px);
  width: 3px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page {
  --ke-opening-journal-cap: clamp(82px,13vw,112px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #fffaf0;
  isolation: isolate;
  margin: 0;
  min-height: 460px;
  overflow: visible;
  padding: calc(var(--ke-opening-journal-cap) + 26px) clamp(48px,7vw,72px);
  position: relative;
  scroll-margin-top: 24px;
  width: min(100%,460px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page::before,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page::after {
  clip-path: polygon(50% 0,100% var(--ke-opening-journal-cap),100% calc(100% - var(--ke-opening-journal-cap)),50% 100%,0 calc(100% - var(--ke-opening-journal-cap)),0 var(--ke-opening-journal-cap));
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page::before {
  background: var(--ke-opening-journal-rim);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page::after {
  background:
    radial-gradient(circle at 32% 13%,rgba(255,255,255,.1),transparent 22%),
    radial-gradient(circle at 50% 45%,#79364e 0%,#542238 55%,#260d1a 100%);
  inset: 4px;
  z-index: -1;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page > p {
  color: #fffaf0;
  font: 500 clamp(20px,2.5vw,23px)/1.65 var(--ke-font-reflective,'Cormorant Garamond',serif);
  margin: 0;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: pre-wrap;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page [data-opening-reflection-part] + [data-opening-reflection-part] {
  margin-top: 20px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page > small {
  color: rgba(255,250,240,.72);
  display: block;
  font: 400 11px/1.5 'DM Sans',sans-serif;
  margin-top: 24px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-thoughts {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 38% 25%,rgba(255,255,255,.035),transparent 29%) padding-box,
    radial-gradient(circle at 50% 42%,#106e78 0 27%,#072e35 72%,#010303 100%) padding-box,
    var(--ke-opening-journal-rim) border-box;
  border: 4px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),inset -9px -11px 18px rgba(0,0,0,.18);
  box-sizing: border-box;
  color: #fffaf0;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  width: 190px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-thoughts strong {
  font: 600 22px/1.08 var(--ke-font-display,'Playfair Display',serif);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-thoughts span {
  font: 400 10px/1.25 'DM Sans',sans-serif;
  margin-top: 10px;
  max-width: 128px;
  opacity: .76;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-thoughts:disabled {
  cursor: wait;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-thoughts:focus-visible,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-continue:focus-visible {
  outline: 2px solid #fff0b6;
  outline-offset: 5px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-reflection-main > .ke-opening-journal-continue {
  animation: none;
  background: transparent;
  border: 1px solid rgba(215,181,109,.6);
  border-radius: 999px;
  box-shadow: none;
  color: #f1dca7;
  font: 700 14px/1.2 'DM Sans',sans-serif;
  letter-spacing: .04em;
  min-height: 68px;
  min-width: 0;
  padding: 14px 18px;
  width: min(100%,370px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-continue::before {
  content: none;
}

@media (max-width: 720px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-page {
    --ke-opening-journal-cap: clamp(68px,23vw,88px);
    min-height: min(110vw,410px);
    padding: calc(var(--ke-opening-journal-cap) + 22px) 38px;
    width: min(100%,370px);
  }
}

/* Match the seamless canvas used by the other opening questions. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-reminders {
  background: var(--kb-navy,#1a2830);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-reminders :is(
  .ke-opening-question-header,
  .ke-opening-reminders-main,
  .ke-opening-bloom-stage,
  .ke-opening-explainer
) {
  background: transparent;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-hex {
  aspect-ratio: .8660254 !important;
  width: min(300px,calc(100vw - 40px)) !important;
}

html.ke-rebrand-mode #ke-opening-flow :is(.ke-opening-journal-summary,.ke-opening-karamo-reflection).ke-opening-reflection-circle {
  aspect-ratio: 1 !important;
  border: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 5px !important;
  width: min(100%,720px) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle .ke-opening-reflection-paper {
  border-radius: 50% !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* The first Journal page and Karamo's response use the same point-up Journey
   hexagon as the Flame path. The nested paper preserves a slim metallic rim
   while keeping long entries independently scrollable. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle.ke-opening-reflection-journey-hex {
  aspect-ratio: .8660254 !important;
  background: conic-gradient(from 215deg,#82591f,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d) !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(215,181,109,.18));
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 5px !important;
  width: min(100%,720px) !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle.ke-opening-reflection-journey-hex .ke-opening-reflection-paper {
  border-radius: 0 !important;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: clamp(104px,16vw,142px) clamp(48px,10vw,96px) !important;
  scroll-padding-block: clamp(104px,16vw,142px);
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-journal-summary.ke-opening-reflection-journey-hex {
  animation-name: keOpeningJournalHexOpen;
}

html.ke-rebrand-mode #ke-opening-flow [data-opening-journal-part],
html.ke-rebrand-mode #ke-opening-flow [data-opening-reflection-part] {
  min-height: 1em;
}

html.ke-rebrand-mode #ke-opening-flow [data-opening-journal-part].is-revealing::after {
  animation: keOpeningJournalCaret .72s steps(1,end) infinite;
  color: #9a6c27;
  content: '\2758';
  display: inline;
  margin-left: 2px;
}

@keyframes keOpeningJournalHexOpen {
  from { filter: blur(5px) drop-shadow(0 12px 18px rgba(0,0,0,.2)); opacity: 0; transform: translateY(24px) scale(.62); }
  to { filter: drop-shadow(0 24px 30px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(215,181,109,.18)); opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes keOpeningJournalCaret {
  0%,48% { opacity: 1; }
  49%,100% { opacity: 0; }
}

@media (max-width: 560px) {
  html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle.ke-opening-reflection-journey-hex {
    width: calc(100vw - 26px) !important;
  }

  html.ke-rebrand-mode #ke-opening-flow .ke-opening-reflection-circle.ke-opening-reflection-journey-hex .ke-opening-reflection-paper {
    padding: clamp(78px,22vw,102px) clamp(40px,12vw,58px) !important;
    scroll-padding-block: clamp(78px,22vw,102px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ke-rebrand-mode #ke-opening-flow [data-opening-journal-part].is-revealing::after,
  html.ke-rebrand-mode #ke-opening-flow [data-opening-reflection-part].is-revealing::after {
    animation: none !important;
    content: '';
  }
}

/* Keep the post-ignition sequence on the same full-viewport brand navy as the
   opening prompt. Story and Day One retain their purpose-built film surfaces. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen:not(.is-ignition):not(.is-story):not(.is-day-one) {
  background: var(--kb-navy, #1a2830);
}

/* The Meet hex already supplies its own localized light. The older page-sized
   aura was clipped by the header and explainer regions, making both read as
   separate rectangular blocks against the middle of this screen. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-meet .ke-opening-meet-aura {
  display: none;
}

/* Meet uses the same single full-height canvas as Name. Its Back control floats
   over that canvas instead of reserving a separate question-header row. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-meet .ke-opening-main-with-explainer {
  height: 100vh;
  height: 100dvh;
  padding-top: max(82px,calc(env(safe-area-inset-top) + 72px));
}

/* Meet has one fixed prompt and one answer, so it does not need the canonical
   intake scroller. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-meet .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  overflow: visible;
}

/* All ten intake questions share one uninterrupted viewport canvas. The
   progress header is an overlay, while the scrollable constellation owns the
   full screen behind both the top controls and the bottom test controls. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-question {
  overflow: hidden;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-question .ke-opening-question-header {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-question .ke-opening-question-main {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-question .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  --ke-opening-cascade-top-inset: 155px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-question .ke-opening-bloom-stage[data-opening-canonical-bloom="true"]::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/* The first Flame Check-In uses that same edge-to-edge cascade shell. The
   header, main, and stage stay transparent so the prompt and choices scroll
   behind both test controls without separate top or bottom panels. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin:not(.is-checkin-emotion) {
  overflow: hidden;
  padding: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin:not(.is-checkin-emotion) .ke-opening-question-header {
  background: transparent;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin:not(.is-checkin-emotion) .ke-opening-checkin-main {
  background: transparent;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin:not(.is-checkin-emotion) .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  --ke-opening-cascade-top-inset: 155px;
  background: transparent;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen.is-checkin:not(.is-checkin-emotion) .ke-opening-bloom-stage[data-opening-canonical-bloom="true"]::-webkit-scrollbar {
  height: 0;
  width: 0;
}

html.ke-rebrand-mode #ke-opening-flow :is(
  .ke-opening-question-header,
  .ke-opening-simple-header,
  .ke-opening-explainer,
  .ke-opening-question-footer
) {
  background: transparent;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  background: transparent;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-bloom-stage[data-opening-canonical-bloom="true"]::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/* Keep the introduction action circular inside the onboarding flow. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-bloom,
html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-bloom::before {
  border-radius: 50% !important;
  clip-path: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-bloom {
  aspect-ratio: 1 / 1 !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-meet-bloom::after {
  content: none !important;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-instruction {
  color: #fff;
  font: 700 13px/1.2 'DM Sans',sans-serif;
  margin: 0 auto 4px;
  max-width: 140px;
  text-align: center;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row label small {
  display: none;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-pair {
  gap: 4px;
  max-width: 180px;
  margin: auto;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row {
  gap: 4px;
  padding-bottom: 4px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row + .ke-opening-reminder-row {
  padding-top: 6px;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-reminder-circle.is-combined .ke-opening-reminder-row input {
  min-height: 40px;
  width: 140px;
}

/* Reminder and notification steps share the intake's full-height canvas.
   The constellation scrolls behind transparent top and bottom controls. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen:is(.is-reminders,.is-notification) {
  overflow: hidden;
  padding: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen:is(.is-reminders,.is-notification) .ke-opening-question-header {
  background: transparent;
  inset: 0 0 auto;
  position: absolute;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen:is(.is-reminders,.is-notification) .ke-opening-main-with-explainer {
  background: transparent;
  box-sizing: border-box;
  display: block;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  max-width: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: none;
  width: 100%;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen:is(.is-reminders,.is-notification) .ke-opening-main-with-explainer::-webkit-scrollbar {
  height: 0;
  width: 0;
}

html.ke-rebrand-mode #ke-opening-flow .ke-opening-screen:is(.is-reminders,.is-notification) .ke-opening-bloom-stage[data-opening-canonical-bloom="true"] {
  --ke-opening-cascade-top-inset: 155px;
  background: transparent;
  height: var(--ke-opening-content-height) !important;
  min-height: 0;
  overflow: visible;
}

/* Give the saved Daily Rhythm times their own quiet band below the headline.
   The narrower measure protects the sloped hex sides, while the top margin
   keeps the schedule visually separate from the final headline line. */
html.ke-rebrand-mode #ke-opening-flow .ke-opening-notification-hex .ke-opening-notification-times {
  margin-block: clamp(16px,4.5%,24px) 0;
  width: min(86%,340px);
}