/* A room, rendered in the same coordinates as the cel character. Typography is inherited. */
body.marketing-character { --room-wall:#294637; background:var(--room-wall); }
.marketing-character .mk-hero-character {
  --scene-width: min(1280px, 96vw, calc(max(560px, 100svh - 100px) * 1.333333));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: max(660px, 100svh);
  padding: 100px 0 0;
  isolation: isolate;
  background: var(--room-wall);
  color: #e2e7d7;
}
.marketing-character .mk-hero-character::before {
  /* One continuous plaster field, cropped at the skirting rather than tiled over the floor. */
  content: ''; position: absolute; inset: 0 0 calc(var(--scene-width) * .2175); z-index: -2; pointer-events: none;
  background:
    url('/static/marketing/worn-green-plaster.svg?v=1') center / cover no-repeat,
    radial-gradient(ellipse at 24% 76%, rgb(92 154 94 / 8%), transparent 58%),
    radial-gradient(ellipse at 48% 32%, rgb(152 173 127 / 9%), transparent 67%),
    radial-gradient(ellipse at 100% 0, #0e281973, transparent 72%),
    linear-gradient(#17392212, transparent 32%, #101d1238);
  box-shadow: inset 0 -30px 90px #09190f38;
}
.mk-room-floor {
  position: absolute; inset: auto 0 0; width: 100%; height: calc(var(--scene-width) * .2175);
  z-index: -1; pointer-events: none;
}
.marketing-character .mk-hero-left {
  position: absolute;
  left: var(--space-page);
  right: var(--space-page);
  top: 19%; bottom: auto;
  padding: 0;
  z-index: 0;
  pointer-events: none;
}
.marketing-character .mk-hero-left h1 {
  white-space: nowrap; text-wrap: nowrap; color: #a8b89a;
  text-shadow: 0 1px 0 #dae8bc24, 0 3px 2px #081b1740, 0 0 26px #8bd1761c;
  /* Translucent paint reveals the actual wall underneath, so its cracks stay aligned. */
  background: linear-gradient(112deg,#719976b3 0%,#b2cc9fc7 27%,#dcdec0c4 42%,#75a982b8 67%,#56735dad 100%);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}
.mk-character-stage {
  position: relative;
  z-index: 1;
  width: var(--scene-width);
  aspect-ratio: 1200 / 900;
  flex: none;
  isolation: isolate;
}
.mk-character-scene { position: absolute; inset: 0; z-index: 1; }
.mk-room-background, .mk-room-foreground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mk-room-background { z-index: 0; }
.mk-room-prop { pointer-events:none; filter:brightness(.88) saturate(.82); }
.mh-auth-reach { display:none; }
.mk-room-pizza { filter:brightness(.9) saturate(.86); }
.mk-room-cola { filter:brightness(.85) saturate(.82); }
.mk-floor-cash { filter:brightness(.78) saturate(.72) drop-shadow(0 3px 2px #10180dbc); }
.mk-room-foreground { z-index: 4; overflow: visible; }
.mk-room-foreground [data-tv-screen] { cursor: inherit; outline: none; }
.mk-room-foreground [data-tv-screen]:focus-visible { stroke: #d0ffba; stroke-width: 4px; }
.mk-room-background [data-tv-glow] { opacity: .7; transition: opacity 180ms ease; }
.mk-room-foreground [data-tv-screen] { transition: filter 160ms ease; }
.mk-tv-signal .mk-room-foreground [data-tv-screen] { filter: brightness(1.35) saturate(.6); }
.mk-tv-signal [data-tv-static] { opacity: .8; }
.mk-tv-signal .mk-room-background [data-tv-glow] { opacity: 1; }
.mk-character-art, .mk-character-grip { position: absolute; inset: 0; pointer-events: none; }
.mk-character-art { z-index: 1; }
.mk-character-grip { z-index: 3; }
.mk-held-device {
  /* The frame and the illustrated grip share the same 1200×900 coordinate system. */
  position: absolute;
  left: 58.333333%; top: 29.444444%; width: 20.833333%; height: 58.333333%;
  z-index: 2;
  border-radius: 17% / 8%;
  container-type: inline-size;
  color: #fff;
  font-family: Sora, var(--font);
  isolation: isolate;
}
.mk-held-frame {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg,#575c59 0%,#171b18 7%,#828883 11%,#2c322e 15%,#121713 70%,#818781 94%,#222923 98%);
  box-shadow: 1px 1px 0 rgb(234 255 235 / 55%) inset, -1px -1px 0 #242d26 inset, 0 22px 38px rgb(4 9 5 / 36%), 5px 4px 7px rgb(0 8 1 / 27%);
}
.mk-held-frame::before {
  content: ''; position: absolute; inset: 1.5%; border: 1.5px solid #050805;
  border-radius: 16.3% / 7.6%; pointer-events: none; z-index: 5;
  box-shadow: 0 0 0 1px rgb(230 255 230 / 12%);
}
.mk-held-screen {
  position: absolute; inset: 2% 3.9%;
  overflow: hidden; border-radius: 14.7% / 6.9%;
  background: #101a13; isolation: isolate;
}
.mk-held-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none;
  background: linear-gradient(113deg,rgb(255 255 255 / 15%),transparent 16%,transparent 74%,rgb(236 255 218 / 5%));
  box-shadow: 0 0 0 1px #060a07 inset;
}
.mk-held-wallpaper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mk-held-wallpaper::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 74% 18%,#8fafa482,transparent 45%), linear-gradient(160deg,#12261c 2%,#476552 36%,#18251d 58%,#07120b 100%);
}
.mk-held-wallpaper i { position: absolute; border-radius: 50%; pointer-events: none; }
.mk-held-wallpaper i:nth-child(1) {
  width: 160%; height: 79%; left: -81%; top: 22%; transform: rotate(-29deg);
  background: linear-gradient(120deg,#c8dcc08c,#71957966 38%,#203c2899 61%,#020b0633);
  box-shadow: -1px 0 0 #d4fbd740 inset, 13px -4px 36px #04120880;
}
.mk-held-wallpaper i:nth-child(2) {
  width: 143%; height: 64%; right: -102%; top: 26%; transform: rotate(-30deg);
  background: linear-gradient(120deg,#aec8ac,#566f5155 47%,#0b1d1255);
  box-shadow: 2px 2px 0 #c0e9c2aa inset, -12px 5px 30px #07280eaa;
}
.mk-held-wallpaper i:nth-child(3) {
  width: 151%; height: 73%; left: -43%; bottom: -59%; transform: rotate(-20deg);
  background: linear-gradient(130deg,#749376bb,#233c27); box-shadow: 1px -2px 0 #cee8be44;
}
.mk-held-island {
  position: absolute; z-index: 4; top: 2.1%; left: 31%; width: 38%; height: 4.2%;
  background: #020403; border-radius: 999px; box-shadow: 0 1px 1px #acb8a012;
}
.mk-held-island i { position: absolute; right: 11%; top: 29%; width: 8%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#152f4266,#040b1455); }
.mk-held-status { position: absolute; top: 2.8%; left: 9%; right: 7%; height: 3%; display: flex; justify-content: space-between; align-items: center; }
.mk-held-lock { width: 4.4%; height: 100%; fill: none; stroke: #f4faf1; stroke-width:1.3; }
.mk-phone-indicators { width: 26%; display:flex; align-items:center; gap:8%; }
.mk-phone-indicators svg { width: 25%; height:auto; fill:none; stroke:#eff5ed; stroke-width:1.5; }
.mk-phone-indicators svg:first-child { stroke-width:2.5; }
.mk-phone-indicators .mk-phone-battery { width: 39%; }
.mk-battery-fill { fill:#eff5ed;stroke:none; }
.mk-held-clock {
  position:absolute; top:11%; left:4%; right:4%; color:#f1f9ef;
  text-align:center; font-size:clamp(30px,26cqw,80px); font-weight:600;
  line-height:1.1; letter-spacing:-.075em; font-variant-numeric:tabular-nums;
  text-shadow:0 2px 15px #152e1d33;
}
.mk-held-actions {
  position:absolute; left:7.5%; right:7.5%; bottom:8.1%;
  display:flex;flex-direction:column;gap:10px;z-index:7;
}
.mk-held-actions .btn {
  width:100%;min-height:48px; padding:12px 10px;
  display:flex;justify-content:center;align-items:center;gap:5px;
  border:1px solid #ffffff3d;border-radius:999px;
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  text-decoration:none;font-family:inherit;font-size:clamp(13px,6.2cqw,17px);
  line-height:1.2;font-weight:600;letter-spacing:-.025em;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1),background 220ms ease,box-shadow 220ms ease,border-color 220ms ease;
}
.mk-held-actions .mk-phone-login {
  background:linear-gradient(180deg,#ffffff20,#ffffff08),#14251bb3;
  color:#f8fcf7;text-shadow:0 1px 2px #06120b66;
  box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #06160c33,0 6px 16px #03120926;
}
.mk-held-actions .mk-phone-register {
  background:linear-gradient(180deg,#ffffffde,#e4f0e3cf);
  color:#15241a;border-color:#ffffffb3;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px #aec4b159,0 6px 18px #03120933;
}
.mk-held-actions .btn span { opacity:.6; font-size:1.1em; }
@media(hover:hover) and (pointer:fine) {
  .mk-held-actions .btn:hover { transform:translateY(-1px);border-color:#ffffffc7;box-shadow:inset 0 1px 0 #ffffff70,0 8px 20px #05170740; }
}
.mk-held-actions .btn:active { transform:scale(.975);box-shadow:inset 0 1px 4px #03120933,0 2px 6px #0312091f; }
.mk-held-actions .btn:focus-visible { outline:2px solid #e1ffe5;outline-offset:3px; }
.mk-held-homebar { position:absolute;bottom:1.6%;left:32%;width:36%;height:.7%;background:#e5e8e3;border-radius:999px;opacity:.9; }
.mk-phone-mute,.mk-phone-volume,.mk-phone-power {position:absolute;background:linear-gradient(90deg,#161d16,#849181,#293327);width:2%;z-index:-1;border-radius:2px;}
.mk-phone-mute {left:-.8%;top:16%;height:4%;}.mk-phone-volume{left:-.8%;top:24%;height:12%;}.mk-phone-volume::after{content:'';position:absolute;top:47%;height:6%;width:100%;background:#004b10;}
.mk-phone-power {right:-.8%;top:25%;height:14%;background:linear-gradient(90deg,#172018,#93a58f,#233026);}
.mk-remote { position:fixed;top:0;left:0;width:28px;height:64px;z-index:90;pointer-events:none;opacity:0;transform-origin:50% 0;filter:drop-shadow(2px 5px 4px #07110888); }
.mk-remote svg { display:block;width:100%;height:100%; }
.mk-remote.is-visible { opacity:1; }
.mk-fly { position: absolute; z-index: 5; left: 0; top: 0; width: 21px; height: 19px; pointer-events: none; filter: drop-shadow(1px 3px 2px #11180b55); will-change: transform; }
.mk-fly svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mk-fly-wing { transform-box: view-box; transform-origin: 16px 15px; }
body.marketing-character .top { color: #eef0e4; }
body.marketing-character .top .brand strong { color: #eef0e4; }
body.marketing-character .top .mark { background: #00d632; color: #132317; box-shadow: 0 1px 0 #a6ffba33 inset; }
body.marketing-character .top.is-solid { background: #203b2ceb; box-shadow: 0 1px 0 #c8d8ac1a; backdrop-filter: blur(12px); }
body.marketing-character .top .nav .btn.ghost { background: #0e1c17b8; color: #f4f5e9; box-shadow: 0 0 0 1px #bccbb733 inset; }
body.marketing-character .top .nav .btn.primary { background: #f7f7f2; color: #111; }
.marketing-character .mk-pause { display:block; }
.marketing-character .mk-footer { background: #141f19; color: #a5b19b; border-top: 1px solid #9aab8524; min-height: 124px; }
.marketing-character .mk-pause:focus-visible { outline:3px solid #fff;outline-offset:3px; }
.mk-sound {
  position:fixed;right:122px;bottom:16px;z-index:30;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;min-width:76px;padding:0 12px;border:1px solid #bfd1b52b;border-radius:999px;
  background:#111d16ed;color:#e9efe4;font:600 13px/1 var(--font);cursor:pointer;
}
.mk-sound svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.mk-sound-waves { display:none; }
.mk-sound[aria-pressed="true"] { color:#9de4aa; }
.mk-sound[aria-pressed="true"] .mk-sound-waves { display:inline; }
.mk-sound[aria-pressed="true"] .mk-sound-mute { display:none; }
.mk-sound:focus-visible { outline:3px solid #b8e7a4;outline-offset:3px; }
@media(hover:hover) and (pointer:fine) { .marketing-character.mk-remote-active { cursor:none; } }
@media(max-width:1024px) {
  .marketing-character .mk-hero-character { --scene-width: min(1130px,112vw,calc(max(600px,100svh - 112px) * 1.333333)); min-height: max(712px,100svh); padding-top:112px; }
}
@media(max-width:720px) {
  .marketing-character .mk-hero-character { --scene-width:clamp(620px,190vw,850px); padding-inline:0; min-height:calc(var(--scene-width) * .75 + 156px); padding-top:150px; }
  .marketing-character .mk-hero-left { left:var(--space-page); right:var(--space-page); top:104px; bottom:auto; }
  .marketing-character .mk-hero-left h1 { font-size:clamp(26px,8.2vw,44px); }
  .marketing-character .mk-footer strong { font-size:clamp(30px,8vw,44px); }
  .mk-character-stage { margin-left:-74px; }
  .mk-room-tv { transform: translateX(250px) scale(.78); transform-box: view-box; transform-origin: 170px 850px; }
  .mk-fly { width:16px;height:15px; }
  body.marketing-character .top { flex-direction:row;align-items:center;gap:8px;padding-top:max(14px,env(safe-area-inset-top));padding-inline:var(--space-page);min-height:80px; }
  .marketing-character .top .brand { gap:8px; }
  .marketing-character .top .brand strong { font-size:18px; }
  .marketing-character .top .mark { width:33px;height:33px;flex:none; }
  .marketing-character .top .nav { gap:6px; }
  .marketing-character .top .nav .btn { min-height:44px;padding:0 12px;font-size:13px; }
  .mk-held-actions { gap:8px; }
  .mk-held-actions .btn { font-size:12px;min-height:46px;padding:10px 9px; }
  .mk-held-clock { font-size:clamp(32px,26cqw,65px); }
  .marketing-character .mk-pause { left:max(12px,env(safe-area-inset-left));right:auto;bottom:max(12px,env(safe-area-inset-bottom));min-height:44px;font-size:13px; }
  .mk-sound { left:max(108px,calc(env(safe-area-inset-left) + 96px));right:auto;bottom:max(12px,env(safe-area-inset-bottom));min-width:66px;padding-inline:9px;font-size:12px; }
}
@media(max-width:380px) {
  .marketing-character .mk-hero-character { --scene-width:600px; }
  .mk-character-stage { margin-left:-56px; }
  body.marketing-character .top { padding-inline:10px;gap:6px; }
  .marketing-character .top .brand {gap:6px;}.marketing-character .top .brand strong{font-size:15px;}
  .marketing-character .top .nav .btn {font-size:12px;padding:0 8px;min-height:44px;}
  .marketing-character .top .mark{width:29px;height:29px;}
  .mk-held-actions .btn{font-size:11px;padding-inline:9px;}
}
@media(max-height:600px) and (min-width:721px) { .marketing-character .mk-hero-character {--scene-width:920px;min-height:802px;} }
@media (min-width: 1920px) and (min-height: 980px) {
  .marketing-character:not(.marketing-auth) .mk-hero-character {
    --scene-width: min(1600px, 86vw, calc(max(640px, 100svh - 100px) * 1.333333));
  }
}
@media (min-width: 2560px) and (min-height: 1200px) {
  .marketing-character:not(.marketing-auth) .mk-hero-character {
    --scene-width: min(1920px, 80vw, calc(max(720px, 100svh - 108px) * 1.333333));
  }
}
@media (min-width: 3840px) {
  .marketing-character:not(.marketing-auth) .mk-hero-character {
    --scene-width: min(2240px, 62vw, calc(max(800px, 100svh - 120px) * 1.333333));
  }
}
@media(prefers-reduced-motion:reduce) { .mk-held-actions .btn {transition:none;transform:none!important}.mk-remote{display:none!important}.mk-room-foreground [data-tv-screen],.mk-room-background [data-tv-glow]{transition:none} }
.marketing-character.is-paused .mk-remote{display:none}.marketing-character.is-paused .mk-held-actions .btn{transition:none}

.marketing-character.is-paused .mk-room-background [data-tv-glow],.marketing-character.is-paused .mk-room-foreground [data-tv-screen]{transition:none}

/* Touch browsers must not composite a video outside its SVG mask or pin
   a large header over the character when the phone rotates. */
[data-tv-decoders] { display:none !important; }
@media (hover:none) and (pointer:coarse) {
  body.marketing-character .top { position:absolute; }
  body.marketing-character .top.is-solid { background:transparent; box-shadow:none; backdrop-filter:none; }
}
@media (max-height:600px) and (min-width:721px) and (pointer:coarse) {
  .marketing-character:not(.marketing-auth) .mk-hero-character {
    --scene-width:min(860px,96vw);
    min-height:calc(var(--scene-width) * .75 + 86px);
    padding-top:86px;
  }
  body.marketing-character .top { min-height:64px; padding-block:10px; }
}