/* joy.cam landing: channel surf.
   Ink-black studio, bone type, one accent: the tally red. Gabarito for the
   voice, Figtree for prose, JetBrains Mono only for what a TV would print on
   screen (channel numbers, NO SIGNAL). */

:root {
  --sc-canvas: #0b0c10;
  --sc-surface: #14161c;
  --sc-ink: #f2eee8;
  --sc-ink-soft: #b1aba2;
  --sc-accent: #ff4438;
  --sc-accent-ink: #1a0906;
  --sc-font-display: "Gabarito", "Figtree", system-ui, sans-serif;
  --sc-font-text: "Figtree", system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --jc-line: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --jc-ease: cubic-bezier(.23, 1, .32, 1);
  --mx: 0; --my: 0;
}
html { scroll-behavior: auto; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); }
::selection { background: var(--sc-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- type */
.jc-h1 { font: 800 clamp(2.6rem, 1.3rem + 4.4vw, 5.4rem)/0.96 var(--sc-font-display); letter-spacing: -0.035em; margin: 0; text-wrap: balance; max-width: 11ch; }
.jc-h2 { font: 800 clamp(2rem, 1.2rem + 2.6vw, 3.6rem)/1 var(--sc-font-display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.jc-lede { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--sc-ink-soft); max-width: 34ch; margin: 1.1rem 0 0; text-wrap: pretty; }
.jc-body { color: var(--sc-ink-soft); line-height: 1.62; max-width: 58ch; margin: 1rem 0 0; text-wrap: pretty; }
.jc-fine { font-size: .82rem; color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); margin: 1rem 0 0; }
.soft { color: var(--sc-ink-soft); font-weight: 500; }

.jc-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-ink); text-decoration: none; font: 800 1.3rem/1 var(--sc-font-display); letter-spacing: -0.03em; }
.jc-mark b { color: var(--sc-accent); }

.jc-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 800 1rem/1 var(--sc-font-text); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(255, 68, 56, .7), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .14s var(--jc-ease), background .14s var(--jc-ease); }
.jc-btn:hover { background: #ff5a4f; }
.jc-btn:active { transform: translateY(1px) scale(.98); }
.jc-btn--big { height: 58px; padding: 0 32px; font-size: 1.05rem; }
.jc-link { color: var(--sc-ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); text-underline-offset: 5px; }
.jc-link:hover { text-decoration-color: var(--sc-accent); }
.jc-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 1.8rem; }

.jc-osd { font: 700 .8rem/1 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }

/* ---------------------------------------------------------------- snow */
.jc-snow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 55; pointer-events: none; opacity: 0; image-rendering: pixelated; }
.jc-snow.on { animation: snow .26s steps(6, end) forwards; }
@keyframes snow { 0% { opacity: .82; } 60% { opacity: .5; } 100% { opacity: 0; } }

/* -------------------------------------------------------------- remote */
.jc-remote { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 214px; padding: 12px; border-radius: 26px;
  background: linear-gradient(180deg, #23252d, #15161b); border: 1px solid #30333d;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 8px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .3s var(--jc-ease); }
.jc-remote__osd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #0a0b0d; box-shadow: inset 0 1px 4px rgba(0,0,0,.8); font: 700 .78rem/1 var(--sc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #8dff9c; text-shadow: 0 0 6px rgba(141,255,156,.35); }
.jc-remote__name { color: #d8e7d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-remote__mode { margin: 8px 2px 0; font: 600 .7rem/1.3 var(--sc-font-text); color: var(--sc-accent); }
.jc-remote__keys, .jc-remote__call { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }
.jc-remote__call { grid-template-columns: repeat(3, 1fr); }
.jc-remote__keys a, .jc-remote__call button { display: grid; place-items: center; height: 36px; border-radius: 11px; background: linear-gradient(180deg, #353844, #272a33); border: 1px solid #3c404c; color: #e9e5de; font: 700 .9rem/1 var(--sc-font-mono); text-decoration: none; box-shadow: 0 2px 0 #121317, inset 0 1px 0 rgba(255,255,255,.08); cursor: pointer; transition: transform .1s var(--jc-ease), background .12s; }
.jc-remote__call button { font: 700 .7rem/1 var(--sc-font-text); letter-spacing: .02em; }
.jc-remote__keys a:hover, .jc-remote__call button:hover { background: linear-gradient(180deg, #414553, #2f323d); }
.jc-remote__keys a:active, .jc-remote__call button:active { transform: translateY(2px); box-shadow: 0 0 0 #121317; }
.jc-remote__keys a[aria-current="true"] { color: #fff; border-color: var(--sc-accent); box-shadow: 0 2px 0 #121317, 0 0 0 1px var(--sc-accent) inset; }
.jc-remote__call button.on { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); }
.jc-remote__power { display: flex; justify-content: center; align-items: center; margin-top: 10px; height: 42px; border-radius: 999px; background: var(--sc-accent); color: #fff; font: 800 .88rem/1 var(--sc-font-text); text-decoration: none; box-shadow: 0 3px 0 #9c1f16, inset 0 1px 0 rgba(255,255,255,.3); }
.jc-remote__power:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c1f16; }
.jc-remote.is-call { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--sc-accent), 0 30px 60px -20px rgba(0,0,0,.8); }

/* --------------------------------------------------------------- hero */
.jc-hero__stage { background: #07080b; overflow: hidden; }
.jc-plane { position: absolute; will-change: transform; max-width: none; }
.jc-plane--room { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.jc-glow { position: absolute; left: 58%; top: 34%; width: 44vw; height: 44vw; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,176,90,.22), rgba(255,140,60,.08) 55%, transparent 72%); mix-blend-mode: screen; pointer-events: none; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .75; transform: translate(-50%, -50%) scale(1.04); } }
.jc-hero__copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: clamp(1.4rem, 5vh, 3.2rem); max-width: 40rem; will-change: transform, opacity; }
.jc-hero__copy .jc-mark { margin-bottom: clamp(1.6rem, 7vh, 4rem); }
.jc-plane--laptop { --lw: min(60vw, 95vh); z-index: 6; left: calc(86vw - var(--lw)); bottom: 3.5vh; width: var(--lw); aspect-ratio: 1344 / 768; transform-origin: 43% 44%; }
.jc-laptop { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.jc-board { position: absolute; height: auto; width: 16%; left: -15.5%; top: 69%; transform: rotate(-3deg); filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)) brightness(.9); }
.jc-screen { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; pointer-events: none; }
.jc-plane--near { z-index: 8; height: auto; width: min(30vw, 480px); left: -9vw; bottom: -9vh; filter: blur(3px) brightness(.85) drop-shadow(0 30px 30px rgba(0,0,0,.6)); }

/* the call on the laptop screen: authored at 1280x800 and projected */
.jc-callui { position: absolute; inset: 0; background: #101217; display: flex; flex-direction: column; padding: 22px; gap: 16px; font-family: var(--sc-font-text); }
.jc-callui__bar { display: flex; justify-content: space-between; color: #cfcac2; font-weight: 700; font-size: 22px; }
.jc-rec { color: #8a857d; }
.jc-callui__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.jc-callui__grid figure, .jc-call__grid figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #1a1c22; }
.jc-callui__grid img, .jc-callui__grid video, .jc-call__grid img, .jc-call__grid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-callui__grid figcaption { position: absolute; left: 12px; bottom: 10px; padding: 5px 10px; border-radius: 8px; background: rgba(8,9,11,.66); color: #eee; font: 700 18px/1 var(--sc-font-text); }
.jc-callui__grid .is-you { box-shadow: 0 0 0 4px var(--sc-accent); }
.jc-onair { position: absolute; top: 10px; left: 10px; padding: 5px 9px 5px 22px; border-radius: 7px; background: var(--sc-accent); color: #fff; font: 700 13px/1 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.jc-onair::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; animation: blink 1.4s steps(2, jump-none) infinite; }
.jc-callui .jc-onair { font-size: 16px; }
@keyframes blink { 50% { opacity: .2; } }

/* ------------------------------------------------------------- camera */
.jc-camera { background: #0f1015; position: relative; }
.jc-camera__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.jc-drawing { margin: 0; color: #c9d5e8; }
.jc-draw { width: 100%; height: auto; overflow: visible; }
.jc-draw .ln { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.jc-draw .ln--board rect, .jc-draw .ln--board circle { stroke: #e9eef7; stroke-width: 1.6; }
.jc-draw .ln--dim { stroke: #7f91ad; stroke-width: 1; }
.jc-draw .ln--lead { stroke: var(--sc-accent); stroke-width: 1.2; }
.jc-draw .tx { font: 600 13px var(--sc-font-text); fill: #e9eef7; }
.jc-draw .tx--dim { font: 700 12px var(--sc-font-mono); fill: #9fb1cc; }
.jc-draw .tx--call text { font: 700 13.5px var(--sc-font-text); fill: #f2eee8; }
.jc-draw .tx--call .soft { font-weight: 500; fill: #aab3c3; font-size: 12.5px; }
.jc-drawing figcaption { margin-top: .8rem; font-size: .82rem; color: #8993a6; }
.jc-draw .ln path, .jc-draw .ln rect, .jc-draw .ln circle { stroke-dasharray: var(--len, 1200); stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--draw, 1))); }
.jc-draw .tx { opacity: var(--draw-tx, 1); transition: opacity .3s; }
.jc-specs { margin: 2rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--jc-line); }
.jc-specs div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--jc-line); }
.jc-specs dt { font-weight: 700; color: var(--sc-ink); }
.jc-specs dd { margin: 0; color: var(--sc-ink-soft); }

/* ----------------------------------------------------------- no signal */
.jc-nosignal { position: relative; height: 100vh; height: 100svh; background: #1330a3; overflow: hidden; }
.jc-nosignal__snow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; image-rendering: pixelated; }
.jc-nosignal .jc-osd { position: absolute; font-size: clamp(.9rem, .8rem + .5vw, 1.35rem); text-shadow: 0 0 8px rgba(255,255,255,.4); }
.jc-osd--tl { top: 7vh; left: var(--sc-gutter); }
.jc-osd--tr { top: 7vh; right: var(--sc-gutter); }

/* ---------------------------------------------------------------- call */
.jc-call__stage { background: radial-gradient(90% 70% at 70% 30%, #181a22, #0b0c10 70%); display: grid; grid-template-rows: auto 1fr; gap: clamp(.8rem, 2.4vh, 1.8rem); padding: clamp(1.2rem, 5vh, 3.5rem) var(--sc-gutter) clamp(1rem, 4vh, 2.5rem); }
.jc-call__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem; align-items: end; }
.jc-call__head .jc-body { margin: 0; }
.jc-call__win { min-height: 0; display: flex; flex-direction: column; border-radius: 20px; background: #111318; border: 1px solid #262a33; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); padding: 14px; max-width: 1180px; width: 100%; margin: 0 auto; }
.jc-call__bar { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; font-size: .95rem; }
.jc-call__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #3ee08c; }
.jc-call__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 12px; }
.jc-call__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; aspect-ratio: 16 / 9; max-height: 100%; }
.jc-call__grid figcaption { position: absolute; left: 10px; bottom: 8px; padding: 4px 9px; border-radius: 7px; background: rgba(8,9,11,.66); font: 700 .8rem/1.2 var(--sc-font-text); }
.jc-call__grid .is-you { box-shadow: 0 0 0 3px var(--sc-accent); }
.jc-tile__snow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; pointer-events: none; }
.jc-tile__snow.on { animation: snow .3s steps(6, end) forwards; }
.jc-chat { border-radius: 14px; background: #0d0e12; border: 1px solid #22252d; padding: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.jc-chat__log { display: flex; flex-direction: column; gap: 10px; }
.jc-msg { font-size: .9rem; line-height: 1.35; animation: msgIn .28s var(--jc-ease); }
.jc-msg b { display: block; font-size: .78rem; color: var(--sc-ink-soft); margin-bottom: 2px; }
.jc-msg span { display: inline-block; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: #1c1f27; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.jc-call__note { margin: 10px 4px 0; font-size: .76rem; color: #8b8680; }

/* --------------------------------------------------------------- guide */
.jc-guide__stage { background: #0e0f13; display: flex; align-items: center; }
.jc-rail { display: flex; gap: 22px; padding: 0 var(--sc-gutter); align-items: stretch; will-change: transform; }
.jc-rail__lead { flex: 0 0 min(28rem, 80vw); align-self: center; }
.jc-rail__end { flex: 0 0 min(24rem, 76vw); align-self: center; }
.jc-show { flex: 0 0 clamp(18rem, 24vw, 23rem); border-radius: 18px; background: #16181e; border: 1px solid #262a33; overflow: hidden; display: flex; flex-direction: column; }
.jc-show video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.jc-show__label { padding: 14px 16px 18px; }
.jc-show__label .ch { font: 700 .72rem/1 var(--sc-font-mono); letter-spacing: .08em; color: var(--sc-accent); }
.jc-show__label h3 { font: 800 1.35rem/1.1 var(--sc-font-display); letter-spacing: -.02em; margin: .45rem 0 .35rem; }
.jc-show__label p { margin: 0; color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.45; }
.jc-card { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; gap: 4px; }
.jc-card span { font: 600 .74rem/1.3 var(--sc-font-mono); color: rgba(255,255,255,.72); }
.jc-card b { font: 800 2rem/1 var(--sc-font-display); letter-spacing: -.03em; }
.jc-card--yt { background: linear-gradient(135deg, #3a0d0a, #b3261b); }
.jc-card--up { background: linear-gradient(135deg, #102a24, #1e6b57); }
.jc-card--live { background: linear-gradient(135deg, #1a1440, #3d33a3); }
@media (prefers-reduced-motion: no-preference) {
  .jc-show { opacity: max(.55, min(1, calc(var(--sc-p, 1) * 6 - var(--i, 0) * .5))); transition: opacity .2s; }
}

/* ----------------------------------------------------------------- kit */
.jc-kit { background: #0b0c10; }
.jc-kit__head { max-width: 46rem; }
.jc-kit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; margin-top: 3rem; }
.jc-part { border-radius: 20px; background: #14161c; border: 1px solid #262a33; padding: 18px; display: flex; flex-direction: column; }
.jc-part__pic { aspect-ratio: 4 / 3; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.jc-part__pic img { max-width: 80%; max-height: 90%; object-fit: contain; }
.jc-part h3 { font: 800 1.35rem/1.1 var(--sc-font-display); letter-spacing: -.02em; margin: 1.1rem 0 .5rem; }
.jc-part p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.5; flex: 1; }
.jc-part--browser .jc-part__steps { border-radius: 14px; background: #0d0e12; border: 1px solid #22252d; padding: 16px 18px; }
.jc-part__steps ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .8rem; color: var(--sc-ink-soft); font-size: .93rem; line-height: 1.45; }
.jc-part__steps b { color: var(--sc-ink); }
.jc-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.jc-store { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #3a3e4a; color: var(--sc-ink); text-decoration: none; font-weight: 700; font-size: .88rem; }
.jc-store:hover { border-color: var(--sc-accent); }
.jc-store small { color: var(--sc-ink-soft); font-weight: 500; }
.jc-kit__limits { margin-top: 3.5rem; max-width: 52rem; }
.jc-kit__limits h3 { font: 800 1.35rem/1.1 var(--sc-font-display); margin: 0; }
.jc-kit__limits ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--sc-ink-soft); line-height: 1.6; display: grid; gap: .35rem; }

/* --------------------------------------------------------------- yours */
.jc-yours { background: linear-gradient(180deg, #0b0c10, #120f10 60%, #170d0c); padding-top: var(--sc-section); min-height: 100vh; display: flex; flex-direction: column; }
.jc-yours__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; flex: 1; }
.jc-form { margin-top: 2rem; display: grid; gap: 1.1rem; max-width: 30rem; }
.jc-field { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; }
.jc-field > span, .jc-field legend { font: 700 .76rem/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0; margin-bottom: .45rem; }
.jc-field input:not([type=radio]) { height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid #353946; background: #0e0f13; color: var(--sc-ink); font: 600 1.05rem var(--sc-font-text); }
.jc-field input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgba(255,68,56,.18); }
.jc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-chips label { cursor: pointer; }
.jc-chips input { position: absolute; opacity: 0; pointer-events: none; }
.jc-chips span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #353946; background: #121318; font-weight: 700; font-size: .9rem; transition: border-color .12s, background .12s; }
.jc-chips input:checked + span { border-color: var(--sc-accent); background: rgba(255,68,56,.14); }
.jc-chips input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.jc-form .jc-btn { justify-self: start; margin-top: .4rem; }
.jc-yours__tv { margin: 0; }
.jc-tv { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; border: 10px solid #1c1e25; box-shadow: 0 50px 100px -30px rgba(0,0,0,.85), 0 0 0 1px #2c2f38; }
.jc-tv__pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-tv .jc-osd { position: absolute; font-size: .8rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.jc-tv .jc-osd--tl { top: 14px; left: 16px; }
.jc-tv .jc-osd--tr { top: 14px; right: 16px; }
.jc-tv__tag { position: absolute; left: 5%; bottom: 10%; display: flex; align-items: stretch; }
.jc-tv__tag i { width: 1.2%; min-width: 6px; background: #ffb020; }
.jc-tv__tag b { padding: .4em .8em; background: rgba(23,18,15,.74); color: #fff3e2; font: 800 clamp(.95rem, 1.7vw, 1.5rem)/1.1 var(--sc-font-display); }
.jc-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 2.5rem var(--sc-gutter) calc(2.5rem + 20px); border-top: 1px solid var(--jc-line); margin-top: var(--sc-section); }
.jc-foot nav { display: flex; gap: 1.4rem; }
.jc-foot nav a { color: var(--sc-ink-soft); text-decoration: none; font-weight: 600; }
.jc-foot nav a:hover { color: var(--sc-ink); }
.jc-foot p { margin: 0; font-size: .8rem; color: #8b8680; flex-basis: 100%; }

/* ------------------------------------------------------------- phones */
@media (max-width: 860px) {
  .jc-remote { left: 10px; right: 10px; bottom: 10px; width: auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "osd power" "keys keys"; gap: 8px; padding: 8px; border-radius: 20px; }
  .jc-remote__osd { grid-area: osd; padding: 9px 10px; }
  .jc-remote__power { grid-area: power; margin: 0; padding: 0 16px; height: auto; font-size: .82rem; }
  .jc-remote__keys, .jc-remote__call { grid-area: keys; grid-template-columns: repeat(7, 1fr); margin: 0; gap: 5px; }
  .jc-remote__call { grid-template-columns: repeat(6, 1fr); }
  .jc-remote__keys a, .jc-remote__call button { height: 34px; }
  .jc-remote__mode { display: none !important; }

  .jc-hero__copy { top: 1.2rem; right: var(--sc-gutter); }
  .jc-h1 { font-size: clamp(2.3rem, 9.6vw, 3.4rem); }
  .jc-lede { font-size: 1rem; }
  .jc-hero__copy .jc-mark { margin-bottom: 1.4rem; }
  .jc-plane--room { object-position: 38% 60%; }
  .jc-plane--laptop { left: 2vw; width: 118vw; bottom: 17vh; transform-origin: 43% 44%; }
  .jc-board { width: 20%; left: 0%; top: 72%; }
  .jc-plane--near { width: 62vw; right: -18vw; bottom: 3vh; }
  .jc-glow { width: 90vw; height: 90vw; left: 70%; }
  .jc-actions { gap: 16px; margin-top: 1.2rem; }

  .jc-camera__grid { grid-template-columns: 1fr; }
  .jc-specs div { grid-template-columns: 7.5rem 1fr; }
  .jc-call__head { grid-template-columns: 1fr; gap: .6rem; }
  .jc-call__head .jc-body { font-size: .9rem; }
  .jc-call__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  /* A phone is too narrow for a 2x2 of 16:9 tiles: the joy.cam gets the whole
     width at its own 16:9 (nothing cropped), the other three sit in a strip. */
  .jc-call__grid { aspect-ratio: auto; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 8px; }
  .jc-call__grid .is-you { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
  .jc-call__grid figure:not(.is-you) { aspect-ratio: 1; }
  .jc-call__grid figure:not(.is-you) figcaption { left: 6px; bottom: 6px; padding: 3px 6px; font-size: .64rem; }
  .jc-chat { max-height: 20vh; }
  .jc-kit__grid { grid-template-columns: 1fr; }
  .jc-yours__grid { grid-template-columns: 1fr; }
  .jc-yours__tv { order: -1; }
  .jc-foot { padding-bottom: 7rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .jc-call__head .jc-body { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jc-glow { animation: none; }
  .jc-snow, .jc-tile__snow { display: none; }
}