/* The Shlomiverse's social layer - ONE language for every new screen (the approved mockups, written down):
   one accent (orange) for the ONE main action and the ring around a face; frosted dark glass over video;
   28px cards and sheets, pill buttons, round icon buttons; Heebo; no hearts, no emoji. */
:root {
  --vx-accent: #ff6a1f; --vx-accent-2: #ff8a3d;
  --vx-glass: rgba(18, 18, 22, .58); --vx-glass-2: rgba(255, 255, 255, .09); --vx-glass-line: rgba(255, 255, 255, .14);
  --vx-blur: blur(22px) saturate(150%);
  --vx-r: 28px; --vx-r2: 18px;
  --vx-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  /* the main buttons' halo: a soft lift, not a glow (round 4, his note 2026-11-07: "too much glow" - was 0 10px 34px at .45) */
  --vx-glow: 0 0 0 1px rgba(255, 106, 31, .22), 0 6px 16px -8px rgba(255, 106, 31, .38);
}

/* ---------- the pieces every screen uses ---------- */
.vx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 999px;
  font-weight: 800; font-size: 1.05rem; white-space: nowrap; transition: transform .15s, opacity .15s, background .15s; }
.vx-btn:active { transform: scale(.98); }
.vx-btn svg { width: 20px; height: 20px; flex: none; }
.vx-btn.main { background: var(--vx-accent); color: #fff; box-shadow: var(--vx-glow); }
.vx-btn.glass { background: var(--vx-glass-2); border: 1px solid var(--vx-glass-line); color: #fff; -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); }
.vx-btn.white { background: #fff; color: #17161a; }
.vx-btn.block { width: 100%; }
.vx-btn.small { height: 40px; padding: 0 16px; font-size: .92rem; }
.vx-btn:disabled { opacity: .45; cursor: default; }
.vx-link { color: rgba(255, 255, 255, .62); font-weight: 500; padding: 10px; display: block; margin: 4px auto 0; }
.vx-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  background: var(--vx-glass-2); border: 1px solid var(--vx-glass-line); color: #fff; -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); transition: background .15s; }
.vx-pill svg { width: 15px; height: 15px; }
.vx-pill.on { background: rgba(255, 255, 255, .92); color: #17161a; border-color: transparent; }
.vx-round { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--vx-glass); border: 1px solid var(--vx-glass-line);
  -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); color: #fff; transition: transform .15s, background .15s; flex: none; }
.vx-round:active { transform: scale(.94); }
.vx-round svg { width: 24px; height: 24px; }
.vx-round.main { background: var(--vx-accent); border-color: rgba(255, 255, 255, .25); box-shadow: var(--vx-glow); width: 64px; height: 64px; }
.vx-round.main svg { width: 28px; height: 28px; }
.vx-round.on { color: var(--vx-accent); }
.vx-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: #2a2930; color: #fff;
  font-weight: 800; font-size: 1rem; position: relative; }
.vx-av img { width: 100%; height: 100%; object-fit: cover; }
.vx-av.ring { outline: 2.5px solid var(--vx-accent); outline-offset: 2px; }
.vx-av.planet { background: #0f0f12; color: var(--vx-accent); }
.vx-av.planet svg { width: 62%; height: 62%; }
.vx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vx-accent); flex: none; }
.vx-field { width: 100%; height: 58px; border-radius: var(--vx-r2); border: 1px solid var(--vx-glass-line); background: rgba(255, 255, 255, .06); color: #fff;
  font: inherit; font-size: 1.1rem; padding: 0 18px; outline: none; transition: border-color .15s; }
.vx-field:focus { border-color: var(--vx-accent); }
textarea.vx-field { height: auto; min-height: 96px; padding: 14px 18px; resize: none; line-height: 1.5; }
.vx-field::placeholder { color: rgba(255, 255, 255, .42); }
.vx-wordmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.vx-wordmark b { color: var(--vx-accent); font-weight: inherit; }
.vx-wordmark { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1; }
.vx-wordmark small { font-size: .5em; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .62); margin-top: .35em; }
.vx-muted { color: rgba(255, 255, 255, .6); }

/* the sheet that rises from the bottom (sign in, comments) and the card in the middle (notifications on, confirm) */
.vx-back { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s; }
.vx-back.open { opacity: 1; }
.vx-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 91; margin: 0 auto; width: min(560px, 100%); max-height: 92svh; display: flex; flex-direction: column;
  background: var(--vx-glass); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); border: 1px solid var(--vx-glass-line); border-bottom: 0;
  border-radius: var(--vx-r) var(--vx-r) 0 0; color: #fff; box-shadow: var(--vx-shadow); transform: translateY(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  padding-bottom: env(safe-area-inset-bottom); }
.vx-sheet.open { transform: none; }
.vx-sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .35); margin: 10px auto 4px; flex: none; }
.vx-sheet .in { padding: 10px 22px 22px; overflow-y: auto; }
.vx-card { position: fixed; z-index: 91; left: 50%; top: 50%; width: min(420px, calc(100% - 32px)); max-height: 90svh; overflow-y: auto;
  transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .25s, opacity .25s; background: var(--vx-glass); -webkit-backdrop-filter: var(--vx-blur);
  backdrop-filter: var(--vx-blur); border: 1px solid var(--vx-glass-line); border-radius: var(--vx-r); color: #fff; box-shadow: var(--vx-shadow); padding: 28px 22px 18px; text-align: center; }
.vx-card.open { transform: translate(-50%, -50%); opacity: 1; }
.vx-x { position: absolute; top: 12px; inset-inline-start: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, .7); }
.vx-x svg { width: 20px; height: 20px; }
.vx-h { font-size: 1.7rem; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 6px; }
.vx-sub { color: rgba(255, 255, 255, .62); font-size: 1rem; margin-bottom: 18px; }
.vx-hero-face { width: 92px; height: 92px; margin: 6px auto 0; border-radius: 50%; position: relative; }
.vx-hero-face .vx-av { width: 92px; height: 92px; outline-width: 3px; outline-offset: 3px; }
.vx-hero-face .ok { position: absolute; bottom: -4px; inset-inline-end: -6px; width: 32px; height: 32px; border-radius: 50%; background: var(--vx-accent); display: grid; place-items: center; border: 3px solid #1b1a1f; }
.vx-hero-face .ok svg { width: 16px; height: 16px; color: #fff; }
.vx-reasons { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 22px; text-align: right; }
.vx-reasons div { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; }
.vx-reasons .vx-round { width: 46px; height: 46px; }
.vx-reasons .vx-round svg { width: 20px; height: 20px; }
.vx-small { color: rgba(255, 255, 255, .45); font-size: .84rem; text-align: center; margin-top: 10px; }
.vx-toast { position: fixed; z-index: 120; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; transition: .25s;
  background: rgba(20, 20, 24, .86); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); border: 1px solid var(--vx-glass-line); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.vx-toast.open { transform: translate(-50%, 0); opacity: 1; }
.vx-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: vx-spin .8s linear infinite; }
@keyframes vx-spin { to { transform: rotate(360deg); } }

/* a phone-style notification preview (the push opt-in, the guide) */
.vx-notif { display: flex; gap: 12px; align-items: center; text-align: right; background: rgba(255, 255, 255, .08); border: 1px solid var(--vx-glass-line);
  border-radius: 20px; padding: 12px 14px; margin: 18px 0; }
.vx-notif .ic { width: 42px; height: 42px; border-radius: 11px; background: #0b0b0e; display: grid; place-items: center; color: var(--vx-accent); flex: none; }
.vx-notif .ic svg { width: 28px; height: 28px; }
.vx-notif b { display: block; font-size: .92rem; }
.vx-notif span { font-size: .9rem; color: rgba(255, 255, 255, .78); line-height: 1.35; display: block; }
.vx-notif small { margin-inline-start: auto; align-self: flex-start; color: rgba(255, 255, 255, .5); font-size: .78rem; }

/* ---------- the top bar: bell + me ---------- */
.vx-top { display: flex; align-items: center; gap: 8px; }
.vx-top .icon-btn { position: relative; }
.vx-top .icon-btn .vx-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--bg); }
.vx-top .me-btn { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--card2); border: 1px solid var(--line); font-weight: 800; }
.vx-top .me-btn img { width: 100%; height: 100%; object-fit: cover; }
.vx-top .in-btn { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: .92rem; }
.nav .nav-home, .nav .nav-me { display: none; }
@media (max-width: 760px) {
  .nav .nav-home, .nav .nav-me { display: block; }
  .nav .nav-series, .nav .nav-sites { display: none; }   /* the bottom bar keeps its five; the sites are on the home + footer */
  .nav a { font-size: .86rem; padding: 7px 9px; }
  /* phone: the face / sign-in at the top left, like apps (the bottom bar has no "אני" any more) */
  #theme { display: none; }
}

/* ---------- story rings ---------- */
.rings { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: none; }
.rings::-webkit-scrollbar { display: none; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; flex: none; font-size: .8rem; color: var(--dim); line-height: 1.2; text-align: center; }
.ring .rim { width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--vx-accent), #ffb36b, var(--vx-accent)); }
.ring.seen .rim { background: var(--line2); }
.ring .rim > span { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); background: var(--card2); }
.ring .rim img, .ring .rim .ph { width: 100%; height: 100%; object-fit: cover; }
.ring b { color: var(--text); font-weight: 700; }
.portrait.has-story { cursor: pointer; outline: 3px solid var(--vx-accent); outline-offset: 4px; }

/* ---------- "your verse": the signed-in home ---------- */
.yv { padding-top: 26px; }
.yv-hi { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yv-hi h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.yv-hi p { color: var(--dim); margin-top: 4px; }
.yv .ask { margin-top: 18px; max-width: 720px; }
.yv-sec { margin-top: 30px; }
.yv-empty { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--vx-r2); padding: 18px; }
.yv-empty p { color: var(--dim); flex: 1; }
.cw .thumb .bar { position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: rgba(255, 255, 255, .25); z-index: 2; }
.cw .thumb .bar i { display: block; height: 100%; background: var(--vx-accent); }
.signin-card { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: linear-gradient(120deg, color-mix(in srgb, var(--vx-accent) 22%, var(--card)), var(--card));
  border: 1px solid var(--line2); border-radius: var(--vx-r); padding: 24px; }
.signin-card h2 { font-size: 1.5rem; font-weight: 900; line-height: 1.15; }
.signin-card p { color: var(--dim); margin-top: 6px; }
.signin-card > div { flex: 1; min-width: 240px; }

/* ---------- the video page ---------- */
.vp { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; overflow: hidden; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.vp-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.4); transform: scale(1.1); }
.vp-stage { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; aspect-ratio: 9 / 16; max-width: 100vw; }
.vp video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
@media (max-aspect-ratio: 9/16) { .vp-stage { width: 100vw; height: 100%; aspect-ratio: auto; } }
.vp-mark { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 1.05rem; opacity: .55; transition: opacity .3s; pointer-events: none; }
.vp-line { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, .18); }
.vp-line i { display: block; height: 100%; background: var(--vx-accent); width: 0; margin-inline-start: auto; }
.vp-dim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 22%, transparent 60%, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .3s; pointer-events: none; }
.vp-ui { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
.vp.ui .vp-ui, .vp.ui .vp-dim { opacity: 1; }
.vp.ui .vp-ui { pointer-events: none; }
.vp.ui .vp-ui > * { pointer-events: auto; }
.vp.ui .vp-mark { opacity: 0; }
.vp-head { position: absolute; top: calc(14px + env(safe-area-inset-top)); inset-inline: 14px; display: flex; align-items: center; gap: 12px; }
.vp-who { display: flex; align-items: center; gap: 10px; }
.vp-who .vx-av { width: 46px; height: 46px; }
.vp-who b { font-size: 1.15rem; font-weight: 800; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.vp-brand { margin-inline-start: auto; font-size: 1.55rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.vp-brand small { font-size: .78rem; }
.vp-rail { position: absolute; right: 12px; bottom: 178px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vp-rail .vx-round { width: 50px; height: 50px; }
.vp-rail .vx-round svg { width: 22px; height: 22px; }
.vp-rail .vx-round.main { width: 54px; height: 54px; }
.vp-rail .vx-round.main svg { width: 25px; height: 25px; }
.vp-rail button { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .84rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.dl { text-align: center; padding: 4px 4px 8px; }
.dl-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 18px 0; }
.dl-bar i { display: block; height: 100%; width: 8%; background: var(--vx-accent); transition: width .3s; animation: dl-wait 1.6s ease-in-out infinite alternate; }
.dl-bar i[style] { animation: none; }
@keyframes dl-wait { from { width: 8%; } to { width: 38%; } }
.vp-rail small { font-size: .74rem; opacity: .85; margin-top: -4px; }
.vp-ep { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline: 14px; background: var(--vx-glass); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur);
  border: 1px solid var(--vx-glass-line); border-radius: var(--vx-r); padding: 16px 18px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.vp-ep h2 { font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.vp-ep .meta { color: rgba(255, 255, 255, .62); font-size: .9rem; }
.vp-ep .meta a { color: inherit; }
.vp-ep .pp { grid-row: 1 / span 2; grid-column: 2; }
.vp-ep .scrub { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .78rem; color: rgba(255, 255, 255, .7); direction: ltr; font-variant-numeric: tabular-nums; }
.vp-ep input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--vx-accent) var(--p, 0%), rgba(255, 255, 255, .25) var(--p, 0%)); outline: none; }
.vp-ep input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 106, 31, .35); }
.vp-ep input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; }
.vp-ep .nav2 { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 2px; }
.vp-ep .nav2 button { font-size: .82rem; color: rgba(255, 255, 255, .7); padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.vp-ep .nav2 button:disabled { visibility: hidden; }
.vp-ep .nav2 svg { width: 14px; height: 14px; }
.vp-sound { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vp-big { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(0, 0, 0, .45); display: grid; place-items: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.vp-big svg { width: 34px; height: 34px; fill: #fff; }
.vp.paused .vp-big { opacity: 1; }
@media (min-width: 900px) {
  .vp-rail { inset-inline-end: auto; right: calc(50% - (100svh * 9 / 16) / 2 - 86px); bottom: 50%; transform: translateY(50%); }
  .vp-head { inset-inline: auto; right: calc(50% - (100svh * 9 / 16) / 2 + 14px); left: calc(50% - (100svh * 9 / 16) / 2 + 14px); }
  .vp-ep { inset-inline: auto; right: calc(50% - (100svh * 9 / 16) / 2 + 14px); left: calc(50% - (100svh * 9 / 16) / 2 + 14px); }
}

/* ---------- comments (a sheet over the video) ---------- */
.cm { height: 76svh; }
.cm .tabs { display: flex; gap: 8px; padding: 4px 18px 10px; flex: none; }
.cm .list { flex: 1; overflow-y: auto; padding: 4px 18px 10px; }
.cm-item { display: flex; gap: 12px; padding: 10px 0; }
.cm-item .vx-av { width: 38px; height: 38px; font-size: .9rem; }
.cm-item .body { flex: 1; min-width: 0; }
.cm-item .who { font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.cm-item .who small { color: rgba(255, 255, 255, .45); font-weight: 400; font-size: .8rem; }
.cm-item .txt { font-size: 1rem; line-height: 1.45; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-item .txt .at { color: var(--vx-accent); font-weight: 700; }
.cm-item .acts { display: flex; gap: 18px; margin-top: 6px; font-size: .84rem; color: rgba(255, 255, 255, .55); font-weight: 600; }
.cm-item .acts button { display: inline-flex; align-items: center; gap: 5px; }
.cm-item .acts svg { width: 17px; height: 17px; }
.cm-item .acts .on { color: var(--vx-accent); }
.cm-item.char .who b { color: #fff; }
.cm-item.hl { background: rgba(255, 106, 31, .1); border-radius: 14px; margin: 0 -8px; padding: 10px 8px; }
.cm-replies { margin-inline-start: 50px; border-inline-start: 2px solid rgba(255, 255, 255, .08); padding-inline-start: 12px; }
.cm-more { color: rgba(255, 255, 255, .6); font-size: .86rem; font-weight: 700; padding: 4px 0 8px; }
.cm-typing { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .6); font-size: .9rem; padding: 6px 0 10px 0; }
.cm-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.cm-compose { flex: none; border-top: 1px solid var(--vx-glass-line); padding: 10px 14px 12px; }
.cm-compose form { display: flex; gap: 10px; align-items: flex-end; }
.cm-compose textarea { flex: 1; height: 48px; max-height: 120px; border-radius: 24px; border: 1px solid var(--vx-glass-line); background: rgba(255, 255, 255, .07); color: #fff; font: inherit;
  padding: 12px 18px; resize: none; outline: none; line-height: 1.4; }
.cm-compose textarea:focus { border-color: var(--vx-accent); }
.cm-compose .send { width: 48px; height: 48px; border-radius: 50%; background: var(--vx-accent); display: grid; place-items: center; flex: none; }
.cm-compose .send svg { width: 20px; height: 20px; transform: scaleX(-1); }
.cm-compose .send:disabled { opacity: .4; }
.cm-replying { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: rgba(255, 255, 255, .65); padding: 0 6px 8px; }
.cm-at { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.cm-at button { display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--vx-glass-2); border: 1px solid var(--vx-glass-line); font-weight: 700; font-size: .9rem; }
.cm-at .vx-av { width: 30px; height: 30px; }
.cm-empty { text-align: center; color: rgba(255, 255, 255, .55); padding: 40px 10px; }
.cm-note { font-size: .74rem; color: rgba(255, 255, 255, .4); text-align: center; padding-top: 6px; }

/* ---------- stickers ---------- */
.stg { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 4px 0 10px; }
.stc { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid var(--vx-glass-line); border-radius: 22px; padding: 10px 8px 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.stc img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.stamp { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% + 16px); height: 46px; margin-top: 8px; border-top: 1px solid var(--vx-glass-line); background: rgba(0, 0, 0, .18); font-size: .95rem; font-weight: 700; direction: ltr; transition: background .15s; }
.stamp svg { width: 26px; height: 26px; color: var(--vx-accent); flex: none; }
.stamp.on { background: rgba(255, 106, 31, .18); }
.stamp.on b { color: var(--vx-accent); }
.stamp-mark { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); border: 3px solid var(--vx-accent); color: var(--vx-accent); background: rgba(10, 10, 12, .78); border-radius: 12px; padding: 6px 10px; font-weight: 900; font-size: .95rem; white-space: nowrap; animation: vx-stamp 1.4s ease-out forwards; pointer-events: none; }
@keyframes vx-stamp { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(2); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vx-pop { 40% { transform: scale(1.18) rotate(-6deg); } }
.st { position: fixed; inset: 0; z-index: 80; color: #fff; display: flex; flex-direction: column; overflow-y: auto; }
.st-bg { position: fixed; inset: -40px; background-size: cover; background-position: center; filter: blur(26px) brightness(.45); z-index: -1; transform: scale(1.08); }
.st-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(14px + env(safe-area-inset-top)) 16px 4px; }
.st-head .vx-wordmark { font-size: 1.7rem; align-items: center; text-align: center; }
.st-head .vx-wordmark small { font-size: .8rem; letter-spacing: .15em; }
.st-head .ttl { font-weight: 700; color: rgba(255, 255, 255, .85); font-size: .92rem; line-height: 1.2; justify-self: start; padding-bottom: 6px; border-bottom: 3px solid var(--vx-accent); max-width: 4.5em; }
.st-back { justify-self: end; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--vx-glass); border: 1px solid var(--vx-glass-line); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); color: #fff; }
.st-back svg { width: 24px; height: 24px; }
.st-fans-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.st-fans-h h3 { margin: 0; }
.st-fans-h button { color: var(--vx-accent); font-size: .9rem; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.st-fans-h button svg { width: 16px; height: 16px; }
.st-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 20px 18px; gap: 16px; width: min(520px, 100%); margin: 0 auto; }
.st-art { width: min(74vw, 340px); aspect-ratio: 1; display: grid; place-items: center; position: relative; }
.st-art .frame { width: 82%; aspect-ratio: 9 / 16; max-height: 100%; object-fit: cover; border-radius: 22px; border: 4px solid #fff; transform: rotate(-4deg); box-shadow: var(--vx-shadow); }
.st-art .made { width: 100%; height: 100%; object-fit: contain; transform: rotate(-3deg); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); animation: vx-land .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes vx-land { from { transform: scale(.6) rotate(-14deg); opacity: 0; } }
.st-art .busy { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.st-art .busy div { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); border-radius: 20px; padding: 16px 20px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st-art.working .frame { animation: vx-wobble 1.6s ease-in-out infinite; }
@keyframes vx-wobble { 50% { transform: rotate(3deg) scale(.97); } }
.st-row { display: flex; gap: 10px; width: 100%; }
.st-row .vx-btn { flex: 1; }
.st-q { font-size: .85rem; color: rgba(255, 255, 255, .55); text-align: center; }
.st-fans { width: 100%; background: var(--vx-glass); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); border-top: 1px solid var(--vx-glass-line); border-radius: var(--vx-r) var(--vx-r) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.st-fans h3 { font-size: 1.15rem; font-weight: 900; margin-bottom: 10px; }
.st-fans .strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 4); min-width: 0; gap: 10px; overflow-x: auto; scrollbar-width: none; }

/* ---------- a character's stories ---------- */
.sv { position: fixed; inset: 0; z-index: 85; background: #000; color: #fff; display: flex; justify-content: center; }
/* a phone's shape on a wide screen, the whole screen on a phone; the story's 9:16 stage fits inside it whole and the
   rest is its own picture blurred (story-art.js) - the name above it, the button below it */
.sv-box { position: relative; height: 100%; aspect-ratio: 9 / 19.5; max-width: 100vw; overflow: hidden; background: #111; }
@media (max-aspect-ratio: 9/19.5) { .sv-box { width: 100vw; aspect-ratio: auto; } }
.sv-bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); inset-inline: 10px; display: flex; gap: 4px; z-index: 3; direction: rtl; }
.sv-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.sv-bars i { display: block; height: 100%; width: 0; background: #fff; margin-inline-start: 0; }
.sv-head { position: absolute; top: calc(22px + env(safe-area-inset-top)); inset-inline: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.sv-head .vx-av { width: 42px; height: 42px; }
.sv-head b { font-weight: 800; }
.sv-head > span:not(.end) { min-width: 0; overflow: hidden; } .sv-head b, .sv-head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: top; }
.sv-head small { color: rgba(255, 255, 255, .7); font-size: .82rem; }
.sv-head .end { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.sv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-text { position: absolute; inset-inline: 22px; bottom: calc(60px + env(safe-area-inset-bottom)); font-size: 1.45rem; font-weight: 800; line-height: 1.35; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); white-space: pre-wrap; z-index: 2; }
.sv-plain { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 28px; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c) 55%, #000), #0b0b0e 75%); }
.sv-plain .sv-text { position: static; font-size: 1.8rem; text-align: center; }
.sv-shade { position: absolute; inset: 0 0 auto; height: 120px; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent); z-index: 1; pointer-events: none; transition: opacity .2s; }
/* without the words: the button (kept for the next stories) or a finger held on the story (only the picture) */
.sv-clean svg { width: 21px; height: 21px; }
.sv-sound svg { width: 21px; height: 21px; }
.sv-sound[hidden] { display: none; }
/* the phone muted the clip by itself: a soft pulse until they tap for sound */

@keyframes sv-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 60% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.sv.peek .sv-sound { visibility: hidden; }

.sv.peek .sa-boxes, .sv.peek .sv-text, .sv.peek .sv-head, .sv.peek .sv-bars, .sv.peek .sv-cta, .sv.peek .sv-shade { opacity: 0; pointer-events: none; }
.sv-head, .sv-bars, .sv-cta { transition: opacity .2s; }
/* the story's stage between the name bar and the button - never under them (story-art.js) */
.sv .sa { --top: calc(80px + env(safe-area-inset-top)); --bot: calc(12px + env(safe-area-inset-bottom)); }
.sv .with-cta .sa { --bot: calc(94px + env(safe-area-inset-bottom)); }
.sv { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sv-tap { position: absolute; top: 80px; bottom: 0; width: 50%; z-index: 2; }
.sv-tap.next { left: 0; } .sv-tap.prev { right: 0; }
/* a story's button (a new game, a video, a site) - over the tap zones, the line moves up above it */
.sv-cta { position: absolute; inset-inline: 22px; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 4; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; border-radius: 999px; background: var(--vx-accent); color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: var(--vx-glow); text-decoration: none; }
.sv-cta:active { transform: scale(.98); }
.sv-cta svg { width: 20px; height: 20px; flex: none; }

/* ---- the story, 2026-11-05 (his notes: black sides on the phone, the picture too small, the name hidden, the
   buttons unclear) ----
   - on a phone the story IS the screen (it was a fixed phone-shaped box - with the browser's bars the screen is wider,
     so black sides); on a computer it stays a phone-shaped card;
   - the picture / clip gets the whole screen: as wide as the screen (or as tall, for a wide one), never more, the same
     picture blurred and dimmed around it; the name bar and the button lie ON it with a soft dark fade, like Instagram
     (story-art.js --top / --bot are only the safe areas now);
   - the top row: the face with a small + to follow, the name with all the room it needs, then three small clear
     buttons - full screen (only the picture), sound (a clip), close */
@media (max-width: 760px) { .sv-box { width: 100vw; height: 100%; aspect-ratio: auto; max-width: none; } }
/* his choice (2026-11-05, "B"): the picture sits BETWEEN the name bar and the button - nothing lies on it; the full-screen
   button (.sv.clean) gives it the whole screen with the name, the button and the words on top, and back on a second tap */
.sv .sa { --top: calc(78px + env(safe-area-inset-top)); --bot: calc(10px + env(safe-area-inset-bottom)); }
.sv .with-cta .sa { --bot: calc(86px + env(safe-area-inset-bottom)); }
.sv.clean .sa, .sv.clean .with-cta .sa { --top: 0px; --bot: 0px; }
.sv:not(.clean) .sv-shade { opacity: 0; }
.sv .sa-fill { filter: blur(26px) brightness(.55) saturate(1.2); }
.sv-shade { height: 150px; background: linear-gradient(to bottom, rgba(0, 0, 0, .62), rgba(0, 0, 0, .25) 60%, transparent); }
.sv-shade.bot { inset: auto 0 0; height: 170px; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); opacity: 0; }
.sv.peek .sv-shade.bot { opacity: 0; }
/* the top row centred between the progress lines and the picture (his note: too close to the picture, too far from the lines):
   lines end at 13px, the picture starts at 78px, the row is 52px tall -> 19.5px from the top */
.sv-head { gap: 10px; inset-inline: 10px; top: calc(19.5px + env(safe-area-inset-top)); }
.sv-who { position: relative; flex: none; }
.sv-who .vx-av { width: 44px; height: 44px; }
/* the ring as a shadow, not an outline: iPhone browsers draw an outline around the square, not the circle (his screenshot) */
.sv-who { padding: 4px; }
.sv-who .vx-av.ring { outline: none; box-shadow: 0 0 0 2px #15131b, 0 0 0 4.5px var(--vx-accent); }
.sv-follow { position: absolute; bottom: -1px; inset-inline-start: -1px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid #111; background: var(--vx-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sv-follow svg { width: 12px; height: 12px; stroke-width: 3; }
.sv-follow span { display: none; }
.sv-follow.on { background: #2b2b33; color: var(--vx-accent); }
.sv-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sv-name b { font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-name small { font-size: .78rem; color: rgba(255, 255, 255, .78); }
.sv-head .end { flex: none; gap: 6px; }
.sv-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sv-btn svg { width: 20px; height: 20px; }
.sv-btn[hidden] { display: none; }
.sv-btn:active { transform: scale(.94); }
/* full screen = the original picture / clip and nothing on it (his ask, 2026-11-05) */
.sv.clean .sv-head, .sv.clean .sv-bars, .sv.clean .sv-cta, .sv.clean .sa-boxes, .sv.clean .sv-shade { opacity: 0 !important; pointer-events: none; }
/* the way back, for two seconds (his ask): a clear pill at the top, then it fades - a tap anywhere still comes back */
.sv-exit { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 6; height: 42px; padding: 0 16px; border: 0; border-radius: 99px;
  display: none; align-items: center; gap: 8px; color: #fff; font: inherit; font-size: .92rem; font-weight: 700; white-space: nowrap; pointer-events: none;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sv-exit svg { width: 18px; height: 18px; }
.sv.clean .sv-exit { display: flex; animation: sv-exit-hint 2.6s ease forwards; }
@keyframes sv-exit-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.sv-tap { top: calc(70px + env(safe-area-inset-top)); }
.with-cta .sv-text { bottom: calc(100px + env(safe-area-inset-bottom)); }
.with-cta .sv-plain { padding-bottom: 110px; }

/* ---------- the bell (#/notes) and me (#/me) ---------- */
.nt-page, .me-page { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.nt-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 34px 0 6px; }
.nt-h h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; }
.nt-sec { color: var(--text); font-weight: 900; font-size: 1.15rem; margin: 22px 0 10px; }
.nt-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 12px 14px; margin-bottom: 10px; text-align: right; width: 100%; transition: border-color .15s; }
.nt-row:hover { border-color: var(--line2); }
.nt-row .vx-av { width: 54px; height: 54px; }
.nt-row .body { flex: 1; min-width: 0; }
.nt-row b { display: block; font-weight: 800; font-size: 1.02rem; }
.nt-row .line { color: var(--dim); font-size: .94rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nt-row small { color: var(--faint); font-size: .8rem; }
.nt-row .thumb { width: 54px; height: 76px; border-radius: 12px; object-fit: cover; flex: none; background: var(--card2); }
.nt-row .thumb.sq { height: 54px; object-fit: contain; background: none; }
.nt-row.unread { border-color: color-mix(in srgb, var(--vx-accent) 45%, var(--line)); }
.nt-push { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--vx-accent) 18%, var(--card)), var(--card)); border: 1px solid var(--line2); border-radius: 22px; padding: 16px; margin-top: 16px; }
.nt-push p { flex: 1; color: var(--dim); font-size: .95rem; }
.nt-push b { color: var(--text); display: block; font-size: 1.05rem; }
/* a narrow bell (the phone sheet, the dropdown): the bell + the words on one row, the button under them, full width */
@media (max-width: 640px) { .nt-push { flex-wrap: wrap; } .nt-push .vx-btn { flex: 1 1 100%; } }
.ntm .nt-push { flex-wrap: wrap; } .ntm .nt-push .vx-btn { flex: 1 1 100%; }
.me-card { display: flex; align-items: center; gap: 18px; padding: 34px 0 10px; }
.me-card .vx-av { width: 84px; height: 84px; font-size: 1.8rem; }
.me-card h1 { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.me-card p { color: var(--dim); }
.me-sec { margin-top: 30px; }
.me-sec h2 { font-size: 1.3rem; font-weight: 900; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.me-sec h2 small { font-size: .85rem; color: var(--dim); font-weight: 500; }
.me-faces { display: flex; flex-wrap: wrap; gap: 14px; }
.me-faces a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70px; font-size: .82rem; color: var(--dim); text-align: center; line-height: 1.2; }
.me-faces .vx-av { width: 62px; height: 62px; }
.me-list { display: flex; flex-direction: column; gap: 10px; }
.me-list > a, .me-list > button { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; text-align: right; font-weight: 700; }
.me-list svg { width: 20px; height: 20px; color: var(--dim); flex: none; }
.me-list small { margin-inline-start: auto; color: var(--dim); font-weight: 500; }
.light-ok { color: var(--text); }
.stg.me { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.me-page .stc { background: var(--card); border-color: var(--line); }
.me-page .stc .by { color: var(--dim); }

/* nickname (first sign-in) - a full screen of its own */
.nk { position: fixed; inset: 0; z-index: 95; background: radial-gradient(ellipse at 50% -10%, rgba(255, 106, 31, .45), transparent 55%), #0b0b0e; color: #fff; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; padding: calc(30px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.nk > * { width: min(460px, 100%); }
.nk .vx-wordmark { justify-content: center; font-size: 1.5rem; }
.nk .big-av { width: 150px; height: 150px; margin: 22px auto 14px; }
.nk .big-av .vx-av { width: 150px; height: 150px; font-size: 3rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--vx-glass-line); }
.nk .big-av .vx-av svg { width: 55%; height: 55%; opacity: .6; }
.nk .chips2 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 0; }
.nk .grow { flex: 1; min-height: 20px; }

/* the home-screen guide (#/install) */
.ig { max-width: 640px; margin: 0 auto; padding: 30px 16px 40px; }
.ig h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; }
.ig > p { color: var(--dim); margin-top: 8px; font-size: 1.05rem; }
.ig-step { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--vx-r); padding: 18px; margin-top: 14px; overflow: hidden; }
.ig-step .n { color: var(--vx-accent); font-size: 3rem; font-weight: 900; line-height: 1; }
.ig-step h3 { font-size: 1.25rem; font-weight: 900; line-height: 1.25; margin-top: 6px; }
.ig-step p { color: var(--dim); font-size: .92rem; margin-top: 4px; }
.ig-pic { background: #f2f2f7; color: #111; border-radius: 18px; height: 140px; position: relative; overflow: hidden; font-family: -apple-system, 'Heebo', sans-serif; }
.ig-pic.dark { background: #1c1c1e; color: #fff; }
.ig-url { position: absolute; top: 18px; inset-inline: 12px; height: 34px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: #333; direction: ltr; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.ig-bar { position: absolute; bottom: 14px; inset-inline: 10px; display: flex; justify-content: space-around; align-items: center; color: #0a84ff; direction: ltr; }
.ig-bar svg { width: 22px; height: 22px; }
.ig-ring { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--vx-accent); box-shadow: 0 0 0 6px rgba(255, 106, 31, .2); }
.ig-sheet { position: absolute; inset: 10px; display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; }
.ig-sheet div { background: #2c2c2e; height: 33px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: .78rem; }
.ig-sheet div svg { width: 16px; height: 16px; }
.ig-sheet .hl { outline: 2.5px solid var(--vx-accent); outline-offset: -2.5px; border-radius: 8px; background: #3a3a3c; font-weight: 700; }
.ig-home { position: absolute; inset: 0; background: linear-gradient(160deg, #3b2a5a, #12121a); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 14px; direction: ltr; }
.ig-home span { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.ig-home .me { background: #0b0b0e; display: grid; place-items: center; color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent); }
.ig-home .me img { width: 100%; height: 100%; border-radius: 12px; display: block; }
.ig-ok { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--vx-r); padding: 18px; margin-top: 20px; }
.ig-ok p { flex: 1; color: var(--dim); }
.ig-tabs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.ig .chip.on { border-color: var(--vx-accent); color: var(--text); }
@media (max-width: 560px) { .ig-step { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; } .ig-step .n { font-size: 2.4rem; } .ig-step h3 { font-size: 1.05rem; } .ig-step p { font-size: .82rem; } .ig-pic { height: 118px; } .ig-url { font-size: .62rem; height: 28px; top: 12px; } .ig-sheet div { font-size: .66rem; height: 24px; padding: 0 8px; } }

/* the guide's request to Shlomi inside a reply - a note, not a form (GPT Image design, 2026-11-01) */
.rq { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; color: var(--text);
  background: linear-gradient(160deg, rgba(255,106,31,.16), rgba(255,106,31,.03) 45%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,122,61,.45); box-shadow: 0 0 0 1px rgba(255,106,31,.06), 0 10px 30px -14px rgba(255,106,31,.55); }
.rq-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; }
.rq-h svg { width: 22px; height: 22px; color: var(--vx-accent); flex: none; }
.rq-q { position: relative; display: block; }
.rq-q textarea { display: block; width: 100%; min-height: 112px; resize: none; border-radius: 14px; border: 1px solid var(--line2);
  background: rgba(0,0,0,.35); color: var(--text); font: inherit; font-size: .95rem; line-height: 1.5; padding: 10px 12px 10px 34px; outline: none; }
.rq-q textarea:focus { border-color: rgba(255,122,61,.7); }
.rq-q svg { position: absolute; left: 10px; bottom: 10px; width: 17px; height: 17px; color: var(--dim); pointer-events: none; }
.rq input { width: 100%; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--text);
  font: inherit; font-size: .88rem; padding: 6px 2px 8px; outline: none; }
.rq input:focus { border-bottom-color: var(--vx-accent); }
.rq input::placeholder, .rq-q textarea::placeholder { color: var(--faint, #777); }
.rq-go { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--vx-accent); color: #fff; font: inherit; font-weight: 800; font-size: .98rem; box-shadow: 0 6px 22px -8px rgba(255,106,31,.8); }
.rq-go svg { width: 19px; height: 19px; }
.rq-go:disabled { opacity: .6; }
.rq small { color: var(--dim); font-size: .76rem; text-align: center; }
.rq.sent { padding: 12px 14px; }

/* a character asks to sign in, in their own voice: one Google button inside the bubble */
.si { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 10px; }
.si button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 99px; cursor: pointer;
  background: #fff; color: #111; border: 1.5px solid rgba(255,122,61,.9); font: inherit; font-weight: 800; font-size: .98rem;
  box-shadow: 0 0 18px -4px rgba(255,106,31,.6); }
.si button svg { width: 21px; height: 21px; }
.si small { color: var(--dim); font-size: .76rem; text-align: center; }

/* light theme: the pages (not the video, stories and sheets, which stay dark over video) */
:root[data-theme="light"] .nt-row, :root[data-theme="light"] .me-list > a, :root[data-theme="light"] .me-list > button { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
@media (prefers-reduced-motion: reduce) { .st-art.working .frame, .st-art .made { animation: none; } }

.stc .by { font-size: .78rem; color: rgba(255, 255, 255, .55); padding: 6px 0 8px; }

/* the sign-in sheet (A): compact, the video stays visible above it */
.vx-sheet.signin .in { padding: 4px 22px 18px; }
.vx-sheet.signin .vx-hero-face, .vx-sheet.signin .vx-hero-face .vx-av { width: 76px; height: 76px; }
.vx-sheet.signin .vx-h { font-size: 1.6rem; margin: 12px 0 4px; }
.vx-sheet.signin .vx-reasons { gap: 10px; margin: 14px 0 18px; }
.vx-sheet.signin .vx-reasons .vx-round { width: 44px; height: 44px; }
.vx-sheet.signin .vx-reasons div { font-size: 1rem; }
.nk .vx-wordmark { align-items: center; font-size: 1.7rem; }
.nk .vx-wordmark small { font-size: .52em; }
.vx-wordmark small { white-space: nowrap; }
.vx-btn .vx-spin { width: 20px; height: 20px; }
body[data-page="notes"] .fab, body[data-page="me"] .fab, body[data-page="install"] .fab { display: none !important; }

/* ---- design review against the mockups (2026-10-31) ---- */
.vp-big { display: none; }
.vp-dim { background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .14) 24%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .6)); }
.vp.ui .vp-mark { opacity: 0; transition: none; }
.vp-line { inset-inline: 12px; bottom: 7px; height: 3px; border-radius: 3px; overflow: hidden; }
.vp-ep { padding: 18px 20px 14px; }
.vp-ep h2 { font-size: 1.25rem; }
.vp-ep .scrub { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
.vp-ep .scrub .times { display: flex; justify-content: space-between; }
.vp-ep .pp { width: 58px; height: 58px; }
.st-art { width: min(70vw, 300px); }
.st-art .frame { width: auto; height: 100%; aspect-ratio: 9 / 16; }
.vx-back.blur { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgba(0, 0, 0, .3); }
.vx-card { background: rgba(28, 27, 32, .72); }
.vx-hero-face .ok { inset-inline-end: auto; right: -6px; }
.vx-sheet.signin .vx-hero-face, .vx-sheet.signin .vx-hero-face .vx-av { width: 66px; height: 66px; }
.vx-sheet.signin .vx-h { font-size: 1.5rem; white-space: nowrap; }
.nk { justify-content: center; }
.nk .grow { flex: 0 0 26px; min-height: 26px; }
.nk-h { font-size: 1.62rem; margin-top: 22px; white-space: nowrap; }
.nk .vx-sub { font-size: .95rem; }
.nk .chips2 { flex-wrap: nowrap; }
.nk .chips2 .vx-pill { height: 36px; padding: 0 13px; font-size: .86rem; }
.nk .vx-field { height: 62px; font-size: 1.2rem; }
.ig h1 { font-size: clamp(1.5rem, 6.6vw, 2.8rem); white-space: nowrap; }
.ig-tabs { justify-content: center; gap: 10px; color: var(--faint); font-size: .9rem; margin-top: 16px; }
.ig-tabs a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.ig-home { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 12px; align-content: start; }
.ig-home span { border-radius: 10px; }
.ig-home .a1 { background: #34c759; }
.ig-home .a2 { background: conic-gradient(#ff9500, #ffcc00, #34c759, #5ac8fa, #af52de, #ff2d55, #ff9500); }
.ig-home .a3 { background: #8e8e93; } .ig-home .a4 { background: #0a84ff; } .ig-home .a5 { background: #f2f2f7; }
.ig-home .a6 { background: #ffd60a; } .ig-home .a7 { background: #5e5ce6; }
.ig-home .me { position: relative; box-shadow: 0 0 0 2.5px var(--vx-accent); }
.ig-home .me b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: .55rem; color: #fff; white-space: nowrap; font-weight: 600; }
.nt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nt-chips::-webkit-scrollbar { display: none; }
.nt-chips .chip { flex: none; }
.nt-row { min-height: 104px; }
.nt-row .thumb { width: 66px; height: 88px; border-radius: 14px; }
.nt-row .thumb.sq { width: 66px; height: 66px; }
.st-art { width: min(70vw, 300px); height: min(70vw, 300px); aspect-ratio: auto; }
.st-art .frame { height: 100%; width: auto; max-width: 100%; }
/* a card over the video page (mockup C): the header stays sharp, the video blurs, the side buttons and the episode card step away */
.vx-carded .vp video, .vx-carded .vp-stage > img { filter: blur(18px) brightness(.8); transform: scale(1.06); transition: filter .25s; }
.vx-carded .vp-rail, .vx-carded .vp-ep, .vx-carded .vp-line { opacity: 0; pointer-events: none; }
.vx-carded .vx-back.blur { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .12); }
.vx-carded .vp-head { position: absolute; z-index: 95; }
.nk .chips2 .vx-pill { white-space: nowrap; }
.chips.nt-chips { flex-wrap: nowrap; overflow-x: auto; }
.st-art .frame { height: min(70vw, 300px); width: auto; max-width: none; }
.nk .big-av, .nk .big-av .vx-av { width: 172px; height: 172px; }
.vp-ep .scrub input[type=range] { flex: none; height: 4px; }
.vp-head { gap: 10px; }
.vp-who { min-width: 0; flex: 0 1 auto; }
.vp-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.vp-head .vx-pill { flex: none; }
.vp-brand { flex: none; }
@media (max-width: 420px) { .vp-brand { font-size: 1.3rem; } .vp-brand small { font-size: .68rem; } }
.vp-who b { max-width: 46vw; }
@media (max-width: 420px) {
  .vp-head { gap: 8px; inset-inline: 12px; }
  .vp-who .vx-av { width: 42px; height: 42px; }
  .vp-who b { font-size: 1.05rem; }
  .vp-head .vx-pill { padding: 0 12px; }
  .vp-brand { font-size: 1.15rem; }
  .vp-brand small { display: none; }
}

/* ---- signed-in home: the hero's wall of faces, faint, behind the greeting ---- */
.yv-top { position: relative; overflow: hidden; perspective: 1100px; padding: 54px 0 34px; }
.yv-top .wall.r, .yv-top .wall.l { opacity: .13; }
.yv-top .tile span { display: none; }
.yv-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 55%, color-mix(in srgb, var(--bg) 70%, transparent), transparent 75%), linear-gradient(to bottom, transparent 55%, var(--bg)); }
.yv-top-in { position: relative; z-index: 2; }
.yv-top .yv-hi { justify-content: center; text-align: center; }
.yv-top .ask { margin-inline: auto; margin-top: 18px; max-width: 720px; }
.yv { padding-top: 0; }
.yv > .yv-sec:first-child { margin-top: 8px; }

/* the top bar never moves between pages: short pages (the bell, me) would drop the scrollbar and shift everything sideways */
html { scrollbar-gutter: stable; }

/* ---- the planet logo on the site (2026-11-01): beside the wordmark in the top bar, the centrepiece of the hero ---- */
.brand { gap: 6px; }
.brand .brand-logo { width: 46px; height: 46px; object-fit: contain; margin-block: -6px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 106, 31, .25)); }
.wordmark.hero-logo img { display: block; width: min(400px, 62vw); height: auto; margin: -20px auto -6px; }
.hero-logo small { margin-top: 4px; }
@media (min-width: 821px) { section.hero { height: max(640px, 100svh); } }
@media (max-width: 820px) { .brand .brand-logo { width: 38px; height: 38px; margin-block: -4px; } .wordmark.hero-logo img { width: min(300px, 70vw); margin-top: -10px; } }

/* ---- their face on the name screen: tap the circle (or the pill) to upload, crop into the circle ---- */
.nk .big-av { position: relative; }
.nk-face { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.nk .big-av img.vx-av { object-fit: cover; display: block; border: 2px solid rgba(255, 255, 255, .9); }
.nk-cam { position: absolute; bottom: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vx-accent); color: #fff; box-shadow: 0 0 0 4px #0b0b0e, 0 6px 18px rgba(255, 106, 31, .4); }
.nk-cam svg { width: 22px; height: 22px; }
.nk-del { position: absolute; top: 4px; left: 4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: rgba(20, 20, 24, .85); color: #fff; border: 1px solid var(--vx-glass-line); cursor: pointer; }
.nk-del svg { width: 16px; height: 16px; }
.nk-ph { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.nk-ph .vx-pill { white-space: nowrap; }

.crop { position: fixed; inset: 0; z-index: 120; background: #0b0b0e; color: #fff; display: grid; place-items: center; padding: 24px 20px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% -10%, rgba(255, 106, 31, .3), transparent 55%), #0b0b0e; }
.crop-in { width: min(420px, 100%); text-align: center; }
.crop .vx-h { font-size: 1.7rem; }
.crop .vx-sub { margin-top: 6px; }
.crop-stage { position: relative; width: min(84vw, 340px); aspect-ratio: 1; margin: 26px auto 18px; overflow: hidden; border-radius: 24px; touch-action: none; cursor: grab; background: #000; }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(11, 11, 14, .62); border: 2px solid rgba(255, 255, 255, .85); pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; margin: 0 auto 22px; width: min(84vw, 340px); color: rgba(255, 255, 255, .7); }
.crop-zoom svg { width: 18px; height: 18px; }
.crop-zoom input { flex: 1; accent-color: var(--vx-accent); }
.crop .vx-link { margin-top: 10px; }

/* ---- comment rows (2026-11-01): the name line had the wiki's own .who (centred); now its own, start-aligned ---- */
.cm-item { gap: 11px; padding: 12px 0; }
.cm-item > .vx-av { flex: none; width: 36px; height: 36px; margin-top: 1px; }
.cm-who { display: flex; align-items: baseline; justify-content: flex-start; gap: 7px; line-height: 1.25; }
.cm-who b { font-weight: 800; font-size: .93rem; color: #fff; }
.cm-item.char .cm-who b { color: var(--c); }
.cm-who small { color: rgba(255, 255, 255, .42); font-size: .78rem; font-weight: 500; }
.cm-who small::before { content: '·'; margin-inline-end: 7px; }
.cm-item .txt { margin-top: 3px; }
.cm-item .acts { gap: 16px; margin-top: 7px; }
.cm-item .acts svg { width: 16px; height: 16px; }
.cm-item .acts .on .pl { filter: drop-shadow(0 0 4px rgba(255, 106, 31, .55)); }
.cm-item.sending { opacity: .55; }
.cm-replies { margin-inline-start: 47px; padding-inline-start: 12px; }
.cm-replies .cm-item > .vx-av { width: 30px; height: 30px; }

/* the footer sits at the bottom of the screen on short pages (the bell, me), not in the middle */
body { display: flex; flex-direction: column; min-height: 100svh; }
body > main#app { flex: 1 0 auto; }

/* ---- the sticker as a real WhatsApp sticker: preview on a checkerboard (it's see-through), steps for this phone ---- */
.wa { padding: 6px 20px 18px; text-align: center; }
.wa .vx-h { font-size: 1.45rem; }
.wa-art { width: 200px; height: 200px; margin: 14px auto 16px; border-radius: 22px; display: grid; place-items: center;
  background: repeating-conic-gradient(rgba(255, 255, 255, .07) 0 25%, transparent 0 50%) 0 0 / 20px 20px; border: 1px solid var(--vx-glass-line); }
.wa-art img { width: 100%; height: 100%; object-fit: contain; }
.wa-steps { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 360px; text-align: start; display: grid; gap: 10px; }
.wa-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.wa-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--vx-accent); color: #fff; font-size: .8rem; }
.wa-btns { display: grid; gap: 10px; max-width: 360px; margin: 0 auto; }
.stc img[data-wa-img] { cursor: pointer; }
.nk .chips2 { flex-wrap: wrap; row-gap: 8px; }
.crop-zoom { direction: ltr; }

/* ---- dark / light lives in the profile menu and page now, not in the top bar ---- */
#theme { display: none; }
.yv-wait { min-height: 196px; }
.yv-ghost { height: 72px; border-radius: 22px; border: 1.5px solid rgba(255, 106, 31, .35); background: rgba(255, 255, 255, .03); }
.vx-switch { margin-inline-start: auto; width: 40px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .16); position: relative; flex: none; transition: background .2s; }
.vx-switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.vx-switch.on { background: var(--vx-accent); }
.vx-switch.on::after { transform: translateX(-16px); }
/* the face in the top bar = their avatar (photo, or the coloured initial) */
.vx-top .me-btn { padding: 0; cursor: pointer; }
.vx-top .me-btn .vx-av { width: 100%; height: 100%; font-size: 1rem; border: 0; }
/* the menu */
.mm-back { position: fixed; inset: 0; z-index: 80; }
.mm-pop { position: fixed; z-index: 81; width: 300px; border-radius: 22px; background: rgba(24, 23, 28, .96); border: 1px solid var(--vx-glass-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 8px; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s; color: #fff; }
.mm-pop.open { opacity: 1; transform: none; }
.mm-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--vx-glass-line); margin-bottom: 6px; border-radius: 14px; }
.mm-head:hover { background: rgba(255, 255, 255, .05); }
.mm-head .vx-av { width: 46px; height: 46px; flex: none; }
.mm-head .mm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-head b { font-weight: 800; font-size: 1.02rem; }
.mm-head small { color: rgba(255, 255, 255, .5); font-size: .8rem; }
.mm-head > svg { width: 16px; height: 16px; opacity: .5; }
.mm-list { display: flex; flex-direction: column; }
.mm-list a, .mm-list button { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; font-weight: 600; font-size: .95rem; text-align: start; width: 100%; color: inherit; background: none; border: 0; cursor: pointer; }
.mm-list a:hover, .mm-list button:hover { background: rgba(255, 255, 255, .06); }
.mm-list svg { width: 19px; height: 19px; opacity: .8; flex: none; }
.mm-list em { margin-inline-start: auto; font-style: normal; font-size: .75rem; font-weight: 800; background: var(--vx-accent); color: #fff; border-radius: 99px; padding: 1px 8px; }
.mm-list [data-signout] { color: #ffb199; }
.mm-sheet .mm { padding: 0 14px 18px; }

/* ---- the signed-in home, livelier (2026-11-01): your characters' faces, one-tap picks, the fans' stickers ---- */
.yv-faces { display: flex; gap: 16px; justify-content: center; overflow-x: auto; scrollbar-width: none; margin: 22px auto 0; padding: 6px 4px 2px; max-width: 100%; }
.yv-faces::-webkit-scrollbar { display: none; }
.yv-face { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; width: 76px; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .85); text-align: center; line-height: 1.2; }
.yv-face .vx-av { width: 66px; height: 66px; }
.yv-face[data-story] .vx-av { box-shadow: 0 0 0 3px #0b0b0e, 0 0 0 5.5px var(--vx-accent); }
.yv-face.add .vx-av { background: rgba(255, 255, 255, .06); border: 1.5px dashed rgba(255, 255, 255, .3); display: grid; place-items: center; color: rgba(255, 255, 255, .7); }
.yv-face.add .vx-av svg { width: 24px; height: 24px; }
.yv-face span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .yv-faces { justify-content: flex-start; } }
.yv-picks { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.yv-picks::-webkit-scrollbar { display: none; }
.yv-pick { position: relative; border-radius: 20px; overflow: hidden; background: var(--card2, #18171c); border: 1px solid var(--line, rgba(255,255,255,.08)); display: flex; flex-direction: column; }
.yv-pick a { display: flex; flex-direction: column; color: inherit; }
.yv-pick img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.yv-pick b { font-weight: 800; font-size: .98rem; padding: 10px 12px 0; }
.yv-pick small { color: var(--dim, rgba(255,255,255,.6)); font-size: .78rem; padding: 2px 12px 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.yv-pick .vx-pill { margin: 10px 12px 12px; justify-content: center; background: var(--vx-accent); color: #fff; border-color: transparent; }
.yv-pick .vx-pill svg { width: 14px; height: 14px; }
.yv-st { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.yv-st::-webkit-scrollbar { display: none; }
.yv-stk { position: relative; aspect-ratio: 1; border-radius: 20px; padding: 8px; cursor: pointer; border: 1px solid var(--line, rgba(255,255,255,.08));
  background: radial-gradient(circle at 50% 40%, rgba(255, 106, 31, .14), transparent 70%), var(--card2, #18171c); }
.yv-stk img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.yv-stk:hover img { transform: scale(1.05) rotate(-2deg); }
.yv-stk span { position: absolute; bottom: 6px; inset-inline-end: 8px; display: flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 800; color: var(--vx-accent); }
.yv-stk span svg { width: 14px; height: 14px; }

/* ---- the guide's face = the logo's planet (orange on the dark, like the logo), not the generic AI star ---- */
span.gmark { background: none; overflow: visible; display: grid; place-items: center; }
span.gmark img { width: 100%; height: 100%; max-width: none; object-fit: contain; border: 0; border-radius: 0; margin: 0; }
/* the logo is its own round shape: no circle, ring or background around it anywhere it stands for the guide */
.cx-strip button:has(.gmark), .cx-head .av:has(.gmark), .who .av:has(.gmark), .faces .gmark, .who button:has(.gmark) .av {
  background: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.cx-strip button.on:has(.gmark) img, .who button.on .gmark img { filter: drop-shadow(0 0 7px rgba(255, 106, 31, .8)); }
/* the chat thinking: three planets growing and glowing one after the other */
div.m.wait::after { content: none; display: none; }
.think { display: inline-flex; gap: 7px; align-items: center; height: 22px; padding: 2px 2px; color: var(--vx-accent); --pl-fill: #19171c; }
.think svg { width: 18px; height: 18px; animation: think 1.25s ease-in-out infinite; transform-origin: center; }
.think svg:nth-child(2) { animation-delay: .18s; }
.think svg:nth-child(3) { animation-delay: .36s; }
@keyframes think { 0%, 70%, 100% { transform: scale(.62); opacity: .35; filter: none; } 30% { transform: scale(1.12) rotate(-10deg); opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 106, 31, .75)); } }
.wa-art { position: relative; overflow: hidden; }
.wa-art canvas { width: 100%; height: 100%; display: block; }
.wa-art img.wa-logo { position: absolute; height: auto; object-fit: initial; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 0 0 transparent); transition: filter .15s; }
.wa-logo.drag { cursor: grabbing; filter: drop-shadow(0 0 8px rgba(255, 106, 31, .8)); }
.wa-hint { font-size: .8rem; color: rgba(255, 255, 255, .5); margin: -8px 0 14px; }

/* ---- phone top bar: the logo alone, bigger (it says שלומיוורס itself), the search gets the room ---- */
@media (max-width: 820px) {
  .brand > span { display: none; }
  .brand .brand-logo { width: 58px; height: auto; margin-block: -10px; filter: drop-shadow(0 0 8px rgba(255, 106, 31, .3)); }
}

/* ---- the bell's dropdown / sheet (same list as the page) ---- */
.nt-pop { padding: 0; max-height: min(72vh, 640px); display: flex; flex-direction: column; overflow: hidden; }
.ntm { display: flex; flex-direction: column; min-height: 0; }
.ntm-h { padding: 16px 18px 6px; font-size: 1.15rem; font-weight: 900; }
.ntm-body { overflow-y: auto; padding: 4px 14px 14px; min-height: 0; }
.nt-pop .ntm-body { max-height: calc(min(72vh, 640px) - 50px); }
.ntm .nt-chips { margin-top: 6px; }
.ntm .nt-chips .chip { height: 32px; font-size: .82rem; padding: 0 12px; }
.ntm .nt-row { min-height: 0; }
.nt-sheet .ntm-h { padding-top: 4px; }
.nt-sheet .ntm-body { max-height: 70vh; }
.vx-top [data-bell] { cursor: pointer; position: relative; }
/* the guide's logo is never cropped (the wiki's avatar rules fill-and-crop images) */
span.gmark img { object-fit: contain !important; width: 100% !important; height: 100% !important; }
/* chosen in the chat's strip / "מי עונה?": the same orange ring the characters get, so it's clear who answers */
.cx-strip button.on:has(.gmark) { border-radius: 50% !important; outline: 2px solid var(--accent) !important; outline-offset: 2px !important; overflow: hidden !important; }
.cx-strip button.on:has(.gmark) span.gmark img { width: 86% !important; height: 86% !important; filter: none; }
.cx-strip button:has(.gmark) span.gmark img { width: 92% !important; }
.who button.on:has(.gmark) .av { border-radius: 50% !important; outline: 2px solid var(--accent) !important; outline-offset: 2px !important; overflow: hidden !important; }
.who button.on:has(.gmark) span.gmark img { width: 86% !important; height: 86% !important; }
.who button.on .gmark img { filter: none; }
/* play in Hebrew: after the words, pointing left (forward), like the site's "←" links */
.btn.play-rtl { display: inline-flex; align-items: center; gap: 8px; }
.btn.play-rtl svg { width: 15px; height: 15px; flex: none; }
.btn.play-rtl svg { width: 16px !important; height: 16px !important; }

/* ---- the like = the logo: grey and quiet until it's theirs, then lit up (and a little pop) ---- */
.lk { width: 22px; height: auto; flex: none; filter: grayscale(1) brightness(1.5) opacity(.5); transition: filter .2s, transform .2s; }
button:hover > .lk { filter: grayscale(.4) brightness(1.2) opacity(.85); }
.on > .lk { filter: drop-shadow(0 0 5px rgba(255, 106, 31, .7)); animation: lk-pop .35s ease-out; }
@keyframes lk-pop { 40% { transform: scale(1.35) rotate(-12deg); } 100% { transform: none; } }
.cm-item .acts .like { gap: 6px; }
.cm-item .acts .like.on span { color: var(--vx-accent); }
.stamp .lk { width: 20px; }
.yv-stk span .lk { width: 18px; }
/* mentions: characters in their colour (a link to their page), people in the accent */
.cm-item .txt .at { color: var(--c, var(--vx-accent)); font-weight: 700; text-decoration: none; }
.cm-item .txt .at.fan { color: var(--vx-accent); }
.cm-item .txt a.at:hover { text-decoration: underline; }
.cm-face { flex: none; display: block; border-radius: 50%; }
.cm-face .vx-av { width: 36px; height: 36px; }
.cm-replies .cm-face .vx-av { width: 30px; height: 30px; }
.cm-who a { color: inherit; text-decoration: none; }
.cm-who a:hover b { text-decoration: underline; }

/* ---- under a video card: its characters as small links (face + name) straight under the title ---- */
.vid .cast { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.vid .cast-c { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--dim); padding: 2px; padding-inline-end: 9px;   /* the name gets the room, the face hugs its own side (RTL: the old 8px sat next to the face, the name touched the border) */ border-radius: 99px;
  background: var(--card2, rgba(255,255,255,.06)); border: 1px solid var(--line, rgba(255,255,255,.08)); cursor: pointer; transition: color .15s, border-color .15s; }
.vid .cast-c img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.vid .cast-c:hover { color: var(--text, #fff); border-color: var(--vx-accent); }

/* ---- signed in: the same hero, then their part right under it ---- */
.yv-me { margin-top: 30px; }
.yv-me .yv-hi h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; }
.yv-me .yv-faces { justify-content: flex-start; margin: 16px 0 0; }
div.yv-wait { min-height: 0; }

/* ---- the menu: two groups (yours / settings), each line says what's behind it ---- */
.mm-g { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: rgba(255, 255, 255, .42); padding: 10px 10px 4px; }
.mm-list .mm-l { flex: 1; }
.mm-list small { font-size: .78rem; color: rgba(255, 255, 255, .45); font-weight: 600; }
.mm-head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-pop { max-height: calc(100vh - 90px); overflow-y: auto; }
/* saved */
.sv-page .pg-sub, .nt-h .pg-sub { color: var(--dim); margin-top: 4px; }
.sv-page .vgrid { margin-top: 18px; }
/* chat: start over */
.cx-head .nc { margin-inline-start: auto; }
.cx-head .nc + .x { margin-inline-start: 6px; }
.cx-head .nc svg { width: 19px; height: 19px; }
/* the hero's greeting for someone signed in (in place of the tagline) */
.wordmark small.hero-hi { color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -.02em; }
.yv-me { margin-top: 26px; }
/* "this conversation will be gone": a Shlomiverse card over the dimmed chat (never the browser's own box) */
.nc-ask { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(8, 8, 10, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@keyframes nc-in { from { opacity: 0; } }
.nc-card { width: min(320px, 100%); text-align: center; background: rgba(28, 27, 32, .96); border: 1px solid var(--vx-glass-line); border-radius: 26px;
  padding: 22px 20px 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); color: #fff; }
.nc-face { display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; }
.nc-face img, .nc-face .ph { width: 100%; height: 100%; object-fit: cover; }
.nc-card b { display: block; font-size: 1.2rem; font-weight: 900; }
.nc-card p { color: rgba(255, 255, 255, .65); font-size: .92rem; margin: 6px 0 16px; line-height: 1.45; }
.nc-card .nc-yes { width: 100%; height: 48px; border-radius: 99px; background: var(--vx-accent); color: #fff; font-weight: 800; font-size: 1rem; box-shadow: 0 8px 24px rgba(255, 106, 31, .35); }
.nc-card .nc-no { width: 100%; height: 40px; margin-top: 4px; background: none; color: rgba(255, 255, 255, .65); font-weight: 700; }

/* the profile lives at the top (face / sign-in); the bottom bar keeps the four places */
.nav .nav-me { display: none !important; }
@media (max-width: 820px) {
  .vx-top .me-btn { width: 36px; height: 36px; }
  .vx-top .in-btn { height: 36px; padding: 0 12px; font-size: .85rem; }
}

/* ---- footer: short (was 100-150 px of empty bottom), each social link with its icon and name ---- */
body > footer { padding: 22px 0 24px !important; margin-top: 48px !important; }
@media (max-width: 820px) { body > footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; margin-top: 36px !important; } }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.foot-brand img { width: 44px; height: auto; }
.foot-brand span { display: flex; flex-direction: column; font-weight: 800; line-height: 1.15; }
.foot-brand small { font-weight: 500; color: var(--dim); font-size: .8rem; }
.foot-soc { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-soc a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--dim); font-size: .84rem; font-weight: 600; transition: color .15s, border-color .15s; }
.foot-soc a:hover { color: var(--text); border-color: var(--vx-accent); }
.foot-soc svg { width: 16px; height: 16px; }

/* ---- their pages (one thing each) ---- */
.pg-back { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.pg-back svg { width: 14px; height: 14px; }
.me-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 0 8px; }
.me-hero .vx-av { width: 104px; height: 104px; font-size: 2.4rem; }
.me-hero h1 { font-size: 1.9rem; font-weight: 900; }
.me-hero .vx-pill { background: var(--card2, rgba(255,255,255,.06)); }
.me-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; max-width: 760px; margin-inline: auto; }
.me-tile { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--text); transition: border-color .15s; }
.me-tile:hover { border-color: var(--vx-accent); }
.me-tile > svg:first-child { width: 22px; height: 22px; color: var(--vx-accent); flex: none; }
.me-tile b { flex: 1; font-weight: 800; }
.me-tile span { color: var(--dim); font-weight: 700; }
.me-tile > svg:last-child { width: 15px; height: 15px; opacity: .45; }
.me-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.me-char { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--text); }
.me-char .vx-av { width: 72px; height: 72px; }
.me-char b { font-weight: 800; }
.me-char small { color: var(--dim); font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.me-char.add .vx-av { background: rgba(255, 255, 255, .06); border: 1.5px dashed rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .7); }
.me-char.add .vx-av svg { width: 24px; height: 24px; }
.nt-h:has(.pg-back) { display: block; }
.nt-h:has(.pg-back) h1 { margin-top: 2px; }
/* the floating "talk to the characters" steps aside while the footer is on screen */
.fab.vx-hide { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .2s, transform .2s; }

/* ---- footer = one flat line: logo · name · tagline | community, business | the socials ---- */
body > footer { padding: 14px 0 !important; margin-top: 40px !important; }
@media (max-width: 820px) { body > footer { padding: 12px 0 calc(70px + env(safe-area-inset-bottom)) !important; margin-top: 28px !important; } }
.foot { flex-wrap: nowrap; gap: 18px; }
.foot-brand { gap: 8px; flex: none; }
.foot-brand img { width: 34px; }
.foot-brand span { flex-direction: row; font-weight: 800; }
.foot-brand small { color: var(--dim); font-size: .82rem; font-weight: 500; }
.foot-brand small::before { content: '·'; margin-inline: 2px 7px; }
.foot-links { display: flex; gap: 16px; margin-inline-start: auto; font-size: .86rem; font-weight: 700; }
.foot-links a { color: var(--dim); } .foot-links a:hover { color: var(--text); }
.foot-soc { flex-wrap: nowrap; gap: 6px; }
.foot-soc a { height: 32px; padding: 0 11px; font-size: .8rem; }
@media (max-width: 1100px) { .foot-soc a span { display: none; } .foot-soc a { width: 32px; padding: 0; justify-content: center; } }
@media (max-width: 600px) { .foot { flex-wrap: wrap; row-gap: 10px; } .foot-brand small { display: none; } .foot-links { margin-inline-start: auto; } .foot-soc { width: 100%; justify-content: center; } }

/* a character's chat: "<name> מקליד/ה…" with WhatsApp-like dots (the guide keeps the planets) */
.typing { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font-size: .9rem; }
.typing b { font-weight: 600; margin-inline-end: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-of-type(2) { animation-delay: .15s; } .typing i:nth-of-type(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ======== the community (mockups G-J) ======== */
.cmy { max-width: 980px; margin: 0 auto; padding: 0 16px 40px; }
.cmy-hero { position: relative; text-align: center; padding: 30px 0 18px; isolation: isolate; overflow: hidden; border-radius: 0 0 28px 28px; }
.cmy-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 240px; background: radial-gradient(ellipse 50% 70% at 50% 30%, rgba(255, 106, 31, .28), transparent 70%); pointer-events: none; z-index: -1; }
.cmy-faces { display: flex; justify-content: center; align-items: center; margin-bottom: 14px; }
.cmy-faces img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid #0b0b0e; margin-inline-start: -16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.cmy-faces img:first-child { margin-inline-start: 0; }
.cmy-faces img:nth-child(3) { width: 92px; height: 92px; z-index: 1; border-color: var(--vx-accent); }
.cmy-hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; letter-spacing: -.03em; }
.cmy-hero p { color: var(--dim); font-size: 1.08rem; margin-top: 4px; }
.cmy-ideas, .cmy-band { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 18px; margin-top: 18px; }
.cmy-ideas-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmy-ideas-h h2 { font-size: 1.45rem; font-weight: 900; }
.cmy-ideas-h p { color: var(--dim); font-size: .9rem; margin-top: 2px; }
.cmy-ideas .nt-chips { margin: 14px 0 4px; }
.ideas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ideas.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.idea { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.idea.hl { border-color: var(--vx-accent); box-shadow: 0 0 0 3px rgba(255, 106, 31, .15); }
.idea-faces { display: flex; flex: none; }
.idea-faces .vx-av { width: 48px; height: 48px; }
.idea-faces a + a { margin-inline-start: -14px; }
.idea-body { flex: 1; min-width: 0; }
.idea-by { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--dim); }
.idea-by .vx-av { width: 22px; height: 22px; font-size: .65rem; }
.idea-by small { opacity: .7; }
.idea-body p { font-weight: 700; font-size: 1rem; line-height: 1.35; margin-top: 3px; }
.idea-kind { display: inline-block; margin-top: 5px; font-size: .72rem; font-weight: 700; color: var(--vx-accent); background: rgba(255, 106, 31, .12); border-radius: 99px; padding: 1px 8px; }
.idea-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.idea .vote { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-weight: 800; color: var(--text); cursor: pointer; }
.idea .vote b { font-size: .82rem; }
.idea .vote span { color: var(--dim); font-size: .85rem; }
.idea .vote.on { border-color: var(--vx-accent); background: rgba(255, 106, 31, .12); }
.idea .vote.on span { color: var(--vx-accent); }
.idea .icon-btn { width: 38px; height: 38px; }
.idea .icon-btn svg { width: 17px; height: 17px; }
.cmy-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.cmy-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color .15s; }
.cmy-tile:hover { border-color: var(--vx-accent); }
.cmy-tile svg { width: 26px; height: 26px; color: var(--vx-accent); margin-bottom: 4px; }
.cmy-tile b { font-weight: 800; font-size: 1.02rem; }
.cmy-tile small { color: var(--dim); font-size: .82rem; line-height: 1.35; }
@media (max-width: 600px) { .cmy-tiles { grid-template-columns: 1fr 1fr; } .cmy-tile:last-child { grid-column: 1 / -1; } .idea { flex-wrap: wrap; } .idea-acts { width: 100%; justify-content: flex-end; } }
.cmy-biz, .cmy-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; padding: 20px; border-radius: 24px; margin-top: 14px; color: var(--text);
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(255, 106, 31, .22), transparent 70%), var(--card); border: 1px solid var(--line); text-align: start; cursor: pointer; width: 100%; }
.cmy-biz h3, .cmy-card h3 { font-size: 1.3rem; font-weight: 900; }
.cmy-biz p, .cmy-card p { color: var(--dim); font-size: .9rem; margin: 3px 0 12px; }
.cmy-biz img { width: 120px; height: auto; flex: none; opacity: .9; }
.cmy-card img { width: 64px; flex: none; }
.cmy-biz .vx-pill, .cmy-card .vx-pill { background: rgba(255, 255, 255, .08); }
.cmy-band { margin-top: 26px; }
.cmy-band-cta { display: flex; align-items: center; gap: 14px; }
.cmy-band-cta a { color: var(--dim); font-weight: 700; font-size: .9rem; }
.cmy-band-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmy-band-cards .cmy-card { margin-top: 14px; }
.cmy-card-faces { display: flex; flex: none; }
.cmy-card-faces .vx-av { width: 52px; height: 52px; margin-inline-start: -14px; }
@media (max-width: 700px) { .cmy-band-cards { grid-template-columns: 1fr; } .cmy-band-cta { width: 100%; justify-content: space-between; } }
/* the idea sheet */
.ids, .ids-done { padding: 4px 18px 18px; text-align: center; }
.ids-logo { width: 74px; display: block; margin: 0 auto 4px; }
.ids .vx-h, .ids-done .vx-h { font-size: 1.5rem; }
.ids-kinds { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.ids-kinds .vx-pill.on { background: var(--vx-accent); color: #fff; border-color: transparent; }
.ids-field { position: relative; }
.ids-field textarea { width: 100%; min-height: 110px; resize: none; border-radius: 20px; border: 1px solid var(--vx-glass-line); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 1.05rem; padding: 14px 16px 26px; }
.ids-field textarea:focus { outline: none; border-color: var(--vx-accent); }
.ids-field small { position: absolute; bottom: 8px; left: 14px; color: rgba(255, 255, 255, .4); font-size: .75rem; }
.ids-who-h { text-align: start; font-weight: 800; margin: 14px 0 8px; }
.ids-who { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; }
.ids-who::-webkit-scrollbar { display: none; }
.ids-who button { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 64px; font-size: .72rem; color: rgba(255, 255, 255, .75); background: none; border: 0; cursor: pointer; }
.ids-who .vx-av { width: 54px; height: 54px; transition: transform .15s; }
.ids-who button.on .vx-av { outline: 2.5px solid var(--vx-accent); outline-offset: 2px; transform: scale(1.04); }
.ids-who span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ids .vx-btn { margin-top: 12px; }
.ids-note { color: rgba(255, 255, 255, .5); font-size: .8rem; margin-top: 8px; }
.ids-done p { color: rgba(255, 255, 255, .65); margin: 4px 0 12px; }
.ids-done blockquote { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-weight: 700; }
.ids-done .vx-btn { margin-top: 8px; }
.vx-btn.wa { background: #1fa855; color: #fff; }
.vx-btn.wa svg { width: 20px; height: 20px; }
/* the small forms (video request, something broken) */
.rqs { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.rqs textarea, .rqs input, .biz-form input, .biz-form textarea { width: 100%; border-radius: 16px; border: 1px solid var(--vx-glass-line); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; padding: 12px 14px; }
.rqs textarea { min-height: 110px; resize: none; }
.rqs textarea:focus, .rqs input:focus, .biz-form input:focus, .biz-form textarea:focus { outline: none; border-color: var(--vx-accent); }
.rqs-note { color: rgba(255, 255, 255, .5); font-size: .8rem; }
.rqs-done { text-align: center; padding: 22px 0; }
.rqs-done svg { width: 44px; height: 44px; color: var(--vx-accent); }
/* the business page */
.biz { display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 34px 20px 40px; }
.biz-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.biz-hero > p { color: var(--dim); font-size: 1.15rem; margin-top: 12px; max-width: 34ch; }
.biz-stats { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.biz-stats div { padding: 12px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: center; min-width: 110px; }
.biz-stats b { display: block; font-size: 1.7rem; font-weight: 900; color: var(--vx-accent); }
.biz-stats span { color: var(--dim); font-size: .82rem; }
.biz-faces { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.biz-faces a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; color: var(--dim); width: 78px; text-align: center; }
.biz-faces .vx-av { width: 70px; height: 70px; }
.biz-form { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.biz-form h2 { font-size: 1.5rem; font-weight: 900; }
.biz-form > p { color: var(--dim); margin: -6px 0 6px; }
.biz-form textarea { min-height: 110px; resize: none; }
.biz-topics { display: flex; gap: 6px; flex-wrap: wrap; }
.biz-topics .vx-pill.on { background: var(--vx-accent); color: #fff; border-color: transparent; }
.biz-form .rqs-done h2 { margin-top: 10px; }
@media (max-width: 900px) { .biz { grid-template-columns: 1fr; gap: 22px; } }
/* footer: the site's own links are pills too (orange outline), each with its icon - never a row of bare words */
.foot-links { gap: 6px; }
.foot-links a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255, 106, 31, .45); background: rgba(255, 106, 31, .08); color: var(--text); font-size: .8rem; font-weight: 700; }
.foot-links a:hover { background: rgba(255, 106, 31, .18); color: var(--text); }
.foot-links svg { width: 15px; height: 15px; color: var(--vx-accent); }
@media (max-width: 600px) { .foot-links { width: 100%; justify-content: center; margin-inline-start: 0; flex-wrap: wrap; } }

/* ---- community polish (review 2026-11-01): compact idea cards, a clear vote ---- */
.idea { align-items: flex-start; padding: 14px 16px; gap: 14px; }
.idea-faces .vx-av { width: 54px; height: 54px; }
.idea-body p { font-size: 1.06rem; margin-top: 4px; }
.idea-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.idea-foot .idea-kind { margin-top: 0; }
.idea-acts { display: flex; align-items: center; gap: 6px; }
.idea .vote { height: 34px; padding: 0 12px 0 10px; gap: 6px; }
.idea .vote .lk { width: 20px; }
/* where the idea is on its way: the planet lit, the step, and for an idea that is out - its video */
.idea-step { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 4px 12px 4px 10px; border-radius: 99px; background: rgba(255, 106, 31, .14); border: 1px solid rgba(255, 106, 31, .45); font-size: .8rem; }
.idea-step .lk { width: 18px; filter: drop-shadow(0 0 4px rgba(255, 106, 31, .7)); }
.idea-step b { color: var(--vx-accent); font-weight: 800; }
.idea-step a { color: var(--text); font-weight: 700; text-decoration: none; margin-inline-start: 4px; }
.idea-step.s-live { background: var(--vx-accent); border-color: var(--vx-accent); }
.idea-step.s-live b, .idea-step.s-live a { color: #fff; }
.idea-step.s-live .lk { filter: brightness(0) invert(1); }
/* the Shlomiverse's answer under an idea (written in /backstage/) */
.idea-reply { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 11px; border-radius: 14px; background: rgba(255, 106, 31, .07); border-inline-start: 3px solid var(--vx-accent); font-size: .88rem; line-height: 1.45; }
.idea-reply img { width: 22px; flex: none; margin-top: 1px; }
.idea-reply b { color: var(--vx-accent); margin-inline-end: 6px; }
/* the video page: the viewer whose idea it was */
.vp-credit { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; color: rgba(255, 255, 255, .85); text-decoration: none; }
.vp-credit[hidden] { display: none; }
.vp-credit .lk { width: 16px; filter: drop-shadow(0 0 4px rgba(255, 106, 31, .7)); }
.vp-credit b { color: #fff; }
.idea .vote b { font-size: .9rem; font-weight: 800; }
.idea .vote.on b { color: var(--vx-accent); }
.idea .icon-btn { width: 34px; height: 34px; }
@media (max-width: 600px) { .idea { flex-wrap: nowrap; } .idea-faces .vx-av { width: 44px; height: 44px; } .idea-faces a + a { margin-inline-start: -16px; } }
.cmy-ideas { padding: 20px; }
.cmy-faces img { width: 84px; height: 84px; }
.cmy-faces img:nth-child(3) { width: 104px; height: 104px; }
@media (max-width: 600px) { .cmy-faces img { width: 62px; height: 62px; } .cmy-faces img:nth-child(3) { width: 80px; height: 80px; } }
/* business: the glowing planet behind, and what you can do together */
.biz { position: relative; isolation: isolate; }
.biz-glow { position: absolute; z-index: -1; top: 10px; inset-inline-end: 36%; width: 520px; opacity: .14; pointer-events: none; filter: blur(1px); }
.biz-glow img { width: 100%; }
.biz-what { grid-column: 1 / -1; margin-top: 10px; }
.biz-what h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 12px; }
.biz-what-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.biz-way { padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.biz-way svg { width: 26px; height: 26px; color: var(--vx-accent); }
.biz-way b { display: block; font-size: 1.1rem; font-weight: 800; margin-top: 8px; }
.biz-way p { color: var(--dim); font-size: .92rem; margin-top: 4px; line-height: 1.45; }
@media (max-width: 900px) { .biz-what-row { grid-template-columns: 1fr; } .biz-glow { width: 320px; inset-inline-end: -40px; } }
.cmy, .biz { overflow-x: clip; }
/* phone fixes after review: the vote row stays inside the card, the tag on one line, the business stats in one row */
.idea-foot .idea-acts { width: auto !important; flex: none; }
.idea-kind { white-space: nowrap; }
.idea-foot { min-width: 0; }
@media (max-width: 600px) {
  .biz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .biz-stats div { min-width: 0; padding: 10px 6px; }
  .biz-stats b { font-size: 1.35rem; }
  .biz-glow { display: none; }
  .biz-faces { gap: 10px; justify-content: space-between; }
  .biz-faces a { width: 62px; }
  .biz-faces .vx-av { width: 56px; height: 56px; }
}
.biz-glow { opacity: .1; }
@media (max-width: 600px) { .biz-faces { justify-content: center; gap: 6px; } .biz-faces a { width: 60px; } .biz-faces .vx-av { width: 52px; height: 52px; } }

/* the idea sheet: @ + letters = the matching characters (all of them), above the text */
.ids-field { position: relative; }
.ids-at { position: absolute; bottom: calc(100% + 6px); inset-inline: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px;
  background: rgba(24, 23, 28, .97); border: 1px solid var(--vx-glass-line); border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.ids-at[hidden] { display: none; }
.ids-at button { display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 14px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid var(--vx-glass-line); color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; }
.ids-at .vx-av { width: 30px; height: 30px; }
.ids-who-h small { font-weight: 500; color: rgba(255, 255, 255, .45); font-size: .78rem; margin-inline-start: 6px; }

/* the name screen (after the first sign-in): one card. Phone = the card is the screen; desktop = a glass card over a dim
   wall of the characters' faces (GPT Image mockup golive/N-name-desktop.jpg) */
.nk > * { width: auto; }
.nk-card { position: relative; z-index: 1; width: min(460px, 100%); display: flex; flex-direction: column; flex: 1; }
.nk-logo { width: 116px; height: auto; margin: 0 auto 2px; filter: drop-shadow(0 6px 26px rgba(255, 106, 31, .45)); }
.nk .nk-h { margin-top: 8px; }
.nk-tag { position: relative; z-index: 1; margin: 14px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .42); }
.nk-wall { display: none; }
@media (min-width: 760px) {
  .nk { justify-content: center; padding: 40px 22px; }
  .nk-wall { display: grid; position: fixed; inset: -40px; z-index: 0; grid-template-columns: repeat(6, 1fr); gap: 22px; padding: 0 2vw;
    transform: rotate(-4deg) scale(1.08); opacity: .42; filter: blur(2px) saturate(.85); pointer-events: none; }
  .nk-wall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; }
  .nk::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% -10%, rgba(255, 106, 31, .42), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(11, 11, 14, .5), rgba(11, 11, 14, .8) 80%); }
  .nk-card { flex: none; width: 540px; padding: 30px 40px 32px; border-radius: 30px; background: rgba(22, 21, 26, .72);
    border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); }
  .nk-card .grow { display: none; }
  .nk-card #nk-go { margin-top: 6px; }
}

/* the video page carries the real logo (he asked): a small glowing one at the top centre while it plays, a bigger one in
   the bar when the sides are open */
.vp-mark { opacity: .9; }
.vp-mark img { display: block; width: 66px; height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(255, 106, 31, .35)); }
.vp-brand img { display: block; width: 84px; height: auto; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)) drop-shadow(0 0 16px rgba(255, 106, 31, .35)); }
@media (max-width: 420px) { .vp-brand img { width: 70px; } }
@media (min-width: 900px) { .vp-mark img { width: 78px; } .vp-brand img { width: 96px; } }

/* ---- the phone hero fits a real iPhone (Safari's bars leave ~620px): he saw the card slide under the top bar and the
   counts line on top of the faces. The hero grows instead of cropping, the logo follows the screen's height, one row of
   "מי עונה", the counts under the card (2026-11-01) ---- */
@media (max-width: 820px) {
  section.hero { height: auto; min-height: calc(100svh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 0 14px; }
  section.hero .hero-in { padding: 16px 14px 16px; }
  section.hero .wordmark.hero-logo img { width: min(240px, 58vw, 27svh); margin: -6px auto -4px; }
  section.hero .wordmark small { margin-top: 8px; font-size: 1rem; }
  section.hero .ask { margin-top: 16px; padding: 6px; }
  section.hero .ask input { height: 44px; font-size: 1.02rem; }
  section.hero .ask button { width: 46px; height: 46px; }
  section.hero .who { margin-top: 12px; justify-content: center; gap: 4px 8px; }
  section.hero .who button:nth-of-type(n+6) { display: none; }
  section.hero .who button { width: 56px; }
  section.hero .scroll-hint { position: relative; bottom: auto; left: auto; transform: none; margin-top: 12px; }
}

/* the video page's logo stays at the top-left, where the bar's logo is: a faint watermark while watching, the strong one
   (the bar's) when the sides are open. The time line shows for a moment (start, after a tap) and then goes away. */
.vp-mark { left: 12px; top: calc(14px + env(safe-area-inset-top)); transform: none; opacity: .42; }
.vp-mark img { width: 84px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
@media (max-width: 420px) { .vp-mark img { width: 70px; } }
@media (min-width: 900px) { .vp-mark img { width: 96px; } }
.vp-line { opacity: 0; transition: opacity .7s; }
.vp.line-on .vp-line, .vp.paused .vp-line { opacity: 1; transition-duration: .2s; }

/* the "75 דמויות · 203 סרטונים" line under the hero: on a pill, so the faces behind it don't swallow it */
section.hero .scroll-hint { color: rgba(255, 255, 255, .85); font-weight: 600; padding: 6px 14px; border-radius: 99px;
  background: rgba(11, 11, 14, .72); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* iPhone (WebKit): the hero's tilted 3D wall of faces could paint over the fixed top bar - the hero is its own layer,
   under the bar */
section.hero { z-index: 0; isolation: isolate; }
/* the @ list (inside the hero card) lies over the counts pill under the card */
section.hero .hero-in { z-index: 3; }
section.hero .scroll-hint { z-index: 1; }

/* a link someone wrote (a comment, a chat message): the whole thing tappable, left-to-right */
.lnk { color: var(--vx-accent, #ff6a1f); text-decoration: underline; text-underline-offset: 3px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: bottom; }
/* the official account (the Shlomiverse itself): an orange check after the name */
.ofc { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--vx-accent, #ff6a1f); color: #fff; margin-inline-start: 5px; vertical-align: -3px; flex: none; }
.ofc svg { width: 11px; height: 11px; }
.m.me .lnk { color: inherit; }
/* the "suggest an idea" button in the home band: a compact pill that fits its row (his note, 2026-11-01: "too big") */
.cmy-band-cta .vx-btn { height: 40px; padding: 0 16px; gap: 6px; font-size: .92rem; box-shadow: none; }
.cmy-band-cta .vx-btn svg { width: 16px; height: 16px; }
.cmy-band > .empty, .cmy-band > .ideas { margin-top: 12px; }

/* ---------- the home's "what you can do here" (his note 2026-11-02; mockup golive/X-cando-a): the sticker as the
   hero, two tiles, three tiles; then the idea row; business as one dim link ---------- */
.cando { display: grid; gap: 10px; margin-top: 14px; }
.cando button { text-align: right; color: var(--text); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 20px; transition: transform .15s, border-color .15s; }
.cando button:active { transform: scale(.98); }
.cando button:hover { border-color: color-mix(in srgb, var(--vx-accent) 55%, transparent); }
.cd-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--vx-accent); border: 1.5px solid color-mix(in srgb, var(--vx-accent) 70%, transparent); box-shadow: 0 0 18px rgba(255, 106, 31, .25); }
.cd-ic svg { width: 21px; height: 21px; }
.cando b { display: block; font-weight: 800; font-size: 1rem; line-height: 1.25; }
.cando small { display: block; color: var(--dim); font-size: .82rem; line-height: 1.35; margin-top: 2px; }
.cd-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 14px; min-height: 132px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 50%, rgba(255, 106, 31, .2), transparent 60%), color-mix(in srgb, var(--text) 4%, transparent) !important;
  border-color: color-mix(in srgb, var(--vx-accent) 35%, transparent) !important; }
.cd-hero .cd-ic { width: 52px; height: 52px; }
.cd-hero .cd-txt { flex: 1; min-width: 0; }
.cd-hero b { font-size: 1.22rem; font-weight: 900; }
.cd-st { position: relative; flex: none; width: 112px; height: 112px; transform: rotate(-6deg); margin-inline-start: 2px; }
.cd-st img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); background: #222; }
.cd-st em { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(3deg); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  background: #fff; color: #111; font-style: normal; font-weight: 900; font-size: .78rem; padding: 3px 9px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.cd-2, .cd-3 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.cd-3 { grid-template-columns: 1fr 1fr 1fr; }
.cd-t { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px 12px; }
.cd-2 .cd-t { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; }
.cd-2 .cd-t .cd-ic { grid-row: span 2; align-self: center; }
.cd-3 .cd-t b { font-size: .9rem; }
.cd-3 .cd-t small { font-size: .74rem; }
.cd-faces { display: flex; height: 44px; align-items: center; }
.cd-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); margin-inline-start: -10px; background: #222; }
.cd-faces img:first-child { margin-inline-start: 0; }
.cd-idea { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; }
.cd-idea b { display: block; font-weight: 800; }
.cd-idea small { display: block; color: var(--dim); font-size: .8rem; margin-top: 2px; }
.cd-idea .vx-btn { height: 40px; padding: 0 14px; gap: 6px; font-size: .9rem; box-shadow: none; flex: none; }
.cd-idea .vx-btn svg { width: 16px; height: 16px; }
.cd-all { display: block; color: var(--dim); font-weight: 700; font-size: .88rem; margin-top: 10px; }
.cd-biz { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: .86rem; margin-top: 14px; padding: 4px 2px; }
.cd-biz svg { width: 18px; height: 18px; }
.cd-biz i { font-style: normal; margin-inline-start: auto; }
@media (max-width: 360px) { .cd-st { width: 92px; height: 92px; } .cd-3 { grid-template-columns: 1fr 1fr; } }

/* "סטיקר מהרגע" pointed out (from the home's tile) */
.vp-rail button { position: relative; }
.vp-rail button.pulse .vx-round { animation: vp-pulse 1.3s ease-in-out infinite; }
@keyframes vp-pulse { 0%, 100% { box-shadow: var(--vx-glow); } 50% { box-shadow: 0 0 0 10px rgba(255, 106, 31, .25), 0 10px 34px rgba(255, 106, 31, .6); } }
.vp-tip { position: absolute; right: calc(100% + 12px); top: 10px; white-space: nowrap; background: #fff; color: #111; font-weight: 800; font-size: .92rem; text-shadow: none;
  padding: 9px 13px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); animation: vp-tip-in .35s ease; }
.vp-tip::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: #fff; }
@keyframes vp-tip-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* the sign-in sheet as a benefit (mockup golive/Y-signin-sticker): their moment as the sticker, the action's own row lit */
.vx-gain-st { display: grid; place-items: center; margin: 4px 0 2px; }
.vx-gain-st > span { position: relative; display: block; width: 128px; height: 128px; transform: rotate(-5deg); }
.vx-gain-st img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; border: 6px solid #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.vx-gain-st em { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(4deg); white-space: nowrap; background: var(--vx-accent); color: #fff; font-style: normal;
  font-weight: 900; font-size: .9rem; padding: 4px 11px; border-radius: 10px; border: 2.5px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.vx-sheet.signin .vx-gain-sub { margin: 0; color: rgba(255, 255, 255, .62); }
.vx-sheet.signin .vx-reasons .hl .vx-round { color: var(--vx-accent); border-color: rgba(255, 106, 31, .6); box-shadow: 0 0 16px rgba(255, 106, 31, .3); }
.vx-sheet.signin .vx-reasons .hl { font-weight: 700; }
.vx-sheet .in { overscroll-behavior: contain; }
/* the pack tile (wide, under the hero) and the pack sheet */
.cd-pack { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; }
.cd-pack .cd-txt { flex: 1; min-width: 0; }
.cd-pack i { font-style: normal; color: var(--dim); font-size: 1.2rem; }
.cd-pk { display: flex; flex: none; }
.cd-pk img { width: 54px; height: 54px; object-fit: contain; margin-inline-start: -16px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.cd-pk img:first-child { margin-inline-start: 0; transform: rotate(-6deg); }
.cd-pk img:nth-child(3) { transform: rotate(6deg); }
.pk { text-align: center; }
.pk .vx-sub { margin: 4px 0 14px; }
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-grid button { aspect-ratio: 1; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--vx-glass-line); padding: 4px; transition: transform .15s; }
.pk-grid button:active { transform: scale(.95); }
.pk-grid img { width: 100%; height: 100%; object-fit: contain; }
.pk-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .9rem; margin-top: 12px; }
.pk-note svg { width: 18px; height: 18px; color: var(--vx-accent); }
.vx-gain-st.cut img { width: 150px; height: 150px; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); transform: rotate(-4deg); }
/* the band holds its own tiles now: no box around them (no card inside a card) */
.cmy-band { background: none; border: 0; padding: 0; border-radius: 0; }
.cd-hero .cd-st { width: 96px; height: 96px; }
.cd-hero b { white-space: nowrap; }
.cd-2 .cd-t { padding: 12px 10px; }
.cd-2 .cd-ic { width: 40px; height: 40px; }
.cd-st.cut { transform: rotate(-5deg); }
.cd-st.cut img { border: 0; border-radius: 0; box-shadow: none; background: none; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.cd-hero .cd-st.cut { width: 108px; height: 108px; }
.cd-pack i, .cd-biz i { display: grid; place-items: center; color: var(--dim); }

/* community page: the sticker tiles above the three tiles; the "request a video" triangle points left (forward in Hebrew) */
.cmy-st { margin-top: 22px; }
.cmy-tile svg.flip { transform: scaleX(-1); }

/* footer on a phone, above the bottom bar. 2026-11-03 "messy" -> one row of round icons; 2026-11-05 "it reads like a second
   tab bar, nothing says what each is": the site's links as orange icons WITH their names (what he liked), and under them
   the socials as small grey icons - no circles, so neither row looks like the tab bar. "The community" is in the tab bar */
@media (max-width: 600px) {
  footer .wrap.foot { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 14px; }
  .foot-brand { display: none; }
  .foot-links { display: flex; flex-wrap: nowrap; justify-content: center; gap: 16px; width: auto; margin: 0; }
  .foot-links a[href="/community"] { display: none; }
  .foot-links a { flex-direction: column; width: auto; min-width: 58px; white-space: nowrap; height: auto; padding: 0; gap: 6px; border: 0; border-radius: 0; background: none; color: var(--dim); font-size: .7rem; font-weight: 600; line-height: 1.2; text-align: center; }
  .foot-links a:hover { background: none; color: var(--text); }
  .foot-links a span { display: block; }
  .foot-links svg { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(255, 106, 31, .45); background: rgba(255, 106, 31, .08); color: var(--vx-accent); }
  .foot-links::after { display: none; }
  .foot-soc { display: flex; flex-wrap: nowrap; justify-content: center; gap: 22px; width: auto; margin: 0; }
  .foot-soc a { width: auto; height: auto; padding: 4px; border: 0; border-radius: 0; background: none; color: var(--dim); }
  .foot-soc a span { display: none; }
  .foot-soc svg { width: 19px; height: 19px; }
}

/* ---- games (2026-11-03, designs scripts/v2-design/games.mjs): the home row, the games page, a character's section,
   and a game played inside the verse ---- */
.grow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-inline: -4px; padding-inline: 4px; }
.grow::-webkit-scrollbar { display: none; }
.grow .gcard { flex: 0 0 min(250px, 68vw); scroll-snap-align: start; }
.gcard { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--text); transition: border-color .15s; }
.gcard:hover, .gfeat:hover { border-color: var(--vx-accent); }
.g-pic { position: relative; display: block; aspect-ratio: 1.91 / 1; background: var(--card2); overflow: hidden; }
.g-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-new { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 9px; border-radius: 99px; background: var(--vx-accent); color: #fff; font-style: normal; font-weight: 800; font-size: .72rem; }
.g-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.gcard .g-body { padding-inline-end: 50px; }
.gcard:not(:has(.g-own)) .g-body { padding-inline-end: 12px; }
.g-body b { font-weight: 800; font-size: .96rem; line-height: 1.25; }
.g-body small { color: var(--dim); font-size: .8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-own { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid var(--vx-accent); }
.g-own img, .g-who img, .gg-h .av img, .gchips .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfeat { display: grid; grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid color-mix(in srgb, var(--vx-accent) 55%, transparent); box-shadow: 0 0 28px rgba(255, 106, 31, .12); color: var(--text); margin-bottom: 14px; }
.gfeat .g-body { padding: 14px 16px 16px; gap: 6px; }
.gfeat .g-body b { font-size: 1.15rem; }
.g-who { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: .85rem; font-weight: 700; }
.g-who img, .g-who .ph { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.g-play { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; height: 42px; padding: 0 22px; border-radius: 99px; background: var(--vx-accent); color: #fff; font-weight: 800; }
.g-play svg { width: 16px; height: 16px; fill: currentColor; transform: scaleX(-1); }
@media (min-width: 700px) { .gfeat { grid-template-columns: 1.3fr 1fr; } .gfeat .g-body { justify-content: center; padding: 22px 26px; } }
.gsec .gfeat { margin-bottom: 12px; }
.gchips { margin: 4px 0 18px; }
.gchips .chip { display: inline-flex; align-items: center; gap: 7px; }
.gchips .av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; }
.ggroup { margin-top: 26px; }
.gg-h { display: flex; align-items: center; gap: 12px; color: var(--text); margin-bottom: 12px; }
.gg-h .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--vx-accent); flex: none; }
.gg-h b { display: block; font-size: 1.15rem; font-weight: 800; }
.gg-h small { color: var(--dim); font-size: .82rem; }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
@media (max-width: 600px) { .ggrid { grid-template-columns: 1fr 1fr; gap: 10px; } .ggrid .g-body b { font-size: .86rem; } .ggrid .g-body small { font-size: .74rem; } .ggrid .g-body { padding: 8px 10px 10px; } }
/* a game inside the verse */
/* a game's page (#/play/<id>, player.js openGame): laid out like the video page - the rail beside the game, never over
   it; .full = the game fills the phone and the one exit pill shows (the game keeps that strip free: verse/game-frame.js) */
.vg-col { position: relative; z-index: 1; height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); }
.vg-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 2px; }
.vg-head .vp-who .vx-av { width: 42px; height: 42px; }
.vg-head .vp-who b { font-size: 1.05rem; }
.vg-head .vp-brand img { width: 70px; }
.vg-mid { flex: 1; min-height: 0; display: flex; gap: 8px; }
.vg-game { flex: 1; min-width: 0; position: relative; border-radius: 20px; overflow: hidden; background: #000;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.vg-game iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.vg-acts { flex: none; width: 58px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 14px; padding-bottom: 6px; }
.vg-acts button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.15; }
.vg-acts .vx-round, .vg-acts .vx-round.main { width: 48px; height: 48px; box-shadow: none; }
.vg-acts .vx-round svg { width: 22px; height: 22px; }
.vg-acts small { font-size: .72rem; opacity: .8; margin-top: -2px; }
.vg-acts small:empty { display: none; }
/* the like = the Shlomiverse planet, the same as every like in the verse (his ask, 2026-11-05): grey until they like
   it, then the planet in its own orange with its glow (.on > .lk) and an orange ring */
.vg [data-heart] .vx-round .lk { width: 30px; }
.vg [data-heart] .vx-round.on { border-color: var(--vx-accent); background: rgba(255, 106, 31, .16); }
.vg-card { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 18px; background: var(--vx-glass);
  border: 1px solid var(--vx-glass-line); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur); }
.vg-card > div { flex: 1; min-width: 0; }
.vg-card h2 { font-size: 1.08rem; font-weight: 900; line-height: 1.25; }
.vg-card .meta { color: rgba(255, 255, 255, .62); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-full { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 99px; font-weight: 800; font-size: .9rem;
  background: var(--vx-glass-2); border: 1px solid var(--vx-glass-line); }
.vg-full svg { width: 20px; height: 20px; color: var(--vx-accent); }
.vg-exit { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); inset-inline-start: 10px; display: none; align-items: center; gap: 8px;
  height: 40px; padding-inline: 5px 12px; border-radius: 99px; font-weight: 800; font-size: .86rem; color: #fff; background: rgba(12, 12, 16, .74);
  border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.vg-exit .vx-av { width: 30px; height: 30px; }
.vg-exit svg { width: 18px; height: 18px; }
.vg.full .vg-head, .vg.full .vg-acts, .vg.full .vg-card { display: none; }
.vg.full .vg-mid { gap: 0; }
.vg.full .vg-col { padding: 0; max-width: none; }
.vg.full .vg-game { border-radius: 0; border: 0; box-shadow: none; }
.vg.full .vg-exit { display: flex; }
.vx-round.pop { animation: vg-pop .45s ease; }
@keyframes vg-pop { 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.sv-h { font-size: 1.15rem; font-weight: 800; margin: 26px 0 12px; }

/* ---- daily records (verse/records.js; mockups scripts/v2-design/records.mjs) ---- */
.rec-sub { color: var(--dim, rgba(255, 255, 255, .6)); font-size: .92rem; margin-top: 4px; }
.rc-crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; color: #ffc94a; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.rp-place i svg, .rb-place i svg, .rm-crown svg { width: 100%; height: 100%; display: block; }
.rc-who { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 0; max-width: 100%; }
.rc-who b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rc-who small { color: var(--dim, rgba(255, 255, 255, .6)); font-size: .8rem; }
.vx-btn.ghost-o { background: transparent; border: 1.5px solid var(--vx-accent); color: var(--vx-accent); }
/* the table */
.rb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rb-head img { width: 64px; height: 44px; object-fit: cover; border-radius: 10px; flex: none; }
.rb-head h3 { font-size: 1.15rem; font-weight: 900; }
.rb-head p { color: var(--dim, rgba(255, 255, 255, .6)); font-size: .88rem; }
.rb-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 120px; }
.rb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.rb-row .vx-av { width: 40px; height: 40px; flex: none; }
.rb-row .rc-who { align-items: flex-start; flex: 1; }
.rb-row.p1 { background: rgba(255, 190, 60, .12); border-color: rgba(255, 190, 60, .45); }
.rb-row.p2 { background: rgba(200, 210, 225, .08); border-color: rgba(200, 210, 225, .3); }
.rb-row.p3 { background: rgba(205, 127, 50, .1); border-color: rgba(205, 127, 50, .4); }
.rb-row.me { outline: 2px solid var(--vx-accent); }
.rb-place { width: 28px; flex: none; display: flex; flex-direction: column; align-items: center; font-weight: 900; color: var(--dim, rgba(255, 255, 255, .6)); }
.rb-place i { width: 16px; height: 16px; color: #ffc94a; }
.rb-row.p2 .rb-place i { color: #cfd6e2; } .rb-row.p3 .rb-place i { color: #d08a4a; }
.rb-n { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.rb-n b { font-size: 1.2rem; font-weight: 900; }
.rb-n small { font-size: .74rem; color: var(--dim, rgba(255, 255, 255, .6)); }
.rb-empty { color: var(--dim, rgba(255, 255, 255, .6)); text-align: center; padding: 30px 10px; }
.rb-me { margin-top: 10px; }
.rb-mine { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.rb-mine .vx-av { width: 40px; height: 40px; flex: none; }
.rb-mine span { flex: 1; font-weight: 700; font-size: .92rem; }
.rb-mine .vx-btn { flex: none; height: 42px; padding: 0 16px; }
/* the moment, and the signed-out "want it on the table?" */
.rm-card, .rm-out { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px 4px 4px; }
.rm-crown { width: 54px; height: 54px; color: var(--vx-accent); filter: drop-shadow(0 0 14px rgba(255, 106, 31, .7)); }
.rm-card h2 { font-size: 1.7rem; font-weight: 900; }
.rm-face .vx-av { width: 92px; height: 92px; border: 3px solid var(--vx-accent); box-shadow: 0 0 30px rgba(255, 106, 31, .35); }
.rm-card .rc-who b { font-size: 1.3rem; }
.rm-n { font-size: 3rem; font-weight: 900; color: var(--vx-accent); line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.rm-n small { font-size: .9rem; color: #fff; font-weight: 700; }
.rm-line { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .8); }
.rm-line .vx-av { width: 32px; height: 32px; }
.rm-btns { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.rm-btns .vx-btn { flex: 1; justify-content: center; }
.rm-out h3 { font-size: 1.15rem; font-weight: 800; }
/* the way in after the free game */
.vg-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center;
  background: #0d0d12; }
.vg-gate img { width: 100%; max-width: 360px; aspect-ratio: 1.91; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.vg-gate.wait img { opacity: .5; }
.vg-gate h3 { font-size: 1.3rem; font-weight: 900; margin-top: 8px; }
.vg-gate p { color: rgba(255, 255, 255, .7); font-size: .95rem; max-width: 280px; }

/* ---- the Shlomiverse on the home screen (verse/install.js; mockups scripts/v2-design/install.mjs) ---- */
/* the step drawings: an address bar with its button at the end (Chrome on iPhone, the apps' built-in browsers) */
.ig-url-row { top: calc(50% - 20px); height: 40px; justify-content: space-between; padding: 0 8px 0 14px; inset-inline: 10px; }
.ig-ico { width: 30px; height: 30px; display: grid; place-items: center; color: #333; }
.ig-ico svg { width: 20px; height: 20px; }
.ig-dots svg { width: 22px; height: 22px; }
.ig-dots.h svg { transform: rotate(90deg); }   /* the apps' menu on iPhone: ⋯ */
/* the invite: a drawn phone with the real icon and a notification from the character just watched */
.ap-sheet .ap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 0; }
.ap h2 { font-size: 1.45rem; font-weight: 900; line-height: 1.2; max-width: 300px; }
.ap-line { color: var(--dim); font-size: .95rem; margin-top: 8px; max-width: 320px; }
.ap-phone { margin: 20px auto 18px; width: 252px; height: 214px; border: 7px solid #2a2a31; border-bottom: 0; border-radius: 40px 40px 0 0; overflow: hidden;
  box-shadow: 0 -10px 40px rgba(255, 106, 31, .16), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ap-screen { height: 100%; padding: 10px 14px 0; background: radial-gradient(120% 90% at 20% 0%, #5a2a12 0%, #24120a 45%, #0d0b10 100%); display: flex; flex-direction: column; gap: 12px; direction: ltr; }
.ap-status { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: #fff; padding: 0 6px; }
.ap-status i { width: 70px; height: 20px; border-radius: 99px; background: #000; margin-inline-end: 40px; }
.ap-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
.ap-apps > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ap-t { aspect-ratio: 1; border-radius: 12px; width: 100%; }
.ap-t.t1 { background: linear-gradient(160deg, #3fd06a, #1f9a45); } .ap-t.t2 { background: linear-gradient(160deg, #f1f1f4, #bdbdc6); } .ap-t.t3 { background: linear-gradient(160deg, #6d6af7, #3b37c9); }
.ap-me img { width: 100%; aspect-ratio: 1; border-radius: 12px; display: block; box-shadow: 0 0 0 2px var(--vx-accent), 0 0 18px rgba(255, 106, 31, .7); animation: ap-glow 2.2s ease-in-out infinite; }
.ap-me b { font-size: .58rem; color: #fff; font-weight: 600; white-space: nowrap; }
@keyframes ap-glow { 50% { box-shadow: 0 0 0 2px var(--vx-accent), 0 0 30px rgba(255, 106, 31, .95); } }
.ap-notif { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 16px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  direction: rtl; text-align: start; animation: ap-in .7s .35s both cubic-bezier(.2, 1.3, .4, 1); }
.ap-notif img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.ap-notif > span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ap-notif b { font-size: .74rem; color: #fff; }
.ap-notif > span > span { font-size: .72rem; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-notif small { font-size: .62rem; color: rgba(255, 255, 255, .6); align-self: flex-start; }
@keyframes ap-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.ap .vx-btn.block { width: 100%; }
.ap .vx-link { margin-top: 10px; }
/* the guide: the page dims, an arrow points where the browser's button is, one card with the three steps */
.ac { position: fixed; inset: 0; z-index: 95; display: flex; justify-content: center; align-items: flex-end; padding: 112px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(4, 4, 6, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.ac.on { opacity: 1; }
.ac.at-bottom { align-items: flex-start; padding: calc(14px + env(safe-area-inset-top)) 12px 112px; }
.ac-card { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; background: #141418; border: 1px solid rgba(255, 106, 31, .35); border-radius: 26px; padding: 18px 14px 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 106, 31, .12); text-align: center; transform: translateY(16px); transition: transform .3s cubic-bezier(.2, 1.2, .4, 1); }
.ac.on .ac-card { transform: none; }
.ac-icon { display: block; margin: 0 auto; width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 0 22px rgba(255, 106, 31, .5); }
.ac-card h2 { font-size: 1.25rem; font-weight: 900; margin: 10px 0 12px; line-height: 1.25; }
.ac-steps { display: flex; flex-direction: column; gap: 8px; text-align: start; margin-bottom: 12px; }
.ac .ig-step { grid-template-columns: 1fr 140px; gap: 10px; padding: 10px 12px; margin: 0; border-radius: 18px; }
.ac .ig-step .n { font-size: 1.7rem; }
.ac .ig-step h3 { font-size: 1rem; margin-top: 2px; }
.ac .ig-step p { font-size: .8rem; }
.ac .ig-pic { zoom: .62; width: 226px; }
.ac-arrow { position: absolute; width: 96px; height: 96px; color: var(--vx-accent); filter: drop-shadow(0 0 12px rgba(255, 106, 31, .8)); pointer-events: none; }
.ac-arrow svg { width: 100%; height: 100%; animation: ac-bob 1.3s ease-in-out infinite; }
.ac-ring { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--vx-accent); animation: ac-ring 1.6s ease-out infinite; }
.ac.at-top-right .ac-arrow { top: 6px; right: 26px; }
.ac.at-top-right .ac-ring { top: -34px; right: -34px; }
.ac.at-top-left .ac-arrow { top: 6px; left: 26px; transform: scaleX(-1); }
.ac.at-top-left .ac-ring { top: -34px; right: -34px; }
.ac.at-bottom .ac-arrow { bottom: 8px; left: calc(50% - 48px); transform: rotate(135deg); }
.ac.at-bottom .ac-ring { top: -34px; right: -34px; }
@keyframes ac-bob { 50% { transform: translate(6px, -6px); } }
@keyframes ac-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
/* the footer's home-screen icon: only where the Shlomiverse can be added (a phone browser, not the app itself) */
.foot-app { display: none !important; }
html.can-app .foot-app { display: inline-flex !important; }

/* /install: the two parts - on the home screen, then notifications (his ask 2026-11-05) */
.ig-part { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 900; margin-top: 30px; line-height: 1.2; }
.ig-part > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vx-accent); color: #fff; font-size: 1.05rem; flex: none; }
.ig-part > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #22c55e; color: #fff; flex: none; }
.ig-part > i svg { width: 16px; height: 16px; }
.ig-note { margin-top: 10px; color: var(--vx-accent); font-weight: 700; }
.ig-ok .vx-btn svg, .ap .vx-btn svg { width: 18px; height: 18px; vertical-align: -3px; margin-inline-end: 6px; }
.ig-ok.col { flex-wrap: wrap; } .ig-ok.col p { flex: 1 1 60%; color: var(--text); } .ig-ok.col .vx-btn { flex: 1 1 100%; justify-content: center; }

/* ---- residency by email inside the apps' browsers (2026-11-06, mockups conversion/S1-email, S2-code): Miriam's counter
   on top, the form under it; the keyboard comes up, so the art shrinks on short screens ---- */
.vx-sheet.signin.mail { overflow: hidden; }
.vx-sheet.signin.mail .grab { position: absolute; inset-inline: 0; top: 0; z-index: 2; background: rgba(255, 255, 255, .7); }
.ms-art { position: relative; flex: none; height: clamp(120px, 26svh, 230px); overflow: hidden; }
.ms-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.ms-art::after { content: ''; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(to bottom, transparent, var(--vx-glass-solid, #141317)); }
.vx-sheet.signin.mail .ms-in { text-align: center; padding: 0 22px 18px; margin-top: -18px; position: relative; }
.vx-sheet.signin.mail .vx-h { margin-top: 0; white-space: normal; }
.ms-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ms-form .vx-field { text-align: center; font-size: 1.08rem; }
.ms-form .ms-code { font-size: 1.9rem; font-weight: 800; letter-spacing: .5em; text-indent: .5em; height: 66px; }
.ms-err { min-height: 1.2em; color: #ffb199; font-size: .9rem; }
.ms-err:empty { min-height: 0; }
.ms-again { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.ms-again .vx-link { margin: 0; font-size: .92rem; }
.ms-out { font-size: .9rem; }
@media (max-height: 640px) { .ms-art { height: 96px; } }

/* the wall in the chat (2026-11-06, mockup conversion/W-wall): a card in the conversation, an ID card, one button */
.si.si-wall { flex-direction: row; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--vx-accent, #ff6a1f) 70%, transparent); background: color-mix(in srgb, var(--vx-accent, #ff6a1f) 7%, rgba(20, 20, 24, .92)); }
.si.si-wall > div { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.si.si-wall p { margin: 0; font-weight: 600; line-height: 1.45; color: #fff; }
.si.si-wall button { align-self: flex-start; height: 44px; padding: 0 22px; background: var(--vx-accent, #ff6a1f); color: #fff; border: 0; font-weight: 800; font-size: 1rem; }
.si-id { flex: none; width: 52px; height: 44px; color: var(--vx-accent, #ff6a1f); order: 2; }
.si-id svg { width: 100%; height: 100%; }

/* ---- your status: the chip in the top bar + the window (2026-11-06, mockups conversion/C-chip, L1-ladder) ---- */
/* the chip has the bell's height, border and corner, so the three sit on one line (his note on C-chip) */
.vx-top .st-chip { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  color: var(--text, #fff); font-weight: 800; font-size: .9rem; flex: none; transition: border-color .15s; }
.vx-top .st-chip:hover { border-color: var(--accent); }
.vx-top .st-chip svg { width: 18px; height: 18px; color: var(--accent); }
@media (max-width: 820px) { .vx-top .st-chip { height: 36px; padding: 0 7px; gap: 4px; font-size: .82rem; } .vx-top .st-chip svg { width: 15px; height: 15px; } .vx-top { gap: 6px; } }

/* sized for a phone first - the whole ladder and its button on one screen, no scrolling (his note, 2026-11-06); a soft glow only */
.vx-sheet.status { border: 1px solid color-mix(in srgb, var(--vx-accent) 55%, transparent); border-bottom: 0; }
.vx-sheet.status .in { padding: 2px 16px 14px; }
.sl { text-align: center; }
.sl-logo { width: 74px; display: block; margin: 0 auto; }
.sl .vx-h { font-size: 1.32rem; margin: 2px 0 2px; }
.sl .vx-sub { font-size: .86rem; line-height: 1.4; margin-bottom: 10px; }
.sl-path { position: relative; display: flex; flex-direction: column; gap: 7px; margin: 0 0 12px; padding-inline-end: 22px; text-align: right; }
.sl-path::before { content: ''; position: absolute; inset-inline-end: 7px; top: 20px; bottom: 20px; border-inline-start: 2px dashed rgba(255, 255, 255, .2); }
.sl-tier { position: relative; padding: 8px 11px 9px; border-radius: 14px; border: 1px solid var(--vx-glass-line); background: rgba(255, 255, 255, .035); }
.sl-tier::after { content: ''; position: absolute; inset-inline-end: -22px; top: 15px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); background: #121216; }
.sl-tier.here { border-color: color-mix(in srgb, var(--vx-accent) 80%, transparent); background: color-mix(in srgb, var(--vx-accent) 10%, rgba(20, 20, 24, .9)); }
.sl-tier.here::after, .sl-tier.past::after { border-color: var(--vx-accent); background: var(--vx-accent); }
.sl-head { display: flex; align-items: center; gap: 8px; }
.sl-head b { font-size: 1.08rem; font-weight: 900; }
.sl-ic { width: 24px; height: 24px; color: var(--vx-accent); flex: none; }
.sl-ic svg { width: 100%; height: 100%; }
.sl-here, .sl-soon { margin-inline-start: auto; font-style: normal; font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 7px; }
.sl-here { background: var(--vx-accent); color: #fff; }
.sl-soon { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }
.sl-tier p { margin: 2px 0 6px; font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.sl-tier ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sl-tier li { display: flex; align-items: center; gap: 4px; font-size: .7rem; line-height: 1.2; color: rgba(255, 255, 255, .86); }
.sl-tier li svg { width: 15px; height: 15px; flex: none; color: var(--vx-accent); }
.sl-tier.past { opacity: .6; }
.sl .vx-btn { height: 50px; }
@media (max-height: 700px) { .sl-logo { width: 56px; } .sl .vx-sub { display: none; } .sl-tier p { display: none; } }

/* the ask after 3 videos (2026-11-06, mockup conversion/A-3videos): the faces they met, one warm step in */
.vx-sheet.ask3 { border: 1px solid color-mix(in srgb, var(--vx-accent) 55%, transparent); border-bottom: 0; }
.a3 { text-align: center; padding-top: 6px; }
.a3-faces { display: flex; justify-content: center; gap: 0; margin: 4px 0 6px; }
.a3-faces span { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-inline: -6px; }
.a3-faces img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #141317; box-shadow: 0 0 0 2px var(--vx-accent); }
.a3-faces span:nth-child(2) img { width: 104px; height: 104px; margin-top: -8px; }
.a3-faces b { font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .78); }


/* the name in a heading: the logo's two colours (his note, 2026-11-06) */
.vx-brand { font-weight: 900; white-space: nowrap; color: #fff; }
.vx-brand b { color: var(--vx-accent); font-weight: inherit; }
.vx-sub .vx-brand, .signin-card p .vx-brand { font-weight: 800; }
/* the sign-in sheet: the Shlomiverse logo when no character asks; "and more" after the benefits */
.vx-si-logo { width: 104px; display: block; margin: 2px auto 0; }
.vx-reasons .more { color: rgba(255, 255, 255, .6); }
.vx-reasons .more .vx-round { background: transparent; border-style: dashed; }
.si-mail { font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; }

/* the home card for tourists (2026-11-06, his note): every benefit a resident gets now, "and much more", what is coming */
.signin-card { flex-direction: column; align-items: stretch; gap: 12px; }
.signin-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.signin-card .sc-top .st-chip { height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); font-weight: 800; font-size: .8rem; color: var(--text, #fff); }
.signin-card .sc-top .st-chip svg { width: 15px; height: 15px; color: var(--accent); }
.sc-gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.sc-gets li { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.sc-gets li svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.sc-more, .sc-soon { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem; color: var(--dim); }
.sc-more svg, .sc-soon svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.sc-soon { padding-top: 10px; border-top: 1px dashed var(--line); }
.signin-card .vx-btn { margin-top: 4px; }

/* Miriam's counter on top of every sign-in sheet but the sticker ones (his ask, 2026-11-06) */
.vx-sheet.signin.art { overflow: hidden; }
.vx-sheet.signin.art .grab { position: absolute; inset-inline: 0; top: 0; z-index: 2; background: rgba(255, 255, 255, .7); }
.vx-sheet.signin.art .si-in { margin-top: -18px; position: relative; padding-top: 0; }
.vx-sheet.signin.art .vx-h { margin-top: 0; white-space: normal; }
.vx-sheet.signin.art .vx-reasons { margin: 10px 0 14px; gap: 8px; }
@media (max-height: 760px) { .vx-sheet.signin.art .ms-art { height: 150px; } }

/* ---------- the simulation test (sim.js; plan conversion-next v6, mockups Q1-Q7) ---------- */
#sim-band:empty { display: none; }
.sim-band { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "face title title" "face line go"; align-items: center; column-gap: 12px; row-gap: 4px;
  margin: 14px 0 4px; padding: 12px 14px 12px 12px; border-radius: 22px; text-decoration: none; color: #fff; position: relative; overflow: hidden; text-align: right;
  background: radial-gradient(120% 140% at 100% 50%, rgba(150, 70, 255, .38), transparent 60%), linear-gradient(105deg, rgba(40, 14, 70, .92), rgba(22, 10, 34, .92) 55%, rgba(60, 22, 8, .9));
  border: 1px solid rgba(178, 120, 255, .7); box-shadow: 0 0 0 1px rgba(255, 106, 31, .18), 0 0 26px rgba(150, 70, 255, .45), inset 0 0 30px rgba(150, 70, 255, .18); }
.sim-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px); pointer-events: none; mix-blend-mode: overlay; }
.sim-band::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, #b278ff, var(--vx-accent), #47d7ff, #b278ff); background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sim-edge 5s linear infinite; pointer-events: none; }
@keyframes sim-edge { to { background-position: 300% 0; } }
.sim-g { position: absolute; left: -10%; width: 38%; height: 3px; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.sim-g.g1 { top: 22%; background: linear-gradient(90deg, transparent, #47d7ff, transparent); animation: sim-bar 4.6s steps(1) infinite; }
.sim-g.g2 { top: 58%; height: 5px; background: linear-gradient(90deg, transparent, #ff3df0, transparent); animation: sim-bar 4.6s steps(1) infinite .35s; }
.sim-g.g3 { top: 80%; height: 2px; background: linear-gradient(90deg, transparent, var(--vx-accent), transparent); animation: sim-bar 4.6s steps(1) infinite .7s; }
@keyframes sim-bar { 0%, 84%, 100% { opacity: 0; transform: none; } 86% { opacity: .9; transform: translateX(40%); } 89% { opacity: .7; transform: translateX(120%) scaleY(2); } 92% { opacity: 0; } }
.sim-band-face { grid-area: face; width: 64px; height: 64px; border-radius: 50%; padding: 3px; position: relative;
  background: conic-gradient(from 0deg, #b278ff, var(--vx-accent), #47d7ff, #b278ff); box-shadow: 0 0 18px rgba(178, 120, 255, .7); animation: sim-ring 6s linear infinite; }
.sim-band-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #160a22; animation: sim-ring 6s linear infinite reverse; }
@keyframes sim-ring { to { transform: rotate(360deg); } }
.sim-band-h { grid-area: title; font-size: clamp(1.08rem, 5vw, 1.3rem); font-weight: 900; line-height: 1.15; white-space: nowrap; position: relative;
  text-shadow: -1.5px 0 rgba(71, 215, 255, .75), 1.5px 0 rgba(255, 61, 240, .65); animation: sim-rgb 4.6s steps(1) infinite; }
@keyframes sim-rgb { 0%, 85%, 100% { text-shadow: -1.5px 0 rgba(71, 215, 255, .75), 1.5px 0 rgba(255, 61, 240, .65); transform: none; }
  86% { text-shadow: -4px 0 rgba(71, 215, 255, .9), 4px 0 rgba(255, 61, 240, .9); transform: translateX(2px) skewX(-6deg); } 89% { transform: translateX(-2px); } 91% { transform: none; } }
.sim-band-l { grid-area: line; font-size: .84rem; color: rgba(255, 255, 255, .78); line-height: 1.35; min-height: 1.2em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sim-band-go { grid-area: go; height: 38px; padding: 0 14px; font-size: .88rem; }
.sim-band.small { grid-template-areas: "face title go"; padding: 8px 10px; } .sim-band.small .sim-band-face { width: 44px; height: 44px; } .sim-band.small .sim-band-l { display: none; }
.sim-skip { display: block; margin: 16px auto 0; color: var(--dim); font: inherit; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 8px; }
.mi { margin: 8px 0; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed var(--vx-accent); background: var(--card); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; }
.mi small { font-size: .78rem; font-weight: 800; color: var(--vx-accent); }
.mi blockquote { margin: 0; font-size: .98rem; line-height: 1.45; overflow-wrap: anywhere; }
.mi .vx-btn { height: 40px; }
.sim-chat { margin: 8px 0; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--vx-accent); background: var(--card); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sim-chat b { font-size: 1.1rem; font-weight: 900; }
.sim-chat .vx-btn { height: 42px; }

.sim { max-width: 520px; margin: 0 auto; padding: 18px 18px 90px; min-height: 80svh; }
.sim-load { display: grid; place-items: center; min-height: 60svh; }
.sim-planet { width: 56px; height: 56px; display: block; background: url(/verse/logo-160.png) center / contain no-repeat; animation: sim-spin 2.4s linear infinite; }
@keyframes sim-spin { to { transform: rotate(360deg); } }
.sim-open { text-align: center; padding-top: 6px; }
.sim-host { position: relative; width: min(78vw, 340px); aspect-ratio: 4 / 5; margin: 0 auto 18px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line2);
  box-shadow: 0 0 0 1px rgba(255, 106, 31, .25), 0 18px 50px rgba(255, 106, 31, .18); }
.sim-host img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-live { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(80, 230, 120, .55); font-size: .85rem; font-weight: 700; color: #fff; }
.sim-live i { width: 9px; height: 9px; border-radius: 50%; background: #3ee06e; box-shadow: 0 0 10px #3ee06e; animation: sim-blink 1.2s ease-in-out infinite; }
@keyframes sim-blink { 50% { opacity: .35; } }
.sim-open h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 900; line-height: 1.15; margin: 0 0 8px; }
.sim-line { font-size: 1.12rem; color: var(--text); opacity: .9; margin: 0 auto 20px; max-width: 30ch; min-height: 1.4em; }
.sim-small { font-size: .85rem; color: var(--dim); margin-top: 12px; }
.sim .vx-btn.block { width: 100%; }
.vx-btn.wait { opacity: .6; pointer-events: none; }
.vx-btn.wait::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; animation: sim-spin .8s linear infinite; }

.sim-q { padding-top: 4px; }
.sim-prog { height: 6px; border-radius: 6px; background: var(--card2); overflow: hidden; }
.sim-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--vx-accent), #ffb27a); border-radius: 6px; transition: width .4s; }
.sim-qn { font-size: .85rem; color: var(--dim); margin: 8px 0 16px; }
.sim-ask { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.sim-ask > img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); flex: none; }
.sim-ask > div { flex: 1; min-width: 0; }
.sim-react { font-size: .92rem; color: var(--dim); font-style: italic; margin: 2px 0 8px; }
.sim-bubble { background: var(--card2); border: 1px solid var(--line2); border-radius: 18px 4px 18px 18px; padding: 14px 16px; font-size: 1.22rem; font-weight: 800; line-height: 1.35; margin: 0; }
.sim-as { display: flex; flex-direction: column; gap: 10px; }
.sim-as button { min-height: 58px; padding: 12px 18px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--line2); color: var(--text); font: inherit; font-size: 1.05rem; font-weight: 700;
  text-align: right; line-height: 1.3; transition: transform .12s, border-color .15s, background .15s; }
.sim-as button:active { transform: scale(.985); }
.sim-as button.on { border-color: var(--vx-accent); background: color-mix(in srgb, var(--vx-accent) 18%, var(--card)); }
.sim-as button.wait { position: relative; }
.sim-as button.wait::after { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--vx-accent); border-left-color: transparent; border-radius: 50%; animation: sim-spin .8s linear infinite; }
.sim-as button:disabled:not(.on) { opacity: .45; }

.sim-calc { text-align: center; padding-top: 12svh; }
.sim-orbit { position: relative; width: 220px; height: 220px; margin: 0 auto 26px; display: grid; place-items: center; }
.sim-orbit .sim-planet { width: 76px; height: 76px; }
.sim-orbit img { position: absolute; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); top: 50%; left: 50%; margin: -25px;
  animation: sim-orbit 7s linear infinite; }
@keyframes sim-orbit { from { transform: rotate(calc(var(--i) * 60deg)) translate(92px) rotate(calc(var(--i) * -60deg)); } to { transform: rotate(calc(var(--i) * 60deg + 360deg)) translate(92px) rotate(calc(var(--i) * -60deg - 360deg)); } }
.sim-calc h2 { font-size: 1.5rem; font-weight: 900; margin: 0 0 6px; }
.sim-calc p { color: var(--dim); }

.sim-score { text-align: center; padding-top: 4px; }
.sim-big { display: flex; flex-direction: column; align-items: center; margin: 6px 0 18px; }
.sim-big small { font-size: 1rem; color: var(--dim); font-weight: 700; }
.sim-big b { font-size: 6.2rem; font-weight: 900; line-height: 1; color: var(--vx-accent); text-shadow: 0 0 40px rgba(255, 106, 31, .35); }
.sim-big span { font-size: .9rem; color: var(--dim); }
.sim-sealed { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); margin-bottom: 18px; background: var(--card); }
.sim-blur { display: flex; height: 190px; filter: blur(14px) saturate(1.2); transform: scale(1.12); }
.sim-blur img { flex: 1; min-width: 0; object-fit: cover; }
.sim-lock { position: absolute; top: 46px; left: 50%; margin-left: -28px; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; }
.sim-lock svg { width: 26px; height: 26px; color: #fff; }
.sim-sealed p { position: relative; margin: 0; padding: 14px 16px 16px; font-size: 1.08rem; font-weight: 800; background: var(--card); }
.sim-redo { display: block; text-align: center; margin-top: 14px; color: var(--dim); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }

.sim-res { margin: -18px -18px 0; }
.sim-pic { position: relative; aspect-ratio: 2 / 3; max-height: 62svh; width: 100%; overflow: hidden; background: var(--card); }
.sim-pic > img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.sim-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, var(--bg)); pointer-events: none; }
.sim-pic.reveal > img { animation: sim-dev 1.6s ease-out both; }
@keyframes sim-dev { from { filter: blur(18px) brightness(1.6) sepia(.6); opacity: .2; } to { filter: none; opacity: 1; } }
.sim-faces3 { display: flex; height: 100%; }
.sim-faces3 img { flex: 1; min-width: 0; object-fit: cover; }
.sim-pic.dev .sim-faces3 { animation: sim-shim 1.8s ease-in-out infinite; }
@keyframes sim-shim { 50% { filter: brightness(1.25) saturate(1.3); } }
.sim-dev { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.sim-dev::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid var(--vx-accent); border-left-color: transparent; border-radius: 50%; animation: sim-spin .8s linear infinite; vertical-align: -1px; }
.sim-dev.fail::before { display: none; }
.sim-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(11, 11, 14, .78); border: 1px solid rgba(255, 106, 31, .55); border-radius: 16px; padding: 6px 14px; text-align: center; }
.sim-badge b { display: block; font-size: 2.1rem; font-weight: 900; color: var(--vx-accent); line-height: 1; }
.sim-badge small { font-size: .7rem; color: #ccc; }
.sim-body { padding: 0 18px; margin-top: -36px; position: relative; z-index: 2; }
.sim-k { font-size: .88rem; color: var(--vx-accent); font-weight: 800; }
.sim-body h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 900; line-height: 1.15; margin: 2px 0 10px; }
.sim-verdict { font-size: 1.05rem; line-height: 1.5; color: var(--text); opacity: .88; margin: 0 0 16px; }
.sim-cast-h { font-size: .85rem; color: var(--dim); font-weight: 700; margin-bottom: 8px; }
.sim-cast { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sim-cast a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.sim-cast img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); flex: none; }
.sim-cast span { display: flex; flex-direction: column; min-width: 0; }
.sim-cast b { font-weight: 800; }
.sim-cast small { color: var(--dim); font-size: .88rem; line-height: 1.3; }
.sim-body .vx-btn + .vx-btn { margin-top: 10px; }
.sim-sh { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 8px; }
.sim-sh img { width: 56%; margin: 0 auto 6px; border-radius: 14px; display: block; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.sim .vx-btn:not(.main), .sim-sh .vx-btn:not(.main) { background: var(--card2); border: 1px solid var(--line2); color: var(--text); }
.sim-sh a.vx-btn, .sim-band .vx-btn, .sim-chat a.vx-btn { text-decoration: none; }
/* the residency card right under the stories (his note: "a bit far from the stories panel") */
.sec + .signin-card { margin-top: 10px; }
/* desktop: every sheet is a centered modal - the same look as on the phone, not a sheet rising from the bottom (his note) */
@media (min-width: 900px) {
  .vx-sheet { top: 50%; bottom: auto; max-height: 88vh; border-bottom: 1px solid var(--vx-glass-line); border-radius: var(--vx-r);
    transform: translateY(-46%) scale(.97); opacity: 0; transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s; padding-bottom: 0; }
  .vx-sheet.open { transform: translateY(-50%); opacity: 1; }
  .vx-sheet > .grab { visibility: hidden; height: 2px; margin: 6px auto 0; }
}

/* ---------- the citizenship journey (citizen.js; plan conversion-next v6, mockups C1-C6) ---------- */
.cz-banner { position: relative; display: block; margin: 18px 0 6px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; border: 1px solid rgba(255, 106, 31, .45);
  background: #120c08; box-shadow: 0 10px 34px rgba(0, 0, 0, .45); }
.cz-banner-pic { display: block; position: relative; aspect-ratio: 3 / 2; max-height: 260px; width: 100%; overflow: hidden; }
.cz-banner-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.cz-banner-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #120c08); }
.cz-say { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; color: #17161a; font-weight: 800; font-size: .88rem; padding: 7px 12px; border-radius: 16px 16px 16px 4px; max-width: 60%; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cz-banner-t { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 16px; margin-top: -38px; position: relative; z-index: 2; }
.cz-banner-t b { font-size: clamp(1.25rem, 5.6vw, 1.55rem); font-weight: 900; line-height: 1.15; }
.cz-banner-t small { color: rgba(255, 255, 255, .82); font-size: .95rem; margin-bottom: 8px; }
.cz-banner-t .vx-btn { align-self: flex-start; }
.cz-pass-peek { position: absolute; top: 14px; right: -8px; transform: rotate(6deg); background: #fdf6ef; color: #17161a; font-weight: 900; font-size: .72rem; padding: 6px 18px 6px 12px;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); border-right: 6px solid var(--vx-accent); z-index: 2; }

.cz { max-width: 560px; margin: 0 auto; padding: 14px 16px 90px; min-height: 80svh; }
.cz-step { position: relative; height: 26px; margin-bottom: 14px; }
.cz-step::before { content: ""; position: absolute; inset: 11px 0 auto; height: 4px; border-radius: 4px; background: var(--card2); }
.cz-step span { position: absolute; top: 11px; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(270deg, var(--vx-accent), #ffb27a); }
.cz-step em { position: absolute; top: -4px; left: 0; font-style: normal; font-size: .8rem; color: var(--dim); }
.cz .vx-btn.block { width: 100%; margin-top: 12px; }
.cz .vx-btn:not(.main) { background: var(--card2); border: 1px solid var(--line2); color: var(--text); text-decoration: none; }

.cz-pass { position: relative; background: #fdf6ef; color: #17161a; border-radius: 20px; padding: 18px 20px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); overflow: hidden; }
.cz-pass::before, .cz-pass::after { content: ""; position: absolute; top: 58%; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); }
.cz-pass::before { left: -13px; } .cz-pass::after { right: -13px; }
.cz-pass-top { display: flex; align-items: center; gap: 10px; border-bottom: 2px dashed rgba(0, 0, 0, .15); padding-bottom: 12px; margin-bottom: 12px; }
.cz-pass-top img { width: 46px; height: 46px; } .cz-pass-top b { font-size: 1.2rem; font-weight: 900; }
.cz-pass-name small, .cz-pass li small { display: block; font-size: .75rem; color: #7a6f66; font-weight: 700; }
.cz-pass-name b { font-size: 1.5rem; font-weight: 900; }
.cz-pass ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 2px dashed rgba(0, 0, 0, .15); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cz-pass li b { font-size: .95rem; font-weight: 800; line-height: 1.25; }
.cz-bar { height: 44px; margin-top: 16px; background: repeating-linear-gradient(90deg, #17161a 0 3px, transparent 3px 5px, #17161a 5px 6px, transparent 6px 10px); opacity: .85; border-radius: 3px; }

/* one question per screen (his notes 2026-11-07): the scene shrinks so the bubble, the answers and the text box fit one phone screen */
.cz-desk { display: flex; flex-direction: column; gap: 10px; }
.cz-scene { border-radius: 18px; overflow: hidden; width: 100%; height: clamp(100px, calc(100svh - 615px), 230px); border: 1px solid var(--line2); flex: none; }
.cz-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.cz-say2 { position: relative; margin-top: 4px; background: #fdf6ef; color: #17161a; border-radius: 18px; padding: 12px 16px; font-size: 1rem; line-height: 1.4; min-height: 50px; }
.cz-say2::before { content: ""; position: absolute; top: -9px; right: 38px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fdf6ef; }
.cz-say2 b { display: block; font-weight: 900; font-size: 1.1rem; line-height: 1.35; }
.cz-say2 .cz-re { display: block; color: #5d544c; font-size: .95rem; margin-bottom: 3px; }
.cz-dots { display: flex; gap: 5px; padding: 8px 0; }
.cz-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9a9088; animation: sim-blink 1s infinite; }
.cz-dots i:nth-child(2) { animation-delay: .2s; } .cz-dots i:nth-child(3) { animation-delay: .4s; }
.cz-opts { display: grid; gap: 8px; }
.cz-opts.two { grid-template-columns: 1fr 1fr; }
.cz-opts button { min-height: 48px; padding: 8px 14px; border-radius: 14px; background: rgba(255, 106, 31, .08); border: 1.5px solid rgba(255, 106, 31, .6); color: var(--text); font: inherit; font-weight: 700; font-size: 1rem; text-align: center; }
.cz-opts button.on { background: var(--vx-accent); border-color: var(--vx-accent); color: #fff; }
.cz-opts button:disabled:not(.on) { opacity: .4; }
.cz-ask { display: flex; gap: 8px; }
.cz-ask input { flex: 1; min-width: 0; height: 46px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); color: var(--text); padding: 0 14px; font: inherit; font-size: 16px; }
.cz-ask button { width: 46px; height: 46px; border-radius: 14px; background: var(--vx-accent); color: #fff; font-size: 1.2rem; border: 0; }
.cz-skips { display: flex; justify-content: center; gap: 18px; }
.cz-skip { background: none; border: 0; color: var(--dim); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }

.cz-stamp { text-align: center; }
.cz-passport { position: relative; width: min(32vw, 128px); aspect-ratio: 600 / 909; margin: 0 auto 14px; border-radius: 10px; background: url(/verse/art/citizen-passport.jpg) center / cover; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.cz-ink { position: absolute; bottom: 7%; left: 6%; padding: 4px 8px; border: 2.5px solid rgba(255, 98, 40, .92); outline: 1px solid rgba(255, 98, 40, .7); outline-offset: 2px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; transform: rotate(-11deg); color: rgba(255, 110, 50, .95); line-height: 1.1; }
.cz-ink small { font-size: .5rem; font-weight: 800; white-space: nowrap; }
.cz-ink span { font-weight: 900; font-size: 1.15rem; letter-spacing: .06em; }
.cz-stamp.fresh .cz-ink { animation: cz-stamp .55s cubic-bezier(.2, 1.4, .4, 1) .35s both; }
@keyframes cz-stamp { from { transform: rotate(-11deg) scale(2.6); opacity: 0; } to { transform: rotate(-11deg) scale(1); opacity: 1; } }
.cz-stamp .cz-say2 { text-align: right; margin: 0 0 6px; }
.cz-stamp .cz-say2::before { display: none; }
.cz-stamp h1 { font-size: 1.6rem; font-weight: 900; margin: 4px 0; }
.cz-num { display: flex; flex-direction: column; align-items: center; margin: 4px 0 10px; }
.cz-num small { color: var(--dim); font-weight: 700; } .cz-num b { font-size: 3.4rem; font-weight: 900; color: var(--vx-accent); line-height: 1.05; letter-spacing: .05em; }
.cz-num em { font-style: normal; font-weight: 800; font-size: .95rem; padding: 5px 12px; border-radius: 999px; background: rgba(255, 106, 31, .14); border: 1px solid rgba(255, 106, 31, .5); }
.cz-bless { color: var(--dim); font-size: .95rem; font-style: italic; margin: 6px 0 0; }

.cz-flight { position: fixed; inset: 0; z-index: 120; background: #000; display: grid; place-items: center; }
.cz-flight video { width: 100%; height: 100%; object-fit: cover; }
.cz-fskip { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .3); font: inherit; font-weight: 700; }
@media (min-width: 900px) { .cz-flight video { object-fit: contain; } }
.cz-land { text-align: center; padding-top: 6svh; }
.cz-land img { width: min(70vw, 280px); }
.cz-land h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); font-weight: 900; margin: 6px 0; }
.cz-land p { color: var(--dim); }

.cz-id { padding-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.cz-id-h { margin: 0; font-size: 1.5rem; font-weight: 900; text-align: center; }
/* the passport's data page (his note 2026-11-07): the picture has no text; everything is laid over it in cqw (= drawPassport's u) */
.cz-pp { font-family: Arial, 'Noto Sans Hebrew', sans-serif; position: relative; container-type: inline-size; width: 100%; aspect-ratio: 3 / 2; background: url(/verse/art/citizen-datapage.jpg) center / 100% 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); color: #14162a; }
.cz-pp-top, .cz-pp-f, .cz-pp-mrz { mix-blend-mode: multiply; }   /* ink printed into the paper */
.cz-pp-top { position: absolute; inset: 0 4cqw auto; height: 6.7cqw; display: flex; align-items: center; justify-content: space-between; color: #262b55; }
.cz-pp-top b { font-size: 2.9cqw; font-weight: 900; } .cz-pp-top span { font-size: 2.3cqw; font-weight: 700; direction: ltr; }
.cz-pp-photo { position: absolute; left: 3.7cqw; top: 11.7cqw; width: 24.7cqw; height: 36.7cqw; background: #dcd6ce; display: grid; place-items: center; overflow: hidden; }
.cz-pp-photo img { width: 100%; height: 100%; object-fit: cover; } .cz-pp-photo span { font-size: 14cqw; font-weight: 900; color: #7a7f9a; }
.cz-pp-f { position: absolute; right: 4cqw; left: 31.5cqw; top: 11cqw; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 8cqw; }
.cz-pp-f > div { min-width: 0; padding-left: 1cqw; } .cz-pp-f .c2 { grid-column: span 2; } .cz-pp-f .c3 { grid-column: span 3; } .cz-pp-f .c4 { grid-column: span 4; } .cz-pp-f .c5 { grid-column: span 5; } .cz-pp-f .c7 { grid-column: span 7; } .cz-pp-f .c8 { grid-column: span 8; } .cz-pp-f .c12 { grid-column: span 12; }
.cz-pp-f small, .cz-pp-f b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-pp-f small { font-size: 2cqw; font-weight: 600; color: #5b607c; line-height: 1.2; }
.cz-pp-f b { font-size: 3.7cqw; font-weight: 700; line-height: 1.25; color: #1d1f33; } .cz-pp-f b.n { color: #b3261e; letter-spacing: .04em; }
.cz-pp-mrz { position: absolute; left: 4cqw; right: 2cqw; top: 55.6cqw; font: 700 3.4cqw/1.35 "OCR B", "OCR-B", "Courier New", monospace; color: #1c1d26; white-space: nowrap; text-align: left; }
.cz-id-sim { text-align: center; color: var(--vx-accent); font-weight: 700; }
/* the footer's links live on the home page only (his note 2026-11-07: "that bottom everywhere is weird") */
body:not([data-page="home"]) > footer { display: none !important; }
.cz-gate { text-align: center; } .cz-gate img { width: 100%; border-radius: 20px; } .cz-gate h1 { font-size: 1.6rem; font-weight: 900; margin: 14px 0 4px; } .cz-gate p { color: var(--dim); }

/* the citizen's passport in the status chip and the status sheet (his note 2026-11-07: a real passport, clearly tappable) */
.vx-top .st-chip .st-pp { width: 17px; height: auto; display: block; }
.sl-pp { display: flex; align-items: center; gap: 14px; padding: 7px 14px; border-radius: 16px; background: linear-gradient(135deg, #1d2547, #12172c); border: 1.5px solid rgba(214, 174, 92, .55); color: #fff; text-decoration: none; margin-top: 6px; }
.sl-pp img { width: 34px; height: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.sl-pp span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.sl-pp b { font-size: 1rem; font-weight: 900; } .sl-pp small { color: #d8c48f; font-weight: 700; font-size: .82rem; }   /* lower (his note on plan cz-sim-r2, 2026-11-07) */
.sl-pp i { font-style: normal; font-size: 1.6rem; color: #d8c48f; line-height: 1; }
/* the simulation band (his note 2026-11-07: less glow; the button was cut off on a phone - the title no longer pushes it out) */
.sim-band { grid-template-columns: auto minmax(0, 1fr) auto; box-shadow: 0 0 0 1px rgba(255, 106, 31, .12), 0 0 10px rgba(150, 70, 255, .2); border-color: rgba(178, 120, 255, .45); }
.sim-band-face { box-shadow: 0 0 6px rgba(178, 120, 255, .35); }
.sim-band-h { min-width: 0; white-space: normal; text-shadow: -1px 0 rgba(71, 215, 255, .45), 1px 0 rgba(255, 61, 240, .4); animation: none; }
.sim-band-go { white-space: nowrap; flex: none; }
.sim-band.small .sim-band-h { font-size: clamp(.98rem, 4.3vw, 1.15rem); }
/* the top bar on a phone (his note 2026-11-07: messy, the search box's words were cut): the logo, then one row of equal 38px
   buttons - search (an icon that opens over the bar), status, bell, me */
@media (max-width: 760px) {
  .top .wrap { position: relative; gap: 8px; }
  .top .brand { margin-inline-end: auto; }
  .search { flex: none !important; width: 38px !important; margin: 0 !important; }
  .search input { height: 38px; padding: 0; color: transparent; cursor: pointer; border-radius: 10px; caret-color: transparent; }
  .search input::placeholder { color: transparent; }
  .search > svg { right: 10px; top: 10px; color: var(--text); }
  .search.s-open { position: absolute; inset-inline: 16px; top: 10px; width: auto !important; z-index: 5; }
  .search.s-open input { padding: 0 38px 0 12px; color: var(--text); background: var(--bg); caret-color: auto; cursor: text; }
  .search.s-open input::placeholder { color: var(--faint); }
  .vx-top { gap: 8px; }
  .vx-top .icon-btn, .vx-top .me-btn { width: 38px; height: 38px; }
  .vx-top .st-chip { height: 38px; padding: 0 10px; }
}
/* section headings on a phone (his note: "עוד דמויות" broke onto two lines) */
.sec-h { align-items: center; }
.sec-h > a { white-space: nowrap; flex: none; }
@media (max-width: 760px) { .sec-h h2 { font-size: 1.35rem; } }
/* the stamp screen in one phone screen (the number is the stamp; no big number under it) */
.cz-stamp h1 { font-size: 1.35rem; margin: 2px 0; }
.cz-stamp .cz-num { margin: 2px 0 6px; }
.cz-stamp .cz-bless { margin: 4px 0 12px; font-size: .9rem; }
.cz-ink span { font-size: 1rem; }
@media (max-width: 760px) { .search { margin-left: 8px !important; } }   /* the search icon and the status chip stood glued */
.cz-load { display: grid; place-items: center; min-height: 60svh; }
.cz-load video { width: min(62vw, 260px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; -webkit-mask: radial-gradient(circle, #000 58%, transparent 71%); mask: radial-gradient(circle, #000 58%, transparent 71%); }

/* ---- the new phone top bar (his notes on plan open-cz-sim, option 3): the logo, the search field right by it with its word
   showing, then the status chip (a citizen: their passport), the bell and me - one height (38px), one line. html.nb = his eyes only ---- */
@media (max-width: 760px) {
  .nb .top .wrap { gap: 8px; padding-inline: 12px; }
  .nb .top .brand { margin-inline-end: 0; flex: none; }
  .nb .top .brand .brand-logo { width: 52px; margin-block: -8px; }
  .nb .search { flex: 1 1 auto !important; width: auto !important; min-width: 64px; margin: 0 !important; }
  .nb .search input { height: 38px; padding: 0 32px 0 8px; color: var(--text); cursor: text; caret-color: auto; background: var(--card); border-color: var(--line2); font-size: 16px; }
  .nb .search input::placeholder { color: var(--dim); }
  .nb .search > svg { right: 9px; top: 10px; width: 18px; height: 18px; color: var(--dim); }
  .nb .search.s-open { position: absolute; inset-inline: 12px; top: 10px; width: auto !important; z-index: 5; }
  .nb .vx-top { gap: 6px; flex: none; }
  .nb .vx-top .icon-btn, .nb .vx-top .me-btn, .nb .vx-top .in-btn { height: 38px; }
  .nb .vx-top .icon-btn, .nb .vx-top .me-btn { width: 38px; }
  .nb .vx-top .st-chip { height: 38px; padding: 0 9px 0 10px; gap: 6px; }
  .nb .vx-top .st-chip .st-pp { width: auto; height: 26px; filter: drop-shadow(0 0 4px rgba(236, 196, 120, .35)); }
}
.sl-pp i svg { width: 22px; height: 22px; display: block; }

/* ---- the citizenship desk: "write something" + skip pinned to the bottom of the screen (his note on plan open-cz-sim); the
   phone's bottom nav steps aside inside the journey, so nothing covers them ---- */
@media (max-width: 900px) { body[data-page="citizenship"] .nav { display: none !important; } }
.cz-desk { padding-bottom: 118px; }
.cz-dock { position: fixed; z-index: 37; bottom: 0; left: 50%; transform: translateX(-50%); width: min(560px, 100%); display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 16px); }
.cz-dock .cz-skips { gap: 22px; }

/* ---- the passport's visa page: the entry stamp and his signature, inked into the page (his note on plan open-cz-sim) ---- */
.cz-visa { position: relative; container-type: inline-size; width: 100%; max-width: 330px; margin: 0 auto; aspect-ratio: 700 / 1050; background: url(/verse/art/citizen-visa.jpg) center / 100% 100%; border-radius: 12px 4px 4px 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); overflow: hidden; }
.cz-stamp .cz-visa { width: min(50vw, 200px); margin-bottom: 12px; }
.cz-es { position: absolute; top: 13%; right: 9%; width: 70cqw; padding: 3.5cqw 3cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; text-align: center;
  color: #3a3196; border: 1.3cqw solid currentColor; outline: .5cqw solid currentColor; outline-offset: 1.2cqw; border-radius: 5cqw; transform: rotate(-9deg);
  font-family: Arial, 'Noto Sans Hebrew', sans-serif; mix-blend-mode: multiply; opacity: .9; line-height: 1.15; }
.cz-es small { font-size: 4.6cqw; font-weight: 800; white-space: nowrap; }
.cz-es b { font-size: 6cqw; font-weight: 900; letter-spacing: .02em; }
.cz-es span { font-size: 13cqw; font-weight: 900; letter-spacing: .08em; font-family: "Courier New", monospace; line-height: 1; }
.cz-visa-sign { position: absolute; top: 58%; right: 14%; width: 56cqw; color: #1b2a6b; mix-blend-mode: multiply; text-align: center; }
.cz-sign { width: 100%; height: auto; display: block; transform: rotate(-4deg); }
.cz-visa-sign small { display: block; font: 700 4.4cqw Arial, 'Noto Sans Hebrew', sans-serif; color: #2b2f55; margin-top: -1cqw; }
.cz-visa.fresh .cz-es { animation: cz-es .55s cubic-bezier(.2, 1.4, .4, 1) .35s both; }
.cz-visa.fresh .cz-sign path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: cz-sign 1.1s ease-out 1.1s forwards; }
@keyframes cz-es { from { transform: rotate(-9deg) scale(2.4); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: .9; } }
@keyframes cz-sign { to { stroke-dashoffset: 0; } }
.cz-stamp { padding-bottom: 84px; }

/* round 2 fits (360px phones): the tourist's search word whole; the stamp screen in one screen (his line + blessing in one bubble) */
@media (max-width: 760px) {
  .nb .top .wrap { gap: 6px; }
  .nb .top .brand .brand-logo { width: 48px; }
  .nb .search { min-width: 84px; }
  .nb .search input { padding: 0 30px 0 6px; }
  .nb .search > svg { right: 8px; }
  .nb .vx-top .in-btn { padding: 0 14px; }
  .nb .vx-top .st-chip { padding: 0 8px; gap: 5px; }
  .nb .vx-top .st-chip .st-pp { height: 32px; }
}
.cz-stamp .cz-visa { width: min(42vw, 165px); margin-bottom: 10px; }
.cz-stamp .cz-say2 .cz-re { margin: 4px 0 0; font-size: .88rem; }

/* ---------- "ספרו לנו עליכם" (plan cz-sim-r3, verse/about.js): the characters picker, the counter's new answers, the booth's
   birthday + notifications lines, the simulation's own answer + classification screen, "מה סיפרתם לנו" on the אני page ---------- */
/* the characters picker (mockup r3-visit-1): search, chips "נבחרו 2 מתוך 3", round faces - picked = orange ring + check */
.ab-pick { display: flex; flex-direction: column; gap: 12px; }
.ab-search { position: relative; display: block; }
.ab-search svg { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--dim); pointer-events: none; }
.ab-search input { width: 100%; height: 50px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); color: var(--text); padding: 0 44px 0 14px; font: inherit; font-size: 16px; }
.ab-search input::-webkit-search-cancel-button { display: none; }
.ab-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.ab-n { font-size: .92rem; color: var(--dim); font-weight: 700; margin-inline-end: auto; }
.ab-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(255, 106, 31, .08); border: 1.5px solid rgba(255, 106, 31, .7); color: var(--text); }
.ab-chip .vx-av { width: 30px; height: 30px; }
.ab-chip > svg { width: 15px; height: 15px; color: var(--dim); }
.ab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
@media (max-width: 370px) { .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--text); font: inherit; padding: 0; min-width: 0; }
.ab-c .vx-av { width: min(19vw, 78px); height: min(19vw, 78px); border: 2.5px solid transparent; transition: border-color .15s, transform .15s; }
.ab-c b { font-size: .8rem; font-weight: 700; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ab-c > i { position: absolute; top: -2px; left: calc(50% - min(9.5vw, 39px) - 2px); width: 24px; height: 24px; border-radius: 50%; background: var(--vx-accent); color: #fff; display: none; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.ab-c > i svg { width: 14px; height: 14px; }
.ab-c.on .vx-av { border-color: var(--vx-accent); box-shadow: 0 0 14px rgba(255, 106, 31, .45); }
.ab-c.on > i { display: grid; }
.ab-c.full .vx-av { animation: ab-no .35s; }
@keyframes ab-no { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ab-none { grid-column: 1 / -1; color: var(--dim); text-align: center; padding: 14px 0; }

/* the counter's answers with icons (mockups source / first), the wish suggestions, the two-line box, "המשך" + "דלגו" */
.cz-opts button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cz-opts button > svg { width: 24px; height: 24px; flex: none; color: var(--text); }
.cz-opts.rows button { justify-content: flex-start; min-height: 52px; padding: 8px 18px; font-size: 1.05rem; }
.cz-opts.rows button > svg { margin-inline-end: 6px; }
.cz-opts.grid { grid-template-columns: 1fr 1fr; }
.cz-opts.grid button { min-height: 54px; }
.cz-opts button.on > svg { color: #fff; }
.cz-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-sugg button { flex: 1 1 auto; min-height: 46px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 106, 31, .08); border: 1.5px solid rgba(255, 106, 31, .6); color: var(--text); font: inherit; font-weight: 700; font-size: .95rem; }
.cz-sugg button.on { background: var(--vx-accent); border-color: var(--vx-accent); color: #fff; }
.cz-ask2 { align-items: stretch; }
.cz-ask2 textarea { flex: 1; min-width: 0; height: 64px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); color: var(--text); padding: 10px 14px; font: inherit; font-size: 16px; line-height: 1.35; resize: none; }
.cz-ask2 button { height: auto; min-height: 46px; }
.cz-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cz-go .vx-btn { flex: 0 1 200px; margin: 0 !important; gap: 14px; }
.cz-go .vx-btn svg { width: 22px; height: 22px; }
.cz-chars { margin-top: 4px; }
.cz-desk:has(.cz-chars) .cz-scene { height: clamp(90px, calc(100svh - 690px), 200px); }
.cz-desk:has(.cz-opts.rows) .cz-scene { height: clamp(90px, calc(100svh - 720px), 180px); }
/* the booth's two profile lines: his fixed lead-in (grey), the honest small print under the buttons, the birthday read back */
.cz-say2 .cz-pre { color: #6f665e; }
.cz-note { text-align: center; color: var(--dim); font-size: .9rem; margin: 2px 0 0; }
.cz-mine { align-self: flex-start; max-width: 80%; margin-top: 6px; background: var(--card2); border: 1px solid var(--line2); border-radius: 18px 18px 4px 18px; padding: 10px 16px; font-weight: 800; font-size: 1.05rem; }
.cz-got { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(110, 220, 130, .65); background: rgba(110, 220, 130, .08); font-weight: 800; }
.cz-got svg { width: 20px; height: 20px; color: #6edc82; flex: none; }
.cz-got.bad { border-color: rgba(255, 140, 100, .6); background: rgba(255, 140, 100, .08); font-weight: 700; }
.cz-again { align-self: flex-start; padding: 2px 6px; }
.cz-desk > .vx-btn.block { margin-top: 6px; }
.cz-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; opacity: .8; }

/* the simulation: their own answer (mockup simfree) */
.sim-free { display: flex; align-items: center; margin-top: 12px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); }
.sim-free input { flex: 1; min-width: 0; height: 52px; background: none; border: 0; color: var(--text); padding: 0 16px; font: inherit; font-size: 16px; }
.sim-free input:focus { outline: none; }
.sim-free:focus-within { border-color: var(--vx-accent); }
.sim-free button { width: 48px; height: 48px; background: none; border: 0; color: var(--text); display: grid; place-items: center; }
.sim-free button svg { width: 24px; height: 24px; }
.sim-free button.on, .sim-free button.wait { color: var(--vx-accent); }
/* the classification screen (mockup result-2): the certificate, the picture, the three faces, follow them, the next step */
.sim-res2 { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.sim-cert { position: relative; border-radius: 22px; padding: 12px 16px 14px; background: linear-gradient(160deg, #1d1610, #0f0c0a); border: 1.5px solid rgba(214, 174, 92, .6); box-shadow: inset 0 0 0 4px rgba(214, 174, 92, .08), 0 10px 30px rgba(0, 0, 0, .4); text-align: center; }
.sim-cert-h { display: flex; align-items: center; gap: 10px; color: #e8cf98; font-weight: 800; font-size: .95rem; }
.sim-cert-h::before, .sim-cert-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 174, 92, .7), transparent); }
.sim-cert-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0 2px; }
.sim-cert-logo { width: min(24vw, 96px); justify-self: center; filter: drop-shadow(0 0 10px rgba(255, 140, 40, .35)); }
.sim-cert-score { display: flex; flex-direction: column; align-items: center; padding: 0 14px; border-inline: 1px solid rgba(214, 174, 92, .35); }
.sim-cert-score b { font-size: clamp(3.4rem, 17vw, 4.6rem); font-weight: 900; line-height: .95; color: var(--vx-accent); text-shadow: 0 0 30px rgba(255, 106, 31, .35); }
.sim-cert-score small { color: #cfc6bb; font-size: .85rem; }
.sim-cert-sign { display: flex; flex-direction: column; align-items: center; color: #e8cf98; }
.sim-sign { width: min(24vw, 96px); height: auto; color: #f1e3c0; transform: rotate(-5deg); }
.sim-cert-sign small { font-size: .72rem; font-weight: 700; line-height: 1.25; color: #e0b256; }
.sim-cert-name { font-size: clamp(1.35rem, 6.4vw, 1.75rem); font-weight: 900; line-height: 1.2; margin: 4px 0 0; color: #fff; }
.sim-cert-name.locked { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; font-weight: 800; color: #cfc6bb; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px dashed rgba(214, 174, 92, .45); }
.sim-cert-name.locked svg { width: 18px; height: 18px; flex: none; }
.sim-res2 .sim-pic { aspect-ratio: 4 / 3; max-height: none; border-radius: 20px; border: 1px solid var(--line2); }
.sim-res2 .sim-pic::after { display: none; }
.sim-res2 .sim-pic .sim-dev { bottom: 14px; }
.sim-res2 .sim-verdict { margin: 0; font-size: 1rem; }
.sim-sec-h { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 1.1rem; margin-top: 4px; }
.sim-sec-h::before, .sim-sec-h::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--vx-accent)); border-radius: 2px; }
.sim-sec-h::after { background: linear-gradient(270deg, transparent, var(--vx-accent)); }
.sim-cast3 { display: flex; justify-content: center; gap: 14px; }
.sim-cast3 a { flex: 0 1 31%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--text); text-decoration: none; min-width: 0; }
.sim-cast3 img { width: min(24vw, 96px); height: min(24vw, 96px); border-radius: 50%; object-fit: cover; border: 2.5px solid var(--vx-accent); }
.sim-cast3 b { font-weight: 800; font-size: .95rem; }
.sim-cast3 small { color: var(--dim); font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim-res2 .vx-btn.block { margin: 0; }
.sim-res2 .vx-btn.main:disabled { opacity: .55; box-shadow: none; }
.sim-next { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: linear-gradient(135deg, #1d2547, #12172c); border: 1.5px solid rgba(214, 174, 92, .5); color: #fff; text-decoration: none; }
.sim-next img { width: 58px; height: auto; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); transform: rotate(4deg); }
.sim-next span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sim-next small { color: var(--vx-accent); font-weight: 800; font-size: .9rem; }
.sim-next b { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.sim-next em { font-style: normal; color: #cfd3e6; font-size: .88rem; }
.sim-next i { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--vx-accent); display: grid; place-items: center; color: var(--vx-accent); flex: none; }
.sim-next i svg { width: 22px; height: 22px; }

/* ---------- round 4 - the journeys (plan cz-sim-r4, his notes 2026-11-07): one writing bar for Yotam, Miriam and the rabbi,
   Yotam's stages, the thinking line, "יותם מסווג אתכם", the end of the test, the passport on one screen ---------- */
/* ONE writing bar (mockup input): a rounded field with a pencil + a send button of exactly its height; two lines grow both; no
   focus ring / border jump, no Windows scrollbar line on the empty field */
.vx-write { display: flex; align-items: stretch; gap: 8px; width: 100%; margin: 0; }
.vx-write-f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 14px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); cursor: text; transition: border-color .15s; }
.vx-write-f:focus-within { border-color: rgba(255, 106, 31, .75); }
.vx-write textarea { flex: 1; min-width: 0; display: block; box-sizing: border-box; height: 48px; margin: 0; padding: 13px 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: none;
  color: var(--text); font: inherit; font-size: 16px; line-height: 22px; resize: none; overflow-y: auto; scrollbar-width: none; -webkit-appearance: none; appearance: none; }
.vx-write textarea::-webkit-scrollbar { display: none; width: 0; }
.vx-write textarea:focus, .vx-write textarea:focus-visible { outline: 0; box-shadow: none; border: 0; }
.vx-write textarea::placeholder { color: var(--dim); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-write textarea:disabled { opacity: .6; background: none; }
.vx-write-pen { width: 19px; height: 19px; flex: none; color: var(--dim); }
.vx-write-go { flex: none; width: 52px; min-height: 51px; margin: 0; padding: 0; border: 0; border-radius: 16px; background: var(--vx-accent); color: #fff; display: grid; place-items: center; box-shadow: none; cursor: pointer; }
.vx-write-go svg { width: 22px; height: 22px; }
.vx-write-go:disabled { opacity: .55; cursor: default; }
.vx-write-go.wait { opacity: 1; }
.vx-write-go.wait svg { display: none; }
.vx-write-go.wait::after { content: ""; width: 18px; height: 18px; border: 2px solid #fff; border-left-color: transparent; border-radius: 50%; animation: sim-spin .8s linear infinite; }
.vx-pick-hint { margin: 0; text-align: center; color: var(--dim); font-size: .85rem; line-height: 1.3; }

/* Yotam's stages (mockup simq-a + his correction: one stage at a time, no running chat) */
/* the stage's parts move, never .sim-q itself: a transform there would carry the fixed writing bar along with it */
.sim-q { padding-bottom: 128px; }
.sim-q > :not(.sim-dock) { animation: sim-in .32s ease-out both; }
.sim-q > .sim-as { animation-delay: .06s; }
.sim-q.out > :not(.sim-dock) { opacity: 0; transform: translateY(-8px); transition: opacity .16s, transform .16s; }
@keyframes sim-in { from { opacity: 0; transform: translateY(10px); } }
.sim-qh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line2); }
.sim-qh > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); flex: none; }
.sim-qh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sim-qh-t b { font-size: .95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-qh-t small { font-size: .78rem; color: var(--dim); }
.sim-dots { display: flex; gap: 6px; flex: none; }
.sim-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.sim-dots i.done { background: var(--vx-accent); }
.sim-dots i.now { background: none; box-shadow: inset 0 0 0 2px var(--vx-accent); }
.sim-stage { display: flex; flex-direction: column; gap: 10px; }
.sim-stage:has(.sim-mine) { min-height: 12.5rem; }   /* stages 2-7 keep their cards at about the same height */
.sim-mine { align-self: flex-start; max-width: 82%; margin: 0; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--vx-accent); color: #fff; font-weight: 800; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.sim-re { display: flex; align-items: flex-start; gap: 8px; }
.sim-re img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--vx-accent); flex: none; }
.sim-re p { margin: 0; max-width: 86%; padding: 9px 14px; border-radius: 18px 4px 18px 18px; background: var(--card2); border: 1px solid var(--line2); color: #cfc8c0; font-style: italic; font-size: .95rem; line-height: 1.4; }
.sim-q .sim-bubble { margin-top: 2px; border-radius: 18px; padding: 15px 18px; font-size: 1.22rem; font-weight: 900; }
.sim-q .vx-pick-hint { margin: 12px 0 8px; }
.sim-q .sim-as { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-q .sim-as button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 10px 12px; border-radius: 16px; font-size: .98rem; text-align: right; }
.sim-as button > i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8a837c; flex: none; transition: border-color .15s, background .15s; }
.sim-as button.on > i { border-color: var(--vx-accent); background: radial-gradient(circle, var(--vx-accent) 0 4px, transparent 4.5px); }
.sim-as button > span { min-width: 0; }
.sim-dock { position: fixed; z-index: 37; bottom: 0; left: 50%; transform: translateX(-50%); width: min(520px, 100%); display: flex; flex-direction: column; gap: 2px;
  padding: 18px 18px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 16px); }
.sim-dock .sim-skip { margin: 2px auto 0; padding: 4px 8px; }
@media (max-width: 900px) { body[data-page="simulation"]:has(.sim-q) .nav { display: none !important; } }
@media (max-width: 370px) { .sim-q .sim-as button { min-height: 58px; font-size: .92rem; } .sim-stage:has(.sim-mine) { min-height: 11rem; } .sim-q .sim-bubble { font-size: 1.12rem; } }

/* Miriam / the rabbi think (mockup think): their bubble keeps its height, a short line of theirs typed with a caret; the picture breathes */
.cz-say2.thinking { display: flex; align-items: center; }
.cz-think { display: inline-flex; align-items: center; gap: 1px; min-width: 0; color: #5d544c; font-size: 1rem; }
.cz-think em { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-think i { width: 2px; height: 1.15em; flex: none; background: currentColor; animation: cz-caret 1s steps(1) infinite; }
@keyframes cz-caret { 50% { opacity: 0; } }
/* Yotam thinks the same way while the next question is written (sim.js think) - on the dark question bubble */
.sim-q .sim-bubble.thinking { display: flex; align-items: center; }
.sim-q .sim-bubble .cz-think { color: var(--dim); font-weight: 600; }
.cz-desk.thinking .cz-scene img { animation: cz-breathe 6s ease-in-out infinite alternate; }
@keyframes cz-breathe { to { transform: scale(1.05); } }
.cz-desk .vx-pick-hint { margin: 2px 0 -2px; }
@media (max-height: 760px) {   /* "מאיפה טסתם" (5 rows) on a short phone: all five above the bar */
  .cz-desk:has(.cz-opts.rows) .vx-pick-hint { display: none; }
  .cz-desk:has(.cz-opts.rows) .cz-scene { height: 80px; }
}
.cz-dock .vx-write { margin-bottom: 2px; }

/* "יותם מסווג אתכם" (mockup classify): nothing spins but a thin scan line; one face lit at a time, the others dimmed */
.sim-calc { padding-top: 7svh; }
.sim-ring { position: relative; width: 280px; height: 280px; margin: 0 auto 28px; display: grid; place-items: center; }
.sim-ring::before { content: ""; position: absolute; inset: 30px; border-radius: 50%; border: 1px solid rgba(255, 106, 31, .2); }
.sim-ring img { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 106, 31, .3);
  transform: rotate(calc(var(--i) * 60deg)) translateY(-110px) rotate(calc(var(--i) * -60deg)); filter: brightness(.42) saturate(.5); transition: filter .6s, transform .6s, border-color .6s, box-shadow .6s; }
.sim-ring img.on { z-index: 1; filter: none; border-color: var(--vx-accent); box-shadow: 0 0 0 3px rgba(255, 106, 31, .18), 0 0 18px rgba(255, 106, 31, .25);
  transform: rotate(calc(var(--i) * 60deg)) translateY(-110px) rotate(calc(var(--i) * -60deg)) scale(1.16); }
.sim-scan { width: 124px; height: 124px; border-radius: 50%; border: 1px solid rgba(255, 106, 31, .4);
  background: conic-gradient(from 0deg, transparent 0 290deg, rgba(255, 106, 31, .16) 356deg, rgba(255, 150, 70, .85) 359deg 360deg); animation: sim-spin 7s linear infinite; }
.sim-calc p { min-height: 1.5em; transition: opacity .3s; }

/* the end of the test (mockup simend): a smaller certificate with the department, the three, home first, passport + profile, share quiet */
.sim-cert-row:has(.sim-cert-dept) { grid-template-columns: auto minmax(0, 1fr) auto; }
.sim-cert-row:has(.sim-cert-dept) .sim-cert-sign small { max-width: 76px; }
.sim-cert-row:has(.sim-cert-dept) .sim-cert-logo, .sim-cert-row:has(.sim-cert-dept) .sim-sign { width: min(17vw, 70px); }
.sim-cert-dept { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px; border-inline: 1px solid rgba(214, 174, 92, .35); min-width: 0; }
.sim-cert-dept small { color: #cfc6bb; font-size: .78rem; font-weight: 700; }
.sim-cert-dept b { font-size: clamp(1.02rem, 4.8vw, 1.25rem); font-weight: 900; line-height: 1.2; color: var(--vx-accent); }
.sim-end { gap: 12px; }
.sim-end .sim-cert { padding: 10px 14px 12px; }
.sim-end .sim-cert-logo, .sim-end .sim-sign { width: min(17vw, 70px); }
.sim-end .sim-cert-name { font-size: clamp(1.2rem, 5.6vw, 1.5rem); }
.sim-end .sim-sec-h { margin-top: 0; font-size: 1.02rem; }
.sim-end .sim-cast3 img { width: min(19vw, 76px); height: min(19vw, 76px); }
.sim-end .sim-follow { height: 44px; font-size: .95rem; }
.sim-end .sim-home { box-shadow: none; text-decoration: none; }
.sim-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-two:has(> :only-child) { grid-template-columns: 1fr; }
.sim .sim-two .vx-btn { height: 50px; padding: 0 10px; gap: 8px; background: none; border: 1.5px solid var(--line2); color: var(--text); text-decoration: none; font-weight: 700; font-size: .98rem; }
.sim-two .vx-btn svg { width: 20px; height: 20px; }
.sim-quiet { align-self: center; background: none; border: 0; color: var(--dim); font: inherit; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; padding: 2px 8px; }
.sim-end .sim-pic { margin-top: 8px; }
.sim-badge.dept { max-width: 64%; text-align: right; padding: 8px 12px; }
.sim-badge.dept small { display: block; }
.sim-badge.dept b { font-size: 1.05rem; line-height: 1.25; }

/* ---- round 5 (his notes 2026-11-08), the simulation: Yotam's system check as a scene the size of Miriam's and the rabbi's
   (art/yotam-check.jpg, not his huge portrait); the end of the test on ONE screen - the section fills the screen between the top
   bar and the bottom bar, the picture takes what is left (the verdict over its dark lower part), the follow is a small button on
   the cast's heading line, smaller faces, no share; the result's row in the passport and its tile on the אני page ---- */
.sim-host.scene { width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; box-shadow: none; margin-bottom: 16px; }
.sim-host.scene img { object-position: center 30%; }
.sim-host.scene .sim-live { right: auto; left: 12px; }   /* off the neon planet on the wall */
.sim:has(> .sim-end) { padding-bottom: 60px; min-height: 0; }   /* the bottom bar is 50px */
.sim-end { gap: 10px; min-height: calc(100svh - 142px); }   /* 142 = the top bar 59 + 5 + this page's padding 18 + 60 */
.sim-end .sim-pic { margin-top: 0; aspect-ratio: auto; flex: 1 1 0; min-height: 150px; max-height: 420px; }
.sim-end .sim-pic > img { position: absolute; inset: 0; object-position: center 38%; }
.sim-end .sim-faces3 { position: absolute; inset: 0; }
.sim-end .sim-pic .sim-dev { top: 10px; bottom: auto; padding: 5px 12px; font-size: .8rem; }
.sim-end .sim-pic .sim-verdict { position: absolute; inset: auto 0 0; z-index: 1; margin: 0; padding: 30px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .8) 42%);
  color: #fff; opacity: 1; font-size: .9rem; line-height: 1.4; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sim-end .sim-sec-h { justify-content: space-between; gap: 8px; font-size: .9rem; }
.sim-end .sim-sec-h::before, .sim-end .sim-sec-h::after { display: none; }
.sim-end .sim-sec-h > span { min-width: 0; line-height: 1.25; }   /* wraps on a narrow phone; the picture gives up the line */
.sim-end .sim-follow { flex: none; height: 30px; padding: 0 11px; border-radius: 999px; background: none; border: 1.5px solid var(--line2); color: var(--text); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.sim-end .sim-follow:disabled, .sim-end .sim-follow.wait { opacity: .55; cursor: default; }
.sim-end .sim-cast3 { gap: 10px; }
.sim-end .sim-cast3 a { gap: 2px; }
.sim-end .sim-cast3 img { width: 52px; height: 52px; border-width: 2px; }
.sim-end .sim-cast3 b { font-size: .86rem; line-height: 1.25; }
.sim-end .sim-cast3 small { font-size: .74rem; line-height: 1.25; }
.cz-id-sim.done > span { display: flex; flex-direction: column; gap: 1px; }
.cz-id-sim.done small { color: var(--dim); font-size: .76rem; font-weight: 600; }
.cz-id-sim.done b { font-size: .95rem; font-weight: 800; line-height: 1.3; }
@media (max-width: 370px) {   /* 360x740: the department in two lines, the picture keeps ~180px */
  .sim-end { gap: 8px; }
  .sim-end .sim-cert-logo, .sim-end .sim-sign { width: 54px; }
  .sim-end .sim-cert-row:has(.sim-cert-dept) .sim-cert-sign small { max-width: 64px; }
  .sim-end .sim-cert-dept { padding: 0 8px; }
  .sim-end .sim-cert-dept b { font-size: 1rem; }
  .sim-end .sim-cert-name { font-size: 1.15rem; }
  .sim-end .sim-pic .sim-verdict { padding: 22px 12px 8px; font-size: .84rem; line-height: 1.35; }
  .sim-end .sim-cast3 img { width: 46px; height: 46px; }
  .sim .sim-end .sim-home, .sim .sim-end .sim-two .vx-btn { height: 46px; }
}
.me-sim b small { display: block; margin-top: 2px; color: var(--dim); font-size: .8rem; font-weight: 600; line-height: 1.35; }

/* the passport on one screen (mockup passport): the stamp pressed over the data page's lower corner, the rabbi's signature, one
   small row to the simulation, home first; .cz-pp-stamp / .cz-pp-sign = drawPassport's places */
.cz-id { gap: 10px; }
.cz-pp-f b.d { font-size: 3.1cqw; }
.cz-pp-stamp { position: absolute; right: 9.35cqw; top: 43.35cqw; width: 23.3cqw; height: 23.3cqw; box-sizing: border-box; border-radius: 50%; border: .7cqw solid currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15cqw;
  color: #3a3196; transform: rotate(-12deg); mix-blend-mode: multiply; opacity: .85; font-family: Arial, 'Noto Sans Hebrew', sans-serif; line-height: 1.1; text-align: center; }
.cz-pp-stamp::before { content: ""; position: absolute; inset: .75cqw; border-radius: 50%; border: .3cqw solid currentColor; }
.cz-pp-stamp small { font-size: 1.6cqw; font-weight: 800; white-space: nowrap; max-width: 17cqw; overflow: hidden; text-overflow: ellipsis; }
.cz-pp-stamp small:last-child { font-size: 1.7cqw; font-weight: 700; }
.cz-pp-stamp b { font-size: 2.3cqw; font-weight: 900; }
.cz-pp-stamp span { font: 900 4.6cqw/1 "Courier New", monospace; letter-spacing: .04em; }
.cz-pp-sign { position: absolute; left: 5cqw; top: 43cqw; width: 20cqw; color: #1b2a6b; mix-blend-mode: multiply; text-align: center; }
.cz-pp-sign .cz-sign { transform-origin: 0 0; }
.cz-pp-sign small { display: block; font: 700 1.8cqw Arial, 'Noto Sans Hebrew', sans-serif; color: #2b2f55; margin-top: .3cqw; white-space: nowrap; }
.cz-id-sim { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; font-size: .84rem; text-align: right; }
.cz-id-sim > span { flex: 1; min-width: 0; line-height: 1.35; }   /* wraps on a narrow phone instead of '...' (round 4 check at 360) */
.cz-id-sim > svg { width: 20px; height: 20px; flex: none; color: var(--vx-accent); }
.cz-id-sim > svg:last-child { width: 18px; height: 18px; color: var(--dim); margin-inline-start: auto; }
.cz-id .vx-btn.main { box-shadow: none; margin-top: 2px; }
.cz-id .cz-tools { margin-top: 4px; }

/* "מה סיפרתם לנו" on the אני page (mockup r3-me-1): a row per field, its answer, "שינוי" / "להוסיף"; notifications = a switch */
.ab-card { max-width: 760px; margin: 22px auto 0; padding: 18px 18px 6px; border-radius: 24px; background: var(--card); border: 1.5px solid rgba(255, 106, 31, .75); }
.ab-card h2 { font-size: 1.4rem; font-weight: 900; margin: 0; }
.ab-card > p { color: var(--dim); font-size: .92rem; margin: 2px 0 8px; }
.ab-card .vx-spin { margin: 18px auto; }
.ab-row { display: grid; grid-template-columns: 24px minmax(0, 6.6em) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.ab-ic svg { width: 22px; height: 22px; color: var(--text); display: block; }
.ab-l { font-size: .9rem; color: var(--dim); line-height: 1.25; padding-inline-end: 10px; border-inline-end: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.ab-v { font-weight: 800; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.ab-row.no-ans .ab-v { color: var(--dim); font-weight: 500; }
.ab-act { background: none; border: 0; color: var(--vx-accent); font: inherit; font-weight: 800; font-size: .92rem; text-decoration: underline; text-underline-offset: 4px; padding: 6px 2px; white-space: nowrap; }
.ab-faces { display: flex; gap: 6px; }
.ab-faces > span { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 36px; min-width: 0; }
.ab-faces .vx-av { width: 34px; height: 34px; }
.ab-faces small { font-size: .68rem; color: var(--dim); font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-sw { margin: 0; border: 0; cursor: pointer; }
.vx-sheet.ab .ab-sheet .vx-h { margin-top: 4px; }
.ab-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ab-opts.series { flex-direction: row; flex-wrap: wrap; }
.ab-opts button { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 16px; border-radius: 14px; background: var(--card2); border: 1.5px solid var(--line2); color: var(--text); font: inherit; font-weight: 700; text-align: right; }
.ab-opts.series button { min-height: 42px; border-radius: 999px; }
.ab-opts button svg { width: 22px; height: 22px; flex: none; }
.ab-opts button.on { border-color: var(--vx-accent); background: rgba(255, 106, 31, .14); }
.ab-text { width: 100%; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); padding: 12px 14px; font: inherit; font-size: 16px; resize: none; margin: 6px 0 4px; }
.vx-sheet.ab .ab-pick { margin: 6px 0 12px; }
.vx-sheet.ab .ab-c .vx-av { width: min(18vw, 70px); height: min(18vw, 70px); }
.vx-sheet.ab .ab-date { margin-top: 8px; }
.vx-sheet.ab .vx-btn.block { margin-top: 10px; }
.vx-sheet.ab .ab-dock { position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 12px 22px 22px; background: linear-gradient(transparent, rgba(18, 18, 22, .94) 14px); }
.vx-sheet.ab .ab-dock .vx-btn.block { margin-top: 0; }
@media (max-width: 370px) { .ab-row { gap: 8px; } .ab-faces { gap: 4px; } .ab-faces > span { width: 31px; } .ab-faces .vx-av { width: 30px; height: 30px; } }

/* ========== round 4, site-wide (plan cz-sim-r4, his notes 2026-11-07) ========== */
/* ---- the page loader (item 1-2, mockup r4 loader): the official logo standing still (no spin), a soft glow breathing into
   the dark - a radial fade, so no square edge (his screenshot: the turning logo's glow cut in a square) - a thin orange line
   drawing itself and a small grey "נכנסים לשלומיוורס". ui.js loader() / the wiki router: .vx-loader; the journeys' own loaders
   (.cz-load with its turning-logo video, .sim-load with its planet) take the same look while they still hold only that ---- */
@property --vxl-g { syntax: '<number>'; inherits: false; initial-value: .6; }
.vx-loader, .cz-load:is(:has(> video:only-child)), .sim-load:is(:has(> .sim-planet:only-child)) {
  position: relative; min-height: 62svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle 170px at 50% calc(50% - 24px), rgba(255, 106, 31, calc(.2 * var(--vxl-g))), rgba(255, 106, 31, calc(.06 * var(--vxl-g))) 52%, transparent 100%);
  animation: vxl-breathe 3.2s ease-in-out infinite; }
.vx-loader::before, .cz-load:is(:has(> video:only-child))::before, .sim-load:is(:has(> .sim-planet:only-child))::before {
  content: ''; width: 132px; aspect-ratio: 508 / 431; background: url(/verse/logo-512.png) center / contain no-repeat; }
.vx-loader::after, .cz-load:is(:has(> video:only-child))::after, .sim-load:is(:has(> .sim-planet:only-child))::after {
  content: attr(data-say); width: 150px; margin-top: 22px; padding-top: 14px; text-align: center; color: var(--faint, #6f6c77); font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  background: linear-gradient(var(--vx-accent), var(--vx-accent)) right top / 0 2px no-repeat, linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) center top / 100% 1px no-repeat;
  animation: vxl-line 1.9s ease-in-out infinite; }
.cz-load:is(:has(> video:only-child))::after, .sim-load:is(:has(> .sim-planet:only-child))::after { content: '\05E0\05DB\05E0\05E1\05D9\05DD  \05DC\05E9\05DC\05D5\05DE\05D9\05D5\05D5\05E8\05E1'; }
.cz-load:is(:has(> video:only-child)) > video, .sim-load:is(:has(> .sim-planet:only-child)) > .sim-planet { display: none; }
#app > .vx-loader { margin-top: 16px; }   /* where the journeys' own loaders stand (their page's top padding), so nothing jumps */
@keyframes vxl-breathe { 0%, 100% { --vxl-g: .55; } 50% { --vxl-g: 1; } }
@keyframes vxl-line {
  0% { background-size: 0 2px, 100% 1px; background-position: right top, center top; }
  60% { background-size: 100% 2px, 100% 1px; background-position: right top, center top; }
  100% { background-size: 0 2px, 100% 1px; background-position: left top, center top; } }
@media (prefers-reduced-motion: reduce) { .vx-loader, .vx-loader::after { animation: none; } }

/* ---- less glow (item 11, his screenshot of "עקבו אחרי שלושתם"): the main buttons' halo is --vx-glow (top of this file); here the
   other orange halos on buttons and cards come down too. Glow stays where it means something: the logo, the app icon, the game ---- */
.rq-go { box-shadow: 0 4px 12px -8px rgba(255, 106, 31, .5); }
.si button { box-shadow: none; }
.nk-cam { box-shadow: 0 0 0 4px #0b0b0e; }
.nc-card .nc-yes { box-shadow: 0 4px 12px -8px rgba(255, 106, 31, .4); }
.cd-ic { box-shadow: none; }
.vx-sheet.signin .vx-reasons .hl .vx-round { box-shadow: none; }
.rm-face .vx-av { box-shadow: 0 0 12px rgba(255, 106, 31, .16); }
.ab-c.on .vx-av { box-shadow: none; }
.idea.hl { box-shadow: 0 0 0 2px rgba(255, 106, 31, .1); }
.gfeat { box-shadow: none; }
@keyframes vp-pulse { 0%, 100% { box-shadow: var(--vx-glow); } 50% { box-shadow: 0 0 0 7px rgba(255, 106, 31, .18), 0 6px 16px -8px rgba(255, 106, 31, .4); } }

/* ---- the new top bar, option A (item 10, mockup r4 topbar-a; html.nb = his eyes only, gates.js NEXT_BAR): the logo smaller and
   calmer, search, the bell in the search field's own style, and their round picture with a tiny passport on its corner instead
   of the "אזרח" box (pages.js renderTop). The passport opens the status window; a resident's is greyed (not theirs yet) ---- */
.nb .top .brand .brand-logo { filter: none; }
.nb .vx-top .icon-btn { background: var(--card); border-color: var(--line2); }
.nb .vx-top .me-wrap { position: relative; display: inline-flex; flex: none; }
.nb .vx-top .me-btn { border-color: var(--line2); }
.me-pass { position: absolute; bottom: -3px; inset-inline-start: -4px; width: 14px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.me-pass img { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 0 0 2px var(--bg, #0b0b0e); }
.me-pass::before { content: ''; position: absolute; inset: -3px -9px -9px -2px; }   /* a bigger target, grown outward only - the picture's middle stays the menu's */
.me-pass.not-yet img, .mm-status.not-yet img { filter: grayscale(1) brightness(.8); opacity: .75; }
@media (max-width: 760px) {
  .nb .top .brand .brand-logo { width: 42px; margin-block: -4px; }
  .nb .vx-top { gap: 8px; }
  .nb .vx-top .me-wrap { margin-inline-start: 2px; }
}
/* its row in the menu behind the picture: the same passport, the status window one tap away */
.mm-status { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; margin-bottom: 4px; border: 0; border-radius: 12px; background: none; color: inherit;
  font: inherit; font-weight: 600; font-size: .95rem; text-align: start; cursor: pointer; }
.mm-status:hover { background: rgba(255, 255, 255, .06); }
.mm-status img { width: 15px; height: auto; flex: none; margin-inline: 2px; border-radius: 2px; }
.mm-status .mm-l { flex: 1; }
.mm-status small { font-size: .78rem; color: rgba(255, 255, 255, .5); font-weight: 700; }

/* ---- the profile picture's frame (item 9, mockup r4 crop): a sheet from the bottom over the dimmed screen - the photo under the
   round frame, a small live preview of the round picture by the title, the zoom (out below "cover" too), save / cancel side by side ---- */
.crop { background: rgba(4, 4, 6, .72); place-items: end center; padding: 0; overflow: hidden; opacity: 0; transition: opacity .2s; }
.crop.open { opacity: 1; }
.crop-in { position: relative; width: min(480px, 100%); max-height: 100%; overflow-y: auto; background: #141418; border: 1px solid var(--vx-glass-line); border-bottom: 0;
  border-radius: 26px 26px 0 0; padding: 22px 20px calc(16px + env(safe-area-inset-bottom)); transform: translateY(28px); transition: transform .28s cubic-bezier(.2, 1.1, .4, 1); }
.crop.open .crop-in { transform: none; }
.crop-in::before { content: ''; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.crop-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px; padding-inline: 66px; }
.crop .crop-head .vx-h { font-size: 1.3rem; }
.crop-pv { position: absolute; inset-inline-start: 0; top: 0; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #0b0b0e; border: 1.5px solid rgba(255, 255, 255, .22); }
.crop-pv img { position: absolute; max-width: none; pointer-events: none; }
.crop-stage { width: min(72vw, 300px); margin: 12px auto 16px; border-radius: 20px; background: #0b0b0e; }
.crop-zoom { width: min(80vw, 330px); margin: 0 auto 6px; }
.crop .crop-in > .vx-sub { margin: 0 0 16px; font-size: .86rem; }
.crop-btns { display: flex; gap: 10px; }
.crop-btns .vx-btn { flex: 1; height: 52px; }

/* ========== round 5 (his notes 2026-11-08): citizenship, the passport, the top bar ========== */
/* ---- the new top bar before citizenship: an EMPTY passport (an outline, no planet) with a small orange dot on the picture,
   and the menu row says it in words with the way to get one (pages.js NO_PASS) ---- */
.me-pass .no-pass { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 0 0 2px var(--bg, #0b0b0e); }
.me-pass-dot { position: absolute; top: -3px; inset-inline-start: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--vx-accent); box-shadow: 0 0 0 2px var(--bg, #0b0b0e); }
.mm-status .no-pass { width: 15px; height: auto; flex: none; margin-inline: 2px; }
.mm-status.not-yet { text-decoration: none; }
.mm-get { font-style: normal; font-size: .8rem; font-weight: 800; color: var(--vx-accent); padding: 4px 11px 5px; border-radius: 99px; border: 1px solid rgba(255, 106, 31, .5); white-space: nowrap; }

/* ---- the check-in / booth bottom bar (his screenshot: the room above "המשך" was larger than below): the bar itself is solid with
   the same padding above and below; the fade that lets the page slip under it sits on top of the bar, outside it ---- */
.cz-dock { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
.cz-dock::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.cz-dock:has(> .cz-skips:last-child) { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }   /* the skip links carry 6px of their own */
.cz-dock .vx-write { margin-bottom: 0; }

/* ---- "דרכון בבקשה": their passport as a card (a burgundy booklet, bound on the right), slid up into his window or tapped ---- */
.cz-hand { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 8px; }
.cz-handpp { position: relative; width: 96px; aspect-ratio: 96 / 134; padding: 14px 8px 12px; border: 0; border-radius: 9px 3px 3px 9px; color: #c9a45c;
  background: linear-gradient(to left, rgba(0, 0, 0, .35), transparent 11%), linear-gradient(160deg, rgba(255, 255, 255, .07), transparent 45%), #4a1620;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  transform: rotate(-4deg); transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  font: inherit; animation: cz-hand-nudge 1.5s ease-in-out .9s 2; }
.cz-handpp b { font-size: .95rem; font-weight: 900; letter-spacing: .02em; }
.cz-handpp svg { width: 40px; height: 40px; opacity: .9; }
.cz-handpp small { font-size: .55rem; font-weight: 800; letter-spacing: .18em; direction: ltr; }
.cz-handpp:focus-visible { outline: 2px solid var(--vx-accent); outline-offset: 4px; }
.cz-handpp.drag { transition: none; cursor: grabbing; animation: none; }
.cz-handpp.in { animation: none; opacity: 0; transition: transform .48s cubic-bezier(.45, 0, .3, 1), opacity .48s cubic-bezier(.9, 0, 1, 1); }
.cz-hand-hint { margin: 0; font-size: .84rem; color: var(--dim); text-align: center; transition: opacity .2s; }
.cz-hand-hint.gone { opacity: 0; }
@keyframes cz-hand-nudge { 0%, 100% { transform: rotate(-4deg); } 50% { transform: translateY(-9px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .cz-handpp { animation: none; } }

/* ---- the passport: the entry stamp on the facing page of the open booklet, under the fold - on the data page it covered the
   status and the machine-readable lines; the page fades into the dark below the stamp. The photo is laminated: a holographic
   film with fine rings, a gloss across it, a thin clear edge, and a small ghost copy of the photo on the page ---- */
.cz-book { position: relative; }
.cz-book .cz-pp { border-radius: 10px 10px 0 0; z-index: 1; }
.cz-pp-next { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 100 / 31; overflow: hidden; margin-top: 0;
  background: url(/verse/art/citizen-visa.jpg) center 80% / 100% auto; -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
.cz-pp-next::before { content: ''; position: absolute; inset: 0 0 auto; height: 4cqw; background: linear-gradient(rgba(45, 30, 20, .32), transparent); }   /* the fold */
.cz-pp-next .cz-pp-stamp { right: 13cqw; top: 2.6cqw; }
.cz-pp-photo { box-shadow: 0 0 0 .25cqw rgba(255, 255, 255, .55), 0 .3cqw .9cqw rgba(40, 25, 10, .25); }
.cz-pp-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .3) 41%, rgba(255, 255, 255, .07) 49%, rgba(255, 255, 255, 0) 57%),
    repeating-radial-gradient(circle at 16% 112%, rgba(255, 255, 255, 0) 0 .9cqw, rgba(190, 225, 255, .1) .9cqw 1.1cqw),
    repeating-radial-gradient(circle at 104% -6%, rgba(255, 255, 255, 0) 0 1.3cqw, rgba(255, 215, 240, .08) 1.3cqw 1.5cqw),
    linear-gradient(135deg, rgba(255, 140, 200, .12), rgba(140, 220, 255, .12) 35%, rgba(255, 235, 140, .1) 65%, rgba(170, 140, 255, .12)); }
.cz-pp-ghost { position: absolute; left: 33cqw; top: 11.6cqw; width: 5.6cqw; height: 7.6cqw; overflow: hidden; opacity: .22; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); }
.cz-pp-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- "עכשיו בחרדות" on the home (plan tz-home: the phone = his pick A; the computer = D1, his yes 2026-11-08 - verse/tzhome.js) ---------- */
/* one card: ח24's lead as a short WIDE banner with the headline over the picture, "מה אומרים בציפציפ" with each post's likes and
   comments on the side, two quiet links. On a computer it shares a row with the card beside it (.tzh-row): "זכות הדיבור" for the
   signed in, the citizenship card for the signed out (his "on desktop it's terrible and nothing like the design") */
.tzh-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }   /* minmax: a one-line row never widens the phone */
.tzh-row > .signin-card { margin-top: 0; }
#tz-home:empty, #tz-side:empty { display: none; }
@media (min-width: 900px) {
  .tzh-row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
  .tzh-row:has(> #tz-home:empty) { grid-template-columns: 1fr; }
  .tzh-row > .signin-card { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; align-content: center; gap: 20px; }
  .tzh-row > .signin-card > div { flex: none; min-width: 0; } .tzh-row .sc-gets { gap: 14px 12px; }
  #tz-home, #tz-side { display: flex; } #tz-home > *, #tz-side > * { flex: 1; }
}
.tzh-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--vx-r2, 22px); padding: 16px; display: flex; flex-direction: column; height: 100%; }
.tzh-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tzh-h h2 { font-size: 1.15rem; font-weight: 900; }
.tzh-h small { color: var(--dim); font-size: .82rem; margin-inline-start: auto; }
.tzh-live { width: 8px; height: 8px; border-radius: 50%; background: #e5322d; box-shadow: 0 0 0 3px rgba(229, 50, 45, .18); flex: none; }
/* the banner: the picture fills it, the words sit over a dark gradient on the reading side, ח24's logo in the far corner */
.tzh-lead { position: relative; display: block; height: 186px; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #6b1210, #2a0807 70%, #140404); border: 1px solid var(--line); }
.tzh-lead .tzh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tzh-lead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(8,8,10,.94) 0%, rgba(8,8,10,.78) 42%, rgba(8,8,10,.1) 78%); }
.tzh-logo { position: absolute; top: 10px; left: 10px; z-index: 2; width: 92px; height: auto; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.tzh-lt { position: absolute; z-index: 2; inset: 0 0 0 auto; width: 64%; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; }
.tzh-lt em { font-style: normal; align-self: flex-start; background: #c8211c; color: #fff; font-size: .74rem; font-weight: 800; padding: 1px 8px; border-radius: 6px; }
.tzh-lt b { font-weight: 900; font-size: 1.08rem; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.tzh-lt small { color: rgba(255,255,255,.72); font-size: .76rem; } .tzh-lt small span { white-space: nowrap; }
/* a phone: the words take more of the banner */
@media (max-width: 600px) { .tzh-lead { height: 196px; } .tzh-lt { width: 80%; padding: 10px 12px; } .tzh-lt b { font-size: 1rem; } .tzh-logo { width: 74px; }
  .tzh-posts .tzh-post { flex-wrap: wrap; row-gap: 4px; } .tzh-post .tzh-n { flex-basis: 100%; padding-inline-start: 50px; align-self: auto; }
  .tzh-lead::after { background: linear-gradient(to left, rgba(8,8,10,.95) 0%, rgba(8,8,10,.82) 55%, rgba(8,8,10,.15) 95%); } }
@media (min-width: 900px) { .tzh-lead { height: 210px; } .tzh-lt { width: 58%; } .tzh-lt b { font-size: 1.22rem; } .tzh-logo { width: 110px; } }
.tzh-sub { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; color: inherit; text-decoration: none; }
.tzh-sub .tzh-go { margin-inline-start: auto; color: var(--dim); font-weight: 700; } .tzh-sub:hover .tzh-go { color: var(--vx-accent); }
.tzh-sub img { width: 30px; height: auto; }
.tzh-sub b { font-size: .98rem; font-weight: 800; }
/* ציפציפ's own word in its colours: ציפ white, ציפ orange (his note) */
.tzw { font-family: Rubik, Heebo, sans-serif; font-weight: 900; } .tzw i { font-style: normal; color: #ff7a1f; }
.tzh-posts { flex: 1; }
.tzh-post { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.tzh-post:first-child { border-top: 0; }
.tzh-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: var(--card2, #1c1c22); }
.tzh-pb { min-width: 0; flex: 1; }
.tzh-l1 { display: flex; align-items: baseline; gap: 8px; }
.tzh-l1 b { font-weight: 800; font-size: .9rem; }
.tzh-l1 time { color: var(--dim); font-size: .76rem; }
.tzh-pb p { margin-top: 2px; font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* what the post is about (his note 2026-11-09): the reposted post with its writer's face, or the news it shares - one line */
.tzh-q { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 5px 9px; color: var(--dim); font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(2.8em + 12px); }
.tzh-q b { color: var(--text, #fff); font-weight: 700; margin-inline-end: 5px; } .tzh-q > img, .tzh-q > span.tzh-qf, .tzh-q > svg { vertical-align: -5px; margin-inline-end: 5px; }
.tzh-ini { display: inline-grid; place-items: center; font-weight: 900; color: #fff; background: #3a3a44; font-size: .9em; }
.tzh-qf { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: top; display: inline-block; } .tzh-lk svg { width: 15px; height: 15px; }
/* the post's likes (the verse's planet) and comments, on the far side like the design */
.tzh-n { display: flex; gap: 12px; flex: none; align-self: center; color: var(--dim); font-size: .8rem; padding-inline-start: 6px; }
.tzh-n span { display: inline-flex; align-items: center; gap: 4px; } .tzh-n svg { width: 17px; height: 17px; --pl-fill: var(--card); }
.tzh-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tzh-links a { color: var(--dim); font-size: .88rem; font-weight: 700; }
.tzh-links a:hover { color: var(--vx-accent); }
/* the card beside it, signed in: "זכות הדיבור שלך" for a citizen, the way to a passport for a resident without one */
.tzh-side { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px; border-radius: var(--vx-r2, 22px); border: 1px solid var(--line);
  background: linear-gradient(140deg, color-mix(in srgb, var(--vx-accent) 22%, var(--card)), var(--card)); }
.tzh-sh { display: flex; align-items: center; gap: 10px; margin-bottom: auto; }
.tzh-mk { flex: none; display: flex; } .tzh-mk img { width: 36px; height: auto; } .tzh-mk:hover { transform: scale(1.06); } .tzh-sh h2 { font-size: 1.45rem; font-weight: 900; line-height: 1.15; }
.tzh-chip { margin-inline-start: auto; border: 1px solid var(--line); border-radius: 10px; padding: 3px 10px; font-size: .82rem; font-weight: 700; color: var(--text, #fff); }
.tzh-sp { color: var(--dim); line-height: 1.55; flex: 1; }
.tzh-me { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.tzh-me .tzh-meav { width: 64px; height: 64px; grid-row: span 2; border: 3px solid var(--vx-accent); }
.tzh-me b { font-size: 1.1rem; font-weight: 900; align-self: end; } .tzh-me span { color: var(--dim); font-size: .88rem; align-self: start; }
.tzh-ask { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; align-content: center; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.32); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.tzh-ask img { width: 96px; grid-row: span 2; border-radius: 4px; }
.tzh-ask b { font-weight: 800; font-size: 1.05rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tzh-ask small { color: var(--dim); font-size: .9rem; margin-top: 4px; }
.tzh-side .vx-btn { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.tzh-mine { color: var(--dim); font-size: .84rem; text-align: center; margin-top: auto; }
/* the story as a ציפציפ thread (his notes 2026-11-09: a face on every post, clear what they answer): ח24's post with the story's
   picture, the residents' answers under it joined by the thread line */
.tzh-th { display: flex; flex-direction: column; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--line); padding: 4px 12px; }
.tzh-tp, .tzh-tk { position: relative; display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; padding: 10px 0; }
.tzh-tp .tzh-face, .tzh-tk .tzh-face { width: 36px; height: 36px; position: relative; z-index: 1; }
.tzh-th > a + a::before { content: ''; position: absolute; top: -10px; height: 20px; inset-inline-start: 17px; width: 2px; background: var(--line2, rgba(255,255,255,.18)); }
.tzh-tb, .tzh-tk > span { min-width: 0; flex: 1; display: block; }
.tzh-th .tzh-l1 b { font-size: .86rem; } .tzh-th .tzh-l1 time { font-size: .74rem; }
.tzh-th p { font-size: .88rem; line-height: 1.42; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tzh-tp:hover p, .tzh-tk:hover p { color: var(--vx-accent); }
.tzh-ta { display: flex; gap: 8px; align-items: center; margin-top: 7px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.25); }
.tzh-ta img { width: 72px; height: 54px; object-fit: cover; flex: none; }
.tzh-ta span { min-width: 0; padding-block: 4px; padding-inline-end: 8px; font-size: .8rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tzh-ta small { color: #ff5a52; font-weight: 800; margin-inline-end: 6px; }
.tzh-side > .tzh-sp + .vx-btn { margin-bottom: auto; }

/* "זכויות דיבור" on the passport page (plan tz-perks, his pick A): a card like the simulation row, a row per site */
.cz-rt { border-radius: 14px; border: 1px solid var(--line2); background: var(--card); padding: 12px 12px 4px; text-align: right; }
.cz-rt h3 { margin: 0 2px 4px; font-size: .95rem; font-weight: 900; }
.cz-rt-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: var(--text); text-decoration: none; }
.cz-rt-row + .cz-rt-row { border-top: 1px solid var(--line2); }
.cz-rt-row img { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 50%; }
.cz-rt-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.cz-rt-row b { font-size: .95rem; font-weight: 800; }
.cz-rt-row small { color: var(--dim); font-size: .8rem; }
.cz-rt-row > svg { width: 18px; height: 18px; flex: none; color: var(--dim); }
/* before the passport: the same right, one line on the boarding pass screen */
.cz-rt-before { display: flex; align-items: center; gap: 8px; margin: 12px 2px; color: var(--dim); font-size: .86rem; line-height: 1.45; text-align: right; }
.cz-rt-before img { width: 26px; height: 26px; flex: none; object-fit: contain; }
.cz-rt-before b { color: var(--text); font-weight: 800; }

/* ---------- the sponsored banner ("ממומן", verse/ads.js - his OK on mockups B1/P1/D1/W1, 2026-11-09) ---------- */
/* the slot is the site's, the same for every sponsor: a label row nobody can miss, then the sponsor's own picture */
.ad-slot:empty { display: none; }
.ad { margin-top: 22px; padding: 10px 10px 10px; border-radius: var(--vx-r2, 22px); background: var(--card); border: 1px solid var(--line); }
.ad-h { display: flex; align-items: center; gap: 10px; padding: 0 6px 8px; }
.ad-by { font-weight: 800; font-size: .9rem; padding-inline-end: 10px; border-inline-end: 1px solid var(--line); }
.ad-tag { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; color: #e6e6ea;
  background: rgba(255, 255, 255, .14); padding: 2px 10px 2px 8px; border-radius: 999px; }
.ad-tag svg { width: 15px; height: 15px; }
.ad-pic { display: block; border-radius: 14px; overflow: hidden; background: #e9dcc0; }
.ad-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }   /* a regular ad strip (his note 2026-11-09): ~320x100 on a phone */
@media (min-width: 700px) { .ad-pic img { aspect-ratio: 1600 / 234; } }   /* ~728x90 on a computer */
.ad-pic:hover img { filter: brightness(1.04); }
/* the coupon window (W1): the sponsor's paper and red inside the sheet, the dark site dimmed behind it */
.vx-sheet.adc-sheet { background: #f4ecdc; color: #3a1d0e; border-color: #c8962e; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vx-sheet.adc-sheet .grab { background: rgba(58, 29, 14, .3); }
.adc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.adc-tag { font-size: .78rem; font-weight: 700; color: #6b4a33; border: 1px solid rgba(58, 29, 14, .25); background: #fbf6ea; border-radius: 999px; padding: 2px 12px; }
.adc-logo { width: min(220px, 60%); height: auto; border-radius: 10px; }
.adc-t { font-size: 1.55rem; font-weight: 900; line-height: 1.2; color: #8a1c14; }
.adc-ticket { position: relative; width: 100%; border: 2px dashed #8a1c14; border-radius: 14px; padding: 14px 12px 16px; background: #fbf6ea; }
.adc-code { display: block; min-height: 3.4rem; font-size: 3.2rem; font-weight: 900; line-height: 1.05; color: #6e140e; letter-spacing: .02em; }
.adc-ticket.locked .adc-code::before { content: 'קופון'; filter: blur(9px); opacity: .7; }
.adc-lock { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; color: #3a1d0e; }
.adc-lock svg { width: 100%; height: 100%; }
.adc-ticket p { margin-top: 6px; font-weight: 800; font-size: 1.02rem; }
.adc-wait { display: inline-block; width: 34px; height: 34px; margin-top: 10px; border-radius: 50%; border: 3px solid rgba(138, 28, 20, .25); border-top-color: #8a1c14; animation: adc-spin .8s linear infinite; }
@keyframes adc-spin { to { transform: rotate(360deg); } }
.adc-why { font-weight: 700; }
.adc-go { display: block; width: 100%; border: 2px solid #c8962e; border-radius: 999px; padding: 13px 18px; background: #8a1c14; color: #fff; font: inherit; font-size: 1.08rem;
  font-weight: 900; text-align: center; text-decoration: none; cursor: pointer; }
.adc-go:disabled { opacity: .55; cursor: default; }
.adc-go:not(:disabled):hover { background: #6e140e; }
.adc-fine { font-size: .78rem; color: #6b4a33; }
.adc-more { font-size: .88rem; font-weight: 700; color: #8a1c14; }
.adc .vx-brand { color: inherit; } .adc .vx-brand b { color: #c8501c; }   /* the brand's two colours, readable on the paper */

/* ---------- שיאי היום, round 2 (his approval 2026-11-09, scripts/v2-design/records-2.mjs): the home's slim rows ---------- */
.rec-rows { display: grid; gap: 10px; }
.rec-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.25fr) 48px; align-items: center; gap: 12px; padding: 6px 6px 6px 10px;
  border-radius: 18px; background: var(--card, #141418); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .15s; }
.rec-row:hover { border-color: color-mix(in srgb, var(--vx-accent) 55%, transparent); }
.rec-row:active { transform: scale(.99); }
.rr-pic { width: 88px; height: 64px; border-radius: 13px; overflow: hidden; background: var(--card2, #1b1b20); }
.rr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-game { font-weight: 800; font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rr-lead .vx-av { width: 44px; height: 44px; flex: none; border: 2px solid var(--vx-accent); }
.rr-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rr-who b { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-who span, .rp-who span { color: var(--dim); font-size: .8rem; white-space: nowrap; }
.rr-who i, .rp-who i { font-style: normal; font-weight: 900; font-size: 1.15rem; color: var(--vx-accent); }
.rr-none { color: var(--dim); font-size: .86rem; }
.rr-go { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--vx-accent); border: 1.5px solid color-mix(in srgb, var(--vx-accent) 75%, transparent); justify-self: end; }
.rr-go svg { width: 18px; height: 18px; transform: scaleX(-1); }   /* "play" points the way Hebrew reads - to the left */
.rec-all { margin-top: 12px; height: 48px; }
@media (max-width: 899px) {
  .rec-row:nth-child(n+5) { display: none; }   /* a phone: 4 games, then the page */
  .rec-row { grid-template-columns: 64px minmax(0, .85fr) minmax(0, 1.45fr) 34px; gap: 8px; padding: 6px 6px 6px 8px; }
  .rr-pic { width: 64px; height: 52px; }
  .rr-game { font-size: .92rem; }
  .rr-lead { gap: 7px; } .rr-lead .vx-av { width: 34px; height: 34px; }
  .rr-who b { font-size: .82rem; } .rr-who span { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; } .rr-who i { font-size: 1.02rem; }
  .rr-go { width: 34px; height: 34px; } .rr-go svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) { .rr-game { font-size: .86rem; } .rr-lead .vx-av { width: 32px; height: 32px; } .rec-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr) 34px; } .rr-pic { width: 64px; height: 50px; } }
@media (min-width: 900px) {
  .rec-rows { grid-template-columns: 1fr 1fr; gap: 12px 14px; }   /* a computer: every game, two columns, nothing to scroll */
  .rec-all { display: none; }
}

/* ---------- /records: the full board ---------- */
.rec-page { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.rp-head h1 { font-size: 2.2rem; font-weight: 900; letter-spacing: -.02em; }
.rp-live { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: .92rem; margin-top: 6px; min-height: 1.4em; }
.rp-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-accent); box-shadow: 0 0 10px var(--vx-accent); }
.rp-list { display: grid; gap: 14px; margin-top: 22px; }
.rp-card { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 16px; align-items: stretch; padding: 12px; border-radius: 22px;
  background: var(--card, #141418); border: 1px solid color-mix(in srgb, var(--vx-accent) 28%, var(--line)); }
.rp-pic { position: relative; border-radius: 16px; overflow: hidden; min-height: 150px; background: var(--card2, #1b1b20); color: #fff; }
.rp-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-pic b { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 10px 9px; text-align: center; font-weight: 900; font-size: 1rem; line-height: 1.2;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.rp-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: center; }
.rp-top li { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.rp-top li.me .rp-who b { color: var(--vx-accent); }
.rp-top .vx-av { width: 40px; height: 40px; }
.rp-place { width: 26px; height: 26px; display: grid; place-items: center; font-weight: 900; font-size: .9rem; color: var(--dim); }
.rp-place.p1 { color: #ffc94a; } .rp-place.p1 i { width: 24px; height: 24px; display: block; }
.rp-place.p2 { color: #d9dde6; } .rp-place.p3 { color: #e0975a; }
.rp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rp-who b { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-empty { display: block !important; color: var(--dim); font-size: .9rem; }
.rp-side { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding-inline-start: 16px; border-inline-start: 1px solid var(--line); text-align: center; }
.rp-n { color: var(--dim); font-size: .85rem; }
.rp-me { display: flex; flex-direction: column; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, transparent); }
.rp-me b { font-size: 1.8rem; font-weight: 900; color: var(--vx-accent); line-height: 1.1; }
.rp-me small { color: var(--dim); font-size: .78rem; }
.rp-go { height: 44px; font-size: .92rem; padding: 0 12px; }
@media (min-width: 1100px) { .rp-list { grid-template-columns: 1fr 1fr; } .rp-card { grid-template-columns: 140px minmax(0, 1fr) 150px; } }
@media (max-width: 640px) {
  .rec-page { padding: 20px 14px 40px; }
  .rp-head h1 { font-size: 1.8rem; }
  .rp-card { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .rp-pic { min-height: 132px; }
  .rp-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 0 0; border-inline-start: 0; border-top: 1px solid var(--line); text-align: right; }
  .rp-me { flex-direction: row; align-items: baseline; gap: 6px; padding: 4px 10px; }
  .rp-me b { font-size: 1.2rem; }
  .rp-go { flex: 1 0 100%; }
}

/* ---------- a computer: the rows that move sideways get round arrows, never a grey scrollbar (his note 2026-11-09) ---------- */
@media (hover: hover) and (pointer: fine) {
  .row, .srow, .grow, .yv-picks, .yv-st, .rings { scrollbar-width: none !important; }
  .row::-webkit-scrollbar, .srow::-webkit-scrollbar, .grow::-webkit-scrollbar, .yv-picks::-webkit-scrollbar, .yv-st::-webkit-scrollbar, .rings::-webkit-scrollbar { display: none; }
}
.vx-rowhost { position: relative; }
.vx-arrow { position: absolute; top: 50%; z-index: 4; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center;
  color: var(--vx-accent); background: rgba(14, 14, 18, .82); border: 1.5px solid color-mix(in srgb, var(--vx-accent) 80%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); cursor: pointer; transition: opacity .2s, transform .15s; }
.vx-arrow:hover { transform: scale(1.06); }
.vx-arrow svg { width: 22px; height: 22px; }
.vx-arrow.next { left: -22px; } .vx-arrow.prev { right: -22px; }   /* Hebrew: what comes next is on the left */
.vx-arrow.off { opacity: 0; pointer-events: none; }
@media (max-width: 1260px) { .vx-arrow.next { left: 4px; } .vx-arrow.prev { right: 4px; } }

/* ---------- "מה הלאה" on a computer: a balanced grid, every tile with a picture (mockup R5, 2026-11-09) ---------- */
.cd-art { display: none; }
@media (min-width: 900px) {
  .cmy-band .cando { grid-template-columns: repeat(12, 1fr); gap: 14px; }
  .cmy-band .cd-2, .cmy-band .cd-3 { display: contents; }
  .cmy-band .cd-hero, .cmy-band .cd-pack { grid-column: span 4; min-height: 176px; }
  .cmy-band .cd-2 .cd-t:first-child { grid-column: span 4; }
  .cmy-band .cd-2 .cd-t + .cd-t, .cmy-band .cd-3 .cd-t { grid-column: span 3; }
  .cmy-band .cd-pack { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px; }
  .cmy-band .cd-pack > i { display: none; }
  .cmy-band .cd-t { position: relative; overflow: hidden; display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; min-height: 176px; }
  .cmy-band .cd-t b { font-size: 1.05rem !important; position: relative; } .cmy-band .cd-t small { font-size: .84rem !important; max-width: 58%; position: relative; }
  .cmy-band .cd-art { display: block; position: absolute; left: 10px; bottom: 0; height: 84%; max-width: 46%; object-fit: contain; object-position: bottom; pointer-events: none; }
  .cmy-band .cd-art.round { height: auto; width: 92px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; bottom: 16px; left: 16px; border: 2px solid var(--vx-accent); }
  .cmy-band .cd-faces { height: auto; } .cmy-band .cd-faces img { width: 64px; height: 64px; margin-inline-start: -16px; border-width: 2.5px; }
  .cmy-band .cd-art.cover { height: 58%; width: 42%; max-width: none; object-fit: cover; border-radius: 14px; bottom: 14px; left: 14px; }
}

/* ---------- "הכי נצפים" (his ask 2026-11-10, mockups scripts/v2-design/top-videos.mjs T1/T2): the top 10, a big outlined rank
   beside each poster (on its right - Hebrew), segmented tabs beside the title on a computer, under it on a phone ---------- */
.top10 .sec-h { align-items: flex-start; }
.t10-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.top10 .sec-h > a { padding-top: 8px; white-space: nowrap; }
.t10-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card, #141418); border: 1px solid var(--line); }
.t10-tabs button { height: 34px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--dim); background: none; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.t10-tabs button:hover { color: var(--text); }
.t10-tabs button.on { background: var(--vx-accent); color: #111; }
.t10-row { grid-auto-columns: 214px; }
.t10 { position: relative; display: flex; align-items: flex-start; text-align: right; scroll-snap-align: start; color: var(--text); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.t10-n { flex: none; width: 70px; margin-inline-end: -18px; padding-top: 10px; text-align: center; font-size: 132px; font-weight: 900; line-height: .9; letter-spacing: -.05em;
  color: rgba(10, 10, 12, .9); -webkit-text-stroke: 3px var(--vx-accent); paint-order: stroke fill; user-select: none; }
.t10:nth-child(10) .t10-n { width: 100px; letter-spacing: -.14em; }   /* "10" */
.t10-c { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.t10 .thumb { aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--card2, #1b1b20); box-shadow: 8px 0 18px rgba(0, 0, 0, .6); transition: transform .15s; }
.t10 .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t10:hover .thumb { transform: translateY(-3px); }
.t10 .t { font-weight: 800; font-size: .95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .t10-row { grid-auto-columns: 47%; gap: 10px; }
  .t10-n { width: 48px; margin-inline-end: -12px; font-size: 94px; -webkit-text-stroke-width: 2.5px; }
  .t10:nth-child(10) .t10-n { width: 72px; }
  .t10-tabs button { padding: 0 14px; }
}

/* ---------- הארכיון /archive (his ask 2026-11-10, mockups scripts/v2-design/archive.mjs A1 / A3 / A4): newest first, month
   headers pinned while scrolling, a timeline (a column on the right on a computer, two rows on a phone), the caption on every post ---------- */
.ar-page { max-width: 1320px; margin: 0 auto; padding: 24px 18px 80px; }
@media (max-width: 640px) { .ar-page { padding: 14px 14px 60px; } }
.ar-wait, .ar-empty { color: var(--dim); text-align: center; padding: 60px 10px; }
.ar-head h1 { font-size: 2.3rem; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.ar-head p { color: var(--dim); margin: 6px 0 0; font-size: 1rem; max-width: 640px; line-height: 1.5; }
.ar-search { position: relative; display: block; margin: 18px 0 12px; }
.ar-search input { width: 100%; height: 52px; border-radius: 16px; border: 1px solid var(--line2, rgba(255,255,255,.16)); background: var(--card); color: var(--text);
  font: inherit; font-size: 1rem; padding-inline: 48px 16px; outline: none; }
.ar-search input:focus { border-color: color-mix(in srgb, var(--vx-accent) 65%, transparent); }
.ar-search svg { position: absolute; top: 15px; inset-inline-start: 16px; width: 22px; height: 22px; color: var(--dim); }
.ar-tags, .ar-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; align-items: center; }
.ar-tags::-webkit-scrollbar, .ar-chips::-webkit-scrollbar { display: none; }
.ar-tags > span { flex: none; font-weight: 800; color: var(--text); font-size: .92rem; }
.ar-tags button, .ar-chips button { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16)); background: var(--card);
  color: var(--text); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.ar-tags button { color: #d9d6de; }
.ar-chips { margin-top: 10px; }
.ar-chips button.on { border-color: var(--vx-accent); color: var(--vx-accent); background: color-mix(in srgb, var(--vx-accent) 10%, transparent); }
.ar-sep { flex: none; width: 1px; height: 22px; background: var(--line2, rgba(255,255,255,.16)); margin: 0 4px; }
.ar-body { display: block; margin-top: 16px; }
.ar-count { color: var(--dim); font-size: .9rem; margin: 2px 2px 10px; }

/* the timeline: on a phone two rows above the list */
.ar-time { border: 1px solid var(--line2, rgba(255,255,255,.16)); border-radius: 18px; background: var(--card); padding: 6px; margin-bottom: 14px; }
.ar-t-h { display: none; }
.ar-years, .ar-months { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ar-years::-webkit-scrollbar, .ar-months::-webkit-scrollbar { display: none; }
.ar-months { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.ar-years button, .ar-months button { flex: none; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--dim);
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.ar-years button.on { color: var(--vx-accent); border-color: var(--vx-accent); }
.ar-months button.on { color: #fff; background: var(--vx-accent); }
.ar-months .l { display: none; }

/* a month: its header pinned under the top bar while it scrolls by - tap it to jump anywhere */
.ar-sec { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.ar-mh { position: sticky; top: var(--ar-top, 64px); z-index: 6; display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 12px; padding: 12px 16px;
  border-radius: 16px; border: 1px solid var(--line2, rgba(255,255,255,.16)); background: rgba(16, 16, 20, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.ar-mh b { font-size: 1.45rem; font-weight: 900; letter-spacing: -.01em; }
.ar-mh span { color: var(--dim); font-size: .9rem; margin-inline-start: auto; }
.ar-mh svg { width: 20px; height: 20px; color: var(--vx-accent); flex: none; }
.ar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }

/* a post */
.ar-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.ar-cover { position: relative; aspect-ratio: 4 / 5; background: var(--card2, #1d1d23); }
.ar-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-card.in .ar-cover img { filter: saturate(.85); }
.ar-in, .ar-n { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; background: rgba(11, 11, 14, .78); }
.ar-in { color: var(--vx-accent-2, #ff8a3d); border: 1.5px solid var(--vx-accent); }
.ar-meta { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; font-size: .8rem; color: var(--dim); font-weight: 600; }
.ar-meta span { display: inline-flex; align-items: center; gap: 3px; }
.ar-meta svg { width: 13px; height: 13px; }
.ar-date { color: var(--text); font-weight: 800; margin-inline-end: auto; }
.ar-cap { margin: 6px 12px 0; font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; min-height: 2.8em; direction: rtl; text-align: right; }
.ar-cast { display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; min-width: 0; }
.ar-cast .vx-av { width: 24px; height: 24px; flex: none; border: 1.5px solid var(--vx-accent); margin-inline-start: -8px; }
.ar-cast .vx-av:first-child { margin-inline-start: 0; }
.ar-cast span { font-size: .78rem; font-weight: 700; color: var(--vx-accent-2, #ff8a3d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-s-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ar-s-cast a, .ar-s-cast b { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 5px 14px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16));
  background: var(--card); color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none; }
.ar-s-cast .vx-av { width: 28px; height: 28px; flex: none; }
.ar-s-in { margin: 0; text-align: center; color: var(--dim); font-size: .85rem; }
.ar-act { margin-top: auto; padding: 10px 12px 12px; }
.ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; border-radius: 999px; border: 0; background: var(--vx-accent); color: #fff;
  font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; text-decoration: none; }
.ar-btn svg { width: 16px; height: 16px; }
.ar-btn.ghost { background: none; border: 1.5px solid var(--vx-accent); color: var(--vx-accent); }
.ar-btn.done { background: color-mix(in srgb, var(--vx-accent) 14%, transparent); color: var(--vx-accent); }
.ar-btn:disabled { opacity: .5; }

/* not a resident yet: the archive behind glass, one way in */
.ar-lock { position: relative; min-height: 70vh; display: grid; place-items: center; overflow: hidden; border-radius: 26px; }
.ar-lock-pics { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; filter: blur(6px) brightness(.45); transform: scale(1.06); }
.ar-lock-pics img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.ar-lock-card { position: relative; max-width: 420px; margin: 20px; padding: 28px 22px; text-align: center; border-radius: 26px; background: rgba(16, 16, 20, .82);
  border: 1px solid var(--line2, rgba(255,255,255,.16)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ar-lock-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--vx-accent) 16%, transparent); color: var(--vx-accent); }
.ar-lock-ic svg { width: 28px; height: 28px; }
.ar-lock-card h1 { font-size: 1.7rem; font-weight: 900; margin: 12px 0 8px; }
.ar-lock-card p { color: var(--dim); line-height: 1.55; margin: 0 0 18px; }

/* the post sheet + the jump sheet */
.ar-sheet .ar-s { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.ar-s-cover { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 9 / 16; background: var(--card2, #1d1d23); }
.ar-s-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-s-date { color: var(--dim); font-weight: 700; margin: 0; }
.ar-s-nums { display: flex; gap: 14px; margin: 6px 0 10px; font-weight: 800; }
.ar-s-nums span { display: inline-flex; align-items: center; gap: 5px; } .ar-s-nums svg { width: 18px; height: 18px; }
.ar-s-cap { direction: rtl; text-align: right; white-space: pre-line; line-height: 1.55; margin: 0 0 10px; font-size: 1rem; max-height: 9.5em; overflow: auto; }
.ar-s-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ar-s-tags button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16)); background: none; color: #d9d6de; font: inherit; font-size: .86rem; cursor: pointer; }
.ar-s-body .vx-btn { height: 48px; font-size: .98rem; }
.ar-s-ask { margin-top: 14px; display: grid; gap: 10px; }
.ar-s-ask textarea { width: 100%; border-radius: 14px; border: 1px solid var(--line2, rgba(255,255,255,.16)); background: var(--card); color: var(--text); font: inherit; padding: 12px 14px; resize: none; outline: none; }
.ar-s-done { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--vx-accent) 12%, transparent); color: var(--vx-accent); }
.ar-s-done svg { width: 22px; height: 22px; flex: none; } .ar-s-done b { display: block; color: var(--text); } .ar-s-done small { color: var(--dim); }
.ar-s-n { display: flex; align-items: center; gap: 8px; color: var(--dim); margin: 0; font-size: .92rem; } .ar-s-n svg { width: 20px; height: 20px; }
.ar-s-undo { background: none; border: 0; color: var(--dim); text-decoration: underline; font: inherit; font-size: .88rem; cursor: pointer; justify-self: center; }

.ar-jump h2 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; margin: 0 0 12px; } .ar-jump h2 svg { width: 22px; height: 22px; color: var(--vx-accent); }
.ar-jy { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.ar-jy b { flex: none; width: 52px; font-size: 1.05rem; padding-top: 6px; }
.ar-jy div { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-jy button { height: 36px; min-width: 56px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16)); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ar-jy button.on { background: var(--vx-accent); border-color: var(--vx-accent); color: #fff; }
@media (max-width: 420px) { .ar-sheet .ar-s { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; } .ar-head h1 { font-size: 2rem; } }

/* a computer: the timeline is a column on the right (Hebrew reads from the right), the posts in 4-5 columns */
@media (min-width: 640px) { .ar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .ar-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: start; }
  .ar-time { position: sticky; top: calc(var(--ar-top, 64px) + 6px); margin: 0; padding: 12px; max-height: calc(100vh - var(--ar-top, 64px) - 24px); overflow: auto; }
  .ar-t-h { display: flex; align-items: center; gap: 8px; font-weight: 800; padding: 2px 6px 10px; } .ar-t-h svg { width: 20px; height: 20px; color: var(--vx-accent); }
  .ar-years { flex-wrap: wrap; overflow: visible; }
  .ar-years button { height: 34px; padding: 0 10px; }
  .ar-months { flex-direction: column; overflow: visible; }
  .ar-months button { justify-content: flex-start; text-align: start; height: 38px; padding: 0 14px; border-radius: 12px; }
  .ar-months .l { display: inline; } .ar-months .s { display: none; }
  .ar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .ar-sheet .ar-s { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
}
@media (min-width: 1280px) { .ar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* the archive: what I asked for - a bar at the bottom once I asked for something (round 2, his note 2026-11-10) */
.ar-mine-n { font-style: normal; }
.ar-bar { position: fixed; inset-inline: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40; max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 10px 10px 14px; padding-inline: 16px 10px; border-radius: 22px; border: 1px solid var(--vx-glass-line); background: rgba(18, 18, 22, .9); -webkit-backdrop-filter: var(--vx-blur); backdrop-filter: var(--vx-blur);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transform: translateY(220%); transition: transform .25s ease; }
.ar-bar.show { transform: none; }
.ar-bar b { display: block; font-size: 1rem; } .ar-bar small { color: var(--dim); font-size: .8rem; }
@media (min-width: 1000px) { .ar-bar { bottom: 22px; } }

/* ---------- the archive's announcement strip on the home (his choice 2026-11-10: H4's layout, H3's fanned covers + planet) ---------- */
.arc-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42%; align-items: center; gap: 10px; margin: 18px 0 8px; padding: 16px 16px 16px 6px;
  padding-inline: 16px 6px; border-radius: 24px; color: var(--text); text-decoration: none; overflow: hidden;
  background: radial-gradient(120% 140% at 15% 50%, rgba(255, 106, 31, .22), transparent 60%), linear-gradient(180deg, #17171c, #101014);
  border: 1.5px solid color-mix(in srgb, var(--vx-accent) 65%, transparent); box-shadow: 0 0 0 1px rgba(255, 106, 31, .08), 0 14px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 106, 31, .16); }
.arc-strip:active { transform: scale(.995); }
.arc-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; position: relative; z-index: 1; }
.arc-tag { padding: 3px 12px; border-radius: 999px; background: var(--vx-accent); color: #fff; font-weight: 900; font-size: .8rem; }
.arc-title { font-size: 1.55rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.arc-txt p { margin: 0; color: #cfccd5; font-size: .88rem; line-height: 1.45; }
.arc-long { display: none; }
@media (min-width: 900px) { .arc-long { display: block; } .arc-short { display: none; } }
.arc-vs { display: flex; flex-wrap: wrap; gap: 6px; }
.arc-vs span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16)); font-size: .78rem; color: var(--dim); white-space: nowrap; }
.arc-vs span.on { border-color: color-mix(in srgb, var(--vx-accent) 70%, transparent); color: var(--vx-accent-2, #ff8a3d); }
.arc-vs b { color: var(--text); font-weight: 900; } .arc-vs .on b { color: var(--vx-accent-2, #ff8a3d); }
.arc-go { white-space: nowrap; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 280px; height: 46px; margin-top: 2px; padding-inline: 18px 5px;
  border-radius: 999px; border: 1.5px solid var(--vx-accent); background: rgba(0, 0, 0, .35); font-weight: 900; font-size: .98rem; box-shadow: 0 0 18px rgba(255, 106, 31, .22); }
.arc-go i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--vx-accent); color: #fff; }
.arc-go i svg { width: 18px; height: 18px; }
.arc-only { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); font-size: .76rem; }
.arc-only svg { width: 13px; height: 13px; }
/* the fan: one cover a year, the newest in the middle-front, the planet over them */
.arc-fan { position: relative; height: 190px; }
.arc-c { position: absolute; bottom: 26px; width: 40%; aspect-ratio: 9 / 15; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255, 140, 61, .75);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 106, 31, .25); background: #1b1b20; transform-origin: 50% 100%; }
.arc-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc-c em { position: absolute; top: 5px; inset-inline: 0; text-align: center; font-style: normal; font-weight: 900; font-size: .78rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.arc-c.c0 { left: 2%; transform: rotate(-14deg); z-index: 1; }
.arc-c.c1 { left: 20%; transform: rotate(-5deg) translateY(-8px); z-index: 2; }
.arc-c.c2 { left: 40%; transform: rotate(5deg) translateY(-8px); z-index: 3; }
.arc-c.c3 { left: 58%; transform: rotate(14deg); z-index: 2; }
.arc-planet { position: absolute; left: 50%; bottom: 0; width: 58%; transform: translateX(-50%); z-index: 4; filter: drop-shadow(0 4px 14px rgba(255, 106, 31, .55)); }
/* a phone: mockup P1 (his note 2026-11-10 "mobile is ugly"): the covers + planet as a band on top, the words centred under it */
@media (max-width: 899px) {
  .arc-strip { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px 16px; text-align: center; }
  .arc-fan { order: -1; height: 168px; margin: 0 -6px; }
  .arc-c { width: 21%; bottom: 30px; border-radius: 11px; }
  .arc-c.c0 { left: 13%; } .arc-c.c1 { left: 29.5%; } .arc-c.c2 { left: 49.5%; } .arc-c.c3 { left: 66%; }
  .arc-planet { width: 38%; bottom: -2px; }
  .arc-txt { align-items: center; gap: 7px; }
  .arc-txt { position: static; }
  .arc-tag { position: absolute; top: 12px; inset-inline-start: 14px; z-index: 5; }
  .arc-title { font-size: 1.7rem; margin-top: 6px; }
  .arc-txt p { font-size: .9rem; max-width: 330px; }
  .arc-vs { justify-content: center; flex-wrap: nowrap; }
  .arc-go { max-width: none; height: 50px; }
  .arc-only { justify-content: center; }
}
@media (max-width: 370px) { .arc-title { font-size: 1.5rem; } .arc-vs span { font-size: .74rem; padding: 3px 8px; } .arc-fan { height: 152px; } }
@media (min-width: 900px) {
  .arc-strip { grid-template-columns: minmax(0, 1fr) 380px; padding: 22px 28px; gap: 24px; margin: 24px 0 10px; }
  .arc-title { font-size: 2rem; } .arc-txt p { font-size: 1rem; max-width: 560px; } .arc-txt { gap: 9px; }
  .arc-vs span { font-size: .86rem; padding: 4px 12px; }
  .arc-fan { height: 250px; }   /* covers + planet one block, centred with the words (his note: the logo sat too high) */
  .arc-c { width: 31%; bottom: 44px; } .arc-c.c0 { left: 8%; } .arc-c.c1 { left: 24%; } .arc-c.c2 { left: 42%; } .arc-c.c3 { left: 58%; }
  .arc-planet { width: 46%; }
}

/* the archive's card inside a chat reply ([[archive]]) */
.arc-chat { display: flex; align-items: center; gap: 14px; margin: 10px 0; padding: 12px 14px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: radial-gradient(120% 140% at 10% 50%, rgba(255, 106, 31, .2), transparent 60%), #141419; border: 1.5px solid color-mix(in srgb, var(--vx-accent) 60%, transparent); }
.arc-chat-fan { position: relative; flex: none; width: 92px; height: 74px; }
.arc-chat-fan img { position: absolute; bottom: 0; width: 42px; height: 66px; object-fit: cover; border-radius: 8px; border: 1.5px solid rgba(255, 140, 61, .8); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); transform-origin: 50% 100%; }
.arc-chat-fan .f0 { left: 0; transform: rotate(-12deg); } .arc-chat-fan .f1 { left: 25px; transform: translateY(-4px); z-index: 2; } .arc-chat-fan .f2 { left: 50px; transform: rotate(12deg); }
.arc-chat-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arc-chat-t b { font-size: 1.05rem; font-weight: 900; } .arc-chat-t small { color: var(--dim); font-size: .84rem; line-height: 1.35; }
.arc-chat-go { display: inline-flex; align-items: center; gap: 4px; color: var(--vx-accent); font-weight: 800; font-size: .9rem; } .arc-chat-go svg { width: 16px; height: 16px; }

/* ---------- "מה הלאה בשלומיוורס?" round 3 (his note 2026-11-10; mockups band.mjs B1 desktop, B3 / B4 phone): one card for all seven,
   the ideas row, a real business strip ---------- */
.cmy-band.cx-band { background: none; border: 0; padding: 0; margin-top: 30px; }
.cxg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cx-t { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic art" "txt txt"; align-items: start; gap: 10px 8px;
  padding: 14px; min-height: 150px; border-radius: 20px; border: 1px solid var(--line2, rgba(255,255,255,.12)); background: var(--card); color: var(--text); text-align: right;
  cursor: pointer; transition: border-color .15s, transform .15s; overflow: hidden; }
.cx-t:hover { border-color: color-mix(in srgb, var(--vx-accent) 55%, transparent); }
.cx-t:active { transform: scale(.985); }
.cx-ic { grid-area: ic; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--vx-accent) 75%, transparent); color: var(--vx-accent); }
.cx-ic svg { width: 20px; height: 20px; }
.cx-txt { grid-area: txt; display: flex; flex-direction: column; gap: 3px; min-width: 0; align-self: end; }
.cx-txt b { font-size: 1.02rem; font-weight: 900; line-height: 1.2; }
.cx-txt small { color: var(--dim); font-size: .8rem; line-height: 1.35; }
.cx-art { grid-area: art; justify-self: end; display: flex; align-items: center; justify-content: flex-end; height: 64px; min-width: 0; }
.cx-round { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); }
.cx-cover { width: 96px; height: 64px; border-radius: 12px; object-fit: cover; }
.cx-cut { height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.cx-pk { display: flex; } .cx-pk img { width: 46px; height: 46px; object-fit: contain; margin-inline-start: -10px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); } .cx-pk img:first-child { margin: 0; }
.cx-rings { display: flex; } .cx-rings img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vx-accent); margin-inline-start: -12px; box-shadow: 0 0 0 2px var(--card); } .cx-rings img:first-child { margin: 0; }
/* the featured one: the whole width on a phone, the sticker big beside the words */
.cx-t.big { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic txt art"; align-items: center; gap: 14px; min-height: 140px;
  background: radial-gradient(120% 140% at 15% 50%, rgba(255, 106, 31, .2), transparent 60%), var(--card); border-color: color-mix(in srgb, var(--vx-accent) 55%, transparent); }
.cx-t.big .cx-ic { width: 52px; height: 52px; } .cx-t.big .cx-ic svg { width: 24px; height: 24px; }
.cx-t.big .cx-txt { align-self: center; } .cx-t.big .cx-txt b { font-size: 1.3rem; } .cx-t.big .cx-txt small { font-size: .88rem; }
.cx-t.big .cx-art { height: 112px; }

/* the ideas row */
.cx-idea { margin-top: 14px; padding: 16px; border-radius: 22px; border: 1px solid var(--line2, rgba(255,255,255,.12)); background: var(--card); display: grid; gap: 14px; }
.cx-idea-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-idea-h b { display: block; font-size: 1.08rem; font-weight: 900; } .cx-idea-h small { display: block; color: var(--dim); font-size: .84rem; margin-top: 3px; }
.cx-idea-h .vx-btn { height: 44px; padding: 0 18px; gap: 6px; font-size: .95rem; flex: none; box-shadow: none; }
.cx-idea-h .vx-btn svg { width: 16px; height: 16px; }
.cx-idea-top .idea { margin: 0; }
.cx-idea-top .cd-all { margin-top: 8px; }

/* the business strip: a real invitation to advertise */
.cx-biz { position: relative; display: grid; grid-template-columns: 1fr; margin-top: 14px; border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--text);
  background: radial-gradient(120% 120% at 20% 100%, rgba(255, 106, 31, .28), transparent 60%), linear-gradient(180deg, #19171a, #111014);
  border: 1.5px solid color-mix(in srgb, var(--vx-accent) 60%, transparent); box-shadow: 0 0 30px rgba(255, 106, 31, .12); }
.cx-biz-art { position: relative; height: 190px; overflow: hidden; }
.cx-biz-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.cx-biz-txt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 4px 18px 18px; }
.cx-biz-txt em { font-style: normal; color: var(--vx-accent-2, #ff8a3d); font-weight: 900; font-size: .9rem; }
.cx-biz-txt b { font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.cx-biz-txt small { color: #d6d3db; font-size: .95rem; line-height: 1.5; }
.cx-biz-row { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.cx-biz-row .vx-btn { height: 50px; width: 100%; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2, rgba(255,255,255,.16)); font-size: .82rem; font-weight: 700; color: #e6e3ea; background: rgba(0, 0, 0, .25); }
.cx-chips svg { width: 15px; height: 15px; color: var(--vx-accent); }
@media (max-width: 370px) { .cx-t { padding: 12px; } .cx-round { width: 54px; height: 54px; } .cx-cover { width: 80px; height: 56px; } .cx-t.big .cx-art { height: 92px; } .cx-idea-h { flex-direction: column; align-items: stretch; } }

/* a computer: 4 columns (B1) - the sticker card two wide, every card: the icon and the words on the right, the picture on the left */
@media (min-width: 900px) {
  .cxg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .cx-t { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ic art" "txt art"; min-height: 168px; padding: 18px; }
  .cx-art { height: 100%; align-self: center; }
  .cx-round { width: 92px; height: 92px; } .cx-cover { width: 118px; height: 88px; } .cx-pk img { width: 58px; height: 58px; } .cx-rings img { width: 56px; height: 56px; }
  .cx-t.big { grid-column: span 2; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ic art" "txt art"; }
  .cx-t.big .cx-art { height: 140px; }
  .cx-idea { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; padding: 18px 22px; gap: 22px; }
  .cx-idea-h { flex-direction: column; align-items: flex-start; }
  .cx-biz { grid-template-columns: minmax(0, 1fr) 520px; align-items: stretch; min-height: 250px; }
  .cx-biz-art { order: 2; height: auto; }
  .cx-biz-art img { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent); mask-image: linear-gradient(270deg, #000 55%, transparent); }
  .cx-biz-txt { justify-content: center; padding: 26px 30px; gap: 10px; }
  .cx-biz-txt b { font-size: 2.3rem; }
  .cx-biz-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .cx-biz-row .vx-btn { width: auto; padding: 0 28px; }
}

/* the business strip opens the form (his ask 2026-11-10) - a button, laid out like the link was */
button.cx-biz { width: 100%; padding: 0; font: inherit; text-align: right; cursor: pointer; }
.cx-biz-art img { object-position: 30% 35%; }
.cx-art { max-width: 100%; overflow: hidden; }
.cx-pk img { width: 38px; height: 38px; }
@media (min-width: 900px) { .cx-pk img { width: 46px; height: 46px; } .cx-biz-art img { object-position: 20% 40%; } }
.nav-biz { color: var(--dim) !important; font-size: .92em; }
@media (max-width: 899px) { .nav-biz { display: none !important; } }   /* a phone: the strip + the footer, never the bottom bar (his note: don't push business at everyone) */
/* the form: in a sheet from anywhere, or alone at /business */
.biz-sheet { display: grid; gap: 10px; }
.biz-sheet-art { width: 100%; height: 150px; object-fit: cover; object-position: 30% 30%; border-radius: 18px; display: block; }
.biz-sh .biz-form, .biz-only .biz-form { display: grid; gap: 10px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.biz-sh .biz-form h2, .biz-only .biz-form h2 { font-size: 1.5rem; font-weight: 900; margin: 4px 0 0; }
.biz-sh .biz-form p, .biz-only .biz-form p { color: var(--dim); margin: 0 0 4px; line-height: 1.5; }
.biz-sh .biz-form input, .biz-sh .biz-form textarea, .biz-only .biz-form input, .biz-only .biz-form textarea { width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--line2, rgba(255,255,255,.16));
  background: rgba(0, 0, 0, .25); color: var(--text); font: inherit; padding: 0 14px; outline: none; }
.biz-sh .biz-form textarea, .biz-only .biz-form textarea { height: 96px; padding: 12px 14px; resize: none; }
.biz-sh .biz-form input:focus, .biz-sh .biz-form textarea:focus { border-color: color-mix(in srgb, var(--vx-accent) 65%, transparent); }
.biz-sh .biz-topics, .biz-only .biz-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-only { max-width: 560px; margin: 0 auto; padding: 24px 18px 60px; display: grid; gap: 14px; }
.biz-only .biz-sheet-art { height: 220px; }

/* the ideas row, round 2 (his note 2026-11-10: "still way too much space"; mockups ideas-row.mjs I1 / I2): ONE compact card - the ask and
   its button, a thin line, the week's idea in two lines with its step, votes and the way to all of them */
.cx-idea { display: block; padding: 14px 16px; }
.cx-idea-h { gap: 12px; }
.cx-idea-h .vx-btn { height: 42px; }
.cx-iw { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2, rgba(255,255,255,.1)); display: grid; gap: 6px; }
.cx-iw-by { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--dim); min-width: 0; }
.cx-iw-by em { font-style: normal; color: var(--vx-accent-2, #ff8a3d); font-weight: 800; margin-inline-end: 4px; }
.cx-iw-by .vx-av { width: 24px; height: 24px; flex: none; }
.cx-iw-text { color: var(--text); font-weight: 700; font-size: .98rem; line-height: 1.45; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-iw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cx-iw-all { color: var(--dim); font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap; }
.cx-iw-acts { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.cx-iw-acts > :first-child:not(.vote) { margin: 0; }
.cx-iw .vote { height: 34px; } .cx-iw .icon-btn { width: 34px; height: 34px; }
@media (min-width: 900px) {
  .cx-idea { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 0; padding: 16px 22px; }
  .cx-idea.solo { grid-template-columns: 1fr; }
  .cx-idea-h { flex-direction: column; align-items: flex-start; gap: 12px; padding-inline-end: 22px; }
  .cx-iw { margin: 0; padding: 0 22px 0 0; padding-inline: 22px 0; border-top: 0; border-inline-start: 1px solid var(--line2, rgba(255,255,255,.1)); }
}

/* round 3 of the strip + the ideas row (his notes 2026-11-10): no dead space - a computer shows picture A (the dedicated video on a phone
   in front of the site's sponsored banner), cropped to what's in it, fading INTO the words; a phone shows B (filming it); the form shows A */
.cx-biz-art img.a { display: none; }
.cx-biz-art img.b { object-position: 30% 35%; }
.biz-sheet-art { object-position: 22% 50% !important; }
@media (min-width: 900px) {
  .cx-biz { grid-template-columns: minmax(0, 1fr) 40%; min-height: 250px; }
  .cx-biz-art img.b { display: none; }
  .cx-biz-art img.a { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 78%, transparent 100%); }
  .cx-biz-txt { padding: 24px 30px 24px 8px; padding-inline: 30px 8px; }
}
.cx-iw .vote { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-weight: 800; color: var(--text); cursor: pointer; }
.cx-iw .vote b { font-size: .82rem; } .cx-iw .vote svg { width: 18px; height: 18px; } .cx-iw .vote.on { border-color: var(--vx-accent); background: rgba(255, 106, 31, .12); }
@media (max-width: 899px) { .cx-idea-h b { font-size: 1.02rem; } .cx-idea-h .vx-btn { padding: 0 14px; font-size: .9rem; } }

/* the strip's devices, round 4 (his note 2026-11-10): a CSS laptop + phone holding real frames; a phone shows only Hani + Yotam (picture B);
   a computer shows the devices; a wide one shows the devices AND Hani + Yotam */
.cx-dev { display: none; }
.biz-sheet-art { object-position: 30% 30% !important; }
@media (min-width: 900px) {
  .cx-biz { grid-template-columns: minmax(0, 1fr) 470px; }
  .cx-biz-art { display: flex; align-items: center; justify-content: flex-start; }
  .cx-biz-art img.b { display: none; }
  .cx-dev { display: block; position: relative; flex: none; width: 450px; height: 240px; margin: 0 auto; }
  .cx-lap { position: absolute; right: 6px; top: 22px; width: 330px; }
  .cx-lap .scr { display: block; height: 206px; border: 7px solid #232328; border-bottom-width: 10px; border-radius: 12px 12px 4px 4px; overflow: hidden; background: #000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
  .cx-lap .scr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
  .cx-lap i { display: block; height: 9px; margin: 0 -22px; border-radius: 0 0 14px 14px; background: linear-gradient(#3a3a40, #1a1a1e); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
  .cx-ph { position: absolute; left: 34px; bottom: 6px; width: 112px; height: 226px; padding: 5px; border-radius: 22px; background: #111114;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 0 1.5px rgba(255, 255, 255, .14), 0 0 26px rgba(255, 106, 31, .25); }
  .cx-ph .scr { position: relative; display: block; width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: #1b1b20; }
  .cx-ph .scr img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cx-ph em { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; background: #fff; color: #111; font-style: normal;
    font-weight: 800; font-size: .66rem; white-space: nowrap; }
}
@media (min-width: 1240px) {
  .cx-biz { grid-template-columns: minmax(0, 1fr) 720px; }
  .cx-dev { margin: 0; }
  .cx-biz-art img.b { display: block; position: static; flex: 1; min-width: 0; height: 100%; object-fit: cover; object-position: 28% 30%;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 22%); mask-image: linear-gradient(270deg, transparent 0, #000 22%); }
}

/* the strip's carousel (his ask 2026-11-10: "an immersive carousel, auto"): A (the dedicated video in front of the site's banner),
   the real devices, B (Hani + Yotam filming) - each fades in with a slow zoom; dots show which */
.cx-biz-art { position: relative; }
.cx-slides { position: absolute; inset: 0; overflow: hidden; }
.cx-slides .sl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; display: block; }
.cx-slides img.sl { object-position: 30% 35%; }
.cx-slides .sl.on { opacity: 1; animation: cx-zoom 7s ease-out both; }
.cx-slides .sl.dev { display: none; }
@keyframes cx-zoom { from { transform: scale(1.0); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .cx-slides .sl.on { animation: none; } }
.cx-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.cx-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: width .3s, background .3s; }
.cx-dots i.on { width: 20px; border-radius: 99px; background: var(--vx-accent); }
@media (max-width: 899px) { .cx-dots i:nth-child(3) { display: none; } .cx-biz-art { height: 210px; } .cx-slides { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); } }
@media (min-width: 900px) {
  .cx-biz, .cx-biz { grid-template-columns: minmax(0, 1fr) 46%; min-height: 260px; }
  .cx-slides { -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
  .cx-slides .sl.dev { display: flex; align-items: center; justify-content: center; }
  .cx-slides .sl.dev .cx-dev { margin: 0 auto; }
  .cx-slides img.sl:nth-child(2) { object-position: 30% 45%; }
}
@media (min-width: 1240px) { .cx-biz { grid-template-columns: minmax(0, 1fr) 52%; } }

/* round 5 (his notes 2026-11-10): two slides - A (real devices: the home with its banner + a strong video frame, "המותג שלכם") and B; a phone shows both */
@media (max-width: 899px) { .cx-dots i:nth-child(2) { display: block; } .cx-slides img.sl:first-child { object-position: 20% 50%; } }
.biz-sheet-art { object-position: 30% 45% !important; }
@media (min-width: 900px) { .cx-biz { min-height: 290px; } .cx-slides img.sl:first-child { object-position: 0% 50%; } }

/* four slides (his ask 2026-11-10: "at least 3"): devices, three phones, a phone in hand, Hani + Yotam - every dot shows, every device */
.cx-dots i:nth-child(n) { display: block !important; }
.cx-slides img.sl:nth-child(2) { object-position: 30% 35%; } .cx-slides img.sl:nth-child(3) { object-position: 20% 40%; }
@media (min-width: 900px) { .cx-slides img.sl:nth-child(2) { object-position: 0% 40%; } .cx-slides img.sl:nth-child(3) { object-position: 0% 35%; } }