/* Keep · Onboarding 01 Welcome (approved Option 2, November 6, 2026) · web component v1
   Scoped under .kw. Values from keep-tokens.json v1.1 and the Design Quality Standard v2.0.
   Fonts: uses the site's self-hosted "Instrument Sans" (no new web fonts). Button labels use the system UI font
   (SF Pro on Apple devices, which is what the app uses). */

.kw {
  --kw-scale: 1;
  --kw-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* light: occasion ground is Forest */
  --kw-ground: #183C35;
  --kw-ivory: #F6F4ED;
  --kw-sage: #A8BDAA;
  --kw-citrus: #D6E5A5;
  --kw-forest: #183C35;
  --kw-edge: rgba(36, 43, 40, .14);
  position: relative;
  width: calc(393px * var(--kw-scale));
  height: calc(852px * var(--kw-scale));
  margin: 0;
  border-radius: calc(44px * var(--kw-scale));
  box-shadow: 0 30px 60px -20px rgba(13, 26, 23, .35); /* tokens elevation.webDevice: the one device shadow */
  flex: none;
}
/* dark: occasion screens use Night with Ivory and Citrus (the dark app icon's ground) */
.kw[data-theme="dark"] { --kw-ground: #0D1A17; --kw-ivory: #F1F0E8; --kw-edge: rgba(241, 240, 232, .14); }
@media (prefers-color-scheme: dark) {
  .kw[data-theme="auto"] { --kw-ground: #0D1A17; --kw-ivory: #F1F0E8; --kw-edge: rgba(241, 240, 232, .14); }
}

.kw-screen {
  position: absolute; top: 0; left: 0;
  width: 393px; height: 852px;
  transform: scale(var(--kw-scale)); transform-origin: 0 0;
  border-radius: 44px; overflow: hidden;
  background: var(--kw-ground); color: var(--kw-ivory);
  display: flex; flex-direction: column;
  padding: 59px 20px 34px; box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.kw-screen *, .kw-screen *::before, .kw-screen *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* QA 08 device frame: rounded screen, 1 px hairline edge, no bezel */
.kw-screen::after { content: ""; position: absolute; inset: 0; border-radius: 44px; box-shadow: inset 0 0 0 1px var(--kw-edge); pointer-events: none; }

/* status bar, Dynamic Island, home indicator */
.kw-status { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 52px; font: 600 17px/22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: var(--kw-ivory); }
.kw-status svg { display: block; }
.kw-status-icons { display: flex; align-items: center; gap: 6px; }
.kw-island { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.kw-home { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--kw-ivory); }
.kw--no-status .kw-status, .kw--no-status .kw-island { display: none; }

.kw-nav { height: 44px; flex: none; }
.kw-grow { flex: 1 1 auto; min-height: 0; }

/* A-L2 reversed lockup, 40 pt: Hold symbol 0.86 x type size, gap 0.2 x, cradle bottom on the baseline */
.kw-lockup { display: flex; justify-content: center; align-items: flex-end; gap: 8px; color: var(--kw-ivory); }
.kw-lockup svg { display: block; height: 34.4px; width: auto; }
.kw-lockup span { font: 500 40px/1 "Instrument Sans", sans-serif; letter-spacing: -.01em; margin-bottom: -6.4px; }

/* hero-density strata, centred stack on its baseline */
.kw-strata { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; }
.kw-band { height: 28px; border-radius: 14px; background: var(--kw-citrus); }
.kw-band--next { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(214, 229, 165, .55); }
.kw-base { width: 100%; height: 4px; border-radius: 2px; background: rgba(168, 189, 170, .55); }

/* buttons (shown, not interactive on the web) */
.kw-primary { margin-top: 24px; min-height: 50px; border-radius: 999px; background: var(--kw-citrus); color: var(--kw-forest); display: flex; align-items: center; justify-content: center; font: 600 17px/22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.kw-tertiary { margin-top: 4px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--kw-ivory); font: 600 17px/22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }

/* ---------- motion (storyboard A1). Without JS, or before it runs, the final state shows. ---------- */
@keyframes kw-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kw-land { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes kw-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .kw--armed .kw-lockup, .kw--armed .kw-band, .kw--armed .kw-primary, .kw--armed .kw-tertiary { opacity: 0; }
  .kw--armed .kw-base { transform: scaleX(0); }
  .kw--play .kw-lockup   { animation: kw-in 320ms var(--kw-settle) 0ms both; }
  .kw--play .kw-base     { animation: kw-draw 480ms var(--kw-settle) 120ms both; transform-origin: 50% 50%; }
  .kw--play .kw-band-3   { animation: kw-land 480ms var(--kw-settle) 300ms both; }
  .kw--play .kw-band-2   { animation: kw-land 480ms var(--kw-settle) 460ms both; }
  .kw--play .kw-band-1   { animation: kw-land 480ms var(--kw-settle) 620ms both; }
  .kw--play .kw-band--next { animation: kw-in 200ms var(--kw-settle) 900ms both; }
  .kw--play .kw-primary  { animation: kw-in 320ms var(--kw-settle) 1260ms both; }
  .kw--play .kw-tertiary { animation: kw-in 320ms var(--kw-settle) 1320ms both; }
}
/* Reduce Motion: one 200 ms cross-fade, all content present */
@media (prefers-reduced-motion: reduce) {
  .kw--armed .kw-screen { opacity: 0; }
  .kw--play .kw-screen { animation: kw-in 200ms linear both; }
}