/* Hallmark · v2.0.0 · edit, not a redesign · theme: the page's own night home screen (user named) · genre: atmospheric · posture: committed · surface: absolute · hero: four video widgets under the head · nav: brand and one link home · footer: three links · signature: the four live widgets */
/* Hallmark · critique · 30/10 Ofek: no grey text, every line coloured and bold; heads carry a marked phrase; examples show they swipe */
/* Hallmark · waive 24b · phone home screen sizes copied from iOS icon grids (58px icons, 7px label gap) · the page imitates a phone screen, its spacing follows the phone, not a 4px web scale */
/* Hallmark · answered 31/10 · edit: own play button on example videos (tap = sound or pause), floating WhatsApp button in the sheet that docks at the end, reels and site tiles in the business folder */
/* Hallmark · waive 38iii · the marked phrase is the user's own ask on 30/10 ("שהכל יהיה בולט", a highlight behind the words) · one marker in the hero head and one in the tools head, words stay white on the stroke */
/* Media agent page — a phone home screen: four big widgets, then every other tool as an app icon. */
:root {
  --wall: #140f33;
  --wall-deep: #0e0a26;
  --sheet: #1c1548;
  --tile: #241b5c;
  --ink: #fdfbff;
  --text: #f7f5ff;
  /* Ofek 30/10: "לבן זה טוב, אפור זה לא כזה בולט" — second-line text is a light colour, never a faded white. */
  --lead: #ffc2d8;
  --sub: #e2dcff;
  --pink: #ff3d77;
  --pink-hi: #ff6b98;
  --pink-deep: #c8124c;
  --violet: #3d2ee6;
  --violet-mid: #22186a;
  --violet-hi: #3a2bd9;
  --gold: #ffd166;
  --wa: #25d366;
  --wa-hi: #3ae07a;
  --wa-ink: #05301a;
  --wa-float: rgba(37, 211, 102, .86);
  --float-shadow: rgba(5, 3, 15, .45);
  --play-veil: rgba(5, 3, 15, .38);
  --black: #05030f;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .22);
  --glass: rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .1);
  --glass-3: rgba(255, 255, 255, .16);
  --glass-4: rgba(255, 255, 255, .32);
  --shine: rgba(255, 255, 255, .35);
  --shade: rgba(0, 0, 0, .6);
  --shade-2: rgba(0, 0, 0, .35);
  --veil: rgba(12, 7, 34, .88);
  --veil-2: rgba(12, 7, 34, .35);
  --veil-3: rgba(12, 7, 34, .78);
  --backdrop: rgba(8, 5, 25, .62);
  --glow-violet: rgba(61, 46, 230, .55);
  --glow-violet-2: rgba(61, 46, 230, .22);
  --screen: #0d0b1f;
  /* Folder colours: the icon gradient and its heading. */
  --biz-a: #ff7a9c; --biz-c: #db1f5c; --biz-h: #ff9cba;
  --video-a: #9a8cff; --video-b: #5b48f5; --video-h: #b9b0ff;
  --voice-a: #4ce3c9; --voice-b: #14b8a6; --voice-c: #0b8686; --voice-h: #6ff2da;
  --edit-a: #78c8ff; --edit-b: #3b8cff; --edit-c: #2a5fe0; --edit-h: #9cd6ff;
  --home-a: #ffd060; --home-b: #ffa22e; --home-c: #f2761a; --home-h: #ffd36b;
  --font: Rubik, system-ui, sans-serif;
  --gutter: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--wall-deep);
  color: var(--text);
  font: 400 16px/1.5 var(--font);
  overflow-x: clip;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .4; cursor: default; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; transition: none; }

/* Wallpaper: the night-mode home screen behind everything. */
.wall {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 10% 8%, var(--glow-violet), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, var(--glow-violet-2), transparent 70%),
    var(--wall);
}

.top, main, .foot { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }

.top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--pink);
}
.brand-mark svg { width: 18px; height: 18px; color: var(--ink); }
.home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--glass-2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.home img { width: 28px; height: 28px; border-radius: 50%; }
.home:hover { background: var(--glass-3); }

h1, h2, h3 { margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.hero { padding-top: 18px; }
h1 { font-size: clamp(40px, 10.5vw, 80px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
/* A marked phrase in a head: the same white words on a pink marker stroke.
   Ofek 30/10: the stroke in the main head draws itself from the first word to the last and back;
   in the tools head the colours swap, white words on pink, then pink words on white. */
@property --mk { syntax: '<color>'; inherits: false; initial-value: transparent; }
h1 mark, h2 mark {
  --mk: var(--pink);
  color: inherit;
  background: linear-gradient(var(--mk), var(--mk)) no-repeat right 60% / 100% 82%;
  padding-inline: .12em;
  border-radius: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1 mark { animation: draw 5.5s cubic-bezier(.65, 0, .35, 1) .4s infinite; }
@keyframes draw {
  0% { background-size: 0% 82%; }
  22%, 72% { background-size: 100% 82%; }
  94%, 100% { background-size: 0% 82%; }
}
.more h2 mark { animation: swap 4s steps(1, end) infinite; }
@keyframes swap {
  0% { --mk: var(--pink); color: var(--ink); }
  50% { --mk: var(--ink); color: var(--pink-deep); }
}
.lead { margin: 14px 0 0; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--lead); max-width: 32em; }
.lead b { color: var(--gold); font-weight: 700; }
.try { text-decoration: none; white-space: nowrap; }
.try b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.try:hover b { color: var(--ink); }
.try svg { width: 1.15em; height: 1.15em; margin-inline-start: .3em; vertical-align: -.22em; }
.wa-bubble { fill: var(--wa); }
.wa-phone { fill: var(--ink); }
.users { margin: 12px 0 0; font-size: 16px; font-weight: 500; color: var(--sub); }
.users strong { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── The four widgets ─────────────────────────────── */
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.widget {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: var(--tile);
  box-shadow: 0 24px 40px -24px var(--shade), inset 0 0 0 1px var(--line);
  text-align: right;
  container-type: inline-size;
  transition: transform .18s ease;
}
.widget:active { transform: scale(.97); }
.widget::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--veil) 0%, var(--veil-2) 30%, transparent 52%);
  pointer-events: none;
}
.w-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.w-title {
  position: absolute;
  inset-inline: 13px;
  bottom: 13px;
  z-index: 1;
  font-size: clamp(16px, 11.5cqi, 28px);
  white-space: nowrap;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 0 2px 12px var(--shade);
}

/* Voice widget: the real loudness of the sample, breathing. */
.w-voice {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, var(--violet-hi), var(--violet-mid) 70%);
}
.w-voice > svg {
  position: absolute;
  top: 18%;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--glass-3);
  box-shadow: 0 0 0 10px var(--glass);
}
.wave { display: flex; align-items: center; gap: 3px; height: 34%; margin-top: 14%; }
.wave i {
  display: block;
  width: 3px;
  height: calc(var(--h) * 100%);
  border-radius: 3px;
  background: var(--ink);
  transform-origin: center;
  animation: breathe 1.3s ease-in-out var(--d) infinite alternate;
}
@keyframes breathe { from { transform: scaleY(.45); opacity: .7; } to { transform: scaleY(1); opacity: 1; } }

/* Site widget: a real site scrolling inside a screen. */
.w-site {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--pink-hi), var(--pink) 60%, var(--biz-c));
}
.w-site .screen {
  position: absolute;
  inset: 16px 18px 62px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--screen);
  box-shadow: 0 0 0 5px var(--glass-3), 0 20px 30px var(--shade-2);
}
.w-site img { display: block; width: 100%; height: auto; animation: browse 22s ease-in-out infinite alternate; }
@keyframes browse { 0%, 6% { transform: translateY(0); } 100% { transform: translateY(-78%); } }

/* ── 30/10: "נסו חינם את אלה", five tools that fit the gift coins, straight to WhatsApp ── */
.free {
  margin-top: 40px;
  padding: 20px 10px 8px;
  border-radius: 28px;
  background: var(--glass);
  border: 1px solid var(--gold);
}
.free h2 { margin: 0 8px; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.15; font-weight: 800; color: var(--gold); }
.free .lead { margin: 8px 8px 18px; }
.free .apps { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 560px; }
.free .apps > li { grid-area: auto; }   /* the folder colour classes also name desktop grid areas */
.free a.app { text-decoration: none; }
.free .squircle { width: min(58px, 100%); height: auto; aspect-ratio: 1; }
html.a11y-contrast .free { background: var(--black); outline: 2px solid var(--ink); }

/* ── Everything else: folders of app icons ───────── */
.more { margin-top: 56px; }
.more h2 { font-size: clamp(28px, 7.4vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.folders { display: grid; gap: 14px; margin-top: 24px; }
.folder {
  padding: 16px 10px 6px;
  border-radius: 28px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.folder h3 { margin: 0 8px 14px; font-size: 17px; font-weight: 700; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 2px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; padding: 2px 2px 12px; border-radius: 16px; }
.squircle {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 8px 16px -8px var(--shade), inset 0 1px 0 var(--shine);
  transition: transform .15s ease;
}
.squircle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 30% 0%, var(--glass-4), transparent 60%);
}
.squircle svg { position: relative; width: 28px; height: 28px; color: var(--ink); stroke-width: 1.8; }
.app:active .squircle { transform: scale(.9); }
.app:hover .squircle { transform: translateY(-2px); }
.app-label { font-size: 13px; line-height: 1.25; font-weight: 700; text-align: center; min-height: 2.5em; color: var(--ink); }

.f-biz .squircle, .sheet .t-biz { background: linear-gradient(150deg, var(--biz-a), var(--pink) 55%, var(--biz-c)); }
.f-video .squircle, .sheet .t-video { background: linear-gradient(150deg, var(--video-a), var(--video-b) 55%, var(--violet)); }
.f-voice .squircle, .sheet .t-voice { background: linear-gradient(150deg, var(--voice-a), var(--voice-b) 55%, var(--voice-c)); }
.f-edit .squircle, .sheet .t-edit { background: linear-gradient(150deg, var(--edit-a), var(--edit-b) 55%, var(--edit-c)); }
.f-home .squircle, .sheet .t-home { background: linear-gradient(150deg, var(--home-a), var(--home-b) 55%, var(--home-c)); }
.f-biz h3 { color: var(--biz-h); }
.f-video h3 { color: var(--video-h); }
.f-voice h3 { color: var(--voice-h); }
.f-edit h3 { color: var(--edit-h); }
.f-home h3 { color: var(--home-h); }

/* We make it for you (Ofek 30/10). The email is shown as text with a copy button. */
.custom {
  margin-top: 48px;
  padding: 28px 20px;
  border-radius: 28px;
  background: var(--pink-deep);
  color: var(--ink);
}
.custom h2 { font-size: clamp(28px, 7.4vw, 44px); line-height: 1.12; font-weight: 800; }
.custom h2 mark { --mk: var(--ink); color: var(--pink-deep); }
.custom-text { margin: 12px 0 0; font-size: 18px; font-weight: 500; max-width: 32em; }
.custom-cta { margin: 20px 0 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mail-address { font-size: clamp(19px, 5.4vw, 26px); font-weight: 800; user-select: all; overflow-wrap: anywhere; }
.mail-copy {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pink-deep);
  font-weight: 700;
  transition: transform .15s ease;
}
.mail-copy:hover { background: var(--lead); }
.mail-copy:active { transform: scale(.95); }
.custom-link { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 28px 0 calc(90px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--sub); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* No general "open the agent" button (Ofek 29/10): visitors choose a tool here, and its button opens that tool. */
.sheet-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  border-radius: 18px;
  background: var(--wa);
  color: var(--wa-ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.sheet-cta svg { width: 22px; height: 22px; }
.sheet-cta:hover { background: var(--wa-hi); }

/* ── Sheet: what a tool does + the way to start ──── */
/* The sheet is a column: a fixed top row with the close button, and a body that scrolls.
   dvh keeps it inside the part of the screen the browser bars leave free (Chrome on iPhone). */
.sheet {
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  max-height: 86dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--sheet);
  color: var(--text);
  box-shadow: 0 -20px 60px var(--shade);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: rise .28s cubic-bezier(.2, .8, .2, 1); }
.sheet-top { flex: none; position: relative; height: 54px; }
.sheet::backdrop { background: var(--backdrop); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--glass-2); }
.sheet-close {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-2);
}
.sheet-close:hover { background: var(--glass-3); }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(22px + env(safe-area-inset-bottom)); }
.sheet .t-head { display: flex; align-items: center; gap: 14px; }
.sheet .t-head h2 { margin: 0; }
.sheet .t-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; box-shadow: inset 0 1px 0 var(--shine); }
.sheet .t-icon svg { width: 28px; height: 28px; color: var(--ink); stroke-width: 1.8; }
.sheet h2 { margin-top: 16px; font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--ink); }

/* Examples inside the sheet: one per slide, swiped sideways. Arrows on both sides say there is more. */
.ex { margin-top: 18px; }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ex-head b { font-size: 16px; color: var(--ink); }
.ex-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 12px;
  border-radius: 999px;
  background: var(--pink-deep);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.ex-hint svg { width: 16px; height: 16px; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.ex-stage { position: relative; }
.ex-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ex-track::-webkit-scrollbar { display: none; }
.ex-slide { flex: 0 0 100%; scroll-snap-align: start; }
.ex-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--violet);
  box-shadow: 0 6px 18px var(--shade);
  transition: opacity .2s ease, transform .15s ease;
}
.ex-arrow svg { width: 24px; height: 24px; stroke-width: 2.6; }
.ex-arrow:active { transform: scale(.92); }
.ex-arrow:disabled { opacity: 0; pointer-events: none; }
/* Right to left: the next example waits on the left. */
.ex-next { left: 6px; }
.ex-prev { right: 6px; }
.ex-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.ex-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--glass-4); cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.ex-dots i.on { background: var(--pink); transform: scale(1.35); }
.ex-site { width: min(100%, 230px); height: min(46vh, 430px); height: min(46dvh, 430px); margin: 0 auto; border-radius: 24px; overflow-y: auto; box-shadow: 0 0 0 6px var(--glass-2); }
.ex-site img { display: block; width: 100%; height: auto; }
.ex-row { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-row.n1 { grid-template-columns: minmax(0, 1fr); }
.ex-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-row.wide { grid-template-columns: minmax(0, 1fr); }
.ex-row figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--glass); }
.ex-row img, .ex-row video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ex-row.wide img { aspect-ratio: auto; max-height: 46vh; max-height: 46dvh; object-fit: contain; }
.ex-row figcaption {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--veil-3);
}
.ex-video { display: block; width: auto; max-width: 100%; height: min(46vh, 440px); height: min(46dvh, 440px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 20px; background: var(--black); object-fit: cover; }
.ex-cap { margin: 8px 0 0 !important; font-size: 14.5px !important; font-weight: 500; text-align: center; color: var(--lead) !important; }
.t-flow { display: grid; gap: 8px; margin: 18px 0 0; }
.t-flow div { display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 14px; background: var(--glass); }
.t-flow dt { font-size: 14px; font-weight: 700; color: var(--gold); }
.t-flow dd { margin: 0; font-size: 15.5px; color: var(--ink); }
.sheet p { margin: 10px 0 0; font-size: 16.5px; color: var(--sub); }
.sheet .note { font-size: 14.5px; color: var(--lead); }
.sheet-cta { margin-top: 22px; }
.cta-note { margin: 10px 0 0 !important; font-size: 13.5px !important; text-align: center; }

.player { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, var(--violet-hi), var(--violet-mid)); }
.player-btn { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--violet); }
.player-btn svg { width: 22px; height: 22px; fill: currentColor; margin-inline-end: -3px; }
.player-btn.playing svg { display: none; }
.player-btn.playing::before { content: ""; width: 16px; height: 18px; border-inline: 5px solid currentColor; }
.player .wave { flex: 1; height: 52px; margin: 0; gap: 2px; justify-content: space-between; }
.player .wave i { flex: 1; width: auto; max-width: 4px; animation: none; background: var(--shine); }
.player .wave i.on { background: var(--ink); }

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .custom { padding: 40px 48px; }
  .hero { padding-top: 40px; }
  .widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
  .widget { aspect-ratio: 3 / 4.3; border-radius: 32px; }
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; grid-template-areas: "biz video" "biz voice" "edit home"; }
  .f-biz { grid-area: biz; } .f-video { grid-area: video; } .f-voice { grid-area: voice; }
  .f-edit { grid-area: edit; } .f-home { grid-area: home; }
  .sheet { margin: auto; border-radius: 28px; }
}
@media (min-width: 1080px) {
  .folders { grid-template-columns: 1.25fr 1fr 1fr; grid-template-areas: "biz video edit" "biz voice home"; }
}

/* The site's accessibility menu (/a11y.js): make its contrast mode real on this page. */
html.a11y-contrast .custom { background: var(--black); outline: 2px solid var(--ink); }
html.a11y-contrast { --lead: var(--ink); --sub: var(--ink); --glass: var(--black); --wall: var(--black); --wall-deep: var(--black); --sheet: var(--black); }
html.a11y-contrast .wall { background: var(--black); }
html.a11y-contrast .folder, html.a11y-contrast .sheet, html.a11y-contrast .widget { outline: 2px solid var(--ink); }
html.a11y-contrast .w-title { background: var(--black); padding: 2px 6px; border-radius: 6px; }


/* Ofek 31/10: the WhatsApp button floats over the sheet, a little see-through, and settles into its place at the end. */
.sheet-cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; }
.sheet-cta.is-floating {
  max-width: 300px;
  margin-inline: auto;
  background: var(--wa-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px var(--float-shadow);
}
/* Example videos: our own play button, so a tap works in every phone browser. */
.ex-vwrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; cursor: pointer; }
.ex-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--play-veil);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.ex-play svg { width: 30px; height: 30px; fill: currentColor; margin-inline-end: -4px; }
.ex-vwrap.is-playing .ex-play { opacity: 0; transform: scale(.85); }
.ex-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; transition: none; }
.ex-vwrap:hover .ex-play { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .wave i, .w-site img, .ex-hint svg, h1 mark, .more h2 mark { animation: none; }
  .sheet[open] { animation: none; }
  .widget, .squircle, .ex-arrow, .ex-dots i, .mail-copy, .ex-play { transition: none; }
}