/*
 * VoidQuest video pitch. A fixed 1920 x 1080 stage, scaled to the window.
 * Palette and type follow the public landing page (apps/web-admin/landing):
 * the flame ramp, cream paper, white-framed phones with a warm glow.
 * Inter is vendored (assets/fonts, OFL) so the recording looks the same on
 * every machine and works offline.
 *
 * Elements animated by pitch.js must not carry a CSS transform of their own:
 * the engine writes `transform` and `opacity` inline every frame.
 */

@font-face {
  font-family: 'Inter Pitch';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url(./assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Pitch';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url(./assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream-50: #fbf9f4;
  --cream-100: #f1efe8;
  --flame-50: #faeeda;
  --flame-100: #fac775;
  --flame-200: #ef9f27;
  --flame-400: #ba7517;
  --flame-600: #854f0b;
  --flame-800: #633806;
  --flame-900: #412402;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --trust-50: #e6f1fb;
  --trust-400: #378add;
  --trust-600: #185fa5;
  --trust-700: #114a88;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background: #000;
  overflow: hidden;
}
body.running {
  cursor: none;
}
ul {
  list-style: none;
}
img,
video {
  display: block;
}

#viewport {
  position: fixed;
  inset: 0;
  background: #000;
}
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin: -540px 0 0 -960px;
  transform-origin: 50% 50%;
  background: #000;
  overflow: hidden;
  font-family: 'Inter Pitch', system-ui, sans-serif;
  color: var(--flame-900);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

/* ------------------------------------------------------------ scenes */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
}
.bg-hero {
  background: linear-gradient(180deg, var(--flame-50) 0%, var(--cream-50) 55%, #fff 100%);
}
.bg-cream {
  background: linear-gradient(180deg, var(--cream-50) 0%, #fdf5e6 60%, var(--flame-50) 100%);
}
.bg-dark {
  background: var(--flame-900);
  color: var(--flame-50);
}
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.b1 {
  left: -320px;
  top: -340px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(closest-side, rgba(250, 199, 117, 0.5), rgba(250, 199, 117, 0));
}
.b2 {
  right: -300px;
  top: 260px;
  width: 820px;
  height: 820px;
  background: radial-gradient(closest-side, rgba(239, 159, 39, 0.22), rgba(239, 159, 39, 0));
}
.b3 {
  right: -260px;
  bottom: -420px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(closest-side, rgba(250, 199, 117, 0.42), rgba(250, 199, 117, 0));
}
.d1 {
  right: -200px;
  top: -200px;
  width: 1400px;
  height: 1400px;
  background: radial-gradient(closest-side, rgba(239, 159, 39, 0.2), rgba(239, 159, 39, 0));
}
.blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 50;
}

/* ------------------------------------------------------------ type */
.mid {
  color: var(--flame-200);
  padding: 0 0.12em;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  border: 2px solid rgba(239, 159, 39, 0.35);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 10px 24px 10px 20px;
  font-size: 24px;
  font-weight: 700;
  color: var(--flame-800);
  white-space: nowrap;
}
.kicker .dot,
.pill .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--flame-400);
}
.kicker.dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--flame-100);
}
.kicker.dark .dot {
  background: var(--flame-200);
}
.kicker .mid {
  color: var(--flame-400);
}
.h {
  margin-top: 30px;
  font-size: 82px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--flame-900);
  text-wrap: balance;
}
.h.light {
  color: #fff;
}
.h.sm {
  font-size: 70px;
}
.nw {
  white-space: nowrap;
}
.numbers .kicker {
  align-self: center;
}
.sub {
  margin-top: 28px;
  font-size: 34px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--flame-800);
  text-wrap: pretty;
}
.sub.light {
  color: rgba(250, 238, 218, 0.9);
}
.sub.strong {
  color: var(--flame-600);
  font-weight: 700;
}
.sub.small {
  font-size: 30px;
  color: var(--flame-600);
}

/* text column beside the phones */
.col {
  position: absolute;
  left: 150px;
  top: 0;
  bottom: 0;
  width: 690px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stack {
  display: grid;
}
.stack > .grp {
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
}
.stack.center > .grp {
  align-items: center;
}
.stack.center .kicker {
  align-self: center;
}

.qlist {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qcard {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border-radius: 28px;
  padding: 16px 28px 16px 16px;
  box-shadow: 0 18px 40px -20px rgba(65, 36, 2, 0.25), 0 0 0 1px rgba(65, 36, 2, 0.05);
  width: 560px;
}
.qicon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--flame-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qicon img {
  width: 48px;
  height: 48px;
  mix-blend-mode: multiply;
}
.qtext b {
  display: block;
  font-size: 31px;
  font-weight: 700;
}
.qtext small {
  display: block;
  margin-top: 4px;
  font-size: 23px;
  font-weight: 500;
  color: var(--flame-600);
}
.tags {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.tags li {
  font-size: 36px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(239, 159, 39, 0.45);
  color: var(--flame-800);
}
.big-banner {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 3px solid rgba(250, 199, 117, 0.8);
  border-radius: 30px;
  padding: 26px 36px 26px 28px;
  font-size: 38px;
  font-weight: 750;
  box-shadow: 0 24px 50px -24px rgba(65, 36, 2, 0.35);
  align-self: flex-start;
}
.big-pill {
  margin-top: 44px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fbe9cc;
  border: 3px solid rgba(239, 159, 39, 0.45);
  border-radius: 999px;
  padding: 16px 44px 16px 24px;
  box-shadow: 0 24px 50px -24px rgba(65, 36, 2, 0.3);
}
.bp-text small {
  display: block;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flame-600);
}
.bp-text b {
  display: block;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
}

/* ------------------------------------------------------------ icons */
.coin {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe3a3 0 18%, #f5b73c 45%, #c98614 100%);
  box-shadow: inset 0 0 0 3px rgba(133, 79, 11, 0.35);
  flex: none;
}
.coin.s {
  width: 18px;
  height: 18px;
  box-shadow: inset 0 0 0 2px rgba(133, 79, 11, 0.35);
}
.flame {
  display: inline-block;
  flex: none;
  width: 56px;
  height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef6c1f' d='M12.6 1.8c.9 3.4-1.1 5.3-2.7 7.1C8.4 10.6 7 12.3 7 14.8a5 5 0 0 0 10 0c0-2.5-1.3-4.2-2.4-5.5.1 1.7-.5 2.9-1.6 3.4.6-3.9-.3-7.9-.4-10.9z'/%3E%3Cpath fill='%23fac775' d='M12.1 12.4c.4 1.6-.4 2.4-1.1 3.2-.5.6-.9 1.1-.9 1.9a2 2 0 0 0 4 0c0-1.3-.8-2.3-2-5.1z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.flame.s {
  width: 20px;
  height: 20px;
}
.flame.xl {
  width: 120px;
  height: 120px;
}
.sun {
  display: inline-block;
  flex: none;
  width: 56px;
  height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23f5b01b'/%3E%3Cg stroke='%23f5b01b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
}
.sun.s {
  width: 26px;
  height: 26px;
}
/* line icons, drawn as masks so they take the text colour */
.mask,
.back,
.chev,
.plus,
.ti,
.xi,
.fi,
.cupi,
.shieldi,
.tick {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.back {
  width: 26px;
  height: 26px;
  color: var(--slate-700);
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.chev {
  width: 26px;
  height: 26px;
  color: var(--slate-500);
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.chev.r {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  color: var(--trust-600);
}
.plus {
  width: 18px;
  height: 18px;
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.ti {
  width: 25px;
  height: 25px;
}
.ti.cal,
.xi.cal {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.ti.shop {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}
.ti.book {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
.ti.cup,
.cupi {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E");
}
.shieldi {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.cupi,
.shieldi {
  width: 26px;
  height: 26px;
  color: var(--flame-400);
}
.xi {
  width: 26px;
  height: 26px;
}
.xi.thermo {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.5a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z'/%3E%3C/svg%3E");
}
.xi.case {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}
.fi {
  width: 38px;
  height: 38px;
  color: var(--flame-400);
}
.fi.fi-phone {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}
.fi.fi-lang {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");
}
.fi.fi-a11y {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M4 8.5l8 1.5 8-1.5M12 10v5M9 22l3-7 3 7'/%3E%3C/svg%3E");
}
.fi.fi-fam {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 12 0v1'/%3E%3Ccircle cx='18' cy='9' r='3'/%3E%3Cpath d='M16 21v-1a5 5 0 0 1 6-4.9'/%3E%3C/svg%3E");
}
.tick {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  color: #5f9a52;
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ phones */
.kb {
  position: absolute;
  inset: 0;
  transform-origin: 1330px 540px;
}
.phone-wrap {
  position: absolute;
  top: 62px;
  width: 440px;
  height: 955px;
}
.phone-wrap.at-center {
  left: 1110px;
}
.phone-wrap.at-left {
  left: 880px;
}
.phone-wrap.at-right {
  left: 1340px;
}
.phone-wrap.lower {
  top: 100px;
}
.glow {
  position: absolute;
  inset: -70px -80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 199, 117, 0.75), rgba(239, 159, 39, 0.16) 70%, rgba(239, 159, 39, 0));
}
.phone {
  position: relative;
  width: 440px;
  height: 955px;
  padding: 10px;
  border-radius: 56px;
  background: #fff;
  box-shadow: 0 50px 90px -30px rgba(65, 36, 2, 0.35), 0 0 0 1px rgba(65, 36, 2, 0.06);
}
.phone-wrap.dark .phone {
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.screen {
  position: relative;
  width: 420px;
  height: 935px;
  border-radius: 46px;
  overflow: hidden;
  background: #f2efe8;
}
.screen.parent {
  background: var(--slate-50);
}
.layer {
  position: absolute;
  inset: 0;
}
.layer > .fb,
.layer > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.layer > img.fb,
.layer > video {
  object-fit: cover;
}
.layer > video {
  display: none;
  background: #000;
}
.layer.has-clip > video {
  display: block;
}
.layer.has-clip > .fb {
  visibility: hidden;
}
.fbgone {
  display: none !important;
}
.coin-pop {
  position: absolute;
  top: 118px;
  right: -86px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 999px;
  padding: 14px 26px 14px 16px;
  font-size: 28px;
  font-weight: 800;
  color: var(--flame-900);
  box-shadow: 0 20px 40px -16px rgba(65, 36, 2, 0.4), 0 0 0 2px rgba(250, 199, 117, 0.6);
}

/* ------------------------------------------------------------ app mocks */
.app {
  position: absolute;
  inset: 0;
  font-size: 15px;
  color: var(--slate-900);
  overflow: hidden;
}
.app.over {
  z-index: 2;
}
.parent-app {
  background: var(--slate-50);
}
.kid-app {
  background: #f2efe8;
  color: var(--flame-900);
}
.sbar {
  height: 44px;
  padding: 16px 30px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-500);
}
.kid-app .sbar {
  color: #a8997f;
}
.sb-icons {
  width: 26px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  margin-top: 3px;
  background: linear-gradient(90deg, currentColor 70%, transparent 70%) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat;
}
.ahead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px;
}
.ahead h3 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ahead.kidh .back {
  color: var(--flame-800);
}
.ahint {
  font-size: 14px;
  line-height: 1.45;
  color: var(--slate-500);
  padding: 0 20px 14px;
}
.acard {
  margin: 0 16px 12px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  padding: 14px 16px;
}
.acard.dim {
  opacity: 0.9;
}
.arow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arow b,
.exc b {
  font-size: 17px;
  font-weight: 700;
}
.chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-600);
}
.chip.trust {
  background: var(--trust-50);
  color: var(--trust-700);
}
.chip.sun-chip {
  background: var(--flame-50);
  color: var(--flame-600);
}
.amuted {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--slate-500);
}
.amuted .mid {
  color: #94a3b8;
}
.alabel {
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.alabel.pad {
  margin: 6px 22px 10px;
}
.aday {
  margin-top: 8px;
  padding: 11px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  background: var(--slate-50);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-800);
}
.aday .amuted {
  margin: 0;
}
.aday.new {
  background: var(--trust-50);
  box-shadow: inset 0 0 0 2px var(--trust-400);
}
.aadd {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--trust-600);
}
.abtn {
  margin: 4px 16px 12px;
  height: 48px;
  border-radius: 14px;
  background: var(--trust-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
.exc {
  display: flex;
  align-items: center;
  gap: 14px;
}
.xicon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.xicon.red {
  background: #fee2e2;
  color: #dc2626;
}
.xicon.amber {
  background: #fef3c7;
  color: #b45309;
}
.xicon.slate {
  background: var(--slate-100);
}
.xicon img {
  width: 28px;
  height: 28px;
  mix-blend-mode: multiply;
}
.xicon.blue {
  background: var(--trust-50);
  color: var(--trust-600);
}
.kidchips {
  padding: 0 16px 12px;
  display: flex;
  gap: 8px;
}
.kchip {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--slate-200);
}
.kchip.on {
  background: var(--slate-900);
  border-color: var(--slate-900);
  color: #fff;
}
.panes {
  position: relative;
  margin: 0 16px;
  height: 700px;
  overflow: hidden;
  border-radius: 18px;
}
.pane {
  position: absolute;
  inset: 0;
  background: var(--slate-50);
}
.daynav {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.daynav > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.daynav b {
  font-size: 17px;
  font-weight: 700;
}
.plist {
  margin-top: 12px;
}
.plist li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px 10px 10px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
}
.plist b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}
.plist small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--slate-500);
}
.plist em,
.kcard em {
  margin-left: auto;
  font-style: normal;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--flame-600);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.plist em::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe3a3 0 18%, #f5b73c 45%, #c98614 100%);
}
.qicon.s {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--slate-100);
}
.qicon.s img,
.kcard .qicon img {
  width: 30px;
  height: 30px;
}
.homebar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 130px;
  height: 5px;
  margin-left: -65px;
  border-radius: 3px;
  background: var(--slate-800);
  opacity: 0.75;
}

/* kid mock */
.khead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 0;
}
.kav {
  width: 88px;
  height: 88px;
}
.kgreet p small {
  font-size: 15px;
  color: #a17c45;
}
.kgreet p b {
  font-size: 28px;
  font-weight: 800;
}
.kpills {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.kpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid #f3cf92;
  background: #fbe9cc;
  font-size: 15px;
  font-weight: 700;
}
.kpill.white {
  background: #fff;
  border-color: #efe6d6;
}
.kpill small {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #a17c45;
}
.kprog {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 16px 20px 10px;
}
.kprog i {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  border: 1.5px solid var(--flame-200);
  background: #fffaf0;
}
.kprog i.on {
  background: var(--flame-200);
}
.kprog span {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 700;
}
.kbanner {
  margin: 6px 18px 4px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fdf1dc;
  border: 1.5px solid #f3cf92;
  border-radius: 18px;
}
.kbanner b {
  font-size: 16.5px;
  font-weight: 700;
}
.ksec {
  padding: 14px 22px 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--flame-800);
}
.ksec span {
  color: #b8a27e;
}
.kcard {
  margin: 0 18px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #faf8f3;
  border-radius: 18px;
  padding: 11px 14px 11px 11px;
}
.kcard .qicon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  box-shadow: none;
}
.kcard b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.kcard small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #8a7a64;
}
.kcard em {
  color: #7a6a55;
  font-weight: 500;
}
.kcard.now {
  background: #fbeacb;
  box-shadow: inset 0 0 0 1.5px #f1c983;
}
.kcard.done b {
  color: #5f8a52;
}
.kcard.done {
  background: #f5f6f0;
}
.ktabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  padding-bottom: 14px;
  display: flex;
  background: #fff;
  border-top: 1px solid #eee7da;
}
.ktabs span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-600);
}
.ktabs span.on {
  color: var(--flame-400);
}
.shero {
  padding: 30px 24px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shero-t {
  margin-top: 14px;
  font-size: 34px;
  font-weight: 800;
}
.shero-c {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--flame-800);
  padding: 0 14px;
}
.srows {
  margin: 22px 16px 0;
  background: #fff;
  border-radius: 18px;
}
.srows > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
}
.srows > div + div {
  border-top: 1px solid #f1ebe0;
}
.srows b {
  margin-left: auto;
  font-weight: 700;
}

/* ------------------------------------------------------------ slides */
.center-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 160px;
}
.center-slide .kicker {
  align-self: center;
}
.slide-h {
  margin-top: 34px;
  font-size: 108px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.032em;
  color: var(--flame-900);
  text-wrap: balance;
}
.slide-h.light {
  color: #fff;
  margin-top: 0;
}
.slide-sub {
  margin-top: 36px;
  font-size: 40px;
  line-height: 1.38;
  font-weight: 500;
  color: var(--flame-800);
}
.mark {
  width: 150px;
  height: 150px;
  margin-bottom: 36px;
}
.values {
  margin-top: 72px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.values li {
  font-size: 32px;
  font-weight: 650;
  padding: 20px 34px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
  color: var(--flame-50);
}
.words {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 180px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.words .w1 {
  color: var(--flame-900);
}
.words .w2 {
  color: var(--flame-400);
}
.words .wdot {
  color: var(--flame-200);
  margin: 0 44px;
}
.quote {
  margin-top: 64px;
  font-size: 52px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #fff;
  background: var(--flame-900);
  padding: 30px 56px;
  border-radius: 999px;
  box-shadow: 0 30px 60px -30px rgba(65, 36, 2, 0.6);
}
.facts {
  margin-top: 80px;
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: center;
}
.facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 31px;
  font-weight: 700;
  white-space: nowrap;
  padding: 22px 30px 22px 24px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 44px -24px rgba(65, 36, 2, 0.3), 0 0 0 1px rgba(65, 36, 2, 0.05);
}
.stickers {
  margin-top: 56px;
  display: flex;
  gap: 20px;
}
.stickers li {
  width: 140px;
  height: 140px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stickers img {
  width: 108px;
  height: 108px;
}

/* numbers */
.numbers {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ncards {
  margin-top: 48px;
  display: flex;
  gap: 36px;
}
.ncard {
  width: 500px;
  padding: 50px 30px 46px;
  border-radius: 40px;
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(65, 36, 2, 0.35), 0 0 0 1px rgba(65, 36, 2, 0.05);
}
.ncard b {
  display: block;
  font-size: 100px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.ncard span {
  display: block;
  margin-top: 18px;
  font-size: 36px;
  font-weight: 650;
  color: var(--flame-600);
}
.ncard.main {
  background: var(--flame-900);
}
.ncard.main b {
  color: #fff;
}
.ncard.main span {
  color: var(--flame-100);
}
.smalls {
  margin-top: 56px;
  display: flex;
  gap: 14px;
}
.smalls li {
  font-size: 28px;
  font-weight: 600;
  color: var(--flame-800);
  padding: 12px 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 2px rgba(239, 159, 39, 0.3);
}
.freemium {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 36px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--flame-100), 0 20px 40px -24px rgba(65, 36, 2, 0.35);
  font-size: 32px;
  color: var(--flame-800);
}
.fr-k {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flame-400);
}
.fr-v b {
  font-weight: 800;
  color: var(--flame-900);
}
.fr-sep {
  color: var(--flame-200);
  font-weight: 700;
}

/* first and last slide */
.wer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
}
.wer-photo {
  display: none;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  overflow: hidden;
  border: 12px solid #fff;
  box-shadow: 0 40px 80px -30px rgba(65, 36, 2, 0.4);
}
.wer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#s-wer.has-photo .wer-photo {
  display: block;
}
.wer-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#s-wer.has-photo .wer-text {
  align-items: flex-start;
  text-align: left;
}
.wer-name {
  font-size: 140px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.wer-firma {
  margin-top: 36px;
  font-size: 54px;
  font-weight: 600;
  color: var(--flame-800);
}
.wer-seit {
  margin-top: 44px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px 14px 24px;
  border-radius: 999px;
  border: 2px solid rgba(239, 159, 39, 0.35);
  background: rgba(255, 255, 255, 0.75);
  font-size: 34px;
  font-weight: 650;
  color: var(--flame-800);
}
.brand-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand-foot img {
  width: 34px;
  height: auto;
}
.brand-foot em,
.wordmark em {
  font-style: normal;
  color: var(--flame-400);
}
.center-slide.end .logo {
  width: 250px;
  height: auto;
}
.wordmark {
  margin-top: 50px;
  font-size: 120px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.url {
  margin-top: 28px;
  font-size: 46px;
  font-weight: 600;
  color: var(--flame-600);
}

/* ------------------------------------------------------------ tooling overlays */
#hud {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  font: 14px/1.4 ui-monospace, monospace;
  color: #7CFC7C;
  background: rgba(0, 0, 0, 0.65);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: pre;
}
#edit-hud {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 100;
  font: 16px/1.4 ui-monospace, monospace;
  color: #fff;
  background: rgba(180, 30, 30, 0.85);
  padding: 8px 14px;
  border-radius: 8px;
  white-space: pre;
}
#cue-out {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  cursor: auto;
}
#cue-out[hidden],
#hud[hidden],
#edit-hud[hidden] {
  display: none;
}
.cue-box {
  width: min(960px, 92vw);
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  font: 15px/1.4 system-ui, sans-serif;
}
.cue-box textarea {
  margin-top: 10px;
  width: 100%;
  height: 65vh;
  font: 13px/1.45 ui-monospace, monospace;
}