/* Biskal's site: the brand green, Rubik, right to left; light and dark like the app. */
:root {
  --bg: #f4f8f6; --surface: #ffffff; --text: #13201b; --muted: #50625a; --border: #dde8e2;
  --brand: #0a6b4c; --brand-2: #0e7a57; --accent: #12936a; --ink-on-brand: #ffffff;
  --hero: linear-gradient(160deg, #073f30 0%, #0a5a42 45%, #11815c 100%);
  --ai: linear-gradient(135deg, #5a3be0 0%, #8b3fc7 55%, #b52d61 100%);
  --shadow: 0 1px 2px rgba(16, 40, 30, .06), 0 10px 30px rgba(16, 40, 30, .08);
  --radius: 22px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1412; --surface: #141d1a; --text: #e8f1ed; --muted: #a3b5ad; --border: #24312c;
    --brand: #1aa575; --brand-2: #138a62; --accent: #3cc391;
    --hero: linear-gradient(160deg, #06261e 0%, #0a3d30 45%, #0f5a45 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: "Rubik", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid #ffbf00; outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 32px); }
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: #111; color: #fff; text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }
main:focus { outline: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 14px; border: 0;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: #fff; background: var(--brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); transition: transform .2s, filter .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn.big { padding: 15px 26px; font-size: 18px; border-radius: 16px; }
.btn.small { padding: 8px 16px; font-size: 15px; }
.btn.ghost { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.btn.light { background: #fff; color: #0a5a42; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.btn svg { flex: none; }

/* header */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, #073f30 92%, transparent); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
@supports (backdrop-filter: blur(8px)) { .nav { background: color-mix(in srgb, #073f30 78%, transparent); backdrop-filter: blur(12px); } }
.nav-in { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; text-decoration: none; color: #fff; }
.mark { flex: none; display: block; width: 42px; height: 42px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .22)); }
.links { display: flex; gap: 4px; margin-inline-start: auto; }
.links a { position: relative; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, .88); transition: background .25s, color .25s; }
/* (just above the width where the links go, a little closer, so each stays on one line) */
@media (min-width: 961px) and (max-width: 1140px) { .nav-in { gap: 14px; } .links { gap: 0; } .links a { padding: 8px 8px; font-size: 15.5px; } }
.links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* the part of the page on the screen (site.js spy): its link lit, a short bar under it */
.links a.on { color: #fff; background: rgba(255, 255, 255, .14); }
.links a::after { content: ""; position: absolute; inset-inline: 30%; bottom: 3px; height: 2.5px; border-radius: 2px; background: #8ee6c0; opacity: 0; transform: scaleX(.3); transition: opacity .25s, transform .3s; }
.links a.on::after { opacity: 1; transform: none; }
.nav .btn.small { background: #fff; color: #0a5a42; box-shadow: none; }

/* hero */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--hero); padding: 64px 0 96px; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 520px; height: 520px; inset-inline-end: -160px; top: -200px; background: radial-gradient(circle, rgba(111, 214, 174, .28), transparent 65%); }
.hero::after { width: 420px; height: 420px; inset-inline-start: -120px; bottom: -220px; background: radial-gradient(circle, rgba(255, 211, 77, .16), transparent 65%); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.hero .eyebrow, .eyebrow.light { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hero h1 { margin: 16px 0 14px; font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; letter-spacing: -.01em; }
.hl { background: linear-gradient(90deg, #ffe08a, #8ff0c6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 560px; font-size: 19px; color: rgba(255, 255, 255, .9); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .cta .btn:first-child { background: #fff; color: #0a5a42; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 22px 0 0; font-size: 15px; color: rgba(255, 255, 255, .85); }
.ticks li::before { content: "✓"; margin-inline-end: 6px; color: #8ff0c6; font-weight: 700; }

/* the phone */
.phone-stage { position: relative; display: grid; place-items: center; min-height: 520px; }
.phone { width: 280px; height: 560px; padding: 12px; border-radius: 46px; background: #0b1512; box-shadow: 0 40px 80px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .12); transform: rotate(-4deg); animation: float 7s ease-in-out infinite; }
.screen { height: 100%; overflow: hidden; border-radius: 36px; background: #f3f7f5; color: #13201b; font-size: 12px; }
.s-top { display: flex; align-items: center; gap: 8px; padding: 18px 16px 8px; background: #0a5a42; color: #fff; }
.s-logo { flex: none; display: block; width: 24px; height: 24px; }
.s-top b { font-size: 14px; }
.s-bell { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.s-hero { padding: 8px 16px 20px; background: linear-gradient(170deg, #0a5a42, #11815c); color: #fff; border-radius: 0 0 26px 26px; }
.s-ring { position: relative; width: 150px; height: 150px; margin: 4px auto 10px; }
.s-ring svg { width: 100%; height: 100%; }
.s-arc { animation: ring 2.4s ease-out both .4s; }
.s-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.s-ring b { font-size: 30px; }
.s-ring small { font-size: 11px; opacity: .85; }
.s-macros { display: grid; gap: 6px; }
.s-macros i { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
.s-macros i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 99px; background: var(--c); }
.s-card { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(16, 40, 30, .08); }
.s-card.soft { background: #eef6ff; }
.s-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--c) 40%, #fff); }
.s-card div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.s-card small { color: #50625a; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-card em { margin-inline-start: auto; font-style: normal; font-weight: 800; font-size: 14px; }
.float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #fff; color: #13201b; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); animation: float 6s ease-in-out infinite; }
.float div { display: flex; flex-direction: column; line-height: 1.25; }
.float b { font-size: 14px; }
.float small { font-size: 12px; color: #50625a; }
.f-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--c); }
.f1 { top: 40px; inset-inline-start: -10px; animation-delay: -1s; }
.f2 { top: 230px; inset-inline-end: -36px; animation-delay: -3s; }
.f3 { bottom: 26px; inset-inline-start: -6px; animation-delay: -5s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ring { from { stroke-dasharray: 0 314; } }

/* numbers */
.facts { margin-top: -44px; position: relative; z-index: 2; }
.facts-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.facts-in div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px; }
.facts-in b { font-size: 26px; font-weight: 800; color: var(--brand); }
.facts-in span { font-size: 14.5px; color: var(--muted); }

/* sections */
.section { padding: 88px 0; }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head h2 { margin-top: 12px; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 26px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); transition: transform .25s, box-shadow .25s; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--c) 18%, transparent); }
.f-art { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 32%, transparent); }
.f-art svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* a feature's drawing in place of its framed icon (the app's flat drawings, flat-art.js, written into the page): no frame,
   no colour behind, in the feature's own colour (the user: "nice drawings for each subject, no frame") */
.f-art:has(.flat-art) { width: 64px; height: 64px; border-radius: 0; background: none; box-shadow: none; }
.f-art svg.flat-art { width: 64px; height: 64px; fill: initial; stroke: none; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--c) 22%, transparent)); }
.flat-art { display: block; overflow: visible; flex: none; }
.flat-art .l { fill: color-mix(in srgb, var(--fa) 58%, #fff); }
.flat-art .d { fill: var(--fa); }
.flat-art .x { fill: color-mix(in srgb, var(--fa) 62%, #0b1220); }
.flat-art .c { fill: color-mix(in srgb, var(--fa) 42%, #fff); }
.flat-art .sh { clip-path: inset(0 0 0 50%); }
.flat-art :is(.xs, .ws, .ds) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flat-art .xs { stroke: color-mix(in srgb, var(--fa) 62%, #0b1220); }
.flat-art .ws { stroke: #fff; }
.flat-art .ds { stroke: var(--fa); }
.feature h3 { margin: 18px 0 8px; font-size: 21px; }
.feature p { color: var(--muted); font-size: 16px; }

/* AI */
.ai { color: #fff; background: var(--ai); border-radius: 40px; width: min(1220px, 100% - 16px); margin-inline: auto; }
.ai-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.ai-text h2 { margin: 14px 0 12px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.ai-text p { font-size: 18px; color: rgba(255, 255, 255, .9); margin-bottom: 26px; }
.ai .btn.light { color: #5a3be0; }
/* the seven things it does: a compact row under the text and the drawing, four and three, the last row centred */
.ai-list { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 0; }
.ai-list li { flex: 0 0 calc((100% - 30px) / 4); display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ai-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; font-size: 15px; color: #5a3be0; background: #fff; }
.ai-list div { display: flex; flex-direction: column; line-height: 1.35; }
.ai-list b { font-size: 15.5px; }
.ai-list small { font-size: 13px; color: rgba(255, 255, 255, .85); }

/* steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; }
.steps li { position: relative; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); }
.step-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-weight: 800; font-size: 20px; color: #fff; background: linear-gradient(145deg, #1aa575, #0a5a42); }
.steps h3 { margin: 16px 0 6px; font-size: 21px; }
.steps p { color: var(--muted); }

/* accessibility and privacy */
.duo { padding-top: 0; }
.duo-in { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { padding: 30px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); }
.p-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--c); }
.p-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel h2 { margin: 16px 0 8px; font-size: 24px; }
.panel p { color: var(--muted); }
.more { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--brand); }
/* the privacy card's points, each true to the privacy policy word for word (a promise in public) */
.trust { list-style: none; display: grid; gap: 11px; margin: 4px 0 0; padding: 0; }
.trust li { position: relative; padding-inline-start: 32px; font-size: 16.5px; line-height: 1.5; color: var(--text); }
.trust li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 12.5px; font-weight: 900; color: #fff; background: var(--brand-2); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
/* the + (an × when open) drawn as two bars, so it sits in the very middle of its circle whatever the font */
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; transition: transform .25s;
  background: linear-gradient(var(--brand), var(--brand)) center / 14px 2.5px no-repeat, linear-gradient(var(--brand), var(--brand)) center / 2.5px 14px no-repeat,
    color-mix(in srgb, var(--brand) 10%, transparent); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); }

/* the last call */
.final { padding: 0 0 88px; }
.final-in { padding: 56px 24px; border-radius: 36px; text-align: center; color: #fff; background: var(--hero); box-shadow: var(--shadow); }
.final h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
.final p { margin: 10px auto 26px; max-width: 520px; color: rgba(255, 255, 255, .9); font-size: 18px; }
.final .stores { display: flex; justify-content: center; gap: 10px; margin: 22px auto 0; max-width: none; }
.store { padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* footer */
.foot { padding: 40px 0 48px; background: #071f18; color: rgba(255, 255, 255, .8); }
.foot-in { display: grid; gap: 14px; justify-items: center; text-align: center; }
.foot-logo { display: block; border-radius: 12px; }
.foot-logo img { display: block; width: 100px; height: auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.foot-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px;
  color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .2s, transform .2s;
}
.foot-links a svg { color: #6fd6ae; }
.foot-links a:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.small { font-size: 14px; color: rgba(255, 255, 255, .65); max-width: 640px; }

/* the 404 page */
.lost { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 60px 16px; text-align: center; }
.lost b { font-size: 84px; line-height: 1; font-weight: 800; color: var(--brand); }
.lost h1 { font-size: 30px; }
.lost p { color: var(--muted); }

@media (max-width: 960px) {
  .hero-in, .ai-in { grid-template-columns: 1fr; }
  /* (one column: the phone's stage no wider than the phone and its cards, so a card beside it stays on the screen) */
  .phone-stage { min-height: 500px; width: 100%; max-width: 460px; justify-self: center; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .facts-in { grid-template-columns: repeat(2, 1fr); }
  .links { display: none; }
  .nav .btn.small { margin-inline-start: auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 40px 0 84px; }
  .lead { font-size: 17px; }
  .cta .btn { flex: 1; }
  .grid, .steps, .duo-in { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .ai { border-radius: 28px; padding: 56px 0; }
  .phone { width: 240px; height: 480px; }
  .f2 { inset-inline-end: -4px; top: 200px; }
  .f3 { inset-inline-start: 0; }
  .float { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone, .float, .s-arc { animation: none; }
  .btn:hover, .feature:hover { transform: none; }
}

/* ---------- the legal documents, in a window ---------- */
html:has(dialog.doc[open]) { overflow: hidden; }
dialog.doc {
  width: min(760px, 100% - 24px); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: 26px; overflow: hidden;
  display: none; flex-direction: column; color: var(--text); background: var(--surface); box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
}
dialog.doc[open] { display: flex; animation: doc-in .28s ease-out; }
dialog.doc::backdrop { background: rgba(4, 20, 15, .55); }
@keyframes doc-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.doc-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 22px 22px; color: #fff; background: var(--hero); overflow: hidden; }
.doc-head::after { content: ""; position: absolute; width: 220px; height: 220px; inset-inline-end: -60px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 214, 174, .3), transparent 65%); pointer-events: none; }
.doc-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.doc-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-titles small { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.doc-titles h2 { font-size: 26px; font-weight: 800; }
.doc-titles h2:focus { outline: none; }
.doc-x { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); transition: background .2s, transform .25s; }
.doc-x:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); }
.doc-progress { height: 4px; background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.doc-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd34d, #6fd6ae); border-radius: 0 4px 4px 0; transition: width .1s linear; }
.doc-tabs { display: flex; gap: 8px; padding: 14px 22px 4px; overflow-x: auto; }
/* only the text scrolls: the head, the tabs and the foot keep their full height (they were squeezed by a long text) */
.doc-head, .doc-progress, .doc-tabs, .doc-foot { flex-shrink: 0; }
.doc-tabs button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--muted); background: transparent; border: 1.5px solid var(--border); transition: background .2s, color .2s, border-color .2s;
}
.doc-tabs button:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.doc-tabs button[aria-current="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }
.doc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 26px 24px; font-size: 16.5px; line-height: 1.75; overscroll-behavior: contain; }
.doc-body:focus-visible { outline-offset: -3px; }
.doc-body h3 { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; font-size: 19px; font-weight: 700; }
.doc-body h3::before { content: ""; flex: none; width: 6px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #1aa575, #0a5a42); }
.doc-body p { margin: 0 0 10px; color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.doc-body ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc-body li { position: relative; padding: 10px 14px; padding-inline-start: 40px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.doc-body li::before { content: "\2713"; position: absolute; inset-inline-start: 14px; top: 10px; font-weight: 800; color: var(--brand); }
.doc-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 50px 0; color: var(--muted); }
.doc-loading span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); animation: doc-spin .8s linear infinite; }
@keyframes doc-spin { to { transform: rotate(360deg); } }
.doc-error { padding: 30px 0; text-align: center; color: var(--muted); }
.doc-foot { display: flex; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); }
@media (max-width: 640px) {
  dialog.doc { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .doc-titles h2 { font-size: 22px; }
  .doc-body { padding: 8px 18px 20px; font-size: 16px; }
  /* the three side by side, in thirds, their words only, so none is cut or scrolled away */
  .doc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px 6px; gap: 6px; }
  .doc-tabs button { justify-content: center; padding: 8px 4px; font-size: 13.5px; white-space: nowrap; }
  .doc-tabs button svg { display: none; }
  .doc-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { dialog.doc[open], .doc-loading span { animation: none; } .doc-x:hover { transform: none; } }
.nw { white-space: nowrap; }

/* ---------- the AI off in the admin screen (site.js: html.ai-off): its parts give way to the others ---------- */
.ai-off [data-ai], html:not(.ai-off) [data-no-ai] { display: none !important; }
.v { display: contents; }
/* two in a row: an odd last card takes the whole row */
@media (max-width: 960px) and (min-width: 641px) { .grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* what is new: the cards as the features', each with a "חדש" tag by its title, on a soft band */
.news { background: linear-gradient(180deg, transparent, color-mix(in srgb, #f5a524 6%, transparent) 30%, color-mix(in srgb, var(--brand) 5%, transparent) 70%, transparent); }
.tag-new { display: inline-block; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: 3px; font-size: 12px; font-weight: 800; letter-spacing: .2px;
  color: #fff; background: linear-gradient(135deg, #f5a524, #e5487f); box-shadow: 0 4px 10px color-mix(in srgb, #e5487f 30%, transparent); }

/* the AI's section: all of the AI on the site is here; its points of trust, and a drawing of the phone reading the plate */
.ai-in { align-items: start; }
.ai-notes { list-style: none; display: grid; gap: 9px; margin: 0 0 28px; padding: 0; }
.ai-notes li { position: relative; padding-inline-start: 30px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.ai-notes li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  font-size: 12px; font-weight: 900; color: #5a3be0; background: #fff; }
.ai-side { display: grid; gap: 18px; }
.ai-art { position: relative; width: min(420px, 100%); margin: 0 auto; }
.ai-art svg { display: block; width: 100%; height: auto; }
.ai-beam { animation: ai-scan 2.8s ease-in-out infinite; }
.ai-spark { transform-box: fill-box; transform-origin: center; animation: ai-twinkle 2.4s ease-in-out infinite; }
.ai-spark.s2 { animation-delay: -.8s; }
.ai-spark.s3 { animation-delay: -1.6s; }
.ai-chip { position: absolute; display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 13px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 600;
  color: #2a1d5e; background: #fff; box-shadow: 0 12px 26px rgba(20, 8, 60, .35); animation: ai-float 4.5s ease-in-out infinite; }
.ai-chip b { font-size: 16px; font-weight: 800; color: #5a3be0; }
.ai-chip.c1 { top: 12%; inset-inline-start: 2%; }
.ai-chip.c2 { top: 48%; inset-inline-end: 0; animation-delay: -1.5s; }
.ai-chip.c3 { bottom: 10%; inset-inline-start: 6%; animation-delay: -3s; }
@keyframes ai-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(110px); } }
@keyframes ai-twinkle { 0%, 100% { opacity: .35; scale: .7; } 50% { opacity: 1; scale: 1.1; } }
@keyframes ai-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 640px) { .ai-chip { font-size: 12.5px; padding: 6px 10px; } .ai-chip b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .ai-beam, .ai-spark, .ai-chip { animation: none; } }

/* less room between the sections (the phone most of all) */
.section { padding: 72px 0; }
.sec-head { margin-bottom: 32px; }
@media (max-width: 640px) {
  .section { padding: 44px 0; }
  .sec-head { margin-bottom: 26px; }
  .ai { padding: 44px 0; }
}

/* the watch and the widgets: a band in the brand's green, as the AI's in its colours; the iPhone's home
   screen with the three widgets, and the watch with the summary page, drawn beside the words */
.devices { position: relative; overflow: hidden; color: #fff; background: var(--hero); border-radius: 40px; width: min(1220px, 100% - 16px); margin-inline: auto; margin-bottom: 28px; }
.devices::before { content: ""; position: absolute; width: 460px; height: 460px; inset-inline-start: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 214, 174, .22), transparent 65%); pointer-events: none; }
.dv-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.dv-text h2 { margin: 14px 0 12px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.dv-text > p { font-size: 18px; color: rgba(255, 255, 255, .9); margin-bottom: 24px; }
.devices .eyebrow .tag-new { vertical-align: 1px; }
.dv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dv-card { padding: 18px 18px 16px; border-radius: 20px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.dv-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 19px; }
.dv-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #0a5a42; background: #fff; }
.dv-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv-card ul { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.dv-card li { position: relative; padding-inline-start: 20px; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.dv-card li::before { content: ""; position: absolute; inset-inline-start: 3px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #6fd6ae; }
.dv-card b { color: #fff; }
.dv-note { margin-top: 16px; font-size: 14.5px; color: rgba(255, 255, 255, .75); text-wrap: pretty; }
.dv-art { width: min(440px, 100%); margin: 0 auto; }
.dv-art svg { display: block; width: 100%; height: auto; }
.dv-watch { animation: ai-float 5s ease-in-out infinite; }
@media (max-width: 960px) { .dv-in { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .devices { border-radius: 28px; padding: 44px 0; } .dv-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dv-watch { animation: none; } }

/* the support page (support/index.html): a short header, the common questions, and the form to write to us */
.hero.slim { padding: 56px 0 72px; text-align: center; }
.hero.slim .wrap { position: relative; z-index: 1; }
.hero.slim .lead { margin-inline: auto; }
.section.alt { background: color-mix(in srgb, var(--brand) 5%, var(--bg)); }
.support-form { position: relative; display: grid; gap: 18px; padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.support-form label { display: grid; gap: 7px; font-weight: 700; }
.support-form :is(input, select, textarea) { font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); }
.support-form textarea { min-height: 150px; resize: vertical; }
.support-form :is(input, select, textarea):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.support-form .agree { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.support-form .agree input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; padding: 0; accent-color: var(--brand); }
.support-form .agree a { color: var(--brand); font-weight: 700; }
.support-form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.support-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.support-send .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.support-status { margin: 0; font-weight: 700; }
.support-status.ok { color: var(--brand); }
.support-status.bad { color: #c2410c; }
.support-more { margin-top: 18px; text-align: center; color: var(--muted); }

/* ---------- the app's screens: a carousel in depth (screens.js) ----------
   A band in deep green whose glow takes the colour of the screen in front; the screens stand round it,
   turned toward it, further back and darker the further they are. Without JS: a row that scrolls. */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #1f9e6e; }
.screens {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 40px; width: min(1220px, 100% - 16px); margin: 56px auto 0; padding: 64px 0 52px;
  background: radial-gradient(120% 90% at 50% 0%, #0c3a2d 0%, #06201a 55%, #031410 100%); transition: --glow 1s ease;
}
.screens::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(36% 42% at 50% 56%, color-mix(in srgb, var(--glow) 58%, transparent), transparent 72%),
    radial-gradient(60% 30% at 50% 100%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%); }
/* a fine dotted floor, fading to the edges */
.screens::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 60%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 60%, #000, transparent 75%); }
.screens .sec-head { margin-bottom: 18px; }
.sc-lead { margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 16.5px; }

/* the size of a screen: as wide as the room allows, and low enough that it fits the window whole */
.sc { --w: max(170px, min(clamp(180px, 19vw, 250px), calc((100svh - 320px) / 2.168))); --h: calc(var(--w) * 2.168); position: relative; }
.sc-stage {
  position: relative; height: calc(var(--h) + 84px); perspective: 1600px; perspective-origin: 50% 42%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.sc-stage.dragging { cursor: grabbing; }
.sc-card {
  position: absolute; top: 18px; left: calc(50% - var(--w) / 2); width: var(--w); height: var(--h); margin: 0;
  border-radius: calc(var(--w) * .11); overflow: hidden; background: #0b1512; will-change: transform;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-box-reflect: below 10px linear-gradient(rgba(0, 0, 0, .26), transparent 13%);
  transition: box-shadow .5s;
}
.sc-card.on { box-shadow: 0 34px 80px color-mix(in srgb, var(--c) 42%, rgba(0, 0, 0, .5)), 0 0 0 1px rgba(255, 255, 255, .16); }
.sc-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* a light that runs over a screen as it turns, and the shade of the ones behind */
.sc-card::before, .sc-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sc-card::before { z-index: 1; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%) var(--sx, 50%) 0 / 300% 100% no-repeat; mix-blend-mode: overlay; }
.sc-card::after { z-index: 2; background: #03120d; opacity: var(--dim, 0); }

/* the words of the screen in front, each in the same place (the tallest gives the height: nothing moves) */
.sc-cap { display: grid; text-align: center; margin: 0 auto; padding: 0 16px; width: min(620px, 100%); }
.sc-cap > div { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.sc-cap > div.on { visibility: visible; opacity: 1; transform: none; transition-delay: .06s, .06s, 0s; }
.sc-num { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.sc-num b { color: color-mix(in srgb, var(--glow) 55%, #fff); font-weight: 800; }
.sc-cap h3 { margin: 4px 0 6px; font-size: clamp(22px, 2.5vw, 29px); font-weight: 800; }
.sc-cap p { color: rgba(255, 255, 255, .82); font-size: 16.5px; text-wrap: pretty; }

/* the buttons: back, the dots, on, and stop or go on */
.sc-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; padding: 0 12px; }
.sc-btn { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .2s, transform .2s; }
.sc-btn:hover { background: rgba(255, 255, 255, .2); transform: scale(1.06); }
.sc-btn:active { transform: scale(.94); }
/* (stop or go on first, on the right, a little apart from the others) */
.sc-play { margin-inline-end: 6px; }
.sc-play .i-play, .sc.paused .sc-play .i-pause { display: none; }
.sc.paused .sc-play .i-play { display: block; }
.sc-dots { display: flex; align-items: center; }
.sc-dot { display: grid; place-items: center; width: 22px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.sc-dot i { position: relative; display: block; width: 9px; height: 9px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .32); transition: width .35s cubic-bezier(.2, .7, .2, 1), background .3s; }
.sc-dot:hover i { background: rgba(255, 255, 255, .55); }
.sc-dot[aria-current="true"] { width: 46px; }
.sc-dot[aria-current="true"] i { width: 34px; background: rgba(255, 255, 255, .28); }
/* how long until the next screen, filling the dot from the right */
.sc-dot[aria-current="true"] i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: right; transform: scaleX(var(--p, 1)); }

/* without JS (and before it): a row of the screens that scrolls sideways */
.sc:not(.ready) .sc-stage { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px max(16px, 50% - var(--w) / 2) 0; perspective: none; cursor: auto; }
.sc:not(.ready) .sc-card { position: relative; top: 0; left: auto; flex: none; scroll-snap-align: center; -webkit-box-reflect: none; }
.sc:not(.ready) .sc-ctrl { visibility: hidden; }

@media (max-width: 640px) {
  .screens { border-radius: 28px; margin-top: 40px; padding: 44px 0 36px; }
  .sc { --w: max(160px, min(58vw, 240px, calc((100svh - 300px) / 2.168))); }
  .sc-ctrl { gap: 6px; }
  .sc-btn { width: 40px; height: 40px; }
  .sc-dot { width: 17px; }
  .sc-dot[aria-current="true"] { width: 36px; }
  .sc-dot[aria-current="true"] i { width: 26px; }
  .sc-play { margin-inline-end: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .screens, .sc-card, .sc-cap > div, .sc-dot, .sc-dot i { transition: none; }
  .sc-btn:hover, .sc-btn:active { transform: none; }
}

/* ---------- the corner buttons: back to the top, and the accessibility tool (site-tools.js) ----------
   Their side, height, colour and see-through come from the admin screen ("עריכת אתר"). */
.corner-btn {
  position: fixed; z-index: 60; bottom: calc(var(--b, 24px) + env(safe-area-inset-bottom)); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--ink, #fff); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.corner-btn[hidden] { display: none; }
.corner-btn.at-right { right: calc(16px + env(safe-area-inset-right)); }
.corner-btn.at-left { left: calc(16px + env(safe-area-inset-left)); }
.to-top {
  width: 46px; height: 46px; background: var(--bg); box-shadow: 0 8px 22px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s, background .2s;
}
.to-top.shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover, .to-top:focus-visible { background: var(--c); }
.to-top svg { transition: transform .25s; }
.to-top:hover svg { transform: translateY(-2px); }
.sa-btn { width: var(--s, 52px); height: var(--s, 52px); background: var(--c); box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 0 0 2px rgba(255, 255, 255, .35); transition: transform .2s; }
.sa-btn:hover { transform: scale(1.06); }
.sa-btn svg { width: 56%; height: 56%; }

/* the window: over the button, on its side; a head in the button's colour, the text's size, the tiles */
.sa-panel {
  position: fixed; z-index: 61; bottom: calc(var(--b, 88px) + env(safe-area-inset-bottom)); width: min(380px, 100vw - 24px);
  max-height: calc(100dvh - var(--b, 88px) - 16px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; border-radius: 24px; color: var(--text); background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--c) 30%, var(--border)); animation: sa-in .22s ease-out;
}
.sa-panel[hidden] { display: none; }
.sa-panel.at-right { right: calc(12px + env(safe-area-inset-right)); }
.sa-panel.at-left { left: calc(12px + env(safe-area-inset-left)); }
@keyframes sa-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sa-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--ink, #fff); background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); }
.sa-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.sa-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sa-titles h2 { font-size: 20px; font-weight: 800; }
.sa-titles h2:focus { outline: none; }
.sa-titles small { font-size: 13px; opacity: .85; }
.sa-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: inherit; background: rgba(255, 255, 255, .16); transition: background .2s; }
.sa-x:hover { background: rgba(255, 255, 255, .28); }
.sa-body { padding: 14px 14px 6px; display: grid; gap: 12px; }
.sa-text { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid var(--border); }
.sa-text[hidden] { display: none; }
.sa-text-label { font-weight: 700; }
.sa-stepper { display: flex; align-items: center; gap: 8px; }
.sa-stepper button { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 8px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 800; font-size: 16px; color: var(--ink, #fff); background: var(--c); }
.sa-stepper button:disabled { opacity: .35; cursor: default; }
.sa-level { display: flex; align-items: center; gap: 3px; }
.sa-level i { display: block; width: 6px; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--c) 20%, var(--border)); }
.sa-level i.on { background: var(--c); }
.sa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the tiles: three to a row, the last row ending even (site-tools.js: one across it, or two sharing it) */
.sa-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sa-tile {
  grid-column: span 2; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 6px;
  border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center;
  color: var(--text); background: var(--surface); transition: border-color .2s, background .2s, transform .15s;
}
.sa-tile[hidden] { display: none; }
.sa-tile.sa-all { grid-column: 1 / -1; }
.sa-tile.sa-half { grid-column: span 3; }
.sa-tile:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--border)); }
.sa-tile:active { transform: scale(.97); }
.sa-art { display: grid; place-items: center; color: var(--c); }
.sa-tile[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.sa-tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; inset-inline-end: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 900; color: var(--ink, #fff); background: var(--c); }
.sa-foot { flex: none; display: flex; gap: 8px; padding: 8px 14px 4px; }
.sa-foot > * { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid var(--border); }
.sa-foot > :hover { border-color: color-mix(in srgb, var(--c) 50%, var(--border)); }
.sa-reset:disabled { opacity: .5; cursor: default; }
.sa-hint { flex: none; padding: 6px 16px 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.sa-guide { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 2.6em; pointer-events: none; background: rgba(255, 214, 0, .16); border-block: 2px solid #ffbf00; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .12); }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top svg, .sa-btn { transition: none; } .sa-panel { animation: none; } .to-top:hover svg, .sa-btn:hover { transform: none; } }

/* ---------- the adjustments (on <html>: data-sa lists those on, --tg the text's size) ---------- */
/* drawings and the phone's screen keep their own measures */
:is(.phone-stage, .dv-art, .ai-art, .sc-stage) { --tg: 1; --tg-big: 1; }
html[data-sa~="contrast"] body :not(svg, svg *, img, .sc-card, .sc-card *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; }
html[data-sa~="contrast"] body { background: #000 !important; }
html[data-sa~="contrast"] :is(a, a *, .hl) { color: #ffe600 !important; -webkit-text-fill-color: #ffe600; }
html[data-sa~="contrast"] :is(.btn, .sa-stepper button, .sa-tile[aria-pressed="true"]) { outline: 2px solid #ffe600 !important; }
html[data-sa~="light"] body :not(svg, svg *, img, .sc-card, .sc-card *) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
html[data-sa~="light"] body { background: #fff !important; }
html[data-sa~="light"] :is(a, a *, .hl) { color: #0000c8 !important; -webkit-text-fill-color: #0000c8; }
html[data-sa~="light"] :is(.btn, .sa-stepper button, .sa-tile[aria-pressed="true"]) { outline: 2px solid #000 !important; }
:is(html[data-sa~="contrast"], html[data-sa~="light"]) :is(.hero, .screens, .devices, .doc-head)::before,
:is(html[data-sa~="contrast"], html[data-sa~="light"]) :is(.hero, .screens, .devices)::after { display: none; }
/* (on the page, not on <body>: a filter there would carry the corner buttons along) */
html[data-sa~="gray"] :is(body > header, main, body > footer, dialog.doc) { filter: grayscale(1); }
html[data-sa~="links"] a { text-decoration: underline 2px !important; text-underline-offset: 3px; outline: 2px dashed currentColor; outline-offset: 2px; }
html[data-sa~="titles"] :is(h1, h2, h3) { outline: 3px solid #ffbf00; outline-offset: 5px; border-radius: 4px; }
html[data-sa~="font"] body, html[data-sa~="font"] body :not(svg, svg *) { font-family: Arial, "Segoe UI", Tahoma, sans-serif !important; }
html[data-sa~="spacing"] body :is(p, li, summary, small, span, a, label, b, h1, h2, h3) { letter-spacing: .06em !important; word-spacing: .16em !important; }
html[data-sa~="spacing"] body :is(p, li, summary, small, label) { line-height: 1.9 !important; }
html[data-sa~="motion"] *, html[data-sa~="motion"] *::before, html[data-sa~="motion"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-sa~="cursor"], html[data-sa~="cursor"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8-6.5 1.8L9.7 18z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html[data-sa~="focus"] :focus-visible { outline: 4px solid #ffbf00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgba(0, 0, 0, .55) !important; }
html[data-sa~="noimg"] :is(main, body > footer) :is(img, picture) { visibility: hidden !important; }
/* the corner buttons stay seen in high contrast: a frame in the links' colour */
html[data-sa~="contrast"] .corner-btn { background: #000 !important; color: #ffe600 !important; outline: 3px solid #ffe600 !important; }
html[data-sa~="light"] .corner-btn { background: #fff !important; color: #000 !important; outline: 3px solid #000 !important; }
html[data-sa~="contrast"] .sa-tile[aria-pressed="true"]::after { background: #ffe600; color: #000; }
html[data-sa~="light"] .sa-tile[aria-pressed="true"]::after { background: #000; color: #fff; }

/* where Biskal works: a card for each device, its drawing on a soft tile of its colour */
.sec-sub { max-width: 620px; margin: 12px auto 0; font-size: 17px; color: var(--muted); text-wrap: pretty; }
/* (five cards, one width: a row of five, else three or two to a row, a short row centred) */
.pf-grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; }
.pf-grid > .pf-card { flex: 0 0 calc((100% - 4 * 16px) / 5); min-width: 0; }
.pf-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 22px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--pc) 22%, transparent); transition: transform .2s; }
.pf-card:hover { transform: translateY(-3px); }
.pf-art { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: 18px; background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--pc) 22%, transparent), color-mix(in srgb, var(--pc) 6%, transparent)); }
.pf-car .pf-art svg { width: 94%; }
.pf-art svg { width: 82%; height: auto; filter: drop-shadow(0 10px 16px rgba(15, 23, 42, .22)); }
.pf-card h3 { font-size: 21px; font-weight: 800; color: color-mix(in srgb, var(--pc) 70%, var(--text)); }
.pf-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.pf-note { margin: 22px auto 0; text-align: center; font-size: 14.5px; color: var(--muted); }
@media (max-width: 1100px) { .pf-grid > .pf-card { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 700px) { .pf-grid > .pf-card { flex-basis: calc((100% - 16px) / 2); } }
/* two to a row: the fifth, alone on its row, across the whole width, its drawing beside its words (the user: "the lone
   panel does not look right") */
@media (max-width: 700px) {
  .pf-grid > .pf-card:last-child:nth-child(odd) { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 16px; row-gap: 6px; }
  .pf-card:last-child:nth-child(odd) .pf-art { grid-row: 1 / 3; margin: 0; align-self: center; }
  .pf-card:last-child:nth-child(odd) h3 { align-self: end; }
  .pf-card:last-child:nth-child(odd) p { align-self: start; }
}
@media (max-width: 480px) { .pf-grid { gap: 10px; } .pf-grid > .pf-card { flex-basis: calc((100% - 10px) / 2); } .pf-card { padding: 12px 12px 16px; } .pf-card h3 { font-size: 18px; } .pf-card p { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .pf-card { transition: none; } .pf-card:hover { transform: none; } }

/* ---------- search of the site ---------- */
.nav-search { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); transition: background .2s, transform .2s; }
.nav-search:hover { background: rgba(255, 255, 255, .22); }
.nav-search:active { transform: scale(.92); }
.nav-search:focus-visible { outline: 2px solid #8ee6c0; outline-offset: 2px; }
@media (max-width: 960px) { .nav-search { margin-inline-start: auto; } .nav-in > .nav-search + .btn.small { margin-inline-start: 0; } }
html:has(dialog.search[open]) { overflow: hidden; }
dialog.search { width: min(700px, 100% - 24px); max-height: min(78vh, 760px); margin: 8vh auto auto; padding: 0; border: 0; border-radius: 26px; overflow: hidden; display: none; flex-direction: column;
  color: var(--text); background: var(--surface); box-shadow: 0 40px 100px rgba(0, 0, 0, .38); }
dialog.search[open] { display: flex; animation: doc-in .24s ease-out; }
dialog.search::backdrop { background: rgba(4, 20, 15, .55); backdrop-filter: blur(3px); }
.sr-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: #fff; background: var(--hero); }
.sr-glass { flex: none; display: grid; place-items: center; opacity: .85; }
.sr-field { flex: 1; min-width: 0; height: 48px; padding: 0 6px; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 20px; font-weight: 500; -webkit-appearance: none; appearance: none; }
.sr-field::placeholder { color: rgba(255, 255, 255, .6); }
.sr-field::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.sr-clear { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .16); }
.sr-clear[hidden] { display: none; }
.sr-clear:hover { background: rgba(255, 255, 255, .28); }
.sr-close { flex: none; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sr-close kbd { display: block; padding: 5px 9px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.sr-close:hover kbd { background: rgba(255, 255, 255, .26); }
@media (hover: none) { .sr-close kbd { font-size: 0; padding: 0; } .sr-close kbd::before { content: "סגירה"; font-size: 14px; padding: 7px 12px; display: block; } }
.sr-status { flex: none; margin: 0; padding: 8px 22px 0; min-height: 28px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-list { list-style: none; margin: 0; padding: 4px 10px 12px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 4px; align-content: start; }
.sr-list li[data-i] { display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.sr-list li[data-i].on { background: color-mix(in srgb, var(--brand) 11%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent); }
.sr-chip { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.sr-chip.doc { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, transparent); }
.sr-list b { font-size: 17px; font-weight: 700; line-height: 1.35; }
.sr-text { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.sr-list mark { padding: 0 2px; border-radius: 4px; color: inherit; background: color-mix(in srgb, #ffd34d 55%, transparent); }
.sr-empty { display: grid; gap: 8px; justify-items: center; padding: 30px 16px 24px; text-align: center; color: var(--muted); }
.sr-empty b { font-size: 18px; color: var(--text); }
.sr-try { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.sr-try button { padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); background: transparent; transition: background .2s, border-color .2s; }
.sr-try button:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 8%, transparent); }
/* the part the search brought you to */
.sr-hit { animation: sr-hit 2.6s ease-out; }
@keyframes sr-hit { 0%, 55% { box-shadow: 0 0 0 4px color-mix(in srgb, #ffb000 70%, transparent), 0 0 28px color-mix(in srgb, #ffb000 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
h3.sr-hit { border-radius: 8px; animation-name: sr-hit-h; }
@keyframes sr-hit-h { 0%, 55% { background: color-mix(in srgb, #ffd34d 55%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .sr-hit { animation: none; outline: 3px solid #ffb000; } }
@media (max-width: 1100px) { .ai-list li { flex-basis: calc((100% - 20px) / 3); } }
@media (max-width: 800px) { .ai-list li { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 560px) {
  /* a phone: two by two, each card's number above its words, the odd last one across */
  .ai-list li { flex-basis: calc((100% - 10px) / 2); flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .ai-list li:last-child:nth-child(odd) { flex-basis: 100%; flex-direction: row; align-items: center; }
  .ai-list b { font-size: 15px; }
  .ai-list small { font-size: 12.5px; }
}